JeecgBoot 3.6.1实现Modal对话框,以为审核数据为例

2024-01-25 16:20

本文主要是介绍JeecgBoot 3.6.1实现Modal对话框,以为审核数据为例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

JeecgBoot 3.6.1实现Modal对话框

vue使用的是3.0版本

文章目录

  • JeecgBoot 3.6.1实现Modal对话框
  • 前言
  • 一、列表页面关键代码示例
  • 二、textAuditModal.vue代码示例
  • 三、test.api.ts
  • 总结

前言

在工作中,有一个需求,要求,在数据列表页,实现点击最右侧的审批按钮,出现弹窗,弹窗内容有本条数据的所有内容和审核选项,选项值有【审核通过】【审核驳回】两个选项,如果点击【审核驳回】按钮,下方要出现驳回原因录入框,示例图片如下:

图片示例:图一为列表,图二为选择【审核驳回】,图三为选择【审核通过】
在这里插入图片描述
点击审核示例(此处页面样式有点问题):
在这里插入图片描述
在这里插入图片描述

一、列表页面关键代码示例

<template><div><!--操作栏--><!-- 此处就是我们列表右侧所要呈现出来的点击按钮--><template #action="{ record }"><TableAction :actions="getTableAction(record)" /></template><!-- 审批表单 --><test-modal @register="register" @success="testFun" v-bind="$attrs"></purchase-order-process-audit-modal></div>
</template><script lang="ts" setup>import {******} // 此处就是我们项目当中的一些引用// 此处有个比较关键的点,我们要再次引入我们所要创建的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代码示例

<template><BasicModal v-bind="$attrs" @register="registerModal" :width="800" title="审批详情" @ok="submitTest"><BasicForm @register="registerForm" /><div><a-form><a-row><a-col flex="2"><a-form-item label="审批状态" :label-col="{ style: { width: '100px', fontWeight: 'bolder' } }"><a-select ref="select" v-model:value="state" :options="stateOptions"></a-select></a-form-item></a-col></a-row><a-row type="flex" v-show="state == 4"><a-col flex="2"><a-form-item label="驳回原因:" :label-col="{ style: { width: '100px', fontWeight: 'bolder' } }"><a-textareav-model:value="reason":maxlength="100"aria-placeholder="请输入驳回原因":auto-size="{ minRows: 4, maxRows: 6 }"style="border: 1px solid #d9d9d9"wrap="soft"></a-textarea></a-form-item></a-col></a-row></a-form></div></BasicModal>
</template><script lang="ts" setup>import {******} // 此处就是我们项目当中的一些引用// Emits声明 请参照新增编辑modal模板中得写法//表单赋值const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {//重置表单 请参照新增编辑modal模板中得写法formData.id = data.record.id;// 这块要着重注意,不然可能拿不到数据ID});// 表单赋值 审核状态state:1_审核通过 2_审核不通过const state = ref('1'),reason = ref(''),testId = ref('');const stateOptions = ref<SelectProps['options']>([{ value: '1', label: '审批通过' },{ value: '2', label: '审批驳回' },]);const userStore = useUserStore();const formData = reactive<Record<string, 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页面中得此方法,为我们表单区域中配置得方法名,用于操作之后刷新列表});
};

总结

道阻且长,一起加油哦!!!

这篇关于JeecgBoot 3.6.1实现Modal对话框,以为审核数据为例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/643851

相关文章

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义

opencv图像处理之指纹验证的实现

《opencv图像处理之指纹验证的实现》本文主要介绍了opencv图像处理之指纹验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、简介二、具体案例实现1. 图像显示函数2. 指纹验证函数3. 主函数4、运行结果三、总结一、

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很