优化设备明细、检验任务附件权限

licp

2024-06-07 32a95699e59c5c65e18c08643266c9cbfa380ee4

 src/components/view/person-manage.vue

@@ -1,204 +1,653 @@
<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 @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-expand-all>
        <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" style="display: flex;justify-content: right;margin-right: 10px;">
          <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" />
      </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" v-loading="thirdPartyLoading">
        <el-row>
          <el-col :span="8" style="height: 70vh;overflow: hidden;" v-if="companiesList.length!=1">
            <el-input placeholder="输入关键字搜索" v-model="search2" size="small" style="width: 90%;padding: 0 5% 10px 5%;"
              clearable @clear="searchFilter2" @keyup.enter.native="searchFilter2()">
            </el-input>
            <el-tree :data="datathirdParty" node-key="companyId" :props="defaultProps" @node-click="nodeClick2"
              style="height: calc(100% - 42px);" @node-expand="nodeOpen0" :filter-node-method="filterNode2" ref="tree2"
              highlight-current>
            </el-tree>
          </el-col>
          <el-col :span="companiesList.length==1?24:16" style="height: 70vh;padding-left: 8px;">
            <div class="search_thing" style="width: 100%;margin-bottom: 10px;justify-content: right;">
              <div class="search_label" style="width: 200px;">员工号/员工姓名：</div>
              <div class="search_input" style="width: 250px;">
                <el-input size="small" placeholder="请输入工号/员工姓名" @clear="searchPerson" clearable v-model="userSearch2"
                  @keyup.enter.native="searchPerson()"></el-input>
              </div>
              <!-- <div class="search_label" style="width: 200px;">员工号：</div>
              <div class="search_input">
                <el-input size="small" placeholder="请输入工号" @clear="searchPerson" clearable v-model="searchEmployeeID"
                  @keyup.enter.native="searchPerson2()"></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="department" label="部门" min-width="200">
              </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: true,
               showSelect: false,
               select: 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: []
                  }
               },
               requiredAdd:['account','name','state','roleId','password'],
          addUpload:['pictureUrl','signatureUrl'],
          addUploadConfig:{
            accept:'.png, .jpg, .jpeg, .gif',
            url:this.$api.deviceScope.uploadFile
  import {
    compileToFunctions
  } from 'vue-template-compiler'
  import ValueTable from '../tool/value-table.vue'
  export default {
    components: {
      ValueTable
    },
    data() {
      return {
        datathirdParty: [],
        defaultProps: {
          children: 'children',
          label: 'companyName'
        },
        addthirdParty: false,
        componentData: {
          entity: {
            name: null,
            state: null,
            company: null,
            roleId: null,
            orderBy: {
              field: 'id',
              order: 'asc'
            }
          },
               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
         }
      }
   }
          row: 2,
          isIndex: true,
          showSelect: false,
          select: false,
          init: false,
          do: [{
            id: 'update',
            font: '编辑',
            type: 'text',
            method: 'doDiy',
            field: ['roleName', '角色=roleId', '密码=password',
              '姓名EN=nameEn', '年龄=age', '邮箱=email', '单位=company', '签名=signatureUrl', '个人照片=pictureUrl'
            ]
          }],
          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: []
            },
            company: {select: []}
          },
          requiredAdd: ['account', 'name', 'state', 'roleId', 'password', 'nameEn', 'phone'],
          requiredUp: ['account', 'name', 'state', 'roleId', 'nameEn', 'phone'],
          addUpload: ['pictureUrl', 'signatureUrl'],
          addUploadConfig: {
            accept: '.png, .jpg, .jpeg, .gif',
            url: this.$api.deviceScope.uploadFile
          },
        },
        entityCopy: {},
        upIndex: 0,
        addDia: false,
        addPower: true,
        addUserPower: true,
        delStandardTree: true,
        addDia0: false,
        addOb: {
          fatherId: 10001,
          name: '',
        },
        search: null,
        list: [],
        selectTree: '',
        treeLoad: false,
        addLoad: false,
        personList: [],
        personListCopy: [],
        personLoad: false,
        search2: '',
        multipleSelection: [],
        companiesList: [],
        currentCompaniesList: [],
        userSearch2: '',
        searchEmployeeID: null,
        thirdPartyLoading:false
      }
    },
    // watch: {
    //   userSearch2(val){}
    // },
    mounted() {
      this.selectTreeList()
      this.selectRole()
      this.selectCustomEnum()
      this.entityCopy = this.HaveJson(this.componentData.entity)
      this.getPower()
    },
    methods: {
      openthirdParty() {
        this.addthirdParty = true;
        this.thirdPartyLoading = true;
        this.$axios.get(this.$api.companies.selectCompaniesList).then(res => {
          this.companiesList = this.HaveJson(res.data);
          if(this.companiesList.length ==1){
            this.$axios.post(this.$api.companies.selectSimpleList, {
              companyId: this.companiesList[0].companyId
            }).then(res => {
              this.thirdPartyLoading = false;
              this.personListCopy = JSON.parse(JSON.stringify(res.data))
              this.personList = res.data
              this.$refs.personTable.doLayout()
            })
          }else{
            this.thirdPartyLoading = false;
          }
          this.datathirdParty = this.tranListToTreeData(res.data, "ROOT");
        })
        if(this.componentData.entity.roleId > 10000)this.$message.warning('由于未选中具体角色，新增用户将成为默认角色')
      },
      tranListToTreeData(list, rootValue) {
        const arr = [];
        list.forEach((item) => {
          if (item.parentCompanyId === rootValue) {
            const children = this.tranListToTreeData(list, item.companyId);
            if (children.length) {
              item.children = children;
            }
            arr.push(item);
          }
        });
        return arr;
      },
      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() {
        this.$refs.ValueTable.openAddDia(this.$api.user.addUser);
        this.$refs['ValueTable'].upData.departId = this.selectTree
      },
      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 addUserPower = 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 (power[i].menuMethod == 'selectCompaniesList') {
            addUserPower = true
          }
        }
        if (!up) {
          this.componentData.do.splice(0, 1)
        }
        this.delStandardTree = delStandardTree
        this.addPower = add
        this.addUserPower = addUserPower
      },
      handleAdd() {
        this.addDia = true;
      },
      searchFilter() {
        this.$refs.tree.filter(this.search)
      },
      searchFilter2() {
        this.$refs.tree2.filter(this.search2)
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      filterNode2(value, data) {
        if (!value) return true;
        return data['companyName'].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.componentData.entity.roleId = val.id;
        this.refreshTable()
      },
      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')
      },
      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.treeLoad = false
          this.componentData.entity.roleId = this.list[0].id;
          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.addDia = false
          this.selectTreeList()
          this.addLoad = false
          this.addOb.name = ''
        }).catch(e => {
          this.addDia = false
          this.addLoad = false
        })
      },
      nodeClick2(ob, node, el) {
        this.getNodeParent(node)
        if (ob.companyId !== 'SC21') {
          this.personLoad = true
          this.$axios.post(this.$api.companies.selectSimpleList, {
            companyId: ob.companyId
          }).then(res => {
            this.personListCopy = JSON.parse(JSON.stringify(res.data))
            this.personList = res.data
            this.personLoad = false
            this.$refs.personTable.doLayout()
          })
        }
      },
      getNodeParent(val) {
        this.currentCompaniesList[val.level - 1] = val.data.companyId
        if (val.parent != null) {
          this.getNodeParent(val.parent)
        }
      },
      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)
          }
        } */
        let arr = []
        this.currentCompaniesList.forEach(b => {
          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,
          roleId: this.componentData.entity.roleId
        }, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          if (res.code === 201) {
            this.addLoad = false
            return
          }
          this.$message.success('操作成功')
          this.multipleSelection = []
          this.$refs.personTable.clearSelection()
          this.addLoad = false
          this.userSearch2 = ''
          this.selectTreeList()
        }).catch(e => {
          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
          }
        })
      },
      searchPerson2(){
        if(this.searchEmployeeID===null||this.searchEmployeeID===''){
          this.searchPerson()
          return
        }
        this.$axios.post(this.$api.companies.selectPersonUser, {
          code: this.searchEmployeeID
        }).then(res=>{
          this.personList = []
          this.personList.push(res.data)
        })
      },
      selectCustomEnum(){
        this.$axios.get(this.$api.user.selectCustomEnum).then(res=>{
          this.componentData.selectField.company.select = []
          res.data.forEach(a=>{
            this.componentData.selectField.company.select.push({
              label: a.company,
              value: a.id
            })
          })
        })
      }
    }
  }
</script>