|
|
@@ -0,0 +1,197 @@
|
|
|
+<template>
|
|
|
+ <div class="c_box">
|
|
|
+ <div class="c_box_title">{{ title }}</div>
|
|
|
+ <div class="c_body">
|
|
|
+ <div v-if="type == 3">
|
|
|
+ <div v-for="(item, index) in checkArray[page].array" :key="index" class="check_box">
|
|
|
+ <div class="title">{{ selectType(item, index) }}</div>
|
|
|
+ <div v-if="item.ttype == 1" class="answerBox"><choiceV :cJson.sync="item.json"></choiceV></div>
|
|
|
+ <div v-for="(item2, index2) in item.array" :key="`${index}-${index2}`" class="check_box_xia">
|
|
|
+ <div class="title">{{ selectType(item2, index2) }}</div>
|
|
|
+ <div v-if="item2.ttype == 1" class="answerBox"><choiceV :cJson.sync="item2.json"></choiceV></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div v-for="(item, index) in checkArray" :key="index" class="check_box">
|
|
|
+ <div class="title">{{ selectType(item, index) }}</div>
|
|
|
+ <div v-if="item.ttype == 1" class="answerBox"><choiceV :cJson.sync="item.json"></choiceV></div>
|
|
|
+ <div v-for="(item2, index2) in item.array" :key="`${index}-${index2}`" class="check_box_xia">
|
|
|
+ <div class="title">{{ selectType(item2, index2) }}</div>
|
|
|
+ <div v-if="item2.ttype == 1" class="answerBox"><choiceV :cJson.sync="item2.json"></choiceV></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="checkArray.length > 1 && type == 3" class="page">
|
|
|
+ <el-button type="primary" size="mini" :disabled="page == 0" @click="page--">上一页</el-button>
|
|
|
+ <div class="p_page"><span>{{ page + 1 }}</span><span>/</span><span>{{ checkArray.length }}</span></div>
|
|
|
+ <el-button type="primary" size="mini" :disabled="page == (checkArray.length - 1)" @click="page++">下一页</el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import choiceV from './choice.vue';
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ cJson: {
|
|
|
+ type: Array,
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ choiceV
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ checkArray: [],
|
|
|
+ type: 1,
|
|
|
+ page: 0,
|
|
|
+ options2: {
|
|
|
+ 1: "选择题",
|
|
|
+ 2: "问答题",
|
|
|
+ 3: "填空题",
|
|
|
+ 4: "添加文档"
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ selectType() {
|
|
|
+ return function (item, index) {
|
|
|
+ if (item.ttype == 1) {
|
|
|
+ return index + 1 + "、" + this.options2[item.type];
|
|
|
+ } else if (item.ttype == 2) {
|
|
|
+ return `第${index + 1}组 （共${item.array.length}题）`;
|
|
|
+ } else if (item.ttype == 3) {
|
|
|
+ return `分页${index + 1}`;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ cJson: {
|
|
|
+ handler(newVal, oldVal) {
|
|
|
+ console.log(newVal);
|
|
|
+ console.log(oldVal);
|
|
|
+ this.checkArray = this.setJson(this.depthCopy(newVal))
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ depthCopy(s) {
|
|
|
+ return JSON.parse(JSON.stringify(s));
|
|
|
+ },
|
|
|
+ setJson(json) {
|
|
|
+ if (json.length > 0) {
|
|
|
+ let _json = this.depthCopy(json)
|
|
|
+ this.type = _json[0].ttype
|
|
|
+ let checkArray = _json.filter(item => {
|
|
|
+ if (item.array) {
|
|
|
+ item.array = item.array.filter(item2 => {
|
|
|
+ if (item2.ttype == 1 && item2.json && !item2.json.answer2) {
|
|
|
+ item2.json.answer2 = []
|
|
|
+ }
|
|
|
+ if (item2.array) {
|
|
|
+ item2.array = item2.array.filter(item3 => {
|
|
|
+ if (item3.ttype == 1 && item3.json && !item3.json.answer2) {
|
|
|
+ item3.json.answer2 = []
|
|
|
+ }
|
|
|
+ return item3
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return (item2.ttype != 1 && item2.array.length > 0) || (item2.ttype == 1)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (item.ttype == 1 && item.json && !item.json.answer2) {
|
|
|
+ item.json.answer2 = []
|
|
|
+ }
|
|
|
+ console.log(item.array);
|
|
|
+ return (item.ttype != 1 && item.array.length > 0) || (item.ttype == 1)
|
|
|
+ })
|
|
|
+ console.log(checkArray);
|
|
|
+ return checkArray
|
|
|
+ } else {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.checkArray = this.setJson(this.depthCopy(this.cJson))
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.c_box {
|
|
|
+ padding: 10px 0 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 95%;
|
|
|
+ margin: 10px auto 0;
|
|
|
+ background: #fff;
|
|
|
+ height: calc(100% - 10px);
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.c_box_title {
|
|
|
+ width: 90%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ word-break: break-all;
|
|
|
+ margin: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_body {
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.check_box{
|
|
|
+
|
|
|
+}
|
|
|
+.check_box + .check_box{
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.check_box > .title{
|
|
|
+ font-size:20px;
|
|
|
+ word-break: break-all;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.check_box > .answerBox{
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+}
|
|
|
+.check_box > .noanswerBox{
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.check_box_xia{
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.check_box_xia > .title{
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.check_box_xia > .answerBox{
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.check_box_xia > .noanswerBox{
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.page{
|
|
|
+ margin: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.p_page{
|
|
|
+ margin: 0 10px;
|
|
|
+}
|
|
|
+</style>
|
