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

唐简：修复部门树点击无法搜索bug，修复点击重置按钮无法清空时间选择框bug

Browse Source
This commit is contained in:
Jim__TT
2023-10-31 23:09:34 +08:00
parent 6f9a8906eb
commit 9015599fcb
3 changed files with 104 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -17,6 +17,7 @@
"dayjs": "^1.11.10", "dayjs": "^1.11.10",
"echarts": "^5.4.3", "echarts": "^5.4.3",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"moment": "^2.29.4",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",

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

@@ -1,6 +1,7 @@
import request from "../../utils/request"; import request from "../../utils/request";
interface userListParams { interface userListParams {
deptId?: string;
userName?: string; userName?: string;
phoneNumber?: string; phoneNumber?: string;
state?: string; state?: string;
@@ -40,6 +41,7 @@ export const getPostListApi = () => {
export const getUserListApi = (data: userListParams) => { export const getUserListApi = (data: userListParams) => {
const { const {
deptId,
userName, userName,
phoneNumber, phoneNumber,
state, state,
@@ -50,6 +52,7 @@ export const getUserListApi = (data: userListParams) => {
} = data; } = data;
const params = data const params = data
? { ? {
deptId,
userName, userName,
phoneNumber, phoneNumber,
state, state,

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

@@ -32,15 +32,14 @@ import {
getUserInfoApi, getUserInfoApi,
editUserApi, editUserApi,
} from "../../../api/system/users"; } from "../../../api/system/users";
import dataLocale from "antd/es/date-picker/locale/zh_CN";
import FormatData from "../../../utils/formatData"; import React, { useEffect, useState, useMemo } from "react";
import locale from "antd/es/date-picker/locale/zh_CN"; import { SearchOutlined, PlusOutlined } from "@ant-design/icons";
import React, { useEffect, useState, useMemo, useRef } from "react";
import { SearchOutlined, RedoOutlined, PlusOutlined } from "@ant-design/icons";
export default function User() { export default function User() {
const [form] = Form.useForm();
const postIdList: number[] = []; const postIdList: number[] = [];
const [form] = Form.useForm();
const [searchForm] = Form.useForm();
const [echoId, setEchoId] = useState<any>(); const [echoId, setEchoId] = useState<any>();
const [myTreeData, setMyTreeData] = useState<[]>([]); const [myTreeData, setMyTreeData] = useState<[]>([]);
const [listData, setListData] = useState([]); const [listData, setListData] = useState([]);
@@ -63,6 +62,7 @@ export default function User() {
key: "deptName", key: "deptName",
}; };
const [queryParams, setQueryParams] = useState<QueryParamsType>({ const [queryParams, setQueryParams] = useState<QueryParamsType>({
deptId: undefined,
userName: undefined, userName: undefined,
phoneNumber: undefined, phoneNumber: undefined,
state: undefined, state: undefined,
@@ -152,7 +152,6 @@ export default function User() {
]; ];
interface AddUserType { interface AddUserType {
deptId: number | null;
email: string; email: string;
nickName: string; nickName: string;
password: string; password: string;
@@ -165,17 +164,17 @@ export default function User() {
} }
interface QueryParamsType { interface QueryParamsType {
deptId?: number;
userName?: string; userName?: string;
phoneNumber?: string; phoneNumber?: string;
state?: string; state?: string;
startTime?: string | null; startTime?: string | any;
endTime?: string | null; endTime?: string | any;
pageNum?: number; pageNum?: number;
pageSize?: number; pageSize?: number;
} }
let addUserParams: AddUserType = { let addUserParams: AddUserType = {
deptId: null,
email: "", email: "",
nickName: "", nickName: "",
password: "", password: "",
@@ -202,8 +201,6 @@ export default function User() {
const getUserList = async (newQueryParams: object) => { const getUserList = async (newQueryParams: object) => {
try { try {
console.log(newQueryParams);
const { code, data } = await getUserListApi(newQueryParams); const { code, data } = await getUserListApi(newQueryParams);
if (code === 1000) { if (code === 1000) {
setListData(data.rows); setListData(data.rows);
@@ -314,16 +311,12 @@ export default function User() {
}; };
const handleReset = async () => { const handleReset = async () => {
setQueryParams({ searchForm.resetFields();
startTime: null,
endTime: null,
});
setQueryParams({}); setQueryParams({});
getUserList({}); getUserList({});
}; };
const handleSearch = () => { const handleSearch = () => {
console.log(queryParams);
getUserList(queryParams); getUserList(queryParams);
}; };
@@ -359,12 +352,13 @@ export default function User() {
}); });
}; };
const handleTimePikerValue = (dates: any[]) => { const handleTimePikerValue = (_: any, dates: string[]) => {
setQueryParams({ setQueryParams({
...queryParams, ...queryParams,
startTime: FormatData(dates[0].$d), startTime: dates[0],
endTime: FormatData(dates[1].$d), endTime: dates[1],
}); });
searchForm.setFieldsValue({ dataTime: [dates[0], dates[1]] });
}; };
const handleSearchValues = (e: any) => { const handleSearchValues = (e: any) => {
@@ -379,6 +373,14 @@ export default function User() {
}); });
}; };
const handleTreeSelect = (deptId: any) => {
console.log(queryParams);
getUserList({
...queryParams,
deptId: deptId[0],
});
};
const handleEcho = (data: any) => { const handleEcho = (data: any) => {
const { userName, nickName, sex, state, phoneNumber, deptId, email } = const { userName, nickName, sex, state, phoneNumber, deptId, email } =
data.user; data.user;
@@ -441,7 +443,6 @@ export default function User() {
const { value } = e.target ? e.target : null; const { value } = e.target ? e.target : null;
setSearchTreeValue(value); setSearchTreeValue(value);
handleExpandKeys(value, treeData); handleExpandKeys(value, treeData);
console.log("postIdList:", postIdList);
setExpandedKeys(postIdList); setExpandedKeys(postIdList);
setAutoExpandParent(true); setAutoExpandParent(true);
}; };
@@ -488,7 +489,7 @@ export default function User() {
useEffect(() => { useEffect(() => {
getUserList({}); getUserList({});
}, [queryParams]); }, []);
return ( return (
<div id="content"> <div id="content">
@@ -506,81 +507,87 @@ export default function User() {
expandedKeys={expandedKeys} expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent} autoExpandParent={autoExpandParent}
treeData={treeData} treeData={treeData}
onSelect={handleTreeSelect}
/> />
</div> </div>
<> <>
<div className="right-user"> <div className="right-user">
<div className="search-content"> <Form
<> layout="inline"
<div className="content-top"> form={searchForm}
<div className="input-item"> onFinish={handleSearch}
<div>用户名称</div> style={{ fontWeight: "700", marginLeft: 12, marginTop: 23 }}
<Input >
placeholder="请输入用户名称" <Form.Item
name="userName" label="用户名称"
allowClear name="userName"
value={queryParams.userName} style={{ width: 300 + "px", marginTop: "10px" }}
onChange={handleSearchValues} >
/> <Input
</div> placeholder="请输入用户名称"
<div className="input-item"> name="userName"
<div>手机号码</div> allowClear
<Input value={queryParams.userName}
placeholder="请输入手机号码" onChange={handleSearchValues}
name="phoneNumber" />
allowClear </Form.Item>
value={queryParams.phoneNumber} <Form.Item
onChange={handleSearchValues} label="手机号码"
/> name="phoneNumber"
</div> style={{ width: 300 + "px", marginTop: "10px" }}
<div className="input-item"> >
<div>状态</div> <Input
<Select placeholder="请输入手机号码"
style={{ width: 120 }} name="phoneNumber"
placeholder="用户状态" allowClear
allowClear value={queryParams.phoneNumber}
options={[ onChange={handleSearchValues}
{ value: "1", label: "正常" }, />
{ value: "0", label: "停用" }, </Form.Item>
]} <Form.Item label="状态" name="state" style={{ marginTop: "10px" }}>
value={queryParams.state} <Select
onChange={(value: any) => style={{ width: 250 }}
setQueryParams({ placeholder="用户状态"
...queryParams, allowClear
state: value, options={[
}) { value: "1", label: "正常" },
} { value: "0", label: "停用" },
/> ]}
</div> value={queryParams.state}
</div> onChange={(value: any) =>
<div className="content-bottom"> setQueryParams({
<div className="time-selector"> ...queryParams,
<div>创建时间</div> state: value,
<DatePicker.RangePicker })
showTime }
locale={locale} />
className="time-picker" </Form.Item>
placeholder={["开始时间", "结束时间"]} <Form.Item
onChange={(dates) => { label="创建时间"
handleTimePikerValue(dates as any); name="dateTime"
}} style={{ marginTop: "10px" }}
/> >
</div> <DatePicker.RangePicker
<div className="search-button"> locale={dataLocale}
<Button type="primary" onClick={handleSearch}> showTime
<SearchOutlined /> format="YYYY-MM-DD HH:mm:ss"
搜索 onChange={handleTimePikerValue}
</Button> />
</div> </Form.Item>
<div className="reset-button" onClick={handleReset}> <Form.Item style={{ marginTop: "10px" }}>
<Button> <Button
<RedoOutlined /> type="primary"
重置 htmlType="submit"
</Button> style={{ marginLeft: 20 + "px" }}
</div> >
</div> 搜索
</> </Button>
</div> </Form.Item>
<Form.Item style={{ marginTop: "10px" }}>
<Button onClick={handleReset}>重置</Button>
</Form.Item>
</Form>
<div className="add-content"> <div className="add-content">
<> <>
<Button type="primary" onClick={handleAdd}> <Button type="primary" onClick={handleAdd}>