完成足迹

src/pages/Footprint/index.tsx

@@ -1,42 +1,18 @@
 import { useState, useEffect } from 'react';
-import { Table, Button, Tag, notification, Card, Popconfirm, Form, Input, DatePicker } from 'antd';
-import { titleSty } from '@/styles/sty'
+import { Table, Button, Tag, notification, Card, Popconfirm, Form, Input, DatePicker, Modal, Spin, message } from 'antd';
+import { titleSty } from '@/styles/sty';
 import Title from '@/components/Title';
-import { Link } from 'react-router-dom';
-
-import { delFootprintDataAPI, getFootprintListAPI } from '@/api/Footprint';
+import { delFootprintDataAPI, getFootprintListAPI, addFootprintDataAPI, editFootprintDataAPI, getFootprintDataAPI } from '@/api/Footprint';
 import type { Footprint, FilterFootprint, FilterForm } from '@/types/app/footprint';
-
 import dayjs from 'dayjs';
 
 const FootprintPage = () => {
   const [loading, setLoading] = useState<boolean>(false);
   const [footprintList, setFootprintList] = useState<Footprint[]>([]);
-
-  const { RangePicker } = DatePicker;
-
-  const getFootprintList = async () => {
-    setLoading(true);
-
-    const { data } = await getFootprintListAPI();
-    setFootprintList(data as Footprint[]);
-
-    setLoading(false);
-  };
-
-  useEffect(() => {
-    getFootprintList()
-  }, []);
-
-  const delFootprintData = async (id: number) => {
-    setLoading(true);
-
-    await delFootprintDataAPI(id);
-    notification.success({ message: '🎉 删除足迹成功' })
-    getFootprintList();
-
-    setLoading(false);
-  };
+  const [isModelOpen, setIsModelOpen] = useState(false);
+  const [footprint, setFootprint] = useState<Footprint>({} as Footprint);
+  const [isMethod, setIsMethod] = useState<'create' | 'edit'>('create');
+  const [form] = Form.useForm();
 
   const columns = [
     {
@@ -65,7 +41,8 @@ const FootprintPage = () => {
       dataIndex: 'content',
       key: 'content',
       align: 'center',
-      width: 200,
+      width: 400,
+      render: (value: string) => <div className='line-clamp-3'>{value}</div>
     },
     {
       title: '坐标纬度',
@@ -73,23 +50,15 @@ const FootprintPage = () => {
       key: 'position',
       align: 'center',
       width: 200,
-      render: (list: number[]) => list.map((item, index) => <Tag key={index}>{item}</Tag>)
-    },
-    {
-      title: '图片',
-      dataIndex: 'image',
-      key: 'image',
-      align: 'center',
-      width: 200,
-      render: (images: string[]) => images.map((image, index) => <Tag key={index}>{image}</Tag>)
+      render: (value: string) => <Tag>{value}</Tag>
     },
     {
       title: '时间',
-      dataIndex: 'time',
-      key: 'time',
+      dataIndex: 'createTime',
+      key: 'createTime',
       align: 'center',
       width: 200,
-      render: (text: string) => dayjs(+text).format('YYYY-MM-DD HH:mm:ss'),
+      render: (time: string) => dayjs(+time).format('YYYY-MM-DD HH:mm:ss'),
     },
     {
       title: '操作',
@@ -98,10 +67,7 @@ const FootprintPage = () => {
       align: 'center',
       render: (text: string, record: Footprint) => (
         <div className='flex space-x-2'>
-          <Link to={`/create?id=${record.id}`}>
-            <Button>修改</Button>
-          </Link>
-
+          <Button onClick={() => editFootprintData(record.id!)}>修改</Button>
           <Popconfirm title="警告" description="你确定要删除吗" okText="确定" cancelText="取消" onConfirm={() => delFootprintData(record.id!)}>
             <Button type="primary" danger>删除</Button>
           </Popconfirm>
@@ -110,7 +76,77 @@ const FootprintPage = () => {
     },
   ];
 
-  const onSubmit = async (values: FilterForm) => {
+  const { RangePicker } = DatePicker;
+
+  const getFootprintList = async () => {
+    setLoading(true);
+    const { data } = await getFootprintListAPI();
+    setFootprintList(data as Footprint[]);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    getFootprintList();
+  }, []);
+
+  const reset = () => {
+    setIsMethod("create");
+    form.resetFields();
+    setFootprint({} as Footprint);
+    setIsModelOpen(false);
+  }
+
+  const delFootprintData = async (id: number) => {
+    setLoading(true);
+    await delFootprintDataAPI(id);
+    notification.success({ message: '🎉 删除足迹成功' });
+    getFootprintList();
+    setLoading(false);
+  };
+
+  const addFootprintData = () => {
+    setIsMethod("create");
+    setIsModelOpen(true);
+    form.resetFields();
+    setFootprint({} as Footprint);
+  };
+
+  const editFootprintData = async (id: number) => {
+    setIsMethod("edit");
+    setLoading(true);
+    setIsModelOpen(true);
+
+    const { data } = await getFootprintDataAPI(id);
+
+    data.images = (data.images as string[]).join("\n")
+    data.createTime = dayjs(+data.createTime)
+
+    setFootprint(data);
+    form.setFieldsValue(data);
+    setLoading(false);
+  };
+
+  const onSubmit = async () => {
+    form.validateFields().then(async (values: Footprint) => {
+      values.createTime = values.createTime.valueOf()
+      values.images = (values.images as string).split("\n")
+
+      if (isMethod === "edit") {
+        await editFootprintDataAPI({ ...footprint, ...values });
+        message.success('🎉 修改足迹成功');
+      } else {
+        await addFootprintDataAPI({ ...footprint, ...values });
+        message.success('🎉 新增足迹成功');
+      }
+
+      reset()
+      getFootprintList();
+    });
+  };
+
+  const closeModel = () => reset();
+
+  const onFilterSubmit = async (values: FilterForm) => {
     const query: FilterFootprint = {
       key: values.address ? values.address : null,
       startDate: values.createTime ? values.createTime[0].valueOf() + '' : null,
@@ -126,19 +162,23 @@ const FootprintPage = () => {
       <Title value="足迹管理" />
 
       <Card className='my-2 overflow-scroll'>
-        <Form layout="inline" onFinish={onSubmit} autoComplete="off" className='flex-nowrap'>
-          <Form.Item label="地址" name="address" className='w-2/12'>
-            <Input placeholder='请输入地址关键词' />
-          </Form.Item>
+        <div className='flex'>
+          <Form layout="inline" onFinish={onFilterSubmit} autoComplete="off" className='flex-nowrap w-full'>
+            <Form.Item label="地址" name="address" className='w-2/12'>
+              <Input placeholder='请输入地址关键词' />
+            </Form.Item>
 
-          <Form.Item label="时间范围" name="createTime" className='w-3/12'>
-            <RangePicker placeholder={["选择起始时间", "选择结束时间"]} />
-          </Form.Item>
+            <Form.Item label="时间范围" name="createTime" className='w-3/12'>
+              <RangePicker placeholder={["选择起始时间", "选择结束时间"]} />
+            </Form.Item>
 
-          <Form.Item className='pr-6'>
-            <Button type="primary" htmlType="submit">查询</Button>
-          </Form.Item>
-        </Form>
+            <Form.Item className='pr-6'>
+              <Button type="primary" htmlType="submit">查询</Button>
+            </Form.Item>
+          </Form>
+
+          <Button type="primary" onClick={addFootprintData}>新增足迹</Button>
+        </div>
       </Card>
 
       <Card className={`${titleSty}`}>
@@ -154,6 +194,45 @@ const FootprintPage = () => {
           }}
         />
       </Card>
+
+      <Modal title={isMethod === "edit" ? "编辑足迹" : "新增足迹"} open={isModelOpen} onCancel={closeModel} destroyOnClose footer={null}>
+        <Form form={form} layout="vertical" initialValues={footprint} size='large' preserve={false} className='mt-6'>
+          <Form.Item label="标题" name="title" rules={[{ required: true, message: '标题不能为空' }]}>
+            <Input placeholder="请输入标题" />
+          </Form.Item>
+
+          <Form.Item label="地址" name="address" rules={[{ required: true, message: '地址不能为空' }]}>
+            <Input placeholder="请输入地址" />
+          </Form.Item>
+
+          <Form.Item label="坐标纬度" name="position" rules={[{ required: true, message: '坐标纬度不能为空' }]}>
+            <Input placeholder="请输入坐标纬度" />
+          </Form.Item>
+
+          <Form.Item label="图片" name="images">
+            <Input.TextArea
+              autoSize={{ minRows: 2, maxRows: 10 }}
+              placeholder="请输入图片链接"
+            />
+          </Form.Item>
+
+          <Form.Item label="内容" name="content" rules={[{ required: true, message: '内容不能为空' }]}>
+            <Input.TextArea
+              autoSize={{ minRows: 5, maxRows: 10 }}
+              placeholder="请输入内容"
+            />
+          </Form.Item>
+
+          <Form.Item label="时间" name="createTime" rules={[{ required: true, message: '时间不能为空' }]}>
+            <DatePicker showTime placeholder='请选择时间' className='w-full' />
+          </Form.Item>
+
+          <Form.Item className='!mb-0 flex justify-end'>
+            <Button onClick={closeModel}>取消</Button>
+            <Button type="primary" onClick={onSubmit} className='ml-2'>确定</Button>
+          </Form.Item>
+        </Form>
+      </Modal>
     </>
   );
 };

src/types/app/footprint.d.ts

@@ -3,9 +3,9 @@ export interface Footprint {
     title: string;
     address: string;
     content: string;
-    position: number[];
-    image: string[];
-    time: string;
+    position: string;
+    images: string | string[];
+    createTime?: string | Dayjs;
 }
 
 export interface FilterFootprint {