|
@@ -1,91 +1,100 @@
|
|
<template>
|
|
<template>
|
|
- <ElTree ref="ElTreeRef" :default-expanded-keys="defaultExpandedCids" :indent="0" :load="ElTreeLoadNode"
|
|
|
|
- :props="ElTreeProps"
|
|
|
|
- accordion class="hc-tree-node tree-line" highlight-current
|
|
|
|
- lazy node-key="primaryKeyId"
|
|
|
|
- @node-click="ElTreeClick" @node-contextmenu="ElTreeLabelContextMenu">
|
|
|
|
|
|
+ <ElTree
|
|
|
|
+ ref="ElTreeRef" :default-expanded-keys="defaultExpandedCids" :indent="0" :load="ElTreeLoadNode"
|
|
|
|
+ :props="ElTreeProps"
|
|
|
|
+ accordion class="hc-tree-node tree-line" highlight-current
|
|
|
|
+ lazy node-key="primaryKeyId"
|
|
|
|
+ @node-click="ElTreeClick" @node-contextmenu="ElTreeLabelContextMenu"
|
|
|
|
+ >
|
|
<template #default="{ node, data }">
|
|
<template #default="{ node, data }">
|
|
- <div :id="`${idPrefix}${data['primaryKeyId']}`" class="data-custom-tree-node">
|
|
|
|
- <!--树组件,节点名称-->
|
|
|
|
- <div :class="node.level === 1?'level-name':''" class="label">
|
|
|
|
|
|
+ <div :id="`${idPrefix}${data.primaryKeyId}`" class="data-custom-tree-node">
|
|
|
|
+ <!-- 树组件,节点名称 -->
|
|
|
|
+ <div :class="node.level === 1 ? 'level-name' : ''" class="label">
|
|
<span
|
|
<span
|
|
v-if="isColor"
|
|
v-if="isColor"
|
|
- :class="data?.colorStatus === 2?'text-blue':data?.colorStatus === 3?'text-orange':data?.colorStatus === 4?'text-green':''">{{
|
|
|
|
- node.label
|
|
|
|
- }}</span>
|
|
|
|
|
|
+ :class="data?.colorStatus === 2 ? 'text-blue' : data?.colorStatus === 3 ? 'text-orange' : data?.colorStatus === 4 ? 'text-green' : ''"
|
|
|
|
+ >{{
|
|
|
|
+ node.label
|
|
|
|
+ }}</span>
|
|
<span v-else>{{ node.label }}</span>
|
|
<span v-else>{{ node.label }}</span>
|
|
</div>
|
|
</div>
|
|
- <!--树组件,操作菜单-->
|
|
|
|
- <div v-if="node.level !== 1 && menusData.length > 0" :class="node.showTreeMenu?'show':''"
|
|
|
|
- class="menu-icon">
|
|
|
|
- <div class="cu-tree-node-popover-menu-icon"
|
|
|
|
- @click.prevent.stop="ElTreeLabelContextMenu($event,data,node)">
|
|
|
|
- <HcIcon name="menu" ui="text-2xl"/>
|
|
|
|
|
|
+ <!-- 树组件,操作菜单 -->
|
|
|
|
+ <div
|
|
|
|
+ v-if="node.level !== 1 && menusData.length > 0" :class="node.showTreeMenu ? 'show' : ''"
|
|
|
|
+ class="menu-icon"
|
|
|
|
+ >
|
|
|
|
+ <div
|
|
|
|
+ class="cu-tree-node-popover-menu-icon"
|
|
|
|
+ @click.prevent.stop="ElTreeLabelContextMenu($event, data, node)"
|
|
|
|
+ >
|
|
|
|
+ <HcIcon name="menu" ui="text-2xl" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <!--树组件,操作菜单 END-->
|
|
|
|
|
|
+ <!-- 树组件,操作菜单 END -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</ElTree>
|
|
</ElTree>
|
|
- <!--右键菜单-->
|
|
|
|
|
|
+ <!-- 右键菜单 -->
|
|
<HcContextMenu v-if="menusData.length > 0" ref="contextMenuRef" :datas="menusData" @item-click="handleMenuSelect">
|
|
<HcContextMenu v-if="menusData.length > 0" ref="contextMenuRef" :datas="menusData" @item-click="handleMenuSelect">
|
|
- <template #mark="{item}">
|
|
|
|
- <HcIcon :fill="treeRefData?.isFirst" :name="item.icon" class="menu-item-icon"/>
|
|
|
|
|
|
+ <template #mark="{ item }">
|
|
|
|
+ <HcIcon :fill="treeRefData?.isFirst" :name="item.icon" class="menu-item-icon" />
|
|
<span class="menu-item-name">{{ treeRefData?.isFirst ? '取消标记为首件' : '标记为首件' }}</span>
|
|
<span class="menu-item-name">{{ treeRefData?.isFirst ? '取消标记为首件' : '标记为首件' }}</span>
|
|
</template>
|
|
</template>
|
|
- <template #sort="{item}">
|
|
|
|
- <HcIcon :line="false" :name="item.icon" class="menu-item-icon"/>
|
|
|
|
|
|
+ <template #sort="{ item }">
|
|
|
|
+ <HcIcon :line="false" :name="item.icon" class="menu-item-icon" />
|
|
<span class="menu-item-name">{{ item.label }}</span>
|
|
<span class="menu-item-name">{{ item.label }}</span>
|
|
</template>
|
|
</template>
|
|
</HcContextMenu>
|
|
</HcContextMenu>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
-import {ref, nextTick, watch} from "vue";
|
|
|
|
-import dataFillQuery from '~api/data-fill/query';
|
|
|
|
-import {isArrItem, getArrValue, getObjValue} from "js-fast-way"
|
|
|
|
-import {useAppStore} from "~src/store";
|
|
|
|
|
|
+import { nextTick, ref, watch } from 'vue'
|
|
|
|
+import dataFillQuery from '~api/data-fill/query'
|
|
|
|
+import { getArrValue, getObjValue, isArrItem } from 'js-fast-way'
|
|
|
|
+import { useAppStore } from '~src/store'
|
|
|
|
|
|
//参数
|
|
//参数
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
menus: {
|
|
menus: {
|
|
type: Array,
|
|
type: Array,
|
|
- default: () => ([])
|
|
|
|
|
|
+ default: () => ([]),
|
|
},
|
|
},
|
|
projectId: {
|
|
projectId: {
|
|
type: [String, Number],
|
|
type: [String, Number],
|
|
- default: ''
|
|
|
|
|
|
+ default: '',
|
|
},
|
|
},
|
|
contractId: {
|
|
contractId: {
|
|
type: [String, Number],
|
|
type: [String, Number],
|
|
- default: ''
|
|
|
|
|
|
+ default: '',
|
|
},
|
|
},
|
|
autoExpandKeys: {
|
|
autoExpandKeys: {
|
|
type: Array,
|
|
type: Array,
|
|
- default: () => ([])
|
|
|
|
|
|
+ default: () => ([]),
|
|
},
|
|
},
|
|
isMark: {
|
|
isMark: {
|
|
type: Boolean,
|
|
type: Boolean,
|
|
- default: false
|
|
|
|
|
|
+ default: false,
|
|
},
|
|
},
|
|
idPrefix: {
|
|
idPrefix: {
|
|
type: String,
|
|
type: String,
|
|
- default: 'wbs-tree-'
|
|
|
|
|
|
+ default: 'wbs-tree-',
|
|
},
|
|
},
|
|
isAutoKeys: {
|
|
isAutoKeys: {
|
|
type: Boolean,
|
|
type: Boolean,
|
|
- default: true
|
|
|
|
|
|
+ default: true,
|
|
},
|
|
},
|
|
isAutoClick: {
|
|
isAutoClick: {
|
|
type: Boolean,
|
|
type: Boolean,
|
|
- default: true
|
|
|
|
|
|
+ default: true,
|
|
},
|
|
},
|
|
isColor: {
|
|
isColor: {
|
|
type: Boolean,
|
|
type: Boolean,
|
|
- default: false
|
|
|
|
|
|
+ default: false,
|
|
},
|
|
},
|
|
})
|
|
})
|
|
|
|
|
|
|
|
+//事件
|
|
|
|
+const emit = defineEmits(['menuTap', 'nodeTap'])
|
|
//变量
|
|
//变量
|
|
const ElTreeRef = ref(null)
|
|
const ElTreeRef = ref(null)
|
|
const treeRefNode = ref(null)
|
|
const treeRefNode = ref(null)
|
|
@@ -93,18 +102,18 @@ const treeRefData = ref(null)
|
|
const ElTreeProps = ref({
|
|
const ElTreeProps = ref({
|
|
label: 'title',
|
|
label: 'title',
|
|
children: 'children',
|
|
children: 'children',
|
|
- isLeaf: 'notExsitChild'
|
|
|
|
|
|
+ isLeaf: 'notExsitChild',
|
|
})
|
|
})
|
|
const menusData = ref(props.menus)
|
|
const menusData = ref(props.menus)
|
|
const menuMark = ref(props.isMark)
|
|
const menuMark = ref(props.isMark)
|
|
const isAutoKeys = ref(props.isAutoKeys)
|
|
const isAutoKeys = ref(props.isAutoKeys)
|
|
const TreeExpandKey = ref(props.autoExpandKeys)
|
|
const TreeExpandKey = ref(props.autoExpandKeys)
|
|
-const projectId = ref(props.projectId);
|
|
|
|
-const contractId = ref(props.contractId);
|
|
|
|
-const idPrefix = ref(props.idPrefix);
|
|
|
|
|
|
+const projectId = ref(props.projectId)
|
|
|
|
+const contractId = ref(props.contractId)
|
|
|
|
+const idPrefix = ref(props.idPrefix)
|
|
const useAppState = useAppStore()
|
|
const useAppState = useAppStore()
|
|
-const contractInfo = ref(useAppState.getContractInfo);
|
|
|
|
-const {contractType} = contractInfo.value;
|
|
|
|
|
|
+const contractInfo = ref(useAppState.getContractInfo)
|
|
|
|
+const { contractType } = contractInfo.value
|
|
const classifyType = ref(contractType === 2 ? '2' : '1')
|
|
const classifyType = ref(contractType === 2 ? '2' : '1')
|
|
//监听
|
|
//监听
|
|
watch(() => [
|
|
watch(() => [
|
|
@@ -128,28 +137,29 @@ watch(() => [
|
|
//树形结构异步加载数据
|
|
//树形结构异步加载数据
|
|
const defaultExpandedCids = ref([])
|
|
const defaultExpandedCids = ref([])
|
|
const ElTreeLoadNode = async (node, resolve) => {
|
|
const ElTreeLoadNode = async (node, resolve) => {
|
|
- let contractIdRelation = '', parentId = '', primaryKeyId = '';
|
|
|
|
|
|
+ let contractIdRelation = '', parentId = '', primaryKeyId = ''
|
|
if (node.level !== 0) {
|
|
if (node.level !== 0) {
|
|
- const nodeData = getObjValue(node?.data);
|
|
|
|
|
|
+ const nodeData = getObjValue(node?.data)
|
|
contractIdRelation = nodeData?.contractIdRelation || ''
|
|
contractIdRelation = nodeData?.contractIdRelation || ''
|
|
parentId = contractIdRelation ? nodeData?.primaryKeyId : nodeData?.id
|
|
parentId = contractIdRelation ? nodeData?.primaryKeyId : nodeData?.id
|
|
primaryKeyId = nodeData?.id || ''
|
|
primaryKeyId = nodeData?.id || ''
|
|
}
|
|
}
|
|
//获取数据
|
|
//获取数据
|
|
- const {error, code, data} = await dataFillQuery.queryWbsTreeData({
|
|
|
|
|
|
+ const { error, code, data } = await dataFillQuery.queryWbsTreeData({
|
|
contractId: contractId.value || '',
|
|
contractId: contractId.value || '',
|
|
contractIdRelation,
|
|
contractIdRelation,
|
|
primaryKeyId,
|
|
primaryKeyId,
|
|
parentId,
|
|
parentId,
|
|
classifyType: classifyType.value,
|
|
classifyType: classifyType.value,
|
|
|
|
+ tableOwner:'',
|
|
})
|
|
})
|
|
//处理数据
|
|
//处理数据
|
|
if (!error && code === 200) {
|
|
if (!error && code === 200) {
|
|
- let clickKey = '', defaultExpandedArr = [];
|
|
|
|
|
|
+ let clickKey = '', defaultExpandedArr = []
|
|
const keys = TreeExpandKey.value || []
|
|
const keys = TreeExpandKey.value || []
|
|
const resData = getArrValue(data)
|
|
const resData = getArrValue(data)
|
|
if (keys.length > 0) {
|
|
if (keys.length > 0) {
|
|
- let lastKey = keys[keys.length - 1];
|
|
|
|
|
|
+ let lastKey = keys[keys.length - 1]
|
|
for (const item of resData) {
|
|
for (const item of resData) {
|
|
//自动展开
|
|
//自动展开
|
|
if (isArrItem(keys, item?.primaryKeyId)) {
|
|
if (isArrItem(keys, item?.primaryKeyId)) {
|
|
@@ -177,18 +187,15 @@ const ElTreeLoadNode = async (node, resolve) => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-//事件
|
|
|
|
-const emit = defineEmits(['menuTap', 'nodeTap'])
|
|
|
|
-
|
|
|
|
//节点被点击
|
|
//节点被点击
|
|
const ElTreeClick = async (data, node) => {
|
|
const ElTreeClick = async (data, node) => {
|
|
if (isAutoKeys.value) {
|
|
if (isAutoKeys.value) {
|
|
let autoKeysArr = []
|
|
let autoKeysArr = []
|
|
await getNodeExpandKeys(node, autoKeysArr)
|
|
await getNodeExpandKeys(node, autoKeysArr)
|
|
const autoKeys = autoKeysArr.reverse()
|
|
const autoKeys = autoKeysArr.reverse()
|
|
- emit('nodeTap', {node, data, keys: autoKeys})
|
|
|
|
|
|
+ emit('nodeTap', { node, data, keys: autoKeys })
|
|
} else {
|
|
} else {
|
|
- emit('nodeTap', {node, data, keys: []})
|
|
|
|
|
|
+ emit('nodeTap', { node, data, keys: [] })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -205,29 +212,29 @@ const getNodeExpandKeys = async (node, newKeys) => {
|
|
//鼠标右键事件
|
|
//鼠标右键事件
|
|
const contextMenuRef = ref(null)
|
|
const contextMenuRef = ref(null)
|
|
const ElTreeLabelContextMenu = (e, data, node) => {
|
|
const ElTreeLabelContextMenu = (e, data, node) => {
|
|
- const rows = menusData.value || [];
|
|
|
|
|
|
+ const rows = menusData.value || []
|
|
if (node.level !== 1 && rows.length > 0) {
|
|
if (node.level !== 1 && rows.length > 0) {
|
|
- e.preventDefault();
|
|
|
|
- treeRefNode.value = node;
|
|
|
|
- treeRefData.value = data;
|
|
|
|
|
|
+ e.preventDefault()
|
|
|
|
+ treeRefNode.value = node
|
|
|
|
+ treeRefData.value = data
|
|
//展开菜单
|
|
//展开菜单
|
|
contextMenuRef.value?.showMenu(e)
|
|
contextMenuRef.value?.showMenu(e)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//鼠标右键菜单被点击
|
|
//鼠标右键菜单被点击
|
|
-const handleMenuSelect = ({key}) => {
|
|
|
|
- const node = treeRefNode.value;
|
|
|
|
- const data = treeRefData.value;
|
|
|
|
|
|
+const handleMenuSelect = ({ key }) => {
|
|
|
|
+ const node = treeRefNode.value
|
|
|
|
+ const data = treeRefData.value
|
|
//如果为标记菜单
|
|
//如果为标记菜单
|
|
if (key === 'mark' && menuMark.value) {
|
|
if (key === 'mark' && menuMark.value) {
|
|
if (data.isFirst === true) {
|
|
if (data.isFirst === true) {
|
|
- emit('menuTap', {key: 'cancel_mark', node, data})
|
|
|
|
|
|
+ emit('menuTap', { key: 'cancel_mark', node, data })
|
|
} else {
|
|
} else {
|
|
- emit('menuTap', {key: 'mark', node, data})
|
|
|
|
|
|
+ emit('menuTap', { key: 'mark', node, data })
|
|
}
|
|
}
|
|
} else {
|
|
} else {
|
|
- emit('menuTap', {key, node, data})
|
|
|
|
|
|
+ emit('menuTap', { key, node, data })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -236,7 +243,7 @@ const setElTreeMenuMark = (keys, isFirst) => {
|
|
keys.forEach(item => {
|
|
keys.forEach(item => {
|
|
//根据 data 或者 key 拿到 Tree 组件中的 node
|
|
//根据 data 或者 key 拿到 Tree 组件中的 node
|
|
let node = ElTreeRef.value.getNode(item)
|
|
let node = ElTreeRef.value.getNode(item)
|
|
- if (!!node) node.data.isFirst = isFirst;
|
|
|
|
|
|
+ if (node) node.data.isFirst = isFirst
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
@@ -251,7 +258,7 @@ const removeElTreeNode = (key) => {
|
|
// 暴露出去
|
|
// 暴露出去
|
|
defineExpose({
|
|
defineExpose({
|
|
setElTreeMenuMark,
|
|
setElTreeMenuMark,
|
|
- removeElTreeNode
|
|
|
|
|
|
+ removeElTreeNode,
|
|
})
|
|
})
|
|
</script>
|
|
</script>
|
|
|
|
|