父组件
<eltree :treeData="treeData"></eltree>import eltree from "../../components/tree.vue";
export default {
name: '',
components: {
// org_tree ,
eltree
},
watch: {
},
data() {
return {
orgFormchoose: {},
orgForm: { type: 0, limits: 1 },
operateIndex: 1, // 默认 1 查看
operateDisable: true,
treeData: [
{ parentId: null, id: 1, level: 1, type: null, checkbox: '1', allname: '组织机构1', name:'机构1简称', code:'机构1编码', show: true,
children: [
{ parentId: 1, id: 101, level: 2, type: null, checkbox: '2', allname: '组织机构1-1', show: false, },
{ parentId: 1, id: 102, level: 2, type: null, checkbox: '3', allname: '组织机构1-2', show: false, },
]
},
{ parentId: null, id: 2, level: 1, type: null, checkbox: '4', allname: '组织机构2', show: true,
children: [
{ parentId: 2, id: 201, level: 2, type: null, checkbox: '5', allname: '组织机构2-1', show: false, },
{ parentId: 2, id: 202, level: 2, type: null, checkbox: '6', allname: '组织机构2-2', show: false,
children: [
{ parentId: 202, id: 2001, level: 3, type: null, checkbox: '7', allname: '组织机构2-1-1', show: false,
children: [
{ parentId: 2001, id: 20001, level: 3, type: null, checkbox: '8', allname: '8组织机构2-1-1', show: false, },
{ parentId: 2001, id: 20002, level: 3, type: null, checkbox: '9', allname: '9组织机构2-2-2', show: false, },
{ parentId: 2001, id: 20003, level: 3, type: null, checkbox: '11', allname: '11组织机构2-1-1', show: false, },
{ parentId: 2001, id: 20004, level: 3, type: null, checkbox: '12', allname: '12组织机构2-2-2', show: false, },
{ parentId: 2001, id: 20005, level: 3, type: null, checkbox: '13', allname: '13组织机构2-1-1', show: false, },
]
},
{ parentId: 202, id: 2002, level: 3, type: null, checkbox: '10', allname: '组织机构2-2-2', show: false, },
]
},
]
},
{ parentId: null, id: 3, level: 1, type: null, checkbox: '100', allname: '组织机构3', show: true, }
],
}
},
mounted() {},
methods: {
// 选择的节点信息
ParentChooseOrgTree(_ulItem) {
this.orgForm = _ulItem;
},
// 右击 删除
ParentChooseDeleteOrgTree(_ulItem, _item) {
this.operateIndex = _item.value;
},
// 组织机构点击操作
//operateClick(_item, _index) {
// console.log(_item.label, _index);
// if (_index == 0 || _index == 2) {
// this.operateDisable = false;
// }else{
// this.operateDisable = true;
// }
// this.operateIndex = _index;
// if (_index === 3) {
// this.$alert('','',{
// confirmButtonText: '确定',
// callback: action => {
// if (action === 'confirm') {
// this.$message.success('已悉知')
// }
// }
// })
// this.$alert('提醒：当前组织机构树存在下级节点，无法删除！<br/>提醒：请再次确认删除本级组织机构，删除后无法恢复！', '提示', {
// confirmButtonText: '确定',
// callback: action => {
// if (action == "confirm") {
// this.$message.success('已悉知')
// }
// }
// });
// }
// }
}
}子组件
<template>
<div>
<el-tree
class="tree"
:indent="0"
ref="tree"
:show-checkbox="true"
:data="data"
:props="defaultProps"
node-key="checkbox"
empty-text="暂无节点权限，联系管理员"
:default-expand-all="false"
:check-strictly="true"
:check-on-click-node="true"
:accordion="false"
:highlight-current="true"
@node-contextmenu="nodeMenu"
@node-drop="handleDrop"
draggable
:allow-drop="allowDrop"
style="padding-left: 0px;">
<span slot-scope="{ data }">
<!-- <span slot-scope="{ node, data }"> -->
<span class="typecss">{{ data.level == 1?'局':data.level == 2?'司':data.level == 3?'项':data.level == 4?'隧': '' }}</span>
<span class="identy" :style="{ color: data.type == 1?'#2762e2':data.type == 0?'#36b636': '#999' }">{{ data.type == 1?'管':data.type == 0?'用': '' }}</span><span id="LABEL">{{ data.allname }}</span>
<!-- <span class="idty">{{ node.level == 1?'主':node.level == 2?'次':node.level == 3?'项':node.level == 4?'隧': '其' }}</span> -->
</span>
</el-tree>
<!-- -->
<div v-show="optionCardShow" id="right-menu" ref="container" :style="{top: optionCardY +'px', left: optionCardX +'px'}" @contextmenu.prevent="rightrightClick($event)">
<span style="position:absolute; top:0px; right:0px; color:#333;border:1px solid #999; font-size:13px;" @click="optionCardShow=false"><i class="el-icon-close"></i></span>
<div style="margin-top:5px;">
<div class="btu" v-for="(item, index) in btuList" :key="index" @click="BtuClick(item)"><span>{{ item.label }}</span></div>
<!-- <div class="btu"><span>查看本级机构</span></div>
<div class="btu"><span>修改本级机构</span></div>
<div class="btu" @click="BtuClick"><span>删除本级机构</span></div>
<div class="btu"><span>映射本级机构</span></div> -->
</div>
</div>
</div>
</template><script>
export default {
props: [ 'treeData'],
data() {
return {
optionCardShow: false,
optionCardY: 100, optionCardX: 100, postionStyle:{},
data:this.treeData, // 父组件传值
selectNode: {},
rightoptionData: {},
btuList: [{ label: '新增', value: 0 },{ label: '查看', value: 1 },{ label: '修改', value: 2 },{ label: '删除', value: 3 },{ label: '迁移', value: 4 }],
btuUserList: [],
defaultProps: {
children: 'children',
label: 'allname'
}
};
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
},
mounted() {
console.log(this.treeData);
// this.data = this.treeData;
window.addEventListener('resize', this.handleResize);
},
methods: {
// handleDragStart(node, ev) { // 节点开始拖拽时触发的事件
// console.log('节点开始拖拽时触发的事件 drag start', node, ev);
// },
// handleDragEnter(draggingNode, dropNode, ev) { // 拖拽进入其他节点时触发的事件
// console.log('拖拽进入其他节点时触发的事件 tree drag enter: ',draggingNode, dropNode, ev);
// },
// handleDragLeave(draggingNode, dropNode, ev) { // 拖拽离开某个节点时触发的事件
// if (draggingNode.data.parentId !== dropNode.data.parentId) {
// alert('超出拖拽的节点范围，拖拽只能在同父节点下')
// }
// console.log('****************拖拽离开某个节点时触发的事件 tree drag leave: ',draggingNode, dropNode.label, ev);
// },
// handleDragOver(draggingNode, dropNode, ev) { // 在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）
// // if (condition) {
// // }
// console.log('在拖拽节点时触发的事件（类似浏览器的 mouseover 事件） tree drag over: ', draggingNode, dropNode.label, ev);
// },
// handleDragEnd(draggingNode, dropNode, dropType, ev) { // 拖拽结束时（可能未成功）触发的事件
// console.log('拖拽结束时（可能未成功）触发的事件 tree drag end: ',draggingNode, dropNode && dropNode.label, dropType, ev);
// },
handleDrop(draggingNode, dropNode, dropType, ev) { // 拖拽成功完成时触发的事件
this.getProjectVolumeTree(); // 拖拽成功 触发相应接口
console.log('拖拽成功完成时触发的事件 tree drop: ',draggingNode, dropNode.label, dropType, ev);
},
allowDrop(draggingNode, dropNode, type) { // 拖拽时判定目标节点能否被放置
console.log('拖拽时判定目标节点能否被放置 allowDrop', draggingNode, dropNode, type);
if (draggingNode.data.level === dropNode.data.level) {
if (draggingNode.data.parentId === dropNode.data.parentId) {
return type === "prev" || type === "next";
} else {
return false;
}
} else {
// 不同级进行处理
return false;
}
},
//tree拖拽成功完成时触发的事件
getProjectVolumeTree() {
console.log('tree拖拽成功完成时触发的事件');
},
allowDrag(draggingNode) {
console.log('8989', draggingNode.data.allname);
// return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
return true;
},
// 单选
handleNodeClick (data, checked, node) {
console.log(data,'ppp');
console.log( checked, 'll');
console.log(node);
if (checked) {
this.$refs.tree.setCheckedNodes([data])
this.selectNode = data;
this.$parent.ParentChooseOrgTree(data);
}
},
// 右击
nodeMenu(e, data, n, t) {
console.log(e, data, n,t, '右击');
this.optionCardShow = false
this.optionCardX = e.x // 让右键菜单出现在鼠标右键的位置
this.optionCardY = e.y
this.$parent.ParentChooseOrgTree(data);
this.rightoptionData = data
// this.node = n // 将当前节点保存
this.optionCardShow = true // 展示右键菜单
},
rightMenuClose(event) {
let dom = document.getElementById('right-menu')
if (dom) {
if (!dom.contains(event.target)) {
//点击到了id为right-menu以外的区域，就隐藏菜单
this.optionCardShow = false
}
}
},
// 右击demo事件
BtuClick(_item) {
console.log(_item);
switch (_item.value) {
case 0:
this.$message.warning(_item.label)
break;
case 1:
this.$message.warning(_item.label)
break;
case 2:
this.$message.warning(_item.label)
break;
case 3: //删除事件
this.$parent.ParentChooseDeleteOrgTree(this.selectNode, _item); // 父组件事件，在这里是子组件调用父组件函数
this.$message.warning(_item.label)
break;
case 4:
this.$message.warning(_item.label)
break;
default:
break;
}
},
//
rightrightClick(event) {
event.preventDefault();
},
}
};
</script>在这里插入代码片
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
