唐简: 完成代码结构优化重构
This commit is contained in:
Jim__TT
@@ -14,5 +14,7 @@ module.exports = {
|
|||||||
"warn",
|
"warn",
|
||||||
{ allowConstantExport: true },
|
{ allowConstantExport: true },
|
||||||
],
|
],
|
||||||
|
"@typescript-eslint/no-explicit-any": "off",
|
||||||
|
"@typescript-eslint/no-unused-vars": "off",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,11 +0,0 @@
|
|||||||
.tree-content {
|
|
||||||
margin: 12px 0 0 12px;
|
|
||||||
|
|
||||||
.ant-table-thead > tr > th {
|
|
||||||
color: #909399;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.ant-table-tbody > tr > td {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,213 +0,0 @@
|
|||||||
import "./index.scss";
|
|
||||||
import {
|
|
||||||
EditOutlined,
|
|
||||||
DeleteOutlined,
|
|
||||||
ExclamationCircleFilled,
|
|
||||||
} from "@ant-design/icons";
|
|
||||||
import React, { useState, useEffect } from "react";
|
|
||||||
import { Table, Space, Tag, message, Modal } from "antd";
|
|
||||||
import { getUserListApi, deleteUserApi } from "../../../../../api/system/users";
|
|
||||||
|
|
||||||
interface AddButtonClickType {
|
|
||||||
clickFromChild: (type: string, echoData?: number) => void;
|
|
||||||
searchValues: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface QueryParamsType {
|
|
||||||
userName?: string;
|
|
||||||
phoneNumber?: string;
|
|
||||||
state?: string;
|
|
||||||
startTime?: string;
|
|
||||||
endTime?: string;
|
|
||||||
pageNum?: number;
|
|
||||||
pageSize?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
const UserBottomList: React.FC<AddButtonClickType> = ({
|
|
||||||
clickFromChild,
|
|
||||||
searchValues,
|
|
||||||
}) => {
|
|
||||||
const [listData, setListData] = useState([]);
|
|
||||||
const [update, setUpdate] = useState<any>("");
|
|
||||||
const [currentPage, setCurrentPage] = useState<number>(1);
|
|
||||||
const [messageApi, contextHolder] = message.useMessage();
|
|
||||||
const [queryParams, setQueryParams] = useState<QueryParamsType>({
|
|
||||||
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 : "null"}</>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "手机号码",
|
|
||||||
key: "phoneNumber",
|
|
||||||
dataIndex: "phoneNumber",
|
|
||||||
render: (text: string) => <>{text ? text : "null"}</>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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={() => handleEditClick(record)}
|
|
||||||
style={{ color: " #58aaff" }}
|
|
||||||
>
|
|
||||||
编辑
|
|
||||||
</a>
|
|
||||||
<DeleteOutlined />
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
onClick={() => handleDeleteClick(record)}
|
|
||||||
style={{ color: " #58aaff" }}
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</a>
|
|
||||||
</Space>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const getUserList = async () => {
|
|
||||||
try {
|
|
||||||
const { pageNum, pageSize } = queryParams;
|
|
||||||
let newQueryParams = {};
|
|
||||||
newQueryParams = {
|
|
||||||
...searchValues,
|
|
||||||
pageNum,
|
|
||||||
pageSize,
|
|
||||||
};
|
|
||||||
// console.log(newQueryParams);
|
|
||||||
|
|
||||||
const { code, data } = await getUserListApi(newQueryParams);
|
|
||||||
if (code === 1000) {
|
|
||||||
setListData(data.rows);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlePageChange = (page: number) => {
|
|
||||||
setCurrentPage(page);
|
|
||||||
setQueryParams({
|
|
||||||
...queryParams,
|
|
||||||
pageNum: page,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEditClick = (echoData: any) => {
|
|
||||||
clickFromChild("EDIT", echoData.userId);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteClick = 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: "删除成功",
|
|
||||||
});
|
|
||||||
setUpdate({
|
|
||||||
...update,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
messageApi.open({
|
|
||||||
type: "error",
|
|
||||||
content: "删除失败",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.log(err);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onCancel() {
|
|
||||||
messageApi.open({
|
|
||||||
type: "warning",
|
|
||||||
content: "取消成功",
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
getUserList();
|
|
||||||
}, [searchValues, update]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="tree-content">
|
|
||||||
{contextHolder}
|
|
||||||
<Table
|
|
||||||
columns={columns}
|
|
||||||
dataSource={listData}
|
|
||||||
className="article-table"
|
|
||||||
pagination={{
|
|
||||||
onChange: handlePageChange,
|
|
||||||
showQuickJumper: true,
|
|
||||||
showTotal: (total, range) =>
|
|
||||||
`第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default UserBottomList;
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
.dept-content {
|
|
||||||
flex: 20%;
|
|
||||||
padding: 35px 12px 0 0;
|
|
||||||
height: calc(100vh - 85px);
|
|
||||||
}
|
|
||||||
@@ -1,76 +0,0 @@
|
|||||||
import "./index.scss";
|
|
||||||
import { Input, Tree } from "antd";
|
|
||||||
import React, { useMemo, useState, useEffect } from "react";
|
|
||||||
import { SearchOutlined } from "@ant-design/icons";
|
|
||||||
import { getDeptTreeApi } from "../../../../../api/system/users";
|
|
||||||
|
|
||||||
const MyDeptTree: React.FC = () => {
|
|
||||||
const [myData, setMyData] = useState<any[]>([]);
|
|
||||||
const [searchValue, setSearchValue] = useState("");
|
|
||||||
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
|
||||||
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
|
|
||||||
|
|
||||||
const getDeptTreeData = async () => {
|
|
||||||
try {
|
|
||||||
const res = await getDeptTreeApi();
|
|
||||||
setMyData(res.data);
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onExpand = (newExpandedKeys: React.Key[]) => {
|
|
||||||
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(searchValue);
|
|
||||||
const beforeStr = strTitle.substring(0, index);
|
|
||||||
const afterStr = strTitle.slice(index + searchValue.length);
|
|
||||||
const title =
|
|
||||||
index > -1 ? (
|
|
||||||
<span>
|
|
||||||
{beforeStr}
|
|
||||||
<span className="site-tree-search-value">{searchValue}</span>
|
|
||||||
{afterStr}
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span>{strTitle}</span>
|
|
||||||
);
|
|
||||||
if (item.children) {
|
|
||||||
return { title, key: item.deptId, children: loop(item.children) };
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
title,
|
|
||||||
key: item.key,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
return loop(myData);
|
|
||||||
}, [myData]);
|
|
||||||
useEffect(() => {
|
|
||||||
getDeptTreeData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="dept-content">
|
|
||||||
<Input
|
|
||||||
style={{ marginBottom: 8 }}
|
|
||||||
prefix={<SearchOutlined />}
|
|
||||||
placeholder="请输入部门名称"
|
|
||||||
// onChange={onChange}
|
|
||||||
/>
|
|
||||||
<Tree
|
|
||||||
onExpand={onExpand}
|
|
||||||
expandedKeys={expandedKeys}
|
|
||||||
autoExpandParent={autoExpandParent}
|
|
||||||
treeData={treeData}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MyDeptTree;
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
.modal-form {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
@@ -1,391 +0,0 @@
|
|||||||
import {
|
|
||||||
Modal,
|
|
||||||
Button,
|
|
||||||
Form,
|
|
||||||
Input,
|
|
||||||
Row,
|
|
||||||
Col,
|
|
||||||
Select,
|
|
||||||
TreeSelect,
|
|
||||||
Radio,
|
|
||||||
message,
|
|
||||||
} from "antd";
|
|
||||||
import type { RadioChangeEvent } from "antd";
|
|
||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import {
|
|
||||||
getDeptTreeApi,
|
|
||||||
addUserApi,
|
|
||||||
getRoleListApi,
|
|
||||||
getUserInfoApi,
|
|
||||||
editUserApi,
|
|
||||||
} from "../../../../../api/system/users";
|
|
||||||
|
|
||||||
interface ShowModalType {
|
|
||||||
isShowModal: boolean;
|
|
||||||
clickFromChild: (UPDATE?: string) => void;
|
|
||||||
modalTitle: string;
|
|
||||||
echoId: any;
|
|
||||||
buttonType: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface AddUserType {
|
|
||||||
deptId: number | null;
|
|
||||||
email: string;
|
|
||||||
nickName: string;
|
|
||||||
password: string;
|
|
||||||
phoneNumber: string;
|
|
||||||
postIds: number[];
|
|
||||||
roleIds: number[];
|
|
||||||
sex: string;
|
|
||||||
state: string;
|
|
||||||
userName: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const UserFromModal: React.FC<ShowModalType> = ({
|
|
||||||
isShowModal,
|
|
||||||
clickFromChild,
|
|
||||||
modalTitle,
|
|
||||||
echoId,
|
|
||||||
buttonType,
|
|
||||||
}) => {
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const [radioValue, setRadioValue] = useState(1);
|
|
||||||
const [deptList, setDeptList] = useState<any[]>();
|
|
||||||
const [roleList, setRoleList] = useState<any[]>([]);
|
|
||||||
const [treeValue, setTreeValue] = useState<string>();
|
|
||||||
const [messageApi, contextHolder] = message.useMessage();
|
|
||||||
// 用于自定义TreeSelect内容
|
|
||||||
const fieldNames = {
|
|
||||||
label: "deptName",
|
|
||||||
title: "deptName",
|
|
||||||
value: "deptId",
|
|
||||||
key: "deptName",
|
|
||||||
};
|
|
||||||
// 用于新增用户参数
|
|
||||||
let addUserParams: AddUserType = {
|
|
||||||
deptId: null,
|
|
||||||
email: "",
|
|
||||||
nickName: "",
|
|
||||||
password: "",
|
|
||||||
phoneNumber: "",
|
|
||||||
postIds: [],
|
|
||||||
roleIds: [],
|
|
||||||
sex: "",
|
|
||||||
state: "",
|
|
||||||
userName: "",
|
|
||||||
};
|
|
||||||
|
|
||||||
const getUserInfo = async () => {
|
|
||||||
try {
|
|
||||||
const { code, data } = await getUserInfoApi(echoId);
|
|
||||||
if (code === 1000) {
|
|
||||||
handleEchoForm(data);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getDeptTreeData = async () => {
|
|
||||||
try {
|
|
||||||
const res = await getDeptTreeApi();
|
|
||||||
setDeptList(res.data);
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getRoleList = async () => {
|
|
||||||
try {
|
|
||||||
const { code, data } = await getRoleListApi();
|
|
||||||
if (code === 1000) {
|
|
||||||
console.log(data.rows);
|
|
||||||
setRoleList(data.rows);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.log(err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEchoForm = (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 handleAddConfirm = () => {
|
|
||||||
form.validateFields().then((values) => {
|
|
||||||
Object.keys(values).forEach(
|
|
||||||
(key) => values[key] === undefined && delete values[key]
|
|
||||||
);
|
|
||||||
addUserParams = {
|
|
||||||
...addUserParams,
|
|
||||||
...values,
|
|
||||||
userId: echoId,
|
|
||||||
};
|
|
||||||
console.log(buttonType);
|
|
||||||
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) {
|
|
||||||
clickFromChild("UPDATE");
|
|
||||||
messageApi.open({
|
|
||||||
type: "success",
|
|
||||||
content: "创建成功",
|
|
||||||
});
|
|
||||||
handleClearForm();
|
|
||||||
} else {
|
|
||||||
messageApi.open({
|
|
||||||
type: "error",
|
|
||||||
content: "用户名已经存在",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.log(err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEditUser = async () => {
|
|
||||||
console.log(addUserParams);
|
|
||||||
|
|
||||||
const { code } = await editUserApi(addUserParams);
|
|
||||||
try {
|
|
||||||
if (code === 1000) {
|
|
||||||
clickFromChild("UPDATE");
|
|
||||||
messageApi.open({
|
|
||||||
type: "success",
|
|
||||||
content: "修改成功",
|
|
||||||
});
|
|
||||||
handleClearForm();
|
|
||||||
} else {
|
|
||||||
messageApi.open({
|
|
||||||
type: "error",
|
|
||||||
content: "修改失败",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.log(err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCancel = () => {
|
|
||||||
clickFromChild();
|
|
||||||
handleClearForm();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClearForm = () => {
|
|
||||||
form.resetFields();
|
|
||||||
};
|
|
||||||
|
|
||||||
const onRadioChange = (e: RadioChangeEvent) => {
|
|
||||||
setRadioValue(e.target.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onTreeSelectChange = (newValue: string) => {
|
|
||||||
setTreeValue(newValue);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
getDeptTreeData();
|
|
||||||
getRoleList();
|
|
||||||
getUserInfo();
|
|
||||||
}, [echoId]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{contextHolder}
|
|
||||||
<Modal
|
|
||||||
title={modalTitle}
|
|
||||||
width={700}
|
|
||||||
open={isShowModal}
|
|
||||||
onOk={handleAddConfirm}
|
|
||||||
onCancel={handleCancel}
|
|
||||||
>
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
name="basic"
|
|
||||||
initialValues={{ remember: true }}
|
|
||||||
labelCol={{ span: 6 }}
|
|
||||||
onFinish={handleAddConfirm}
|
|
||||||
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
|
|
||||||
defaultValue={""}
|
|
||||||
options={[
|
|
||||||
{ value: "0", label: "男" },
|
|
||||||
{ value: "1", label: "女" },
|
|
||||||
{ value: "2", label: "未知" },
|
|
||||||
]}
|
|
||||||
placeholder="请选择用户性别"
|
|
||||||
/>
|
|
||||||
</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
|
|
||||||
defaultValue={""}
|
|
||||||
style={{ width: "100%" }}
|
|
||||||
value={treeValue}
|
|
||||||
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
|
|
||||||
placeholder="请选择"
|
|
||||||
allowClear
|
|
||||||
fieldNames={fieldNames}
|
|
||||||
treeDefaultExpandAll
|
|
||||||
onChange={onTreeSelectChange}
|
|
||||||
treeData={deptList}
|
|
||||||
/>
|
|
||||||
</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={onRadioChange} 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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default UserFromModal;
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
.add-content {
|
|
||||||
display: flex;
|
|
||||||
margin-left: 12px;
|
|
||||||
margin-top: 20px;
|
|
||||||
button:focus,
|
|
||||||
button:focus-visible {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { Button } from "antd";
|
|
||||||
import { PlusOutlined } from "@ant-design/icons";
|
|
||||||
import "./index.scss";
|
|
||||||
|
|
||||||
interface AddButtonClick {
|
|
||||||
clickFromChild: (type: string, echoData?: number) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const UserMidAddButton: React.FC<AddButtonClick> = ({ clickFromChild }) => {
|
|
||||||
const handleAddClick = () => {
|
|
||||||
clickFromChild("ADD");
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="add-content">
|
|
||||||
<Button type="primary" onClick={handleAddClick}>
|
|
||||||
<PlusOutlined />
|
|
||||||
新增
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default UserMidAddButton;
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
.search-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 35px 12px 0 0;
|
|
||||||
.content-top {
|
|
||||||
display: flex;
|
|
||||||
.input-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-right: 20px;
|
|
||||||
width: 270px;
|
|
||||||
div {
|
|
||||||
width: 120px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:nth-child(3) {
|
|
||||||
div {
|
|
||||||
margin-right: -30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.content-bottom {
|
|
||||||
display: flex;
|
|
||||||
margin-left: -20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
div {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
.time-selector {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
div {
|
|
||||||
width: 120px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.time-picker {
|
|
||||||
width: 400px;
|
|
||||||
text-align: center;
|
|
||||||
margin-left: -30px;
|
|
||||||
margin-right: 25px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
button:focus,
|
|
||||||
button:focus-visible {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,129 +0,0 @@
|
|||||||
import "./index.scss";
|
|
||||||
import { Input, Select, DatePicker, Button } from "antd";
|
|
||||||
import FormatData from "../../../../../utils/formatData";
|
|
||||||
import React, { useState, useEffect } from "react";
|
|
||||||
import { SearchOutlined, RedoOutlined } from "@ant-design/icons";
|
|
||||||
|
|
||||||
interface SearchParamsType {
|
|
||||||
userName?: string;
|
|
||||||
phoneNumber?: number;
|
|
||||||
state?: string;
|
|
||||||
startTime?: string;
|
|
||||||
endTime?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SearchClick {
|
|
||||||
clickFromChild: (searchValues: any) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const UserTopSearch: React.FC<SearchClick> = ({ clickFromChild }) => {
|
|
||||||
const [searchValues, setSearchValues] = useState<SearchParamsType>({
|
|
||||||
userName: undefined,
|
|
||||||
phoneNumber: undefined,
|
|
||||||
state: undefined,
|
|
||||||
startTime: undefined,
|
|
||||||
endTime: undefined,
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleTimePikerValue = (dates: any[]) => {
|
|
||||||
setSearchValues({
|
|
||||||
...searchValues,
|
|
||||||
startTime: FormatData(dates[0].$d),
|
|
||||||
endTime: FormatData(dates[1].$d),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleInputValues = (e: any) => {
|
|
||||||
const { name, value } = e.target;
|
|
||||||
|
|
||||||
setSearchValues({ ...searchValues, [name]: value });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSearch = () => {
|
|
||||||
clickFromChild(searchValues);
|
|
||||||
};
|
|
||||||
const handleReset = () => {
|
|
||||||
clickFromChild("RESET");
|
|
||||||
setSearchValues({
|
|
||||||
...searchValues,
|
|
||||||
userName: undefined,
|
|
||||||
phoneNumber: undefined,
|
|
||||||
state: undefined,
|
|
||||||
startTime: undefined,
|
|
||||||
endTime: undefined,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {}, [searchValues]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="search-content">
|
|
||||||
<div className="content-top">
|
|
||||||
<div className="input-item">
|
|
||||||
<div>用户名称</div>
|
|
||||||
<Input
|
|
||||||
placeholder="请输入用户名称"
|
|
||||||
name="userName"
|
|
||||||
value={searchValues.userName}
|
|
||||||
onChange={handleInputValues}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="input-item">
|
|
||||||
<div>手机号码</div>
|
|
||||||
<Input
|
|
||||||
placeholder="请输入手机号码"
|
|
||||||
name="phoneNumber"
|
|
||||||
value={searchValues.phoneNumber}
|
|
||||||
onChange={handleInputValues}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="input-item">
|
|
||||||
<div>状态</div>
|
|
||||||
<Select
|
|
||||||
style={{ width: 120 }}
|
|
||||||
placeholder="用户状态"
|
|
||||||
allowClear
|
|
||||||
options={[
|
|
||||||
{ value: "1", label: "正常" },
|
|
||||||
{ value: "0", label: "停用" },
|
|
||||||
]}
|
|
||||||
value={searchValues.state}
|
|
||||||
onChange={(value: any) =>
|
|
||||||
setSearchValues({
|
|
||||||
...searchValues,
|
|
||||||
state: value,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="content-bottom">
|
|
||||||
<div className="time-selector">
|
|
||||||
<div>创建时间</div>
|
|
||||||
<DatePicker.RangePicker
|
|
||||||
showTime
|
|
||||||
className="time-picker"
|
|
||||||
placeholder={["开始时间", "结束时间"]}
|
|
||||||
onChange={(dates) => {
|
|
||||||
handleTimePikerValue(dates as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="search-button">
|
|
||||||
<Button type="primary" onClick={handleSearch}>
|
|
||||||
<SearchOutlined />
|
|
||||||
搜索
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className="reset-button" onClick={handleReset}>
|
|
||||||
<Button>
|
|
||||||
<RedoOutlined />
|
|
||||||
重置
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default UserTopSearch;
|
|
||||||
@@ -1,6 +1,12 @@
|
|||||||
#content {
|
#content {
|
||||||
display: flex;
|
display: flex;
|
||||||
border-top: 1px solid black;
|
border-top: 1px solid black;
|
||||||
|
.dept-content {
|
||||||
|
flex: 20%;
|
||||||
|
padding: 35px 12px 0 0;
|
||||||
|
height: calc(100vh - 85px);
|
||||||
|
}
|
||||||
|
|
||||||
.left-dept {
|
.left-dept {
|
||||||
flex: 20%;
|
flex: 20%;
|
||||||
padding: 35px 12px 0 0;
|
padding: 35px 12px 0 0;
|
||||||
@@ -14,6 +20,77 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
.search-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 35px 12px 0 0;
|
||||||
|
.content-top {
|
||||||
|
display: flex;
|
||||||
|
.input-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 20px;
|
||||||
|
width: 270px;
|
||||||
|
div {
|
||||||
|
width: 120px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:nth-child(3) {
|
||||||
|
div {
|
||||||
|
margin-right: -30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-bottom {
|
||||||
|
display: flex;
|
||||||
|
margin-left: -20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
div {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.time-selector {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: 120px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.time-picker {
|
||||||
|
width: 400px;
|
||||||
|
text-align: center;
|
||||||
|
margin-left: -30px;
|
||||||
|
margin-right: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.table-content {
|
||||||
|
margin: 12px 0 0 12px;
|
||||||
|
|
||||||
|
.ant-table-thead > tr > th {
|
||||||
|
color: #909399;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.ant-table-tbody > tr > td {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.add-content {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 12px;
|
||||||
|
margin-top: 20px;
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.user-mid-button {
|
.user-mid-button {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
|
|||||||
@@ -1,66 +1,772 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState, useMemo } from "react";
|
||||||
|
import {
|
||||||
|
Input,
|
||||||
|
Tree,
|
||||||
|
Select,
|
||||||
|
DatePicker,
|
||||||
|
Button,
|
||||||
|
Table,
|
||||||
|
Space,
|
||||||
|
Tag,
|
||||||
|
message,
|
||||||
|
Modal,
|
||||||
|
Form,
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
TreeSelect,
|
||||||
|
Radio,
|
||||||
|
} from "antd";
|
||||||
|
import type { RadioChangeEvent } from "antd";
|
||||||
import "./index.scss";
|
import "./index.scss";
|
||||||
import MyDeptTree from "./comps/user-dept-tree";
|
import FormatData from "../../../utils/formatData";
|
||||||
import UserTopSearch from "./comps/user-top-search";
|
import { SearchOutlined, RedoOutlined, PlusOutlined } from "@ant-design/icons";
|
||||||
import UserMidAddButton from "./comps/user-mid-add-button";
|
import {
|
||||||
import UserBottomList from "./comps/user-bottom-list";
|
getUserListApi,
|
||||||
import UserFromModal from "./comps/user-from-modal";
|
deleteUserApi,
|
||||||
|
getDeptTreeApi,
|
||||||
|
addUserApi,
|
||||||
|
getRoleListApi,
|
||||||
|
getUserInfoApi,
|
||||||
|
editUserApi,
|
||||||
|
} from "../../../api/system/users";
|
||||||
|
|
||||||
|
import {
|
||||||
|
EditOutlined,
|
||||||
|
DeleteOutlined,
|
||||||
|
ExclamationCircleFilled,
|
||||||
|
} from "@ant-design/icons";
|
||||||
|
|
||||||
export default function User() {
|
export default function User() {
|
||||||
const [echoId, setEchoId] = useState<number>();
|
const [echoId, setEchoId] = useState<number>();
|
||||||
const [modalTitle, setModalTitle] = useState<string>("");
|
const [modalTitle, setModalTitle] = useState<string>("");
|
||||||
const [buttonType, setButtonType] = useState<string>("");
|
const [buttonType, setButtonType] = useState<string>("");
|
||||||
const [searchValues, setSearchValues] = useState<any>({});
|
|
||||||
const [isShowModal, setIsShowModal] = useState<boolean>(false);
|
const [isShowModal, setIsShowModal] = useState<boolean>(false);
|
||||||
|
|
||||||
const handleSearch = (value: any) => {
|
const handleAddClick = () => {
|
||||||
if (value === "RESET") return setSearchValues({});
|
setModalTitle("新增用户");
|
||||||
setSearchValues({
|
setButtonType("ADD");
|
||||||
...searchValues,
|
setIsShowModal(true);
|
||||||
...value,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAddClick = (type: string, echoData?: number) => {
|
|
||||||
type === "ADD" ? setModalTitle("新增用户") : setModalTitle("修改用户");
|
|
||||||
if (type === "EDIT") {
|
|
||||||
setEchoId(echoData);
|
|
||||||
setButtonType(type);
|
|
||||||
setIsShowModal(true);
|
|
||||||
} else {
|
|
||||||
setButtonType(type);
|
|
||||||
setIsShowModal(true);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleAddOff = (value?: string) => {
|
const handleAddOff = (value?: string) => {
|
||||||
if (value === "UPDATE")
|
if (value === "UPDATE")
|
||||||
setSearchValues({
|
setQueryParams({
|
||||||
...searchValues,
|
...queryParams,
|
||||||
});
|
});
|
||||||
|
|
||||||
setIsShowModal(false);
|
setIsShowModal(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const [myData, setMyData] = useState<[]>([]);
|
||||||
|
const [searchValue, setSearchValue] = useState("");
|
||||||
|
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
||||||
|
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
|
||||||
|
|
||||||
|
const getDeptTreeData = async () => {
|
||||||
|
try {
|
||||||
|
const res = await getDeptTreeApi();
|
||||||
|
setMyData(res.data);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onExpand = (newExpandedKeys: React.Key[]) => {
|
||||||
|
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(searchValue);
|
||||||
|
const beforeStr = strTitle.substring(0, index);
|
||||||
|
const afterStr = strTitle.slice(index + searchValue.length);
|
||||||
|
const title =
|
||||||
|
index > -1 ? (
|
||||||
|
<span>
|
||||||
|
{beforeStr}
|
||||||
|
<span className="site-tree-search-value">{searchValue}</span>
|
||||||
|
{afterStr}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span>{strTitle}</span>
|
||||||
|
);
|
||||||
|
if (item.children) {
|
||||||
|
return { title, key: item.deptId, children: loop(item.children) };
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
title,
|
||||||
|
key: item.key,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
return loop(myData);
|
||||||
|
}, [myData]);
|
||||||
|
|
||||||
|
const handleTimePikerValue = (dates: any[]) => {
|
||||||
|
setQueryParams({
|
||||||
|
...queryParams,
|
||||||
|
startTime: FormatData(dates[0].$d),
|
||||||
|
endTime: FormatData(dates[1].$d),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputValues = (e: any) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
|
||||||
|
setQueryParams({ ...queryParams, [name]: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReset = async () => {
|
||||||
|
getUserList({});
|
||||||
|
setQueryParams({});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearch = () => {
|
||||||
|
getUserList(queryParams);
|
||||||
|
};
|
||||||
|
|
||||||
|
interface QueryParamsType {
|
||||||
|
userName?: string;
|
||||||
|
phoneNumber?: string;
|
||||||
|
state?: string;
|
||||||
|
startTime?: string;
|
||||||
|
endTime?: string;
|
||||||
|
pageNum?: number;
|
||||||
|
pageSize?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [listData, setListData] = useState([]);
|
||||||
|
const [update, setUpdate] = useState<any>("");
|
||||||
|
const [currentPage, setCurrentPage] = useState<number>(1);
|
||||||
|
const [messageApi, contextHolder] = message.useMessage();
|
||||||
|
const [queryParams, setQueryParams] = useState<QueryParamsType>({
|
||||||
|
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 : "null"}</>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "手机号码",
|
||||||
|
key: "phoneNumber",
|
||||||
|
dataIndex: "phoneNumber",
|
||||||
|
render: (text: string) => <>{text ? text : "null"}</>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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={() => handleEditClick(record)}
|
||||||
|
style={{ color: " #58aaff" }}
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</a>
|
||||||
|
<DeleteOutlined />
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
onClick={() => handleDeleteClick(record)}
|
||||||
|
style={{ color: " #58aaff" }}
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</a>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const getUserList = async (newQueryParams: object) => {
|
||||||
|
try {
|
||||||
|
const { code, data } = await getUserListApi(newQueryParams);
|
||||||
|
if (code === 1000) {
|
||||||
|
setListData(data.rows);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePageChange = (page: number) => {
|
||||||
|
setCurrentPage(page);
|
||||||
|
setQueryParams({
|
||||||
|
...queryParams,
|
||||||
|
pageNum: page,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditClick = (echoData: any) => {
|
||||||
|
setEchoId(echoData.userId);
|
||||||
|
setIsShowModal(true);
|
||||||
|
setButtonType("EDIT");
|
||||||
|
setModalTitle("修改用户");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteClick = 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: "删除成功",
|
||||||
|
});
|
||||||
|
setUpdate({
|
||||||
|
...update,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
messageApi.open({
|
||||||
|
type: "error",
|
||||||
|
content: "删除失败",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
messageApi.open({
|
||||||
|
type: "warning",
|
||||||
|
content: "取消成功",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
console.log(queryParams);
|
||||||
|
}, [queryParams, update, queryParams, echoId]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getUserList({});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
interface AddUserType {
|
||||||
|
deptId: number | null;
|
||||||
|
email: string;
|
||||||
|
nickName: string;
|
||||||
|
password: string;
|
||||||
|
phoneNumber: string;
|
||||||
|
postIds: number[];
|
||||||
|
roleIds: number[];
|
||||||
|
sex: string;
|
||||||
|
state: string;
|
||||||
|
userName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const [radioValue, setRadioValue] = useState(1);
|
||||||
|
const [roleList, setRoleList] = useState<any[]>([]);
|
||||||
|
const [treeValue, setTreeValue] = useState<string>();
|
||||||
|
// 用于自定义TreeSelect内容
|
||||||
|
const fieldNames = {
|
||||||
|
label: "deptName",
|
||||||
|
title: "deptName",
|
||||||
|
value: "deptId",
|
||||||
|
key: "deptName",
|
||||||
|
};
|
||||||
|
// 用于新增用户参数
|
||||||
|
let addUserParams: AddUserType = {
|
||||||
|
deptId: null,
|
||||||
|
email: "",
|
||||||
|
nickName: "",
|
||||||
|
password: "",
|
||||||
|
phoneNumber: "",
|
||||||
|
postIds: [],
|
||||||
|
roleIds: [],
|
||||||
|
sex: "",
|
||||||
|
state: "",
|
||||||
|
userName: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
const getUserInfo = async () => {
|
||||||
|
try {
|
||||||
|
const { code, data } = await getUserInfoApi(echoId);
|
||||||
|
if (code === 1000) {
|
||||||
|
handleEchoForm(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 handleEchoForm = (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 handleAddConfirm = () => {
|
||||||
|
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: "创建成功",
|
||||||
|
});
|
||||||
|
handleClearForm();
|
||||||
|
} else {
|
||||||
|
messageApi.open({
|
||||||
|
type: "error",
|
||||||
|
content: "用户名已经存在",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditUser = async () => {
|
||||||
|
console.log(addUserParams);
|
||||||
|
|
||||||
|
const { code } = await editUserApi(addUserParams);
|
||||||
|
try {
|
||||||
|
if (code === 1000) {
|
||||||
|
messageApi.open({
|
||||||
|
type: "success",
|
||||||
|
content: "修改成功",
|
||||||
|
});
|
||||||
|
handleClearForm();
|
||||||
|
} else {
|
||||||
|
messageApi.open({
|
||||||
|
type: "error",
|
||||||
|
content: "修改失败",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
handleClearForm();
|
||||||
|
setQueryParams;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClearForm = () => {
|
||||||
|
form.resetFields();
|
||||||
|
setIsShowModal(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onRadioChange = (e: RadioChangeEvent) => {
|
||||||
|
setRadioValue(e.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onTreeSelectChange = (newValue: string) => {
|
||||||
|
setTreeValue(newValue);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getDeptTreeData();
|
||||||
|
getRoleList();
|
||||||
|
getUserInfo();
|
||||||
|
}, [echoId]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div id="content">
|
<div id="content">
|
||||||
<MyDeptTree />
|
<div className="dept-content">
|
||||||
<div className="right-user">
|
<Input
|
||||||
<UserTopSearch clickFromChild={handleSearch}></UserTopSearch>
|
style={{ marginBottom: 8 }}
|
||||||
<UserMidAddButton clickFromChild={handleAddClick}></UserMidAddButton>
|
prefix={<SearchOutlined />}
|
||||||
<UserBottomList
|
placeholder="请输入部门名称"
|
||||||
clickFromChild={handleAddClick}
|
// onChange={onChange}
|
||||||
searchValues={searchValues}
|
/>
|
||||||
></UserBottomList>
|
<Tree
|
||||||
<UserFromModal
|
onExpand={onExpand}
|
||||||
isShowModal={isShowModal}
|
expandedKeys={expandedKeys}
|
||||||
modalTitle={modalTitle}
|
autoExpandParent={autoExpandParent}
|
||||||
echoId={echoId}
|
treeData={treeData}
|
||||||
buttonType={buttonType}
|
/>
|
||||||
clickFromChild={handleAddOff}
|
|
||||||
></UserFromModal>
|
|
||||||
</div>
|
</div>
|
||||||
|
<>
|
||||||
|
<div className="right-user">
|
||||||
|
<div className="search-content">
|
||||||
|
<>
|
||||||
|
<div className="content-top">
|
||||||
|
<div className="input-item">
|
||||||
|
<div>用户名称</div>
|
||||||
|
<Input
|
||||||
|
placeholder="请输入用户名称"
|
||||||
|
name="userName"
|
||||||
|
allowClear
|
||||||
|
value={queryParams.userName}
|
||||||
|
onChange={handleInputValues}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="input-item">
|
||||||
|
<div>手机号码</div>
|
||||||
|
<Input
|
||||||
|
placeholder="请输入手机号码"
|
||||||
|
name="phoneNumber"
|
||||||
|
allowClear
|
||||||
|
value={queryParams.phoneNumber}
|
||||||
|
onChange={handleInputValues}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="input-item">
|
||||||
|
<div>状态</div>
|
||||||
|
<Select
|
||||||
|
style={{ width: 120 }}
|
||||||
|
placeholder="用户状态"
|
||||||
|
allowClear
|
||||||
|
options={[
|
||||||
|
{ value: "1", label: "正常" },
|
||||||
|
{ value: "0", label: "停用" },
|
||||||
|
]}
|
||||||
|
value={queryParams.state}
|
||||||
|
onChange={(value: any) =>
|
||||||
|
setQueryParams({
|
||||||
|
...queryParams,
|
||||||
|
state: value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="content-bottom">
|
||||||
|
<div className="time-selector">
|
||||||
|
<div>创建时间</div>
|
||||||
|
<DatePicker.RangePicker
|
||||||
|
showTime
|
||||||
|
className="time-picker"
|
||||||
|
placeholder={["开始时间", "结束时间"]}
|
||||||
|
onChange={(dates) => {
|
||||||
|
handleTimePikerValue(dates as any);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="search-button">
|
||||||
|
<Button type="primary" onClick={handleSearch}>
|
||||||
|
<SearchOutlined />
|
||||||
|
搜索
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="reset-button" onClick={handleReset}>
|
||||||
|
<Button>
|
||||||
|
<RedoOutlined />
|
||||||
|
重置
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
</div>
|
||||||
|
<div className="add-content">
|
||||||
|
<>
|
||||||
|
<Button type="primary" onClick={handleAddClick}>
|
||||||
|
<PlusOutlined />
|
||||||
|
新增
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
</div>
|
||||||
|
<div className="table-content">
|
||||||
|
<>
|
||||||
|
{contextHolder}
|
||||||
|
<Table
|
||||||
|
columns={columns}
|
||||||
|
dataSource={listData}
|
||||||
|
className="article-table"
|
||||||
|
pagination={{
|
||||||
|
onChange: handlePageChange,
|
||||||
|
showQuickJumper: true,
|
||||||
|
showTotal: (total, range) =>
|
||||||
|
`第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* <UserFromModal
|
||||||
|
clickFromChild={handleAddOff}
|
||||||
|
></UserFromModal> */}
|
||||||
|
|
||||||
|
<>
|
||||||
|
{contextHolder}
|
||||||
|
<Modal
|
||||||
|
title={modalTitle}
|
||||||
|
width={700}
|
||||||
|
open={isShowModal}
|
||||||
|
onOk={handleAddConfirm}
|
||||||
|
onCancel={handleCancel}
|
||||||
|
>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
name="basic"
|
||||||
|
initialValues={{ remember: true }}
|
||||||
|
labelCol={{ span: 6 }}
|
||||||
|
onFinish={handleAddConfirm}
|
||||||
|
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
|
||||||
|
defaultValue={""}
|
||||||
|
options={[
|
||||||
|
{ value: "0", label: "男" },
|
||||||
|
{ value: "1", label: "女" },
|
||||||
|
{ value: "2", label: "未知" },
|
||||||
|
]}
|
||||||
|
placeholder="请选择用户性别"
|
||||||
|
/>
|
||||||
|
</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
|
||||||
|
defaultValue={""}
|
||||||
|
style={{ width: "100%" }}
|
||||||
|
value={treeValue}
|
||||||
|
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
|
||||||
|
placeholder="请选择"
|
||||||
|
allowClear
|
||||||
|
fieldNames={fieldNames}
|
||||||
|
treeDefaultExpandAll
|
||||||
|
onChange={onTreeSelectChange}
|
||||||
|
treeData={myData}
|
||||||
|
/>
|
||||||
|
</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={onRadioChange} 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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user