修改序号设置

src/views/book/courseware/create/components/base/audio/AudioSetting.vue

@@ -1,24 +1,8 @@
 <template>
   <div>
     <el-form :model="property" :label-position="labelPosition" label-width="72px">
-      <el-form-item label="序号" class="serial-number">
-        <el-input v-model="property.serial_number" />
-        <SvgIcon icon-class="switch" size="16" @click="switchSerialNumber(property)" />
-      </el-form-item>
-      <el-form-item>
-        <el-radio
-          v-for="{ value, label } in snGenerationMethodList"
-          :key="value"
-          v-model="property.sn_generation_method"
-          :label="value"
-        >
-          {{ label }}
-        </el-radio>
-      </el-form-item>
-      <el-form-item label="序号位置">
-        <SerialNumberPosition :position="property.sn_position" @changeNumberPosition="changeNumberPosition" />
-      </el-form-item>
-      <el-divider />
+      <SerailNumber :property="property" />
+
       <el-form-item label="查看方式">
         <el-radio
           v-for="{ value, label } in audioViewMethodList"
@@ -35,7 +19,7 @@
 
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
-import { snGenerationMethodList } from '@/views/book/courseware/data/common';
+
 import { audioViewMethodList, getAudioProperty } from '@/views/book/courseware/data/audio';
 
 export default {
@@ -44,7 +28,6 @@ export default {
   data() {
     return {
       audioViewMethodList,
-      snGenerationMethodList,
       labelPosition: 'left',
       property: getAudioProperty(),
     };

src/views/book/courseware/create/components/base/common/SelectSerialNumberStyle.vue

@@ -9,7 +9,10 @@
     <div class="sn-box view-style" :style="serialNumberStyle(sn_style)">{{ serialNumber }}</div>
   </div>
 </template>
+
 <script>
+import { serialNumberStyleList } from '@/views/book/courseware/data/common';
+
 export default {
   name: 'SelectSerialNumberStyle',
   props: {
@@ -28,15 +31,9 @@ export default {
   },
   data() {
     return {
-      serialNumberStyleList: [
-        { value: 'solidBlockStyle' },
-        { value: 'solidCircleStyle' },
-        { value: 'hollowBlockStyle' },
-        { value: 'hollowCircleStyle' },
-        { value: 'defaultStyle' },
-      ],
-      sn_style: '',
-      sn_background_color: '',
+      serialNumberStyleList,
+      sn_style: this.snStyle,
+      sn_background_color: this.snBackgroundColor,
     };
   },
   watch: {
@@ -45,14 +42,12 @@ export default {
         this.sn_background_color = val;
       },
       deep: true,
-      immediate: true,
     },
     snStyle: {
       handler(val) {
         this.sn_style = val;
       },
       deep: true,
-      immediate: true,
     },
   },
   methods: {
@@ -60,34 +55,42 @@ export default {
     serialNumberStyle(styleType) {
       let serialNumberStyle = {};
       const _color = `${this.sn_background_color}`;
-      if (styleType === 'solidBlockStyle') {
-        serialNumberStyle = {
-          borderRadius: '4px',
-          backgroundColor: _color,
-          color: '#fff',
-        };
-      } else if (styleType === 'solidCircleStyle') {
-        serialNumberStyle = {
-          borderRadius: '40px',
-          backgroundColor: _color,
-          color: '#fff',
-        };
-      } else if (styleType === 'hollowBlockStyle') {
-        serialNumberStyle = {
-          border: `1px solid ${_color}`,
-          borderRadius: '4px',
-          color: _color,
-        };
-      } else if (styleType === 'hollowCircleStyle') {
-        serialNumberStyle = {
-          border: `1px solid ${_color}`,
-          borderRadius: '40px',
-          color: _color,
-        };
-      } else if (styleType === 'defaultStyle') {
-        serialNumberStyle = {
-          color: _color,
-        };
+      switch (styleType) {
+        case 'solidBlockStyle':
+          serialNumberStyle = {
+            borderRadius: '4px',
+            backgroundColor: _color,
+            color: '#fff',
+          };
+          break;
+        case 'solidCircleStyle':
+          serialNumberStyle = {
+            borderRadius: '40px',
+            backgroundColor: _color,
+            color: '#fff',
+          };
+          break;
+        case 'hollowBlockStyle':
+          serialNumberStyle = {
+            border: `1px solid ${_color}`,
+            borderRadius: '4px',
+            color: _color,
+          };
+          break;
+        case 'hollowCircleStyle':
+          serialNumberStyle = {
+            border: `1px solid ${_color}`,
+            borderRadius: '40px',
+            color: _color,
+          };
+          break;
+        case 'defaultStyle':
+          serialNumberStyle = {
+            color: _color,
+          };
+          break;
+        default:
+          break;
       }
       return serialNumberStyle;
     },

src/views/book/courseware/create/components/base/describe/DescribeSetting.vue

@@ -1,32 +1,8 @@
 <template>
   <div>
     <el-form :model="property" :label-position="labelPosition" label-width="72px">
-      <el-form-item label="序号" class="serial-number">
-        <el-input v-model="property.serial_number" />
-        <SvgIcon icon-class="switch" size="14" @click="switchSerialNumber(property)" />
-      </el-form-item>
-      <el-form-item>
-        <el-radio
-          v-for="{ value, label } in snGenerationMethodList"
-          :key="value"
-          v-model="property.sn_generation_method"
-          :label="value"
-        >
-          {{ label }}
-        </el-radio>
-      </el-form-item>
-      <el-form-item label="序号样式">
-        <SelectSerialNumberStyle
-          :serial-number="property.serial_number"
-          :sn-style="property.sn_style"
-          :sn-background-color="property.sn_background_color"
-          @changeSerialNumberStyle="changeSerialNumberStyle"
-        />
-      </el-form-item>
-      <el-form-item label="序号位置">
-        <SerialNumberPosition :position="property.sn_position" @changeNumberPosition="changeNumberPosition" />
-      </el-form-item>
-      <el-divider />
+      <SerailNumber :property="property" />
+
       <el-form-item label="拼音">
         <el-switch v-model="property.view_pinyin" active-value="true" inactive-value="false" />
       </el-form-item>
@@ -54,12 +30,7 @@
 
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
-import {
-  isEnable,
-  viewMethodList,
-  pinyinPositionList,
-  snGenerationMethodList,
-} from '@/views/book/courseware/data/common';
+import { isEnable, viewMethodList, pinyinPositionList } from '@/views/book/courseware/data/common';
 import { getDescribeProperty } from '@/views/book/courseware/data/describe';
 
 export default {
@@ -70,7 +41,6 @@ export default {
       isEnable,
       viewMethodList,
       pinyinPositionList,
-      snGenerationMethodList,
       labelPosition: 'left',
       property: getDescribeProperty(),
       selectContent: '',

src/views/book/courseware/create/components/base/label/LabelSetting.vue

@@ -1,32 +1,8 @@
 <template>
   <div>
     <el-form :model="property" :label-position="labelPosition" label-width="72px">
-      <el-form-item label="序号" class="serial-number">
-        <el-input v-model="property.serial_number" />
-        <SvgIcon icon-class="switch" size="14" @click="switchSerialNumber(property)" />
-      </el-form-item>
-      <el-form-item>
-        <el-radio
-          v-for="{ value, label } in snGenerationMethodList"
-          :key="value"
-          v-model="property.sn_generation_method"
-          :label="value"
-        >
-          {{ label }}
-        </el-radio>
-      </el-form-item>
-      <el-form-item label="序号样式">
-        <SelectSerialNumberStyle
-          :serial-number="property.serial_number"
-          :sn-style="property.sn_style"
-          :sn-background-color="property.sn_background_color"
-          @changeSerialNumberStyle="changeSerialNumberStyle"
-        />
-      </el-form-item>
-      <el-form-item label="序号位置">
-        <SerialNumberPosition :position="property.sn_position" @changeNumberPosition="changeNumberPosition" />
-      </el-form-item>
-      <el-divider />
+      <SerailNumber :property="property" />
+
       <el-form-item label="标签颜色" :style="cssVars">
         <el-select v-model="property.label_color" class="label-color">
           <el-option
@@ -49,7 +25,6 @@
 
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
-import { snGenerationMethodList } from '@/views/book/courseware/data/common';
 import { getLabelProperty, labelColorList } from '@/views/book/courseware/data/label';
 
 export default {
@@ -57,7 +32,6 @@ export default {
   mixins: [SettingMixin],
   data() {
     return {
-      snGenerationMethodList,
       labelColorList,
       labelPosition: 'left',
       property: getLabelProperty(),

src/views/book/courseware/create/components/base/picture/PictureSetting.vue

@@ -1,24 +1,8 @@
 <template>
   <div>
     <el-form :model="property" :label-position="labelPosition" label-width="72px">
-      <el-form-item label="序号" class="serial-number">
-        <el-input v-model="property.serial_number" />
-        <SvgIcon icon-class="switch" size="14" @click="switchSerialNumber(property)" />
-      </el-form-item>
-      <el-form-item>
-        <el-radio
-          v-for="{ value, label } in snGenerationMethodList"
-          :key="value"
-          v-model="property.sn_generation_method"
-          :label="value"
-        >
-          {{ label }}
-        </el-radio>
-      </el-form-item>
-      <el-form-item label="序号位置">
-        <SerialNumberPosition :position="property.sn_position" @changeNumberPosition="changeNumberPosition" />
-      </el-form-item>
-      <el-divider />
+      <SerailNumber :property="property" />
+
       <el-form-item label="查看方式">
         <el-radio v-for="{ value, label } in viewMethodList" :key="value" v-model="property.view_method" :label="value">
           {{ label }}
@@ -38,7 +22,6 @@ export default {
   mixins: [SettingMixin],
   data() {
     return {
-      snGenerationMethodList,
       viewMethodList,
       labelPosition: 'left',
       property: getPictureProperty(),

src/views/book/courseware/create/components/base/stem/StemSetting.vue

@@ -1,32 +1,8 @@
 <template>
   <div>
     <el-form :model="property" :label-position="labelPosition" label-width="72px">
-      <el-form-item label="序号" class="serial-number">
-        <el-input v-model="property.serial_number" />
-        <SvgIcon icon-class="switch" size="14" @click="switchSerialNumber(property)" />
-      </el-form-item>
-      <el-form-item>
-        <el-radio
-          v-for="{ value, label } in snGenerationMethodList"
-          :key="value"
-          v-model="property.sn_generation_method"
-          :label="value"
-        >
-          {{ label }}
-        </el-radio>
-      </el-form-item>
-      <el-form-item label="序号样式">
-        <SelectSerialNumberStyle
-          :serial-number="property.serial_number"
-          :sn-style="property.sn_style"
-          :sn-background-color="property.sn_background_color"
-          @changeSerialNumberStyle="changeSerialNumberStyle"
-        />
-      </el-form-item>
-      <el-form-item label="序号位置">
-        <SerialNumberPosition :position="property.sn_position" @changeNumberPosition="changeNumberPosition" />
-      </el-form-item>
-      <el-divider />
+      <SerailNumber :property="property" />
+
       <el-form-item label="拼音">
         <el-switch v-model="property.view_pinyin" active-value="true" inactive-value="false" />
       </el-form-item>
@@ -54,12 +30,7 @@
 
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
-import {
-  isEnable,
-  viewMethodList,
-  pinyinPositionList,
-  snGenerationMethodList,
-} from '@/views/book/courseware/data/common';
+import { isEnable, viewMethodList, pinyinPositionList } from '@/views/book/courseware/data/common';
 import { getStemProperty } from '@/views/book/courseware/data/stem';
 
 export default {
@@ -70,7 +41,6 @@ export default {
       isEnable,
       viewMethodList,
       pinyinPositionList,
-      snGenerationMethodList,
       labelPosition: 'left',
       property: getStemProperty(),
     };

src/views/book/courseware/create/components/base/video/VideoSetting.vue

@@ -1,24 +1,8 @@
 <template>
   <div>
     <el-form :model="property" :label-position="labelPosition" label-width="72px">
-      <el-form-item label="序号" class="serial-number">
-        <el-input v-model="property.serial_number" />
-        <SvgIcon icon-class="switch" size="16" @click="switchSerialNumber(property)" />
-      </el-form-item>
-      <el-form-item>
-        <el-radio
-          v-for="{ value, label } in snGenerationMethodList"
-          :key="value"
-          v-model="property.sn_generation_method"
-          :label="value"
-        >
-          {{ label }}
-        </el-radio>
-      </el-form-item>
-      <el-form-item label="序号位置">
-        <SerialNumberPosition :position="property.sn_position" @changeNumberPosition="changeNumberPosition" />
-      </el-form-item>
-      <el-divider />
+      <SerailNumber :property="property" />
+
       <el-form-item label="查看方式">
         <el-radio v-for="{ value, label } in viewMethodList" :key="value" v-model="property.view_method" :label="value">
           {{ label }}
@@ -30,7 +14,7 @@
 
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
-import { snGenerationMethodList, viewMethodList } from '@/views/book/courseware/data/common';
+import { viewMethodList } from '@/views/book/courseware/data/common';
 import { getVideoProperty } from '@/views/book/courseware/data/video';
 
 export default {
@@ -38,7 +22,6 @@ export default {
   mixins: [SettingMixin],
   data() {
     return {
-      snGenerationMethodList,
       viewMethodList,
       labelPosition: 'left',
       property: getVideoProperty(),

src/views/book/courseware/create/components/common/ModuleMixin.js

@@ -2,13 +2,13 @@
 import ModuleBase from './ModuleBase.vue';
 import RichText from '@/components/RichText.vue';
 
-import { snGenerationMethodList, viewMethodList, isEnable } from '@/views/book/courseware/data/common';
+import { displayList, viewMethodList, isEnable } from '@/views/book/courseware/data/common';
 import { SaveCoursewareComponentContent, GetCoursewareComponentContent } from '@/api/book';
 
 const mixin = {
   data() {
     return {
-      snGenerationMethodList,
+      displayList,
       viewMethodList,
       isEnable,
       property: {

src/views/book/courseware/create/components/common/SerialNumber.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <el-form-item label="序号" class="serial-number">
+      <el-input v-model="propertyObj.serial_number" @input="changeSerialNumber" />
+    </el-form-item>
+    <el-form-item>
+      <el-radio
+        v-for="{ value, label } in displayList"
+        :key="value"
+        v-model="propertyObj.sn_display_mode"
+        :label="value"
+        @input="changeDisplayMode"
+      >
+        {{ label }}
+      </el-radio>
+    </el-form-item>
+    <el-form-item v-if="propertyObj.sn_style" label="序号样式">
+      <SelectSerialNumberStyle
+        :serial-number="propertyObj.serial_number"
+        :sn-style="propertyObj.sn_style"
+        :sn-background-color="propertyObj.sn_background_color"
+        @changeSerialNumberStyle="changeSerialNumberStyle"
+      />
+    </el-form-item>
+    <el-form-item label="序号位置">
+      <SerialNumberPosition :position="propertyObj.sn_position" @changeNumberPosition="changeNumberPosition" />
+    </el-form-item>
+    <el-divider />
+  </div>
+</template>
+
+<script>
+import SerialNumberPosition from '@/views/book/courseware/create/components/common/SerialNumberPosition.vue';
+import SelectSerialNumberStyle from '@/views/book/courseware/create/components/base/common/SelectSerialNumberStyle.vue';
+
+import { displayList } from '@/views/book/courseware/data/common';
+
+export default {
+  name: 'SerialNumber',
+  components: {
+    SerialNumberPosition,
+    SelectSerialNumberStyle,
+  },
+  inject: ['updateProperty'],
+  props: {
+    property: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      displayList,
+      propertyObj: this.property,
+    };
+  },
+  watch: {
+    property: {
+      handler(val) {
+        this.propertyObj = val;
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    /**
+     * @description 改变序号
+     * @param {string} val
+     */
+    changeSerialNumber(val) {
+      this.propertyObj.serial_number = val;
+      this.updateProperty('serial_number', val);
+    },
+    /**
+     * @description 改变序号显示方式
+     * @param {string} sn_display_mode
+     */
+    changeDisplayMode(sn_display_mode) {
+      this.propertyObj.sn_display_mode = sn_display_mode;
+      this.updateProperty('sn_display_mode', sn_display_mode);
+    },
+    /**
+     * @description 改变序号位置
+     * @param {string} sn_position
+     */
+    changeNumberPosition(sn_position) {
+      this.propertyObj.sn_position = sn_position;
+      this.updateProperty('sn_position', sn_position);
+    },
+
+    /**
+     * @description 改变序号样式
+     * @param {string} sn_style
+     * @param {string} sn_background_color
+     */
+    changeSerialNumberStyle(sn_style, sn_background_color) {
+      this.propertyObj.sn_style = sn_style;
+      this.propertyObj.sn_background_color = sn_background_color;
+      this.updateProperty('sn_style', sn_style);
+      this.updateProperty('sn_background_color', sn_background_color);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/book/courseware/create/components/common/SettingMixin.js

@@ -1,20 +1,17 @@
-import { switchSerialNumber, computedQuestionNumber } from '../../../data/common';
-import { snGenerationMethodList, checkString } from '@/views/book/courseware/data/common';
+import { checkString } from '@/views/book/courseware/data/common';
 
-import SerialNumberPosition from '@/views/book/courseware/create/components/common/SerialNumberPosition.vue';
-import SelectSerialNumberStyle from '@/views/book/courseware/create/components/base/common/SelectSerialNumberStyle.vue';
+import SerailNumber from '@/views/book/courseware/create/components/common/SerialNumber.vue';
 
 const mixin = {
   data() {
     return {
       param: {}, // 组件设置时传过来的特有参数
-      switchSerialNumber,
-      computedQuestionNumber,
-      snGenerationMethodList,
       checkString,
     };
   },
-  components: { SerialNumberPosition, SelectSerialNumberStyle },
+  components: {
+    SerailNumber,
+  },
   watch: {
     'property.serial_number': {
       handler(val) {
@@ -22,6 +19,11 @@ const mixin = {
       },
     },
   },
+  provide() {
+    return {
+      updateProperty: this.updateProperty,
+    };
+  },
   methods: {
     /**
      * @description 设置属性
@@ -32,22 +34,13 @@ const mixin = {
       this.property = property;
       this.param = param;
     },
-
-    /**
-     * @description 改变序号位置
-     * @param {String} sn_position
-     */
-    changeNumberPosition(sn_position) {
-      this.property.sn_position = sn_position;
-    },
-
     /**
-     * @description 改变序号样式
-     * @param {String} sn_style,sn_background_color
+     * @description 更新属性
+     * @param {string} key
+     * @param {string|number} value
      */
-    changeSerialNumberStyle(sn_style, sn_background_color) {
-      this.property.sn_style = sn_style;
-      this.property.sn_background_color = sn_background_color;
+    updateProperty(key, value) {
+      this.property[key] = value;
     },
   },
 };

src/views/book/courseware/create/components/question/fill/FillSetting.vue

@@ -1,24 +1,8 @@
 <template>
   <div>
     <el-form :model="property" label-width="72px" label-position="left">
-      <el-form-item label="序号" class="serial-number">
-        <el-input v-model="property.serial_number" />
-        <SvgIcon icon-class="switch" size="14" @click="switchSerialNumber(property)" />
-      </el-form-item>
-      <el-form-item>
-        <el-radio
-          v-for="{ value, label } in snGenerationMethodList"
-          :key="value"
-          v-model="property.sn_generation_method"
-          :label="value"
-        >
-          {{ label }}
-        </el-radio>
-      </el-form-item>
-      <el-form-item label="序号位置">
-        <SerialNumberPosition :position="property.sn_position" @changeNumberPosition="changeNumberPosition" />
-      </el-form-item>
-      <el-divider />
+      <SerailNumber :property="property" />
+
       <el-form-item label="排列">
         <el-radio-group v-model="property.arrange_type">
           <el-radio v-for="{ value, label } in arrangeTypeList" :key="value" :label="value">

src/views/book/courseware/create/components/question/matching/MatchingSetting.vue

@@ -1,24 +1,8 @@
 <template>
   <div>
     <el-form :model="property" label-width="42px">
-      <el-form-item label="序号" class="serial-number">
-        <el-input v-model="property.serial_number" />
-        <SvgIcon icon-class="switch" size="14" @click="switchSerialNumber(property)" />
-      </el-form-item>
-      <el-form-item>
-        <el-radio
-          v-for="{ value, label } in snGenerationMethodList"
-          :key="value"
-          v-model="property.sn_generation_method"
-          :label="value"
-        >
-          {{ label }}
-        </el-radio>
-      </el-form-item>
-      <el-form-item label="序号位置">
-        <SerialNumberPosition :position="property.sn_position" @changeNumberPosition="changeNumberPosition" />
-      </el-form-item>
-      <el-divider />
+      <SerailNumber :property="property" />
+
       <el-form-item class="option-serial-number" label-width="0">
         <div>选项序号</div>
         <div class="option-serial-number-list">

src/views/book/courseware/create/components/question/select/SelectSetting.vue

@@ -1,24 +1,8 @@
 <template>
   <div>
     <el-form :model="property" label-width="72px">
-      <el-form-item label="序号" class="serial-number">
-        <el-input v-model="property.serial_number" />
-        <SvgIcon icon-class="switch" size="14" @click="switchSerialNumber(property)" />
-      </el-form-item>
-      <el-form-item>
-        <el-radio
-          v-for="{ value, label } in snGenerationMethodList"
-          :key="value"
-          v-model="property.sn_generation_method"
-          :label="value"
-        >
-          {{ label }}
-        </el-radio>
-      </el-form-item>
-      <el-form-item label="序号位置">
-        <SerialNumberPosition :position="property.sn_position" @changeNumberPosition="changeNumberPosition" />
-      </el-form-item>
-      <el-divider />
+      <SerailNumber :property="property" />
+
       <el-form-item label="排列">
         <el-radio
           v-for="{ value, label } in arrangeTypeList"

src/views/book/courseware/create/components/question/sort/SortSetting.vue

@@ -1,24 +1,8 @@
 <template>
   <div>
     <el-form :model="property" label-width="72px">
-      <el-form-item label="序号" class="serial-number">
-        <el-input v-model="property.serial_number" />
-        <SvgIcon icon-class="switch" size="14" @click="switchSerialNumber(property)" />
-      </el-form-item>
-      <el-form-item>
-        <el-radio
-          v-for="{ value, label } in snGenerationMethodList"
-          :key="value"
-          v-model="property.sn_generation_method"
-          :label="value"
-        >
-          {{ label }}
-        </el-radio>
-      </el-form-item>
-      <el-form-item label="序号位置">
-        <SerialNumberPosition :position="property.sn_position" @changeNumberPosition="changeNumberPosition" />
-      </el-form-item>
-      <el-divider />
+      <SerailNumber :property="property" />
+
       <el-form-item label="选项数">
         <el-input-number v-model="property.option_count" :min="1" />
       </el-form-item>

src/views/book/courseware/create/components/question/voice_matrix/VoiceMatrixSetting.vue

@@ -1,24 +1,8 @@
 <template>
   <div>
     <el-form :model="property" label-width="72px">
-      <el-form-item label="序号" class="serial-number">
-        <el-input v-model="property.serial_number" />
-        <SvgIcon icon-class="switch" size="14" @click="switchSerialNumber(property)" />
-      </el-form-item>
-      <el-form-item>
-        <el-radio
-          v-for="{ value, label } in snGenerationMethodList"
-          :key="value"
-          v-model="property.sn_generation_method"
-          :label="value"
-        >
-          {{ label }}
-        </el-radio>
-      </el-form-item>
-      <el-form-item label="序号位置">
-        <SerialNumberPosition :position="property.sn_position" @changeNumberPosition="changeNumberPosition" />
-      </el-form-item>
-      <el-divider />
+      <SerailNumber :property="property" />
+
       <el-form-item label="行数">
         <el-input-number v-model="property.row_count" :min="1" />
       </el-form-item>

src/views/book/courseware/create/index.vue

@@ -237,6 +237,9 @@ export default {
     background-color: #ececec;
 
     .create-operation {
+      position: sticky;
+      top: 0;
+      z-index: 9;
       display: flex;
       column-gap: 6px;
       align-items: center;

src/views/book/courseware/data/audio.js

@@ -1,8 +1,4 @@
-import {
-  snGenerationMethodList,
-  serialNumberTypeList,
-  serialNumberPositionList,
-} from '@/views/book/courseware/data/common';
+import { serialNumberTypeList, serialNumberPositionList, displayList } from '@/views/book/courseware/data/common';
 
 // 音频查看方式
 export const audioViewMethodList = [
@@ -16,7 +12,7 @@ export function getAudioProperty() {
     serial_number: 1, // 序号
     sn_type: serialNumberTypeList[0].value,
     sn_position: serialNumberPositionList[0].value,
-    sn_generation_method: snGenerationMethodList[0].value,
+    sn_display_mode: displayList[0].value,
     view_method: audioViewMethodList[0].value,
   };
 }

src/views/book/courseware/data/common.js

@@ -1,15 +1,15 @@
-// 序号生成方式
-export const snGenerationMethodList = [
-  { value: 'recalculate', label: '重新计算' },
-  { value: 'follow', label: '跟随上题' },
-];
-
 // 查看方式
 export const viewMethodList = [
   { value: 'independent', label: '独立排放' },
   { value: 'list', label: '播放列表' },
 ];
 
+// 序号显示方式
+export const displayList = [
+  { value: 'true', label: '显示' },
+  { value: 'false', label: '隐藏' },
+];
+
 // 序号类型
 export const serialNumberTypeList = [
   { value: 'number', label: '数字' },
@@ -34,6 +34,15 @@ export const serialNumberPositionList = [
   { value: 'bottom-end', justifyContent: 'flex-end' },
 ];
 
+// 序号样式
+export const serialNumberStyleList = [
+  { value: 'solidBlockStyle' }, // 实心方块
+  { value: 'solidCircleStyle' }, // 实心圆
+  { value: 'hollowBlockStyle' }, // 空心方块
+  { value: 'hollowCircleStyle' }, // 空心圆
+  { value: 'defaultStyle' }, // 默认无
+];
+
 // 拼音位置
 export const pinyinPositionList = [
   { value: 'top', label: '上' },
@@ -167,36 +176,3 @@ export const reversedComputeOptionMethods = {
   [serialNumberTypeList[2].value]: (i) => i.charCodeAt(0) - 97 + 1, // 小写
   [serialNumberTypeList[3].value]: (i) => i.charCodeAt(0) - 65 + 1,
 };
-
-/**
- * 改变选项序号
- * @param {object} property 选项属性
- */
-export function switchSerialNumber(property) {
-  let relNum = 1;
-  const reversedComputationMethod = reversedComputeOptionMethods[property.sn_type];
-  if (reversedComputationMethod) {
-    relNum = reversedComputationMethod(property.serial_number);
-  }
-
-  let index = serialNumberTypeList.findIndex((p) => p.value === property.sn_type);
-  property.sn_type = serialNumberTypeList[index + 1]?.value || serialNumberTypeList[0].value;
-  const computationMethod = computeOptionMethods[property.sn_type];
-  if (computationMethod) {
-    property.serial_number = computationMethod(relNum - 1);
-  }
-}
-
-/**
- * 计算选项序号
- * @param {Number} i 序号
- * @param {String} sn_type 选项类型
- * @returns String 题号
- */
-export function computedSerialNumber(i, sn_type) {
-  const computationMethod = computeOptionMethods[sn_type];
-  if (computationMethod) {
-    return computationMethod(i);
-  }
-  return '';
-}

src/views/book/courseware/data/describe.js

@@ -1,6 +1,7 @@
 import {
-  snGenerationMethodList,
+  displayList,
   serialNumberTypeList,
+  serialNumberStyleList,
   serialNumberPositionList,
   pinyinPositionList,
 } from '@/views/book/courseware/data/common';
@@ -10,9 +11,8 @@ export function getDescribeProperty() {
     serial_number: 1, // 序号
     sn_type: serialNumberTypeList[0].value, // 序号类型：letter字母 number数字  capital大写字母 bracket_number括号数字
     sn_position: serialNumberPositionList[0].value, // 序号位置：top-start top top-end，left-start left left-end等
-    sn_generation_method: snGenerationMethodList[0].value, // 序号生成方式：recalculate重新计算 follow 跟随
-    // 序号样式 solidBlockStyle实心方块 solidCircleStyle实心圆 hollowBlockStyle空心方块 hollowCircleStyle空心圆 defaultStyle默认无
-    sn_style: 'solidBlockStyle',
+    sn_display_mode: displayList[0].value,
+    sn_style: serialNumberStyleList[0].value,
     sn_background_color: '#ea3232', // 序号背景色
     view_pinyin: 'true', // 显示拼音
     pinyin_position: pinyinPositionList[0].value, // top bottom

src/views/book/courseware/data/fill.js

@@ -1,5 +1,5 @@
 import {
-  snGenerationMethodList,
+  displayList,
   serialNumberTypeList,
   serialNumberPositionList,
   arrangeTypeList,
@@ -42,7 +42,7 @@ export function getFillProperty() {
     serial_number: 1,
     sn_type: serialNumberTypeList[0].value,
     sn_position: serialNumberPositionList[0].value,
-    sn_generation_method: snGenerationMethodList[0].value,
+    sn_display_mode: displayList[0].value,
     arrange_type: arrangeTypeList[0].value,
     audio_position: audioPositionList[0].value,
     audio_generation_method: audioGenerationMethodList[0].value,

src/views/book/courseware/data/label.js

@@ -1,7 +1,8 @@
 import {
-  snGenerationMethodList,
+  displayList,
   serialNumberTypeList,
   serialNumberPositionList,
+  serialNumberStyleList,
 } from '@/views/book/courseware/data/common';
 
 export function getLabelProperty() {
@@ -9,9 +10,8 @@ export function getLabelProperty() {
     serial_number: 1, // 序号
     sn_type: serialNumberTypeList[0].value, // 序号类型：letter字母 number数字  capital大写字母 bracket_number括号数字
     sn_position: serialNumberPositionList[0].value, // 序号位置：top-start top top-end，left-start left left-end等
-    sn_generation_method: snGenerationMethodList[0].value, // 序号生成方式：recalculate重新计算 follow 跟随
-    // 序号样式 solidBlockStyle实心方块 solidCircleStyle实心圆 hollowBlockStyle空心方块 hollowCircleStyle空心圆 defaultStyle默认无
-    sn_style: 'solidBlockStyle',
+    sn_display_mode: displayList[0].value,
+    sn_style: serialNumberStyleList[0].value,
     sn_background_color: '#ea3232', // 序号背景色
     label_color: 'random', // 标签颜色：random随机、#F53F3F等部分定义好的颜色
     label_font: '中文', // 标签字体

src/views/book/courseware/data/matching.js

@@ -1,8 +1,4 @@
-import {
-  serialNumberTypeList,
-  snGenerationMethodList,
-  serialNumberPositionList,
-} from '@/views/book/courseware/data/common';
+import { serialNumberTypeList, displayList, serialNumberPositionList } from '@/views/book/courseware/data/common';
 import { getRandomNumber } from '@/utils';
 
 /**
@@ -18,7 +14,7 @@ export function getMatchingProperty(column_num = 2) {
     serial_number: 1,
     sn_type: serialNumberTypeList[0].value,
     sn_position: serialNumberPositionList[0].value,
-    sn_generation_method: snGenerationMethodList[0].value,
+    sn_display_mode: displayList[0].value,
     serial_number_type_list: serialNumberTypeList.slice(0, column_num).map((item) => item.value),
     row_num: 2, // 行数
     column_num, // 列数 2 ~ 3

src/views/book/courseware/data/picture.js

@@ -1,5 +1,5 @@
 import {
-  snGenerationMethodList,
+  displayList,
   viewMethodList,
   serialNumberTypeList,
   serialNumberPositionList,
@@ -10,7 +10,7 @@ export function getPictureProperty() {
     serial_number: 1, // 序号
     sn_type: serialNumberTypeList[0].value, // 序号类型：letter字母 number数字  capital大写字母 bracket_number括号数字
     sn_position: serialNumberPositionList[0].value, // 序号位置：top-start top top-end，left-start left left-end等
-    sn_generation_method: snGenerationMethodList[0].value, // 序号生成方式：recalculate重新计算 follow 跟随
+    sn_display_mode: displayList[0].value,
     view_method: viewMethodList[0].value, // 查看方式：independent独立 list列表
   };
 }

src/views/book/courseware/data/select.js

@@ -1,5 +1,5 @@
 import {
-  snGenerationMethodList,
+  displayList,
   serialNumberTypeList,
   serialNumberPositionList,
   arrangeTypeList,
@@ -16,7 +16,7 @@ export function getSelectProperty() {
     serial_number: 1,
     sn_type: serialNumberTypeList[0].value,
     sn_position: serialNumberPositionList[0].value,
-    sn_generation_method: snGenerationMethodList[0].value,
+    sn_display_mode: displayList[0].value,
     arrange_type: arrangeTypeList[0].value,
   };
 }

src/views/book/courseware/data/sort.js

@@ -2,7 +2,7 @@ import {
   arrangeTypeList,
   serialNumberTypeList,
   serialNumberPositionList,
-  snGenerationMethodList,
+  displayList,
 } from '@/views/book/courseware/data/common';
 import { getRandomNumber } from '@/utils';
 export { arrangeTypeList };
@@ -20,7 +20,7 @@ export function getSortProperty() {
     serial_number: 1,
     sn_type: serialNumberTypeList[0].value,
     sn_position: serialNumberPositionList[0].value,
-    sn_generation_method: snGenerationMethodList[0].value,
+    sn_display_mode: displayList[0].value,
     option_count: 3,
     arrange_direction: arrangeTypeList[0].value,
   };

src/views/book/courseware/data/stem.js

@@ -1,5 +1,6 @@
 import {
-  snGenerationMethodList,
+  displayList,
+  serialNumberStyleList,
   serialNumberTypeList,
   serialNumberPositionList,
   pinyinPositionList,
@@ -10,9 +11,8 @@ export function getStemProperty() {
     serial_number: 1, // 序号
     sn_type: serialNumberTypeList[0].value, // 序号类型：letter字母 number数字  capital大写字母 bracket_number括号数字
     sn_position: serialNumberPositionList[0].value, // 序号位置：top-start top top-end，left-start left left-end等
-    sn_generation_method: snGenerationMethodList[0].value, // 序号生成方式：recalculate重新计算 follow 跟随
-    // 序号样式 solidBlockStyle实心方块 solidCircleStyle实心圆 hollowBlockStyle空心方块 hollowCircleStyle空心圆 defaultStyle默认无
-    sn_style: 'solidBlockStyle',
+    sn_display_mode: displayList[0].value,
+    sn_style: serialNumberStyleList[0].value,
     sn_background_color: '#ea3232', // 序号背景色
     view_pinyin: 'true', // 显示拼音
     pinyin_position: pinyinPositionList[0].value, // top bottom

src/views/book/courseware/data/video.js

@@ -1,5 +1,5 @@
 import {
-  snGenerationMethodList,
+  displayList,
   viewMethodList,
   serialNumberTypeList,
   serialNumberPositionList,
@@ -10,7 +10,7 @@ export function getVideoProperty() {
     serial_number: 1, // 序号
     sn_type: serialNumberTypeList[0].value, // 序号类型：letter字母 number数字  capital大写字母 bracket_number括号数字
     sn_position: serialNumberPositionList[0].value, // 序号位置：top-start top top-end，left-start left left-end等
-    sn_generation_method: snGenerationMethodList[0].value, // 序号生成方式：recalculate重新计算 follow 跟随
+    sn_display_mode: displayList[0].value,
     view_method: viewMethodList[0].value, // 查看方式：independent独立 list列表
   };
 }

src/views/book/courseware/data/voiceMatrix.js

@@ -1,5 +1,5 @@
 import {
-  snGenerationMethodList,
+  displayList,
   serialNumberTypeList,
   serialNumberPositionList,
   switchOption,
@@ -12,7 +12,7 @@ export function getVoiceMatrixProperty() {
     serial_number: 1,
     sn_type: serialNumberTypeList[0].value,
     sn_position: serialNumberPositionList[0].value,
-    sn_generation_method: snGenerationMethodList[0].value,
+    sn_display_mode: displayList[0].value,
     is_enable_row_play: switchOption[0].value, // 是否开启行播放
     is_enable_column_play: switchOption[0].value, // 是否开启列播放
     is_enable_record: switchOption[0].value, // 是否开启录音

src/views/book/courseware/preview/components/audio/AudioPreview.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="audioArea" class="audio-area" :style="getAreaStyle()">
-    <SerialNumberPosition :property="data.property" />
+    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
     <div ref="audioAreaBox" class="main">
       <ul v-if="'independent' === data.property.view_method" class="view-independent">

src/views/book/courseware/preview/components/common/PreviewMixin.js

@@ -2,12 +2,14 @@ import SerialNumberPosition from './SerialNumberPosition.vue';
 import DOMPurify from 'dompurify';
 
 import { GetCoursewareComponentContent_View } from '@/api/book';
+import { isEnable } from '@/views/book/courseware/data/common';
 
 const mixin = {
   data() {
     return {
       answer: { answer_list: [] }, // 答案
       disabled: false, // 是否禁用
+      isEnable,
     };
   },
   props: {
@@ -38,6 +40,8 @@ const mixin = {
      * 得到序号外部样式
      */
     getAreaStyle() {
+      if (!isEnable(this.data.property.sn_display_mode)) return {};
+
       const position = this.data.property.sn_position;
       let grid = '';
 

src/views/book/courseware/preview/components/common/SerialNumberPosition.vue

@@ -41,38 +41,54 @@ export default {
 
     // 题干与描述序号样式
     serialNumberStyle(styleType, placeSelf) {
-      let serialNumberStyle = {};
+      let serialNumberStyle = {
+        placeSelf,
+      };
+
       const _color = `${this.property.sn_background_color}`;
-      if (styleType === 'solidBlockStyle') {
-        serialNumberStyle = {
-          borderRadius: '4px',
-          backgroundColor: _color,
-          color: '#fff',
-        };
-      } else if (styleType === 'solidCircleStyle') {
-        serialNumberStyle = {
-          borderRadius: '40px',
-          backgroundColor: _color,
-          color: '#fff',
-        };
-      } else if (styleType === 'hollowBlockStyle') {
-        serialNumberStyle = {
-          border: `1px solid ${_color}`,
-          borderRadius: '4px',
-          color: _color,
-        };
-      } else if (styleType === 'hollowCircleStyle') {
-        serialNumberStyle = {
-          border: `1px solid ${_color}`,
-          borderRadius: '40px',
-          color: _color,
-        };
-      } else if (styleType === 'defaultStyle') {
-        serialNumberStyle = {
-          color: _color,
-        };
+      switch (styleType) {
+        case 'solidBlockStyle':
+          serialNumberStyle = {
+            ...serialNumberStyle,
+            borderRadius: '4px',
+            backgroundColor: _color,
+            color: '#fff',
+          };
+          break;
+        case 'solidCircleStyle':
+          serialNumberStyle = {
+            ...serialNumberStyle,
+            borderRadius: '40px',
+            backgroundColor: _color,
+            color: '#fff',
+          };
+          break;
+        case 'hollowBlockStyle':
+          serialNumberStyle = {
+            ...serialNumberStyle,
+            border: `1px solid ${_color}`,
+            borderRadius: '4px',
+            color: _color,
+          };
+          break;
+        case 'hollowCircleStyle':
+          serialNumberStyle = {
+            ...serialNumberStyle,
+            border: `1px solid ${_color}`,
+            borderRadius: '40px',
+            color: _color,
+          };
+          break;
+        case 'defaultStyle':
+          serialNumberStyle = {
+            ...serialNumberStyle,
+            color: _color,
+          };
+          break;
+        default:
+          break;
       }
-      serialNumberStyle.placeSelf = placeSelf;
+
       return serialNumberStyle;
     },
   },

src/views/book/courseware/preview/components/describe/DescribePreview.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="describe-preview" :style="getAreaStyle()">
-    <SerialNumberPosition :property="data.property" />
+    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
+
     <div class="main">
       <PinyinText
         v-if="isEnable(data.property.view_pinyin)"

src/views/book/courseware/preview/components/fill/FillPreview.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div class="select-preview" :style="getAreaStyle()">
-    <SerialNumberPosition :property="data.property" />
+    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
     <div class="main" :style="getMainStyle()">
       <AudioFill :file-id="data.audio_file_id" />

src/views/book/courseware/preview/components/label/LabelPreview.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="label-preview" :style="getAreaStyle()">
-    <SerialNumberPosition :property="data.property" />
+    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
     <div class="main">
       <el-tag v-for="(tag, i) in data.dynamicTags" :key="i" :style="{ color: tag.color }">
         {{ tag.text }}

src/views/book/courseware/preview/components/matching/MatchingPreview.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div class="matching-preview" :style="getAreaStyle()">
-    <SerialNumberPosition :property="data.property" />
+    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
     <div class="main">
       <ul ref="list" class="option-list">

src/views/book/courseware/preview/components/picture/PicturePreview.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="pictureArea" class="picture-area" :style="getAreaStyle()">
-    <SerialNumberPosition :property="data.property" />
+    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
     <div ref="pictureAreaBox" class="main">
       <div class="view-area">

src/views/book/courseware/preview/components/select/SelectPreview.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div class="select-preview" :style="getAreaStyle()">
-    <SerialNumberPosition :property="data.property" />
+    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
     <div class="main">
       <ul

src/views/book/courseware/preview/components/sort/SortPreview.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div class="select-preview" :style="getAreaStyle()">
-    <SerialNumberPosition :property="data.property" />
+    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
     <div class="main">
       <ul class="option-list">

src/views/book/courseware/preview/components/stem/StemPreview.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="stem-preview" :style="getAreaStyle()">
-    <SerialNumberPosition :property="data.property" />
+    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
+
     <div class="main">
       <PinyinText
         v-if="isEnable(data.property.view_pinyin)"

src/views/book/courseware/preview/components/video/VideoPreview.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="videoArea" class="video_area" :style="getAreaStyle()">
-    <SerialNumberPosition :property="data.property" />
+    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
     <div ref="videoAreaBox" class="main">
       <ul v-if="'independent' === data.property.view_method" class="view-independent">
         <li v-for="(file, i) in data.file_list" :key="i">

src/views/book/courseware/preview/components/voice_matrix/VoiceMatrixPreview.vue

@@ -1,9 +1,7 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div class="voice-matrix-preview" :style="getAreaStyle()">
-    <div class="select-preview" :style="getAreaStyle()">
-      <SerialNumberPosition :property="data.property" />
-    </div>
+    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
     <div class="main">
       <div class="voice-matrix-audio">