部分完成用户配置
parent
81079aba5d
commit
c770c86eaf
|
|
@ -1,4 +1,4 @@
|
|||
export interface StaffList {
|
||||
export interface StaffListResponse {
|
||||
records: Staff[];
|
||||
/**
|
||||
* 总条数
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,28 @@
|
|||
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')
|
||||
return '总经理'
|
||||
let result = !staff.managingDepartment ? '' : departmentMap.get(staff.managingDepartment.departmentId) + '主管'
|
||||
let result = !staff.managingDepartment ? '' : departmentMap.get(staff.managingDepartment.departmentId) + '主管'
|
||||
if (staff.staffDepartments)
|
||||
for (const department of staff.staffDepartments) {
|
||||
result += '\xa0\xa0' + departmentMap.get(department.departmentId)
|
||||
|
|
@ -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}}>
|
||||
<Space>
|
||||
<Button >批量导入</Button>
|
||||
<Button >创建用户</Button>
|
||||
</Space>
|
||||
|
||||
<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 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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue