Merge branch 'feat-20220530-project' into 'staging'

Feat 20220530 project

See merge request !4

src/api/project_api.ts

@@ -37,7 +37,6 @@ type addProjectParams = {
 };
 // 新增项目
 const addProject = (params: addProjectParams) => {
-  console.log("params", params);
   return request({
     url: Api.API_PROJECT_ADD,
     method: "post",

src/views/MenuLayout/index.tsx

 import { Box, List } from "@mui/material";
-// import CurrentProject from "./CurrentProject";
 import CurrentProject from "../Project/components/CurrentProject";
 import React from "react";
 import { Outlet, useNavigate } from "react-router-dom";

src/views/Project/ProjectSetting/BaseInfo/index.module.css

+.loadingBox {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+}
 .projectInfoList {
   background-color: #fff;
   position: relative;

src/views/Project/ProjectSetting/BaseInfo/index.tsx

@@ -26,6 +26,7 @@ import LoadingButton from "@mui/lab/LoadingButton";
 import { useMessage } from "@/components/MySnackbar";
 import Loading from "@/views/Loading";
 import MyDialog from "@/components/mui/MyDialog";
+import { getProjectList } from "../../project";
 
 const reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
 
@@ -51,9 +52,11 @@ const BaseInfo = observer(() => {
     run({
       id: currentProjectStore.currentProjectInfo.id as string,
     });
-  }, [currentProjectStore, run]);
+  }, [currentProjectStore.currentProjectInfo.id, run]);
   const [zoneIdMap, setZoneIdMap] = useState<Map<string, string>>(new Map());
   const [zoneIdOptions, setZoneIdOptions] = useState<Array<zoneIdOption>>([]);
+
+  // 获取计算区信息
   const { run: getZone } = useMyRequest(hpczone, {
     onSuccess: (result: any) => {
       setZoneIdOptions(result);
@@ -64,9 +67,12 @@ const BaseInfo = observer(() => {
       setZoneIdMap(zoneMap);
     },
   });
+
   useEffect(() => {
     getZone();
   }, [getZone]);
+
+  // 项目信息展示数据转换
   const infoList = useMemo(() => {
     return [
       {
@@ -109,12 +115,16 @@ const BaseInfo = observer(() => {
   const { run: updateProjectRun, loading: updateLoading } = useMyRequest(
     updateProject,
     {
-      onSuccess: (result: any) => {
+      onSuccess: async (result: any) => {
         message.success("修改成功");
+        const projectList = await getProjectList();
+        currentProjectStore.setProjectList(projectList);
+        currentProjectStore.changeProject(projectInfo);
       },
     }
   );
 
+  // 修改项目
   const handleClickUpdate = () => {
     if (projectInfo.name) {
       if (reg.test(projectInfo.name)) {
@@ -132,14 +142,19 @@ const BaseInfo = observer(() => {
   const { run: deleteProjectRun, loading: deleteLoading } = useMyRequest(
     deleteProject,
     {
-      onSuccess: (result: any) => {
+      onSuccess: async (result: any) => {
         message.success("删除成功");
         DialogRef.current.handleClose();
+        const projectList = await getProjectList();
+        currentProjectStore.setProjectList(projectList);
+        currentProjectStore.changeProject(projectList[0]);
+        setProjectInfo(projectList[0]);
       },
     }
   );
 
   let DialogRef: any = React.createRef();
+  // 显示删除弹窗
   const handleClickDelete = () => {
     DialogRef.current.handleClickOpen();
   };
@@ -148,7 +163,8 @@ const BaseInfo = observer(() => {
     setDeleteProjectName(e.target.value);
   };
 
-  const handleSubmit = () => {
+  // 删除项目
+  const handleSubmitDelete = () => {
     if (
       deleteProjectName === toJS(currentProjectStore.currentProjectInfo.name)
     ) {
@@ -158,11 +174,17 @@ const BaseInfo = observer(() => {
     }
   };
 
-  // return <Loading></Loading>;
-  if (currentUserName === projectInfo.owner) {
+  if (loading) {
+    return (
+      <div className={style.loadingBox}>
+        <Loading />
+      </div>
+    );
+  } else if (currentUserName !== projectInfo.owner) {
+    return <InformationDisplay infoList={infoList} />;
+  } else {
     return (
       <div className={style.projectInfoList}>
-        {loading && <Loading></Loading>}
         <div className={style.projectInfoListLi}>
           <div
             className={classnames({
@@ -238,7 +260,6 @@ const BaseInfo = observer(() => {
             variant="outlined"
             className={style.updateButton}
             onClick={handleClickUpdate}
-            // style={{ backgroundColor: "#1370ff", color: "#fff" }}
             loading={updateLoading}
           >
             保存修改
@@ -263,7 +284,7 @@ const BaseInfo = observer(() => {
           </Button>
         </div>
         <MyDialog
-          handleSubmit={handleSubmit}
+          handleSubmit={handleSubmitDelete}
           onRef={DialogRef}
           title="删除项目"
           submitloading={deleteLoading}
@@ -294,12 +315,6 @@ const BaseInfo = observer(() => {
         </MyDialog>
       </div>
     );
-  } else {
-    return loading ? (
-      <Loading></Loading>
-    ) : (
-      <InformationDisplay infoList={infoList} />
-    );
   }
 });
 

src/views/Project/components/AddProject/index.tsx

@@ -4,6 +4,9 @@ import MyDialog from "@/components/mui/MyDialog";
 import React, { useState, useEffect, useImperativeHandle } from "react";
 import useMyRequest from "@/hooks/useMyRequest";
 import { hpczone, addProject } from "@/api/project_api";
+import { useMessage } from "@/components/MySnackbar";
+import { getProjectList } from "../../project";
+import { useStores } from "@/store";
 
 const reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
 
@@ -13,6 +16,8 @@ type zoneIdOption = {
 };
 
 const AddProject = (props: any) => {
+  const { currentProjectStore } = useStores();
+  const message = useMessage();
   let DialogRef: any = React.createRef();
   useImperativeHandle(props.onRef, () => {
     return {
@@ -22,6 +27,7 @@ const AddProject = (props: any) => {
 
   const [zoneId, setZoneId] = useState("");
   const [zoneIdOptions, setZoneIdOptions] = useState<Array<zoneIdOption>>([]);
+  // 设置计算区
   const { run } = useMyRequest(hpczone, {
     onSuccess: (result: any) => {
       setZoneIdOptions(result);
@@ -33,10 +39,13 @@ const AddProject = (props: any) => {
     onBefore: () => {
       setSubmitloading(true);
     },
-    onSuccess: (result: any) => {
+    onSuccess: async (result: any) => {
       if (result.data) {
         setSubmitloading(false);
         DialogRef.current.handleClose();
+        message.success("新建项目成功");
+        const projectList = await getProjectList();
+        currentProjectStore.setProjectList(projectList);
       }
     },
     onError: () => {
@@ -46,7 +55,7 @@ const AddProject = (props: any) => {
 
   useEffect(() => {
     run();
-  }, []);
+  }, [run]);
 
   const handleClickOpen = () => {
     DialogRef.current.handleClickOpen();
@@ -62,6 +71,7 @@ const AddProject = (props: any) => {
     error: false,
     help: "",
   });
+
   const checkName = (name: string) => {
     if (name) {
       if (name.length > 30) {
@@ -87,6 +97,7 @@ const AddProject = (props: any) => {
       });
     }
   };
+
   const handleNameChange = (e: any) => {
     const name = e.target.value;
     setName(name);
@@ -96,6 +107,7 @@ const AddProject = (props: any) => {
   const handleZoneIdChange = (e: any) => {
     setZoneId(e.target.value);
   };
+
   const handleDescChange = (e: any) => {
     const desc = e.target.value;
     setDesc(desc);
@@ -126,6 +138,10 @@ const AddProject = (props: any) => {
     }
   };
 
+  const handleFromBox = (e: React.SyntheticEvent) => {
+    e.nativeEvent.stopImmediatePropagation();
+  };
+
   return (
     <MyDialog
       handleSubmit={handleSubmit}
@@ -133,7 +149,7 @@ const AddProject = (props: any) => {
       title="新建项目"
       submitloading={submitloading}
     >
-      <div className={style.formBox}>
+      <div className={style.formBox} onClick={handleFromBox}>
         <TextField
           required
           error={nameCheck.error}
@@ -152,6 +168,7 @@ const AddProject = (props: any) => {
           value={zoneId}
           onChange={handleZoneIdChange}
           variant="outlined"
+          onClick={handleFromBox}
         >
           {zoneIdOptions &&
             zoneIdOptions.map((option) => (

src/views/Project/components/CurrentProject/index.tsx

@@ -4,14 +4,25 @@ import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import { Popper, Fade } from "@mui/material";
 import { useStores } from "@/store/index";
 import ProjectListPopper from "../ProjectListPopper";
-import { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
+import AddProject from "../AddProject";
 
 const CurrentProject = observer(() => {
   const { currentProjectStore } = useStores();
+  let addProjectRef: any = React.createRef();
   const [open, setOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  
+  // 结合handleShowProjectList中的event.nativeEvent.stopImmediatePropagation();实现点击空白区域隐藏项目列表
+  useEffect(()=>{
+    document.addEventListener('click', (e) => {
+      setOpen(false)
+    })
+  }, [])
+
   const handleShowProjectList = (event: React.MouseEvent<HTMLElement>) => {
+    event.nativeEvent.stopImmediatePropagation();
     setAnchorEl(event.currentTarget);
     setOpen((previousOpen) => !previousOpen);
   };
@@ -22,6 +33,11 @@ const CurrentProject = observer(() => {
     setOpen(!open);
   };
 
+  const openAddProject = () => {
+    addProjectRef.current.handleClickOpen()
+    setOpen(false)
+  }
+
   return (
     <div>
       <div
@@ -43,6 +59,7 @@ const CurrentProject = observer(() => {
           style={{ fontSize: 12 }}
         />
       </div>
+      <AddProject onRef={addProjectRef} />
       <Popper
         id={id}
         open={open}
@@ -55,6 +72,7 @@ const CurrentProject = observer(() => {
           <Fade {...TransitionProps} timeout={350}>
             <div>
               <ProjectListPopper
+                handleClickOpen={openAddProject}
                 handleChangeCurrentProject={handleChangeCurrentProject}
               />
             </div>

src/views/Project/components/ProjectListPopper/index.tsx

@@ -4,19 +4,14 @@ import { InputBase, IconButton } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import AddIcon from "@mui/icons-material/Add";
 import { useStores } from "@/store/index";
-import AddProject from "@/views/Project/components/AddProject";
 import moment from "moment";
 import React, { useMemo, useState } from "react";
 import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 
 const ProjectListPopper = observer((props: any) => {
-  const { handleChangeCurrentProject } = props;
-  let addProjectRef: any = React.createRef();
+  const { handleChangeCurrentProject, handleClickOpen } = props;
   const { currentProjectStore } = useStores();
-  const handleClickOpen = () => {
-    addProjectRef.current.handleClickOpen();
-  };
   const [name, setName] = useState("");
   const nameChange = (e: any) => {
     setName(e.target.value);
@@ -28,8 +23,12 @@ const ProjectListPopper = observer((props: any) => {
     });
   }, [currentProjectStore.projectList, name]);
 
+  const handleProjectBox = (e: React.SyntheticEvent) => {
+    e.nativeEvent.stopImmediatePropagation();
+  }
+
   return (
-    <div className={style.projectBox}>
+    <div className={style.projectBox} onClick={handleProjectBox}>
       <div className={style.searchBox}>
         <IconButton
           type="submit"
@@ -53,7 +52,6 @@ const ProjectListPopper = observer((props: any) => {
         >
           <AddIcon className={style.addIcon} />
         </IconButton>
-        <AddProject onRef={addProjectRef} />
       </div>
       <div className={style.projectlist}>
         {list.map((item: any) => {

src/views/Project/project.ts

+import { product } from "@/api/project_api"
+
+export const getProjectList = async () => {
+    const res = await product({product: "CADD",})
+    return res.data
+}
\ No newline at end of file