326 lines
11 KiB
JavaScript
326 lines
11 KiB
JavaScript
|
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||
|
|
import { ReactFlow, ReactFlowProvider } from "@xyflow/react";
|
||
|
|
import { Button, Descriptions, Divider, message, 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 { PLAN_ENUM } from "~/enumerate/constant";
|
||
|
|
import { NS_INSPECTION } from "~/enumerate/namespace";
|
||
|
|
import { getFlowData } from "~/utils/flow";
|
||
|
|
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 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.currentInspectorUser = data.inspectorVerificationList.filter(item => item.userId === userInfo.id)[0];
|
||
|
|
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: info.currentInspectorUser.departmentName },
|
||
|
|
{ label: "检查人", children: info.currentInspectorUser.userName },
|
||
|
|
{ label: "检查类型", children: info.typeName },
|
||
|
|
{ label: "检查时间", children: `${info.timeStart}至${info.timeEnd}` },
|
||
|
|
{ label: "检查场所", children: info.place, span: 2 },
|
||
|
|
{ label: "计划属性", children: getLabelName({ list: PLAN_ENUM, status: info.todo1 }), span: 2 },
|
||
|
|
{ label: "计划名称", children: info.todo2, 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={[]} />) },
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</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 && (
|
||
|
|
<FlowModal
|
||
|
|
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>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function FlowModalComponent(props) {
|
||
|
|
const [nodes, setNodes] = useState([]);
|
||
|
|
const [edges, setEdges] = useState([]);
|
||
|
|
|
||
|
|
const getData = async () => {
|
||
|
|
const { success, data } = await props["hiddenFlowchart"]({ id: props.id });
|
||
|
|
if (success) {
|
||
|
|
const { nodes, edges } = getFlowData(data.flowCOList, data.thisFlow);
|
||
|
|
setNodes(nodes);
|
||
|
|
setEdges(edges);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
message.error("获取数据失败");
|
||
|
|
props.onCancel();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
useEffect(() => {
|
||
|
|
getData();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Modal
|
||
|
|
title="查看流程图"
|
||
|
|
width={1000}
|
||
|
|
open
|
||
|
|
maskClosable={false}
|
||
|
|
onCancel={props.onCancel}
|
||
|
|
footer={[
|
||
|
|
<Button key="cancel" onClick={props.onCancel}>取消</Button>,
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<ReactFlowProvider>
|
||
|
|
<div style={{ width: "100%", height: 500 }}>
|
||
|
|
<style>
|
||
|
|
{`
|
||
|
|
.react-flow__attribution {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
</style>
|
||
|
|
<ReactFlow
|
||
|
|
nodes={nodes}
|
||
|
|
edges={edges}
|
||
|
|
fitView
|
||
|
|
preventScrolling={false}
|
||
|
|
connectionMode="loose"
|
||
|
|
zoomOnScroll={true}
|
||
|
|
zoomOnPinch={true}
|
||
|
|
panOnScroll={true}
|
||
|
|
panOnScrollSpeed={0.5}
|
||
|
|
connectionLineOptions={{
|
||
|
|
type: "straight",
|
||
|
|
style: { stroke: "transparent", strokeWidth: 0 },
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
</ReactFlow>
|
||
|
|
</div>
|
||
|
|
</ReactFlowProvider>
|
||
|
|
</Modal>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const FlowModal = Connect([NS_INSPECTION], true)(FlowModalComponent);
|
||
|
|
|
||
|
|
export default Connect([NS_INSPECTION], true)(InspectionView);
|