Commit f553bc83b09b3149f4652b566a7b4661f00452cc
Merge branch 'ft' into 'main_dev'
fix(src/packages/): 修复组件联动分组,然后点击一个会影响另一个组件问题 See merge request yunteng/thingskit-view!105
Showing
7 changed files
with
182 additions
and
86 deletions
1 | 1 | /** |
2 | 2 | * 重写select下拉框联动 |
3 | 3 | */ |
4 | -import {toRefs} from 'vue' | |
5 | -import {CreateComponentGroupType, CreateComponentType} from '@/packages/index.d' | |
6 | -import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore' | |
4 | +import { toRefs } from 'vue' | |
5 | +import { CreateComponentType } from '@/packages/index.d' | |
6 | +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | |
7 | 7 | |
8 | 8 | // 获取类型 |
9 | 9 | type ChartEditStoreType = typeof useChartEditStore |
10 | 10 | |
11 | 11 | // Params 参数修改触发 api 更新图表请求 |
12 | 12 | export const useChartInteract = ( |
13 | - chartConfig: CreateComponentType, | |
14 | - useChartEditStore: ChartEditStoreType, | |
15 | - param: { [T: string]: any }, | |
16 | - interactEventOn: string | |
13 | + chartConfig: CreateComponentType, | |
14 | + useChartEditStore: ChartEditStoreType, | |
15 | + param: { [T: string]: any }, | |
16 | + interactEventOn: string | |
17 | 17 | ) => { |
18 | - const chartEditStore = useChartEditStore() | |
19 | - const {interactEvents} = chartConfig.events | |
20 | - const fnOnEvent = interactEvents.filter(item => { | |
21 | - return item.interactOn === interactEventOn | |
22 | - }) | |
18 | + const chartEditStore = useChartEditStore() | |
19 | + const { interactEvents } = chartConfig.events | |
20 | + const fnOnEvent = interactEvents.filter(item => { | |
21 | + return item.interactOn === interactEventOn | |
22 | + }) | |
23 | 23 | |
24 | - if (fnOnEvent.length === 0) return | |
25 | - fnOnEvent.forEach(async (item) => { | |
26 | - const index = chartEditStore.fetchTargetIndex(item.interactComponentId) | |
27 | - if (index === -1) return | |
28 | - //支持分组 | |
29 | - const target = chartEditStore.getComponentList?.reduce((prev: Array<CreateComponentType | CreateComponentGroupType>, acc) => { | |
30 | - acc?.isGroup ? (prev = [...(acc?.groupList as CreateComponentGroupType[])]) : prev?.push(acc) | |
31 | - return prev | |
32 | - }, []) | |
33 | - target?.forEach((targetItem)=>{ | |
34 | - if(targetItem.id!==chartConfig.id){ | |
35 | - const {Params, Header} = toRefs(targetItem.request.requestParams) | |
24 | + if (fnOnEvent.length === 0) return | |
25 | + fnOnEvent.forEach(async item => { | |
26 | + const index = chartEditStore.fetchTargetIndex(item.interactComponentId) | |
27 | + if (index === -1) return | |
28 | + //支持分组 | |
29 | + /** | |
30 | + * 修复多个分组,然后下拉框联动,会影响另一个组件 | |
31 | + */ | |
32 | + chartEditStore.getComponentList.forEach(targetItem => { | |
33 | + if (targetItem.isGroup) { | |
34 | + targetItem.groupList?.forEach(groupItem => { | |
35 | + if (groupItem.id === item.interactComponentId) { | |
36 | + const { Params, Header } = toRefs(groupItem.request.requestParams) | |
36 | 37 | Object.keys(item.interactFn).forEach(key => { |
37 | - if (Params.value[key]) { | |
38 | + if (Params.value[key]) { | |
38 | 39 | Params.value[key] = param[item.interactFn[key]] |
39 | - } | |
40 | - if (Header.value[key]) { | |
40 | + } | |
41 | + if (Header.value[key]) { | |
41 | 42 | Header.value[key] = param[item.interactFn[key]] |
42 | - } | |
43 | + } | |
43 | 44 | }) |
44 | - } | |
45 | + } | |
45 | 46 | }) |
47 | + } else { | |
48 | + if (targetItem.id === item.interactComponentId) { | |
49 | + const { Params, Header } = toRefs(targetItem.request.requestParams) | |
50 | + Object.keys(item.interactFn).forEach(key => { | |
51 | + if (Params.value[key]) { | |
52 | + Params.value[key] = param[item.interactFn[key]] | |
53 | + } | |
54 | + if (Header.value[key]) { | |
55 | + Header.value[key] = param[item.interactFn[key]] | |
56 | + } | |
57 | + }) | |
58 | + } | |
59 | + } | |
60 | + // | |
46 | 61 | }) |
62 | + }) | |
47 | 63 | } |
48 | 64 | |
49 | 65 | // 联动事件触发的 type 变更时,清除当前绑定内容 | ... | ... |
1 | 1 | /** |
2 | 2 | * 重写select下拉框联动 |
3 | 3 | */ |
4 | -import {toRefs} from 'vue' | |
5 | -import {CreateComponentGroupType, CreateComponentType} from '@/packages/index.d' | |
6 | -import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore' | |
4 | +import { toRefs } from 'vue' | |
5 | +import { CreateComponentType } from '@/packages/index.d' | |
6 | +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | |
7 | 7 | |
8 | 8 | // 获取类型 |
9 | 9 | type ChartEditStoreType = typeof useChartEditStore |
10 | 10 | |
11 | 11 | // Params 参数修改触发 api 更新图表请求 |
12 | 12 | export const useChartInteract = ( |
13 | - chartConfig: CreateComponentType, | |
14 | - useChartEditStore: ChartEditStoreType, | |
15 | - param: { [T: string]: any }, | |
16 | - interactEventOn: string | |
13 | + chartConfig: CreateComponentType, | |
14 | + useChartEditStore: ChartEditStoreType, | |
15 | + param: { [T: string]: any }, | |
16 | + interactEventOn: string | |
17 | 17 | ) => { |
18 | - const chartEditStore = useChartEditStore() | |
19 | - const {interactEvents} = chartConfig.events | |
20 | - const fnOnEvent = interactEvents.filter(item => { | |
21 | - return item.interactOn === interactEventOn | |
22 | - }) | |
23 | - if (fnOnEvent.length === 0) return | |
24 | - fnOnEvent.forEach((item) => { | |
25 | - const index = chartEditStore.fetchTargetIndex(item.interactComponentId) | |
26 | - if (index === -1) return | |
27 | - //支持分组 | |
28 | - const target = chartEditStore.getComponentList?.reduce((prev: Array<CreateComponentType | CreateComponentGroupType>, acc) => { | |
29 | - acc?.isGroup ? (prev = [...(acc?.groupList as CreateComponentGroupType[])]) : prev?.push(acc) | |
30 | - return prev | |
31 | - }, []) | |
32 | - target?.forEach((targetItem)=>{ | |
33 | - if(targetItem.id!==chartConfig.id){ | |
34 | - const {Params, Header} = toRefs(targetItem.request.requestParams) | |
18 | + const chartEditStore = useChartEditStore() | |
19 | + const { interactEvents } = chartConfig.events | |
20 | + const fnOnEvent = interactEvents.filter(item => { | |
21 | + return item.interactOn === interactEventOn | |
22 | + }) | |
23 | + if (fnOnEvent.length === 0) return | |
24 | + fnOnEvent.forEach(item => { | |
25 | + const index = chartEditStore.fetchTargetIndex(item.interactComponentId) | |
26 | + if (index === -1) return | |
27 | + //联动支持分组 | |
28 | + /** | |
29 | + * 修复多个分组,然后下拉框联动,会影响另一个组件 | |
30 | + */ | |
31 | + chartEditStore.getComponentList.forEach(targetItem => { | |
32 | + if (targetItem.isGroup) { | |
33 | + targetItem.groupList?.forEach(groupItem => { | |
34 | + if (groupItem.id === item.interactComponentId) { | |
35 | + const { Params, Header } = toRefs(groupItem.request.requestParams) | |
35 | 36 | Object.keys(item.interactFn).forEach(key => { |
36 | - if (Params.value[key]) { | |
37 | + if (Params.value[key]) { | |
37 | 38 | Params.value[key] = param[item.interactFn[key]] |
38 | - } | |
39 | - if (Header.value[key]) { | |
39 | + } | |
40 | + if (Header.value[key]) { | |
40 | 41 | Header.value[key] = param[item.interactFn[key]] |
41 | - } | |
42 | + } | |
42 | 43 | }) |
43 | - } | |
44 | + } | |
44 | 45 | }) |
46 | + } else { | |
47 | + if (targetItem.id === item.interactComponentId) { | |
48 | + const { Params, Header } = toRefs(targetItem.request.requestParams) | |
49 | + Object.keys(item.interactFn).forEach(key => { | |
50 | + if (Params.value[key]) { | |
51 | + Params.value[key] = param[item.interactFn[key]] | |
52 | + } | |
53 | + if (Header.value[key]) { | |
54 | + Header.value[key] = param[item.interactFn[key]] | |
55 | + } | |
56 | + }) | |
57 | + } | |
58 | + } | |
59 | + // | |
45 | 60 | }) |
61 | + }) | |
46 | 62 | } |
47 | 63 | |
48 | 64 | // 联动事件触发的 type 变更时,清除当前绑定内容 | ... | ... |
... | ... | @@ -34,7 +34,7 @@ import { useFullScreen } from '../../utls/fullScreen' |
34 | 34 | import cloneDeep from 'lodash/cloneDeep' |
35 | 35 | import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook' |
36 | 36 | import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d' |
37 | -import {CreateComponentGroupType, CreateComponentType} from '@/packages/index.d' | |
37 | +import { CreateComponentGroupType, CreateComponentType } from '@/packages/index.d' | |
38 | 38 | |
39 | 39 | const props = defineProps({ |
40 | 40 | themeSetting: { |
... | ... | @@ -198,7 +198,7 @@ watch( |
198 | 198 | ) |
199 | 199 | |
200 | 200 | //fix 修复v-chart图表绑定联动组件视图不更新问题 |
201 | -const updateVChart =async (newData:SocketReceiveMessageType) => { | |
201 | +const updateVChart = async (newData: SocketReceiveMessageType) => { | |
202 | 202 | //区分是普通请求还是ws请求 |
203 | 203 | if (!isObject(newData) || !('dimensions' in newData)) { |
204 | 204 | const { data } = newData |
... | ... | @@ -210,12 +210,12 @@ const updateVChart =async (newData:SocketReceiveMessageType) => { |
210 | 210 | } |
211 | 211 | }) |
212 | 212 | } else { |
213 | - //异步更新,同步更新会造成联动组件控制,图表不及时更新 | |
214 | - await nextTick().then(()=>{ | |
213 | + //异步更新,同步更新会造成联动组件控制,图表不及时更新 | |
214 | + await nextTick().then(() => { | |
215 | 215 | vChartRef.value?.setOption( |
216 | 216 | { |
217 | 217 | ...option.value, |
218 | - dataset: newData | |
218 | + dataset: newData | |
219 | 219 | }, |
220 | 220 | { |
221 | 221 | notMerge: true |
... | ... | @@ -226,15 +226,24 @@ const updateVChart =async (newData:SocketReceiveMessageType) => { |
226 | 226 | } |
227 | 227 | |
228 | 228 | const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => { |
229 | - const target = chartEditStore.getComponentList?.reduce((prev: Array<CreateComponentType | CreateComponentGroupType>, acc) => { | |
230 | - acc?.isGroup ? (prev = [...(acc?.groupList as CreateComponentGroupType[])]) : prev?.push(acc) | |
231 | - return prev | |
232 | - }, []) | |
233 | - target?.forEach((targetItem)=>{ | |
234 | - if(targetItem.id === props.chartConfig.id){ | |
235 | - targetItem.option.dataset = newData | |
229 | + //联动支持分组 | |
230 | + /** | |
231 | + * 修复多个分组,然后下拉框联动,会影响另一个组件 | |
232 | + */ | |
233 | + chartEditStore.getComponentList.forEach(targetItem => { | |
234 | + if (targetItem.isGroup) { | |
235 | + targetItem.groupList?.forEach(groupItem => { | |
236 | + if (groupItem.id === props.chartConfig.id) { | |
237 | + groupItem.option.dataset = newData | |
238 | + } | |
239 | + }) | |
240 | + } else { | |
241 | + if (targetItem.id === props.chartConfig.id) { | |
242 | + targetItem.option.dataset = newData | |
236 | 243 | } |
244 | + } | |
237 | 245 | }) |
246 | + // | |
238 | 247 | updateVChart(newData) |
239 | 248 | }) |
240 | 249 | ... | ... |
... | ... | @@ -225,15 +225,24 @@ const updateVChart =async (newData:SocketReceiveMessageType) => { |
225 | 225 | } |
226 | 226 | |
227 | 227 | const {vChartRef} = useChartDataFetch(props.chartConfig, useChartEditStore, (newData) => { |
228 | - const target = chartEditStore.getComponentList?.reduce((prev: Array<CreateComponentType | CreateComponentGroupType>, acc) => { | |
229 | - acc?.isGroup ? (prev = [...(acc?.groupList as CreateComponentGroupType[])]) : prev?.push(acc) | |
230 | - return prev | |
231 | - }, []) | |
232 | - target?.forEach((targetItem)=>{ | |
233 | - if(targetItem.id === props.chartConfig.id){ | |
234 | - targetItem.option.dataset = newData | |
228 | + //联动支持分组 | |
229 | + /** | |
230 | + * 修复多个分组,然后下拉框联动,会影响另一个组件 | |
231 | + */ | |
232 | + chartEditStore.getComponentList.forEach(targetItem => { | |
233 | + if (targetItem.isGroup) { | |
234 | + targetItem.groupList?.forEach(groupItem => { | |
235 | + if (groupItem.id === props.chartConfig.id) { | |
236 | + groupItem.option.dataset = newData | |
237 | + } | |
238 | + }) | |
239 | + } else { | |
240 | + if (targetItem.id === props.chartConfig.id) { | |
241 | + targetItem.option.dataset = newData | |
235 | 242 | } |
243 | + } | |
236 | 244 | }) |
245 | + // | |
237 | 246 | updateVChart(newData) |
238 | 247 | }) |
239 | 248 | ... | ... |
... | ... | @@ -255,15 +255,24 @@ const updateVChart =async (newData:SocketReceiveMessageType) => { |
255 | 255 | } |
256 | 256 | |
257 | 257 | const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => { |
258 | - const target = chartEditStore.getComponentList?.reduce((prev: Array<CreateComponentType | CreateComponentGroupType>, acc) => { | |
259 | - acc?.isGroup ? (prev = [...(acc?.groupList as CreateComponentGroupType[])]) : prev?.push(acc) | |
260 | - return prev | |
261 | - }, []) | |
262 | - target?.forEach((targetItem)=>{ | |
263 | - if(targetItem.id === props.chartConfig.id){ | |
264 | - targetItem.option.dataset = newData | |
258 | + //联动支持分组 | |
259 | + /** | |
260 | + * 修复多个分组,然后下拉框联动,会影响另一个组件 | |
261 | + */ | |
262 | + chartEditStore.getComponentList.forEach(targetItem => { | |
263 | + if (targetItem.isGroup) { | |
264 | + targetItem.groupList?.forEach(groupItem => { | |
265 | + if (groupItem.id === props.chartConfig.id) { | |
266 | + groupItem.option.dataset = newData | |
267 | + } | |
268 | + }) | |
269 | + } else { | |
270 | + if (targetItem.id === props.chartConfig.id) { | |
271 | + targetItem.option.dataset = newData | |
265 | 272 | } |
273 | + } | |
266 | 274 | }) |
275 | + // | |
267 | 276 | updateVChart(newData) |
268 | 277 | }) |
269 | 278 | ... | ... |
... | ... | @@ -78,6 +78,10 @@ export const compatibleConfig = [ |
78 | 78 | }, |
79 | 79 | { |
80 | 80 | key: 'OverrideTextCommon', //自定义文字 |
81 | + oldChartKey: 'ExternalVCOverrideTextCommon', | |
82 | + newChartKey: 'ExternalVCOverrideTextCommon', | |
83 | + oldConKey: 'ExternalVCCOverrideTextCommon', | |
84 | + newConKey: 'ExternalVCCOverrideTextCommon', | |
81 | 85 | oldPackage: 'Informations', //之前的包名 |
82 | 86 | newPackage: 'Informations', //现在的包名 |
83 | 87 | oldCategory: 'Mores', //之前的目录 |
... | ... | @@ -106,6 +110,10 @@ export const compatibleConfig = [ |
106 | 110 | { |
107 | 111 | key: 'LeftCenterRightHead', //大标题1 |
108 | 112 | newKey: 'Headline1', //新的key |
113 | + oldChartKey: 'ExternalVCLeftCenterRightHead', | |
114 | + newChartKey: 'ExternalVCHeadline1', | |
115 | + oldConKey: 'ExternalVCCLeftCenterRightHead', | |
116 | + newConKey: 'ExternalVCCHeadline1', | |
109 | 117 | oldPackage: 'Composes', //之前的包名 |
110 | 118 | newPackage: 'Decorates', //现在的包名 |
111 | 119 | oldCategory: 'HeadCombinations', //之前的目录 |
... | ... | @@ -116,6 +124,10 @@ export const compatibleConfig = [ |
116 | 124 | { |
117 | 125 | key: 'LeftCenterRightHeadAnimat', //大标题2 |
118 | 126 | newKey: 'Headline2', //新的key |
127 | + oldChartKey: 'ExternalVCLeftCenterRightHeadAnimat', | |
128 | + newChartKey: 'ExternalVCHeadline2', | |
129 | + oldConKey: 'ExternalVCCLeftCenterRightHeadAnimat', | |
130 | + newConKey: 'ExternalVCCHeadline2', | |
119 | 131 | oldPackage: 'Composes', //之前的包名 |
120 | 132 | newPackage: 'Decorates', //现在的包名 |
121 | 133 | oldCategory: 'HeadCombinations', //之前的目录 |
... | ... | @@ -126,6 +138,10 @@ export const compatibleConfig = [ |
126 | 138 | { |
127 | 139 | key: 'Title1', //小标题1 |
128 | 140 | newKey: 'Subtitle1', //新的key |
141 | + oldChartKey: 'ExternalVCTitle1', | |
142 | + newChartKey: 'ExternalVCSubtitle1', | |
143 | + oldConKey: 'ExternalVCCTitle1', | |
144 | + newConKey: 'ExternalVCCSubtitle1', | |
129 | 145 | oldPackage: 'Composes', //之前的包名 |
130 | 146 | newPackage: 'Decorates', //现在的包名 |
131 | 147 | oldCategory: 'Mores', //之前的目录 |
... | ... | @@ -135,6 +151,10 @@ export const compatibleConfig = [ |
135 | 151 | }, |
136 | 152 | { |
137 | 153 | key: 'Title2', //小标题2 |
154 | + oldChartKey: 'ExternalVCTitle2', | |
155 | + newChartKey: 'ExternalVCSubtitle2', | |
156 | + oldConKey: 'ExternalVCCTitle2', | |
157 | + newConKey: 'ExternalVCCSubtitle2', | |
138 | 158 | newKey: 'Subtitle2', //新的key |
139 | 159 | oldPackage: 'Composes', //之前的包名 |
140 | 160 | newPackage: 'Decorates', //现在的包名 |
... | ... | @@ -145,6 +165,10 @@ export const compatibleConfig = [ |
145 | 165 | }, |
146 | 166 | { |
147 | 167 | key: 'Title3', //小标题3 |
168 | + oldChartKey: 'ExternalVCTitle3', | |
169 | + newChartKey: 'ExternalVCSubtitle3', | |
170 | + oldConKey: 'ExternalVCCTitle3', | |
171 | + newConKey: 'ExternalVCCSubtitle3', | |
148 | 172 | newKey: 'Subtitle3', //新的key |
149 | 173 | oldPackage: 'Composes', //之前的包名 |
150 | 174 | newPackage: 'Decorates', //现在的包名 |
... | ... | @@ -152,6 +176,15 @@ export const compatibleConfig = [ |
152 | 176 | newCategory: 'Subtitle', //新的目录 |
153 | 177 | oldCategoryName: '更多', //之前的目录名 |
154 | 178 | newCategoryName: '小标题' //新的目录名 |
179 | + }, | |
180 | + { | |
181 | + key: 'OverrideImage', //自定义图片 | |
182 | + oldPackage: 'Informations', //之前的包名 | |
183 | + newPackage: 'Informations', //现在的包名 | |
184 | + oldCategory: 'Mores', //之前的目录 | |
185 | + newCategory: 'Mores', //新的目录 | |
186 | + oldCategoryName: '更多', //之前的目录名 | |
187 | + newCategoryName: '更多' //新的目录名 | |
155 | 188 | } |
156 | 189 | ] |
157 | 190 | // | ... | ... |
... | ... | @@ -14,7 +14,7 @@ const getChartConfigFile = async (path: string) => { |
14 | 14 | |
15 | 15 | export const createComponent = async (configType: ConfigType) => { |
16 | 16 | // eslint-disable-next-line prefer-const |
17 | - let { key, chartKey, category, package: packageName, redirectComponent, categoryName } = configType | |
17 | + let { key, chartKey, category, package: packageName, redirectComponent, categoryName , conKey} = configType | |
18 | 18 | // redirectComponent 是给图片组件库和图标组件库使用的 |
19 | 19 | if (redirectComponent) { |
20 | 20 | const [packageName, categoryName, keyName] = redirectComponent.split('/') |
... | ... | @@ -25,13 +25,17 @@ export const createComponent = async (configType: ConfigType) => { |
25 | 25 | /** |
26 | 26 | * 兼容之前导入错误的补丁 |
27 | 27 | */ |
28 | + const includeOldTitleKeys=['LeftCenterRightHead','LeftCenterRightHeadAnimat','Title1','Title2','Title3'] | |
28 | 29 | compatibleConfig?.forEach(item => { |
29 | 30 | if (item?.key === key) { |
30 | - key = item?.key as string | |
31 | + key = includeOldTitleKeys.includes(item?.key)?item?.newKey:item?.key as any | |
31 | 32 | packageName = item?.newPackage as string |
32 | 33 | category = item?.newCategory as string |
33 | 34 | // eslint-disable-next-line @typescript-eslint/no-unused-vars |
34 | 35 | categoryName = item?.newCategoryName as string |
36 | + chartKey = includeOldTitleKeys.includes(item?.key)?item?.newChartKey:chartKey as any | |
37 | + // eslint-disable-next-line @typescript-eslint/no-unused-vars | |
38 | + conKey = includeOldTitleKeys.includes(item?.key)?item?.newConKey:conKey as any | |
35 | 39 | } |
36 | 40 | }) |
37 | 41 | // | ... | ... |