130 lines
4.2 KiB
TypeScript
130 lines
4.2 KiB
TypeScript
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>
|
||
),
|
||
}),
|
||
]}
|
||
/>
|
||
</>
|
||
);
|
||
}
|