选择题选项细分

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

@@ -19,7 +19,12 @@
             <span v-else class="question-number" title="双击切换序号类型" @dblclick="changeOptionType(data)">
               {{ computedQuestionNumber(i, data.option_number_show_mode) }}
             </span>
+
             <div v-if="isEnable(data.property.is_option_subdivision)" class="option-list">
+              <div class="option-subdivision-top">
+                <!-- <el-input v-model="item.custom_number" /> -->
+                <RichText v-model="item.stem" placeholder="输入小题干" :inline="true" />
+              </div>
               <div v-for="li in item.data_list" :key="li.mark" class="option-content">
                 <span
                   v-if="data.property.select_type === selectTypeList[0].value"
@@ -336,7 +341,35 @@ export default {
   .option-list {
     display: flex;
     flex: 1;
-    column-gap: 4px;
+    flex-flow: wrap;
+    gap: 4px 4px;
+
+    .option-subdivision-top {
+      width: 100%;
+
+      .rich-wrapper {
+        flex: 1;
+        min-height: 32px;
+        padding-left: 16px;
+        background-color: $fill-color;
+
+        :deep .rich-text {
+          &.mce-content-body {
+            padding-top: 4px;
+          }
+
+          &:not(.mce-edit-focus) {
+            p {
+              margin: 0;
+            }
+          }
+
+          &.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+            top: 6px;
+          }
+        }
+      }
+    }
   }
 
   .option-content {

src/views/exercise_questions/data/select.js

@@ -22,6 +22,7 @@ export function getOption(content = '', isCustom = true, index) {
  */
 export function getSubdivisionOption(number = 2, index) {
   return {
+    stem: '',
     custom_number: `${index === undefined ? '' : index + 1}`,
     mark: getRandomNumber('', false),
     data_list: Array.from({ length: number }, () => getOption()),

src/views/exercise_questions/preview/SelectPreview.vue

@@ -16,15 +16,19 @@
     <!-- 选项细分 -->
     <div v-if="isEnable(data.property.is_option_subdivision)" class="option-subdivision">
       <ul v-for="(item, i) in data.option_list" :key="item.mark" class="option-subdivision-list">
-        <span class="serial-number" :style="{ fontSize: data.property.option_question_number_font_size }">
-          {{
-            isEnable(isEnableManualModify)
-              ? item.custom_number
-                ? `${item.custom_number}.`
-                : ''
-              : computeOptionMethods[data.option_number_show_mode](i)
-          }}
-        </span>
+        <div class="option-subdivision-top">
+          <span class="serial-number" :style="{ fontSize: data.property.option_question_number_font_size }">
+            {{
+              isEnable(isEnableManualModify)
+                ? item.custom_number
+                  ? `${item.custom_number}.`
+                  : ''
+                : computeOptionMethods[data.option_number_show_mode](i)
+            }}
+          </span>
+
+          <span class="rich-text" v-html="sanitizeHTML(item.stem)"></span>
+        </div>
         <li
           v-for="{ content, mark } in item.data_list"
           :key="mark"
@@ -299,17 +303,29 @@ export default {
     flex-direction: column;
     row-gap: 24px;
 
-    &-list {
-      @extend %option-list;
+    .option-subdivision-top {
+      display: flex;
+      column-gap: 24px;
+      align-items: center;
+      width: 100%;
 
-      .serial-number {
-        font-size: 16pt;
+      .rich-text {
+        flex: 1;
       }
+    }
+
+    &-list {
+      @extend %option-list;
 
       flex-direction: row;
+      flex-flow: wrap;
       column-gap: 24px;
       align-items: center;
 
+      .serial-number {
+        font-size: 16pt;
+      }
+
       .option-item {
         flex: 1;
       }