快速实现前后端表单交互(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;但其全面的功能和易用性使它成为许多人的首选工…

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

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

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

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

Certum ev多域名证书的优势

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

【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…

分布式(8)

目录 36.什么是TCC&#xff1f; 37.分布式系统中常用的缓存方案有哪些&#xff1f; 38.分布式系统缓存的更新模式&#xff1f; 39.分布式缓存的淘汰策略&#xff1f; 40.Java中定时任务有哪些&#xff1f;如何演化的&#xff1f; 36.什么是TCC&#xff1f; TCC&#xff08…

【算法挨揍日记】day41——【模板】01背包、416. 分割等和子集

【模板】01背包_牛客题霸_牛客网你有一个背包&#xff0c;最多能容纳的体积是V。 现在有n个物品&#xff0c;第i个物品的体积为 ,。题目来自【牛客题霸】https://www.nowcoder.com/practice/fd55637d3f24484e96dad9e992d3f62e?tpId230&tqId2032484&ru/exam/oj&qru…

HarmonyOS-ArkTS基本语法及声明式UI描述

初识ArkTS语言 ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript&#xff08;简称TS&#xff09;生态基础上做了进一步扩展&#xff0c;继承了TS的所有特性&#xff0c;是TS的超集。因此&#xff0c;在学习ArkTS语言之前&#xff0c;建议开发者具备TS语…

机器学习常用算法模型总结

文章目录 1.基础篇&#xff1a;了解机器学习1.1 什么是机器学习1.2 机器学习的场景1.2.1 模式识别1.2.2 数据挖掘1.2.3 统计学习1.2.4 自然语言处理1.2.5 计算机视觉1.2.6 语音识别 1.3 机器学习与深度学习1.4 机器学习和人工智能1.5 机器学习的数学基础特征值和特征向量的定义…

软件测试/测试开发丨Python 模块与包

python 模块与包 python 模块 项目目录结构 组成 package包module模块function方法 模块定义 定义 包含python定义和语句的文件.py文件作为脚本运行 导入模块 import 模块名from <模块名> import <方法 | 变量 | 类>from <模块名> import * 注意&a…

小红书如何高效引流?

近年来&#xff0c;公域流量价格不断上涨&#xff0c;私域流量的优势逐渐凸显。企业正花费大量资源和成本来获取新流量&#xff0c;但与其如此&#xff0c;不如将精力放在留存和复购上&#xff0c;从而实现业绩的新增长。其中关键在于如何有效地将公域流量转化为私域流量。 然而…

境内深度合成服务算法备案清单(2023年12月)

截止2024年1月3日&#xff0c;第三批深度合成服务算法备案信息的公告尚未发布&#xff0c;预计将会在2024-1-10左右发布&#xff0c;我公司已知晓部分公示名单&#xff0c;如中国电信数字人生成算法&#xff0c;详情联系WX号&#xff1a;SuanfabeiandayuAI生成合成类算法应办理…

ArkTS - @Prop、@Link

一、作用 Prop 装饰器 和Link装饰器都是父组件向子组件传递参数&#xff0c;子组件接收父组件参数的时候用的&#xff0c;变量前边需要加上Prop或者Link装饰器即可。&#xff08;跟前端vue中父组件向子组件传递参数类似&#xff09; // 子组件 Component struct SonCom {Prop…

管程-第三十三天

目录 为什么要引入管程 管程的定义和基本特征 用管程解决生产者消费者问题 结论 本节思维导图 为什么要引入管程 原因&#xff1a;在解决进程的同步与互斥问题时&#xff0c;信号量机制存在编写困难和易出错的问题 能不能设计一种机制&#xff0c;让程序员写程序时不再需…

openGauss学习笔记-184 openGauss 数据库运维-升级-升级验证

文章目录 openGauss学习笔记-184 openGauss 数据库运维-升级-升级验证184.1 验证项目的检查表184.2 升级版本查询184.2.1 验证步骤 184.3 检查升级数据库状态184.3.1 验证步骤 openGauss学习笔记-184 openGauss 数据库运维-升级-升级验证 本章介绍升级完成后的验证操作。给出验…

VINS-MONO拓展1----手写后端求解器,LM3种阻尼因子策略,DogLeg,构建Hessian矩阵

文章目录 0. 目标及思路1. 非线性优化求解器2. 基于VINS-MONO的Marginalization框架构建Hessian矩阵2.1 estimator.cpp移植2.2 solve.cpp/preMakeHessian()2.3 solve.cpp/makeHessian() 3. solve.cpp/solveLinearSystem()求解正规方程4. 更新状态5. 迭代求解6. EVO评估结果7. 待…