Tue Nov 21 09:30:00 CST 2023 inscode

src/App.vue

@@ -5,13 +5,15 @@ import register from './component/userLogin/login-dialog-button.vue'
 import announcementType from './component/enterpriseAnnouncement/announcementType.vue';
 import departments from './component/humanResources/department.vue'
 import jobTitle from './component/humanResources/jobTitle.vue';
+import empss from './component/humanResources/emp.vue';
 </script>
 
 <template>
-  <contractCategory></contractCategory>
+  <!-- <contractCategory></contractCategory>
   <contract-list></contract-list>
   <announcementType></announcementType>
-  <departments></departments>
+  <departments></departments> -->
+  <empss></empss>
   <job-title></job-title>
   <el-row>
     <el-col>后台管理平台</el-col>

src/component/humanResources/emp.vue

 <script setup>
+import { onMounted, ref } from 'vue'
+import { deepClone } from '@/util/deepCode'
+import { TreeToFlat } from '@/util/toTree'
+import { computed } from '@vue/reactivity';
+import { getHumanResourcesDepartment } from '@/api/api';
+onMounted(()=>{
+    treeData.value = TreeToFlat(deepClone(getHumanResourcesDepartment().data.data)).tree;
+})
+const treeData = ref([
+    {
+        id: 1,
+        label: 'Level one 1',
+        children: [
+            {
+                id: 4,
+                label: 'Level two 1-1',
+                children: [
+                    {
+                        id: 9,
+                        label: 'Level three 1-1-1',
+                    },
+                    {
+                        id: 10,
+                        label: 'Level three 1-1-2',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 2,
+        label: 'Level one 2',
+        children: [
+            {
+                id: 5,
+                label: 'Level two 2-1',
+            },
+            {
+                id: 6,
+                label: 'Level two 2-2',
+            },
+        ],
+    },
+    {
+        id: 3,
+        label: 'Level one 3',
+        children: [
+            {
+                id: 7,
+                label: 'Level two 3-1',
+            },
+            {
+                id: 8,
+                label: 'Level two 3-2',
+            },
+        ],
+    },
+]);
+const defaultProps = {
+    children: 'children',
+    label: 'label',
+}
+const defExpandedKey = computed(()=>{
+    return TreeToFlat(deepClone(treeData.value)).map((item) => item.id);
+})
 </script>
 
 <template>
+    <div class="common-layout">
+        <el-container>
+            <el-aside>
+                <el-tree :data="treeData" show-checkbox node-key="id"
+                    :default-expanded-keys="defExpandedKey"
+                    :default-checked-keys="[5]" :props="defaultProps" />
+            </el-aside>
+            <el-main>
 
+            </el-main>
+        </el-container>
+    </div>
 </template>
 
-<style scoped>
-
+<style scoped></style>
\ No newline at end of file
-</style>
\ No newline at end of file