做宴会有哪些素材网站/湖南网络优化服务
需求:问卷调查
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>
相关文章:

随机问卷调查数据的处理(uniapp)
需求:问卷调查 1.返回的数据中包含单选、多选、多项文本框、单文本框、图片上传 2.需要对必填的选项进行校验 3.非必填的多项文本框内容 如果不填写 不提交 表单数据格式 res{"code": 0,"msg": null,"data": [{"executeDay&…...

开源分布式搜索引擎ElasticSearch结合内网穿透远程连接
文章目录 前言1. Windows 安装 Cpolar2. 创建Elasticsearch公网连接地址3. 远程连接Elasticsearch4. 设置固定二级子域名 前言 简单几步,结合Cpolar 内网穿透工具实现Java 远程连接操作本地分布式搜索和数据分析引擎Elasticsearch。 Cpolar内网穿透提供了更高的安全性和隐私保…...

Leetcode2928. 给小朋友们分糖果 I
Every day a Leetcode 题目来源:2928. 给小朋友们分糖果 I 解法1:暴力 枚举 3 位小朋友的糖果数,范围为 [0, limit],分别记为 i、j、k。 当满足 i j k n 时,答案 1。 代码: /** lc appleetcode.c…...

go-zero开发入门之网关往rpc服务传递数据2
go-zero 的网关服务实际是个 go-zero 的 API 服务,也就是一个 http 服务,或者说 rest 服务。http 转 grpc 使用了开源的 grpcurl 库,当网关需要往 rpc 服务传递额外的数据,比如鉴权数据的时候,通过 http 的 header 进行…...

Cron介绍,以及常见的cron表达式
目录 一.cron介绍 1.什么是Cron? 2.Cron语法 时间字段的取值范围如下: 时间字段支持以下特殊字符: 下面是一些示例: 3.虚拟机安装cron(centos7展示) 二.常见的cron表达式 一.cron介绍 1.什么是Cron? Cron是一个…...

智能优化算法应用:基于协作搜索算法3D无线传感器网络(WSN)覆盖优化 - 附代码
智能优化算法应用:基于协作搜索算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于协作搜索算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.协作搜索算法4.实验参数设定5.算法结果6.…...

分布式训练通信NCCL之Ring-Allreduce详解
🎀个人主页: https://zhangxiaoshu.blog.csdn.net 📢欢迎大家:关注🔍点赞👍评论📝收藏⭐️,如有错误敬请指正! 💕未来很长,值得我们全力奔赴更美好的生活&…...

os_util 工具类和方法的实现
一、前置说明 总体目录:《从 0-1 搭建企业级 APP 自动化测试框架》上节回顾:在 init_appium_and_devices 的实现思路分析 小节中,分析了实现 init_appium_and_devices 的思路,梳理出了必要的工具类和方法。本节目标:完…...

uview表单校验带星号
uView表单校验带星号可以通过设置required属性来实现。在uView中,可以使用组件来实现表单校验,具体步骤如下: 1、在需要校验的表单元素上添加required属性,例如: <u-form :model"detailInfo" ref"d…...

vue+element实现动态表格:根据后台返回的属性名和字段动态生成可变表格
现有一个胡萝卜厂生产不同品种的胡萝卜,为了便于客户了解产品,现需在官网展示胡萝卜信息。现有的萝卜信息:编号(id)、名称(name)、保质期(age)、特点(remark&…...

云渲染UE4像素流送搭建(winows、ubuntu单实例与多实例像素流送)
windows/ubuntu20.4下UE4.27.2像素流送 像素流送技术可以将服务器端打包的虚幻引擎应用程序在客户端的浏览器上运行,用户可以通过浏览器操作虚幻引擎应用程序,客户端无需下载虚幻引擎,本文实现两台机器通过物理介质网线实现虚幻引擎应用程序…...

Unity VR Pico apk安装失败:INSTALL_FAILED_UPDATE_INCOMPATIBLE
我的报错: PICO4企业版。安装apk,报错“安装失败。(所属的Unity项目打包的apk,被我在同一台pico4安装了20次) 调试方法: PIco4发布使用UNITY开发的Vr应用,格式为apk,安装的时候发生…...

Prompt 提示工程学习笔记
一、Prompt设计的四个关键要素: 任务描述、输入数据、上下文信息、提示风格 (1)任务描述:描述想要让LLM遵循的指令。描述应详细清晰,可进一步使用关键词突出特殊设置,从而更好地指导LLM工作。 ࿰…...

STM32实现三个小灯亮
led.c #include"led.h"void Led_Init(void) {GPIO_InitTypeDef GPIO_VALUE; //???RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOC,ENABLE);//???GPIO_VALUE.GPIO_ModeGPIO_Mode_Out_PP;//???? ????GPIO_VALUE.GPIO_PinGPIO_Pin_1|GPIO_Pin_2|GPIO_P…...

1861_什么是H桥
Grey 全部学习内容汇总: GitHub - GreyZhang/g_hardware_basic: You should learn some hardware design knowledge in case hardware engineer would ask you to prove your software is right when their hardware design is wrong! 1861_什么是H桥 H桥电路可以…...

【计算机四级(网络工程师)笔记】操作系统运行机制
目录 一、中央处理器(CPU) 1.1CPU的状态 1.2指令分类 二、寄存器 2.1寄存器分类 2.2程序状态字(PSW) 三、系统调用 3.1系统调用与一般过程调用的区别 3.2系统调用的分类 四、中断与异常 4.1中断 4.2异常 🌈嗨ÿ…...

Swagger快速入门
1、Swagger快速入门 1.1 swagger介绍 官网:https://swagger.io/ Swagger 是一个规范和完整的Web API框架,用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。 功能主要包含以下几点: A. 使得前后端分离开发更加方便,有利于团队协作…...

数据结构之<堆>的介绍
1.简介 堆是一种特殊的数据结构,通常用于实现优先队列。堆是一个可以被看作近似完全二叉树的结构,并且具有一些特殊的性质,根据这些性质,堆被分为最大堆(或者大根堆,大顶堆)和最小堆两种。 2.…...

使用Ubuntu22+Minikube快速搭建K8S开发环境
安装Vmware 这一步,可以参考我的如下课程。 安装Ubuntu22 下载ISO镜像 这里我推荐从清华镜像源下载,速度会快非常多。 下载地址:https://mirrors.tuna.tsinghua.edu.cn/ubuntu-releases/22.04.3/ 如果你报名了我的这门视频课程…...

【中小型企业网络实战案例 二】配置网络互连互通
【中小型企业网络实战案例 一】规划、需求和基本配置-CSDN博客 热门IT技术视频教程:https://xmws-it.blog.csdn.net/article/details/134398330?spm1001.2014.3001.5502 配置接入层交换机 1.以接入交换机ACC1为例,创建ACC1的业务VLAN 10和20。 <…...

Azure Machine Learning - Azure OpenAI GPT 3.5 Turbo 微调教程
本教程将引导你在Azure平台完成对 gpt-35-turbo-0613 模型的微调。 关注TechLead,分享AI全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管理经验,同济本复旦硕,复旦机器人智能实验室成员,阿里云认证的资深架构师&…...

运维大模型探索之 Text2PromQL 问答机器人
作者:陈昆仪(图杨) 大家下午好,我是来自阿里云可观测团队的算法工程师陈昆仪。今天分享的主题是“和我交谈并获得您想要的PromQL”。今天我跟大家分享在将AIGC技术运用到可观测领域的探索。 今天分享主要包括5个部分:…...

虚拟机VMware:变动ip修改固定ip
1、配置ip地址 vi /etc/sysconfig/network-scripts/ifcfg-ens33修改为: 修改如下:TYPE"Ethernet" # 网络类型为以太网 BOOTPROTO"static" # 手动分配ip NAME"ens33" # 网卡…...

Docker部署Nexus Maven私服并实现远程访问Nexus界面
🎬 鸽芷咕:个人主页 🔥 个人专栏: 《linux深造日志》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 文章目录 1. Docker安装Nexus2. 本地访问Nexus3. Linux安装Cpolar4. 配置Nexus界面公网地址5. 远程访问 Nexus界面6. 固定N…...

苏州科技大学计算机817程序设计(java) 学习笔记
之前备考苏州科技大学计算机(专业课:817程序设计(java))。 学习Java和算法相关内容,现将笔记及资料统一整理归纳移至这里。 部分内容不太完善,欢迎提议。 目录 考情分析 考卷题型 刷题攻略…...

虚幻学习笔记22—C++同步和异步加载
一、前言 之前提到的静态和动态加载都是同步的加载,同时其中的引用基本都是硬引用。如果资源比较大的话会出现卡顿的现象,下面将介绍一种异步加载的方式。同时,还将介绍一种区别与之前的Load的方法。 在说明同步和异步加载之前需要先讲一下虚…...

华清远见嵌入式学习——ARM——作业3
作业要求: 代码效果图: 代码: led.h #ifndef __LED_H__ #define __LED_H__#define RCC_GPIO (*(unsigned int *)0x50000a28) #define GPIOE_MODER (*(unsigned int *)0x50006000) #define GPIOF_MODER (*(unsigned int *)0x50007000) #defi…...

19.JavaSE
一、JavaSE。 (1)IO流。 1.字节字符流 2.标准流打印流对象流 (2)集合。 1.List/Set/Queue/Map集合 2.properties集合 (3)多线程。 1.线程创建的…...

仓库管理用什么软件
仓库管理是一个非常重要的话题,大到企业,小到个人,只要有货物的往来就会有仓库方面的管理,最为典型的就是货物的进出库存管理,这也是最为基础的仓库管理内容,那么仓库管理要用什么软件,从不同的…...

飞天使-k8s知识点8-kubernetes资源对象-编写中
文章目录 资源对象是k8s核心概念 资源对象是k8s核心概念 查看防火墙规则 32002 端口的去向 [rootkubeadm-master1 ~]# iptables -t nat -vnL |grep 32000 0 KUBE-MARK-MASQ tcp -- * * 0.0.0.0/0 0.0.0.0/0 /* kubernetes-dashboard/…...