|
1 |
| -import React, {useCallback, useMemo, useState} from 'react'; |
| 1 | +import React from 'react'; |
| 2 | +import logo from '@/assets/logo.svg'; |
2 | 3 | import './index.scss';
|
| 4 | +import {useSelector} from "react-redux"; |
| 5 | +import {RootState} from "@/store/Redux"; |
| 6 | +import RoleControl from "@/utils/RoleControl"; |
3 | 7 | import Page from "@/components/Layout/Page";
|
4 | 8 |
|
5 |
| -import {AgGridReact} from 'ag-grid-react'; |
6 |
| -import {AllCommunityModule, ModuleRegistry, themeQuartz,} from "ag-grid-community"; |
7 |
| -import {AG_GRID_LOCALE_CN} from '@ag-grid-community/locale'; |
8 |
| - |
9 |
| -const localeText = AG_GRID_LOCALE_CN; |
10 |
| -// Register all Community features |
11 |
| -ModuleRegistry.registerModules([AllCommunityModule]); |
12 |
| - |
13 |
| - |
14 |
| -const myTheme = themeQuartz.withParams({ |
15 |
| - /* Low spacing = very compact */ |
16 |
| - spacing: 2, |
17 |
| - accentColor: "red", |
18 |
| - |
19 |
| -}); |
20 | 9 | const Index = () => {
|
21 |
| - const [rowData, setRowData] = useState(); |
22 |
| - const [columnDefs, setColumnDefs] = useState([ |
23 |
| - { |
24 |
| - field: "athlete", |
25 |
| - minWidth: 170, |
26 |
| - headerName: "运动员" |
27 |
| - }, |
28 |
| - { |
29 |
| - field: "age", |
30 |
| - headerName: "年龄" |
31 |
| - }, |
32 |
| - { |
33 |
| - field: "country", |
34 |
| - headerName: '国家信息', |
35 |
| - headerClass: 'country-header', |
36 |
| - children: [ |
37 |
| - { |
38 |
| - field: "country", |
39 |
| - headerName: "国家" |
40 |
| - }, |
41 |
| - {field: "name"}, |
42 |
| - {field: "code"} |
43 |
| - ] |
44 |
| - }, |
45 |
| - {field: "year", headerName: "年份"}, |
46 |
| - {field: "date", headerName: "日期"}, |
47 |
| - {field: "sport", headerName: "运动"}, |
48 |
| - {field: "gold", headerName: "金牌"}, |
49 |
| - {field: "silver", headerName: "银牌"}, |
50 |
| - {field: "bronze", headerName: "铜牌"}, |
51 |
| - {field: "total", headerName: "总计",editable: false}, |
52 |
| - ]); |
53 |
| - const theme = useMemo(() => { |
54 |
| - return myTheme; |
55 |
| - }, []); |
56 |
| - const defaultColDef = useMemo(() => { |
57 |
| - return { |
58 |
| - editable: true, |
59 |
| - filter: true, |
60 |
| - }; |
61 |
| - }, []); |
62 |
| - |
63 |
| - const onGridReady = useCallback((params: any) => { |
64 |
| - fetch("https://www.ag-grid.com/example-assets/olympic-winners.json") |
65 |
| - .then((resp) => resp.json()) |
66 |
| - .then((data) => setRowData(data)); |
67 |
| - }, []); |
68 | 10 |
|
| 11 | + const counter = useSelector((state: RootState) => state.counter.value); |
| 12 | + const username = localStorage.getItem('username'); |
69 | 13 |
|
70 | 14 | return (
|
71 | 15 | <Page enablePageContainer={true}>
|
72 |
| - <div |
73 |
| - // define a height because the Data Grid will fill the size of the parent container |
74 |
| - style={{height: 500}} |
75 |
| - > |
76 |
| - <AgGridReact |
77 |
| - rowData={rowData} |
78 |
| - localeText={localeText} |
79 |
| - onRowDataUpdated={(params) => { |
80 |
| - console.log("Row Data Updated", params) |
81 |
| - }} |
82 |
| - onCellValueChanged={(event) => { |
83 |
| - console.log(`New Cell Value:`, event); |
84 |
| - // 当金牌,银牌,铜牌的值发生变化时,更新总计 |
85 |
| - |
86 |
| - //@ts-ignore |
87 |
| - if (['gold', 'silver', 'bronze'].includes(event.colDef.field)) { |
88 |
| - const gold = event.data.gold; |
89 |
| - const silver = event.data.silver; |
90 |
| - const bronze = event.data.bronze; |
91 |
| - const total = gold + silver + bronze; |
92 |
| - event.data.total = total; |
93 |
| - event.api.refreshCells({columns: ['total']}); |
94 |
| - } |
95 |
| - }} |
96 |
| - |
97 |
| - columnDefs={columnDefs} |
98 |
| - theme={theme} |
99 |
| - pagination={true} |
100 |
| - defaultColDef={defaultColDef} |
101 |
| - onGridReady={onGridReady} |
102 |
| - |
103 |
| - /> |
| 16 | + <div className="App"> |
| 17 | + <header className="App-header"> |
| 18 | + <img src={logo} className="App-logo" alt="logo"/> |
| 19 | + <p> |
| 20 | + hi {username} , Redux counter: {counter}, Roles: {RoleControl.roles().map(item => ( |
| 21 | + <label |
| 22 | + key={item} |
| 23 | + style={{ |
| 24 | + margin: '0 5px', |
| 25 | + padding: '5px', |
| 26 | + }}>{item}</label> |
| 27 | + ))} |
| 28 | + </p> |
| 29 | + </header> |
104 | 30 | </div>
|
105 | 31 | </Page>
|
106 | 32 | );
|
|
0 commit comments