优化表单模块数据传递机制，不再污染数据源

Tevin

2020-12-01 b29ed998189c3de5e408f37d61802dfa30e4f9a8

 forms/form/CForm.vue

@@ -8,7 +8,7 @@
        class="c-form"
        @submit="evt=>handleSubmit()"
    >
        <slot :formData="formData" />
        <slot :formRes="formRes" />
    </form>
</template>

@@ -25,6 +25,9 @@
    },
    data() {
        return {
            formRes: {
                formData: this.formData,
            },
            validators: {},
        };
    },
@@ -32,10 +35,14 @@
        handleSubmit() {
            const checklist = [];
            Object.keys(this.validators).forEach((key) => {
                checklist.push(this.validators[key]());
                // 仍有效的验证器
                if (this.validators[key]) {
                    checklist.push(this.validators[key]());
                }
            });
            Promise.all(checklist).then((validations) => {
                for (let validation of validations) {
                    // 第一个不通过项提示
                    if (!validation.passed) {
                        Taro.showToast({
                            title: validation.msg,
@@ -50,19 +57,52 @@
                this.onFinish && this.onFinish();
            });
        },
        preCheckValidators(callback) {
            const checklist = [];
            Object.keys(this.validators).forEach((key) => {
                // 仍有效的验证器
                if (this.validators[key]) {
                    checklist.push(this.validators[key]('msgOnly'));
                }
            });
            Promise.all(checklist).then((validations) => {
                for (let validation of validations) {
                    // 跳过同意协议
                    if (validation.name === '$agreement') {
                        continue;
                    }
                    if (!validation.passed) {
                        Taro.showToast({
                            title: validation.msg,
                            icon: 'none',
                            mask: false,
                            duration: 2000,
                        });
                        // 检查失败
                        callback && callback(false);
                        return;
                    }
                }
                // 检查通过
                callback && callback(true);
            });
        },
    },
    mounted() {
        this.formData.$handleChange = (evt = []) => {
        // 当表单项变化时
        this.formRes.$handleChange = (evt = []) => {
            Object.keys(evt).forEach((key) => {
                if (typeof this.formData[key] === 'undefined') {
                    this.$set(this.formData, key, evt[key]);
                // 直接改值
                if (typeof this.formRes.formData[key] === 'undefined') {
                    this.$set(this.formRes.formData, key, evt[key]);
                } else {
                    this.formData[key] = evt[key];
                    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;
        };
    },