⚡ 优化字典显示，用户管理增加左树右表

src/api/system/user.js

@@ -1,16 +1,18 @@
 import request from '@/router/axios';
 
-export const getList = (current, size, params) => {
+export const getList = (current, size, params, deptId) => {
   return request({
-    url: '/api/blade-user/list',
+    url: '/api/blade-user/page',
     method: 'get',
     params: {
       ...params,
       current,
       size,
+      deptId,
     }
   })
 }
+
 export const remove = (ids) => {
   return request({
     url: '/api/blade-user/remove',

src/const/system/dict.js

@@ -44,6 +44,7 @@ export const optionParent = {
       type: "number",
       align: "right",
       width: 80,
+      hide: true,
       rules: [
         {
           required: true,

src/const/system/dictbiz.js

@@ -44,6 +44,7 @@ export const optionParent = {
       type: "number",
       align: "right",
       width: 80,
+      hide: true,
       rules: [
         {
           required: true,

src/views/system/dict.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <el-row>
     <el-col :span="11">
       <basic-container>
@@ -95,7 +94,6 @@
       </basic-container>
     </el-col>
   </el-row>
-  </div>
 </template>
 
 <script>

src/views/system/dictbiz.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <el-row>
     <el-col :span="11">
       <basic-container>
@@ -95,7 +94,6 @@
       </basic-container>
     </el-col>
   </el-row>
-  </div>
 </template>
 
 <script>

src/views/system/user.vue

@@ -1,4 +1,11 @@
 <template>
+  <el-row>
+    <el-col :span="5">
+      <basic-container>
+        <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"/>
+      </basic-container>
+    </el-col>
+    <el-col :span="19">
       <basic-container>
         <avue-crud :option="option"
                    :table-loading="loading"
@@ -44,6 +51,8 @@
           </template>
         </avue-crud>
       </basic-container>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
@@ -92,6 +101,27 @@
           roleTree: [],
           deptTree: [],
         },
+        treeDeptId: '',
+        treeData: [],
+        treeOption: {
+          nodeKey: 'id',
+          addBtn: false,
+          menu: false,
+          size: 'small',
+          formOption: {
+            labelWidth: 100,
+            column: [{
+              label: '自定义项',
+              prop: 'test'
+            }],
+          },
+          props: {
+            labelText: '标题',
+            label: 'title',
+            value: 'value',
+            children: 'children'
+          }
+        },
         option: {
           height: 'auto',
           calcHeight: 350,
@@ -153,7 +183,7 @@
             {
               label: "用户昵称",
               prop: "name",
-              search: true,
+              hide: true,
               rules: [{
                 required: true,
                 message: "请输入用户昵称",
@@ -163,6 +193,7 @@
             {
               label: "用户姓名",
               prop: "realName",
+              search: true,
               rules: [{
                 required: true,
                 message: "请输入用户姓名",
@@ -287,7 +318,28 @@
         return ids.join(",");
       },
     },
+    created() {
+      this.initData();
+    },
     methods: {
+      nodeClick(data) {
+        this.treeDeptId = data.id;
+        this.page.currentPage = 1;
+        this.onLoad(this.page);
+      },
+      initData() {
+        getDeptTree().then(res => {
+          this.treeData = res.data.data;
+        });
+        getDeptTree(this.form.tenantId).then(res => {
+          const index = this.$refs.crud.findColumnIndex("deptId");
+          this.option.column[index].dicData = res.data.data;
+        });
+        getRoleTree(this.form.tenantId).then(res => {
+          const index = this.$refs.crud.findColumnIndex("roleId");
+          this.option.column[index].dicData = res.data.data;
+        });
+      },
       rowSave(row, loading, done) {
         row.deptId = row.deptId.join(",");
         row.roleId = row.roleId.join(",");
@@ -337,6 +389,7 @@
       },
       searchReset() {
         this.query = {};
+        this.treeDeptId = '';
         this.onLoad(this.page);
       },
       searchChange(params) {
@@ -421,21 +474,13 @@
       },
       onLoad(page, params = {}) {
         this.loading = true;
-        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+        getList(page.currentPage, page.pageSize, Object.assign(params, this.query), this.treeDeptId).then(res => {
           const data = res.data.data;
           this.page.total = data.total;
           this.data = data.records;
           this.loading = false;
           this.selectionClear();
         });
-        getDeptTree(this.form.tenantId).then(res => {
-          const index = this.$refs.crud.findColumnIndex("deptId");
-          this.option.column[index].dicData = res.data.data;
-        });
-        getRoleTree(this.form.tenantId).then(res => {
-          const index = this.$refs.crud.findColumnIndex("roleId");
-          this.option.column[index].dicData = res.data.data;
-        });
       }
     }
   };