Commit eb4ca64c5ff0c4cbd7c864561726fc4ee96b4688
1 parent
f40334bd
perf(src/packages/components): 优化联动组件,下拉选择和图表交互,选择选项,图表legend不匹配
Showing
6 changed files
with
38 additions
and
16 deletions
1 | 1 | /** |
2 | - * 重写select下拉框联动 | |
2 | + * 重写select下拉框联动(下拉选择和输入框共用此hook) | |
3 | 3 | */ |
4 | 4 | import { toRefs } from 'vue' |
5 | 5 | import { CreateComponentType } from '@/packages/index.d' |
... | ... | @@ -13,7 +13,8 @@ export const useChartInteract = ( |
13 | 13 | chartConfig: CreateComponentType, |
14 | 14 | useChartEditStore: ChartEditStoreType, |
15 | 15 | param: { [T: string]: any }, |
16 | - interactEventOn: string | |
16 | + interactEventOn: string, | |
17 | + attrNames: string[] | |
17 | 18 | ) => { |
18 | 19 | const chartEditStore = useChartEditStore() |
19 | 20 | const { interactEvents } = chartConfig.events |
... | ... | @@ -34,8 +35,13 @@ export const useChartInteract = ( |
34 | 35 | if (groupItem.id === item.interactComponentId) { |
35 | 36 | const { Params, Header } = toRefs(groupItem.request.requestParams) |
36 | 37 | Object.keys(item.interactFn).forEach(key => { |
37 | - Params.value[key] = param[item.interactFn[key]] | |
38 | - Header.value[key] = param[item.interactFn[key]] | |
38 | + Params.value[key] = decodeURIComponent(param[item.interactFn[key]]) | |
39 | + if(Reflect.has(Params.value, 'attrName')) { | |
40 | + Params.value['attrName'] = attrNames as unknown as string // 修改联动选择,lengend未实时更新 | |
41 | + } | |
42 | + if (key in Header.value) { | |
43 | + Header.value[key] = param[item.interactFn[key]] | |
44 | + } | |
39 | 45 | }) |
40 | 46 | } |
41 | 47 | }) |
... | ... | @@ -53,7 +59,12 @@ export const useChartInteract = ( |
53 | 59 | // |
54 | 60 | Object.keys(item.interactFn).forEach(key => { |
55 | 61 | Params.value[key] = decodeURIComponent(param[item.interactFn[key]]) |
56 | - Header.value[key] = param[item.interactFn[key]] | |
62 | + if(Reflect.has(Params.value, 'attrName')) { | |
63 | + Params.value['attrName'] = attrNames as unknown as string // 修改联动选择,lengend未实时更新 | |
64 | + } | |
65 | + if (key in Header.value) { | |
66 | + Header.value[key] = param[item.interactFn[key]] | |
67 | + } | |
57 | 68 | }) |
58 | 69 | } |
59 | 70 | } | ... | ... |
... | ... | @@ -112,8 +112,8 @@ watch( |
112 | 112 | props.chartConfig.option.series.push(...seriesArr) |
113 | 113 | } |
114 | 114 | replaceMergeArr.value = ['series'] |
115 | + useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series) | |
115 | 116 | nextTick(() => { |
116 | - useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series) | |
117 | 117 | replaceMergeArr.value = [] |
118 | 118 | }) |
119 | 119 | } | ... | ... |
... | ... | @@ -112,8 +112,8 @@ watch( |
112 | 112 | props.chartConfig.option.series.push(...seriesArr) |
113 | 113 | } |
114 | 114 | replaceMergeArr.value = ['series'] |
115 | + useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series) | |
115 | 116 | nextTick(() => { |
116 | - useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series) | |
117 | 117 | replaceMergeArr.value = [] |
118 | 118 | }) |
119 | 119 | } | ... | ... |
... | ... | @@ -143,8 +143,8 @@ watch( |
143 | 143 | props.chartConfig.option.series.push(...seriesArr) |
144 | 144 | } |
145 | 145 | replaceMergeArr.value = ['series'] |
146 | + useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series) | |
146 | 147 | nextTick(() => { |
147 | - useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series) | |
148 | 148 | replaceMergeArr.value = [] |
149 | 149 | }) |
150 | 150 | } | ... | ... |
... | ... | @@ -214,8 +214,8 @@ watch( |
214 | 214 | props.chartConfig.option.series.push(...seriesArr) |
215 | 215 | } |
216 | 216 | replaceMergeArr.value = ['series'] |
217 | + useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series) | |
217 | 218 | nextTick(() => { |
218 | - useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series) | |
219 | 219 | replaceMergeArr.value = [] |
220 | 220 | }) |
221 | 221 | } | ... | ... |
... | ... | @@ -10,13 +10,15 @@ |
10 | 10 | </template> |
11 | 11 | |
12 | 12 | <script setup lang="ts"> |
13 | -import { PropType, toRefs, shallowReactive, watch } from 'vue' | |
13 | +import { PropType, toRefs, shallowReactive, watch, ref } from 'vue' | |
14 | 14 | import { CreateComponentType } from '@/packages/index.d' |
15 | 15 | import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' |
16 | 16 | import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook' |
17 | 17 | import { InteractEventOn } from '@/enums/eventEnum' |
18 | 18 | import { ComponentInteractParamsEnum } from './interact' |
19 | 19 | import { useChartDataFetch } from '@/hooks' |
20 | +import { isObject } from '@/utils/external/is' | |
21 | +import { SelectOption } from 'naive-ui' | |
20 | 22 | |
21 | 23 | const props = defineProps({ |
22 | 24 | chartConfig: { |
... | ... | @@ -36,14 +38,23 @@ const option = shallowReactive({ |
36 | 38 | } |
37 | 39 | }) |
38 | 40 | |
41 | +const cacheOptions = ref<string[]>([]) | |
42 | + | |
39 | 43 | // 监听事件改变 |
40 | -const onChange = (v: string[] | string) => { | |
41 | - // 存储到联动数据 | |
42 | - useChartInteract( | |
44 | +const onChange = (v: string[] | string, options: SelectOption | SelectOption[]) => { | |
45 | + const attrName = isObject(options) ? [(options as SelectOption).label] : (options as SelectOption[])?.map(mapItem => mapItem.label) | |
46 | + cacheOptions.value = attrName as unknown as string[] | |
47 | + updateChartInteract(v, cacheOptions.value) | |
48 | +} | |
49 | + | |
50 | +const updateChartInteract = (v: string[] | string, attrName?: string[]) => { | |
51 | + // 存储到联动数据 | |
52 | + useChartInteract( | |
43 | 53 | props.chartConfig, |
44 | 54 | useChartEditStore, |
45 | - { [ComponentInteractParamsEnum.DATA]: v }, | |
46 | - InteractEventOn.CHANGE | |
55 | + { [ComponentInteractParamsEnum.DATA]: encodeURIComponent(v as unknown as string) }, | |
56 | + InteractEventOn.CHANGE, | |
57 | + attrName! | |
47 | 58 | ) |
48 | 59 | // 特殊处理 只针对两个下拉选择器,一个是产品下拉,一个是设备下拉,选择了产品,存储到sessionStorage里,用来判断预览时点击产品下拉,清除设备下拉值 |
49 | 60 | if (window.location.href.includes('preview')) { |
... | ... | @@ -56,7 +67,7 @@ watch( |
56 | 67 | () => props.chartConfig.option, |
57 | 68 | (newData: any) => { |
58 | 69 | option.value = newData |
59 | - onChange(newData.selectValue) | |
70 | + updateChartInteract(newData.selectValue, cacheOptions.value) | |
60 | 71 | }, |
61 | 72 | { |
62 | 73 | immediate: true, | ... | ... |