fly-el-form 0.0.30 → 0.0.32

package/lib/fly-el-form.es.js

@@ -1770,6 +1770,11 @@ function useFormValues() {
 const FlyElForm = defineComponent({
   name: "FlyElForm",
   props: {
+    // 新增：支持 v-model
+    modelValue: {
+      type: Object,
+      default: () => ({})
+    },
     // 模式 默认form表单模式 search为搜索条模式
     model: {
       type: String,
@@ -1876,6 +1881,7 @@ const FlyElForm = defineComponent({
       default: false
     }
   },
+  emits: ["update:modelValue", "submit", "reset"],
   setup(props, context) {
     const isFirstInit = ref(true);
     const formContent = ref({});
@@ -1937,7 +1943,6 @@ const FlyElForm = defineComponent({
       for (const key in newRules) {
         if (hasOwnPropertySafely(newRules, key)) {
           if (!hasOwnPropertySafely(rules.value, key) || !isEqual(rules.value[key], newRules[key])) {
-            console.log(key, newRules[key]);
             rules.value[key] = newRules[key];
           }
         }
@@ -1956,41 +1961,61 @@ const FlyElForm = defineComponent({
           }
         }
       }
-      const newFormKeyAndName = res.formKeyAndName || {};
-      const oldFormKeyAndNameKeys = Object.keys(formKeyAndName);
-      oldFormKeyAndNameKeys.forEach((key) => {
-        if (!hasOwnPropertySafely(newFormKeyAndName, key)) {
-          delete formKeyAndName[key];
-        }
-      });
-      for (const key in newFormKeyAndName) {
-        if (hasOwnPropertySafely(newFormKeyAndName, key)) {
-          if (formKeyAndName[key] !== newFormKeyAndName[key]) {
-            formKeyAndName[key] = newFormKeyAndName[key];
-          }
-        }
-      }
-      formContent.value = res.formContent;
       if (isFirstInit.value) {
-        const requests2 = Object.keys(res.requests).map((key) => {
+        const mergedData = Object.assign({}, res.formData, props.modelValue);
+        formValues.value = mergedData;
+        context.emit("update:modelValue", { ...formValues.value });
+        formInitValues.value = Object.assign({}, res.formData);
+        const requestPromises = Object.keys(res.requests).map((key) => {
           return res.requests[key]();
         });
-        formInitValues.value = Object.assign({}, res.formData);
-        if (requests2 && requests2.length > 0) {
-          await Promise.allSettled(requests2).catch((err) => {
-            console.warn(err);
+        if (requestPromises.length > 0) {
+          await Promise.allSettled(requestPromises).catch((err) => {
+            console.warn("Form source data fetch error:", err);
           });
         }
-        formValues.value = Object.assign({}, res.formData);
-        if (needOverWriteForm.value) {
-          overWrite(needOverWriteForm.value);
-          needOverWriteForm.value = {};
+        if (Object.keys(needOverWriteForm.value).length > 0) {
+          overWrite();
         }
         nextTick(() => {
           isFirstInit.value = false;
         });
+      } else {
+        Object.keys(res.formData).forEach((key) => {
+          if (!hasOwnPropertySafely(formValues.value, key)) {
+            formValues.value[key] = res.formData[key];
+          }
+        });
       }
+      const newFormKeyAndName = res.formKeyAndName || {};
+      Object.keys(formKeyAndName).forEach((key) => {
+        if (!hasOwnPropertySafely(newFormKeyAndName, key)) {
+          delete formKeyAndName[key];
+        }
+      });
+      for (const key in newFormKeyAndName) {
+        if (formKeyAndName[key] !== newFormKeyAndName[key]) {
+          formKeyAndName[key] = newFormKeyAndName[key];
+        }
+      }
+      formContent.value = res.formContent;
     };
+    watch(
+      () => props.modelValue,
+      (newVal) => {
+        if (newVal && !isEqual(newVal, formValues.value)) {
+          Object.assign(formValues.value, newVal);
+        }
+      },
+      { deep: true }
+    );
+    watch(
+      formValues,
+      (newVal) => {
+        context.emit("update:modelValue", { ...newVal });
+      },
+      { deep: true }
+    );
     const collectFormContent = (data = []) => {
       const res = {
         formContent: [],
@@ -2149,6 +2174,50 @@ const FlyElForm = defineComponent({
     };
   },
   methods: {
+    /**
+    * 异步提交方法，供父组件通过 ref 调用
+    * @returns Promise<{ valid: boolean, formValues: any, sourceData?: any }>
+    */
+    async asyncSubmit() {
+      const formRef = this.$refs.FlyFormRef;
+      try {
+        const valid = await formRef.validate();
+        let returnData = {
+          valid: true,
+          formValues: { ...this.formValues }
+        };
+        if (this.needReturnSourceKeys && this.needReturnSourceKeys.length > 0) {
+          let templateSourceData = {};
+          this.needReturnSourceKeys.forEach((key) => {
+            templateSourceData[key] = this.sourceData[key];
+          });
+          returnData.sourceData = templateSourceData;
+        }
+        return returnData;
+      } catch (errors) {
+        if (this.$props.model === "search") {
+          const errorMsg = [];
+          const errorNames = [];
+          Object.keys(errors).forEach((key) => {
+            const item = errors[key][0];
+            errorMsg.push(item.message);
+            errorNames.push(this.formKeyAndName[key]);
+          });
+          if (this.$props.singleStepErrorTip) {
+            ElMessage.error(errorMsg[0]);
+          } else {
+            ElMessage.error(
+              `请完善${errorNames.length > 0 ? errorNames.join("、") : "查询条件"}`
+            );
+          }
+        }
+        return {
+          valid: false,
+          formValues: this.formValues,
+          errors
+        };
+      }
+    },
     async submit() {
       const formRef = this.$refs.FlyFormRef;
       await formRef.validate((valid, errors) => {
@@ -2156,7 +2225,6 @@ const FlyElForm = defineComponent({
           valid,
           formValues: this.formValues
         };
-        console.log(this.needReturnSourceKeys);
         if (this.needReturnSourceKeys && this.needReturnSourceKeys.length > 0) {
           let templateSourceData = {};
           this.needReturnSourceKeys.forEach((key) => {
@@ -2196,7 +2264,6 @@ const FlyElForm = defineComponent({
       }
     },
     getComponentRefByKey(key) {
-      console.log(key);
       if (key && typeof key === "string") {
         try {
           return this.$refs[key];

package/lib/fly-el-form.umd.js

@@ -1773,6 +1773,11 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
   const FlyElForm = vue.defineComponent({
     name: "FlyElForm",
     props: {
+      // 新增：支持 v-model
+      modelValue: {
+        type: Object,
+        default: () => ({})
+      },
       // 模式 默认form表单模式 search为搜索条模式
       model: {
         type: String,
@@ -1879,6 +1884,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
         default: false
       }
     },
+    emits: ["update:modelValue", "submit", "reset"],
     setup(props, context) {
       const isFirstInit = vue.ref(true);
       const formContent = vue.ref({});
@@ -1940,7 +1946,6 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
         for (const key in newRules) {
           if (hasOwnPropertySafely(newRules, key)) {
             if (!hasOwnPropertySafely(rules.value, key) || !isEqual(rules.value[key], newRules[key])) {
-              console.log(key, newRules[key]);
               rules.value[key] = newRules[key];
             }
           }
@@ -1959,41 +1964,61 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
             }
           }
         }
-        const newFormKeyAndName = res.formKeyAndName || {};
-        const oldFormKeyAndNameKeys = Object.keys(formKeyAndName);
-        oldFormKeyAndNameKeys.forEach((key) => {
-          if (!hasOwnPropertySafely(newFormKeyAndName, key)) {
-            delete formKeyAndName[key];
-          }
-        });
-        for (const key in newFormKeyAndName) {
-          if (hasOwnPropertySafely(newFormKeyAndName, key)) {
-            if (formKeyAndName[key] !== newFormKeyAndName[key]) {
-              formKeyAndName[key] = newFormKeyAndName[key];
-            }
-          }
-        }
-        formContent.value = res.formContent;
         if (isFirstInit.value) {
-          const requests2 = Object.keys(res.requests).map((key) => {
+          const mergedData = Object.assign({}, res.formData, props.modelValue);
+          formValues.value = mergedData;
+          context.emit("update:modelValue", { ...formValues.value });
+          formInitValues.value = Object.assign({}, res.formData);
+          const requestPromises = Object.keys(res.requests).map((key) => {
             return res.requests[key]();
           });
-          formInitValues.value = Object.assign({}, res.formData);
-          if (requests2 && requests2.length > 0) {
-            await Promise.allSettled(requests2).catch((err) => {
-              console.warn(err);
+          if (requestPromises.length > 0) {
+            await Promise.allSettled(requestPromises).catch((err) => {
+              console.warn("Form source data fetch error:", err);
             });
           }
-          formValues.value = Object.assign({}, res.formData);
-          if (needOverWriteForm.value) {
-            overWrite(needOverWriteForm.value);
-            needOverWriteForm.value = {};
+          if (Object.keys(needOverWriteForm.value).length > 0) {
+            overWrite();
           }
           vue.nextTick(() => {
             isFirstInit.value = false;
           });
+        } else {
+          Object.keys(res.formData).forEach((key) => {
+            if (!hasOwnPropertySafely(formValues.value, key)) {
+              formValues.value[key] = res.formData[key];
+            }
+          });
         }
+        const newFormKeyAndName = res.formKeyAndName || {};
+        Object.keys(formKeyAndName).forEach((key) => {
+          if (!hasOwnPropertySafely(newFormKeyAndName, key)) {
+            delete formKeyAndName[key];
+          }
+        });
+        for (const key in newFormKeyAndName) {
+          if (formKeyAndName[key] !== newFormKeyAndName[key]) {
+            formKeyAndName[key] = newFormKeyAndName[key];
+          }
+        }
+        formContent.value = res.formContent;
       };
+      vue.watch(
+        () => props.modelValue,
+        (newVal) => {
+          if (newVal && !isEqual(newVal, formValues.value)) {
+            Object.assign(formValues.value, newVal);
+          }
+        },
+        { deep: true }
+      );
+      vue.watch(
+        formValues,
+        (newVal) => {
+          context.emit("update:modelValue", { ...newVal });
+        },
+        { deep: true }
+      );
       const collectFormContent = (data = []) => {
         const res = {
           formContent: [],
@@ -2152,6 +2177,50 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
       };
     },
     methods: {
+      /**
+      * 异步提交方法，供父组件通过 ref 调用
+      * @returns Promise<{ valid: boolean, formValues: any, sourceData?: any }>
+      */
+      async asyncSubmit() {
+        const formRef = this.$refs.FlyFormRef;
+        try {
+          const valid = await formRef.validate();
+          let returnData = {
+            valid: true,
+            formValues: { ...this.formValues }
+          };
+          if (this.needReturnSourceKeys && this.needReturnSourceKeys.length > 0) {
+            let templateSourceData = {};
+            this.needReturnSourceKeys.forEach((key) => {
+              templateSourceData[key] = this.sourceData[key];
+            });
+            returnData.sourceData = templateSourceData;
+          }
+          return returnData;
+        } catch (errors) {
+          if (this.$props.model === "search") {
+            const errorMsg = [];
+            const errorNames = [];
+            Object.keys(errors).forEach((key) => {
+              const item = errors[key][0];
+              errorMsg.push(item.message);
+              errorNames.push(this.formKeyAndName[key]);
+            });
+            if (this.$props.singleStepErrorTip) {
+              ElMessage.error(errorMsg[0]);
+            } else {
+              ElMessage.error(
+                `请完善${errorNames.length > 0 ? errorNames.join("、") : "查询条件"}`
+              );
+            }
+          }
+          return {
+            valid: false,
+            formValues: this.formValues,
+            errors
+          };
+        }
+      },
       async submit() {
         const formRef = this.$refs.FlyFormRef;
         await formRef.validate((valid, errors) => {
@@ -2159,7 +2228,6 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
             valid,
             formValues: this.formValues
           };
-          console.log(this.needReturnSourceKeys);
           if (this.needReturnSourceKeys && this.needReturnSourceKeys.length > 0) {
             let templateSourceData = {};
             this.needReturnSourceKeys.forEach((key) => {
@@ -2199,7 +2267,6 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
         }
       },
       getComponentRefByKey(key) {
-        console.log(key);
         if (key && typeof key === "string") {
           try {
             return this.$refs[key];

package/package.json

@@ -1,26 +1,12 @@
 {
 	"name": "fly-el-form",
-	"version": "0.0.30",
+	"version": "0.0.32",
 	"private": false,
 	"author": "flycat",
 	"type": "module",
 	"description": "A Vue 3 library for building dynamic forms with Element Plus",
 	"main": "lib/fly-el-form.umd.js",
 	"module": "lib/fly-el-form.es.js",
-	"exports": {
-		".": {
-			"import": "./lib/fly-el-form.es.js",
-			"require": "./lib/fly-el-form.umd.js"
-		},
-		"./useFormValues": {
-			"import": "./lib/fly-el-form.es.js",
-			"require": "./lib/fly-el-form.umd.js"
-		},
-		"./style.css": {
-			"import": "./lib/style.css",
-			"require": "./lib/style.css"
-		}
-	},
 	"files": [
 		"lib"
 	],