perf: data board component data source default config

@@ -11,9 +11,8 @@
   import type { ComponentInfo, DataSource } from '/@/api/dataBoard/model';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { DataBoardLayoutInfo } from '../../types/type';
-  import { FrontComponent, getComponentDefaultConfig } from '../config/help';
+  import { FrontComponent } from '../config/help';
   import { computed } from '@vue/reactivity';
-  import { WidgetComponentType } from '../config/visualOptions';
 
   type DataSourceFormEL = { [key: string]: Nullable<FormActionType> };
 
@@ -22,6 +21,7 @@
   const props = defineProps<{
     record: DataBoardLayoutInfo;
     frontId?: string;
+    defaultConfig?: Partial<ComponentInfo>;
   }>();
 
   const { createMessage } = useMessage();
@@ -30,7 +30,9 @@
   //   ...props.record,
   // } as unknown as DataBoardLayoutInfo);
 
-  const dataSource = ref<DataSourceEl[]>([{ id: buildUUID() } as unknown as DataSourceEl]);
+  const dataSource = ref<DataSourceEl[]>([
+    { id: buildUUID(), componentInfo: props.defaultConfig || {} } as unknown as DataSourceEl,
+  ]);
 
   const [basicRegister, basicMethod] = useForm({
     schemas: basicSchema,
@@ -66,7 +68,7 @@
       const componentInfo = unref(dataSource)[index].componentInfo || {};
       _dataSource.push({
         ...value,
-        componentInfo: { ...componentInfo },
+        componentInfo: { ...(props.defaultConfig || {}), ...componentInfo },
       });
     }
     return _dataSource;
@@ -98,9 +100,12 @@
       return;
     }
 
-    const defaultConfig = getComponentDefaultConfig(props.frontId as WidgetComponentType);
+    // const defaultConfig = getComponentDefaultConfig(props.frontId as WidgetComponentType);
 
-    const componentInfo: ComponentInfo = { ...defaultConfig, ...(item.componentInfo || {}) };
+    const componentInfo: ComponentInfo = {
+      ...(props.defaultConfig || {}),
+      ...(item.componentInfo || {}),
+    };
 
     openModal(true, {
       recordId: item.id,
@@ -117,6 +122,7 @@
   const handleAdd = () => {
     unref(dataSource).push({
       id: buildUUID(),
+      componentInfo: props.defaultConfig || {},
     } as unknown as DataSourceEl);
   };
 

@@ -10,6 +10,7 @@
   import { DataBoardLayoutInfo } from '../../types/type';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { decode } from '../../config/config';
+  import { ComponentInfo } from '/@/api/dataBoard/model';
 
   interface DataComponentRouteParams extends RouteParams {
     id: string;
@@ -31,6 +32,8 @@
 
   const componentRecord = ref<DataBoardLayoutInfo>({} as unknown as DataBoardLayoutInfo);
 
+  const componentDefaultConfig = ref<Partial<ComponentInfo>>({});
+
   const [register, { closeModal, changeOkLoading }] = useModalInner(
     (data: { isEdit: boolean; record?: DataBoardLayoutInfo }) => {
       componentRecord.value = data.record || ({} as unknown as DataBoardLayoutInfo);
@@ -94,6 +97,10 @@
       changeOkLoading(false);
     }
   };
+
+  const handleComponentCheckedChange = (record: ComponentInfo) => {
+    componentDefaultConfig.value = record;
+  };
 </script>
 
 <template>
@@ -112,10 +119,11 @@
             ref="basicConfigurationEl"
             :front-id="frontId"
             :record="componentRecord"
+            :defaultConfig="componentDefaultConfig"
           />
         </Tabs.TabPane>
         <Tabs.TabPane key="2" tab="可视化配置">
-          <VisualConfiguration v-model:value="frontId" />
+          <VisualConfiguration v-model:value="frontId" @change="handleComponentCheckedChange" />
         </Tabs.TabPane>
       </Tabs>
     </section>

@@ -5,15 +5,19 @@
   import { textComponentConfig } from '../../components/TextComponent/config';
   import { instrumentComponentConfig } from '../../components/InstrumentComponent';
   import { pictureComponentList } from '../../components/PictureComponent';
+  import { getComponentDefaultConfig } from '../config/help';
+  import { WidgetComponentType } from '../config/visualOptions';
   const props = defineProps<{
     value: string;
   }>();
-  const emit = defineEmits(['update:value']);
+  const emit = defineEmits(['update:value', 'change']);
 
   const grid = { gutter: 10, column: 1, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 };
 
-  const handleCheck = (checked: string) => {
+  const handleCheck = (checked: WidgetComponentType) => {
+    const defaultConfig = getComponentDefaultConfig(checked);
     emit('update:value', checked);
+    emit('change', defaultConfig);
   };
 </script>