唐简: 用户列表展示，查询，分页功能完成
This commit is contained in:
Jim__TT
@@ -1,60 +1,59 @@
|
||||
import { Button, Form, Input, Image, message } from "antd";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import './assets/styles/login.scss'
|
||||
import "./assets/styles/login.scss";
|
||||
import { getCaptchaApi, loginApi } from "./api/login";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { setToken } from "./utils/auth";
|
||||
|
||||
type Login = {
|
||||
uuid?: string,
|
||||
username?: string,
|
||||
password?: string,
|
||||
code?: string
|
||||
}
|
||||
uuid?: string;
|
||||
username?: string;
|
||||
password?: string;
|
||||
code?: string;
|
||||
};
|
||||
|
||||
export default function Login() {
|
||||
const [messageApi, contextHolder] = message.useMessage()
|
||||
const [uuid, setUuid] = useState<string>('')
|
||||
const [captcha, setCaptcha] = useState<string>('')
|
||||
const navigate = useNavigate()
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [uuid, setUuid] = useState<string>("");
|
||||
const [captcha, setCaptcha] = useState<string>("");
|
||||
const navigate = useNavigate();
|
||||
|
||||
const getCaptcha = async () => {
|
||||
try {
|
||||
const { code, data } = await getCaptchaApi()
|
||||
const { code, data } = await getCaptchaApi();
|
||||
if (code === 1000) {
|
||||
setUuid(data.uuid)
|
||||
setCaptcha(data.img)
|
||||
setUuid(data.uuid);
|
||||
setCaptcha(data.img);
|
||||
}
|
||||
} catch(err: any) {
|
||||
messageApi.error(err)
|
||||
} catch (err: any) {
|
||||
messageApi.error(err);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogin = async (values: Login) => {
|
||||
values.uuid = uuid
|
||||
values.uuid = uuid;
|
||||
try {
|
||||
const { code, data, msg } = await loginApi(values)
|
||||
const { code, data, msg } = await loginApi(values);
|
||||
if (code === 1000) {
|
||||
setToken(data)
|
||||
messageApi.success(msg)
|
||||
navigate('/')
|
||||
return
|
||||
setToken(data);
|
||||
messageApi.success(msg);
|
||||
navigate("/");
|
||||
return;
|
||||
}
|
||||
messageApi.error(msg)
|
||||
getCaptcha()
|
||||
} catch(err: any) {
|
||||
messageApi.error(err)
|
||||
messageApi.error(msg);
|
||||
getCaptcha();
|
||||
} catch (err: any) {
|
||||
messageApi.error(err);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleLoginFailed = (errorInfo: any) => {
|
||||
console.log(errorInfo);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getCaptcha()
|
||||
}, [])
|
||||
getCaptcha();
|
||||
}, []);
|
||||
return (
|
||||
<div id="login">
|
||||
{contextHolder}
|
||||
@@ -69,35 +68,41 @@ export default function Login() {
|
||||
<h3>FateVerse</h3>
|
||||
</Form.Item>
|
||||
<Form.Item<Login>
|
||||
label='用户名'
|
||||
name='username'
|
||||
rules={[{ required: true, message: '请输入用户名' }]}
|
||||
initialValue='admin'
|
||||
label="用户名"
|
||||
name="username"
|
||||
rules={[{ required: true, message: "请输入用户名" }]}
|
||||
initialValue="admin"
|
||||
>
|
||||
<Input placeholder="请输入用户名" />
|
||||
</Form.Item>
|
||||
<Form.Item<Login>
|
||||
label='密码'
|
||||
name='password'
|
||||
rules={[{ required: true, message: '请输入密码' }]}
|
||||
initialValue='123456'
|
||||
label="密码"
|
||||
name="password"
|
||||
rules={[{ required: true, message: "请输入密码" }]}
|
||||
initialValue="123456"
|
||||
>
|
||||
<Input.Password placeholder="请输入密码" />
|
||||
</Form.Item>
|
||||
<Form.Item<Login>
|
||||
label='验证码'
|
||||
name='code'
|
||||
rules={[{ required: true, message: '请输入验证码' }]}
|
||||
label="验证码"
|
||||
name="code"
|
||||
rules={[{ required: true, message: "请输入验证码" }]}
|
||||
>
|
||||
<div className="code-box">
|
||||
<Input placeholder="请输入验证码" />
|
||||
<Image src={'data:image/gif;base64,' + captcha} preview={false} onClick={getCaptcha} />
|
||||
<Image
|
||||
src={"data:image/gif;base64," + captcha}
|
||||
preview={false}
|
||||
onClick={getCaptcha}
|
||||
/>
|
||||
</div>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">登录</Button>
|
||||
<Button type="primary" htmlType="submit">
|
||||
登录
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
38
src/api/system/users.ts
Normal file
38
src/api/system/users.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
import request from "../../utils/request";
|
||||
|
||||
interface userListParams {
|
||||
userName?: string;
|
||||
phoneNumber?: string;
|
||||
state?: string;
|
||||
startTime?: string;
|
||||
endTime?: string;
|
||||
pageNum?: number;
|
||||
pageSize?: number;
|
||||
}
|
||||
|
||||
export const getDeptTreeApi = () => {
|
||||
return request({
|
||||
url: "/admin/dept",
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
export const getUserListApi = (data?: userListParams) => {
|
||||
const params = data
|
||||
? {
|
||||
userName: data.userName,
|
||||
phoneNumber: data.phoneNumber,
|
||||
state: data.state,
|
||||
startTime: data.startTime,
|
||||
endTime: data.endTime,
|
||||
pageNum: data.pageNum,
|
||||
pageSize: 13,
|
||||
}
|
||||
: undefined;
|
||||
|
||||
return request({
|
||||
url: "/admin/user",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
};
|
||||
@@ -1,8 +0,0 @@
|
||||
import request from "../../utils/request";
|
||||
|
||||
export const getDeptTree = () => {
|
||||
return request({
|
||||
url: "/admin/dept",
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
24
src/main.tsx
24
src/main.tsx
@@ -1,21 +1,21 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
import './index.css'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App.tsx";
|
||||
import "./index.css";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
|
||||
// redux toolkit
|
||||
import { Provider } from 'react-redux'
|
||||
import store, { persistor } from './stores/index.ts'
|
||||
import { PersistGate } from 'redux-persist/integration/react'
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
import { Provider } from "react-redux";
|
||||
import store, { persistor } from "./stores/index.ts";
|
||||
import { PersistGate } from "redux-persist/integration/react";
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<React.StrictMode>
|
||||
<Provider store={store}>
|
||||
<PersistGate loading={null} persistor={persistor} >
|
||||
<PersistGate loading={null} persistor={persistor}>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</PersistGate>
|
||||
</Provider>
|
||||
</React.StrictMode>,
|
||||
)
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
13
src/utils/formatData.ts
Normal file
13
src/utils/formatData.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
export default function FormatData(DataStr: string) {
|
||||
const dateStr = DataStr;
|
||||
const date = new Date(dateStr);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
const hours = String(date.getHours()).padStart(2, "0");
|
||||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||
const seconds = String(date.getSeconds()).padStart(2, "0");
|
||||
|
||||
const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
return formattedDate;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.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,88 +1,74 @@
|
||||
import React, { useState } from "react";
|
||||
import { Table, Space } from "antd";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Table, Space, Tag } from "antd";
|
||||
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
|
||||
const UserBottomList: React.FC = () => {
|
||||
const [data, setData] = useState([
|
||||
{
|
||||
key: 1,
|
||||
projectId: "1",
|
||||
projectName: "http接口管理平台",
|
||||
create_time: "2023/7/22",
|
||||
description: "一个用于统一管理",
|
||||
interface_nums: 8,
|
||||
member: [
|
||||
{
|
||||
id: 1,
|
||||
name: "Jim",
|
||||
role: "阅读",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Jack",
|
||||
role: "编辑",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Aurora",
|
||||
role: "阅读",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Tom",
|
||||
role: "编辑",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
projectId: "2",
|
||||
projectName: "低代码平台",
|
||||
create_time: "2021/3/2",
|
||||
description: "更高效的开发",
|
||||
interface_nums: 12,
|
||||
member: [
|
||||
{
|
||||
id: 1,
|
||||
name: "qqq",
|
||||
role: "阅读",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "bbb",
|
||||
role: "编辑",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
projectId: "3",
|
||||
projectName: "ui组件库",
|
||||
create_time: "2021/1/1",
|
||||
description: "漂亮,简洁的ui组件",
|
||||
interface_nums: 5,
|
||||
member: [
|
||||
{
|
||||
id: 1,
|
||||
name: "111",
|
||||
role: "阅读",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "2222",
|
||||
role: "编辑",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "3333",
|
||||
role: "阅读",
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
import "./index.scss";
|
||||
import { getUserListApi } from "../../../../../api/system/users";
|
||||
|
||||
interface AddButtonClickType {
|
||||
clickFromChild: (type: string) => 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 [currentPage, setCurrentPage] = useState<number>(1);
|
||||
const [queryParams, setQueryParams] = useState<QueryParamsType>({
|
||||
userName: undefined,
|
||||
phoneNumber: undefined,
|
||||
state: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
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: "序号",
|
||||
dataIndex: "Id",
|
||||
dataIndex: "userId",
|
||||
key: "Id",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
@@ -94,14 +80,14 @@ const UserBottomList: React.FC = () => {
|
||||
},
|
||||
{
|
||||
title: "用户昵称",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
dataIndex: "nickName",
|
||||
key: "nikeName",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
key: "dept",
|
||||
dataIndex: "dept",
|
||||
key: "deptName",
|
||||
dataIndex: "deptName",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
@@ -114,7 +100,15 @@ const UserBottomList: React.FC = () => {
|
||||
title: "状态",
|
||||
key: "state",
|
||||
dataIndex: "state",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
render: (text: string) => (
|
||||
<>
|
||||
{text === "0" ? (
|
||||
<Tag color="processing">停用</Tag>
|
||||
) : (
|
||||
<Tag color="processing">正常</Tag>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
@@ -127,39 +121,43 @@ const UserBottomList: React.FC = () => {
|
||||
key: "operate",
|
||||
dataIndex: "operate",
|
||||
render: () => (
|
||||
<>
|
||||
<div style={{ color: "#58aaff" }}>
|
||||
<Space>
|
||||
<EditOutlined />
|
||||
<a href="#">编辑</a>
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => handleAddClick()}
|
||||
style={{ color: " #58aaff" }}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<DeleteOutlined />
|
||||
<a href="#">删除</a>
|
||||
<a href="#" style={{ color: " #58aaff" }}>
|
||||
删除
|
||||
</a>
|
||||
</Space>
|
||||
</>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
getUserList();
|
||||
console.log(searchValues);
|
||||
}, [searchValues]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="tree-content">
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
dataSource={listData}
|
||||
className="article-table"
|
||||
// pagination={{
|
||||
// position: ["none"],
|
||||
// }}
|
||||
// onRow={(record, index) => ({
|
||||
// onClick: () => {
|
||||
// // 在这里编写处理点击事件的代码
|
||||
// serActiveRowIndex(record.key);
|
||||
// eventBus.emit("tableRowClick", record);
|
||||
// },
|
||||
// // 根据条件动态设置行样式
|
||||
// style:
|
||||
// activeRowIndex === record.key
|
||||
// ? { backgroundColor: "#e1eaff" }
|
||||
// : null,
|
||||
// })}
|
||||
pagination={{
|
||||
onChange: handlePageChange,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total, range) =>
|
||||
`第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,19 +1,24 @@
|
||||
import React, { useMemo, useState, useEffect } from "react";
|
||||
import { Input, Tree } from "antd";
|
||||
import { SearchOutlined } from "@ant-design/icons";
|
||||
import { getDeptTreeApi } from "../../../../../api/system/users";
|
||||
import "./index.scss";
|
||||
|
||||
interface treeDataType {
|
||||
myTreeData: any[];
|
||||
}
|
||||
|
||||
const MyDeptTree: React.FC<treeDataType> = (props) => {
|
||||
console.log("props:", props.myTreeData[0]);
|
||||
|
||||
const MyDeptTree: React.FC = () => {
|
||||
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
||||
|
||||
const [myData, setMyData] = useState<any[]>([]);
|
||||
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);
|
||||
@@ -57,15 +62,16 @@ const MyDeptTree: React.FC<treeDataType> = (props) => {
|
||||
if (item.children) {
|
||||
return { title, key: item.deptId, children: loop(item.children) };
|
||||
}
|
||||
|
||||
return {
|
||||
title,
|
||||
key: item.key,
|
||||
};
|
||||
});
|
||||
|
||||
return loop(props.myTreeData);
|
||||
}, [searchValue]);
|
||||
return loop(myData);
|
||||
}, [myData]);
|
||||
useEffect(() => {
|
||||
getDeptTreeData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="dept-content">
|
||||
3
src/view/system/user/comps/user-from-modal/index.scss
Normal file
3
src/view/system/user/comps/user-from-modal/index.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.modal-form {
|
||||
display: flex;
|
||||
}
|
||||
244
src/view/system/user/comps/user-from-modal/index.tsx
Normal file
244
src/view/system/user/comps/user-from-modal/index.tsx
Normal file
@@ -0,0 +1,244 @@
|
||||
import {
|
||||
Modal,
|
||||
Button,
|
||||
Form,
|
||||
Input,
|
||||
Row,
|
||||
Col,
|
||||
Select,
|
||||
TreeSelect,
|
||||
Radio,
|
||||
} from "antd";
|
||||
import type { RadioChangeEvent } from "antd";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { getDeptTreeApi } from "../../../../../api/system/users";
|
||||
|
||||
interface ShowModal {
|
||||
isShowModal: boolean;
|
||||
clickFromChild: () => void;
|
||||
modalTitle: string;
|
||||
}
|
||||
type FieldType = {
|
||||
username?: string;
|
||||
password?: string;
|
||||
remember?: string;
|
||||
};
|
||||
|
||||
const UserFromModal: React.FC<ShowModal> = (props) => {
|
||||
const [deptList, setDeptList] = useState<any[]>();
|
||||
const [value, setValue] = useState<string>();
|
||||
const fieldNames = {
|
||||
label: "deptName",
|
||||
title: "deptName",
|
||||
value: "deptName",
|
||||
key: "deptName",
|
||||
}; // 用于自定义TreeSelect内容
|
||||
|
||||
const getDeptTreeData = async () => {
|
||||
try {
|
||||
const res = await getDeptTreeApi();
|
||||
setDeptList(res.data);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const onChange = (newValue: string) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
props.clickFromChild();
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
props.clickFromChild();
|
||||
};
|
||||
|
||||
const onFinish = (values: any) => {
|
||||
console.log("Success:", values);
|
||||
};
|
||||
|
||||
const onFinishFailed = (errorInfo: any) => {
|
||||
console.log("Failed:", errorInfo);
|
||||
};
|
||||
const [radioValue, setRadioValue] = useState(1);
|
||||
|
||||
const onRadioChange = (e: RadioChangeEvent) => {
|
||||
setRadioValue(e.target.value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getDeptTreeData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
title={props.modalTitle}
|
||||
width={700}
|
||||
open={props.isShowModal}
|
||||
onOk={handleOk}
|
||||
onCancel={handleCancel}
|
||||
>
|
||||
<Form
|
||||
name="basic"
|
||||
initialValues={{ remember: true }}
|
||||
labelCol={{ span: 6 }}
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
autoComplete="off"
|
||||
className="modal-form"
|
||||
>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="用户名称"
|
||||
name="用户名称"
|
||||
rules={[{ required: true, message: "请输入用户名称" }]}
|
||||
>
|
||||
<Input placeholder="请输入用户名称" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="用户昵称"
|
||||
name="用户昵称"
|
||||
rules={[{ required: true, message: "请输入用户昵称" }]}
|
||||
>
|
||||
<Input placeholder="请输入用户昵称" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="用户性别"
|
||||
name="用户性别"
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<Select
|
||||
options={[
|
||||
{ value: "男", label: "男" },
|
||||
{ value: "女", label: "女" },
|
||||
{ value: "未知", label: "未知" },
|
||||
]}
|
||||
placeholder="请选择用户性别"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="用户密码"
|
||||
name="用户密码"
|
||||
rules={[{ required: true, message: "请输入用户密码" }]}
|
||||
>
|
||||
<Input.Password placeholder="请输入密码" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="归属部门"
|
||||
name="归属部门"
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<TreeSelect
|
||||
showSearch
|
||||
style={{ width: "100%" }}
|
||||
value={value}
|
||||
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
|
||||
placeholder="请选择"
|
||||
allowClear
|
||||
fieldNames={fieldNames}
|
||||
treeDefaultExpandAll
|
||||
onChange={onChange}
|
||||
treeData={deptList}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="手机号码"
|
||||
name="手机号码"
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<Input placeholder="请输入手机号码" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="邮箱"
|
||||
name="邮箱"
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<Input placeholder="请输入邮箱" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="状态"
|
||||
name="状态"
|
||||
rules={[
|
||||
{ required: false, message: "Please input your password!" },
|
||||
]}
|
||||
>
|
||||
<Radio.Group onChange={onRadioChange} value={radioValue}>
|
||||
<Radio value={1}>正常</Radio>
|
||||
<Radio value={2}>停用</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="岗位"
|
||||
name="岗位"
|
||||
rules={[
|
||||
{ required: false, message: "Please input your password!" },
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
options={[
|
||||
{ value: "董事长", label: "董事长" },
|
||||
{ value: "项目经理", label: "项目经理" },
|
||||
{ value: "人力资源", label: "人力资源" },
|
||||
{ value: "普通员工", label: "普通员工" },
|
||||
]}
|
||||
placeholder="请选择岗位"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="角色"
|
||||
name="角色"
|
||||
rules={[
|
||||
{ required: false, message: "Please input your password!" },
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
options={[
|
||||
{ value: "超级管理员", label: "超级管理员" },
|
||||
{ value: "普通角色", label: "普通角色" },
|
||||
]}
|
||||
placeholder="请选择岗位"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item<FieldType>
|
||||
label="备注"
|
||||
labelCol={{ span: 3 }}
|
||||
name="备注"
|
||||
rules={[
|
||||
{ required: false, message: "Please input your password!" },
|
||||
]}
|
||||
>
|
||||
<Input.TextArea placeholder="请输入内容" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserFromModal;
|
||||
@@ -3,10 +3,18 @@ import { Button } from "antd";
|
||||
import { PlusOutlined } from "@ant-design/icons";
|
||||
import "./index.scss";
|
||||
|
||||
const UserMidAddButton: React.FC = () => {
|
||||
interface AddButtonClick {
|
||||
clickFromChild: (type: string) => void;
|
||||
}
|
||||
|
||||
const UserMidAddButton: React.FC<AddButtonClick> = ({ clickFromChild }) => {
|
||||
const handleAddClick = () => {
|
||||
clickFromChild("ADD");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="add-content">
|
||||
<Button type="primary">
|
||||
<Button type="primary" onClick={handleAddClick}>
|
||||
<PlusOutlined />
|
||||
新增
|
||||
</Button>
|
||||
|
||||
@@ -1,20 +1,85 @@
|
||||
import React from "react";
|
||||
import React, { useState, useEffect, Children } from "react";
|
||||
import "./index.scss";
|
||||
|
||||
import { Input, Select, TimePicker, Button } from "antd";
|
||||
import { Input, Select, DatePicker, Button } from "antd";
|
||||
import { SearchOutlined, RedoOutlined } from "@ant-design/icons";
|
||||
import FormatData from "../../../../../utils/formatData";
|
||||
|
||||
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;
|
||||
console.log(value);
|
||||
|
||||
setSearchValues({ ...searchValues, [name]: value });
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
clickFromChild(searchValues);
|
||||
};
|
||||
const handleReset = () => {
|
||||
clickFromChild(null);
|
||||
setSearchValues({
|
||||
...searchValues,
|
||||
userName: undefined,
|
||||
phoneNumber: undefined,
|
||||
state: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log(searchValues);
|
||||
}, [searchValues]);
|
||||
|
||||
const UserTopSearch: React.FC = () => {
|
||||
return (
|
||||
<div className="search-content">
|
||||
<div className="content-top">
|
||||
<div className="input-item">
|
||||
<div>用户名称</div>
|
||||
<Input placeholder="请输入用户名称" />
|
||||
<Input
|
||||
placeholder="请输入用户名称"
|
||||
name="userName"
|
||||
value={searchValues.userName}
|
||||
onChange={handleInputValues}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-item">
|
||||
<div>手机号码</div>
|
||||
<Input placeholder="请输入手机号码" />
|
||||
<Input
|
||||
placeholder="请输入手机号码"
|
||||
name="phoneNumber"
|
||||
value={searchValues.phoneNumber}
|
||||
onChange={handleInputValues}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-item">
|
||||
<div>状态</div>
|
||||
@@ -23,27 +88,37 @@ const UserTopSearch: React.FC = () => {
|
||||
placeholder="用户状态"
|
||||
allowClear
|
||||
options={[
|
||||
{ value: "正常1", label: "正常" },
|
||||
{ value: "停用1", label: "停用" },
|
||||
{ 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>
|
||||
<TimePicker.RangePicker
|
||||
<DatePicker.RangePicker
|
||||
className="time-picker"
|
||||
placeholder={["开始时间", "结束时间"]}
|
||||
onChange={(dates) => {
|
||||
handleTimePikerValue(dates as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="search-button">
|
||||
<Button type="primary">
|
||||
<Button type="primary" onClick={handleSearch}>
|
||||
<SearchOutlined />
|
||||
搜索
|
||||
</Button>
|
||||
</div>
|
||||
<div className="reset-button">
|
||||
<div className="reset-button" onClick={handleReset}>
|
||||
<Button>
|
||||
<RedoOutlined />
|
||||
重置
|
||||
|
||||
@@ -1,31 +1,46 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import "./index.scss";
|
||||
import { getDeptTree } from "../../../api/user/userDept";
|
||||
import MyDeptTree from "./comps/my-dept-tree";
|
||||
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";
|
||||
|
||||
export default function User() {
|
||||
const [treeData, setTreeData] = useState<any[]>([]);
|
||||
const getDeptTreeData = async () => {
|
||||
const data = await getDeptTree();
|
||||
setTreeData(data.data);
|
||||
console.log("father:", data);
|
||||
const [isShowModal, setIsShowModal] = useState<boolean>(false);
|
||||
const [modalTitle, setModalTitle] = useState<string>("");
|
||||
const [searchValues, setSearchValues] = useState<any>({});
|
||||
|
||||
const handleSearch = (searchValues: any) => {
|
||||
setSearchValues({
|
||||
...searchValues,
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getDeptTreeData();
|
||||
}, []);
|
||||
const handleAddClick = (type: string) => {
|
||||
type === "ADD" ? setModalTitle("新增用户") : setModalTitle("修改用户");
|
||||
setIsShowModal(true);
|
||||
};
|
||||
const handleAddOff = () => {
|
||||
setIsShowModal(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div id="content">
|
||||
<MyDeptTree myTreeData={treeData} />
|
||||
<MyDeptTree />
|
||||
<div className="right-user">
|
||||
<UserTopSearch></UserTopSearch>
|
||||
<UserMidAddButton></UserMidAddButton>
|
||||
<UserBottomList></UserBottomList>
|
||||
<UserTopSearch clickFromChild={handleSearch}></UserTopSearch>
|
||||
<UserMidAddButton clickFromChild={handleAddClick}></UserMidAddButton>
|
||||
<UserBottomList
|
||||
clickFromChild={handleAddClick}
|
||||
searchValues={searchValues}
|
||||
></UserBottomList>
|
||||
<UserFromModal
|
||||
isShowModal={isShowModal}
|
||||
modalTitle={modalTitle}
|
||||
clickFromChild={handleAddOff}
|
||||
></UserFromModal>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user