列表按钮点击弹出自定义页面，修改数据并回显到列表中

介绍

列表添加自定义按钮，点击按钮弹出自定义页面，页面中输入数据，确定之后把数据保存到数据库中并刷新列表

详细步骤

1.按钮配置中添加自定义按钮；

2.添加按钮的点击(click)事件；

3. 编写JS,实现业务逻辑：弹出自定义页面，并将输入的数据保存到数据库中；

4. 页面效果；

相关代码

const {Modal,Form,Input} = JE.useUi();
const {h,createVNode,ref,reactive}= JE.useVue();
const {ajax,encode, decode} = JE.useUtils();
const {$func} = EventOptions;
const funcGrid=$func.getFuncGrid();
const records = funcGrid.getSelectedRecords();
const ids=new Array();

debugger;
if(records && records.length>0){
    const errors=[];
    records.forEach((record)=>{
        const xmName=record.JDAL_XMMC;
        const fwName=record.JDAL_XMZT_NAME;
        const fwId=record.JE_DEMO_JDAL_ID;
        if(record.JDAL_XMZT_CODE != 'ZXZ' ){
            errors.push("项目["+xmName+"]，处于["+fwName+"]状态，无法终止!");
        }
        ids.push(fwId);
    })
    if(errors.length>0){
         Modal.alert(errors.join("<br/>"), "error");
         return false;
    }
}else{
    Modal.alert("请选择需要终止的项目", "error");
    return false;
}

const formRef = ref('');
let formState = reactive({
    text: ''
});
const sqlVnodeArr = [{
    id: 'ddyy',
    text: '原因',
    placeholder: '填写原因',
    required: true,
    requiredText: '该输入项为必填项！',
}];

const labelCol1 = { style: 'width:100px;' };
const Vnode = sqlVnodeArr.map((item)=>{
    return  h(Form.Item, {label: item.text,name: item.id,rules:[{ required: item.required, message: item.requiredText }]}, createVNode(Input.TextArea,{placeholder:item.placeholder, value: formState[item.id], height: 200,allowClear: true,
      'onUpdate:value': function (val) {
            formState[item.id] = val;
           }}))
})
//表单弹出
const renderContent = ()=> {return h(Form,{ref:formRef,name: 'form', size: 'small',autocomplete:"off",model: formState,labelCol: labelCol1,
},Vnode)};
Modal.alert({
    title: '终止项目',
    height: 'auto',
    width: '600px',
    content:renderContent,
    buttonAlign: 'center',
    cancelButton: true,
    okButton: {
      closable: false,
      handler: ({$modal})=>{
        formRef.value.validate().then(()=>{
            debugger;
            const ddyy=formState.ddyy;
            const strDatasReal=new Array();
            ids.forEach((id)=>{
                debugger;
                var mapData = {JDAL_ZFYY:ddyy,JE_DEMO_JDAL_ID:id,JDAL_XMZT_CODE:'YZZ',JDAL_XMZT_NAME:'已终止'}
                strDatasReal.push(mapData);
            })

            ajax({
                url:"/je/common/doUpdateList",
                params:{
                     funcCode: "JE_DEMO_JDAL_TWO"
                    ,tableCode: "JE_DEMO_JDAL"
                    ,strData: JSON.stringify(strDatasReal)
                },
                headers:{pd:"demo"}
            }).then((resObj)=>{
                debugger;
                if(resObj.success){
                    Modal.notice("操作成功", "success");
                    funcGrid.setAllCheckboxRow(false);
                    funcGrid.triggerSelectChange({records:[]});
                    funcGrid.store.reload();
                    $modal.close();
                }else{
                    Modal.alert(resObj.obj, "error");
                }
            })
        }).catch((error) => {
            console.error(error);
        });
      },
    }
});