|
@@ -1,148 +1,43 @@
|
|
|
<template>
|
|
|
- <ElTree class="hc-tree-node tree-line" ref="ElTreeRef" :props="ElTreeProps" :load="ElTreeLoadNode" lazy highlight-current accordion node-key="primaryKeyId"
|
|
|
- show-checkbox :default-expanded-keys="defaultExpandedCids" @node-click="ElTreeClick" :indent="0">
|
|
|
+ <ElTree class="hc-tree-node tree-line" ref="ElTreeRef" :props="ElTreeProps" :data="datas" highlight-current accordion node-key="primaryKeyId" :indent="0" @node-click="ElTreeClick">
|
|
|
<template #default="{ node, data }">
|
|
|
<div class="data-custom-tree-node" :id="`${idPrefix}${data['primaryKeyId']}`">
|
|
|
- <div class="label division" :class="node.level === 1?'level-name':node.level">{{ node.label }}</div>
|
|
|
+ <div class="label" :class="node.level === 1?'level-name':''">{{ node.label }}</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</ElTree>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {ref,nextTick,watch} from "vue";
|
|
|
-import dataFillQuery from '~api/data-fill/query';
|
|
|
-import {isItem,getArrValue,getObjValue} from "vue-utils-plus"
|
|
|
-
|
|
|
+import { ref } from "vue";
|
|
|
//参数
|
|
|
const props = defineProps({
|
|
|
- projectId: {
|
|
|
- type: [String,Number],
|
|
|
- default: ''
|
|
|
- },
|
|
|
- contractId: {
|
|
|
- type: [String,Number],
|
|
|
- default: ''
|
|
|
- },
|
|
|
- autoExpandKeys: {
|
|
|
+ datas: {
|
|
|
type: Array,
|
|
|
default: () => ([])
|
|
|
},
|
|
|
idPrefix: {
|
|
|
type: String,
|
|
|
- default: 'division-tree-'
|
|
|
- },
|
|
|
- isAutoClick: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
+ default: 'division-tree-data2-'
|
|
|
}
|
|
|
})
|
|
|
|
|
|
//变量
|
|
|
const ElTreeRef = ref(null)
|
|
|
const ElTreeProps = ref({
|
|
|
- label: 'title',
|
|
|
- children: 'children',
|
|
|
- isLeaf: 'notExsitChild'
|
|
|
-})
|
|
|
-const TreeExpandKey = ref(props.autoExpandKeys)
|
|
|
-const projectId = ref(props.projectId);
|
|
|
-const contractId = ref(props.contractId);
|
|
|
-const idPrefix = ref(props.idPrefix);
|
|
|
-
|
|
|
-//监听
|
|
|
-watch(() => [
|
|
|
- props.autoExpandKeys,
|
|
|
- props.projectId,
|
|
|
- props.contractId,
|
|
|
- props.idPrefix,
|
|
|
-], ([expandKeys, UserProjectId, UserContractId,UserIdPrefix]) => {
|
|
|
- TreeExpandKey.value = expandKeys
|
|
|
- projectId.value = UserProjectId
|
|
|
- contractId.value = UserContractId
|
|
|
- idPrefix.value = UserIdPrefix
|
|
|
+ label: 'fullName',
|
|
|
+ children: 'children'
|
|
|
})
|
|
|
|
|
|
//事件
|
|
|
-const emit = defineEmits(['nodeTap', 'nodeLoading', 'relationTap'])
|
|
|
-
|
|
|
-//树形结构异步加载数据
|
|
|
-const defaultExpandedCids = ref([])
|
|
|
-const ElTreeLoadNode = async (node, resolve) => {
|
|
|
- let contractIdRelation = '', parentId = '', primaryKeyId = '';
|
|
|
- if (node.level !== 0) {
|
|
|
- const nodeData = getObjValue(node?.data);
|
|
|
- contractIdRelation = nodeData?.contractIdRelation || ''
|
|
|
- parentId = contractIdRelation ? nodeData?.primaryKeyId : nodeData?.id
|
|
|
- primaryKeyId = nodeData?.id || ''
|
|
|
- }
|
|
|
- //获取数据
|
|
|
- const {error, code, data} = await dataFillQuery.queryWbsTreeData({
|
|
|
- contractId: contractId.value || '',
|
|
|
- contractIdRelation,
|
|
|
- primaryKeyId,
|
|
|
- parentId
|
|
|
- })
|
|
|
- //处理数据
|
|
|
- if (!error && code === 200) {
|
|
|
- let clickKey = '', defaultExpandedArr = [];
|
|
|
- const keys = TreeExpandKey.value || []
|
|
|
- const resData = getArrValue(data)
|
|
|
- if (keys.length > 0) {
|
|
|
- let lastKey = keys[keys.length-1];
|
|
|
- for (const item of resData) {
|
|
|
- //自动展开
|
|
|
- if (isItem(keys,item?.primaryKeyId)) {
|
|
|
- defaultExpandedArr.push(item?.primaryKeyId)
|
|
|
- }
|
|
|
- //最后一个,选中点击
|
|
|
- if (item?.primaryKeyId === lastKey) {
|
|
|
- clickKey = item?.primaryKeyId
|
|
|
- }
|
|
|
- }
|
|
|
- } else if (node.level === 0) {
|
|
|
- defaultExpandedArr.push(resData[0]?.primaryKeyId)
|
|
|
- }
|
|
|
- //自动展开
|
|
|
- defaultExpandedCids.value = defaultExpandedArr
|
|
|
- if (node.level === 0) {
|
|
|
- emit('nodeLoading')
|
|
|
- }
|
|
|
- resolve(resData)
|
|
|
- //最后一个,执行点击
|
|
|
- if (props.isAutoClick && clickKey) {
|
|
|
- await nextTick(() => {
|
|
|
- document.getElementById(`${idPrefix.value}${clickKey}`)?.click()
|
|
|
- })
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (node.level === 0) {
|
|
|
- emit('nodeLoading')
|
|
|
- }
|
|
|
- resolve([])
|
|
|
- }
|
|
|
-}
|
|
|
+const emit = defineEmits(['nodeTap'])
|
|
|
|
|
|
//节点被点击
|
|
|
const ElTreeClick = async (data,node) => {
|
|
|
emit('nodeTap', {node, data})
|
|
|
}
|
|
|
-
|
|
|
-//鼠标右键事件
|
|
|
-const ElTreeRelationClick = (e,data,node) => {
|
|
|
- if (node.level !== 1) {
|
|
|
- e.preventDefault();
|
|
|
- emit('relationTap', {node, data})
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@import "../../../../styles/app/tree.scss";
|
|
|
</style>
|
|
|
-<style lang="scss">
|
|
|
-.hc-tree-node .el-tree-node__label {
|
|
|
- flex: 1;
|
|
|
-}
|
|
|
-</style>
|