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

import React, { useEffect, useMemo } from "react";
import { Button, Form, Input, message, Modal, Select } from "antd";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { NS_QUAL_EXPERT, NS_QUAL_REVIEW } from "~/enumerate/namespace";
import { REVIEW_RESULT_OPTIONS } from "~/enumerate/constant";

const { TextArea } = Input;

/**
 * 审核操作弹窗
 * @param {boolean} open
 * @param {string|number} filingId - 备案申请ID
 * @param {function} onCancel
 * @param {function} onSuccess - 审核成功后回调（刷新列表等）
 */
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)" };

const ReviewModal = (props) => {
  const { open, filingId, isChange = false, legalPassCount = 0, legalFailCount = 0, onCancel, onSuccess } = props;
  const { qualExpert, qualReview, queryExpertPage, reviewSubmit, changeReviewSubmit } = props;
  const { qualExpertList } = qualExpert || {};
  const { qualReviewSubmitLoading } = qualReview || {};

  const [form] = Form.useForm();

  useEffect(() => {
    if (open) {
      form.resetFields();
      queryExpertPage({ current: 1, size: 100 });
    }
  }, [open]);

  const expertOptions = useMemo(
    () =>
      (qualExpertList || []).map((item) => ({
        label: `${item.userName}${item.certificate ? `（${item.certificate}）` : ""}`,
        value: item.id,
        expert: item,
      })),
    [qualExpertList],
  );

  const handleOk = async () => {
    const values = await form.validateFields();
    const selected = expertOptions.find((o) => o.value === values.filingExpertId);
    const submitAction = isChange ? changeReviewSubmit : reviewSubmit;
    const params = {
      filingId,
      reviewResult: values.reviewResult,
      reviewResultRemark: REVIEW_RESULT_OPTIONS.find((r) => r.value === values.reviewResult)?.label,
      filingExpertId: values.filingExpertId,
      filingExpertName: selected?.expert?.userName,
      reviewOpinion: values.reviewOpinion,
    };
    const res = await submitAction(params);
    if (res?.success !== false) {
      message.success("审核提交成功");
      onCancel();
      onSuccess?.();
    }
  };

  return (
    <Modal
      title="审核操作"
      open={open}
      onCancel={onCancel}
      width={580}
      footer={
        <div style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
          <Button onClick={onCancel}>取消</Button>
          <Button type="primary" loading={qualReviewSubmitLoading} onClick={handleOk}>
            提交
          </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", 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="请选择">
            {REVIEW_RESULT_OPTIONS.map((item) => (
              <Select.Option key={item.value} value={item.value}>
                {item.label}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item
          label="指派专家"
          name="filingExpertId"
          rules={[{ required: true, message: "请选择专家" }]}
        >
          <Select
            placeholder="请选择"
            showSearch
            optionFilterProp="label"
            options={expertOptions}
          />
        </Form.Item>

        <Form.Item
          label="综合审核意见"
          name="reviewOpinion"
          rules={[{ required: true, message: "请输入综合审核意见" }]}
        >
          <TextArea rows={3} placeholder="请输入综合审核意见..." />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default Connect([NS_QUAL_EXPERT, NS_QUAL_REVIEW], true)(ReviewModal);