<template> <div class="title-box flex justify-between mb40"> <p class="title">문제 조회</p> </div> <div class="content-t"> <div class="board-wrap"> <div class="tab-box"> <label class="mr20 title1"> <input type="radio" v-model="selectedTab" value="tab1" /> 문제 유형 (일반형) </label> <label class="mr20 title1"> <input type="radio" v-model="selectedTab" value="tab2" /> 문제 유형 (O,X형) </label> <label class="mr20 title1"> <input type="radio" v-model="selectedTab" value="tab3" /> 문제 유형 (연결형) </label> <label class="mr20 title1"> <input type="radio" v-model="selectedTab" value="tab4" /> 문제 유형 (다중 정답형) </label> </div> <hr> <div class="gd-col2 "> <div class="flex align-center mb20"> <label for="" class="title2">카테고리</label> <select v-model="selectedSearchOption" class="mr10 data-wrap"> <option value="bbsTtl">제목</option> <option value="bbsCnt">내용</option> <option value="userNm">작성자</option> <option value="bbsCls">카테고리</option> </select> </div> <div class="flex align-center mb20"> <label for="" class="title2">문제 유형</label> <select v-model="selectedSearchOption" class="mr10 data-wrap"> <option value="bbsTtl">제목</option> <option value="bbsCnt">내용</option> <option value="userNm">작성자</option> <option value="bbsCls">카테고리</option> </select> </div> <div class="flex align-center"> <label for="" class="title2">지문</label> <select v-model="selectedSearchOption" class="mr10 data-wrap"> <option value="bbsTtl">제목</option> <option value="bbsCnt">내용</option> <option value="userNm">작성자</option> <option value="bbsCls">카테고리</option> </select> </div> <div class="flex align-center"> <label for="" class="title2">문제 지표</label> <select v-model="selectedSearchOption" class="mr10 data-wrap"> <option value="bbsTtl">제목</option> <option value="bbsCnt">내용</option> <option value="userNm">작성자</option> <option value="bbsCls">카테고리</option> </select> </div> </div> <div class="flex align-center mb20 mt40"> <label for="" class="title2">문제 배점</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20"> <label for="" class="title2">내용</label> <textarea name="" id="" class="data-wrap"></textarea> </div> <div class="flex align-center mb20"> <label for="" class="title2">힌트</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20"> <label for="" class="title2">첨부파일</label> <input type="file" ref="fileInput" @change="handleFileUpload" /> </div> <hr> <div v-if="selectedTab === 'tab1'"> <div class="flex align-center mb20"> <label for="" class="title2">답1</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20"> <label for="" class="title2">답2</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20"> <label for="" class="title2">답3</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20"> <label for="" class="title2">답4</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20"> <label for="" class="title2">해설</label> <textarea name="" id="" class="data-wrap"></textarea> </div> </div> <div v-else-if="selectedTab === 'tab2'"> <div class="flex align-center mb20"> <label for="" class="title2">답</label> <select v-model="selectedSearchOption" class="mr10 data-wrap"> <option value="bbsTtl">O</option> <option value="bbsCnt">X</option> </select> </div> <div class="flex align-center mb20"> <label for="" class="title2">해설</label> <textarea name="" id="" class="data-wrap"></textarea> </div> </div> <div v-else-if="selectedTab === 'tab3'"> <div class="gd-col2 "> <div class="flex align-center mb20 mr40"> <label for="" class="title2">문제1</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20"> <label for="" class="title2">답1</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20 mr40"> <label for="" class="title2">문제2</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20"> <label for="" class="title2">답2</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20 mr40"> <label for="" class="title2">문제3</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20 "> <label for="" class="title2">답3</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20 mr40"> <label for="" class="title2">문제4</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20"> <label for="" class="title2">답4</label> <input type="text" class="data-wrap"> </div> </div> <div class="flex align-center mb20"> <label for="" class="title2">해설</label> <textarea name="" id="" class="data-wrap"></textarea> </div> </div> <div v-else-if="selectedTab === 'tab4'"> <div class="flex align-center mb20 mr40"> <label for="" class="title2">문제1</label> <input type="text" class="data-wrap"> <input type="checkbox" class="ui-checkbox ml30"> </div> <div class="flex align-center mb20 mr40"> <label for="" class="title2">문제2</label> <input type="text" class="data-wrap"> <input type="checkbox" class="ui-checkbox ml30"> </div> <div class="flex align-center mb20 mr40"> <label for="" class="title2">문제3</label> <input type="text" class="data-wrap"> <input type="checkbox" class="ui-checkbox ml30"> </div> <div class="flex align-center mb20 mr40"> <label for="" class="title2">문제4</label> <input type="text" class="data-wrap"> <input type="checkbox" class="ui-checkbox ml30"> </div> <div class="flex align-center mb20"> <label for="" class="title2">해설</label> <textarea name="" id="" class="data-wrap"></textarea> </div> </div> </div> <div class="flex justify-between mt50"> <button type="button" title="글쓰기" class="new-btn" @click="goToPage('QuestionList')"> 목록 </button> <div class="flex"> <button type="button" title="글쓰기" class="new-btn mr10"> 삭제 </button> <button type="button" title="글쓰기" class="new-btn"> 수정 </button> </div> </div> </div> </template> <script> import SvgIcon from '@jamescoyle/vue-icon'; import { mdiMagnify } from '@mdi/js'; import axios from 'axios'; export default { data() { return { mdiMagnify: mdiMagnify, selectedTab: 'tab1', prblm: {}, dataList: [], problemDetail: [], } }, methods: { goToPage(page) { this.$router.push({ name: page }); }, problemSearch() { const vm = this; vm.prblm = JSON.parse(sessionStorage.getItem("selectQuestionList")); axios({ url: "problem/problemInfo.json", method: "post", headers: { "Content-Type": "application/json; charset=UTF-8", }, data: { prblmId: vm.prblm.prblmId, }, }) .then(function (res) { console.log("problem - response : ", res.data); vm.dataList = res.data.problem; vm.problemDetail = res.data.problemDetail; }) .catch(function (error) { console.log("problem - error : ", error); }); }, }, watch: { }, computed: { }, components: { SvgIcon }, mounted() { this.problemSearch(); } } </script> <style scoped> .ui-checkbox { width: 30px; height: 30px; } </style>