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

import { Connect } from "@cqsjjb/jjb-dva-runtime";
import {
  Button,
  DatePicker,
  Descriptions,
  Form,
  Image,
  Input,
  message,
  Modal,
  Select,
  Table,
  
} from "antd";
import AttachmentUpload from "~/components/AttachmentUpload";
import { PlusOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import SearchForm from "@cqsjjb/jjb-react-admin-component/SearchForm";
import ControlWrapper from "@cqsjjb/jjb-react-admin-component/ControlWrapper";
import TableAction from "@cqsjjb/jjb-react-admin-component/TableAction";
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";
import { tools } from "@cqsjjb/jjb-common-lib";
import { NS_ORG_QUALIFICATION_CERT } from "~/enumerate/namespace";
import { QUALIFICATION_INDUSTRY_OPTIONS } from "~/enumerate/enterpriseOptions";
import { toDayjs } from "~/utils/dateFormat";
import { dateRangeRule } from "~/utils/validators";

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

/** certImageUrl（逗号分隔URL）↔ 文件列表（{ url }[]） */
function parseCertImageUrl(str) {
  if (!str) return [];
  return String(str).split(",").filter(Boolean).map((url, i) => ({
    url: url.trim(),
    name: `证书图片${i + 1}.jpg`,
  }));
}
function stringifyCertImageUrl(files) {
  if (!files?.length) return undefined;
  return files.map((f) => f.url || f.response?.data?.url).filter(Boolean).join(",");
}

function QualificationCertPage(props) {
  const [addModalOpen, setAddModalOpen] = useState(false);
  const [viewModalOpen, setViewModalOpen] = useState(false);
  const [currentId, setCurrentId] = useState("");
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [dataSource, setDataSource] = useState([]);
  const [total, setTotal] = useState(0);

  const getData = async () => {
    setLoading(true);
    try {
      const params = {
        ...router.query,
        current: router.query.current || 1,
        pageSize: router.query.pageSize || 10,
      };
      const res = await props.orgQualificationCertList(params);
      if (res?.success !== false) {
        setDataSource(res?.data || []);
        setTotal(res?.total || 0);
      }
    } catch (err) {
      console.warn("[QualificationCert] list failed:", err);
    } finally {
      setLoading(false);
    }
  };

  const handleReset = (values) => {
    router.query = { ...values, validStartDate: undefined, validEndDate: undefined, current: 1, pageSize: 10 };
    getData();
  };

  useEffect(() => {
    const params = {
      ...router.query
    };
    if (params.validStartDate && params.validEndDate) {
      params.validDate = [toDayjs(params.validStartDate), toDayjs(params.validEndDate)];
    }
    form.setFieldsValue(params);
    getData();
  }, []);

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

  const onToggleStatus = (record) => {
    const enabled = record.enableFlag === 1;
    Modal.confirm({
      title: "提示",
      content: enabled ? "是否停用该证书？" : "是否启用该证书？",
      okText: "是",
      cancelText: "否",
      onOk: async () => {
        const action = enabled ? props.orgQualificationCertDisable : props.orgQualificationCertEnable;
        const res = await action({ id: record.id });
        if (res?.success !== false) {
          message.success("操作成功");
          await getData();
        } else {
          message.error(res?.message || "操作失败");
        }
      },
    });
  };

  return (
    <PageLayout
      title={
        <div>
          <span>安全评价资质证书管理</span>
          <div className="pageLayout-extra">
            机构需将自身拥有的安全评价资质证书信息录入系统，包括资质等级、发证机关、发证日期、有效期等。
          </div>
        </div>
      }
      extra={
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={() => {
            setCurrentId("");
            setAddModalOpen(true);
          }}
        >
          新增证书
        </Button>
      }
    >
      <SearchForm
        style={{ marginBottom: 24 }}
        form={form}
        loading={loading}
        formLine={[
          <Form.Item key="likeCertName" name="likeCertName">
            <ControlWrapper.Input
              label="证书名称"
              placeholder="请输入证书名称"
              allowClear
            />
          </Form.Item>,
          <Form.Item key="validDate" name="validDate">
            <ControlWrapper.DatePicker.RangePicker label="证书有效期" />
          </Form.Item>,
        ]}
        onReset={handleReset}
        onFinish={(values) => {
          if (values.validDate) {
            values.validStartDate = values.validDate?.[0]?.format("YYYY-MM-DD");
            values.validEndDate = values.validDate?.[1]?.format("YYYY-MM-DD");
            delete values.validDate;
          }
          router.query = {
            ...values,
            current: 1,
            pageSize: 10,
          };
          getData();
        }}
      />

      <Table
        rowKey="id"
        columns={[
          { title: "证照类别", dataIndex: "licenseTypeName" },
          { title: "证书名称", dataIndex: "certName" },
          {
            title: "证书有效期",
            width: 220,
            render: (_, record) =>
              `${record.validStartDate ?? ""} ~ ${record.validEndDate ?? ""}`,
          },
          { title: "证书编号", dataIndex: "certNo" },
          {
            title: "状态",
            width: 80,
            render: (_, record) =>
              record.enableFlag === 1 ? "启用" : "禁用",
          },
          {
            title: "照片",
            width: 100,
            render: (_, record) =>
              record.certImageUrl ? (
                <Image width={60} height={60} style={{ objectFit: "cover" }} src={record.certImageUrl.split(",")[0]?.trim()} preview={{ mask: "查看" }} />
              ) : (
                <span>无</span>
              ),
          },
          {
            title: "操作",
            width: 200,
            fixed: "right",
            render: (_, record) => (
              <TableAction>
                <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>
                <Button type="link" onClick={() => onToggleStatus(record)}>
                  {record.enableFlag === 1 ? "禁用" : "启用"}
                </Button>
              </TableAction>
            ),
          },
        ]}
        dataSource={dataSource}
        scroll={{ y: props.scrollY }}
        loading={loading}
        pagination={{
          total,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (t) => `共 ${t} 条`,
          current: router.query.current || 1,
          pageSize: router.query.pageSize || 10,
          onChange: (page, pageSize) => {
            router.query = { ...router.query, current: page, pageSize };
            getData();
          },
        }}
      />

      {addModalOpen && (
        <CertFormModal
          open={addModalOpen}
          currentId={currentId}
          requestAdd={props.orgQualificationCertAdd}
          requestEdit={props.orgQualificationCertEdit}
          requestDetails={props.orgQualificationCertInfo}
          onCancel={() => {
            setAddModalOpen(false);
            setCurrentId("");
          }}
          onSuccess={getData}
        />
      )}
      {viewModalOpen && (
        <CertViewModal
          open={viewModalOpen}
          currentId={currentId}
          requestDetails={props.orgQualificationCertInfo}
          onCancel={() => {
            setViewModalOpen(false);
            setCurrentId("");
          }}
        />
      )}
    </PageLayout>
  );
}

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

  useEffect(() => {
    if (!open) return;
    if (!currentId) {
      form.resetFields();
      return;
    }
    let cancelled = false;
    (async () => {
      setDetailLoading(true);
      try {
        const res = await requestDetails({ id: currentId });
        if (cancelled || !res?.data) return;
        const data = { ...res.data };
        data.issueDate = toDayjs(data.issueDate);
        data.validDate = [toDayjs(data.validStartDate), toDayjs(data.validEndDate)];
        data.certImageUrl = data.certImageUrl;
        form.setFieldsValue(data);
      } catch (err) {
        console.warn("[QualificationCert] 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.certImageUrl = values.certImageUrl?.map((item) => item.url).join(",");
      if (currentId) values.id = currentId;
      const request = currentId ? requestEdit : requestAdd;
      const res = await request(values);
      if (res?.success !== false) {
        message.success(currentId ? "编辑成功" : "添加成功");
        handleCancel();
        onSuccess();
      }
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Modal
      open={open}
      destroyOnHidden
      maskClosable={false}
      title={currentId ? "编辑证书" : "添加证书"}
      width={800}
      loading={detailLoading}
      confirmLoading={submitting}
      onOk={form.submit}
      onCancel={handleCancel}
    >
      <div style={{ color: "#999", marginBottom: 16, fontSize: 12 }}>
        严谨在本互联网非涉密平台处理、传输国家秘密和工作秘密，请确认扫描、传输的文件资料不涉及国家秘密和工作秘密
      </div>
      <Form form={form} layout="horizontal" onFinish={handleSubmit} labelCol={{ span: 4 }}>
        <Form.Item
          name="licenseTypeName"
          label="证照类型"
          rules={[{ required: true, message: "请选择证照类型" }]}
        >
          <Select placeholder="请选择证照类型">
            {QUALIFICATION_INDUSTRY_OPTIONS.map((opt) => (
              <Select.Option key={opt.value} value={opt.label}>
                {opt.label}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          name="certName"
          label="证书名称"
          rules={[{ required: true, message: "请输入证书名称" }]}
        >
          <Input placeholder="请输入证书名称" />
        </Form.Item>
        <Form.Item
          name="certNo"
          label="证明编号"
          rules={[{ required: true, message: "请输入证明编号" }]}
        >
          <Input placeholder="请输入证明编号" />
        </Form.Item>
        <Form.Item
          name="issueOrg"
          label="发证机关"
          rules={[{ required: true, message: "请输入发证机关" }]}
        >
          <Input placeholder="请输入发证机关" />
        </Form.Item>
        <Form.Item
          name="issueDate"
          label="发证日期"
          rules={[{ required: true, message: "请选择发证日期" }]}
        >
          <DatePicker style={{ width: "100%" }} placeholder="请选择发证日期" />
        </Form.Item>
        <Form.Item
          name="validDate"
          label="证书有效期"
          rules={[
            { required: true, message: "请选择证书有效期" },
            dateRangeRule(),
          ]}
        >
          <RangePicker style={{ width: "100%" }} />
        </Form.Item>
        <Form.Item name="remark" label="备注">
          <TextArea rows={3} placeholder="请输入备注" />
        </Form.Item>
        <AttachmentUpload name="certImageUrl" accept="image/*" label="证书图片" maxCount={3} />
      </Form>
    </Modal>
  );
}

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

  useEffect(() => {
    if (!open || !currentId) {
      setInfo({});
      return;
    }
    let cancelled = false;
    (async () => {
      setDetailLoading(true);
      try {
        const res = await requestDetails({ id: currentId });
        if (cancelled || !res?.data) return;
        setInfo({ ...res.data, certImageUrlList: parseCertImageUrl(res.data.certImageUrl) });
      } catch (err) {
        console.warn("[QualificationCert] load view failed:", err);
      } finally {
        if (!cancelled) setDetailLoading(false);
      }
    })();
    return () => { cancelled = true; };
  }, [open, currentId]);

  return (
    <Modal
      open={open}
      destroyOnHidden
      maskClosable={false}
      title="证书详情"
      width={800}
      loading={detailLoading}
      cancelText="返回"
      okButtonProps={{ style: { display: "none" } }}
      onCancel={onCancel}
    >
      <Descriptions bordered column={1} labelStyle={{ width: 160 }}>
        <Descriptions.Item label="证照类型">{info.licenseTypeName}</Descriptions.Item>
        <Descriptions.Item label="证书名称">{info.certName}</Descriptions.Item>
        <Descriptions.Item label="证明编号">{info.certNo}</Descriptions.Item>
        <Descriptions.Item label="发证机关">{info.issueOrg}</Descriptions.Item>
        <Descriptions.Item label="发证日期">{info.issueDate}</Descriptions.Item>
        <Descriptions.Item label="证书有效期">
          {`${info.validStartDate ?? ""} ~ ${info.validEndDate ?? ""}`}
        </Descriptions.Item>
        <Descriptions.Item label="备注">{info.remark || "-"}</Descriptions.Item>
        <Descriptions.Item label="证书图片">
          {info.certImageUrlList?.length ? (
            <Image.PreviewGroup>
              {info.certImageUrlList.map((file, idx) => (
                <Image
                  key={idx}
                  src={file.url}
                  alt="证书图片"
                  width={100}
                  height={100}
                  style={{ objectFit: "cover", marginRight: 8 }}
                />
              ))}
            </Image.PreviewGroup>
          ) : (
            <span>暂无图片</span>
          )}
        </Descriptions.Item>
      </Descriptions>
    </Modal>
  );
}

export default Connect(
  [NS_ORG_QUALIFICATION_CERT],
  true,
)(AntdTableFuncControl(QualificationCertPage));