From 5544dfe0e11ffa0e278a4a4c32bf0e1af3fee809 Mon Sep 17 00:00:00 2001
From: wugaoliang <772094848@qq.com>
Date: Tue, 15 Aug 2023 15:06:02 +0800
Subject: [PATCH 1/3] feat(api): init 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 d8432d50eb156fb333bbbef12be6283e04e9c09e Mon Sep 17 00:00:00 2001
From: wugaoliang <772094848@qq.com>
Date: Tue, 15 Aug 2023 15:22:52 +0800
Subject: [PATCH 2/3] feat: add save api

---
 pages/api/save.ts | 13 +++++++++++++
 1 file changed, 13 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..80178c4
--- /dev/null
+++ b/pages/api/save.ts
@@ -0,0 +1,13 @@
+import { message } from 'antd';
+import { NextApiRequest, NextApiResponse } from 'next'
+
+
+
+
+export default async function handle(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const { body } = req
+  return res.status(200).json({ success: false, message: '保存失败', body})
+}
-- 
Gitee


From 453b5af95fd0e1d0ce860ae7cab11b306daf9e8d Mon Sep 17 00:00:00 2001
From: wugaoliang <772094848@qq.com>
Date: Tue, 15 Aug 2023 16:06:11 +0800
Subject: [PATCH 3/3] feat: myh

---
 pages/index.tsx | 50 +++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 48 insertions(+), 2 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index bf45bcd..cce5817 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,7 @@
+
 import type { NextPage } from 'next'
 import React, { useState, useEffect } from 'react';
-import { Form, Input, InputNumber, Popconfirm, Table, Typography } from 'antd';
+import { Form, Input, InputNumber, Popconfirm, Table, Typography, message } from 'antd';
 
 interface Item {
   key: string;
@@ -61,20 +62,65 @@ const Home: React.FC = () => {
 
   const isEditing = (record: Item) => record.key === editingKey;
 
+  const getList = () => {
+    fetch('/api/optionAmount').then(response => {
+      return response.json()
+    }).then(data => {
+      // console.log(data)
+      const arr = data.data || [];
+      arr.map(item => {
+        item.age= +((new Date().getTime() - new Date(item.age).getTime())/(365*24*3600000)).toFixed(0)
+      })
+      setData(data.data || [])
+      setEditingKey('')
+    })
+  }
+
   useEffect(() => {
     console.log('home')
-    
+    getList()
   }, [])
   const edit = (record: Partial<Item> & { key: React.Key }) => {
     console.log('edit')
+    form.setFieldsValue({
+      name: '',
+      age: '',
+      address: '',
+      ...record
+    })
+    setEditingKey(record.key)
   };
 
   const cancel = () => {
     console.log('cancel')
+    setEditingKey('')
   };
 
   const save = async (key: React.Key) => {
     console.log('save')
+    form.validateFields().then(data => {
+      console.log(data)
+      if(data.age > 120) {
+        message.warning('年龄不能大于120')
+        return
+      }
+      fetch('/api/save', {
+        method: 'post',
+        body: JSON.stringify(data)
+      }).then(response => {
+        return response.json()
+      }).then(data => {
+        console.log(data)
+        if(data.success) {
+          getList()
+        }else{
+          message.warning(data.message)
+        }
+      }).catch((err) => {
+        console.log(err)
+        message.warning('保存失败！')       
+      })
+    })
   };
 
 
-- 
Gitee