用户添加管理部门功能

src/api/sys/UserService.js

@@ -124,4 +124,11 @@ export default class UserService {
       params: {}
     })
   }
+
+  getOffice () {
+    return request({
+      url: `/sys/office/treeData?type=2`,
+      method: 'get'
+    })
+  }
 }

src/views/modules/sys/user/UserForm.vue

@@ -34,7 +34,7 @@
      <el-divider content-position="left"><i class="el-icon-user"></i> 身份信息</el-divider>
          <el-row :gutter="15">
         <!-- <el-col :span="24"> -->
-          <!-- <el-form-item prop="photo" label="头像"> 
+          <!-- <el-form-item prop="photo" label="头像">
             <el-upload
               class="avatar-uploader"
               :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=photo`"
@@ -71,8 +71,8 @@
     <el-divider content-position="left"><i class="el-icon-postcard"></i> 岗位信息</el-divider>
         <el-row :gutter="15">
         <el-col :span="12">
-          <el-form-item prop="companyDTO.id" :rules=" [{required: true, message: '公司不能为空', trigger: 'blur'}]" label="公司"> 
-            <SelectTree 
+          <el-form-item prop="companyDTO.id" :rules=" [{required: true, message: '公司不能为空', trigger: 'blur'}]" label="公司">
+            <SelectTree
               ref="companyTree"
               :props="{
                   value: 'id',             // ID字段名
@@ -81,29 +81,49 @@
                 }"
               :url="`/sys/office/treeData?type=1`"
               :value="inputForm.companyDTO.id"
-              :clearable="true" 
+              :clearable="true"
               :accordion="true"
               @getValue="(value) => {inputForm.companyDTO.id=value}"/>
           </el-form-item>
         </el-col>
         <el-col :span="12">
            <el-form-item prop="officeDTO.id" :rules="[{required: true, message: '部门不能为空', trigger: 'blur'}]" label="部门">
-            <SelectTree 
+            <SelectTree
               ref="officeTree"
               :props="{
                   value: 'id',             // ID字段名
                   label: 'name',         // 显示名称
                   children: 'children'    // 子级字段名
                 }"
-               
+
               :url="`/sys/office/treeData?type=2`"
               :value="inputForm.officeDTO.id"
-              :clearable="true" 
+              :clearable="true"
               :accordion="true"
               @getValue="(value) => {inputForm.officeDTO.id=value}"/>
           </el-form-item>
         </el-col>
-        
+        <el-col :span="12">
+          <el-form-item  prop="manageOfficeIds" label="管理部门" >
+            <!-- 单选 -->
+            <!--<el-select v-model="form.treeData" placeholder="请选择" style="width: 16rem">-->
+            <!-- 多选 -->
+            <el-select v-model="form.treeData" multiple placeholder="请选择" style="width:100%">
+              <el-option :value="treeDataValue" style="height: auto">
+                <el-tree
+                  ref="selectTree"
+                  :data="data"
+                  :value="inputForm.manageOfficeIds"
+                  default-expand-all
+                  node-key="id"
+                  :props="defaultProps"
+                  @node-click="handleNodeClick"
+                />
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+
         <el-col :span="12">
             <el-form-item label="工号" prop="no" :rules="[{required: true, message:'工号不能为空', trigger:'blur'}]">
               <el-input v-model="inputForm.no" maxlength="50" placeholder=""></el-input>
@@ -155,12 +175,18 @@ import RoleService from '@/api/sys/RoleService'
 export default {
   data () {
     return {
+      form: {
+        // treeData: "", // 单选
+        treeData: [], // 多选
+        treeDataId: [] // 多选
+      },
       visible: false,
       loading: false,
       title: '',
       method: '',
       roleList: [],
       postList: [],
+      treeDataValue: '',
       inputForm: {
         id: '',
         companyDTO: { // 归属公司
@@ -186,8 +212,15 @@ export default {
         newPassword: '', // 新密码
         confirmNewPassword: '',
         sign: '', // 签名
-        remarks: '' // 备注
+        remarks: '', // 备注
+        manageOfficeIds: '', // 管理部门id（负责的部门）
+        manageOfficeNameList: [] // 管理部门名称（负责的部门）
 
+      },
+      data: [],
+      defaultProps: {
+        children: 'children',
+        label: 'name'
       }
     }
   },
@@ -205,6 +238,30 @@ export default {
     SelectTree
   },
   methods: {
+
+    // 点击树节点
+    handleNodeClick (data, node, nodeData) {
+      // select 单选
+      // this.treeDataValue = data
+      // this.form.treeData = data.name
+
+      // select 多选（判重后添加到选择结果数组中）
+      this.treeDataValue = data
+      let num = 0
+      if (node.childNodes.length && node.childNodes.length > 0) {
+        this.$message.warning('不能选择根节点（' + data.name + '）请重新选择。')
+      } else {
+        this.form.treeData.forEach(item => {
+          // eslint-disable-next-line no-unused-expressions
+          item === data.name ? num++ : num
+        })
+        if (num === 0) {
+          this.form.treeData.push(data.name)
+          this.form.treeDataId.push(data.id)
+        }
+      }
+    },
+
     init (method, id) {
       this.method = method
       this.inputForm.id = id
@@ -230,6 +287,18 @@ export default {
           this.userService.queryById(this.inputForm.id).then(({data}) => {
             this.inputForm = this.recover(this.inputForm, data)
             this.inputForm.oldLoginName = this.inputForm.loginName
+            if (!this.inputForm.manageOfficeNameList) {
+              this.treeDataValue = ''
+              this.form.treeData = []
+              this.form.treeDataId = []
+            } else {
+              this.form.treeData = this.inputForm.manageOfficeNameList
+              this.form.treeDataId = this.inputForm.manageOfficeIds.split(',')
+            }
+          })
+
+          this.userService.getOffice().then(({data}) => {
+            this.data = data
           })
         }
       })
@@ -257,6 +326,10 @@ export default {
     doSubmit () {
       this.$refs['inputForm'].validate((valid) => {
         if (valid) {
+          if (this.form.treeDataId) {
+            var manageOfficeIds = this.form.treeData.toString()
+            this.inputForm.manageOfficeIds = manageOfficeIds
+          }
           this.loading = true
           this.userService.save(this.inputForm).then(({data}) => {
             this.loading = false
@@ -287,4 +360,16 @@ export default {
     font-weight: bold;
     font-size: 16px;
 }
-</style>
+</style>
+
+<style lang="scss">
+  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
+    background-color: #FFFFFF;
+  }
+  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+    background-color: #FFFFFF;
+  }
+  .el-select-dropdown__item.selected {
+    font-weight: normal;
+  }
+</style>