编辑礼品的图片

activitylink/src/views/zhongchou/gift/index.vue

@@ -20,8 +20,10 @@
               </el-icon>
             </template>
           </el-table-column>
-          <el-table-column prop="prizeName" label="名称" width="300" align="center"></el-table-column>
-          <el-table-column prop="gradeName" label="等级" width="200" align="center"></el-table-column>
+          <el-table-column prop="prizeName" label="名称" width="300" align="center"
+            show-overflow-tooltip></el-table-column>
+          <el-table-column prop="gradeName" label="等级" width="200" align="center"
+            show-overflow-tooltip></el-table-column>
           <el-table-column label="操作" align="center">
             <template #default="scope">
               <el-button type="primary" text @click="goToimportFixedList(scope.row)">导入内定名单</el-button>
@@ -53,18 +55,19 @@
             :on-change="handleImageChange" :on-success="handleUploadSuccess" :on-error="handleUploadError"
             :before-upload="beforeUpload" :show-file-list="false">
             <!-- :action="uploadUrl" -->
-            <el-icon>
-              <Plus />
-            </el-icon>
+              <template #default>
+                <img v-if="addForm.imageUrl" :src="addForm.imageUrl"
+                  style="width: 100%; height: 100%; object-fit: cover;">
+                <el-icon v-else>
+                  <Plus />
+                </el-icon>
+              </template>
             <template #tip>
               <div class="el-upload__tip">
                 只能上传jpg、png格式的图片，且不超过1MB
               </div>
             </template>
           </el-upload>
-          <div v-if="addForm.imageUrl" class="upload-preview">
-            <img :src="addForm.imageUrl" alt="预览图" style="max-width: 200px; margin-top: 10px; border-radius: 4px;">
-          </div>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -90,8 +93,9 @@
           <el-upload ref="uploadRef" list-type="picture-card" :auto-upload="false" :http-request="customUpload"
             :on-change="handleImageChange" :on-success="handleUploadSuccess" :on-error="handleUploadError"
             :before-upload="beforeUpload" :show-file-list="false">
-            <!-- :action="uploadUrl"  -->
-            <el-icon>
+            <img v-if="editForm.imageUrl" :src="editForm.imageUrl"
+              style="width: 100%; height: 100%; object-fit: cover;">
+            <el-icon v-else>
               <Plus />
             </el-icon>
             <template #tip>
@@ -100,9 +104,6 @@
               </div>
             </template>
           </el-upload>
-          <div v-if="editForm.imageUrl" class="upload-preview">
-            <img :src="editForm.imageUrl" alt="预览图" style="max-width: 200px; margin-top: 10px; border-radius: 4px;">
-          </div>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -360,59 +361,55 @@ const handleUploadSuccess = (response, file, fileList) => {
       addForm.value.imageUrl = response.data.url;
     } else if (editVisible.value) {
       editForm.value.imageUrl = response.data.url;
-    } else {
-      if (addVisible.value) {
-        addForm.value.imageUrl = null;
-      } else if (editVisible.value) {
-        editForm.value.imageUrl = null;
-      }
     }
+    console.log('==========================', response.data.url)
   } catch (error) {
+    console.log('看看报错信息', error)
     ElMessage.error(response.msg || '图片上传失败');
   }
 }
 
-  const handleUploadError = (error) => {
-    console.error('上传失败:', error);
-    if (addVisible.value) {
-      addForm.value.imageUrl = null;
-    } else if (editVisible.value) {
-      editForm.value.imageUrl = null;
-    }
-    ElMessage.error('图片上传失败，请重试');
+const handleUploadError = (error) => {
+  console.error('上传失败:', error);
+  if (addVisible.value) {
+    addForm.value.imageUrl = null;
+  } else if (editVisible.value) {
+    editForm.value.imageUrl = null;
   }
+  ElMessage.error('图片上传失败，请重试');
+}
 
-  const beforeUpload = (file) => {
-    const isJPG = file.type === 'image/jpeg';
-    const isPNG = file.type === 'image/png';
-    const isLt1 = file.size / 1024 < 1024;
+const beforeUpload = (file) => {
+  const isJPG = file.type === 'image/jpeg';
+  const isPNG = file.type === 'image/png';
+  const isLt1 = file.size / 1024 < 1024;
 
-    if (!isJPG && !isPNG) {
-      ElMessage.error('上传图片只能是 JPG 或 PNG 格式');
-      return false;
-    }
-    if (!isLt1) {
-      ElMessage.error('上传图片大小不能超过1MB');
-      return false;
-    }
-    return true;
+  if (!isJPG && !isPNG) {
+    ElMessage.error('上传图片只能是 JPG 或 PNG 格式');
+    return false;
   }
-
-  const handleSizeChange = (val) => {
-    pagination.value.pageSize = val
-    pagination.value.pageNum = 1
-    getPrizes()
+  if (!isLt1) {
+    ElMessage.error('上传图片大小不能超过1MB');
+    return false;
   }
+  return true;
+}
 
-  const handleCurrentChange = (val) => {
-    pagination.value.pageNum = val
-    getPrizes()
-  }
+const handleSizeChange = (val) => {
+  pagination.value.pageSize = val
+  pagination.value.pageNum = 1
+  getPrizes()
+}
 
-  onMounted(() => {
-    getPrizes()
-    getGradeNames()
-  })
+const handleCurrentChange = (val) => {
+  pagination.value.pageNum = val
+  getPrizes()
+}
+
+onMounted(() => {
+  getPrizes()
+  getGradeNames()
+})
 </script>
 
 <style scoped>
@@ -423,14 +420,6 @@ const handleUploadSuccess = (response, file, fileList) => {
   min-height: 80vh;
 }
 
-.pagination-container {
-  padding: 10px 20px;
-  background-color: #fff;
-  border-top: 1px solid #ebeef5;
-  display: flex;
-  justify-content: center;
-}
-
 .action-buttons {
   margin-bottom: 20px;
 }
@@ -446,8 +435,4 @@ img {
   object-fit: contain;
   border-radius: 4px;
 }
-
-.upload-preview {
-  margin-top: 10px;
-}
 </style>