人员明细功能修改

value

2024-05-22 bc2023d47d12934448b343221dac69fecde20b9f

 src/components/view/a6-personnel-detail.vue

@@ -1,404 +1,413 @@
<style scoped>
   .standard {
      padding: 20px 0;
      display: flex;
   }
  .standard {
    padding: 20px 0;
    display: flex;
  }

   .left {
      width: 270px;
      height: calc(100% - 40px - 25px);
      background-color: white;
      padding: 15px;
   }
  .el-tree{
  .left {
    width: 270px;
    height: calc(100% - 40px - 25px);
    background-color: white;
    padding: 15px;
  }

  .el-tree {
    height: calc(100% - 37px);
    overflow-y: auto;
  }

   .custom-tree-node {
      width: 100%;
      line-height: 32px;
   }
  .custom-tree-node {
    width: 100%;
    line-height: 32px;
  }

   .custom-tree-node .el-icon-delete {
      color: #3A7BFA;
      opacity: 0;
      font-size: 18px;
   }
  .custom-tree-node .el-icon-delete {
    color: #3A7BFA;
    opacity: 0;
    font-size: 18px;
  }

   .custom-tree-node:hover .el-icon-delete {
      opacity: 1;
   }
  .custom-tree-node:hover .el-icon-delete {
    opacity: 1;
  }

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

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

   .right .title {
      height: 50px;
      line-height: 50px;
      padding: 0 10px;
      background-color: white;
   }
  .right .title {
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    background-color: white;
  }

   .standard_table {
      border-top: 1px solid #ebeef5;
      height: calc(100% - 50px);
      margin-top: 5px;
      background-color: white;
      user-select: none;
  .standard_table {
    border-top: 1px solid #ebeef5;
    height: calc(100% - 50px);
    margin-top: 5px;
    background-color: white;
    user-select: none;
    overflow-y: auto;
   }
  .sort{
  }

  .sort {
    width: 80% !important;
    overflow: hidden;
  }

  .search {
      background-color: #fff;
      height: 100%;
      display: flex;
      align-items: center;
    background-color: #fff;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
   }
  }

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

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

   .search_input {
      width: calc(100% - 110px);
   }
  .search_input {
    width: calc(100% - 110px);
  }
</style>
<style>
   .standard .el-tree-node__content {
      height: 32px;
      font-size: 14px;
      border-radius: 2px;
   }
  .standard .el-tree-node__content {
    height: 32px;
    font-size: 14px;
    border-radius: 2px;
  }

   .standard .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
      color: #3A7BFA;
   }
  .standard .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    color: #3A7BFA;
  }
</style>

<template>
   <div class="standard">
      <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>
            </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">
         <el-row class="title">
            <el-col :span="14" style="font-size: 14px;color: #999;">{{selectTree}}</el-col>
            <el-col :span="selectTree==''?24:10" style="text-align: right;" v-if="selectTree!=''">
  <div class="standard">
    <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>
        </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">
      <el-row class="title">
        <el-col :span="14" style="font-size: 14px;color: #999;">{{selectTree}}</el-col>
        <el-col :span="selectTree==''?24:10" style="text-align: right;" v-if="selectTree!=''">
          <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"></el-input></div>
            </div>
            <div class="search_thing" style="padding-left: 30px;width: 120px;">
              <el-button size="small" @click="refresh()">重 置</el-button>
                <el-button size="small" type="primary" @click="refreshTable()">查 询</el-button>
              <div class="search_input">
                <el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.name"
                  @keyup.enter.native="refreshTable()" @clear="refreshTable"></el-input>
              </div>
              <div class="search_label">
                <el-button type="primary" size="small" @click="selectUserDia = true">添加</el-button>
              </div>
            </div>
          </div>
            </el-col>
         </el-row>
         <el-row class="standard_table" v-loading="tableLoad">
            <ValueTable ref="ValueTable" :url="$api.department.showUserById" :componentData="componentData" />
         </el-row>
      </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>
   </div>
        </el-col>
      </el-row>
      <el-row class="standard_table" v-loading="tableLoad">
        <ValueTable ref="ValueTable" :url="$api.user.selectUserList" :componentData="componentData" />
      </el-row>
    </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="selectUserDia" width="70%">
       <div class="body" style="height: 60vh;" v-if="selectUserDia">
          <ValueTable ref="ValueTable2" :url="$api.user.selectUserList" :componentData="componentData2" />
       </div>
       <span slot="footer" class="dialog-footer">
          <el-button @click="selectUserDia = false">取 消</el-button>
          <el-button type="primary" @click="selectUser">确 定</el-button>
       </span>
    </el-dialog>
  </div>
</template>

<script>
   import ValueTable from '../tool/value-table.vue'
   export default {
      components: {
         ValueTable
      },
      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'
          }]
        }],
  import ValueTable from '../tool/value-table.vue'
  export default {
    components: {
      ValueTable
    },
    data() {
      return {
        datathirdParty: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        addthirdParty:false,
            search: null,
            list: [],
            selectTree: '',
            addDia: false,
            addOb: {
               name:'',
          fatherId:''
            },
            addLoad: false,
            treeLoad: false,
            addPower: false,
            tableLoad: false,
            delStandardProduct: false,
            addStandardProduct: false,
            componentData: {
               entity: {
            name:'',
            departId:'',
                  orderBy: {
                     field: 'id',
                     order: 'asc'
                  }
               },
          init:false,
               isIndex: true,
               showSelect: false,
               select: false,
               do: [],
          isPage: false,
               tagField: {
               },
               selectField: {},
            },
            expandedKeys: []
         }
      },
      mounted() {
         this.getPower()
         this.selectTreeList()
      },
      methods: {

         filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
         },
         searchFilter() {
            this.$refs.tree.filter(this.search)
         },
        addthirdParty: false,
        search: null,
        list: [],
        selectTree: '',
        addDia: false,
        addOb: {
          name: '',
          fatherId: ''
        },
        addLoad: false,
        treeLoad: false,
        addPower: false,
        tableLoad: false,
        addStandardProduct: false,
        componentData: {
          entity: {
            name: '',
            departLimsId: '',
            orderBy: {
              field: 'id',
              order: 'asc'
            }
          },
          init: false,
          isIndex: true,
          showSelect: false,
          select: false,
          do: [],
          tagField: {
            state: {
              select: [{
                value: 1,
                type: 'success',
                label: '启用'
              }, {
                value: 0,
                type: 'danger',
                label: '停用'
              }]
            }
          },
          selectField: {},
        },
        expandedKeys: [],
        selectUserDia: false,
        componentData2: {
           entity: {
              isCustom: 0,
              orderBy: {
                 field: 'id',
                 order: 'asc'
              }
           },
           isIndex: true,
           showSelect: true,
           select: false,
           do: [],
           tagField: {
              state: {
                 select: [{
                    value: 1,
                    type: 'success',
                    label: '启用'
                 }, {
                    value: 0,
                    type: 'danger',
                    label: '停用'
                 }]
              }
           },
           selectField: {},
        }
      }
    },
    mounted() {
      this.getPower()
      this.selectTreeList()
    },
    methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      searchFilter() {
        this.$refs.tree.filter(this.search)
      },
      refreshTable() {
        this.$refs.ValueTable.selectList()
         },
         refresh() {
            this.upIndex++;
      },
      refresh() {
        this.upIndex++;
        this.componentData.entity.departId = this.list[0].id;
        this.refreshTable()
         },
         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(' - ', '')
      },
      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.componentData.entity.departLimsId = val.id;
        this.refreshTable()
         },
         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 => {})
         },
         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')
         },
         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 = '全部'
      },
      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.delDepartmentLims, {
            id: data.id
          }).then(res => {
            if (res.code == 201) return
            this.$message.success('已删除')
            this.selectTreeList()
          })
        }).catch(e => {})
      },
      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')
      },
      selectTreeList() {
        this.treeLoad = true
        this.$axios.get(this.$api.department.selectDepartmentLim).then(res => {
          this.list = res.data
          this.list.forEach(a => {
            a.children.forEach(b => {
              this.expandedKeys.push(b.id)
            })
          })
          this.treeLoad = false
          this.componentData.entity.departLimsId = this.list[0].id;
          this.selectTree = this.list[0].name
          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
        })
      },
      addStandardTree() {
        if (this.addOb.name == null || this.addOb.factory == '') {
          this.$message.error('构架名称是必填项')
          return
        }
        this.addLoad = true
        this.$axios.post(this.$api.department.addDepartmentLims, 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 = ''
          this.addOb.fatherId = ''
            }).catch(e => {
               this.addDia = false
               this.addLoad = false
            })
         },
      handleAdd(){
        if(this.addOb.fatherId){
        }).catch(e => {
          this.addDia = false
          this.addLoad = false
        })
      },
      handleAdd() {
        if (this.addOb.fatherId) {
          this.addDia = true;
        }else{
        } else {
          this.$message.error('请选择一个架构层级')
        }
      },
         getPower() {
            let power = JSON.parse(sessionStorage.getItem('power'))
            let add = false
            let upStandardProduct = false
            let delStandardMethod = false
            let delStandardProduct = false
            let addStandardProduct = false
            let delStandardTree = false
            for (var i = 0; i < power.length; i++) {
               if (power[i].menuMethod == 'addStandardTree') {
                  add = true
               }
               if (power[i].menuMethod == 'upStandardProductList') {
                  upStandardProduct = true
               }
               if (power[i].menuMethod == 'delStandardMethodByFLSSM') {
                  delStandardMethod = true
               }
               if (power[i].menuMethod == 'delStandardProductByIds') {
                  delStandardProduct = true
               }
               if (power[i].menuMethod == 'addStandardProduct') {
                  addStandardProduct = true
               }
               if (power[i].menuMethod == 'delStandardTree') {
                  delStandardTree = true
               }
            }
            this.addPower = add
            this.upStandardProduct = upStandardProduct
            this.delStandardMethod = delStandardMethod
            this.delStandardProduct = delStandardProduct
            this.addStandardProduct = addStandardProduct
            this.delStandardTree = delStandardTree
         },
      }
   }
      getPower() {
        let power = JSON.parse(sessionStorage.getItem('power'))
        let add = false
        let addStandardProduct = false
        let delStandardTree = false
        for (var i = 0; i < power.length; i++) {
          if (power[i].menuMethod == 'addDepartmentLims') {
            add = true
          }
          if (power[i].menuMethod == 'addStandardProduct') {
            addStandardProduct = true
          }
          if (power[i].menuMethod == 'delDepartmentLims') {
            delStandardTree = true
          }
        }
        this.addPower = add
        this.addStandardProduct = addStandardProduct
        this.delStandardTree = delStandardTree
      },
      selectUser() {
         let selects = this.$refs.ValueTable2.multipleSelection
         if (selects.length == 0) {
            this.$message.error('未选择数据')
            return
         }
         delete selects['orderBy']
         delete selects['updateUser']
         delete selects['updateTime']
         this.user = selects
         this.selectUserDia = false
      }
    }
  }
</script>