Skip to content

Commit 2cff132

Browse files
xlornexlorne
committed
fix form
1 parent 734b303 commit 2cff132

File tree

9 files changed

+136
-43
lines changed

9 files changed

+136
-43
lines changed

‎admin-pro-ui/src/api/account.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1-
import {post} from "@/api/index";
1+
import {get, post} from "@/api/index";
22

33
export async function login(body: Account.LoginRequest) {
44
return post('/user/login', body);
55
}
66

7+
export async function captcha() {
8+
return get('/open/captcha');
9+
}
10+
11+
712
export function clearUser() {
813
localStorage.removeItem('username');
914
localStorage.removeItem('token');
@@ -24,4 +29,4 @@ export function initUser(user: {
2429
localStorage.setItem('authorities', JSON.stringify(authorities));
2530
}
2631
localStorage.setItem('avatar', avatar || "/logo.png");
27-
}
32+
}

‎admin-pro-ui/src/api/oss.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {get, post} from "@/api/index";
2+
3+
4+
export async function loadFiles(ids: string) {
5+
return get('/api/oss/load', {ids: ids});
6+
}
7+
8+
9+
export async function upload(body: any) {
10+
return post('/api/oss/upload', body);
11+
}

‎admin-pro-ui/src/components/form/captcha.tsx

Lines changed: 39 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,51 +5,64 @@ import formFieldInit from "@/components/form/common";
55
import "./form.scss";
66

77

8-
const FormCaptcha: React.FC<FormItemProps> = (props) => {
8+
const Captcha:React.FC<FormItemProps> = (props)=>{
9+
910
const [captchaImg, setCaptchaImg] = useState<string>('');
1011
const {formAction} = formFieldInit(props);
1112

1213
const reloadCaptcha = () => {
1314
props.onCaptchaRefresh && props.onCaptchaRefresh().then((res) => {
14-
setCaptchaImg(res.url);
15-
props.onCaptchaChange && props.onCaptchaChange(res.code);
15+
if(res) {
16+
setCaptchaImg(res.url);
17+
props.onCaptchaChange && props.onCaptchaChange(res.code);
18+
}
1619
});
1720
}
1821

1922
useEffect(() => {
2023
reloadCaptcha();
2124
}, [])
2225

26+
return (
27+
<div className={"form-captcha"}>
28+
<Input
29+
className={"form-captcha-input"}
30+
disabled={props.disabled}
31+
value={props.value}
32+
placeholder={props.placeholder}
33+
onChange={(value) => {
34+
const currentValue = value.target.value;
35+
formAction?.setFieldValue(props.name, currentValue);
36+
props.onChange && props.onChange(currentValue,formAction);
37+
}}
38+
/>
39+
40+
<img
41+
className={"form-captcha-img"}
42+
onClick={() => {
43+
reloadCaptcha();
44+
}}
45+
src={captchaImg}
46+
alt="点击重置"
47+
/>
48+
</div>
49+
)
50+
}
51+
52+
53+
const FormCaptcha: React.FC<FormItemProps> = (props) => {
54+
2355
return (
2456
<Form.Item
2557
name={props.name}
2658
label={props.label}
59+
required={props.required}
2760
hidden={props.hidden}
2861
help={props.help}
29-
required={props.required}
3062
>
31-
<div className={"form-captcha"}>
32-
<Input
33-
className={"form-captcha-input"}
34-
disabled={props.disabled}
35-
value={props.value}
36-
placeholder={props.placeholder}
37-
onChange={(value) => {
38-
const currentValue = value.target.value;
39-
formAction?.setFieldValue(props.name, currentValue);
40-
props.onChange && props.onChange(currentValue,formAction);
41-
}}
42-
/>
43-
44-
<img
45-
className={"form-captcha-img"}
46-
onClick={() => {
47-
reloadCaptcha();
48-
}}
49-
src={captchaImg}
50-
alt="点击重置"
51-
/>
52-
</div>
63+
<Captcha
64+
{...props}
65+
/>
5366
</Form.Item>
5467
)
5568
}

‎admin-pro-ui/src/components/form/cascader.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const FormCascader: React.FC<FormItemProps> = (props) => {
6767
value={props.value}
6868
options={options || []}
6969
onChange={(value) => {
70-
formAction?.setFieldValue(props.name as string, formToValue(value as string[]));
70+
formAction?.setFieldValue(props.name, formToValue(value as string[]));
7171
props.onChange && props.onChange(value, formAction);
7272
setVisible(false);
7373
}}

‎admin-pro-ui/src/components/form/types.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export interface FormItemProps {
140140
code: string;
141141
// 验证码图片地址
142142
url: string;
143-
}>;
143+
}|null>;
144144

145145
// 文件上传事件
146146
onUploaderUpload?: (filename: string, base64: string) => Promise<{
@@ -150,7 +150,7 @@ export interface FormItemProps {
150150
name: string
151151
// 文件地址
152152
url: string;
153-
}>
153+
}|null>
154154
// 文件加载事件
155155
onUploaderLoad?: (ids: string) => Promise<{
156156
// 文件id

‎admin-pro-ui/src/components/form/uploder.tsx

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ const formToValue = (value: UploadFile[]) => {
2525
}
2626
}).join(',');
2727
}
28+
if(value && value.length==0){
29+
return '';
30+
}
2831
return value;
2932
}
3033

@@ -87,13 +90,16 @@ const Uploader: React.FC<UploaderProps> = (props) => {
8790
const base64 = await fileToBase64(currentFile);
8891
const filename = currentFile.name;
8992
if (props.onUploaderUpload) {
90-
const {id, name, url} = await props.onUploaderUpload(filename, base64);
91-
// @ts-ignore
92-
onSuccess({
93-
url: url,
94-
id: id,
95-
name: name
96-
});
93+
const res = await props.onUploaderUpload(filename, base64);
94+
if(res) {
95+
const {url, id, name} = res;
96+
// @ts-ignore
97+
onSuccess({
98+
url: url,
99+
id: id,
100+
name: name
101+
});
102+
}
97103
} else {
98104
const url = URL.createObjectURL(currentFile);
99105
// @ts-ignore
@@ -105,10 +111,13 @@ const Uploader: React.FC<UploaderProps> = (props) => {
105111
}
106112
}}
107113
onChange={(info) => {
108-
const currentValue = formToValue(info.fileList);
109-
formAction?.setFieldValue(props.name, currentValue);
110-
props.onChange && props.onChange(currentValue, formAction);
111-
setFileList(info.fileList);
114+
const fileList = info.fileList;
115+
if(fileList.length>0 && fileList.every(item=>item.status==='done')) {
116+
const currentValue = formToValue(fileList);
117+
formAction?.setFieldValue(props.name, currentValue);
118+
props.onChange && props.onChange(currentValue, formAction);
119+
}
120+
setFileList(fileList);
112121
}}
113122
onPreview={isImage ? handlePreview : undefined}
114123
>

‎admin-pro-ui/src/pages/welcome/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const FooterButtons: React.FC<{ formAction: React.RefObject<FormAction> }> = ({f
3636
date: '2021-08-01',
3737
cascader: '1,1-1,1-1-1',
3838
select: '1,2',
39-
avatar: '1,2'
39+
avatar: 'c84fb304c180f61bb7db40efef7f85b7'
4040
}
4141
}
4242

‎admin-pro-ui/src/utils/captcha.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {captcha} from "@/api/account";
2+
3+
class CaptchaUtils {
4+
5+
static refresh = async () => {
6+
const res = await captcha();
7+
if (res.success) {
8+
return {
9+
url: res.data.captcha,
10+
code: res.data.key
11+
}
12+
}
13+
return null;
14+
}
15+
}
16+
17+
export default CaptchaUtils;

‎admin-pro-ui/src/utils/oss.ts

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import {loadFiles, upload} from "@/api/oss";
2+
3+
class OSSUtils{
4+
5+
static uploadFile = async (filename:string,base64:string)=>{
6+
const response = await upload({
7+
name: filename,
8+
data: base64
9+
})
10+
if (response.success) {
11+
const data = response.data;
12+
const url = `/open/oss/${data.key}`;
13+
return {
14+
url: url,
15+
id: data.id,
16+
name: data.name
17+
}
18+
}
19+
return null;
20+
}
21+
22+
static loadFile = async (ids: string) => {
23+
const res = await loadFiles(ids);
24+
if (res.success) {
25+
const list = res.data.list;
26+
return list.map((item: any) => {
27+
const url = `/open/oss/${item.key}`;
28+
return {
29+
url: url,
30+
id: item.id,
31+
name: item.name
32+
}
33+
})
34+
}
35+
}
36+
}
37+
38+
export default OSSUtils;

0 commit comments

Comments
 (0)