From 2a7f7124c307216faaef321dff84aa5c67c7058c Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期五, 13 六月 2025 15:48:13 +0800
Subject: [PATCH] 实现产品结构树页面检索NC文件窗口中点击NC文件后界面跳转至树节点层级下NC文件界面功能
---
src/views/dnc/base/modules/ProductStructure/ProductStructureTree.vue | 824 +++++++++++++++++++++++++++++++---------------------------
1 files changed, 442 insertions(+), 382 deletions(-)
diff --git a/src/views/dnc/base/modules/ProductStructure/ProductStructureTree.vue b/src/views/dnc/base/modules/ProductStructure/ProductStructureTree.vue
index 9d8320b..7ca8dcb 100644
--- a/src/views/dnc/base/modules/ProductStructure/ProductStructureTree.vue
+++ b/src/views/dnc/base/modules/ProductStructure/ProductStructureTree.vue
@@ -4,7 +4,7 @@
<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" />
+ @change="handleSearchInputChange"/>
<!-- <a-tooltip title="鍒锋柊">-->
<!-- <a-button icon="reload" @click="handleTreeReload" style="width: 18%;margin-left: 8px"></a-button>-->
<!-- </a-tooltip>-->
@@ -31,16 +31,16 @@
@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>
@@ -48,421 +48,481 @@
<!--浜у搧寮圭獥-->
<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" />
+ <NcDocumentSearchModal :currentDocumentInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/>
<!--妫�绱C鏂囦欢寮圭獥-->
- <NcDocumentSearchNcModal :currentDocumentInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess" />
+ <NcDocumentSearchNcModal :currentDocumentInfo="rightClickSelected" @searchTreeNode="searchTreeNode"
+ @submitSuccess="modalFormSubmitSuccess"/>
<!--寮曠敤閮ㄤ欢-->
- <NcComponentBorrowModal :currentBorrowInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess" />
+ <NcComponentBorrowModal :currentBorrowInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/>
<!--浜у搧缁撴瀯鏍戝熀鏈彸閿彍鍗�(绌虹櫧澶勮Е鍙�)-->
- <ProductStructureBaseContextMenu ref="baseContextmenuRef" />
+ <ProductStructureBaseContextMenu ref="baseContextmenuRef"/>
+
+ <div class="full-screen-container" v-if="fullScreenSpinning">
+ <a-spin :spinning="fullScreenSpinning" size="large" tip="NC鏂囦欢妫�绱腑..."/>
+ </div>
</a-card>
</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 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'
-import ProductStructureBaseContextMenu
- from '@views/dnc/base/modules/ProductStructure/ProductStructureBaseContextMenu.vue'
-import NcDocumentSearchModal from '@views/dnc/base/modules/ProductStructure/Document/NcDocumentSearchModal.vue'
-import NcDocumentSearchNcModal from '@views/dnc/base/modules/ProductStructure/Document/NcDocumentSearchNcModal.vue'
-import NcComponentBorrowModal from '@views/dnc/base/modules/ProductStructure/Document/NcComponentBorrowModal.vue'
+ 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'
+ import ProductStructureBaseContextMenu
+ from '@views/dnc/base/modules/ProductStructure/ProductStructureBaseContextMenu.vue'
+ import NcDocumentSearchModal from '@views/dnc/base/modules/ProductStructure/Document/NcDocumentSearchModal.vue'
+ import NcDocumentSearchNcModal from '@views/dnc/base/modules/ProductStructure/Document/NcDocumentSearchNcModal.vue'
+ import NcComponentBorrowModal from '@views/dnc/base/modules/ProductStructure/Document/NcComponentBorrowModal.vue'
-export default {
- name: 'ProductStructureTree',
- components: {
- ProductStructureBaseContextMenu,
- DeviceCustomTypeModal,
- AssignPermissionModal,
- ProcessStepModal,
- ProcessModal,
- ProcessSpecVersionModal,
- PartModal,
- ComponentModal,
- ProductModal,
- ProductStructureTreeContextMenu,
- NcDocumentSearchModal,
- NcDocumentSearchNcModal,
- NcComponentBorrowModal
- },
- 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)
- },
- beforeDestroy() {
- this.$bus.$off('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.result
- this.generateList(this.treeDataSource)
- // this.expandedKeys = this.allTreeKeys
- 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
- })
+ export default {
+ name: 'ProductStructureTree',
+ components: {
+ ProductStructureBaseContextMenu,
+ DeviceCustomTypeModal,
+ AssignPermissionModal,
+ ProcessStepModal,
+ ProcessModal,
+ ProcessSpecVersionModal,
+ PartModal,
+ ComponentModal,
+ ProductModal,
+ ProductStructureTreeContextMenu,
+ NcDocumentSearchModal,
+ NcDocumentSearchNcModal,
+ NcComponentBorrowModal
},
-
- /**
- * 鏍戣妭鐐归�変腑鏃惰Е鍙�
- * @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: '鏆傛棤璇ヨ妭鐐硅缁嗕俊鎭�'
- })
- }
- // 鍚戝彸渚х埗绾х粍浠跺彂閫佸綋鍓嶉�変腑鏍戣妭鐐逛俊鎭�
- this.$bus.$emit('sendCurrentTreeNodeInfo', currentSelectedNodeInfo)
- } else {
- that.$notification.error({
- message: '娑堟伅',
- description: res.message
- })
- }
- })
- if (selectedKeys.length === 0) return
- this.selectedKeys = selectedKeys
- },
-
- /**
- * 鏍戣妭鐐瑰彸閿崟鍑昏妭鐐规椂瑙﹀彂
- * @param node 鑺傜偣瀵硅薄
- */
- handleTreeRightClick({ node }) {
- if (this.$refs.baseContextmenuRef) this.$refs.baseContextmenuRef.menuVisible = false
- 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
- })
- }
- })
- },
-
- // 鏍戣妭鐐瑰彸閿崟鍑昏彍鍗曚腑鍒犻櫎鎸夐挳鏃惰Е鍙�
- 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()
+ data() {
+ return {
+ searchInput: '',
+ cardLoading: false,
+ loading: false,
+ treeDataSource: [],
+ selectedKeys: [],
+ expandedKeys: [],
+ beforeSearchExpandedKeys: [],
+ searchValue: '',
+ dataList: [],
+ autoExpandParent: true,
+ checkStrictly: true,
+ allTreeKeys: [],
+ rightClickSelected: {},
+ fullScreenSpinning: false,
+ url: {
+ delete: '/nc/product/delete'
}
- })
+ }
},
-
- /**
- * 鑷姩灞曞紑娣诲姞涓嬬骇鑺傜偣鐨勭埗鑺傜偣
- * @param isAddNextLevel 鏄惁闇�瑕佸睍寮�涓嬬骇
- */
- modalFormSubmitSuccess(isAddNextLevel) {
- // 鍒ゆ柇鏄惁涓烘坊鍔犱笅绾у苟涓斿垽鏂埗鑺傜偣鏄惁灞曞紑
- if (isAddNextLevel && !this.expandedKeys.includes(this.rightClickSelected.id)) this.expandedKeys.push(this.rightClickSelected.id)
+ created() {
this.getTreeDataByApi()
+ this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
+ this.$bus.$on('searchNcFinished', () => this.fullScreenSpinning = false)
},
-
- /**
- * 鏍戣妭鐐瑰睍寮�鍚堝苟鏃惰Е鍙�
- * @param expandedKeys 灞曞紑椤筴ey
- */
- handleTreeExpand(expandedKeys) {
- this.expandedKeys = this.beforeSearchExpandedKeys = expandedKeys
- this.autoExpandParent = false
+ beforeDestroy() {
+ this.$bus.$off('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.result
+ this.generateList(this.treeDataSource)
+ // this.expandedKeys = this.allTreeKeys
+ 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
+ })
+ },
- // 杈撳叆鏌ヨ鍐呭鍙樺寲鏃惰Е鍙戯紙澧炲姞闃叉姈鏈哄埗锛�
- 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) {
- return this.getParentKey(item.key, this.treeDataSource)
+ /**
+ * 鏍戣妭鐐归�変腑鏃惰Е鍙�
+ * @param selectedKeys 閫変腑鑺傜偣key
+ * @param eventOrRecord 鑺傜偣瀵硅薄鎴栬�呮墜鍔ㄤ紶鍏ecord
+ */
+ handleTreeSelect(selectedKeys, eventOrRecord) {
+ const that = this
+ let record = eventOrRecord.node ? eventOrRecord.node.dataRef : eventOrRecord
+ 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: '鏆傛棤璇ヨ妭鐐硅缁嗕俊鎭�'
+ })
}
- return null
+ // 鍚戝彸渚х埗绾х粍浠跺彂閫佸綋鍓嶉�変腑鏍戣妭鐐逛俊鎭�
+ this.$bus.$emit('sendCurrentTreeNodeInfo', currentSelectedNodeInfo)
+ } else {
+ that.$notification.error({
+ message: '娑堟伅',
+ description: res.message
+ })
}
})
- .filter((item, i, self) => item && self.indexOf(item) === i)
- autoExpandParent = true
- } else {
- expandedKeys = this.beforeSearchExpandedKeys
- autoExpandParent = false
- }
- Object.assign(this, {
- expandedKeys,
- searchValue: search,
- autoExpandParent
- })
- },
+ if (selectedKeys.length === 0) return
+ this.selectedKeys = selectedKeys
+ },
- /**
- * 閫掑綊鑾峰緱杈撳叆椤圭殑鐖剁骇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)
+ /**
+ * 鏍戣妭鐐瑰彸閿崟鍑昏妭鐐规椂瑙﹀彂
+ * @param node 鑺傜偣瀵硅薄
+ */
+ handleTreeRightClick({ node }) {
+ if (this.$refs.baseContextmenuRef) this.$refs.baseContextmenuRef.menuVisible = false
+ 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
+ })
+ }
+ })
+ },
+
+ // 鏍戣妭鐐瑰彸閿崟鍑昏彍鍗曚腑鍒犻櫎鎸夐挳鏃惰Е鍙�
+ 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()
+ }
+ })
+ },
+
+ /**
+ * 鑷姩灞曞紑娣诲姞涓嬬骇鑺傜偣鐨勭埗鑺傜偣
+ * @param isAddNextLevel 鏄惁闇�瑕佸睍寮�涓嬬骇
+ */
+ 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
+ },
+
+ /**
+ * 妫�绱C鏂囦欢寮圭獥涓弻鍑昏璁板綍鍚庤Е鍙戞悳绱C鏂囦欢瀵瑰簲鏍戣妭鐐瑰苟妯℃嫙閫変腑鏍戣妭鐐规煡璇㈠搴旇澶囩被鎴朜C鏂囦欢
+ * @param searchNcRecord 妫�绱C鏂囦欢寮圭獥涓弻鍑昏幏寰楃殑NC鏂囦欢鍒楄〃琛岃褰�
+ */
+ searchTreeNode(searchNcRecord) {
+ this.fullScreenSpinning = true
+ const { attributionId, nodeCode, nodeName, nodeId, docId } = searchNcRecord
+ this.searchInput = `[${nodeCode}]${nodeName}`
+ this.searchAndExpandTreeNode()
+ const treeNodeRecord = Object.assign({
+ autoClickedLevelInfo: {
+ attributionId,
+ docId
+ }
+ }, this.getTreeNodeRecord(nodeId, this.treeDataSource))
+ this.handleTreeSelect([treeNodeRecord.id], treeNodeRecord)
+ },
+
+ // 杈撳叆鏌ヨ鍐呭鍙樺寲鏃惰Е鍙戯紙澧炲姞闃叉姈鏈哄埗锛�
+ 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) {
+ return this.getParentKey(item.key, this.treeDataSource)
+ }
+ return null
+ }
+ })
+ .filter((item, i, self) => item && self.indexOf(item) === i)
+ 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)
+ }
}
}
+ return parentKey
+ },
+
+ /**
+ * 閫掑綊鑾峰緱杈撳叆椤圭殑record瀵硅薄
+ * @param key record瀵硅薄key鍊�
+ * @param tree 鏍戣妭鐐�
+ */
+ getTreeNodeRecord(key, tree) {
+ let treeNodeRecord
+ for (let i = 0; i < tree.length; i++) {
+ const node = tree[i]
+ if (node.children) {
+ if (node.children.findIndex(item => item.key === key) > -1) {
+ treeNodeRecord = node.children.find(item => item.key === key)
+ } else if (this.getTreeNodeRecord(key, node.children)) {
+ treeNodeRecord = this.getTreeNodeRecord(key, node.children)
+ }
+ }
+ }
+ return treeNodeRecord
+ },
+
+ /**
+ * 閫掑綊鑾峰緱鎵�鏈夋爲鑺傜偣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)
+ }
+ },
+
+ /**
+ * 鏍戞墍鍦ㄧ埗鍏冪礌鐨勫彸閿簨浠�
+ * @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)
+ },
+
+ /**
+ * 璁剧疆鏍戣妭鐐瑰浘鏍�
+ * @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:
+ }
+ },
+
+ // 鎺у埗鍩虹鍙抽敭鑿滃崟鍏抽棴
+ handleBaseContextMenuClose() {
+ if (this.$refs.baseContextmenuRef) this.$refs.baseContextmenuRef.menuVisible = false
+ document.body.removeEventListener('click', this.handleBaseContextMenuClose)
+ },
+
+ // 鍒锋柊閲嶆柊鑾峰彇鏍戠殑鏁版嵁
+ handleTreeReload() {
+ this.getTreeDataByApi()
+ },
+
+ triggerCorrespondingMethod({ methodName }) {
+ if (this[methodName]) this[methodName]()
}
- 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)
- }
- },
-
- /**
- * 鏍戞墍鍦ㄧ埗鍏冪礌鐨勫彸閿簨浠�
- * @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)
- },
-
- /**
- * 璁剧疆鏍戣妭鐐瑰浘鏍�
- * @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:
- }
- },
-
- // 鎺у埗鍩虹鍙抽敭鑿滃崟鍏抽棴
- handleBaseContextMenuClose() {
- if(this.$refs.baseContextmenuRef)this.$refs.baseContextmenuRef.menuVisible = false
- document.body.removeEventListener('click', this.handleBaseContextMenuClose)
- },
-
- // 鍒锋柊閲嶆柊鑾峰彇鏍戠殑鏁版嵁
- handleTreeReload() {
- this.getTreeDataByApi()
- },
-
- triggerCorrespondingMethod({ methodName }) {
- if (this[methodName]) this[methodName]()
}
-
}
-}
</script>
<style lang="less" scoped>
-/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-tree-title, .ant-tree-title .ant-dropdown-trigger {
- display: inline-block;
- width: calc(100% - 24px) !important;
-}
-
-::-webkit-scrollbar {
- width: 8px;
-}
-
-@media screen and (min-width: 1920px) {
- .tree_con {
- height: 748px !important;
+ /deep/ .ant-card-body {
+ padding: 0 12px 0 0;
}
-}
-@media screen and (min-width: 1680px) and (max-width: 1920px) {
- .tree_con {
- height: 748px !important;
+ /deep/ .ant-card-body, /deep/ .ant-spin-nested-loading, /deep/ .ant-spin-container {
+ height: 100%;
}
-}
-@media screen and (min-width: 1400px) and (max-width: 1680px) {
- .tree_con {
- height: 600px !important;
+ /deep/ .ant-tree-title, .ant-tree-title .ant-dropdown-trigger {
+ display: inline-block;
+ width: calc(100% - 24px) !important;
}
-}
-@media screen and (min-width: 1280px) and (max-width: 1400px) {
- .tree_con {
- height: 501px !important;
+ ::-webkit-scrollbar {
+ width: 8px;
}
-}
-@media screen and (max-width: 1280px) {
- .tree_con {
- height: 501px !important;
+ .full-screen-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, .8);
+ z-index: 9999;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
}
-}
+
+ @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: 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 (max-width: 1280px) {
+ .tree_con {
+ height: 501px !important;
+ }
+ }
</style>
--
Gitblit v1.9.3