thainv-dev: tạo lại cấu trúc folder và làm UI
This commit is contained in:
nguyen van thai
@@ -1,6 +1,299 @@
|
||||
<script setup lang="ts">
|
||||
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() {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
Survey
|
||||
</template>
|
||||
|
||||
<div class="inline-block px-4 py-2 shadow-xl rounded-lg bg-[#f5f5f5] !text-black">
|
||||
<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">
|
||||
<h5 class="mb-1 font-700 text-black">{{ `${questionIndex + 1}. ${question.title}` }}</h5>
|
||||
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user