feat: 上传文件默认打开传输列表

src/components/mui/MyPopover.tsx

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-11 09:33:46
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-16 14:21:00
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-09-01 19:34:26
  * @FilePath: /bkunyun/src/components/mui/MyPopover.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import * as React from "react";
+import { useRef, useEffect, useState } from "react";
 import Popover, { PopoverProps } from "@mui/material/Popover";
 import Typography from "@mui/material/Typography";
 
@@ -17,10 +17,15 @@ interface IProps extends Omit<PopoverProps, "open"> {
 	children: React.ReactNode;
 	/** 显示内容 */
 	content: React.ReactNode;
+	/** 是否打开 */
+	open?: boolean;
+	/** open 修改 */
+	changeOpen: (val: boolean) => void;
 }
 
 const MyPopover = (props: IProps) => {
-	const [anchorEl, setAnchorEl] = React.useState<any | null>(null);
+	const [anchorEl, setAnchorEl] = useState<any | null>(null);
+	const ref = useRef(null);
 
 	const {
 		trigger = "click",
@@ -28,26 +33,37 @@ const MyPopover = (props: IProps) => {
 		content,
 		anchorOrigin,
 		transformOrigin,
+		open = false,
+		changeOpen,
 	} = props;
 
 	const handlePopoverOpen = (event: any) => {
+		changeOpen(true);
 		setAnchorEl(event.currentTarget);
 	};
 
 	const handelClick = (event: any) => {
+		changeOpen(true);
 		setAnchorEl(event?.currentTarget);
 	};
 
 	const handlePopoverClose = () => {
+		changeOpen(false);
 		setAnchorEl(null);
 	};
 
-	const open = Boolean(anchorEl);
+	useEffect(() => {
+		if (open) {
+			setAnchorEl(ref.current);
+		}
+	}, [open]);
+
 	const id = open ? "simple-popover" : undefined;
 
 	return (
 		<div>
 			<Typography
+				ref={ref}
 				aria-owns={id}
 				onClick={trigger === "click" ? handelClick : undefined}
 				onMouseEnter={trigger === "hover" ? handlePopoverOpen : undefined}

src/components/mui/Tabs.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-09-01 11:20:24
+ * @LastEditTime: 2022-09-01 19:34:35
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */

src/store/modules/fileList.ts

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-13 17:00:19
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-16 09:43:42
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-09-01 19:34:46
  * @FilePath: /bkunyun/src/store/modules/upload.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -25,6 +25,8 @@ class FileList {
   /** 文件上传列表 */
   fileList: IUploadInfo[] = [];
   
+  /** 是否打开传输列表 */
+  openFileList: boolean = false
 
   // setFileList (val: IUploadInfo[]) {
   //   this.fileList = val
@@ -39,6 +41,10 @@ class FileList {
     this.newFileList = val
   }
 
+  /** 打开关闭文件列表 */
+  setOpenFileList = (val: boolean) => {
+    this.openFileList = val
+  }
 
   /** 设置文件上传信息 */
   setUploadInfo = (id: string, val: IUploadInfo) => {

src/views/ConsoleLayout/components/FileItem/index.tsx

@@ -88,12 +88,12 @@ const FileItem = observer((props: IProps) => {
 
 	const speed = useMemo(() => {
 		let val = 0;
-		const time = Math.floor((itemInfo?.endTime - itemInfo.startTime) / 1000);
+		const time = Math.floor((itemInfo?.endTime - itemInfo?.startTime) / 1000);
 		if (time > 0) {
 			val = Math.floor(itemInfo?.bytesUploaded / time);
 		}
 		return val;
-	}, [itemInfo?.bytesUploaded, itemInfo?.endTime, itemInfo.startTime]);
+	}, [itemInfo?.bytesUploaded, itemInfo?.endTime, itemInfo?.startTime]);
 	return (
 		<div className={styles.itemBox}>
 			<div className={styles.leftBox}>

src/views/ConsoleLayout/index.tsx

-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
-import cx from "classnames";
 import { observer } from "mobx-react-lite";
 import Avatar from "@mui/material/Avatar";
 import { Box, Menu, MenuItem } from "@mui/material";
@@ -26,17 +25,11 @@ import {
 import style from "./index.module.css";
 
 const ConsoleLayout = observer(() => {
-	const {
-		productAnchorEl,
-		utilityAnchorEl,
-		productOpen,
-		utilityOpen,
-		handleProductClick,
-		handleUtilityClick,
-		handleClose,
-	} = useIndex();
+	const { utilityAnchorEl, utilityOpen, handleUtilityClick, handleClose } =
+		useIndex();
 
-	const { currentProjectStore } = useStores();
+	const { currentProjectStore, fileListStore } = useStores();
+	const { openFileList, setOpenFileList } = fileListStore;
 	const productInfo = toJS(currentProjectStore.currentProductInfo);
 	const { run: runGetProjectList } = useMyRequest(getProjectList, {
 		onSuccess: (res) => {
@@ -129,6 +122,8 @@ const ConsoleLayout = observer(() => {
 
 				<Box className={style.topRightBox}>
 					<MyPopover
+						open={openFileList}
+						changeOpen={(val) => setOpenFileList(val)}
 						content={<TranSferList />}
 						transformOrigin={{
 							vertical: "top",

src/views/Project/ProjectData/UpLoaderFile/index.tsx

@@ -135,6 +135,7 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
 				};
 			}) || [];
 		toJS(fileListStore?.setNewFileList)(newFileList);
+		fileListStore?.setOpenFileList(true);
 		if (newFileList?.length) {
 			getFileToken(newFileList);
 		}
@@ -173,7 +174,7 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
 	const renderButtons = (item: any, index: number) => {
 		return (
 			<MyButton
-					text='删除'
+				text="删除"
 				style={{ position: "relative", left: "-18px" }}
 				variant="text"
 				size="small"

src/views/WorkFlowEdit/components/ParameterSetting/index.tsx

 import _ from "lodash";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import classNames from "classnames";
 
 import {
@@ -36,8 +36,9 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 	const [fileSelectType, setFileSelectType] = useState<FileSelectType>("path");
 	const [parameterName, setParameterName] = useState(""); // 当前算子中的parameters中正在编辑饿parameter（参数）
 	const resizeRef = useRef<HTMLDivElement>(null);
+	const [activeParamsTab, setActiveParamsTab] = useState<string>("");
 
-	const size = useSize(resizeRef) ;
+	const size = useSize(resizeRef);
 
 	// 文件夹路线选择器弹窗
 	const handleFileSelectOnClose = () => {
@@ -497,15 +498,13 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 	}, [basisParameters, seniorParameters, hardwareParameters, randerParameters]);
 
 	// 激活的参数组tab
-	const activeParamsTab = useMemo(() => {
+	useEffect(() => {
 		if (basisParameters.length !== 0) {
-			return "basis";
+			setActiveParamsTab("basis");
 		} else if (seniorParameters.length !== 0) {
-			return "senior";
+			setActiveParamsTab("senior");
 		} else if (hardwareParameters.length !== 0) {
-			return "hardware";
-		} else {
-			return "";
+			setActiveParamsTab("hardware");
 		}
 	}, [basisParameters, seniorParameters, hardwareParameters]);
 
@@ -648,11 +647,15 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 					<Tabs
 						tabList={paramsTabList}
 						value={activeParamsTab}
-						// defaultValue={activeParamsTab}
+						onChange={(val) => setActiveParamsTab(val)}
 						allowNullValue={true}
 						tabPanelSx={{ padding: "7px 0" }}
 					/>
-					{basisParameters.length === 0 && seniorParameters.length === 0 && hardwareParameters.length === 0 && (<div className={styles.noParameters}>暂无可设置参数</div>)}
+					{basisParameters.length === 0 &&
+						seniorParameters.length === 0 &&
+						hardwareParameters.length === 0 && (
+							<div className={styles.noParameters}>暂无可设置参数</div>
+						)}
 				</div>
 			)}
 			{!taskInfo && (