From 69acb8efd5f318e7c08727d3f071eceab1edc846 Mon Sep 17 00:00:00 2001
From: licp <lichunping@guanfang.com.cn>
Date: 星期三, 15 五月 2024 11:18:23 +0800
Subject: [PATCH] 完成人员树形前端页面
---
src/components/view/person-manage.vue | 402 ++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 352 insertions(+), 50 deletions(-)
diff --git a/src/components/view/person-manage.vue b/src/components/view/person-manage.vue
index 8470967..1361188 100644
--- a/src/components/view/person-manage.vue
+++ b/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;
@@ -6,76 +46,150 @@
.search {
background-color: #fff;
- height: 80px;
+ height: 60px;
display: flex;
align-items: center;
}
.search_thing {
- width: 350px;
+ width: 250px;
display: flex;
align-items: center;
}
.search_label {
- width: 110px;
+ width: 90px;
font-size: 14px;
text-align: right;
}
.search_input {
- width: calc(100% - 110px);
+ width: calc(100% - 90px);
}
.table {
- margin-top: 10px;
+ margin-top: 4px;
background-color: #fff;
- width: calc(100% - 40px);
- height: calc(100% - 60px - 80px - 10px - 40px);
- padding: 20px;
+ height: calc(100% - 44px);
}
+</style>
+<style>
+ .el-upload--text{
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
</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-row class="title">
+ <el-col :span="12" style="padding-left: 20px;">鐢ㄦ埛绠＄悊</el-col>
+ <el-col :span="12" style="text-align: right;">
+
+ </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 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" @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>
+ <el-dialog title="娣诲姞涓夋柟浜哄憳" :visible.sync="addthirdParty" width="400px">
+ <div class="body">
+ <el-tree
+ :data="datathirdParty"
+ show-checkbox
+ node-key="id"
+ :default-expanded-keys="[2, 3]"
+ :default-checked-keys="[5]"
+ :props="defaultProps">
+ </el-tree>
+ <span slot="footer" style="padding-left: 200px">
+ <el-button @click="addthirdParty = false" size="mini">鍙� 娑�</el-button>
+ <el-button type="primary" @click="" :loading="addLoad" size="mini">纭� 瀹�</el-button>
+ </span>
+ </div>
+ </el-dialog>
</div>
</template>
@@ -87,6 +201,46 @@
},
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'
+ }]
+ }],
+ defaultProps: {
+ children: 'children',
+ label: 'label'
+ },
+ addthirdParty:false,
componentData: {
entity: {
name: null,
@@ -97,9 +251,11 @@
order: 'asc'
}
},
- isIndex: false,
- showSelect: true,
- select: true,
+ row: 2,
+ isIndex: true,
+ showSelect: false,
+ select: false,
+ init:false,
do: [{
id: 'update',
font: '缂栬緫',
@@ -136,21 +292,54 @@
select: []
}
},
- requiredAdd:['account','name','state','roleId','password'],
- requiredUp:['account','name','state','roleId']
+ /* 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'],
+ addUpload:['pictureUrl','signatureUrl'],
+ addUploadConfig:{
+ accept:'.png, .jpg, .jpeg, .gif',
+ url:this.$api.deviceScope.uploadFile
+ },
},
entityCopy: {},
upIndex: 0,
addDia: false,
- addPower: true
+ addPower: true,
+ delStandardTree:true,
+ addDia0:false,
+ addOb:{
+ fatherId:'',
+ name:'',
+ },
+ search: null,
+ list: [],
+ selectTree: '',
+ treeLoad:false,
+ expandedKeys: [],
+ addLoad:false,
}
},
mounted() {
+ this.selectTreeList()
this.selectRole()
this.entityCopy = this.HaveJson(this.componentData.entity)
this.getPower()
},
methods: {
+ openthirdParty(){
+ this.addthirdParty=true;
+
+ },
refreshTable() {
this.$refs['ValueTable'].selectList()
},
@@ -176,6 +365,22 @@
opeaAdd(){
this.$refs.ValueTable.openAddDia(this.$api.user.addUser);
},
+ 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'))
@@ -193,7 +398,104 @@
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')
+ },
+ 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
+ })
+ },
}
}
-</script>
\ No newline at end of file
+</script>
--
Gitblit v1.9.3