唐简: 完成代码结构优化重构
This commit is contained in:
Jim__TT
@@ -14,5 +14,7 @@ module.exports = {
|
||||
"warn",
|
||||
{ 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 {
|
||||
display: flex;
|
||||
border-top: 1px solid black;
|
||||
.dept-content {
|
||||
flex: 20%;
|
||||
padding: 35px 12px 0 0;
|
||||
height: calc(100vh - 85px);
|
||||
}
|
||||
|
||||
.left-dept {
|
||||
flex: 20%;
|
||||
padding: 35px 12px 0 0;
|
||||
@@ -14,6 +20,77 @@
|
||||
display: flex;
|
||||
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 {
|
||||
display: flex;
|
||||
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 MyDeptTree from "./comps/user-dept-tree";
|
||||
import UserTopSearch from "./comps/user-top-search";
|
||||
import UserMidAddButton from "./comps/user-mid-add-button";
|
||||
import UserBottomList from "./comps/user-bottom-list";
|
||||
import UserFromModal from "./comps/user-from-modal";
|
||||
import FormatData from "../../../utils/formatData";
|
||||
import { SearchOutlined, RedoOutlined, PlusOutlined } from "@ant-design/icons";
|
||||
import {
|
||||
getUserListApi,
|
||||
deleteUserApi,
|
||||
getDeptTreeApi,
|
||||
addUserApi,
|
||||
getRoleListApi,
|
||||
getUserInfoApi,
|
||||
editUserApi,
|
||||
} from "../../../api/system/users";
|
||||
|
||||
import {
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
ExclamationCircleFilled,
|
||||
} from "@ant-design/icons";
|
||||
|
||||
export default function User() {
|
||||
const [echoId, setEchoId] = useState<number>();
|
||||
const [modalTitle, setModalTitle] = useState<string>("");
|
||||
const [buttonType, setButtonType] = useState<string>("");
|
||||
const [searchValues, setSearchValues] = useState<any>({});
|
||||
const [isShowModal, setIsShowModal] = useState<boolean>(false);
|
||||
|
||||
const handleSearch = (value: any) => {
|
||||
if (value === "RESET") return setSearchValues({});
|
||||
setSearchValues({
|
||||
...searchValues,
|
||||
...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 handleAddClick = () => {
|
||||
setModalTitle("新增用户");
|
||||
setButtonType("ADD");
|
||||
setIsShowModal(true);
|
||||
};
|
||||
|
||||
const handleAddOff = (value?: string) => {
|
||||
if (value === "UPDATE")
|
||||
setSearchValues({
|
||||
...searchValues,
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
});
|
||||
|
||||
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 (
|
||||
<div id="content">
|
||||
<MyDeptTree />
|
||||
<div className="right-user">
|
||||
<UserTopSearch clickFromChild={handleSearch}></UserTopSearch>
|
||||
<UserMidAddButton clickFromChild={handleAddClick}></UserMidAddButton>
|
||||
<UserBottomList
|
||||
clickFromChild={handleAddClick}
|
||||
searchValues={searchValues}
|
||||
></UserBottomList>
|
||||
<UserFromModal
|
||||
isShowModal={isShowModal}
|
||||
modalTitle={modalTitle}
|
||||
echoId={echoId}
|
||||
buttonType={buttonType}
|
||||
clickFromChild={handleAddOff}
|
||||
></UserFromModal>
|
||||
<div className="dept-content">
|
||||
<Input
|
||||
style={{ marginBottom: 8 }}
|
||||
prefix={<SearchOutlined />}
|
||||
placeholder="请输入部门名称"
|
||||
// onChange={onChange}
|
||||
/>
|
||||
<Tree
|
||||
onExpand={onExpand}
|
||||
expandedKeys={expandedKeys}
|
||||
autoExpandParent={autoExpandParent}
|
||||
treeData={treeData}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user