@caxa-form/core/src/components/formCreate.js

vue动态表单,助你轻松搞定表单|form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON. Supports 3 UI frameworks, and supports the generation of any Vue components. Built-in 20

import extend from '@caxa-form/utils/lib/extend';

const NAME = 'FormCreate';

export default function $FormCreate(FormCreate) {
    return {
        name: NAME,
        componentName: NAME,
        model: {
            prop: 'api'
        },
        provide() {
            return {
                $pfc: this,
            }
        },
        inject: {$pfc: {default: null}},
        props: {
            rule: {
                type: Array,
                required: true
            },
            option: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            extendOption: Boolean,
            value: Object,
            api: Object,
        },
        data() {
            return {
                formData: undefined,
                destroyed: false,
                validate: {},
                $f: undefined,
                isShow: true,
                unique: 1,
                renderRule: [...this.rule || []],
                updateValue: ''
            };
        },
        render() {
            return this.formCreate.render();
        },
        methods: {
            _refresh() {
                ++this.unique;
            },
            _renderRule() {
                this.renderRule = [...this.rule || []];
            },
            _updateValue(value) {
                if (this.destroyed) return;
                this.updateValue = JSON.stringify(value);
                this.$emit('update:value', value);
            }
        },
        watch: {
            value: {
                handler(n) {
                    if (JSON.stringify(n) === this.updateValue) return;
                    this.$f.setValue(n);
                },
                deep: true
            },
            option: {
                handler(n) {
                    this.formCreate.initOptions(n);
                    this.$f.refresh();
                },
                deep: true
            },
            rule(n) {
                if (n.length === this.renderRule.length && n.every(v => this.renderRule.indexOf(v) > -1)) return;
                this.formCreate.$handle.reloadRule(n);
                this._renderRule();
            }
        },
        beforeCreate() {
            const {rule, option, value} = this.$options.propsData;
            this.formCreate = new FormCreate(this, rule, option);
            extend(this.formCreate.options.formData, value || {});
            Object.keys(this.formCreate.prop).forEach(k => {
                extend(this.$options[k], this.formCreate.prop[k]);
            })
        },
    }
}