273 lines
7.4 KiB
Vue
273 lines
7.4 KiB
Vue
<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>
|