1

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

@@ -1252,6 +1252,11 @@ export class CanvasPhotoEditor {
     this.isHistory = false //回退不保存
     this.pages = pages
     this.currentIndex = newCurrentIndex
+    // this.tempArrow.start = null
+    // this.tempArrow.end = null
+    // this.tempArrow.drawing = false;
+    // this.indexingNum = 0
+    // this.indexingList = []
     this.updata({
       selectedPageItem: this._selectedPageItem,
       selectedPageIndex: this.selectedPageIndex,

src/view/case/photos/index.vue

@@ -9,104 +9,95 @@
           @click="backPageHandler"
           ><ArrowLeft
         /></el-icon>
-        <span>{{title}}</span>
+        <span>{{ title }}</span>
       </div>
       <div class="header-main">
         <i
           class="iconfont icon-indexes"
           @click="changeIndexing"
           style="padding: 5px"
-          :class="{ disable: pages.length == 1, avtive: indexing }"
+          :class="{
+            disable: pages.length == 1 && pages[0]?.layoutMode != 'double',
+            avtive: indexing,
+          }"
         ></i>
-        <span :class="{disable: indexing}">  
-        <div class="border-icon" >
+        <span :class="{ disable: indexing }">
+          <div class="border-icon">
+            <i
+              class="iconfont icon-backout"
+              :class="{ disable: currentIndex < 1 }"
+              @click="undo(true)"
+              style="margin-right: 24px"
+            ></i>
+            <i
+              class="iconfont icon-redo"
+              @click="undo(false)"
+              :class="{ disable: historylength == currentIndex + 1 }"
+              style="margin-right: 24px"
+            ></i>
+
+            <i
+              class="iconfont icon-screen_f"
+              @click="toggleFullScreen"
+              style="margin-right: 5px"
+            ></i>
+          </div>
           <i
-            class="iconfont icon-backout"
-            :class="{ disable: currentIndex < 1 }"
-            @click="undo(true)"
+            @click="exportToPDF"
+            class="iconfont icon-download"
             style="margin-right: 24px"
           ></i>
           <i
-            class="iconfont icon-redo"
-            @click="undo(false)"
-            :class="{ disable: historylength == currentIndex + 1 }"
+            class="iconfont icon-new"
+            @click="insertBlankPage"
+            v-if="pages.length == 1 || selectedPageIndex === -1"
             style="margin-right: 24px"
           ></i>
-
-          <i
-            class="iconfont icon-screen_f"
-            @click="toggleFullScreen"
-            style="margin-right: 5px"
-          ></i>
-        </div>
-          <span class="el-dropdown-link" @click="exportToPDF">
-            <i class="iconfont icon-download" style="margin-right: 24px"></i>
-          </span>
-        <!-- <el-dropdown trigger="click" @command="exportToPDF">
-
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item command="four">4联卡纸</el-dropdown-item>
-              <el-dropdown-item command="a4">A4纸</el-dropdown-item>
-              <el-dropdown-item command="a3">A3纸</el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown> -->
-        <i
-          class="iconfont icon-new"
-          @click="insertBlankPage"
-          v-if="pages.length == 1 || selectedPageIndex === -1"
-          style="margin-right: 24px"
-        ></i>
-        <el-dropdown v-else trigger="click" @command="handleAddType">
-          <i
-          class="iconfont icon-new"
-          style="margin-right: 24px"
-        ></i>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item :icon="Plus" :command="false"
-                >左侧新增</el-dropdown-item
-              >
-              <el-dropdown-item :icon="CirclePlus" :command="true"
-                >右侧新增</el-dropdown-item
-              >
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-        <el-dropdown trigger="click" @command="handleLayoutChange">
-          <span class="el-dropdown-link">
+          <el-dropdown v-else trigger="click" @command="handleAddType">
+            <i class="iconfont icon-new" style="margin-right: 24px"></i>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item :command="false">
+                  <i class="iconfont icon-new_left"></i>
+                  左侧新增</el-dropdown-item
+                >
+                <el-dropdown-item :command="true"
+                  ><i class="iconfont icon-new_right"></i>
+                  右侧新增</el-dropdown-item
+                >
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <el-dropdown trigger="click" @command="handleLayoutChange">
             <i class="iconfont icon-layout" style="margin-right: 24px"></i>
-          </span>
-          <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"
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="double">
+                  <i class="iconfont icon-layout_two"></i>
+                  一页两张</el-dropdown-item
                 >
-                <i class="iconfont icon-layout_one"></i>一张竖版</el-dropdown-item
-              >
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-        <i
-          class="iconfont icon-delete"
-          @click="deleteSelectedPage"
-          :class="{
-            disable:
-              pages.length == 1
-                ? selectedPageItem.index == -1
-                : selectedPageIndex === -1,
-          }"
-          style="margin-right: 24px"
-        ></i>
+                <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>
+          <i
+            class="iconfont icon-delete"
+            @click="deleteSelectedPage"
+            :class="{
+              disable:
+                pages.length == 1
+                  ? selectedPageItem.index == -1
+                  : selectedPageIndex === -1,
+            }"
+            style="margin-right: 24px"
+          ></i>
         </span>
       </div>
       <div class="header-right" style="align-items: center">
@@ -128,7 +119,12 @@
               @dragstart="handleDragStart($event, photo)"
               draggable
             >
-              <img :src="photo.url + '?x-oss-process=image/resize,w_300/quality,q_80'" alt="现场照片" />
+              <img
+                :src="
+                  photo.url + '?x-oss-process=image/resize,w_300/quality,q_80'
+                "
+                alt="现场照片"
+              />
               <span class="used-tag">
                 <el-icon
                   color="#26559B"
@@ -136,7 +132,9 @@
                   ><Check
                 /></el-icon>
               </span>
-              <div class="selectImg" v-if="selectPhotos.includes(photo.id)">已导入</div>
+              <div class="selectImg" v-if="selectPhotos.includes(photo.id)">
+                已导入
+              </div>
             </div>
           </div>
         </div>
@@ -172,7 +170,14 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount, watch, nextTick, computed } from "vue";
+import {
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  nextTick,
+  computed,
+} from "vue";
 import { router, RouteName } from "@/router";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { exportCasePhotos } from "@/view/material/quisk.ts";
@@ -184,7 +189,11 @@ import {
   Plus,
   Check,
 } from "@element-plus/icons-vue";
-import { getAllPhotoList, casePhotoUpdate, getCasePhotoRollList }  from "@/store/case";
+import {
+  getAllPhotoList,
+  casePhotoUpdate,
+  getCasePhotoRollList,
+} from "@/store/case";
 let oldCanvas = null;
 const caseId = computed(() => router.currentRoute.value?.params?.caseId);
 const title = ref("照片制卷");
@@ -198,17 +207,18 @@ const selectedPageItem = ref({
   pageIndex: -1,
 });
 const photos = ref([]);
+const historyPhotos = ref([]);
 const selectPhotos = computed(() => {
-  if(editor.value){
-    let newlist = []
-    editor.value.pages.map(ele => {
-      if(ele.list && ele.list.length > 0){
-        newlist = newlist.concat(ele.list)
+  if (editor.value) {
+    let newlist = historyPhotos.value;
+    editor.value.pages.map((ele) => {
+      if (ele.list && ele.list.length > 0) {
+        newlist = newlist.concat(ele.list);
       }
-    })
-    return newlist
-  }else{
-    return []
+    });
+    return newlist;
+  } else {
+    return [];
   }
 });
 
@@ -228,51 +238,64 @@ const draggedPhoto = ref(null);
 const historylength = ref(0);
 const currentIndex = ref(-1);
 const getImgList = async () => {
-  const {id, filesTypeId} = router.currentRoute.value.query
-  let imgList = await getAllPhotoList(filesTypeId)
-  photos.value = imgList.map(ele => ({...ele, url: ele.filesUrl,id: ele.filesId, name: ele.filesTitle}));
-  let pageCentent = await getCasePhotoRollList(caseId.value)
-  let item = pageCentent.find(ele => ele.id == id)
-  title.value = item?.name || '照片制卷'
-  let content = item && item.content && JSON.parse(item?.content)
+  const { id, filesTypeId } = router.currentRoute.value.query;
+  let imgList = await getAllPhotoList(filesTypeId);
+  photos.value = imgList.map((ele) => ({
+    ...ele,
+    url: ele.filesUrl,
+    id: ele.filesId,
+    name: ele.filesTitle,
+  }));
+  let pageCentent = await getCasePhotoRollList(caseId.value);
+  pageCentent.map((ele) => {
+    if (ele.content && ele.content != "[]") {
+      let content = JSON.parse(ele.content);
+      let listHiostry =
+        content.pages?.flatMap((item) => item.list.filter((i) => i)) || [];
+      historyPhotos.value.push(...listHiostry);
+    }
+  });
+  let item = pageCentent.find((ele) => ele.id == id);
+  title.value = item?.name || "照片制卷";
+  let content = item && item.content && JSON.parse(item?.content);
   // editor.value.drawAllPages(photos.value);
-  if(content){
-    pages.value = content.pages
+  if (content) {
+    pages.value = content.pages;
     editor.value.pages = pages.value;
     editor.value.indexingLineList = content.indexingLineList || [];
   }
   editor.value.drawAllPages(photos.value);
-}
+};
 getImgList();
-const handleSee = async () =>{
-  const {id, filesTypeId} = router.currentRoute.value.query
-  const pages = editor.value?.pages
-  const indexingLineList = editor.value?.indexingLineList
-  const content = JSON.stringify({pages, indexingLineList})
-  if(indexing.value){
-    changeIndexing()
+const handleSee = async () => {
+  const { id, filesTypeId } = router.currentRoute.value.query;
+  const pages = editor.value?.pages;
+  const indexingLineList = editor.value?.indexingLineList;
+  const content = JSON.stringify({ pages, indexingLineList });
+  if (indexing.value) {
+    changeIndexing();
   }
-  let {data} = await casePhotoUpdate({
+  let { data } = await casePhotoUpdate({
     id,
     caseId: caseId.value,
-    name: '照片制卷',
+    name: "照片制卷",
     content: content,
-  })
+  });
   ElMessage({
     type: "success",
     message: "保存成功",
   });
-  if(!id){
+  if (!id) {
     router.replace({
       name: RouteName.drawCasePhotos,
       params: { caseId: caseId.value },
       query: {
         id: data.id,
         filesTypeId,
-      }
+      },
     });
   }
-}
+};
 // --- 初始化 ---
 onMounted(() => {
   if (canvas.value) {
@@ -342,6 +365,7 @@ const backPageHandler = () => {
 const undo = (type) => {
   //type = true 表示撤销，type = false 表示重做
   if (editor.value) {
+    editor.value.indexingNum = 0;
     editor.value.undo(currentIndex.value, type);
   }
 };
@@ -358,7 +382,7 @@ const toggleSelect = (photoId) => {
 // 切换全屏
 const toggleFullScreen = async () => {
   const element = canvas.value.parentElement;
-    oldCanvas = element
+  oldCanvas = element;
   if (!element) return;
 
   try {
@@ -372,7 +396,7 @@ const toggleFullScreen = async () => {
     editor.value.scrollWrapper = canvas.value.parentElement;
     editor.value.resizeCanvas();
     editor.value.resetPosition();
-    
+
     // }
   } catch (err) {
     console.warn("全屏操作失败：", err);
@@ -380,7 +404,7 @@ const toggleFullScreen = async () => {
 };
 // 监听用户按 ESC 退出全屏，同步状态
 const fullScreenChange = () => {
-  console.log('fullScreenChange', oldCanvas?.clientWidth)
+  console.log("fullScreenChange", oldCanvas?.clientWidth);
   editor.value.bindScrollWrapper(oldCanvas);
 };
 // 切换排版模式
@@ -435,16 +459,18 @@ const changeIndexing = async () => {
   if (editor.value) {
     editor.value.indexing = indexing.value;
     editor.value.selectedPageIndex = -1;
+    editor.value.indexingNum = 0;
+    editor.value.indexingList = [];
     editor.value.tempArrow = {
-      start: null,    // { x, y }
-      end: null,      // { x, y }
-      drawing: false  // 是否正在绘制
+      start: null, // { x, y }
+      end: null, // { x, y }
+      drawing: false, // 是否正在绘制
     };
     editor.value.selectedPageItem = {
       index: -1,
       pageIndex: -1,
     };
-    if(indexing.value == false){
+    if (indexing.value == false) {
       editor.value.saveHistory();
     }
     editor.value.drawAllPages();
@@ -524,8 +550,8 @@ const handleDrop = async (e) => {
  * 重置画布偏移，居中显示当前选中页
  */
 const exportToPDF = (paperType) => {
-  exportCasePhotos({showPagesRef: editor.value})
-}
+  exportCasePhotos({ showPagesRef: editor.value });
+};
 </script>
 <style lang="sass">
 @import "./style.scss"

src/view/case/photos/style.scss

@@ -31,7 +31,8 @@
         background: rgba(16,155,224,0.3);
       }
       .el-dropdown{
-        width: auto !important;
+        width: 20px !important;
+        margin-right: 20px;
       }
       .disable{
             cursor: not-allowed;