fix: form create

Author: ba1q1

frontend/packages/web/src/components/business/crm-form-create/components/advanced/file.vue

@@ -1,5 +1,6 @@
 <template>
   <n-form-item
+    ref="crmFormItemRef"
     :label="props.fieldConfig.name"
     :path="props.path"
     :rule="props.fieldConfig.rules"
@@ -52,6 +53,7 @@
 
 <script setup lang="ts">
   import {
+    type FormItemInst,
     NFormItem,
     NUpload,
     NUploadDragger,
@@ -85,6 +87,7 @@
   });
   const fileList = ref<UploadFileInfo[]>([]);
   const fileKeysMap = ref<Record<string, string>>({});
+  const crmFormItemRef = ref<FormItemInst>();
 
   async function beforeUpload({
     file,
@@ -151,6 +154,7 @@
       onFinish();
       fileKeys.value.push(...res.data);
       [fileKeysMap.value[file.id]] = res.data;
+      crmFormItemRef.value?.validate();
       emit('change', fileKeys.value, fileList.value);
     } catch (error) {
       // eslint-disable-next-line no-console
@@ -164,6 +168,7 @@
   function handleFileListChange(files: UploadFileInfo[]) {
     if (fileKeys.value.length > files.length) {
       fileKeys.value = fileKeys.value.filter((key) => files.some((file) => file.id === key));
+      crmFormItemRef.value?.validate();
       emit('change', fileKeys.value, fileList.value);
     }
   }

frontend/packages/web/src/components/business/crm-form-create/components/advanced/upload.vue

@@ -1,5 +1,6 @@
 <template>
   <n-form-item
+    ref="crmFormItemRef"
     :label="props.fieldConfig.name"
     :path="props.path"
     :rule="props.fieldConfig.rules"
@@ -33,13 +34,7 @@
       multiple
       directory-dnd
       @before-upload="beforeUpload"
-      @update-file-list="
-        () => {
-          if (fileKeys.length !== 0 || fileKeys.length === fileList.length) {
-            emit('change', fileKeys, fileList);
-          }
-        }
-      "
+      @update-file-list="handleUploadFileListChange"
       @remove="handleFileRemove"
     >
       <n-upload-dragger>
@@ -56,6 +51,7 @@
 
 <script setup lang="ts">
   import {
+    type FormItemInst,
     NDivider,
     NFormItem,
     NUpload,
@@ -96,6 +92,7 @@
   });
   const fileList = ref<UploadFileInfo[]>([]);
   const fileKeysMap = ref<Record<string, string>>({});
+  const crmFormItemRef = ref<FormItemInst>();
 
   const getTriggerStyle = computed(() => {
     if (props.isSubTableField || props.isSubTableRender) {
@@ -163,6 +160,7 @@
       onFinish();
       fileKeys.value.push(...res.data);
       [fileKeysMap.value[file.id]] = res.data;
+      crmFormItemRef.value?.validate();
       emit('change', fileKeys.value, fileList.value);
     } catch (error) {
       // eslint-disable-next-line no-console
@@ -186,6 +184,13 @@
     }
   }
 
+  function handleUploadFileListChange() {
+    if (fileKeys.value.length !== 0 || fileKeys.value.length === fileList.value.length) {
+      crmFormItemRef.value?.validate();
+      emit('change', fileKeys.value, fileList.value);
+    }
+  }
+
   watch(
     () => fileKeys.value,
     (keys: string[]) => {

frontend/packages/web/src/components/business/crm-form-create/index.vue

@@ -344,9 +344,6 @@
         dataSourceFormFields
       );
     }
-    if (item.type === FieldTypeEnum.ATTACHMENT) {
-      formRef.value?.validate();
-    }
     if (item.type === FieldTypeEnum.DATA_SOURCE && item.showFields?.length) {
       // 数据源显示字段联动
       const showFields = fieldList.value.filter((f) => f.resourceFieldId === item.id);

frontend/packages/web/src/components/business/crm-sub-table/index.vue

@@ -1,7 +1,7 @@
 <template>
   <n-data-table
     :columns="realColumns"
-    :data="data"
+    :data="data || []"
     :paging="false"
     :pagination="false"
     :scroll-x="scrollXWidth"
@@ -58,6 +58,7 @@
 
   const data = defineModel<Record<string, any>[]>('value', {
     required: true,
+    default: () => [],
   });
 
   function makeTitle(field: FormCreateField) {
@@ -685,6 +686,18 @@
     });
     return summaryRes;
   };
+
+  watch(
+    () => data.value,
+    (val) => {
+      if (val === null || val === undefined) {
+        data.value = [];
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
 </script>
 
 <style lang="less">

frontend/packages/web/src/hooks/useFormCreateApi.ts

@@ -1152,7 +1152,12 @@ export default function useFormCreateApi(props: FormCreateApiProps) {
           staticRule.message = t(staticRule.message as string, { value: t(item.name) });
           staticRule.type = getRuleType(item);
           if (
-            [FieldTypeEnum.DATA_SOURCE, FieldTypeEnum.DATA_SOURCE_MULTIPLE, FieldTypeEnum.PICTURE].includes(item.type)
+            [
+              FieldTypeEnum.DATA_SOURCE,
+              FieldTypeEnum.DATA_SOURCE_MULTIPLE,
+              FieldTypeEnum.PICTURE,
+              FieldTypeEnum.ATTACHMENT,
+            ].includes(item.type)
           ) {
             staticRule.trigger = 'none';
           }