|
@@ -4,6 +4,7 @@ import { SaveUserType } from "@/types";
|
|
|
import { MessageFu } from "@/utils/message";
|
|
|
import {
|
|
|
Button,
|
|
|
+ Cascader,
|
|
|
Form,
|
|
|
FormInstance,
|
|
|
Input,
|
|
@@ -11,7 +12,7 @@ import {
|
|
|
Popconfirm,
|
|
|
Select,
|
|
|
} from "antd";
|
|
|
-import React, { useCallback, useEffect, useRef } from "react";
|
|
|
+import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
|
import { useSelector } from "react-redux";
|
|
|
import styles from "./index.module.scss";
|
|
|
|
|
@@ -28,7 +29,11 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
|
|
|
|
|
|
const getInfoInAPIFu = useCallback(async (id: number) => {
|
|
|
const res = await getUserInfoByIdAPI(id);
|
|
|
- FormBoxRef.current?.setFieldsValue(res.data);
|
|
|
+
|
|
|
+ FormBoxRef.current?.setFieldsValue({
|
|
|
+ ...res.data,
|
|
|
+ // deptId: ["1", "2", "51", "52"],
|
|
|
+ });
|
|
|
console.log("是编辑,在这里发请求拿数据", res);
|
|
|
}, []);
|
|
|
|
|
@@ -44,16 +49,21 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
|
|
|
}
|
|
|
}, [getInfoInAPIFu, id]);
|
|
|
|
|
|
+ // 密码提示
|
|
|
+ const [passFlag, setPassFlag] = useState("");
|
|
|
+
|
|
|
// 从仓库获取角色下拉列表信息
|
|
|
- const roleList = useSelector(
|
|
|
- (state: RootState) => state.A3User.roleList
|
|
|
- );
|
|
|
+ const roleList = useSelector((state: RootState) => state.A3User.roleList);
|
|
|
+
|
|
|
+ // 从仓库获取部门 级联 信息
|
|
|
+ const deptList = useSelector((state: RootState) => state.A5Section.tableList);
|
|
|
|
|
|
// 通过校验点击确定
|
|
|
const onFinish = useCallback(
|
|
|
async (values: any) => {
|
|
|
const obj: SaveUserType = {
|
|
|
...values,
|
|
|
+ deptId: values.deptId[values.deptId.length - 1],
|
|
|
id: id ? id : null,
|
|
|
};
|
|
|
|
|
@@ -66,7 +76,7 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
|
|
|
|
|
|
closePage();
|
|
|
}
|
|
|
- console.log("通过校验,点击确定");
|
|
|
+ // console.log("通过校验,点击确定");
|
|
|
},
|
|
|
[addTableList, closePage, id, upTableList]
|
|
|
);
|
|
@@ -91,34 +101,95 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
|
|
|
autoComplete="off"
|
|
|
>
|
|
|
<Form.Item
|
|
|
- label="账号名"
|
|
|
+ label="用户名"
|
|
|
name="userName"
|
|
|
- rules={[{ required: true, message: "请输入账号名!" }]}
|
|
|
+ rules={[
|
|
|
+ { required: true, message: "请输入用户名!" },
|
|
|
+ {
|
|
|
+ validator: (_: any, value: any) => {
|
|
|
+ if (value) {
|
|
|
+ const reg = new RegExp(/^[a-zA-Z0-9_]{6,15}$/);
|
|
|
+ const flag = reg.test(value);
|
|
|
+ if (flag) {
|
|
|
+ setPassFlag(value);
|
|
|
+ return Promise.resolve(value);
|
|
|
+ } else {
|
|
|
+ setPassFlag("");
|
|
|
+ return Promise.reject(
|
|
|
+ "用户名只包含字母、数字和下划线,最少 6 个字符!"
|
|
|
+ );
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ setPassFlag("");
|
|
|
+ return Promise.resolve(value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]}
|
|
|
getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
|
|
|
>
|
|
|
<Input
|
|
|
+ style={{ width: 400 }}
|
|
|
disabled={id}
|
|
|
maxLength={15}
|
|
|
showCount
|
|
|
- placeholder="请输入内容"
|
|
|
+ placeholder="请输入内容,6-15字;不能重复"
|
|
|
/>
|
|
|
</Form.Item>
|
|
|
|
|
|
+ <div className="e_row" hidden={id}>
|
|
|
+ <div className="e_rowL">
|
|
|
+ <span> </span>初始密码:
|
|
|
+ </div>
|
|
|
+ <div className="e_rowR">
|
|
|
+ {passFlag ? `${passFlag}4dage` : "请先输入合法用户名"}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<Form.Item
|
|
|
- label="用户昵称"
|
|
|
- name="nickName"
|
|
|
- rules={[{ required: true, message: "请输入用户昵称!" }]}
|
|
|
+ label="手机号"
|
|
|
+ name="phone"
|
|
|
+ rules={[
|
|
|
+ { required: true, message: "请输入手机号!" },
|
|
|
+ // { max: 11, min: 11, message: "长度为11!" },
|
|
|
+ {
|
|
|
+ pattern: /^1[3-9][0-9]{9}$/,
|
|
|
+ message: "请输入正确格式的手机号!",
|
|
|
+ },
|
|
|
+ ]}
|
|
|
getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
|
|
|
>
|
|
|
- <Input maxLength={8} showCount placeholder="请输入内容" />
|
|
|
+ <Input
|
|
|
+ style={{ width: 400 }}
|
|
|
+ maxLength={11}
|
|
|
+ showCount
|
|
|
+ placeholder="请输入11位手机号"
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ label="所属部门"
|
|
|
+ name="deptId"
|
|
|
+ rules={[{ required: true, message: "请选择部门!" }]}
|
|
|
+ >
|
|
|
+ <Cascader
|
|
|
+ style={{ width: 300 }}
|
|
|
+ options={deptList}
|
|
|
+ fieldNames={{ label: "name", value: "id" }}
|
|
|
+ placeholder="请选择"
|
|
|
+ />
|
|
|
</Form.Item>
|
|
|
|
|
|
<Form.Item
|
|
|
- label="用户角色"
|
|
|
+ label="角色"
|
|
|
name="roleId"
|
|
|
rules={[{ required: true, message: "请选择角色!" }]}
|
|
|
>
|
|
|
- <Select placeholder="请选择" options={roleList} />
|
|
|
+ <Select
|
|
|
+ style={{ width: 300 }}
|
|
|
+ placeholder="请选择"
|
|
|
+ options={roleList}
|
|
|
+ />
|
|
|
</Form.Item>
|
|
|
|
|
|
<Form.Item
|
|
@@ -127,11 +198,14 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
|
|
|
rules={[{ required: true, message: "请输入真实姓名!" }]}
|
|
|
getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
|
|
|
>
|
|
|
- <Input maxLength={8} showCount placeholder="请输入内容" />
|
|
|
+ <Input
|
|
|
+ style={{ width: 400 }}
|
|
|
+ maxLength={8}
|
|
|
+ showCount
|
|
|
+ placeholder="请输入内容"
|
|
|
+ />
|
|
|
</Form.Item>
|
|
|
|
|
|
- {id ? null : <div className="passTit">* 默认密码 123456</div>}
|
|
|
-
|
|
|
{/* 确定和取消按钮 */}
|
|
|
<br />
|
|
|
<Form.Item wrapperCol={{ offset: 9, span: 16 }}>
|
|
@@ -144,6 +218,7 @@ function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
|
|
|
okText="放弃"
|
|
|
cancelText="取消"
|
|
|
onConfirm={closePage}
|
|
|
+ okButtonProps={{ loading: false }}
|
|
|
>
|
|
|
<Button>取消</Button>
|
|
|
</Popconfirm>
|