feat: 优化交互组件

src/hooks/events.hook.ts

@@ -1,28 +0,0 @@
-import { computed, toRefs } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-
-// 获取类型
-type ChartEditStoreType = typeof useChartEditStore
-
-// Params 参数修改触发api更新图表请求
-export const eventsCreate = (chartConfig: CreateComponentType, useChartEditStore: ChartEditStoreType, param: { [name: string]: string }, onEvevnt: string) => {
-  const chartEditStore = useChartEditStore()
-  const { eventsFn } = chartConfig.events
-  const fnOnEvevnt = eventsFn.filter((item) => {
-    return item.on === onEvevnt
-  }) || []
-  if (fnOnEvevnt.length === 0) return
-  fnOnEvevnt.forEach((item) => {
-    const index = chartEditStore.fetchTargetIndex(item.components)
-    const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams)
-    Object.keys(item.fn).forEach((key) => {
-      if (Params.value[key]) {
-        Params.value[key] = param[item.fn[key]]
-      }
-      if (Header.value[key]) {
-        Header.value[key] = param[item.fn[key]]
-      }
-    })
-  })
-}

src/hooks/index.ts

@@ -5,4 +5,4 @@ export * from '@/hooks/useChartDataFetch.hook'
 export * from '@/hooks/useChartDataPondFetch.hook'
 export * from '@/hooks/useLifeHandler.hook'
 export * from '@/hooks/useLang.hook'
-export * from '@/hooks/events.hook'
+export * from '@/hooks/useChartInteract.hook'

src/hooks/useChartDataFetch.hook.ts

@@ -90,12 +90,17 @@ export const useChartDataFetch = (
         // 立即调用
         fetchFn()
 
+        // 组件交互处理监听
+        watch(
+          () => targetComponent.request,
+          () => {
+            fetchFn()
+          },
+          {
+            deep: true
+          }
+        )
 
-        watch(() => targetComponent.request, () => {
-          fetchFn()
-        }, {
-          deep: true
-        })
         // 定时时间
         const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
         // 单位

src/hooks/useChartInteract.hook.ts

@@ -0,0 +1,35 @@
+import { toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+// 获取类型
+type ChartEditStoreType = typeof useChartEditStore
+
+// Params 参数修改触发 api 更新图表请求
+export const useChartInteract = (
+  chartConfig: CreateComponentType,
+  useChartEditStore: ChartEditStoreType,
+  param: { [name: string]: string },
+  onEvent: string
+) => {
+  const chartEditStore = useChartEditStore()
+  const { interactEvents } = chartConfig.events
+
+  const fnOnEvent = interactEvents.filter(item => {
+    return item.interactOn === onEvent
+  })
+
+  fnOnEvent.forEach(item => {
+    const index = chartEditStore.fetchTargetIndex(item.interactComponents)
+    if (index !== -1) return
+    const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams)
+    Object.keys(item.interactFn).forEach(key => {
+      if (Params.value[key]) {
+        Params.value[key] = param[item.interactFn[key]]
+      }
+      if (Header.value[key]) {
+        Header.value[key] = param[item.interactFn[key]]
+      }
+    })
+  })
+}