我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣学习前端知识
import { Link, Route, Routes, useNavigate } from "react-router-dom";
import { Admin, CustomRoutes, Layout, LayoutProps, ListGuesser, Resource, fetchUtils } from "react-admin";
import postgrestRestProvider, { IDataProviderConfig, defaultPrimaryKeys, defaultSchema } from '@raphiniert/ra-data-postgrest';
import { Collapse, Grid, ListItem, ListItemText, Paper, List } from "@material-ui/core";
import { RListData } from "./RServer/data";
import RFirst from "./RFirst";
const config: IDataProviderConfig = {
apiUrl: '/postgrest',
httpClient: fetchUtils.fetchJson,
defaultListOp: 'eq',
primaryKeys: defaultPrimaryKeys,
schema: defaultSchema
}
const baseDataProvider = postgrestRestProvider(config);
const dataProvider = {
...baseDataProvider,
//可以在这里添加越过dataProvider的数据访问
}
const appBar = (props: any) => {
return (
<></>
)
}
const useAppMenu = () => {
return (<></>)
}
const mySidebar = () => {
return (<></>)
}
const appLayout = (props: LayoutProps) => {
return (
<Layout
sx={
{
'& .RaLayout-appFrame': {
minHeight: '100%',
height: '100%',
margin: 0,
padding: 0
},
'& .RaLayout-content:': { marginTop: 0, marginBottom: 0, padding: 0, minHeight: '100%', height: '100%' },
'& .RaLayout-contentWithSidebar': { margin: 0, padding: 0, minHeight: '100%', height: '100%' },
minHeight: '100%',
height: '100%',
margin: 0,
padding: 0,
}
}
{...props}
appBar={appBar}
menu={useAppMenu}
sidebar={mySidebar}
/>
)
}
const RList = () => {
const navigate = useNavigate();
const handleLinkTo = () => {
navigate('mySecondPage/');
}
const handleClickStyle = (dataUrl: any) => {
const url = `${dataUrl}/`
navigate(url)
// setOpen(!open);
};
return (
<div>
<Grid style={{ margin: 0, padding: 0, display: "flex" }} >
<Grid style={{ width: "200px", margin: "24px 0 0 24px" }} >
<Paper>
{RListData && RListData.map((item: any, i) => (
<List style={{ margin: "0px 0px 0 24px" }} component="div">
<ListItem button onClick={() => handleClickStyle(item.path)}>
<ListItemText primary={item.name} />
</ListItem>
</List>
))}
</Paper>
</Grid>
<Grid style={{ flexGrow: "1", margin: "24px 0 0 24px" }} >
<Admin
dataProvider={dataProvider}
basename='/rlist'
layout={appLayout}
>
<Resource name='t_geyao_person' list={RFirst} />
<CustomRoutes>
</CustomRoutes>
</Admin>
</Grid>
</Grid>
</div>
)
}
export default RList;
import React from 'react'
import { List,Datagrid,TextField,EditButton,DeleteButton,BooleanField } from 'react-admin'
const RFirst = (props: any) => {
return <List {...props} exporter={false}>
<Datagrid>
<TextField source='id'></TextField>
<TextField source='name'></TextField>
<TextField source='sex'></TextField>
<TextField source='salary'></TextField>
<BooleanField source='status'></BooleanField>
<EditButton></EditButton>
<DeleteButton></DeleteButton>
</Datagrid>
</List>
}
export default RFirst
运行结果