简柏林 / thingskit-front · Commits

Commit 9156c53a894f6206f9298171fe4a93a8ae87624e

Authored by ww
1 parent 4a16e53a

refactof: visual board select component

Inline Side-by-side
Showing 10 changed files with 101 additions and 152 deletions
@@ -22,6 +22,7 @@ @@ -22,6 +22,7 @@
22 } from '../../detail/config/util'; 22 } from '../../detail/config/util';
23 import { Tooltip } from 'ant-design-vue'; 23 import { Tooltip } from 'ant-design-vue';
24 import { useThrottleFn } from '@vueuse/shared'; 24 import { useThrottleFn } from '@vueuse/shared';
  25 + import { buildUUID } from '/@/utils/uuid';
25 26
26 const props = defineProps({ 27 const props = defineProps({
27 add: { 28 add: {
@@ -33,7 +34,7 @@ @@ -33,7 +34,7 @@
33 }, 34 },
34 value: { 35 value: {
35 type: Object as PropType<DashBoardValue>, 36 type: Object as PropType<DashBoardValue>,
36 - default: () => ({}), 37 + default: () => ({ id: buildUUID() }),
37 }, 38 },
38 radio: { 39 radio: {
39 type: Object as PropType<RadioRecord>, 40 type: Object as PropType<RadioRecord>,
@@ -16,12 +16,18 @@ @@ -16,12 +16,18 @@
16 } from '../../detail/config/util'; 16 } from '../../detail/config/util';
17 import { isNaN } from 'lodash'; 17 import { isNaN } from 'lodash';
18 18
19 - const props = defineProps<{  
20 - layout: DigitalDashBoardLayout;  
21 - value: DigitalDashBoardValue;  
22 - radio?: RadioRecord;  
23 - random?: boolean;  
24 - }>(); 19 + const props = withDefaults(
  20 + defineProps<{
  21 + layout?: DigitalDashBoardLayout;
  22 + value?: DigitalDashBoardValue;
  23 + radio?: RadioRecord;
  24 + random?: boolean;
  25 + }>(),
  26 + {
  27 + value: () => ({}),
  28 + layout: () => ({ max: 5, keepNumber: 2 }),
  29 + }
  30 + );
25 31
26 const changeValue = ref(0); 32 const changeValue = ref(0);
27 33
@@ -188,11 +194,12 @@ @@ -188,11 +194,12 @@
188 <style scoped lang="less"> 194 <style scoped lang="less">
189 .digital-wrapper__int { 195 .digital-wrapper__int {
190 border-radius: 1px; 196 border-radius: 1px;
191 - box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);  
192 - background: url('/@/assets/images/digital-wrapper-bg-int.png') 0px -1px no-repeat; 197 + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.7);
  198 + background: url('/@/assets/images/digital-wrapper-bg-int.png') 0 -1px no-repeat;
193 padding: 5px; 199 padding: 5px;
194 background-size: 100% 100%; 200 background-size: 100% 100%;
195 } 201 }
  202 +
196 .digital-text_int { 203 .digital-text_int {
197 display: inline-block; 204 display: inline-block;
198 overflow-wrap: break-word; 205 overflow-wrap: break-word;
@@ -203,11 +210,12 @@ @@ -203,11 +210,12 @@
203 210
204 .digital-wrapper__float { 211 .digital-wrapper__float {
205 border-radius: 1px; 212 border-radius: 1px;
206 - box-shadow: inset 0px 1px 3px 0px rgba(112, 22, 15, 1);  
207 - background: url('/@/assets/images/digital-wrapper-bg-float.png') 0px -1px no-repeat; 213 + box-shadow: inset 0 1px 3px 0 rgba(112, 22, 15, 1);
  214 + background: url('/@/assets/images/digital-wrapper-bg-float.png') 0 -1px no-repeat;
208 padding: 5px; 215 padding: 5px;
209 background-size: 100% 100%; 216 background-size: 100% 100%;
210 } 217 }
  218 +
211 .digital-text_float { 219 .digital-text_float {
212 display: inline-block; 220 display: inline-block;
213 overflow-wrap: break-word; 221 overflow-wrap: break-word;
@@ -94,7 +94,6 @@ export const instrumentComponent1 = (params?: Partial<ComponentInfo>): EChartsOp @@ -94,7 +94,6 @@ export const instrumentComponent1 = (params?: Partial<ComponentInfo>): EChartsOp
94 axisLabel: { 94 axisLabel: {
95 distance: 0, 95 distance: 0,
96 color: '#999', 96 color: '#999',
97 - // fontSize: 20,  
98 }, 97 },
99 anchor: { 98 anchor: {
100 show: false, 99 show: false,
1 import { EChartsOption } from 'echarts'; 1 import { EChartsOption } from 'echarts';
2 -import { Component } from 'vue';  
3 -import { WidgetComponentType } from '../../detail/config/visualOptions';  
4 -import {  
5 - Instrument1DefaultConfig,  
6 - Instrument2DefaultConfig,  
7 - instrumentComponent1,  
8 - instrumentComponent2,  
9 - InstrumentComponentType,  
10 -} from './dashBoardComponent.config';  
11 -import DashBoardComponent from './DashBoardComponent.vue';  
12 -import DigitalDashBoard from './DigitalDashBoard.vue';  
13 -import { buildUUID } from '/@/utils/uuid'; 2 +import { InstrumentComponentType } from './dashBoardComponent.config';
14 3
15 export interface DashboardComponentLayout { 4 export interface DashboardComponentLayout {
16 chartOption: EChartsOption; 5 chartOption: EChartsOption;
17 componentType: InstrumentComponentType; 6 componentType: InstrumentComponentType;
18 } 7 }
19 -  
20 -interface InstrumentComponentConfig {  
21 - id: WidgetComponentType;  
22 - layout: DashboardComponentLayout;  
23 - component: Component;  
24 - value: Recordable;  
25 -}  
26 -  
27 -export const instrumentComponentConfig: InstrumentComponentConfig[] = [  
28 - {  
29 - id: 'instrument-component-1',  
30 - layout: {  
31 - chartOption: instrumentComponent1(Instrument1DefaultConfig),  
32 - componentType: 'instrument-component-1',  
33 - },  
34 - component: DashBoardComponent,  
35 - value: { id: buildUUID() },  
36 - },  
37 - {  
38 - id: 'instrument-component-2',  
39 - layout: {  
40 - chartOption: instrumentComponent2(Instrument2DefaultConfig),  
41 - componentType: 'instrument-component-2',  
42 - },  
43 - component: DashBoardComponent,  
44 - value: { id: buildUUID() },  
45 - },  
46 - {  
47 - id: 'digital-dashboard-component',  
48 - layout: {},  
49 - component: DigitalDashBoard,  
50 - value: {},  
51 - },  
52 -];  
1 import PictureComponent from './PictureComponent.vue'; 1 import PictureComponent from './PictureComponent.vue';
2 2
3 -import { PictureComponentType } from './pictureComponent.config';  
4 -import { Component } from 'vue';  
5 -  
6 -interface PictureComponentList {  
7 - id: PictureComponentType;  
8 - component: Component;  
9 -}  
10 -  
11 -const pictureComponentList: PictureComponentList[] = [  
12 - {  
13 - id: 'picture-component-1',  
14 - component: PictureComponent,  
15 - },  
16 -];  
17 -  
18 -export { PictureComponent, pictureComponentList }; 3 +export { PictureComponent };
@@ -20,7 +20,6 @@ export interface TextComponentValue { @@ -20,7 +20,6 @@ export interface TextComponentValue {
20 20
21 export type TextComponentType = 21 export type TextComponentType =
22 | 'text-component-1' 22 | 'text-component-1'
23 - | 'text-component-2'  
24 | 'text-component-3' 23 | 'text-component-3'
25 | 'text-component-4' 24 | 'text-component-4'
26 | 'text-component-5'; 25 | 'text-component-5';
@@ -32,10 +31,6 @@ export const TextComponent1Config: TextComponentDefault = { @@ -32,10 +31,6 @@ export const TextComponent1Config: TextComponentDefault = {
32 base: true, 31 base: true,
33 }; 32 };
34 33
35 -export const TextComponent2Config: TextComponentDefault = {  
36 - id: 'text-component-2',  
37 - base: false,  
38 -};  
39 export const TextComponent3Config: TextComponentDefault = { 34 export const TextComponent3Config: TextComponentDefault = {
40 id: 'text-component-3', 35 id: 'text-component-3',
41 base: false, 36 base: false,
@@ -62,17 +57,9 @@ export const TextComponentDefaultConfig: Partial<ComponentInfo> = { @@ -62,17 +57,9 @@ export const TextComponentDefaultConfig: Partial<ComponentInfo> = {
62 icon: 'shuiwen', 57 icon: 'shuiwen',
63 }; 58 };
64 59
65 -export const textComponentConfig: TextComponentDefault[] = [  
66 - TextComponent1Config,  
67 - // TextComponent2Config,  
68 - TextComponent3Config,  
69 - TextComponent4Config,  
70 - TextComponent5Config,  
71 -];  
72 -  
73 export const transformTextComponentConfig = ( 60 export const transformTextComponentConfig = (
74 config: TextComponentDefault, 61 config: TextComponentDefault,
75 - record: DataComponentRecord, 62 + _record: DataComponentRecord,
76 dataSourceRecord: DataSource 63 dataSourceRecord: DataSource
77 ) => { 64 ) => {
78 return { 65 return {
1 -import { Component } from 'vue';  
2 -import IndicatorLight from '../cpns/IndicatorLight.vue';  
3 -  
4 -export const dashboardComponentMap = new Map<string, Component>();  
5 -  
6 -dashboardComponentMap.set('IndicatorLight', IndicatorLight);  
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { Tabs, List } from 'ant-design-vue'; 2 import { Tabs, List } from 'ant-design-vue';
3 import VisualWidgetSelect from './VisualWidgetSelect.vue'; 3 import VisualWidgetSelect from './VisualWidgetSelect.vue';
4 - import TextComponent from '../../components/TextComponent/TextComponent.vue';  
5 - import { textComponentConfig } from '../../components/TextComponent/config';  
6 - import { instrumentComponentConfig } from '../../components/InstrumentComponent';  
7 - import { pictureComponentList } from '../../components/PictureComponent';  
8 - import { getComponentDefaultConfig } from '../config/help'; 4 + import {
  5 + FrontComponentCategory,
  6 + FrontComponentCategoryName,
  7 + getComponentDefaultConfig,
  8 + } from '../config/help';
9 import { WidgetComponentType } from '../config/visualOptions'; 9 import { WidgetComponentType } from '../config/visualOptions';
  10 + import { frontComponentMap } from '../config/help';
  11 + import { computed } from 'vue';
  12 +
  13 + interface DataSource {
  14 + category: string;
  15 + categoryName: string;
  16 + list: Recordable[];
  17 + }
10 const props = defineProps<{ 18 const props = defineProps<{
11 value: string; 19 value: string;
12 }>(); 20 }>();
@@ -14,6 +22,24 @@ @@ -14,6 +22,24 @@
14 22
15 const grid = { gutter: 10, column: 1, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 }; 23 const grid = { gutter: 10, column: 1, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 };
16 24
  25 + const getDataSource = computed(() => {
  26 + const _dataSource = Array.from(frontComponentMap.values());
  27 + const category = new Map<FrontComponentCategory, DataSource>();
  28 + for (const item of _dataSource) {
  29 + if (category.has(item.ComponentCategory)) {
  30 + const value = category.get(item.ComponentCategory)!;
  31 + value.list.push(item);
  32 + continue;
  33 + }
  34 + category.set(item.ComponentCategory, {
  35 + category: item.ComponentCategory,
  36 + categoryName: FrontComponentCategoryName[item.ComponentCategory],
  37 + list: [item],
  38 + });
  39 + }
  40 + return Array.from(category.values());
  41 + });
  42 +
17 const handleCheck = (checked: WidgetComponentType) => { 43 const handleCheck = (checked: WidgetComponentType) => {
18 const defaultConfig = getComponentDefaultConfig(checked); 44 const defaultConfig = getComponentDefaultConfig(checked);
19 emit('update:value', checked); 45 emit('update:value', checked);
@@ -24,51 +50,20 @@ @@ -24,51 +50,20 @@
24 <template> 50 <template>
25 <section> 51 <section>
26 <Tabs> 52 <Tabs>
27 - <Tabs.TabPane key="1" tab="文本组件">  
28 - <List :grid="grid" :data-source="textComponentConfig">  
29 - <template #renderItem="{ item }">  
30 - <List.Item class="!flex !justify-center">  
31 - <VisualWidgetSelect  
32 - :checked-id="props.value"  
33 - :control-id="item.id"  
34 - @change="handleCheck"  
35 - >  
36 - <TextComponent :layout="item" :value="item.value" />  
37 - </VisualWidgetSelect>  
38 - </List.Item>  
39 - </template>  
40 - </List>  
41 - </Tabs.TabPane>  
42 - <Tabs.TabPane key="2" tab="图片组件">  
43 - <List :grid="grid" :data-source="pictureComponentList">  
44 - <template #renderItem="{ item }">  
45 - <List.Item class="!flex !justify-center">  
46 - <VisualWidgetSelect  
47 - :checked-id="props.value"  
48 - :control-id="item.id"  
49 - @change="handleCheck"  
50 - >  
51 - <component :is="item.component" />  
52 - </VisualWidgetSelect>  
53 - </List.Item>  
54 - </template>  
55 - </List>  
56 - </Tabs.TabPane>  
57 - <Tabs.TabPane key="3" tab="仪表组件">  
58 - <List :grid="grid" :data-source="instrumentComponentConfig"> 53 + <Tabs.TabPane
  54 + v-for="category in getDataSource"
  55 + :key="category.category"
  56 + :tab="category.categoryName"
  57 + >
  58 + <List :grid="grid" :data-source="category.list">
59 <template #renderItem="{ item }"> 59 <template #renderItem="{ item }">
60 <List.Item class="!flex !justify-center"> 60 <List.Item class="!flex !justify-center">
61 <VisualWidgetSelect 61 <VisualWidgetSelect
62 :checked-id="props.value" 62 :checked-id="props.value"
63 - :control-id="item.id" 63 + :control-id="item.ComponentKey"
64 @change="handleCheck" 64 @change="handleCheck"
65 > 65 >
66 - <component  
67 - :is="item.component"  
68 - :random="true"  
69 - :layout="item.layout"  
70 - :value="item.value"  
71 - /> 66 + <component :is="item.Component" :random="true" :layout="item.ComponentConfig" />
72 </VisualWidgetSelect> 67 </VisualWidgetSelect>
73 </List.Item> 68 </List.Item>
74 </template> 69 </template>
@@ -2,7 +2,6 @@ import { Component } from 'vue'; @@ -2,7 +2,6 @@ import { Component } from 'vue';
2 import TextComponent from '../../components/TextComponent/TextComponent.vue'; 2 import TextComponent from '../../components/TextComponent/TextComponent.vue';
3 import { 3 import {
4 TextComponent1Config, 4 TextComponent1Config,
5 - TextComponent2Config,  
6 TextComponent3Config, 5 TextComponent3Config,
7 TextComponent4Config, 6 TextComponent4Config,
8 TextComponent5Config, 7 TextComponent5Config,
@@ -24,6 +23,23 @@ import { @@ -24,6 +23,23 @@ import {
24 } from '../../components/InstrumentComponent/dashBoardComponent.config'; 23 } from '../../components/InstrumentComponent/dashBoardComponent.config';
25 import DigitalDashBoard from '../../components/InstrumentComponent/DigitalDashBoard.vue'; 24 import DigitalDashBoard from '../../components/InstrumentComponent/DigitalDashBoard.vue';
26 import { DigitalComponentDefaultConfig } from '../../components/InstrumentComponent/digitalDashBoard.config'; 25 import { DigitalComponentDefaultConfig } from '../../components/InstrumentComponent/digitalDashBoard.config';
  26 +
  27 +export enum FrontComponentCategory {
  28 + TEXT = 'text',
  29 + PICTURE = 'picture',
  30 + INSTRUMENT = 'instrument',
  31 + CONTROL = 'control',
  32 + MAP = 'map',
  33 +}
  34 +
  35 +export enum FrontComponentCategoryName {
  36 + text = '文本组件',
  37 + picture = '图片组件',
  38 + instrument = '仪表组件',
  39 + control = '控制组件',
  40 + map = '地图组件',
  41 +}
  42 +
27 export enum FrontComponent { 43 export enum FrontComponent {
28 TEXT_COMPONENT_1 = 'text-component-1', 44 TEXT_COMPONENT_1 = 'text-component-1',
29 TEXT_COMPONENT_2 = 'text-component-2', 45 TEXT_COMPONENT_2 = 'text-component-2',
@@ -38,7 +54,9 @@ export enum FrontComponent { @@ -38,7 +54,9 @@ export enum FrontComponent {
38 54
39 export interface ComponentConfig { 55 export interface ComponentConfig {
40 Component: Component; 56 Component: Component;
41 - ComponentConfig: Recordable; 57 + ComponentKey: FrontComponent;
  58 + ComponentConfig?: Recordable;
  59 + ComponentCategory: FrontComponentCategory;
42 transformConfig: ( 60 transformConfig: (
43 ComponentConfig: Recordable, 61 ComponentConfig: Recordable,
44 record: DataComponentRecord, 62 record: DataComponentRecord,
@@ -55,66 +73,73 @@ export const frontComponentMap = new Map<WidgetComponentType, ComponentConfig>() @@ -55,66 +73,73 @@ export const frontComponentMap = new Map<WidgetComponentType, ComponentConfig>()
55 73
56 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_1, { 74 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_1, {
57 Component: TextComponent, 75 Component: TextComponent,
  76 + ComponentKey: FrontComponent.TEXT_COMPONENT_1,
58 ComponentConfig: TextComponent1Config, 77 ComponentConfig: TextComponent1Config,
59 - transformConfig: transformTextComponentConfig,  
60 -});  
61 -  
62 -frontComponentMap.set(FrontComponent.TEXT_COMPONENT_2, {  
63 - Component: TextComponent,  
64 - ComponentConfig: TextComponent2Config, 78 + ComponentCategory: FrontComponentCategory.TEXT,
65 transformConfig: transformTextComponentConfig, 79 transformConfig: transformTextComponentConfig,
66 }); 80 });
67 81
68 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_3, { 82 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_3, {
69 Component: TextComponent, 83 Component: TextComponent,
  84 + ComponentKey: FrontComponent.TEXT_COMPONENT_3,
70 ComponentConfig: TextComponent3Config, 85 ComponentConfig: TextComponent3Config,
  86 + ComponentCategory: FrontComponentCategory.TEXT,
71 transformConfig: transformTextComponentConfig, 87 transformConfig: transformTextComponentConfig,
72 }); 88 });
73 89
74 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_4, { 90 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_4, {
75 Component: TextComponent, 91 Component: TextComponent,
  92 + ComponentKey: FrontComponent.TEXT_COMPONENT_4,
76 ComponentConfig: TextComponent4Config, 93 ComponentConfig: TextComponent4Config,
  94 + ComponentCategory: FrontComponentCategory.TEXT,
77 transformConfig: transformTextComponentConfig, 95 transformConfig: transformTextComponentConfig,
78 }); 96 });
79 97
80 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_5, { 98 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_5, {
81 Component: TextComponent, 99 Component: TextComponent,
  100 + ComponentKey: FrontComponent.TEXT_COMPONENT_5,
82 ComponentConfig: TextComponent5Config, 101 ComponentConfig: TextComponent5Config,
  102 + ComponentCategory: FrontComponentCategory.TEXT,
83 transformConfig: transformTextComponentConfig, 103 transformConfig: transformTextComponentConfig,
84 }); 104 });
85 105
86 frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, { 106 frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, {
87 Component: DashBoardComponent, 107 Component: DashBoardComponent,
  108 + ComponentKey: FrontComponent.INSTRUMENT_COMPONENT_1,
88 ComponentConfig: { 109 ComponentConfig: {
89 - chartOption: instrumentComponent1(), 110 + chartOption: instrumentComponent1(Instrument1DefaultConfig),
90 componentType: FrontComponent.INSTRUMENT_COMPONENT_1, 111 componentType: FrontComponent.INSTRUMENT_COMPONENT_1,
91 } as DashboardComponentLayout, 112 } as DashboardComponentLayout,
  113 + ComponentCategory: FrontComponentCategory.INSTRUMENT,
92 transformConfig: transformDashboardComponentConfig, 114 transformConfig: transformDashboardComponentConfig,
93 }); 115 });
94 116
95 frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, { 117 frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, {
96 Component: DashBoardComponent, 118 Component: DashBoardComponent,
  119 + ComponentKey: FrontComponent.INSTRUMENT_COMPONENT_2,
97 ComponentConfig: { 120 ComponentConfig: {
98 - chartOption: instrumentComponent2(), 121 + chartOption: instrumentComponent2(Instrument2DefaultConfig),
99 componentType: FrontComponent.INSTRUMENT_COMPONENT_2, 122 componentType: FrontComponent.INSTRUMENT_COMPONENT_2,
100 } as DashboardComponentLayout, 123 } as DashboardComponentLayout,
  124 + ComponentCategory: FrontComponentCategory.INSTRUMENT,
101 transformConfig: transformDashboardComponentConfig, 125 transformConfig: transformDashboardComponentConfig,
102 }); 126 });
103 127
104 frontComponentMap.set(FrontComponent.DIGITAL_DASHBOARD_COMPONENT, { 128 frontComponentMap.set(FrontComponent.DIGITAL_DASHBOARD_COMPONENT, {
105 Component: DigitalDashBoard, 129 Component: DigitalDashBoard,
106 - ComponentConfig: {}, 130 + ComponentKey: FrontComponent.DIGITAL_DASHBOARD_COMPONENT,
  131 + ComponentCategory: FrontComponentCategory.INSTRUMENT,
107 transformConfig: transformDashboardComponentConfig, 132 transformConfig: transformDashboardComponentConfig,
108 }); 133 });
109 134
110 frontComponentMap.set(FrontComponent.PICTURE_COMPONENT_1, { 135 frontComponentMap.set(FrontComponent.PICTURE_COMPONENT_1, {
111 Component: PictureComponent, 136 Component: PictureComponent,
112 - ComponentConfig: {}, 137 + ComponentKey: FrontComponent.PICTURE_COMPONENT_1,
  138 + ComponentCategory: FrontComponentCategory.PICTURE,
113 transformConfig: transformPictureConfig, 139 transformConfig: transformPictureConfig,
114 }); 140 });
115 141
116 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_1, TextComponentDefaultConfig); 142 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_1, TextComponentDefaultConfig);
117 -frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_2, TextComponentDefaultConfig);  
118 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_3, TextComponentDefaultConfig); 143 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_3, TextComponentDefaultConfig);
119 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_4, TextComponentDefaultConfig); 144 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_4, TextComponentDefaultConfig);
120 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_5, TextComponentDefaultConfig); 145 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_5, TextComponentDefaultConfig);
@@ -309,7 +309,7 @@ @@ -309,7 +309,7 @@
309 ) => { 309 ) => {
310 const frontComponent = record.frontId; 310 const frontComponent = record.frontId;
311 const component = frontComponentMap.get(frontComponent as WidgetComponentType); 311 const component = frontComponentMap.get(frontComponent as WidgetComponentType);
312 - return component?.transformConfig(component.ComponentConfig, record, dataSourceRecord); 312 + return component?.transformConfig(component.ComponentConfig || {}, record, dataSourceRecord);
313 }; 313 };
314 314
315 const handleUpdate = async (id: string) => { 315 const handleUpdate = async (id: string) => {