用户管理 左侧加机构树

data/magic-api/api/后台/用户管理/保存.ms

@@ -5,7 +5,7 @@
   "groupId" : "4f0230049d7e4f39b1e0897cc0f46f9a",
   "name" : "保存",
   "createTime" : null,
-  "updateTime" : 1641261914841,
+  "updateTime" : 1642085497821,
   "lock" : "0",
   "method" : "POST",
   "path" : "/save",
@@ -31,7 +31,8 @@ var user = {
     username,
     password: password,
     phone,
-    isLogin
+    isLogin,
+    officeId
 }
 if(id){
     SqlCache.delete(`permissions:${id}`)

data/magic-api/api/后台/用户管理/列表.ms

@@ -5,7 +5,7 @@
   "groupId" : "4f0230049d7e4f39b1e0897cc0f46f9a",
   "name" : "列表",
   "createTime" : null,
-  "updateTime" : 1634738477796,
+  "updateTime" : 1642086792944,
   "lock" : "0",
   "method" : "GET",
   "path" : "/list",
@@ -28,9 +28,11 @@ return db.page("""
         su.name,
         su.is_login,
         su.phone,
-        su.create_date
+        su.create_date,
+        su.office_id
     from sys_user su
     where su.is_del = 0
+    ?{officeId, and su.office_id = #{officeId}}
     ?{username, and su.username like concat('%',#{username},'%')}
     ?{name, and su.name like concat('%',#{name},'%')}
     ?{isLogin, and su.is_login = #{isLogin}}

magic-boot-ui/src/scripts/treeTable.js

@@ -50,6 +50,17 @@ treeTable.genTree = (children) => {
   return treeData
 }
 
+treeTable.deleteEmptyChildren = (children) => {
+  for(var i in children){
+    var chi = children[i]
+    if(chi.children && chi.children.length == 0){
+      delete chi.children
+    }else{
+      treeTable.deleteEmptyChildren(chi.children)
+    }
+  }
+}
+
 treeTable.recursionSearch = (fields, data, text) => {
   var searchData = []
   for(var i in data){

magic-boot-ui/src/views/system/user/user-form.vue

@@ -12,6 +12,9 @@
     <el-form-item label="手机号" prop="phone">
       <el-input v-model="temp.phone" />
     </el-form-item>
+    <el-form-item label="选择机构" prop="officeId">
+      <treeselect v-model="temp.officeId" :options="officeTree" :disable-branch-nodes="true" :show-count="true" placeholder="请选择组织机构" />
+    </el-form-item>
     <el-form-item label="禁止登录" prop="isLogin">
       <template>
         <el-switch
@@ -30,9 +33,12 @@
 </template>
 
 <script>
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
 export default {
   name: 'UserForm',
+  components: { Treeselect },
   props: {
     dialogStatus: {
       type: String,
@@ -46,10 +52,15 @@ export default {
       },
       roles: [],
       selectRoles: [],
-      temp: this.getTemp()
+      temp: this.getTemp(),
+      officeTree: []
     }
   },
   created() {
+    this.$get('user/offices').then(res => {
+      this.officeTree = res.data.list
+      this.$treeTable.deleteEmptyChildren(this.officeTree)
+    })
     this.$get('role/list?size=999999').then(response => {
       const { data } = response
       this.roles = data.list
@@ -64,7 +75,8 @@ export default {
         password: '',
         phone: '',
         isLogin: 0,
-        roles: []
+        roles: [],
+        officeId: null
       }
     },
     resetTemp() {

magic-boot-ui/src/views/system/user/user-list.vue

@@ -1,7 +1,28 @@
+<style scoped>
+.left{
+  width: 20%;
+  float: left;
+}
+.right{
+  width: 80%;
+  float: right;
+}
+</style>
+
 <template>
   <div class="app-container">
+    <div class="left">
+      <pd-tree url="office/tree" :el="{ 'expand-on-click-node': false }" :checked="false" @node-click="nodeClick(arguments)" />
+    </div>
+    <div class="right">
       <div class="filter-container">
         <el-form :inline="true">
+          <el-form-item label="组织机构">
+            <el-input v-model="officeName" placeholder="组织机构" style="width: 200px;" class="filter-item" />
+          </el-form-item>
+          <el-button class="filter-item" icon="el-icon-delete" @click="resetOffice">
+            清除
+          </el-button>
           <el-form-item label="登录名称">
             <el-input v-model="tableOptions.where.username" placeholder="登录名称" style="width: 200px;" class="filter-item" />
           </el-form-item>
@@ -11,7 +32,7 @@
           <el-button class="filter-item" type="primary" icon="el-icon-search" @click="reloadTable">
             搜索
           </el-button>
-        <el-button :loading="downloadLoading" class="filter-item" icon="el-icon-delete" @click="tableOptions.where = {}">
+          <el-button :loading="downloadLoading" class="filter-item" icon="el-icon-delete" @click="reset">
             清空
           </el-button>
           <el-button :loading="downloadLoading" class="filter-item" icon="el-icon-download" @click="handleDownload">
@@ -34,16 +55,18 @@
           <user-form ref="userForm" :dialog-status="dialogStatus" @reload-table="reloadTable" />
         </template>
       </pd-dialog>
+    </div>
 
   </div>
 </template>
 
 <script>
 import UserForm from './user-form.vue'
+import PdTree from "@/components/Psyduck/pd-tree";
 
 export default {
   name: 'UserList',
-  components: { UserForm },
+  components: {PdTree, UserForm },
   data() {
     return {
       tableOptions: {
@@ -119,10 +142,27 @@ export default {
       },
       dialogStatus: '',
       downloadLoading: false,
-      ids: []
+      ids: [],
+      officeName: ''
     }
   },
   methods: {
+    reset() {
+      this.tableOptions.where = {}
+      this.officeName = ''
+      this.$nextTick(() => this.reloadTable())
+    },
+    resetOffice() {
+      this.officeName = ''
+      this.tableOptions.where.officeId = ''
+      this.reloadTable()
+    },
+    nodeClick(nodes) {
+      var node = nodes[0]
+      this.officeName = node.name
+      this.tableOptions.where.officeId = node.id
+      this.reloadTable()
+    },
     selectionChange(columns) {
       this.ids = columns.map(it => it['id']).join(',')
     },
@@ -139,7 +179,7 @@ export default {
       this.dialogStatus = 'update'
       this.$refs.userFormDialog.show()
       this.$nextTick(() => {
-        this.$refs['userForm'].getInfo(row)
+        this.$refs.userForm.getInfo(row)
       })
     },
     handleDownload() {