feat: 轮播图信息增删改 (#9)

config/routes.ts

@@ -57,11 +57,17 @@ export default [
     component: './News',
   },
   {
-    name: '联系方式管理',
-    icon: 'mail',
-    path: '/contact-information',
-    component: './ContactInformation',
+    name: '轮播图管理',
+    icon: 'pictureOutlined',
+    path: '/carousel',
+    component: './Carousel',
   },
+  // {
+  //   name: '联系方式管理',
+  //   icon: 'mail',
+  //   path: '/contact-information',
+  //   component: './ContactInformation',
+  // },
   {
     path: '/',
     redirect: '/welcome',

src/components/UploadImagesFormItem/index.tsx

@@ -17,7 +17,7 @@ const getBase64 = (file: RcFile): Promise<string> => {
   });
 };
 
-const UploadImagesFormItem = ({ value = [], onChange }: any) => {
+const UploadImagesFormItem = ({ value = [], onChange, limit = 1 }: any) => {
   const [previewOpen, setPreviewOpen] = useState<boolean>(false);
   const [previewImage, setPreviewImage] = useState<string>('');
   const [previewTitle, setPreviewTitle] = useState<string>('');
@@ -131,7 +131,7 @@ const UploadImagesFormItem = ({ value = [], onChange }: any) => {
         method="PUT"
         customRequest={handleRequest}
       >
-        {fileList.length >= 9 ? null : uploadButton}
+        {fileList.length >= limit ? null : uploadButton}
       </Upload>
       <Modal open={previewOpen} title={previewTitle} footer={null} onCancel={handleCancel}>
         <img alt="example" style={{ width: '100%' }} src={previewImage} />

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

@@ -0,0 +1,70 @@
+import UploadImagesFormItem from '@/components/UploadImagesFormItem';
+import { createCarousel } from '@/services/carousel';
+import { DrawerForm, ProFormText } from '@ant-design/pro-components';
+import { Form } from 'antd';
+
+const Create = ({ open, setCreateVisible, actionRef }: any) => {
+  const handleCreate = async (value: any) => {
+    const data = {
+      ...value,
+      id: '',
+      communityId: '637ce159b15d9764c31f9c84',
+      imageUrl: value?.imageUrl?.[0],
+    };
+    const success = await createCarousel(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="linkUrl"
+        label="跳转链接"
+      />
+      <ProFormText
+        rules={[
+          {
+            required: true,
+            message: '此条必填',
+          },
+        ]}
+        name="type"
+        label="公示类型"
+      />
+      <Form.Item
+        name="imageUrl"
+        label="图片"
+        rules={[
+          {
+            required: true,
+            message: '此条必填',
+          },
+        ]}
+      >
+        <UploadImagesFormItem limit={1} />
+      </Form.Item>
+    </DrawerForm>
+  );
+};
+
+export default Create;

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

@@ -0,0 +1,41 @@
+import { deleteCarousel } from '@/services/carousel';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { Modal, Space } from 'antd';
+
+const Delete = ({ open, setDeleteVisible, actionRef, currentCarousel }: any) => {
+  const handleDelete = async () => {
+    const success = await deleteCarousel({ id: currentCarousel?.id });
+    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/Carousel/components/Edit/index.tsx

@@ -0,0 +1,84 @@
+import UploadImagesFormItem from '@/components/UploadImagesFormItem';
+import { editCarousel } from '@/services/carousel';
+import { DrawerForm, ProFormText } from '@ant-design/pro-components';
+import { Form } from 'antd';
+import { useEffect } from 'react';
+
+const Edit = ({ open, setEditVisible, actionRef, currentCarousel }: any) => {
+  const [form] = Form.useForm();
+
+  const handleEdit = async (value: any) => {
+    const data = {
+      ...value,
+      id: currentCarousel?.id,
+      communityId: '',
+      imageUrl: value?.imageUrl?.[0],
+    };
+    const success = await editCarousel(data);
+    if (success) {
+      setEditVisible(false);
+      if (actionRef.current) {
+        actionRef.current.reload();
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (currentCarousel) {
+      const formData = {
+        ...currentCarousel,
+        imageUrl: [currentCarousel?.imageUrl],
+      };
+      form.setFieldsValue(formData);
+    }
+  }, [currentCarousel]);
+
+  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="linkUrl"
+        label="跳转链接"
+      />
+      <ProFormText
+        rules={[
+          {
+            required: true,
+            message: '此条必填',
+          },
+        ]}
+        name="type"
+        label="公示类型"
+      />
+      <Form.Item
+        name="imageUrl"
+        label="图片"
+        rules={[
+          {
+            required: true,
+            message: '此条必填',
+          },
+        ]}
+      >
+        <UploadImagesFormItem limit={1} />
+      </Form.Item>
+    </DrawerForm>
+  );
+};
+
+export default Edit;

src/pages/Carousel/index.tsx

@@ -0,0 +1,116 @@
+import { fetchCarouselList } from '@/services/carousel';
+import { PlusOutlined } from '@ant-design/icons';
+import type { ActionType, ProColumns } from '@ant-design/pro-components';
+import { PageContainer, ProTable } from '@ant-design/pro-components';
+import { Button } from 'antd';
+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 { CAROUSEL_COLUMNS } from './settings';
+
+const Carousel: React.FC = () => {
+  const actionRef = useRef<ActionType>();
+  const [currentCarousel, setCurrentCarousel] = useState({});
+  const [createVisible, setCreateVisible] = useState(false);
+  const [deleteVisible, setDeleteVisible] = useState(false);
+  const [editVisible, setEditVisible] = useState(false);
+
+  const requestTable = async (
+    params: any & {
+      pageSize: number;
+      current: number;
+    },
+  ) => {
+    const msg = await fetchCarouselList({
+      ...params,
+      current: params.current,
+      pageSize: params.pageSize,
+      communityId: '637ce159b15d9764c31f9c84',
+    });
+    return {
+      data: msg.news,
+      success: true,
+      total: msg.news.length,
+    };
+  };
+
+  const columns: ProColumns[] = [
+    ...CAROUSEL_COLUMNS,
+    {
+      ...OPERATIONS,
+      width: 100,
+      render: (_, record) => (
+        <>
+          <Button
+            type="link"
+            size="small"
+            key="edit"
+            onClick={() => {
+              setCurrentCarousel(record);
+              setEditVisible(true);
+            }}
+          >
+            编辑
+          </Button>
+          <Button
+            type="link"
+            size="small"
+            danger
+            key="delete"
+            onClick={() => {
+              setCurrentCarousel(record);
+              setDeleteVisible(true);
+            }}
+          >
+            删除
+          </Button>
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <PageContainer>
+      <ProTable<API.RuleListItem, API.PageParams>
+        headerTitle={'轮播图信息'}
+        actionRef={actionRef}
+        rowKey="id"
+        search={false}
+        toolBarRender={() => [
+          <Button
+            type="primary"
+            key="primary"
+            onClick={() => {
+              setCreateVisible(true);
+            }}
+          >
+            <PlusOutlined />
+            新建
+          </Button>,
+        ]}
+        request={requestTable}
+        columns={columns}
+        pagination={{
+          pageSize: 20,
+        }}
+      />
+      <Create open={createVisible} setCreateVisible={setCreateVisible} actionRef={actionRef} />
+      <Delete
+        open={deleteVisible}
+        setDeleteVisible={setDeleteVisible}
+        actionRef={actionRef}
+        currentCarousel={currentCarousel}
+      />
+      <Edit
+        open={editVisible}
+        setEditVisible={setEditVisible}
+        actionRef={actionRef}
+        currentCarousel={currentCarousel}
+      />
+    </PageContainer>
+  );
+};
+
+export default Carousel;