pay-admin/src/pages/asset/components/Announcement.tsx

130 lines
4.2 KiB
TypeScript
Raw Normal View History

2025-09-08 17:22:58 +08:00
import { MyButtons, MyColumns, MyProTableProps } from '@/common';
import { Apis } from '@/gen/Apis';
import { ProTable } from '@ant-design/pro-components';
import { Space } from 'antd';
import { useEffect, useRef } from 'react';
import AnnouncementCreate from './modals/AnnouncementCreate';
import AnnouncementShow from './modals/AnnouncementShow';
import AnnouncementUpdate from './modals/AnnouncementUpdate';
export default function Index({ ...rest }) {
const actionLooks = useRef<any>();
useEffect(() => {
actionLooks?.current.reloadAndRest();
}, [rest.loadmore]);
return (
<>
<ProTable<Record<any, any>>
{...MyProTableProps.props}
actionRef={actionLooks}
request={async (params, sort) =>
MyProTableProps.request(
{ ...params, asset_projects_id: rest.item?.id },
sort,
Apis.Msg.MsgPropertyAnnouncements.List,
)
}
toolBarRender={(action) => [
<AnnouncementCreate
key="Create"
item={rest.item}
reload={action?.reload}
/>,
]}
search={false}
columns={[
MyColumns.ID(),
{
title: '公告标题',
dataIndex: 'title',
width: 120, // 关键:固定列宽(若父容器过窄,可设 minWidth: 200 优先保证列宽)
render: (text) => (
<div
style={{
width: '100%', // 继承列宽
// height: '60px', // 设置固定高度约显示3行文本
overflow: 'hidden', // 超出隐藏
textOverflow: 'ellipsis', // 省略号
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 1, // 显示3行
}}
>
{text}
</div>
),
},
{
title: '公告内容',
dataIndex: 'content',
valueType: 'textarea', // 仅影响表单编辑时的输入类型,不影响表格展示
search: false,
width: 200, // 关键:固定列宽(若父容器过窄,可设 minWidth: 200 优先保证列宽)
render: (text) => (
<div
style={{
width: '100%', // 继承列宽
// height: '60px', // 设置固定高度约显示3行文本
overflow: 'hidden', // 超出隐藏
textOverflow: 'ellipsis', // 省略号
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2, // 显示3行
}}
>
{text}
</div>
),
},
{
title: '发布日期',
dataIndex: 'publish_at',
valueType: 'date',
search: false,
},
{
title: '是否发布小程序',
dataIndex: 'is_publish',
render: (text) => (text ? '是' : '否'),
search: false,
},
MyColumns.SoftDelete({
title: '启/禁用',
onRestore: Apis.Msg.MsgPropertyAnnouncements.Restore,
onSoftDelete: Apis.Msg.MsgPropertyAnnouncements.SoftDelete,
search: false,
}),
{
//创建日期
title: '创建日期',
dataIndex: 'created_at',
valueType: 'date',
search: false,
},
MyColumns.Option({
render: (_, item: any, index, action) => (
<Space key={index}>
<AnnouncementShow item={item} />
<AnnouncementUpdate
item={item}
reload={action?.reload}
// title={title}
/>
<MyButtons.Delete
onConfirm={() =>
Apis.Msg.MsgPropertyAnnouncements.Delete({
id: item.id,
}).then(() => action?.reload())
}
/>
</Space>
),
}),
]}
/>
</>
);
}