人员管理树形

licp

2024-05-15 86b3da1595be68c9b69df4be1e8a484e9eace245

人员管理树形

 src/components/view/index-index.vue

@@ -368,7 +368,7 @@
                  <p class="ellipsis-multiline" >{{ m.text }}</p>
                </el-tooltip>
              </div>
              <span style="color:rgb(153, 153, 153);font-size: 12px;text-align: center;margin: 120px 0;display: inline-block;width: 100%;" v-if="listScheduleByMe.length==0">暂无</span>
              <span style="color:rgb(144, 147, 153);font-size: 14px;text-align: center;margin: 120px 0;display: inline-block;width: 100%;" v-if="listScheduleByMe.length==0">暂无数据</span>
            </div>
          </div>
        </div>
@@ -378,7 +378,7 @@
            <div class="tab-item" style="cursor: pointer;" :class="{active:currentIndex==5}" @click="currentIndex=5">通知通告</div>
          </div>
          <div class="right-3-list" v-loading="listLoading">
            <scroll-pagination @load="getList" :finishLoding="finishLoding" :list="list">
            <scroll-pagination @load="getList" :finishLoding="finishLoding" :list="list" v-if="list.length>0">
              <div class="list3-item" v-for="(m,i) in list" :key="i">
              <div class="list3-item-title">
                <img src="../../../static/img/index-tip.svg" alt="">
@@ -402,7 +402,7 @@
            <div class="body" style="max-height: 60vh;">
                <el-row>
                    <el-col class="search_thing" :span="22">
                        <div class="search_label">时间：</div>
                        <div class="search_label"><span style="color: red;margin-right: 4px;">*</span>时间：</div>
                        <div class="search_input">
                            <el-date-picker
                v-model="query.time"
@@ -414,9 +414,10 @@
                        </div>
                    </el-col>
          <el-col class="search_thing" :span="22">
                        <div class="search_label">内容：</div>
                        <div class="search_label"><span style="color: red;margin-right: 4px;">*</span>内容：</div>
                        <div class="search_input">
                            <el-input v-model="query.text" size="small" placeholder="请输入内容"></el-input>
                            <el-input v-model="query.text" type="textarea"
  :rows="2" size="small" placeholder="请输入内容"></el-input>
                        </div>
                    </el-col>
                </el-row>

 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>

 src/main.js

@@ -13,11 +13,11 @@

//本地
Vue.prototype.LOCATIONVUE = "http://127.0.0.1:80";
const javaApi = 'http://192.168.11.200:8001';//李
// const javaApi = 'http://192.168.11.200:8001';//李
// const javaApi = 'http://10.20.102.168:8001';//张
// const javaApi = 'http://172.20.10.3:8001';//姜
// const javaApi = 'http://192.168.11.2:8001';//柴
// const javaApi = 'http://114.132.189.42:1234';//测试服
const javaApi = 'http://114.132.189.42:1234';//测试服
//胜云服务器
// Vue.prototype.LOCATIONVUE = "http://syxt.shxiao2.cn";
// const javaApi = 'http://122.114.52.69:8001';