From 1cb9d9ae71b82acc17a14cf09833d58b84e1a0b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E9=98=B3?= <1261474562@qq.com>
Date: Thu, 19 Jun 2025 18:15:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=B2=E9=80=89=E6=8B=A9=E7=9A=84=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/DocExportDialog/index.vue  | 41 +++++++++++++--
 front/src/components/DocTree/index.vue        | 38 +++++++++++++-
 front/src/views/project/ShareConfig/index.vue | 51 +++++++++++++++++--
 3 files changed, 123 insertions(+), 7 deletions(-)

diff --git a/front/src/components/DocExportDialog/index.vue b/front/src/components/DocExportDialog/index.vue
index 674c59ef..3135d83d 100644
--- a/front/src/components/DocExportDialog/index.vue
+++ b/front/src/components/DocExportDialog/index.vue
@@ -40,7 +40,11 @@
           </el-checkbox-group>
         </el-form-item>
         <el-form-item v-show="dialogFormData.isAll === 0">
-          <doc-tree ref="docTreeRef" readonly />
+          <div class="checked-nodes">
+            <span>选中的菜单：</span>
+            <el-tag v-for="tag in selectParentNodes" :key="tag.id" closable @close="handleClose(tag)"> {{ tag.name }} </el-tag>
+          </div>
+          <doc-tree ref="docTreeRef" readonly @checkedNodes="handleTreeCheckedNodes" @setNodesChecked="setNodesChecked" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -75,7 +79,9 @@ export default {
         envIds: []
       },
       envs: [],
-      loading: false
+      loading: false,
+      selectNodes: [],
+      selectParentNodes: []
     }
   },
   computed: {
@@ -94,12 +100,36 @@ export default {
   },
   methods: {
     show(data, moduleId) {
+      this.selectNodes = []
+      this.selectParentNodes = []
       this.loadEnv(moduleId)
       this.dialogVisible = true
       this.$nextTick(() => {
+        this.$refs.docTreeRef.initFilterText()
         this.$refs.docTreeRef.setData(data)
+        this.$refs.docTreeRef.setCheckedKeys([])
       })
     },
+    handleClose(tag) {
+      const nodes = this.selectParentNodes.filter(item => item.id !== tag.id)
+      this.selectParentNodes = [...nodes]
+      this.$refs.docTreeRef.setCheckedKeys([...nodes.map(item => item.id)])
+    },
+    handleTreeCheckedNodes(rows, unIds = []) {
+      const oldRows = this.selectNodes
+      const ids = oldRows.map(item => item.id)
+      const selectRows = rows.filter(item => {
+        if (!ids.includes(item.id)) {
+          return item
+        }
+      })
+      this.selectNodes = [...oldRows, ...selectRows].filter(item => !unIds.includes(item.id))
+      this.selectParentNodes = this.selectNodes.filter(item => !item.children.length)
+    },
+    setNodesChecked() {
+      const rows = this.selectParentNodes.map(item => item.id)
+      this.$refs.docTreeRef.setCheckedKeys([...rows])
+    },
     loadEnv(moduleId) {
       this.get('module/environment/list', { moduleId: moduleId }, resp => {
         this.envs = resp.data
@@ -111,7 +141,7 @@ export default {
       if (this.dialogFormData.isAll === 1) {
         keys = this.$refs.docTreeRef.getAllKeys()
       } else {
-        keys = this.$refs.docTreeRef.getCheckedAllKeys()
+        keys = this.selectNodes.map(item => item.id)
         if (!keys || keys.length === 0) {
           this.tipError(this.$t('pleaseCheckDoc'))
           return
@@ -179,3 +209,8 @@ export default {
   }
 }
 </script>
+<style scoped>
+.checked-nodes {
+  margin-bottom: 15px;
+}
+</style>
diff --git a/front/src/components/DocTree/index.vue b/front/src/components/DocTree/index.vue
index 33d32130..8afb2678 100644
--- a/front/src/components/DocTree/index.vue
+++ b/front/src/components/DocTree/index.vue
@@ -6,6 +6,7 @@
       :placeholder="$t('filterNameUrl')"
       size="mini"
       clearable
+      @input="debouncedInput"
     >
     </el-input>
     <el-tree
@@ -29,6 +30,7 @@
   </div>
 </template>
 <script>
+import _ from 'lodash'
 export default {
   props: {
     viewMode: {
@@ -51,6 +53,9 @@ export default {
       filterText: ''
     }
   },
+  created() {
+    this.debouncedInput = _.debounce(this.handleInput, 500)
+  },
   computed: {
     treeRows() {
       let search = this.filterText.trim()
@@ -76,6 +81,12 @@ export default {
         }
       })
     },
+    initFilterText() {
+      this.filterText = ''
+    },
+    handleInput() {
+      this.$emit('setNodesChecked')
+    },
     isFolder(row) {
       return row.isFolder === 1
     },
@@ -84,14 +95,39 @@ export default {
         (row.name && row.name.toLowerCase().indexOf(searchText) > -1) ||
         (row.id && row.id.toLowerCase().indexOf(searchText) > -1)
     },
-    onCheckClick(data, status) {
+     onCheckClick(data, status) {
+      let unCheckedNodes = []
       const node = this.$refs.tree.getNode(data)
+      const childNodes = node.childNodes
       if (!node.checked) {
+        const nodeKey = [node.key]
+        unCheckedNodes = [...nodeKey]
+        if (childNodes.length) {
+          unCheckedNodes = [...nodeKey, ...this.getUncheckedNodes(childNodes)]
+        }
         data.isShareFolder = false
         status.halfCheckedNodes.forEach(data => {
           data.isShareFolder = false
         })
       }
+      this.$emit('checkedNodes', this.getCheckedNodes())
+      this.$nextTick(() => {
+        this.$emit('checkedNodes', this.getCheckedNodes(), unCheckedNodes)
+      })
+    },
+    getUncheckedNodes(childNodes) {
+      let ret = []
+      for (let i = 0; i < childNodes.length; i++) {
+        let arr = []
+        const data = childNodes[i]
+        arr.push(childNodes[i].key)
+        if (data.childNodes && data.childNodes.length > 0) {
+          const childrenData = this.getUncheckedNodes(data.childNodes)
+          arr = arr.concat(childrenData)
+        }
+        ret = ret.concat(arr)
+      }
+      return ret
     },
     isChecked(data) {
       const keys = this.$refs.tree.getCheckedKeys()
diff --git a/front/src/views/project/ShareConfig/index.vue b/front/src/views/project/ShareConfig/index.vue
index d3a3fe06..8d4b931a 100644
--- a/front/src/views/project/ShareConfig/index.vue
+++ b/front/src/views/project/ShareConfig/index.vue
@@ -181,7 +181,15 @@
           </el-checkbox-group>
         </el-form-item>
         <el-form-item v-show="dialogFormData.isAll === 0">
-          <doc-tree ref="docTreeRef"/>
+          <div class="checked-nodes">
+            <span>选中的菜单：</span>
+            <el-tag v-for="tag in selectParentNodes" :key="tag.id" closable @close="handleClose(tag)"> {{ tag.name }} </el-tag>
+          </div>
+          <doc-tree
+            ref="docTreeRef"
+            message="sharePage"
+            @checkedNodes="handleTreeCheckedNodes"
+            @setNodesChecked="setNodesChecked" />
         </el-form-item>
         <el-form-item :label="$t('remark')">
           <el-input v-model="dialogFormData.remark" :placeholder="$t('optional')" show-word-limit maxlength="50"/>
@@ -254,7 +262,9 @@ export default {
         disabledDate(time) {
           return time.getTime() < Date.now() - 8.64e7; // Disable dates before today
         }
-      }
+      },
+      selectNodes: [],
+      selectParentNodes: []
     }
   },
   computed: {
@@ -272,6 +282,26 @@ export default {
     }
   },
   methods: {
+    handleClose(tag) {
+      const nodes = this.selectParentNodes.filter(item => item.id !== tag.id)
+      this.selectParentNodes = [...nodes]
+      this.$refs.docTreeRef.setCheckedKeys([...nodes.map(item => item.id)])
+    },
+    handleTreeCheckedNodes(rows, unIds = []) {
+      const oldRows = this.selectNodes
+      const ids = oldRows.map(item => item.id)
+      const selectRows = rows.filter(item => {
+        if (!ids.includes(item.id)) {
+          return item
+        }
+      })
+      this.selectNodes = [...oldRows, ...selectRows].filter(item => !unIds.includes(item.id))
+      this.selectParentNodes = this.selectNodes.filter(item => !item.children.length)
+    },
+    setNodesChecked() {
+      const rows = this.selectParentNodes.map(item => item.id)
+      this.$refs.docTreeRef.setCheckedKeys([...rows])
+    },
     togglePasswordVisibility() {
       this.passwordType = this.passwordType === 'password' ? 'text' : 'password';
     },
@@ -307,6 +337,8 @@ export default {
       }
     },
     onAdd() {
+      this.selectNodes = []
+      this.selectParentNodes = []
       this.dialogTitle = this.$t('newShare')
       this.dialogVisible = true
       this.dialogFormData = {
@@ -344,9 +376,12 @@ export default {
       this.dialogFormData = this.$data.dialogFormData
     },
     onTableUpdate(row) {
+      this.selectNodes = []
+      this.selectParentNodes = []
       this.dialogTitle = this.$t('updateShare')
       this.dialogVisible = true
       this.$nextTick(() => {
+        this.$refs.docTreeRef.initFilterText()
         Object.assign(this.dialogFormData, row)
 
         if (row.isShowDebug) {
@@ -369,6 +404,9 @@ export default {
               }
             }, tree => {
               tree.setCheckedKeys(idList)
+              this.$nextTick(() => {
+                this.handleTreeCheckedNodes(this.$refs.docTreeRef.getCheckedNodes(), [])
+              })
             })
           })
         } else {
@@ -400,7 +438,8 @@ export default {
     onDialogSave() {
       const data = this.dialogFormData
       data.moduleId = this.moduleId
-      const checkedNodes = this.$refs.docTreeRef.getCheckedNodes()
+       const checkedNodes = [...this.selectNodes]
+      // const checkedNodes = this.$refs.docTreeRef.getCheckedNodes()
       if (!data.isAll && checkedNodes.length === 0) {
         this.tipError(this.$t('pleaseCheckDoc'))
         return
@@ -449,6 +488,8 @@ export default {
       }
       this.post(uri, this.dialogFormData, () => {
         this.dialogVisible = false
+        this.selectNodes = []
+        this.selectParentNodes = []
         this.reload()
       })
     },
@@ -537,4 +578,8 @@ export default {
 .password-wrapper:hover .copy-btn {
   opacity: 1;
 }
+
+.checked-nodes {
+  margin-bottom: 15px;
+}
 </style>
-- 
Gitee