Commit b32ed69207d88a182f3c434c6125b3a8c1c46f49
1 parent
07d502bc
perf: data board component data source default config
Showing
3 changed files
with
27 additions
and
9 deletions
@@ -11,9 +11,8 @@ | @@ -11,9 +11,8 @@ | ||
11 | import type { ComponentInfo, DataSource } from '/@/api/dataBoard/model'; | 11 | import type { ComponentInfo, DataSource } from '/@/api/dataBoard/model'; |
12 | import { useMessage } from '/@/hooks/web/useMessage'; | 12 | import { useMessage } from '/@/hooks/web/useMessage'; |
13 | import { DataBoardLayoutInfo } from '../../types/type'; | 13 | import { DataBoardLayoutInfo } from '../../types/type'; |
14 | - import { FrontComponent, getComponentDefaultConfig } from '../config/help'; | 14 | + import { FrontComponent } from '../config/help'; |
15 | import { computed } from '@vue/reactivity'; | 15 | import { computed } from '@vue/reactivity'; |
16 | - import { WidgetComponentType } from '../config/visualOptions'; | ||
17 | 16 | ||
18 | type DataSourceFormEL = { [key: string]: Nullable<FormActionType> }; | 17 | type DataSourceFormEL = { [key: string]: Nullable<FormActionType> }; |
19 | 18 | ||
@@ -22,6 +21,7 @@ | @@ -22,6 +21,7 @@ | ||
22 | const props = defineProps<{ | 21 | const props = defineProps<{ |
23 | record: DataBoardLayoutInfo; | 22 | record: DataBoardLayoutInfo; |
24 | frontId?: string; | 23 | frontId?: string; |
24 | + defaultConfig?: Partial<ComponentInfo>; | ||
25 | }>(); | 25 | }>(); |
26 | 26 | ||
27 | const { createMessage } = useMessage(); | 27 | const { createMessage } = useMessage(); |
@@ -30,7 +30,9 @@ | @@ -30,7 +30,9 @@ | ||
30 | // ...props.record, | 30 | // ...props.record, |
31 | // } as unknown as DataBoardLayoutInfo); | 31 | // } as unknown as DataBoardLayoutInfo); |
32 | 32 | ||
33 | - const dataSource = ref<DataSourceEl[]>([{ id: buildUUID() } as unknown as DataSourceEl]); | 33 | + const dataSource = ref<DataSourceEl[]>([ |
34 | + { id: buildUUID(), componentInfo: props.defaultConfig || {} } as unknown as DataSourceEl, | ||
35 | + ]); | ||
34 | 36 | ||
35 | const [basicRegister, basicMethod] = useForm({ | 37 | const [basicRegister, basicMethod] = useForm({ |
36 | schemas: basicSchema, | 38 | schemas: basicSchema, |
@@ -66,7 +68,7 @@ | @@ -66,7 +68,7 @@ | ||
66 | const componentInfo = unref(dataSource)[index].componentInfo || {}; | 68 | const componentInfo = unref(dataSource)[index].componentInfo || {}; |
67 | _dataSource.push({ | 69 | _dataSource.push({ |
68 | ...value, | 70 | ...value, |
69 | - componentInfo: { ...componentInfo }, | 71 | + componentInfo: { ...(props.defaultConfig || {}), ...componentInfo }, |
70 | }); | 72 | }); |
71 | } | 73 | } |
72 | return _dataSource; | 74 | return _dataSource; |
@@ -98,9 +100,12 @@ | @@ -98,9 +100,12 @@ | ||
98 | return; | 100 | return; |
99 | } | 101 | } |
100 | 102 | ||
101 | - const defaultConfig = getComponentDefaultConfig(props.frontId as WidgetComponentType); | 103 | + // const defaultConfig = getComponentDefaultConfig(props.frontId as WidgetComponentType); |
102 | 104 | ||
103 | - const componentInfo: ComponentInfo = { ...defaultConfig, ...(item.componentInfo || {}) }; | 105 | + const componentInfo: ComponentInfo = { |
106 | + ...(props.defaultConfig || {}), | ||
107 | + ...(item.componentInfo || {}), | ||
108 | + }; | ||
104 | 109 | ||
105 | openModal(true, { | 110 | openModal(true, { |
106 | recordId: item.id, | 111 | recordId: item.id, |
@@ -117,6 +122,7 @@ | @@ -117,6 +122,7 @@ | ||
117 | const handleAdd = () => { | 122 | const handleAdd = () => { |
118 | unref(dataSource).push({ | 123 | unref(dataSource).push({ |
119 | id: buildUUID(), | 124 | id: buildUUID(), |
125 | + componentInfo: props.defaultConfig || {}, | ||
120 | } as unknown as DataSourceEl); | 126 | } as unknown as DataSourceEl); |
121 | }; | 127 | }; |
122 | 128 |
@@ -10,6 +10,7 @@ | @@ -10,6 +10,7 @@ | ||
10 | import { DataBoardLayoutInfo } from '../../types/type'; | 10 | import { DataBoardLayoutInfo } from '../../types/type'; |
11 | import { useMessage } from '/@/hooks/web/useMessage'; | 11 | import { useMessage } from '/@/hooks/web/useMessage'; |
12 | import { decode } from '../../config/config'; | 12 | import { decode } from '../../config/config'; |
13 | + import { ComponentInfo } from '/@/api/dataBoard/model'; | ||
13 | 14 | ||
14 | interface DataComponentRouteParams extends RouteParams { | 15 | interface DataComponentRouteParams extends RouteParams { |
15 | id: string; | 16 | id: string; |
@@ -31,6 +32,8 @@ | @@ -31,6 +32,8 @@ | ||
31 | 32 | ||
32 | const componentRecord = ref<DataBoardLayoutInfo>({} as unknown as DataBoardLayoutInfo); | 33 | const componentRecord = ref<DataBoardLayoutInfo>({} as unknown as DataBoardLayoutInfo); |
33 | 34 | ||
35 | + const componentDefaultConfig = ref<Partial<ComponentInfo>>({}); | ||
36 | + | ||
34 | const [register, { closeModal, changeOkLoading }] = useModalInner( | 37 | const [register, { closeModal, changeOkLoading }] = useModalInner( |
35 | (data: { isEdit: boolean; record?: DataBoardLayoutInfo }) => { | 38 | (data: { isEdit: boolean; record?: DataBoardLayoutInfo }) => { |
36 | componentRecord.value = data.record || ({} as unknown as DataBoardLayoutInfo); | 39 | componentRecord.value = data.record || ({} as unknown as DataBoardLayoutInfo); |
@@ -94,6 +97,10 @@ | @@ -94,6 +97,10 @@ | ||
94 | changeOkLoading(false); | 97 | changeOkLoading(false); |
95 | } | 98 | } |
96 | }; | 99 | }; |
100 | + | ||
101 | + const handleComponentCheckedChange = (record: ComponentInfo) => { | ||
102 | + componentDefaultConfig.value = record; | ||
103 | + }; | ||
97 | </script> | 104 | </script> |
98 | 105 | ||
99 | <template> | 106 | <template> |
@@ -112,10 +119,11 @@ | @@ -112,10 +119,11 @@ | ||
112 | ref="basicConfigurationEl" | 119 | ref="basicConfigurationEl" |
113 | :front-id="frontId" | 120 | :front-id="frontId" |
114 | :record="componentRecord" | 121 | :record="componentRecord" |
122 | + :defaultConfig="componentDefaultConfig" | ||
115 | /> | 123 | /> |
116 | </Tabs.TabPane> | 124 | </Tabs.TabPane> |
117 | <Tabs.TabPane key="2" tab="可视化配置"> | 125 | <Tabs.TabPane key="2" tab="可视化配置"> |
118 | - <VisualConfiguration v-model:value="frontId" /> | 126 | + <VisualConfiguration v-model:value="frontId" @change="handleComponentCheckedChange" /> |
119 | </Tabs.TabPane> | 127 | </Tabs.TabPane> |
120 | </Tabs> | 128 | </Tabs> |
121 | </section> | 129 | </section> |
@@ -5,15 +5,19 @@ | @@ -5,15 +5,19 @@ | ||
5 | import { textComponentConfig } from '../../components/TextComponent/config'; | 5 | import { textComponentConfig } from '../../components/TextComponent/config'; |
6 | import { instrumentComponentConfig } from '../../components/InstrumentComponent'; | 6 | import { instrumentComponentConfig } from '../../components/InstrumentComponent'; |
7 | import { pictureComponentList } from '../../components/PictureComponent'; | 7 | import { pictureComponentList } from '../../components/PictureComponent'; |
8 | + import { getComponentDefaultConfig } from '../config/help'; | ||
9 | + import { WidgetComponentType } from '../config/visualOptions'; | ||
8 | const props = defineProps<{ | 10 | const props = defineProps<{ |
9 | value: string; | 11 | value: string; |
10 | }>(); | 12 | }>(); |
11 | - const emit = defineEmits(['update:value']); | 13 | + const emit = defineEmits(['update:value', 'change']); |
12 | 14 | ||
13 | const grid = { gutter: 10, column: 1, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 }; | 15 | const grid = { gutter: 10, column: 1, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 }; |
14 | 16 | ||
15 | - const handleCheck = (checked: string) => { | 17 | + const handleCheck = (checked: WidgetComponentType) => { |
18 | + const defaultConfig = getComponentDefaultConfig(checked); | ||
16 | emit('update:value', checked); | 19 | emit('update:value', checked); |
20 | + emit('change', defaultConfig); | ||
17 | }; | 21 | }; |
18 | </script> | 22 | </script> |
19 | 23 |