新建样式修改

src/views/exercise_questions/create/components/common/SelectQuestionType.vue

@@ -1,16 +1,17 @@
 <template>
-  <el-dialog title="选择题型" :visible="visible" width="270px" :show-close="false" :center="true" @close="dialogClose">
+  <el-dialog title="选择题型" :visible="visible" width="380px" top="38vh" :show-close="false" @close="dialogClose">
     <el-cascader
       v-model="type"
+      size="medium"
       :options="questionTypeOption"
       :show-all-levels="false"
       :props="{ expandTrigger: 'hover' }"
       popper-class="select-question-type"
     />
-    <div slot="footer">
-      <el-button @click="dialogClose">取消</el-button>
-      <el-button type="primary" @click="confirm">确定</el-button>
-    </div>
+    <template slot="footer">
+      <el-button size="medium" @click="dialogClose">取消</el-button>
+      <el-button type="primary" size="medium" @click="confirm">确定</el-button>
+    </template>
   </el-dialog>
 </template>
 
@@ -45,19 +46,52 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-:deep div.el-dialog__header {
-  padding-top: 16px;
-}
+.el-dialog {
+  :deep &__header {
+    padding: 40px 40px 0;
+  }
+
+  :deep &__body {
+    padding: 24px 40px;
+  }
+
+  :deep &__footer {
+    display: flex;
+    padding: 0 40px 40px;
+
+    .el-button {
+      flex: 1;
+    }
+  }
 
-:deep .el-dialog__body {
-  padding: 16px 25px;
+  .el-cascader {
+    width: 100%;
+
+    :deep .el-input__inner {
+      height: 48px;
+      font-size: 16px;
+      font-weight: bold;
+      line-height: 48px;
+      color: #000;
+    }
+  }
 }
 </style>
 
 <style lang="scss">
 .select-question-type {
+  .el-cascader-menu {
+    min-width: 150px;
+    color: $font-color;
+  }
+
+  .el-cascader-node {
+    height: 36px;
+    line-height: 36px;
+  }
+
   .el-cascader-menu__wrap {
-    height: 300px;
+    height: 320px;
   }
 }
 </style>

src/views/exercise_questions/create/index.vue

@@ -42,7 +42,7 @@
       @deleteQuestion="deleteQuestion"
     />
 
-    <div class="preview" :style="{ height: preview ? '300px' : 'auto' }">
+    <div class="preview" :style="{ height: preview ? 'calc(50vh - 32px)' : 'auto' }">
       <div class="preview-header">
         <span class="quick-preview">快捷预览：</span>
         <div class="preview-right">
@@ -154,7 +154,7 @@ export default {
         content,
       })
         .then(() => {
-          this.getExerciseQuestionIndexList();
+          this.getExerciseQuestionIndexList(false, true);
         })
         .catch(() => {
           this.$message.error('添加失败');
@@ -169,12 +169,17 @@ export default {
     },
     /**
      * 获取练习题目索引列表
+     * @param {boolean} init 是否初始化
+     * @param {boolean} isAdd 是否添加题目
      */
-    getExerciseQuestionIndexList(init) {
+    getExerciseQuestionIndexList(init = false, isAdd = false) {
       GetExerciseQuestionIndexList({ exercise_id: this.exercise_id })
         .then(({ index_list }) => {
           this.index_list = index_list;
 
+          if (isAdd) {
+            this.curIndex = this.index_list.length - 1;
+          }
           if (!init) return;
           this.getQuestionInfo();
         })
@@ -289,7 +294,7 @@ export default {
     },
     /**
      * 修改当前题目类型
-     * @param {Array} arr
+     * @param {array} arr
      */
     updateCurQuestionType(arr) {
       let type = arr[arr.length - 1];
@@ -302,13 +307,22 @@ export default {
      * @param {number} param.oldIndex 移动前的索引
      */
     moveQuestion({ newIndex, oldIndex }) {
+      let isMoveCur = newIndex === this.curIndex || oldIndex === this.curIndex; // 是否移动当前题目
+      let isEffectCurIndex = newIndex < this.curIndex !== oldIndex < this.curIndex; // 是否影响当前题目索引
+      if (isMoveCur) {
+        this.curIndex = this.curIndex === newIndex ? oldIndex : newIndex;
+      } else if (isEffectCurIndex) {
+        this.curIndex = newIndex < this.curIndex ? this.curIndex + 1 : this.curIndex - 1;
+      }
+      if (isMoveCur || isEffectCurIndex) {
+        this.$nextTick(() => {
+          this.$refs.createMain.$refs.exercise?.[0].setQuestion(this.moveQuestionData);
+          this.isMoveQuestion = false;
+          this.refreshPreviewData();
+        });
+      }
+
       let order = newIndex > oldIndex;
-      this.curIndex = this.curIndex === newIndex ? oldIndex : newIndex;
-      this.$nextTick(() => {
-        this.$refs.createMain.$refs.exercise?.[0].setQuestion(this.moveQuestionData);
-        this.isMoveQuestion = false;
-        this.refreshPreviewData();
-      });
       MoveQuestion({
         question_id: this.index_list[newIndex].id,
         dest_question_id: this.index_list[order ? newIndex - 1 : newIndex + 1].id,
@@ -328,9 +342,19 @@ export default {
           this.$message.error('移动失败');
         });
     },
-    handleStart() {
-      this.isMoveQuestion = true;
-      this.moveQuestionData = this.$refs.createMain.$refs.exercise?.[0].data;
+    /**
+     * 开始移动题目
+     * @param {object} param 移动参数
+     * @param {number} param.newIndex 移动后的索引
+     * @param {number} param.oldIndex 移动前的索引
+     */
+    handleStart({ newIndex, oldIndex }) {
+      let isMoveCur = newIndex === this.curIndex || oldIndex === this.curIndex; // 是否移动当前题目
+      let isEffectCurIndex = newIndex < this.curIndex !== oldIndex < this.curIndex; // 是否影响当前题目索引
+      if (isMoveCur || isEffectCurIndex) {
+        this.isMoveQuestion = true;
+        this.moveQuestionData = this.$refs.createMain.$refs.exercise?.[0].data;
+      }
     },
   },
 };

src/views/exercise_questions/preview/ListenSelectPreview.vue

@@ -21,7 +21,9 @@
     <div v-if="isEnable(data.property.is_option_subdivision)" class="option-subdivision">
       <div v-for="item in data.option_list" :key="item.mark" class="option-subdivision-item">
         <div class="option-subdivision-top">
-          <span :style="{ fontSize: data.property.option_question_number_font_size }">{{ item.question_number }}.</span>
+          <span :style="{ fontSize: data.property.option_question_number_font_size }">
+            {{ questionNumberEndIsBracket(item.question_number) }}
+          </span>
           <span class="rich-text" v-html="sanitizeHTML(item.stem)"></span>
         </div>
         <ul class="option-subdivision-list">