/** * @Description: 物料对照表 * @author xioln * @date 2023-08-30 * @FilePath: applications/dee-mes/src/privateComponents/components/MaterialReferenceLinkTable/index.vue */ <template> <div class="materialReferenceLink-table"> <dee-form :form="searchForm" :form-data="searchFormData" :form-buttons="formButtons" :form-btn-position="'center'" @on-submit="initData(searchForm)" /> <dee-up-table :columns="tableColumns" :data="tableData" :index-row="{ title: '序号', width: '60', align: 'center', fixed: true }" selection-row :pagination="pagination" @pagination-size-change="changePageSize" @pagination-current-change="changePageNum" @selection-change="selectionChange" > <dee-tools slot="header" :tools="tools" mode="normal" :collapse="false" /> </dee-up-table> <dee-dialog width="70%" title="新增" :visible.sync="addDialogVisible" @on-cancel="addCancel"> <add-form ref="addForm" @cancel="addCancel" /> </dee-dialog> </div> </template> <script> import AddForm from './components/addForm' export default { name: 'MaterialReferenceLinkTable', // name写在组件的最前方,自定义组件为必填 componentName: '物料对照表', components: { AddForm }, data() { return { addDialogVisible: false, tableColumns: [ { title: '操作', key: 'operate', align: 'center', hideTip: true, component: { show: true, name: 'EditTableRow', props: { btns: [ { operation: '编辑', handleClick: (row, index) => { this.addDialogVisible = true this.$nextTick(() => { this.$refs.addForm.editData(row) }) }, icon: '/icons/c-edit.png', showFun: (row) => { return !row.isEdit } } ] } }, width: 100 }, { title: '物料A', children: [ { title: '物料', key: 'source.resType2.typeName', align: 'center' }, { title: '物料编码', key: 'source.resCode', align: 'center' }, { title: '物料名称', key: 'source.resName', align: 'center' }, { title: '牌号/型号/件号', width: '120', key: 'source.modelNo', align: 'center' }, { title: '技术条件', key: 'source.techSpec', align: 'center' }, { title: '规格', key: 'source.spec', align: 'center' }, { title: '供应状态', key: 'source.supplyStatus', align: 'center' } ] }, { title: '物料B', children: [ { title: '物料', key: 'target.resType2.typeName', align: 'center' }, { title: '物料编码', key: 'target.resCode', align: 'center' }, { title: '物料名称', key: 'target.resName', align: 'center' }, { title: '牌号/型号/件号', width: '120', key: 'target.modelNo', align: 'center' }, { title: '技术条件', key: 'target.techSpec', align: 'center' }, { title: '规格', key: 'target.spec', align: 'center' }, { title: '供应状态', key: 'target.supplyStatus', align: 'center' } ] }], tableData: [], tools: [ { name: '新增', icon: '/icons/c-add.png', handler: { click: () => { this.addDialogVisible = true } } }, { name: '删除', icon: '/icons/c-delete.png', handler: { click: () => { console.log('this.selectionRow', this.selectionRow) const delData = this.selectionRow.map(item => item.id).join(',') this.$utils.showConfirm( '你是否确定删除选中的数据吗?', '提示', 'warning', '确定', '取消', () => { this.$api.batchDelete('MaterialReferenceLink', delData).then(res => { this.$utils.showMessageSuccess('删除成功') this.initData(this.searchForm) }) } ) } } } ], pagination: { currentPage: 1, pageSize: 10, total: 0, pageSizes: [10, 20, 50] }, selectionRow: [], formButtons: [ { 'text': '查询', 'type': 'submit', 'component': { 'type': 'primary' } } ], searchForm: { rescodeA: '', rescodeB: '' }, searchFormData: [{ split: 3, data: [ { key: 'rescodeA', title: '物料A编码', component: { name: 'el-input' } }, { key: 'rescodeB', title: '物料B编码', component: { name: 'el-input' } } ] }] } }, computed: {}, created() { // 初始化数据 this.initData() }, methods: { initData(searchForm) { // 初始化数据 const params = { 'pageFrom': this.pagination.currentPage, 'pageSize': this.pagination.pageSize, 'searchItems': { 'children': [], 'items': [] } } if (searchForm && searchForm.rescodeA) { params.searchItems.children = [ { 'items': [ { 'fieldName': 'source.resCode', 'operator': 'LIKE', 'value': searchForm.rescodeA } ], 'operator': 'OR' } ] } if (searchForm && searchForm.rescodeB) { params.searchItems.children = [ { 'items': [ { 'fieldName': 'target.resCode', 'operator': 'LIKE', 'value': searchForm.rescodeB } ], 'operator': 'OR' } ] } params.openProps = [{ name: 'target' }, { name: 'source' }] this.$api.searchApi('MaterialReferenceLink', params).then(res => { if (res.items && res.items.content) { this.tableData = res.items.content this.pagination.total = res.items.totalElements } }) }, selectionChange(v) { this.selectionRow = v }, changePageSize(pageSize) { this.pagination.pageSize = pageSize this.pagination.currentPage = 1 this.initData() }, changePageNum(pageNum) { this.pagination.currentPage = pageNum this.initData() }, addCancel(pageNum) { this.addDialogVisible = false } } } </script> <style lang='scss'> .materialReferenceLink-table { .dee-up-table { height: 500px; } } </style>