Commit b73e42b3e3e21539a9154ca78128912fbe97f652

Authored by fengwotao
1 parent d5d2e147

perf(src/hooks/): 优化自定义下拉选择器和图表交互,接口请求多次

  1 +/**
  2 + * 重写select下拉框联动
  3 + */
  4 +import {toRaw, toRefs} from 'vue'
  5 +import {CreateComponentType} from '@/packages/index.d'
  6 +import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
  7 +import {customRequest} from "@/api/external/customRequest";
  8 +import {useFilterFn} from "@/hooks/external/useFilterFn";
  9 +
  10 +// 获取类型
  11 +type ChartEditStoreType = typeof useChartEditStore
  12 +
  13 +// Params 参数修改触发 api 更新图表请求
  14 +export const useChartInteract = (
  15 + chartConfig: CreateComponentType,
  16 + useChartEditStore: ChartEditStoreType,
  17 + param: { [T: string]: any },
  18 + interactEventOn: string
  19 +) => {
  20 + const chartEditStore = useChartEditStore()
  21 + const {interactEvents} = chartConfig.events
  22 + const fnOnEvent = interactEvents.filter(item => {
  23 + return item.interactOn === interactEventOn
  24 + })
  25 +
  26 + if (fnOnEvent.length === 0) return
  27 + fnOnEvent.forEach(async (item) => {
  28 + const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
  29 + if (index === -1) return
  30 + const {Params, Header} = toRefs(chartEditStore.componentList[index].request.requestParams)
  31 + Object.keys(item.interactFn).forEach(key => {
  32 + if (Params.value[key]) {
  33 + Params.value[key] = param[item.interactFn[key]]
  34 + }
  35 + if (Header.value[key]) {
  36 + Header.value[key] = param[item.interactFn[key]]
  37 + }
  38 + })
  39 + const res = await customRequest(toRaw(chartEditStore.componentList[index].request))
  40 + if (res) {
  41 + try {
  42 + const filter = chartEditStore.componentList[index].filter
  43 + const {value} = useFilterFn(filter, res)
  44 + if (!value) return
  45 + chartEditStore.componentList[index].option.dataset = value
  46 + } finally {
  47 + console.log
  48 + }
  49 + }
  50 + })
  51 +}
  52 +
  53 +// 联动事件触发的 type 变更时,清除当前绑定内容
  54 +// export const clearInteractEvent = (chartConfig: CreateComponentType) => {
  55 +
  56 +// }
... ...
... ... @@ -15,7 +15,7 @@ import { PropType, toRefs, shallowReactive, watch ,ref,computed} from 'vue'
15 15 import dayjs, {ManipulateType} from 'dayjs'
16 16 import { CreateComponentType } from '@/packages/index.d'
17 17 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
18   -import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook'
  18 +import { useChartInteract } from '@/hooks/external/useChartDateInteract.hook'
19 19 import { InteractEventOn } from '@/enums/eventEnum'
20 20 import {ComponentInteractEventEnum, ComponentInteractParamsEnum, DefaultTypeEnum} from './interact'
21 21 import quarterOfYear from 'dayjs/plugin/quarterOfYear';
... ...