部分完成用户配置

src/models/UserConfigModels.ts

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

src/pages/Invoice/InvoiceListView.tsx

@@ -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)
     }

src/pages/configuration/subpage/UserConfig.tsx

@@ -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>
+                    <Switch checkedChildren="启用" unCheckedChildren="禁用" checked={!value}/>
-                    <a>移除</a>
+                    <Button danger type="link">
+                        修改密码
+                    </Button>
                 </Space>
             ),
         },
     ];
-    const data: Staff[] = [
+
-        {
+    const getStaffList = (pageCurrentNum: number, pageCurrentSize: number) => {
-            staffId: 'sb123007',
+        axiosInstance({
-            staffName: 'John Brown',
+            url: 'management/staff',
-            managingDepartment: {
+            method: 'get',
-                departmentId: 1
+            params: {
-            },
+                pageNum: (pageCurrentNum-1),
-            staffDepartments: [{
+                pageSize: pageCurrentSize
-                departmentId: 1
+            }
-            }]
+        }).then(response => {
-        },
+            const data: StaffListResponse = response.data
-        {
+            setTotalNum(data.total)
-            staffId: 'sb123008',
+            setStaffList(data.records)
-            staffName: 'John Brown',
+
-            managingDepartment: {
+        }).catch(function (error) {
-                departmentId: 1
+            console.log(error)
-            },
+        })
-            staffDepartments: [{
+    }
-                departmentId: 1
+
-            }]
+    const onChange = (pageCurrentNum: number, pageCurrentSize: number) => {
-        },
+        getStaffList(pageCurrentNum, pageCurrentSize)
-        {
+    }
-            staffId: 'sb123009',
+
-            staffName: 'John Brown',
+    const onCreateStaffClick = () => {
-            managingDepartment: {
+        form.resetFields()
-                departmentId: 1
+        setCreateStaffModalOpen(true)
-            },
+    }
-            staffDepartments: [{
+
-                departmentId: 1
+    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}}>
+        <div style={{margin: 30}}>
-            <Table columns={columns} dataSource={data}/>
+            <Table columns={columns} dataSource={staffList} rowKey="staffId" pagination={{
-            <div style={{position:"absolute", left: 0, top: 0, width: '100%', height: 55, display: "flex", justifyContent:"flex-end", alignItems:"center", paddingRight: 50}}>
+                showSizeChanger: true,
-               <Space>
+                showQuickJumper: true,
-                   <Button >批量导入</Button>
+                showTotal:(total) => `共 ${total} 项`,
-                   <Button >创建用户</Button>
+                total:totalNum,
-               </Space>
+                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>
     )
 }