perf: data board component info modal add validate

@@ -111,7 +111,6 @@
     initChart();
     initChart();
     props.add && props.add(props.value.id, update);
     props.add && props.add(props.value.id, update);
     if (props.random) timeout = setInterval(handleRandomValue, 2000) as unknown as number;
     if (props.random) timeout = setInterval(handleRandomValue, 2000) as unknown as number;
-    console.log(unref(chartRef));
   });
   });
 
 
   onUnmounted(() => {
   onUnmounted(() => {

@@ -26,10 +26,6 @@
 
 
   const { createMessage } = useMessage();
   const { createMessage } = useMessage();
 
 
-  // const componentRecord = reactive<DataBoardLayoutInfo>({
-  //   ...props.record,
-  // } as unknown as DataBoardLayoutInfo);
-
   const dataSource = ref<DataSourceEl[]>([
   const dataSource = ref<DataSourceEl[]>([
     { id: buildUUID(), componentInfo: props.defaultConfig || {} } as unknown as DataSourceEl,
     { id: buildUUID(), componentInfo: props.defaultConfig || {} } as unknown as DataSourceEl,
   ]);
   ]);
@@ -49,6 +45,11 @@
     }
     }
   };
   };
 
 
+  const validate = async () => {
+    await basicMethod.validate();
+    await validateDataSourceField();
+  };
+
   const getAllDataSourceFieldValue = () => {
   const getAllDataSourceFieldValue = () => {
     const _dataSource = getDataSourceField();
     const _dataSource = getDataSourceField();
     const basicInfo = basicMethod.getFieldsValue();
     const basicInfo = basicMethod.getFieldsValue();
@@ -58,6 +59,16 @@
     };
     };
   };
   };
 
 
+  const validateDataSourceField = async () => {
+    const hasExistEl = Object.keys(dataSourceEl).filter((key) => dataSourceEl[key]);
+    const _dataSource: boolean[] = [];
+    for (const id of hasExistEl) {
+      const flag = (await (dataSourceEl[id] as FormActionType).validate()) as boolean;
+      _dataSource.push(flag);
+    }
+    return _dataSource;
+  };
+
   const getDataSourceField = () => {
   const getDataSourceField = () => {
     const hasExistEl = Object.keys(dataSourceEl).filter((key) => dataSourceEl[key]);
     const hasExistEl = Object.keys(dataSourceEl).filter((key) => dataSourceEl[key]);
     const _dataSource: DataSource[] = [];
     const _dataSource: DataSource[] = [];
@@ -90,6 +101,7 @@
     });
     });
     await nextTick();
     await nextTick();
     (dataSourceEl[copyRecordId] as FormActionType).setFieldsValue(value);
     (dataSourceEl[copyRecordId] as FormActionType).setFieldsValue(value);
+    (dataSourceEl[copyRecordId] as FormActionType).clearValidate();
   };
   };
 
 
   const [registerVisualOptionModal, { openModal }] = useModal();
   const [registerVisualOptionModal, { openModal }] = useModal();
@@ -128,6 +140,7 @@
 
 
   const echoDataSource = () => {
   const echoDataSource = () => {
     basicMethod.setFieldsValue(props.record.record);
     basicMethod.setFieldsValue(props.record.record);
+    basicMethod.clearValidate();
     dataSource.value = [];
     dataSource.value = [];
     dataSource.value = props.record.record.dataSource.map((item) => {
     dataSource.value = props.record.record.dataSource.map((item) => {
       const id = buildUUID();
       const id = buildUUID();
@@ -139,6 +152,7 @@
 
 
       nextTick(() => {
       nextTick(() => {
         (dataSourceEl[id] as FormActionType).setFieldsValue(item);
         (dataSourceEl[id] as FormActionType).setFieldsValue(item);
+        (dataSourceEl[id] as FormActionType).clearValidate();
       });
       });
       return {
       return {
         id,
         id,
@@ -165,6 +179,7 @@
 
 
   defineExpose({
   defineExpose({
     getAllDataSourceFieldValue,
     getAllDataSourceFieldValue,
+    validate,
   });
   });
 </script>
 </script>
 
 

@@ -44,6 +44,7 @@
 
 
   const basicConfigurationEl = ref<{
   const basicConfigurationEl = ref<{
     getAllDataSourceFieldValue: Fn<any, Recordable>;
     getAllDataSourceFieldValue: Fn<any, Recordable>;
+    validate: Fn;
   }>();
   }>();
 
 
   const resetForm = () => {
   const resetForm = () => {
@@ -53,8 +54,9 @@
     componentDefaultConfig.value = {};
     componentDefaultConfig.value = {};
   };
   };
 
 
-  const handleSubmit = () => {
-    const { getAllDataSourceFieldValue } = unref(basicConfigurationEl)!;
+  const handleSubmit = async () => {
+    const { getAllDataSourceFieldValue, validate } = unref(basicConfigurationEl)!;
+    await validate();
     const value = getAllDataSourceFieldValue();
     const value = getAllDataSourceFieldValue();
     unref(isEdit) ? handleUpdateComponent(value) : handleAddComponent(value);
     unref(isEdit) ? handleUpdateComponent(value) : handleAddComponent(value);
     resetForm();
     resetForm();

@@ -32,6 +32,7 @@ export const basicSchema: FormSchema[] = [
     field: BasicConfigField.NAME,
     field: BasicConfigField.NAME,
     label: '组件名称',
     label: '组件名称',
     component: 'Input',
     component: 'Input',
+    rules: [{ required: true, message: '组件名称为必填项' }],
     componentProps: {
     componentProps: {
       placeholder: '请输入组件名称',
       placeholder: '请输入组件名称',
     },
     },
@@ -40,6 +41,7 @@ export const basicSchema: FormSchema[] = [
     field: BasicConfigField.REMARK,
     field: BasicConfigField.REMARK,
     label: '组件备注',
     label: '组件备注',
     component: 'InputTextArea',
     component: 'InputTextArea',
+    // rules: [{ required: true, message: '组件备注为必填项' }],
     componentProps: {
     componentProps: {
       placeholder: '请输入组件备注',
       placeholder: '请输入组件备注',
     },
     },
@@ -64,6 +66,7 @@ export const dataSourceSchema: FormSchema[] = [
     component: 'ApiTreeSelect',
     component: 'ApiTreeSelect',
     label: '组织',
     label: '组织',
     colProps: { span: 8 },
     colProps: { span: 8 },
+    rules: [{ required: true, message: '组织为必填项' }],
     componentProps({ formActionType }) {
     componentProps({ formActionType }) {
       const { setFieldsValue } = formActionType;
       const { setFieldsValue } = formActionType;
       return {
       return {
@@ -90,6 +93,7 @@ export const dataSourceSchema: FormSchema[] = [
     component: 'ApiSelect',
     component: 'ApiSelect',
     label: '设备',
     label: '设备',
     colProps: { span: 8 },
     colProps: { span: 8 },
+    rules: [{ required: true, message: '设备名称为必填项' }],
     componentProps({ formModel, formActionType }) {
     componentProps({ formModel, formActionType }) {
       const { setFieldsValue } = formActionType;
       const { setFieldsValue } = formActionType;
       const organizationId = formModel[DataSourceField.ORIGINATION_ID];
       const organizationId = formModel[DataSourceField.ORIGINATION_ID];
@@ -126,6 +130,7 @@ export const dataSourceSchema: FormSchema[] = [
     label: '网关子设备',
     label: '网关子设备',
     component: 'ApiSelect',
     component: 'ApiSelect',
     colProps: { span: 8 },
     colProps: { span: 8 },
+    rules: [{ required: true, message: '网关子设备为必填项' }],
     ifShow({ model }) {
     ifShow({ model }) {
       return model[DataSourceField.IS_GATEWAY_DEVICE];
       return model[DataSourceField.IS_GATEWAY_DEVICE];
     },
     },
@@ -168,6 +173,7 @@ export const dataSourceSchema: FormSchema[] = [
     component: 'ApiSelect',
     component: 'ApiSelect',
     label: '属性',
     label: '属性',
     colProps: { span: 8 },
     colProps: { span: 8 },
+    rules: [{ required: true, message: '属性为必填项' }],
     componentProps({ formModel }) {
     componentProps({ formModel }) {
       const organizationId = formModel[DataSourceField.ORIGINATION_ID];
       const organizationId = formModel[DataSourceField.ORIGINATION_ID];
       const isGatewayDevice = formModel[DataSourceField.IS_GATEWAY_DEVICE];
       const isGatewayDevice = formModel[DataSourceField.IS_GATEWAY_DEVICE];