|
@@ -3,12 +3,9 @@
|
|
|
:default-expanded-keys="defaultExpandedCids" @node-click="ElTreeClick" :indent="0">
|
|
|
<template #default="{ node, data }">
|
|
|
<div class="data-custom-tree-node" :id="`${idPrefix}${data['primaryKeyId']}`">
|
|
|
- <div class="label" :class="node.level === 1?'level-name':''">
|
|
|
- <span :class="data?.colorStatus === 2?'text-blue':data?.colorStatus === 3?'text-orange':data?.colorStatus === 4?'text-green':''" v-if="isColor">{{ node.label }}</span>
|
|
|
- <span v-else>{{ node.label }}</span>
|
|
|
- </div>
|
|
|
- <div class="menu-icon" :class="node.showTreeMenu?'show':''" v-if="node.level !== 1">
|
|
|
- <div class="cu-tree-node-popover-menu-icon" @click.prevent.stop="ElTreeLabelContextMenu($event,data,node)">关联</div>
|
|
|
+ <div class="label division" :class="node.level === 1?'level-name':node.level">{{ node.label }}</div>
|
|
|
+ <div class="menu-icon">
|
|
|
+ <div class="cu-tree-node-popover-menu-icon" @click.prevent.stop="ElTreeRelationClick($event,data,node)">关联</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -38,10 +35,6 @@ const props = defineProps({
|
|
|
type: String,
|
|
|
default: 'division-tree-'
|
|
|
},
|
|
|
- isAutoKeys: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
isAutoClick: {
|
|
|
type: Boolean,
|
|
|
default: true
|
|
@@ -57,7 +50,6 @@ const ElTreeProps = ref({
|
|
|
children: 'children',
|
|
|
isLeaf: 'notExsitChild'
|
|
|
})
|
|
|
-const isAutoKeys = ref(props.isAutoKeys)
|
|
|
const TreeExpandKey = ref(props.autoExpandKeys)
|
|
|
const projectId = ref(props.projectId);
|
|
|
const contractId = ref(props.contractId);
|
|
@@ -65,17 +57,11 @@ const idPrefix = ref(props.idPrefix);
|
|
|
|
|
|
//监听
|
|
|
watch(() => [
|
|
|
- props.menus,
|
|
|
- props.isMark,
|
|
|
- props.isAutoKeys,
|
|
|
props.autoExpandKeys,
|
|
|
props.projectId,
|
|
|
props.contractId,
|
|
|
props.idPrefix,
|
|
|
-], ([menus, isMark, AutoKeys, expandKeys, UserProjectId, UserContractId,UserIdPrefix]) => {
|
|
|
- menusData.value = menus
|
|
|
- menuMark.value = isMark
|
|
|
- isAutoKeys.value = AutoKeys
|
|
|
+], ([expandKeys, UserProjectId, UserContractId,UserIdPrefix]) => {
|
|
|
TreeExpandKey.value = expandKeys
|
|
|
projectId.value = UserProjectId
|
|
|
contractId.value = UserContractId
|
|
@@ -83,7 +69,7 @@ watch(() => [
|
|
|
})
|
|
|
|
|
|
//事件
|
|
|
-const emit = defineEmits(['menuTap','nodeTap', 'nodeLoading'])
|
|
|
+const emit = defineEmits(['nodeTap', 'nodeLoading', 'relationTap'])
|
|
|
|
|
|
//树形结构异步加载数据
|
|
|
const defaultExpandedCids = ref([])
|
|
@@ -144,77 +130,17 @@ const ElTreeLoadNode = async (node, resolve) => {
|
|
|
|
|
|
//节点被点击
|
|
|
const ElTreeClick = async (data,node) => {
|
|
|
- if (isAutoKeys.value) {
|
|
|
- let autoKeysArr = []
|
|
|
- await getNodeExpandKeys(node, autoKeysArr)
|
|
|
- const autoKeys = autoKeysArr.reverse()
|
|
|
- emit('nodeTap', {node, data, keys: autoKeys})
|
|
|
- } else {
|
|
|
- emit('nodeTap', {node, data, keys: []})
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-//处理自动展开的节点KEY
|
|
|
-const getNodeExpandKeys = async (node, newKeys) => {
|
|
|
- const parent = node?.parent ?? []
|
|
|
- const primaryKeyId = node?.data?.primaryKeyId ?? ''
|
|
|
- if (primaryKeyId) {
|
|
|
- newKeys.push(primaryKeyId)
|
|
|
- await getNodeExpandKeys(parent, newKeys)
|
|
|
- }
|
|
|
+ emit('nodeTap', {node, data})
|
|
|
}
|
|
|
|
|
|
//鼠标右键事件
|
|
|
-const contextMenuRef = ref(null)
|
|
|
-const ElTreeLabelContextMenu = (e,data,node) => {
|
|
|
- const rows = menusData.value || [];
|
|
|
- if (node.level !== 1 && rows.length > 0) {
|
|
|
+const ElTreeRelationClick = (e,data,node) => {
|
|
|
+ if (node.level !== 1) {
|
|
|
e.preventDefault();
|
|
|
- treeRefNode.value = node;
|
|
|
- treeRefData.value = data;
|
|
|
- //展开菜单
|
|
|
- contextMenuRef.value?.showMenu(e)
|
|
|
+ emit('relationTap', {node, data})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-//鼠标右键菜单被点击
|
|
|
-const handleMenuSelect = ({key}) => {
|
|
|
- const node = treeRefNode.value;
|
|
|
- const data = treeRefData.value;
|
|
|
- //如果为标记菜单
|
|
|
- if (key === 'mark' && menuMark.value) {
|
|
|
- if (data.isFirst === true) {
|
|
|
- emit('menuTap', {key: 'cancel_mark', node, data})
|
|
|
- } else {
|
|
|
- emit('menuTap', {key: 'mark', node, data})
|
|
|
- }
|
|
|
- } else {
|
|
|
- emit('menuTap', {key, node, data})
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-//设置树菜单的标记数据
|
|
|
-const setElTreeMenuMark = (keys,isFirst) => {
|
|
|
- keys.forEach(item => {
|
|
|
- //根据 data 或者 key 拿到 Tree 组件中的 node
|
|
|
- let node = ElTreeRef.value.getNode(item)
|
|
|
- if (!!node) node.data.isFirst = isFirst;
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-//设置树菜单的标记数据
|
|
|
-const removeElTreeNode = (key) => {
|
|
|
- //根据 data 或者 key 拿到 Tree 组件中的 node
|
|
|
- let node = ElTreeRef.value.getNode(key)
|
|
|
- //删除 Tree 中的一个节点,使用此方法必须设置 node-key 属性
|
|
|
- ElTreeRef.value.remove(node)
|
|
|
-}
|
|
|
-
|
|
|
-// 暴露出去
|
|
|
-defineExpose({
|
|
|
- setElTreeMenuMark,
|
|
|
- removeElTreeNode
|
|
|
-})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -237,26 +163,23 @@ defineExpose({
|
|
|
pointer-events: none;
|
|
|
transition: opacity 0.2s;
|
|
|
opacity: 0;
|
|
|
- right: 0;
|
|
|
- background: rgba(255, 255, 255, 0.25);
|
|
|
+ right: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ background: rgba(255, 255, 255, 0.9);
|
|
|
border-radius: 2px;
|
|
|
+ padding: 2px 14px;
|
|
|
.cu-tree-node-popover-menu-icon {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
- &:hover {
|
|
|
- .menu-icon {
|
|
|
- opacity: 1;
|
|
|
- pointer-events: all;
|
|
|
- cursor: context-menu;
|
|
|
- }
|
|
|
- }
|
|
|
- .menu-icon.show {
|
|
|
+ &:hover .menu-icon {
|
|
|
opacity: 1;
|
|
|
pointer-events: all;
|
|
|
- cursor: context-menu;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -316,4 +239,9 @@ defineExpose({
|
|
|
.hc-tree-node .el-tree-node__label {
|
|
|
flex: 1;
|
|
|
}
|
|
|
+.hc-tree-node.page-division-tree.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content .el-tree-node__label .data-custom-tree-node .label.division {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: var(--el-color-primary);
|
|
|
+}
|
|
|
</style>
|