odjbin/fateverse-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

唐简：增加新增，修改，查询功能，完成用户管理页面开发

Browse Source
This commit is contained in:
Jim__TT
2023-10-21 00:00:17 +08:00
parent eaee821e72
commit a8a6ae2669
9 changed files with 417 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.cjs
View File

@@ -14,7 +14,5 @@ module.exports = {
"warn",
{ allowConstantExport: true },
],
"@typescript-eslint/no-unused-vars": "off",
"@typescript-eslint/no-explicit-any": "off",
},
};

69
src/api/system/users.ts
View File

@@ -17,16 +17,46 @@ export const getDeptTreeApi = () => {
});
};
export const getUserListApi = (data?: userListParams) => {
export const getUserInfoApi = (userId: string) => {
return request({
url: "/admin/user/info/" + userId,
method: "get",
});
};
export const getRoleListApi = () => {
return request({
url: "/admin/role",
method: "get",
});
};
export const getPostListApi = () => {
return request({
url: "/admin/post",
method: "get",
});
};
export const getUserListApi = (data: userListParams) => {
const {
userName,
phoneNumber,
state,
startTime,
endTime,
pageNum,
pageSize,
} = data;
const params = data
? {
userName: data.userName,
phoneNumber: data.phoneNumber,
state: data.state,
startTime: data.startTime,
endTime: data.endTime,
pageNum: data.pageNum,
pageSize: 13,
userName,
phoneNumber,
state,
startTime,
endTime,
pageNum,
pageSize: 500,
}
: undefined;
@@ -36,3 +66,26 @@ export const getUserListApi = (data?: userListParams) => {
params,
});
};
export const addUserApi = (data: any) => {
return request({
url: "/admin/user",
method: "post",
data,
});
};
export const editUserApi = (data: any) => {
return request({
url: "/admin/user",
method: "put",
data,
});
};
export const deleteUserApi = (userId: any) => {
return request({
url: "/admin/user/" + userId,
method: "delete",
});
};

161
src/view/system/user/comps/user-bottom-list/index.tsx
View File

@@ -1,13 +1,18 @@
import React, { useState, useEffect } from "react";
import { Table, Space, Tag } from "antd";
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
import "./index.scss";
import { getUserListApi } from "../../../../../api/system/users";
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) => void;
clickFromChild: (type: string, echoData?: number) => void;
searchValues: any;
}
interface QueryParamsType {
userName?: string;
phoneNumber?: string;
@@ -22,7 +27,10 @@ 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,
@@ -32,39 +40,6 @@ const UserBottomList: React.FC<AddButtonClickType> = ({
pageNum: undefined,
pageSize: undefined,
});
const handlePageChange = (page: number) => {
setCurrentPage(page);
setQueryParams({
...queryParams,
pageNum: page,
});
};
const handleAddClick = () => {
clickFromChild("FIX");
};
const getUserList = async () => {
try {
const { userName, phoneNumber, state, startTime, endTime } = searchValues;
setQueryParams({
...queryParams,
userName,
phoneNumber,
state,
startTime,
endTime,
});
const { code, data } = await getUserListApi(queryParams);
if (code === 1000) {
setListData(data.rows);
}
} catch (err) {
console.error(err);
}
};
const [listData, setListData] = useState([]);
const columns = [
{
title: "序号",
@@ -86,7 +61,7 @@ const UserBottomList: React.FC<AddButtonClickType> = ({
},
{
title: "部门",
key: "deptName",
key: "deptId",
dataIndex: "deptName",
render: (text: string) => <>{text ? text : "null"}</>,
},
@@ -120,19 +95,23 @@ const UserBottomList: React.FC<AddButtonClickType> = ({
title: "操作",
key: "operate",
dataIndex: "operate",
render: () => (
render: (_: string, record: object) => (
<div style={{ color: "#58aaff" }}>
<Space>
<EditOutlined />
<a
href="#"
onClick={() => handleAddClick()}
onClick={() => handleEditClick(record)}
style={{ color: " #58aaff" }}
>
编辑
</a>
<DeleteOutlined />
<a href="#" style={{ color: " #58aaff" }}>
<a
href="#"
onClick={() => handleDeleteClick(record)}
style={{ color: " #58aaff" }}
>
删除
</a>
</Space>
@@ -141,25 +120,93 @@ const UserBottomList: React.FC<AddButtonClickType> = ({
},
];
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();
console.log(searchValues);
}, [searchValues]);
}, [searchValues, update]);
return (
<div className="tree-content">
<Table
columns={columns}
dataSource={listData}
className="article-table"
pagination={{
onChange: handlePageChange,
showQuickJumper: true,
showTotal: (total, range) =>
`第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
}}
/>
</div>
<>
<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>
</>
);
};

26
src/view/system/user/comps/user-dept-tree/index.tsx
View File

@@ -1,15 +1,15 @@
import React, { useMemo, useState, useEffect } from "react";
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";
import "./index.scss";
const MyDeptTree: React.FC = () => {
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
const [myData, setMyData] = useState<any[]>([]);
const [searchValue, setSearchValue] = useState("");
const [autoExpandParent, setAutoExpandParent] = useState(true);
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
const [myData, setMyData] = useState<any[]>([]);
const getDeptTreeData = async () => {
try {
const res = await getDeptTreeApi();
@@ -24,24 +24,6 @@ const MyDeptTree: React.FC = () => {
setAutoExpandParent(false);
};
// const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// const { value } = e.target;
// const newExpandedKeys = dataList
// .map((item) => {
// if (item.title.indexOf(value) > -1) {
// return getParentKey(item.key, defaultData);
// }
// return null;
// })
// .filter(
// (item, i, self): item is React.Key =>
// !!(item && self.indexOf(item) === i)
// );
// setExpandedKeys(newExpandedKeys);
// setSearchValue(value);
// setAutoExpandParent(true);
// };
const treeData = useMemo(() => {
const loop = (data: any[]): any[] =>
data.map((item) => {

287
src/view/system/user/comps/user-from-modal/index.tsx
View File

@@ -8,31 +8,83 @@ import {
Select,
TreeSelect,
Radio,
message,
} from "antd";
import type { RadioChangeEvent } from "antd";
import React, { useEffect, useState } from "react";
import { getDeptTreeApi } from "../../../../../api/system/users";
import {
getDeptTreeApi,
addUserApi,
getRoleListApi,
getUserInfoApi,
editUserApi,
} from "../../../../../api/system/users";
interface ShowModal {
interface ShowModalType {
isShowModal: boolean;
clickFromChild: () => void;
clickFromChild: (UPDATE?: string) => void;
modalTitle: string;
echoId: any;
buttonType: string;
}
type FieldType = {
username?: string;
password?: string;
remember?: string;
};
const UserFromModal: React.FC<ShowModal> = (props) => {
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 [value, setValue] = useState<string>();
const [roleList, setRoleList] = useState<any[]>([]);
const [treeValue, setTreeValue] = useState<string>();
const [messageApi, contextHolder] = message.useMessage();
// 用于自定义TreeSelect内容
const fieldNames = {
label: "deptName",
title: "deptName",
value: "deptName",
value: "deptId",
key: "deptName",
}; // 用于自定义TreeSelect内容
};
// 用于新增用户参数
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 {
@@ -43,158 +95,254 @@ const UserFromModal: React.FC<ShowModal> = (props) => {
}
};
const onChange = (newValue: string) => {
setValue(newValue);
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 handleOk = () => {
props.clickFromChild();
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 = () => {
props.clickFromChild();
clickFromChild();
handleClearForm();
};
const onFinish = (values: any) => {
console.log("Success:", values);
const handleClearForm = () => {
form.resetFields();
};
const onFinishFailed = (errorInfo: any) => {
console.log("Failed:", errorInfo);
};
const [radioValue, setRadioValue] = useState(1);
const onRadioChange = (e: RadioChangeEvent) => {
setRadioValue(e.target.value);
};
const onTreeSelectChange = (newValue: string) => {
setTreeValue(newValue);
};
useEffect(() => {
getDeptTreeData();
}, []);
getRoleList();
getUserInfo();
}, [echoId]);
return (
<>
{contextHolder}
<Modal
title={props.modalTitle}
title={modalTitle}
width={700}
open={props.isShowModal}
onOk={handleOk}
open={isShowModal}
onOk={handleAddConfirm}
onCancel={handleCancel}
>
<Form
form={form}
name="basic"
initialValues={{ remember: true }}
labelCol={{ span: 6 }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
onFinish={handleAddConfirm}
autoComplete="off"
className="modal-form"
>
<Row>
<Col span={12}>
<Form.Item<FieldType>
<Form.Item
label="用户名称"
name="用户名称"
name="userName"
rules={[{ required: true, message: "请输入用户名称" }]}
>
<Input placeholder="请输入用户名称" />
<Input defaultValue={""} placeholder="请输入用户名称" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item<FieldType>
<Form.Item
label="用户昵称"
name="用户昵称"
name="nickName"
rules={[{ required: true, message: "请输入用户昵称" }]}
>
<Input placeholder="请输入用户昵称" />
<Input defaultValue={""} placeholder="请输入用户昵称" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item<FieldType>
<Form.Item
label="用户性别"
name="用户性别"
name="sex"
rules={[{ required: false }]}
>
<Select
defaultValue={""}
options={[
{ value: "男", label: "男" },
{ value: "女", label: "女" },
{ value: "未知", label: "未知" },
{ value: "0", label: "男" },
{ value: "1", label: "女" },
{ value: "2", label: "未知" },
]}
placeholder="请选择用户性别"
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item<FieldType>
<Form.Item
label="用户密码"
name="用户密码"
name="password"
rules={[{ required: true, message: "请输入用户密码" }]}
>
<Input.Password placeholder="请输入密码" />
<Input.Password defaultValue={""} placeholder="请输入密码" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item<FieldType>
<Form.Item
label="归属部门"
name="归属部门"
name="deptId"
rules={[{ required: false }]}
>
<TreeSelect
showSearch
defaultValue={""}
style={{ width: "100%" }}
value={value}
value={treeValue}
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
placeholder="请选择"
allowClear
fieldNames={fieldNames}
treeDefaultExpandAll
onChange={onChange}
onChange={onTreeSelectChange}
treeData={deptList}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item<FieldType>
<Form.Item
label="手机号码"
name="手机号码"
name="phoneNumber"
rules={[{ required: false }]}
>
<Input placeholder="请输入手机号码" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item<FieldType>
<Form.Item
label="邮箱"
name="邮箱"
name="email"
rules={[{ required: false }]}
>
<Input placeholder="请输入邮箱" />
<Input defaultValue={""} placeholder="请输入邮箱" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item<FieldType>
<Form.Item
label="状态"
name="状态"
name="state"
rules={[
{ required: false, message: "Please input your password!" },
]}
>
<Radio.Group onChange={onRadioChange} value={radioValue}>
<Radio value={1}>正常</Radio>
<Radio value={2}>停用</Radio>
<Radio value="1">正常</Radio>
<Radio value="0">停用</Radio>
</Radio.Group>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item<FieldType>
<Form.Item
label="岗位"
name="岗位"
name="postIds"
rules={[
{ required: false, message: "Please input your password!" },
]}
>
<Select
mode="multiple"
defaultValue={[]}
options={[
{ value: "董事长", label: "董事长" },
{ value: "项目经理", label: "项目经理" },
@@ -206,27 +354,26 @@ const UserFromModal: React.FC<ShowModal> = (props) => {
</Form.Item>
</Col>
<Col span={12}>
<Form.Item<FieldType>
<Form.Item
label="角色"
name="角色"
name="roleIds"
rules={[
{ required: false, message: "Please input your password!" },
]}
>
<Select
options={[
{ value: "超级管理员", label: "超级管理员" },
{ value: "普通角色", label: "普通角色" },
]}
placeholder="请选择岗位"
/>
<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<FieldType>
<Form.Item
label="备注"
labelCol={{ span: 3 }}
name="备注"
rules={[
{ required: false, message: "Please input your password!" },
]}

2
src/view/system/user/comps/user-mid-add-button/index.tsx
View File

@@ -4,7 +4,7 @@ import { PlusOutlined } from "@ant-design/icons";
import "./index.scss";
interface AddButtonClick {
clickFromChild: (type: string) => void;
clickFromChild: (type: string, echoData?: number) => void;
}
const UserMidAddButton: React.FC<AddButtonClick> = ({ clickFromChild }) => {

13
src/view/system/user/comps/user-top-search/index.tsx
View File

@@ -1,9 +1,8 @@
import React, { useState, useEffect, Children } from "react";
import "./index.scss";
import { Input, Select, DatePicker, Button } from "antd";
import { SearchOutlined, RedoOutlined } from "@ant-design/icons";
import FormatData from "../../../../../utils/formatData";
import React, { useState, useEffect } from "react";
import { SearchOutlined, RedoOutlined } from "@ant-design/icons";
interface SearchParamsType {
userName?: string;
@@ -36,7 +35,6 @@ const UserTopSearch: React.FC<SearchClick> = ({ clickFromChild }) => {
const handleInputValues = (e: any) => {
const { name, value } = e.target;
console.log(value);
setSearchValues({ ...searchValues, [name]: value });
};
@@ -45,7 +43,7 @@ const UserTopSearch: React.FC<SearchClick> = ({ clickFromChild }) => {
clickFromChild(searchValues);
};
const handleReset = () => {
clickFromChild(null);
clickFromChild("RESET");
setSearchValues({
...searchValues,
userName: undefined,
@@ -56,9 +54,7 @@ const UserTopSearch: React.FC<SearchClick> = ({ clickFromChild }) => {
});
};
useEffect(() => {
console.log(searchValues);
}, [searchValues]);
useEffect(() => {}, [searchValues]);
return (
<div className="search-content">
@@ -105,6 +101,7 @@ const UserTopSearch: React.FC<SearchClick> = ({ clickFromChild }) => {
<div className="time-selector">
<div>创建时间</div>
<DatePicker.RangePicker
showTime
className="time-picker"
placeholder={["开始时间", "结束时间"]}
onChange={(dates) => {

3
src/view/system/user/index.scss
View File

@@ -13,8 +13,7 @@
height: 190px;
display: flex;
flex-direction: column;
.user-top-search {
}
.user-mid-button {
display: flex;
margin-left: 12px;

29
src/view/system/user/index.tsx
View File

@@ -8,21 +8,38 @@ import UserBottomList from "./comps/user-bottom-list";
import UserFromModal from "./comps/user-from-modal";
export default function User() {
const [isShowModal, setIsShowModal] = useState<boolean>(false);
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 = (searchValues: any) => {
const handleSearch = (value: any) => {
if (value === "RESET") return setSearchValues({});
setSearchValues({
...searchValues,
...value,
});
};
const handleAddClick = (type: string) => {
const handleAddClick = (type: string, echoData?: number) => {
type === "ADD" ? setModalTitle("新增用户") : setModalTitle("修改用户");
setIsShowModal(true);
if (type === "EDIT") {
setEchoId(echoData);
setButtonType(type);
setIsShowModal(true);
} else {
setButtonType(type);
setIsShowModal(true);
}
};
const handleAddOff = () => {
const handleAddOff = (value?: string) => {
if (value === "UPDATE")
setSearchValues({
...searchValues,
});
setIsShowModal(false);
};
@@ -39,6 +56,8 @@ export default function User() {
<UserFromModal
isShowModal={isShowModal}
modalTitle={modalTitle}
echoId={echoId}
buttonType={buttonType}
clickFromChild={handleAddOff}
></UserFromModal>
</div>