169 lines
4.0 KiB
Vue
169 lines
4.0 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%">
|
|
<product-info-add ref="prodectInfo" @successSubmit="successSubmit" />
|
|
</base-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ProductInfoAdd from './components/productInfoAdd.vue';
|
|
import { getProductConfigPage,delProductConfig } from '@/api/basicInfoConfig';
|
|
import { publicFormatter } from '@/utils/dict';
|
|
const tableProps = [
|
|
{
|
|
prop: 'product',
|
|
label: '产品名称'
|
|
},
|
|
{
|
|
prop: 'process',
|
|
label: '工艺',
|
|
filter: publicFormatter('process')
|
|
},
|
|
{
|
|
prop: 'spec',
|
|
label: '规格'
|
|
},
|
|
];
|
|
export default {
|
|
name: 'ProductInfoConfiguration',
|
|
components:{ProductInfoAdd},
|
|
data () {
|
|
return {
|
|
formConfig: [
|
|
{
|
|
type: 'input',
|
|
label: '产品名称',
|
|
placeholder: '产品名称',
|
|
param: 'product'
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '查询',
|
|
name: 'search',
|
|
color: 'primary',
|
|
},
|
|
{
|
|
type: 'separate',
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '新增',
|
|
name: 'add',
|
|
color: 'success',
|
|
plain: true
|
|
}
|
|
],
|
|
listQuery:{
|
|
product:'',
|
|
pageSize:20,
|
|
pageNo:1
|
|
},
|
|
total:0,
|
|
tableData:[],
|
|
tableProps,
|
|
tableBtn:[
|
|
{
|
|
type: 'edit',
|
|
btnName: '编辑',
|
|
},
|
|
{
|
|
type: 'delete',
|
|
btnName: '删除',
|
|
},
|
|
],
|
|
addOrEditTitle: '',
|
|
centervisible: false,
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getDataList();
|
|
},
|
|
methods: {
|
|
buttonClick(val) {
|
|
switch (val.btnName) {
|
|
case 'search':
|
|
this.listQuery.product = val.product;
|
|
this.listQuery.pageNo = 1;
|
|
this.getDataList();
|
|
break;
|
|
case 'add':
|
|
this.addOrEditTitle = '新增';
|
|
this.$nextTick(() => {
|
|
this.$refs.prodectInfo.init();
|
|
});
|
|
this.centervisible = true;
|
|
break;
|
|
}
|
|
},
|
|
getDataList() {
|
|
getProductConfigPage({
|
|
...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.prodectInfo.init(val.data.id);
|
|
});
|
|
this.centervisible = true;
|
|
break;
|
|
default:
|
|
this.handleDelete(val.data);
|
|
}
|
|
},
|
|
handleCancel() {
|
|
this.$refs.prodectInfo.formClear();
|
|
this.centervisible = false;
|
|
this.addOrEditTitle = '';
|
|
},
|
|
handleConfirm() {
|
|
this.$refs.prodectInfo.submitForm();
|
|
},
|
|
successSubmit() {
|
|
this.handleCancel();
|
|
this.getDataList();
|
|
},
|
|
/** 删除按钮操作 */
|
|
handleDelete(row) {
|
|
let _this = this;
|
|
_this.$modal.confirm('确定删除产品"' + row.product + '吗？').then(function() {
|
|
delProductConfig({id:row.id}).then(response => {
|
|
_this.getDataList();
|
|
_this.$modal.msgSuccess("删除成功");
|
|
})
|
|
}).catch(() => {});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
padding: 16px;
|
|
}
|
|
</style> |