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

介绍

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

详细步骤

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

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

3. 编写JS

4. 最终效果

效果1

相关代码

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);
            });
        },
    }
});

效果2

相关代码

const {
    $func, // 功能对象
    button, // 按钮对象
} = EventOptions;
const {Modal,Form,Input,Radio,InputSelect,Select,DatePicker,InputNumber,Upload,Col,Row} = JE.useUi(); 
const {h,createVNode,ref,reactive,watch}= JE.useVue();
const { encode, decode} = JE.useUtils();
const formRef = ref('');
let formState = reactive({
    "XM": "",
    "IPHONE": "",
    "SEX": "",
    "PRICE":"",
    "SLR":"",//受理人
    "SLR_ID":"",//受理人
    "WLMC":"",//物料名称
    "BMS":"",//部门树形选择
    "DDZT_CODE":"",//订单状态下拉选择
    "DDZT_NAME":"",
    "ADDRESS": "",
    "CREATETIME":"",
    "DESC": "",//描述
    "FILE":"",//文件
})

const htmlArr = [[{
    name: 'XM',
    text: '姓名',
    placeholder: '请输入姓名',
    required: true,
    requiredText: '该输入项为必填项！',
    disabled:true,
    id: 'xm-class',
    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~SLR_ID,USER_NAME~USER_ID,M',
    querys:[{cn:"and",code:"USER_NAME",value:"呼丽华",type:"="}]
},{
    name: 'WLMC',
    text: '物料名称',
    placeholder: '请选择物料名称',
    required: true,
    requiredText: '请选择物料名称',
    type:InputSelect.Grid, //关联选择组件
    configInfo:'VERSION_WL,WLMC,WL_WLMC,S',
    querys:[{cn:"and",code:"WL_WLMC",value:"台历",type:"="},{cn:"and",code:"WL_WLDJ",value:"30",type:"="}]
}],[{
    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,
    //  onChange: (val,item) => {
    //     debugger
    //     formState.DDZT_NAME = item.text || item.name
    // },

    // disabled:true,
    // options: [{label:'1',value:'1'},{label:'2',value:'2'}],
    configInfo:`VIDEO_DEMO_DDZT,DDZT_NAME~DDZT_CODE,text~code,S`
}],[{
    name: 'ADDRESS',
    text: '地址',
    placeholder: '请输入地址',
    required: false,
    type:Input
},{
    name: 'CREATETIME',
    text: '时间',
    placeholder: '请选择时间',
    required: true,
    type:DatePicker,
    // picker:"dateTime",
    picker:"month",
    getPopupContainer: () => document.body,
    style:{ width: '100%' }
}],[{
    name: 'DESC',
    text: '描述',
    placeholder: '请填写描述信息',
    height: 100,
    type:Input.TextArea
},{
    name: 'FILE',
    text: '文件',
    placeholder: '请选择文件',
    height: 100,
    type:Upload.UploadFiles,
    required: true,
    includeSuffix:['xls','png']
}],[{
    name: 'DDZT_NAME',
    text: '订单状态',
    placeholder: '',
    required: false,
    type:Input,

},{
    name: 'SLR_ID',
    text: '受理人ID',
    placeholder: '',
    required: false,
    type:Input
}]];

const labelCol1 = { style: {width:'200px','word-break':'break-all'} };
const Vnode = htmlArr.map((_items,index)=>{

    return h(Row, {}, _items.map(item => {
         return h(Col, {span: 12},  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,
                name: item.name,
                placeholder:item.placeholder,
                configInfo:item.configInfo, //配置信息
                model: formState,
                /*onChange: (val, item__)=>{
                    item.onChange && item.onChange(val,item__)
                },*/
                // options: item.options,
                querys:item.querys,
                disabled: item.disabled,
                getPopupContainer: item.getPopupContainer,
                picker:item.picker,
                includeSuffix:item.includeSuffix,
                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: '80%',
    height: '90%',
    content:renderContent,
    cancelButton: true,
    buttonAlign:'center',//按钮居中
    okButton: {
        closable: false,
        handler: ({$modal})=>{
            console.log(formState);
            debugger;
            formRef.value.validate().then(()=>{
                // $func.getFuncForm().getModel()[key] = encode(formState);//可以不要
                //将数据插入列表,然后做一系列业务处理
                // $func.getFuncGrid().store.insert(formState);
                $modal.close();
            }).catch((error) => {
                console.error(error);
            });
        },
    }
});