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

import React, { useState } from "react";
import { Button, Tag, Space, Modal, Select, Input } from "antd";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import { REVIEW_STATUS_MAP } from "~/enumerate/constant";
import { MOCK_DETAIL, MOCK_MATERIALS, LEGAL_CHECK_ITEMS, LEGAL_STATUS_STYLE } from "../mockData";
import FilingTabs from "../FilingTabs";
import "./indes.less";

const { TextArea } = Input;

const QualReviewForm = (props) => {
  const [compliance, setCompliance] = useState({});
  const [reviewVisible, setReviewVisible] = useState(false);
  const [reviewResult, setReviewResult] = useState(undefined);
  const [expert, setExpert] = useState(undefined);
  const [remark, setRemark] = useState("");
  const detail = MOCK_DETAIL;
  const statusConfig = REVIEW_STATUS_MAP[detail.reviewStatus];

  const passCount = Object.values(compliance).filter((v) => v === "pass").length;
  const failCount = Object.values(compliance).filter((v) => v === "fail").length;
  const evaluatedCount = passCount + failCount;
  const unmetCount = MOCK_MATERIALS.length - evaluatedCount;

  const handleSubmit = (action) => {
    console.log("审核提交:", { action, reviewResult, expert, remark, compliance });
    setReviewVisible(false);
  };

  return (
    <PageLayout
      title={
        <Space>
          <span>资质备案审核</span>
          {statusConfig && <Tag color={statusConfig.color}>{statusConfig.label}</Tag>}
        </Space>
      }
      history={props.history}
      previous
      footer={<Button type="primary" onClick={() => setReviewVisible(true)}>审核操作</Button>}
    >
      <div className="qual-review-form">
        <div className="legal-check-bar">
          <div className="legal-check-title">法律规定内容</div>
          <div className="legal-check-grid">
            {LEGAL_CHECK_ITEMS.map((item) => {
              const style = LEGAL_STATUS_STYLE[item.status];
              return (
                <div key={item.key} className="legal-check-item" style={{ borderLeft: `3px solid ${style.borderColor}`, background: style.bg }}>
                  <span>{style.icon}</span>
                  <div>
                    <div style={{ fontWeight: 500 }}>{item.title}</div>
                    <div className="legal-check-item-desc">{item.desc}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        <FilingTabs
          detail={detail}
          isReview
          compliance={compliance}
          onComplianceChange={(id, v) => setCompliance((prev) => ({ ...prev, [id]: v }))}
        />

        <Modal
          title="审核操作"
          open={reviewVisible}
          onCancel={() => setReviewVisible(false)}
          width={580}
          footer={
            <div style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
              <Button onClick={() => setReviewVisible(false)}>取消</Button>
              <Button type="primary" onClick={() => handleSubmit("submit")}>提交</Button>
              <Button type="primary" style={{ background: "#52c41a", borderColor: "#52c41a" }} onClick={() => handleSubmit("pass")}>通过</Button>
            </div>
          }
        >
          <div style={{ background: "#f8fafc", border: "1px solid #d9d9d9", borderRadius: 6, padding: "0.75rem", marginBottom: "1rem" }}>
            <div style={{ fontSize: "0.88rem", fontWeight: 600, marginBottom: "0.5rem" }}>评价分析</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: "0.4rem" }}>
              <div style={statStyle}><div style={statLabelStyle}>已核验材料</div><div style={{ fontSize: "1.1rem", fontWeight: 700, color: "#1677ff" }}>{evaluatedCount}</div></div>
              <div style={statStyle}><div style={statLabelStyle}>符合</div><div style={{ fontSize: "1.1rem", fontWeight: 700, color: "#52c41a" }}>{passCount}</div></div>
              <div style={statStyle}><div style={statLabelStyle}>不符合</div><div style={{ fontSize: "1.1rem", fontWeight: 700, color: "#ff4d4f" }}>{failCount}</div></div>
              <div style={statStyle}><div style={statLabelStyle}>条件未满足</div><div style={{ fontSize: "1.1rem", fontWeight: 700, color: "#faad14" }}>{unmetCount}</div></div>
            </div>
          </div>

          <div style={{ display: "grid", gap: "0.6rem" }}>
            <div>
              <div style={{ fontSize: "0.8rem", marginBottom: 4 }}>审核结果</div>
              <Select style={{ width: "100%" }} placeholder="请选择" value={reviewResult} onChange={setReviewResult}>
                <Select.Option value="pass">通过</Select.Option>
                <Select.Option value="pending">待定</Select.Option>
                <Select.Option value="reject">不通过</Select.Option>
              </Select>
            </div>
            <div>
              <div style={{ fontSize: "0.8rem", marginBottom: 4 }}>指派专家</div>
              <Select style={{ width: "100%" }} placeholder="— 请选择 —" value={expert} onChange={setExpert}>
                <Select.Option value="chen">陈教授（化工安全）</Select.Option>
                <Select.Option value="li">李教授（矿山安全）</Select.Option>
                <Select.Option value="wang">王高工（建筑施工）</Select.Option>
              </Select>
            </div>
            <div>
              <div style={{ fontSize: "0.8rem", marginBottom: 4 }}>综合审核意见</div>
              <TextArea rows={3} placeholder="请输入综合审核意见..." value={remark} onChange={(e) => setRemark(e.target.value)} />
            </div>
          </div>
        </Modal>
      </div>
    </PageLayout>
  );
};

const statStyle = { background: "#fff", border: "1px solid #d9d9d9", borderRadius: 6, padding: "0.4rem", textAlign: "center" };
const statLabelStyle = { fontSize: "0.7rem", color: "rgba(0,0,0,0.45)" };

export default QualReviewForm;