From 146d5349dd46c79f6f4fbd6d52619e0a09c28243 Mon Sep 17 00:00:00 2001 From: wugaoliang <772094848@qq.com> Date: Mon, 4 Sep 2023 15:07:22 +0800 Subject: [PATCH 1/3] feat: list api --- pages/api/optionAmount.ts | 35 ++++++++++++++++++++++++++++++----- 1 file changed, 30 insertions(+), 5 deletions(-) diff --git a/pages/api/optionAmount.ts b/pages/api/optionAmount.ts index 8155b58..979021f 100644 --- a/pages/api/optionAmount.ts +++ b/pages/api/optionAmount.ts @@ -4,22 +4,47 @@ import { NextApiRequest, NextApiResponse } from 'next' interface Item { key: string; name: string; - age: number; + age: string; address: string; + uuid: string; } +// 26 个英文字母 生成随机英文名 +const letters = 'abcdefghijklmnopqrstuvwxyz'.split(''); +const randomLetter = () => letters[Math.floor(Math.random() * 26)]; +const randomName = () => `${randomLetter()}${randomLetter()}${randomLetter()}${randomLetter()}${randomLetter()}`; +// 随机生成 1980 ~ 2000年的年月日日期 +const randomDate = () => { + const start = new Date(1980, 1, 1); + const end = new Date(2000, 1, 1); + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleString(); +}; +// 随机生成 2~4位的汉字 +const randomChinese = () => { + const str = '兰亭临帖行书如行云流水月下门推心细如妳脚步碎忙不迭千年碑易拓却难拓妳的美真迹绝真心能给谁牧笛横吹黄酒小菜又几碟夕阳余晖如妳的羞怯似醉摹本易写而墨香不退与妳共留余味一行朱砂到底圈了谁'; + let result = ''; + for (let i = 0; i < Math.floor(Math.random() * 3) + 2; i++) { + result += str[Math.floor(Math.random() * 90)]; + } + return result; +}; + + export default async function handle( req: NextApiRequest, res: NextApiResponse ) { const { method, body } = req const originData: Item[] = []; - for (let i = 0; i < 100; i++) { + for (let i = 0; i < 5; i++) { originData.push({ key: i.toString(), - name: `Edward ${i}`, - age: 32, - address: `London Park no. ${i}`, + // 生成随机中文名字 + uuid: Math.random().toString(36).substr(2, 5).toUpperCase(), + // 随机生成英文姓名 + name: randomChinese(), + age: randomDate(), + address: `百度大厦. ${i} 号院`, }); } -- Gitee From 347f5419379e4d350f3c0df469396e710664ad4a Mon Sep 17 00:00:00 2001 From: wugaoliang <772094848@qq.com> Date: Mon, 4 Sep 2023 15:38:12 +0800 Subject: [PATCH 2/3] feat: save api --- pages/api/save.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 pages/api/save.ts diff --git a/pages/api/save.ts b/pages/api/save.ts new file mode 100644 index 0000000..274be44 --- /dev/null +++ b/pages/api/save.ts @@ -0,0 +1,10 @@ +import { NextApiRequest, NextApiResponse } from 'next' + + +export default async function handle( + req: NextApiRequest, + res: NextApiResponse +) { + const { body } = req + return res.status(200).json({ success: true, message: '保存成功', body}) +} -- Gitee From 6dcc41307c2e80b1175d20129f836c13a8c37fb7 Mon Sep 17 00:00:00 2001 From: wugaoliang <772094848@qq.com> Date: Mon, 4 Sep 2023 15:58:27 +0800 Subject: [PATCH 3/3] feat: glf push --- pages/index.tsx | 149 ++++++++++++++++++++++++++++++++++++------------ 1 file changed, 113 insertions(+), 36 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index b2048a7..b9b3f8c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,73 +1,148 @@ -import React, { useState, useEffect } from 'react'; -import { Popconfirm, Table, Typography } from 'antd'; +import React, { useState, useEffect } from 'react' +import { + Popconfirm, + Table, + Typography, + Input, + InputNumber, + message, +} from 'antd' interface Item { - key: string; - name: string; - age: number; - address: string; + key: string + name: string + age: number + address: string } -const originData: Item[] = []; +const originData: Item[] = [] for (let i = 0; i < 100; i++) { originData.push({ key: i.toString(), name: `Edward ${i}`, age: 32, address: `London Park no. ${i}`, - }); + }) } -const Home: React.FC = () => { - const [data, setData] = useState(originData); - const [editingKey, setEditingKey] = useState(''); +const getTableData = async () => { + const res = await fetch('/api/optionAmount').then((res) => res.json()) + if (res.success) { + return res.data + } + return [] +} + +const updateItem = async (messageApi: any, item: Item) => { + const res = await fetch('/api/save', { + method: 'post', + body: JSON.stringify(item), + }) + if (res.success) { + messageApi.success('success') + } +} + +const Home: React.FC = () => { + const [messageApi, contextHolder] = message.useMessage() - const isEditing = (record: Item) => record.key === editingKey; + const [data, setData] = useState(originData) + const [editingKey, setEditingKey] = useState('') + const [itemData, setItemData] = useState() + const isEditing = (record: Item) => record.key === editingKey useEffect(() => { console.log('home') + getTableData().then((resData) => { + const tableData = resData.map((item: any) => { + const age = + new Date().getFullYear() - + new Date('1995-7-24 09:13:10').getFullYear() + return { + ...item, + age, + } + }) + + setData(tableData) + }) }, []) + const edit = (record: Partial & { key: React.Key }) => { + setEditingKey(record.key) + setItemData(record) console.log('edit') - }; + } const cancel = () => { - setEditingKey('取消'); - }; + setEditingKey('取消') + } const save = async (key: React.Key) => { console.log('save') - }; + updateItem(messageApi, itemData) + } const columns = [ { title: 'name', dataIndex: 'name', width: '25%', - editable: true, + render: (text: any, record: Item) => { + return ( + <> + {!isEditing(record) && {text}} + {isEditing(record) && ( + { + setItemData({ ...itemData, name: e.target.value }) + }} + /> + )} + + ) + }, }, { title: 'age', dataIndex: 'age', width: '15%', - editable: true, + render: (text: any, record: Item) => { + return ( + <> + {!isEditing(record) && {text}} + {isEditing(record) && ( + { + console.log(val) + setItemData({ ...itemData, age: val }) + }} + /> + )} + + ) + }, }, { title: 'address', dataIndex: 'address', width: '40%', - editable: true, }, { title: 'operation', dataIndex: 'operation', render: (_: any, record: Item) => { - const editable = isEditing(record); + const editable = isEditing(record) return editable ? ( - save(record.key)} style={{ marginRight: 8 }}> + save(record.key)} + style={{ marginRight: 8 }} + > Save @@ -75,26 +150,28 @@ const Home: React.FC = () => { ) : ( - edit(record)}> + edit(record)} + > Edit - ); + ) }, }, - ]; - + ] return ( - - ); -}; +
+ ) +} export default Home -- Gitee