页面修改

src/pages/exam/examEdit.vue

@@ -64,14 +64,16 @@
     width: 328px;
     border-top: 1px solid #d9d9d9;
   }
-  .List-ul{
-    margin:0;
-    padding:0;
+
+  .List-ul {
+    margin: 0;
+    padding: 0;
   }
+
   .List-ul li {
     height: 33px;
     border-bottom: 1px solid #f3f3f3;
-    list-style-type:none;
+    list-style-type: none;
   }
 
   .List-ul-li-checked {
@@ -79,7 +81,8 @@
     color: #333;
     width: 328px;
   }
-.List-ul li a {
+
+  .List-ul li a {
     display: block;
     padding-left: 25px;
     line-height: 33px;
@@ -88,29 +91,31 @@
     border-bottom: 1px solid #f3f3f3;
     color: #555;
     text-decoration: none;
-}
+  }
 
-.List-ul-li-checked b {
+  .List-ul-li-checked b {
     color: #000;
-}
-.Showbtn {
+  }
+
+  .Showbtn {
     display: block;
     width: 90px;
     float: right;
     padding-top: 8px;
     z-index: 1000;
-}
+  }
+
 </style>
 <template>
   <div class="examPaper">
     <div class="examPaper_Top">
       <div style="width:80%;display:flex;">
         <div style="width:40%;margin:0 20px;">
-          <q-input filled label="标题" />
+          <q-input filled label="标题" v-model="DataObj.PaperName" />
         </div>
         <div style="width:20%;">
           <q-select filled option-value="Id" option-label="Name" :options="easyList" emit-value map-options label="难度"
-            use-input clearable />
+            use-input clearable v-model="DataObj.DifficultyType" />
         </div>
       </div>
       <div style="width:20%;text-align:right;">
@@ -125,35 +130,190 @@
           <span>  总分：<i>50.0</i></span>
         </p>
         <div class="Left-list" style="height:740px;overflow:auto;">
-          <div class="List-con1">
-            <ul class="List-ul">
-              <li class="">
-                  <a href="#">
-                    <b>(<label>1</label>)</b>
-                    <b>ここは郵便局です</b>
-                    <span class="Showbtn"></span>
-                  </a>
-              </li>
-            </ul>
-          </div>
+          <template v-if="DataObj&&DataObj.GroupList&&DataObj.GroupList.length>0">
+            <div class="List-con1" v-for="(gItem,gIndex) in DataObj.GroupList" :key="gIndex">
+              <b>(<label>{{gIndex+1}}</label>)</b>
+              <b>{{gItem.GroupName}}</b>
+              <ul class="List-ul" v-if="gItem.DetailsList&&gItem.DetailsList.length>0">
+                <li class="" style="cursor:pointer;" v-for="(dItem,dIndex) in gItem.DetailsList" :key="dIndex" @click="ClickItem(dItem)">
+                  {{dIndex+1}} <span @click="ClickItem(dItem)" v-html="dItem.Title">
+                  </span>
+                </li>
+              </ul>
+            </div>
+          </template>
         </div>
       </div>
       <div class="Exam-right f1">
         <span></span>
+        <div class="row wrap" v-if="ChooseItem">
+           <div class="col-12"   style="margin-bottom:20px">
+            题型
+            <template v-for="(fItem,fIndex) in firstTypeList">
+              <q-btn :key="fIndex" color="accent" :label="fItem.Name" style="margin-left:5px;"
+                @click="onItemClick(fItem)" />
+            </template>
+            <q-btn-dropdown color="accent" label="更多" style="margin-left:5px;">
+              <q-list>
+                <q-item v-for="(fItem,fIndex) in secondTypeList" @click="onItemClick(fItem)" clickable v-close-popup
+                  :key="fIndex">
+                  <q-item-section>
+                    <q-item-label>{{fItem.Name}}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+          </div> 
+
+          <div class="col-12">
+            <template v-if="ChooseItem.QuestionTypeKey=='cloze'">
+              <span class="question_number">选项处用##题号##替换，如##1##</span>
+            </template>
+            <UeEditor v-if="ChooseItem.QuestionTypeKey!='sharing-choose'" v-model="ChooseItem.Title" :config="config"
+              ref="UE_Title"></UeEditor>
+          </div>
+          <br />
+          <!--单选题-->
+          <single v-if="ChooseItem.QuestionTypeKey=='single'||ChooseItem.QuestionTypeKey=='single-number'"
+            :questionData="AnswerList" @getChild="getChildData" :setOption="ChooseItem"></single>
+          <!--多选题-->
+          <multiple v-if="ChooseItem.QuestionTypeKey=='multiple'" :questionData="AnswerList" @getChild="getChildData"
+            :setOption="ChooseItem"></multiple>
+          <!--填空题-->
+          <fill-in v-if="ChooseItem.QuestionTypeKey=='fill-in'" :questionData="AnswerList" @getChild="getChildData"
+            :setOption="ChooseItem"></fill-in>
+          <!--判断题-->
+          <judge v-if="ChooseItem.QuestionTypeKey=='judge'" :questionData="AnswerList" @getChild="getChildData"
+            :setOption="objOption"></judge>
+          <!--简答题、名词解释、论述题、计算题、口语题、其它-->
+          <short-answer v-if="ChooseItem.QuestionTypeKey=='short-answer'||ChooseItem.QuestionTypeKey=='noun-explanation'||ChooseItem.QuestionTypeKey=='essay-question'
+            ||ChooseItem.QuestionTypeKey=='calculation' || ChooseItem.QuestionTypeKey=='spoken'|| ChooseItem.QuestionTypeKey=='other'
+            " :setOption="objOption"> </short-answer>
+          <!--分录题、资料题-->
+          <entry-problem v-if="ChooseItem.QuestionTypeKey=='entry-problem'|| ChooseItem.Key=='data-question'"
+            :questionData="AnswerList" :setOption="objOption" @getChild="getChildData">
+          </entry-problem>
+          <!--连线题-->
+          <matching v-if="ChooseItem.QuestionTypeKey=='matching'" :questionData="AnswerList" :setOption="ChooseItem"
+            @getChild="getChildData"></matching>
+          <!--排序题-->
+          <sorting-problem v-if="ChooseItem.QuestionTypeKey=='sorting-problem'" :questionData="AnswerList"
+            :setOption="ChooseItem" @getChild="getChildData"></sorting-problem>
+          <!--完型填空-->
+          <cloze v-if="ChooseItem.QuestionTypeKey=='cloze'" :questionData="AnswerList" :setOption="ChooseItem"
+            @getChild="getChildData"></cloze>
+          <!--阅读理解、听力题-->
+          <reading-comprehensio
+            v-if="ChooseItem.QuestionTypeKey=='reading-comprehensio'||ChooseItem.QuestionTypeKey=='listening'"
+            :questionData="AnswerList" :setOption="ChooseItem" @getChild="getChildData"></reading-comprehensio>
+          <!--共用选择题-->
+          <sharing-choose v-if="ChooseItem.QuestionTypeKey=='sharing-choose'" :questionData="AnswerList"
+            @getChild="getChildData" :setOption="ChooseItem">
+          </sharing-choose>
+          <br />
+          <div class="col-12">
+            <div style="margin:20px 0;">答案解析</div>
+            <UeEditor v-model="ChooseItem.AnswerParse" :config="config" ref="AnswerParse"></UeEditor>
+          </div>
+          <br />
+          <div class="col-12">
+            <br />
+            <span class="difficulty_Degree">难度</span>
+            <select v-model="ChooseItem.DifficultyType" class="selectBox blue-border">
+              <template v-for="(cItem,cIndex) in questionDifficultyTypeList">
+                <option :key="cIndex" :label="cItem.Name" :value="cItem.Id">
+                </option>
+              </template>
+            </select>
+          </div>
+          <div class="col-12">
+            <br />
+            <span class="difficulty_Degree">所属大类</span>
+            <select v-model="ChooseItem.Category" class="selectBox blue-border">
+              <template v-for="(cItem,cIndex) in questionCategoryList">
+                <option :key="cIndex" :label="cItem.Name" :value="cItem.Id">
+                </option>
+              </template>
+            </select>
+          </div>
+          <div class="col-12">
+            <br />
+            <span class="difficulty_Degree">考级程度</span>
+            <select v-model="ChooseItem.LevelType" class="selectBox blue-border">
+              <template v-for="(cItem,cIndex) in questionLevalTypeList">
+                <option :key="cIndex" :label="cItem.Name" :value="cItem.Id">
+                </option>
+              </template>
+            </select>
+          </div>
+          <div class="col-12" style="margin-top:16px;">
+            <span class="difficulty_Degree">知识点: </span>
+            <a class="addKnowledge" @click="isShowPoint=true">
+              <i class="iconfont icon-add" style="position:relative;top:1px;"></i>选择知识点
+            </a>
+            <span class="knowledge_List" v-for="(x, i) in choosePointArray" :key="i">
+              {{x.PointName}}
+              <i class="iconfont icon-shanchu1" @click="removePointTag(i)"></i>
+            </span>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script>
+  import UeEditor from '../../components/editor/UeEditor'
+  //知识点列表
+  import questionpoint from '../../components/question/questionpoint'
+
+  import single from '../../components/questiontype/single'
+  import multiple from '../../components/questiontype/multiple'
+  import fillIn from '../../components/questiontype/fill-in'
+  import judge from '../../components/questiontype/judge'
+  import shortAnswer from '../../components/questiontype/short-answer'
+  import entryProblem from '../../components/questiontype/entry-problem'
+  import matching from '../../components/questiontype/matching'
+  import sortingProblem from '../../components/questiontype/sorting-problem'
+  import cloze from '../../components/questiontype/cloze'
+  import readingComprehensio from '../../components/questiontype/reading-comprehensio'
+  import sharingChoose from '../../components/questiontype/sharing-choose'
+
   import {
     GetPaper
   } from '../../api/teacher/index';
+  import {
+    queryQuestionTypeList,
+    queryDifficultyType,
+
+    queryQuestionInfo,
+    queryQuestionCategory,
+    queryQuestionLevelType
+  } from '../../api/question/question'
   export default {
+    components: {
+      UeEditor,
+      questionpoint, //知识点
+      single, //单选题
+      multiple, //多选题
+      fillIn, //填空题
+      judge, //判断题
+      shortAnswer, //简答题
+      entryProblem, //分录题
+      matching, //连线题
+      sortingProblem, //排序题
+      cloze, //完型填空
+      readingComprehensio, //阅读理解
+      sharingChoose, //共用选择题
+    },
     meta: {
       title: "考试"
     },
     data() {
       return {
+        config: {
+          initialFrameWidth: null,
+          initialFrameHeight: 80,
+        },
         easyList: [{
           Id: 1,
           Name: '难'
@@ -165,22 +325,90 @@
           Name: '易'
         }],
         msg: {
-          PaperId: 1
-        }
+          PaperId: 0
+        },
+        //试卷对象
+        DataObj: {},
+        //点击问题对象
+        ChooseItem: {},
+        questionDifficultyTypeList: [], //难易程度列表
+        questionLevalTypeList: [],
+        questionCategoryList: [], //分类
+        choosePointArray: [], //选择知识点
+        firstTypeList:[],//第一类题型
+        secondTypeList:[],//第二类题型
       }
     },
     created() {
-
+      if (this.$route.query && this.$route.query.Id) {
+        this.msg.PaperId = decodeURI(this.$route.query.Id)
+      }
+      this.getQuestionType();
+      this.getDifficultyType();
+      this.getQuestionCategory();
+      this.getQuestionLevelType
     },
     mounted() {
-      this.GetPaperTimu()
+      this.GetPaperInfo()
     },
     methods: {
+       //获取题型列表
+      getQuestionType() {
+        queryQuestionTypeList({}).then(res => {
+          if (res.Code == 1) {
+            var tempArray = res.Data;
+            if (tempArray && tempArray.length > 0) {
+              this.firstTypeList = tempArray.slice(0, 5);
+              this.secondTypeList = tempArray.slice(5);
+            }
+          }
+        });
+      },
+       //题型点击
+      onItemClick(item) {
+        // this.AnswerList = [];
+        // this.questionObj = item;
+        // this.objOption.QuestionTypeId = item.QId;
+        // this.objOption.QuestionTypeKey = item.Key;
+        // var obj = CreateQuestion(item.Key);
+        // this.AnswerList = obj;
+        // if (obj) {
+        //   this.objOption.QuestionContent = JSON.stringify(obj);
+        // }
+      },
+      //获取问题大类
+      getQuestionCategory() {
+        queryQuestionCategory().then(res => {
+          this.questionCategoryList = res.Data;
+        })
+      },
+      //获取问题考级程度
+      getQuestionLevelType() {
+        queryQuestionLevelType().then(res => {
+          this.questionLevalTypeList = res.Data;
+        })
+      },
+      //获取问题难易程度列表
+      getDifficultyType() {
+        queryDifficultyType().then(res => {
+          if (res.Code == 1) {
+            this.questionDifficultyTypeList = res.Data;
+          }
+        });
+      },
       //获取题目
-      GetPaperTimu() {
+      GetPaperInfo() {
         GetPaper(this.msg).then(res => {
-          console.log(res, '数据');
+          if (res.Code == 1) {
+            this.DataObj = res.Data;
+          }
+          console.log("this.DataObj", this.DataObj);
         })
+      },
+      //点击问题
+      ClickItem(questionItem) {
+        this.ChooseItem = questionItem;
+        console.log("questionItem", questionItem);
       }
     }
   }