代码提交
This commit is contained in:
name
272
src/components/tree/pointTree.vue
Normal file
272
src/components/tree/pointTree.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<div style="height: 755px">
|
||||
<div class="textInput">
|
||||
<el-input v-model="filterText" placeholder="请输入内容" clearable maxlength="10" show-word-limit @input="change"
|
||||
size="small">
|
||||
<template #prefix>
|
||||
<el-link :icon="Search"></el-link>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<!-- :check-strictly="true"
|
||||
:check-on-click-node="true"
|
||||
:expand-on-click-node="false" 点击三角标的时候展开，点击文字不展开-->
|
||||
<el-tree class="treeSet" ref="treeRef" :props="defaultProps" highlight-current
|
||||
:filter-node-method="filterNode" node-key="id" :data="dataTree" v-bind="$attrs"
|
||||
:default-expanded-keys="expandedKeys">
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node">
|
||||
<el-link v-if="data.level == -1" style="color: #0a73ff" :icon="HomeFilled"></el-link>
|
||||
<el-link v-if="data.level == 0" style="color: #0a73ff" :icon="CollectionTag"></el-link>
|
||||
<el-link v-if="data.level == 2" style="color: #0a73ff" :icon="Flag"></el-link>
|
||||
<el-link v-if="data.level == 3" style="color: #0a73ff" :icon="Guide"></el-link>
|
||||
<el-link v-if="data.level == 7" style="color: #0a73ff" :icon="OfficeBuilding"></el-link>
|
||||
<el-link v-if="data.level == 6"
|
||||
:style="{ color: data.comFlag == 0 ? 'red' : data.comFlag == 1 ? '#0a73ff' : 'gray' }" :icon="Location">
|
||||
</el-link>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, computed, nextTick } from "vue";
|
||||
import { ElTree } from "element-plus";
|
||||
import {
|
||||
Search,
|
||||
HomeFilled,
|
||||
CollectionTag,
|
||||
Flag,
|
||||
OfficeBuilding,
|
||||
Location,
|
||||
Guide,
|
||||
} from "@element-plus/icons-vue";
|
||||
import { getTerminalTreeForFive } from "@/api/manage_wx";
|
||||
import { useStore } from "vuex";
|
||||
|
||||
const store = useStore();
|
||||
|
||||
const filterText = ref("");
|
||||
const defaultProps = {
|
||||
label: "name",
|
||||
value: "id",
|
||||
};
|
||||
|
||||
const treeRef = ref();
|
||||
|
||||
const dataTree = ref([]);
|
||||
const expandedKeys = ref([]);
|
||||
|
||||
const emit = defineEmits(["init"]);
|
||||
|
||||
const currentNodeKey = ref<string | number>("");
|
||||
|
||||
const specialCharsPattern =
|
||||
/[`~!@$%^&*\-+=<>?:"{}|,.\/;'\\[\]·~！@¥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、～]/g;
|
||||
const change = (val) => {
|
||||
if (specialCharsPattern.test(val)) {
|
||||
ElMessage.warning("禁止输入特殊字符!");
|
||||
filterText.value = val.replace(
|
||||
/[`~!@$%^&*\-+=<>?:"{}|,.\/;'\\[\]·~！@¥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、～]/g,
|
||||
""
|
||||
);
|
||||
// console.log("🚀 ~ change ~ filterText.value:", filterText.value);
|
||||
|
||||
treeRef.value!.filter(filterText.value);
|
||||
} else {
|
||||
treeRef.value!.filter(filterText.value);
|
||||
}
|
||||
};
|
||||
|
||||
const filterNode = (value: string, data: any, node: any) => {
|
||||
if (!value) return true;
|
||||
// return data.name.includes(value)
|
||||
if (data.name) {
|
||||
return chooseNode(value, data, node);
|
||||
}
|
||||
};
|
||||
|
||||
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
|
||||
const chooseNode = (value: string, data: any, node: any) => {
|
||||
if (data.name.indexOf(value) !== -1) {
|
||||
return true;
|
||||
}
|
||||
const level = node.level;
|
||||
// 如果传入的节点本身就是一级节点就不用校验了
|
||||
if (level === 1) {
|
||||
return false;
|
||||
}
|
||||
// 先取当前节点的父节点
|
||||
let parentData = node.parent;
|
||||
// 遍历当前节点的父节点
|
||||
let index = 0;
|
||||
while (index < level - 1) {
|
||||
// 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
|
||||
if (parentData.data.name.indexOf(value) !== -1) {
|
||||
return true;
|
||||
}
|
||||
// 否则的话再往上一层做匹配
|
||||
parentData = parentData.parent;
|
||||
index++;
|
||||
}
|
||||
// 没匹配到返回false
|
||||
return false;
|
||||
};
|
||||
|
||||
const classificationData = ref([]);
|
||||
|
||||
const formData = ref({
|
||||
deptIndex: store.state.deptId,
|
||||
});
|
||||
|
||||
const loadData = () => {
|
||||
let form = JSON.parse(JSON.stringify(formData.value));
|
||||
getTerminalTreeForFive(form).then((res) => {
|
||||
console.log(res);
|
||||
|
||||
res.data = [
|
||||
{
|
||||
name: "电网拓扑",
|
||||
level: -1,
|
||||
id: 0,
|
||||
children: res.data,
|
||||
},
|
||||
];
|
||||
|
||||
// expandedKeys.value = [res.data[0].id];
|
||||
|
||||
// 查找第一层级的最后一个子节点
|
||||
const firstLevelChildren = res.data[0].children;
|
||||
if (firstLevelChildren && firstLevelChildren.length > 0) {
|
||||
let flag = true;
|
||||
|
||||
// 设置节点别名
|
||||
res.data.forEach((item: any) => {
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.children.forEach((item4: any) => {
|
||||
item4.children.forEach((item5: any) => {
|
||||
if (item5.level == 7) {
|
||||
item5.children.forEach((item6: any) => {
|
||||
item6.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}>${item6.name}`;
|
||||
});
|
||||
} else {
|
||||
if (flag) {
|
||||
expandedKeys.value = [item5.id];
|
||||
treeRef.value.setCurrentKey(item5.id);
|
||||
emit("init", item5);
|
||||
flag = false
|
||||
}
|
||||
item5.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}`;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// const lastChild = firstLevelChildren[firstLevelChildren.length - 1];
|
||||
|
||||
// // 设置当前节点key
|
||||
// currentNodeKey.value = lastChild.children[0].children[0].children[0].children[0].id;
|
||||
|
||||
// // 发送初始化事件
|
||||
// emit("init", lastChild);
|
||||
|
||||
// // 设置默认选中节点
|
||||
// nextTick(() => {
|
||||
// if (treeRef.value) {
|
||||
// treeRef.value.setCurrentKey(currentNodeKey.value);
|
||||
// }
|
||||
// });
|
||||
}
|
||||
|
||||
dataTree.value = res.data;
|
||||
});
|
||||
};
|
||||
|
||||
loadData();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.cn-tree {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
:deep(.el-tree) {
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
||||
background-color: var(--el-color-primary-light-7);
|
||||
}
|
||||
|
||||
.menu-collapse {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.textInput {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// height: 30px;
|
||||
padding: 5px;
|
||||
background-color: rgba(44, 46, 60);
|
||||
}
|
||||
|
||||
.treeSet {
|
||||
flex: 1;
|
||||
overflow: scroll;
|
||||
height: 97%;
|
||||
background-color: rgba(44, 46, 60);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// 悬浮时的样式
|
||||
:deep(.el-tree-node__content:hover) {
|
||||
background-color: #0a73ff70 !important;
|
||||
color: #fff !important;
|
||||
|
||||
.custom-tree-node {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.el-link {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
// 添加更具体的选择器来覆盖默认样式
|
||||
span {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-tree-node:focus > .el-tree-node__content) {
|
||||
background-color: #0a73ff70 !important;
|
||||
}
|
||||
|
||||
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
||||
background-color: #0a73ff70 !important;
|
||||
color: #fff !important;
|
||||
|
||||
.custom-tree-node {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.el-link {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user