From 564e7e081f800e66605f0e85423e4b424993691b Mon Sep 17 00:00:00 2001 From: Yufeng Cheng <1351416566@qq.com> Date: Mon, 23 Jan 2023 16:02:26 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BD=AE=E6=92=AD=E5=9B=BE=E4=BF=A1?= =?UTF-8?q?=E6=81=AF=E5=A2=9E=E5=88=A0=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/routes.ts | 14 ++- .../{ PhotoAlbum => PhotoAlbum}/index.tsx | 0 src/components/UploadImagesFormItem/index.tsx | 4 +- .../Carousel/components/Create/index.tsx | 70 +++++++++++ .../Carousel/components/Delete/index.tsx | 41 +++++++ src/pages/Carousel/components/Edit/index.tsx | 84 +++++++++++++ src/pages/Carousel/index.tsx | 116 ++++++++++++++++++ src/pages/Carousel/settings.tsx | 55 +++++++++ .../CatMessage/components/Create/index.tsx | 2 +- .../CatMessage/components/Edit/index.tsx | 2 +- .../CatMessage/components/View/index.tsx | 2 +- src/pages/News/components/Create/index.tsx | 2 +- src/pages/News/components/Edit/index.tsx | 2 +- src/pages/News/components/View/index.tsx | 2 +- src/pages/News/settings.tsx | 18 +-- src/pages/commonSettings.tsx | 40 +++--- src/services/carousel.ts | 70 +++++++++++ 17 files changed, 473 insertions(+), 51 deletions(-) rename src/components/{ PhotoAlbum => PhotoAlbum}/index.tsx (100%) create mode 100644 src/pages/Carousel/components/Create/index.tsx create mode 100644 src/pages/Carousel/components/Delete/index.tsx create mode 100644 src/pages/Carousel/components/Edit/index.tsx create mode 100644 src/pages/Carousel/index.tsx create mode 100644 src/pages/Carousel/settings.tsx create mode 100644 src/services/carousel.ts diff --git a/config/routes.ts b/config/routes.ts index 59e236a..0036096 100644 --- a/config/routes.ts +++ b/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', diff --git a/src/components/ PhotoAlbum/index.tsx b/src/components/PhotoAlbum/index.tsx similarity index 100% rename from src/components/ PhotoAlbum/index.tsx rename to src/components/PhotoAlbum/index.tsx diff --git a/src/components/UploadImagesFormItem/index.tsx b/src/components/UploadImagesFormItem/index.tsx index eb92bb8..b879415 100644 --- a/src/components/UploadImagesFormItem/index.tsx +++ b/src/components/UploadImagesFormItem/index.tsx @@ -17,7 +17,7 @@ const getBase64 = (file: RcFile): Promise => { }); }; -const UploadImagesFormItem = ({ value = [], onChange }: any) => { +const UploadImagesFormItem = ({ value = [], onChange, limit = 1 }: any) => { const [previewOpen, setPreviewOpen] = useState(false); const [previewImage, setPreviewImage] = useState(''); const [previewTitle, setPreviewTitle] = useState(''); @@ -131,7 +131,7 @@ const UploadImagesFormItem = ({ value = [], onChange }: any) => { method="PUT" customRequest={handleRequest} > - {fileList.length >= 9 ? null : uploadButton} + {fileList.length >= limit ? null : uploadButton} example diff --git a/src/pages/Carousel/components/Create/index.tsx b/src/pages/Carousel/components/Create/index.tsx new file mode 100644 index 0000000..4c8649e --- /dev/null +++ b/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 ( + + + + + + + + ); +}; + +export default Create; diff --git a/src/pages/Carousel/components/Delete/index.tsx b/src/pages/Carousel/components/Delete/index.tsx new file mode 100644 index 0000000..1d992d7 --- /dev/null +++ b/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 ( + + + 删除轮播图 + + } + open={open} + okText="确认" + okType="danger" + cancelText="取消" + centered + onOk={handleDelete} + onCancel={handleCancel} + > + 确定删除这张轮播图吗？ + + ); +}; + +export default Delete; diff --git a/src/pages/Carousel/components/Edit/index.tsx b/src/pages/Carousel/components/Edit/index.tsx new file mode 100644 index 0000000..d5c1714 --- /dev/null +++ b/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 ( + + + + + + + + ); +}; + +export default Edit; diff --git a/src/pages/Carousel/index.tsx b/src/pages/Carousel/index.tsx new file mode 100644 index 0000000..6b556c7 --- /dev/null +++ b/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(); + 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) => ( + <> + + + + ), + }, + ]; + + return ( + + + headerTitle={'轮播图信息'} + actionRef={actionRef} + rowKey="id" + search={false} + toolBarRender={() => [ + , + ]} + request={requestTable} + columns={columns} + pagination={{ + pageSize: 20, + }} + /> + + + + + ); +}; + +export default Carousel; diff --git a/src/pages/Carousel/settings.tsx b/src/pages/Carousel/settings.tsx new file mode 100644 index 0000000..ccaaedd --- /dev/null +++ b/src/pages/Carousel/settings.tsx @@ -0,0 +1,55 @@ +import { CREATE_AT, USER } from '@/pages/commonSettings'; +import { ProColumns } from '@ant-design/pro-components'; +import { Image } from 'antd'; + +const MAX_ORDER = 10; + +export const IMAGE_URL: ProColumns = { + title: '图片', + dataIndex: 'imageUrl', + hideInSearch: true, + width: 200, + render: (_: any) => , +}; + +export const LINK_URL: ProColumns = { + title: '跳转链接', + dataIndex: 'linkUrl', + hideInSearch: true, + width: 100, + render: (_: any) => ( + + 点击跳转 + + ), +}; + +export const TYPE: ProColumns = { + title: '公示类型', + dataIndex: 'type', + hideInSearch: true, + width: 80, +}; + +export const CAROUSEL_COLUMNS = [ + { + order: MAX_ORDER + 10, + ...USER, + }, + { + order: MAX_ORDER + 8, + ...IMAGE_URL, + }, + { + order: MAX_ORDER + 6, + ...LINK_URL, + }, + { + order: MAX_ORDER + 4, + ...TYPE, + }, + { + order: MAX_ORDER + 2, + ...CREATE_AT, + }, +]; diff --git a/src/pages/CatMessage/components/Create/index.tsx b/src/pages/CatMessage/components/Create/index.tsx index 15b1ae4..25f3a13 100644 --- a/src/pages/CatMessage/components/Create/index.tsx +++ b/src/pages/CatMessage/components/Create/index.tsx @@ -156,7 +156,7 @@ const Create = ({ open, setCreateVisible, actionRef }: any) => { }, ]} > - + ); diff --git a/src/pages/CatMessage/components/Edit/index.tsx b/src/pages/CatMessage/components/Edit/index.tsx index 1d1f539..c4ebc72 100644 --- a/src/pages/CatMessage/components/Edit/index.tsx +++ b/src/pages/CatMessage/components/Edit/index.tsx @@ -169,7 +169,7 @@ const Edit = ({ open, setEditVisible, actionRef, currentCat }: any) => { }, ]} > - + ); diff --git a/src/pages/CatMessage/components/View/index.tsx b/src/pages/CatMessage/components/View/index.tsx index 1a48793..f70832f 100644 --- a/src/pages/CatMessage/components/View/index.tsx +++ b/src/pages/CatMessage/components/View/index.tsx @@ -1,4 +1,4 @@ -import PhotoAlbum from '@/components/ PhotoAlbum'; +import PhotoAlbum from '@/components/PhotoAlbum'; import { fetchCurrentCatInfo } from '@/services/cat'; import { Button, Descriptions, Modal, Space } from 'antd'; import { useEffect, useState } from 'react'; diff --git a/src/pages/News/components/Create/index.tsx b/src/pages/News/components/Create/index.tsx index 61e4681..6d81f9c 100644 --- a/src/pages/News/components/Create/index.tsx +++ b/src/pages/News/components/Create/index.tsx @@ -60,7 +60,7 @@ const Create = ({ open, setCreateVisible, actionRef }: any) => { }, ]} > - + ); diff --git a/src/pages/News/components/Edit/index.tsx b/src/pages/News/components/Edit/index.tsx index d42930b..e7ac6bf 100644 --- a/src/pages/News/components/Edit/index.tsx +++ b/src/pages/News/components/Edit/index.tsx @@ -73,7 +73,7 @@ const Edit = ({ open, setEditVisible, actionRef, currentNew }: any) => { }, ]} > - + ); diff --git a/src/pages/News/components/View/index.tsx b/src/pages/News/components/View/index.tsx index dcde601..11ab0ff 100644 --- a/src/pages/News/components/View/index.tsx +++ b/src/pages/News/components/View/index.tsx @@ -1,4 +1,4 @@ -import PhotoAlbum from '@/components/ PhotoAlbum'; +import PhotoAlbum from '@/components/PhotoAlbum'; import { formatTime } from '@/scripts/utils'; import { fetchCurrentNewInfo } from '@/services/news'; import { Avatar, Button, Descriptions, Modal, Space } from 'antd'; diff --git a/src/pages/News/settings.tsx b/src/pages/News/settings.tsx index 4b7c44e..1fc6ed9 100644 --- a/src/pages/News/settings.tsx +++ b/src/pages/News/settings.tsx @@ -1,22 +1,10 @@ -import PhotoAlbum from '@/components/ PhotoAlbum'; +import PhotoAlbum from '@/components/PhotoAlbum'; import { ProColumns } from '@ant-design/pro-components'; -import { Avatar, Space } from 'antd'; +import { Space } from 'antd'; +import { USER } from '../commonSettings'; const MAX_ORDER = 10; -export const USER: ProColumns = { - title: '发布者', - dataIndex: 'user', - hideInSearch: true, - width: 120, - render: (_: any) => ( - - - {_?.nickname} - - ), -}; - export const TITLE: ProColumns = { title: '标题', dataIndex: 'title', diff --git a/src/pages/commonSettings.tsx b/src/pages/commonSettings.tsx index afe23e6..698b0cb 100644 --- a/src/pages/commonSettings.tsx +++ b/src/pages/commonSettings.tsx @@ -1,17 +1,6 @@ import type { ProColumns } from '@ant-design/pro-table'; import { formatTime } from '@/scripts/utils'; - -export const CREATE_BY: ProColumns = { - title: '创建人', - dataIndex: 'create_by', - hideInSearch: true, -}; - -export const UPDATE_BY: ProColumns = { - title: '更新人', - dataIndex: 'update_by', - hideInSearch: true, -}; +import { Avatar, Space } from 'antd'; export const OPERATIONS: ProColumns = { title: '操作', @@ -24,20 +13,23 @@ export const NAME: ProColumns = { dataIndex: 'name', }; -export const CONTENT_COLLECT: ProColumns = { - title: '发布内容', - dataIndex: 'content_collect', - hideInSearch: true, -}; - -export const DATE_AT: ProColumns = { - title: '日期', - dataIndex: 'date_at', +export const CREATE_AT: ProColumns = { + title: '创建时间', + dataIndex: 'createAt', hideInSearch: true, + width: 100, renderText: (text) => formatTime(text), }; -export const CAT_STATUS: ProColumns = { - title: '猫咪状态', - dataIndex: 'cat_status', +export const USER: ProColumns = { + title: '发布者', + dataIndex: 'user', + hideInSearch: true, + width: 120, + render: (_: any) => ( + + + {_?.nickname} + + ), }; diff --git a/src/services/carousel.ts b/src/services/carousel.ts new file mode 100644 index 0000000..1da7ade --- /dev/null +++ b/src/services/carousel.ts @@ -0,0 +1,70 @@ +import { request } from '@umijs/max'; + +const DEFAULT_URL = 'https://meowchat.xhpolaris.com'; + +/** + * 获取轮播图列表 + * @param params + * @returns + */ +export const fetchCarouselList = async ( + params: { + current?: number; + pageSize?: number; + communityId?: string; + }, + options?: { [key: string]: any }, +) => + request(`${DEFAULT_URL}/notice/get_news`, { + method: 'GET', + params: { + ...params, + page: (params.current || 1) - 1, + }, + ...(options || {}), + }); + +/** + * 新增轮播图 + * @param params + * @returns + */ +export const createCarousel = async (data: any, options?: { [key: string]: any }) => { + return request(`${DEFAULT_URL}/notice/new_news`, { + method: 'POST', + data: { + ...data, + }, + ...(options || {}), + }); +}; + +/** + * 删除轮播图 + * @param params + * @returns + */ +export const deleteCarousel = async (data: any, options?: { [key: string]: any }) => { + return request(`${DEFAULT_URL}/notice/remove_news`, { + method: 'POST', + data: { + ...data, + }, + ...(options || {}), + }); +}; + +/** + * 编辑轮播图 + * @param params + * @returns + */ +export const editCarousel = async (data: any, options?: { [key: string]: any }) => { + return request(`${DEFAULT_URL}/notice/new_news`, { + method: 'POST', + data: { + ...data, + }, + ...(options || {}), + }); +};