收款凭证样式优化

src/views/receivable/documentary/documentaryRecord.vue

@@ -73,7 +73,7 @@
       <el-table-column prop="settlementAmount" label="已结算金额" width="120"></el-table-column>
       <el-table-column prop="createBy" label="开票人" width="120"></el-table-column>
       <el-table-column prop="createTime" label="开票时间" width="150"></el-table-column>
-      <el-table-column label="操作" width="200" fixed="right">
+      <el-table-column label="操作" width="300" fixed="right" align="center">
         <template #default="scope">
           <div class="flex a-c ">
             <el-button link type="primary" :disabled="scope.row.settlementStatus == '已结算'"
@@ -96,8 +96,6 @@
               </template>
             </el-dropdown>
           </div>
-
-
         </template>
       </el-table-column>
     </el-table>
@@ -137,12 +135,12 @@
           <el-date-picker v-model="countForm.receivePaymentDate" type="date" value-format="YYYY-MM-DD" />
         </el-form-item>
         <el-form-item prop="attachmentIds" label="收款凭证" class="upload-btn">
-          <el-upload style="margin: 0 10px 10px 0" :auto-upload="false" multiple v-if="!countForm.h"
-            :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage">
+          <el-upload style="margin: 0 10px 10px 0" :auto-upload="false" multiple  v-if="!countForm.h"
+            :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage" drag>
             <el-button size="large" icon="Plus" />
           </el-upload>
           <div class="imageDiv" v-for="(item, index) in imageUrl" :key="item">
-            <img :src="item" />
+            <img :src="item" style="width: 80px; height: 80px;" />
             <div class="model">
               <span class="icon-view" @click="handelViewImage(item, index)">
                 <el-icon>
@@ -164,6 +162,8 @@
       </template>
     </el-dialog>
   </PageMain>
+  <el-image-viewer v-if="imageShow" :url-list="[bigImageUrl]" @close="imageShow = false" />
+
 </template>
 
 <script setup lang="ts">
@@ -490,4 +490,48 @@ onMounted(() => {
   color: var(--el-color-primary);
   cursor: pointer;
 }
+.imageDiv {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  margin: 0 10px 10px 0;
+
+  &:hover {
+    .model {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgba(0, 0, 0, .3);
+    }
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+  }
+
+  .model {
+    position: absolute;
+    width: 80px;
+    height: 80px;
+    border-radius: 4px;
+    display: none;
+    top: 0;
+    left: 0;
+
+    .icon-view,
+    .icon-del {
+      color: #FFFFFF;
+      margin: 0 10px;
+      cursor: pointer;
+    }
+  }
+}
+:deep(.el-upload-dragger) {
+  padding: unset;
+  border: unset;
+  border-radius: unset;
+}
 </style>