| | |
| | | <template> |
| | | <a-card class="tree_con" :loading="cardLoading" :bordered="false" @contextmenu.native="e=>e.preventDefault()"> |
| | | <a-card class="tree_con" :loading="cardLoading" :bordered="false" @contextmenu.native.stop="openBaseContextMenu"> |
| | | <a-spin :spinning="loading"> |
| | | <div style="display: flex;flex-direction: column;height: 100%"> |
| | | <div style="display: flex;justify-content: space-between"> |
| | | <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" |
| | | @click="$refs.productModalFormRef.triggerCorrespondingMethod({modalTitle:'添加产品',methodName:'handleProductAdd'})"> |
| | | 添加产品 |
| | | </a-button> |
| | | @change="handleSearchInputChange" /> |
| | | <!-- <a-tooltip title="刷新">--> |
| | | <!-- <a-button icon="reload" @click="handleTreeReload" style="width: 18%;margin-left: 8px"></a-button>--> |
| | | <!-- </a-tooltip>--> |
| | | <!-- <a-button type="primary" v-has="'product_add'" icon="plus" style="margin-left: 8px"--> |
| | | <!-- @click="$refs.productModalFormRef.triggerCorrespondingMethod({modalTitle:'添加产品',methodName:'handleProductAdd'})">--> |
| | | <!-- 产品--> |
| | | <!-- </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>--> |
| | |
| | | </div> |
| | | |
| | | <!--产品结构树--> |
| | | <div style="flex: 1;overflow:auto;margin-top: 10px"> |
| | | <div id="tree-container" style="flex: 1;overflow:auto;margin-top: 10px"> |
| | | <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}"> |
| | | <ProductStructureTreeContextMenu ref="contextMenuRef" |
| | | :treeParams="{label,treeKey,searchValue,type}"/> |
| | | :treeParams="{label,treeKey,searchValue,type}" /> |
| | | </template> |
| | | |
| | | <a-icon slot="switcherIcon" type="down"/> |
| | | <a-icon slot="product" type="shopping"/> |
| | | <a-icon slot="component" type="camera"/> |
| | | <a-icon slot="part" type="hdd"/> |
| | | <a-icon slot="processSpecVersion" type="tag"/> |
| | | <a-icon slot="process" type="apartment"/> |
| | | <a-icon slot="processStep" type="tool"/> |
| | | <a-icon slot="switcherIcon" type="down" /> |
| | | <a-icon slot="product" type="shopping" /> |
| | | <a-icon slot="component" type="camera" /> |
| | | <a-icon slot="part" type="hdd" /> |
| | | <a-icon slot="processSpecVersion" type="tag" /> |
| | | <a-icon slot="process" type="apartment" /> |
| | | <a-icon slot="processStep" type="tool" /> |
| | | </a-tree> |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | <!--产品弹窗--> |
| | | <ProductModal ref="productModalFormRef" :currentTreeNodeInfo="rightClickSelected" |
| | | @submitSuccess="getTreeDataByApi"/> |
| | | @submitSuccess="getTreeDataByApi" /> |
| | | <!--部件弹窗--> |
| | | <ComponentModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/> |
| | | <ComponentModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess" /> |
| | | <!--零件弹窗--> |
| | | <PartModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/> |
| | | <PartModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess" /> |
| | | <!--工艺规程版本弹窗--> |
| | | <ProcessSpecVersionModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/> |
| | | <ProcessSpecVersionModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess" /> |
| | | <!--工序弹窗--> |
| | | <ProcessModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/> |
| | | <ProcessModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess" /> |
| | | <!--工步弹窗--> |
| | | <ProcessStepModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/> |
| | | <ProcessStepModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess" /> |
| | | <!--权限配置弹窗--> |
| | | <AssignPermissionModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/> |
| | | <AssignPermissionModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess" /> |
| | | <!--检索电子模板弹窗--> |
| | | <NcDocumentSearchModal :currentDocumentInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess" /> |
| | | <!--引用部件--> |
| | | <NcComponentBorrowModal :currentBorrowInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess" /> |
| | | <!--产品结构树基本右键菜单(空白处触发)--> |
| | | <ProductStructureBaseContextMenu ref="baseContextmenuRef" /> |
| | | </a-card> |
| | | </template> |
| | | |
| | |
| | | import ProcessStepModal from './ProcessStep/ProcessStepModal' |
| | | import AssignPermissionModal from './Permission/AssignPermissionModal' |
| | | import DeviceCustomTypeModal from '@views/dnc/base/modules/ProductStructure/DeviceCustomType/DeviceCustomTypeModal.vue' |
| | | import ProductStructureBaseContextMenu |
| | | from '@views/dnc/base/modules/ProductStructure/ProductStructureBaseContextMenu.vue' |
| | | import NcDocumentSearchModal from '@views/dnc/base/modules/ProductStructure/Document/NcDocumentSearchModal.vue' |
| | | import NcComponentBorrowModal from '@views/dnc/base/modules/ProductStructure/Document/NcComponentBorrowModal.vue' |
| | | |
| | | export default { |
| | | name: 'ProductStructureTree', |
| | | components: { |
| | | ProductStructureBaseContextMenu, |
| | | DeviceCustomTypeModal, |
| | | AssignPermissionModal, |
| | | ProcessStepModal, |
| | |
| | | PartModal, |
| | | ComponentModal, |
| | | ProductModal, |
| | | ProductStructureTreeContextMenu |
| | | ProductStructureTreeContextMenu, |
| | | NcDocumentSearchModal, |
| | | NcComponentBorrowModal |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | this.getTreeDataByApi() |
| | | this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod) |
| | | }, |
| | | beforeDestroy() { |
| | | this.$bus.$off('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod) |
| | | }, |
| | | methods: { |
| | | // 调用接口获取树的数据 |
| | | getTreeDataByApi() { |
| | | this.loading = true |
| | | this.cardLoading = true |
| | |
| | | * @param node 节点对象 |
| | | */ |
| | | handleTreeRightClick({ node }) { |
| | | if (this.$refs.baseContextmenuRef) this.$refs.baseContextmenuRef.menuVisible = false |
| | | const that = this |
| | | const record = node.dataRef |
| | | const { id, type } = record |
| | |
| | | |
| | | /** |
| | | * 自动展开添加下级节点的父节点 |
| | | * @param isAddNextLevel 是否需要展开下级 |
| | | */ |
| | | modalFormSubmitSuccess(isAddNextLevel) { |
| | | // 判断是否为添加下级并且判断父节点是否展开 |
| | |
| | | } |
| | | }, |
| | | |
| | | triggerCorrespondingMethod({ methodName }) { |
| | | if (this[methodName]) this[methodName]() |
| | | /** |
| | | * 树所在父元素的右键事件 |
| | | * @param event 事件对象 |
| | | */ |
| | | openBaseContextMenu(event) { |
| | | event.preventDefault() |
| | | if (event.target.id !== 'tree-container') return |
| | | this.$refs.baseContextmenuRef.menuStyle.top = event.clientY + 'px' |
| | | this.$refs.baseContextmenuRef.menuStyle.left = event.clientX + 'px' |
| | | this.$refs.baseContextmenuRef.menuVisible = true |
| | | document.body.addEventListener('click', this.handleBaseContextMenuClose) |
| | | }, |
| | | |
| | | /** |
| | |
| | | break |
| | | default: |
| | | } |
| | | }, |
| | | |
| | | // 控制基础右键菜单关闭 |
| | | handleBaseContextMenuClose() { |
| | | this.$refs.baseContextmenuRef.menuVisible = false |
| | | document.body.removeEventListener('click', this.handleBaseContextMenuClose) |
| | | }, |
| | | |
| | | // 刷新重新获取树的数据 |
| | | handleTreeReload() { |
| | | this.getTreeDataByApi() |
| | | }, |
| | | |
| | | triggerCorrespondingMethod({ methodName }) { |
| | | if (this[methodName]) this[methodName]() |
| | | } |
| | | |
| | | } |
| | | } |
| | | </script> |