feat: 动态信息增删改查 (#4)

src/pages/CatMessage/index.tsx

@@ -3,17 +3,17 @@ import { PlusOutlined } from '@ant-design/icons';
 import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { FooterToolbar, PageContainer, ProTable } from '@ant-design/pro-components';
 import { Button } from 'antd';
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { OPERATIONS } from '../commonSettings';
 import Create from './components/Create';
 import Delete from './components/Delete';
 import Edit from './components/Edit';
 import View from './components/View';
 import { CAT_MESSAGE_COLUMNS } from './settings';
 
-const handleRemove = async (selectedRows: API.RuleListItem[]) => {
-  console.log(selectedRows);
-};
+// const handleRemove = async (selectedRows: API.RuleListItem[]) => {
+//   console.log(selectedRows);
+// };
 
 const CatMessage: React.FC = () => {
   const actionRef = useRef<ActionType>();
@@ -145,15 +145,16 @@ const CatMessage: React.FC = () => {
           }
         >
           <Button
-            onClick={async () => {
-              await handleRemove(selectedRowsState);
-              setSelectedRows([]);
-              actionRef.current?.reloadAndRest?.();
-            }}
+            // onClick={async () => {
+            //   await handleRemove(selectedRowsState);
+            //   setSelectedRows([]);
+            //   actionRef.current?.reloadAndRest?.();
+            // }}
+            type="primary"
+            danger
           >
             批量删除
           </Button>
-          <Button type="primary">批量审批</Button>
         </FooterToolbar>
       )}
     </PageContainer>

src/pages/News/components/Create/index.tsx

@@ -0,0 +1,56 @@
+import { createNewInfo } from '@/services/news';
+import { DrawerForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
+
+const Create = ({ open, setCreateVisible, actionRef }: any) => {
+  const handleCreate = async (value: any) => {
+    const data = {
+      ...value,
+      id: '',
+      communityId: '637ce159b15d9764c31f9c84',
+      photos: ['https://static.xhpolaris.com/cat_world.jpg'],
+    };
+    const success = await createNewInfo(data);
+    if (success) {
+      setCreateVisible(false);
+      if (actionRef.current) {
+        actionRef.current.reload();
+      }
+    }
+  };
+
+  return (
+    <DrawerForm
+      title="新增动态"
+      width="600px"
+      open={open}
+      onOpenChange={setCreateVisible}
+      layout="horizontal"
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 19 }}
+      onFinish={handleCreate}
+    >
+      <ProFormText
+        rules={[
+          {
+            required: true,
+            message: '此条必填',
+          },
+        ]}
+        name="title"
+        label="标题"
+      />
+      <ProFormTextArea
+        name="text"
+        label="内容"
+        rules={[
+          {
+            required: true,
+            message: '此条必填',
+          },
+        ]}
+      />
+    </DrawerForm>
+  );
+};
+
+export default Create;

src/pages/News/components/Delete/index.tsx

@@ -0,0 +1,41 @@
+import { deleteNewInfo } from '@/services/news';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { Modal, Space } from 'antd';
+
+const Delete = ({ open, setDeleteVisible, actionRef, currentNew }: any) => {
+  const handleDelete = async () => {
+    const success = await deleteNewInfo({ momentId: currentNew });
+    if (success) {
+      setDeleteVisible(false);
+      if (actionRef.current) {
+        actionRef.current.reload();
+      }
+    }
+  };
+
+  const handleCancel = () => {
+    setDeleteVisible(false);
+  };
+
+  return (
+    <Modal
+      title={
+        <Space>
+          <ExclamationCircleOutlined />
+          删除动态
+        </Space>
+      }
+      open={open}
+      okText="确认"
+      okType="danger"
+      cancelText="取消"
+      centered
+      onOk={handleDelete}
+      onCancel={handleCancel}
+    >
+      确定删除这条动态吗？
+    </Modal>
+  );
+};
+
+export default Delete;

src/pages/News/components/Edit/index.tsx

@@ -0,0 +1,70 @@
+import { editNewInfo, fetchCurrentNewInfo } from '@/services/news';
+import { DrawerForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
+import { Form } from 'antd';
+import { useEffect } from 'react';
+
+const Edit = ({ open, setEditVisible, actionRef, currentNew }: any) => {
+  const [form] = Form.useForm();
+
+  const handleEdit = async (value: any) => {
+    const data = {
+      ...value,
+      id: currentNew,
+      communityId: '637ce159b15d9764c31f9c84',
+      avatars: ['https://static.xhpolaris.com/cat_world.jpg'],
+    };
+    const success = await editNewInfo(data);
+    if (success) {
+      setEditVisible(false);
+      if (actionRef.current) {
+        actionRef.current.reload();
+      }
+    }
+  };
+
+  useEffect(() => {
+    (async () => {
+      if (currentNew) {
+        const data = await fetchCurrentNewInfo({ momentId: currentNew });
+        form.setFieldsValue(data?.moment);
+      }
+    })();
+  }, [currentNew]);
+
+  return (
+    <DrawerForm
+      title="编辑动态"
+      width="600px"
+      open={open}
+      onOpenChange={setEditVisible}
+      layout="horizontal"
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 17 }}
+      onFinish={handleEdit}
+      form={form}
+    >
+      <ProFormText
+        rules={[
+          {
+            required: true,
+            message: '此条必填',
+          },
+        ]}
+        name="title"
+        label="标题"
+      />
+      <ProFormTextArea
+        name="text"
+        label="内容"
+        rules={[
+          {
+            required: true,
+            message: '此条必填',
+          },
+        ]}
+      />
+    </DrawerForm>
+  );
+};
+
+export default Edit;

src/pages/News/components/View/index.tsx

@@ -0,0 +1,45 @@
+import { formatTime } from '@/scripts/utils';
+import { fetchCurrentNewInfo } from '@/services/news';
+import { Avatar, Descriptions, Modal, Image } from 'antd';
+import { useEffect, useState } from 'react';
+
+const View = ({ open, setViewVisible, currentNew }: any) => {
+  const [data, setData] = useState<any>({});
+
+  const handleOk = () => {
+    setViewVisible(false);
+  };
+
+  const handleCancel = () => {
+    setViewVisible(false);
+  };
+
+  useEffect(() => {
+    if (open) {
+      fetchCurrentNewInfo({ momentId: currentNew }).then((res) => setData(res));
+    }
+  }, [open]);
+
+  const { moment = {} } = data;
+  const { createAt, title, text, user = {}, photos } = moment;
+  const { nickname, avatarUrl } = user;
+
+  return (
+    <Modal title="动态详情" open={open} onOk={handleOk} onCancel={handleCancel}>
+      <Descriptions>
+        <Descriptions.Item label="头像">
+          <Avatar src={avatarUrl ?? ''} />
+        </Descriptions.Item>
+        <Descriptions.Item label="发布者">{nickname ?? ''}</Descriptions.Item>
+        <Descriptions.Item label="发布时间">{formatTime(createAt ?? '')}</Descriptions.Item>
+        <Descriptions.Item label="标题">{title ?? ''}</Descriptions.Item>
+        <Descriptions.Item label="图片">
+          <Image src={photos ?? ''} />
+        </Descriptions.Item>
+        <Descriptions.Item label="发布内容">{text ?? ''}</Descriptions.Item>
+      </Descriptions>
+    </Modal>
+  );
+};
+
+export default View;