update 系统管理ui

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>