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

Tevin

2020-12-01 b29ed998189c3de5e408f37d61802dfa30e4f9a8

 forms/form/CFormItem.vue

@@ -6,7 +6,7 @@

<template>
    <view class="c-form-item">
        <slot :itemData="itemData" />
        <slot :itemRes="itemRes" />
    </view>
</template>

@@ -21,7 +21,7 @@
        label: String,
        required: Boolean,
        rules: Array,
        formData: Object,
        formRes: Object,
    },
    data() {
        return {
@@ -29,9 +29,9 @@
        };
    },
    computed: {
        itemData() {
        itemRes() {
            return {
                formData: this.formData,
                formData: this.formRes.formData,
                name: this.name,
                label: this.label,
                required: this.isRequired,
@@ -71,10 +71,10 @@
                }
            }
            // 未改变值不触发
            if (this.formData[this.name] === evt) {
            if (this.formRes.formData[this.name] === evt) {
                return;
            }
            this.formData.$handleChange({
            this.formRes.$handleChange({
                [this.name]: evt,
            });
        },
@@ -83,7 +83,7 @@
        this.$nextTick(() => {
            // 未设置验证
            if (!this.required && !this.rules) {
                this.formData.$regItemValidator(this.name, () => {
                this.formRes.$regItemValidator(this.name, (validateType) => {
                    this.error = false;
                    return Promise.resolve({
                        name: this.name,
@@ -105,10 +105,10 @@
                validator.messages(validateMsgs);
                // 注册验证
                let errTimer = null;
                this.formData.$regItemValidator(this.name, () => {
                this.formRes.$regItemValidator(this.name, (validateType) => {
                    return validator
                        .validate({
                            [this.name]: this.formData[this.name],
                            [this.name]: this.formRes.formData[this.name],
                        })
                        .then(
                            (res) => {
@@ -119,11 +119,13 @@
                                };
                            },
                            ({ errors, fields }) => {
                                this.error = true;
                                clearTimeout(errTimer);
                                errTimer = setTimeout(() => {
                                    this.error = false;
                                }, 5000);
                                if (validateType !== 'msgOnly') {
                                    this.error = true;
                                    clearTimeout(errTimer);
                                    errTimer = setTimeout(() => {
                                        this.error = false;
                                    }, 5000);
                                }
                                return {
                                    name: this.name,
                                    passed: false,
@@ -139,7 +141,7 @@
        });
    },
    beforeDestroy() {
        this.formData.$regItemValidator(this.name, null);
        this.formRes.$regItemValidator(this.name, null);
    },
};
</script>