wordpress 封装 app,保定seo排名收费,搬瓦工一键WordPress,番禺建设网站JeecgBoot 3.6.1实现Modal对话框
vue使用的是3.0版本 文章目录 JeecgBoot 3.6.1实现Modal对话框前言一、列表页面关键代码示例二、textAuditModal.vue代码示例三、test.api.ts总结 前言
在工作中#xff0c;有一个需求#xff0c;要求#xff0c;在数据列表页#xff0c;…JeecgBoot 3.6.1实现Modal对话框
vue使用的是3.0版本 文章目录 JeecgBoot 3.6.1实现Modal对话框前言一、列表页面关键代码示例二、textAuditModal.vue代码示例三、test.api.ts总结 前言
在工作中有一个需求要求在数据列表页实现点击最右侧的审批按钮出现弹窗弹窗内容有本条数据的所有内容和审核选项选项值有【审核通过】【审核驳回】两个选项如果点击【审核驳回】按钮下方要出现驳回原因录入框示例图片如下
图片示例图一为列表图二为选择【审核驳回】图三为选择【审核通过】 点击审核示例此处页面样式有点问题
一、列表页面关键代码示例
templatediv!--操作栏--!-- 此处就是我们列表右侧所要呈现出来的点击按钮--template #action{ record }TableAction :actionsgetTableAction(record) //template!-- 审批表单 --test-modal registerregister successtestFun v-bind$attrs/purchase-order-process-audit-modal/div
/templatescript langts setupimport {******} // 此处就是我们项目当中的一些引用// 此处有个比较关键的点我们要再次引入我们所要创建的modal对话框模板// 这就是我们的modal模板它跟上边的test-modal相对应// 最好使用快捷键来写这两处代码以防止错误发 生并且再此之前要把textAuditModal.vue新建好import testModalfrom /views/*/textAuditModal.vue;// 接下来就是一些简单的注册modal如果有不懂请参照一个简单的CREUD就会明白const [register, { openModal: openModal1, closeModal: closeModal1, setModalProps }] useModal(); // 这个需要注意为我们下边得代码服务//注册table数据 也是同理/*** 操作栏* 此处方法就是控制我们右侧的按钮是否显示或者要显示什么* 详情页得方法不做阐述*/function getTableAction(record) {if (record.state 2) {return [{label: 详情,onClick: testDetail.bind(null, record),},{label: 审批,onClick: testAudit.bind(null, record),},];} else {return [{label: 详情,onClick: testDetail.bind(null, record),},];}}/*** 审批* 此处我们需要额外注意我们在此要新建一个openModal1 因为项目中自带封装好得新增、编辑modal满足不 了我们现在的开发场景*/function testAudit(record: Recordable) {openModal1(true, {record, // 数据isUpdate: true,// 在 JeecgBoot 中isUpdate 是用于判断当前操作是否为更新修改数据的一个标识showFooter: true,// 是一个用于控制页面底部区域显示与隐藏的标识此处我们需要开着查看得时候为false});}/*** 此处为弹框页面点击确定后通过本页面success中绑定的方法进行回调*/function testFun(data) {// 此处为我们表单区域success中所写得方法examineTestEdit(data, handleSuccess);}/script/*** 成功回调*/function failSuccess() {(selectedRowKeys.value []) reload();}
二、textAuditModal.vue代码示例
templateBasicModal v-bind$attrs registerregisterModal :width800 title审批详情 oksubmitTestBasicForm registerregisterForm /diva-forma-rowa-col flex2a-form-item label审批状态 :label-col{ style: { width: 100px, fontWeight: bolder } }a-select refselect v-model:valuestate :optionsstateOptions/a-select/a-form-item/a-col/a-rowa-row typeflex v-showstate 4a-col flex2a-form-item label驳回原因 :label-col{ style: { width: 100px, fontWeight: bolder } }a-textareav-model:valuereason:maxlength100aria-placeholder请输入驳回原因:auto-size{ minRows: 4, maxRows: 6 }styleborder: 1px solid #d9d9d9wrapsoft/a-textarea/a-form-item/a-col/a-row/a-form/div/BasicModal
/templatescript langts setupimport {******} // 此处就是我们项目当中的一些引用// Emits声明 请参照新增编辑modal模板中得写法//表单赋值const [registerModal, { setModalProps, closeModal }] useModalInner(async (data) {//重置表单 请参照新增编辑modal模板中得写法formData.id data.record.id;// 这块要着重注意不然可能拿不到数据ID});// 表单赋值 审核状态state1_审核通过 2_审核不通过const state ref(1),reason ref(),testId ref();const stateOptions refSelectProps[options]([{ value: 1, label: 审批通过 },{ value: 2, label: 审批驳回 },]);const userStore useUserStore();const formData reactiveRecordstring, any({state: state,reason: reason,id: testId,});/*** 弹框中点击确定按钮*/function submitTest() {closeModal();//关闭弹窗//回调父页面的success绑定的方法emit(success, formData);}
/script
三、test.api.ts
import {******} // 此处就是我们项目当中的一些引用
enum Api {// 此处为我们得后端API接口地址examineTestEdit /testDemo/examineTestEdit,
}/*** 审核* param params*/
export const examineTestEdit (params, handleSuccess) {return defHttp.post({ url: Api.examineTestEdit, params }, { joinParamsToUrl: true }).then(() {failSuccess();// 此处会回调到我们List页面中得此方法,为我们表单区域中配置得方法名用于操作之后刷新列表});
};总结
道阻且长一起加油哦
