add flow

Author: xlorne

admin-ui/package.json

@@ -3,21 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ag-grid-community/locale": "^33.0.3",
     "@ant-design/icons": "^5.4.0",
-    "@ant-design/pro-components": "^2.7.19",
+    "@ant-design/pro-components": "^2.8.2",
     "@babel/standalone": "^7.25.6",
     "@dnd-kit/core": "^6.2.0",
     "@dnd-kit/sortable": "^9.0.0",
+    "@handsontable/react-wrapper": "^15.0.0",
     "@logicflow/core": "^2.0.5",
     "@logicflow/extension": "^2.0.9",
     "@reduxjs/toolkit": "^2.2.7",
     "@types/babel__standalone": "^7.1.7",
     "@types/node": "^16.18.108",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
+    "ag-grid-react": "^33.0.3",
     "antd": "^5.20.6",
     "axios": "^1.7.7",
     "base64-js": "^1.5.1",
+    "handsontable": "^15.0.0",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",

admin-ui/src/api/salary.ts

@@ -0,0 +1,10 @@
+export const users = async () => {
+    const data = [];
+    for(let i=0;i<500;i++){
+        data.push({
+            id:i,
+            name:`张三${i}`
+        });
+    }
+    return data
+}

admin-ui/src/config/menus.tsx

@@ -16,10 +16,10 @@ export const menus = [
         page: 'welcome',
     },
     {
-        path: '/portal',
-        name: '门户',
+        path: '/salary',
+        name: '薪酬',
         icon: "SmileOutlined",
-        page: 'portal',
+        page: 'salary',
     },
     {
         path: '/user',

admin-ui/src/pages/salary/compoments/AGTable.tsx

@@ -0,0 +1,107 @@
+import {AgGridReact} from 'ag-grid-react';
+import {AllCommunityModule, ModuleRegistry, themeQuartz,} from "ag-grid-community";
+import {AG_GRID_LOCALE_CN} from '@ag-grid-community/locale';
+import {useCallback, useMemo, useState} from "react";
+
+const localeText = AG_GRID_LOCALE_CN;
+// Register all Community features
+ModuleRegistry.registerModules([AllCommunityModule]);
+
+
+const myTheme = themeQuartz.withParams({
+    /* Low spacing = very compact */
+    spacing: 2,
+    accentColor: "red",
+
+});
+const AGTable = () => {
+    const [rowData, setRowData] = useState();
+    const [columnDefs, setColumnDefs] = useState([
+        {
+            field: "athlete",
+            headerName: "运动员"
+        },
+        {
+            field: "age",
+            headerName: "年龄"
+        },
+        {
+            field: "country",
+            headerName: '国家信息',
+            headerClass: 'country-header',
+            children: [
+                {
+                    field: "country",
+                    headerName: "国家",
+                },
+                {field: "name"},
+                {field: "code"}
+            ]
+        },
+        {field: "year", headerName: "年份"},
+        {field: "date", headerName: "日期"},
+        {field: "sport", headerName: "运动"},
+        {field: "gold", headerName: "金牌"},
+        {field: "silver", headerName: "银牌"},
+        {field: "bronze", headerName: "铜牌"},
+        {field: "total", headerName: "总计", editable: false},
+    ]);
+    const theme = useMemo(() => {
+        return myTheme;
+    }, []);
+    const defaultColDef = useMemo(() => {
+        return {
+            editable: true,
+            filter: true,
+        };
+    }, []);
+
+    const onGridReady = useCallback((params: any) => {
+        fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
+            .then((resp) => resp.json())
+            .then((data) => setRowData(data));
+    }, []);
+
+
+    const onChange = (row:any,updateRow:(row:any)=>void,refreshColumns:()=>void)=>{
+        const gold = row.gold;
+        const silver = row.silver;
+        const bronze = row.bronze;
+        const total = gold + silver + bronze;
+
+        updateRow({...row,total});
+
+        // update redux store message
+
+        refreshColumns()
+    }
+
+    return (
+        <div
+            // define a height because the Data Grid will fill the size of the parent container
+            style={{height: 900}}
+        >
+            <AgGridReact
+                rowData={rowData}
+                localeText={localeText}
+                onCellValueChanged={(event) => {
+                    //@ts-ignore
+                    if (['gold', 'silver', 'bronze'].includes(event.colDef.field)) {
+                        onChange( event.data,(data:any)=>{
+                            event.data.total = data.total;
+                        },()=>{
+                            event.api.refreshCells({columns: ['total']});
+                        });
+                    }
+                }}
+                columnDefs={columnDefs}
+                theme={theme}
+                // pagination={true}
+                defaultColDef={defaultColDef}
+                onGridReady={onGridReady}
+            />
+        </div>
+    );
+}
+
+export default AGTable;

admin-ui/src/pages/salary/compoments/SalaryTable1.tsx

@@ -0,0 +1,112 @@
+import React, {useEffect} from "react";
+import {ActionType, EditableProTable, ProTable} from "@ant-design/pro-components";
+import {useDispatch, useSelector} from "react-redux";
+import {SalaryState, updateTable1} from "@/pages/salary/store/salary";
+import {Table1UpdateService} from "@/pages/salary/data/table1";
+import {ProColumns} from "@ant-design/pro-table/es/typing";
+import {Input, InputNumber, Space} from "antd";
+import AGTable from "@/pages/salary/compoments/AGTable";
+
+const SalaryTable1 = () => {
+
+    const users = useSelector((state: SalaryState) => state.salary.users);
+
+    const table1 = useSelector((state: SalaryState) => state.salary.table1);
+
+    const store = useSelector((state: SalaryState) => state.salary);
+
+    const table2 = useSelector((state: SalaryState) => state.salary.table2);
+
+    const table2Version = useSelector((state: SalaryState) => state.salary.table2Version);
+
+    const actionRef = React.useRef<ActionType>(null);
+
+    const dispatch = useDispatch();
+
+    const table1UpdateService = new Table1UpdateService(store,
+        (data) => {
+            dispatch(updateTable1(data));
+        }, () => {
+            actionRef.current?.reload();
+        });
+
+    useEffect(() => {
+        table1UpdateService.initData(users);
+    }, [users]);
+
+    // useEffect(() => {
+    //     table1UpdateService.reloadData(table2);
+    // }, [table2Version]);
+
+    const columns = [
+        {
+            title: 'id',
+            dataIndex: 'id',
+            valueType: 'text',
+            editable: false,
+        },
+        {
+            title: '姓名',
+            dataIndex: 'name',
+            valueType: 'text',
+            editable: false,
+            render: (text, record) => {
+                return <InputNumber
+                    value={record.name}
+                    defaultValue={record.name}/>
+            }
+        },
+        {
+            title: '绩效工资',
+            dataIndex: 'jxgz',
+            valueType: 'digit',
+            editable: false,
+            render: (text, record) => {
+                return <InputNumber
+                    value={record.jxgz}
+                    defaultValue={record.jxgz}/>
+            }
+        },
+        {
+            title: '小计',
+            dataIndex: 'sum',
+            valueType: 'text',
+            editable: false,
+            render: (text, record) => {
+                return <InputNumber
+                    value={record.sum}
+                    defaultValue={record.sum}/>
+            }
+        }
+    ] as ProColumns[];
+
+    return (
+        <>
+            {/*<ProTable*/}
+            {/*    actionRef={actionRef}*/}
+            {/*    columns={columns}*/}
+            {/*    search={false}*/}
+            {/*    rowKey={"id"}*/}
+            {/*    virtual={true}*/}
+            {/*    pagination={{*/}
+            {/*        pageSize: 20*/}
+            {/*    }}*/}
+            {/*    scroll={{*/}
+            {/*        x:2900,*/}
+            {/*        y:800*/}
+            {/*    }}*/}
+            {/*    request={async () => {*/}
+            {/*        return {*/}
+            {/*            // table1 top 100*/}
+            {/*            data: table1,*/}
+            {/*            success: true*/}
+            {/*        }*/}
+            {/*    }}*/}
+            {/*/>*/}
+
+            <AGTable/>
+        </>
+    )
+}
+
+export default SalaryTable1;