diff --git a/src/rootPages/Designer/properties/dataFields/ABFieldImage.js b/src/rootPages/Designer/properties/dataFields/ABFieldImage.js index 6eae84b..352e1fd 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, // Modified to support multiple file uploads, test ok name: "defaultImageUrl", height: 105, - width: 150, + width: 350, // Increase width to accommodate multiple images 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 + // Handle multiple UUID values (separated by commas) + 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"; + + // Clear existing images + imagesContainer.innerHTML = ''; + + // add all images + 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(); + + // Remove a UUID from an array + const index = uuids.indexOf(uuid); + if (index !== -1) { + uuids.splice(index, 1); + $$(ids.defaultImageUrl).setValue(uuids.join(',')); + } + + // Remove from DOM + imageDiv.remove(); + + // If there are no pictures, show the upload prompt + if (uuids.length === 0) { + parentContainer.querySelector( + ".image-data-field-icon" + ).style.display = ""; + imagesContainer.style.display = "none"; + } + }); + + imageDiv.appendChild(deleteBtn); + imagesContainer.appendChild(imageDiv); + }); }); + // Add click event handling 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) { + // Event handled on image element + 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"; + + // Used to store the UUID of the currently uploaded image + 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