From e181f04c642204e79749af93fa921875ff6c21ba Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期二, 20 五月 2025 10:46:35 +0800
Subject: [PATCH] refactor(qms): 重构趋势图展示逻辑
---
src/components/TreeSelect/index.vue | 193 ++++++++++++++++++++++-------------------------
1 files changed, 91 insertions(+), 102 deletions(-)
diff --git a/src/components/TreeSelect/index.vue b/src/components/TreeSelect/index.vue
index 8e5f567..7accd6b 100644
--- a/src/components/TreeSelect/index.vue
+++ b/src/components/TreeSelect/index.vue
@@ -1,107 +1,126 @@
+<template>
+ <div class="el-tree-select">
+ <el-select
+ ref="treeSelect"
+ v-model="valueId"
+ style="width: 100%"
+ :filterable="true"
+ :clearable="true"
+ :filter-method="selectFilterData"
+ :placeholder="placeholder"
+ @clear="clearHandle"
+ >
+ <el-option :value="valueId" :label="valueTitle">
+ <el-tree
+ id="tree-option"
+ ref="selectTree"
+ :accordion="accordion"
+ :data="options"
+ :props="objMap"
+ :node-key="objMap.value"
+ :expand-on-click-node="false"
+ :default-expanded-keys="defaultExpandedKey"
+ :filter-node-method="filterNode"
+ @node-click="handleNodeClick"
+ ></el-tree>
+ </el-option>
+ </el-select>
+ </div>
+</template>
+
<script setup lang="ts">
-import { ElTreeSelect } from 'element-plus'
+interface ObjMap {
+ value: string;
+ label: string;
+ children: string;
+}
+interface Props {
+ objMap: ObjMap;
+ accordion: boolean;
+ value: string | number;
+ options: any[];
+ placeholder: string;
+}
-const props = defineProps({
- /* 閰嶇疆椤� */
- objMap: {
- type: Object,
- default: () => {
- return {
- value: 'id', // ID瀛楁鍚�
- label: 'label', // 鏄剧ず鍚嶇О
- children: 'children' // 瀛愮骇瀛楁鍚�
- }
- }
+const props = withDefaults(defineProps<Props>(), {
+ objMap: () => {
+ return {
+ value: 'id',
+ label: 'label',
+ children: 'children'
+ };
},
- /* 鑷姩鏀惰捣 */
- accordion: {
- type: Boolean,
- default: () => {
- return false
- }
- },
- /**褰撳墠鍙屽悜鏁版嵁缁戝畾鐨勫�� */
- value: {
- type: [String, Number],
- default: ''
- },
- /**褰撳墠鐨勬暟鎹� */
- options: {
- type: Array,
- default: () => []
- },
- /**杈撳叆妗嗗唴閮ㄧ殑鏂囧瓧 */
- placeholder: {
- type: String,
- default: ''
- }
-})
+ accordion: false,
+ value: '',
+ options: () => [],
+ placeholder: ''
+});
-
-const selectTree = ref(ElTreeSelect);
+const selectTree = ref<ElTreeSelectInstance>();
const emit = defineEmits(['update:value']);
const valueId = computed({
get: () => props.value,
set: (val) => {
- emit('update:value', val)
+ emit('update:value', val);
}
});
const valueTitle = ref('');
const defaultExpandedKey = ref<any[]>([]);
-function initHandle() {
+const initHandle = () => {
nextTick(() => {
const selectedValue = valueId.value;
- if(selectedValue !== null && typeof (selectedValue) !== 'undefined') {
- const node = selectTree.value.getNode(selectedValue)
+ if (selectedValue !== null && typeof selectedValue !== 'undefined') {
+ const node = selectTree.value?.getNode(selectedValue);
if (node) {
- valueTitle.value = node.data[props.objMap.label]
- selectTree.value.setCurrentKey(selectedValue) // 璁剧疆榛樿閫変腑
- defaultExpandedKey.value = [selectedValue] // 璁剧疆榛樿灞曞紑
+ valueTitle.value = node.data[props.objMap.label];
+ selectTree.value?.setCurrentKey(selectedValue); // 璁剧疆榛樿閫変腑
+ defaultExpandedKey.value = [selectedValue]; // 璁剧疆榛樿灞曞紑
}
} else {
- clearHandle()
+ clearHandle();
}
- })
-}
-function handleNodeClick(node: any) {
- valueTitle.value = node[props.objMap.label]
+ });
+};
+const handleNodeClick = (node: any) => {
+ valueTitle.value = node[props.objMap.label];
valueId.value = node[props.objMap.value];
defaultExpandedKey.value = [];
- selectTree.value.blur()
- selectFilterData('')
-}
-function selectFilterData(val: any) {
- selectTree.value.filter(val)
-}
-function filterNode(value: any, data: any) {
- if (!value) return true
- return data[props.objMap['label']].indexOf(value) !== -1
-}
-function clearHandle() {
- valueTitle.value = ''
- valueId.value = ''
+ selectTree.value?.blur();
+ selectFilterData('');
+};
+const selectFilterData = (val: any) => {
+ selectTree.value?.filter(val);
+};
+const filterNode = (value: any, data: any) => {
+ if (!value) return true;
+ return data[props.objMap['label']].indexOf(value) !== -1;
+};
+const clearHandle = () => {
+ valueTitle.value = '';
+ valueId.value = '';
defaultExpandedKey.value = [];
- clearSelected()
-}
-function clearSelected() {
- const allNode = document.querySelectorAll('#tree-option .el-tree-node')
- allNode.forEach((element) => element.classList.remove('is-current'))
-}
+ clearSelected();
+};
+const clearSelected = () => {
+ const allNode = document.querySelectorAll('#tree-option .el-tree-node');
+ allNode.forEach((element) => element.classList.remove('is-current'));
+};
onMounted(() => {
- initHandle()
-})
+ initHandle();
+});
watch(valueId, () => {
initHandle();
-})
+});
</script>
<style lang="scss" scoped>
-@import "@/assets/styles/variables.module.scss";
+@import '@/assets/styles/variables.module.scss';
+
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
padding: 0;
background-color: #fff;
@@ -126,33 +145,3 @@
color: $--color-primary;
}
</style>
-
-<template>
- <div class="el-tree-select">
- <el-select
- style="width: 100%"
- v-model="valueId"
- ref="treeSelect"
- :filterable="true"
- :clearable="true"
- @clear="clearHandle"
- :filter-method="selectFilterData"
- :placeholder="placeholder"
- >
- <el-option :value="valueId" :label="valueTitle">
- <el-tree
- id="tree-option"
- ref="selectTree"
- :accordion="accordion"
- :data="options"
- :props="objMap"
- :node-key="objMap.value"
- :expand-on-click-node="false"
- :default-expanded-keys="defaultExpandedKey"
- :filter-node-method="filterNode"
- @node-click="handleNodeClick"
- ></el-tree>
- </el-option>
- </el-select>
- </div>
-</template>
--
Gitblit v1.9.3