唐简：提交新分支
This commit is contained in:
Jim__TT
@@ -1,7 +1,807 @@
|
||||
import "./index.scss";
|
||||
import {
|
||||
Input,
|
||||
Tree,
|
||||
Select,
|
||||
DatePicker,
|
||||
Button,
|
||||
Table,
|
||||
Space,
|
||||
Tag,
|
||||
message,
|
||||
Modal,
|
||||
Form,
|
||||
Row,
|
||||
Col,
|
||||
TreeSelect,
|
||||
Radio,
|
||||
} from "antd";
|
||||
|
||||
import {
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
ExclamationCircleFilled,
|
||||
} from "@ant-design/icons";
|
||||
|
||||
import {
|
||||
getUserListApi,
|
||||
deleteUserApi,
|
||||
getDeptTreeApi,
|
||||
addUserApi,
|
||||
getRoleListApi,
|
||||
getUserInfoApi,
|
||||
editUserApi,
|
||||
} from "../../../api/system/users";
|
||||
import dataLocale from "antd/es/date-picker/locale/zh_CN";
|
||||
import React, { useEffect, useState, useMemo } from "react";
|
||||
import { SearchOutlined, PlusOutlined } from "@ant-design/icons";
|
||||
|
||||
export default function User() {
|
||||
return(
|
||||
<div>user</div>
|
||||
)
|
||||
}
|
||||
const postIdList: number[] = [];
|
||||
const [form] = Form.useForm();
|
||||
const [searchForm] = Form.useForm();
|
||||
const [echoId, setEchoId] = useState<any>();
|
||||
const [myTreeData, setMyTreeData] = useState<[]>([]);
|
||||
const [listData, setListData] = useState([]);
|
||||
const [radioValue, setRadioValue] = useState(1);
|
||||
const [searchTreeValue, setSearchTreeValue] = useState("");
|
||||
const [roleList, setRoleList] = useState<any[]>([]);
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [modalTitle, setModalTitle] = useState<string>("");
|
||||
const [buttonType, setButtonType] = useState<string>("");
|
||||
const [isShowModal, setIsShowModal] = useState<boolean>(false);
|
||||
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
||||
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([
|
||||
100, 102, 101, 104,
|
||||
]);
|
||||
const [treeValue, setTreeValue] = useState<string>();
|
||||
const fieldNames = {
|
||||
label: "deptName",
|
||||
title: "deptName",
|
||||
value: "deptId",
|
||||
key: "deptName",
|
||||
};
|
||||
const [queryParams, setQueryParams] = useState<QueryParamsType>({
|
||||
deptId: undefined,
|
||||
userName: undefined,
|
||||
phoneNumber: undefined,
|
||||
state: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
pageNum: undefined,
|
||||
pageSize: undefined,
|
||||
});
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "userId",
|
||||
key: "Id",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "用户名称",
|
||||
dataIndex: "userName",
|
||||
key: "userName",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "用户昵称",
|
||||
dataIndex: "nickName",
|
||||
key: "nikeName",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
key: "deptId",
|
||||
dataIndex: "deptName",
|
||||
render: (text: string) => <>{text ? text : "--"}</>,
|
||||
},
|
||||
{
|
||||
title: "手机号码",
|
||||
key: "phoneNumber",
|
||||
dataIndex: "phoneNumber",
|
||||
render: (text: string) => <>{text ? text : "--"}</>,
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "state",
|
||||
dataIndex: "state",
|
||||
render: (text: string) => (
|
||||
<>
|
||||
{text === "0" ? (
|
||||
<Tag color="processing">停用</Tag>
|
||||
) : (
|
||||
<Tag color="processing">正常</Tag>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
dataIndex: "createTime",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "operate",
|
||||
dataIndex: "operate",
|
||||
render: (_: string, record: object) => (
|
||||
<div style={{ color: "#58aaff" }}>
|
||||
<Space>
|
||||
<EditOutlined />
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => handleEdit(record)}
|
||||
style={{ color: " #58aaff" }}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<DeleteOutlined />
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => handleDel(record)}
|
||||
style={{ color: " #58aaff" }}
|
||||
>
|
||||
删除
|
||||
</a>
|
||||
</Space>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
interface AddUserType {
|
||||
email: string;
|
||||
nickName: string;
|
||||
password: string;
|
||||
phoneNumber: string;
|
||||
postIds: number[];
|
||||
roleIds: number[];
|
||||
sex: string;
|
||||
state: string;
|
||||
userName: string;
|
||||
}
|
||||
|
||||
interface QueryParamsType {
|
||||
deptId?: number;
|
||||
userName?: string;
|
||||
phoneNumber?: string;
|
||||
state?: string;
|
||||
startTime?: string | any;
|
||||
endTime?: string | any;
|
||||
pageNum?: number;
|
||||
pageSize?: number;
|
||||
}
|
||||
|
||||
let addUserParams: AddUserType = {
|
||||
email: "",
|
||||
nickName: "",
|
||||
password: "",
|
||||
phoneNumber: "",
|
||||
postIds: [],
|
||||
roleIds: [],
|
||||
sex: "",
|
||||
state: "",
|
||||
userName: "",
|
||||
};
|
||||
|
||||
const getDeptTreeData = async () => {
|
||||
try {
|
||||
const { code, data } = await getDeptTreeApi();
|
||||
if (code === 1000) {
|
||||
setMyTreeData(data);
|
||||
handleLoopPostList(data);
|
||||
setExpandedKeys(postIdList);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const getUserList = async (newQueryParams: object) => {
|
||||
try {
|
||||
const { code, data } = await getUserListApi(newQueryParams);
|
||||
if (code === 1000) {
|
||||
setListData(data.rows);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const getUserInfo = async () => {
|
||||
try {
|
||||
const { code, data } = await getUserInfoApi(echoId);
|
||||
if (code === 1000) {
|
||||
handleEcho(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const getRoleList = async () => {
|
||||
try {
|
||||
const { code, data } = await getRoleListApi();
|
||||
if (code === 1000) {
|
||||
setRoleList(data.rows);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setModalTitle("新增用户");
|
||||
setButtonType("ADD");
|
||||
setIsShowModal(true);
|
||||
};
|
||||
|
||||
const handleEdit = (echoData: any) => {
|
||||
setModalTitle("修改用户");
|
||||
setButtonType("EDIT");
|
||||
setIsShowModal(true);
|
||||
setEchoId(echoData.userId);
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
form.validateFields().then((values) => {
|
||||
Object.keys(values).forEach(
|
||||
(key) => values[key] === undefined && delete values[key]
|
||||
);
|
||||
addUserParams = {
|
||||
...addUserParams,
|
||||
...values,
|
||||
userId: echoId,
|
||||
};
|
||||
if (buttonType === "ADD") {
|
||||
handleAddUser();
|
||||
} else if (buttonType === "EDIT") {
|
||||
handleEditUser();
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "系统异常，请刷新后重试",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddUser = async () => {
|
||||
const { code } = await addUserApi(addUserParams);
|
||||
try {
|
||||
if (code === 1000) {
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "创建成功",
|
||||
});
|
||||
setQueryParams({});
|
||||
handleClear();
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "用户名已经存在",
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditUser = async () => {
|
||||
const { code } = await editUserApi(addUserParams);
|
||||
try {
|
||||
if (code === 1000) {
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "修改成功",
|
||||
});
|
||||
setQueryParams({});
|
||||
handleClear();
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "修改失败",
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = async () => {
|
||||
searchForm.resetFields();
|
||||
setQueryParams({});
|
||||
getUserList({});
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
getUserList(queryParams);
|
||||
};
|
||||
|
||||
const handleDel = async (record: any) => {
|
||||
Modal.confirm({
|
||||
title: `确定删除Id为-${record.userId}-, 用户名为-${record.userName}-的用户吗?`,
|
||||
icon: <ExclamationCircleFilled />,
|
||||
async onOk() {
|
||||
const { code } = await deleteUserApi(record.userId);
|
||||
try {
|
||||
if (code === 1000) {
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "删除成功",
|
||||
});
|
||||
setQueryParams({});
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "删除失败",
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
messageApi.open({
|
||||
type: "warning",
|
||||
content: "取消成功",
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleTimePikerValue = (_: any, dates: string[]) => {
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
startTime: dates[0],
|
||||
endTime: dates[1],
|
||||
});
|
||||
searchForm.setFieldsValue({ dataTime: [dates[0], dates[1]] });
|
||||
};
|
||||
|
||||
const handleSearchValues = (e: any) => {
|
||||
const { name, value } = e.target;
|
||||
setQueryParams({ ...queryParams, [name]: value });
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
pageNum: page,
|
||||
});
|
||||
};
|
||||
|
||||
const handleTreeSelect = (deptId: any) => {
|
||||
console.log(queryParams);
|
||||
getUserList({
|
||||
...queryParams,
|
||||
deptId: deptId[0],
|
||||
});
|
||||
};
|
||||
|
||||
const handleEcho = (data: any) => {
|
||||
const { userName, nickName, sex, state, phoneNumber, deptId, email } =
|
||||
data.user;
|
||||
const { postIds, roleIds } = data;
|
||||
form.setFieldsValue({
|
||||
userName,
|
||||
nickName,
|
||||
state,
|
||||
phoneNumber,
|
||||
sex,
|
||||
deptId,
|
||||
email,
|
||||
postIds,
|
||||
roleIds,
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
handleClear();
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
form.resetFields();
|
||||
setIsShowModal(false);
|
||||
};
|
||||
|
||||
const handleExpandKeys = (key: string, data: object[]) => {
|
||||
const filterRes = new RegExp(key, "i");
|
||||
data.forEach((item: any) => {
|
||||
if (filterRes.test(item?.title?.props?.children)) {
|
||||
postIdList.push(item.key);
|
||||
}
|
||||
item.children ? handleExpandKeys(key, item.children) : "";
|
||||
});
|
||||
};
|
||||
|
||||
const handleLoopPostList = (loopData: object[]) => {
|
||||
loopData.forEach((item: any) => {
|
||||
if (item?.deptId) {
|
||||
const flag = postIdList.some((someItem) => {
|
||||
someItem === item.deptId;
|
||||
});
|
||||
if (!flag) {
|
||||
postIdList.push(item.deptId);
|
||||
}
|
||||
}
|
||||
item.children ? handleLoopPostList(item.children) : "";
|
||||
});
|
||||
};
|
||||
|
||||
const onRadio = (e: any) => {
|
||||
setRadioValue(e.target.value);
|
||||
};
|
||||
|
||||
const onTreeSelect = (newValue: string) => {
|
||||
setTreeValue(newValue);
|
||||
};
|
||||
|
||||
const onTreeSearch = (e?: any) => {
|
||||
const { value } = e.target ? e.target : null;
|
||||
setSearchTreeValue(value);
|
||||
handleExpandKeys(value, treeData);
|
||||
setExpandedKeys(postIdList);
|
||||
setAutoExpandParent(true);
|
||||
};
|
||||
|
||||
const onExpand = (newExpandedKeys: React.Key[]) => {
|
||||
console.log(newExpandedKeys);
|
||||
setExpandedKeys(newExpandedKeys);
|
||||
setAutoExpandParent(false);
|
||||
};
|
||||
|
||||
const treeData = useMemo(() => {
|
||||
const loop = (data: any[]): any[] =>
|
||||
data.map((item) => {
|
||||
const strTitle = item.deptName as string;
|
||||
const index = strTitle.indexOf(searchTreeValue);
|
||||
const beforeStr = strTitle.substring(0, index);
|
||||
const afterStr = strTitle.slice(index + searchTreeValue.length);
|
||||
const title =
|
||||
index > -1 ? (
|
||||
<span>
|
||||
{beforeStr}
|
||||
<span className="site-tree-search-value">{searchTreeValue}</span>
|
||||
{afterStr}
|
||||
</span>
|
||||
) : (
|
||||
<span>{strTitle}</span>
|
||||
);
|
||||
if (item.children) {
|
||||
return { title, key: item.deptId, children: loop(item.children) };
|
||||
}
|
||||
return {
|
||||
title,
|
||||
key: item.deptId,
|
||||
};
|
||||
});
|
||||
return loop(myTreeData);
|
||||
}, [myTreeData]);
|
||||
|
||||
useEffect(() => {
|
||||
getDeptTreeData();
|
||||
getRoleList();
|
||||
getUserInfo();
|
||||
}, [echoId]);
|
||||
|
||||
useEffect(() => {
|
||||
getUserList({});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div id="content">
|
||||
<div className="dept-content">
|
||||
<Input
|
||||
allowClear
|
||||
style={{ marginBottom: 8 }}
|
||||
prefix={<SearchOutlined />}
|
||||
placeholder="请输入部门名称"
|
||||
onChange={onTreeSearch}
|
||||
/>
|
||||
<Tree
|
||||
onExpand={onExpand}
|
||||
defaultExpandAll={true}
|
||||
expandedKeys={expandedKeys}
|
||||
autoExpandParent={autoExpandParent}
|
||||
treeData={treeData}
|
||||
onSelect={handleTreeSelect}
|
||||
/>
|
||||
</div>
|
||||
<>
|
||||
<div className="right-user">
|
||||
<Form
|
||||
layout="inline"
|
||||
form={searchForm}
|
||||
onFinish={handleSearch}
|
||||
style={{ fontWeight: "700", marginLeft: 12, marginTop: 23 }}
|
||||
>
|
||||
<Form.Item
|
||||
label="用户名称"
|
||||
name="userName"
|
||||
style={{ width: 300 + "px", marginTop: "10px" }}
|
||||
>
|
||||
<Input
|
||||
placeholder="请输入用户名称"
|
||||
name="userName"
|
||||
allowClear
|
||||
value={queryParams.userName}
|
||||
onChange={handleSearchValues}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="手机号码"
|
||||
name="phoneNumber"
|
||||
style={{ width: 300 + "px", marginTop: "10px" }}
|
||||
>
|
||||
<Input
|
||||
placeholder="请输入手机号码"
|
||||
name="phoneNumber"
|
||||
allowClear
|
||||
value={queryParams.phoneNumber}
|
||||
onChange={handleSearchValues}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="state" style={{ marginTop: "10px" }}>
|
||||
<Select
|
||||
style={{ width: 250 }}
|
||||
placeholder="用户状态"
|
||||
allowClear
|
||||
options={[
|
||||
{ value: "1", label: "正常" },
|
||||
{ value: "0", label: "停用" },
|
||||
]}
|
||||
value={queryParams.state}
|
||||
onChange={(value: any) =>
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
state: value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="创建时间"
|
||||
name="dateTime"
|
||||
style={{ marginTop: "10px" }}
|
||||
>
|
||||
<DatePicker.RangePicker
|
||||
locale={dataLocale}
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
onChange={handleTimePikerValue}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item style={{ marginTop: "10px" }}>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
style={{ marginLeft: 20 + "px" }}
|
||||
>
|
||||
搜索
|
||||
</Button>
|
||||
</Form.Item>
|
||||
<Form.Item style={{ marginTop: "10px" }}>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<div className="add-content">
|
||||
<>
|
||||
<Button type="primary" onClick={handleAdd}>
|
||||
<PlusOutlined />
|
||||
新增
|
||||
</Button>
|
||||
</>
|
||||
</div>
|
||||
<div className="table-content">
|
||||
<>
|
||||
{contextHolder}
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={listData}
|
||||
className="article-table"
|
||||
pagination={{
|
||||
onChange: handlePageChange,
|
||||
locale: {
|
||||
jump_to: "跳至",
|
||||
page: "页",
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showTotal: (total, range) =>
|
||||
`第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
<>
|
||||
{contextHolder}
|
||||
<Modal
|
||||
title={modalTitle}
|
||||
width={700}
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
open={isShowModal}
|
||||
onOk={handleConfirm}
|
||||
onCancel={handleCancel}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
name="basic"
|
||||
initialValues={{ remember: true }}
|
||||
labelCol={{ span: 6 }}
|
||||
onFinish={handleConfirm}
|
||||
autoComplete="off"
|
||||
className="modal-form"
|
||||
>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="用户名称"
|
||||
name="userName"
|
||||
rules={[{ required: true, message: "请输入用户名称" }]}
|
||||
>
|
||||
<Input defaultValue={""} placeholder="请输入用户名称" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="用户昵称"
|
||||
name="nickName"
|
||||
rules={[{ required: true, message: "请输入用户昵称" }]}
|
||||
>
|
||||
<Input defaultValue={""} placeholder="请输入用户昵称" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="用户性别"
|
||||
name="sex"
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择用户性别"
|
||||
options={[
|
||||
{ value: "0", label: "男" },
|
||||
{ value: "1", label: "女" },
|
||||
{ value: "2", label: "未知" },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="用户密码"
|
||||
name="password"
|
||||
rules={[{ required: true, message: "请输入用户密码" }]}
|
||||
>
|
||||
<Input.Password
|
||||
defaultValue={""}
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="归属部门"
|
||||
name="deptId"
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<TreeSelect
|
||||
showSearch
|
||||
style={{ width: "100%" }}
|
||||
value={treeValue}
|
||||
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
|
||||
placeholder="请选择"
|
||||
allowClear
|
||||
fieldNames={fieldNames}
|
||||
treeDefaultExpandAll
|
||||
onChange={onTreeSelect}
|
||||
treeData={myTreeData}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="手机号码"
|
||||
name="phoneNumber"
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<Input placeholder="请输入手机号码" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="邮箱"
|
||||
name="email"
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<Input defaultValue={""} placeholder="请输入邮箱" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="状态"
|
||||
name="state"
|
||||
rules={[
|
||||
{
|
||||
required: false,
|
||||
message: "Please input your password!",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Radio.Group onChange={onRadio} value={radioValue}>
|
||||
<Radio value="1">正常</Radio>
|
||||
<Radio value="0">停用</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="岗位"
|
||||
name="postIds"
|
||||
rules={[
|
||||
{
|
||||
required: false,
|
||||
message: "Please input your password!",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
mode="multiple"
|
||||
defaultValue={[]}
|
||||
options={[
|
||||
{ value: "董事长", label: "董事长" },
|
||||
{ value: "项目经理", label: "项目经理" },
|
||||
{ value: "人力资源", label: "人力资源" },
|
||||
{ value: "普通员工", label: "普通员工" },
|
||||
]}
|
||||
placeholder="请选择岗位"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="角色"
|
||||
name="roleIds"
|
||||
rules={[
|
||||
{
|
||||
required: false,
|
||||
message: "Please input your password!",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Select mode="multiple" placeholder="请选择角色">
|
||||
{roleList.map((item) => (
|
||||
<Select.Option key={item.roleId} value={item.roleId}>
|
||||
{item.roleName}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="备注"
|
||||
labelCol={{ span: 3 }}
|
||||
rules={[
|
||||
{
|
||||
required: false,
|
||||
message: "Please input your password!",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input.TextArea placeholder="请输入内容" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Modal>
|
||||
</>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user