yongxu-web/src/pages/ReportHomeManagement/check.tsx

import { Descriptions, Modal } from 'antd';
import React from 'react';

interface checkProps {
  visible: boolean;
  data: any;
  checkCallback: () => void;
}

/**
 * 零售报备查看弹框
 * @param props
 * @constructor
 */
const Check: React.FC<checkProps> = (props) => {
  const { visible, data, checkCallback } = props;

  const onOk = () => {
    checkCallback();
  };

  const onCancel = () => {
    checkCallback();
  };

  const handleImg = () => {
    if (data?.files && data?.files.length) {
      return data?.files.map((res: any) => (
        <img
          style={{ width: '100px', height: '100px', margin: '5px 10px' }}
          src={res.url}
          key={res.record_id}
          alt="图片"
        />
      ));
    } else {
      return '暂无图片';
    }
  };

  return (
    <Modal title="查看" open={visible} onOk={onOk} onCancel={onCancel} width={1000}>
      <Descriptions bordered>
        <Descriptions.Item label="小区名称">{data?.community_name}</Descriptions.Item>
        <Descriptions.Item label="地址">{data?.address}</Descriptions.Item>
        <Descriptions.Item label="楼栋号">{data?.building}</Descriptions.Item>
        <Descriptions.Item label="单元">{data?.unit}</Descriptions.Item>
        <Descriptions.Item label="门牌号">{data?.doorplate}</Descriptions.Item>
        <Descriptions.Item label="空调类型">
          {
            {
              1: '组合式方案',
              2: '供暖机组',
              3: '雅居多联机',
              4: '多联机系列',
              5: '螺杆机系列',
              6: '热水机系列',
              7: '离心机系列',
              8: '地源热泵',
              9: '模块机系列',
            }[data?.air_conditioner_type]
          }
        </Descriptions.Item>
        <Descriptions.Item label="业主姓名">{data?.proprietor_name}</Descriptions.Item>
        <Descriptions.Item label="联系方式">{data?.phone}</Descriptions.Item>
        <Descriptions.Item label="客户分类">{data?.customer_type}</Descriptions.Item>
        <Descriptions.Item label="成功几率">{data?.success_probability}</Descriptions.Item>
        <Descriptions.Item label="成功几率分析" span={3}>
          {data?.success_probability_analysis}
        </Descriptions.Item>
        <Descriptions.Item label="状态">
          {
            { '1': '审核未通过', '2': '审核通过', '3': '成交', '4': '放弃', '5': '丢单' }[
              data?.status
            ]
          }
        </Descriptions.Item>
        <Descriptions.Item label="跟进人" span={2}>
          {data?.follow_people}
        </Descriptions.Item>
        <Descriptions.Item label="图片" span={3}>
          {handleImg()}
        </Descriptions.Item>
      </Descriptions>
    </Modal>
  );
};
export default Check;