修改问题

src/views/book/courseware/create/components/CreateCanvas.vue

@@ -54,7 +54,7 @@
                   :is="componentList[grid.type]"
                   :id="grid.id"
                   ref="component"
-                  :key="`grid-${i}-${j}-${k}-${grid.id}`"
+                  :key="`grid-${grid.id}`"
                   :class="[grid.id]"
                   :style="{ gridArea: grid.grid_area, height: grid.height, marginTop: grid.row !== 1 ? '16px' : '0' }"
                   :delete-component="deleteComponent(i, j, k)"

src/views/book/courseware/create/components/PreviewEdit.vue

@@ -34,7 +34,7 @@
                 :style="{
                   gridArea: 'preview',
                   height: grid.height,
-                  overflow: 'auto',
+                  overflow: 'hidden',
                 }"
               />
             </div>

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

@@ -0,0 +1,25 @@
+<template>
+  <ModuleBase :type="data.type">
+    <template #content> </template>
+  </ModuleBase>
+</template>
+
+<script>
+import ModuleMixin from '../../common/ModuleMixin';
+
+import { arrangeTypeList, getSortData } from '@/views/book/courseware/data/sort';
+
+export default {
+  name: 'SortPage',
+  mixins: [ModuleMixin],
+  data() {
+    return {
+      data: getSortData(),
+      arrangeTypeList,
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,57 @@
+<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 />
+      <el-form-item label="选项数">
+        <el-input-number v-model="property.option_count" :min="1" />
+      </el-form-item>
+      <el-form-item label="排列">
+        <el-radio
+          v-for="{ value, label } in arrangeTypeList"
+          :key="value"
+          v-model="property.arrange_type"
+          :label="value"
+        >
+          {{ label }}
+        </el-radio>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
+
+import { arrangeTypeList, getSortProperty } from '@/views/book/courseware/data/sort';
+
+export default {
+  name: 'SortPreview',
+  mixins: [SettingMixin],
+  data() {
+    return {
+      property: getSortProperty(),
+      arrangeTypeList,
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -40,6 +40,12 @@ export const pinyinPositionList = [
   { value: 'bottom', label: '下' },
 ];
 
+// 排列方式
+export const arrangeTypeList = [
+  { value: 'horizontal', label: '横排' },
+  { value: 'vertical', label: '竖排' },
+];
+
 /**
  * 判断序号类型
  * @param {string} str

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

@@ -2,14 +2,11 @@ import {
   snGenerationMethodList,
   serialNumberTypeList,
   serialNumberPositionList,
+  arrangeTypeList,
 } from '@/views/book/courseware/data/common';
 import { getRandomNumber } from '@/utils';
 
-// 排列方式
-export const arrangeTypeList = [
-  { value: 'horizontal', label: '横排' },
-  { value: 'vertical', label: '竖排' },
-];
+export { arrangeTypeList };
 
 /**
  * 获取选择题属性

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

@@ -0,0 +1,27 @@
+import {
+  arrangeTypeList,
+  serialNumberTypeList,
+  serialNumberPositionList,
+  snGenerationMethodList,
+} from '@/views/book/courseware/data/common';
+
+export { arrangeTypeList };
+
+export function getSortProperty() {
+  return {
+    serial_number: 1,
+    sn_type: serialNumberTypeList[0].value,
+    sn_position: serialNumberPositionList[0].value,
+    sn_generation_method: snGenerationMethodList[0].value,
+    arrange_direction: arrangeTypeList[0].value,
+  };
+}
+
+export function getSortData() {
+  return {
+    type: 'sort',
+    title: '排序',
+    option_list: [],
+    property: getSortProperty(),
+  };
+}

src/views/book/courseware/preview/CoursewarePreview.vue

@@ -198,7 +198,7 @@ export default {
     .col {
       display: grid;
       gap: 16px;
-      overflow: auto;
+      overflow: hidden;
     }
   }
 }