部分完成用户配置

main
wuyize 2023-01-06 12:36:58 +08:00
parent 81079aba5d
commit c770c86eaf
3 changed files with 203 additions and 52 deletions

View File

@ -1,4 +1,4 @@
export interface StaffList {
export interface StaffListResponse {
records: Staff[];
/**
*

View File

@ -368,7 +368,7 @@ function InvoiceListView(props: { isManagement: boolean }) {
console.log(error)
})
}
const onChange = (pageCurrentNum: Number, pageCurrentSize: Number) => {
const onChange = (pageCurrentNum: number, pageCurrentSize: number) => {
console.log(pageCurrentNum, pageCurrentSize)
navigate('?currentPage=' + pageCurrentNum + '&pageSize=' + pageCurrentSize)
}

View File

@ -1,17 +1,23 @@
import React, {useEffect, useState} from "react";
import {Button, Space, Table, Tag, Typography} from 'antd';
import {Button, Form, Input, Modal, Select, Space, Switch, Table, Tag, Typography} from 'antd';
import type {ColumnsType} from 'antd/es/table';
import {Staff} from "../../../models/UserConfigModels";
import {Staff, StaffListResponse} from "../../../models/UserConfigModels";
import axiosInstance from "../../../utils/axiosInstance";
import {Department} from "../../../models/Staff";
import TextArea from "antd/es/input/TextArea";
import {invoiceTypeNameMap} from "../../../models/Invoice";
const {Text, Link} = Typography;
function UserConfig(props: any) {
const [departmentMap, setDepartmentMap] = useState(new Map<number, string>())
const [staffList, setStaffList] = useState<Staff[]>([])
const [totalNum, setTotalNum] = useState(0)
const [createStaffModalOpen, setCreateStaffModalOpen] = useState(false)
const [createStaffLoading, setCreateStaffLoading] = useState(false)
const [placeOptions, setPlaceOptions] = useState<{ value: string; label: string; }[]>([])
const [form] = Form.useForm()
const departmentToString = (staff: Staff) => {
if (staff.staffId === 'manager')
@ -36,54 +42,98 @@ function UserConfig(props: any) {
key: 'staffName',
},
{
title: '部门',
title: '基地',
dataIndex: 'staffBase',
key: 'staffBase',
},
{
title: '部门 / 职务',
dataIndex: 'managingDepartment',
key: 'department',
render: (value, record, index) => <Text>{departmentToString(record)}</Text>,
},
{
title: '',
dataIndex: 'banned',
key: 'action',
render: (_, record) => (
align: 'right',
width: 230,
render: (value, record) => (
<Space size="middle">
<a></a>
<a></a>
<Switch checkedChildren="启用" unCheckedChildren="禁用" checked={!value}/>
<Button danger type="link">
</Button>
</Space>
),
},
];
const data: Staff[] = [
{
staffId: 'sb123007',
staffName: 'John Brown',
managingDepartment: {
departmentId: 1
},
staffDepartments: [{
departmentId: 1
}]
},
{
staffId: 'sb123008',
staffName: 'John Brown',
managingDepartment: {
departmentId: 1
},
staffDepartments: [{
departmentId: 1
}]
},
{
staffId: 'sb123009',
staffName: 'John Brown',
managingDepartment: {
departmentId: 1
},
staffDepartments: [{
departmentId: 1
}]
},
]
const getStaffList = (pageCurrentNum: number, pageCurrentSize: number) => {
axiosInstance({
url: 'management/staff',
method: 'get',
params: {
pageNum: (pageCurrentNum-1),
pageSize: pageCurrentSize
}
}).then(response => {
const data: StaffListResponse = response.data
setTotalNum(data.total)
setStaffList(data.records)
}).catch(function (error) {
console.log(error)
})
}
const onChange = (pageCurrentNum: number, pageCurrentSize: number) => {
getStaffList(pageCurrentNum, pageCurrentSize)
}
const onCreateStaffClick = () => {
form.resetFields()
setCreateStaffModalOpen(true)
}
const onCreateStaff = () => {
form.validateFields().then((values) => {
setCreateStaffLoading(true)
axiosInstance({
url: 'management/staff',
method: 'post',
data: {
staffId: values.staffId,
staffPassword: values.staffPassword,
staffName: values.staffName,
staffBase: values.staffBase,
}
}).then(response => {
setCreateStaffLoading(false)
setCreateStaffModalOpen(false)
}).catch(function (error) {
console.log(error)
setCreateStaffLoading(false)
})
})
}
const getPlaces = () => {
axiosInstance({
url: 'common/place',
method: 'get'
}).then(response => {
const data:{placeName: string, subsidyPerDay: number}[] = response.data
setPlaceOptions(data.map((value, index, array) => {
return {
value: value.placeName,
label: value.placeName
}
}))
}).catch(function (error) {
console.log(error)
})
}
useEffect(() => {
axiosInstance({
@ -95,22 +145,123 @@ function UserConfig(props: any) {
for (const department of departments)
map.set(department.departmentId, department.departmentName)
setDepartmentMap(map)
getStaffList(1, 10)
}).catch(function (error) {
console.log(error)
})
getPlaces()
}, []);
return (
<div style={{margin:30}}>
<Table columns={columns} dataSource={data}/>
<div style={{position:"absolute", left: 0, top: 0, width: '100%', height: 55, display: "flex", justifyContent:"flex-end", alignItems:"center", paddingRight: 50}}>
<div style={{margin: 30}}>
<Table columns={columns} dataSource={staffList} rowKey="staffId" pagination={{
showSizeChanger: true,
showQuickJumper: true,
showTotal:(total) => `${total}`,
total:totalNum,
onChange:onChange
}}/>
<div style={{
position: "absolute",
left: 0,
top: 0,
width: '100%',
height: 55,
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
paddingRight: 50
}}>
<Space>
<Button ></Button>
<Button ></Button>
<Button></Button>
<Button onClick={onCreateStaffClick}></Button>
</Space>
</div>
<Modal
open={createStaffModalOpen}
title="创建新用户"
onOk={onCreateStaff}
onCancel={() => setCreateStaffModalOpen(false)}
confirmLoading={createStaffLoading}
>
<Form form={form} layout="horizontal" labelCol={{span: 6}}
>
<Form.Item
name={`staffId`}
label={`工号`}
rules={[
{
required: true,
message: '请输入工号',
},
]}
>
<Input />
</Form.Item>
<Form.Item
name={`staffName`}
label={`姓名`}
rules={[
{
required: true,
message: '请输入姓名',
},
]}
>
<Input />
</Form.Item>
<Form.Item
name={`staffBase`}
label={`基地`}
rules={[
{
required: true,
message: '请指定基地',
},
]}
>
<Select
options={placeOptions}
/>
</Form.Item>
<Form.Item
name="staffPassword"
label="密码"
rules={[
{
required: true,
message: '请输入密码',
},
]}
hasFeedback
>
<Input.Password />
</Form.Item>
<Form.Item
name="confirmStaffPassword"
label="再次输入密码"
dependencies={['staffPassword']}
hasFeedback
rules={[
{
required: true,
message: '请再次输入密码',
},
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue('staffPassword') === value) {
return Promise.resolve();
}
return Promise.reject(new Error('两次输入密码不一致'));
},
}),
]}
>
<Input.Password />
</Form.Item>
</Form>
</Modal>
</div>
)
}