feat: 任务详情返回时工作台tab自动切换到任务列表，输出路径跳转和样式优化

src/components/mui/Tabs.tsx

@@ -12,7 +12,8 @@ import { useState, useMemo, useEffect } from "react";
 import { Box } from "@mui/system";
 import Tab from "@mui/material/Tab";
 import { TabContext, TabList, TabPanel } from "@mui/lab";
-import { Typography } from '@mui/material';
+import { Typography } from "@mui/material";
+import { useImperativeHandle } from "react";
 
 interface ITabList {
   label: string;
@@ -20,32 +21,50 @@ interface ITabList {
   component: JSX.Element;
   icon?: string;
   iconed?: string;
-  hide?: boolean
+  hide?: boolean;
 }
 
 interface IProps {
   tabList: ITabList[];
+  onRef?: any;
 }
 
 const Tabs = (props: IProps) => {
   const { tabList } = props;
-  const [value, setValue] = useState(tabList.filter(e => !e.hide)[0].value);
+  const [value, setValue] = useState(tabList.filter((e) => !e.hide)[0].value);
 
   const onChange = (val: string) => {
     setValue(val);
   };
 
+  const setActiveTab = (val: string) => {
+    onChange(val);
+  };
+
+  useImperativeHandle(props.onRef, () => {
+    return {
+      setActiveTab: setActiveTab,
+    };
+  });
+
   const labelRender = (item: ITabList, key: number) => {
     return (
       <Box style={{ display: "flex", alignItems: "center" }}>
-        {
-          item.icon ? <img style={{ width: "14px", marginRight: "10px" }} src={value === item.value ? item.iconed : item.icon} alt="" />
-            : ""
-        }
-        <Typography sx={{ fontSize: "14px", fontWeight: '400' }}  >{item.label}</Typography>
+        {item.icon ? (
+          <img
+            style={{ width: "14px", marginRight: "10px" }}
+            src={value === item.value ? item.iconed : item.icon}
+            alt=""
+          />
+        ) : (
+          ""
+        )}
+        <Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
+          {item.label}
+        </Typography>
       </Box>
-    )
-  }
+    );
+  };
 
   return (
     <TabContext value={value}>
@@ -57,7 +76,7 @@ const Tabs = (props: IProps) => {
           aria-label="lab API tabs example"
         >
           {tabList?.map((item, key) => {
-            if (item.hide) return ""
+            if (item.hide) return "";
             return (
               <Tab
                 key={key}

src/views/Project/ProjectJobDetail/index.tsx

@@ -34,6 +34,7 @@ import Flow from "../components/Flow";
 import { cancelWorkflowJob, deleteWorkflowJob } from "@/api/workbench_api";
 import { useMessage } from "@/components/MySnackbar";
 import MyPopconfirm from "@/components/mui/MyPopconfirm";
+import { storageUnitFromB } from "@/utils/util";
 
 import styles from "./index.module.css";
 
@@ -97,11 +98,16 @@ const ProjectSubmitWork = observer(() => {
     path = path.slice(13);
     if (path) {
       navigate(`/product/cadd/projectData`, {
-        state: { pathName: "path" },
+        state: { pathName: path },
       });
     }
   };
 
+  const outputPathTransform = (path: string) => {
+    path = path.slice(13);
+    return `ProjectData${path}`;
+  };
+
   const getOutouts = (outputs: any) => {
     if (outputs) {
       let result = Object.keys(outputs);
@@ -169,7 +175,9 @@ const ProjectSubmitWork = observer(() => {
       if (Array.isArray(res.data)) {
         res.data.forEach((item1) => {
           if (item1.name === item.path.slice(item.path.lastIndexOf("/") + 1)) {
-            randerOutputs[index].size = item1.size;
+            randerOutputs[index].size = `${
+              item1.size ? storageUnitFromB(Number(item1.size)) : "-"
+            }`;
             setRanderOutputs([...randerOutputs]);
           }
         });
@@ -259,7 +267,11 @@ const ProjectSubmitWork = observer(() => {
           <div className={styles.swHeaderLeft}>
             <IconButton
               color="primary"
-              onClick={() => navigate(-1)}
+              onClick={() =>
+                navigate("/product/cadd/projectWorkbench", {
+                  state: { from: "detail" },
+                })
+              }
               aria-label="upload picture"
               component="span"
               size="small"
@@ -357,7 +369,9 @@ const ProjectSubmitWork = observer(() => {
                       goToProjectData(workFlowJobInfo?.outputPath as string)
                     }
                   >
-                    {workFlowJobInfo?.outputPath || "-"}
+                    {workFlowJobInfo?.outputPath
+                      ? outputPathTransform(workFlowJobInfo?.outputPath)
+                      : "-"}
                   </div>
                 </div>
                 <div className={styles.taskInfoLi}>

src/views/Project/ProjectWorkbench/index.tsx

@@ -6,7 +6,7 @@
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import { memo, useState, useMemo, useEffect } from "react";
+import React, { memo, useState, useMemo, useEffect } from "react";
 
 import { Box } from "@mui/system";
 import { useStores } from "@/store/index";
@@ -17,76 +17,84 @@ import WorkbenchTemplate from "./workbenchTemplate";
 import WorkbenchList from "./workbenchList";
 import Tabs from "@/components/mui/Tabs";
 import usePass from "@/hooks/usePass";
+import { useLocation } from "react-router-dom";
 
-import Template from "@/assets/project/workbenchTemplate.svg"
-import Template_select from "@/assets/project/workbenchTemplate_select.svg"
-import List from "@/assets/project/workbenchList.svg"
-import List_select from "@/assets/project/workbenchList_select.svg"
-
-
+import Template from "@/assets/project/workbenchTemplate.svg";
+import Template_select from "@/assets/project/workbenchTemplate_select.svg";
+import List from "@/assets/project/workbenchList.svg";
+import List_select from "@/assets/project/workbenchList_select.svg";
 
 //ui
-import ButtonDemo from "@/views/mui_demo/button"
-import InputDemo from "@/views/mui_demo/input"
+// import ButtonDemo from "@/views/mui_demo/button";
+// import InputDemo from "@/views/mui_demo/input";
 
 const ProjectWorkbench = observer(() => {
-    const { currentProjectStore } = useStores();
-    const isPass = usePass();
+  const { currentProjectStore } = useStores();
+  const isPass = usePass();
+  const location = useLocation();
+
+  let tabsRef: any = React.createRef();
 
-    useEffect(() => {
-        console.log(isPass("PROJECT_WORKBENCH_FLOES_USE", 'USER'), "11111111111");
-        console.log(isPass("PROJECT_WORKBENCH_FLOES"), 'wwwwwwwwwww')
-    }, [])
+  useEffect(() => {
+    console.log(isPass("PROJECT_WORKBENCH_FLOES_USE", "USER"), "11111111111");
+    console.log(isPass("PROJECT_WORKBENCH_FLOES"), "wwwwwwwwwww");
+  }, []);
 
-    const tabList = useMemo(() => {
-        return [
-            {
-                label: "工作流模版",
-                value: "workbenchTemplate",
-                component: <WorkbenchTemplate />,
-                hide: !isPass("PROJECT_WORKBENCH_FLOES"),
-                icon: Template,
-                iconed: Template_select
-            },
-            {
-                label: "任务列表",
-                value: "workbenchList",
-                component: <WorkbenchList />,
-                hide: !isPass("PROJECT_WORKBENCH_JOBS"),
-                icon: List,
-                iconed: List_select
-            },
-            {
-                label: "按钮组件",
-                value: "MUI_BUTTON",
-                component: <ButtonDemo />,
-                icon: List,
-                iconed: List_select
-            },
-            {
-                label: "输入框组件",
-                value: "MUI_INPUT",
-                component: <InputDemo />,
-                icon: List,
-                iconed: List_select
-            },
-        ];
-    }, []);
+  useEffect(() => {
+    const locationInfo: any = location?.state;
+    const from = locationInfo?.from;
+    // 如果是从详情页来的，tab展示为任务列表
+    if (from === "detail") {
+      tabsRef?.current?.setActiveTab("workbenchList");
+    }
+  }, [location, tabsRef]);
 
+  const tabList = useMemo(() => {
+    return [
+      {
+        label: "工作流模版",
+        value: "workbenchTemplate",
+        component: <WorkbenchTemplate />,
+        hide: !isPass("PROJECT_WORKBENCH_FLOES"),
+        icon: Template,
+        iconed: Template_select,
+      },
+      {
+        label: "任务列表",
+        value: "workbenchList",
+        component: <WorkbenchList />,
+        hide: !isPass("PROJECT_WORKBENCH_JOBS"),
+        icon: List,
+        iconed: List_select,
+      },
+      //   {
+      //     label: "按钮组件",
+      //     value: "MUI_BUTTON",
+      //     component: <ButtonDemo />,
+      //     icon: List,
+      //     iconed: List_select,
+      //   },
+      //   {
+      //     label: "输入框组件",
+      //     value: "MUI_INPUT",
+      //     component: <InputDemo />,
+      //     icon: List,
+      //     iconed: List_select,
+      //   },
+    ];
+  }, []);
 
-    return (
-        <div style={{ padding: 24 }}>
-            <div style={{ display: "flex", alignItems: "center" }}>
-                <img src={projectImg} alt="项目logo" />
-                <span style={{ marginLeft: 12 }}>
-                    工作台
-                </span>
-            </div>
-            <Box sx={{ width: "100%", typography: "body1" }}>
-                <Tabs tabList={tabList} />
-            </Box>
-        </div>
-    );
+  return (
+    <div style={{ padding: 24 }}>
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <img src={projectImg} alt="项目logo" />
+        <span style={{ marginLeft: 12 }}>工作台</span>
+      </div>
+      <Box sx={{ width: "100%", typography: "body1" }}>
+        <Tabs onRef={tabsRef} tabList={tabList} />
+      </Box>
+    </div>
+  );
 });
 
 export default memo(ProjectWorkbench);