for_client/src/plugins/HTableForm.js

import {createApp} from "vue/dist/vue.esm-bundler.js";
import {getTokenHeader} from '~src/api/request/header';
import {toParse} from "vue-utils-plus";
import {
    ElButton,ElTooltip,ElInput,ElDatePicker,ElUpload,
    ElInputNumber,ElTimePicker,ElSelect,ElOption,ElRadioGroup,
    ElRadio,ElCheckbox,ElCheckboxGroup
} from 'element-plus'
const components = {
    ElButton,ElTooltip,ElInput, ElDatePicker, ElUpload,
    ElInputNumber, ElTimePicker, ElSelect, ElOption, ElRadioGroup,
    ElRadio, ElCheckbox, ElCheckboxGroup
}

//表单渲染
export default class HTableForm {
    static createForm({template, tableForm, appId, onRight}) {
        const app = createApp({
            data() {
                return {
                    getTokenHeader: getTokenHeader(),
                    formData: tableForm,
                    formUploadLoading: false,
                }
            },
            template,
            components,
            watch: {
                tableForm: {
                    handler(obj) {
                        this.formData = obj
                    },
                    deep: true
                },
                formData: {
                    handler(obj) {
                        tableForm = obj
                    },
                    deep: true
                },
            },
            methods: {
                //鼠标右键事件
                RightClick(a,b,c,d,e,f,event) {
                    event.preventDefault();
                    const KeyName = event?.target?.getAttribute('keyname') || ''
                    if (onRight) {
                        onRight(event, KeyName)
                    }
                },
                getInformation() {}, //焦点事件
                datePickerChange(val,key) {
                    this.formData[key] = val
                },
                //上传进度
                uploadprogress() {
                    this.formUploadLoading = true
                },
                //上传完成
                formUploadSuccess(res,key) {
                    this.formUploadLoading = false
                    if (res.code === 200) {
                        this.formData[key] = res.data?.link || ''
                    }
                },
                //上传失败
                formUploadError() {
                    this.formUploadLoading = false
                },
                //格式错误
                formUploadExceed() {
                    this.formUploadLoading = false
                },
                //删除上传的文件
                delTableFormFile(key) {
                    this.formData[key] = ''
                },
                //失去焦点事件
                getRegularExpression(event, reg, msg) {
                    //const KeyName = event?.target?.getAttribute('keyname') || ''
                    //console.log(KeyName,reg,msg)
                }
            }
        })
        app.mount(appId)
        return app
    }
    //处理日期范围数据
    static setPickerKey(data) {
        const pickerKey = data['pickerKey'] || ''
        if (pickerKey) {
            const pickerKeys = pickerKey.split(',')
            for (let i = 0; i < pickerKeys.length; i++) {
                const val = data[pickerKeys[i]] || ''
                if (val) {
                    const dataVal = val.replace(/'/g,'"');
                    data[pickerKeys[i]] = toParse(dataVal) || []
                } else {
                    data[pickerKeys[i]] = []
                }
            }
        }
        return data
    }
}