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的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》:本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT?二、JWT 基本结构

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Redis消息队列实现异步秒杀功能

《Redis消息队列实现异步秒杀功能》在高并发场景下,为了提高秒杀业务的性能,可将部分工作交给Redis处理,并通过异步方式执行,Redis提供了多种数据结构来实现消息队列,总结三种,本文详细介绍Re... 目录1 Redis消息队列1.1 List 结构1.2 Pub/Sub 模式1.3 Stream 结