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 |  147 +++++++++++++++++++++++--------------------------
 1 files changed, 69 insertions(+), 78 deletions(-)

diff --git a/src/components/TreeSelect/index.vue b/src/components/TreeSelect/index.vue
index 4ff0e76..7accd6b 100644
--- a/src/components/TreeSelect/index.vue
+++ b/src/components/TreeSelect/index.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="el-tree-select">
     <el-select
-      style="width: 100%"
-      v-model="valueId"
       ref="treeSelect"
+      v-model="valueId"
+      style="width: 100%"
       :filterable="true"
       :clearable="true"
-      @clear="clearHandle"
       :filter-method="selectFilterData"
       :placeholder="placeholder"
+      @clear="clearHandle"
     >
       <el-option :value="valueId" :label="valueTitle">
         <el-tree
@@ -28,108 +28,99 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+interface ObjMap {
+  value: string;
+  label: string;
+  children: string;
+}
+interface Props {
+  objMap: ObjMap;
+  accordion: boolean;
+  value: string | number;
+  options: any[];
+  placeholder: string;
+}
 
-const { proxy } = getCurrentInstance();
+const props = withDefaults(defineProps<Props>(), {
+  objMap: () => {
+    return {
+      value: 'id',
+      label: 'label',
+      children: 'children'
+    };
+  },
+  accordion: false,
+  value: '',
+  options: () => [],
+  placeholder: ''
+});
 
-const props = defineProps({
-  /* 閰嶇疆椤� */
-  objMap: {
-    type: Object,
-    default: () => {
-      return {
-        value: 'id', // ID瀛楁鍚�
-        label: 'label', // 鏄剧ず鍚嶇О
-        children: 'children' // 瀛愮骇瀛楁鍚�
-      }
-    }
-  },
-  /* 鑷姩鏀惰捣 */
-  accordion: {
-    type: Boolean,
-    default: () => {
-      return false
-    }
-  },
-  /**褰撳墠鍙屽悜鏁版嵁缁戝畾鐨勫�� */
-  value: {
-    type: [String, Number],
-    default: ''
-  },
-  /**褰撳墠鐨勬暟鎹� */
-  options: {
-    type: Array,
-    default: () => []
-  },
-  /**杈撳叆妗嗗唴閮ㄧ殑鏂囧瓧 */
-  placeholder: {
-    type: String,
-    default: ''
-  }
-})
+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([]);
+const defaultExpandedKey = ref<any[]>([]);
 
-function initHandle() {
+const initHandle = () => {
   nextTick(() => {
     const selectedValue = valueId.value;
-    if(selectedValue !== null && typeof (selectedValue) !== 'undefined') {
-      const node = proxy.$refs.selectTree.getNode(selectedValue)
+    if (selectedValue !== null && typeof selectedValue !== 'undefined') {
+      const node = selectTree.value?.getNode(selectedValue);
       if (node) {
-        valueTitle.value = node.data[props.objMap.label]
-        proxy.$refs.selectTree.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) {
-  valueTitle.value = node[props.objMap.label]
+  });
+};
+const handleNodeClick = (node: any) => {
+  valueTitle.value = node[props.objMap.label];
   valueId.value = node[props.objMap.value];
   defaultExpandedKey.value = [];
-  proxy.$refs.treeSelect.blur()
-  selectFilterData('')
-}
-function selectFilterData(val) {
-  proxy.$refs.selectTree.filter(val)
-}
-function filterNode(value, data) {
-  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";
+<style lang="scss" scoped>
+@import '@/assets/styles/variables.module.scss';
+
 .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
   padding: 0;
   background-color: #fff;
@@ -153,4 +144,4 @@
   background-color: mix(#fff, $--color-primary, 90%);
   color: $--color-primary;
 }
-</style>
\ No newline at end of file
+</style>

--
Gitblit v1.9.3