257 lines
8.9 KiB
JavaScript
257 lines
8.9 KiB
JavaScript
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 HiddenInfo from "zy-react-library/components/HiddenInfo/gwj";
|
||
import Page from "zy-react-library/components/Page";
|
||
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 { 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 [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 [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 { 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.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 (
|
||
<Page headerTitle="查看" extraActionButtons={<Button type="primary" onClick={handlePrint}>打印</Button>}>
|
||
<Spin spinning={props.inspection.inspectionLoading || getFileLoading}>
|
||
<div 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: info.inspector?.departmentName },
|
||
{ 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>
|
||
</Spin>
|
||
{hiddenViewModalOpen && (
|
||
<HiddenViewModal
|
||
id={hiddenId}
|
||
hiddenId={hiddenUUId}
|
||
onCancel={() => {
|
||
setHiddenViewModalOpen(false);
|
||
setHiddenId("");
|
||
setHiddenUUId("");
|
||
}}
|
||
/>
|
||
)}
|
||
{flowModalOpen && (
|
||
<HiddenFlowModal
|
||
id={currentId}
|
||
onCancel={() => {
|
||
setFlowModalOpen(false);
|
||
setCurrentId("");
|
||
}}
|
||
/>
|
||
)}
|
||
</Page>
|
||
);
|
||
}
|
||
|
||
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);
|