refactor(hotwork): 重构作业列表组件结构

- 将流程图模态框组件拆分为独立的 FlowModal 组件
- 将强制终止模态框组件拆分为独立的 ForceTerminationModal 组件

src/components/FlowModal/index.js

@@ -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);

src/components/ForceTerminationModal/index.js

@@ -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);

src/pages/Container/Enterprise/HotWork/Homework/List/index.js

@@ -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);