<template>
|
<div class='app'>
|
<!-- <div style="display: flex; padding: 10px 0;">
|
<div style="margin-right: 10px"><i-switch v-model="horizontal"></i-switch> 横向</div>
|
<div style="margin-right: 10px"><i-switch v-model="collapsable"></i-switch> 可收起</div>
|
<div style="margin-right: 10px"><i-switch v-model="disaled"></i-switch> 禁止编辑</div>
|
<div style="margin-right: 10px"><i-switch v-model="onlyOneNode"></i-switch> 仅拖动当前节点</div>
|
<div style="margin-right: 10px"><i-switch v-model="cloneNodeDrag"></i-switch> 拖动节点副本</div>
|
</div>
|
<div style="padding-bottom:10px">
|
背景色：
|
<color-picker v-model="style.background" size="small"></color-picker>
|
文字颜色：
|
<color-picker v-model="style.color" size="small"></color-picker>
|
搜索：
|
<input type="text" v-model="keyword" placeholder="请输入搜索内容" @keydown.enter="filter" />
|
</div>-->
|
<!-- <div class='header'>
|
|
</div>-->
|
<div style='height: 100%; border:1px solid #eee'>
|
<zm-tree-org
|
ref='tree'
|
:data='data'
|
center
|
:scalable='scalable'
|
:disabled='disaled'
|
:horizontal='horizontal'
|
:collapsable='collapsable'
|
:label-style='style'
|
:node-draggable='true'
|
:default-expand-level='10'
|
:only-one-node='onlyOneNode'
|
:clone-node-drag='cloneNodeDrag'
|
:before-drag-end='beforeDragEnd'
|
:toolBar='toolBar'
|
:filterNodeMethod='filterNodeMethod'
|
@on-node-drag='nodeDragMove'
|
@on-node-drag-end='nodeDragEnd'
|
@on-contextmenu='onMenus'
|
@on-expand='onExpand'
|
@on-node-click='onNodeClick'
|
@on-node-dblclick='onNodeDblclick'
|
@on-node-copy='onNodeCopy'
|
>
|
<template v-slot='{node}'>
|
<!-- <div class='tree-org-node__text node-label'>{{ node.label}}</div>-->
|
<div class='tree-org-node__text shadow'>{{ node.label }}</div>
|
|
</template>
|
<!-- <template v-slot:expand="{node}">
|
<div>{{node.children.length}}</div>
|
</template>-->
|
</zm-tree-org>
|
</div>
|
|
|
|
</div>
|
</template>
|
|
|
<script>
|
import Vue from 'vue'
|
import { queryDepartTreeList } from '@/api/api'
|
import CompanyLeftDrawer from '@views/hrm/modules/CompanyLeftDrawer'
|
import CompanyRightDrawer from '@views/hrm/modules/CompanyRightDrawer'
|
|
export default {
|
name: 'CompanyOrgTree',
|
components: { CompanyRightDrawer, CompanyLeftDrawer },
|
data() {
|
return {
|
toolBar: {
|
scale: false
|
},
|
keyword: '',
|
dataSource: [],
|
data: {
|
|
id: 1,
|
label: 'xxx科技有限公司',
|
children: [
|
{
|
id: 2,
|
pid: 1,
|
label: '产品研发部',
|
style: { color: '#fff', background: '#108ffe' },
|
expand: false,
|
|
children: [
|
{
|
id: 6,
|
pid: 2,
|
label: '禁止编辑节点',
|
disabled: true
|
},
|
{
|
id: 7,
|
pid: 2,
|
label: '研发-后端'
|
},
|
{
|
id: 8,
|
pid: 2,
|
label: '禁止拖拽节点',
|
noDragging: true
|
},
|
{
|
id: 9,
|
pid: 2,
|
label: '产品经理'
|
},
|
{
|
id: 10,
|
pid: 2,
|
label: '测试'
|
}
|
]
|
},
|
{
|
id: 3,
|
pid: 1,
|
label: '客服部',
|
children: [
|
{
|
id: 11,
|
pid: 3,
|
label: '客服一部'
|
},
|
{
|
id: 12,
|
pid: 3,
|
label: '客服二部'
|
}
|
]
|
},
|
{
|
id: 4,
|
pid: 1,
|
label: '业务部'
|
},
|
{
|
id: 5,
|
pid: 1,
|
label: '人力资源中心'
|
}
|
]
|
},
|
horizontal: false,
|
collapsable: true,
|
onlyOneNode: true,
|
cloneNodeDrag: true,
|
expandAll: true,
|
disaled: false,
|
scalable: true,
|
DISP_NAME:'org_commmon_setting_' ,
|
style: {
|
background: '#fff',
|
color: '#5e6d82'
|
}
|
}
|
},
|
created() {
|
this.toggleExpandAll()
|
this.loadDepartTree()
|
},
|
methods: {
|
|
|
|
|
//通过点击的部门查找部门数据
|
findDataById(data, id) {
|
// 遍历每个节点
|
for (var i = 0; i < data.length; i++) {
|
var node = data[i]
|
|
// 如果当前节点的id等于目标id，返回该节点
|
if (node.id === id) {
|
return node
|
}
|
|
// 如果当前节点有子节点，则递归查找子节点
|
if (node.children && node.children.length > 0) {
|
var result = this.findDataById(node.children, id)
|
if (result) {
|
return result
|
}
|
}
|
}
|
|
// 如果未找到匹配的节点，返回null
|
return null
|
},
|
|
|
loadDepartTree() {
|
queryDepartTreeList().then(res => {
|
if (res.success) {
|
let array = this.filterData(res.result)
|
this.dataSource = array
|
console.info(this.dataSource)
|
this.data = this.dataSource[0]
|
}
|
|
})
|
},
|
|
filterData(result, pid) {
|
for (let i = 0; i < result.length; i++) {
|
let item = result[i]
|
item.label = item.departName
|
item.pid = pid
|
if (item.children) {
|
this.filterData(item.children, item.id)
|
}
|
}
|
return result
|
|
},
|
|
|
onMenus({ node, command }) {
|
console.log(node, command)
|
},
|
filter() {
|
this.$refs.tree.filter(this.keyword)
|
},
|
filterNodeMethod(value, data) {
|
if (!value) return true
|
return data.label.indexOf(value) !== -1
|
},
|
onExpand(e, data) {
|
console.log(e, data)
|
},
|
nodeDragMove(data) {
|
console.log(data)
|
},
|
beforeDragEnd(node, targetNode) {
|
return new Promise((resolve, reject) => {
|
if (!targetNode) reject()
|
if (node.id === targetNode.id) {
|
reject()
|
} else {
|
resolve()
|
}
|
})
|
},
|
nodeDragEnd(node, parentNode) {
|
node.id === parentNode.id && this.$Message.info('移动到自身')
|
},
|
onNodeClick(e, data) {
|
this.$message.info(data.label)
|
},
|
onNodeDblclick() {
|
this.$message.info('双击节点')
|
},
|
onNodeCopy() {
|
this.$message.success('复制成功')
|
},
|
handleNodeAdd(node) {
|
console.log(node)
|
this.$message.info('新增节点')
|
},
|
toggleExpandAll() {
|
this.toggleExpand(this.data, this.expandAll)
|
},
|
toggleExpand(data, val) {
|
if (Array.isArray(data)) {
|
data.forEach(item => {
|
this.$set(item, 'expand', val)
|
if (item.children) {
|
this.toggleExpand(item.children, val)
|
}
|
})
|
} else {
|
this.$set(data, 'expand', val)
|
if (data.children) {
|
this.toggleExpand(data.children, val)
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang='less' scoped>
|
|
.app {
|
width: 100%;
|
height: calc(100vh - 140px);
|
position: relative;
|
overflow: hidden;
|
}
|
|
.header {
|
width: 100%;
|
height: 100px;
|
border: 1px solid red;
|
}
|
|
|
.shadow {
|
box-shadow: 0 1px 5px rgba(0, 0, 0, .15);
|
}
|
</style>
|
