人员管理树形

licp

2024-05-15 86b3da1595be68c9b69df4be1e8a484e9eace245

 src/components/view/person-manage.vue

@@ -1,4 +1,44 @@
<style scoped>
  .person_manage{
    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;
  }

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

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

   .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;
@@ -30,8 +70,7 @@
   .table {
      margin-top: 10px;
      background-color: #fff;
      width: calc(100% - 40px);
      height: calc(100% - 60px - 80px - 10px - 40px);
      height: calc(100% - 100px);
      padding: 20px;
   }
</style>
@@ -47,44 +86,91 @@

<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-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 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>
      </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>
         <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>
      <div class="table">
        <ValueTable ref="ValueTable" :url="$api.user.selectUserList" :upUrl="$api.user.updateUser" :componentData="componentData" :key="upIndex" @upUser="upUser"/>
      </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>
         <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>
         <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>
</template>

@@ -169,7 +255,18 @@
            entityCopy: {},
            upIndex: 0,
            addDia: false,
            addPower: true
            addPower: true,
        addDia0:false,
        addOb:{
          fatherId:'',
          name:'',
        },
        search: null,
            list: [],
            selectTree: '',
        treeLoad:false,
        expandedKeys: [],
        addLoad:false,
         }
      },
      mounted() {
@@ -237,7 +334,72 @@
               this.componentData.do.splice(0, 1)
            }
            this.addPower = add
         }
         },
      handleAdd(){
        if(this.addOb.fatherId){
          this.addDia0 = true;
        }else{
          this.$message.error('请选择一个架构层级')
        }
      },
      searchFilter() {
            this.$refs.tree.filter(this.search)
         },
      filterNode(value, data) {
            if (!value) return true;
            return data.name.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')
         },
      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()
            })
         },
      }
   }
</script>