Merge branch 'feat-20220705-customTemplate' into 'release'

Feat 20220705 custom template

See merge request !77

src/views/Project/ProjectJobDetail/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 20:03:56
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-04 20:19:21
+ * @LastEditTime: 2022-07-06 11:01:44
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -75,6 +75,8 @@ const ProjectSubmitWork = observer(() => {
 
   /** 获取模版数据 */
   const { run } = useMyRequest(fetchWorkFlowJob, {
+    pollingInterval:1000 * 60,
+    pollingWhenHidden:false,
     onSuccess: (res: IResponse<ITaskInfo>) => {
       getOutouts(res.data.outputs);
       setWorkFlowJobInfo(res.data);
@@ -83,6 +85,7 @@ const ProjectSubmitWork = observer(() => {
 
   useEffect(() => {
     const locationInfo: any = location?.state;
+    console.log(333)
     run({
       id: locationInfo.taskId,
     });

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

@@ -60,3 +60,16 @@
   flex: 1;
   height: calc(100vh - 56px);
 }
+
+.fullScreenBox {
+  position: absolute;
+  background-color: #fff;
+  cursor: pointer;
+  z-index: 1000;
+  right: 24px;
+  bottom: 24px;
+  padding: 8px;
+}
+.fullScreenBox:hover {
+  opacity: 0.6;
+}
\ No newline at end of file

src/views/Project/ProjectSubmitWork/index.tsx

@@ -2,31 +2,35 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 20:03:56
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-26 17:24:46
+ * @LastEditTime: 2022-07-05 18:14:13
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
+import { toJS } from "mobx";
 import React, { useEffect, useState } from "react";
-import styles from "./index.module.css";
+import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
+import IconButton from "@mui/material/IconButton";
+import _ from "lodash";
+import { useLocation, useNavigate } from "react-router-dom";
+import moment from "moment";
+
 import ConfigForm from "./ConfigForm";
 import WorkFlow from "./WorkFlow";
 import ButtonComponent from "@/components/mui/Button";
-import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
-import IconButton from "@mui/material/IconButton";
 import { ITemplateConfig } from "./interface";
-import _ from "lodash";
 import useMyRequest from "@/hooks/useMyRequest";
 import { fetchTemplateConfigInfo, submitWorkFlow } from "@/api/project_api";
-import { useLocation, useNavigate } from "react-router-dom";
 import { getCheckResult } from "./util";
 import { IResponse } from "@/api/http";
-import { templateConfigJson } from "./mock";
+import fullScreen from "@/assets/project/fullScreen.svg";
+import partialScreen from "@/assets/project/partialScreen.svg";
 import { useMessage } from "@/components/MySnackbar";
-import { toJS } from "mobx";
 import { useStores } from "@/store";
-import moment from "moment";
 import MyPopconfirm from "@/components/mui/MyPopconfirm";
 
+import styles from "./index.module.css";
+
+
 const ProjectSubmitWork = () => {
   const Message = useMessage();
   const { currentProjectStore } = useStores();
@@ -36,6 +40,8 @@ const ProjectSubmitWork = () => {
   const location: any = useLocation();
   const navigate = useNavigate();
   let configFormRef: any = React.createRef();
+  /** 是否全屏 */
+  const [fullScreenShow, setFullScreenShow] = useState<boolean>(false);
 
   // 前往工作台
   const goToWorkbench = (toWorkbenchList = false) => {
@@ -170,7 +176,7 @@ const ProjectSubmitWork = () => {
 
   return (
     <div className={styles.swBox}>
-      <div className={styles.swHeader}>
+     { fullScreenShow ? null : <div className={styles.swHeader}>
         <div className={styles.swHeaderLeft}>
           <MyPopconfirm
             title="返回后，当前页面已填写内容将不保存，确认返回吗？"
@@ -199,7 +205,7 @@ const ProjectSubmitWork = () => {
           <div className={styles.swTemplateVersionBox}>
             <span className={styles.swHeaderLable}>版本：</span>
             <span className={styles.swHeaderValue}>
-              {templateConfigInfo?.version}
+              {templateConfigInfo?.languageVersion}
             </span>
           </div>
           <div className={styles.swTemplateUpdateTimeBox}>
@@ -225,19 +231,25 @@ const ProjectSubmitWork = () => {
             ></ButtonComponent>
           </MyPopconfirm>
         </div>
-      </div>
+      </div>}
       <div className={styles.swContent}>
-        <div className={styles.swFormBox}>
+       {fullScreenShow ? null : <div className={styles.swFormBox}>
           <ConfigForm
             onRef={configFormRef}
             templateConfigInfo={templateConfigInfo}
             setParameter={setParameter}
           />
-        </div>
-        <div className={styles.swFlowBox}>
+        </div>}
+        <div className={styles.swFlowBox}  style={fullScreenShow ? { height: "100vh" } : undefined}>
           <WorkFlow templateConfigInfo={templateConfigInfo} />
         </div>
       </div>
+      <img
+        className={styles.fullScreenBox}
+        src={fullScreenShow ? partialScreen : fullScreen}
+        onClick={() => setFullScreenShow(!fullScreenShow)}
+        alt="全屏"
+      />
     </div>
   );
 };

src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx

@@ -2,18 +2,20 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-07 21:39:30
+ * @LastEditTime: 2022-07-05 18:06:17
  * @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, SetStateAction, useCallback, useEffect, useMemo, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import { Box, Typography } from "@mui/material";
-import styles from "./index.module.css";
 import OutlinedInput from "@mui/material/OutlinedInput";
 import SearchIcon from "@mui/icons-material/Search";
-import Button from "@/components/mui/Button";
+import { toJS } from "mobx";
+import { observer } from "mobx-react-lite";
 // import Button from "@mui/material/Button";
 import Add from "@mui/icons-material/Add";
+
+import Button from "@/components/mui/Button";
 import useMyRequest from "@/hooks/useMyRequest";
 import TemplateBox from "./components/templateBox"
 import SimpleDialog from "./components/simpleDialog"
@@ -25,12 +27,12 @@ import {
     getAddWorkbenchTemplate,
     addWorkbenchTemplate
 } from "@/api/workbench_api";
-import _ from "lodash";
-import { IResponse, useHttp } from "@/api/http";
-import { useStores } from "@/store";
 import usePass from "@/hooks/usePass";
-import { toJS } from "mobx";
-import { observer } from "mobx-react-lite";
+import ReactFlowEdit from '@/views/WorkFlowEdit'
+import { useStores } from "@/store";
+
+import styles from "./index.module.css";
+
 
 const ProjectMembers = observer(() => {
     const { currentProjectStore } = useStores();
@@ -101,12 +103,6 @@ const ProjectMembers = observer(() => {
         console.log('projectIdData: ', projectIdData);
     }, [projectIdData])
 
-
-    /** 点击添加工作流模版 */
-    const onAddMember = () => {
-        // setAddMemberDialog(true);
-    };
-
     /** 删除模板 */
     const deleteTemplate = () => {
         delTemplate({
@@ -241,6 +237,8 @@ const ProjectMembers = observer(() => {
                 addTemplateCallback={addTemplateCallback}
                 searchTemplateNameCallback={searchTemplateNameCallback}
             />
+            
+            {/* <ReactFlowEdit/> */}
 
             <SimpleDialog
                 text={'确认移除该模板吗？'}

src/views/WorkFlowEdit/index.module.css

+.swBox {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: RGBA(247, 248, 250, 1);
+    overflow-y: scroll;
+  }
+  .swHeader {
+    z-index: 1001;
+    position: sticky;
+    top: 0;
+    height: 56px;
+    background-color: #fff;
+    box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 24px;
+  }
+  .swHeaderLeft {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .swContent {
+    display: flex;
+    height: calc(100vh - 56px);
+  }
+  .swFormBox {
+    background-color: #fff;
+    border-right: 1xp solid rgba(235, 237, 240, 1);
+    width: 608px;
+    overflow-y: scroll;
+    box-sizing: border-box;
+    padding: 36px;
+  }
+  .swFlowBox {
+    flex: 1;
+    height: calc(100vh - 56px);
+  }
+  
\ No newline at end of file

src/views/WorkFlowEdit/index.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-21 20:03:56
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-05 16:31:28
+ * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import React, {  useState } from "react";
+import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
+import IconButton from "@mui/material/IconButton";
+import { useLocation, useNavigate } from "react-router-dom";
+
+import MyPopconfirm from "@/components/mui/MyPopconfirm";
+import ButtonComponent from "@/components/mui/Button";
+import { ITemplateConfig } from "../Project/ProjectSubmitWork/interface";
+
+import styles from './index.module.css'
+
+
+const WorkFlowEdit = () => {
+  const [templateConfigInfo, setTemplateConfigInfo] =
+    useState<ITemplateConfig>();
+  const location: any = useLocation();
+  const navigate = useNavigate();
+
+ 
+  return (
+    <div className={styles.swBox}>
+      <div className={styles.swHeader}>
+        <div className={styles.swHeaderLeft}>
+          <MyPopconfirm
+            title="返回后，当前页面已填写内容将不保存，确认返回吗？"
+            onConfirm={()=>console.log(11)}
+          >
+            <IconButton
+              color="primary"
+              // onClick={() => handleGoBack()}
+              aria-label="upload picture"
+              component="span"
+              size="small"
+            >
+              <ArrowBackIosNewIcon
+                sx={{
+                  color: "rgba(194, 198, 204, 1)",
+                  width: "12px",
+                  height: "12px",
+                }}
+              />
+            </IconButton>
+          </MyPopconfirm>
+        </div>
+        <div className={styles.swHeaderRight}>
+          <MyPopconfirm
+            title="提交前请先确认参数填写无误，确认提交吗？"
+            onConfirm={()=>console.log(2)}
+          >
+            <ButtonComponent
+              text="保存"
+              // click={handleSubmitForm}
+            ></ButtonComponent>
+          </MyPopconfirm>
+        </div>
+      </div>
+      <div className={styles.swContent}>
+        <div className={styles.swFormBox}>
+          左侧
+        </div>
+        <div className={styles.swFlowBox}>
+          右侧
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WorkFlowEdit;