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

import React, { useState } from "react";
import { Button, Tag, Space, Modal, Select, Input, Form } 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 [form] = Form.useForm();
  const [compliance, setCompliance] = useState({});
  const [reviewVisible, setReviewVisible] = useState(false);
  const detail = MOCK_DETAIL;
  const statusConfig = REVIEW_STATUS_MAP[detail.reviewStatus];

  const legalPassCount = LEGAL_CHECK_ITEMS.filter((i) => i.status === "pass").length;
  const legalFailCount = LEGAL_CHECK_ITEMS.filter((i) => i.status === "fail").length;

  const handleSubmit = (action) => {
    form.validateFields().then((values) => {
      console.log("审核提交:", { action, ...values, 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" }}>{legalPassCount+legalFailCount}</div></div>
              <div style={statStyle}><div style={statLabelStyle}>符合</div><div style={{ fontSize: "1.1rem", fontWeight: 700, color: "#059669" }}>{legalPassCount}</div></div>
              <div style={statStyle}><div style={statLabelStyle}>不符合</div><div style={{ fontSize: "1.1rem", fontWeight: 700, color: "#dc2626" }}>{legalFailCount}</div></div>
             
            </div>
          </div>

          <Form form={form} layout="vertical" style={{ marginTop: "0.5rem" }}>
            <Form.Item label="审核结果" name="reviewResult" rules={[{ required: true, message: "请选择审核结果" }]}>
              <Select placeholder="请选择">
                <Select.Option value="pass">通过</Select.Option>
                <Select.Option value="pending">待定</Select.Option>
                <Select.Option value="reject">不通过</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="指派专家" name="expert" rules={[{ required: true, message: "请选择专家" }]}>
              <Select placeholder="— 请选择 —">
                <Select.Option value="chen">陈教授（化工安全）</Select.Option>
                <Select.Option value="li">李教授（矿山安全）</Select.Option>
                <Select.Option value="wang">王高工（建筑施工）</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="综合审核意见" name="remark" rules={[{ required: true, message: "请输入综合审核意见" }]}>
              <TextArea rows={3} placeholder="请输入综合审核意见..." />
            </Form.Item>
          </Form>
        </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;