From a600126b80bd91fff84b0033bf471dc390aebfca Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 11 Aug 2022 11:15:46 +0800
Subject: [PATCH] 实现组件，echarts 图表小程序版本

---
 forms/form/CForm.vue |   72 +++++++++++++++++++++++++++++++-----
 1 files changed, 62 insertions(+), 10 deletions(-)

diff --git a/forms/form/CForm.vue b/forms/form/CForm.vue
index 365fcac..3cb1754 100644
--- a/forms/form/CForm.vue
+++ b/forms/form/CForm.vue
@@ -1,5 +1,5 @@
 /**
- * CForm
+ * CForm - 表单套装组件，套件的主体
  * @author Tevin
  */
 
@@ -8,7 +8,7 @@
         class="c-form"
         @submit="evt=>handleSubmit()"
     >
-        <slot :formData="formData" />
+        <slot :formRes="formRes" />
     </form>
 </template>
 
@@ -19,28 +19,42 @@
 export default {
     name: 'CForm',
     props: {
+        // 表单数据主体
         formData: Object,
+        // 表单项变化的回调
+        //   回调传参只有单项数据
         onChange: Function,
+        // 表单完成的回调
+        //   提交且通过表单验证后调用，不通过验证不调用
+        //   回调传参包含整个表单数据
         onFinish: Function,
     },
     data() {
         return {
+            formRes: {
+                formData: this.formData,
+            },
             validators: {},
         };
     },
     methods: {
         handleSubmit() {
             const checklist = [];
-            Object.keys(this.validators).forEach((key) => {
-                checklist.push(this.validators[key]());
+            // 所有项验证
+            Object.keys(this.validators).forEach(key => {
+                // 仍有效的验证器
+                if (this.validators[key]) {
+                    checklist.push(this.validators[key]());
+                }
             });
-            Promise.all(checklist).then((validations) => {
+            Promise.all(checklist).then(validations => {
                 for (let validation of validations) {
+                    // 第一个不通过项提示
                     if (!validation.passed) {
                         Taro.showToast({
                             title: validation.msg,
                             icon: 'none',
-                            mask: true,
+                            mask: false,
                             duration: 2000,
                         });
                         return;
@@ -50,15 +64,53 @@
                 this.onFinish && this.onFinish();
             });
         },
+        preCheckValidators(keys, callback) {
+            const checklist = [];
+            // 从选定的项中验证
+            keys.forEach(key => {
+                // 效的验证器
+                if (this.validators[key]) {
+                    checklist.push(this.validators[key]('msgOnly'));
+                }
+            });
+            Promise.all(checklist).then(validations => {
+                for (let validation of validations) {
+                    // 第一个不通过项提示
+                    if (!validation.passed) {
+                        Taro.showToast({
+                            title: validation.msg,
+                            icon: 'none',
+                            mask: false,
+                            duration: 2000,
+                        });
+                        // 检查失败
+                        callback && callback(false);
+                        return;
+                    }
+                }
+                // 所有检查通过
+                callback && callback(true);
+            });
+        },
+        $submit() {
+            this.handleSubmit();
+        },
     },
     mounted() {
-        this.formData.$handleChange = (evt = []) => {
-            Object.keys(evt).forEach((key) => {
-                this.formData[key] = evt[key];
+        // 当表单项变化时
+        this.formRes.$handleChange = (evt = []) => {
+            Object.keys(evt).forEach(key => {
+                // 直接改值
+                if (typeof this.formRes.formData[key] === 'undefined') {
+                    this.$set(this.formRes.formData, key, evt[key]);
+                } else {
+                    this.formRes.formData[key] = evt[key];
+                }
             });
             this.onChange && this.onChange(evt);
         };
-        this.formData.$regItemValidator = (name, cb) => {
+        // 注册表单验证器
+        this.formRes.$regItemValidator = (name, cb) => {
             this.validators[name] = cb;
         };
     },

--
Gitblit v1.9.1