vue实现移动端问卷调查（适配多道题目多种题型）
最近手上的项目要求做一个调查问卷（题目数据由后端返回，也就是说题目数量不定，题目类型分为单选、多选、简答、上传附件四种）思路:1、把每种题型单独封装成组件2、统一拿到所有题目的数据，通过点击“下一题”、“上一题”拆分数据，通过题目类型控制显隐3、选择答案后，点击“下一题”之前，this.$set()保存当前题目答案到该题4、做完问卷后提交，拿到所有题目数据（包含答案），组装成后端需要的数据结构提交
·
最近手上的项目要求做一个调查问卷（题目数据由后端返回，也就是说题目数量不定，题目类型分为单选、多选、简答、上传附件四种）
思路:
1、把每种题型单独封装成组件
2、统一拿到所有题目的数据，通过点击“下一题”、“上一题”拆分数据，通过题目类型控制显隐
3、选择答案后，点击“下一题”之前，this.$set()保存当前题目答案到该题
4、做完问卷后提交，拿到所有题目数据（包含答案），组装成后端需要的数据结构提交答案即可
上代码：
1、封装组件
1）单选题：
<template>
<!-- 单选题目 -->
<div class="Single-choice" v-if="dataObj.sexFlg=='0' || sexFlg==dataObj.sexFlg">
<span v-show="dataObj.isRequired=='1'" class="isMust">*</span>
<p class="single-title">{{dataObj.orderNum}}、{{ dataObj.title }}</p>
<van-form ref="form">
<van-radio-group
@change="choosSingle"
v-model="checked"
:rules="[{ required: true, message: '请做出选择' }]"
>
<van-radio
v-for="(item, key, index) in dataObj.optionItems"
v-show="item.sexFlg=='0' || sexFlg==item.sexFlg"
:key="index"
:name="item.id"
>{{ item.title }}</van-radio
>
</van-radio-group>
</van-form>
</div>
</template>
<script>
export default {
name: "singledate",
data() {
return {
checked: "",
sexFlg:this.$route.query.sex//获取患者性别，选项根据性别匹配（1男2女0不限）
};
},
props: {
dataObj: {
type: Object,
},
checkdata: {
type: Number,
},
},
computed: {},
created() {},
mounted() {
if (this.checkdata) {
this.checked = this.checkdata;
}
},
methods: {
choosSingle(val) {
console.log(val);
this.$emit("getvalue", val);
},
},
};
</script>
<style lang="scss" scoped>
.Single-choice {
position: relative;
.isMust {
position: absolute;
font-size: 0.56rem;
color: #f35757;
font-weight: initial;
top: -0.11rem;
left: -3px;
}
.single-title {
margin-left: 3%;
}
}
.van-radio {
margin-bottom: 0.43333rem;
}
.van-checkbox {
margin-bottom: 0.43333rem;
}
</style>2）多选题：（有其他选项，需要自己手动填写那种）
<template>
<!-- 复选题目 -->
<div class="multiple-choice" v-if="data.sexFlg=='0' || sexFlg==data.sexFlg">
<span v-show="data.isRequired=='1'" class="isMust">*</span>
<p class="multiple-title">{{data.orderNum}}、{{ data.title }}</p>
<van-checkbox-group
@change="choosMultdata"
v-model="checked1"
v-for="(item, key, index) in data.optionItems"
:key="index"
>
<van-checkbox shape="square" :name="item" v-if="item.sexFlg=='0' || sexFlg==item.sexFlg"
>{{ item.title }}
<div v-show="item.title == '其他'">
<span class="other-choise">其他</span>
<span v-show="item.packRequired=='1'" class="isMust other">*</span>
<van-cell-group inset>
<van-field v-model="othervalue" />
</van-cell-group>
</div>
</van-checkbox>
</van-checkbox-group>
</div>
</template>
<script>
export default {
name: "multipledate",
data() {
return {
checked1: [],
// 选项其他
checkedother: false,
othervalue: "",
sexFlg:this.$route.query.sex//获取患者性别，选项根据性别匹配（1男2女0不限）
};
},
props: {
data: {
type: Object,
},
},
computed: {},
created() {},
mounted() {
},
methods: {
choosMultdata(val) {
this.$emit("getMultvalue", val);
},
},
// 监听其他类型数据，传给父组件
watch: {
othervalue: {
handler(val) {
if (val) {
this.$emit("getotherVal", val);
}
},
},
},
};
</script>
<style lang="scss" scoped>
.multiple-choice {
position: relative;
width: 80%;
.isMust {
position: absolute;
font-size: 0.56rem;
color: #f35757;
font-weight: initial;
top: -0.11rem;
left: -3px;
}
.other {
top: 0;
right: 1px;
left: unset;
}
.multiple-title {
margin-left: 3%;
}
.other-choise {
position: absolute;
top: 0.15rem;
}
}
.van-radio {
margin-bottom: 0.43333rem;
}
.van-checkbox {
margin-bottom: 0.43333rem;
position: relative;
height: 0.7rem;
}
.van-cell-group--inset {
margin-left: 0.7rem;
}
.van-cell {
background-color: #f5f5f5;
height: 120px;
}
</style>3）简答题：
<template>
<!-- 建议 -->
<div class="recommen" v-if="data.sexFlg=='0' || sex==data.sexFlg">
<span v-show="data.isRequired=='1'" class="isMust">*</span>
<p class="recommen-title">
{{data.orderNum}}、
{{data.title}}
</p>
<div class="textarea-content">
<textarea name="test" id="recomsg" cols="40" rows="10" v-model="inputval">
</textarea>
<span style="display: block; text-align: right; margin-right: 6%"
>您还可以输入{{ this.inputval==null?'100':this.titleMaxLength - this.inputval.length }}字</span
>
</div>
</div>
</template>
<script>
export default {
name: "recommend",
data() {
return {
checked1: [],
inputval: "",
titleMaxLength: 100,
// 性别
sex:'0',
};
},
props: {
data: {
type: Object,
},
},
computed: {},
created() {},
mounted() {
// 获取性别
this.sex=this.$route.query.sex;
// 处理题目根据性别显隐 性别 1 男 2 女 0无限
},
methods: {
choosMultdata(val) {
this.$emit("getMultvalue", val);
},
},
watch: {
inputval(val) {
// if (this.inputval.length > this.titleMaxLength) {
// this.inputval = String(this.inputval).slice(0, this.titleMaxLength);
// }
this.$emit("getrecommendvalue", val);
},
},
};
</script>
<style lang="scss" scoped>
.recommen {
position: relative;
.isMust {
position: absolute;
font-size: 0.56rem;
color: #f35757;
font-weight: initial;
top: -0.11rem;
left: -3px;
}
#recomsg {
background-color: #f6f6f6;
border: unset;
width: 87%;
}
.recommen-title {
margin-left: 3%;
}
.textarea-content {
width: 100%;
text-align: center;
}
}
</style>4、上传附件（主要是图片）
<template>
<!-- 上传附件 -->
<div class="uploadImg" v-show="data.sexFlg == '0' || sex == data.sexFlg">
<span v-show="data.isRequired == '1'" class="isMust">*</span>
<p class="uploadImg-title">{{ data.orderNum }}、{{ data.title }}</p>
<van-uploader
:after-read="onRead"
:accept="'image/*'"
v-model="fileList"
multiple
@delete="delImg"
:max-count="9"
/>
</div>
</template>
<script>
export default {
name: "uploadImg",
data() {
return {
sex: "", //性别
checked1: [],
recmsg: "",
titleMaxLength: 100,
fileList: [],
// 图片地址
uploadUrl: [],
};
},
props: {
data: {
type: Object,
},
},
computed: {},
created() {},
mounted() {
// 获取性别
this.sex = this.$route.query.sex;
},
methods: {
// 图片上传后
onRead(file) {
// 大于1MB的jpeg和png图片都缩小像素上传
file.status = "uploading";
file.message = "上传中...";
// 如果是单张图片,fille是对象，当上传图片大于1M时，压缩上传
if (file.file) {
if (
/\/(?:jpeg|png)/i.test(file.file.type) &&
file.file.size > 1000000
) {
console.log("大于1Mb");
// 创建Canvas对象(画布)
let canvas = document.createElement("canvas");
// 获取对应的CanvasRenderingContext2D对象(画笔)
let context = canvas.getContext("2d");
// 创建新的图片对象
let img = new Image();
// 指定图片的DataURL(图片的base64编码数据)
img.src = file.content;
// 监听浏览器加载图片完成，然后进行进行绘制
img.onload = () => {
var newWidth = img.width * 0.7; //压缩后图片的宽度
var newHeight = img.height * 0.7; //压缩后图片的高度
// 指定canvas画布大小，该大小为最后生成图片的大小
canvas.width = newWidth;
canvas.height = newHeight;
/* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/
context.drawImage(img, 0, 0, newWidth, newHeight);
// 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
file.content = canvas.toDataURL(file.file.type, 0.7);
let data = {
dirtype: "hlfw",
message: file.content,
};
this.$post("/uploadImg", data)
.then((res) => {
if (res.result == "success") {
file.uploadUrl = res.url;
this.uploadUrl.push(file.uploadUrl);
// 给父组件
this.$emit("accessAttachment", this.uploadUrl);
this.$emit("getfilelist", this.fileList);
this.$toast(res.info);
file.status = "";
file.message = "";
} else {
this.$toast(res.info);
file.status = "failed";
file.message = "上传失败";
if (!this.fileList[this.fileList.length - 1].uploadUrl) {
this.fileList.splice(this.fileList.length - 1, 1);
}
}
})
.catch((err) => {
console.log(err);
this.$toast("上传超时 请重试");
file.status = "failed";
file.message = "上传失败";
if (!this.fileList[this.fileList.length - 1].uploadUrl) {
this.fileList.splice(this.fileList.length - 1, 1);
}
});
};
} else {
let data = {
dirtype: "hlfw",
message: file.content,
};
this.$post("/uploadImg", data)
.then((res) => {
if (res.result == "success") {
file.uploadUrl = res.url;
this.uploadUrl.push(file.uploadUrl);
// 给父组件
this.$emit("accessAttachment", this.uploadUrl);
this.$emit("getfilelist", this.fileList);
file.status = "";
file.message = "";
} else {
this.$toast(res.info);
file.status = "failed";
file.message = "上传失败";
if (!this.fileList[this.fileList.length - 1].uploadUrl) {
this.fileList.splice(this.fileList.length - 1, 1);
}
}
})
.catch((err) => {
console.log(err);
file.status = "failed";
file.message = "上传失败";
this.$toast("上传超时 请重试");
if (!this.fileList[this.fileList.length - 1].uploadUrl) {
this.fileList.splice(this.fileList.length - 1, 1);
}
});
}
}
// 如果是批量，file就是数组
else {
for (let i = 0; i < file.length; i++) {
if (
/\/(?:jpeg|png)/i.test(file[i].file.type) &&
file[i].file.size > 1000000
) {
console.log("大于1Mb");
// 创建Canvas对象(画布)
let canvas = document.createElement("canvas");
// 获取对应的CanvasRenderingContext2D对象(画笔)
let context = canvas.getContext("2d");
// 创建新的图片对象
let img = new Image();
// 指定图片的DataURL(图片的base64编码数据)
img.src = file[i].content;
// 监听浏览器加载图片完成，然后进行进行绘制
img.onload = () => {
var newWidth = img.width * 0.7; //压缩后图片的宽度
var newHeight = img.height * 0.7; //压缩后图片的高度
// 指定canvas画布大小，该大小为最后生成图片的大小
canvas.width = newWidth;
canvas.height = newHeight;
/* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/
context.drawImage(img, 0, 0, newWidth, newHeight);
// 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
file[i].content = canvas.toDataURL(file[i].file.type, 0.7);
let data = {
dirtype: "hlfw",
message: file[i].content,
};
this.$post("/uploadImg", data)
.then((res) => {
if (res.result == "success") {
file[i].uploadUrl = res.url;
this.uploadUrl.push(file[i].uploadUrl);
// 给父组件
this.$emit("accessAttachment", this.uploadUrl);
this.$emit("getfilelist", this.fileList);
this.$toast(res.info);
file.status = "";
file.message = "";
} else {
this.$toast(res.info);
file.status = "failed";
file.message = "上传失败";
if (!this.fileList[this.fileList.length - 1].uploadUrl) {
this.fileList.splice(this.fileList.length - 1, 1);
}
}
})
.catch((err) => {
console.log(err);
this.$toast("上传超时 请重试");
file.status = "failed";
file.message = "上传失败";
if (!this.fileList[this.fileList.length - 1].uploadUrl) {
this.fileList.splice(this.fileList.length - 1, 1);
}
});
};
} else {
let data = {
dirtype: "hlfw",
message: this.fileList[i].content,
};
this.$post("/uploadImg", data)
.then((res) => {
if (res.result == "success") {
file[i].uploadUrl = res.url;
this.uploadUrl.push(file[i].uploadUrl);
// 给父组件
this.$emit("accessAttachment", this.uploadUrl);
this.$emit("getfilelist", this.fileList);
file[i].status = "";
file[i].message = "";
} else {
this.$toast(res.info);
file[i].status = "failed";
file[i].message = "上传失败";
if (!this.fileList[this.fileList.length - 1].uploadUrl) {
this.fileList.splice(this.fileList.length - 1, 1);
}
}
})
.catch((err) => {
console.log(err);
console.log(this.fileList);
file[i].status = "failed";
[i].message = "上传失败";
this.$toast("上传超时 请重试");
if (!this.fileList[this.fileList.length - 1].uploadUrl) {
this.fileList.splice(this.fileList.length - 1, 1);
}
});
}
}
}
},
//删除预览图片按钮
delImg(e) {
console.log("删除的图片", e);
this.$emit("getfilelist", this.fileList);
// this.fileList.splice(this.fileList.length - 1, 1);
},
},
watch: {
recmsg() {
if (this.recmsg.length < 10) {
// this.$toast.fail("请至少输入10个字");
}
if (this.recmsg.length > this.titleMaxLength) {
this.recmsg = String(this.recmsg).slice(0, this.titleMaxLength);
}
},
},
};
</script>
<style lang="scss" scoped>
.uploadImg {
position: relative;
.isMust {
position: absolute;
font-size: 0.56rem;
color: #f35757;
font-weight: initial;
top: -0.11rem;
left: -3px;
}
.uploadImg-title {
margin-left: 3%;
}
}
</style>2、将以上子组件引入父组件内 三大步：importent... component注册 html添加（这里的缓存不建议在这里写，还是用路由里面的meta:keepalive来控制）
3、从后端获取全部题目数据，其大致结构如下：
这个结构稍微有点复杂，但是我们一题一题去拆分就会比较清晰了
进入页面，在mounted里面我们首先把数组的第一项赋值给第一题，我们通过每一题的topicType来控制题目的显隐，上面引入组件那里可以看到
// 获取题目数据//
getdataArr() {
let id = this.$route.query.id;
let sex = this.$route.query.sex;
this.$post("/followup/topicDetail", { baseId: id, sexFlg: sex })
.then((res) => {
if (res.result == "success") {
// 大标题
this.title=res.baseInfo.memo
this.dataArr = res.rows;
this.pagecount = res.rows.length;
this.theCurrentValue = this.dataArr[0];//数组第一项给第一题
this.topicType = this.theCurrentValue.topicType;//获取当前题目类型
// 获取参数
this.parameter.topicId = res.rows[0].id;
res.rows.map((item) => {
this.parameter.baseId = item.baseId;
});
// console.log("结果参数", this.parameter);
} else {
Toast(res.info);
}
})
.catch((err) => {
console.log(err);
});
},以上第一题题目就成功显示了
接下来是点击“下一题”操作，写了很详细的注释，也包含了走后一题，也就是提交的一些列操作
// 下一题 并保存当前题目选项数据
tonextTimu() {
let flag = 0;
if (
this.theCurrentValue.topicType &&
!this.dataArr[this.currentPage].value
)
//跳转下一页之前，先保存当前题目答案到各题value中
flag = 1;
switch (this.theCurrentValue.topicType) {
case "S":
this.$set(this.dataArr[this.currentPage], "value", this.checked);//保存当前题目答案到value中，以便记录每题答案
// 单选如果是必填选项，无数据 校验提示
if (
this.theCurrentValue.isRequired == "1" &&
(this.dataArr[this.currentPage].value == null ||
this.dataArr[this.currentPage].value == "")
) {
Toast("该题为必选，请选择!");
return;
}
break;
// 多选答案包含两种数据格式，多选为数组value，其他（手动填写）为字符串othervalue
case "M":
this.$set(this.dataArr[this.currentPage], "value", this.checked1);
// 选择其他时，将其他数据存放到对应tk属性中
this.dataArr[this.currentPage].value.map((item, index) => {
if (item.title == "其他") {
this.$set(
this.dataArr[this.currentPage].value[index],
"tk",
this.otherValue
);
}
});
// 如果多选是必填选项，无数据 校验提示
if (
this.theCurrentValue.isRequired == "1" &&
(this.dataArr[this.currentPage].value == null ||
this.dataArr[this.currentPage].value.length == 0)
) {
Toast("请至少选择一项!");
return flag;
}
// 其他必填校验 packRequired==1 选择了其他选项，且其他选项为必填时，校验提示
let detectionArray = this.dataArr[this.currentPage].value
for (let i = 0; i < detectionArray.length; i++) {
if (detectionArray[i].packRequired == "1" && detectionArray[i].tk == "") {
Toast("请填写!");
return flag
}
}
break;
case "F":
this.$set(this.dataArr[this.currentPage], "value", this.inputval);
// 无数据 校验提示
if (
this.theCurrentValue.isRequired == "1" &&
(this.dataArr[this.currentPage].value == null ||
this.dataArr[this.currentPage].value.length < 10)
) {
Toast("请至少输入10个字!");
return;
}
break;
case "E":
if (!this.dataArr[this.currentPage].value || this.dataArr[this.currentPage].value.length == 0) {
this.$set(
this.dataArr[this.currentPage],
"value",
this.attachmentData
);
this.$set(this.dataArr[this.currentPage], "fileList", this.fileList);
}
console.log("当前数据", this.dataArr[this.currentPage],this.currentPage,this.dataArr);
// 如果多选是必填选项，无数据 校验提示
if (
this.theCurrentValue.isRequired == "1" &&
(this.dataArr[this.currentPage].value == null ||
this.dataArr[this.currentPage].value.length == 0)
) {
Toast("请至少上传一个附件!");
return;
}
break;
}
// 最后一题时，保存当前题目答案
if (this.currentPage + 1 == this.dataArr.length) {
console.log("所有题", this.dataArr);
// 先处理各题答案
let answer = [];
this.dataArr.map((item, index) => {
// 单选
if (item.topicType == "S") {
if (item.value) {
let t = {};
let choiceAnswers = [];
t.topicId = item.id;
let mult = {
id: item.value,
tk: item.value.tk == undefined ? "null" : item.value.tk,
};
choiceAnswers.push(mult);
t.choiceAnswers = choiceAnswers;
answer.push(t);
}
console.log("单选", answer);
}
// 多选
if (item.topicType == "M") {
let t = {};
t.topicId = item.id;
let choiceAnswers = [];
item.value.map((val, ins) => {
let mult = {};
mult.id = val.id;
mult.tk = val.tk == undefined ? "null" : val.tk;
choiceAnswers.push(mult);
t.choiceAnswers = choiceAnswers;
});
answer.push(t);
console.log("多选", answer);
}
// 简答
if (item.topicType == "F") {
let t = {};
t.topicId = item.id;
t.packAnswers = item.value;
answer.push(t);
console.log("简答", answer);
}
// 上传附件
if (item.topicType == "E") {
console.log(item.value);
let t = {};
t.topicId = item.id;
if (item.value) {
t.attPath = item.value.join(",");
} else {
t.attPath = "";
}
answer.push(t);
console.log("上传附件", answer);
}
});
console.log("答案", answer);
//调用提交函数
this.$post("/followup/writeQuestionAnswer", {
taskId: this.$route.query.taskId,
list: JSON.stringify(answer),
})
.then((res) => {
if (res.result == "success") {
console.log(res);
// 提交成功跳转结果页面
this.$router.push({
path: "/question-resuilt",
query: {
taskId: this.$route.query.taskId,
sexFlg: this.$route.query.sex,
},
});
}
})
.catch((err) => {
console.log(err);
});
return;
}
this.currentPage++;
this.currentPage =
this.currentPage >= this.dataArr.length
? this.dataArr.length
: this.currentPage;
//为下一页题目赋值
this.theCurrentValue = this.dataArr[this.currentPage];
this.topicType = this.theCurrentValue.topicType;
// 改变参数topicId
this.parameter = this.theCurrentValue.id;
// 处理多道相同类型题目 数据处理
switch (this.theCurrentValue.topicType) {
case "S":
if (!this.dataArr[this.currentPage].value) {
this.$nextTick(() => {
this.$refs.radioRef.checked = "";
});
this.checked = null;
} else {
this.$nextTick(() => {
this.$refs.radioRef.checked =
this.dataArr[this.currentPage].value;
});
}
break;
case "M":
if (
this.dataArr[this.currentPage].value == undefined ||
this.dataArr[this.currentPage].value.length == 0
) {
this.$nextTick(() => {
this.$refs.multipleChoiceRef.checked1 = [];
this.$refs.multipleChoiceRef.othervalue = "";
this.$refs.multipleChoiceRef.checkedother = false;
});
this.checked1 = [];
this.otherValue = "";
} else {
this.$nextTick(() => {
// debugger
this.$refs.multipleChoiceRef.checked1 =
this.dataArr[this.currentPage].value;
this.dataArr[this.currentPage].value.map((item, index) => {
if (item.title == "其他") {
this.$refs.multipleChoiceRef.othervalue =
this.dataArr[this.currentPage].value[index].tk;
} else {
this.$refs.multipleChoiceRef.othervalue = "";
}
});
});
}
break;
case "F":
if (!this.dataArr[this.currentPage].value) {
this.$nextTick(() => {
this.$refs.briefAnswer.inputval =
this.dataArr[this.currentPage].value;
});
this.inputval = null;
} else {
this.$nextTick(() => {
this.$refs.briefAnswer.inputval =
this.dataArr[this.currentPage].value;
});
}
break;
case "E":
if (
this.dataArr[this.currentPage].value == undefined ||
this.dataArr[this.currentPage].value.length == 0
) {
this.$nextTick(() => {
// 去除图片链接
this.$refs.uploadAttachment.uploadUrl = [];
// 去除图片显示
this.$refs.uploadAttachment.fileList = [];
});
this.attachmentData = [];
this.fileList = [];
} else {
this.$nextTick(() => {
this.$refs.uploadAttachment.uploadUrl =
this.dataArr[this.currentPage].value;
this.$refs.uploadAttachment.fileList =
this.dataArr[this.currentPage].fileList;
});
}
break;
}
},“上一题”同样需要先保存当前答案，再赋值前一题的数据，以及答案的复现
// 上一题
tolastTimu() {
if (this.currentPage <= 0) {
return;
}
if (
this.theCurrentValue.topicType &&
!this.dataArr[this.currentPage].value
)
switch (this.theCurrentValue.topicType) {
case "S":
this.$set(this.dataArr[this.currentPage], "value", this.checked);
break;
case "M":
this.$set(this.dataArr[this.currentPage], "value", this.checked1);
// 选择其他时，将其他数据存放到对应tk属性中
this.dataArr[this.currentPage].value.map((item, index) => {
if (item.title == "其他") {
this.$set(
this.dataArr[this.currentPage].value[index],
"tk",
this.otherValue
);
}
});
break;
case "F":
this.$set(this.dataArr[this.currentPage], "value", this.inputval);
break;
case "E":
this.$set(
this.dataArr[this.currentPage],
"value",
this.attachmentData
);
this.$set(
this.dataArr[this.currentPage],
"fileList",
this.fileList
);
break;
}
this.currentPage--;
this.currentPage = this.currentPage >= 0 ? this.currentPage : 0;
this.theCurrentValue =
this.currentPage < 0 ? this.dataArr[0] : this.dataArr[this.currentPage];
this.topicType = this.theCurrentValue.topicType;
if (this.currentPage < 0) {
return;
}
switch (this.theCurrentValue.topicType) {
case "S":
this.$nextTick(() => {
this.$refs.radioRef.checked = this.dataArr[this.currentPage].value;
});
break;
case "M":
this.$nextTick(() => {
this.$refs.multipleChoiceRef.checked1 =
this.dataArr[this.currentPage].value;
// 选择其他时，将其他数据存放到对应tk属性中
// 如果有数据
if (this.dataArr[this.currentPage].value.length != 0) {
this.dataArr[this.currentPage].value.map((item, index) => {
if (item.title == "其他") {
this.$refs.multipleChoiceRef.othervalue =
this.dataArr[this.currentPage].value[index].tk;
} else {
this.$refs.multipleChoiceRef.othervalue = "";
}
});
} else {
this.$refs.multipleChoiceRef.othervalue = "";
// 没数据时，清空所有值
this.$set(this.dataArr[this.currentPage], "value", "");
}
});
break;
case "F":
this.$nextTick(() => {
this.$refs.briefAnswer.inputval =
this.dataArr[this.currentPage].value;
});
this.attachmentData = this.dataArr[this.currentPage].value
break;
case "E":
// debugger
this.$nextTick(() => {
this.$refs.uploadAttachment.uploadUrl =
this.dataArr[this.currentPage].value;
this.$refs.uploadAttachment.fileList =
this.dataArr[this.currentPage].fileList;
console.log("当前题", this.dataArr[this.currentPage]);
});
break;
}
},下面是一系列的获取子组件的值，也就是那些答案值
// 获取单选值
getvalueEv(val) {
this.checked = val;
},
// 多选数据
getMultvalue(val) {
if (val) {
this.checked1 = val;
} else {
return;
}
},
// 其他数据单独获取处理
getotherVal(otherValue) {
this.otherValue = otherValue;
},
//获取建议数据
getrecommendvalue(val) {
this.inputval = val;
},
// 获取附件信息图片链接
accessAttachment(uploadUrl) {
this.attachmentData = uploadUrl;
},
// 获取图片列表
getfilelist(fileList) {
this.fileList = fileList;
},目前测试基本没问题，只是整个过程很繁琐，又更好方案的，期望告知！！！
芜湖~~完结撒花
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)