广告位

src/views/Banners/Banners.vue

@@ -133,34 +133,38 @@
 
         <vxe-column
           field="jump_url"
-          min-width="180"
+          min-width="120"
           title="跳转链接"
           header-align="center"
-          align="left"
+          align="center"
           :edit-render="{}"
         >
           <template #default="{ row }">
+            <div class="jump-url-cell">
               <el-image
                 v-if="row.jump_url"
                 :src="row.jump_url"
                 fit="cover"
-              style="width: 80px; height: 80px"
+                class="jump-url-cell__thumb"
                 :preview-src-list="[row.jump_url]"
               />
               <span v-else>-</span>
+            </div>
           </template>
           <template #edit="{ row }">
-            <vxe-upload
+            <div class="jump-url-cell jump-url-cell--edit">
-              v-model="row._jumpUrlFile"
+              <el-upload
-              name-field="original_name"
+                :file-list="row._jumpUrlFile"
-              progress-text="{percent}%"
+                list-type="picture-card"
-              :more-config="{ maxCount: 1, layout: 'horizontal' }"
-              :limit-size="uploadSize / 1024 / 1024"
-              :show-button-text="false"
-              single-mode
                 accept="image/*"
-              :upload-method="({ file }) => uploadJumpUrlMethod(file, row)"
+                :limit="1"
-            />
+                :http-request="(options) => handleJumpUrlUpload(options, row)"
+                :on-remove="() => handleJumpUrlRemove(row)"
+                class="jump-url-uploader"
+              >
+                <i class="el-icon-plus"></i>
+              </el-upload>
+            </div>
           </template>
         </vxe-column>
 
@@ -429,6 +433,19 @@ export default {
     },
 
     uploadMethod(file) {
+      return this.uploadImageFile(file).then((data) => ({
+        response: data,
+        name: data.original_name,
+        url: data.url,
+      }));
+    },
+    parseUploadResponse(payload) {
+      if (!payload) return null;
+      if (payload.url) return payload;
+      if (payload.data?.url) return payload.data;
+      return null;
+    },
+    uploadImageFile(file) {
       const formData = new FormData();
       formData.append("file", file);
       window.$_uploading = true;
@@ -440,27 +457,45 @@ export default {
         })
         .then((response) => {
           window.$_uploading = false;
-          if (response.status === 200 && !response.data.code) {
+          const data = this.parseUploadResponse(response.data);
-            return {
+          if (response.status === 200 && data?.url) {
-              response: response.data,
+            return data;
-              name: response.data.original_name,
-              url: response.data.url,
-            };
-          } else {
-            this.$message.error("上传失败");
           }
+          this.$message.error("上传失败");
+          return Promise.reject(new Error("upload failed"));
         })
-        .catch((_) => {
+        .catch((err) => {
           window.$_uploading = false;
+          return Promise.reject(err);
         });
     },
-    uploadJumpUrlMethod(file, row) {
+    getJumpUrlFromRow(row) {
-      return this.uploadMethod(file).then((res) => {
+      return (
-        if (res?.url) {
+        row.jump_url ||
-          row.jump_url = res.url;
+        row._jumpUrlFile?.[0]?.url ||
-        }
+        row._jumpUrlFile?.[0]?.response?.url ||
-        return res;
+        ""
-      });
+      );
+    },
+    handleJumpUrlUpload({ file, onSuccess, onError }, row) {
+      this.uploadImageFile(file)
+        .then((data) => {
+          this.$set(row, "jump_url", data.url);
+          row._jumpUrlFile = [
+            {
+              name: data.original_name || file.name,
+              url: data.url,
+              status: "success",
+              response: data,
+            },
+          ];
+          onSuccess(data);
+        })
+        .catch(onError);
+    },
+    handleJumpUrlRemove(row) {
+      row._jumpUrlFile = [];
+      this.$set(row, "jump_url", "");
     },
     bindToolbar() {
       this.$nextTick(() => {
@@ -473,13 +508,15 @@ export default {
     editRowEvent(row) {
       if (this.$refs["table"]) {
         if (row.jump_url) {
-          row._jumpUrlFile = [{
+          this.$set(row, "_jumpUrlFile", [
+            {
               name: "跳转图片",
               url: row.jump_url,
               status: "success",
-          }];
+            },
+          ]);
         } else {
-          row._jumpUrlFile = [];
+          this.$set(row, "_jumpUrlFile", []);
         }
         this.$refs["table"].setEditRow(row);
       }
@@ -532,9 +569,7 @@ export default {
         form["image_id"] =
           (row["image"]?.response?.id || row["image"]?.id) ?? "";
 
-        if (!row._jumpUrlFile?.length) {
+        form.jump_url = this.getJumpUrlFromRow(row);
-          form.jump_url = "";
-        }
 
         this.loading = true;
         await save(form, false);
@@ -582,4 +617,40 @@ export default {
 ::v-deep .el-tag + .el-tag {
   margin-left: 4px;
 }
+
+.jump-url-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+
+  &__thumb {
+    width: 48px;
+    height: 48px;
+    display: block;
+    border-radius: 4px;
+  }
+}
+
+::v-deep .jump-url-uploader {
+  .el-upload-list--picture-card .el-upload-list__item,
+  .el-upload--picture-card {
+    width: 48px;
+    height: 48px;
+    margin: 0;
+  }
+
+  .el-upload--picture-card {
+    line-height: 48px;
+  }
+
+  .el-icon-plus {
+    font-size: 18px;
+  }
+
+  .el-upload-list--picture-card {
+    display: inline-flex;
+    vertical-align: middle;
+  }
+}
 </style>

src/views/Banners/components/AddBanners.vue

@@ -76,19 +76,15 @@
 
             <el-form-item label="跳转链接" prop="jump_url">
               <el-upload
-                :action="action"
                 :file-list="jumpUrlFileList"
-                :headers="{ Authorization: `Bearer ${getToken()}` }"
                 accept="image/jpeg,image/png,image/gif,image/webp"
                 list-type="picture-card"
                 :limit="1"
                 :before-upload="uploadBefore"
-                :on-success="uploadJumpUrlSuccess"
+                :http-request="handleJumpUrlUpload"
                 :on-remove="uploadJumpUrlRemove"
-                :on-error="
+                :on-error="uploadJumpUrlError"
-                  (err, file, fileList) =>
+                class="jump-url-uploader"
-                    uploadError(err, file, fileList, 'jump_url')
-                "
               >
                 <i class="el-icon-plus"></i>
                 <div slot="tip" class="el-upload__tip">
@@ -218,21 +214,54 @@ export default {
       });
       this.form[fieldName] = fileList;
     },
-    uploadJumpUrlSuccess(response, file, fileList) {
+    parseUploadResponse(payload) {
+      if (!payload) return null;
+      if (payload.url) return payload;
+      if (payload.data?.url) return payload.data;
+      return null;
+    },
+    handleJumpUrlUpload({ file, onSuccess, onError }) {
+      const formData = new FormData();
+      formData.append("file", file);
+      window.$_uploading = true;
+      axios
+        .post(this.action, formData, {
+          headers: {
+            Authorization: `Bearer ${getToken()}`,
+          },
+        })
+        .then((response) => {
           window.$_uploading = false;
-      fileList.forEach((item) => {
+          const data = this.parseUploadResponse(response.data);
-        if (item.response?.data && !item.response?.code) {
+          if (response.status === 200 && data?.url) {
-          item.response = item.response.data;
+            this.form.jump_url = data.url;
+            this.jumpUrlFileList = [
+              {
+                name: data.original_name || file.name,
+                url: data.url,
+                status: "success",
+                response: data,
+              },
+            ];
+            onSuccess(data);
+            return;
           }
+          this.$message.error("上传失败");
+          onError(new Error("upload failed"));
+        })
+        .catch((err) => {
+          window.$_uploading = false;
+          onError(err);
         });
-      this.jumpUrlFileList = fileList;
-      const uploaded = fileList[0]?.response;
-      this.form.jump_url = uploaded?.url || "";
     },
     uploadJumpUrlRemove() {
       this.jumpUrlFileList = [];
       this.form.jump_url = "";
     },
+    uploadJumpUrlError() {
+      window.$_uploading = false;
+      this.$message.error("上传失败");
+    },
     uploadRemove(file, fileList, fieldName) {
       this.form[fieldName] = fileList;
     },
@@ -328,4 +357,16 @@ export default {
     display: flex;
   }
 }
+
+::v-deep .jump-url-uploader {
+  .el-upload-list--picture-card .el-upload-list__item,
+  .el-upload--picture-card {
+    width: 80px;
+    height: 80px;
+  }
+
+  .el-upload--picture-card {
+    line-height: 80px;
+  }
+}
 </style>

src/views/Banners/components/ShowBanners.vue

@@ -32,7 +32,7 @@
                           v-if="form['jump_url']"
                           :src="form['jump_url']"
                           fit="cover"
-                          style="width: 120px; height: 120px"
+                          style="width: 80px; height: 80px; border-radius: 4px"
                           :preview-src-list="[form['jump_url']]"
                         />
                         <span v-else>-</span>