优化文档树组件展开逻辑和代码格式

src/views/doc/components/main.vue

@@ -51,7 +51,7 @@
               node-key="id"
               :props="{ label: 'name', children: 'sonDirectoryList' }"
               :expand-on-click-node="false"
-              :default-expand-all="true"
+              :default-expanded-keys="defaultExpandedKeys"
               @node-click="onNodeClick"
               @node-drop="nodeDrop"
               :allow-drop="allowDrop"
@@ -59,9 +59,9 @@
               <span
                 class="custom-tree-node"
                 slot-scope="{ node, data }"
-                @contextmenu.prevent="onRightClick(data,$event)"
+                @contextmenu.prevent="onRightClick(data, $event)"
                 @click.prevent="clicka"
-                ref="trueNodeRef" 
+                ref="trueNodeRef"
               >
                 <el-popover
                   style="position: fixed; z-index: 2000"
@@ -69,7 +69,6 @@
                   ref="popoverRef"
                   v-model="visible"
                   @click.native="visible = false"
-                  
                   v-if="data.id == rightData.id && fileType === 0 && !isPop"
                 >
                   <div>
@@ -151,319 +150,322 @@
 </template>
 
 <script>
-//
-import FileTableList from '@/views/doc/components/file-table-list.vue';
-import folderEdit from '@/views/doc/components/folder-edit.vue';
-import {
-  directoryDeleteAPI,
-  getDocTreeListAPI,
-  directoryUpdateAPi,
-  validationPersonal,
-  moveDirectory
-} from '@/api/doc-manage';
-import { mapGetters } from 'vuex';
-import Power from './power/index.vue';
-import { isPower } from '../util.js';
+  //
+  import FileTableList from '@/views/doc/components/file-table-list.vue';
+  import folderEdit from '@/views/doc/components/folder-edit.vue';
+  import {
+    directoryDeleteAPI,
+    getDocTreeListAPI,
+    directoryUpdateAPi,
+    validationPersonal,
+    moveDirectory
+  } from '@/api/doc-manage';
+  import { mapGetters } from 'vuex';
+  import Power from './power/index.vue';
+  import { isPower } from '../util.js';
 
-import ElementTreeLine from 'element-tree-line';
-// css
-import 'element-tree-line/dist/style.scss';
-export default {
-  components: { FileTableList, folderEdit, ElementTreeLine, Power },
-  props: {
-    fileType: '', //0：公共文档 1：个人文档 2：文档模板
-    lcyStatus: '', //1：文档工作区 2：文档归档区 3：文档发布区 4：文档废止区
-    isPop: {
-      //是否弹出
-      default: false
+  import ElementTreeLine from 'element-tree-line';
+  // css
+  import 'element-tree-line/dist/style.scss';
+  export default {
+    components: { FileTableList, folderEdit, ElementTreeLine, Power },
+    props: {
+      fileType: '', //0：公共文档 1：个人文档 2：文档模板
+      lcyStatus: '', //1：文档工作区 2：文档归档区 3：文档发布区 4：文档废止区
+      isPop: {
+        //是否弹出
+        default: false
+      },
+      disabledTableList: {
+        //已选择列表
+        default: () => []
+      }
     },
-    disabledTableList: {
-      //已选择列表
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      isPower,
-      powerArr: [
-        { name: 'add', label: '新建' },
-        { name: 'revise', label: '修改' },
-        { name: 'del', label: '删除' }
-      ],
-      visible: false,
-      powerVisible: false,
-      rightData: {},
-      // 加载状态
-      loading: true,
-      // 列表数据
-      data: [],
-      institutionList: [],
-      // 选中数据
-      current: {},
-      // 是否显示表单弹窗
-      showFolderEditFlag: false,
-      // 编辑回显数据
-      editData: null,
-      // 上级id
-      parentId: null
-    };
-  },
-  computed: {
-    ...mapGetters(['user'])
-  },
-  created() {
-    this.query();
-  },
-  mounted() {
-    document.addEventListener('click', this.clicka);
-  },
-  destroyed() {
-    document.removeEventListener('click', this.clicka);
-  },
-
-  methods: {
-    /* 查询 */
-    async query(row) {
-      this.loading = true;
-      let query = {
-        type: this.fileType,
-        currentUserId: this.user.info.userId
+    data() {
+      return {
+        isPower,
+        powerArr: [
+          { name: 'add', label: '新建' },
+          { name: 'revise', label: '修改' },
+          { name: 'del', label: '删除' }
+        ],
+        visible: false,
+        powerVisible: false,
+        rightData: {},
+        // 加载状态
+        loading: true,
+        // 列表数据
+        data: [],
+        institutionList: [],
+        // 选中数据
+        current: {},
+        // 是否显示表单弹窗
+        showFolderEditFlag: false,
+        // 编辑回显数据
+        editData: null,
+        // 上级id
+        parentId: null,
+        defaultExpandedKeys: []
       };
-      this.data = await getDocTreeListAPI(query);
-      if (this.fileType == 1 && this.data.length == 0) {
-        await validationPersonal();
-        await this.query();
-      }
-   
-      this.$nextTick(() => {
-        if (this.$route.params.row) {
-          this.$refs.tree.setCurrentKey(this.$route.params.row.id);
-          this.onNodeClick(this.$route.params.row);
-        }else if (row&&row.id) {
-          this.$refs.tree.setCurrentKey(row.id);
-          this.onNodeClick(row);
-        }else {
-          this.$refs.tree.setCurrentKey(this.data[0].id);
-
-          this.onNodeClick(this.data[0]);
-        }
-      });
-      this.loading = false;
     },
-    /* 选择数据 */
-    onNodeClick(row, node, list) {
-      console.log('row',row, node, list)
-      if (row) {
-        // 构建完整路径
-        const fullPath = this.buildFullPath(row, this.data);
-        // 将完整路径添加到current对象中
-        this.current = {
-          ...row,
-          fullPath: fullPath
+    computed: {
+      ...mapGetters(['user'])
+    },
+    created() {
+      this.query();
+    },
+    mounted() {
+      document.addEventListener('click', this.clicka);
+    },
+    destroyed() {
+      document.removeEventListener('click', this.clicka);
+    },
+
+    methods: {
+      /* 查询 */
+      async query(row) {
+        this.loading = true;
+        let query = {
+          type: this.fileType,
+          currentUserId: this.user.info.userId
         };
+        this.data = await getDocTreeListAPI(query);
+        if (this.fileType == 1 && this.data.length == 0) {
+          await validationPersonal();
+          await this.query();
+        }
+        if (this.data.length) {
+          this.defaultExpandedKeys = [this.data[0].id];
+        }
         this.$nextTick(() => {
-          this.$refs.tableRef.reload();
+          if (this.$route.params.row) {
+            this.$refs.tree.setCurrentKey(this.$route.params.row.id);
+             this.defaultExpandedKeys = [this.$route.params.row.id];
+            this.onNodeClick(this.$route.params.row);
+          } else if (row && row.id) {
+            this.$refs.tree.setCurrentKey(row.id);
+            this.onNodeClick(row);
+          } else {
+            this.$refs.tree.setCurrentKey(this.data[0].id);
+
+            this.onNodeClick(this.data[0]);
+          }
         });
-      } else {
-        this.current = null;
-      }
-    },
-    
-    /* 构建完整路径 */
-    buildFullPath(currentNode, folderList) {
-      // 如果节点没有parentId，直接返回节点名称
-      if (!currentNode.parentId || currentNode.parentId === 0) {
-        return currentNode.name;
-      }
-      
-      // 递归查找上级节点
-      function findParent(node, list) {
-        let path = [node.name];
-        let parentId = node.parentId;
-        
-        // 递归查找所有父节点
-        function searchParent(id) {
-          for (const item of list) {
-            if (item.id === id) {
-              path.unshift(item.name); // 将父节点名称添加到路径开头
-              if (item.parentId && item.parentId !== 0) {
-                searchParent(item.parentId); // 继续查找上一级
+        this.loading = false;
+      },
+      /* 选择数据 */
+      onNodeClick(row, node, list) {
+        console.log('row', row, node, list);
+        if (row) {
+          // 构建完整路径
+          const fullPath = this.buildFullPath(row, this.data);
+          // 将完整路径添加到current对象中
+          this.current = {
+            ...row,
+            fullPath: fullPath
+          };
+          this.$nextTick(() => {
+            this.$refs.tableRef.reload();
+          });
+        } else {
+          this.current = null;
+        }
+      },
+
+      /* 构建完整路径 */
+      buildFullPath(currentNode, folderList) {
+        // 如果节点没有parentId，直接返回节点名称
+        if (!currentNode.parentId || currentNode.parentId === 0) {
+          return currentNode.name;
+        }
+
+        // 递归查找上级节点
+        function findParent(node, list) {
+          let path = [node.name];
+          let parentId = node.parentId;
+
+          // 递归查找所有父节点
+          function searchParent(id) {
+            for (const item of list) {
+              if (item.id === id) {
+                path.unshift(item.name); // 将父节点名称添加到路径开头
+                if (item.parentId && item.parentId !== 0) {
+                  searchParent(item.parentId); // 继续查找上一级
+                }
+                return;
+              }
+              // 如果当前节点有子节点，继续在子节点中查找
+              if (item.sonDirectoryList && item.sonDirectoryList.length > 0) {
+                searchParentInChildren(item.sonDirectoryList, id);
               }
-              return;
-            }
-            // 如果当前节点有子节点，继续在子节点中查找
-            if (item.sonDirectoryList && item.sonDirectoryList.length > 0) {
-              searchParentInChildren(item.sonDirectoryList, id);
             }
           }
-        }
-        
-        // 在子节点列表中查找父节点
-        function searchParentInChildren(children, id) {
-          for (const child of children) {
-            if (child.id === id) {
-              path.unshift(child.name);
-              if (child.parentId && child.parentId !== 0) {
-                searchParent(child.parentId);
+
+          // 在子节点列表中查找父节点
+          function searchParentInChildren(children, id) {
+            for (const child of children) {
+              if (child.id === id) {
+                path.unshift(child.name);
+                if (child.parentId && child.parentId !== 0) {
+                  searchParent(child.parentId);
+                }
+                return;
+              }
+              if (child.sonDirectoryList && child.sonDirectoryList.length > 0) {
+                searchParentInChildren(child.sonDirectoryList, id);
               }
-              return;
-            }
-            if (child.sonDirectoryList && child.sonDirectoryList.length > 0) {
-              searchParentInChildren(child.sonDirectoryList, id);
             }
           }
-        }
-        
-        if (parentId) {
-          searchParent(parentId);
-        }
-        
-        return path.join(' / ');
-      }
-      
-      return findParent(currentNode, folderList);
-    },
-    allowDrop(draggingNode, dropNode, type) {
-      //拖拽限制
-      return dropNode.parent.id == draggingNode.parent.id && type != 'inner';
-    },
-    clicka() {
-      this.visible = false;
-    },
 
-    onRightClick(data,PointerEvent) {
-      this.rightData = data;
-      this.visible = true;
-      this.$nextTick(() => {
-        let y = PointerEvent.pageY;
-        let x = PointerEvent.pageX+10;
-        if (PointerEvent.screenY >= PointerEvent.view.innerHeight) {
-          y -= 80;
+          if (parentId) {
+            searchParent(parentId);
+          }
+
+          return path.join(' / ');
         }
-        this.$refs.popoverRef.$el.style.top = y+'px'
-        this.$refs.popoverRef.$el.style.left = x+'px'
-      });
-    },
-    setPower(data) {
-      this.powerVisible = true;
-      this.$nextTick(() => {
-        this.$refs.PowerRef &&
-          this.$refs.PowerRef.setTableList(data.userAuthority || []);
-      });
-    },
-    //权限保存
-    powerSave(tableList) {
-      directoryUpdateAPi({
-        id: this.current.id,
-        userAuthority: tableList,
-        authority: 1
-      }).then((msg) => {
-        this.powerVisible = false;
-        this.query();
-      });
-    },
-    goTo(name, row) {
-      this.$router.push({
-        name,
-        params: {
-          row
+
+        return findParent(currentNode, folderList);
+      },
+      allowDrop(draggingNode, dropNode, type) {
+        //拖拽限制
+        return dropNode.parent.id == draggingNode.parent.id && type != 'inner';
+      },
+      clicka() {
+        this.visible = false;
+      },
+
+      onRightClick(data, PointerEvent) {
+        this.rightData = data;
+        this.visible = true;
+        this.$nextTick(() => {
+          let y = PointerEvent.pageY;
+          let x = PointerEvent.pageX + 10;
+          if (PointerEvent.screenY >= PointerEvent.view.innerHeight) {
+            y -= 80;
+          }
+          this.$refs.popoverRef.$el.style.top = y + 'px';
+          this.$refs.popoverRef.$el.style.left = x + 'px';
+        });
+      },
+      setPower(data) {
+        this.powerVisible = true;
+        this.$nextTick(() => {
+          this.$refs.PowerRef &&
+            this.$refs.PowerRef.setTableList(data.userAuthority || []);
+        });
+      },
+      //权限保存
+      powerSave(tableList) {
+        directoryUpdateAPi({
+          id: this.current.id,
+          userAuthority: tableList,
+          authority: 1
+        }).then((msg) => {
+          this.powerVisible = false;
+          this.query();
+        });
+      },
+      goTo(name, row) {
+        this.$router.push({
+          name,
+          params: {
+            row
+          }
+        });
+      },
+      /* 显示编辑 */
+      openEdit(type) {
+        if (type == 'del') {
+          this.remove();
+          return;
         }
-      });
-    },
-    /* 显示编辑 */
-    openEdit(type) {
-      if (type == 'del') {
-        this.remove();
-        return;
-      }
-      this.$refs.editRef.open(
-        type,
-        JSON.parse(JSON.stringify(this.current)),
-        this.data
-      );
-    },
-    /* 删除 */
-    remove() {
-      this.$confirm('确定要删除选中文件夹吗?', '提示', {
-        type: 'warning'
-      })
-        .then(() => {
-          const loading = this.$loading({ lock: true });
-          directoryDeleteAPI([this.current.id])
-            .then((msg) => {
-              loading.close();
-              this.$message.success('操作成功');
-              this.query();
-            })
-            .catch((e) => {
-              loading.close();
-            });
+        this.$refs.editRef.open(
+          type,
+          JSON.parse(JSON.stringify(this.current)),
+          this.data
+        );
+      },
+      /* 删除 */
+      remove() {
+        this.$confirm('确定要删除选中文件夹吗?', '提示', {
+          type: 'warning'
         })
-        .catch(() => {});
-    },
-    nodeDrop(to, form) {
-      moveDirectory({
-        targetId: form.data.id,
-        replaceId: to.data.id
-      });
-    },
-    getTableList() {
-      return this.$refs.tableRef.getTableList();
+          .then(() => {
+            const loading = this.$loading({ lock: true });
+            directoryDeleteAPI([this.current.id])
+              .then((msg) => {
+                loading.close();
+                this.$message.success('操作成功');
+                this.query();
+              })
+              .catch((e) => {
+                loading.close();
+              });
+          })
+          .catch(() => {});
+      },
+      nodeDrop(to, form) {
+        moveDirectory({
+          targetId: form.data.id,
+          replaceId: to.data.id
+        });
+      },
+      getTableList() {
+        return this.$refs.tableRef.getTableList();
+      }
     }
-  }
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-.sys-organization-list {
-  height: calc(100vh - 180px);
-  box-sizing: border-box;
-  border-width: 1px;
-  border-style: solid;
-  overflow: auto;
-}
+  .sys-organization-list {
+    height: calc(100vh - 180px);
+    box-sizing: border-box;
+    border-width: 1px;
+    border-style: solid;
+    overflow: auto;
+  }
 
-.sys-organization-list :deep(.el-tree-node__content) {
-  height: 25px;
+  .sys-organization-list :deep(.el-tree-node__content) {
+    height: 25px;
 
-  & > .el-tree-node__expand-icon {
-    margin-left: 10px;
+    & > .el-tree-node__expand-icon {
+      margin-left: 10px;
+    }
+  }
+  .custom-tree-node {
+    display: flex;
+    align-items: center;
+  }
+  :deep(.el-popover) {
+    min-width: 50px;
+    position: fixed;
+    background: #409eff;
+  }
+  :deep(.el-link--inner) {
+    padding: 3px 0;
   }
-}
-.custom-tree-node {
-  display: flex;
-  align-items: center;
-}
-:deep(.el-popover) {
-  min-width: 50px;
-  position: fixed;
-  background: #409EFF;
-  
-}
-:deep(.el-link--inner) {
-  padding: 3px 0;
-}
-:deep(.el-link.el-link--default) {
-  color:#fff
-}
-// :deep(.element-tree-node-line-hor) {
-//   border-bottom: 1px solid #dcdfe6;
-// }
-// :deep(.element-tree-node-line-ver) {
-//   border-left: 1px solid #dcdfe6;
-// }
+  :deep(.el-link.el-link--default) {
+    color: #fff;
+  }
+  // :deep(.element-tree-node-line-hor) {
+  //   border-bottom: 1px solid #dcdfe6;
+  // }
+  // :deep(.element-tree-node-line-ver) {
+  //   border-left: 1px solid #dcdfe6;
+  // }
 </style>
 <style lang="scss">
-.el-tree
-  > .el-tree-node
-  > .el-tree-node__content:nth-of-type(1)
-  .element-tree-node-line-hor {
-  border: none;
-}
-.el-tree
-  > .el-tree-node
-  > .el-tree-node__content:nth-of-type(1)
-  .element-tree-node-line-ver {
-  border: none;
-}
-</style>
+  .el-tree
+    > .el-tree-node
+    > .el-tree-node__content:nth-of-type(1)
+    .element-tree-node-line-hor {
+    border: none;
+  }
+  .el-tree
+    > .el-tree-node
+    > .el-tree-node__content:nth-of-type(1)
+    .element-tree-node-line-ver {
+    border: none;
+  }
+</style>