javascript
复制代码
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('已悉知')
// }
// }
// });
// }
// }
}
}
javascript
复制代码
<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>