From fcdfd6a9ee2d2a58a30896ba10be87824ea78222 Mon Sep 17 00:00:00 2001 From: joshua_cm Date: Mon, 4 Aug 2025 19:34:38 +0700 Subject: [PATCH 1/3] Update ABFieldImage.js --- .../properties/dataFields/ABFieldImage.js | 231 +++++++++++++----- 1 file changed, 174 insertions(+), 57 deletions(-) diff --git a/src/rootPages/Designer/properties/dataFields/ABFieldImage.js b/src/rootPages/Designer/properties/dataFields/ABFieldImage.js index 6eae84b2..bfe4c05f 100644 --- a/src/rootPages/Designer/properties/dataFields/ABFieldImage.js +++ b/src/rootPages/Designer/properties/dataFields/ABFieldImage.js @@ -1,4 +1,4 @@ -/* +/* * ABFieldImage * A Property manager for our ABFieldImage. */ @@ -140,17 +140,17 @@ export default function (AB) { "Drag and drop or click here" )} - `, apiOnly: true, inputName: "file", - multiple: false, + multiple: true, // 修改为支持多文件上传 name: "defaultImageUrl", height: 105, - width: 150, + width: 350, // 增加宽度以容纳多张图片 on: { // when a file is added to the uploader onBeforeFileAdd: function (item) { @@ -227,44 +227,96 @@ export default function (AB) { } if (value && isUseDefaultImage) { - //Show default image + // 处理多个UUID值（用逗号分隔） + const uuids = value.split(',').filter(uuid => uuid.trim()); + uploader.attachEvent("onAfterRender", () => { const parentContainer = uploader.$view.querySelector( ".default-image-holder" ); parentContainer.querySelector( ".image-data-field-icon" - ).style.display = "none"; - - const image = parentContainer.querySelector( - ".image-data-field-image" + ).style.display = uuids.length ? "none" : ""; + + const imagesContainer = parentContainer.querySelector( + ".image-data-field-images" ); - image.style.display = ""; - image.style.backgroundImage = `url('${this.urlImage(value)}')`; - image.setAttribute("image-uuid", value); - - parentContainer.querySelector(".delete-image").style.display = - "table-cell"; + imagesContainer.style.display = uuids.length ? "flex" : "none"; + + // 清空现有图片 + imagesContainer.innerHTML = ''; + + // 添加所有图片 + uuids.forEach(uuid => { + if (!uuid) return; + + const imageDiv = document.createElement('div'); + imageDiv.className = 'image-data-field-image'; + imageDiv.style.cssText = ` + position: relative; + width: 80px; + height: 80px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + background-image: url('${this.urlImage(uuid)}'); + margin: 2px; + `; + + const deleteBtn = document.createElement('a'); + deleteBtn.className = 'ab-delete-photo'; + deleteBtn.href = 'javascript:void(0);'; + deleteBtn.style.cssText = ` + position: absolute; + top: 0; + right: 0; + background: rgba(0,0,0,0.5); + color: white; + border-radius: 50%; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + `; + + const icon = document.createElement('i'); + icon.className = 'fa fa-times delete-image'; + deleteBtn.appendChild(icon); + + deleteBtn.addEventListener('click', (e) => { + e.stopPropagation(); + + // 从数组中移除UUID + const index = uuids.indexOf(uuid); + if (index !== -1) { + uuids.splice(index, 1); + $$(ids.defaultImageUrl).setValue(uuids.join(',')); + } + + // 从DOM中移除 + imageDiv.remove(); + + // 如果没有图片了，显示上传提示 + if (uuids.length === 0) { + parentContainer.querySelector( + ".image-data-field-icon" + ).style.display = ""; + imagesContainer.style.display = "none"; + } + }); + + imageDiv.appendChild(deleteBtn); + imagesContainer.appendChild(imageDiv); + }); }); + // 添加点击事件处理 uploader.$view.addEventListener("click", (e) => { - if (e.target.className.indexOf("delete-image") > -1) { - const parentContainer = uploader.$view.querySelector( - ".default-image-holder" - ); - parentContainer.querySelector( - ".image-data-field-icon" - ).style.display = ""; - - const image = parentContainer.querySelector( - ".image-data-field-image" - ); - image.style.display = "none"; - image.style.backgroundImage = ""; - image.setAttribute("image-uuid", ""); - - parentContainer.querySelector(".delete-image").style.display = - "none"; + if (e.target.className.indexOf("delete-image") > -1 || + e.target.parentElement.className.indexOf("ab-delete-photo") > -1) { + // 事件已在图片元素上处理 + return; } }); } @@ -276,29 +328,88 @@ export default function (AB) { const uploader = $$(ids.defaultImageUrl); uploader.config.upload = url; + + // 用于存储当前上传的图片UUID + const currentImages = []; + uploader.attachEvent("onFileUpload", (file, response) => { - $$(ids.defaultImageUrl).setValue(response.data.uuid); - + const uuid = response.data.uuid; + currentImages.push(uuid); + $$(ids.defaultImageUrl).setValue(currentImages.join(',')); + const parentContainer = uploader.$view.querySelector( ".default-image-holder" ); parentContainer.querySelector( ".image-data-field-icon" ).style.display = "none"; - - const image = parentContainer.querySelector( - ".image-data-field-image" + + const imagesContainer = parentContainer.querySelector( + ".image-data-field-images" ); - image.style.display = ""; - image.style.backgroundImage = `url('${this.urlImage( - response.data.uuid - )}')`; - - image.setAttribute("image-uuid", response.data.uuid); - - parentContainer.querySelector(".delete-image").style.display = - "table-cell"; + imagesContainer.style.display = "flex"; + + // 创建新图片元素 + const imageDiv = document.createElement('div'); + imageDiv.className = 'image-data-field-image'; + imageDiv.style.cssText = ` + position: relative; + width: 80px; + height: 80px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + background-image: url('${this.urlImage(uuid)}'); + margin: 2px; + `; + + const deleteBtn = document.createElement('a'); + deleteBtn.className = 'ab-delete-photo'; + deleteBtn.href = 'javascript:void(0);'; + deleteBtn.style.cssText = ` + position: absolute; + top: 0; + right: 0; + background: rgba(0,0,0,0.5); + color: white; + border-radius: 50%; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + `; + + const icon = document.createElement('i'); + icon.className = 'fa fa-times delete-image'; + deleteBtn.appendChild(icon); + + deleteBtn.addEventListener('click', (e) => { + e.stopPropagation(); + + // 从数组中移除UUID + const index = currentImages.indexOf(uuid); + if (index !== -1) { + currentImages.splice(index, 1); + $$(ids.defaultImageUrl).setValue(currentImages.join(',')); + } + + // 从DOM中移除 + imageDiv.remove(); + + // 如果没有图片了，显示上传提示 + if (currentImages.length === 0) { + parentContainer.querySelector( + ".image-data-field-icon" + ).style.display = ""; + imagesContainer.style.display = "none"; + } + }); + + imageDiv.appendChild(deleteBtn); + imagesContainer.appendChild(imageDiv); }); + uploader.attachEvent("onAfterRender", () => { const parentContainer = uploader.$view.querySelector( ".default-image-holder" @@ -306,17 +417,23 @@ export default function (AB) { parentContainer.querySelector( ".image-data-field-icon" ).style.display = ""; - - const image = parentContainer.querySelector( - ".image-data-field-image" + + const imagesContainer = parentContainer.querySelector( + ".image-data-field-images" ); - image.style.display = "none"; - image.style.backgroundImage = ""; - image.setAttribute("image-uuid", ""); - - parentContainer.querySelector(".delete-image").style.display = - "none"; + imagesContainer.style.display = "none"; + imagesContainer.innerHTML = ''; + + // 初始化当前图片数组 + const initialValue = $$(ids.defaultImageUrl).getValue(); + if (initialValue) { + currentImages.length = 0; + initialValue.split(',').forEach(uuid => { + if (uuid.trim()) currentImages.push(uuid.trim()); + }); + } }); + uploader.addDropZone(uploader.$view); uploader.render(); @@ -339,4 +456,4 @@ export default function (AB) { } return ABFieldImage; -} +} \ No newline at end of file From 0526b2ecaf065c73835b4363e522ae647d24585c Mon Sep 17 00:00:00 2001 From: joshua_cm Date: Thu, 7 Aug 2025 16:17:59 +0700 Subject: [PATCH 2/3] YOUR COMMIT MESSAGE --- .../properties/dataFields/ABFieldImage.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/rootPages/Designer/properties/dataFields/ABFieldImage.js b/src/rootPages/Designer/properties/dataFields/ABFieldImage.js index bfe4c05f..0e82579e 100644 --- a/src/rootPages/Designer/properties/dataFields/ABFieldImage.js +++ b/src/rootPages/Designer/properties/dataFields/ABFieldImage.js @@ -147,10 +147,10 @@ export default function (AB) { `, apiOnly: true, inputName: "file", - multiple: true, // 修改为支持多文件上传 + multiple: true, // Modified to support multiple file uploads name: "defaultImageUrl", height: 105, - width: 350, // 增加宽度以容纳多张图片 + width: 350, // Increase width to accommodate multiple images on: { // when a file is added to the uploader onBeforeFileAdd: function (item) { @@ -227,7 +227,7 @@ export default function (AB) { } if (value && isUseDefaultImage) { - // 处理多个UUID值（用逗号分隔） + // Handle multiple UUID values (separated by commas) const uuids = value.split(',').filter(uuid => uuid.trim()); uploader.attachEvent("onAfterRender", () => { @@ -243,10 +243,10 @@ export default function (AB) { ); imagesContainer.style.display = uuids.length ? "flex" : "none"; - // 清空现有图片 + // Clear existing images imagesContainer.innerHTML = ''; - // 添加所有图片 + // add all images uuids.forEach(uuid => { if (!uuid) return; @@ -287,17 +287,17 @@ export default function (AB) { deleteBtn.addEventListener('click', (e) => { e.stopPropagation(); - // 从数组中移除UUID + // Remove a UUID from an array const index = uuids.indexOf(uuid); if (index !== -1) { uuids.splice(index, 1); $$(ids.defaultImageUrl).setValue(uuids.join(',')); } - // 从DOM中移除 + // Remove from DOM imageDiv.remove(); - // 如果没有图片了，显示上传提示 + // If there are no pictures, show the upload prompt if (uuids.length === 0) { parentContainer.querySelector( ".image-data-field-icon" @@ -311,11 +311,11 @@ export default function (AB) { }); }); - // 添加点击事件处理 + // Add click event handling uploader.$view.addEventListener("click", (e) => { if (e.target.className.indexOf("delete-image") > -1 || e.target.parentElement.className.indexOf("ab-delete-photo") > -1) { - // 事件已在图片元素上处理 + // Event handled on image element return; } }); @@ -349,7 +349,7 @@ export default function (AB) { ); imagesContainer.style.display = "flex"; - // 创建新图片元素 + // Used to store the UUID of the currently uploaded image const imageDiv = document.createElement('div'); imageDiv.className = 'image-data-field-image'; imageDiv.style.cssText = ` From eac0460791af918006196d59467885f088ceef6f Mon Sep 17 00:00:00 2001 From: joshua_cm Date: Wed, 20 Aug 2025 16:20:21 +0700 Subject: [PATCH 3/3] fix: update ABFieldImage.js,upload multiple pictures at one time,Interface-Pages-Add Widget-images --- src/rootPages/Designer/properties/dataFields/ABFieldImage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/rootPages/Designer/properties/dataFields/ABFieldImage.js b/src/rootPages/Designer/properties/dataFields/ABFieldImage.js index 0e82579e..352e1fdc 100644 --- a/src/rootPages/Designer/properties/dataFields/ABFieldImage.js +++ b/src/rootPages/Designer/properties/dataFields/ABFieldImage.js @@ -147,7 +147,7 @@ export default function (AB) { `, apiOnly: true, inputName: "file", - multiple: true, // Modified to support multiple file uploads + multiple: true, // Modified to support multiple file uploads, test ok name: "defaultImageUrl", height: 105, width: 350, // Increase width to accommodate multiple images