<template>
<div class="hello">
<div style="width: 100%; height: auto;">
<div class="title">
<div style="text-align: center;">
<h1>{{tableData.name}}</h1>
</div>
<div class="child" style="text-align: left;">
<div class="endTime" style="float: left;">
截至時間: {{tableData.endTime}}
</div>
<div class="type" style="text-align: right;">
類型: {{tableData.type}}
</div>
</div>
</div>
<hr >
<div>
<ul style="list-style: none; padding:0; margin:0; " v-for="(item, index0) in questionData" :key="index0">
<li>
{{item.sort}}.{{item.title}}
</li>
<li v-if="item.type === questionStatus0">
<div v-for="(q, index1) in item.options" :key="index1">
<div v-if="answerData.length == 0">
<input type="radio" readonly="readonly" :name="item.title" @change="getRadioVal($event,item.id)">{{q.option}}</input>
</div>
<div v-if="answerData.length > 0" style="pointer-events: none;">
<input type="radio" v-bind:checked="q.flag" :name="item.title" >{{q.option}}</input>
</div>
</div>
</li>
<li v-if="item.type === questionStatus1">
<div v-for="(q, index3) in item.options" :key="index3">
<div v-if="answerData.length == 0">
<label>
<input type="checkbox" :value="q.option" @change="getCheckboxVal($event,item.id)" >{{q.option}}
</label>
</div>
<div v-if="answerData.length > 0" style="pointer-events: none;">
<label>
<input type="checkbox" v-bind:checked="q.flag" :value="q.option" >{{q.option}}
</label>
</div>
</div>
</li>
<li v-if="item.type === questionStatus2">
<div v-if="answerData.length == 0">
<input type="text" @change="getTextVal($event,item.id)" style="border-style:none none solid none; width: 100%; ">
</div>
<div v-if="answerData.length > 0" style="pointer-events: none;">
<input type="text" :value="item.answer" style="border-style:none none solid none; width: 100%; ">
</div>
</li>
</ul>
</div>
<button @click="submit">提交</button>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
questionStatus0: 0,
questionStatus1: 1,
questionStatus2: 2,
radioVal: [],
checkboxVal: [],
textVal: [],
test: true,
tableData: {
id: 1,
name: '標題1',
endTime: '2020-06-06',
type: '興趣報名',
image: '../image/2.png'
},
questionData: [{
id: 1,
sort: 1,
title: '問題1',
type: 0,
options: [{
id: 1,
option: '是'
}, {
id: 1,
option: '否'
}]
}, {
id: 2,
sort: 2,
title: '問題2',
type: 1,
options: [{
id: 1,
option: '選項1'
}, {
id: 1,
option: '選項2'
}, {
id: 1,
option: '選項3'
}]
}, {
id: 3,
sort: 3,
title: '問題3',
type: 2,
options: [{
id: 1,
option: ''
}]
}, {
id: 4,
sort: 4,
title: '問題4',
type: 0,
options: [{
id: 1,
option: '是'
}, {
id: 1,
option: '否'
}]
}, {
id: 5,
sort: 5,
title: '問題5',
type: 1,
options: [{
id: 1,
option: '選項1'
}, {
id: 1,
option: '選項2'
}, {
id: 1,
option: '選項3'
}]
}, {
id: 6,
sort: 6,
title: '問題6',
type: 2,
options: [{
id: 1,
option: ''
}]
}],
answerData: [{
id: 1,
answer: '否'
}, {
id: 2,
answer: '選項1'
}, {
id: 2,
answer: '選項2'
}, {
id: 3,
answer: '111'
}, {
id: 4,
answer: '是'
}, {
id: 5,
answer: '選項2'
}, {
id: 5,
answer: '選項3'
}, {
id: 6,
answer: '222'
}]
}
},
created() {
let question = this.questionData;
let answer1 = this.answerData;
for (let i = 0; i < question.length; i++) {
let temp = question[i].options;
console.log(3, temp)
for (let k = 0; k < temp.length; k++) {
for (let j = 0; j < answer1.length; j++) {
if (question[i].id === answer1[j].id) {
if (question[i].type === this.questionStatus2) {
question[i]['answer'] = answer1[j].answer
break;
}
if (temp[k].option === answer1[j].answer) {
temp[k]['flag'] = true
console.log(2, temp[k])
break;
}
}
}
}
}
this.questionData = question
},
methods: {
submit() {
let a = this.radioVal.concat(this.checkboxVal)
a = a.concat(this.textVal)
console.log(a)
},
getRadioVal(row, id) {
let v1 = row.path[0].defaultValue;
let title = row.path[0].name
let data = {
value: v1,
id: id
}
let temp = this.radioVal;
for (let i = 0; i < temp.length; i++) {
let t = temp[i]
if (t.id == id) {
console.log(id)
temp.splice(i, 1)
}
}
temp.push(data)
this.radioVal = temp
},
getCheckboxVal(row, id) {
let v = row.path[0].defaultValue;
let v1 = row.path[0].checked;
let data = {
value: v,
id: id
}
let temp = this.checkboxVal;
let a = false;
for (let i = 0; i < temp.length; i++) {
let t = temp[i]
if (t.id == id) {
if (t.value == v) {
if (!v1) {
temp.splice(i, 1)
a = true
break
}
}
}
}
if (!a) {
temp.push(data)
}
this.checkboxVal = temp;
},
getTextVal(row, id) {
let v = row.path[0].value
let data = {
value: v,
id: id
}
let temp = this.textVal
for (let i = 0; i < temp.length; i++) {
let t = temp[i]
if (t.id == id) {
console.log(id)
temp.splice(i, 1)
}
}
temp.push(data)
this.textVal = temp
}
},
}
</script>
效果:
