平台通过事件弹出自定义表单页面

介绍

通过事件与平台提供的UI组件，规划自定义表单，包括文本框、单选框、人员选择器、查询选择、关联选择、树形选择、下拉框、文本域等组件。

详细步骤

1. 在一个功能列表或表单上添加按钮，并给按钮授权

2. 注册按钮的单击(click)事件

3. 编写JS

4. 最终效果

相关代码

const {
    $func, // 功能对象
    button, // 按钮对象
} = EventOptions;
const {Modal,Form,Input,Radio,InputSelect,Select,DatePicker,InputNumber} = JE.useUi();
const {h,createVNode,ref,reactive}= JE.useVue();
const { encode, decode} = JE.useUtils();
const formRef = ref('');
let formState = reactive({
    "XM": "",
    "IPHONE": "",
    "SEX": "",
    "PRICE":"",
    "SLR":"",//受理人
    "WLMC":"",//物料名称
    "BMS":"",//部门树形选择
    "DDZT_CODE":"",//订单状态下拉选择
    "DDZT_NAME":"",
     "CREATETIME":"",
    "ADDRESS": "",
    "DESC": "",//描述
})
//回显数据到弹出页面
// Object.assign(formState, decode(value));//可以不要
const htmlArr = [{
    name: 'XM',
    text: '姓名',
    placeholder: '请输入姓名',
    required: true,
    requiredText: '该输入项为必填项！',
    type:Input,
},{
    name: 'IPHONE',
    text: '手机号',
    placeholder: '请输入手机号',
    required: true,
    requiredText: '该输入项为必填项！',
    type:Input,
},{
    name: 'PRICE',
    text: '价格',
    required: true,
    requiredText: '请输入价格',
    style:{ width: '100%' },
    type:InputNumber,//数值框组件
},{
    name: 'SEX',
    text: '性别',
    required: true,
    requiredText: '请选择性别',
    type:Radio.Group,// 单选框组件
    configInfo:'JE_RBAC_SEX,SEX,code,S'
},{
    name: 'SLR',
    text: '受理人',
    placeholder: '请选择受理人',
    required: true,
    requiredText: '请选择受理人',
    type:InputSelect.User,//人员选择组件
    configInfo:'JE_RBAC_VUSERQUERY,SLR,USER_NAME,S'
},{
    name: 'WLMC',
    text: '物料名称',
    placeholder: '请选择物料名称',
    required: true,
    requiredText: '请选择物料名称',
    type:InputSelect.Grid, //关联选择组件
    configInfo:'VERSION_WL,WLMC,WL_WLMC,S'
},{
    name: 'BMS',
    text: '部门',
    placeholder: '请选择部门',
    required: true,
    requiredText: '请选择部门',
    type:InputSelect.Tree,
    configInfo:'JE_RBAC_DEPTTREE,BMS,text,S'
},{
    name: 'DDZT_CODE',
    text: '订单状态',
    placeholder: '请选择订单状态',
    required: true,
    requiredText: '请选择订单状态',
    type:Select,
    // options: [{label:'1',value:'1'},{label:'2',value:'2'}],//自定义数据
    configInfo:'VIDEO_DEMO_DDZT,DDZT_NAME~DDZT_CODE,text~code,S'
},{
    name: 'CREATETIME',
    text: '时间',
    placeholder: '请选择时间',
    required: true,
    type:DatePicker,//时间组件
    picker:"dateTime",
    style:{ width: '100%' }
},{
    name: 'ADDRESS',
    text: '地址',
    placeholder: '请输入地址',
    required: false,
    type:Input
},{
    name: 'DESC',
    text: '描述',
    placeholder: '请填写描述信息',
    height: 100,
    type:Input.TextArea
}]

const labelCol1 = { style: 'width:90px;' };
const Vnode = htmlArr.map((item)=>{
    return  h(Form.Item, {
        label: item.text,
        name: item.name,
            rules:[{
                required: item.required,
                message: item.requiredText
            }]
        }, createVNode(item.type,{
            value: formState[item.name],
            height:item.height,
            style:item.style,
            placeholder:item.placeholder,
            configInfo:item.configInfo, //配置信息
            // options: item.options,//下拉框自定义数据时必须写这个，如果用字典就用configInfo就可以
            picker:item.picker,
            allowClear: true,//清空按钮开启
            'onUpdate:value': function (val) {
                formState[item.name] = val;
            }
        })
    )
})
//表单弹出
const renderContent = ()=> {
    return h(Form,{
        ref:formRef,
        layout:'vertical',//布局方式：垂直  也可以不写
        name:'form',
        size: 'small',
        autocomplete:"off",
        model: formState,
        labelCol: labelCol1,
},Vnode)};
Modal.alert({
    title: '自定义页面',
    width: '600px',
    height: 'auto',
    content:renderContent,
    cancelButton: true,
    buttonAlign:'center',//按钮居中
    okButton: {
        closable: false,
        handler: ({$modal})=>{
            formRef.value.validate().then(()=>{
                // $func.getFuncForm().getModel()[key] = encode(formState);//可以不要
                //将数据插入列表,然后做一系列业务处理
                // $func.getFuncGrid().store.insert(formState);
                $modal.close();
            }).catch((error) => {
                console.error(error);
            });
        },
    }
});