fix: 打版管理小图加hover查看大图

src/views/typesetting/reviewModel.vue

@@ -13,6 +13,7 @@
             v-for="(val, index) in imageList"
             :key="index"
             class="color-image-item"
+            @mouseover="setMainImage(val.imagePath)"
           >
             <!-- <button class="remove" type="button">
               <i class="el-icon-close"></i>
@@ -26,10 +27,11 @@
           </li> -->
         </ul>
         <div class="main-image">
-          <img :src="row?.mainImage" />
+          <img :src="mainImageUrl || row?.mainImage" />
         </div>
       </div>
       <div class="review-from">
+        <div>
           <ElForm
             ref="reviewFormRef"
             :model="reviewForm"
@@ -116,13 +118,10 @@
                 placeholder="承诺完成日期"
               ></ElDatePicker>
             </ElFormItem>
-          <p
-            v-dompurify-html="reviewForm.requirement"
-            style="height: 470px"
-            class="requirement"
-          ></p>
           </ElForm>
         </div>
+        <p v-dompurify-html="reviewForm.requirement" class="requirement"></p>
+      </div>
     </div>
     <template #footer>
       <div class="dialog-footer">
@@ -136,7 +135,11 @@
 </template>
 
 <script setup lang="ts">
-import { TypesettingListData, EmergencyLevel,ImageListData } from '@/types/api/typesetting'
+import {
+  TypesettingListData,
+  EmergencyLevel,
+  ImageListData,
+} from '@/types/api/typesetting'
 import {
   computed,
   defineEmits,
@@ -144,6 +147,7 @@ import {
   PropType,
   ref,
   onMounted,
+  watch,
 } from 'vue'
 import { saveTypesettingReviewApi } from '@/api/typesetting'
 import { getUserListApi } from '@/api/common'
@@ -167,6 +171,11 @@ const visible = computed({
     emit('update:modelValue', val)
   },
 })
+watch(visible, (val) => {
+  if (val) {
+    mainImageUrl.value = reviewForm.value?.mainImage || ''
+  }
+})
 const reviewForm = computed({
   get() {
     return props.row
@@ -175,6 +184,7 @@ const reviewForm = computed({
     emit('update:modelValue', val)
   },
 })
+const mainImageUrl = ref('')
 const emergencyLevel = ref<EmergencyLevel[]>([])
 emergencyLevel.value = [
   {
@@ -251,6 +261,9 @@ const getUserList = async () => {
     console.error(e)
   }
 }
+const setMainImage = (url: string | undefined) => {
+  mainImageUrl.value = url || ''
+}
 onMounted(() => {
   getUserList()
 })
@@ -265,7 +278,8 @@ const imageList = computed<ImageListData[]>(() => {
 </script>
 
 <style lang="scss" scoped>
-ul,li {
+ul,
+li {
   margin: 0;
   padding: 0;
 }
@@ -284,6 +298,7 @@ ul,li {
 .detail-info {
   display: flex;
   gap: 10px;
+  height: 600px;
 }
 .review-image {
   width: 40%;
@@ -292,10 +307,15 @@ ul,li {
 }
 .review-from {
   width: 60%;
+  display: flex;
+  flex-direction: column;
 }
 
 .requirement {
   border: 1px solid #ddd;
+  overflow: auto;
+  flex: 1;
+  margin: 0;
 }
 
 .main-image {

src/views/typesetting/submitReviewModal.vue

@@ -19,12 +19,13 @@
                   v-for="(item, index) of row?.imageList"
                   :key="index"
                   class="color-image-item"
+                  @mouseover="onMouseover(item.imagePath)"
                 >
                   <img :src="item.imagePath" alt="" class="img-sign" />
                 </div>
               </div>
               <div class="modals-image-big">
-                <img :src="row?.mainImage" alt="" class="img-sign" />
+                <img :src="mainImageUrl || row?.imageList[0]?.imagePath" alt="" class="img-sign" />
               </div>
             </div>
           </div>
@@ -91,6 +92,7 @@
                     v-for="(item, index) of versionImageList"
                     :key="index"
                     class="color-image-item"
+                    @mousemove="onRightMouseover(item?.imagePath)"
                   >
                     <img :src="item.imagePath" alt="" class="img-sign" />
                     <span
@@ -407,6 +409,7 @@ watch(visible, (val) => {
     } else {
       activeName.value = 'first'
     }
+    mainImageUrl.value = props.row?.mainImage
   }
 })
 const opinion = ref('')
@@ -631,6 +634,13 @@ const getPriceDetail = async (data: TypesettingListData) => {
     console.error(e)
   }
 }
+const mainImageUrl = ref<string>('')
+const onMouseover = (url: string) => {
+  mainImageUrl.value = url
+}
+const onRightMouseover = (url: string | undefined) => {
+  versionImageUrl.value = url || ''
+}
 defineExpose({ getExamineInfo, reset, getPriceDetail })
 </script>
 
@@ -651,6 +661,8 @@ defineExpose({ getExamineInfo, reset, getPriceDetail })
     width: 60px;
     height: 60px;
     border: 1px solid #eee;
+    margin-bottom: 5px;
+    cursor: pointer;
     img {
       width: 100%;
       height: 100%;