晏有为
2024-05-16 781e1ea65273cf10d6e5ed39e435107d67a8c667
src/components/view/person-manage.vue
@@ -3,12 +3,14 @@
    padding: 20px 0;
      display: flex;
  }
  .left {
      width: 270px;
      height: calc(100% - 40px);
      background-color: white;
      padding: 15px;
   }
  .el-tree{
    height: calc(100% - 37px);
    overflow-y: auto;
@@ -39,6 +41,7 @@
      width: calc(100% - 305px);
      height: calc(100% - 40px);
   }
   .title {
      height: 60px;
      line-height: 60px;
@@ -82,20 +85,42 @@
    justify-content: center;
  }
</style>
<style>
  .person_manage .el-tree-node__content {
    height: 32px;
    font-size: 14px;
    border-radius: 2px;
  }
  .person_manage .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    color: #3A7BFA;
  }
  .person_manage .has-gutter .el-table__cell .cell {
    line-height: 34px;
    background-color: #f8f8f8;
  }
  .person_manage .has-gutter .el-table__cell {
    background-color: #fafafa !important;
  }
  .person_manage .el-table__row .cell {
    font-size: 14px;
  }
  .person_manage .el-table .warning-row .cell {
    color: #bababa;
  }
</style>
<template>
   <div class="person_manage">
      <!-- <el-row class="title">
      <el-col :span="12" style="padding-left: 20px;">用户管理</el-col>
      <el-col :span="12" style="text-align: right;">
      </el-col>
    </el-row> -->
    <div class="left">
      <el-row>
            <el-col :span="20">
               <el-input placeholder="输入关键字进行搜索" suffix-icon="el-icon-search" v-model="search" size="small"
                  style="margin-bottom: 5px;" clearable @blur="searchFilter" @clear="searchFilter"></el-input>
            style="margin-bottom: 5px;" clearable @blur="searchFilter" @clear="searchFilter"
            @keyup.enter.native="searchFilter()"></el-input>
            </el-col>
            <el-col :span="4" style="text-align: center;line-height: 30px;" v-if="addPower">
               <el-button type="primary" icon="el-icon-plus" size="mini" circle @click="handleAdd"></el-button>
@@ -104,8 +129,7 @@
         <el-tree :data="list" ref="tree" :props="{ children: 'children', label: 'name' }" node-key="id"
            :filter-node-method="filterNode" @node-click="handleNodeClick" highlight-current @node-expand="nodeOpen"
            @node-collapse="nodeClose" v-loading="treeLoad" :expand-on-click-node="false"
            :default-expanded-keys="expandedKeys"
        :default-checked-keys="[1]">
        :default-expanded-keys="expandedKeys" :default-checked-keys="[1]">
            <div class="custom-tree-node" slot-scope="{ node, data }">
               <el-row style="width: 100%;">
                  <el-col :span="21" :class="{sort:node.level>3}">
@@ -142,7 +166,8 @@
        <div class="search_thing">
          <div class="search_label">公司名称:</div>
          <div class="search_input">
            <el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.company" @keyup.enter.native="refreshTable()"></el-input>
            <el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.company"
              @keyup.enter.native="refreshTable()"></el-input>
          </div>
        </div>
        <div class="search_thing" style="padding-left: 30px;">
@@ -150,15 +175,16 @@
          <el-button size="small" type="primary" @click="refreshTable()">查 询</el-button>
        </div>
        <div class="search_thing">
          <el-button size="small" type="primary" @click="openthirdParty">获取三方人员</el-button>
          <el-button size="small" type="primary" @click="openthirdParty" v-if="addUserPower">获取三方人员</el-button>
          <el-button size="small" type="primary" @click="opeaAdd" v-if="addPower">新增用户</el-button>
        </div>
      </div>
      <div class="table">
        <ValueTable ref="ValueTable" :url="$api.user.selectUserList" :upUrl="$api.user.updateUser" :componentData="componentData" :key="upIndex" @upUser="upUser"/>
        <ValueTable ref="ValueTable" :url="$api.user.selectUserList" :upUrl="$api.user.updateUser"
          :componentData="componentData" :key="upIndex" />
      </div>
    </div>
    <el-dialog title="架构新增" :visible.sync="addDia" width="400px">
    <el-dialog title="架构新增" :visible.sync="addDia0" width="400px">
         <div class="body">
            <el-row style="line-height: 50px;">
               <el-col :span="6" style="text-align: right;">
@@ -170,30 +196,65 @@
            </el-row>
         </div>
         <span slot="footer" class="dialog-footer">
            <el-button @click="addDia = false">取 消</el-button>
        <el-button @click="addDia0 = false">取 消</el-button>
            <el-button type="primary" @click="addStandardTree" :loading="addLoad">确 定</el-button>
         </span>
      </el-dialog>
    <el-dialog title="添加三方人员" :visible.sync="addthirdParty" width="400px">
    <el-dialog title="获取人事系统人员信息" :visible.sync="addthirdParty" width="70%">
      <div class="body">
        <el-tree
          :data="datathirdParty"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]"
          :props="defaultProps">
        <el-row>
          <el-col :span="9" style="height: 70vh;overflow: hidden;">
            <el-input placeholder="输入关键字进行过滤" v-model="search2" size="small" style="width: 90%;padding: 0 5% 10px 5%;"
              clearable @blur="searchFilter2" @clear="searchFilter2" @keyup.enter.native="searchFilter2()">
            </el-input>
            <el-tree :data="datathirdParty" node-key="id" :props="defaultProps" @node-click="nodeClick2"
              style="height: calc(100% - 42px);"
              @node-expand="nodeOpen0" :filter-node-method="filterNode2" ref="tree2" highlight-current>
        </el-tree>
        <span slot="footer" style="padding-left: 200px">
          </el-col>
          <el-col :span="15" style="height: 70vh;padding-left: 8px;">
            <div class="search_thing" style="width: 360px;margin-bottom: 10px;">
              <div class="search_label" style="width: 140px;">员工号/员工姓名:</div>
              <div class="search_input">
                <el-input
                size="small"
                placeholder="请输入工号/员工姓名"
                @clear="searchPerson"
                clearable
                v-model="userSearch2"
                @keyup.enter.native="searchPerson()">
                <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer;" @click="searchPerson"></i></el-input>
                </div>
            </div>
            <el-table height="67vh" border stripe :data="personList" v-loading="personLoad" ref="personTable"
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="50">
              </el-table-column>
              <el-table-column prop="employeeID" label="员工号">
              </el-table-column>
              <el-table-column prop="name" label="员工姓名">
              </el-table-column>
              <el-table-column prop="isLive" label="已存在" width="80" align="center">
                <template slot-scope="scope">
                  <el-tag type="success" effect="dark" v-if="scope.row.isLive === 1">√</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
            <el-button @click="addthirdParty = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="" :loading="addLoad" size="mini">确 定</el-button>
         </span>
        <el-button type="primary" @click="addUser2" :loading="addLoad" size="mini">确 定</el-button>
      </div>
    </el-dialog>
   </div>
</template>
<script>
  import {
    compileToFunctions
  } from 'vue-template-compiler'
   import ValueTable from '../tool/value-table.vue'
   export default {
      components: {
@@ -201,41 +262,7 @@
      },
      data() {
         return {
        datathirdParty:[{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        datathirdParty: [],
        defaultProps: {
          children: 'children',
          label: 'label'
@@ -246,6 +273,7 @@
                  name: null,
                  state: null,
                  company: null,
            departId: null,
                  orderBy:{
                     field: 'id',
                     order: 'asc'
@@ -305,6 +333,7 @@
          }, */
               requiredAdd:['account','name','state','roleId','password','nameEn','phone'],
               requiredUp:['account','name','state','roleId','nameEn','phone'],
          // disabledUp:['departId'],
          addUpload:['pictureUrl','signatureUrl'],
          addUploadConfig:{
            accept:'.png, .jpg, .jpeg, .gif',
@@ -315,6 +344,7 @@
            upIndex: 0,
            addDia: false,
            addPower: true,
        addUserPower: true,
        delStandardTree:true,
        addDia0:false,
        addOb:{
@@ -327,8 +357,20 @@
        treeLoad:false,
        expandedKeys: [],
        addLoad:false,
        personList: [],
        personListCopy:[],
        treeLoad: false,
        personLoad: false,
        search2: '',
        multipleSelection: [],
        companiesList:[],
        currentCompaniesList: [],
        userSearch2:''
         }
      },
    // watch: {
    //   userSearch2(val){}
    // },
      mounted() {
      this.selectTreeList()
         this.selectRole()
@@ -338,17 +380,49 @@
      methods: {
      openthirdParty(){
        this.addthirdParty=true;
        this.$axios.get(this.$api.companies.selectCompaniesList).then(res => {
          this.companiesList = JSON.parse(JSON.stringify(res.data));
          this.datathirdParty = []
          for (let ai = 0; ai < res.data.length; ai++) {
            let a = res.data[ai]
            if (a.parentCompanyId === 'ROOT') {
              this.datathirdParty.push({
                id: a.companyId,
                label: a.companyName,
                children: []
              })
              res.data.splice(ai, 1)
              ai--
            } else {
              this.getOrganizational(a, ai, this.datathirdParty, res.data)
            }
          }
        })
      },
      getOrganizational(a, ai, children, list) {
        for (let bi = 0; bi < children.length; bi++) {
          let b = children[bi]
          if (a.parentCompanyId === b.id) {
            b.children.push({
              id: a.companyId,
              label: a.companyName,
              children: []
            })
            list.splice(ai, 1)
            ai--
            break
          } else {
            this.getOrganizational(a, ai, b.children, list)
          }
        }
      },
         refreshTable() {
            this.$refs['ValueTable'].selectList()
         },
         refresh() {
            this.componentData.entity = this.HaveJson(this.entityCopy)
            this.upIndex++
         },
         upUser(row){
            console.log(row);
        // this.upIndex++
        this.refreshTable()
         },
         selectRole(){
            this.$axios.get(this.$api.user.selectRoleList).then(res=>{
@@ -363,7 +437,12 @@
            })
         },
         opeaAdd(){
        if (!this.addOb.fatherId || this.selectTree == '' || this.selectTree == '全部') {
          this.$message.error('请选择一个组织')
          return
        }
            this.$refs.ValueTable.openAddDia(this.$api.user.addUser);
        this.$refs['ValueTable'].upData.departId = this.selectTree
         },
      selectTreeList(){
       /* this.$axios.get(this.$api.department.selectDepartment).then(res => {
@@ -386,6 +465,8 @@
            let power = JSON.parse(sessionStorage.getItem('power'))
            let up = false
            let add = false
        let addUserPower = false
        let delStandardTree = false
            for (var i = 0; i < power.length; i++) {
               if(power[i].menuMethod=='updateUser'){
                  up = true
@@ -393,14 +474,22 @@
               if(power[i].menuMethod=='addUser'){
                  add = true
               }
          if (power[i].menuMethod == 'delDepartment') {
            delStandardTree = true
          }
          if (power[i].menuMethod == 'addPersonUser') {
            addUserPower = true
          }
            }
            if(!up){
               this.componentData.do.splice(0, 1)
            }
        this.delStandardTree = delStandardTree
            this.addPower = add
        this.addUserPower = addUserPower
         },
      handleAdd(){
        if(this.addOb.fatherId){
        if (this.addOb.fatherId||this.addOb.name=='全部') {
          this.addDia0 = true;
        }else{
          this.$message.error('请选择一个架构层级')
@@ -409,9 +498,17 @@
      searchFilter() {
            this.$refs.tree.filter(this.search)
         },
      searchFilter2() {
        this.$refs.tree2.filter(this.search2)
      },
      filterNode(value, data) {
        console.log(data);
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
      },
      filterNode2(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
         },
      handleNodeClick(val, node, el) { //树的值
            this.selectTree = ''
@@ -429,6 +526,9 @@
         },
      nodeOpen(data, node, el) {
            $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder-opened')
      },
      nodeOpen0(data, node, el){
        this.currentCompaniesList[node.level-1] = data.id
         },
      nodeClose(data, node, el) {
            $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder')
@@ -496,6 +596,79 @@
               this.addLoad = false
            })
         },
      nodeClick2(ob, node, el) {
        this.currentCompaniesList[node.level-1] = ob.id
        if (ob.id !== 'SC21') {
          this.personLoad = true
          this.$axios.post(this.$api.companies.selectSimpleList, {
            companyId: ob.id
          }).then(res => {
            this.personListCopy = JSON.parse(JSON.stringify(res.data))
            this.personList = res.data
            this.personLoad = false
            this.$refs.personTable.doLayout()
          })
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      addUser2(){
        if(this.multipleSelection.length === 0){
          return this.$message.error('请选择人员')
        }
        if(this.currentCompaniesList.length === 0){
          return this.$message.error('请选择组织')
        }
        for (let index = this.currentCompaniesList.length-1; index >1; index--) {
          let obj = this.multipleSelection.find(a=>a.companyId==this.currentCompaniesList[index])
          if(!obj){
            this.currentCompaniesList.splice(index,1)
          }else{
            return
          }
        }
        let arr = []
        this.currentCompaniesList.forEach(b=>{
          this.companiesList.forEach(a=>{
            if(a.companyId===b){
              console.log(a)
            }
          })
          let obj = this.companiesList.find(a=>a.companyId==b)
          arr.push(obj)
          })
        this.addLoad = true
        this.$axios.post(this.$api.companies.addPersonUser, {
          company: arr,
          person: this.multipleSelection
        }, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          if (res.code === 201) {
            this.addLoad = false
            return
          }
          this.$message.success('操作成功')
          this.refresh()
          this.multipleSelection = []
          this.$refs.personTable.clearSelection()
          this.addthirdParty = false
        }).catch(e => {
          this.addthirdParty = false
          this.addLoad = false
        })
      },
      searchPerson(){
        let arr = JSON.parse(JSON.stringify(this.personListCopy))
        this.personList = arr.filter(a=>{
          if(a.employeeID.includes(this.userSearch2)||a.name.includes(this.userSearch2)){
            return true
          }
        })
      }
      }
   }
</script>