动态表单代码

create代码相关

import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import { formInit, dataInit, setFormMap } from './dy-form.ts';
import { fApiInstall, getFields, getformData, getValue } from './form-config/fApi.js';
import { cloneDeep, isEmpty } from 'lodash';
@Component
export default class DynamicForm extends Vue {
    loading: boolean = false;
    formCreateRule: CommonTypes.PlaneObject = {};
    formCustom: object = {};
    formRuleLocal: Array = [];
    formMormalStyle: object = this.normalStyle;
    fields: Function = () => getFields();
    formData: Function = () => getformData();
    getValue: Function = key => getValue(key);
    @Prop() formNames: string;
    @Prop() ruleCustom: Array [];
    @Prop() normalStyle: object;
    @Prop() formRule: Array [];
    @Watch('formRule')
    formRuleChanged() {
        this.install();
    }
    @Watch('formRuleLocal', { deep: true })
    synchro(val) {
        this.formCustom = setFormMap(val);
    }
    install() {
        this.formRuleLocal = cloneDeep(this.formRule);
        this.formCreateRule = dataInit(this.formRuleLocal);
        this.formCustom = setFormMap(this.formRuleLocal);
        fApiInstall(this);
    }
    get formInstallChecked() {
        return !isEmpty(this.formRule) && isEmpty(this.formCustom);
    }
    getFormRule() {
        return this.formRuleLocal;
    }
    getFormValue() {
        return setFormMap(this.formRuleLocal);
    }
    validate () {
        const baseInfoForm: any = this.$refs.formCreate;
        let checkResult: boolean = false;
        baseInfoForm.validate(valid => {
            if (valid) {
                checkResult = true;
            }
        });
        return checkResult;
    }
    mounted() {
        if (this.formInstallChecked) this.install(); // 处理表单在显示状态切换时，数据不能正常渲染
    }
    render(h) {
        const self = this;
        return formInit(h, self, this.formMormalStyle);
    }
}
</script>

dy-form.js

<script lang="tsx">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import { formInit, dataInit, setFormMap } from './dy-form.ts';
import { fApiInstall, getFields, getformData, getValue } from './form-config/fApi.js';
import { cloneDeep, isEmpty } from 'lodash';
@Component
export default class DynamicForm extends Vue {
    loading: boolean = false;
    formCreateRule: CommonTypes.PlaneObject = {};
    formCustom: object = {};
    formRuleLocal: Array = [];
    formMormalStyle: object = this.normalStyle;
    fields: Function = () => getFields();
    formData: Function = () => getformData();
    getValue: Function = key => getValue(key);
    @Prop() formNames: string;
    @Prop() ruleCustom: Array [];
    @Prop() normalStyle: object;
    @Prop() formRule: Array [];
    @Watch('formRule')
    formRuleChanged() {
        this.install();
    }
    @Watch('formRuleLocal', { deep: true })
    synchro(val) {
        this.formCustom = setFormMap(val);
    }
    install() {
        this.formRuleLocal = cloneDeep(this.formRule);
        this.formCreateRule = dataInit(this.formRuleLocal);
        this.formCustom = setFormMap(this.formRuleLocal);
        fApiInstall(this);
    }
    get formInstallChecked() {
        return !isEmpty(this.formRule) && isEmpty(this.formCustom);
    }
    getFormRule() {
        return this.formRuleLocal;
    }
    getFormValue() {
        return setFormMap(this.formRuleLocal);
    }
    validate () {
        const baseInfoForm: any = this.$refs.formCreate;
        let checkResult: boolean = false;
        baseInfoForm.validate(valid => {
            if (valid) {
                checkResult = true;
            }
        });
        return checkResult;
    }
    mounted() {
        if (this.formInstallChecked) this.install(); // 处理表单在显示状态切换时，数据不能正常渲染
    }
    render(h) {
        const self = this;
        return formInit(h, self, this.formMormalStyle);
    }
}
</script>

common.js

export const DY_FORM = {
    DY_FORM_ITEM: 'mtd-form-item',
    DY_INPUT: 'mtd-input',
    DY_TEXTAREA: 'mtd-textarea',
    DY_SELECT: 'mtd-select',
    DY_OPTIONS: 'mtd-option',
    DY_SWITCH: 'mtd-switch',
    DY_RADIO_GROUP: 'mtd-radio-group',
    DY_RADIO: 'mtd-radio',
    DY_CHECKBOX: 'mtd-checkbox',
    DY_TOOLTIP: 'mtd-tooltip',
    DY_CASCADER: 'mtd-cascader'
};
export const DY_FORM_STYLE = {
    DY_INPUT_STYLE: ['select-width'],
    DY_SELECT_STYLE: [],
    DY_SWITCH_STYLE: [],
    DY_CHECKBOX_STYLE: [],
    DY_CASCADER_STYLE: [],
    DY_RADIO_GROUP_STYLE: [],
    DY_TOOLTIP_STYLE: ['demo-form-tooltip'],
    TOOLTIP_ICON_STYLE: ['mtdicon mtdicon-question-circle-o demo-icon']
};
export const DY_RORMITEM_COMMON__STYLE = { // 组件默认样式，用户单独配置则覆盖
    DY_FORM_LABLE: 180,
    DY_FORM_WIDTH: 270,
};

tool.js

import { service } from '@/utils';
export const stringToBoolean = str => checkBoolen(str);
const checkBoolen = R.cond([
    [R.equals('false'), R.always(false)],
    [R.equals('true'), R.always(true)],
    [R.T, temp => temp],
]);
export const propsBoolenChange = props => {
    for (const key in props) {
        props[key] = checkBoolen(props[key]);
    }
    return props;
};
export const remoteMethod = (query, ctx) => {
    // remote 为 true
    const params = {
        mis: query || ''
    };
    service.get('/setting/api/users/search', { params }).then((res) => {
        const { code, data } = res;
        if (code === 0) {
            ctx.options = data;
        }
    });
};

fapi

import { get } from 'lodash';
let self = null;
const field = items => items.field;
export const getFields = () => R.map(field, get(self, 'formRule', []));
export const fApiInstall = ctx => self = ctx;
export const getformData = () => self.formCustom;
export const getValue = key => get(self.formCustom, key, '');