diff --git a/src/views/Banners/Banners.vue b/src/views/Banners/Banners.vue index 7d6df45..58d994d 100644 --- a/src/views/Banners/Banners.vue +++ b/src/views/Banners/Banners.vue @@ -133,34 +133,38 @@ @@ -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) { - return { - response: response.data, - name: response.data.original_name, - url: response.data.url, - }; - } else { - this.$message.error("上传失败"); + const data = this.parseUploadResponse(response.data); + if (response.status === 200 && data?.url) { + return data; } + this.$message.error("上传失败"); + return Promise.reject(new Error("upload failed")); }) - .catch((_) => { + .catch((err) => { window.$_uploading = false; + return Promise.reject(err); }); }, - uploadJumpUrlMethod(file, row) { - return this.uploadMethod(file).then((res) => { - if (res?.url) { - row.jump_url = res.url; - } - return res; - }); + getJumpUrlFromRow(row) { + return ( + row.jump_url || + row._jumpUrlFile?.[0]?.url || + row._jumpUrlFile?.[0]?.response?.url || + "" + ); + }, + 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 = [{ - name: "跳转图片", - url: row.jump_url, - status: "success", - }]; + 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 = ""; - } + form.jump_url = this.getJumpUrlFromRow(row); 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; + } +} diff --git a/src/views/Banners/components/AddBanners.vue b/src/views/Banners/components/AddBanners.vue index 837ff45..a3de9d4 100644 --- a/src/views/Banners/components/AddBanners.vue +++ b/src/views/Banners/components/AddBanners.vue @@ -76,19 +76,15 @@
@@ -218,21 +214,54 @@ 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 || ""; + 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; + const data = this.parseUploadResponse(response.data); + if (response.status === 200 && data?.url) { + 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); + }); }, 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; + } +} diff --git a/src/views/Banners/components/ShowBanners.vue b/src/views/Banners/components/ShowBanners.vue index 8bec472..8a1cb8e 100644 --- a/src/views/Banners/components/ShowBanners.vue +++ b/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']]" /> -