feat: 项目管理 项目数据联调前提交

src/api/fileserver/raysyncApi.ts

@@ -104,7 +104,7 @@ const ZONEID = (params: string) => {
 };
 
 const urlToken = (filetoken: string, root?: string) => {
-  let token = getLoaclStorageOfKey("token").access_token;
+  let token = getLoaclStorageOfKey("token_key").access_token;
   let json = getLoaclStorageOfKey("current-region");
   const userInfo = getLoaclStorageOfKey("userinfo");
   if (json["location"] && json["location"] === "ON_PREMISE") {

src/components/mui/MyTreeView.tsx

-import TreeView from '@mui/lab/TreeView';
-import ArrowRightIcon from '@mui/icons-material/ArrowRight';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import TreeItem from '@mui/lab/TreeItem';
-
+import TreeView from "@mui/lab/TreeView";
+import ArrowRightIcon from "@mui/icons-material/ArrowRight";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import TreeItem from "@mui/lab/TreeItem";
 
 type MyTreeViewProps = {
-    treeData: RenderTree
-    onNodeFocus?: (event: object, value: string) => void; // 点击某一项的回调
-    onNodeSelect?: (event: object, value: Array<any> | string) => void; // 点击某一项的回调
-    onNodeToggle?: (event: object, nodeIds: Array<any>) => void; // 点击某一项的回调
-    renderLabel?: (labelNmae: string) => React.ReactNode
-    treeViewSx?: any
-}
+  treeData: RenderTree;
+  onNodeFocus?: (event: object, value: string) => void; // 点击某一项的回调
+  onNodeSelect?: (event: object, value: Array<any> | string) => void; // 点击某一项的回调
+  onNodeToggle?: (event: object, nodeIds: Array<any>) => void; // 点击某一项的回调
+  renderLabel?: (labelNmae: string) => React.ReactNode;
+  treeViewSx?: any;
+  defaultExpanded?: Array<string>;
+};
 
 interface RenderTree {
-    id: string | number;
-    name: string;
-    children?: readonly RenderTree[];
+  id: string | number;
+  name: string;
+  children?: readonly RenderTree[];
 }
 
-
 const MyTreeView = (props: MyTreeViewProps) => {
-    const {treeData, renderLabel, treeViewSx, onNodeFocus, onNodeSelect, onNodeToggle} = props
-
-    const renderTree = (nodes: RenderTree) => (
-        <TreeItem key={nodes.id} nodeId={String(nodes.id)} label={renderLabel === undefined ? nodes.name : renderLabel(nodes.name)}>
-            {Array.isArray(nodes.children)
-            ? nodes.children.map((node) => renderTree(node))
-            : null}
-        </TreeItem>
-    );
-
-    return (
-        <TreeView
-        defaultCollapseIcon={<ArrowRightIcon />}
-        defaultExpandIcon={<ArrowDropDownIcon />}
-        sx={{ treeViewSx }}
-        onNodeFocus={onNodeFocus}
-        onNodeSelect={onNodeSelect}
-        onNodeToggle={onNodeToggle}
-        >
-            {renderTree(treeData)}
-        </TreeView>
-    );
+  const {
+    treeData,
+    renderLabel,
+    treeViewSx,
+    onNodeFocus,
+    onNodeSelect,
+    onNodeToggle,
+    defaultExpanded,
+  } = props;
+
+  const renderTree = (nodes: RenderTree) => (
+    <TreeItem
+      key={nodes.id}
+      nodeId={String(nodes.id)}
+      label={renderLabel === undefined ? nodes.name : renderLabel(nodes.name)}
+    >
+      {Array.isArray(nodes.children)
+        ? nodes.children.map((node) => renderTree(node))
+        : null}
+    </TreeItem>
+  );
+
+  return (
+    <TreeView
+      defaultCollapseIcon={<ArrowRightIcon />}
+      defaultExpandIcon={<ArrowDropDownIcon />}
+      onNodeFocus={onNodeFocus}
+      onNodeSelect={onNodeSelect}
+      onNodeToggle={onNodeToggle}
+      defaultExpanded={defaultExpanded}
+      sx={{ ...treeViewSx }}
+    >
+      {renderTree(treeData)}
+    </TreeView>
+  );
 };
 
 export default MyTreeView;

src/views/Project/ProjectData/MoveFile/index.module.css

+.treeLabel {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  line-height: 44px;
+}
+.labelFolderIcon {
+  margin-right: 9px;
+}

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

+import React, { useState, useImperativeHandle } from "react";
+
+import style from "./index.module.css";
+import { TextField } from "@mui/material";
+import MyDialog from "@/components/mui/MyDialog";
+import { checkIsNumberLetterChinese } from "@/utils/util";
+import folderIcon from "@/assets/project/folderIcon.svg";
+import { useMessage } from "@/components/MySnackbar";
+import MyTreeView from "@/components/mui/MyTreeView";
+
+const MoveFile = (props: any) => {
+  const { list } = props;
+  const Message = useMessage();
+  let addFolderDialogRef: any = React.createRef();
+
+  const showDialog = () => {
+    addFolderDialogRef.current.handleClickOpen();
+  };
+
+  useImperativeHandle(props.onRef, () => {
+    return {
+      showDialog: showDialog,
+    };
+  });
+
+  const handleMoveFileSubmit = () => {
+    console.log("submit");
+  };
+
+  const renderLabel = (labelNmae: string) => {
+    return (
+      <span className={style.treeLabel}>
+        <img className={style.labelFolderIcon} src={folderIcon} alt="" />
+        {labelNmae}
+      </span>
+    );
+  };
+
+  const treeData = {
+    id: 1232,
+    name: "na567me",
+    children: [
+      {
+        id: 1232358,
+        name: "nam89e4123",
+      },
+      {
+        id: 1232395,
+        name: "nam89e32123",
+      },
+      {
+        id: 1232035,
+        name: "n2am89e123",
+      },
+    ],
+  };
+
+  const onNodeFocus = (a: any, b: any) => {
+    console.log("onNodeFocus", a, b);
+  };
+  const onNodeSelect = (a: any, b: any) => {
+    console.log("onNodeSelect", a, b);
+  };
+  const onNodeToggle = (a: any, b: any) => {
+    console.log("onNodeToggle", a, b);
+  };
+
+  const moveFileSubmitloading = false;
+  const [fileName, setFileName] = useState("");
+  const [fileNameCheck, setFileNameCheck] = useState({
+    error: false,
+    help: "",
+  });
+
+  return (
+    <MyDialog
+      handleSubmit={handleMoveFileSubmit}
+      onRef={addFolderDialogRef}
+      title="移动至"
+      submitloading={moveFileSubmitloading}
+    >
+      <MyTreeView
+        treeData={treeData}
+        renderLabel={renderLabel}
+        onNodeFocus={onNodeFocus}
+        onNodeSelect={onNodeSelect}
+        onNodeToggle={onNodeToggle}
+        defaultExpanded={[String(treeData.id)]}
+        treeViewSx={{
+          width: 400,
+        }}
+      ></MyTreeView>
+    </MyDialog>
+  );
+};
+
+export default MoveFile;

src/views/Project/ProjectData/index.module.css

@@ -88,18 +88,3 @@
   justify-content: flex-end;
   align-items: center;
 }
-
-
-
-
-
-
-.treeLabel{
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  line-height: 44px;
-}
-.labelFolderIcon{
-  margin-right: 9px;
-}
\ No newline at end of file

src/views/Project/ProjectData/index.tsx

@@ -16,12 +16,12 @@ import MyDialog from "@/components/mui/MyDialog";
 import { useMessage } from "@/components/MySnackbar";
 import { getDataFileToken } from "@/api/project_api";
 import AddFolder from "./AddFolder";
+import MoveFile from "./MoveFile";
 import UpLoaderFile from "./UpLoaderFile";
 import useMyRequest from "@/hooks/useMyRequest";
 import { observer } from "mobx-react-lite";
 import { useStores } from "@/store";
 import CloudEController from "@/api/fileserver/CloudEController";
-import MyTreeView from "@/components/mui/MyTreeView";
 // import TreeView from '@mui/lab/TreeView';
 // import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 // import ChevronRightIcon from '@mui/icons-material/ChevronRight';
@@ -72,7 +72,7 @@ const ProjectData = observer(() => {
 
   useEffect(() => {
     if (fileToken) {
-      // CloudEController.JobOutFileList(path, false, fileToken);
+      CloudEController.JobOutFileList(path, false, fileToken);
       // 老项目测试环境
       // https://fileserver.cloudam.cn/list/?username=6c8928fa719940dc964cf17a029b36c5&token=d1b07aa2-0b29-48ca-ad28-bb41af3bcbb1&filetoken=%2FMm%2BLhFrOpEDp0neVeESSD%2F45aY%3D&share=false&showhidden=false
       // 新项目本地
@@ -163,6 +163,7 @@ const ProjectData = observer(() => {
           sx={{ position: "relative", left: "-18px" }}
           variant="text"
           size="small"
+          onClick={hanleShowMoveFileDialog}
         >
           移动至
         </Button>
@@ -189,58 +190,15 @@ const ProjectData = observer(() => {
     addFolderRef.current.showDialog();
   };
 
-  const renderLabel = (labelNmae: string) => {
-    return (
-      <span className={style.treeLabel}>
-        <img className={style.labelFolderIcon} src={folderIcon} alt="" />
-        {labelNmae}</span>
-    )
-  }
+  let moveFileRef: any = React.createRef();
 
-  const treeData = {
-      id: 1232,
-      name: 'na567me',
-      children: [
-        {
-          id: 1232358,
-          name: 'nam89e4123',
-        },
-        {
-          id: 1232395,
-          name: 'nam89e32123',
-        },
-        {
-          id: 1232035,
-          name: 'n2am89e123',
-        }
-      ]
-    }
-
-    const onNodeFocus = (a: any, b: any) => {
-      console.log('onNodeFocus', a, b)
-    }
-    const onNodeSelect = (a: any, b: any) => {
-      console.log('onNodeSelect', a, b)
-    }
-    const onNodeToggle = (a: any, b: any) => {
-      console.log('onNodeToggle', a, b)
-    }
-
-    // onNodeSelect
-    // onNodeToggle
-    
-    
+  const hanleShowMoveFileDialog = () => {
+    moveFileRef.current.showDialog();
+  };
 
   return (
     <ThemeProvider theme={theme}>
       <div className={style.projectData}>
-      <MyTreeView
-        treeData={treeData}
-        renderLabel={renderLabel}
-        onNodeFocus={onNodeFocus}
-        onNodeSelect={onNodeSelect}
-        onNodeToggle={onNodeToggle}
-      ></MyTreeView>
         <div className={style.projectDataStickyTop}>
           <div className={style.projectDataTitle}>项目数据</div>
           <div className={style.projectDataHeader}>
@@ -362,6 +320,7 @@ const ProjectData = observer(() => {
           list={list}
         ></UpLoaderFile>
         <AddFolder onRef={addFolderRef} list={list}></AddFolder>
+        <MoveFile onRef={moveFileRef} list={list}></MoveFile>
       </div>
     </ThemeProvider>
   );