fix(form-create): ms-form-create组件必填字段错误校验问题修复

frontend/src/components/pure/ms-form-create/formCreate.vue

@@ -1,6 +1,6 @@
 <template>
   <FormCreate
-    v-model:api="innerApi"
+    v-model:api="formApi"
     :rule="formRules"
     :option="props.option || options"
     @mounted="handleMounted"
@@ -13,8 +13,6 @@
   /**
    * @description 用于原生字段form-create
    */
-  import { ref, watch, watchEffect } from 'vue';
-
   import MsTagsInput from '@/components/pure/ms-tags-input/index.vue';
   import JiraKey from './comp/jiraKey.vue';
   import PassWord from './formcreate-password.vue';
@@ -29,52 +27,27 @@
   const FormCreate = formCreate.$form();
 
   const props = defineProps<{
-    rule?: FormRule; // 表单的规则
     option: any; // 全局配置项
-    api?: Api; // 收集表单的值
   }>();
 
-  const innerApi = ref<any>();
+  const emits = defineEmits<{
+    (e: 'mounted'): void;
+    (e: 'reload'): void;
+    (e: 'change', filed: string): void;
+  }>();
 
-  const emits = defineEmits(['update:api', 'update:rule', 'mounted', 'reload', 'change']);
+  const formApi = defineModel<Api>('api', {
-
+    default: undefined,
-  const formApi = computed({
-    get() {
-      return props.api;
-    },
-    set(val) {
-      emits('update:api', val);
-    },
   });
 
-  watch(
+  const formRules = defineModel<FormRule | undefined>('rule', {
-    () => formApi.value,
+    default: {},
-    (val) => {
-      emits('update:api', val);
-    },
-    { deep: true }
-  );
-
-  const formRules = ref<FormRule | undefined>([]);
-  watchEffect(() => {
-    formRules.value = props.rule;
-    formApi.value = props.api || innerApi.value;
   });
-  watch(
-    () => props.rule,
-    (val) => {
-      formRules.value = val;
-      formApi.value?.refresh();
-    }
-  );
 
   watch(
     () => formRules.value,
-    (val) => {
+    () => {
-      emits('update:rule', val);
+      formApi.value?.refresh();
-    },
-    {
-      deep: true,
     }
   );
 
@@ -86,10 +59,9 @@
     emits('reload');
   }
 
-  function handleChange(value: any) {
+  function handleChange(filed: string) {
-    formApi.value?.validateField(value);
+    formApi.value?.validateField(filed);
-    emits('update:api', formApi.value);
+    emits('change', filed);
-    emits('change', value, formApi.value);
   }
   const options = {
     resetBtn: false, // 不展示默认配置的重置和提交

frontend/src/views/project-management/projectAndPermission/menuManagement/components/defectSync.vue

@@ -33,7 +33,6 @@
         v-model:api="fApi"
         v-model:form-item="platformItem"
         :form-rule="platformRules"
-        @change="changeHandler"
         @mounted="handleMounted"
       />
       <!-- 同步机制 -->
@@ -292,10 +291,6 @@
 
     fApi.value?.setValue({ ...tempObj });
   }
-  function changeHandler(a: any, b: FormRuleItem) {
-    fApi.value.validateField(b.field);
-    fApi.value.refreshValidate();
-  }
 
   function handleMounted() {
     setValue();

frontend/src/views/project-management/projectAndPermission/menuManagement/components/relatedCase.vue

@@ -33,7 +33,6 @@
         v-model:api="fApi"
         v-model:form-item="platformItem"
         :form-rule="platformRules"
-        @change="changeHandler"
         @mounted="handleMounted"
       />
     </a-form>
@@ -220,11 +219,6 @@
     fApi.value?.setValue({ ...tempObj });
   }
 
-  function changeHandler(a: string, formValue: Record<string, any>) {
-    fApi.value.validateField(formValue.field);
-    fApi.value.refreshValidate();
-  }
-
   function handleMounted() {
     setValue();
   }

frontend/src/views/project-management/template/components/detail.vue

@@ -3,8 +3,6 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
-
   import AddTemplate from '@/views/setting/organization/template/components/addTemplate.vue';
 </script>
 

frontend/src/views/setting/organization/template/components/addTemplate.vue

@@ -132,7 +132,6 @@
                 v-model:rule="formItem.formRules"
                 :option="configOptions"
                 @click="activeHandler(index)"
-                @change="(value, formApi) => changeHandler(value, formApi)"
               />
               <a-form
                 v-if="templateForm.enableThirdPart && route.query.type === 'BUG'"
@@ -374,10 +373,6 @@
     isError.value = false;
   }
 
-  function changeHandler(value: string, api: any) {
-    api?.validateField(value);
-  }
-
   // 保存回调
   async function save() {
     try {
@@ -408,6 +403,7 @@
         setIsSave(true);
       }
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
     } finally {
       loading.value = false;
@@ -463,6 +459,7 @@
         scene: route.query.type,
       });
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
     }
   };
@@ -495,7 +492,6 @@
   }
 
   const selectFiled = ref<DefinedFieldItem[]>([]);
-  const selectedIds = ref<string[]>();
 
   // 编辑更新已选择字段
   const isEditField = ref<boolean>(false);
@@ -634,6 +630,7 @@
       selectData.value = getSelectData(customFields);
       systemFieldData.value = systemFields;
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
     } finally {
       loading.value = false;

frontend/src/views/setting/organization/template/components/viewTemplate.vue

@@ -127,7 +127,6 @@
       width: 428px;
     }
   }
-
   :deep(.arco-picker-disabled) {
     border-color: var(--color-text-n8);
     background: var(--color-text-n8);
@@ -136,11 +135,9 @@
       background: var(--color-text-n8);
     }
   }
-
   :deep(.arco-form-item-layout-vertical > .arco-form-item-label-col) {
     overflow-wrap: break-word;
   }
-
   :deep(.arco-form-item-content) {
     overflow-wrap: anywhere;
   }