Browse Source

预览操作按钮位置和高度问题

dsy 1 tháng trước cách đây
mục cha
commit
f2c9ecf68b

+ 1 - 1
.env

@@ -11,4 +11,4 @@ VUE_APP_BookWebSI = '/GCLSBookWebSI/ServiceInterface'
 VUE_APP_EepServer = '/EEPServer/SI'
 
 #version
-VUE_APP_VERSION = '2026.02.28'
+VUE_APP_VERSION = '2026.03.02'

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "eep_page",
-  "version": "2026.02.28",
+  "version": "2026.03.02",
   "private": true,
   "main": "main.js",
   "description": "智慧梧桐数字教材编辑器",

+ 8 - 0
src/views/book/courseware/create/components/PreviewEdit.vue

@@ -56,6 +56,7 @@ export default {
     return {
       getDragStatus: () => this.drag.dragging,
       bookInfo: this.bookInfo,
+      getPermissionControl: () => this.permissionControl,
     };
   },
   props: {
@@ -110,6 +111,13 @@ export default {
       },
       resizeObserver: null, // 用于监听高度变化
       heightPrompt: false, // 是否显示高度提示线
+      permissionControl: {
+        can_answer: false, // 可作答
+        can_judge_correct: false, // 可判断对错(客观题)
+        can_show_answer: false, // 可查看答案
+        can_correct: false, // 可批改
+        can_check_correct: false, // 可查看批改
+      },
     };
   },
   created() {

+ 47 - 4
src/views/book/courseware/preview/CoursewarePreview.vue

@@ -259,6 +259,11 @@ export default {
       }
       return arr;
     },
+    /**
+     * 计算列的样式
+     * @param {Object} col 列对象
+     * @returns {Object} 列的样式对象
+     */
     computedColStyle(col) {
       const grid = col.grid_list;
 
@@ -327,14 +332,52 @@ export default {
         if (!gridMap.has(item.row)) {
           gridMap.set(item.row, []);
         }
-        gridMap.get(item.row).push(item.height);
+        gridMap.get(item.row).push({ height: item.height, id: item.id });
       });
+
       gridMap.forEach((value) => {
         if (value.length === 1) {
-          gridTemplateRows += `${value[0]} `;
+          const component = this.$refs.preview?.find(
+            (child) => child.$el && child.$el.dataset && child.$el.dataset.id === value[0].id,
+          );
+
+          const hasOperation = component && component.$el.querySelector('.operation') !== null; // 判断是否有操作按钮
+          let height = hasOperation ? `${Number(value[0].height.replace('px', '')) + 48}px` : value[0].height;
+
+          gridTemplateRows += `${height} `;
         } else {
-          let isAllAuto = value.every((item) => item === 'auto'); // 是否全是 auto
-          gridTemplateRows += isAllAuto ? 'auto ' : `max(${value.join(', ')}) `;
+          let isAllAuto = value.every((item) => item.height === 'auto'); // 是否全是 auto
+          if (!isAllAuto) {
+            // 判断 value 中height 最大的组件是那个,不包括 auto 的组件
+            let maxHeight = 0;
+            let maxId = '';
+            value.forEach((item) => {
+              if (item.height !== 'auto') {
+                const heightNum = Number(item.height.replace('px', ''));
+                if (heightNum > maxHeight) {
+                  maxHeight = heightNum;
+                  maxId = item.id;
+                }
+              }
+            });
+            // 判断最高组件是否有操作按钮
+            const component = this.$refs.preview?.find(
+              (child) => child.$el && child.$el.dataset && child.$el.dataset.id === maxId,
+            );
+            const hasOperation = component && component.$el.querySelector('.operation') !== null; // 判断是否有操作按钮
+            if (hasOperation) {
+              maxHeight += 48;
+            }
+            // 将 maxId 的 height 设置为 maxHeight
+            value.forEach((item) => {
+              if (item.id === maxId) {
+                item.height = `${maxHeight}px`;
+              }
+            });
+          }
+          gridTemplateRows += isAllAuto
+            ? 'auto '
+            : `${Math.max(...value.map((item) => Number(item.height.replace('px', ''))))}px `;
         }
       });
 

+ 2 - 2
src/views/book/courseware/preview/common/AnswerAnalysis.vue

@@ -18,7 +18,7 @@
     </div>
 
     <!-- 参考答案 -->
-    <template v-if="answerList.length > 0">
+    <template v-if="answerList?.length > 0">
       <div v-for="(item, i) in answerList" :key="`answer-${i}`" class="answer-list">
         <div class="answer">
           <div class="answer-title">
@@ -57,7 +57,7 @@
     </template>
 
     <!-- 解析 -->
-    <template v-if="analysisList.length > 0">
+    <template v-if="analysisList?.length > 0">
       <div v-for="(item, i) in analysisList" :key="`analysis-${i}`" class="analysis-list">
         <div class="analysis">
           <div class="analysis-title">

+ 1 - 0
src/views/book/courseware/preview/common/PreviewOperation.vue

@@ -38,6 +38,7 @@ export default {
 .operation {
   display: flex;
   justify-content: flex-end;
+  height: 40px;
   margin-top: 8px;
 
   .button {

+ 1 - 1
src/views/book/courseware/preview/components/sort/SortPreview.vue

@@ -39,9 +39,9 @@
           </transition-group>
         </draggable>
       </ul>
+      <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" @retry="retry" />
     </div>
 
-    <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" @retry="retry" />
     <AnswerCorrect
       :answer-correct="data?.answer_correct"
       :visible.sync="visibleAnswerCorrect"