Commit b32ed69207d88a182f3c434c6125b3a8c1c46f49

Authored by ww
1 parent 07d502bc

perf: data board component data source default config

@@ -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