提交代码，修改名称

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

@@ -85,6 +85,7 @@ export class CanvasPhotoEditor {
     this.clearIndexing = options.clearIndexing//清除父级标引状态
     // 图片缓存
     this.imgCache = new Map()
+    this.setImgTitle = {}
     // 操作缓存
     this.history = []
     this.isHistory = true
@@ -225,6 +226,39 @@ export class CanvasPhotoEditor {
       return
     }
     const pageIndex = this.getPageIndexByClick(e)
+    console.log('getPageIndexByClick', pageIndex, this.pages[pageIndex])
+
+    if(pageIndex > -1 && this.setImgTitle.titleIndex>-1 && this.pages[pageIndex].list && this.pages[pageIndex].list[this.setImgTitle.titleIndex]){//点击标题进行修改标题名称
+      let item = this.pages[pageIndex].item[this.setImgTitle.titleIndex]
+      return ElMessageBox.prompt("", "修改名称", {
+        confirmButtonText: "确定",
+        customClass: "promptClass",
+        cancelButtonText: "取消",
+        showClose: true,
+        inputValue: item.name,
+        inputValidator: (value) => {
+          if (!value) {
+            return false;
+          }
+          return true;
+        },
+        inputErrorMessage: "请输入名称",
+      })
+        .then(async ({ value }) => {
+          this.pages[pageIndex].item[this.setImgTitle.titleIndex] = {
+            ...item,
+            name: value,
+          }
+          ElMessage({
+            type: "success",
+            message: `修改成功`,
+          });
+          this.drawAllPages()
+          return
+        })
+        .catch(() => {
+        });
+    }
     const oldPageIndex = this.selectedPageIndex; // 保存旧选中页
     if (!this.show && pageIndex != undefined && pageIndex != -1 && (pageIndex !== this.selectedPageIndex || this._selectedPageItem.pageIndex != -1)) {
       // 1. 清除旧页面的边框
@@ -647,14 +681,20 @@ export class CanvasPhotoEditor {
         mouseY >= 0 && mouseY <= this.pageHeight
       ) {
         let newindex = this.pages[i].coordinate.findIndex(item => this.isPointInRect(mouseX, mouseY, item))
+        let newTitlte = this.pages[i].coordinate.findIndex(item => this.isPointInRect(mouseX, mouseY, {...item, y: item.y + item.height, height: this.titleHieght + this.imgMargin}))
         if (!this.indexing) {//绘图模式不更新选中项，绘图模式下不触发选中事件
           this.selectedPageItem = {
             index: newindex != -1 && !!(this.pages[i].list[newindex]) ? newindex : -1,
+            titleIndex: newTitlte,
             pageIndex: i,
             // title:
             ...this.pages[i].coordinate[newindex]
           }
         }
+        this.setImgTitle = {
+          titleIndex: newTitlte,
+          pageIndex: i,
+        }
         return i
       }
     }
@@ -904,13 +944,13 @@ export class CanvasPhotoEditor {
       const layoutModePages = pagePhotos.layoutMode || this.layoutMode
       const layout = this.getItemSize(layoutModePages)
       pagePhotos.coordinate = this.getCoordinate(pageX, layout)
+      pagePhotos.item = pagePhotos.item || new Array(layout.count).fill(null);
       console.log('getCoordinate', pagePhotos)
       let newList = this.padArrayLength(pagePhotos.list, layout.count)
       newList.forEach((photoId, itemIndex) => {
         let itemY = layoutModePages === 'single' || layoutModePages === 'landscape'
           ? layout.y
           : (itemIndex === 0 ? layout.y1 : layout.y2)
-
         // 图片占位框
         ctx.fillStyle = '#ffffff'
         ctx.fillRect(pageX + layout.x, itemY, layout.width, layout.height)
@@ -931,7 +971,13 @@ export class CanvasPhotoEditor {
           ctx.strokeStyle = '#e5e7eb'
 
         }
-        this.renderSinglePhoto(ctx, pageX, itemY, layout, photoId)
+        let imgItem = this.photos.find(p => p.id === photoId)
+        pagePhotos.item[itemIndex] = {
+          ...imgItem,
+          ...pagePhotos.item[itemIndex],
+        }
+        console.log('this.dragPageData', imgItem)
+        this.renderSinglePhoto(ctx, pageX, itemY, layout, pagePhotos.item[itemIndex])
       })
     })
     ctx.restore()
@@ -964,11 +1010,11 @@ export class CanvasPhotoEditor {
    * @param {Object} layout - 布局配置对象，包含 x、y、width、height 等属性
    * @param {string} photoId - 照片的唯一标识 ID
    */
-  renderSinglePhoto(ctx, pageX, itemY, layout, photoId) {
-    const photo = this.photos.find(p => p.id === photoId)
+  renderSinglePhoto(ctx, pageX, itemY, layout, photo = {}) {
     // if (!photo) return
+    console.log('this.dragPageData', ctx, pageX, itemY, layout, photo)
 
-    let img = this.imgCache.get(photoId)
+    let img = this.imgCache.get(photo.id)
     if (!img && photo && photo.url) {
       img = new Image()
       img.crossOrigin = 'anonymous'
@@ -980,7 +1026,7 @@ export class CanvasPhotoEditor {
       img.onerror = (err) => {
       }
       img.src = photo.url
-      this.imgCache.set(photoId, img)
+      this.imgCache.set(photo.id, img)
       return
     }
     // 1. 保存当前上下文（独立于外层）

src/view/material/sceneImg.vue

@@ -809,13 +809,11 @@ const handleClick = (a) => {
   let { paneName, childrenListvalue } = a;
   let newImgsrcList = [];
   let index = list.value.findIndex((item) => item.filesTypeName == paneName);
-  console.log("handleClick", a ,paneName, list.value, index);
   let childrenLists = list.value[index].childrenList;
-  console.log("handleClickchildrenLists", list.value, index, childrenLists);
   if (childrenListvalue && show.value) {
     setTimeout(() => {
       let indexshow1 = recursiveSearch(list.value[0].childrenList);
-      let indexshow2 = recursiveSearch(list.value[2].childrenList);
+      let indexshow2 = recursiveSearch(list.value[1].childrenList);
       let indexshow3 = recursiveSearch([list.value[3]]);
       let indexshow4 = casePhotoList.value.length;
       let tabsdom0 = document.getElementById("tab-现场图");
@@ -830,8 +828,11 @@ const handleClick = (a) => {
       } else if (indexshow2) {
         active1.value = '现场照片';
         handleClick({paneName: active1.value})
+      } else if (indexshow4) {
+        active1.value = '照片卷';
+        handleClick({paneName: active1.value})
       } else {
-        active1.value = '勘验笔录 ';
+        active1.value = '勘验笔录';
         handleClick({paneName: active1.value})
       }
       showText.value = true