174 lines
4.2 KiB
Vue
174 lines
4.2 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
|
<base-table v-if="tableData.length" class="right-aside" :table-props="tableProps"
|
|
:page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData">
|
|
<method-btn v-if="tableBtn.length" slot="handleBtn" :width="200" label="操作" :method-list="tableBtn"
|
|
@clickBtn="handleClick" />
|
|
</base-table>
|
|
<pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="total" @pagination="getDataList" :background="true" />
|
|
<!-- 新增 -->
|
|
<base-dialog
|
|
:dialogTitle="addOrEditTitle"
|
|
:dialogVisible="centervisible"
|
|
@cancel="handleCancel"
|
|
@confirm="handleConfirm"
|
|
:before-close="handleCancel"
|
|
width="50%">
|
|
<customer-info-add ref="customerList" @successSubmit="successSubmit" />
|
|
</base-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CustomerInfoAdd from './components/customerInfoAdd.vue';
|
|
import { getCustomerConfigPage,delCustomerConfig } from '@/api/basicInfoConfig';
|
|
const tableProps = [
|
|
{
|
|
prop: 'name',
|
|
label: '客户名称'
|
|
},
|
|
{
|
|
prop: 'code',
|
|
label: '客户编码'
|
|
},
|
|
{
|
|
prop: 'factoryNameList',
|
|
label: '所属基地',
|
|
filter: (val) => val ? val.join(',') :'-'
|
|
},
|
|
];
|
|
export default {
|
|
name: 'CustomerInfoConfiguration',
|
|
components:{CustomerInfoAdd},
|
|
data () {
|
|
return {
|
|
formConfig: [
|
|
{
|
|
type: 'input',
|
|
label: '客户名称',
|
|
placeholder: '客户名称',
|
|
param: 'name'
|
|
},
|
|
{
|
|
type: 'input',
|
|
label: '客户编码',
|
|
placeholder: '客户编码',
|
|
param: 'code'
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '查询',
|
|
name: 'search',
|
|
color: 'primary',
|
|
},
|
|
{
|
|
type: 'separate',
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '新增',
|
|
name: 'add',
|
|
color: 'success',
|
|
plain: true
|
|
}
|
|
],
|
|
listQuery:{
|
|
name:'',
|
|
code:'',
|
|
pageSize:20,
|
|
pageNo:1
|
|
},
|
|
total:0,
|
|
tableData:[],
|
|
tableProps,
|
|
tableBtn:[
|
|
{
|
|
type: 'edit',
|
|
btnName: '编辑',
|
|
},
|
|
{
|
|
type: 'delete',
|
|
btnName: '删除',
|
|
},
|
|
],
|
|
addOrEditTitle: '',
|
|
centervisible: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getDataList();
|
|
},
|
|
methods: {
|
|
buttonClick(val) {
|
|
console.log(val)
|
|
switch (val.btnName) {
|
|
case 'search':
|
|
this.listQuery.name = val.name
|
|
this.listQuery.code = val.code
|
|
this.listQuery.pageNo = 1;
|
|
this.getDataList();
|
|
break;
|
|
case 'add':
|
|
this.addOrEditTitle = '新增';
|
|
this.$nextTick(() => {
|
|
this.$refs.customerList.init();
|
|
});
|
|
this.centervisible = true;
|
|
break;
|
|
}
|
|
},
|
|
getDataList() {
|
|
getCustomerConfigPage({...this.listQuery}).then(res => {
|
|
if (res.code === 0) {
|
|
this.tableData = res.data.list;
|
|
this.total = res.data.total;
|
|
}else{
|
|
this.tableData = [];
|
|
this.total = 0;
|
|
}
|
|
})
|
|
},
|
|
handleClick(val) {
|
|
switch (val.type) {
|
|
case 'edit':
|
|
this.addOrEditTitle = '编辑';
|
|
this.$nextTick(() => {
|
|
this.$refs.customerList.init(val.data.id);
|
|
});
|
|
this.centervisible = true;
|
|
break;
|
|
default:
|
|
this.handleDelete(val.data);
|
|
}
|
|
},
|
|
handleCancel() {
|
|
this.$refs.customerList.formClear();
|
|
this.centervisible = false;
|
|
this.addOrEditTitle = '';
|
|
},
|
|
handleConfirm() {
|
|
this.$refs.customerList.submitForm();
|
|
},
|
|
successSubmit() {
|
|
this.handleCancel();
|
|
this.getDataList();
|
|
},
|
|
/** 删除按钮操作 */
|
|
handleDelete(row) {
|
|
let _this = this;
|
|
_this.$modal.confirm('确定删除客户"' + row.name + '吗？').then(function() {
|
|
delCustomerConfig({id:row.id}).then(response => {
|
|
_this.$modal.msgSuccess("删除成功");
|
|
_this.getDataList();
|
|
})
|
|
}).catch(() => {});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
padding: 16px;
|
|
}
|
|
</style> |