修改bug

src/view/case/photos/canvas-photo-editor.js

@@ -240,9 +240,9 @@ export class CanvasPhotoEditor {
         inputValue: item.name,
         inputValidator: (value) => {
           if (!value) {
-            return false;
+            return true;
           }
-          if (val.length > 100) {
+          if (value.length > 100) {
             return '长度不能超过100个字符'
           }
           return true;
@@ -813,56 +813,6 @@ export class CanvasPhotoEditor {
     }
     return list
   }
-  //绘制选中页码或者图片的边框
-  // drawAllPagesBorder(){
-  //   const ctx = this.ctxOld
-  //   // 页面边框
-  //   // 应用坐标偏移和缩放
-  //   ctx.strokeStyle = this.selectedPageColor
-  //   ctx.lineWidth = 4 / this.scale 
-  //   const pageX = this.selectedPageIndex * (this.pageWidth + this.pageMargin)
-  //   ctx.strokeRect(pageX, 0, this.pageWidth, this.pageHeight)
-  //   console.log('drawAllPagesBorder', pageX, 0, this.pageWidth, this.pageHeight, this.selectedPageIndex)
-  // }
-  // 改造后：独立绘制边框，可单独调用
-  drawAllPagesBorder(pageIndex) {
-    if (!this.ctx || this.selectedPageIndex === -1) return;
-
-    const ctx = this.ctx;
-    // 1. 保存当前上下文状态（避免污染）
-    ctx.save();
-
-    // 2. 应用和全量绘制一致的偏移/缩放（保证坐标对齐）
-    ctx.translate(this.drawOffsetX, this.drawOffsetY);
-    ctx.scale(this.scale, this.scale);
-
-    // 3. 先清除原边框区域（避免边框重叠）
-    const pageX = this.selectedPageIndex * (this.pageWidth + this.pageMargin);
-    // 清除页面边框区域（多扩一点，避免残留）
-    // ctx.clearRect(
-    //   pageX - 5 / this.scale, 
-    //   -5 / this.scale, 
-    //   this.pageWidth + 10 / this.scale, 
-    //   this.pageHeight + 10 / this.scale
-    // );
-    ctx.strokeStyle = pageIndex === this.selectedPageIndex ? this.selectedPageColor : this.canvasBgColor;
-    // 5. 绘制选中图片边框（如果有）
-    if (this._selectedPageItem) {
-      ctx.lineWidth = 4 / this.scale;
-      ctx.strokeRect(
-        this._selectedPageItem.x,
-        this._selectedPageItem.y,
-        this._selectedPageItem.width,
-        this._selectedPageItem.height
-      );
-    } else {
-      // 4. 绘制选中页面边框
-      ctx.lineWidth = 4 / this.scale;
-      ctx.strokeRect(pageX, 0, this.pageWidth, this.pageHeight);
-    }
-    // 6. 恢复上下文状态
-    ctx.restore();
-  }
   // 清除指定页面的旧边框（切换选中页时调用）
   clearOldBorder(oldPageIndex) {
     if (!this.ctx || oldPageIndex === -1) return;
@@ -954,7 +904,7 @@ export class CanvasPhotoEditor {
           : (itemIndex === 0 ? layout.y1 : layout.y2)
         // 图片占位框
         ctx.fillStyle = '#ffffff'
-        ctx.fillRect(pageX + layout.x, itemY, layout.width, layout.height)
+        ctx.fillRect(pageX + layout.x, itemY, this.rqWidth, layout.height)
         // coordinate.push({x: pageX + layout.x, y: itemY, width: layout.width, height:layout.height})
         ctx.strokeStyle = '#fff'
         ctx.lineWidth = 1 / this.scale
@@ -965,7 +915,7 @@ export class CanvasPhotoEditor {
         }
         ctx.fillStyle = photoId?'#fff':'#D9D9D9'; // 黄色
         // 绘制填充矩形
-        ctx.fillRect(pageX + layout.x, itemY, layout.width, layout.height);
+        ctx.fillRect(pageX + layout.x, itemY, this.rqWidth, layout.height);
         // 说明文字占位框
         if (this._selectedPageItem && this._selectedPageItem.pageIndex === pageIndex && this._selectedPageItem.index === itemIndex) {
           ctx.strokeStyle = this.selectedPageColor
@@ -1057,7 +1007,7 @@ export class CanvasPhotoEditor {
     // 5. 恢复上下文（仅影响当前图片，不污染全局）
     // 4. 恢复上下文（裁剪失效）
     // 图片未加载完成则跳过
-    const jxx = pageX + layout.x;
+    const jxx = pageX + (this.pageWidth - this.rqWidth)/2;
     if (!img || !img.complete || img.width === 0 || img.height === 0) {//无图
 
     } else {
@@ -1082,13 +1032,13 @@ export class CanvasPhotoEditor {
     ctx.fillStyle = '#8C8C8C';
     let textX = layout.width //textWidth > (this.rqWidth / 2) ? drawX : drawX + (textWidth / 2)
     // ctx.fillText(text, jxx + textWidth + (layout.width / 2), itemY + layout.height + 30, layout.width);
-    this.drawCenteredTextWithEllipsis(ctx, text, jxx + (layout.width / 2), itemY + layout.height + 40, layout.width - 20, 24, 2, '16px Microsoft Yahei')
+    this.drawCenteredTextWithEllipsis(ctx, text, jxx + (this.rqWidth / 2), itemY + layout.height + 40, 24, 2, '16px Microsoft Yahei')
     ctx.fillStyle = 'rgba(0, 0, 0, 1)'; // 半透明黑色背景
     ctx.setLineDash([1, 1]);
     ctx.strokeRect(
       jxx,
       itemY + layout.height + this.imgMargin,
-      layout.width,
+      this.rqWidth,
       this.titleHieght
     );
     ctx.setLineDash([]);
@@ -1372,8 +1322,9 @@ export class CanvasPhotoEditor {
    * @param {number} maxLines - 最大显示行数（超出显示省略号）
    * @param {string} font - 字体样式（如 '16px Microsoft Yahei'）
    */
-  drawCenteredTextWithEllipsis(ctx, text, x, y, maxWidth, lineHeight, maxLines, font = '14pt 宋体') {
+  drawCenteredTextWithEllipsis(ctx, text, x, y, lineHeight, maxLines, font = '14pt 宋体') {
     // 1. 设置字体样式（必须先设置，否则measureText计算不准确）
+    let maxWidth = this.rqWidth - 20
     ctx.font = font;
     ctx.textBaseline = 'top'; // 基准线设为顶部，方便计算行位置
     ctx.textAlign = 'center'; // 水平居中
@@ -1596,7 +1547,7 @@ export class CanvasPhotoEditor {
                 ctx, text,
                 coord.x + coord.width / 2,
                 coord.y + coord.height + 40,
-                coord.width - 20, 24, 2, "14pt 宋体"
+                24, 2, "14pt 宋体"
               );
 
               // 虚线框
@@ -1624,7 +1575,7 @@ export class CanvasPhotoEditor {
           // PDF 位置
           let x, y, w, h;
           if (paperType === "a4") {
-            [x, y, w, h] = [0 + 28, 0, pdfW, pdfH];
+            [x, y, w, h] = [0 + 28, 0, pdfW-28, pdfH];
           } else if (paperType === "a3") {
             w = ((pdfW / 2) - 28); h = pdfH; x = (idxInSheet * w)+56; y = 0;
           } else {
@@ -1766,7 +1717,7 @@ export class CanvasPhotoEditor {
                 ctx, text,
                 coord.x + coord.width / 2,
                 coord.y + coord.height + 40,
-                coord.width - 20, 24, 2, "14pt 宋体"
+                24, 2, "14pt 宋体"
               );
 
               // ctx.setLineDash([1, 1]);

src/view/material/sceneImg.vue

@@ -501,7 +501,7 @@
         ref="showPagesRef"
         :photos="photos"
         v-if="childrenList.src"
-        :pageCount="childrenList.item.pageCount"
+        :pageCount="childrenList.item.pageCount || 0"
         :content="childrenList.src"
       />
       <div v-else class="noView">
@@ -1291,6 +1291,7 @@ const handleOpen = (val) => {
     // 将汇总数据赋值给子组件
     childrenList.value.src = Alllist;
     childrenList.value.value = -1;
+    childrenList.value.item.pageCount = 0;
     console.log("handleOpen", Alllist);
   }
 };

src/view/material/showpages.vue

@@ -37,7 +37,7 @@ const editor = ref(null);
 watch(() => props.content, ()=>{
   if(editor.value && props.content){
         let content = typeof props.content === 'string'?JSON.parse(props.content):props.content
-        console.log("newcontent", content);
+        console.log("newcontent", content, props);
         editor.value.pages = content.pages;
         editor.value.pageCount = props.pageCount;
         editor.value.indexingLineList = content.indexingLineList;