update 系统管理ui

src/views/UserPage/=.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>菜单</title>
+    <g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -202.000000)" fill-rule="nonzero">
+            <g id="编组-7" transform="translate(376.000000, 200.000000)">
+                <g id="菜单" transform="translate(0.000000, 2.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                    <path d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z" id="形状" fill="#373738"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/UserPage/TestMenuItem.vue

@@ -1,22 +1,101 @@
 <template>
-  <el-submenu v-if="menuItem.children" :index="level ? level + '-' + index : '' + index">
+  <el-submenu v-if="menuItem.children" :index="constructIndex(menuItem)">
     <!-- 标题 -->
     <template slot="title">
-      <i class="el-icon-menu"></i>
-      <span>{{ menuItem.label }}</span>
+      <!-- <i class="el-icon-menu"></i> -->
+      <i style="line-height: 1;">
+        <svg
+          width="16px"
+          height="16px"
+          viewBox="0 0 16 16"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <title>菜单</title>
+          <g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -202.000000)" fill-rule="nonzero">
+              <g id="编组-7" transform="translate(376.000000, 200.000000)">
+                <g id="菜单" transform="translate(0.000000, 2.000000)">
+                  <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                  <path
+                    d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z"
+                    id="形状"
+                    fill="currentColor"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </svg>
+      </i>
+      <span>{{ menuItem.name }}</span>
     </template>
 
     <!-- 主体 -->
     <template v-for="(submenuItem, idx) in menuItem.children">
-      <TestMenuItem :menuItem="submenuItem" :level="level + '-' + index" :index="idx" />
+      <TestMenuItem :menuItem="submenuItem" :level="level + 1" />
     </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 v-else :index="constructIndex(menuItem)">
+    <!-- <i v-if="level !== 1" class="el-icon-aim"></i>
+      <i v-else class="el-icon-menu"></i> -->
+    <i style="line-height: 1px" v-if="level !== 1">
+      <svg
+        width="8px"
+        height="8px"
+        viewBox="0 0 8 8"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+      >
+        <title>椭圆形</title>
+        <g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+          <g
+            id="质量追溯_设备参数追溯"
+            transform="translate(-396.000000, -246.000000)"
+            fill="currentColor"
+            fill-rule="nonzero"
+          >
+            <g id="编组-3" transform="translate(396.000000, 240.000000)">
+              <path
+                d="M4,6 C6.209139,6 8,7.790861 8,10 C8,12.209139 6.209139,14 4,14 C1.790861,14 0,12.209139 0,10 C0,7.790861 1.790861,6 4,6 Z M4,7 C2.34314575,7 1,8.34314575 1,10 C1,11.6568542 2.34314575,13 4,13 C5.65685425,13 7,11.6568542 7,10 C7,8.34314575 5.65685425,7 4,7 Z"
+                id="椭圆形"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </i>
+    <i style="line-height: 1;" v-else>
+      <svg
+        width="16px"
+        height="16px"
+        viewBox="0 0 16 16"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+      >
+        <title>菜单</title>
+        <g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+          <g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -202.000000)" fill-rule="nonzero">
+            <g id="编组-7" transform="translate(376.000000, 200.000000)">
+              <g id="菜单" transform="translate(0.000000, 2.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                <path
+                  d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z"
+                  id="形状"
+                  fill="currentColor"
+                ></path>
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </i>
+    <span slot="title">{{ menuItem.name }}</span>
   </el-menu-item>
 </template>
 
@@ -25,12 +104,12 @@ export default {
   name: 'TestMenuItem',
   props: {
     level: {
-      type: String,
+      type: Number,
       default: 1
     },
     index: {
-      type: Number,
-      default: 0
+      type: String,
+      default: ''
     },
     menuItem: {
       default: () => ({})
@@ -45,7 +124,11 @@ export default {
   },
   created() {},
   mounted() {},
-  methods: {}
+  methods: {
+    constructIndex(menuItem) {
+      return menuItem.id + '$--$' + menuItem.name
+    }
+  }
 }
 </script>
 

src/views/UserPage/TestTree.vue

@@ -27,10 +27,11 @@
       </span>
       <span class="title-content">合肥新能源工厂</span>
     </section>
-    <section class="routes-area">
-      <el-menu default-active="1-0-0" @select="handleSelect">
-        <template v-for="(menuItem, index) in testData">
-          <TestMenuItem :index="index" level="1" :menuItem="menuItem" />
+    <section class="routes-area" v-if="showList">
+      <el-menu @select="handleSelect">
+        <!-- 此处假设了只有一个根节点 -->
+        <template v-for="(menuItem, index) in menuListTrue[0].children">
+          <TestMenuItem :level="1" :menuItem="menuItem" />
         </template>
       </el-menu>
     </section>
@@ -41,23 +42,55 @@
 import TestMenuItem from './TestMenuItem.vue'
 export default {
   name: 'TestTree',
-  props: {},
+  props: {
+    menuList: {
+      type: Array,
+      default: () => []
+    }
+  },
   components: { TestMenuItem },
   data() {
     return {
-      testData: [
-        { id: 0, label: '制造部', children: [{ label: '小组1' }, { label: '小组2' }] },
-        { id: 1, label: '综合管理部' },
-        { id: 2, label: '销售部' }
-      ]
+      menuListTrue: [],
+      showList: false
     }
   },
-  created() {},
-  mounted() {},
+
+  mounted() {
+    this.$nextTick(() => {
+      this.reconstructMenuList()
+    })
+  },
+
   methods: {
+    reconstructMenuList() {
+      this.showList = false
+      this.menuListTrue.splice(0)
+      if (this.menuList) {
+        this.menuList.forEach(item => {
+          if (item.parentId === '-1') {
+            this.menuListTrue.push(item)
+          } else {
+            this.constructMenuList(item)
+          }
+        })
+      }
+
+      this.showList = true
+    },
+    constructMenuList(child) {
+      this.menuList.forEach(item => {
+        if (child.parentId === item.id) {
+          if (!('children' in item)) {
+            this.$set(item, 'children', [])
+          }
+          item.children.push(child)
+        }
+      })
+    },
     handleSelect(index, indexPath) {
-      console.log('key, keyPath:', index, indexPath)
-      this.$emit('getOrganization', { id, name: label })
+      const [id, name] = index.split('$--$')
+      this.$emit('getOrganization', { id, name })
     }
   }
 }
@@ -65,12 +98,11 @@ export default {
 
 <style scoped>
 .test-tree {
-  background: lightblue;
   height: 100%;
-  padding: 24px 0;
+  padding: 24px 0 0;
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 16px;
 }
 
 .title-area {
@@ -97,4 +129,17 @@ export default {
   font-size: 16px;
   line-height: 1;
 }
+
+.routes-area >>> .el-submenu__title,
+.routes-area >>> .el-menu-item {
+  font-size: 14px;
+  line-height: 40px;
+  height: 40px;
+  letter-spacing: 0.88px;
+}
+/* 
+.routes-area >>> .el-submenu__title span,
+.routes-area >>> .el-menu-item span {
+}
+*/
 </style>

src/views/UserPage/o.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="8px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>椭圆形</title>
+    <g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="质量追溯_设备参数追溯" transform="translate(-396.000000, -246.000000)" fill="#373738" fill-rule="nonzero">
+            <g id="编组-3" transform="translate(396.000000, 240.000000)">
+                <path d="M4,6 C6.209139,6 8,7.790861 8,10 C8,12.209139 6.209139,14 4,14 C1.790861,14 0,12.209139 0,10 C0,7.790861 1.790861,6 4,6 Z M4,7 C2.34314575,7 1,8.34314575 1,10 C1,11.6568542 2.34314575,13 4,13 C5.65685425,13 7,11.6568542 7,10 C7,8.34314575 5.65685425,7 4,7 Z" id="椭圆形"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/UserPage/usermanage.vue

@@ -9,32 +9,33 @@
   <div class="app-container system-manage-landpage">
     <el-container>
       <el-aside>
-        <TestTree />
+        <TestTree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" />
         <!-- <side-tree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" /> -->
       </el-aside>
       <el-main>
-        <el-form
-          ref="dataForm"
-          :model="dataForm"
-          :inline="true"
-          size="medium"
-          label-width="100px"
-          label-position="left"
-        >
-          <el-form-item label-width="60px" :label="$t('userManage.orgName') + '：'">
-            <span style="margin: 0 5px;color:#1890FF">{{ dataForm.orgName }}</span>
-          </el-form-item>
-          <el-form-item :label="$t('userManage.userName') + '：'" prop="name">
-            <el-input
-              v-model="dataForm.name"
-              :placeholder="['placeholder.input', $t('userManage.userName')] | i18nFilterForm"
-              clearable
-              :style="{ width: '100%' }"
-            />
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
-          </el-form-item>
+        <el-form ref="dataForm" :model="dataForm" :inline="true" size="mini" label-position="left">
+          <el-row>
+            <el-col style="margin: 0 0 28px;">
+              <!-- <el-form-item class="has-icon" label-width="100px" :label="$t('userManage.orgName')"> -->
+              <el-form-item class="has-icon">
+                <span v-if="dataForm.orgName">{{ dataForm.orgName }}</span>
+                <span v-else>用户管理</span>
+              </el-form-item>
+            </el-col>
+            <el-col>
+              <el-form-item :label="$t('userManage.userName')" prop="name">
+                <el-input
+                  v-model="dataForm.name"
+                  :placeholder="['placeholder.input', $t('userManage.userName')] | i18nFilterForm"
+                  clearable
+                  :style="{ width: '100%' }"
+                />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
         </el-form>
         <base-table
           :top-btn-config="topBtnConfig"
@@ -240,7 +241,7 @@ export default {
             confirmButtonText: i18n.t('btn.confirm'),
             cancelButtonText: i18n.t('btn.cancel'),
             type: 'warning'
-          }).then(async() => {
+          }).then(async () => {
             // 走接口
             const result = await delUser({
               id: raw.data.id
@@ -297,11 +298,13 @@ export default {
   border-radius: 8px;
   background-color: #fff;
   width: 256px !important;
-  padding-top: 20px;
   margin: 0;
   padding-left: 0;
   padding-right: 0;
 }
+aside {
+  padding: 0;
+}
 .el-container >>> .el-main {
   border-radius: 8px;
   background-color: #fff;
@@ -352,4 +355,49 @@ export default {
   letter-spacing: 0.88px;
   color: #161616;
 }
+
+.has-icon {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.has-icon::before {
+  content: '';
+  width: 4px;
+  border-radius: 2px;
+  height: 55%;
+  position: absolute;
+  /* top: 13%; */
+  left: 0;
+  background: #0b58ff;
+}
+
+:not(.has-icon) >>> .el-form-item__label {
+  font-size: 14px;
+}
+
+.has-icon >>> .el-form-item__label {
+  position: relative;
+  left: 12px;
+  font-size: 16px;
+}
+.has-icon >>> .el-form-item__content {
+  font-size: 16px;
+  margin-left: 12px;
+}
+
+.el-button--mini {
+  padding: 6px 12px;
+  border-radius: 4px;
+}
+/* .has-icon >>> .el-form-item__content {
+  position: absolute;
+  left: 24px;
+} */
+
+.el-form-item {
+  margin: 0;
+}
 </style>