用户增加区域字段

src/views/system/role/authUser.vue

@@ -63,6 +63,7 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
       <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
+      <el-table-column label="所属区域" prop="deptName" :show-overflow-tooltip="true" />
       <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
       <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
       <el-table-column label="状态" align="center" prop="status">
@@ -196,4 +197,4 @@ export default {
     }
   }
 };
-</script>
\ No newline at end of file
+</script>

src/views/system/role/selectUser.vue

 <template>
   <!-- 授权用户 -->
-  <el-dialog title="选择用户" :visible.sync="visible" width="800px" top="5vh" append-to-body>
+  <el-dialog title="选择用户" :visible.sync="visible" width="50%" top="5vh" append-to-body>
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
       <el-form-item label="用户名称" prop="userName">
         <el-input
@@ -18,6 +18,10 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
+      <el-form-item label="所属区域" prop="deptId">
+        <treeselect v-model="queryParams.deptId" :options="deptOptions" :show-count="true" placeholder="请选择所属区域"
+          style="width: 200px;" />
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -28,6 +32,7 @@
         <el-table-column type="selection" width="55"></el-table-column>
         <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
         <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
+        <el-table-column label="所属区域" prop="deptName" :show-overflow-tooltip="true" />
         <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
         <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
         <el-table-column label="状态" align="center" prop="status">
@@ -58,6 +63,11 @@
 
 <script>
 import { unallocatedUserList, authUserSelectAll } from "@/api/system/role";
+import {
+  deptTreeSelect
+} from "@/api/system/user";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
   dicts: ['sys_normal_disable'],
   props: {
@@ -66,8 +76,11 @@ export default {
       type: [Number, String]
     }
   },
+  components: { Treeselect },
   data() {
     return {
+      // 部门树选项
+      deptOptions: undefined,
       // 遮罩层
       visible: false,
       // 选中数组值
@@ -82,10 +95,20 @@ export default {
         pageSize: 10,
         roleId: undefined,
         userName: undefined,
-        phonenumber: undefined
+        phonenumber: undefined,
+        deptId: undefined
       }
     };
   },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val);
+    },
+    },
+    created() {
+      this.getDeptTree();
+    },
   methods: {
     // 显示弹框
     show() {
@@ -117,6 +140,22 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
+    /** 查询部门下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then((response) => {
+        this.deptOptions = response.data;
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id;
+      this.handleQuery();
+    },
     /** 选择授权用户操作 */
     handleSelectUser() {
       const roleId = this.queryParams.roleId;