From b6951876bc82f1fc1819729097d19367d476ae8d Mon Sep 17 00:00:00 2001 From: JavanCheng <51914311+JavanCheng@users.noreply.github.com> Date: Sun, 8 Jan 2023 18:40:39 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8A=A8=E6=80=81=E4=BF=A1=E6=81=AF?= =?UTF-8?q?=E5=A2=9E=E5=88=A0=E6=94=B9=E6=9F=A5=20(#4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/CatMessage/index.tsx | 21 +-- src/pages/News/components/Create/index.tsx | 56 ++++++++ src/pages/News/components/Delete/index.tsx | 41 ++++++ src/pages/News/components/Edit/index.tsx | 70 ++++++++++ src/pages/News/components/View/index.tsx | 45 +++++++ src/pages/News/index.tsx | 149 ++++++++++++++++++++- src/pages/News/settings.tsx | 57 ++++++++ src/services/news.ts | 90 +++++++++++++ 8 files changed, 516 insertions(+), 13 deletions(-) create mode 100644 src/pages/News/components/Create/index.tsx create mode 100644 src/pages/News/components/Delete/index.tsx create mode 100644 src/pages/News/components/Edit/index.tsx create mode 100644 src/pages/News/components/View/index.tsx create mode 100644 src/pages/News/settings.tsx create mode 100644 src/services/news.ts diff --git a/src/pages/CatMessage/index.tsx b/src/pages/CatMessage/index.tsx index 409be16..298acbb 100644 --- a/src/pages/CatMessage/index.tsx +++ b/src/pages/CatMessage/index.tsx @@ -3,7 +3,7 @@ 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'; @@ -11,9 +11,9 @@ 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(); @@ -145,15 +145,16 @@ const CatMessage: React.FC = () => { } > - )} diff --git a/src/pages/News/components/Create/index.tsx b/src/pages/News/components/Create/index.tsx new file mode 100644 index 0000000..331bfe6 --- /dev/null +++ b/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 ( + + + + + ); +}; + +export default Create; diff --git a/src/pages/News/components/Delete/index.tsx b/src/pages/News/components/Delete/index.tsx new file mode 100644 index 0000000..2cdb62b --- /dev/null +++ b/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 ( + + + 删除动态 + + } + open={open} + okText="确认" + okType="danger" + cancelText="取消" + centered + onOk={handleDelete} + onCancel={handleCancel} + > + 确定删除这条动态吗？ + + ); +}; + +export default Delete; diff --git a/src/pages/News/components/Edit/index.tsx b/src/pages/News/components/Edit/index.tsx new file mode 100644 index 0000000..fcf8d10 --- /dev/null +++ b/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 ( + + + + + ); +}; + +export default Edit; diff --git a/src/pages/News/components/View/index.tsx b/src/pages/News/components/View/index.tsx new file mode 100644 index 0000000..32cb3e1 --- /dev/null +++ b/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({}); + + 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 ( + + + + + + {nickname ?? ''} + {formatTime(createAt ?? '')} + {title ?? ''} + + + + {text ?? ''} + + + ); +}; + +export default View; diff --git a/src/pages/News/index.tsx b/src/pages/News/index.tsx index e98c454..0d17d90 100644 --- a/src/pages/News/index.tsx +++ b/src/pages/News/index.tsx @@ -1,7 +1,150 @@ -import { PageContainer } from '@ant-design/pro-components'; +import { fetchNewList } from '@/services/news'; +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 { 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 { NEWS_COLUMNS } from './settings'; -const News: React.FC = () => { - return 1; +const News = () => { + const actionRef = useRef(); + const [selectedRowsState, setSelectedRows] = useState([]); + const [currentNew, setCurrentNew] = useState(''); + const [viewVisible, setViewVisible] = useState(false); + 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 fetchNewList({ + ...params, + current: params.current, + pageSize: params.pageSize, + communityId: '637ce159b15d9764c31f9c84', + }); + return { + data: msg?.moments, + success: true, + total: msg?.moments?.length, + }; + }; + + const columns: ProColumns[] = [ + ...NEWS_COLUMNS, + { + ...OPERATIONS, + width: 300, + render: (_, record) => ( + <> + + + + + + ), + }, + ]; + + return ( + + + headerTitle={'动态信息'} + actionRef={actionRef} + rowKey="id" + search={{ + labelWidth: 120, + }} + toolBarRender={() => [ + , + ]} + request={requestTable} + columns={columns} + rowSelection={{ + onChange: (_, selectedRows) => { + setSelectedRows(selectedRows); + }, + }} + /> + + + + + {selectedRowsState?.length > 0 && ( + + 已选择 + {selectedRowsState.length} 项 + + } + > + + + )} + + ); }; export default News; diff --git a/src/pages/News/settings.tsx b/src/pages/News/settings.tsx new file mode 100644 index 0000000..cc645c2 --- /dev/null +++ b/src/pages/News/settings.tsx @@ -0,0 +1,57 @@ +import { ProColumns } from '@ant-design/pro-components'; +import { Avatar, Image, Space } from 'antd'; + +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', + width: 120, +}; + +export const TEXT: ProColumns = { + title: '发布内容', + dataIndex: 'text', + hideInSearch: true, + width: 400, +}; + +export const PHOTOS: ProColumns = { + title: '图片', + dataIndex: 'photos', + hideInSearch: true, + width: 120, + render: (_) => , +}; + +export const NEWS_COLUMNS = [ + { + order: MAX_ORDER + 10, + ...USER, + }, + { + order: MAX_ORDER + 8, + ...TITLE, + }, + { + order: MAX_ORDER + 4, + ...TEXT, + }, + { + order: MAX_ORDER + 2, + ...PHOTOS, + }, +]; diff --git a/src/services/news.ts b/src/services/news.ts new file mode 100644 index 0000000..e1230ea --- /dev/null +++ b/src/services/news.ts @@ -0,0 +1,90 @@ +import { request } from '@umijs/max'; + +const DEFAULT_URL = 'https://meowchat.xhpolaris.com'; + +/** + * 获取动态信息列表 + * @param params + * @returns + */ +export const fetchNewList = async ( + params: { + current?: number; + pageSize?: number; + communityId?: string; + }, + options?: { [key: string]: any }, +) => + request(`${DEFAULT_URL}/moment/get_moment_previews`, { + method: 'GET', + params: { + ...params, + page: (params.current || 1) - 1, + }, + ...(options || {}), + }); + +/** + * 获取动态具体信息 + * @param params + * @returns + */ +export const fetchCurrentNewInfo = async ( + params: { + momentId: string; + }, + options?: { [key: string]: any }, +) => { + return request(`${DEFAULT_URL}/moment/get_moment_detail`, { + method: 'GET', + params: { + ...params, + }, + ...(options || {}), + }); +}; + +/** + * 新增动态 + * @param params + * @returns + */ +export const createNewInfo = async (data: any, options?: { [key: string]: any }) => { + return request(`${DEFAULT_URL}/moment/new_moment`, { + method: 'POST', + data: { + ...data, + }, + ...(options || {}), + }); +}; + +/** + * 删除动态 + * @param params + * @returns + */ +export const deleteNewInfo = async (data: any, options?: { [key: string]: any }) => { + return request(`${DEFAULT_URL}/moment/delete_moment`, { + method: 'POST', + data: { + ...data, + }, + ...(options || {}), + }); +}; + +/** + * 编辑动态 + * @param params + * @returns + */ +export const editNewInfo = async (data: any, options?: { [key: string]: any }) => { + return request(`${DEFAULT_URL}/moment/new_moment`, { + method: 'POST', + data: { + ...data, + }, + ...(options || {}), + }); +};