修改组件数据存放位置，设置页面的公用样式

src/styles/mixin.scss

@@ -0,0 +1,21 @@
+@mixin setting-base {
+  .serial-number {
+    :deep .el-form-item__content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .svg-icon {
+      cursor: pointer;
+    }
+  }
+
+  .el-input {
+    margin-right: 16px;
+  }
+
+  .el-divider {
+    margin: 16px 0;
+  }
+}

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

@@ -35,7 +35,8 @@
 
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
-import { audioViewMethodList, snGenerationMethodList, checkString } from '@/views/book/courseware/data/common';
+import { snGenerationMethodList, checkString } from '@/views/book/courseware/data/common';
+import { audioViewMethodList } from '@/views/book/courseware/data/audio';
 
 export default {
   name: 'AudioSetting',
@@ -60,25 +61,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.el-form {
-  .serial-number {
-    :deep .el-form-item__content {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .svg-icon {
-      cursor: pointer;
-    }
-  }
+@use '@/styles/mixin.scss' as *;
 
-  .el-input {
-    margin-right: 16px;
-  }
-
-  .el-divider {
-    margin: 16px 0;
-  }
+.el-form {
+  @include setting-base;
 }
 </style>

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

@@ -38,7 +38,6 @@ export default {
       iconClass: 'picture',
     };
   },
-  computed: {},
   methods: {
     updateFileList({ file_list, file_id_list, file_info_list }) {
       this.data.file_list = file_list;

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

@@ -56,21 +56,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.el-form {
-  .serial-number {
-    :deep .el-form-item__content {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-  }
-
-  .el-input {
-    margin-right: 16px;
-  }
+@use '@/styles/mixin.scss' as *;
 
-  .el-divider {
-    margin: 16px 0;
-  }
+.el-form {
+  @include setting-base;
 }
 </style>

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

@@ -1,6 +1,6 @@
 // 组件混入
 import ModuleBase from './ModuleBase.vue';
-import { snGenerationMethodList, viewMethodList, audioViewMethodList } from '@/views/book/courseware/data/common';
+import { snGenerationMethodList, viewMethodList } from '@/views/book/courseware/data/common';
 import { SaveCoursewareComponentContent, GetCoursewareComponentContent } from '@/api/book';
 
 const mixin = {
@@ -8,7 +8,6 @@ const mixin = {
     return {
       snGenerationMethodList,
       viewMethodList,
-      audioViewMethodList,
       property: {
         isGetContent: false, // 是否已获取内容
       },

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

@@ -1,12 +1,19 @@
 <template>
-  <div></div>
+  <ModuleBase :type="data.type" />
 </template>
 
 <script>
+import ModuleMixin from '../../common/ModuleMixin';
+
+import { getSelectData } from '@/views/book/courseware/data/select';
+
 export default {
   name: 'SelectPage',
+  mixins: [ModuleMixin],
   data() {
-    return {};
+    return {
+      data: getSelectData(),
+    };
   },
   methods: {},
 };

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

@@ -1,15 +1,66 @@
 <template>
-  <div></div>
+  <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 />
+      <el-form-item label="汉字框">
+        <el-radio
+          v-for="{ value, label } in arrangeTypeList"
+          :key="value"
+          v-model="property.view_method"
+          :label="value"
+        >
+          {{ label }}
+        </el-radio>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
+import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
+
+import { snGenerationMethodList } from '@/views/book/courseware/data/common';
+import { arrangeTypeList } from '@/views/book/courseware/data/select';
+
 export default {
   name: 'SelectSetting',
+  mixins: [SettingMixin],
   data() {
-    return {};
+    return {
+      property: {
+        serial_number: 1,
+        sn_type: 'number',
+        sn_position: 'top-start',
+        sn_generation_method: snGenerationMethodList[0].value,
+        arrange_method: arrangeTypeList[0].value,
+      },
+    };
   },
   methods: {},
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@use '@/styles/mixin.scss' as *;
+
+.el-form {
+  @include setting-base;
+}
+</style>

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

@@ -1,10 +1,16 @@
 import {
   snGenerationMethodList,
-  audioViewMethodList,
   serialNumberTypeList,
   serialNumberPositionList,
 } from '@/views/book/courseware/data/common';
 
+// 音频查看方式
+export const audioViewMethodList = [
+  { value: 'independent', label: '独立' },
+  { value: 'list', label: '列表' },
+  { value: 'icon', label: '图标' },
+];
+
 export function getAudioData() {
   return {
     type: 'audio',

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

@@ -6,6 +6,8 @@ import AudioPage from '../create/components/base/audio/Audio.vue';
 import AudioSetting from '../create/components/base/audio/AudioSetting.vue';
 import PicturePage from '../create/components/base/picture/Picture.vue';
 import PictureSetting from '../create/components/base/picture/PictureSetting.vue';
+import SelectPage from '../create/components/question/select/Select.vue';
+import SelectSetting from '../create/components/question/select/SelectSetting.vue';
 
 export const bookTypeOption = [
   {
@@ -79,8 +81,8 @@ export const bookTypeOption = [
         value: 'select',
         label: '选择组件',
         icon: '',
-        component: '',
-        set: '',
+        component: SelectPage,
+        set: SelectSetting,
       },
     ],
   },

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

@@ -10,13 +10,6 @@ export const viewMethodList = [
   { value: 'list', label: '播放列表' },
 ];
 
-// 音频查看方式
-export const audioViewMethodList = [
-  { value: 'independent', label: '独立' },
-  { value: 'list', label: '列表' },
-  { value: 'icon', label: '图标' },
-];
-
 // 序号类型
 export const serialNumberTypeList = [
   { value: 'number', label: '数字' },

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

@@ -7,7 +7,6 @@ import {
 
 export function getPictureData() {
   return {
-    id: '',
     type: 'picture',
     title: '图片',
     single_size: 2, // 单位MB

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

@@ -0,0 +1,25 @@
+import {
+  snGenerationMethodList,
+  serialNumberTypeList,
+  serialNumberPositionList,
+} from '@/views/book/courseware/data/common';
+
+// 排列方式
+export const arrangeTypeList = [
+  { value: 'horizontal', label: '横排' },
+  { value: 'vertical', label: '竖屏' },
+];
+
+export function getSelectData() {
+  return {
+    type: 'select',
+    title: '选择',
+    property: {
+      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跟随
+      arrange_method: arrangeTypeList[0].value, // 查看方式：independent独立 list列表 icon图标
+    },
+  };
+}