人员对应部门

src/api/permission/dept.js

@@ -17,4 +17,12 @@ export default {
   edit(params) {
     return axios.post('/api/front/userdep/edit',params)
   },
+
+  getDepList(params) {
+    return axios({
+      method: "POST",
+      url: '/api/front/userdep/getDepList',
+      data: params
+    })
+  },
 }

src/views/permission/admin.vue

@@ -30,6 +30,7 @@
           <el-table-column show-overflow-tooltip prop="realname" label="姓名" align="center"/>
           <el-table-column show-overflow-tooltip prop="username" label="用户名" align="center"/>
           <el-table-column show-overflow-tooltip prop="company" label="公司名称" align="center"/>
+          <el-table-column show-overflow-tooltip prop="depName" label="部门名称" align="center"/>
           <el-table-column show-overflow-tooltip prop="authGroupName" label="角色" align="center"/>
           <el-table-column show-overflow-tooltip prop="driverAreaName" label="区域数据权限" align="center"/>
           <el-table-column show-overflow-tooltip prop="status" label="状态" align="center" width="120">
@@ -108,6 +109,17 @@
                 {min: 2, max: 20, message: '长度在2 到 20 个字符', trigger: 'blur'}]">
             <el-input maxlength="20" clearable v-model="ruleForm.company" size="small" placeholder="请输入公司名"/>
           </el-form-item>
+          <el-form-item label="部门" prop="depId">
+            <el-cascader
+              filterable
+              v-model="ruleForm.depId"
+              :options="depList"
+              size="small"
+              placeholder=""
+              :props="{ checkStrictly: true,value:'id',
+              label:'name' ,emitPath:false}"
+              clearable></el-cascader>
+          </el-form-item>
           <el-form-item label="手机" prop="mobile" :rules="[
                     {required: true,validator: validatePhone, trigger: 'blur'}
                     ]">
@@ -165,6 +177,17 @@
             <el-input maxlength="20" clearable :disabled="dialogType=='detail'?true:false" v-model="ruleForm.company"
                       size="small" placeholder="请输入公司名"/>
           </el-form-item>
+          <el-form-item label="部门" prop="depId">
+            <el-cascader
+              filterable
+              v-model="ruleForm.depId"
+              :options="depList"
+              size="small"
+              placeholder=""
+              :props="{ checkStrictly: true,value:'id',
+              label:'name' ,emitPath:false}"
+              clearable></el-cascader>
+          </el-form-item>
           <el-form-item label="手机" prop="mobile" :rules="[
                     {required: true,validator: validatePhone, trigger: 'blur'}
                     ]">
@@ -217,6 +240,7 @@
   import roleApi from '@/api/permission/authgroup'
   import menuApi from '@/api/permission/menu'
   import adminApi from '@/api/permission/admin'
+  import deptApi from '@/api/permission/dept'
   import {mapGetters} from "vuex";
 
   export default {
@@ -261,6 +285,7 @@
           company: '',
           authGroup: ''
         },
+        depList:[],
         cityList: [],
         adminList: [],
         defaultProps: {
@@ -276,6 +301,7 @@
           authGroup: '',
           company: '',
           driverArea: '',
+          depId:'',
           checkedKeys: []
         },
         options: [],
@@ -301,11 +327,36 @@
       this.tableLoading = true
       let me = this
       this.getRollList()
+      this.getDepList()
       this.getCityList(function () {
         me.getAllList()
       })
     },
     methods: {
+      getDepList(){
+        deptApi.getDepList().then(res => {
+          let filterDeptList = res.data.filter(item => item.pid === 0)
+          filterDeptList.map(item => {
+            let childList = this.filterDept(item.id,res.data)
+            if(childList.length>0){
+              item.children =childList
+            }
+          })
+          this.depList = filterDeptList ? filterDeptList : []
+        }).catch(e => {
+          this.depList = []
+        })
+      },
+      filterDept(pid,deptList) {
+        let list = deptList.filter(item => item.pid === pid)
+        list.map(item => {
+          let childList = this.filterDept(item.id,deptList)
+          if(childList.length>0){
+            item.children = childList
+          }
+        })
+        return list
+      },
       getRollList() {
         roleApi.getAuthGroupList().then(res => {
           let roleList = res.data ? res.data : []
@@ -325,6 +376,7 @@
       },
       initRuleForm() {
         this.ruleForm = {
+          depId:'',
           realname: '',
           username: '',
           duty: '',