safety-eval-service-frontend/src/components/CustomerDetailModal/index.js

import { useState, useEffect } from "react";
import { Modal, Button, Descriptions, Table, Tag } from "antd";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { NS_SAFETY_EVAL_BUSINESS } from "~/enumerate/namespace";
import {
  ENTERPRISE_STATUS_OPTIONS,
  ENTERPRISE_SCALE_OPTIONS,
  EVAL_TYPE_MAP,
} from "~/enumerate/constant";
import { QUALIFICATION_INDUSTRY_OPTIONS_MAP } from "~/enumerate/enterpriseOptions";

const CustomerDetailModal = ({ open, customerId, onCancel, ...props }) => {
  const [detail, setDetail] = useState(null);
  const { customerDetailLoading } = props.safetyEvalBusiness || {};

  useEffect(() => {
    if (!open || !customerId) {
      setDetail(null);
      return;
    }
    props.customerDetail({ id: customerId }).then((res) => {
      if (res?.success !== false) {
        setDetail(res?.data || null);
      }
    });
  }, [open, customerId]);

  return (
    <Modal
      title={`客户详情 - ${detail?.customerName || ""}`}
      open={open}
      loading={customerDetailLoading}
      onCancel={onCancel}
      footer={<Button onClick={onCancel}>关闭</Button>}
      width={900}
      destroyOnHidden
    >
      {detail && (
        <>
          <Descriptions
            column={2}
            bordered
            size="small"
            labelStyle={{
              width: '120px'
            }}
          >
            <Descriptions.Item label="客户名称">
              {detail.customerName}
            </Descriptions.Item>
            <Descriptions.Item label="统一社会信用代码">
              {detail.creditCode}
            </Descriptions.Item>
            <Descriptions.Item label="企业状态">
              {(() => {
                const statusOption = ENTERPRISE_STATUS_OPTIONS.find(
                  (opt) => opt.value === detail.enterpriseStatusCode,
                );
                return statusOption?.label || detail.enterpriseStatusName;
              })()}
            </Descriptions.Item>
            <Descriptions.Item label="企业规模">
              {(() => {
                const scaleOption = ENTERPRISE_SCALE_OPTIONS.find(
                  (opt) => opt.value === detail.enterpriseScaleCode,
                );
                return scaleOption?.label || detail.enterpriseScaleName;
              })()}
            </Descriptions.Item>
            <Descriptions.Item label="所属行业">
              {detail.industryCode
                ?.split(",")
                .map(
                  (code) =>
                    QUALIFICATION_INDUSTRY_OPTIONS_MAP[code.trim()] ||
                    code.trim(),
                )
                .join("、")}
            </Descriptions.Item>
            <Descriptions.Item label="属地">
              {detail.districtName}
            </Descriptions.Item>
            <Descriptions.Item label="联系人">
              {detail.principalName}
            </Descriptions.Item>
            <Descriptions.Item label="联系电话">
              {detail.principalPhone}
            </Descriptions.Item>
            <Descriptions.Item label="主要负责人">
              {detail.principalName}
            </Descriptions.Item>
            <Descriptions.Item label="负责人电话">
              {detail.principalPhone}
            </Descriptions.Item>
            <Descriptions.Item label="法定代表人">
              {detail.legalRepresentative}
            </Descriptions.Item>
            <Descriptions.Item label="法人电话">
              {detail.legalRepresentativePhone}
            </Descriptions.Item>
            <Descriptions.Item label="经营地址" span={2}>
              {detail.businessAddress}
            </Descriptions.Item>
            <Descriptions.Item label="经度">
              {detail.longitude}
            </Descriptions.Item>
            <Descriptions.Item label="纬度">
              {detail.latitude}
            </Descriptions.Item>
          </Descriptions>

          <h4 style={{ margin: "12px 0 8px" }}>安全评价项目列表</h4>
          <Table
            rowKey="id"
            dataSource={detail.projects || []}
            columns={[
              { title: "项目名称", dataIndex: "projectName" },
              {
                title: "评价类型",
                dataIndex: "evalTypeCode",
                width: 120,
                render: (s) => EVAL_TYPE_MAP[s] || s || "",
              },
              { title: "报告完成日期", dataIndex: "planEndDate", width: 130 },
              {
                title: "项目状态",
                dataIndex: "status",
                width: 100,
                fixed: "right",
                render: (phase, record) => {
                  if (record.archiveFlag === 1) {
                    return <Tag color="success">已归档</Tag>;
                  }
                  if (record.projectPhaseCode === "NORMAL") {
                    return <Tag color="success">正常</Tag>;
                  }
                  if (record.projectPhaseCode === "DELAY") {
                    return <Tag color="error">已延期</Tag>;
                  }
                  return record.projectPhaseName;
                },
              },
            ]}
            pagination={false}
            size="small"
          />
        </>
      )}
    </Modal>
  );
};

export default Connect(
  [NS_SAFETY_EVAL_BUSINESS],
  true,
)(CustomerDetailModal);