岗位管理

package.json

@@ -15,7 +15,6 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
-    "@riophae/vue-treeselect": "^0.4.0",
     "JSONPath": "^0.11.2",
     "axios": "0.18.1",
     "browserslist": "^4.16.4",

src/views/categroyManager/insideSetting/staffManager.vue

@@ -157,7 +157,7 @@
     <el-dialog :title="formTitle[formActionTitle]"
                :visible.sync="roleStatus"
                @close="onFormClose('ruleForm')"
-               width="500px">
+               width="650px">
       <el-form :model="form"
                :rules="rules"
                ref="ruleForm">
@@ -217,36 +217,55 @@
                        :value="item.id"></el-option>
           </select-all>
         </el-form-item>
-        <el-form-item label="所属部门"
-                      prop="deptIds"
-                      :label-width="formLabelWidth">
-          <treeselect
-                v-model="form.deptIds"
-                filterable
-                clearable
-                multiple
-                style="line-height: 36px;"
-                :options="deptList"
-                :normalizer="normalizer"
-                placeholder="请选择归属部门"
-              />
-        </el-form-item>
-        <el-form-item label="所属岗位"
-                      prop="postIds"
-                      :label-width="formLabelWidth">
-          <select-all
-                     filterable
-                     clearable
-                      placeholder="请选择分部"
-                     collapse-tags
-                     v-model.trim="form.postIds"
-                     multiple>
-            <el-option v-for="item in postList"
-                       :key="item.value"
-                       :label="item.label"
-                       :value="item.value"></el-option>
-          </select-all>
-        </el-form-item>
+
+        <div v-for="(postDeptIds, index) in form.postDeptIds" :key="index">
+          <el-form-item
+                :label="'岗位管理' + (index + 1)"
+                :label-width="formLabelWidth"
+                class="setWidth"
+                :prop="'postDeptIds.' + index + '.postId'"
+                :rules="[{ required: true, message: '请选择所属岗位', trigger: 'change' }]"
+              >
+              <el-select
+                      filterable
+                      clearable
+                      placeholder="请选择所属岗位"
+                      style="width: 180px !important"
+                      v-model.trim="postDeptIds.postId">
+                <el-option v-for="item in postList"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"></el-option>
+              </el-select>
+              </el-form-item>
+              <el-form-item
+                class="setWidth"
+                style="margin: 0 10px;width: 190px !important;"
+                :prop="'postDeptIds.' + index + '.deptIds'"
+                :rules="[{ type: 'array', required: true, message: '请选择所属部门', trigger: 'change' }]"
+              >
+                <el-cascader
+                  v-model="postDeptIds.deptIds"
+                  :options="deptList"
+                  :show-all-levels="false"
+                  :collapse-tags="true"
+                  :props="{ multiple: true, checkStrictly: false }"
+                ></el-cascader>
+              </el-form-item>
+              <el-button
+                icon="el-icon-minus"
+                circle
+                v-if="form.postDeptIds.length > 1"
+                 @click.prevent="removePostDept(postDeptIds)"
+                style="height: 40px"
+              ></el-button>
+              <el-button
+                icon="el-icon-plus"
+                @click.prevent="addPostDept"
+                circle
+                style="margin-left: 5px; height: 40px"
+              ></el-button>
+        </div>
         <el-form-item label="工作类型"
                       prop="jobNature"
                       :label-width="formLabelWidth">
@@ -349,8 +368,8 @@ import { permission } from "@/utils/directivePage";
 import { queryEmployByOrganId, employeeOperate, getUserRole, employeeAdd, employeeUpdate, hasCourseGroupRelation, updateEducationTeacherId, queryEmployeeOrganByUser, getDepts, getPosts } from '@/api/systemManage'
 import { findEducationTeacher } from '@/api/specialSetting'
 import { findEducationUsers } from '@/api/buildTeam'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+// import Treeselect from '@riophae/vue-treeselect'
+// import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import Tooltip from '@/components/Tooltip/index'
 import { isvalidPhone } from '@/utils/validate'
 import handover from './modals/handover'
@@ -365,7 +384,7 @@ let validPhone = (rule, value, callback) => {
 }
 export default {
   name: 'staffManager',
-  components: { pagination, Tooltip, handover, Treeselect },
+  components: { pagination, Tooltip, handover },
   data () {
     return {
       organList: [],
@@ -401,8 +420,12 @@ export default {
         phone: null,
         roleIds: [],
         organIdLists: [],
-        deptIds: [],
-        postIds: [],
+        postDeptIds: [{
+          postId: null,
+          deptIds: []
+        }],
+        // deptIds: [],
+        // postIds: [],
         jobNature: null,
         entryDate: null,
         contactAddress: null,
@@ -414,8 +437,8 @@ export default {
         phone: [{ type: 'number', required: true, validator: validPhone, trigger: 'blur' }, { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
         roleIds: [{ type: 'array', required: true, message: '请选择分类', trigger: 'change' }],
         organIdLists: [{ type: 'array', required: true, message: '请选择所属分部', trigger: 'change' }],
-        deptIds: [{ type: 'array', required: true, message: '请选择所属部门', trigger: 'change' }],
-        postIds: [{ type: 'array', required: true, message: '请选择所属岗位', trigger: 'change' }],
+        // deptIds: [{ type: 'array', required: true, message: '请选择所属部门', trigger: 'change' }],
+        // postIds: [{ type: 'array', required: true, message: '请选择所属岗位', trigger: 'change' }],
         jobNature: [{ required: true, message: '请选择工作类型', trigger: 'change' }],
         entryDate: [{ required: true, message: '请选择入职时间', trigger: 'blur' }],
 
@@ -448,16 +471,33 @@ export default {
     onRoleSubmit (formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          this.form.organIdList = this.form.organIdLists.join(',')
+          const { organIdLists, postDeptIds, ...res } = this.form
+          let tempPost = []
+          postDeptIds.forEach(post => {
+            let tempIds = []
+            post.deptIds.forEach(item => {
+              tempIds.push(item[item.length - 1])
+            })
+            tempPost.push({
+              postId: post.postId,
+              deptIds: tempIds
+            })
+          })
+
+          let tempForm = {
+            postDeptIds: JSON.stringify(tempPost),
+            organIdList: organIdLists.join(','),
+            ...res
+          }
           if (this.formActionTitle == 'create') {
             if (this.form.id) { // 判断有没有Id，如果有则删除
               delete this.form.id
             }
-            employeeAdd(this.form).then(res => {
+            employeeAdd(tempForm).then(res => {
               this.messageTips('添加', res)
             })
           } else if (this.formActionTitle == 'update') {
-            employeeUpdate(this.form).then(res => {
+            employeeUpdate(tempForm).then(res => {
               this.messageTips('修改', res)
             })
           }
@@ -502,14 +542,21 @@ export default {
     },
     /** 转换菜单数据结构 */
     normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children
-      }
-      return {
-        id: node.deptId,
-        label: node.deptName,
-        children: node.children
+      let temp = []
+      if (node.children && node.children.length > 0) {
+        node.children.forEach(item => {
+          let child = this.normalizer(item)
+          let obj = {
+            value: item.deptId,
+            label: item .deptName
+          }
+          if(child && child.length > 0) {
+            obj.children = child
+          }
+          temp.push(obj)
+        })
       }
+      return temp
     },
     getRoleList () { // 获取角色
       getUserRole({ delFlag: 0, rows: 9999 }).then(res => {
@@ -525,16 +572,23 @@ export default {
         }
       })
       getDepts({ rows: 9999 }).then(res => {
-        console.log(res)
         if(res.code == 200 && res.data && res.data.length > 0) {
-          this.deptList = res.data
+          const depts = res.data || []
+          const formatArr = []
+          depts.forEach(dep => {
+            formatArr.push({
+              value: dep.deptId,
+              label: dep.deptName,
+              children: this.normalizer(dep)
+            })
+          })
+          this.deptList = formatArr
         }
       })
       // 岗位
       getPosts({ rows: 9999 }).then(res => {
         if(res.code == 200 && res.data && res.data.length > 0) {
           this.postList = []
-          console.log(res.data)
           res.data.forEach(item => {
             this.postList.push({
               label: item.postName,
@@ -556,6 +610,27 @@ export default {
       this.roleStatus = true
       // 修改的时候
       if (type == 'update') {
+        // 初始化数据
+        let postDeptArr = []
+        if(data.postDeptIds) {
+          const postDept = JSON.parse(data.postDeptIds) || []
+          postDept.forEach(dept => {
+            let deptIds = dept.deptIds || []
+            let deptArr = []
+            deptIds.forEach(ds => {
+              deptArr.push(this.formatParentId(ds, this.deptList))
+            })
+            postDeptArr.push({
+              postId: dept.postId,
+              deptIds: deptArr
+            })
+          })
+        } else {
+          postDeptArr = [{
+            postId: null,
+            deptIds: []
+          }]
+        }
         this.form = {
           id: data.id,
           realName: data.realName,
@@ -567,20 +642,40 @@ export default {
           entryDate: data.entryDate,
           contactAddress: data.contactAddress,
           postalCode: data.postalCode,
-          deptIds: data.deptIds ? eval(data.deptIds) : [],
-          postIds: data.postIds ? eval(data.postIds) : []
+          postDeptIds: postDeptArr
         }
       }
     },
+    formatParentId(id, list, ids = []) {
+      for (const item of list) {
+        if (item.children) {
+          const cIds = this.formatParentId(id, item.children, [...ids, item.value])
+          if(cIds.includes(id)) {
+            return cIds
+          }
+        }
+        if (item.value === id) {
+          return [...ids, id]
+        }
+      }
+      return ids
+    },
     onFormClose (formName) { // 关闭弹窗重置验证
       this.form = {
         realName: null,
         gender: null,
         phone: null,
         roleName: null,
+        roleIds: [],
         organIdLists: [],
         jobNature: null,
-        entryDate: null
+        entryDate: null,
+        contactAddress: null,
+        postalCode: null,
+        postDeptIds: [{
+          postId: null,
+          deptIds: []
+        }]
       }
       this.$refs[formName].resetFields()
     },
@@ -675,6 +770,18 @@ export default {
         }
       })
     },
+    removePostDept(item) {
+      const index = this.form.postDeptIds.indexOf(item);
+      if (index !== -1) {
+        this.form.postDeptIds.splice(index, 1);
+      }
+    },
+    addPostDept() {
+      this.form.postDeptIds.push({
+        postId: null,
+        deptIds: []
+      });
+    },
   },
   watch: {
     educationViseble (val) {
@@ -706,4 +813,7 @@ export default {
 /deep/.el-date-editor.el-input {
   width: 100% !important;
 }
+.setWidth {
+  display: inline-block;
+}
 </style>