广告位管理修改

src/views/Banners/Banners.vue

@@ -132,12 +132,37 @@
         />
 
         <vxe-column
-          header-align="center"
           field="jump_url"
-          width="160"
+          min-width="180"
           title="跳转链接"
-          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
-        />
+          header-align="center"
+          align="left"
+          :edit-render="{}"
+        >
+          <template #default="{ row }">
+            <el-image
+              v-if="row.jump_url"
+              :src="row.jump_url"
+              fit="cover"
+              style="width: 80px; height: 80px"
+              :preview-src-list="[row.jump_url]"
+            />
+            <span v-else>-</span>
+          </template>
+          <template #edit="{ row }">
+            <vxe-upload
+              v-model="row._jumpUrlFile"
+              name-field="original_name"
+              progress-text="{percent}%"
+              :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)"
+            />
+          </template>
+        </vxe-column>
 
         <vxe-column
           header-align="center"
@@ -429,6 +454,14 @@ export default {
           window.$_uploading = false;
         });
     },
+    uploadJumpUrlMethod(file, row) {
+      return this.uploadMethod(file).then((res) => {
+        if (res?.url) {
+          row.jump_url = res.url;
+        }
+        return res;
+      });
+    },
     bindToolbar() {
       this.$nextTick(() => {
         if (this.$refs["table"] && this.$refs["toolbar"]) {
@@ -439,6 +472,15 @@ export default {
 
     editRowEvent(row) {
       if (this.$refs["table"]) {
+        if (row.jump_url) {
+          row._jumpUrlFile = [{
+            name: "跳转图片",
+            url: row.jump_url,
+            status: "success",
+          }];
+        } else {
+          row._jumpUrlFile = [];
+        }
         this.$refs["table"].setEditRow(row);
       }
     },
@@ -490,6 +532,10 @@ export default {
         form["image_id"] =
           (row["image"]?.response?.id || row["image"]?.id) ?? "";
 
+        if (!row._jumpUrlFile?.length) {
+          form.jump_url = "";
+        }
+
         this.loading = true;
         await save(form, false);
         await this.getList();

src/views/Banners/components/AddBanners.vue

@@ -75,12 +75,26 @@
             </el-form-item>
 
             <el-form-item label="跳转链接" prop="jump_url">
-              <el-input
-                v-model="form['jump_url']"
-                clearable
-                placeholder="请填写跳转链接"
-                style="width: 100%"
-              ></el-input>
+              <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"
+                :on-remove="uploadJumpUrlRemove"
+                :on-error="
+                  (err, file, fileList) =>
+                    uploadError(err, file, fileList, 'jump_url')
+                "
+              >
+                <i class="el-icon-plus"></i>
+                <div slot="tip" class="el-upload__tip">
+                  上传图片后自动保存链接，文件不超过{{ formatFileSize(uploadSize) }}
+                </div>
+              </el-upload>
             </el-form-item>
 
             <el-form-item label="排序" prop="sort">
@@ -157,6 +171,7 @@ export default {
       action: process.env.VUE_APP_UPLOAD_API,
       loading: false,
       visible: false,
+      jumpUrlFileList: [],
       form: {
         name: "",
 
@@ -203,6 +218,21 @@ export default {
       });
       this.form[fieldName] = fileList;
     },
+    uploadJumpUrlSuccess(response, file, fileList) {
+      window.$_uploading = false;
+      fileList.forEach((item) => {
+        if (item.response?.data && !item.response?.code) {
+          item.response = item.response.data;
+        }
+      });
+      this.jumpUrlFileList = fileList;
+      const uploaded = fileList[0]?.response;
+      this.form.jump_url = uploaded?.url || "";
+    },
+    uploadJumpUrlRemove() {
+      this.jumpUrlFileList = [];
+      this.form.jump_url = "";
+    },
     uploadRemove(file, fileList, fieldName) {
       this.form[fieldName] = fileList;
     },
@@ -225,6 +255,7 @@ export default {
     },
 
     reset() {
+      this.jumpUrlFileList = [];
       this.form = {
         name: "",
 

src/views/Banners/components/ShowBanners.vue

@@ -28,7 +28,14 @@
                     </el-descriptions-item>
 
                     <el-descriptions-item label="跳转链接">
-                        {{ form['jump_url'] }}
+                        <el-image
+                          v-if="form['jump_url']"
+                          :src="form['jump_url']"
+                          fit="cover"
+                          style="width: 120px; height: 120px"
+                          :preview-src-list="[form['jump_url']]"
+                        />
+                        <span v-else>-</span>
                     </el-descriptions-item>
 
                     <el-descriptions-item label="排序">