PC端用户管理修改支持关联多个部门

src/views/modules/sys/user-add-or-update.vue

@@ -7,7 +7,7 @@
              :rules="dataRule"
              ref="dataForm"
              @keyup.enter.native="dataFormSubmitHandle()"
-             label-width="120px">
+             label-width="130px">
       <el-form-item prop="username"
                     :label="$t('user.username')">
         <el-input v-model="dataForm.username"
@@ -35,27 +35,49 @@
                   :readonly="true"
                   :placeholder="$t('user.deptName')"></el-input>
       </el-form-item>
-      <el-form-item prop="relationDeptName"
-                    label="关联部门"
+      <el-form-item prop="relationWorkDeptName"
+                    label="关联工作人员网格"
                     class="dept-list">
-        <el-popover v-model="relationDeptListVisible"
-                    ref="relationDeptListPopover"
+        <el-popover v-model="relationWorkDeptListVisible"
+                    ref="relationWorkDeptListPopover"
                     placement="bottom-start"
                     trigger="click">
-          <el-tree :data="relationDeptList"
+          <el-tree :data="relationWorkDeptList"
                    :props="{ label: 'name', children: 'children' }"
                    node-key="id"
-                   ref="relationDeptListTree"
+                   ref="relationWorkDeptListTree"
                    :highlight-current="true"
                    :expand-on-click-node="false"
                    accordion
-                   @current-change="relationDeptListTreeCurrentChangeHandle">
+                   @current-change="relationWorkDeptListTreeCurrentChangeHandle">
           </el-tree>
         </el-popover>
-        <el-input v-model="dataForm.relationDeptName"
-                  v-popover:relationDeptListPopover
-                  :readonly="true"
-                  placeholder="关联部门"></el-input>
+        <el-input v-model="dataForm.relationWorkDeptName"
+                  v-popover:relationWorkDeptListPopover
+                  clearable
+                  placeholder="关联工作人员网格"></el-input>
+      </el-form-item>
+      <el-form-item prop="relationLeaderDeptName"
+                    label="关联领导干部网格"
+                    class="dept-list">
+        <el-popover v-model="relationLeaderDeptListVisible"
+                    ref="relationLeaderDeptListPopover"
+                    placement="bottom-start"
+                    trigger="click">
+          <el-tree :data="relationLeaderDeptList"
+                   :props="{ label: 'name', children: 'children' }"
+                   node-key="id"
+                   ref="relationLeaderDeptListTree"
+                   :highlight-current="true"
+                   :expand-on-click-node="false"
+                   accordion
+                   @current-change="relationLeaderDeptListTreeCurrentChangeHandle">
+          </el-tree>
+        </el-popover>
+        <el-input v-model="dataForm.relationLeaderDeptName"
+                  v-popover:relationLeaderDeptListPopover
+                  clearable
+                  placeholder="关联领导干部网格"></el-input>
       </el-form-item>
       <el-form-item label="用户类型"
                     prop="userTagKey">
@@ -142,9 +164,11 @@ export default {
     return {
       visible: false,
       deptList: [],
-      relationDeptList: [],
+      relationWorkDeptList: [],
+      relationLeaderDeptList: [],
       deptListVisible: false,
-      relationDeptListVisible: false,
+      relationWorkDeptListVisible: false,
+      relationLeaderDeptListVisible: false,
       roleList: [],
       roleIdListDefault: [],
       dataForm: {
@@ -152,8 +176,10 @@ export default {
         username: '',
         deptId: '0',
         deptName: '',
-        relationDeptId: '',
-        relationDeptName: '',
+        relationWorkDeptId: '',
+        relationLeaderDeptId: '',
+        relationWorkDeptName: '',
+        relationLeaderDeptName: '',
         password: '',
         comfirmPassword: '',
         realName: '',
@@ -250,7 +276,8 @@ export default {
           return this.$message.error(res.msg)
         }
         this.deptList = res.data
-        this.relationDeptList = res.data
+        this.relationWorkDeptList = res.data
+        this.relationLeaderDeptList = res.data
       }).catch(() => { })
     },
     // 获取角色列表
@@ -283,7 +310,8 @@ export default {
           roleIdList: []
         }
         this.$refs.deptListTree.setCurrentKey(this.dataForm.deptId)
-        this.$refs.relationDeptListTree.setCurrentKey(this.dataForm.relationDeptId)
+        this.$refs.relationWorkDeptListTree.setCurrentKey(this.dataForm.relationWorkDeptId)
+        this.$refs.relationLeaderDeptListTree.setCurrentKey(this.dataForm.relationLeaderDeptId)
         // 角色配置, 区分是否为默认角色
         for (var i = 0; i < res.data.roleIdList.length; i++) {
           if (this.roleList.filter(item => item.id === res.data.roleIdList[i])[0]) {
@@ -301,10 +329,15 @@ export default {
       this.deptListVisible = false
     },
     // 关联部门树, 选中
-    relationDeptListTreeCurrentChangeHandle (data, node) {
-      this.dataForm.relationDeptId = data.id
-      this.dataForm.relationDeptName = data.name
-      this.relationDeptListVisible = false
+    relationWorkDeptListTreeCurrentChangeHandle (data, node) {
+      this.dataForm.relationWorkDeptId = data.id
+      this.dataForm.relationWorkDeptName = data.name
+      this.relationWorkDeptListVisible = false
+    },
+    relationLeaderDeptListTreeCurrentChangeHandle (data, node) {
+      this.dataForm.relationLeaderDeptId = data.id
+      this.dataForm.relationLeaderDeptName = data.name
+      this.relationLeaderDeptListVisible = false
     },
     // 表单提交
     dataFormSubmitHandle: debounce(function () {
@@ -312,6 +345,12 @@ export default {
         if (!valid) {
           return false
         }
+        if (this.dataForm.relationWorkDeptName === '') {
+          this.dataForm.relationWorkDeptId = ''
+        }
+        if (this.dataForm.relationLeaderDeptName === '') {
+          this.dataForm.relationLeaderDeptId = ''
+        }
         this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/user', {
           ...this.dataForm,
           roleIdList: [