部门测试结束

src/pages/configuration/subpage/DepartmentConfig.tsx

@@ -1,13 +1,232 @@
 import React from "react";
+import {
+    ActionType,
+    EditableProTable,
+    ProColumns,
+} from "@ant-design/pro-components";
+import axiosInstance from "../../../utils/axiosInstance";
 
+type DataSourceType = {
+    id: React.Key;
+    departmentId: number;
+    departmentName: string;
+    departmentManagerId: string;
+    departmentManagerName: string;
+};
 
 class DepartmentConfig extends React.Component<any, any> {
+    actionRef = React.createRef<ActionType>();
+
+    constructor(props: any) {
+        super(props);
+        this.state = {
+            activated: props.activate,
+            tableData: [],
+            editableKeys: [],
+        }
+    }
+
+    saveRow = (row: DataSourceType) => {
+        let newRow = true
+        this.state.tableData.forEach((item: DataSourceType) => {
+            if (item.id === row.id) {
+                newRow = false
+            }
+        })
+        if (newRow) {
+            let data={
+                departmentName: row.departmentName,
+                departmentManagerId: row.departmentManagerId,
+                staffIds:[]
+            }
+            axiosInstance.post("management/department", data).then((res) => {
+                this.update()
+            }).catch((err) => {
+                this.update()
+            })
+        } else {
+            let data={
+                departmentName: row.departmentName,
+                departmentManagerId: row.departmentManagerId,
+            }
+            axiosInstance.put("management/department/"+row.departmentId, data).then((res) => {
+                this.update()
+            }).catch((err) => {
+                this.update()
+            })
+        }
+    }
+    deleteRow = (row: DataSourceType) => {
+        axiosInstance({
+            url: "management/department/" + row.departmentId,
+            method: "delete",
+        }).then((res) => {
+            this.update()
+        })
+    }
+    update = () => {
+        axiosInstance.get("common/department").then((res) => {
+            this.setState({tableData: this.convertor(res.data)})
+            this.actionRef.current?.reload()
+        })
+    }
+
+    convertor = (columns: any[] | undefined | null) => {
+        if (columns === undefined || columns === null) {
+            return []
+        }
+        let res = []
+        for (let i = 0; i < columns.length; i++) {
+            console.log(columns[i].departmentName)
+            res.push({
+                id: columns[i].departmentId,
+                departmentId: columns[i].departmentId,
+                departmentName: columns[i].departmentName,
+                departmentManagerId: columns[i].departmentManager.staffId,
+                departmentManagerName: columns[i].departmentManager.staffName,
+            })
+        }
+        console.log(res);
+        return res
+    }
+
+
+    async request() {
+        let response = await axiosInstance.get("common/department")
+        console.log(response.data)
+        let data = this.convertor(response.data)
+        return {
+            data: data,
+            success: true,
+        }
+    }
+
+    static getDerivedStateFromProps(props: any, state: any) {
+        return {activated: props.activate};
+    }
+
     render() {
         return (
             <div>
-        <h1>Department Config</h1>
+                <EditableProTable<DataSourceType>
+                    actionRef={this.actionRef}
+                    rowKey="id"
+                    headerTitle="部门信息配置"
+                    scroll={{
+                        x: 960,
+                    }}
+
+                    recordCreatorProps={
+                        {
+                            creatorButtonText: '添加部门',
+                            position: "bottom",
+                            record: {
+                                id: (Math.random() * 1000000).toFixed(0),
+                                departmentId: -1,
+                                departmentName: "",
+                                departmentManagerName: "",
+                                departmentManagerId: "",
+                            },
+                        }
+                    }
+                    loading={false}
+                    columns={this.columns}
+                    request={async (params, sorter, filter) => {
+                        return this.request()
+                    }}
+                    value={this.state.tableData}
+                    onChange={(data) => {
+                        this.setState({tableData: data})
+                    }}
+                    editable={{
+                        type: 'single',
+                        editableKeys: this.state.editableKeys,
+                        onSave: async (rowKey, data, row) => {
+                            console.log(rowKey, data, row)
+                            this.saveRow(data)
+                        },
+                        onChange: (e) => {
+                            this.setState({editableKeys: e});
+                        },
+                        actionRender: (row, config, defaultDom) => {
+                            if (row.departmentId === 1)
+                                return [defaultDom.save, defaultDom.cancel]
+                            return [defaultDom.save, defaultDom.delete, defaultDom.cancel]
+                        }
+                    }}
+                />
             </div>
         );
     }
+
+    columns: ProColumns<DataSourceType>[] = [
+        {
+            title: '部门名称',
+            dataIndex: 'departmentName',
+            formItemProps: {
+                rules: [{
+                    required: true, type: "string", whitespace: true, validator: (rule, value) => {
+                        if (value === undefined || value === null || typeof value !== "string" || value.trim() === "") {
+                            return Promise.reject("此项为必填项")
                         }
+                        return Promise.resolve()
+                    }
+                }],
+            },
+            editable: (text, record, index) => {
+                return record.departmentId !== 1
+            },
+            width: '25%',
+        },
+        {
+            title: '主管姓名',
+            dataIndex: 'departmentManagerName',
+            //render: (_) => <span>¥{_}</span>,
+            // formItemProps: (a, b) => {
+            //     return {
+            //         rules: [{
+            //             required: true, type: "string", whitespace: true
+            //         }],
+            //     }
+            //     //style: {width: '100%'}
+            // },
+            readonly: true,
+            valueType: "text",
+            width: '15%'
+        },
+        {
+            title: '主管工号',
+            dataIndex: 'departmentManagerId',
+            width: '15%',
+            valueType: 'text',
+        },
+        {
+            title: '操作',
+            valueType: 'option',
+            width: "45%",
+
+
+            render: (text, record, _, action) => [
+                <a
+                    key="editable"
+                    onClick={() => {
+                        action?.startEditable?.(record.id);
+                    }}
+                >
+                    {"编辑"}
+                </a>,
+                <a
+                    key="delete"
+                    onClick={(item) => {
+                        this.deleteRow(record);
+                    }}
+                >
+                    {record.departmentId !== 1 ? "删除" : ""}
+                </a>,
+            ],
+        },
+    ];
+}
+
+
 export default DepartmentConfig;