撤销回退

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

@@ -91,7 +91,7 @@ export class CanvasPhotoEditor {
     this.setImgTitle = {}
     // 操作缓存
     this.history = []
-    this.isHistory = true
+    this.isHistory = false
     this.currentIndex = -1;   // 当前在第几步
     // 绑定事件
     this.handleMouseDown = this.handleMouseDown.bind(this)
@@ -108,15 +108,13 @@ export class CanvasPhotoEditor {
   // --- 数据 getter/setter ---
   get pages() { return this._pages }
   set pages(newPages) {
-    console.log('isArrayEqual1', this.indexingLineList, newPages)
-
+    const oldPages = this._pages; // ✅ 这就是旧值！
+    console.log('saveHistory', this._pages, newPages)
     // const isSave = this._pages.length !== newPages.length?true:!this._pages.some((ele, index) => this.isArrayEqual(ele.list, newPages[index].list))
-    this._pages = newPages
+    this._pages = [...newPages]
     this.resizeCanvas()
     this.drawAllPages() // 仅页面数据变化时重绘
-    if (this.isHistory) {
-      this.saveHistory()
-    }
+
   }
   // --- 数据 getter/setter ---
   get selectedPageItem() { return this._selectedPageItem }
@@ -165,7 +163,6 @@ export class CanvasPhotoEditor {
     this.resizeCanvas()
     this.resetPosition()
     this.drawDragPreview() // 仅初始化时重绘一次
-    // this.saveHistory()
   }
 
   bindScrollWrapper(wrapper) {
@@ -638,7 +635,6 @@ export class CanvasPhotoEditor {
       this.indexingLineList.push({ points, coordinate, indexingList })
       this.indexingNum = 0
       this.indexingList = []
-      // this.saveHistory()
     }
     // drawArrow(ctx, last2.x, last2.y, last.x, last.y, color);
     // this.indexingNum = 0
@@ -1139,6 +1135,7 @@ export class CanvasPhotoEditor {
     // }
     this.pages = newPages
     // newPages.length || selectedPhotos.length ? newPages : this._pages
+    this.saveHistory()
     this.resetPosition()
     return this.pages
   }
@@ -1165,6 +1162,7 @@ export class CanvasPhotoEditor {
       if (!direction) this.selectedPageIndex++
       this.pages = newPages
     }
+    this.saveHistory()
     // this.resetPosition()
     return this.pages
   }
@@ -1233,7 +1231,7 @@ export class CanvasPhotoEditor {
     }
     if (!direction) this.selectedPageIndex++
     this.pages = newPages
-    // this.resetPosition()
+    this.saveHistory()
     return this.pages
   }
   deleteSelectedPage(backFun) {
@@ -1388,12 +1386,13 @@ export class CanvasPhotoEditor {
   }
   saveHistory() {
     // 清理当前位置之后的“重做记录”
-    this.history = this.history.slice(0, this.currentIndex + 1);
+    // this.history = this.history.slice(0, this.currentIndex + 1);
     // 重点：用 getImageData 保存整个画布像素
-    const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+    // const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+    this.history.splice(this.currentIndex+1)
     this.history.push({
-      imageData: imageData,
-      pages: [...this.pages], // 保存当前页码信息，以便恢复时使用
+      // imageData: imageData,
+      pages: JSON.stringify(this.pages), // 保存当前页码信息，以便恢复时使用
       indexingLineList: [...this.indexingLineList], // 保存标引线信息，以便恢复时使用
     });
     this.currentIndex++;
@@ -1409,13 +1408,20 @@ export class CanvasPhotoEditor {
       currentIndex: this.currentIndex
     })
   }
-  undo(currentIndex, type) {
-    let newCurrentIndex = type ? (currentIndex - 1) : (currentIndex + 1)
+  undo(type) {
+    let newCurrentIndex = type?this.currentIndex-1:this.currentIndex+1
+    // debugger
+    // if (currentIndex === (this.history.length -1) && type) {//最新一次回撤存档
+    //   this.saveHistory()
+    // };
+    // let newCurrentIndex = type ? currentIndex  : (currentIndex + 1)
     const { pages, indexingLineList } = this.history[newCurrentIndex]
+    console.log("saveHistory", this.history, newCurrentIndex, newCurrentIndex);
     this.indexingLineList = indexingLineList
     this.isHistory = false //回退不保存
-    this.pages = pages
+    this.pages = JSON.parse(pages)
     this.currentIndex = newCurrentIndex
+
     // this.tempArrow.start = null
     // this.tempArrow.end = null
     // this.tempArrow.drawing = false;

src/view/case/photos/index.vue

@@ -24,24 +24,27 @@
           @click="backPageHandler"
           ><ArrowLeft
         /></el-icon>
-        <span>{{ title|| '照片制卷' }}</span>
+        <span
+          >{{ title || "照片制卷" }}</span
+        >
       </div>
       <div class="header-main">
-        <i
-          class="iconfont icon-backout"
-          :class="{ disable: currentIndex < 1 }"
-          @click="undo(true)"
-          title="撤销"
-          style="margin-right: 24px"
-        ></i>
-        <i
-          class="iconfont icon-redo"
-          @click="undo(false)"
-          :class="{ disable: historylength == currentIndex + 1 }"
-          title="恢复"
-          style="margin-right: 24px"
-        ></i>
-
+        <span :class="{ disable: indexing }">
+          <i
+            class="iconfont icon-backout"
+            :class="{ disable: currentIndex < 1 }"
+            @click="undo(true)"
+            title="撤销"
+            style="margin-right: 24px"
+          ></i>
+          <i
+            class="iconfont icon-redo"
+            @click="undo(false)"
+            :class="{ disable: historylength == currentIndex + 1 }"
+            title="恢复"
+            style="margin-right: 24px"
+          ></i>
+        </span>
         <i
           class="iconfont icon-screen_f"
           @click="toggleFullScreen"
@@ -78,25 +81,25 @@
                   </el-dropdown-menu>
                 </template>
               </el-dropdown>
-            <el-dropdown trigger="click" @command="handleLayoutChange">
-              <i class="iconfont icon-layout" title="模板"></i>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item command="double">
-                    <i class="iconfont icon-layout_two"></i>
-                    一页两张</el-dropdown-item
-                  >
-                  <el-dropdown-item command="single">
-                    <i class="iconfont icon-layout_h"></i>
-                    一张横板
-                  </el-dropdown-item>
-                  <el-dropdown-item command="landscape">
-                    <i class="iconfont icon-layout_one"></i
-                    >一张竖版</el-dropdown-item
-                  >
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown></span
+              <el-dropdown trigger="click" @command="handleLayoutChange">
+                <i class="iconfont icon-layout" title="模板"></i>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item command="double">
+                      <i class="iconfont icon-layout_two"></i>
+                      一页两张</el-dropdown-item
+                    >
+                    <el-dropdown-item command="single">
+                      <i class="iconfont icon-layout_h"></i>
+                      一张横板
+                    </el-dropdown-item>
+                    <el-dropdown-item command="landscape">
+                      <i class="iconfont icon-layout_one"></i
+                      >一张竖版</el-dropdown-item
+                    >
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown></span
             >
             <i
               class="iconfont icon-indexes"
@@ -163,7 +166,7 @@
                 /></el-icon>
               </span>
               <div class="selectImg" v-if="selectPhotos.includes(photo.id)">
-                已导入
+                已导入{{ photo.id }}
               </div>
             </div>
             <div v-if="photos.length == 0" class="zwsj">暂无现场照片</div>
@@ -305,28 +308,33 @@ const getImgList = async () => {
     id: ele.filesId,
     name: ele.filesTitle,
   }));
-  let count = 0 
+  let count = 0;
   let pageCentent = await getCasePhotoRollList(caseId.value);
   pageCentent.map((ele) => {
     if (ele.content && ele.content != "[]") {
-    let content = JSON.parse(ele.content);
-      if( ele.id != id){
+      let content = JSON.parse(ele.content);
+      if (ele.id != id) {
         let listHiostry =
           content.pages?.flatMap((item) => item.list.filter((i) => i)) || [];
         historyPhotos.value.push(...listHiostry);
-      }else{
-        pageCount.value = count
+      } else {
+        pageCount.value = count;
       }
-      count = count + content.pages?.length
+      count = count + content.pages?.length;
     }
   });
+  if(!id){
+    pageCount.value = count;
+  }
+  editor.value.pageCount = pageCount.value;
   pageCententList.value = pageCentent;
   let item = pageCentent.find((ele) => ele.id == id);
-  if(id && !item){//已删除
-    ElMessage.error('当前照片卷已被删除')
-    setTimeout(()=>{
-      backPageHandler()
-    }, 2000)
+  if (id && !item) {
+    //已删除
+    ElMessage.error("当前照片卷已被删除");
+    setTimeout(() => {
+      backPageHandler();
+    }, 2000);
   }
   title.value = item?.name || "";
   let content = item && item.content && JSON.parse(item?.content);
@@ -335,8 +343,11 @@ const getImgList = async () => {
     // editor.value._layoutMode = content.pages.some(ele =>ele.layoutMode == 'double') ? "double" : "single";
     pages.value = content.pages;
     editor.value.pageCount = pageCount.value;
+    console.log("saveHistoryNew", content.pages);
+    editor.value.isHistory = true;
     editor.value.pages = pages.value;
     editor.value.indexingLineList = content.indexingLineList || [];
+    editor.value.saveHistory(); //保留初始化数据
   }
 };
 const handleSee = async () => {
@@ -413,7 +424,9 @@ onMounted(async () => {
     // 初始化绘制
     editor.value.drawAllPages(photos.value);
     editor.value.resetPosition(); // 移除scrollToCenter，用resetPosition
-
+    if(!id){
+      editor.value.saveHistory(); //保留初始化数据
+    }
     // 同步初始数据
     scale.value = editor.value.scale;
   }
@@ -458,7 +471,7 @@ const undo = (type) => {
   //type = true 表示撤销，type = false 表示重做
   if (editor.value) {
     editor.value.indexingNum = 0;
-    editor.value.undo(currentIndex.value, type);
+    editor.value.undo(type);
   }
 };
 
@@ -515,7 +528,8 @@ const handleLayoutChange = async (value) => {
     );
     if (selectedPageIndex.value == -1 || isActiveItem) {
       //未选中页面
-      if(layoutMode.value != editor.value.layoutMode) editor.value.layoutMode = layoutMode.value;
+      if (layoutMode.value != editor.value.layoutMode)
+        editor.value.layoutMode = layoutMode.value;
       autoLayout();
     } else {
       //选中页面
@@ -589,8 +603,8 @@ const deleteSelectedPage = async () => {
 };
 const handleKeyDown = (e) => {
   console.log("handleKeyDown", e);
-  if(selectedPageIndex.value === -1){
-    return
+  if (selectedPageIndex.value === -1) {
+    return;
   }
   if (e.key === "Delete" || e.key === "Backspace") {
     e.preventDefault();
@@ -632,8 +646,9 @@ const handleDrop = async (e) => {
   const position = editor.value.getPhotoPositionInPage(e);
   const { pageIndex, itemIndex } = position;
 
+  console.log("saveHistory", editor.value.history);
   if (pageIndex === -1 || itemIndex === -1) return;
-  
+  pages.value = editor.value.pages;
   // 更新页面数据
   const newPages = [...pages.value];
   // 确保页面数组存在
@@ -642,7 +657,7 @@ const handleDrop = async (e) => {
   while (newPages[pageIndex].list.length <= itemIndex) {
     newPages[pageIndex].list.push("");
   }
-  if(newPages[pageIndex].item.length < itemIndex) {
+  if (newPages[pageIndex].item.length < itemIndex) {
     newPages[pageIndex].item.push(draggedPhoto.value);
   }
   // 放入照片ID
@@ -651,13 +666,13 @@ const handleDrop = async (e) => {
 
   // 同步数据
   pages.value = newPages;
-  // selectedPageIndex.value = pageIndex;
+  selectedPageIndex.value = pageIndex;
   draggedPhoto.value = null;
 
   // 重新绘制
   editor.value.pages = pages.value;
-  editor.value.saveHistory();
   editor.value.drawAllPages(photos.value);
+  editor.value.saveHistory();
   e.preventDefault();
 };
 
@@ -665,7 +680,10 @@ const handleDrop = async (e) => {
  * 重置画布偏移，居中显示当前选中页
  */
 const exportToPDF = (paperType) => {
-  exportCasePhotos({ showPagesRef: editor.value, title: title.value + '照片卷'});
+  exportCasePhotos({
+    showPagesRef: editor.value,
+    title: title.value + "照片卷",
+  });
 };
 const handleContextMenu = (e) => {
   e.preventDefault();