| | |
| | | </div> |
| | | </div> |
| | | </a-spin> |
| | | |
| | | <!--权限配置弹窗--> |
| | | <AssignPermissionModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="getTreeDataByApi"/> |
| | | </a-card> |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapActions } from 'vuex' |
| | | import { deleteAction } from '@/api/manage' |
| | | import dncApi from '@/api/dnc' |
| | | import DeviceStructureTreeContextMenu from './DeviceStructureTreeContextMenu' |
| | | import AssignPermissionModal from './Permission/AssignPermissionModal' |
| | | |
| | | export default { |
| | | name: 'DeviceStructureTree', |
| | | components: { |
| | | AssignPermissionModal, |
| | | DeviceStructureTreeContextMenu |
| | | }, |
| | | data() { |
| | |
| | | treeDataSource: [], |
| | | selectedKeys: [], |
| | | expandedKeys: [], |
| | | beforeSearchExpandedKeys: [], |
| | | searchValue: '', |
| | | dataList: [], |
| | | autoExpandParent: true, |
| | |
| | | this.$bus.$on('handleSwitchDeviceDocClassCode', this.setCurrentDeviceDocClassCode) |
| | | }, |
| | | methods: { |
| | | ...mapActions(['QueryProduction']), |
| | | |
| | | getTreeDataByApi() { |
| | | this.loading = true |
| | | this.cardLoading = true |
| | | this.QueryProduction('DNC').then(res => { |
| | | if (res.success) { |
| | | this.dataList = [] |
| | | this.allTreeKeys = [] |
| | | this.treeDataSource = res.result |
| | | this.generateList(this.treeDataSource) |
| | | this.expandedKeys = this.allTreeKeys |
| | | this.$bus.$emit('sendCurrentTreeNodeInfo', this.treeDataSource[0]) |
| | | } else { |
| | | this.$message.warn(res.message) |
| | | } |
| | | }).finally(() => { |
| | | this.loading = false |
| | | this.cardLoading = false |
| | | }) |
| | | this.treeDataSource = [] |
| | | dncApi.getDeviceTreeDataApi() |
| | | .then(res => { |
| | | if (res.success) { |
| | | this.dataList = [] |
| | | this.allTreeKeys = [] |
| | | this.treeDataSource = res.result |
| | | this.generateList(this.treeDataSource) |
| | | this.expandedKeys = this.beforeSearchExpandedKeys = this.allTreeKeys |
| | | this.$bus.$emit('sendDeviceTreeNodeInfo', this.treeDataSource[0]) |
| | | } else { |
| | | this.$message.warn(res.message) |
| | | } |
| | | }) |
| | | .finally(() => { |
| | | this.loading = false |
| | | this.cardLoading = false |
| | | }) |
| | | }, |
| | | |
| | | setCurrentDeviceDocClassCode(documentActiveTabKey) { |
| | |
| | | handleTreeSelect(selectedKeys, { node }) { |
| | | let record = node.dataRef |
| | | this.currentSelected = Object.assign({}, record) |
| | | this.selectedKeys = selectedKeys |
| | | // 向右侧父级组件发送当前选中树节点信息 |
| | | this.$bus.$emit('sendCurrentTreeNodeInfo', this.currentSelected) |
| | | this.$bus.$emit('sendDeviceTreeNodeInfo', this.currentSelected) |
| | | if (selectedKeys.length === 0) return |
| | | this.selectedKeys = selectedKeys |
| | | |
| | | }, |
| | | |
| | | /** |
| | |
| | | this.rightClickSelected = Object.assign({}, record) |
| | | }, |
| | | |
| | | // 树节点右键单击菜单中删除按钮时触发 |
| | | handleDelete() { |
| | | const that = this |
| | | that.$confirm({ |
| | | title: '提示', |
| | | content: '确认删除此条记录吗?', |
| | | okText: '确认', |
| | | okType: 'danger', |
| | | cancelText: '取消', |
| | | onOk: () => { |
| | | if (!this.url.delete) { |
| | | this.$message.error('请设置url.delete属性!') |
| | | return |
| | | } |
| | | deleteAction(that.url.delete, { id: this.rightClickSelected.id }) |
| | | .then((res) => { |
| | | if (res.success) { |
| | | that.getTreeDataByApi() |
| | | that.$notification.success({ |
| | | message: '消息', |
| | | description: res.message |
| | | }) |
| | | } else { |
| | | that.$notification.warning({ |
| | | message: '消息', |
| | | description: res.message |
| | | }) |
| | | } |
| | | }) |
| | | .finally(() => { |
| | | that.$destroyAll() |
| | | }) |
| | | }, |
| | | onCancel: () => { |
| | | that.$destroyAll() |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * 自动展开添加下级节点的父节点 |
| | | */ |
| | | modalFormSubmitSuccess(isAddNextLevel) { |
| | | // 判断是否为添加下级并且判断父节点是否展开 |
| | | if (isAddNextLevel && !this.expandedKeys.includes(this.rightClickSelected.id)) this.expandedKeys.push(this.rightClickSelected.id) |
| | | this.getTreeDataByApi() |
| | | }, |
| | | |
| | | /** |
| | | * 树节点展开合并时触发 |
| | | * @param expandedKeys 展开项key |
| | | */ |
| | | handleTreeExpand(expandedKeys) { |
| | | this.expandedKeys = expandedKeys |
| | | this.expandedKeys = this.beforeSearchExpandedKeys = expandedKeys |
| | | console.log('beforeSearchExpandedKeys', this.beforeSearchExpandedKeys) |
| | | this.autoExpandParent = false |
| | | }, |
| | | |
| | | /* 输入查询内容变化时触发 */ |
| | | handleSearchInputChange() { |
| | | let search = this.searchInput |
| | | let expandedKeys = this.dataList |
| | | .map(item => { |
| | | if (item.title != null) { |
| | | if (item.title.indexOf(search) > -1) { |
| | | return this.getParentKey(item.key, this.treeDataSource) |
| | | let expandedKeys |
| | | let autoExpandParent |
| | | if (search !== '') { |
| | | expandedKeys = this.dataList |
| | | .map(item => { |
| | | if (item.title != null) { |
| | | if (item.title.indexOf(search) > -1) { |
| | | return this.getParentKey(item.key, this.treeDataSource) |
| | | } |
| | | return null |
| | | } |
| | | return null |
| | | } |
| | | }) |
| | | .filter((item, i, self) => item && self.indexOf(item) === i) |
| | | }) |
| | | .filter((item, i, self) => item && self.indexOf(item) === i) |
| | | autoExpandParent = true |
| | | } else { |
| | | expandedKeys = this.beforeSearchExpandedKeys |
| | | autoExpandParent = false |
| | | } |
| | | |
| | | Object.assign(this, { |
| | | expandedKeys, |
| | | searchValue: search, |
| | | autoExpandParent: true |
| | | autoExpandParent |
| | | }) |
| | | }, |
| | | |