create

dashboard-v4/dashboard/src/components/task/ProjectTask.tsx

@@ -0,0 +1,82 @@
+
+import { Tabs } from "antd";
+
+import TaskList from "../../components/task/TaskList";
+import TaskTable from "../../components/task/TaskTable";
+import TaskRelation from "../../components/task/TaskRelation";
+import { useState } from "react";
+import { ITaskData } from "../../components/api/task";
+
+interface IWidget {
+  studioName?: string;
+  projectId?: string;
+}
+const ProjectTask = ({studioName, projectId}:IWidget) => {
+
+  const [tasks, setTasks] = useState<ITaskData[]>();
+  return (
+    <>
+      <Tabs
+        type="card"
+        items={[
+          {
+            label: "列表",
+            key: "list",
+            children: (
+              <TaskList
+                editable
+                studioName={studioName}
+                projectId={projectId}
+                onLoad={(data) => setTasks(data)}
+                onChange={(data: ITaskData[]) =>
+                  setTasks((origin) => {
+                    data.forEach((input) => {
+                      const old = origin?.find(
+                        (value) => value.id === input.id
+                      );
+                      if (old) {
+                        //找到了更新旧的
+                        origin?.forEach(
+                          (
+                            value: ITaskData,
+                            index: number,
+                            array: ITaskData[]
+                          ) => {
+                            if (value.id === input.id) {
+                              array[index] = input;
+                            }
+                          }
+                        );
+                      } else {
+                        //没有找到就添加
+                        if (origin) {
+                          origin = [...origin, input];
+                        } else {
+                          origin = [input];
+                        }
+                      }
+                    });
+
+                    return origin;
+                  })
+                }
+              />
+            ),
+          },
+          {
+            label: "表格",
+            key: "table",
+            children: <TaskTable tasks={tasks} />,
+          },
+          {
+            label: "关系图",
+            key: "relation",
+            children: <TaskRelation tasks={tasks} />,
+          },
+        ]}
+      ></Tabs>
+    </>
+  );
+};
+
+export default ProjectTask;

dashboard-v4/dashboard/src/components/task/Workflow.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import { IProjectData } from "../api/task";
+import ProjectList from "./ProjectList";
+import ProjectTask from "./ProjectTask";
+import { Modal } from "antd";
+
+interface IModal {
+  tiger?: React.ReactNode;
+  studioName?: string;
+  onSelect?: (data: IProjectData) => void;
+}
+export const WorkflowModal = ({ tiger, studioName, onSelect }: IModal) => {
+  const [open, setOpen] = useState(false);
+
+  const showModal = () => {
+    setOpen(true);
+  };
+
+  const handleOk = () => {
+    setOpen(false);
+  };
+
+  const handleCancel = () => {
+    setOpen(false);
+  };
+  return (
+    <>
+      <div onClick={() => showModal()}>{tiger}</div>
+      <Modal
+        destroyOnClose={true}
+        width={700}
+        title={""}
+        open={open}
+        onOk={handleOk}
+        onCancel={handleCancel}
+      >
+        <Workflow />
+      </Modal>
+    </>
+  );
+};
+
+interface IWidget {
+  studioName?: string;
+  onSelect?: (data: IProjectData) => void;
+}
+
+const Workflow = ({ studioName, onSelect }: IWidget) => {
+  const [projectId, setProjectId] = useState<string>();
+  return (
+    <div style={{ display: "flex" }}>
+      <div style={{ minWidth: 300, flex: 1 }}>
+        <ProjectList
+          studioName={studioName}
+          type="workflow"
+          onSelect={(data) => setProjectId(data.id)}
+        />
+      </div>
+      <div style={{ flex: 3 }}>
+        <ProjectTask studioName={studioName} projectId={projectId} />
+      </div>
+    </div>
+  );
+};
+
+export default Workflow;