From 9737ae6cbdf64098554dc99e743a52669adb8138 Mon Sep 17 00:00:00 2001 From: lyh <925863403@qq.com> Date: 星期五, 14 三月 2025 10:27:15 +0800 Subject: [PATCH] Revert "1、设备类管理页面完成增删改查功能" --- src/views/dnc/base/modules/ProductStructure/ProductStructureTree.vue | 568 ++++++++++++++++++++++++++++++++------------------------ 1 files changed, 321 insertions(+), 247 deletions(-) diff --git a/src/views/dnc/base/modules/ProductStructure/ProductStructureTree.vue b/src/views/dnc/base/modules/ProductStructure/ProductStructureTree.vue index 0a5eee6..37a06d1 100644 --- a/src/views/dnc/base/modules/ProductStructure/ProductStructureTree.vue +++ b/src/views/dnc/base/modules/ProductStructure/ProductStructureTree.vue @@ -2,24 +2,26 @@ <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"> + <div style="display: flex;justify-content: space-between"> <a-input placeholder="杈撳叆鍏抽敭瀛楄繘琛屾悳绱�" allowClear v-model="searchInput" @change="handleSearchInputChange"/> - <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'" + <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-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> <!--浜у搧缁撴瀯鏍�--> @@ -27,15 +29,16 @@ <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, entity, key:treeKey,type}"> + <template slot="title" slot-scope="{ label, parentId, key:treeKey,type}"> <ProductStructureTreeContextMenu ref="contextMenuRef" - :treeParams="{label,treeKey,searchValue,type,entity}"/> + :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-tree> @@ -50,6 +53,8 @@ <ComponentModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/> <!--闆朵欢寮圭獥--> <PartModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/> + <!--宸ヨ壓瑙勭▼鐗堟湰寮圭獥--> + <ProcessSpecVersionModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/> <!--宸ュ簭寮圭獥--> <ProcessModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/> <!--宸ユ寮圭獥--> @@ -60,156 +65,217 @@ </template> <script> - import dncApi from '@/api/dnc' - import { deleteAction } from '@/api/manage' - import ProductStructureTreeContextMenu from './ProductStructureTreeContextMenu' - import ProductModal from './Product/ProductModal' - import ComponentModal from './Component/ComponentModal' - import PartModal from './Part/PartModal' - import ProcessModal from './Process/ProcessModal' - import ProcessStepModal from './ProcessStep/ProcessStepModal' - import AssignPermissionModal from './Permission/AssignPermissionModal' +import dncApi from '@/api/dnc' +import { deleteAction } from '@/api/manage' +import ProductStructureTreeContextMenu from './ProductStructureTreeContextMenu' +import ProductModal from './Product/ProductModal' +import ComponentModal from './Component/ComponentModal' +import PartModal from './Part/PartModal' +import ProcessSpecVersionModal from './ProcessSpecVersion/ProcessSpecVersionModal' +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: { - AssignPermissionModal, - ProcessStepModal, - ProcessModal, - PartModal, - ComponentModal, - ProductModal, - ProductStructureTreeContextMenu - }, - data() { - return { - searchInput: '', - cardLoading: false, - loading: false, - treeDataSource: [], - selectedKeys: [], - expandedKeys: [], - searchValue: '', - dataList: [], - autoExpandParent: true, - checkStrictly: true, - allTreeKeys: [], - currentSelected: {}, - rightClickSelected: {}, - url: { - delete: '/nc/product/delete' - } +export default { + name: 'ProductStructureTree', + components: { + DeviceCustomTypeModal, + AssignPermissionModal, + ProcessStepModal, + ProcessModal, + ProcessSpecVersionModal, + PartModal, + ComponentModal, + ProductModal, + ProductStructureTreeContextMenu + }, + data() { + return { + searchInput: '', + cardLoading: false, + loading: false, + treeDataSource: [], + selectedKeys: [], + expandedKeys: [], + beforeSearchExpandedKeys: [], + searchValue: '', + dataList: [], + autoExpandParent: true, + checkStrictly: true, + allTreeKeys: [], + rightClickSelected: {}, + url: { + delete: '/nc/product/delete' } - }, - created() { - this.getTreeDataByApi() - this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod) - }, - methods: { - getTreeDataByApi() { - this.loading = true - this.cardLoading = true - dncApi.getProductStructureTreeApi().then(res => { + } + }, + created() { + this.getTreeDataByApi() + this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod) + }, + methods: { + getTreeDataByApi() { + this.loading = true + this.cardLoading = true + this.treeDataSource = [] + dncApi.getProductStructureTreeApi() + .then(res => { if (res.success) { this.dataList = [] this.allTreeKeys = [] - this.treeDataSource = res.list + this.treeDataSource = res.result this.generateList(this.treeDataSource) // this.expandedKeys = this.allTreeKeys - if (this.expandedKeys.length === 0) this.expandedKeys = [this.treeDataSource[0].id] + if (this.expandedKeys.length === 0) this.expandedKeys = this.beforeSearchExpandedKeys = [this.treeDataSource[0].id] } else { this.$message.warn(res.message) } }).finally(() => { - this.loading = false - this.cardLoading = false - }) - }, + this.loading = false + this.cardLoading = false + }) + }, - /** - * 鏍戣妭鐐归�変腑鏃惰Е鍙� - * @param selectedKeys 閫変腑鑺傜偣key - * @param {node} node 鑺傜偣瀵硅薄 - */ - handleTreeSelect(selectedKeys, { node }) { - let record = node.dataRef - this.currentSelected = Object.assign({}, record) - this.selectedKeys = selectedKeys - // 鍚戝彸渚х埗绾х粍浠跺彂閫佸綋鍓嶉�変腑鏍戣妭鐐逛俊鎭� - this.$bus.$emit('sendCurrentTreeNodeInfo', this.currentSelected) - }, - - /** - * 鏍戣妭鐐瑰彸閿崟鍑昏妭鐐规椂瑙﹀彂 - * @param event 浜嬩欢瀵硅薄 - * @param node 鑺傜偣瀵硅薄 - */ - handleTreeRightClick({ event, node }) { - const record = node.dataRef - 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('璇疯缃畊rl.delete灞炴��!') - return + /** + * 鏍戣妭鐐归�変腑鏃惰Е鍙� + * @param selectedKeys 閫変腑鑺傜偣key + * @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: '鏆傛棤璇ヨ妭鐐硅缁嗕俊鎭�' + }) } - 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() + // 鍚戝彸渚х埗绾х粍浠跺彂閫佸綋鍓嶉�変腑鏍戣妭鐐逛俊鎭� + this.$bus.$emit('sendCurrentTreeNodeInfo', currentSelectedNodeInfo) + } else { + that.$notification.error({ + message: '娑堟伅', + description: res.message + }) } }) - }, + if (selectedKeys.length === 0) return + this.selectedKeys = selectedKeys + }, - /** - * 鑷姩灞曞紑娣诲姞涓嬬骇鑺傜偣鐨勭埗鑺傜偣 - */ - modalFormSubmitSuccess(isAddNextLevel) { - // 鍒ゆ柇鏄惁涓烘坊鍔犱笅绾у苟涓斿垽鏂埗鑺傜偣鏄惁灞曞紑 - if (isAddNextLevel && !this.expandedKeys.includes(this.rightClickSelected.id)) this.expandedKeys.push(this.rightClickSelected.id) - this.getTreeDataByApi() - }, + /** + * 鏍戣妭鐐瑰彸閿崟鍑昏妭鐐规椂瑙﹀彂 + * @param node 鑺傜偣瀵硅薄 + */ + handleTreeRightClick({ node }) { + const that = this + 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 + }) + } + }) + }, - /** - * 鏍戣妭鐐瑰睍寮�鍚堝苟鏃惰Е鍙� - * @param expandedKeys 灞曞紑椤筴ey - */ - handleTreeExpand(expandedKeys) { - this.expandedKeys = expandedKeys - this.autoExpandParent = false - }, + // 鏍戣妭鐐瑰彸閿崟鍑昏彍鍗曚腑鍒犻櫎鎸夐挳鏃惰Е鍙� + handleDelete() { + const that = this + const { rightClickSelected: { id, type }, $confirm, url, $notification } = that + $confirm({ + title: '鎻愮ず', + content: '纭鍒犻櫎姝ゆ潯璁板綍鍚楋紵', + okText: '纭', + okType: 'danger', + cancelText: '鍙栨秷', + onOk: () => { + if (!url.delete) { + this.$message.error('璇疯缃畊rl.delete灞炴��!') + return + } + deleteAction(url.delete + `/${id}/${type}`) + .then((res) => { + if (res.success) { + that.getTreeDataByApi() + $notification.success({ + message: '娑堟伅', + description: res.message + }) + } else { + $notification.warning({ + message: '娑堟伅', + description: res.message + }) + } + }) + .finally(() => { + that.$destroyAll() + }) + }, + onCancel: () => { + that.$destroyAll() + } + }) + }, - /* 杈撳叆鏌ヨ鍐呭鍙樺寲鏃惰Е鍙� */ - handleSearchInputChange() { - let search = this.searchInput - let expandedKeys = this.dataList + /** + * 鑷姩灞曞紑娣诲姞涓嬬骇鑺傜偣鐨勭埗鑺傜偣 + */ + modalFormSubmitSuccess(isAddNextLevel) { + // 鍒ゆ柇鏄惁涓烘坊鍔犱笅绾у苟涓斿垽鏂埗鑺傜偣鏄惁灞曞紑 + if (isAddNextLevel && !this.expandedKeys.includes(this.rightClickSelected.id)) this.expandedKeys.push(this.rightClickSelected.id) + this.getTreeDataByApi() + }, + + /** + * 鏍戣妭鐐瑰睍寮�鍚堝苟鏃惰Е鍙� + * @param expandedKeys 灞曞紑椤筴ey + */ + handleTreeExpand(expandedKeys) { + this.expandedKeys = this.beforeSearchExpandedKeys = expandedKeys + 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 + if (search !== '') { + expandedKeys = this.dataList .map(item => { if (item.title != null) { if (item.title.indexOf(search) > -1) { @@ -219,128 +285,136 @@ } }) .filter((item, i, self) => item && self.indexOf(item) === i) - Object.assign(this, { - expandedKeys, - searchValue: search, - autoExpandParent: true - }) - }, + autoExpandParent = true + } else { + expandedKeys = this.beforeSearchExpandedKeys + autoExpandParent = false + } + Object.assign(this, { + expandedKeys, + searchValue: search, + autoExpandParent + }) + }, - /** - * 閫掑綊鑾峰緱杈撳叆椤圭殑鐖剁骇key - * @param key 瀛愰」key - * @param tree 瀛愰」 - */ - getParentKey(key, tree) { - let parentKey - for (let i = 0; i < tree.length; i++) { - const node = tree[i] - if (node.children) { - if (node.children.some(item => item.key === key)) { - parentKey = node.key - } else if ( - this.getParentKey(key, node.children)) { - parentKey = this.getParentKey(key, node.children) - } + /** + * 閫掑綊鑾峰緱杈撳叆椤圭殑鐖剁骇key + * @param key 瀛愰」key + * @param tree 瀛愰」 + */ + getParentKey(key, tree) { + let parentKey + for (let i = 0; i < tree.length; i++) { + const node = tree[i] + if (node.children) { + if (node.children.some(item => item.key === key)) { + parentKey = node.key + } else if ( + this.getParentKey(key, node.children)) { + parentKey = this.getParentKey(key, node.children) } } - return parentKey - }, + } + return parentKey + }, - /** - * 閫掑綊鑾峰緱鎵�鏈夋爲鑺傜偣key - * @param data - */ - generateList(data) { - for (let i = 0; i < data.length; i++) { - data[i].key = data[i].id - const node = data[i] - const key = node.id - const title = node.label - this.dataList.push({ key, title }) - this.allTreeKeys.push(key) - this.setTreeNodeIcon(node) - if (node.children) this.generateList(node.children) - } - }, + /** + * 閫掑綊鑾峰緱鎵�鏈夋爲鑺傜偣key + * @param data + */ + generateList(data) { + for (let i = 0; i < data.length; i++) { + data[i].key = data[i].id + const node = data[i] + const key = node.id + const title = node.label + this.dataList.push({ key, title }) + this.allTreeKeys.push(key) + this.setTreeNodeIcon(node) + if (node.children) this.generateList(node.children) + } + }, - triggerCorrespondingMethod({ methodName }) { - if (this[methodName]) this[methodName]() - }, + triggerCorrespondingMethod({ methodName }) { + if (this[methodName]) this[methodName]() + }, - /** - * 璁剧疆鏍戣妭鐐瑰浘鏍� - * @param treeNode - */ - setTreeNodeIcon(treeNode) { - switch (treeNode.type) { - case 1: - treeNode.slots = { icon: 'product' } - break - case 2: - treeNode.slots = { icon: 'component' } - break - case 3: - treeNode.slots = { icon: 'part' } - break - case 5: - treeNode.slots = { icon: 'process' } - break - case 6: - treeNode.slots = { icon: 'processStep' } - break - default: - } + /** + * 璁剧疆鏍戣妭鐐瑰浘鏍� + * @param treeNode + */ + setTreeNodeIcon(treeNode) { + switch (+treeNode.type) { + case 1: + treeNode.slots = { icon: 'product' } + break + case 2: + treeNode.slots = { icon: 'component' } + break + case 3: + treeNode.slots = { icon: 'part' } + break + case 4: + treeNode.slots = { icon: 'processSpecVersion' } + break + case 5: + treeNode.slots = { icon: 'process' } + break + case 6: + treeNode.slots = { icon: 'processStep' } + break + default: } } } +} </script> <style lang="less" scoped> - /deep/ .ant-card-body { - padding: 0 12px 0 0; - } +/deep/ .ant-card-body { + padding: 0 12px 0 0; +} - /deep/ .ant-card-body, /deep/ .ant-spin-nested-loading, /deep/ .ant-spin-container { - height: 100%; - } +/deep/ .ant-card-body, /deep/ .ant-spin-nested-loading, /deep/ .ant-spin-container { + height: 100%; +} - /deep/ .ant-tree-title, .ant-tree-title .ant-dropdown-trigger { - display: inline-block; - width: calc(100% - 24px) !important; - } +/deep/ .ant-tree-title, .ant-tree-title .ant-dropdown-trigger { + display: inline-block; + width: calc(100% - 24px) !important; +} - ::-webkit-scrollbar { - width: 8px; - } +::-webkit-scrollbar { + width: 8px; +} - @media screen and (min-width: 1920px) { - .tree_con { - height: 748px !important; - } +@media screen and (min-width: 1920px) { + .tree_con { + height: 748px !important; } +} - @media screen and (min-width: 1680px) and (max-width: 1920px) { - .tree_con { - height: 748px !important; - } +@media screen and (min-width: 1680px) and (max-width: 1920px) { + .tree_con { + height: 748px !important; } +} - @media screen and (min-width: 1400px) and (max-width: 1680px) { - .tree_con { - height: 600px !important; - } +@media screen and (min-width: 1400px) and (max-width: 1680px) { + .tree_con { + height: 600px !important; } +} - @media screen and (min-width: 1280px) and (max-width: 1400px) { - .tree_con { - height: 501px !important; - } +@media screen and (min-width: 1280px) and (max-width: 1400px) { + .tree_con { + height: 501px !important; } +} - @media screen and (max-width: 1280px) { - .tree_con { - height: 501px !important; - } +@media screen and (max-width: 1280px) { + .tree_con { + height: 501px !important; } +} </style> -- Gitblit v1.9.3