update 用户管理

src/views/UserPage/TestMenuItem.vue

@@ -0,0 +1,52 @@
+<template>
+  <el-submenu v-if="menuItem.children" :index="level ? level + '-' + index : '' + index">
+    <!-- 标题 -->
+    <template slot="title">
+      <i class="el-icon-menu"></i>
+      <span>{{ menuItem.label }}</span>
+    </template>
+
+    <!-- 主体 -->
+    <template v-for="(submenuItem, idx) in menuItem.children">
+      <TestMenuItem :menuItem="submenuItem" :level="level + '-' + index" :index="idx" />
+    </template>
+  </el-submenu>
+
+  <!-- 一级菜单 -->
+  <el-menu-item v-else :index="level ? level + '-' + index : '' + index">
+    <i v-if="+level !== 1" class="el-icon-aim"></i>
+    <i v-else class="el-icon-menu"></i>
+    <span slot="title">{{ menuItem.label }}</span>
+  </el-menu-item>
+</template>
+
+<script>
+export default {
+  name: 'TestMenuItem',
+  props: {
+    level: {
+      type: String,
+      default: 1
+    },
+    index: {
+      type: Number,
+      default: 0
+    },
+    menuItem: {
+      default: () => ({})
+    },
+    defaultActive: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style scoped></style>

src/views/UserPage/TestTree.vue

@@ -28,62 +28,38 @@
       <span class="title-content">合肥新能源工厂</span>
     </section>
     <section class="routes-area">
-      <ul class="root-routes">
+      <el-menu default-active="1-0-0" @select="handleSelect">
-        <li class="parent-route">
+        <template v-for="(menuItem, index) in testData">
-          <div class="route-title">
+          <TestMenuItem :index="index" level="1" :menuItem="menuItem" />
-            <div>
+        </template>
-              <span class="menu-icon">
+      </el-menu>
-                <span class="line" />
-                <span class="line" />
-                <span class="line" />
-              </span>
-              <span>制造部</span>
-            </div>
-            <span class="arrow-icon rotate-down">
-              <span class="arrow-line1" />
-              <span class="arrow-line2" />
-            </span>
-          </div>
-          <ul class="children-routes">
-            <li class="parent-route">
-              <div class="route-title" style="padding-left: 16px;">
-                <div>
-                  <span class="menu-icon">
-                    <!-- level - 2 -->
-                    <span class="circle" />
-                  </span>
-                  <span>人力资源</span>
-                </div>
-                <span class="arrow-icon">
-                  <span class="arrow-line1" />
-                  <span class="arrow-line2" />
-                </span>
-              </div>
-              <ul class="children-routes">
-                <li class="leaf-route" style="padding-left: 32px;">小组1</li>
-                <li class="leaf-route" style="padding-left: 32px;">小组2</li>
-              </ul>
-            </li>
-            <li class="leaf-route" style="padding-left: 16px;">小组2</li>
-          </ul>
-        </li>
-        <li class="leaf-route">财政部</li>
-      </ul>
     </section>
-    <section class="footer-area" />
   </div>
 </template>
 
 <script>
+import TestMenuItem from './TestMenuItem.vue'
 export default {
   name: 'TestTree',
   props: {},
+  components: { TestMenuItem },
   data() {
-    return {}
+    return {
+      testData: [
+        { id: 0, label: '制造部', children: [{ label: '小组1' }, { label: '小组2' }] },
+        { id: 1, label: '综合管理部' },
+        { id: 2, label: '销售部' }
+      ]
+    }
   },
   created() {},
   mounted() {},
-  methods: {}
+  methods: {
+    handleSelect(index, indexPath) {
+      console.log('key, keyPath:', index, indexPath)
+      this.$emit('getOrganization', { id, name: label })
+    }
+  }
 }
 </script>
 
@@ -91,7 +67,7 @@ export default {
 .test-tree {
   background: lightblue;
   height: 100%;
-  padding: 24px;
+  padding: 24px 0;
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -101,6 +77,7 @@ export default {
   display: flex;
   align-items: center;
   gap: 8px;
+  padding: 0 24px;
 }
 
 .routes-area {
@@ -120,113 +97,4 @@ export default {
   font-size: 16px;
   line-height: 1;
 }
-
-ul,
-li {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.parent-route div {
-  display: flex;
-  align-items: center;
-}
-
-.route-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 8px;
-}
-
-span.menu-icon {
-  height: 14px;
-  width: 14px;
-  margin-right: 6px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-}
-
-.line {
-  width: 100%;
-  height: 2px;
-  border-radius: 2px;
-  background-color: rgba(0, 0, 0, 0.508);
-}
-
-.arrow-icon {
-  position: relative;
-  width: 16px;
-  height: 16px;
-}
-
-.arrow-line1,
-.arrow-line2 {
-  position: absolute;
-  display: inline-block;
-  width: 1px;
-  height: 8px;
-  border-radius: 1px;
-  background-color: #000a;
-  transform-origin: top 50% left 0;
-}
-
-.arrow-line1 {
-  top: 1px;
-  left: 0;
-  transform: rotateZ(-45deg);
-}
-
-.arrow-line2 {
-  left: 0;
-  bottom: 1px;
-  transform: rotateZ(45deg);
-}
-
-.rotate-down {
-  /* transform-origin: top 50%; */
-  transform: rotateZ(90deg);
-}
-.circle {
-  width: 70%;
-  height: 70%;
-  background-color: #000c;
-  border-radius: 50%;
-  position: relative;
-}
-
-.circle::after {
-  content: '';
-  position: absolute;
-  width: 70%;
-  height: 70%;
-  border-radius: 50%;
-  top: 15%;
-  left: 15%;
-  background-color: #fff;
-}
-
-/* span.arrow-icon {
-  background: url('./right.png') 100% 100% / contain no-repeat;
-  width: 12px;
-  height: 12px;
-} */
-
-li.parent-route {
-  display: flex;
-  flex-direction: column;
-  /* background: lightpink; */
-}
-
-li.leaf-route::before {
-  content: '\25E6';
-  padding-right: 8px;
-}
-
-li.parent-route div.route-title:hover,
-li.parent-route div.route-title:hover .circle::after,
-li.leaf-route:hover {
-  background: #ccc;
-}
 </style>

src/views/UserPage/usermanage.vue

@@ -9,7 +9,8 @@
   <div class="app-container system-manage-landpage">
     <el-container>
       <el-aside>
-        <side-tree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" />
+        <TestTree />
+        <!-- <side-tree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" /> -->
       </el-aside>
       <el-main>
         <el-form
@@ -69,6 +70,7 @@
 </template>
 
 <script>
+import TestTree from './TestTree.vue'
 import sideTree from '../system-manage/sideTree'
 import { getOrgList } from '@/api/org'
 import AddUserForm from './AddUserForm'
@@ -157,7 +159,7 @@ const tableProps = [
   }
 ]
 export default {
-  components: { sideTree, Pagination, BaseTable, MethodBtn, AddUserForm, EditUserForm, AssignRole },
+  components: { TestTree, sideTree, Pagination, BaseTable, MethodBtn, AddUserForm, EditUserForm, AssignRole },
   data() {
     return {
       topBtnConfig,
@@ -223,6 +225,7 @@ export default {
       const res1 = await getOrgList(params)
       if (res1.code === 0) {
         this.menuList = res1.data.records
+        console.log('menulist===>', this.menuList)
       }
     },
     getOrganization(data) {