src/views/UserPage/usermanage.vue

@@ -6,12 +6,12 @@
  * @Description:
 -->
 <template>
-  <div class="app-container">
+  <div class="app-container system-manage-landpage">
     <el-container>
       <el-aside>
-        <side-tree 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 style="border:2px solid #E4E4E4;border-radius:10px;margin-left:10px">
+      <el-main>
         <el-form
           ref="dataForm"
           :model="dataForm"
@@ -20,11 +20,16 @@
           label-width="100px"
           label-position="left"
         >
-          <el-form-item label-width="60px" :label="$t('userManage.orgName')+'：'">
+          <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-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-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>
@@ -47,15 +52,20 @@
             @clickBtn="handleClick"
           />
         </base-table>
-        <pagination v-show="total > 0" :total="total" :page.sync="dataForm.page" :limit.sync="dataForm.limit" @pagination="getList" />
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="dataForm.page"
+          :limit.sync="dataForm.limit"
+          @pagination="getList"
+        />
 
         <add-user-form :visible.sync="showDialog" @refreshDataList="getList" />
-        <edit-user-form :visible.sync="showEditDialog" :target-info="{id: curEditId}" @refreshDataList="getList" />
+        <edit-user-form :visible.sync="showEditDialog" :target-info="{ id: curEditId }" @refreshDataList="getList" />
         <assign-Role :visible.sync="AssignRoleDialog" :user-id="userId" @refreshDataList="getList" />
       </el-main>
     </el-container>
   </div>
-
 </template>
 
 <script>
@@ -80,69 +90,79 @@ const topBtnConfig = [
   }
 ]
 // edit here
-const tableBtn = [{
+const tableBtn = [
-  type: 'edit',
+  {
-  btnName: 'btn.edit'
+    type: 'edit',
-}, {
+    btnName: 'btn.edit'
-  type: 'EmPower',
+  },
-  btnName: i18n.t('userManage.AssignRole')
+  {
-}, {
+    type: 'EmPower',
-  type: 'delete',
+    btnName: i18n.t('userManage.AssignRole')
-  btnName: 'btn.delete'
+  },
-}]
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
 // birthday
 // orgId
 // sex
 // code
 // remark
-const tableProps = [{
+const tableProps = [
-  prop: 'name',
+  {
-  label: i18n.t('userManage.userName'),
+    prop: 'name',
-  align: 'center'
+    label: i18n.t('userManage.userName'),
-}, {
+    align: 'center'
-  prop: 'email',
+  },
-  label: i18n.t('userManage.email'),
+  {
-  align: 'center'
+    prop: 'email',
-}, {
+    label: i18n.t('userManage.email'),
-  prop: 'mobile',
+    align: 'center'
-  label: i18n.t('userManage.mobile'),
+  },
-  align: 'center'
+  {
-},
+    prop: 'mobile',
-// {
+    label: i18n.t('userManage.mobile'),
-//   prop: 'birthday',
+    align: 'center'
-//   label: i18n.t('userManage.birthday'),
+  },
-//   align: 'center'
+  // {
-// },
+  //   prop: 'birthday',
-{
+  //   label: i18n.t('userManage.birthday'),
-  prop: 'orgName',
+  //   align: 'center'
-  label: i18n.t('userManage.orgName'),
+  // },
-  align: 'center'
+  {
-},
+    prop: 'orgName',
-{
+    label: i18n.t('userManage.orgName'),
-  prop: 'roleName',
+    align: 'center'
-  label: i18n.t('roleManage.roleName'),
+  },
-  align: 'center'
+  {
-},
+    prop: 'roleName',
-// {
+    label: i18n.t('roleManage.roleName'),
-//   prop: 'sex',
+    align: 'center'
-//   label: i18n.t('userManage.sex'),
+  },
-//   align: 'center',
+  // {
-//   filter: dataDict('sex')
+  //   prop: 'sex',
-// },
+  //   label: i18n.t('userManage.sex'),
-{
+  //   align: 'center',
-  prop: 'code',
+  //   filter: dataDict('sex')
-  label: i18n.t('userManage.code'),
+  // },
-  align: 'center'
+  {
-}, {
+    prop: 'code',
-  prop: 'enabled',
+    label: i18n.t('userManage.code'),
-  label: i18n.t('userManage.status'),
+    align: 'center'
-  align: 'center',
+  },
-  filter: dataDict('enableState')
+  {
-}, {
+    prop: 'enabled',
-  prop: 'remark',
+    label: i18n.t('userManage.status'),
-  label: i18n.t('userManage.remark'),
+    align: 'center',
-  align: 'center'
+    filter: dataDict('enableState')
-}]
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('userManage.remark'),
+    align: 'center'
+  }
+]
 export default {
   components: { sideTree, Pagination, BaseTable, MethodBtn, AddUserForm, EditUserForm, AssignRole },
   data() {
@@ -174,16 +194,20 @@ export default {
         current: 1,
         size: 20
       },
-      sexOptions: [{
+      sexOptions: [
-        'label': '全部',
+        {
-        'value': ''
+          label: '全部',
-      }, {
+          value: ''
-        'label': '男',
+        },
-        'value': 1
+        {
-      }, {
+          label: '男',
-        'label': '女',
+          value: 1
-        'value': 2
+        },
-      }]
+        {
+          label: '女',
+          value: 2
+        }
+      ]
     }
   },
   created() {
@@ -220,7 +244,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
@@ -266,19 +290,70 @@ export default {
     },
     clickTopBtn(val) {
       if (val === 'add') {
-        this.showDialog = true// 新增
+        this.showDialog = true // 新增
       }
     }
   }
 }
 </script>
 <style scoped>
-.el-container >>> .el-aside{
+.el-container >>> .el-aside {
-  border:2px solid #E4E4E4;
+  border-radius: 8px;
-  border-radius:10px;
+  background-color: #fff;
-  background-color: white;
+  width: 256px !important;
-  min-height:550px;
+  padding-top: 20px;
-  width:30%;
+  margin: 0;
-  padding-top:20px
+  padding-left: 0;
+  padding-right: 0;
+}
+.el-container >>> .el-main {
+  border-radius: 8px;
+  background-color: #fff;
+  border: unset;
+}
+.el-container >>> .el-tree-node__content {
+  padding-left: 16px !important;
+  padding-right: 16px !important;
+}
+.el-container >>> .el-tree-node__content:hover {
+  background-color: #e3efff;
+}
+.el-container >>> .el-tree-node:focus > .el-tree-node__content {
+  background-color: #e3efff;
+}
+/* .el-container >>> .el-icon-caret-right {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  border: 1px solid #000;
+  background-color: transparent;
+} */
+.el-container >>> .el-icon-caret-right::before {
+  /* content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  border: 1px solid #000;
+  background-color: transparent; */
+}
+
+.system-manage-landpage {
+  background: unset;
+  padding: 0;
+  display: flex;
+}
+
+.el-container {
+  display: flex;
+  gap: 8px;
+}
+
+.el-container >>> .el-tree-node__label {
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.88px;
+  color: #161616;
 }
 </style>