safety-eval-service-frontend/src/pages/Container/QualificationReview/QualReviewForm/index.js

import React, { useState, useEffect } from "react";
import { Button, Tag, Space, Spin, message } from "antd";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import { REVIEW_STATUS_MAP, LEGAL_STATUS_STYLE } from "~/enumerate/constant";
import { tools } from "@cqsjjb/jjb-common-lib";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { NS_QUAL_REVIEW } from "~/enumerate/namespace";
import FilingTabs from "../FilingTabs";
import ReviewModal from "./ReviewModal";
import "./indes.less";

const { router } = tools;

/**
 * 资质备案初审 - 审核表单页（原型 mod-qual-review-form）
 * - 顶部：法律规定内容（十项符合性检查卡片，PASS/WARN/NOT_PASS 三态）
 * - 中部：FilingTabs 六项 Tab（审核模式：材料符合性可选）
 * - 底部：取消 / 审核操作（打开 ReviewModal）
 */
const QualReviewForm = (props) => {
  const {
    queryComplianceCheck,
    fetchQualFilingDetail,
    queryChangeComplianceCheck,
    fetchQualChangeDetail,
    modifyFilingMaterialChange,
    modifyFilingMaterial,
    qualReview,
  } = props;
  const {
    qualReviewLoading,
    complianceCheckItems = [],
    fetchQualFilingDetailLoading,
    qualFilingDetail = {},
  } = qualReview || {};
  const isChange = router.query.mode === "change";
  const [compliance, setCompliance] = useState({});
  const [reviewVisible, setReviewVisible] = useState(false);

  const statusConfig = REVIEW_STATUS_MAP[qualFilingDetail.filingStatusCode];

  const legalPassCount = complianceCheckItems.filter(
    (i) => i.status === "PASS",
  ).length;
  const legalFailCount = complianceCheckItems.filter(
    (i) => i.status === "NOT_PASS",
  ).length;
  const legalWarnCount = complianceCheckItems.filter(
    (i) => i.status === "WARN",
  ).length;

  useEffect(() => {
    const complianceAction = isChange
      ? queryChangeComplianceCheck
      : queryComplianceCheck;
    const detailAction = isChange ? fetchQualChangeDetail : fetchQualFilingDetail;
    if (router.query.id) {
      complianceAction({ id: router.query.id });
      detailAction({ id: router.query.id });
    }
  }, []);

  /** 符合性切换：pass -> 1(符合)  fail -> 2(不符合) */
  const handleComplianceChange = (id, v) => {
    setCompliance((prev) => ({ ...prev, [id]: v }));
    if (v == null) return;
    const hasSatisfy = v === "pass" ? 1 : 2;
    const action = isChange ? modifyFilingMaterialChange : modifyFilingMaterial;
    action({ id, hasSatisfy }).then((res) => {
      if (res?.success === false) {
        message.error(res?.message || "符合性更新失败");
      }
    });
  };

  return (
    <PageLayout
      title={
        <Space>
          <span>资质申请审批</span>
          {statusConfig && (
            <Tag color={statusConfig.color}>{statusConfig.label}</Tag>
          )}
        </Space>
      }
      history={props.history}
      previous
      footer={
        <Space>
          <Button onClick={() => props.history.goBack()}>取消</Button>
          <Button type="primary" onClick={() => setReviewVisible(true)}>
            📋 审核操作
          </Button>
        </Space>
      }
    >
      <Spin spinning={qualReviewLoading || fetchQualFilingDetailLoading}>
        <div className="qual-review-form">
          {complianceCheckItems.length > 0 && (
            <div className="legal-check-bar">
              <div className="legal-check-title">📋 法律规定内容</div>
              <div className="legal-check-grid">
                {complianceCheckItems.map((item) => {
                  const style = LEGAL_STATUS_STYLE[item.status] || {};
                  return (
                    <div
                      key={item.title}
                      className="legal-check-item"
                      style={{
                        borderLeft: `3px solid ${style.borderColor || "#cbd5e1"}`,
                        background: style.bg || "#f8fafc",
                      }}
                    >
                      <span>{style.icon || "•"}</span>
                      <div>
                        <div style={{ fontWeight: 500 }}>{item.title}</div>
                        <div className="legal-check-item-desc">
                          {item.description}
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          <FilingTabs
            detail={qualFilingDetail}
            isReview
            compliance={compliance}
            onComplianceChange={handleComplianceChange}
          />

          <ReviewModal
            open={reviewVisible}
            filingId={qualFilingDetail?.id}
            isChange={isChange}
            legalPassCount={legalPassCount}
            legalFailCount={legalFailCount}
            legalWarnCount={legalWarnCount}
            onSuccess={() => props.history.goBack()}
            onCancel={() => setReviewVisible(false)}
          />
        </div>
      </Spin>
    </PageLayout>
  );
};

export default Connect([NS_QUAL_REVIEW], true)(QualReviewForm);