| | |
| | | <a-card class="tree_con" :loading="cardLoading" :bordered="false" @contextmenu.native="e=>e.preventDefault()"> |
| | | <a-spin :spinning="loading"> |
| | | <div style="display: flex;flex-direction: column;height: 100%"> |
| | | <div style="display: flex;justify-content: space-between"> |
| | | <div style="display: flex"> |
| | | <a-input placeholder="输入关键字进行搜索" allowClear v-model="searchInput" |
| | | @change="handleSearchInputChange"/> |
| | | <a-tooltip title="刷新"> |
| | | <a-button icon="reload" @click="getTreeDataByApi" style="width: 18%;margin-left: 8px"></a-button> |
| | | </a-tooltip> |
| | | <a-button type="primary" v-has="'product_add'" icon="plus" style="margin-left: 8px" |
| | | <a-dropdown :trigger="['click']" placement="bottomCenter" style="margin: 0 8px"> |
| | | <a-menu slot="overlay"> |
| | | <a-menu-item key="1" @click="expandedKeys = allTreeKeys">展开所有</a-menu-item> |
| | | <a-menu-item key="2" @click="expandedKeys = ['-1']">合并所有</a-menu-item> |
| | | <a-menu-item key="3" @click="getTreeDataByApi">刷新</a-menu-item> |
| | | </a-menu> |
| | | <a-button> |
| | | <a-icon type="bars"/> |
| | | </a-button> |
| | | </a-dropdown> |
| | | <a-button type="primary" v-has="'product_add'" |
| | | @click="$refs.productModalFormRef.triggerCorrespondingMethod({modalTitle:'添加产品',methodName:'handleProductAdd'})"> |
| | | 添加产品 |
| | | <a-icon type="plus"></a-icon> |
| | | 产品 |
| | | </a-button> |
| | | <!-- <a-dropdown :trigger="['click']" placement="bottomCenter" style="margin: 0 8px">--> |
| | | <!-- <a-menu slot="overlay">--> |
| | | <!-- <a-menu-item key="1" @click="expandedKeys = allTreeKeys">展开所有</a-menu-item>--> |
| | | <!-- <a-menu-item key="2" @click="expandedKeys = ['-1']">合并所有</a-menu-item>--> |
| | | <!-- <a-menu-item key="3" @click="getTreeDataByApi">刷新</a-menu-item>--> |
| | | <!-- </a-menu>--> |
| | | <!-- <a-button>--> |
| | | <!-- <a-icon type="bars"/>--> |
| | | <!-- </a-button>--> |
| | | <!-- </a-dropdown>--> |
| | | </div> |
| | | |
| | | <!--产品结构树--> |
| | |
| | | <a-tree blockNode show-icon :expandedKeys.sync="expandedKeys" |
| | | :selectedKeys="selectedKeys" :treeData="treeDataSource" :autoExpandParent="autoExpandParent" |
| | | @select="handleTreeSelect" @expand="handleTreeExpand" @rightClick="handleTreeRightClick"> |
| | | <template slot="title" slot-scope="{ label, parentId, key:treeKey,type}"> |
| | | <template slot="title" slot-scope="{ label, parentId, entity, key:treeKey,type}"> |
| | | <ProductStructureTreeContextMenu ref="contextMenuRef" |
| | | :treeParams="{label,treeKey,searchValue,type}"/> |
| | | :treeParams="{label,treeKey,searchValue,type,entity}"/> |
| | | </template> |
| | | |
| | | <a-icon slot="switcherIcon" type="down"/> |
| | |
| | | import ProcessModal from './Process/ProcessModal' |
| | | import ProcessStepModal from './ProcessStep/ProcessStepModal' |
| | | import AssignPermissionModal from './Permission/AssignPermissionModal' |
| | | import DeviceCustomTypeModal from '@views/dnc/base/modules/ProductStructure/DeviceCustomType/DeviceCustomTypeModal.vue' |
| | | |
| | | export default { |
| | | name: 'ProductStructureTree', |
| | | components: { |
| | | DeviceCustomTypeModal, |
| | | AssignPermissionModal, |
| | | ProcessStepModal, |
| | | ProcessModal, |
| | |
| | | autoExpandParent: true, |
| | | checkStrictly: true, |
| | | allTreeKeys: [], |
| | | currentSelected: {}, |
| | | rightClickSelected: {}, |
| | | url: { |
| | | delete: '/nc/product/delete' |
| | |
| | | getTreeDataByApi() { |
| | | this.loading = true |
| | | this.cardLoading = true |
| | | this.treeDataSource = [] |
| | | dncApi.getProductStructureTreeApi() |
| | | .then(res => { |
| | | if (res.success) { |
| | | console.log('res=================', res) |
| | | this.dataList = [] |
| | | this.allTreeKeys = [] |
| | | this.treeDataSource = res.result |
| | |
| | | * @param {node} node 节点对象 |
| | | */ |
| | | handleTreeSelect(selectedKeys, { node }) { |
| | | const that = this |
| | | let record = node.dataRef |
| | | const { id, type } = record |
| | | dncApi.getProductStructureTreeNodeEntityApi({ id, type }) |
| | | .then(res => { |
| | | if (res.success) { |
| | | let currentSelectedNodeInfo |
| | | if (res.result.length > 0) { |
| | | currentSelectedNodeInfo = Object.assign({}, record, { entity: res.result[0] }) |
| | | } else { |
| | | currentSelectedNodeInfo = {} |
| | | that.$notification.warning({ |
| | | message: '消息', |
| | | description: '暂无该节点详细信息' |
| | | }) |
| | | } |
| | | // 向右侧父级组件发送当前选中树节点信息 |
| | | this.$bus.$emit('sendCurrentTreeNodeInfo', currentSelectedNodeInfo) |
| | | } else { |
| | | that.$notification.error({ |
| | | message: '消息', |
| | | description: res.message |
| | | }) |
| | | } |
| | | }) |
| | | this.currentSelected = Object.assign({}, record) |
| | | // 向右侧父级组件发送当前选中树节点信息 |
| | | this.$bus.$emit('sendCurrentTreeNodeInfo', this.currentSelected) |
| | | if (selectedKeys.length === 0) return |
| | | this.selectedKeys = selectedKeys |
| | | }, |
| | | |
| | | /** |
| | | * 树节点右键单击节点时触发 |
| | | * @param event 事件对象 |
| | | * @param node 节点对象 |
| | | */ |
| | | handleTreeRightClick({ node }) { |
| | | const that = this |
| | | handleTreeRightClick({ event, node }) { |
| | | const record = node.dataRef |
| | | const { id, type } = record |
| | | dncApi.getProductStructureTreeNodeEntityApi({ id, type }) |
| | | .then(res => { |
| | | if (res.success) { |
| | | if (res.result.length > 0) { |
| | | that.rightClickSelected = Object.assign({}, record, { entity: res.result[0] }) |
| | | } else { |
| | | that.rightClickSelected = {} |
| | | that.$notification.warning({ |
| | | message: '消息', |
| | | description: '暂无该节点详细信息' |
| | | }) |
| | | } |
| | | } else { |
| | | that.$notification.error({ |
| | | message: '消息', |
| | | description: res.message |
| | | }) |
| | | } |
| | | }) |
| | | this.rightClickSelected = Object.assign({}, record) |
| | | }, |
| | | |
| | | // 树节点右键单击菜单中删除按钮时触发 |
| | |
| | | this.autoExpandParent = false |
| | | }, |
| | | |
| | | // 输入查询内容变化时触发(增加防抖机制) |
| | | /* 输入查询内容变化时触发 */ |
| | | handleSearchInputChange() { |
| | | const that = this |
| | | let timer |
| | | if (timer) clearTimeout(timer) |
| | | timer = setTimeout(function() { |
| | | that.searchAndExpandTreeNode() // 加小括号调用函数 |
| | | }, 1000) |
| | | }, |
| | | |
| | | // 防抖函数中触发搜索并展开树节点 |
| | | searchAndExpandTreeNode() { |
| | | let search = this.searchInput |
| | | let expandedKeys |
| | | let autoExpandParent |
| | |
| | | expandedKeys = this.beforeSearchExpandedKeys |
| | | autoExpandParent = false |
| | | } |
| | | |
| | | Object.assign(this, { |
| | | expandedKeys, |
| | | searchValue: search, |
| | |
| | | * @param treeNode |
| | | */ |
| | | setTreeNodeIcon(treeNode) { |
| | | switch (+treeNode.type) { |
| | | switch (treeNode.type) { |
| | | case 1: |
| | | treeNode.slots = { icon: 'product' } |
| | | break |