<template>
<div class="app-container" id="commonDiv">
<el-form ref="queryForm" :model="queryParams" :inline="true">
<el-form-item label="Supplier name" prop="mc">
<el-input v-model="" placeholder="Supplier name"/>
</el-form-item>
<el-form-item label="Supplier Type" prop="lx">
<el-select v-model="" placeholder="Supplier Type">
<el-option v-for="item in lxOperations" :key="" :label="" :value="">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">search</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">Reset</el-button>
</el-form-item>
</el-form>
<!-- Icon Display -->
<el-row>
<el-row :gutter="10">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['jcpz:gyspz:add']">New</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="el-icon-edit" size="mini" @click="handleUpdate" :disabled="single" v-hasPermi="['jcpz:gyspz:edit']">Revise</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDelete" :disabled="multiple" v-hasPermi="['jcpz:gyspz:remove']">delete</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['jcpz:gyspz:export']">Export</el-button>
</el-col>
</el-row>
</el-row>
<!-- Data Display -->
<el-table v-loading="loading" :data="dataList" row-key="bbm" :header-cell-style="{ background: '#eef1f6', color: '#606266', 'text-align': 'center' }" @selection-change="handleSelectionChange" style="width: 100%;margin-top:5px" :height="tableHeight">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="Serial number" align="center" width="70px">
<template #default="scope">
<span>{{ ( - 1) * () + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="Supplier name" align="center" prop="mc" :show-overflow-tooltip="true" />
<el-table-column label="Contact number" align="center" prop="lxdh" :show-overflow-tooltip="true" />
<el-table-column label="address" align="center" prop="dz" :show-overflow-tooltip="true" />
<el-table-column label="Supplier Type" align="center" prop="lx" :show-overflow-tooltip="true">
<template slot-scope="scope">
<div v-if=" == '0'" style="color: #1c84c6">supplier</div>
<div v-if=" == '1'" style="color: #0ba32f">Sales target</div>
</template>
</el-table-column>
</el-table>
<!-- Pagination -->
<pagination v-show="total > 0" :total="total" :="" :="" @pagination="getList" />
<!-- New | Modify pop-up box -->
<add-edit ref="addEdit" @success_="getList"></add-edit>
</div>
</template>
<script>
import addEdit from './'
import { listType, infoType, delType } from '@/api/jcpz/gyspz'
export default {
name: 'Gyspz',
components: { addEdit },
data() {
return {
//Table height
tableHeight: null,
// Mask layer
loading: false,
// Select the array
ids: [],
// Not single disabled
single: true,
// Non-multiple disables
multiple: true,
// Total number of
total: 0,
// Creation time
dateRange: [],
// Conditional query
queryParams: { pageNum: 1, pageSize: 20, mc: null, lx: null },
// Data list
dataList: [],
// Supplier Type
lxOperations: [{label: 'supplier', value: '0'}, {label: 'Sales target', value: '1'}],
}
},
mounted(){
this.tableHeight = document.getElementById('commonDiv').offsetHeight - 200;
this.getList()
},
methods: {
/**
* Conditional query
*/
getList(){
this.loading = true;
listType(this.addDateRange(this.queryParams, this.dateRange)).then((res) => {
this.dataList = res.rows;
this.total = res.total;
this.loading = false;
})
},
/**
* New
*/
handleAdd(){
this.$refs.addEdit.title = 'Add supplier information'
this.$refs.addEdit.lxOperations = this.lxOperations
this.$refs.addEdit.visible = true
},
/**
* Revise
* @param row
*/
handleUpdate(row){
const id = row.bbm || this.ids
infoType(id).then((res) => {
this.$refs.addEdit.title = 'Modify supplier information'
this.$refs.addEdit.lxOperations = this.lxOperations
this.$refs.addEdit.form = res.data
this.$refs.addEdit.visible = true
})
},
/**
* delete
* @param row
*/
handleDelete(row){
const ids = row.bbm || this.ids;
this.$modal.confirm('Whether to confirm the deletion number is "' + ids + '" data item?').then(function () {
return delType(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("Delete successfully");
}).catch(() => { });
},
/**
* Export
*/
handleExport(){
this.download('xxx/export', {
...this.queryParams
}, `gyspz_${new Date().getTime()}.xlsx`)
},
/**
* search
*/
handleQuery(){
this.queryParams.pageNum = 1;
this.getList();
},
/**
* Reset
*/
resetQuery(){
this.dateRange = [];
this.queryParams = { pageNum: 1, pageSize: 20, mc: null, lx: null }
this.resetForm("queryForm");
this.handleQuery();
},
/**
* Multiple selection boxes to select data
*/
handleSelectionChange(selection) {
this.ids = selection.map(item => item.bbm)
this.single = selection.length != 1
this.multiple = !selection.length
},
}
}
</script>
<style scoped>
#commonDiv{
width: 100%;
height: calc(100vh - 84px);
}
</style>
