随机问卷调查数据的处理（uniapp）

需求：问卷调查
1.返回的数据中包含单选、多选、多项文本框、单文本框、图片上传
2.需要对必填的选项进行校验
3.非必填的多项文本框内容 如果不填写 不提交
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

表单数据格式
res={"code": 0,"msg": null,"data": [{"executeDay": "2023-12-18","infoList": [ //表单数据{"id": "","recordId": "","taskId": "","itemId": "","itemName": "","subtype": 1,//根据这个数值区分 表单的类型 1单选 2多选 3多填空 4 文本框 5上传文件 6基本信息"executeDate": "","states": "0",// 是否为必填项目 0表示必填 1表示非必填"times": 1,"timing": "8:00","executeTimes": 0,"delFlag": "0","content": "{}","executeDay": "2023-12-18"}]}]
}
<view class="reportData" v-for="(val, index) in obj" :key="index"><view class="reportData-title"><text class='red'v-if='val.requiredFlag==0'>*</text>{{index+1+'.'}}{{ val.questionContent }}</view><view v-if="val.questionType ==1" class="chbox"><u-radio-group v-model="submitData[index].optionValue" placement="column"@change="(e)=>groupChange(e, val)" :key="index"><block v-for="(item, i) in val.optionInfoList"><!-- 其它选项 --><view v-if="item.optionType=='1'" style="display:flex"  ><u-radio :customStyle="{marginBottom: '20rpx'}" :label="item.optionName":name="item.optionName" @change="e=>radioChange(e,item,index)"></u-radio><u--input placeholder="其他-具体描述" v-model="submitData[index].remark" class="cc_input"style="height:24rpx;font-size: 30rpx;margin-left:20rpx ;" v-if="submitData[index].optionValue.indexOf('其他')!= -1"></u--input></view><u-radio :customStyle="{marginBottom: '20rpx'}" v-else :label="item.optionName":name="item.optionName" @change="e=>radioChange(e,item,index)"></u-radio></block></u-radio-group></view><!-- 多选 --><view v-if="val.questionType ==2" class="chbox"><u-checkbox-group v-model="submitData[index].optionValue" placement="column"@change="(e) =>checkboxChange(e, val)"><block v-for="(item, i) in val.optionInfoList" :key="index" ><view v-if="item.optionType=='1'" style="display:flex"  ><u-checkbox :customStyle="{marginBottom: '20rpx'}" :label="item.optionName" :name="item.optionName"></u-checkbox><u--input placeholder="其他具体描述" v-model="submitData[index].remark" class="cc_input"style="height:24rpx;font-size: 30rpx;margin-left:20rpx ;" v-if="submitData[index].optionValue.indexOf('其他')!= -1"></u--input></view><u-checkbox :customStyle="{marginBottom: '20rpx'}" v-else :label="item.optionName" :name="item.optionName"></u-checkbox></block></u-checkbox-group></view><!-- 文本上传 --><view v-else-if="val.questionType ==4" class="chbox"><up-load @afterRead='val=>afterRead(val,index)' @deletePic='val=>deletePic(val,index)'></up-load></view><!--  文本框--><view v-else-if="val.questionType ==5" class="chbox"><textarea class="investigate-propose" placeholder="请输入" v-model="submitData[index].optionValue"name="propose" id="" cols="30" rows="10"></textarea></view><!-- 6.个人的基本信息 --><view v-if="val.questionType ==6 || val.questionType ==3" class="chbox"><view class="item" v-for="(item,i) in submitData[index].info"><view class="name">{{item.optionTitle}}:</view><!-- 数值 --><view class="c_name" v-if="item.optionType==2"><u--input placeholder="请输入数值" type='number' v-model="item.cname"class="cc_input"></u--input></view><!-- 时间 --><view class="c_name" @click="item.showState = true" v-else-if="item.optionType==3"><u--input placeholder="请输入时间" v-model="item.cname" class="cc_input"></u--input><u-calendar :closeOnClickOverlay='true' :show="item.showState"@confirm="e=>confirm(e,i,index)" @close='item.showState = false'></u-calendar></view><!-- 文本 --><view class="c_name" v-else><u--input placeholder="请输入数值" type='number' v-model="item.cname"class="cc_input"></u--input></view></view></view>
<script>
<script>import http from '@/untils/http'//请求接口的封装import upLoad from '@/pages/components/upLoad.vue'//图片上传的封装export default {components: {upLoad},data() {return {id:"",formData: {itemId: '',subtype: ''},obj: {},infoList: '',subtype: '',submitData: [], // submitData[{info:[{item:1}]}]optionsObj: { //需要提交给后台的数据"userId": '',"taskId": '', //问卷的id taskId"1736623815192743937""taskNmae": "","surveyId": "1", // itemId"surveyName": "", //"totalScore": "","taskInfoId": "12", // id}}},onLoad(options) {this.optionsObj = {"userId": this.$store.state.userInfo.userId,"taskId": options.taskId, //问卷的id taskId"1736623815192743937""taskNmae": "","surveyId": options.itemId, // itemId"surveyName": options.surveyName, //"totalScore": "","taskInfoId": options.id, // id}this.initData()},methods: {// 回显数据async showData(){let {data}=await http.savefindByTaskInfoId(this.id)console.log(res)this.obj=data.infoList},// 时间下拉框 确认按钮confirm(e, i, index) {this.obj[index].info[i].cname = e.toString()this.obj[index].info[i].showState = false},// 提交按钮submitFn() {let sendFrom = JSON.parse(JSON.stringify(this.submitData))sendFrom = sendFrom.map((item, index) => {// 将字符串转化为数组if (typeof(item.optionValue) == 'string') {item.optionValue = item.optionValue.length == 0 ? [] : item.optionValue.split();}if (item.info && item.info.length > 0) {// 过滤掉 空的数组for (let i = 0; i < item.info.length; i++) {if (item.info[i].cname != '') {item.optionValue.push(item.info[i].cname)item.optionTitle.push(item.info[i].optionTitle)}}}return item})// 校验部分 是否需要必填for (let i = 0; i < sendFrom.length; i++) {if (sendFrom[i].requiredFlag == 0) {if (sendFrom[i].optionValue.length == 0) {this.$refs.uToast.show({message: `第${i+1}题未填写`});break}if (sendFrom[i].optionValue.indexOf('') != -1) {this.$refs.uToast.show({message: `第${i+1}题未填写`});break}}}// console.log(sendFrom)this.sendFrom(sendFrom)},async sendFrom(val) {let sendFrom = {...this.optionsObj,"infoList": val}let {data,code,msg} = await http.saveUserQuestionnaire(sendFrom)if (code == 0) {this.$refs.uToast.show({message: data})uni.navigateTo({url: '/pages/Option/sucess/sucess'})} else {this.$refs.uToast.show({message: msg})}},// afterRead 上传图片afterRead(val, index) {this.submitData[index].optionValue = val.map(item => {return item.url.filePath})},// 删除图片deletePic(val, index) {this.submitData[index].optionValue = []this.submitData[index].optionValue = val},// 单选框按钮处理groupChange(e, val) {console.log(e,val,'dyd')this.submitData = this.submitData.map(item => {if (val.id == item.itemId) {item.optionValue = e}return item})},// 复选框checkboxChange(e, val) {this.submitData = this.submitData.map(item => {if (val.id == item.itemId) {item.optionValue = e}return item})},async initData() {let res = await http.getFindByInfo(this.formData)this.obj = res.data.questionInfoList.map(item => {if (item.questionType == 2 || item.questionType == 4) {this.submitData.push({itemId: item.id, //题目的idoptionValue: [],fraction: item.fraction,questionNumber: item.questionNumber,questionContent: item.questionContent, //问题requiredFlag: item.requiredFlag,questionId: item.questionId,optionTitle: item.optionTitle,remark:'',questionType:item.questionType})// 基本信息部分} else if (item.questionType == 6 || item.questionType == 3) {this.submitData.push({itemId: item.id, //题目的idoptionValue: [],info: [],fraction: item.fraction,questionNumber: item.questionNumber,questionContent: item.questionContent, //问题requiredFlag: item.requiredFlag,questionId: item.questionId,optionTitle: [],remark:'',questionType:item.questionType})item.optionInfoList.map(item2 => {this.submitData = this.submitData.map(item3 => {if (item.id == item3.itemId) {let cname = 'cid' + item2.iditem3.info.push({id: item2.id,cname: '',fraction: item2.fraction,optionTitle: item2.optionTitle,showState: false, //是否可以打开时间的下拉框})}return item3})})} else {this.submitData.push({itemId: item.id, //题目的idoptionValue: '',fraction: item.fraction,questionNumber: item.questionNumber,questionContent: item.questionContent, //问题requiredFlag: item.requiredFlag,questionId: item.questionId,optionTitle: item.optionTitle,questionType:item.questionType})}item.optionInfoList.map(item2 => {item2.disabled = false})return item})},// 单选按钮切换radioChange(e, item,index) {if(e=='其他') {}else {this.submitData[index].remark=''}},}}
</script>

//对uviews上传组件进行了二次封装

<template><u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple :maxCount="10":width="wWidth" :height="hHeight"  ></u-upload>
</template><script>export default {props: {wWidth:{ //图片的宽度type: Number,default: 58,},hHeight:{// 图片的高度type: Number,default: 58,},},data() {return {fileList6: [],}},methods: {// 添加图片时间async afterRead(event) {// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式let lists = [].concat(event.file)let fileListLen = this[`fileList${event.name}`].lengthlists.map((item) => {this[`fileList${event.name}`].push({...item,status: 'uploading',message: '上传中'})})for (let i = 0; i < lists.length; i++) {const result = await this.uploadFilePromise(lists[i].url)let item = this[`fileList${event.name}`][fileListLen]this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {status: 'success',message: '',url: result}))fileListLen++}this.$emit('afterRead',this.fileList6)},uploadFilePromise(url) {return new Promise((resolve, reject) => {let a = uni.uploadFile({url:  '/sapi/file/uploadImageMobile', // 仅为示例，非真实的接口地址filePath: url,name: 'file',formData: {bizType: "patient",},success: (res) => {setTimeout(() => {let data=JSON.parse(res.data)resolve(data.data)}, 1000)}});})},// 删除图片deletePic(event) {this[`fileList${event.name}`].splice(event.index, 1);this.$emit('deletePic',this.fileList6)},}}
</script>

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

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

相关文章

二叉搜索树、AVL、红黑树、B树

二叉搜索树、AVL、红黑树、B树

文章目录 二叉搜索树2. avl树3. 红黑树 b树和b树比较适合与磁盘打交道的&#xff0c;磁盘操作耗时&#xff0c;这些树 矮&#xff0c;红黑树、avL树高&#xff0c;比较适合与内存打交道。 二叉搜索树 找一个节点的前驱和后继&#xff1a; 前驱&#xff1a;如果节点有左子树&a…
阅读更多...
两个图片完美融合 泊松编辑

两个图片完美融合 泊松编辑

一、效果惊人 二、步骤 下载安装 https://github.com/Trinkle23897/Fast-Poisson-Image-Editing.git 执行 test 目录下的 python data.py下载数据 执行测试&#xff0c;可以看到效果了 $ fpie -s test1_src.jpg -m test1_mask.jpg -t test1_tgt.jpg -o result1.jpg -h1 -…
阅读更多...
JNI学习(二)

JNI学习(二)

静态注册 接着上篇博客学习 JNI函数 JNIEXPORT void JNICALL Java_com_example_jnidemo_TextDemo_setText(JNIEnv *env, jobject this, jstring string){ __android_log_print(ANDROID_LOG_ERROR, "test", "invoke set from C\n");char* str (char*)(*e…
阅读更多...
基于SpringBoot和spark的共享单车存储管理系统

基于SpringBoot和spark的共享单车存储管理系统

文章目录 项目介绍主要功能截图：部分代码展示设计总结项目获取方式🍅 作者主页：超级无敌暴龙战士塔塔开 🍅 简介：Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我，都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot和spark的共享单车存储管…
阅读更多...
c语言知识点补充

c语言知识点补充

文件&#xff1a; 1.字符串&#xff1a; 1.srrlen&#xff08;&#xff09;字符串测长函数&#xff1b; 2.strcat&#xff08;&#xff09;字符串连接函数&#xff1b; 3.strcmp&#xff08;&#xff09;字符串比较函数&#xff1b; 4.strcpy&#xff08;&#xff09;字符串拷贝…
阅读更多...
【Unity】入门

【Unity】入门

文章目录 概述常用组件各类文件基础知识创建工程工程目录介绍五个窗口面板创建代码和场景 脚本与编程鼠标的输入键盘的输入代码来操作组件获取物体API资源的使用API定时调用与线程向量的基本运算预制体与实例 物理系统与组件案例实操作快捷键来源 Unity已广泛运用到各个领域&am…
阅读更多...
Linux对于软件的管理

Linux对于软件的管理

软件管理 ​ 在linux操作系统中&#xff0c;关于软件的安装与Windows操作系统上的软件安装以及软件包的管理有很大的不同。在linux中&#xff0c;常常使用apt-get命令进行软件安装。实际上该命令是linux软件包管理&#xff08;PMS&#xff09;的一个工具。在实际工程实践以及软…
阅读更多...
如何在Windows上搭建WebDAV服务并通过内网穿透实现公网访问

如何在Windows上搭建WebDAV服务并通过内网穿透实现公网访问

文章目录 前言1. 安装IIS必要WebDav组件2. 客户端测试3. 使用cpolar内网穿透&#xff0c;将WebDav服务暴露在公网3.1 安装cpolar内网穿透3.2 配置WebDav公网访问地址 4. 映射本地盘符访问 前言 在Windows上如何搭建WebDav&#xff0c;并且结合cpolar的内网穿透工具实现在公网访…
阅读更多...
结构型模式 | 适配器模式

结构型模式 | 适配器模式

一、适配器模式 1、原理 适配器模式&#xff08;Adapter&#xff09;&#xff0c;将一个类的接口转换成客户希望的另外一个接口&#xff0c;使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。适配器模式主要分为三类&#xff1a;类适配器模式、对象适配器模式、接口…
阅读更多...
深职大专访：卓翼飞思仿真及实飞平台在氢能无人机控制技术领域的应用

深职大专访：卓翼飞思仿真及实飞平台在氢能无人机控制技术领域的应用

欢迎来到飞思客户访谈栏目《实话实说》&#xff0c;本期我们走进深圳职业技术大学&#xff08;以下简称“深职大”&#xff09;对智能科学与工程研究院研究员林鸿博士进行专访&#xff0c;分享深职大- 卓翼氢能无人机控制技术研究中心建设的初衷、卓翼飞思无人机虚拟仿真及实飞…
阅读更多...
【ARM Cortex-M 系列 5 -- RT-Thread renesas/ra4m2-eco 移植编译篇】

【ARM Cortex-M 系列 5 -- RT-Thread renesas/ra4m2-eco 移植编译篇】

文章目录 RT-Thread 移植编译篇编译os.environ 使用示例os.putenv使用示例python from 后指定路径 编译问题_POSIX_C_SOURCE 介绍编译结果 RT-Thread 移植编译篇 本文以瑞萨的ra4m2-eco 为例介绍如何下载rt-thread 及编译的设置。 RT-Thread 代码下载&#xff1a; git clone …
阅读更多...
T2I-Adapter: 让马良之神笔（扩散模型）从文本生成图像更加可控

T2I-Adapter: 让马良之神笔（扩散模型）从文本生成图像更加可控

文章信息 单位&#xff1a;北大深张健团队&#xff0c;腾讯ARC lab 源码: https://github.com/TencentARC/T2I-Adapter 图1. 插个DXL的渲染图&#xff0c;这么真实的光感&#xff0c;感觉PS都可以被取代了 目录 文章信息前言一、介绍二、相关工作1.图像合成与转换2 扩散模型3 适…
阅读更多...
Deployment Controller详解（下）

Deployment Controller详解（下）

上一篇在《Deployment Controller详解&#xff08;上&#xff09;》中介绍了Deployment Controller 的创建、更新和回滚。了解了这三个功能&#xff0c;基本上也就懂得了大厂PaaS平台中服务的灰度升级、失败回滚等操作是如何实现的了。 接下来本文会介绍Deployment Controller…
阅读更多...
Spring MVC 方法中添加参数、HttpServletRequest 和 HttpServletResponse 对象

Spring MVC 方法中添加参数、HttpServletRequest 和 HttpServletResponse 对象

在这个例子中&#xff0c;我们添加了 HttpServletRequest 和 HttpServletResponse 对象作为控制器方法的参数。这样&#xff0c;你就可以在方法内部同时访问请求参数、请求对象和响应对象&#xff0c;从而进行更灵活的 HTTP 请求和响应处理。 RestController public class MyC…
阅读更多...
war exploded: Error during artifact deployment. See server log for details.

war exploded: Error during artifact deployment. See server log for details.

今天在用Tomcat时&#xff0c;报错了**[2023-12-23 12:26:43,718] war exploded: Error during artifact deployment. See server log for details.** 原因 自己的注解Servlet没有加/ WebServlet(urlPatterns "ManageServlet01") // 错误的// 正确的 WebServl…
阅读更多...
欧几里得算法

欧几里得算法

文章目录 欧几里得算法介绍欧几里得算法的证明证明1&#xff1a;b和a%b的最大公约数&#xff0c;也是a和b的公约数证明2&#xff1a;b和a%b的最大公约数&#xff0c;也是a和b的最大公约数 欧几里得算法介绍 小学或初中时学过辗转相除法&#xff0c;用于求两个数的最大公约数。…
阅读更多...
引领汽车营销新趋势，3DCAT实时云渲染助力汽车三维可视化

引领汽车营销新趋势，3DCAT实时云渲染助力汽车三维可视化

当前&#xff0c;汽车产业发展正从电动化的上半场&#xff0c;向智能化的下半场迈进。除了车机技术体验的智能化之外&#xff0c;观车体验的智能化也不容忽视。 这是因为&#xff0c;随着数字化、智能化、个性化的趋势&#xff0c;消费者对汽车的需求和期待也越来越高&#xf…
阅读更多...
CSS overflow-anchor

CSS overflow-anchor

overflow-anchor 为了认识这个属性, 我们需要先看一种常见的现象. 即在网页加载中, 图片常常比文字加载更慢, 这样图片加载完成后可能会将文字向下顶. 比如下图演示 <div class"overflow"><img id"bg" src"" height"150" al…
阅读更多...
【NI-RIO入门】使用其他文本语言开发CompactRIO

【NI-RIO入门】使用其他文本语言开发CompactRIO

1.FPGA 接口Python API Getting Started — FPGA Interface Python API 19.0.0 documentation 2.FPGA接口C API FPGA 接口 C API 是用于 NI 可重配置 I/O (RIO) 硬件&#xff08;例如 NI CompactRIO、NI Single-Board RIO、NI 以太网 RIO、NI FlexRIO、NI R 系列多功能 RIO 和…
阅读更多...
STM32的以太网外设+PHY（LAN8720）使用详解（7）：以太网数据接收及发送测试

STM32的以太网外设+PHY（LAN8720）使用详解（7）：以太网数据接收及发送测试

0 工具准备 1.野火 stm32f407霸天虎开发板 2.LAN8720数据手册 3.STM32F4xx中文参考手册 4.Wireshark1 以太网数据接收测试 1.1 以太网数据接收测试&#xff08;轮询&#xff09; 我们在主循环内轮询RX DMA描述符标志位查看是否接收到了数据&#xff0c;如果接收到了则将数据…
阅读更多...
最新文章

Copyright @ 2022~2023