feat: 图片放大

src/utils/image.ts

@@ -1,17 +1,17 @@
-import { unref } from 'vue'
+import { nextTick, unref } from 'vue'
 import { useConfig } from '@/store/modules/asideConfig'
 
 const downloadSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg>'
 
 export function hideDownload(e: MouseEvent) {
-  setTimeout(() => {
+  nextTick(() => {
     const configStore = useConfig()
     const downloadEle: any = document.querySelector('.n-image-preview-toolbar')?.children[5]
     const asideValue = unref(configStore.getAsideValue)
-    const download = asideValue.izimgdownload
+    const download = asideValue?.izimgdownload
     if (downloadEle && downloadEle.innerHTML === downloadSvg && download === false)
       downloadEle.style.display = 'none'
     else
       downloadEle.style.display = 'block'
-  }, 100)
+  })
 }

src/views/task/content/Content.vue

@@ -12,6 +12,7 @@ import type { ApprovalParam, PictureSortParam } from '/#/api'
 import { getTaskDetailInfo, getTaskDetailPictureList } from '@/api/work/work'
 import { useUser } from '@/store/modules/user'
 import emitter from '@/utils/mitt'
+import { hideDownload } from '@/utils/image'
 
 const batch = ref(false)
 const selectItems = ref<any[]>([])
@@ -57,8 +58,9 @@ const taskStore = useTask()
 const overTask = ref<any>(null)
 const taskDetailInfo = ref<any>({})
 const taskDetailPictureList = ref<any[]>([])
-let processItems: any[] = []
 const userStore = useUser()
+const imageRef = ref<ComponentElRef | null>()
+let processItems: any[] = []
 
 // states:1未提交，2待审批，3通过，4不通过
 function validate(items: any[]) {
@@ -231,6 +233,14 @@ const mark = computed(() => {
 function immersionHandler() {
   taskStore.updateImmersion()
 }
+
+function previewHandler(event: MouseEvent) {
+  event.stopImmediatePropagation()
+  event.stopPropagation()
+
+  if (imageRef.value)
+    (imageRef.value as any).mergedOnClick()
+}
 </script>
 
 <template>
@@ -256,11 +266,11 @@ function immersionHandler() {
             </template>
             返回
           </n-button>
-          <div style="cursor: pointer;margin-left: 16px;" @click="rejectHandler">
+          <div style="cursor: pointer;margin-left: 16px;" @click.stop="rejectHandler">
             <SvgIcon width="64" height="28" name="a1" />
           </div>
           <SvgIcon size="24" name="vs" />
-          <div style="cursor: pointer;" @click="approvalHandler">
+          <div style="cursor: pointer;" @click.stop="approvalHandler">
             <SvgIcon width="64" height="28" name="a2" />
           </div>
         </div>
@@ -269,13 +279,13 @@ function immersionHandler() {
     <div class="wrapper-detail">
       <div
         class="left" :style="{ 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})` }"
-        @mouseover="overTaskHandle" @mouseleave="leaveTaskHandler"
+        @mouseover="overTaskHandle" @mouseleave="leaveTaskHandler" @click="previewHandler"
       >
         <div v-show="overTask" class="action">
-          <SvgIcon style="cursor: pointer;" width="168" height="48" name="r6" @click.stop @click="approvalHandler" />
+          <SvgIcon style="cursor: pointer;" width="168" height="48" name="r6" @click.stop="approvalHandler" />
           <SvgIcon
-            style="cursor: pointer;margin-left: 30px;" width="168" height="48" name="r7" @click.stop
-            @click="rejectHandler"
+            style="cursor: pointer;margin-left: 30px;" width="168" height="48" name="r7"
+            @click.stop="rejectHandler"
           />
         </div>
         <div class="mark">
@@ -310,6 +320,9 @@ function immersionHandler() {
           <SvgIcon color="#FFF" size="16" name="time" />
           <span>2023-09-17 13:09:10</span>
         </div>
+        <div style="display: none;">
+          <n-image ref="imageRef" :img-props="{ onClick: hideDownload }" :src="taskDetailInfo?.ocrPicture?.imgurl" />
+        </div>
       </div>
       <div class="right">
         <n-scrollbar style="max-height: 100%;">

src/views/worksheet/content/Content.vue

@@ -7,6 +7,7 @@ import type { PictureSortParam, SetTFParam } from '/#/api'
 import { useWorkOrder } from '@/store/modules/workOrder'
 import { clearTF, getPackageTaskList, getTaskDetailInfo, getTaskDetailPictureList, setTF } from '@/api/work/work'
 import { fieldMap } from '@/config/workorder'
+import { hideDownload } from '@/utils/image'
 
 const batch = ref(false)
 const selectItems = ref<any[]>([])
@@ -55,8 +56,9 @@ const overTask = ref<any>(null)
 const taskList = ref<any[]>([])
 const taskDetailInfo = ref<any>({})
 const taskDetailPictureList = ref<any[]>([])
-
 const confrimModalRef = ref(null)
+const imageRef = ref<ComponentElRef | null>()
+
 let processItems: any[] = []
 
 function validate(items: any[]) {
@@ -276,6 +278,14 @@ const mark = computed(() => {
 function immersionHandler() {
   workStore.updateImmersion()
 }
+
+function previewHandler(event: MouseEvent) {
+  event.stopImmediatePropagation()
+  event.stopPropagation()
+
+  if (imageRef.value)
+    (imageRef.value as any).mergedOnClick()
+}
 </script>
 
 <template>
@@ -317,7 +327,10 @@ function immersionHandler() {
       </div>
     </div>
     <div class="wrapper-detail">
-      <div class="left" :style="{ 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})` }">
+      <div
+        class="left" :style="{ 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})` }"
+        @click="previewHandler"
+      >
         <div class="mark">
           <SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 0" size="128" name="jia" />
         </div>
@@ -327,14 +340,18 @@ function immersionHandler() {
         <div class="info">
           <n-grid x-gap="16" y-gap="0" :cols="12">
             <n-gi span="4">
-              <span style="color:#8b8d8f;"><SvgIcon name="m1" /></span>
+              <span style="color:#8b8d8f;">
+                <SvgIcon name="m1" />
+              </span>
             </n-gi>
             <n-gi span="8" style="display: flex;align-items: left;flex-direction: column;justify-content: center;">
               <span>{{ mark }}</span>
               <span>图片标记</span>
             </n-gi>
             <n-gi span="4">
-              <span style="color:#8b8d8f;"><SvgIcon name="m2" /></span>
+              <span style="color:#8b8d8f;">
+                <SvgIcon name="m2" />
+              </span>
             </n-gi>
             <n-gi span="8" style="display: flex;align-items: left;flex-direction: column;justify-content: center;">
               <span>{{ totalCount }}</span>
@@ -342,6 +359,9 @@ function immersionHandler() {
             </n-gi>
           </n-grid>
         </div>
+        <div style="display: none;">
+          <n-image ref="imageRef" :img-props="{ onClick: hideDownload }" :src="taskDetailInfo?.ocrPicture?.imgurl" />
+        </div>
       </div>
       <div class="right">
         <n-scrollbar style="max-height: 100%;">
@@ -405,8 +425,8 @@ function immersionHandler() {
           <SvgIcon v-show="item.iztrueorfalse === 1" name="zhen" />
         </div>
         <div v-show="overTask && overTask.id === item.id" class="action">
-          <SvgIcon style="cursor: pointer;" name="t1" @click.stop @click="trueHandler" />
-          <SvgIcon style="cursor: pointer;" name="t2" @click.stop @click="falseHandler" />
+          <SvgIcon style="cursor: pointer;" name="t1" @click.stop="trueHandler" />
+          <SvgIcon style="cursor: pointer;" name="t2" @click.stop="falseHandler" />
         </div>
       </div>
     </div>