|
@@ -1,39 +1,39 @@
|
|
|
-import { getUserInfoByIdAPI, userSaveAPI } from "@/store/action/Z1user";
|
|
|
-import { SaveUserType } from "@/types";
|
|
|
-import { MessageFu } from "@/utils/message";
|
|
|
-import { Button, Form, FormInstance, Input, Modal } from "antd";
|
|
|
-import React, { useCallback, useEffect, useRef } from "react";
|
|
|
-import styles from "./index.module.scss";
|
|
|
-import MyPopconfirm from "@/components/MyPopconfirm";
|
|
|
+import { getUserInfoByIdAPI, userSaveAPI } from '@/store/action/Z1user'
|
|
|
+import { SaveUserType } from '@/types'
|
|
|
+import { MessageFu } from '@/utils/message'
|
|
|
+import { Button, Form, FormInstance, Input, Modal } from 'antd'
|
|
|
+import React, { useCallback, useEffect, useRef } from 'react'
|
|
|
+import styles from './index.module.scss'
|
|
|
+import MyPopconfirm from '@/components/MyPopconfirm'
|
|
|
|
|
|
type Props = {
|
|
|
- id: any;
|
|
|
- closePage: () => void;
|
|
|
- upTableList: () => void;
|
|
|
- addTableList: () => void;
|
|
|
-};
|
|
|
+ id: any
|
|
|
+ closePage: () => void
|
|
|
+ upTableList: () => void
|
|
|
+ addTableList: () => void
|
|
|
+}
|
|
|
|
|
|
function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
|
|
|
// 设置表单初始数据(区分编辑和新增)
|
|
|
- const FormBoxRef = useRef<FormInstance>(null);
|
|
|
+ const FormBoxRef = useRef<FormInstance>(null)
|
|
|
|
|
|
const getInfoInAPIFu = useCallback(async (id: number) => {
|
|
|
- const res = await getUserInfoByIdAPI(id);
|
|
|
- FormBoxRef.current?.setFieldsValue(res.data);
|
|
|
+ const res = await getUserInfoByIdAPI(id)
|
|
|
+ FormBoxRef.current?.setFieldsValue(res.data)
|
|
|
// console.log("是编辑,在这里发请求拿数据", res);
|
|
|
- }, []);
|
|
|
+ }, [])
|
|
|
|
|
|
// 没有通过校验
|
|
|
const onFinishFailed = useCallback(() => {
|
|
|
// return MessageFu.warning("有表单不符号规则!");
|
|
|
- }, []);
|
|
|
+ }, [])
|
|
|
|
|
|
useEffect(() => {
|
|
|
- if (id) getInfoInAPIFu(id);
|
|
|
+ if (id) getInfoInAPIFu(id)
|
|
|
else {
|
|
|
- FormBoxRef.current?.setFieldsValue({});
|
|
|
+ FormBoxRef.current?.setFieldsValue({})
|
|
|
}
|
|
|
- }, [getInfoInAPIFu, id]);
|
|
|
+ }, [getInfoInAPIFu, id])
|
|
|
|
|
|
// 通过校验点击确定
|
|
|
const onFinish = useCallback(
|
|
@@ -42,86 +42,95 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
|
|
|
...values,
|
|
|
id: id ? id : null,
|
|
|
// 角色id写死 2=》普通用户
|
|
|
- roleId: 2,
|
|
|
- };
|
|
|
+ roleId: 2
|
|
|
+ }
|
|
|
|
|
|
- const res: any = await userSaveAPI(obj);
|
|
|
+ const res: any = await userSaveAPI(obj)
|
|
|
|
|
|
if (res.code === 0) {
|
|
|
- MessageFu.success(id ? "编辑成功!" : "新增成功!");
|
|
|
- if (id) upTableList();
|
|
|
- else addTableList();
|
|
|
+ MessageFu.success(id ? '编辑成功!' : '新增成功!')
|
|
|
+ if (id) upTableList()
|
|
|
+ else addTableList()
|
|
|
|
|
|
- closePage();
|
|
|
+ closePage()
|
|
|
}
|
|
|
// console.log("通过校验,点击确定");
|
|
|
},
|
|
|
[addTableList, closePage, id, upTableList]
|
|
|
- );
|
|
|
+ )
|
|
|
|
|
|
return (
|
|
|
<Modal
|
|
|
wrapClassName={styles.userAdd}
|
|
|
destroyOnClose
|
|
|
open={true}
|
|
|
- title={id ? "编辑用户" : "新增用户"}
|
|
|
+ title={id ? '编辑用户' : '新增用户'}
|
|
|
footer={
|
|
|
[] // 设置footer为空,去掉 取消 确定默认按钮
|
|
|
}
|
|
|
>
|
|
|
- <div className="userAddMain">
|
|
|
+ <div className='userAddMain'>
|
|
|
<Form
|
|
|
scrollToFirstError={true}
|
|
|
ref={FormBoxRef}
|
|
|
- name="basic"
|
|
|
+ name='basic'
|
|
|
labelCol={{ span: 5 }}
|
|
|
onFinish={onFinish}
|
|
|
onFinishFailed={onFinishFailed}
|
|
|
- autoComplete="off"
|
|
|
+ autoComplete='off'
|
|
|
>
|
|
|
<Form.Item
|
|
|
- label="账号名"
|
|
|
- name="userName"
|
|
|
+ label='账号名'
|
|
|
+ name='userName'
|
|
|
rules={[
|
|
|
- { required: true, message: "请输入账号名!" },
|
|
|
- { min: 6, message: "最少6个字!" },
|
|
|
+ { required: true, message: '请输入账号名!' },
|
|
|
+ { min: 6, message: '最少6个字!' }
|
|
|
]}
|
|
|
- getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
|
|
|
+ getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
|
|
|
+ >
|
|
|
+ <Input disabled={id} maxLength={15} showCount placeholder='请输入内容' />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ label='真实姓名'
|
|
|
+ name='realName'
|
|
|
+ rules={[{ required: true, message: '请输入真实姓名!' }]}
|
|
|
+ getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
|
|
|
>
|
|
|
- <Input
|
|
|
- disabled={id}
|
|
|
- maxLength={15}
|
|
|
- showCount
|
|
|
- placeholder="请输入内容"
|
|
|
- />
|
|
|
+ <Input maxLength={10} showCount placeholder='请输入内容' />
|
|
|
</Form.Item>
|
|
|
|
|
|
<Form.Item
|
|
|
- label="真实姓名"
|
|
|
- name="realName"
|
|
|
- // rules={[{ required: true, message: "请输入真实姓名!" }]}
|
|
|
- getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
|
|
|
+ label='手机号'
|
|
|
+ name='phone'
|
|
|
+ rules={[
|
|
|
+ {
|
|
|
+ pattern: /^1[3-9][0-9]{9}$/,
|
|
|
+ message: '请输入正确格式的手机号!'
|
|
|
+ }
|
|
|
+ ]}
|
|
|
+ getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
|
|
|
>
|
|
|
- <Input maxLength={8} showCount placeholder="请输入内容" />
|
|
|
+ <Input maxLength={11} showCount placeholder='请输入11位手机号' />
|
|
|
</Form.Item>
|
|
|
|
|
|
- {id ? null : <div className="passTit">* 默认密码 123456</div>}
|
|
|
+ {id ? null : <div className='passTit'>* 默认密码 123456</div>}
|
|
|
|
|
|
{/* 确定和取消按钮 */}
|
|
|
<br />
|
|
|
<Form.Item wrapperCol={{ offset: 9, span: 16 }}>
|
|
|
- <Button type="primary" htmlType="submit">
|
|
|
+ <Button type='primary' htmlType='submit'>
|
|
|
提交
|
|
|
</Button>
|
|
|
 
|
|
|
- <MyPopconfirm txtK="取消" onConfirm={closePage} />
|
|
|
+ <MyPopconfirm txtK='取消' onConfirm={closePage} />
|
|
|
</Form.Item>
|
|
|
</Form>
|
|
|
</div>
|
|
|
</Modal>
|
|
|
- );
|
|
|
+ )
|
|
|
}
|
|
|
|
|
|
-const MemoUserAdd = React.memo(UserAdd);
|
|
|
+const MemoUserAdd = React.memo(UserAdd)
|
|
|
|
|
|
-export default MemoUserAdd;
|
|
|
+export default MemoUserAdd
|