快速实现前后端表单交互(minui)

(1)使用minui快速生成表单

(2)修改样式,将生成的html文件发送给后端

(3)前后端交互(后端如何处理不太清楚)

表单初始化:新增+修改(包括查看)

根据是否有id来选择发送什么请求:getCheckSheetHtml请求表示获取最原始的无数据的表单,getCheckContent表示获取有数据的表单。

openInit() {//重置表单this.onResetForm();if (this.id) {if (this.shiftFlag == "look") {this.title = "查看早到岗检查单";//表单设为不可编辑document.getElementById("checkIframe").contentWindow.document.getElementsByTagName("input").disabled = true;this.disabled = true;} else {this.title = "修改早到岗检查单";this.disabled = false;}} else {this.title = "新增早到岗检查单";this.disabled = false;}if (this.id) {var param = {};param.id = this.id;param.checkType = "earlyArr";param.groupId = this.groupId;param.seatId = this.seatId;getCheckContent(param).then((res) => {var data = res.data.data;this.recordDate = data.recordDate;var checkContent = JSON.parse(data.checkContent);var checkboxValue = checkContent.checkboxValue;var checkSheet = checkContent.checkSheet;document.getElementById("checkIframe").contentWindow.document.write(checkSheet);if (checkboxValue) {var doc =document.getElementById("checkIframe").contentWindow.document;var checkboxDoc = doc.getElementsByName("checkbox");for (var j = 0; j < checkboxDoc.length; j++) {var obj = checkboxDoc[j];if (obj.type == "checkbox") {obj.checked = checkboxValue[j];}}}});} else {getCheckSheetHtml({ id: "twr_early" }).then((res) => {document.getElementById("checkIframe").contentWindow.document.getElementsByTagName("html")[0].innerHTML =res.data.data;});}},//重置表单onResetForm() {this.iframeSrc = "";this.recordDate = new Date();document.getElementById("checkIframe").contentWindow.document.body.innerHTML = "";},

getCheckContent请求能获取数据(是个json),所以我们要把它渲染到页面。

新增的时候需要传入json(这就是修改查看接口能获取的json数据)

 //确定onOK() {var vdata = {};//获取检查单checkbox值var doc = document.getElementById("checkIframe").contentWindow.document;var checkboxDoc = doc.getElementsByName("checkbox");if (checkboxDoc.length > 0) {var checkboxArray = []; //初始化空数组,用来存放checkbox值for (var i = 0; i < checkboxDoc.length; i++) {var obj = checkboxDoc[i];if (obj.type == "checkbox") {checkboxArray.push(obj.checked);}}}vdata.checkboxValue = checkboxArray;var iframe = this.$refs.checkIframe;vdata.checkSheet = iframe.contentDocument.documentElement.innerHTML;// 将勾选数组和html(包含了input这些输入的)存入到一个大的json里面vdata.checkContent = JSON.stringify(vdata);vdata.userId = this.userId;vdata.groupId = this.groupId;vdata.seatId = this.seatId;vdata.recordDate = this.recordDate;vdata.checkType = "earlyArr";if (this.id) {vdata.id = this.id;updateCheckContent(vdata).then((res) => {if (res.data.data) {this.$message({type: "success",message: "修改早到岗检查单成功",});this.$emit("handleDialog", false);} else {this.$message({type: "error",message: "修改早到岗检查单失败",});}});} else {addCheckContent(vdata).then((res) => {if (res.data.data) {this.$message({type: "success",message: "新增早到岗检查单成功",});this.$emit("handleDialog", false);} else {this.$message({type: "error",message: "当日早到岗检查单已存在",});}});}},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/593509.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Win】没设置Windows账户密码,如何远程登录

1、按下Win&#xff0c;输入本地&#xff0c;打开本地安全策略 2、找到这个 3、双击打开&#xff0c;改成已禁用 4、正常重新启动一次或者开关机一次永久生效。 - 我第一次弄完死机了&#xff0c;再开机发现没生效

安科瑞余压监控系统在住宅小区的应用方案——安科瑞 顾烊宇

【摘要】&#xff1a;本文分析了火灾发生时人员伤亡的主要原因——烟雾&#xff0c;并针对该原因提供切实可靠的系统应用解决方案&#xff0c;并通过具体案例&#xff0c;从设计依据、产品选型、系统组网、现场安装等方式介绍余压监控系统&#xff0c;希望可以在火灾发生时较大…

Blender:从新手到专家的全方位指南

Blender&#xff0c;这款强大的开源3D建模和渲染软件&#xff0c;已经成为了CG行业的标准工具之一。它不仅拥有丰富的教程资源&#xff0c;而且还在不断发展和完善中。尽管Blender的教程主要集中在国外网站和YouTube上&#xff0c;但其全面的功能和易用性使它成为许多人的首选工…

拉取镜像自动部署:简化部署流程的高效方法知多少?

在现代软件开发中,容器化技术已经成为了一种广泛采用的方法,它提供了可移植性、隔离性和高效资源利用等优势。在容器化环境中,镜像扮演着重要的角色,它们包含了应用程序及其依赖项。本文将介绍如何使用拉取镜像自动部署的技术,以简化部署流程。 拉取镜像自动部署的核心思想…

JNI的C语言实现字节间的转换

JNI中的C语言实现字节间转换_jni 纯c char*-CSDN博客 ASCII转 16进制数 java代码_java 16进制ascii转数字-CSDN博客 十六进制字符串转换成十进制数_16进制字符串转10进制-CSDN博客 C语言16进制与ASCII字符相互转换_C 语言_脚本之家 (jb51.net) C 常见进制转换代码 - 知乎 …

贝莱德等巨头将通过最终考验!ETF获批是涨是跌?交易数据背后的博弈信号已经显现!

还记得摩根大通&#xff08;(J.P.Morgan&#xff09;首席执行长杰米-戴蒙&#xff08;Jamie Dimon&#xff09;说「如果他是政府&#xff0c;他就会关闭比特币」&#xff0c;加密货币的唯一「真正用途是犯罪、贩毒、洗钱和避税」吗&#xff1f; 然而&#xff0c;最新消息显示&a…

Android Framework默认授予第三方APP悬浮窗权限

需求 有第三方应用启动会请求悬浮窗权限,因为代码中没有做规避,会弹出请求窗口,点击确认后还要跳到设置中进行授权确认.有点麻烦,想去掉请求窗口,默认授予悬浮窗权限给APP. 悬浮窗默认实现原理 AppOpsManager 是Google在Android4.3里面引进的应用程序操作(权限)的管…

【2024.01.03】转行小白-刷css面试题01

总结 1.margin 负值问题 margin-top 和 margin-left 负值&#xff0c;元素向上、向左移动&#xff0c;自己动margin-right 负值&#xff0c;右侧元素左移&#xff0c;自身不受影响&#xff0c;别人动margin-bottom 负值&#xff0c;下方元素上移&#xff0c;自身不受影响 &am…

Django评论系统

目录 创建评论模型 将新模型添加到管理站点 创建一个表单来提交评论和验证输入数据 显示评论总数和评论列表 创建评论表单&#xff0c;当表单成功提交时&#xff0c;显示一条成功消息 创建评论模型 blog/models.py class Comment(models.Model):post models.ForeignKe…

apollo自动录bag包脚本(包含清理)

需求 制作一个apollo自动录包脚本&#xff0c;类似行车记录仪方便出问题定位。 该脚本实现以下功能&#xff1a; 自动创建录制文件夹创建以日期为命名的文件夹录制bag包全部录制或去除点云等数据量比较大的话题进行简单录制设置bag包最大占用空间每隔一分钟自动计算该文件夹占…

php之 校验多个时间段是否重复

参考网址 https://www.kancloud.cn/xiaobaoxuetp/mywork/3069416 https://segmentfault.com/a/1190000020487996 PHP判断多个时间段是否存在跨天或重复叠加的场景 /*** PHP计算两个时间段是否有交集&#xff08;边界重叠不算&#xff09;** param string $beginTime1 开始时间…

Certum ev多域名证书的优势

多域名证书作为一种能够为多个域名提供安全保护的证书类型&#xff0c;越来越受到企业的青睐。Certum作为一个成立了二十几年的CA认证机构&#xff0c;旗下的EV多域名SSL证书产品已经保护了多家企业的网站。Certum旗下的EV多域名证书作为一种能够为多个域名提供安全保护的证书类…

Python 使用 pymssql 连接 SQL Server 报错:DB-Lib error message 20002, severity 9

文章目录 版本说明排查过程参考个人简介 版本说明 Python 3.8SQL Server 2008pymssql 2.2.11 排查过程 最近给一个学妹看一个 Python 使用 pymssql 连接 SQL Server 报错问题&#xff0c;具体报错信息如下&#xff1a; Error: (20002, bDB-Lib error message 20002, severi…

【C语言】Linux socket 编程

一、Socket 通信过程 在 Linux 系统中&#xff0c;socket 是一种特殊的文件描述符&#xff0c;用于在网络中的不同主机间或者同一台主机中的不同进程间进行双向通信。它是通信链路的端点&#xff0c;可以看作是网络通信的接口。Socket 通信过程主要分为以下几个步骤&#xff1a…

RocketMQ5.0顺序消息设计实现

前言 顺序消息是 RocketMQ 提供的一种高级消息类型&#xff0c;支持消费者按照发送消息的先后顺序获取消息&#xff0c;从而实现业务场景中的顺序处理。 顺序消息的顺序关系通过消息组&#xff08;MessageGroup&#xff09;判定和识别&#xff0c;发送顺序消息时需要为每条消息…

RocketMQ5.0Pop消费模式

前言 RocketMQ 5.0 消费者引入了一种新的消费模式&#xff1a;Pop 消费模式&#xff0c;目的是解决 Push 消费模式的一些痛点。 RocketMQ 4.x 之前&#xff0c;消费模式分为两种&#xff1a; Pull&#xff1a;拉模式&#xff0c;消费者自行拉取消息、上报消费结果Push&#x…

C++字符串操作

1. 字符串比较 strcmp 1. 字符串比较 strcmp 头文件 string.h&#xff1b;变量需要传指针&#xff1b;返回>0 则第一个字符串比第二个字符串大&#xff0c;反之则小&#xff0c;0则表示两个字符串相同。 # include <iostream> # include <stdio.h> # include …

面试 Vue 框架八股文十问十答第一期

面试 Vue 框架八股文十问十答第一期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;MVVM 的理解 MVVM (Mod…

LDD学习笔记 -- 用户空间 内核空间

LDD学习笔记 -- 用户空间 & 内核空间 内核空间用户空间用户空间和内核空间交互 操作系统上下文中User space和Kernel space概念 用户空间&#xff1a;Restricted Mode&#xff0c;用户级编程内核空间&#xff1a;Privileged Mode&#xff0c;内核级代码&#xff08;linux …

深入理解Vue生命周期钩子及其应用

Vue.js其独有的生命周期系统允许我们在组件的不同阶段执行自定义代码。在本文中&#xff0c;我们将深入探讨一个简单的Vue组件&#xff0c;通过观察其生命周期钩子的执行顺序&#xff0c;以及如何在特定时刻插入自己的逻辑。 Vue组件代码 <template><div><p&g…