refactor(hotwork): 重构作业列表组件结构
- 将流程图模态框组件拆分为独立的 FlowModal 组件 - 将强制终止模态框组件拆分为独立的 ForceTerminationModal 组件master
LiuJiaNan
parent
97e9c44f4e
commit
0f26a2464c
|
|
@ -0,0 +1,55 @@
|
|||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||
import { ReactFlow, ReactFlowProvider } from "@xyflow/react";
|
||||
import { Button, Modal } from "antd";
|
||||
import { useEffect, useState } from "react";
|
||||
import { NS_EIGHTWORK } from "~/enumerate/namespace";
|
||||
import { getFlowData } from "~/utils/flow";
|
||||
|
||||
function FlowModal(props) {
|
||||
const [flowNodes, setFlowNodes] = useState([]);
|
||||
const [flowEdges, setFlowEdges] = useState([]);
|
||||
|
||||
const getData = async () => {
|
||||
const { data } = await props["eightworkTaskLogFlowChart"]({ workId: props.id });
|
||||
const { nodes, edges } = getFlowData(data);
|
||||
setFlowNodes(nodes);
|
||||
setFlowEdges(edges);
|
||||
};
|
||||
|
||||
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 }}>
|
||||
<ReactFlow
|
||||
nodes={flowNodes}
|
||||
edges={flowEdges}
|
||||
fitView
|
||||
preventScrolling={false}
|
||||
connectionMode="loose"
|
||||
zoomOnScroll={true}
|
||||
zoomOnPinch={true}
|
||||
panOnScroll={true}
|
||||
panOnScrollSpeed={0.5}
|
||||
proOptions={{ hideAttribution: true }}
|
||||
>
|
||||
</ReactFlow>
|
||||
</div>
|
||||
</ReactFlowProvider>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default Connect([NS_EIGHTWORK], true)(FlowModal);
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||
import { Modal } from "antd";
|
||||
import FormBuilder from "zy-react-library/components/FormBuilder";
|
||||
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
|
||||
import { NS_EIGHTWORK } from "~/enumerate/namespace";
|
||||
|
||||
const ForceTerminationModal = (props) => {
|
||||
const [form] = FormBuilder.useForm();
|
||||
|
||||
const onSubmit = async () => {
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open
|
||||
title="强制关闭"
|
||||
maskClosable={false}
|
||||
onCancel={props.onCancel}
|
||||
onOk={form.submit}
|
||||
width={600}
|
||||
confirmLoading={props.eightwork.eightworkLoading}
|
||||
>
|
||||
<div>
|
||||
<div>请确认是否强制关闭作业票？</div>
|
||||
<FormBuilder
|
||||
style={{ width: "100%", marginTop: "10px" }}
|
||||
span={24}
|
||||
labelCol={{ span: 10 }}
|
||||
options={[
|
||||
{ name: "todo", label: "强制关闭原因", render: FORM_ITEM_RENDER_ENUM.TEXTAREA },
|
||||
]}
|
||||
form={form}
|
||||
showActionButtons={false}
|
||||
onFinish={onSubmit}
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default Connect([NS_EIGHTWORK], true)(ForceTerminationModal);
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||
import { ReactFlow, ReactFlowProvider } from "@xyflow/react";
|
||||
import { Button, Modal, Space } from "antd";
|
||||
import { Button, Space } from "antd";
|
||||
import { useEffect, useState } from "react";
|
||||
import FormBuilder from "zy-react-library/components/FormBuilder";
|
||||
import Page from "zy-react-library/components/Page";
|
||||
import Search from "zy-react-library/components/Search";
|
||||
import DepartmentSelectTree from "zy-react-library/components/SelectTree/Department/Gwj";
|
||||
|
|
@ -11,9 +9,10 @@ import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
|
|||
import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
|
||||
import useTable from "zy-react-library/hooks/useTable";
|
||||
import { getLabelName } from "zy-react-library/utils";
|
||||
import FlowModal from "~/components/FlowModal";
|
||||
import ForceTerminationModal from "~/components/ForceTerminationModal";
|
||||
import { STATUS_ENUM, WORK_TYPE_ENUM } from "~/enumerate/constant";
|
||||
import { NS_EIGHTWORK } from "~/enumerate/namespace";
|
||||
import { getFlowData } from "~/utils/flow";
|
||||
import "@xyflow/react/dist/style.css";
|
||||
|
||||
function List(props) {
|
||||
|
|
@ -179,88 +178,4 @@ function List(props) {
|
|||
);
|
||||
}
|
||||
|
||||
const ForceTerminationModalComponent = (props) => {
|
||||
const [form] = FormBuilder.useForm();
|
||||
|
||||
const onSubmit = async () => {
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open
|
||||
title="强制关闭"
|
||||
maskClosable={false}
|
||||
onCancel={props.onCancel}
|
||||
onOk={form.submit}
|
||||
width={600}
|
||||
confirmLoading={props.eightwork.eightworkLoading}
|
||||
>
|
||||
<div>
|
||||
<div>请确认是否强制关闭作业票？</div>
|
||||
<FormBuilder
|
||||
style={{ width: "100%", marginTop: "10px" }}
|
||||
span={24}
|
||||
labelCol={{ span: 10 }}
|
||||
options={[
|
||||
{ name: "todo", label: "强制关闭原因", render: FORM_ITEM_RENDER_ENUM.TEXTAREA },
|
||||
]}
|
||||
form={form}
|
||||
showActionButtons={false}
|
||||
onFinish={onSubmit}
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
function FlowModalComponent(props) {
|
||||
const [flowNodes, setFlowNodes] = useState([]);
|
||||
const [flowEdges, setFlowEdges] = useState([]);
|
||||
|
||||
const getData = async () => {
|
||||
const { data } = await props["eightworkTaskLogFlowChart"]({ workId: props.id });
|
||||
const { nodes, edges } = getFlowData(data);
|
||||
setFlowNodes(nodes);
|
||||
setFlowEdges(edges);
|
||||
};
|
||||
|
||||
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 }}>
|
||||
<ReactFlow
|
||||
nodes={flowNodes}
|
||||
edges={flowEdges}
|
||||
fitView
|
||||
preventScrolling={false}
|
||||
connectionMode="loose"
|
||||
zoomOnScroll={true}
|
||||
zoomOnPinch={true}
|
||||
panOnScroll={true}
|
||||
panOnScrollSpeed={0.5}
|
||||
proOptions={{ hideAttribution: true }}
|
||||
>
|
||||
</ReactFlow>
|
||||
</div>
|
||||
</ReactFlowProvider>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const ForceTerminationModal = Connect([NS_EIGHTWORK], true)(ForceTerminationModalComponent);
|
||||
const FlowModal = Connect([NS_EIGHTWORK], true)(FlowModalComponent);
|
||||
export default Connect([NS_EIGHTWORK], true)(List);
|
||||
|
|
|
|||
Loading…
Reference in New Issue