简柏林 / thingskit-view · Commits

Commit 3da6c12a7920d0f7da552ac9c45fb8b9be27e45b

Authored by fengwotao
1 parent fb1947dd

fix(src/packages/): 修复组件联动分组，然后点击一个会影响另一个组件问题

Inline Side-by-side
Showing 5 changed files with 143 additions and 84 deletions
1 /** 1 /**
2 * 重写select下拉框联动 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 type ChartEditStoreType = typeof useChartEditStore 9 type ChartEditStoreType = typeof useChartEditStore
10 10
11 // Params 参数修改触发 api 更新图表请求 11 // Params 参数修改触发 api 更新图表请求
12 export const useChartInteract = ( 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 Object.keys(item.interactFn).forEach(key => { 37 Object.keys(item.interactFn).forEach(key => {
37 - if (Params.value[key]) { 38 + if (Params.value[key]) {
38 Params.value[key] = param[item.interactFn[key]] 39 Params.value[key] = param[item.interactFn[key]]
39 - }  
40 - if (Header.value[key]) { 40 + }
  41 + if (Header.value[key]) {
41 Header.value[key] = param[item.interactFn[key]] 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 // 联动事件触发的 type 变更时，清除当前绑定内容 65 // 联动事件触发的 type 变更时，清除当前绑定内容
1 /** 1 /**
2 * 重写select下拉框联动 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 type ChartEditStoreType = typeof useChartEditStore 9 type ChartEditStoreType = typeof useChartEditStore
10 10
11 // Params 参数修改触发 api 更新图表请求 11 // Params 参数修改触发 api 更新图表请求
12 export const useChartInteract = ( 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 Object.keys(item.interactFn).forEach(key => { 36 Object.keys(item.interactFn).forEach(key => {
36 - if (Params.value[key]) { 37 + if (Params.value[key]) {
37 Params.value[key] = param[item.interactFn[key]] 38 Params.value[key] = param[item.interactFn[key]]
38 - }  
39 - if (Header.value[key]) { 39 + }
  40 + if (Header.value[key]) {
40 Header.value[key] = param[item.interactFn[key]] 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 // 联动事件触发的 type 变更时，清除当前绑定内容 64 // 联动事件触发的 type 变更时，清除当前绑定内容
@@ -34,7 +34,7 @@ import { useFullScreen } from '../../utls/fullScreen' @@ -34,7 +34,7 @@ import { useFullScreen } from '../../utls/fullScreen'
34 import cloneDeep from 'lodash/cloneDeep' 34 import cloneDeep from 'lodash/cloneDeep'
35 import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook' 35 import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
36 import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d' 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 const props = defineProps({ 39 const props = defineProps({
40 themeSetting: { 40 themeSetting: {
@@ -198,7 +198,7 @@ watch( @@ -198,7 +198,7 @@ watch(
198 ) 198 )
199 199
200 //fix 修复v-chart图表绑定联动组件视图不更新问题 200 //fix 修复v-chart图表绑定联动组件视图不更新问题
201 -const updateVChart =async (newData:SocketReceiveMessageType) => { 201 +const updateVChart = async (newData: SocketReceiveMessageType) => {
202 //区分是普通请求还是ws请求 202 //区分是普通请求还是ws请求
203 if (!isObject(newData) || !('dimensions' in newData)) { 203 if (!isObject(newData) || !('dimensions' in newData)) {
204 const { data } = newData 204 const { data } = newData
@@ -210,12 +210,12 @@ const updateVChart =async (newData:SocketReceiveMessageType) => { @@ -210,12 +210,12 @@ const updateVChart =async (newData:SocketReceiveMessageType) => {
210 } 210 }
211 }) 211 })
212 } else { 212 } else {
213 - //异步更新，同步更新会造成联动组件控制，图表不及时更新  
214 - await nextTick().then(()=>{ 213 + //异步更新，同步更新会造成联动组件控制，图表不及时更新
  214 + await nextTick().then(() => {
215 vChartRef.value?.setOption( 215 vChartRef.value?.setOption(
216 { 216 {
217 ...option.value, 217 ...option.value,
218 - dataset: newData 218 + dataset: newData
219 }, 219 },
220 { 220 {
221 notMerge: true 221 notMerge: true
@@ -226,15 +226,24 @@ const updateVChart =async (newData:SocketReceiveMessageType) => { @@ -226,15 +226,24 @@ const updateVChart =async (newData:SocketReceiveMessageType) => {
226 } 226 }
227 227
228 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => { 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 updateVChart(newData) 247 updateVChart(newData)
239 }) 248 })
240 249
@@ -225,15 +225,24 @@ const updateVChart =async (newData:SocketReceiveMessageType) => { @@ -225,15 +225,24 @@ const updateVChart =async (newData:SocketReceiveMessageType) => {
225 } 225 }
226 226
227 const {vChartRef} = useChartDataFetch(props.chartConfig, useChartEditStore, (newData) => { 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 updateVChart(newData) 246 updateVChart(newData)
238 }) 247 })
239 248
@@ -255,15 +255,24 @@ const updateVChart =async (newData:SocketReceiveMessageType) => { @@ -255,15 +255,24 @@ const updateVChart =async (newData:SocketReceiveMessageType) => {
255 } 255 }
256 256
257 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => { 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 updateVChart(newData) 276 updateVChart(newData)
268 }) 277 })
269 278