Zverse/ai-digital-live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 update 新闻编辑ui

Browse Source
This commit is contained in:
LittleBoy 2024-12-22 03:44:43 +08:00
parent 9e274a8e46
commit 2d54451052
2 changed files with 97 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/pages/news/components/style.module.scss
View File

@ -28,4 +28,13 @@
@apply flex flex-wrap gap-2 mt-2;
}
}
}
.newListTable{
:global{
.header{}
.body{}
.row{
@apply bg-white mt-2 p-4 rounded;
}
}
}

130
src/pages/news/edit.tsx
View File

@ -1,4 +1,4 @@
import {Button, Pagination, Table, TableColumnsType, TableProps, Typography} from "antd";
import {Button, Checkbox, Pagination, Space, Table, TableColumnsType, TableProps, Typography} from "antd";
import {Card} from "@/components/card";
import React, {useState} from "react";
@ -10,6 +10,9 @@ import EditSearchForm from "@/pages/news/components/edit-search-form.tsx";
import ButtonPush2Video from "@/pages/news/components/button-push2video.tsx";
import {Key} from "antd/es/table/interface";
import styles from './components/style.module.scss'
import InfiniteScroller from "@/components/scoller/infinite-scroller.tsx";
export default function NewEdit() {
const [editId, setEditId] = useState(-1)
@ -17,20 +20,17 @@ export default function NewEdit() {
const [params, setParams] = useState<ApiArticleSearchParams>({
pagination: {page: 1, limit: 10}
})
const {data, refresh} = useRequest(() => getList(params), {refreshDeps: [params]})
const {data, refresh, loading} = useRequest(() => getList(params), {refreshDeps: [params]})
const columns: TableColumnsType<ListArticleItem> = [
// : TableColumnsType<ListArticleItem>
const columns = [
{
title: '标题',
minWidth: 300,
dataIndex: 'title',
},
{
title: '内容',
dataIndex: 'summary',
render: (value) => (<Typography.Paragraph style={{marginBottom: 0}} ellipsis={{
rows: 2, expandable: true, symbol: 'More'
}}>{value}</Typography.Paragraph>)
render: (_, record) => (<div>
<div className="title text-base">{_}</div>
<div className="summary text-sm text-gray-400 line-clamp-1">{record.summary}</div>
</div>)
},
{
title: '来源',
@ -49,48 +49,94 @@ export default function NewEdit() {
title: '操作',
width: 80,
align: 'center',
render: (_, record) => (<Button type="link" onClick={() => {
setEditId(record.id)
}}>编辑</Button>),
render: (_, record) => (<Space>
<Button onClick={() => {
setEditId(record.id)
}}>编辑</Button>
<Button onClick={() => {
setEditId(record.id)
}}>删</Button>
<Checkbox type="link"/>
</Space>),
},
];
const rowSelection: TableProps<ListArticleItem>['rowSelection'] = {
onChange: (selectedRowKeys: Key[]) => {
setSelectedRowKeys(selectedRowKeys as Id[])
},
};
return (<div className="container pb-5 news-edit">
<Card className="search-panel-container my-5">
<div className="search-panel-container my-5">
<div className="search-form flex gap-5 justify-between">
<EditSearchForm onSubmit={setParams}/>
<Button type="primary" onClick={() => setEditId(0)}>手动新增</Button>
</div>
<div className="news-list-container mt-5">
<Table<ListArticleItem>
rowSelection={{type: 'checkbox', ...rowSelection}}
columns={columns}
dataSource={data?.list || []}
rowKey={'id'}
bordered
pagination={false}
/>
{data?.pagination && data?.pagination.total > 0 && <div className="footer flex justify-between items-center mt-5">
<Pagination
current={params.pagination.page}
total={data?.pagination.total}
pageSize={10}
showSizeChanger={false}
simple={true}
rootClassName={'simple-pagination'}
onChange={(page) => setParams(prev => ({
<div className={styles.newListTable}>
<div className="header flex gap-2">
<div className="col flex-1">标题</div>
<div className="col source w-[120px] min-w-[120px]">来源</div>
<div className="col time w-[120px]">时间</div>
<div className="col operations min-w-[150px]">操作</div>
</div>
<InfiniteScroller onCallback={(page)=>{
setParams(prev => ({
...prev,
pagination: {page, limit: 10}
}))}
/>
<ButtonPush2Video ids={selectedRowKeys} onSuccess={refresh}/>
</div>}
}))
}} loading={loading} pagination={data?.pagination}>
<div className="body">
{data?.list?.map((item, i) => {
return <div key={i} className="row flex gap-3">
<div className="col flex-1">
<div className="title text-base">{item.title}</div>
<div className="summary text-xs text-gray-400 line-clamp-1">{item.summary}</div>
</div>
<div className="col source w-[120px] min-w-[120px]">
<div className="text-sm text-gray-400">{item.media_name}</div>
</div>
<div className="col time w-[120px]">
<div
className="text-sm text-gray-400">{formatTime(item.publish_time, 'YYYY-MM-DD HH:mm')}</div>
</div>
<div className="col operations w-[150px]">
<Space>
<Button onClick={() => {
setEditId(item.id)
}}>编辑</Button>
<Button onClick={() => {
setEditId(item.id)
}}>删</Button>
<Checkbox type="link"/>
</Space>
</div>
</div>
})}
</div>
</InfiniteScroller>
</div>
{/*<Table<ListArticleItem>*/}
{/* columns={columns}*/}
{/* dataSource={data?.list || []}*/}
{/* rowKey={'id'}*/}
{/* bordered={false}*/}
{/* pagination={false}*/}
{/* rowHoverable={false}*/}
{/* className={styles.newListTable}*/}
{/*/>*/}
{data?.pagination && data?.pagination.total > 0 &&
<div className="footer flex justify-between items-center mt-5">
<Pagination
current={params.pagination.page}
total={data?.pagination.total}
pageSize={10}
showSizeChanger={false}
simple={true}
rootClassName={'simple-pagination'}
onChange={(page) => setParams(prev => ({
...prev,
pagination: {page, limit: 10}
}))}
/>
<ButtonPush2Video ids={selectedRowKeys} onSuccess={refresh}/>
</div>}
</div>
<ArticleEditModal
type="news" id={editId}
@ -98,6 +144,6 @@ export default function NewEdit() {
setEditId(-1)
if (saved) refresh()
}}/>
</Card>
</div>
</div>)
}