zcloud_gbs_qualifications-react/src/components/ViewProjectReviewUserModal/index.js

import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Button, Descriptions, Divider, Form, Modal } from "antd";
import { useEffect, useState } from "react";
import PreviewImg from "zy-react-library/components/PreviewImg";
import Search from "zy-react-library/components/Search";
import DictionarySelect from "zy-react-library/components/Select/Dictionary";
import Table from "zy-react-library/components/Table";
import TooltipPreviewImg from "zy-react-library/components/TooltipPreviewImg";
import { UPLOAD_FILE_TYPE_ENUM } from "zy-react-library/enum/uploadFile/gwj";
import useGetFile from "zy-react-library/hooks/useGetFile";
import useTable from "zy-react-library/hooks/useTable";
import { getLabelName } from "zy-react-library/utils";
import { NS_QUALIFICATION_STATISTICS } from "~/enumerate/namespace";

const EMPLOYMENT_STATUS_ENUM = [
  { label: "离职", value: 0 },
  { label: "在职", value: 1 },
  { label: "信息变更中", value: 2 },
  { label: "未入职", value: 3 },
  { label: "实习生", value: 4 },
  { label: "实习结束", value: 5 },
  { label: "退休", value: 6 },
  { label: "劳务派遣", value: 7 },
  { label: "劳务派遣结束", value: 8 },
  { label: "入职待审核", value: 11 },
  { label: "离职待审核", value: 10 },
];
const ViewProjectReviewUserModal = (props) => {
  const [form] = Form.useForm();
  const [realData, setRealData] = useState([]);
  const [viewInfoModalVisible, setViewInfoModalVisible] = useState(false);
  const [currentId, setCurrentId] = useState("");

  const { loading: getFileLoading, getFile } = useGetFile();
  const { tableProps, getData } = useTable(props["userQualificationList"], {
    form,
    params: {
      eqUserId: props.data.userRealId ? props.data.userRealId : props.data.id,
    },
    useStorageQueryCriteria: false,
    onSuccess: async (data) => {
      const list = await getFile({
        single: false,
        dataSource: data.list,
        foreignKey: "userCertificateId",
        eqType: UPLOAD_FILE_TYPE_ENUM["159"],
      });
      setRealData(list);
    },
  });

  return (
    <div>
      <Modal
        title="特种证书"
        width={1200}
        open
        maskClosable={false}
        onCancel={props.onCancel}
        footer={[
          <Button key="cancel" onClick={props.onCancel}>取消</Button>,
        ]}
      >
        <Search
          labelCol={{ span: 8 }}
          options={[
            { name: "likeUserName", label: "姓名" },
            { name: "eqType", label: "证书类型", render: (<DictionarySelect dictValue="zslx" />) },
          ]}
          form={form}
          onFinish={getData}
        />
        <Table
          options={false}
          disabledResizer={true}
          columns={[
            { title: "姓名", dataIndex: "name" },
            { title: "证书类型", dataIndex: "typeName" },
            { title: "证书名称", dataIndex: "certificateName" },
            { title: "证书编号", dataIndex: "certificateCode" },
            {
              title: "有效期",
              dataIndex: "certificateDateStart",
              render: (_, record) => `${record.certificateDateStart}至${record.certificateDateEnd}`,
            },
            { title: "图片", dataIndex: "files", render: (_, record) => (<TooltipPreviewImg files={record.files} />) },
            {
              title: "操作",
              width: 100,
              fixed: "right",
              render: (_, record) => (
                <Button
                  type="link"
                  onClick={() => {
                    setViewInfoModalVisible(true);
                    setCurrentId(record.id);
                  }}
                >
                  查看
                </Button>
              ),
            },
          ]}
          {...tableProps}
          dataSource={realData}
          loading={getFileLoading || tableProps.loading}
        />
      </Modal>
      {viewInfoModalVisible && (
        <ViewInfoModal
          id={currentId}
          onCancel={() => {
            setViewInfoModalVisible(false);
            setCurrentId("");
          }}
        />
      )}
    </div>
  );
};

const ViewInfoModalComponent = (props) => {
  const [info, setInfo] = useState({});

  const { getFile } = useGetFile();

  const getData = async () => {
    const { data } = await props["userQualificationInfo"]({ id: props.id });
    const fileItems = await getFile({ eqType: UPLOAD_FILE_TYPE_ENUM["159"], eqForeignKey: data.userCertificateId });
    console.log(fileItems);
    setInfo({ ...data, files: fileItems });
  };

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

  return (
    <Modal
      title="特种证书"
      width={1200}
      open
      maskClosable={false}
      onCancel={props.onCancel}
      footer={[
        <Button key="cancel" onClick={props.onCancel}>取消</Button>,
      ]}
    >
      <Divider orientation="left">人员信息</Divider>
      <Descriptions
        column={1}
        bordered
        styles={{ label: { width: 200 } }}
        items={[
          { label: "姓名", children: info.userName },
          { label: "企业名称", children: info.corpinfoName },
          { label: "部门名称", children: info.departmentName },
          { label: "岗位名称", children: info.postName },
          { label: "就职状态", children: getLabelName({ list: EMPLOYMENT_STATUS_ENUM, status: info.employmentStatus }) },
        ]}
      />
      <Divider orientation="left">证书信息</Divider>
      {
        info.type === "tezhongzuoye" && (
          <Descriptions
            column={1}
            bordered
            styles={{ label: { width: 200 } }}
            items={[
              { label: "证书名称", children: info.certificateName },
              { label: "证书编号", children: info.certificateCode },
              { label: "发证机构", children: info.issuingAuthority },
              { label: "作业类别", children: info.industryCategoryName },
              { label: "操作项目", children: info.industryOperatingItemsName },
              { label: "发证日期", children: info.dateIssue },
              { label: "有效日期", children: `${info.certificateDateStart}至${info.certificateDateEnd}` },
              { label: "复审日期", children: info.reviewDate },
              { label: "证书照片", children: (<PreviewImg files={info.files} />) },
            ]}
          />
        )
      }
      {
        info.type === "tzsbczry" && (
          <Descriptions
            column={1}
            bordered
            styles={{ label: { width: 200 } }}
            items={[
              { label: "证书名称", children: info.certificateName },
              { label: "证书编号", children: info.certificateCode },
              { label: "操作类别", children: info.assignmentCategoryName },
              { label: "作业项目", children: info.assignmentOperatingItemsName },
              { label: "发证机构", children: info.issuingAuthority },
              { label: "发证日期", children: info.dateIssue },
              { label: "复审日期", children: info.reviewDate },
              { label: "有效日期", children: `${info.certificateDateStart}至${info.certificateDateEnd}` },
              { label: "证书照片", children: (<PreviewImg files={info.files} />) },
            ]}
          />
        )
      }
      {
        info.type === "zyfzr" && (
          <Descriptions
            column={1}
            bordered
            styles={{ label: { width: 200 } }}
            items={[
              { label: "证书名称", children: info.certificateName },
              { label: "证书编号", children: info.certificateCode },
              { label: "岗位名称", children: info.postName },
              { label: "发证机构", children: info.issuingAuthority },
              { label: "发证日期", children: info.dateIssue },
              { label: "有效日期", children: `${info.certificateDateStart}至${info.certificateDateEnd}` },
              { label: "证书照片", children: (<PreviewImg files={info.files} />) },
            ]}
          />
        )
      }
      {
        info.type === "aqscglry" && (
          <Descriptions
            column={1}
            bordered
            styles={{ label: { width: 200 } }}
            items={[
              { label: "证书名称", children: info.certificateName },
              { label: "证书编号", children: info.certificateCode },
              { label: "岗位名称", children: info.postName },
              { label: "发证机构", children: info.issuingAuthority },
              { label: "发证日期", children: info.dateIssue },
              { label: "有效日期", children: `${info.certificateDateStart}至${info.certificateDateEnd}` },
              { label: "证书照片", children: (<PreviewImg files={info.files} />) },
            ]}
          />
        )
      }
    </Modal>
  );
};

const ViewInfoModal = Connect([NS_QUALIFICATION_STATISTICS], true)(ViewInfoModalComponent);

export default Connect([NS_QUALIFICATION_STATISTICS], true)(ViewProjectReviewUserModal);