列表页面
1. 页面组件
import { GetServerSideProps, NextPage, PageConfig } from 'next'; import Head from 'next/head'; import Content from './content'; import an49 from '@mmstudio/an000049'; interface IProps { data: ITbxxx[]; query: Record<string, string>; } /** * xxx管理 */ const Page: NextPage<IProps> = ({ data, query }) => { return ( <> <Head> <title>xxxx管理</title> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"></link> <link rel="icon" type="image/x-icon" sizes="32x32" href="/favicon-32x32.ico" ></link> <link rel="icon" type="image/x-icon" sizes="16x16" href="/favicon-16x16.ico"></link> </Head> <Content data={data} id={query.id} /> </> ); }; export const config: PageConfig = { amp: false }; export default Page; // pre-render this page on each request export const getServerSideProps: GetServerSideProps<IProps> = async (context) => { const db = an49(); const tb = db<ITbxxx>('xxx'); const d = await tb.select('*').orderBy('xxx', 'asc'); const data = d.map((it) => { return { ...it }; }); const query = context.query as Record<string, string>; return { props: { data, query } }; };
2. Content组件
import { useEffect, useState } from 'react'; import smartfetch from '@mmstudio/an000058'; import Search from './search'; import List from './list'; import api from '../../../atoms/api'; import Add from './add'; import Title from './title'; import RightContainer from './rightcontainer'; import { Pagination } from 'antd'; import { useUrlSearchParams } from "use-url-search-params"; import { Query as Q1, Result as R1, IData } from '../../api/xxx/query.api'; export default function Content(props: { query: Record<string, string>; data: Itbxxx[]; }) { const [data, setdata] = useState<R1>({ count: 0, data: [] }); const [query, setquery] = useState<Q1>(props.query); const [, setParams] = useUrlSearchParams({}, { page: Number }); async function reload(q: Q1) { setquery(q); setParams(q); const data = await smartfetch<R1, Q1>(api.admin.projects.search, 'get', q); setdata(data); } useEffect(() => { void reload(query); }, []); return <> <Title /> <RightContainer> <Search<IData> pagesize={Number(query.pagesize)} service={api.xxx.search} initq={query.q} onChange={(v) => { setdata(v); }} /> <Add data={props.data} /> </RightContainer> <List data={data} initData={props.data} /> <RightContainer> <Pagination current={Number(query.page || '1')} pageSize={Number(query.pagesize || '10')} showTitle total={data.count} onChange={(p, s) => { const q = { q: query.q, page: p.toString(), pagesize: s.toString() } as Q1; setquery(q); reload(q); }} /> </RightContainer> <style jsx>{` .c{ display: flex; justify-content: space-between; align-items: center; } .ops{ display: flex; justify-content: flex-end; align-items: center; } `}</style> </>; }
Search查询组件
Row组件
Add新增组件
import { Form, Input, InputNumber, Select } from 'antd'; import { useState } from 'react'; import smartfetch from '@mmstudio/an000058'; import AddButton from './addbutton'; export default function Add({ data }: { data: ITbxxx[]; }) { const [d, setd] = useState({ dataids: [] } as { dataids: string[]; }); const mapdata = data.reduce((map, it) => { return map.set(it.xxx, it); }, new Map<string, XXX>()); return <AddButton dlgtitle='xxx' onSave={async () => { if (!d.xxx === undefined || !d.yyy) { return '请填写完整'; } const data = await smartfetch<xxx, xxx>('/api/xxx', 'put', { ...d }); return data.ok || data.message; }} > <Form.Item required label="xxx:"> <InputNumber min={'1'} placeholder='xxx' value={d.xxx} onChange={(e) => { setd({ ...d, xxx: e }) }} /> </Form.Item> <Form.Item required label="xxx:"> <Input placeholder='xxx' value={d.xxx} onChange={(e) => { setd({ ...d, xxx: e.target.value }); }} /> </Form.Item> <Form.Item label="xxx"> <Select mode="multiple" optionFilterProp="children" filterOption={(input, option) => { return option.children.indexOf(input) >= 0 }} placeholder='xxx' value={d.dataids} onChange={(e) => { const dataids = e.map((it) => { return mapdata.get(it); }); setd({ ...d, dataids }); }} > {data.map((it) => { return <Select.Option key={it.id} value={it.id} >{it.name}</Select.Option> })} </Select> </Form.Item> </AddButton>; }
AddButton通用新增按钮
Button组件
面包屑组件
List列表组件
注意：key要唯一
import { Table } from 'antd'; import Edit from './edit'; import DelButton from './delbutton'; import Shadow from './shadow'; export default function List({ data, initData }: { data: IData[]; initData: ITbxxx[]; }) { return <> <Shadow> <Table bordered dataSource={data} pagination={false} > <Table.Column<IData> title="xxx" dataIndex="xxx" key="key" width='6rem' align='center' /> <Table.Column<IData> title="操作" key="key" align='center' width='15rem' render={(_text, record) => { const id = record.id; return <div className='op'> <Edit data={record} users={initData} /> <DelButton query={{ id }} dlgtitle='确认删除' api={'/api/xxx'} /> </div> }} /> </Table> </Shadow> <style jsx>{` .op{ margin: 0; display: flex; justify-content: space-around; align-items: center; width: 14rem; height: 1rem; flex-wrap: nowrap; } `}</style> </>; }
Edit编辑组件
import { Form, Input, InputNumber, Select } from 'antd'; import { useState } from 'react'; import api from '../../../atoms/api'; import smartfetch from '@mmstudio/an000058'; import { Message as M1, Result as R1 } from '../../api/xxx/edit.api'; import { IData } from '../../api/xxx/query.api'; import EditButton from '../../../components/editbutton'; export default function Edit({ data, initData }: { data: IData; initData: ITbxxx[]; }) { const mapinitdata = initData.reduce((map, it) => { return map.set(it.id, it); }, new Map<string, xxx>()); const [d, setd] = useState(data); const dataids = d.users.map((it) => { return it.id; }); return <> <EditButton dlgtitle='xxx' onSave={async () => { if (!d.type_no === undefined || !d.type || !d.type_explain) { return '请填写完整'; } const data = await smartfetch<R1, M1>(api.admin.types.edit, 'put', d); return data.ok || data.message; }} > <Form.Item required label="xxx:"> <InputNumber placeholder='xxx' readOnly defaultValue={d.id} /> </Form.Item> <Form.Item required label="xxx:" hasFeedback> <Input type='text' placeholder='xxx' value={d.xxx} onChange={(e) => { setd({ ...d, xxx: e.target.value }); }} /> </Form.Item> <Form.Item label="xxx"> <Select mode="multiple" optionFilterProp="children" filterOption={(input, option) => { return option.children.indexOf(input) >= 0 }} placeholder='xxx' value={dataids} onChange={(e) => { const xxx = e.map((it) => { return mapinitdata.get(it); }); setd({ ...d, xxx }); }} > {initData.map((it) => { return <Select.Option key={it.id} value={it.id} >{it.name}</Select.Option> })} </Select> </Form.Item> </EditButton> </>; }