WebApp【公共组件库】@前端(For Git Submodule)
Tevin
2022-07-22 73def8718ea8920ca9e410a101298afcbea1549b
forms/form/CForm.vue
@@ -1,5 +1,5 @@
/**
 * CForm
 * CForm - 表单套装组件,套件的主体
 * @author Tevin
 */
@@ -8,38 +8,53 @@
        class="c-form"
        @submit="evt=>handleSubmit()"
    >
        <slot :formData="formData" />
        <slot :formRes="formRes" />
    </form>
</template>
<script>
import Taro from '@tarojs/taro';
import './cForm.scss';
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;
@@ -49,12 +64,50 @@
                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);
            });
        },
    },
    mounted() {
        this.formData.$handleChange = (evt) => {
        // 当表单项变化时
        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;
        };
    },