/** * @Description: * @author cxg * @date 2021/08/14 */ <template> <div class="relate-table-com"> <dee-table ref="deeTable" style="height:100%" :data="cacheTableData" :edit-table="!readOnly" :more-check="!readOnly " :columns="tableColumns" @selection-change="selectionChange" @cell-data-change="cellDataChange" > <dee-tools v-if="!readOnly" slot="header" :tools="tools" /> </dee-table> </div> </template> <script> import { getLayouts } from '@/api/config' export default { components: {}, props: { layoutType: { type: String, default: () => '' }, readOnly: { type: Boolean, default: () => false }, typeKey: { type: String, default: () => '' }, value: { type: [Array, Object], default: () => [] } }, data() { return { dictLists: {}, selectRows: [], tools: [ { name: '添加', icon: '/icons/c-batchc.png', handler: { click: () => { const selfSoleKey = this.$utils.guid() this.value.push({ operator: 'ADD', selfSoleKey: selfSoleKey }) } } }, { name: '移除', icon: '/icons/c-batchd.png', handler: { click: () => { if (this.selectRows.length === 0) { this.$utils.showMessageWarning('请选择要删除的项') return } this.selectRows.forEach(element => { this.value.forEach((el, index) => { if (el.id && el.id === element.id) { this.$set(el, 'operator', 'REMOVE') } else if (el.selfSoleKey && el.selfSoleKey === element.selfSoleKey) { this.value.splice(index, 1) } }) }) this.$emit('input', this.value) } } } ], tableColumns: [] } }, computed: { cacheTableData() { return this.value ? this.value.filter(el => { if (this.readOnly) { const dicKeyList = Object.keys(el) dicKeyList.forEach(elkey => { if (this.dictLists[elkey]) { el[elkey] = this.dictLists[elkey][el[elkey]] } }) } return el.operator !== 'REMOVE' }) : [] } }, watch: {}, mounted() {}, created() { getLayouts(this.typeKey, this.layoutType).then(res => { if (res.items[0].configDetails) { this.tableColumns = JSON.parse(res.items[0].configDetails).tableObj.tableColumns if (this.readOnly) { this.$dict.getDictList(this.tableColumns).then(res => { if (res) { const dicKeyList = Object.keys(res) dicKeyList.forEach(el => { const dicObj = {} res[el].forEach(element => { dicObj[element.value] = element.label }) this.$set(this.dictLists, el, dicObj) }) } }) } } }) }, methods: { cellDataChange({ key, row, value }) { this.value.forEach(el => { if (el.id && el.id === row.id) { el.operator === 'EDIT' el[key] = value } else if (el.selfSoleKey === row.selfSoleKey) { el[key] = value } }) this.$emit('input', this.value) }, selectionChange(rows) { this.selectRows = rows } } } </script> <style lang='scss'> </style>