将选择题目类型改为弹窗选择

src/components/common/RichText.vue

@@ -104,7 +104,7 @@ export default {
         setup(editor) {
           editor.on('init', () => {
             editor.getBody().style.fontSize = '16pt'; // 设置默认字体大小
-            editor.execCommand('fontName', false, 'Arial'); // 设置默认字体
+            editor.getBody().style.fontFamily = 'Arial'; // 设置默认字体
           });
         },
         font_formats:

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

@@ -0,0 +1,133 @@
+<template>
+  <div class="question-type">
+    <el-cascader
+      v-if="isChild"
+      v-model="typeArr"
+      :options="questionTypeOption"
+      :show-all-levels="false"
+      :props="{ expandTrigger: 'hover' }"
+      @change="handleChange"
+    />
+    <span v-else style="width: 100px"></span>
+    <div class="intelligent-recognition" @click="showRecognition"><SvgIcon icon-class="copy" :size="14" />智能识别</div>
+    <SvgIcon v-if="isChild" class-name="pointer" icon-class="delete" :size="14" @click="$emit('deleteQuestion')" />
+    <div v-else class="save-tip">{{ saveDate }} 已自动保存</div>
+
+    <IntelligentRecognition :visible.sync="dialogVisible" @recognition="handleRecognition" />
+  </div>
+</template>
+
+<script>
+import { questionTypeOption } from '@/views/exercise_questions/data/questionType';
+
+import IntelligentRecognition from './IntelligentRecognition.vue';
+
+export default {
+  name: 'QuestionHeader',
+  components: {
+    IntelligentRecognition,
+  },
+  inject: ['curSaveDate', 'recognition', 'updateCurQuestionType'],
+  props: {
+    type: {
+      type: Array,
+      default: () => ['base', 'select'],
+    },
+    isChild: {
+      type: Boolean,
+      default: false,
+    },
+    questionTypeOption: {
+      type: Array,
+      default: () => questionTypeOption,
+    },
+  },
+  data() {
+    return {
+      dialogVisible: false, // 智能识别弹窗
+      typeArr: this.type,
+    };
+  },
+  computed: {
+    saveDate() {
+      return this.curSaveDate();
+    },
+  },
+  watch: {
+    type(val) {
+      this.typeArr = val;
+    },
+  },
+  methods: {
+    handleChange(val) {
+      if (this.isChild) {
+        return this.$emit('updateCurQuestionType', val);
+      }
+      this.updateCurQuestionType(val);
+    },
+
+    // 处理智能识别
+    handleRecognition(text) {
+      if (this.isChild) {
+        return this.$emit('recognition', text);
+      }
+      this.recognition(text);
+    },
+
+    showRecognition() {
+      this.dialogVisible = true;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.question-type {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 40px;
+  padding: 4px 8px;
+  background-color: #fff;
+  border: $border;
+  border-bottom-width: 0;
+  border-radius: 8px 8px 0 0;
+
+  .el-cascader {
+    width: 110px;
+
+    :deep .el-input__inner {
+      background-color: #fff;
+      border-color: #fff;
+    }
+  }
+
+  .intelligent-recognition {
+    display: flex;
+    column-gap: 8px;
+    align-items: center;
+    font-size: 14px;
+    color: #333;
+    cursor: pointer;
+  }
+
+  .save-tip {
+    font-size: 12px;
+    color: #858585;
+  }
+}
+</style>
+
+<style lang="scss">
+.el-popper.el-cascader__dropdown {
+  .el-cascader-node.in-active-path {
+    background-color: $fill-color;
+  }
+
+  .el-cascader-node.is-active {
+    color: $main-color;
+    background-color: #e8f3ff;
+  }
+}
+</style>

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

@@ -1,130 +1,60 @@
 <template>
-  <div class="question-type">
+  <el-dialog title="选择题型" :visible="visible" width="270px" :show-close="false" :center="true" @close="dialogClose">
     <el-cascader
-      v-model="typeArr"
+      v-model="type"
       :options="questionTypeOption"
       :show-all-levels="false"
       :props="{ expandTrigger: 'hover' }"
-      @change="handleChange"
     />
-    <div class="intelligent-recognition" @click="showRecognition"><SvgIcon icon-class="copy" :size="14" />智能识别</div>
-    <SvgIcon v-if="isChild" class-name="pointer" icon-class="delete" :size="14" @click="$emit('deleteQuestion')" />
-    <div v-else class="save-tip">{{ saveDate }} 已自动保存</div>
-
-    <IntelligentRecognition :visible.sync="dialogVisible" @recognition="handleRecognition" />
-  </div>
+    <div slot="footer">
+      <el-button @click="dialogClose">取消</el-button>
+      <el-button type="primary" @click="confirm">确定</el-button>
+    </div>
+  </el-dialog>
 </template>
 
 <script>
-import { questionTypeOption } from '@/views/exercise_questions/data/questionType';
-
-import IntelligentRecognition from '../common/IntelligentRecognition.vue';
+import { questionTypeOption, questionDataList } from '@/views/exercise_questions/data/questionType';
 
 export default {
   name: 'SelectQuestionType',
-  components: {
-    IntelligentRecognition,
-  },
-  inject: ['curSaveDate', 'recognition', 'updateCurQuestionType'],
   props: {
-    type: {
-      type: Array,
-      required: true,
-    },
-    isChild: {
+    visible: {
       type: Boolean,
-      default: false,
-    },
-    questionTypeOption: {
-      type: Array,
-      default: () => questionTypeOption,
+      required: true,
     },
   },
   data() {
     return {
-      dialogVisible: false, // 智能识别弹窗
-      typeArr: this.type,
+      questionTypeOption,
+      type: ['base', 'select'],
     };
   },
-  computed: {
-    saveDate() {
-      return this.curSaveDate();
-    },
-  },
-  watch: {
-    type(val) {
-      this.typeArr = val;
-    },
-  },
   methods: {
-    handleChange(val) {
-      if (this.isChild) {
-        return this.$emit('updateCurQuestionType', val);
-      }
-      this.updateCurQuestionType(val);
+    dialogClose() {
+      this.$emit('update:visible', false);
     },
-
-    // 处理智能识别
-    handleRecognition(text) {
-      if (this.isChild) {
-        return this.$emit('recognition', text);
-      }
-      this.recognition(text);
-    },
-
-    showRecognition() {
-      this.dialogVisible = true;
+    confirm() {
+      this.$emit('update:visible', false);
+      let type = this.type[this.type.length - 1];
+      this.$emit('addQuestionToExercise', type, type === 'select' ? 'single' : '', questionDataList[type]);
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.question-type {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 4px 8px;
-  background-color: #fff;
-  border: $border;
-  border-bottom-width: 0;
-  border-radius: 8px 8px 0 0;
-
-  .el-cascader {
-    width: 110px;
-
-    :deep .el-input__inner {
-      background-color: #fff;
-      border-color: #fff;
-    }
-  }
-
-  .intelligent-recognition {
-    display: flex;
-    column-gap: 8px;
-    align-items: center;
-    font-size: 14px;
-    color: #333;
-    cursor: pointer;
-  }
+:deep div.el-dialog__header {
+  padding-top: 16px;
+}
 
-  .save-tip {
-    font-size: 12px;
-    color: #858585;
-  }
+:deep .el-dialog__body {
+  padding: 16px 25px;
 }
 </style>
 
 <style lang="scss">
-.el-popper.el-cascader__dropdown {
-  .el-cascader-node.in-active-path {
-    background-color: $fill-color;
-  }
-
-  .el-cascader-node.is-active {
-    color: $main-color;
-    background-color: #e8f3ff;
-  }
+.el-cascader-menu__wrap {
+  height: 270px;
 }
 </style>

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

@@ -27,7 +27,7 @@
       </div>
     </div>
     <div class="create-content">
-      <SelectQuestionType v-if="indexList.length > 0" :type="exerciseTypeList[indexList[curIndex].type]" />
+      <QuestionHeader v-if="indexList.length > 0" />
       <template v-for="({ id }, i) in indexList">
         <KeepAlive :key="id">
           <component :is="curExercisePage" v-if="i === curIndex" ref="exercise" :question-id="id" />
@@ -40,9 +40,8 @@
 <script>
 import { SaveQuestion } from '@/api/exercise';
 import { timeFormatConversion } from '@/utils/transform';
-import { exerciseTypeList } from '@/views/exercise_questions/data/questionType';
 
-import SelectQuestionType from './common/SelectQuestionType.vue';
+import QuestionHeader from './common/QuestionHeader.vue';
 import SelectQuestion from './exercises/SelectQuestion.vue';
 import JudgeQuestion from './exercises/JudgeQuestion.vue';
 import MatchingQuestion from './exercises/MatchingQuestion.vue';
@@ -69,7 +68,7 @@ import FillFormQuestion from './exercises/FillFormQuestion.vue';
 export default {
   name: 'CreateMain',
   components: {
-    SelectQuestionType,
+    QuestionHeader,
   },
   provide() {
     return {
@@ -91,7 +90,6 @@ export default {
     return {
       timer: null,
       curSaveDate: '',
-      exerciseTypeList,
       exerciseComponents: {
         select: SelectQuestion,
         judge: JudgeQuestion,

src/views/exercise_questions/create/components/exercises/ReadQuestion.vue

@@ -33,7 +33,7 @@
       </div>
 
       <div v-for="(item, i) in data.question_list" :key="i">
-        <SelectQuestionType
+        <QuestionHeader
           :question-type-option="questionTypeOption"
           :is-child="true"
           :type="exerciseTypeList[item.type]"
@@ -113,7 +113,7 @@ import { AddQuestionToExercise, DeleteQuestion } from '@/api/exercise';
 import { questionDataList } from '@/views/exercise_questions/data/questionType';
 
 import QuestionMixin from '../common/QuestionMixin.js';
-import SelectQuestionType from '@/views/exercise_questions/create/components/common/SelectQuestionType.vue';
+import QuestionHeader from '@/views/exercise_questions/create/components/common/QuestionHeader.vue';
 import SelectQuestion from '@/views/exercise_questions/create/components/exercises/SelectQuestion.vue';
 import JudgeQuestion from '@/views/exercise_questions/create/components/exercises/JudgeQuestion.vue';
 import MatchingQuestion from '@/views/exercise_questions/create/components/exercises/MatchingQuestion.vue';
@@ -123,7 +123,7 @@ import ShortAnswerQuestion from './ShortAnswerQuestion.vue';
 export default {
   name: 'ReadQuestion',
   components: {
-    SelectQuestionType,
+    QuestionHeader,
   },
   mixins: [QuestionMixin],
   inject: ['exercise_id'],

src/views/exercise_questions/create/index.vue

@@ -25,7 +25,7 @@
       </div>
       <div class="list-operate">
         <!-- <el-button type="primary">批量导入</el-button> -->
-        <el-button type="primary" @click="createDefaultQuestion">新建</el-button>
+        <el-button type="primary" @click="showSelectQuestionType">新建</el-button>
       </div>
     </div>
 
@@ -60,6 +60,8 @@
         <component :is="curPreviewPage" v-if="preview" :data="previewData" :child-preview-data="childPreviewData" />
       </div>
     </div>
+
+    <SelectQuestionType :visible.sync="visible" @addQuestionToExercise="addQuestionToExercise" />
   </div>
 </template>
 
@@ -76,11 +78,13 @@ import {
 
 import CreateMain from './components/create.vue';
 import PreviewQuestionTypeMixin from '../data/PreviewQuestionTypeMixin';
+import SelectQuestionType from './components/common/SelectQuestionType.vue';
 
 export default {
   name: 'CreateExercise',
   components: {
     CreateMain,
+    SelectQuestionType,
   },
   mixins: [PreviewQuestionTypeMixin],
   provide() {
@@ -103,6 +107,7 @@ export default {
       preview: false, // 预览显示
       previewData: {}, // 预览数据
       back_url: back_url || '/personal_question', // 返回地址
+      visible: false, // 选择题目类型弹窗
     };
   },
   computed: {
@@ -146,6 +151,9 @@ export default {
           this.$message.error('添加失败');
         });
     },
+    showSelectQuestionType() {
+      this.visible = true;
+    },
     // 创建默认题目
     createDefaultQuestion() {
       this.addQuestionToExercise('select', 'single', questionDataList['select']);