<template> <div> <dee-table ref="historyTable" selection-row :options="options" :columns="columns" :data="tableData" @selection-change="selectionChange"> <div slot="header" style="display: flex;width: 100%;justify-content: space-between;"> <dee-tools :tools="tools" mode="normal" :permissions="permissions" :perm-enable="true" /> </div> </dee-table> <dee-dialog :title="dialogTitle" :dialog-visible="dialogVisible" width="45%" @handleClose="cancel"> <div style="display: flex;font-size: 14px"> <div> <span>路线用于:</span> </div> <div style="margin-left: 15px"> <div>{{ form.router }}</div> <div style="margin:30px 0 20px 50px">{{ form.router1 }}</div> </div> </div> <dee-table ref="historyTable" selection-row :options="options" :columns="dialogColumns" :data="dialogTableData" @cell-data-change="cellDataChange" @selection-change="dialogSelectionChange"> <div v-if="dialogTitle==='添加'" slot="header" style="display: flex;width: 100%;justify-content: space-between;"> <dee-tools :tools="dialogTools" mode="normal" /> </div> </dee-table> <div class="flexCenter" style="margin-top: 20px"> <el-button type="primary" size="small" @click="save">保存</el-button> <el-button size="small" @click="cancel">取消</el-button> </div> </dee-dialog> </div> </template> <script> import { getProcessRouteByUsagelinkId, addProcessRoute, deleteRoute } from '@/api/parts' export default { // import引入的组件需要注入到对象中才能使用 components: {}, props: { basicData: { type: Object, default: () => { return {} } }, sandboxId: { type: [Number, String], default: () => 0 }, viewNode: { type: Object, default: () => { return {} } }, permissions: { type: [Array, Object], default: () => null } }, data() { // 这里存放数据 return { index: 0, options: {}, columns: [ { title: '操作', key: 'operate', align: 'center', hideTip: true, width: '60px', component: { show: true, name: 'EditTableRow', props: { btns: [ { operation: '编辑', handleClick: (row, index) => { this.dialogTitle = '编辑' this.dialogTableData = [row] this.dialogVisible = true }, icon: '/icons/c-edit.png', showFun: (row) => { if (row.permissions) { const perm = row.permissions.find(p => p.keyName.includes('ProcessRoute-edit')) if (perm && !perm.hadpage) { return false } } return true } } ] } } }, { title: '装配编号', key: 'assemblyNumber' }, { title: '装配版本', key: 'assemblyVersion' }, { title: '视图', key: 'view' }, { title: '路线', key: 'path' }, { title: '上次修改时间', key: 'modifyTime' } ], tableData: [], dialogColumns: [ { title: '路线', key: 'path', component: { name: 'el-input', size: 'small' } } ], dialogTableData: [], tools: [ { type: 'icon', name: '添加', icon: '/icons/c-add.png', key: 'ProcessRoute-add', handler: { click: () => { this.dialogTitle = '添加' this.dialogVisible = true } } }, { type: 'icon', name: '移除', key: 'ProcessRoute-delete', icon: '/icons/c-delete.png', handler: { click: () => { if (!this.selection.length) return const id = this.selection.map(x => x.id) deleteRoute(id.join(',')).then(res => { this.getProcessRouteByUsagelinkId() this.$utils.showMessage('操作成功!', 'success') }) } } } ], dialogTools: [ { type: 'icon', name: '添加', icon: '/icons/c-add.png', handler: { click: () => { this.dialogTableData.push({ path: '', id: this.index++, show: true }) } } }, { type: 'icon', name: '移除', icon: '/icons/c-delete.png', handler: { click: () => { this.dialogSelection.forEach(item => { this.dialogTableData = this.dialogTableData.filter(x => x.id !== item.id) }) } } } ], dialogTitle: '添加', dialogVisible: false, form: { router: '', router1: '' }, formData: [ { title: '路线用于', split: 1, data: [ { title: '', key: 'router', component: { name: 'readable' } }, { title: '', key: 'router1', component: { name: 'readable' }, handler: { change: (value) => { this.formData[0].data = this.formData[0].data.filter(x => x.key !== 'newViewParentId') this.$set(this.form, 'newViewParentId', '') if (!value) { this.formData[0].data.push(this.newViewItem) this.$set(this.formData[0].data.find(x => x.key === 'newViewParentId').component, 'options', [{ label: this.viewNode.data.$label, value: this.viewNode.data.id }]) this.$set(this.form, 'newViewParentId', this.viewNode.data.id) } } } } ] } ], selection: [], dialogSelection: [] } }, // 监听属性 类似于data概念 computed: {}, // 监控data中的数据变化 watch: {}, // 生命周期 - 创建完成(可以访问当前this实例) created() { }, // 生命周期 - 挂载完成(可以访问DOM元素) mounted() { this.getProcessRouteByUsagelinkId() this.form = { router: `${this.viewNode.parent.data.number} ${this.viewNode.parent.data.name} ${this.viewNode.parent.data.displayVersion}(${this.viewNode.parent.data.dxView ? this.viewNode.parent.data.dxView.name : ''}) ${this.viewNode.parent.data.dxContext ? this.viewNode.parent.data.dxContext.name : ''}`, router1: ` ${this.viewNode.data.$targetUsage.target.number} ${this.viewNode.data.$targetUsage.target.name} ${this.viewNode.data.$targetUsage.target.displayVersion}(${this.viewNode.data.$targetUsage.target.dxView ? this.viewNode.data.$targetUsage.target.dxView.name : ''}) ${this.viewNode.data.$targetUsage.target.dxContext ? this.viewNode.data.$targetUsage.target.dxContext.name : ''}` } }, activated() { }, // 方法集合 methods: { getProcessRouteByUsagelinkId() { getProcessRouteByUsagelinkId(this.viewNode.data.$targetUsage.id).then(res => { this.tableData = [] if (res.items.length) { this.tableData = res.items.map(x => { x.assemblyNumber = this.viewNode.parent.data.number x.assemblyVersion = this.viewNode.parent.data.displayVersion x.view = this.viewNode.parent.data.dxView.name if (this.permissions) { x.permissions = this.permissions } x.show = true return x }) } }) }, selectionChange(data) { this.selection = data }, dialogSelectionChange(data) { this.dialogSelection = data }, cellDataChange({ rowIndex, row }) { this.$set(this.dialogTableData, rowIndex, row) }, save() { if (this.dialogTableData.length) { const list = [] JSON.parse(JSON.stringify(this.dialogTableData)).map(x => { if (this.dialogTitle === '添加') { list.push({ path: x.path, sandboxId: this.sandboxId }) } else { this.$delete(x, 'show') this.$delete(x, 'view') this.$delete(x, 'assemblyNumber') this.$delete(x, 'assemblyVersion') list.push(x) } }) addProcessRoute({ list: list, usagelinkId: this.viewNode.data.$targetUsage.id }).then(res => { this.$utils.showMessage('操作成功!', 'success') this.getProcessRouteByUsagelinkId() this.cancel() }) } }, cancel() { this.dialogVisible = false this.dialogTableData = [] } } } </script> <style lang='scss'> </style>