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

import React, { useState } from "react";
import { Button, Tag, Space, Modal, Select, Input, Form, Spin } from "antd";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import { REVIEW_STATUS_MAP } from "~/enumerate/constant";
import { tools } from "@cqsjjb/jjb-common-lib";
import {
  MOCK_DETAIL,
  MOCK_MATERIALS,
  LEGAL_CHECK_ITEMS,
  LEGAL_STATUS_STYLE,
} from "../mockData";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { NS_QUAL_REVIEW } from "~/enumerate/namespace";
import FilingTabs from "../FilingTabs";
import "./indes.less";

const { TextArea } = Input;
const {router}=tools;

const QualReviewForm = (props) => {
  const { queryComplianceCheck, qualReview } = props;
  const { qualReviewLoading, complianceCheckItems } = qualReview;
  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);
    });
  };
  useEffect(() => {
   queryComplianceCheck({id: router.query.id});
  }, []);

  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>
      }
    >
      <Spin spinning={qualReviewLoading}>
        <div className="qual-review-form">
          <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.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.description}</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>
      </Spin>
    </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 Connect(
  [NS_QUAL_REVIEW],
  true,
)(QualReviewForm);