加入领导树展示
This commit is contained in:
parent
8bd1bf8bb3
commit
b46ba62357
|
|
@ -0,0 +1,185 @@
|
|||
<template>
|
||||
<div style="width: 700px">
|
||||
<el-tree
|
||||
:data="data"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
@node-drag-start="handleDragStart"
|
||||
@node-drag-enter="handleDragEnter"
|
||||
@node-drag-leave="handleDragLeave"
|
||||
@node-drag-over="handleDragOver"
|
||||
@node-drag-end="handleDragEnd"
|
||||
@node-drop="handleDrop"
|
||||
draggable
|
||||
:allow-drop="allowDrop"
|
||||
:allow-drag="allowDrag"
|
||||
>
|
||||
</el-tree>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [{
|
||||
id: 1,
|
||||
label: '一级 1',
|
||||
isPerson:false,
|
||||
children: [{
|
||||
id: 4,
|
||||
label: '二级 1-1',
|
||||
isPerson:false,
|
||||
children: [{
|
||||
id: 9,
|
||||
label: '三级 1-1-1',
|
||||
isPerson:false,
|
||||
}, {
|
||||
id: 10,
|
||||
label: '三级 1-1-2',
|
||||
isPerson:false,
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: '一级 2',
|
||||
isPerson:false,
|
||||
children: [{
|
||||
id: 5,
|
||||
label: '二级 2-1',
|
||||
isPerson:true,
|
||||
}, {
|
||||
id: 6,
|
||||
label: '二级 2-2',
|
||||
isPerson:true,
|
||||
}]
|
||||
}, {
|
||||
id: 3,
|
||||
label: '一级 3',
|
||||
isPerson:false,
|
||||
children: [{
|
||||
id: 7,
|
||||
label: '二级 3-1',
|
||||
isPerson:false,
|
||||
}, {
|
||||
id: 8,
|
||||
label: '二级 3-2',
|
||||
isPerson:false,
|
||||
children: [{
|
||||
id: 11,
|
||||
label: '三级 3-2-1',
|
||||
isPerson:true,
|
||||
}, {
|
||||
id: 12,
|
||||
label: '三级 3-2-2',
|
||||
isPerson:true,
|
||||
}, {
|
||||
id: 13,
|
||||
label: '三级 3-2-3',
|
||||
isPerson:true,
|
||||
}, {
|
||||
id: 14,
|
||||
label: '三级 3-2-4',
|
||||
isPerson:true,
|
||||
}, {
|
||||
id: 15,
|
||||
label: '三级 3-2-5',
|
||||
isPerson:false,
|
||||
}, {
|
||||
id: 16,
|
||||
label: '三级 3-2-6',
|
||||
isPerson:false,
|
||||
}, {
|
||||
id: 17,
|
||||
label: '三级 3-2-7',
|
||||
isPerson:false,
|
||||
}, {
|
||||
id: 18,
|
||||
label: '三级 3-2-8',
|
||||
isPerson:false,
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// this.processData(this.data);
|
||||
},
|
||||
methods: {
|
||||
processData(nodes) {
|
||||
nodes.forEach(node => {
|
||||
if (!node.isPerson && node.children) {
|
||||
const hasPerson = node.children.some(child => child.isPerson);
|
||||
if (!hasPerson) {
|
||||
node.children.push({
|
||||
id: `${node.id}-no-person`,
|
||||
label: '暂未配置领导人员',
|
||||
isPerson: false,
|
||||
children: []
|
||||
});
|
||||
}
|
||||
this.processData(node.children);
|
||||
}
|
||||
});
|
||||
},
|
||||
handleDragStart(node, ev) {
|
||||
console.log('drag start', node);
|
||||
},
|
||||
handleDragEnter(draggingNode, dropNode, ev) {
|
||||
console.log('tree drag enter: ', dropNode.label);
|
||||
},
|
||||
handleDragLeave(draggingNode, dropNode, ev) {
|
||||
console.log('tree drag leave: ', dropNode.label);
|
||||
},
|
||||
handleDragOver(draggingNode, dropNode, ev) {
|
||||
console.log('tree drag over: ', dropNode.label);
|
||||
},
|
||||
handleDragEnd(draggingNode, dropNode, dropType, ev) {
|
||||
console.log('tree drag end: ', dropNode && dropNode.label, dropType);
|
||||
},
|
||||
handleDrop(draggingNode, dropNode, dropType, ev) {
|
||||
console.log('tree drop: ', dropNode.label, dropType);
|
||||
},
|
||||
allowDrop(draggingNode, dropNode, type) {
|
||||
if (dropNode.data.label === '二级 3-1') {
|
||||
return type !== 'inner';
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
allowDrag(draggingNode) {
|
||||
return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.w700 .el-dialog {
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.w500 .el-dialog {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.w500 .el-dialog__header,
|
||||
.w700 .el-dialog__header {
|
||||
background: #eeeeee;
|
||||
text-align: center;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.yxq .el-range-separator {
|
||||
margin-right: 7px !important;
|
||||
}
|
||||
|
||||
.el-date-editor--daterange.el-input__inner {
|
||||
width: 260px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -32,6 +32,7 @@
|
|||
<el-button type="primary" @click="onSubmit()">查询</el-button>
|
||||
<el-button type="primary" @click="onOut">导出</el-button>
|
||||
<el-button type="primary" @click="editUser({})">添加</el-button>
|
||||
<el-button type="primary" @click="openTree()">查看领导配置</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- </el-row> -->
|
||||
|
|
@ -113,6 +114,16 @@
|
|||
:btn="btn"
|
||||
@closeDialog="closeDialogDel"
|
||||
/>
|
||||
<el-dialog
|
||||
class="l-dialog"
|
||||
title="领导树"
|
||||
width="800px"
|
||||
:visible.sync="isShowTree">
|
||||
<LeaderTree
|
||||
:style="{width: '780px',maxHeight: '65vh',overflow: 'auto'}"
|
||||
@closeDialog="closeTreeDialog"
|
||||
/>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<Ticketopop
|
||||
|
|
@ -130,11 +141,13 @@
|
|||
import Paging from "@/views/Public/paging.vue";
|
||||
import {Own,getUserList,setRole,deleteAppUser} from "@/api/getdata";
|
||||
import Ticketopop from "./popup/ticketpop.vue";
|
||||
import LeaderTree from "./leaderTree/leaderTree.vue";
|
||||
import Popup from "@/views/estate/examine/dialog/popup.vue";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false, //初始化loading
|
||||
isShowTree: false,
|
||||
loadingMsg: "",
|
||||
row: {},
|
||||
validation: false,
|
||||
|
|
@ -159,7 +172,8 @@
|
|||
components: {
|
||||
Paging,
|
||||
Ticketopop,
|
||||
Popup
|
||||
Popup,
|
||||
LeaderTree
|
||||
},
|
||||
mounted() {
|
||||
this.createLoad();
|
||||
|
|
@ -170,6 +184,12 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
openTree() {
|
||||
this.isShowTree = true;
|
||||
},
|
||||
closeTreeDialog() {
|
||||
this.isShowTree = false;
|
||||
},
|
||||
createLoad() {
|
||||
this.loading = true;
|
||||
this.loadingMsg = "加载中...";
|
||||
|
|
@ -259,8 +279,8 @@
|
|||
encodeURI(encodeURI(this.formInline.roleName));
|
||||
Own().then(res => {
|
||||
if (res.returnCode === "1") {
|
||||
|
||||
let url =process.env.VUE_APP_BASE_API +
|
||||
|
||||
let url =process.env.VUE_APP_BASE_API +
|
||||
"/greenH5/greenWebmodul/rest/greenUserInfo/exportByExcel?" + str;
|
||||
window.location.href = url;
|
||||
}
|
||||
|
|
@ -305,7 +325,7 @@
|
|||
this.clearLoad();
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this.validation = false;
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue