pay-admin/src/pages/asset/announcement/modals/AnnouncementShow.tsx

import { MyBetaModalFormProps, renderTextHelper } from '@/common';
import { MyModal } from '@/components/MyModal';
import { Apis } from '@/gen/Apis';
import { MsgPropertyAnnouncementsPublishTypeEnum } from '@/gen/Enums';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { Space } from 'antd';
import { useState } from 'react';

export default function Show(props: MyBetaModalFormProps) {
  const [show, setShow] = useState<any>({});
  const [loading, setLoading] = useState(false);
  const [hasLoaded, setHasLoaded] = useState(false);

  const getShow = () => {
    if (props?.item?.id && !loading && !hasLoaded) {
      setLoading(true);
      setHasLoaded(true);
      Apis.Msg.MsgPropertyAnnouncements.Show({
        id: props?.item?.id,
      })
        .then((res: any) => {
          setShow(res?.data);
        })
        .catch(() => {
          setHasLoaded(false); // 如果请求失败，允许重试
        })
        .finally(() => {
          setLoading(false);
        });
    }
  };
  return (
    <MyModal
      title={props.title || '查看'}
      width={800}
      onOpen={getShow}
      node={
        <ProCard>
          <ProDescriptions
            // bordered
            // column={{ xs: 1, sm: 2, md: 3 }}
            column={1}
            size="small"
          >
            <ProDescriptions.Item label=" 关联项目">
              {props?.item?.asset_project?.name || '-'}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="公告标题">
              {props?.item?.title || '-'}
            </ProDescriptions.Item>

            <ProDescriptions.Item label="发布方式">
              <Space>
                {props?.item?.is_publish ? '已发布' : '未发布'}
                <renderTextHelper.Tag
                  Enums={MsgPropertyAnnouncementsPublishTypeEnum}
                  value={props?.item?.publish_type}
                  key="publish_type"
                />
                {show?.schedule_publish_at || '-'}
              </Space>
            </ProDescriptions.Item>
            <ProDescriptions.Item label="公告内容">
              <div
                style={{
                  border: '1px solid #ccc',
                  borderRadius: '6px',
                  padding: '12px',
                  maxHeight: '300px',
                  width: '100%',
                  overflow: 'auto',
                  backgroundColor: '#fafafa',
                }}
                dangerouslySetInnerHTML={{
                  __html: props?.item?.content || '暂无内容',
                }}
              />
            </ProDescriptions.Item>

            <ProDescriptions.Item label="落款日期">
              {props?.item?.publish_at || '-'}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="创建时间">
              {props?.item?.created_at || '-'}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="最近修改">
              {props?.item?.updated_at || '-'}
            </ProDescriptions.Item>
          </ProDescriptions>
        </ProCard>
      }
    />
  );
}