唐简：完成岗位管理页面开发
This commit is contained in:
Jim__TT
51
src/api/system/post.ts
Normal file
51
src/api/system/post.ts
Normal file
@@ -0,0 +1,51 @@
|
||||
import request from "../../utils/request";
|
||||
|
||||
interface postListParams {
|
||||
postCode?: string;
|
||||
postName?: string;
|
||||
state?: string;
|
||||
pageNum?: string;
|
||||
pageSize?: string;
|
||||
}
|
||||
|
||||
export const getPostListApi = (data: postListParams) => {
|
||||
const { postCode, postName, state, pageNum, pageSize } = data;
|
||||
const params = data
|
||||
? {
|
||||
postCode,
|
||||
postName,
|
||||
state,
|
||||
pageNum,
|
||||
pageSize: 500,
|
||||
}
|
||||
: undefined;
|
||||
|
||||
return request({
|
||||
url: "/admin/post",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
};
|
||||
|
||||
export const addPostApi = (data: any) => {
|
||||
return request({
|
||||
url: "/admin/post",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
||||
export const editPostApi = (data: any) => {
|
||||
return request({
|
||||
url: "/admin/post",
|
||||
method: "put",
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
||||
export const deletePostApi = (postId: any) => {
|
||||
return request({
|
||||
url: "/admin/post/" + postId,
|
||||
method: "delete",
|
||||
});
|
||||
};
|
||||
103
src/view/system/post/index.scss
Normal file
103
src/view/system/post/index.scss
Normal file
@@ -0,0 +1,103 @@
|
||||
#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;
|
||||
height: calc(100vh - 85px);
|
||||
border: 1px solid red;
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
.right {
|
||||
flex: 80%;
|
||||
height: 190px;
|
||||
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: 12px;
|
||||
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;
|
||||
margin-top: 20px;
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
473
src/view/system/post/index.tsx
Normal file
473
src/view/system/post/index.tsx
Normal file
@@ -0,0 +1,473 @@
|
||||
import "./index.scss";
|
||||
import {
|
||||
Input,
|
||||
Select,
|
||||
Button,
|
||||
Table,
|
||||
Space,
|
||||
Tag,
|
||||
message,
|
||||
Modal,
|
||||
Form,
|
||||
Row,
|
||||
Col,
|
||||
Radio,
|
||||
InputNumber,
|
||||
} from "antd";
|
||||
|
||||
import {
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
ExclamationCircleFilled,
|
||||
} from "@ant-design/icons";
|
||||
|
||||
import {
|
||||
getPostListApi,
|
||||
addPostApi,
|
||||
editPostApi,
|
||||
deletePostApi,
|
||||
} from "../../../api/system/post";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { SearchOutlined, RedoOutlined, PlusOutlined } from "@ant-design/icons";
|
||||
|
||||
export default function Post() {
|
||||
const [form] = Form.useForm();
|
||||
const postIdList: number[] = [];
|
||||
const [echoData, setEchoData] = useState<QueryParamsType>({});
|
||||
const [listData, setListData] = useState([]);
|
||||
const [radioValue, setRadioValue] = useState(1);
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [modalTitle, setModalTitle] = useState<string>("");
|
||||
const [buttonType, setButtonType] = useState<string>("");
|
||||
const [isShowModal, setIsShowModal] = useState<boolean>(false);
|
||||
const [queryParams, setQueryParams] = useState<QueryParamsType>({
|
||||
postName: undefined,
|
||||
postCode: undefined,
|
||||
state: undefined,
|
||||
postSort: undefined,
|
||||
pageSize: undefined,
|
||||
pageNum: undefined,
|
||||
});
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "postId",
|
||||
key: "Id",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "岗位名称",
|
||||
dataIndex: "postName",
|
||||
key: "postName",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "岗位编码",
|
||||
dataIndex: "postCode",
|
||||
key: "postCode",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "排序",
|
||||
key: "postSort",
|
||||
dataIndex: "postSort",
|
||||
render: (text: string) => <>{text ? text : "--"}</>,
|
||||
},
|
||||
{
|
||||
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={() => handleEdit(record)}
|
||||
style={{ color: " #58aaff" }}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<DeleteOutlined />
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => handleDel(record)}
|
||||
style={{ color: " #58aaff" }}
|
||||
>
|
||||
删除
|
||||
</a>
|
||||
</Space>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
interface QueryParamsType {
|
||||
postName?: string;
|
||||
postCode?: string;
|
||||
state?: string;
|
||||
postSort?: string;
|
||||
postId?: string;
|
||||
pageSize?: number;
|
||||
pageNum?: number;
|
||||
}
|
||||
|
||||
const getPostList = async (newQueryParams: object) => {
|
||||
try {
|
||||
const { code, data } = await getPostListApi(newQueryParams);
|
||||
if (code === 1000) {
|
||||
setListData(data.rows);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setModalTitle("新增用户");
|
||||
setButtonType("ADD");
|
||||
setIsShowModal(true);
|
||||
};
|
||||
|
||||
const handleEdit = (data: any) => {
|
||||
setModalTitle("修改用户");
|
||||
setButtonType("EDIT");
|
||||
setIsShowModal(true);
|
||||
console.log(data);
|
||||
setEchoData({
|
||||
postId: data.postId,
|
||||
});
|
||||
handleEcho(data);
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
form.validateFields().then((values) => {
|
||||
console.log(values);
|
||||
console.log(buttonType);
|
||||
|
||||
if (buttonType === "ADD") {
|
||||
handleConfirmAdd(values);
|
||||
} else if (buttonType === "EDIT") {
|
||||
handleConfirmEdit(values);
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "系统异常，请刷新后重试",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleConfirmAdd = async (data: object) => {
|
||||
console.log(data);
|
||||
const { code } = await addPostApi(data);
|
||||
try {
|
||||
if (code === 1000) {
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "创建成功",
|
||||
});
|
||||
setQueryParams({});
|
||||
handleClear();
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "岗位名称已经存在",
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirmEdit = async (data: object) => {
|
||||
const editData = {
|
||||
...data,
|
||||
postId: echoData.postId,
|
||||
};
|
||||
console.log(editData);
|
||||
const { code } = await editPostApi(editData);
|
||||
try {
|
||||
if (code === 1000) {
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "修改成功",
|
||||
});
|
||||
setQueryParams({});
|
||||
handleClear();
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "修改失败",
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = async () => {
|
||||
setQueryParams({});
|
||||
getPostList({});
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
getPostList(queryParams);
|
||||
};
|
||||
|
||||
const handleDel = async (record: any) => {
|
||||
Modal.confirm({
|
||||
title: `确定删除Id为-${record.postId}-, 岗位名称为-${record.postName}-的岗位吗?`,
|
||||
icon: <ExclamationCircleFilled />,
|
||||
async onOk() {
|
||||
const { code } = await deletePostApi(record.postId);
|
||||
try {
|
||||
if (code === 1000) {
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "删除成功",
|
||||
});
|
||||
setQueryParams({});
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "删除失败",
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
messageApi.open({
|
||||
type: "warning",
|
||||
content: "取消成功",
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleSearchValues = (e: any) => {
|
||||
const { name, value } = e.target;
|
||||
setQueryParams({ ...queryParams, [name]: value });
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
pageNum: page,
|
||||
});
|
||||
};
|
||||
|
||||
const handleEcho = (data: any) => {
|
||||
const { postName, postCode, state, postSort } = data;
|
||||
form.setFieldsValue({
|
||||
postName,
|
||||
postCode,
|
||||
state,
|
||||
postSort,
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
handleClear();
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
form.resetFields();
|
||||
setIsShowModal(false);
|
||||
};
|
||||
|
||||
const onRadio = (e: any) => {
|
||||
setRadioValue(e.target.value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getPostList(queryParams);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div id="content">
|
||||
<>
|
||||
<div className="right">
|
||||
<div className="search-content">
|
||||
<>
|
||||
<div className="content-top">
|
||||
<div className="input-item">
|
||||
<div>岗位名称</div>
|
||||
<Input
|
||||
placeholder="请输入岗位名称"
|
||||
name="postName"
|
||||
allowClear
|
||||
value={queryParams.postName}
|
||||
onChange={handleSearchValues}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-item">
|
||||
<div>岗位编码</div>
|
||||
<Input
|
||||
placeholder="请输入岗位编码"
|
||||
name="postCode"
|
||||
allowClear
|
||||
value={queryParams.postCode}
|
||||
onChange={handleSearchValues}
|
||||
/>
|
||||
</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="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={handleAdd}>
|
||||
<PlusOutlined />
|
||||
新增
|
||||
</Button>
|
||||
</>
|
||||
</div>
|
||||
<div className="table-content">
|
||||
<>
|
||||
{contextHolder}
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={listData}
|
||||
className="article-table"
|
||||
pagination={{
|
||||
onChange: handlePageChange,
|
||||
locale: {
|
||||
jump_to: "跳至",
|
||||
page: "页",
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showTotal: (total, range) =>
|
||||
`第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
<>
|
||||
{contextHolder}
|
||||
<Modal
|
||||
title={modalTitle}
|
||||
width={600}
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
open={isShowModal}
|
||||
onOk={handleConfirm}
|
||||
onCancel={handleCancel}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
name="basic"
|
||||
initialValues={{ remember: true }}
|
||||
onFinish={handleConfirm}
|
||||
labelCol={{ span: 4 }}
|
||||
autoComplete="off"
|
||||
className="modal-form"
|
||||
>
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="岗位名称"
|
||||
name="postName"
|
||||
rules={[{ required: true, message: "请输入岗位名称" }]}
|
||||
>
|
||||
<Input defaultValue={""} placeholder="请输入岗位名称" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="岗位编码"
|
||||
name="postCode"
|
||||
rules={[{ required: true, message: "请输入岗位编码" }]}
|
||||
>
|
||||
<Input defaultValue={""} placeholder="请输入岗位编码" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="显示顺序"
|
||||
name="postSort"
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="状态"
|
||||
name="state"
|
||||
rules={[
|
||||
{
|
||||
required: false,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Radio.Group onChange={onRadio} value={radioValue}>
|
||||
<Radio value="1">正常</Radio>
|
||||
<Radio value="0">停用</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Modal>
|
||||
</>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -34,6 +34,7 @@ import {
|
||||
} from "../../../api/system/users";
|
||||
|
||||
import FormatData from "../../../utils/formatData";
|
||||
import locale from "antd/es/date-picker/locale/zh_CN";
|
||||
import React, { useEffect, useState, useMemo, useRef } from "react";
|
||||
import { SearchOutlined, RedoOutlined, PlusOutlined } from "@ant-design/icons";
|
||||
|
||||
@@ -557,6 +558,7 @@ export default function User() {
|
||||
<div>创建时间</div>
|
||||
<DatePicker.RangePicker
|
||||
showTime
|
||||
locale={locale}
|
||||
className="time-picker"
|
||||
placeholder={["开始时间", "结束时间"]}
|
||||
onChange={(dates) => {
|
||||
@@ -596,6 +598,10 @@ export default function User() {
|
||||
className="article-table"
|
||||
pagination={{
|
||||
onChange: handlePageChange,
|
||||
locale: {
|
||||
jump_to: "跳至",
|
||||
page: "页",
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showTotal: (total, range) =>
|
||||
`第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
|
||||
@@ -608,6 +614,8 @@ export default function User() {
|
||||
<Modal
|
||||
title={modalTitle}
|
||||
width={700}
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
open={isShowModal}
|
||||
onOk={handleConfirm}
|
||||
onCancel={handleCancel}
|
||||
@@ -647,13 +655,12 @@ export default function User() {
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<Select
|
||||
defaultValue={""}
|
||||
placeholder="请选择用户性别"
|
||||
options={[
|
||||
{ value: "0", label: "男" },
|
||||
{ value: "1", label: "女" },
|
||||
{ value: "2", label: "未知" },
|
||||
]}
|
||||
placeholder="请选择用户性别"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
@@ -677,7 +684,6 @@ export default function User() {
|
||||
>
|
||||
<TreeSelect
|
||||
showSearch
|
||||
defaultValue={""}
|
||||
style={{ width: "100%" }}
|
||||
value={treeValue}
|
||||
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
|
||||
|
||||
Reference in New Issue
Block a user