2024-06-06 13:29:22 +07:00
|
|
|
<script setup lang="ts">
|
2024-06-12 17:17:49 +07:00
|
|
|
import { useSurveyStore } from "~/stores/survey";
|
|
|
|
|
import type { Survey } from "~/server/models/survey";
|
|
|
|
|
|
|
|
|
|
const props = defineProps<{ dataId?: string }>();
|
|
|
|
|
|
|
|
|
|
const store = reactive({
|
|
|
|
|
survey: useSurveyStore(),
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const { currentSurvey } = storeToRefs(store.survey);
|
|
|
|
|
|
|
|
|
|
const survey = reactive<Survey>({});
|
|
|
|
|
|
|
|
|
|
async function loadData() {
|
|
|
|
|
await store.survey.fetchById(Number(props.dataId));
|
|
|
|
|
|
|
|
|
|
assignData();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function assignData() {
|
|
|
|
|
Object.assign(survey, currentSurvey.value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onBeforeMount(async () => {
|
|
|
|
|
await loadData();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const dataSurvey = {
|
|
|
|
|
"articles": null,
|
|
|
|
|
"questionGeneral": [
|
|
|
|
|
{
|
|
|
|
|
"answers": [
|
|
|
|
|
{
|
|
|
|
|
"id": 85,
|
|
|
|
|
"siteId": 1,
|
|
|
|
|
"surveyId": 10,
|
|
|
|
|
"questionId": 84,
|
|
|
|
|
"title": "Không",
|
|
|
|
|
"thumbnail": "",
|
|
|
|
|
"description": "",
|
|
|
|
|
"type": 1,
|
|
|
|
|
"isCorrect": false,
|
|
|
|
|
"order": 2,
|
|
|
|
|
"status": 6,
|
|
|
|
|
"createdBy": 3,
|
|
|
|
|
"createdOn": "2024-06-04T17:13:45.794056",
|
|
|
|
|
"updatedBy": null,
|
|
|
|
|
"updatedOn": null
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": 84,
|
|
|
|
|
"siteId": 1,
|
|
|
|
|
"surveyId": 10,
|
|
|
|
|
"questionId": 84,
|
|
|
|
|
"title": "Có",
|
|
|
|
|
"thumbnail": "",
|
|
|
|
|
"description": "",
|
|
|
|
|
"type": 1,
|
|
|
|
|
"isCorrect": true,
|
|
|
|
|
"order": 1,
|
|
|
|
|
"status": 6,
|
|
|
|
|
"createdBy": 3,
|
|
|
|
|
"createdOn": "2024-06-04T17:13:45.794056",
|
|
|
|
|
"updatedBy": null,
|
|
|
|
|
"updatedOn": null
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"responses": null,
|
|
|
|
|
"id": 84,
|
|
|
|
|
"siteId": 1,
|
|
|
|
|
"surveyId": 10,
|
|
|
|
|
"title": "Bạn có chọn xe công nghệ để di chuyển trong giờ cao điểm không?",
|
|
|
|
|
"thumbnail": "",
|
|
|
|
|
"description": "",
|
|
|
|
|
"type": 0,
|
|
|
|
|
"order": 3,
|
|
|
|
|
"status": 6,
|
|
|
|
|
"createdBy": 3,
|
|
|
|
|
"createdOn": "2024-06-04T17:13:45.794056",
|
|
|
|
|
"updatedBy": null,
|
|
|
|
|
"updatedOn": null
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"answers": [
|
|
|
|
|
{
|
|
|
|
|
"id": 83,
|
|
|
|
|
"siteId": 1,
|
|
|
|
|
"surveyId": 10,
|
|
|
|
|
"questionId": 83,
|
|
|
|
|
"title": "Xe bus",
|
|
|
|
|
"thumbnail": "",
|
|
|
|
|
"description": "",
|
|
|
|
|
"type": 1,
|
|
|
|
|
"isCorrect": false,
|
|
|
|
|
"order": 3,
|
|
|
|
|
"status": 6,
|
|
|
|
|
"createdBy": 3,
|
|
|
|
|
"createdOn": "2024-06-04T17:13:45.794056",
|
|
|
|
|
"updatedBy": null,
|
|
|
|
|
"updatedOn": null
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": 82,
|
|
|
|
|
"siteId": 1,
|
|
|
|
|
"surveyId": 10,
|
|
|
|
|
"questionId": 83,
|
|
|
|
|
"title": "Xe đạp",
|
|
|
|
|
"thumbnail": "",
|
|
|
|
|
"description": "",
|
|
|
|
|
"type": 1,
|
|
|
|
|
"isCorrect": false,
|
|
|
|
|
"order": 2,
|
|
|
|
|
"status": 6,
|
|
|
|
|
"createdBy": 3,
|
|
|
|
|
"createdOn": "2024-06-04T17:13:45.794056",
|
|
|
|
|
"updatedBy": null,
|
|
|
|
|
"updatedOn": null
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": 81,
|
|
|
|
|
"siteId": 1,
|
|
|
|
|
"surveyId": 10,
|
|
|
|
|
"questionId": 83,
|
|
|
|
|
"title": "Xe máy",
|
|
|
|
|
"thumbnail": "",
|
|
|
|
|
"description": "",
|
|
|
|
|
"type": 1,
|
|
|
|
|
"isCorrect": true,
|
|
|
|
|
"order": 1,
|
|
|
|
|
"status": 6,
|
|
|
|
|
"createdBy": 3,
|
|
|
|
|
"createdOn": "2024-06-04T17:13:45.794056",
|
|
|
|
|
"updatedBy": null,
|
|
|
|
|
"updatedOn": null
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"responses": null,
|
|
|
|
|
"id": 83,
|
|
|
|
|
"siteId": 1,
|
|
|
|
|
"surveyId": 10,
|
|
|
|
|
"title": "Bạn thường di chuyển bằng phương tiện gì?",
|
|
|
|
|
"thumbnail": "",
|
|
|
|
|
"description": "",
|
|
|
|
|
"type": 1,
|
|
|
|
|
"order": 2,
|
|
|
|
|
"status": 6,
|
|
|
|
|
"createdBy": 3,
|
|
|
|
|
"createdOn": "2024-06-04T17:13:45.794056",
|
|
|
|
|
"updatedBy": null,
|
|
|
|
|
"updatedOn": null
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"answers": [
|
|
|
|
|
{
|
|
|
|
|
"id": 80,
|
|
|
|
|
"siteId": 1,
|
|
|
|
|
"surveyId": 10,
|
|
|
|
|
"questionId": 82,
|
|
|
|
|
"title": "21 lần trở lên",
|
|
|
|
|
"thumbnail": "",
|
|
|
|
|
"description": "",
|
|
|
|
|
"type": 1,
|
|
|
|
|
"isCorrect": false,
|
|
|
|
|
"order": 3,
|
|
|
|
|
"status": 6,
|
|
|
|
|
"createdBy": 3,
|
|
|
|
|
"createdOn": "2024-06-04T17:13:45.794056",
|
|
|
|
|
"updatedBy": null,
|
|
|
|
|
"updatedOn": null
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": 79,
|
|
|
|
|
"siteId": 1,
|
|
|
|
|
"surveyId": 10,
|
|
|
|
|
"questionId": 82,
|
|
|
|
|
"title": "14 - 21 lần",
|
|
|
|
|
"thumbnail": "",
|
|
|
|
|
"description": "",
|
|
|
|
|
"type": 1,
|
|
|
|
|
"isCorrect": false,
|
|
|
|
|
"order": 0,
|
|
|
|
|
"status": 6,
|
|
|
|
|
"createdBy": 3,
|
|
|
|
|
"createdOn": "2024-06-04T17:13:45.794056",
|
|
|
|
|
"updatedBy": null,
|
|
|
|
|
"updatedOn": null
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": 78,
|
|
|
|
|
"siteId": 1,
|
|
|
|
|
"surveyId": 10,
|
|
|
|
|
"questionId": 82,
|
|
|
|
|
"title": "7 lần",
|
|
|
|
|
"thumbnail": "",
|
|
|
|
|
"description": "",
|
|
|
|
|
"type": 1,
|
|
|
|
|
"isCorrect": true,
|
|
|
|
|
"order": 1,
|
|
|
|
|
"status": 6,
|
|
|
|
|
"createdBy": 3,
|
|
|
|
|
"createdOn": "2024-06-04T17:13:45.794056",
|
|
|
|
|
"updatedBy": null,
|
|
|
|
|
"updatedOn": null
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"responses": null,
|
|
|
|
|
"id": 82,
|
|
|
|
|
"siteId": 1,
|
|
|
|
|
"surveyId": 10,
|
|
|
|
|
"title": "Mỗi tuần bạn di chuyển với tần suất bao nhiêu lần?",
|
|
|
|
|
"thumbnail": "",
|
|
|
|
|
"description": "Mỗi tuần bạn di chuyển với tần suất bao nhiêu lần?",
|
|
|
|
|
"type": 1,
|
|
|
|
|
"order": 1,
|
|
|
|
|
"status": 6,
|
|
|
|
|
"createdBy": 3,
|
|
|
|
|
"createdOn": "2024-06-04T17:13:45.794056",
|
|
|
|
|
"updatedBy": null,
|
|
|
|
|
"updatedOn": null
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"responses": null,
|
|
|
|
|
"id": 10,
|
|
|
|
|
"siteId": 1,
|
|
|
|
|
"title": "Thói quen di chuyển trong giờ cao điểm",
|
|
|
|
|
"code": "thoi-quen-di-chuyen-trong-gio-cao-diem",
|
|
|
|
|
"type": 0,
|
|
|
|
|
"startTime": "2024-06-04T17:18:00",
|
|
|
|
|
"endTime": "2024-06-20T00:00:00",
|
|
|
|
|
"settings": {
|
|
|
|
|
"participantType": 3,
|
|
|
|
|
"resultPublication": 2
|
|
|
|
|
},
|
|
|
|
|
"features": "Feature",
|
|
|
|
|
"taxonomy": "Biên tập",
|
|
|
|
|
"keywords": "thoiquendichuyen;giocaodiem",
|
|
|
|
|
"thumbnail": "https://resource.vpress.vn/resources/1/private/13cee27a2bd93915479f049378cffdd3/thoiquendichuyentronggiocaodiem-20240604100659862.png",
|
|
|
|
|
"description": "Thói quen di chuyển trong giờ cao điểm",
|
|
|
|
|
"order": 1,
|
|
|
|
|
"status": 6,
|
|
|
|
|
"createdBy": 3,
|
|
|
|
|
"createdOn": "2024-06-04T17:13:45.653177",
|
|
|
|
|
"updatedBy": null,
|
|
|
|
|
"updatedOn": null
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const selectSurveyAnswer = ref<any>([])
|
|
|
|
|
|
|
|
|
|
dataSurvey.questionGeneral.forEach((question) => {
|
|
|
|
|
switch (question.type) {
|
|
|
|
|
case 0:
|
|
|
|
|
selectSurveyAnswer.value.push([])
|
|
|
|
|
break;
|
|
|
|
|
case 1:
|
|
|
|
|
selectSurveyAnswer.value.push(0)
|
|
|
|
|
break;
|
|
|
|
|
case 2:
|
|
|
|
|
selectSurveyAnswer.value.push([])
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
async function submitSend() {
|
|
|
|
|
|
|
|
|
|
}
|
2024-06-06 13:29:22 +07:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
2024-06-12 17:17:49 +07:00
|
|
|
|
2024-06-18 14:04:24 +07:00
|
|
|
<div class="inline-block px-4 py-2 shadow-xl rounded-lg bg-[#f5f5f5] !text-black-500">
|
2024-06-12 17:17:49 +07:00
|
|
|
<h5 class="underline decoration-gray-500 font-bold mb-2">Khảo sát: {{ dataSurvey?.title }}</h5>
|
|
|
|
|
|
|
|
|
|
<ul class="px-3">
|
|
|
|
|
<li v-for="(question, questionIndex) in dataSurvey.questionGeneral" :key="questionIndex" class="mb-2">
|
2024-06-18 14:04:24 +07:00
|
|
|
<h5 class="mb-1 font-700 text-black-500">{{ `${questionIndex + 1}. ${question.title}` }}</h5>
|
2024-06-12 17:17:49 +07:00
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
<li v-for="(answer, answerIndex) in question.answers" :key="answerIndex" class="flex items-center gap-1 py-1">
|
|
|
|
|
<input :id="`answer-survey-${questionIndex}-${answerIndex}`" :type="question.type === 1 ? 'radio' : 'checkbox'" :value="answerIndex" v-model="selectSurveyAnswer[questionIndex]">
|
|
|
|
|
<label :for="`answer-survey-${questionIndex}-${answerIndex}`" class="font-semibold">{{ answer.title }}</label>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<button @click="submitSend" class="bg-primary-500 text-white py-1 px-3 rounded-4px cursor-pointer hover:bg-primary-600 float-right">Gửi câu trả lời</button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
:root {
|
|
|
|
|
--before-width: 0%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
