1

src/view/case/photos/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="phoneContent">
-      <div class="demo-image__preview">
+    <div class="demo-image__preview">
       <el-image-viewer
         hide-on-click-modal
         @close="
@@ -27,85 +27,93 @@
         <span>{{ title }}</span>
       </div>
       <div class="header-main">
+        <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>
+        <span>
+          <div class="border-icon">
+            <span :class="{ disable: indexing }">
+              <i
+                class="iconfont icon-new"
+                @click="() => insertBlankPage()"
+                v-if="pages.length == 1 || selectedPageIndex === -1"
+                style="margin-right: 24px"
+              ></i>
+              <el-dropdown
+                :class="{ disable: indexing }"
+                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"></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-backout"
-              :class="{ disable: currentIndex < 1 }"
-              @click="undo(true)"
-              style="margin-right: 24px"
+              class="iconfont icon-indexes"
+              @click="changeIndexing"
+              style="padding: 5px; margin-right: 24px"
+              :class="{
+                disable: pages.length == 1 && pages[0]?.layoutMode != 'double',
+                avtive: indexing,
+              }"
             ></i>
             <i
-              class="iconfont icon-redo"
-              @click="undo(false)"
-              :class="{ disable: historylength == currentIndex + 1 }"
-              style="margin-right: 24px"
+              class="iconfont icon-delete"
+              style="margin-right: 0"
+              @click="deleteSelectedPage"
+              :class="{
+                disable:
+                  pages.length == 1
+                    ? selectedPageItem.index == -1
+                    : selectedPageIndex === -1,
+              }"
             ></i>
-
-            <i
-              class="iconfont icon-screen_f"
-              @click="toggleFullScreen"
-              style="margin-right: 5px"
-            ></i>
-        <span :class="{ disable: indexing }">
-          <div class="border-icon">
-        <i
-          class="iconfont icon-indexes"
-          @click="changeIndexing"
-          style="padding: 5px; margin-right: 20px"
-          :class="{
-            disable: pages.length == 1 && pages[0]?.layoutMode != 'double',
-            avtive: indexing,
-          }"
-        ></i>
-          <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 :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" ></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>
-          <i
-            class="iconfont icon-delete"
-            @click="deleteSelectedPage"
-            :class="{
-              disable:
-                pages.length == 1
-                  ? selectedPageItem.index == -1
-                  : selectedPageIndex === -1,
-            }"
-          ></i>
           </div>
           <i
             @click="exportToPDF"
@@ -129,8 +137,11 @@
               v-for="(photo, index) in photos"
               :key="photo.id"
               class="photo-item"
-              @click="()=>{urlindex = index}"
-
+              @click="
+                () => {
+                  urlindex = index;
+                }
+              "
               @dragstart="handleDragStart($event, photo)"
               draggable
             >
@@ -244,15 +255,30 @@ const selectPhotos = computed(() => {
 
 const selectedPhotos = ref([]);
 const selectedPhotosbf = ref([]);
+const layoutMode = ref("double");
 const pages = ref([
   {
     list: [],
-    layoutMode: "double", //排版模式
+    layoutMode: layoutMode.value, //排版模式
+    coordinate: [], //坐标信息
+  },
+  {
+    list: [],
+    layoutMode: layoutMode.value, //排版模式
+    coordinate: [], //坐标信息
+  },
+  {
+    list: [],
+    layoutMode: layoutMode.value, //排版模式
+    coordinate: [], //坐标信息
+  },
+  {
+    list: [],
+    layoutMode: layoutMode.value, //排版模式
     coordinate: [], //坐标信息
   },
 ]);
 const scale = ref(1.0);
-const layoutMode = ref("double");
 const selectedPageIndex = ref(-1);
 const draggedPhoto = ref(null);
 const historylength = ref(0);
@@ -284,9 +310,7 @@ const getImgList = async () => {
     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;
@@ -317,7 +341,8 @@ const handleSee = async () => {
   }
 };
 // --- 初始化 ---
-onMounted(() => {
+onMounted(async () => {
+  const { id } = router.currentRoute.value.query;
   if (canvas.value) {
     // 创建编辑器实例
     editor.value = new CanvasPhotoEditor(canvas.value, {
@@ -333,9 +358,12 @@ onMounted(() => {
         currentIndex.value = value.currentIndex;
         console.log("updata", value);
       },
-      clearIndexing: changeIndexing
+      clearIndexing: changeIndexing,
     });
-
+    await getImgList();
+    if (!id) {
+      editor.value._pages = pages.value;
+    }
     // 绑定容器（用于居中计算）
     editor.value.bindScrollWrapper(canvas.value.parentElement);
 
@@ -435,7 +463,13 @@ const handleLayoutChange = async (value) => {
     let isActiveItem = editor.value.isActiveImg();
     // selectedPageIndex.value = editor.value.selectedPageIndex
     const check = await editor.value.checkIndexing();
-    console.log("isActiveItem", editor.value.selectedPageIndex, check, isActiveItem, selectedPageIndex.value);
+    console.log(
+      "isActiveItem",
+      editor.value.selectedPageIndex,
+      check,
+      isActiveItem,
+      selectedPageIndex.value
+    );
     if (selectedPageIndex.value == -1 || isActiveItem) {
       //未选中页面
       editor.value.layoutMode = layoutMode.value;
@@ -505,14 +539,14 @@ const deleteSelectedPage = async () => {
     // selectedPageIndex.value = editor.value.selectedPageIndex;
   }
 };
-const handleKeyDown = (e) =>{
-  console.log("handleKeyDown", e)
+const handleKeyDown = (e) => {
+  console.log("handleKeyDown", e);
 
-  if (e.key === 'Delete' || e.key === 'Backspace') {
-    e.preventDefault()
-    deleteSelectedPage()
+  if (e.key === "Delete" || e.key === "Backspace") {
+    e.preventDefault();
+    deleteSelectedPage();
   }
-}
+};
 // 重置缩放
 const resetZoom = () => {
   if (editor.value) {
@@ -581,8 +615,8 @@ const exportToPDF = (paperType) => {
   exportCasePhotos({ showPagesRef: editor.value });
 };
 const handleContextMenu = (e) => {
-  e.preventDefault()
-}
+  e.preventDefault();
+};
 </script>
 <style lang="sass">
 @import "./style.scss"