safety-eval-service-frontend/src/pages/Container/EnterpriseInfo/PersonnelInfo/Certificate/index.js

import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Button, Descriptions, Form, message, Modal, Space } from "antd";
import { useEffect, useState } from "react";
import FormBuilder from "zy-react-library/components/FormBuilder";
import AddIcon from "zy-react-library/components/Icon/AddIcon";
import Page from "zy-react-library/components/Page";
import CertPreviewImg from "~/components/CertPreviewImg";
import Search from "zy-react-library/components/Search";
import Table from "zy-react-library/components/Table";
import Upload from "zy-react-library/components/Upload";
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
import useGetFile from "zy-react-library/hooks/useGetFile";
import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
import useTable from "zy-react-library/hooks/useTable";
import { NS_STAFF_CERTIFICATE } from "~/enumerate/namespace";
import { safeGetFiles, safeListRequest, safeRequest } from "~/utils";
import { mockUploadFileList, resolveUploadFileId } from "~/utils/mockUpload";
import { dateRangeRule } from "~/utils/validators";
import PageHeader from "../../components/PageHeader";

function StaffCertificatePage(props) {
  const query = useGetUrlQuery();
  const staffId = query.staffId;
  const staffName = query.staffName;
  const [addModalOpen, setAddModalOpen] = useState(false);
  const [viewModalOpen, setViewModalOpen] = useState(false);
  const [currentId, setCurrentId] = useState("");
  const [form] = Form.useForm();

  const { tableProps, getData } = useTable(safeListRequest(props.staffCertificateList), {
    form,
    transform: (formData) => ({
      ...formData,
      eqStaffId: staffId,
    }),
  });

  useEffect(() => {
    if (staffId) {
      getData();
    }
  }, [staffId]);

  const goBack = () => {
    window.location.href = window.location.pathname.replace(/\/Certificate.*$/, "/List");
  };

  const onDelete = (id) => {
    Modal.confirm({
      title: "提示",
      content: "数据将会删除，您是否确认删除？",
      okText: "是",
      cancelText: "否",
      onOk: async () => {
        const res = await props.staffCertificateRemove({ id });
        if (res?.success !== false) {
          message.success("删除成功");
          getData();
        }
      },
    });
  };

  return (
    <Page isShowAllAction={false}>
      <PageHeader title={`人员证书 - ${staffName || ""}`} />
      <Button style={{ marginBottom: 16 }} onClick={goBack}>返回</Button>
      <Search
        form={form}
        options={[
          { name: "likeCertNo", label: "证书编号", placeholder: "请输入证书编号" },
          { name: "certCategory", label: "证书类别" },
          { name: "certWorkCategory", label: "证书作业类别" },
        ]}
        onFinish={getData}
      />
      <Table
        toolBarRender={() => (
          <Button
            type="primary"
            icon={<AddIcon />}
            onClick={() => {
              setCurrentId("");
              setAddModalOpen(true);
            }}
          >
            添加证书
          </Button>
        )}
        columns={[
          { title: "证书类型", dataIndex: "certCategory" },
          { title: "证书作业类别", dataIndex: "certWorkCategory" },
          { title: "证书编号", dataIndex: "certNo" },
          {
            title: "操作",
            width: 200,
            render: (_, record) => (
              <Space>
                <Button type="link" onClick={() => { setCurrentId(record.id); setViewModalOpen(true); }}>
                  查看
                </Button>
                <Button type="link" onClick={() => { setCurrentId(record.id); setAddModalOpen(true); }}>
                  编辑
                </Button>
                <Button danger type="link" onClick={() => onDelete(record.id)}>删除</Button>
              </Space>
            ),
          },
        ]}
        {...tableProps}
      />

      {addModalOpen && (
        <CertModal
          open={addModalOpen}
          staffId={staffId}
          currentId={currentId}
          requestAdd={props.staffCertificateAdd}
          requestEdit={props.staffCertificateEdit}
          requestDetails={props.staffCertificateInfo}
          onCancel={() => {
            setAddModalOpen(false);
            setCurrentId("");
          }}
          onSuccess={getData}
        />
      )}
      {viewModalOpen && (
        <ViewModal
          open={viewModalOpen}
          currentId={currentId}
          requestDetails={props.staffCertificateInfo}
          onCancel={() => {
            setViewModalOpen(false);
            setCurrentId("");
          }}
        />
      )}
    </Page>
  );
}

function CertModal({
  open, staffId, currentId, requestAdd, requestEdit, requestDetails, onCancel, onSuccess,
}) {
  const [form] = Form.useForm();
  const [submitting, setSubmitting] = useState(false);
  const [detailLoading, setDetailLoading] = useState(false);
  const { getFile } = useGetFile();

  useEffect(() => {
    if (!open) {
      return;
    }
    if (!currentId) {
      form.resetFields();
      form.setFieldsValue({ certImgs: mockUploadFileList("证书附件.jpg") });
      return;
    }
    let cancelled = false;
    (async () => {
      setDetailLoading(true);
      try {
        const res = await safeRequest(requestDetails, { id: currentId });
        if (cancelled || !res?.data) {
          return;
        }
        const data = { ...res.data };
        data.validDate = [data.validStartDate, data.validEndDate];
        data.certImgs = data.certImgFiles?.length ? data.certImgFiles : mockUploadFileList("证书附件.jpg");
        form.setFieldsValue(data);
        setDetailLoading(false);

        const files = await safeGetFiles(
          getFile,
          { eqType: "staff_cert", eqForeignKey: data.id },
          data.certImgFiles || [],
        );
        if (!cancelled && files.length) {
          form.setFieldValue("certImgs", files);
        }
      }
      catch (err) {
        console.warn("[StaffCertificate] load detail failed:", err);
      }
      finally {
        if (!cancelled) {
          setDetailLoading(false);
        }
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [open, currentId]);

  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  const handleSubmit = async (values) => {
    try {
      setSubmitting(true);
      values.validStartDate = values.validDate?.[0];
      values.validEndDate = values.validDate?.[1];
      values.staffId = staffId;
      values.certAttachmentUrl = resolveUploadFileId(values.certImgs);
      const request = currentId ? requestEdit : requestAdd;
      if (currentId) {
        values.id = currentId;
      }
      const res = await request(values);
      if (res?.success !== false) {
        message.success(currentId ? "编辑成功" : "添加成功");
        handleCancel();
        onSuccess();
      }
    }
    finally {
      setSubmitting(false);
    }
  };

  return (
    <Modal
      open={open}
      destroyOnClose
      title={currentId ? "编辑证书" : "添加证书"}
      width={800}
      loading={detailLoading}
      confirmLoading={submitting}
      onCancel={handleCancel}
      onOk={form.submit}
    >
      <FormBuilder
        form={form}
        span={24}
        showActionButtons={false}
        onFinish={handleSubmit}
        options={[
          { name: "certName", label: "证照名称", rules: [{ required: true, message: "请输入证照名称" }] },
          { name: "certCategory", label: "证书类别", rules: [{ required: true, message: "请选择证书类别" }] },
          { name: "certWorkCategory", label: "证书作业类别" },
          { name: "certNo", label: "证书编号", rules: [{ required: true, message: "请输入证书编号" }] },
          { name: "issueOrg", label: "发证机关", rules: [{ required: true, message: "请输入发证机关" }] },
          {
            name: "validDate",
            label: "证书有效开始/结束日期",
            render: FORM_ITEM_RENDER_ENUM.DATE_RANGE,
            rules: [{ required: true, message: "请选择证书有效期" }, dateRangeRule()],
          },
          { name: "reviewDate", label: "复合日期", render: FORM_ITEM_RENDER_ENUM.DATE },
          {
            name: "certImgs",
            label: "证书附件",
            render: (
              <Upload
                maxCount={3}
                onGetRemoveFile={(file) => setDeleteFiles(prev => [...prev, file])}
              />
            ),
          },
        ]}
        labelCol={{ span: 24 }}
        wrapperCol={{ span: 24 }}
      />
    </Modal>
  );
}

function ViewModal({ open, currentId, requestDetails, onCancel }) {
  const [info, setInfo] = useState({});
  const [detailLoading, setDetailLoading] = useState(false);
  const { getFile } = useGetFile();

  useEffect(() => {
    if (!open || !currentId) {
      setInfo({});
      return;
    }
    let cancelled = false;
    (async () => {
      setDetailLoading(true);
      try {
        const res = await safeRequest(requestDetails, { id: currentId });
        if (cancelled || !res?.data) {
          return;
        }
        const data = { ...res.data };
        data.certImgs = data.certImgFiles || [];
        setInfo(data);
        setDetailLoading(false);

        const files = await safeGetFiles(
          getFile,
          { eqType: "staff_cert", eqForeignKey: data.id },
          data.certImgFiles || [],
        );
        if (!cancelled && files.length) {
          setInfo((prev) => ({ ...prev, certImgs: files }));
        }
      }
      catch (err) {
        console.warn("[StaffCertificate] load view failed:", err);
      }
      finally {
        if (!cancelled) {
          setDetailLoading(false);
        }
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [open, currentId]);

  return (
    <Modal
      open={open}
      destroyOnClose
      title="证书详情"
      width={800}
      loading={detailLoading}
      cancelText="返回"
      okButtonProps={{ style: { display: "none" } }}
      onCancel={onCancel}
    >
      <Descriptions bordered column={1} labelStyle={{ width: 160 }}>
        <Descriptions.Item label="证照名称">{info.certName}</Descriptions.Item>
        <Descriptions.Item label="证书类别">{info.certCategory}</Descriptions.Item>
        <Descriptions.Item label="证书编号">{info.certNo}</Descriptions.Item>
        <Descriptions.Item label="发证机关">{info.issueOrg}</Descriptions.Item>
        <Descriptions.Item label="证书有效开始日期">{info.validStartDate}</Descriptions.Item>
        <Descriptions.Item label="证书有效结束日期">{info.validEndDate}</Descriptions.Item>
        <Descriptions.Item label="复合日期">{info.reviewDate}</Descriptions.Item>
        <Descriptions.Item label="证书图片"><CertPreviewImg files={info.certImgs} /></Descriptions.Item>
      </Descriptions>
    </Modal>
  );
}

export default Connect([NS_STAFF_CERTIFICATE], true)(StaffCertificatePage);