lu-lowcode-package-form 0.8.9 → 0.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +101 -99
- package/dist/index.es.js +16807 -15088
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/App.jsx +6 -2
- package/src/components/field/upload/upload-file.jsx +2 -1
- package/src/components/field/upload/upload-image.jsx +58 -35
- package/tailwind.config.js +5 -1
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.frelative{position:relative}.fmb-5{margin-bottom:1.25rem}.fflex{display:flex}.fh-11{height:2.75rem}.fh-8{height:2rem}.fh-full{height:100%}.fmin-h-5{min-height:1.25rem}.fw-\[960px\]{width:960px}.fw-full{width:100%}.fmin-w-36{min-width:9rem}.fcursor-pointer{cursor:pointer}.fflex-col{flex-direction:column}.fitems-center{align-items:center}.fitems-stretch{align-items:stretch}.fjustify-center{justify-content:center}.fjustify-between{justify-content:space-between}.fgap-1{gap:.25rem}.frounded{border-radius:.25rem}.fborder{border-width:1px}.fborder-l-4{border-left-width:4px}.fborder-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.fborder-slate-300{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity))}.fbg-slate-100{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.fbg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.fp-4{padding:1rem}.fp-6{padding:1.5rem}.fpb-10{padding-bottom:2.5rem}.fpl-2{padding-left:.5rem}.ftext-lg{font-size:1.125rem;line-height:1.75rem}.ftext-sm{font-size:.875rem;line-height:1.25rem}.ftext-xs{font-size:.75rem;line-height:1rem}.ffont-medium{font-weight:500}.ftext-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.hover\:fborder-\[\#3e92f8\]:hover{--tw-border-opacity: 1;border-color:rgb(62 146 248 / var(--tw-border-opacity))}.hover\:ftext-\[\#3e92f8\]:hover{--tw-text-opacity: 1;color:rgb(62 146 248 / var(--tw-text-opacity))}
|
|
1
|
+
*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.fabsolute{position:absolute}.frelative{position:relative}.fz-10{z-index:10}.fmb-5{margin-bottom:1.25rem}.fmt-2{margin-top:.5rem}.fflex{display:flex}.fhidden{display:none}.fh-11{height:2.75rem}.fh-24{height:6rem}.fh-8{height:2rem}.fh-full{height:100%}.fmax-h-full{max-height:100%}.fmin-h-5{min-height:1.25rem}.fw-24{width:6rem}.fw-\[960px\]{width:960px}.fw-full{width:100%}.fmin-w-36{min-width:9rem}.fmax-w-full{max-width:100%}.fcursor-pointer{cursor:pointer}.fflex-col{flex-direction:column}.fflex-wrap{flex-wrap:wrap}.fitems-center{align-items:center}.fitems-stretch{align-items:stretch}.fjustify-center{justify-content:center}.fjustify-between{justify-content:space-between}.fgap-1{gap:.25rem}.fgap-2{gap:.5rem}.fgap-3{gap:.75rem}.foverflow-hidden{overflow:hidden}.frounded{border-radius:.25rem}.fborder{border-width:1px}.fborder-l-4{border-left-width:4px}.fborder-dashed{border-style:dashed}.fborder-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.fborder-slate-300{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity))}.fbg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.fbg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.fbg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.fbg-slate-100{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.fbg-transparent{background-color:transparent}.fbg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.fbg-opacity-50{--tw-bg-opacity: .5}.fobject-contain{object-fit:contain}.fp-4{padding:1rem}.fp-6{padding:1.5rem}.fpb-10{padding-bottom:2.5rem}.fpl-2{padding-left:.5rem}.ftext-lg{font-size:1.125rem;line-height:1.75rem}.ftext-sm{font-size:.875rem;line-height:1.25rem}.ftext-xs{font-size:.75rem;line-height:1rem}.ffont-medium{font-weight:500}.ftext-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.ftext-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hover\:fborder-\[\#3e92f8\]:hover{--tw-border-opacity: 1;border-color:rgb(62 146 248 / var(--tw-border-opacity))}.hover\:fborder-blue-400:hover{--tw-border-opacity: 1;border-color:rgb(96 165 250 / var(--tw-border-opacity))}.hover\:ftext-\[\#3e92f8\]:hover{--tw-text-opacity: 1;color:rgb(62 146 248 / var(--tw-text-opacity))}.hover\:ftext-gray-200:hover{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity))}.fgroup:hover .group-hover\:fflex{display:flex}.fgroup:hover .group-hover\:fbg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}
|
package/package.json
CHANGED
package/src/App.jsx
CHANGED
|
@@ -32,7 +32,7 @@ function App() {
|
|
|
32
32
|
formRef?.current?.formRef?.setFieldsValue({
|
|
33
33
|
CheckboxGroup:"[\"1\",\"2\"]",
|
|
34
34
|
UploadFile:"[{\"uid\":\"rc-upload-1718779211228-3\",\"url\":\"/files/20240619/ZmUznJfquBeSmOUC_pdf/17204092_43b027e81a384b0590f0f453288544dd-040624-1533-978.pdf\",\"name\":\"17204092_43b027e81a384b0590f0f453288544dd-040624-1533-978.pdf\",\"status\":\"done\"}]",
|
|
35
|
-
UploadImage:"[{\"uid\":\"rc-upload-1718779211228-5\",\"url\":\"/
|
|
35
|
+
UploadImage:"[{\"uid\":\"rc-upload-1718779211228-5\",\"url\":\"https://imgs.699pic.com/images/501/361/351.jpg!list1x.v2\",\"name\":\"nouser.png\",\"status\":\"done\"},{\"uid\":\"rc-upload-1718779211228-7\",\"url\":\"https://avatars.githubusercontent.com/u/4323180?s=80&u=f6ec6f10c061cf179610c5afd8b120ca2c29ea7f&v=4\",\"name\":\"1717032062027(1).jpg\",\"status\":\"done\"},{\"uid\":\"rc-upload-1718779211228-9\",\"url\":\"/files/20240619/TlomGohpkBxXyRqN_png/logo-adg.png\",\"name\":\"logo-adg.png\",\"status\":\"done\"}]",
|
|
36
36
|
select1:"1",
|
|
37
37
|
select2:"[\"1\",\"2\"]",
|
|
38
38
|
switch:"1",
|
|
@@ -88,7 +88,11 @@ function App() {
|
|
|
88
88
|
<Field.UploadImage _componentName="Field.UploadImage" label="上传图片" __id="UploadImage" ></Field.UploadImage>
|
|
89
89
|
|
|
90
90
|
</FormContainerWrapper>
|
|
91
|
-
|
|
91
|
+
<div class="fgroup">11111
|
|
92
|
+
<div class="fbg-red-500 group-hover:fbg-blue-500">
|
|
93
|
+
Hover over me or my parent!
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
92
96
|
<Button type="primary" onClick={getFormFields}>GetValues</Button>
|
|
93
97
|
<Button type="primary" onClick={setFormFields}>SetValues</Button>
|
|
94
98
|
<Button type="primary" onClick={handleCols}>UpdateCol</Button>
|
|
@@ -36,7 +36,8 @@ const UploadFile = ({ value, maxCount, onChange, ...props }) => {
|
|
|
36
36
|
uid: file.uid,
|
|
37
37
|
name: file.name,
|
|
38
38
|
status: file.status,
|
|
39
|
-
url: file.url || file.response || ""
|
|
39
|
+
url: file.url || file.response || "",
|
|
40
|
+
error: file.error,
|
|
40
41
|
}
|
|
41
42
|
}))
|
|
42
43
|
setFileList(newFileList);
|
|
@@ -1,45 +1,55 @@
|
|
|
1
|
-
import { Upload as OriginalUpload, Button } from "antd";
|
|
1
|
+
import { Upload as OriginalUpload, Button, Image } from "antd";
|
|
2
2
|
|
|
3
3
|
import { BaseWrapper } from "../base.jsx"
|
|
4
|
-
import {
|
|
5
|
-
import React,{ useEffect, useState} from "react";
|
|
4
|
+
import { DeleteOutlined, EyeOutlined, PlusOutlined } from "@ant-design/icons";
|
|
5
|
+
import React, { useEffect, useState } from "react";
|
|
6
6
|
|
|
7
7
|
const UploadImage = ({ maxCount, value, onChange, ...props }) => {
|
|
8
8
|
useEffect(() => {
|
|
9
|
-
if (value){
|
|
10
|
-
console.log("value"
|
|
11
|
-
if (
|
|
9
|
+
if (value) {
|
|
10
|
+
console.log("value", value)
|
|
11
|
+
if (typeof value == 'string') {
|
|
12
12
|
try {
|
|
13
13
|
value = JSON.parse(value)
|
|
14
14
|
onChange(value)
|
|
15
15
|
} catch (error) {
|
|
16
|
-
|
|
16
|
+
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
|
-
|
|
20
|
-
if(Array.isArray(value))
|
|
19
|
+
|
|
20
|
+
if (Array.isArray(value))
|
|
21
21
|
setFileList(value)
|
|
22
22
|
}
|
|
23
23
|
}, [value]);
|
|
24
24
|
maxCount = maxCount || 9;
|
|
25
25
|
const [fileList, setFileList] = React.useState([]);
|
|
26
26
|
const [previewImage, setPreviewImage] = useState('');
|
|
27
|
+
const [previewImageIndex, setPreviewImageIndex] = useState(0);
|
|
27
28
|
const [previewOpen, setPreviewOpen] = useState(false);
|
|
28
|
-
const handlePreview = async (file) => {
|
|
29
|
+
const handlePreview = async (file, index) => {
|
|
29
30
|
if (!file.url && !file.preview) {
|
|
30
31
|
file.preview = await getBase64(file.originFileObj);
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
setPreviewImage(file.url || (file.preview));
|
|
35
|
+
setPreviewImageIndex(index)
|
|
34
36
|
setPreviewOpen(true);
|
|
35
37
|
};
|
|
36
|
-
|
|
37
|
-
|
|
38
|
+
|
|
39
|
+
const handleDelete = async (file, index) => {
|
|
40
|
+
|
|
41
|
+
setFileList(fileList.filter((item, i) => i !== index))
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
const uploadButton = (<>
|
|
45
|
+
<div className="fw-24 fh-24 fflex fflex-col fitems-center fjustify-center fbg-gray-100 fborder fborder-dashed fcursor-pointer hover:fborder-blue-400 frounded">
|
|
38
46
|
<PlusOutlined />
|
|
39
|
-
<div
|
|
40
|
-
</
|
|
47
|
+
<div className="fmt-2">点击上传</div>
|
|
48
|
+
</div>
|
|
49
|
+
</>
|
|
50
|
+
|
|
41
51
|
);
|
|
42
|
-
const handleChange= ({ fileList: newFileList }) =>
|
|
52
|
+
const handleChange = ({ fileList: newFileList }) => {
|
|
43
53
|
newFileList = newFileList.map((file) => {
|
|
44
54
|
if (file.status == "done" && file.response) {
|
|
45
55
|
file.url = file.response;
|
|
@@ -51,33 +61,46 @@ const UploadImage = ({ maxCount, value, onChange, ...props }) => {
|
|
|
51
61
|
uid: file.uid,
|
|
52
62
|
name: file.name,
|
|
53
63
|
status: file.status,
|
|
54
|
-
url: file.url || file.response || ""
|
|
64
|
+
url: file.url || file.response || "",
|
|
65
|
+
error: file.error,
|
|
55
66
|
}
|
|
56
67
|
}))
|
|
57
68
|
setFileList(newFileList);
|
|
58
69
|
}
|
|
59
70
|
return (
|
|
60
71
|
<BaseWrapper {...props}>
|
|
61
|
-
<
|
|
62
|
-
{
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
72
|
+
<div className="fflex fgap-3 fflex-wrap">
|
|
73
|
+
{fileList.map((file, index) => <>
|
|
74
|
+
<div key={`file-${file.uid}`} class="fgroup fw-24 fh-24 fbg-transparent fborder frounded fflex fitems-center fjustify-center foverflow-hidden fcursor-pointer frelative hover:ddddd ">
|
|
75
|
+
<div className=" fhidden fabsolute fw-full fh-full fbg-gray-900 fbg-opacity-50 fitems-center fjustify-center fz-10 group-hover:fflex ftext-white ftext-lg fgap-2">
|
|
76
|
+
<EyeOutlined onClick={() => { handlePreview(file, index) }} className="hover:ftext-gray-200" />
|
|
77
|
+
<DeleteOutlined onClick={()=>{ handleDelete(file, index)}} className="hover:ftext-gray-200"/>
|
|
78
|
+
</div>
|
|
79
|
+
<img src={file.url} alt="Example Image" class="fmax-w-full fmax-h-full fobject-contain " />
|
|
80
|
+
</div>
|
|
81
|
+
</>)}
|
|
82
|
+
<OriginalUpload
|
|
83
|
+
{...props}
|
|
84
|
+
maxCount={maxCount}
|
|
85
|
+
onPreview={handlePreview}
|
|
86
|
+
onChange={handleChange}
|
|
87
|
+
>
|
|
88
|
+
{fileList.length >= maxCount ? null : uploadButton}
|
|
89
|
+
</OriginalUpload>
|
|
90
|
+
</div>
|
|
91
|
+
|
|
71
92
|
{previewImage && (
|
|
72
|
-
<Image
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
93
|
+
<Image.PreviewGroup preview={{
|
|
94
|
+
visible: previewOpen,
|
|
95
|
+
current: previewImageIndex,
|
|
96
|
+
onVisibleChange: (visible) => setPreviewOpen(visible),
|
|
97
|
+
onChange:(index)=>{setPreviewImageIndex(index)}
|
|
98
|
+
}}>
|
|
99
|
+
{fileList.map((file, index) => <><Image
|
|
100
|
+
wrapperStyle={{ display: 'none' }}
|
|
101
|
+
src={file.url}
|
|
102
|
+
/></>)}
|
|
103
|
+
</Image.PreviewGroup>
|
|
81
104
|
)}
|
|
82
105
|
</BaseWrapper>
|
|
83
106
|
);
|
package/tailwind.config.js
CHANGED