From 7d697645296558cd36442be1d5afcae86d0d347d Mon Sep 17 00:00:00 2001
From: wf <2547096351@qq.com>
Date: Thu, 4 Jul 2024 11:38:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E4=BB=B6=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/file-tree-data copy.ts         | 58 +++++++++++++++
 .../components/file-tree-data.ts              | 72 ++++++++++++-------
 .../document-library/components/file-tree.vue | 42 ++++++++---
 .../document-library/document-library.vue     | 12 +---
 4 files changed, 137 insertions(+), 47 deletions(-)
 create mode 100644 src/views/file-management/document-library/components/file-tree-data copy.ts

diff --git a/src/views/file-management/document-library/components/file-tree-data copy.ts b/src/views/file-management/document-library/components/file-tree-data copy.ts
new file mode 100644
index 0000000..19e30b2
--- /dev/null
+++ b/src/views/file-management/document-library/components/file-tree-data copy.ts	
@@ -0,0 +1,58 @@
+class fileTreeData {
+  static tree: any = [
+    {
+      title: "三国地域分布",
+      key: "0-0",
+      children: [
+        {
+          title: "魏国",
+          key: "0-0-0",
+          children: [
+            { title: "司隶", key: "0-0-0-0" },
+            { title: "徐州", key: "0-0-0-1" },
+            { title: "青州", key: "0-0-0-2" },
+            { title: "豫州", key: "0-0-0-3" },
+            { title: "冀州", key: "0-0-0-4" },
+            { title: "并州", key: "0-0-0-5" },
+            { title: "幽州", key: "0-0-0-6" },
+            { title: "兖州", key: "0-0-0-7" },
+            { title: "凉州", key: "0-0-0-8" },
+            { title: "雍州", key: "0-0-0-9" }
+          ]
+        },
+        {
+          title: "吴国",
+          key: "0-0-1",
+          children: [
+            { title: "荆州", key: "0-0-1-0" },
+            { title: "扬州", key: "0-0-1-1" },
+            { title: "交州", key: "0-0-1-2" },
+            { title: "广州", key: "0-0-1-3" }
+          ]
+        },
+        {
+          title: "蜀国",
+          key: "0-0-2",
+          children: [
+            { title: "益州", key: "0-0-2-0" },
+            { title: "汉中", key: "0-0-2-1" },
+            { title: "云南", key: "0-0-2-2" }
+          ]
+        }
+      ]
+    }
+  ];
+}
+
+export { fileTreeData };
+
+// 三国（220年－280年）是上承东汉下启西晋的一段历史时期，分为曹魏、蜀汉、东吴三个政权。赤壁之战时，曹操被孙刘联军击败，奠定了三国鼎立的雏型。这三国大致继承东汉的疆域及政区制度，为州、郡、县三级制。州设刺史或州牧。郡设太守。县大者置令，小者置长。
+
+// 魏国领地
+// 曹魏的疆域主要在曹操时即大幅发展，至曹丕称帝建国后定型，约占有整个华北地区。大致上北至山西、河北及辽东，与南匈奴、鲜卑及高句丽相邻；东至黄海。东南与孙吴对峙于长江淮河一带及汉江长江一带，以寿春、襄阳为重镇；西至甘肃，与河西鲜卑、羌及氐相邻。西南与蜀汉对峙于秦岭、河西一带，以长安为重镇。在立国后原有87郡及十二州，有：司隶、徐州、青州、豫州、冀州、并州、幽州、兖州、凉州、雍州、荆州（占荆州北部）、扬州（占扬州北部）。于西域设置管辖海头（今新疆罗布泊西）的西域长史和管辖高昌的戊己校尉。221年孙权称藩后，曹魏让孙权领有荆州牧，将荆扬等孙权势力则定为荆州，曹魏原直辖的荆州北部改称为郢州。双方决裂后曹魏复改郢州为荆州。220年至226年，分陇右置秦州，最后并入雍州。
+
+// 吴国领地
+// 孙吴的疆域在孙策时即拥有大部分的扬州。孙权在赤壁之战后陆续获得荆州西部、交州，并在击败关羽后获得整个荆州南部。至孙权称帝后疆域方稳定下来。孙吴北与曹魏对峙在长江淮河一带及汉江长江一带，以建业、江陵为重镇；西与蜀汉相邻于三峡，西陵为重镇；东及南至东海南海，其中最南达现在越南的中部。孙吴原有32郡及三州：荆州、扬州、交州。于226年设置广州，后并入交州。至264年复设，共增加一州。
+
+// 蜀国领地
+// 蜀汉疆域仅有益州。其创建者刘备直到赤壁之战后才在诸葛亮协助下，由荆州南部开始发展。其势力一度涵盖荆州（占荆州西部）、益州及汉中。立国前后与孙吴发生多次战争并损失荆州，于诸葛亮南定南中后获得云南一带疆域，至此渐渐稳定。疆域范围：北方与曹魏对峙于秦岭，汉中为重镇；东与孙吴相邻于三峡，巴西为重镇；西南至岷江、南中，与羌、氐及南蛮相邻。蜀汉共有22郡、仅益州一州。于益州下设庲降都督，治味县（今云南曲靖），专辖益州南部。
diff --git a/src/views/file-management/document-library/components/file-tree-data.ts b/src/views/file-management/document-library/components/file-tree-data.ts
index a8fd16f..21b95df 100644
--- a/src/views/file-management/document-library/components/file-tree-data.ts
+++ b/src/views/file-management/document-library/components/file-tree-data.ts
@@ -1,35 +1,66 @@
 class fileTreeData {
   static tree: any = [
     {
-      title: "三国地域分布",
+      title: "总公司",
       key: "0-0",
       children: [
         {
-          title: "魏国领地",
+          title: "行政部门",
           key: "0-0-0",
           children: [
-            { title: "leaf", key: "0-0-0-0" },
             {
-              title: "leaf",
-              key: "0-0-0-1",
-              children: [{ title: "leaf", key: "0-0-0-1-0" }]
+              title: "人力资源部",
+              key: "0-0-0-0",
+              children: [{ title: "员工出差申请表", key: "0-0-0-0-0" }]
             },
-            { title: "leaf", key: "0-0-0-2" }
+            {
+              title: "财务部",
+              key: "0-0-0-1",
+              children: [{ title: "行政费用预算分析-第一季度", key: "0-0-0-0-1" }]
+            },
+            {
+              title: "法务部",
+              key: "0-0-0-2",
+              children: [{ title: "公司章程", key: "0-0-0-0-2" }]
+            },
+            { title: "行政工作计划", key: "0-0-0-3" },
+
+            { title: "会议室预订统计", key: "0-0-0-4" },
+            { title: "月度工作总结", key: "0-0-0-5" }
           ]
         },
         {
-          title: "吴国领地",
-          key: "0-0-1"
+          title: "业务部门",
+          key: "0-0-1",
+          children: [
+            { title: "客户反馈集锦", key: "0-0-1-0" },
+            { title: "市场分析报告-季度", key: "0-0-1-1" }
+          ]
         },
         {
-          title: "蜀国领地",
+          title: "技术部门",
           key: "0-0-2",
           children: [
-            { title: "leaf", key: "0-0-2-0" },
-            {
-              title: "leaf",
-              key: "0-0-2-1"
-            }
+            { title: "代码审查记录", key: "0-0-2-0" },
+            { title: "数据库优化方案", key: "0-0-2-1" },
+            { title: "技术支持工单", key: "0-0-2-2" },
+            { title: "安全漏洞扫描报告", key: "0-0-2-3" },
+            { title: "系统性能调优总结", key: "0-0-2-4" },
+            { title: "软件版本发布计划", key: "0-0-2-5" },
+            { title: "技术培训材料", key: "0-0-2-6" },
+            { title: "技术文档更新计划", key: "0-0-2-7" }
+          ]
+        },
+        {
+          title: "后勤部门",
+          key: "0-0-3",
+          children: [
+            { title: "设施维护报告", key: "0-0-3-0" },
+            { title: "物流运输安排", key: "0-0-3-1" },
+            { title: "仓库库存清单", key: "0-0-3-2" },
+            { title: "办公室布局设计", key: "0-0-3-3" },
+            { title: "设备采购申请表", key: "0-0-3-4" },
+            { title: "食品安全检查记录", key: "0-0-3-5" }
           ]
         }
       ]
@@ -38,14 +69,3 @@ class fileTreeData {
 }
 
 export { fileTreeData };
-
-// 三国（220年－280年）是上承东汉下启西晋的一段历史时期，分为曹魏、蜀汉、东吴三个政权。赤壁之战时，曹操被孙刘联军击败，奠定了三国鼎立的雏型。这三国大致继承东汉的疆域及政区制度，为州、郡、县三级制。州设刺史或州牧。郡设太守。县大者置令，小者置长。
-
-// 魏国领地
-// 曹魏的疆域主要在曹操时即大幅发展，至曹丕称帝建国后定型，约占有整个华北地区。大致上北至山西、河北及辽东，与南匈奴、鲜卑及高句丽相邻；东至黄海。东南与孙吴对峙于长江淮河一带及汉江长江一带，以寿春、襄阳为重镇；西至甘肃，与河西鲜卑、羌及氐相邻。西南与蜀汉对峙于秦岭、河西一带，以长安为重镇。在立国后原有87郡及十二州，有：司隶、徐州、青州、豫州、冀州、并州、幽州、兖州、凉州、雍州、荆州（占荆州北部）、扬州（占扬州北部）。于西域设置管辖海头（今新疆罗布泊西）的西域长史和管辖高昌的戊己校尉。221年孙权称藩后，曹魏让孙权领有荆州牧，将荆扬等孙权势力则定为荆州，曹魏原直辖的荆州北部改称为郢州。双方决裂后曹魏复改郢州为荆州。220年至226年，分陇右置秦州，最后并入雍州。
-
-// 吴国领地
-// 孙吴的疆域在孙策时即拥有大部分的扬州。孙权在赤壁之战后陆续获得荆州西部、交州，并在击败关羽后获得整个荆州南部。至孙权称帝后疆域方稳定下来。孙吴北与曹魏对峙在长江淮河一带及汉江长江一带，以建业、江陵为重镇；西与蜀汉相邻于三峡，西陵为重镇；东及南至东海南海，其中最南达现在越南的中部。孙吴原有32郡及三州：荆州、扬州、交州。于226年设置广州，后并入交州。至264年复设，共增加一州。
-
-// 蜀国领地
-// 蜀汉疆域仅有益州。其创建者刘备直到赤壁之战后才在诸葛亮协助下，由荆州南部开始发展。其势力一度涵盖荆州（占荆州西部）、益州及汉中。立国前后与孙吴发生多次战争并损失荆州，于诸葛亮南定南中后获得云南一带疆域，至此渐渐稳定。疆域范围：北方与曹魏对峙于秦岭，汉中为重镇；东与孙吴相邻于三峡，巴西为重镇；西南至岷江、南中，与羌、氐及南蛮相邻。蜀汉共有22郡、仅益州一州。于益州下设庲降都督，治味县（今云南曲靖），专辖益州南部。
diff --git a/src/views/file-management/document-library/components/file-tree.vue b/src/views/file-management/document-library/components/file-tree.vue
index 06ba049..da98002 100644
--- a/src/views/file-management/document-library/components/file-tree.vue
+++ b/src/views/file-management/document-library/components/file-tree.vue
@@ -1,17 +1,24 @@
 <template>
-  <div>
+  <div class="container-page">
     <a-input class="search-tree" v-model="searchKey" placeholder="请输入搜索关键词">
       <template #prefix>
         <icon-search />
       </template>
     </a-input>
-    <a-tree :data="treeData" :show-line="true">
-      <template #icon="node">
-        <SvgIcon name="folder-close" :size="16" v-if="!node.isLeaf && !node.expanded"></SvgIcon>
-        <SvgIcon name="folder-open" :size="16" v-if="!node.isLeaf && node.expanded"></SvgIcon>
-        <SvgIcon name="txt" :size="16" v-if="node.isLeaf"></SvgIcon>
-      </template>
-    </a-tree>
+    <div class="tree-box">
+      <a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
+        <a-tree :data="treeData" :show-line="true">
+          <template #title="node">
+            <span class="tree-title">{{ node.title }}</span>
+          </template>
+          <template #icon="node">
+            <SvgIcon name="folder-close" :size="16" v-if="!node.isLeaf && !node.expanded"></SvgIcon>
+            <SvgIcon name="folder-open" :size="16" v-if="!node.isLeaf && node.expanded"></SvgIcon>
+            <SvgIcon name="txt" :size="16" v-if="node.isLeaf"></SvgIcon>
+          </template>
+        </a-tree>
+      </a-scrollbar>
+    </div>
   </div>
 </template>
 
@@ -56,7 +63,22 @@ const sourceTree = ref(fileTreeData.tree);
 </script>
 
 <style lang="scss" scoped>
-.search-tree {
-  margin-bottom: $margin;
+.container-page {
+  box-sizing: border-box;
+  padding: $padding;
+  height: 100%;
+  .search-tree {
+    height: 32px;
+    margin-bottom: $margin;
+  }
+  .tree-box {
+    height: calc(100% - 32px - $margin);
+    .scrollbar {
+      height: 100%;
+      .tree-title {
+        white-space: nowrap;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/file-management/document-library/document-library.vue b/src/views/file-management/document-library/document-library.vue
index 30a1deb..74d1d3c 100644
--- a/src/views/file-management/document-library/document-library.vue
+++ b/src/views/file-management/document-library/document-library.vue
@@ -3,11 +3,7 @@
     <div class="container">
       <div class="container-main">
         <div class="left-box">
-          <a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
-            <div class="left-tree-box">
-              <FileTree />
-            </div>
-          </a-scrollbar>
+          <FileTree />
         </div>
         <div class="right-box"></div>
       </div>
@@ -34,12 +30,6 @@ import FileTree from "@/views/file-management/document-library/components/file-t
     width: 300px;
     height: 100%;
     background: $color-bg-1;
-    .scrollbar {
-      height: 100%;
-    }
-    .left-tree-box {
-      padding: $padding;
-    }
   }
   .right-box {
     margin-left: $padding;