增加人事系统对接

value

2024-05-16 083c818af77d33d619dba3dc20f94e996225a1c7

 src/components/view/person-manage.vue

@@ -1,199 +1,588 @@
<style scoped>
   .title {
      height: 60px;
      line-height: 60px;
   }
  .person_manage {
    padding: 20px 0;
    display: flex;
  }

   .search {
      background-color: #fff;
      height: 80px;
      display: flex;
      align-items: center;
   }
  .left {
    width: 270px;
    height: calc(100% - 40px);
    background-color: white;
    padding: 15px;
  }

   .search_thing {
      width: 350px;
      display: flex;
      align-items: center;
   }
  .el-tree {
    height: calc(100% - 37px);
    overflow-y: auto;
  }

   .search_label {
      width: 110px;
      font-size: 14px;
      text-align: right;
   }
  .custom-tree-node {
    width: 100%;
    line-height: 32px;
  }

   .search_input {
      width: calc(100% - 110px);
   }
  .custom-tree-node .el-icon-delete {
    color: #3A7BFA;
    opacity: 0;
    font-size: 18px;
  }

   .table {
      margin-top: 10px;
      background-color: #fff;
      width: calc(100% - 40px);
      height: calc(100% - 60px - 80px - 10px - 40px);
      padding: 20px;
   }
  .custom-tree-node:hover .el-icon-delete {
    opacity: 1;
  }

  .node_i {
    color: orange;
    font-size: 18px;
  }

  .right {
    margin-left: 5px;
    width: calc(100% - 305px);
    height: calc(100% - 40px);
  }

  .title {
    height: 60px;
    line-height: 60px;
  }

  .search {
    background-color: #fff;
    height: 60px;
    display: flex;
    align-items: center;
  }

  .search_thing {
    width: 250px;
    display: flex;
    align-items: center;
  }

  .search_label {
    width: 90px;
    font-size: 14px;
    text-align: right;
  }

  .search_input {
    width: calc(100% - 90px);
  }

  .table {
    margin-top: 4px;
    background-color: #fff;
    height: calc(100% - 44px);
  }
</style>
<style>
  .el-upload--text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    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">
      <div>
         <el-row class="title">
            <el-col :span="12" style="padding-left: 20px;">人员管理</el-col>
            <el-col :span="12" style="text-align: right;">
               <el-button size="medium" type="primary" @click="opeaAdd" v-if="addPower">新增人员</el-button>
            </el-col>
         </el-row>
      </div>
      <div class="search">
         <div class="search_thing">
            <div class="search_label">客户名称：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable
                  v-model="componentData.entity.name" @keyup.enter.native="refreshTable()"></el-input></div>
         </div>
         <div class="search_thing">
            <div class="search_label">账号状态：</div>
            <div class="search_input">
               <el-select size="small" v-model="componentData.entity.state" style="width: 100%;">
                  <el-option label="全部" :value="null"></el-option>
                  <el-option label="启用" :value="1"></el-option>
                  <el-option label="停用" :value="0"></el-option>
               </el-select>
            </div>
         </div>
         <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>
            </div>
         </div>
         <div class="search_thing" style="padding-left: 30px;">
            <el-button size="small" @click="refresh()">重 置</el-button>
            <el-button size="small" type="primary" @click="refreshTable()">查 询</el-button>
         </div>
      </div>
      <div class="table">
         <ValueTable ref="ValueTable" :url="$api.user.selectUserList" :upUrl="$api.user.updateUser" :componentData="componentData" :key="upIndex" @upUser="upUser"/>
      </div>
   </div>
  <div class="person_manage">
    <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"
            @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>
        </el-col>
      </el-row>
      <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]">
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <el-row style="width: 100%;">
            <el-col :span="21" :class="{sort:node.level>3}">
              <span><i
                  :class="`node_i ${data.children != undefined&&data.children.length>0 ? 'el-icon-folder-opened' : 'el-icon-tickets'}`"></i>
                {{ data.name }}</span>
            </el-col>
            <el-col :span="2" style="text-align: right;" v-if="delStandardTree&&node.level>1">
              <el-button type="text" size="mini" @click.stop="remove(node, data)">
                <i class="el-icon-delete"></i>
              </el-button>
            </el-col>
          </el-row>
        </div>
      </el-tree>
    </div>
    <div class="right">
      <div class="search">
        <div class="search_thing">
          <div class="search_label">用户名：</div>
          <div class="search_input"><el-input size="small" placeholder="请输入" clearable
              v-model="componentData.entity.name" @keyup.enter.native="refreshTable()"></el-input></div>
        </div>
        <div class="search_thing">
          <div class="search_label">账号状态：</div>
          <div class="search_input">
            <el-select size="small" v-model="componentData.entity.state" style="width: 100%;">
              <el-option label="全部" :value="null"></el-option>
              <el-option label="启用" :value="1"></el-option>
              <el-option label="停用" :value="0"></el-option>
            </el-select>
          </div>
        </div>
        <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>
          </div>
        </div>
        <div class="search_thing" style="padding-left: 30px;">
          <el-button size="small" @click="refresh()">重 置</el-button>
          <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="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" />
      </div>
    </div>
    <el-dialog title="架构新增" :visible.sync="addDia" width="400px">
      <div class="body">
        <el-row style="line-height: 50px;">
          <el-col :span="6" style="text-align: right;">
            <span class="required-span">* </span>架构名称：
          </el-col>
          <el-col :span="16" :offset="1">
            <el-input v-model="addOb.name" placeholder="请输入架构名称" clearable size="small"></el-input>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDia = false">取 消</el-button>
        <el-button type="primary" @click="addStandardTree" :loading="addLoad">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="获取人事系统人员信息" :visible.sync="addthirdParty" width="70%">
      <div class="body">
        <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);" :filter-node-method="filterNode2" ref="tree2" highlight-current>
            </el-tree>
          </el-col>
          <el-col :span="15" style="height: 70vh;padding-left: 8px;">
            <el-table height="70vh" 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="addUser2" :loading="addLoad" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
   import ValueTable from '../tool/value-table.vue'
   export default {
      components: {
         ValueTable
      },
      data() {
         return {
            componentData: {
               entity: {
                  name: null,
                  state: null,
                  company: null,
                  orderBy:{
                     field: 'id',
                     order: 'asc'
                  }
               },
               isIndex: false,
               showSelect: true,
               select: true,
               do: [{
                  id: 'update',
                  font: '编辑',
                  type: 'text',
                  method: 'doDiy',
                  field:['createUserName','updateUserName','roleName','角色=roleId','密码=password']
               }],
               tagField: {
                  state: {
                     select: [{
                        value: 1,
                        type: 'success',
                        label: '启用'
                     },{
                        value: 0,
                        type: 'danger',
                        label: '停用'
                     }]
                  }
               },
               selectField: {
                  state: {
                     select: [{
                        value: 1,
                        type: 'success',
                        label: '启用'
                     },{
                        value: 0,
                        type: 'danger',
                        label: '停用'
                     }]
                  },
                  roleId: {
                     select: []
                  }
               },
               requiredAdd:['account','name','state','roleId','password'],
               requiredUp:['account','name','state','roleId']
            },
            entityCopy: {},
            upIndex: 0,
            addDia: false,
            addPower: true
         }
      },
      mounted() {
         this.selectRole()
         this.entityCopy = this.HaveJson(this.componentData.entity)
         this.getPower()
      },
      methods: {
         refreshTable() {
            this.$refs['ValueTable'].selectList()
         },
         refresh() {
            this.componentData.entity = this.HaveJson(this.entityCopy)
            this.upIndex++
         },
         upUser(row){
            console.log(row);
         },
         selectRole(){
            this.$axios.get(this.$api.user.selectRoleList).then(res=>{
               var str = []
               res.data.forEach(a=>{
                  str.push({
                     label: a.name,
                     value: a.id
                  })
               })
               this.componentData.selectField.roleId.select = str
            })
         },
         opeaAdd(){
            this.$refs.ValueTable.openAddDia(this.$api.user.addUser);
         },
         // 权限分配
         getPower(){
            let power = JSON.parse(sessionStorage.getItem('power'))
            let up = false
            let add = false
            for (var i = 0; i < power.length; i++) {
               if(power[i].menuMethod=='updateUser'){
                  up = true
               }
               if(power[i].menuMethod=='addUser'){
                  add = true
               }
            }
            if(!up){
               this.componentData.do.splice(0, 1)
            }
            this.addPower = add
         }
      }
   }
</script>
  import {
    compileToFunctions
  } from 'vue-template-compiler'
  import ValueTable from '../tool/value-table.vue'
  export default {
    components: {
      ValueTable
    },
    data() {
      return {
        datathirdParty: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        addthirdParty: false,
        componentData: {
          entity: {
            name: null,
            state: null,
            company: null,
            departId: null,
            orderBy: {
              field: 'id',
              order: 'asc'
            }
          },
          row: 2,
          isIndex: true,
          showSelect: false,
          select: false,
          init: false,
          do: [{
            id: 'update',
            font: '编辑',
            type: 'text',
            method: 'doDiy',
            field: ['createUserName', 'updateUserName', 'roleName', '角色=roleId', '密码=password']
          }],
          tagField: {
            state: {
              select: [{
                value: 1,
                type: 'success',
                label: '启用'
              }, {
                value: 0,
                type: 'danger',
                label: '停用'
              }]
            }
          },
          selectField: {
            state: {
              select: [{
                value: 1,
                type: 'success',
                label: '启用'
              }, {
                value: 0,
                type: 'danger',
                label: '停用'
              }]
            },
            roleId: {
              select: []
            }
          },
          /* cascaderField:{
            departId:{
              tree:[]
            },
            // 字段配置
            props:{
              value:'id',
              label:'name',
              checkStrictly: true
            }
          }, */
          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',
            url: this.$api.deviceScope.uploadFile
          },
        },
        entityCopy: {},
        upIndex: 0,
        addDia: false,
        addPower: true,
        delStandardTree: true,
        addDia0: false,
        addOb: {
          fatherId: '',
          name: '',
        },
        search: null,
        list: [],
        selectTree: '',
        treeLoad: false,
        expandedKeys: [],
        addLoad: false,
        personList: [],
        treeLoad: false,
        personLoad: false,
        search2: '',
        multipleSelection: []
      }
    },
    mounted() {
      this.selectTreeList()
      this.selectRole()
      this.entityCopy = this.HaveJson(this.componentData.entity)
      this.getPower()
    },
    methods: {
      openthirdParty() {
        this.addthirdParty = true;
        this.$axios.get(this.$api.companies.selectCompaniesList).then(res => {
          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++
        this.refreshTable()
      },
      selectRole() {
        this.$axios.get(this.$api.user.selectRoleList).then(res => {
          var str = []
          res.data.forEach(a => {
            str.push({
              label: a.name,
              value: a.id
            })
          })
          this.componentData.selectField.roleId.select = str
        })
      },
      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 => {
          this.componentData.cascaderField.departId.tree = this.handleTree(res.data[0].children)
            }) */
        this.$refs.ValueTable.selectList()
      },
      handleTree(arr) {
        arr.forEach(a => {
          if (a.children.length == 0) {
            a.children = null;
          } else {
            this.handleTree(a.children)
          }
        })
        return arr
      },
      // 权限分配
      getPower() {
        let power = JSON.parse(sessionStorage.getItem('power'))
        let up = false
        let add = false
        let delStandardTree = false
        for (var i = 0; i < power.length; i++) {
          if (power[i].menuMethod == 'updateUser') {
            up = true
          }
          if (power[i].menuMethod == 'addUser') {
            add = true
          }
          if (power[i].menuMethod == 'delDepartment') {
            delStandardTree = true
          }
        }
        if (!up) {
          this.componentData.do.splice(0, 1)
        }
        this.delStandardTree = delStandardTree
        this.addPower = add
      },
      handleAdd() {
        if (this.addOb.fatherId) {
          this.addDia0 = true;
        } else {
          this.$message.error('请选择一个架构层级')
        }
      },
      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 = ''
        this.getNodeParent(node)
        this.selectTree = this.selectTree.replace(' - ', '')
        let data = this.selectTree.split(' - ')
        let data2 = ''
        for (let index = data.length - 1; index >= 0; index--) {
          data2 += " - " + data[index]
        }
        this.selectTree = data2.replace(' - ', '')
        this.addOb.fatherId = val.id;
        this.componentData.entity.departId = val.id;
        this.refreshTable()
      },
      nodeOpen(data, node, el) {
        $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder-opened')
      },
      nodeClose(data, node, el) {
        $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder')
      },
      getNodeParent(val) {
        if (val.parent != null) {
          this.selectTree += ' - ' + val.label
          this.getNodeParent(val.parent)
        }
      },
      remove(node, data) {
        this.$confirm("是否删除该层级", "提示", {
          type: "error"
        }).then(() => {
          this.treeLoad = true
          this.$axios.post(this.$api.department.delDepartment, {
            id: data.id
          }).then(res => {
            if (res.code == 201) return
            this.$message.success('已删除')
            this.selectTreeList()
          })
        }).catch(e => {})
      },
      selectTreeList() {
        this.treeLoad = true
        this.$axios.get(this.$api.department.selectDepartment).then(res => {
          this.list = res.data
          this.list.forEach(a => {
            a.children.forEach(b => {
              b.children.forEach(c => {
                this.expandedKeys.push(c.id)
              })
            })
          })
          this.treeLoad = false
          this.componentData.entity.departId = this.list[0].id;
          this.selectTree = '全部'
          this.refreshTable()
        })
      },
      addStandardTree() {
        if (this.addOb.name == null || this.addOb.factory == '') {
          this.$message.error('构架名称是必填项')
          return
        }
        this.addLoad = true
        this.$axios.post(this.$api.department.addDepartment, this.addOb, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          if (res.code === 201) {
            this.addLoad = false
            return
          }
          this.$message.success('添加成功')
          this.addDia0 = false
          this.selectTreeList()
          this.addLoad = false
          this.addOb.name = ''
          this.addOb.fatherId = ''
        }).catch(e => {
          this.addDia0 = false
          this.addLoad = false
        })
      },
      nodeClick2(ob, node, el) {
        if (ob.id !== 'SC21') {
          this.personLoad = true
          this.$axios.post(this.$api.companies.selectSimpleList, {
            companyId: ob.id
          }).then(res => {
            this.personList = res.data
            this.personLoad = false
            this.$refs.personTable.doLayout()
          })
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection);
      },
      addUser2(){
      }
    }
  }
</script>