Merge remote-tracking branch 'origin/master'

src/components/layout/Main.vue

@@ -25,7 +25,6 @@ export default {
   position: relative;
   flex: 1;
   padding: 20px;
-  overflow: hidden;
 }
 .app-main-inner {
   margin: 0 auto;

src/modules/paper/components/AutomaticPaper.vue

@@ -169,7 +169,7 @@ export default {
           this.form = Object.assign({}, this.form, data.paper_contents)
         }
         if (data.paper_contents && data.paper_contents.rules) {
-          this.questionList = data.paper_contents.rules
+          this.questionList = data.paper_contents.rules.slice()
         }
       }
     }
@@ -237,7 +237,7 @@ export default {
           type: 'warning'
         })
       } else {
-        this.questionList.push({ ...this.defaultItem })
+        this.questionList.splice(index + 1, 0, { ...this.defaultItem })
       }
     },
     // 删除

src/modules/paper/components/PaperQuestions.vue

@@ -29,8 +29,8 @@
         </app-card>
       </el-col>
       <!-- 试题序号 -->
-      <el-col :span="6" ref="questionNumWrapper">
-        <question-num :list="questions" ref="questionNum" :style="`position:relative;top:${top}px`">
+      <el-col :span="6" class="is-sticky">
+        <question-num :list="questions">
           <template #footer v-if="data.paper_type === 1">
             <el-button type="primary" @click="handleSubmit">保存试卷</el-button>
           </template>
@@ -81,18 +81,6 @@ export default {
       }
     }
   },
-  mounted() {
-    const questionNumWrapper = this.$refs.questionNumWrapper.$el
-    const parentTop = questionNumWrapper.getBoundingClientRect().top
-    document.addEventListener('scroll', () => {
-      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
-      if (scrollTop > parentTop) {
-        this.top = scrollTop - parentTop + 84
-      } else {
-        this.top = 0
-      }
-    })
-  },
   methods: {
     // 增加试题
     showSelectQuestion() {
@@ -135,10 +123,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.fixed {
-  position: relative;
-  top: 64px;
-  right: 0;
+.is-sticky {
+  position: sticky;
+  top: 84px;
   z-index: 100;
 }
 </style>

src/modules/paper/components/QuestionList.vue

 <template>
   <div class="question-list">
     <template v-for="(item, index) in list">
-      <question-list-item :data="item" :index="index + 1" :key="item.id" v-bind="$attrs" v-on="$listeners">
+      <question-list-item
+        :data="item"
+        :index="index + 1"
+        :hasChildren="item.children && !!item.children.length"
+        :key="item.id"
+        v-bind="$attrs"
+        v-on="$listeners"
+      >
         <template v-if="item.children && item.children.length">
           <question-list :list="item.children" :key="item.id" v-bind="$attrs" v-on="$listeners">
             <template #selection>

src/modules/paper/components/QuestionListItem.vue

@@ -16,75 +16,78 @@
                 step-strictly
                 :controls="false"
                 :min="0"
-                :disabled="disableScore"
+                :disabled="disableScore || hasChildren"
                 style="width: 80px"
               ></el-input-number>
             </div>
           </div>
           <!-- 题干 -->
-          <div class="question-title" v-html="data.question_content"></div>
+          <div class="question-title">
+            <div v-html="data.common_content" v-if="hasChildren"></div>
+            <div v-html="data.question_content" v-else></div>
+          </div>
         </div>
         <slot>
           <div class="question-item-bd">
             <!-- 单选题 -->
             <template v-if="questionType === 1">
               <el-radio-group :disabled="disabled" :value="data.question_answer">
-                <div class="question-item-option" v-for="item in data.question_options" :key="item.id">
-                  <el-radio :label="item.id">{{ item.option }}</el-radio>
+                <div class="question-item-option" v-for="item in currentQuestionOptions" :key="item.id">
+                  <el-radio :label="item.id">{{ item.abc_option }}</el-radio>
                 </div>
               </el-radio-group>
             </template>
             <!-- 多选题 -->
             <template v-if="questionType === 2">
               <el-checkbox-group :disabled="disabled" :value="data.question_answer">
-                <div class="question-item-option" v-for="item in data.question_options" :key="item.id">
-                  <el-checkbox :label="item.id"> {{ item.option }} </el-checkbox>
+                <div class="question-item-option" v-for="item in currentQuestionOptions" :key="item.id">
+                  <el-checkbox :label="item.id"> {{ item.abc_option }} </el-checkbox>
                 </div>
               </el-checkbox-group>
             </template>
             <!-- 问答题 -->
             <template v-if="questionType === 3">
-              <v-editor :value="data.question_analysis"></v-editor>
+              <!-- <v-editor :value="data.question_analysis"></v-editor> -->
             </template>
             <!-- 判断题 -->
             <template v-if="questionType === 6">
               <el-radio-group :disabled="disabled" :value="data.question_answer">
-                <div class="question-item-option" v-for="item in data.question_options" :key="item.id">
-                  <el-radio :label="item.id">{{ item.option }}</el-radio>
+                <div class="question-item-option" v-for="item in currentQuestionOptions" :key="item.id">
+                  <el-radio :label="item.id">{{ item.abc_option }}</el-radio>
                 </div>
               </el-radio-group>
             </template>
           </div>
+          <div class="question-item-ft">
+            <dl>
+              <dt>正确答案：</dt>
+              <dd class="is-answer">{{ correctAnswerText }}</dd>
+            </dl>
+            <dl>
+              <dt>试题解析：</dt>
+              <dd><div v-html="data.question_analysis"></div></dd>
+            </dl>
+          </div>
         </slot>
-        <div class="question-item-ft"></div>
       </div>
     </div>
   </el-card>
 </template>
 
 <script>
-import VEditor from '@/components/tinymce/Index.vue'
 export default {
   props: {
     index: { type: Number, default: 1 },
     disabled: { type: Boolean, default: false },
     data: { type: Object, default: () => ({}) },
-    disableScore: { type: Boolean, default: false }
+    disableScore: { type: Boolean, default: false },
+    hasChildren: { type: Boolean, default: false }
   },
-  components: { VEditor },
   data() {
     return {
       question: {}
     }
   },
-  watch: {
-    data: {
-      immediate: true,
-      handler(data) {
-        // this.question = this.genQuestion(data)
-      }
-    }
-  },
   computed: {
     // 试题类型
     questionType() {
@@ -103,10 +106,27 @@ export default {
     questionTypeText() {
       const map = { 1: '单选题', 2: '多选题', 3: '问答题', 5: '案例题', 6: '判断题', 7: '实操题', 8: '情景题' }
       return map[this.questionType]
+    },
+    // 处理后的options数据
+    currentQuestionOptions() {
+      if (!this.data.question_options) {
+        return []
+      }
+      return this.data.question_options.map((item, index) => {
+        // 英文字母 + 名称
+        item.abc = this.A_Z[index]
+        item.abc_option = `${this.A_Z[index]}. ${item.option}`
+        return item
+      })
+    },
+    // 正确答案显示的英文字母
+    correctAnswerText() {
+      const result = this.currentQuestionOptions.reduce((result, item) => {
+        item.checked && result.push(item.abc)
+        return result
+      }, [])
+      return result.join('、')
     }
-  },
-  methods: {
-    genQuestion(data) {}
   }
 }
 </script>
@@ -149,4 +169,19 @@ export default {
 .question-item-option {
   margin: 10px 0;
 }
+.question-item-ft {
+  margin-top: 20px;
+  border-top: 1px solid #ebeef5;
+  dl {
+    margin-top: 20px;
+    display: flex;
+  }
+  dd {
+    flex: 1;
+    overflow: hidden;
+  }
+  .is-answer {
+    color: var(--main-color);
+  }
+}
 </style>

src/modules/paper/components/QuestionNum.vue

@@ -49,10 +49,10 @@ export default {
     flex-wrap: wrap;
     li {
       border-radius: 50px;
-      width: 24px;
-      height: 24px;
+      width: 30px;
+      height: 30px;
       font-size: 14px;
-      line-height: 150%;
+      line-height: 26px;
       text-align: center;
       border: 2px solid #ccc;
       color: #666;
@@ -64,6 +64,10 @@ export default {
     }
   }
 }
+.question-num-bd {
+  overflow-y: auto;
+  max-height: calc(100vh - 220px);
+}
 .question-num-ft {
   margin-top: 20px;
   text-align: center;

src/modules/question/components/AddChidren.vue

@@ -115,6 +115,9 @@ export default {
         remote: {
           httpRequest: getAppList,
           params: {
+            question_title: '',
+            question_tag: '',
+            question_content: '',
             question_types: [1, 2, 3, 6],
             permission: this.questionBank,
             project_prefix: this.activeProject.tag,

src/modules/question/views/List.vue

 <template>
   <app-card>
-    <div style="margin-bottom:25px;">
-      <span style="font-size: 14px;color: #606266;padding-right:12px;">题库范围:</span>
+    <div style="margin-bottom: 25px">
+      <span style="font-size: 14px; color: #606266; padding-right: 12px">题库范围:</span>
       <el-radio @change="refetchList" v-model="permission" :label="1">我的题库</el-radio>
       <el-radio @change="refetchList" v-model="permission" :label="2">公共题库</el-radio>
     </div>
@@ -113,6 +113,9 @@ export default {
         remote: {
           httpRequest: getAppList,
           params: {
+            question_title: '',
+            question_tag: '',
+            question_content: '',
             permission: this.permission,
             project_prefix: this.activeProject.tag,
             question_category: ''