<template>
<div class="subject" v-for="(item,index) in jsonData" :key="item.id">
<div v-if="item.content!=''">
<div v-html="item.content"></div>
</div>
<!-- 单选按钮 40-->
<el-radio-group v-if="item.type === 'radio'" style="margin: 10px;" class="mt_15" v-model="item.answer"
@change="((label)=>{radioChange2(label, index)})">
<el-radio :label="status.id" v-for="(status, key) in item.optionals"
:key="status.id">{{status.optionValue}}</el-radio>
</el-radio-group>
<!-- 复选框 30-->
<el-checkbox-group v-if="item.type === 'checkbox'" style="margin:10px;" v-model="item.answer1"
@change="((label)=>{checkboxChangeList2(label, index)})">
<el-checkbox :label="info.id" v-for="(info, key) in item.optionals"
:key="info.id">{{info.optionValue}}</el-checkbox>
</el-checkbox-group>
<!-- 文本框 10-->
<el-input type="textarea" v-if="item.type==='textarea'" style="margin:10px;" placeholder="请输入内容"
resize="none" @input="getCurIndex(index)" @blur="OtherFun($event)" v-model="item.answer" />
<div class="buttondom mt_15 mb_15">
<el-button type="primary" @click="goSubmit">提交</el-button>
</div></template>
<script>
export default {
data() {
return {
cur_item_index: 0, //记录当前选项下标
//json数据
jsonData:[], //从后台获取
}
},
methods: {
// 获取点击选项的当前下标
getCurIndex(index) {
this.cur_item_index = index
console.log('下标', this.cur_item_index)
},
//answer1放多选的值,是数组类型,其他字段的值放在answer里面,是string类型
// 单选
radioChange2(val, index) {
console.log(val, index)
//label是绑定的值,index是下标
this.jsonData[index].answer = val;
},
// 多选,
checkboxChangeList2(val, index) {
console.log(val, index)
this.jsonData[index].answer1 = val;
},
// 多文本框
OtherFun(e) {
console.log('文本框', e.target.value)
this.jsonData[this.cur_item_index].answer = e.target.value;
},
// 提交调查答案
goSubmit() {
let answerList = this.jsonData;
// 传输id和结果
let data = {};
data.id = this.id;
data.name = this.name;
data.telephone = this.telephone;
data.txTime = new Date();
data.volunteerTemplateList = answerList;
if (data.name == "" || data.name == "") {
Dialog({
message: '请完善姓名!'
})
return;
}
console.log(data, 'data')
xxxx(data).then((response) => {
if (response.code === 200) {
Dialog({
message: '提交成功!'
})
}
})
},
</script>