zcloud_gbs_inspection-react/src/pages/Container/BranchCompany/InspectionView/index.js

import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Button, Descriptions, Divider, Modal, Space, Spin } from "antd";
import { useEffect, useRef, useState } from "react";
import { useReactToPrint } from "react-to-print";
import HeaderBack from "zy-react-library/components/HeaderBack";
import HiddenInfo from "zy-react-library/components/HiddenInfo/gwj";
import PreviewImg from "zy-react-library/components/PreviewImg";
import Table from "zy-react-library/components/Table";
import { UPLOAD_FILE_TYPE_ENUM } from "zy-react-library/enum/uploadFile/gwj";
import useGetFile from "zy-react-library/hooks/useGetFile";
import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
import useGetUserInfo from "zy-react-library/hooks/useGetUserInfo";
import { getFileUrl, getLabelName } from "zy-react-library/utils";
import HiddenFlowModal from "~/components/HiddenFlowModal";
import { PLAN_ENUM } from "~/enumerate/constant";
import { NS_INSPECTION } from "~/enumerate/namespace";
import "./index.less";

function InspectionView(props) {
  const query = useGetUrlQuery();
  const { loading: getFileLoading, getFile } = useGetFile();
  const { getUserInfo } = useGetUserInfo();

  const [info, setInfo] = useState({
    inspectedPartyConfirmation: {},
    currentInspectorUser: {},
    content: [],
    inspectorVerificationList: [],
  });
  const [hiddenList, setHiddenList] = useState([]);
  const [hiddenViewModalOpen, setHiddenViewModalOpen] = useState(false);
  const [hiddenId, setHiddenId] = useState("");
  const [hiddenUUId, setHiddenUUId] = useState("");
  const [flowModalOpen, setFlowModalOpen] = useState(false);
  const [currentId, setCurrentId] = useState("");
  const [currentInspectorDepartmentName, setCurrentInspectorDepartmentName] = useState([]);
  const [currentInspectorUserName, setCurrentInspectorUserName] = useState([]);
  const contentRef = useRef(null);
  const handlePrint = useReactToPrint({
    contentRef,
    pageStyle: `    @page {
      size: landscape;
      margin: 0mm;
    }
    @media print {
      body {
        margin: 10px;
        padding: 10px;
      }
    }
  `,
    documentTitle: "",
  });

  const getData = async () => {
    const userInfo = await getUserInfo();
    const { data } = await props["inspectionView"]({ inspectionId: query.id });
    for (let i = 0; i < data.content.length; i++) {
      const files = await getFile({
        eqType: UPLOAD_FILE_TYPE_ENUM["140"],
        eqForeignKey: data.content[i].contentId,
      });
      data.content[i].files = files;
    }
    data.inspector.forEach(item => {
      setCurrentInspectorDepartmentName(prev => [...prev, item.departmentName || ""])
    })
    data.inspectorVerificationList.forEach(item => {
      setCurrentInspectorUserName(prev => [...prev, item.userName || ""])
    })
    setInfo(data);
    const { data: hiddenList } = await props["hiddenList"]({ foreignKey: query.inspectionId, pageIndex: 1, pageSize: 999 });
    setHiddenList(hiddenList);
  };
  useEffect(() => {
    getData();
  }, []);

  return (
    <div>
      <HeaderBack title="查看" />
      <Spin spinning={props.inspection.inspectionLoading || getFileLoading}>
        <div style={{ padding: 20, paddingBottom: 0 }} ref={contentRef}>
          <Divider orientation="left">
            {info.subject}
            现场安全检查记录
          </Divider>
          <Descriptions
            column={2}
            bordered
            styles={{ label: { width: 200 } }}
            items={[
              { label: "被检查单位", children: info.inspectedPartyConfirmation?.departmentName },
              { label: "被检查单位现场负责人", children: info.inspectedPartyConfirmation?.userName },
              { label: "牵头检查部门", children: currentInspectorDepartmentName.join("，") },
              { label: "检查人", children: currentInspectorUserName.join("，") },
              { label: "检查类型", children: info.typeName },
              { label: "检查时间", children: `${info.timeStart}至${info.timeEnd}` },
              { label: "检查场所", children: info.place, span: 2 },
              { label: "计划属性", children: getLabelName({ list: PLAN_ENUM, status: info.planType }), span: 2 },
              ...(info.planType === 1 ? [{ label: "计划名称", children: info.planName, span: 2 }] : []),
              { label: "记录填写时间", children: info.createTime, span: 2 },
            ]}
          />
          <Divider orientation="left">检查情况</Divider>
          <Descriptions
            column={2}
            bordered
            styles={{ label: { width: 200 } }}
            items={
              info.content.map(item =>
                [
                  { label: "检查情况", children: item.content },
                  { label: "图片", children: (<PreviewImg files={item.files} />) },
                ],
              ).flat()
            }
          />
          <Divider orientation="left">发现问题</Divider>
          <Table
            className="print-no-use"
            dataSource={hiddenList || []}
            disabledResizer={true}
            pagination={false}
            options={false}
            columns={[
              { title: "隐患描述", dataIndex: "hiddenDesc" },
              { title: "隐患部位", dataIndex: "hiddenPartName" },
              {
                title: "操作", render: (_, record) => (
                  <Space>
                    <Button
                      type="link"
                      onClick={() => {
                        setHiddenViewModalOpen(true);
                        setHiddenId(record.id);
                        setHiddenUUId(record.hiddenId);
                      }}
                    >
                      查看
                    </Button>
                    <Button
                      type="link"
                      onClick={() => {
                        setFlowModalOpen(true);
                        setCurrentId(record.id);
                      }}
                    >
                      流程图
                    </Button>
                  </Space>
                )
              },
            ]}
          />
          <table className="print-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>隐患描述</th>
                <th>隐患部位</th>
              </tr>
            </thead>
            <tbody>
              {
                (hiddenList || []).map((item, index) => (
                  <tr key={item.id}>
                    <td>{index + 1}</td>
                    <td>{item.hiddenDesc}</td>
                    <td>{item.hiddenPartName}</td>
                  </tr>
                ))
              }
            </tbody>
          </table>
          <Divider orientation="left">检查人员审核情况</Divider>
          <Table
            className="print-no-use"
            dataSource={info.inspectorVerificationList}
            disabledResizer={true}
            pagination={false}
            options={false}
            columns={[
              { title: "审核人员", dataIndex: "userName" },
              { title: "审核意见", dataIndex: "userRemarks" },
              { title: "签字", render: (_, record) => (record.signature && <PreviewImg files={[record.signature]} />) },
            ]}
          />
          <table className="print-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>审核人员</th>
                <th>审核意见</th>
                <th>签字</th>
              </tr>
            </thead>
            <tbody>
              {
                info.inspectorVerificationList.map((item, index) => (
                  <tr key={item.id}>
                    <td>{index + 1}</td>
                    <td>{item.userName}</td>
                    <td>{item.userRemarks}</td>
                    <td>{item.signature && <img src={getFileUrl() + item.signature} alt="" width={100} height={100} />}</td>
                  </tr>
                ))
              }
            </tbody>
          </table>
          <Divider orientation="left">被检查单位现场负责人确认情况</Divider>
          <Descriptions
            column={1}
            bordered
            styles={{ label: { width: 200 } }}
            items={[
              { label: "被检查单位现场负责人（签字）", children: (<PreviewImg files={[info.inspectedPartyConfirmation.signature]} />) },
            ]}
          />
        </div>
        <div style={{ marginTop: 20, paddingBottom: 20, textAlign: "center" }}>
          <Space>
            <Button type="primary" onClick={handlePrint}>打印</Button>
            {/* {query.isExport !== "0" && <Button type="primary">导出</Button>} */}
          </Space>
        </div>
      </Spin>
      {hiddenViewModalOpen && (
        <HiddenViewModal
          id={hiddenId}
          hiddenId={hiddenUUId}
          onCancel={() => {
            setHiddenViewModalOpen(false);
            setHiddenId("");
            setHiddenUUId("");
          }}
        />
      )}
      {flowModalOpen && (
        <HiddenFlowModal
          id={currentId}
          onCancel={() => {
            setFlowModalOpen(false);
            setCurrentId("");
          }}
        />
      )}
    </div>
  );
}

function HiddenViewModal(props) {
  return (
    <Modal
      title="查看隐患"
      width={1000}
      open
      maskClosable={false}
      onCancel={props.onCancel}
      footer={[
        <Button key="cancel" onClick={props.onCancel}>取消</Button>,
      ]}
    >
      <HiddenInfo id={props.id} hiddenId={props.hiddenId} />
    </Modal>
  );
}

export default Connect([NS_INSPECTION], true)(InspectionView);