ed-frame-vue/lib/packages/EasyDataForm/hooks/useForm.js

easydata 基础组件

import {getControlProp}        from "../../../utils/useBusiness";
import * as popupComponentList from '../../../popup'
import {postAction}            from '../../../api'
import {DefaultUrl}            from "../../../api/easyData";

export default {
    data() {
        return {
            triggerControls: {},
            // 选择弹窗组件列表
            popupComponents: [],
        }
    },
    methods: {
        /**
         * @description 配置form表单校验规则
         */
        initRules() {
            return new Promise((resolve, reject) => {
                this.formRules = {}
                if (this.controlInfos) {
                    if (this.$refs.EasyDataForm) {
                        this.$refs.EasyDataForm.clearValidate()
                    }
                    this.controlInfos.forEach(async control => {
                        let controlProp = getControlProp(control, this.controlProps);
                        control['isShow'] = this.isShowItem(control)

                        // 添加验证
                        if (!this.formRules[control.controlName]) {
                            this.formRules[control.controlName] = []
                        }

                        //控件基础属性
                        this.formRules[control.controlName].push({
                            required: this.getFormItemRequired(control),
                            message: '请输入' + control.label
                        })

                        // 设置控件属性 - 最大长度
                        if (controlProp.maxLength) {
                            this.formRules[control.controlName].push({
                                max: controlProp.maxLength,
                                message: '最大长度' + controlProp.maxLength
                            })
                        }

                        // 设置控件属性 - 最小长度
                        if (controlProp.minLength) {
                            this.formRules[control.controlName].push({
                                min: controlProp.minLength,
                                message: '最小长度' + controlProp.minLength
                            })
                        }

                        // 设置验证表达式
                        if (controlProp.validateExpression) {
                            this.formRules[control.controlName].push({
                                pattern: eval(controlProp.validateExpression),
                                message: control.label + '格式不正确'
                            })
                        }
                        // }
                        // 设置控件默认组件
                        await this.initFormComp(control, controlProp)
                    })
                    resolve(true)
                }
            })
        },
        /**
         * @param control
         * @param controlProp
         * @description 表单初始组件装填
         */
        async initFormComp(control, controlProp) {
            //为弹窗时，动态加载组件
            if (control.controlType === 'popup') {
                if (controlProp) {
                    let templateName = controlProp.compType === 'system' ? controlProp.popupMode : controlProp.component
                    if (templateName) {
                        let componentName = templateName + control.id
                        this.popupComponents[componentName] = {
                            component: popupComponentList[templateName] ? popupComponentList[templateName] : templateName,
                            ref: componentName,
                            control: control,
                            controlProp: controlProp
                        }
                    }
                }
            }

            //写入触发控件
            if (controlProp && controlProp.dataSource && controlProp.dataSource.length > 0) {
                controlProp.dataSource.forEach(ds => {
                    if (ds.triggerControl) {
                        if (!this.triggerControls[control.controlName]) {
                            this.triggerControls[control.controlName] = []
                        }
                        this.triggerControls[control.controlName].push({
                            trigger: ds.triggerControl,
                            value: ds.value
                        })
                    }
                })
            }
        },

        /**
         * @name validateForm
         * @returns {Promise<unknown>}
         * @description 验证form表单
         */
        validateForm() {
            return new Promise(async (resolve, reject) => {
                try {
                    await this.$refs.EasyDataForm.validate();

                    //查询参数
                    this.controlInfos.forEach((control) => {
                        //获取数据
                        if (!control.isInput && control.defaultValue && control.isShow) {
                            this.formModel[control.controlName] = control.defaultValue === 'true' ? true : control.defaultValue === 'false' ? false : control.defaultValue
                        }

                        //判断文件是否为空
                        if (control.controlType === 'upload' && control.isRequired && control.isShow) {
                            if (!this.formModel[control.controlName] || this.formModel[control.controlName].length === 0) {
                                reject('请上传' + control.label);
                            }
                        }
                    })
                    resolve()
                } catch (e) {
                    reject(e)
                }
            })
        },

        /**
         * 计算联动公式
         */
        clickExpression(controlInfo, controlProp) {
            const {expression} = controlProp
            if (!expression) {
                this.$message.error('请配置联动公式')
                return;
            }
            this.$set(this.formModel, controlInfo.controlName, eval(expression));
        },

        /**
         * 查询表单数据
         */
        async queryFormData() {
            return new Promise((resolve, reject) => {
                let url = this.loadQuery.url || DefaultUrl.selectData
                let param = Object.assign({dataSourceName: this.dataSourceName}, this.loadQuery.param)
                postAction(url, param).then(res => {
                    if (res.success && res.data) {
                        resolve(res.data)
                    }
                }).catch(e => {
                    reject(e)
                })
            })
        }
    }
}