做外贸开通哪个网站好,免费网站提交入口,谷歌搜索引擎seo,寻花问柳-专注做一家男人的网站需求#xff1a;问卷调查 1.返回的数据中包含单选、多选、多项文本框、单文本框、图片上传 2.需要对必填的选项进行校验 3.非必填的多项文本框内容 如果不填写 不提交
表单数据格式
res{code: 0,msg: null,data: [{executeDay问卷调查 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 classreportData v-for(val, index) in obj :keyindexview classreportData-titletext classredv-ifval.requiredFlag0*/text{{index1.}}{{ val.questionContent }}/viewview v-ifval.questionType 1 classchboxu-radio-group v-modelsubmitData[index].optionValue placementcolumnchange(e)groupChange(e, val) :keyindexblock v-for(item, i) in val.optionInfoList!-- 其它选项 --view v-ifitem.optionType1 styledisplay:flex u-radio :customStyle{marginBottom: 20rpx} :labelitem.optionName:nameitem.optionName changeeradioChange(e,item,index)/u-radiou--input placeholder其他-具体描述 v-modelsubmitData[index].remark classcc_inputstyleheight:24rpx;font-size: 30rpx;margin-left:20rpx ; v-ifsubmitData[index].optionValue.indexOf(其他)! -1/u--input/viewu-radio :customStyle{marginBottom: 20rpx} v-else :labelitem.optionName:nameitem.optionName changeeradioChange(e,item,index)/u-radio/block/u-radio-group/view!-- 多选 --view v-ifval.questionType 2 classchboxu-checkbox-group v-modelsubmitData[index].optionValue placementcolumnchange(e) checkboxChange(e, val)block v-for(item, i) in val.optionInfoList :keyindex view v-ifitem.optionType1 styledisplay:flex u-checkbox :customStyle{marginBottom: 20rpx} :labelitem.optionName :nameitem.optionName/u-checkboxu--input placeholder其他具体描述 v-modelsubmitData[index].remark classcc_inputstyleheight:24rpx;font-size: 30rpx;margin-left:20rpx ; v-ifsubmitData[index].optionValue.indexOf(其他)! -1/u--input/viewu-checkbox :customStyle{marginBottom: 20rpx} v-else :labelitem.optionName :nameitem.optionName/u-checkbox/block/u-checkbox-group/view!-- 文本上传 --view v-else-ifval.questionType 4 classchboxup-load afterReadvalafterRead(val,index) deletePicvaldeletePic(val,index)/up-load/view!-- 文本框--view v-else-ifval.questionType 5 classchboxtextarea classinvestigate-propose placeholder请输入 v-modelsubmitData[index].optionValuenamepropose id cols30 rows10/textarea/view!-- 6.个人的基本信息 --view v-ifval.questionType 6 || val.questionType 3 classchboxview classitem v-for(item,i) in submitData[index].infoview classname{{item.optionTitle}}:/view!-- 数值 --view classc_name v-ifitem.optionType2u--input placeholder请输入数值 typenumber v-modelitem.cnameclasscc_input/u--input/view!-- 时间 --view classc_name clickitem.showState true v-else-ifitem.optionType3u--input placeholder请输入时间 v-modelitem.cname classcc_input/u--inputu-calendar :closeOnClickOverlaytrue :showitem.showStateconfirmeconfirm(e,i,index) closeitem.showState false/u-calendar/view!-- 文本 --view classc_name v-elseu--input placeholder请输入数值 typenumber v-modelitem.cnameclasscc_input/u--input/view/view/view
script
scriptimport 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 taskId1736623815192743937taskNmae: ,surveyId: 1, // itemIdsurveyName: , //totalScore: ,taskInfoId: 12, // id}}},onLoad(options) {this.optionsObj {userId: this.$store.state.userInfo.userId,taskId: options.taskId, //问卷的id taskId1736623815192743937taskNmae: ,surveyId: options.itemId, // itemIdsurveyName: options.surveyName, //totalScore: ,taskInfoId: options.id, // id}this.initData()},methods: {// 回显数据async showData(){let {data}await http.savefindByTaskInfoId(this.id)console.log(res)this.objdata.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: 第${i1}题未填写});break}if (sendFrom[i].optionValue.indexOf() ! -1) {this.$refs.uToast.show({message: 第${i1}题未填写});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上传组件进行了二次封装
templateu-upload :fileListfileList6 afterReadafterRead deletedeletePic name6 multiple :maxCount10:widthwWidth :heighthHeight /u-upload
/templatescriptexport 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 dataJSON.parse(res.data)resolve(data.data)}, 1000)}});})},// 删除图片deletePic(event) {this[fileList${event.name}].splice(event.index, 1);this.$emit(deletePic,this.fileList6)},}}
/script
