fix: 右侧点击添加锚点

src/components/mui/MyCheckBox.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-05 14:00:37
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-06 13:52:48
+ * @FilePath: /bkunyun/src/components/mui/MyCheckBox.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import * as React from "react";
-import FormGroup from "@mui/material/FormGroup";
+import FormGroup, { FormGroupProps } from "@mui/material/FormGroup";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
 import FormControl from "@mui/material/FormControl";
 import FormHelperText from '@mui/material/FormHelperText';
 import _ from "lodash";
 
-type IMyCheckBoxProps = {
+interface  IMyCheckBoxProps extends FormGroupProps{
   value: Array<any>;
   options: Array<ICheckBoxOption>;
   onChange: any; // 直接返回选中项的数组
@@ -62,7 +70,7 @@ export default function MyCheckBox(props: IMyCheckBoxProps) {
 
   return (
     <FormControl fullWidth variant={variant} error={error}>
-    <FormGroup row>
+    <FormGroup {...props} row>
       {options.map((option) => {
         return (
           <FormControlLabel

src/components/mui/MyInput.tsx

-import TextField from "@mui/material/TextField";
+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-05 14:00:37
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-06 11:45:10
+ * @FilePath: /bkunyun/src/components/mui/MyInput.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import TextField, { TextFieldProps } from "@mui/material/TextField";
 
-type MyInputProps = {
+interface MyInputProps extends Omit<TextFieldProps, "value">  {
   value: any;
   inputSx?: any;
   onChange?: any;
@@ -35,9 +43,9 @@ const MyInput = (props: MyInputProps) => {
 
   return (
     <TextField
+      {...props}
       error={error}
       helperText={helperText}
-      value={value}
       sx={{ ...inputSx }}
       id={id}
       label={label}
@@ -50,6 +58,7 @@ const MyInput = (props: MyInputProps) => {
       InputProps={{
         ...InputProps,
       }}
+      value={value}
     />
   );
 };

src/components/mui/MyRadio.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-05 14:00:37
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-06 13:49:25
+ * @FilePath: /bkunyun/src/components/mui/MyRadio.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import * as React from "react";
 import Radio from "@mui/material/Radio";
-import RadioGroup from "@mui/material/RadioGroup";
+import RadioGroup, { RadioGroupProps } from "@mui/material/RadioGroup";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormControl from "@mui/material/FormControl";
 import FormHelperText from '@mui/material/FormHelperText';
 
-type IMyRadioProps = {
+interface IMyRadioProps extends RadioGroupProps {
   value: any;
   options: Array<ICheckBoxOption>;
   onChange: any;
@@ -42,6 +50,7 @@ export default function MyRadio(props: IMyRadioProps) {
   return (
     <FormControl fullWidth variant={variant} error={error}>
       <RadioGroup
+        {...props}
         row
         aria-labelledby="demo-row-radio-buttons-group-label"
         name="row-radio-buttons-group"

src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx

@@ -21,10 +21,11 @@ type ConfigFormProps = {
   templateConfigInfo?: ITemplateConfig;
   setParameter: any;
   onRef?: React.Ref<any>;
+  setSelectedNodeId: (val: string) => void;
 };
 
 const ConfigForm = (props: ConfigFormProps) => {
-  const { templateConfigInfo, setParameter } = props;
+  const { templateConfigInfo, setParameter,setSelectedNodeId } = props;
   const [name, setName] = useState<string>(""); // 任务名称
 
   const [nameHelp, setNameHelp] = useState({
@@ -185,7 +186,7 @@ const ConfigForm = (props: ConfigFormProps) => {
     setParameter(e.target.value, taskId, parameterName);
   };
 
-  const randerParameters = (parameters: Array<IParameter>, taskId: string) => {
+  const randerParameters = (parameters: Array<IParameter>, taskId: string, batchId?: string) => {
     return parameters
       .filter((parameter) => parameter.hidden === false)
       .map((parameter, parameterIndex) => {
@@ -208,6 +209,8 @@ const ConfigForm = (props: ConfigFormProps) => {
             <div className={styles.parameterContent}>
               {parameter.domType.toLowerCase() === "file" && (
                 <MyInput
+                  onFocus={()=> setSelectedNodeId(batchId || '')}
+                  onBlur={()=> setSelectedNodeId('')}
                   value={parameter.value || ""}
                   InputProps={{
                     endAdornment: (
@@ -228,6 +231,8 @@ const ConfigForm = (props: ConfigFormProps) => {
               )}
               {parameter.domType.toLowerCase() === "path" && (
                 <MyInput
+                  onFocus={()=> setSelectedNodeId(batchId || '')}
+                  onBlur={()=> setSelectedNodeId('')}
                   value={parameter.value || ""}
                   InputProps={{
                     endAdornment: (
@@ -248,6 +253,8 @@ const ConfigForm = (props: ConfigFormProps) => {
               )}
               {parameter.domType.toLowerCase() === "dataset" && (
                 <MyInput
+                  onFocus={()=> setSelectedNodeId(taskId)}
+                  onBlur={()=> setSelectedNodeId('')}
                   value={parameter.value || ""}
                   InputProps={{
                     endAdornment: (
@@ -268,6 +275,9 @@ const ConfigForm = (props: ConfigFormProps) => {
               )}
               {parameter.domType.toLowerCase() === "input" && (
                 <MyInput
+                onFocus={()=> {setSelectedNodeId(batchId || ''); console.log(batchId,'111')}}
+
+                  onBlur={()=> setSelectedNodeId('')}
                   value={parameter.value || ""}
                   onChange={(e: any) =>
                     handleParameterChange(e, taskId, parameter.name || "")
@@ -279,6 +289,8 @@ const ConfigForm = (props: ConfigFormProps) => {
               )}
               {parameter.domType.toLowerCase() === "select" && (
                 <MySelect
+                  onFocus={()=> setSelectedNodeId(batchId || '')}
+                  onBlur={()=> setSelectedNodeId('')}
                   value={parameter.value}
                   onChange={(e: any) =>
                     handleParameterChange(e, taskId, parameter.name || "")
@@ -290,6 +302,8 @@ const ConfigForm = (props: ConfigFormProps) => {
               )}
               {parameter.domType.toLowerCase() === "multipleselect" && (
                 <MySelect
+                  onFocus={()=> setSelectedNodeId(batchId || '')}
+                  onBlur={()=> setSelectedNodeId('')}
                   value={parameter.value}
                   onChange={(e: any) =>
                     handleParameterChange(e, taskId, parameter.name || "")
@@ -306,6 +320,8 @@ const ConfigForm = (props: ConfigFormProps) => {
                   onChange={(e: any) =>
                     handleParameterChange(e, taskId, parameter.name || "")
                   }
+                  onFocus={()=> setSelectedNodeId(batchId || '')}
+                  onBlur={()=> setSelectedNodeId('')}
                   options={optionsTransform(parameter.choices, "label")}
                   error={parameter.error || false}
                   helperText={parameter.helperText}
@@ -326,6 +342,8 @@ const ConfigForm = (props: ConfigFormProps) => {
                     )
                   }
                   options={optionsTransform(parameter.choices, "label")}
+                  onFocus={()=> setSelectedNodeId(batchId || '')}
+                  onBlur={()=> setSelectedNodeId('')}
                   error={parameter.error || false}
                   helperText={parameter.helperText}
                 ></MyCheckBox>
@@ -427,7 +445,7 @@ const ConfigForm = (props: ConfigFormProps) => {
                 src={jobSueIcon}
                 alt=""
               />
-              <span className={styles.backgroundTitleText}>{task.title}</span>
+              <span id={`point${task.id}`} className={styles.backgroundTitleText}>{task.title}</span>
               {task.description && (
                 <Tooltip title={task.description} placement="top">
                   <img className={styles.taskDescIcon} src={tipsIcon} alt="" />
@@ -435,7 +453,7 @@ const ConfigForm = (props: ConfigFormProps) => {
               )}
             </div>
             <div className={styles.taskConfigBox}>
-              {randerParameters(task.parameters, task.id)}
+              {randerParameters(task.parameters, task.id,  task.id)}
               {task.flows.map((flow) => {
                 return (
                   <div className={styles.flowConfigBox} key={flow.id}>
@@ -451,7 +469,7 @@ const ConfigForm = (props: ConfigFormProps) => {
                         </Tooltip>
                       )}
                     </div>
-                    {randerParameters(flow.parameters, flow.id)}
+                    {randerParameters(flow.parameters, flow.id, flow.parentNode ? flow.parentNode : flow.id )}
                   </div>
                 );
               })}

src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 15:25:25
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-27 20:50:36
+ * @LastEditTime: 2022-07-06 11:55:41
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -11,10 +11,12 @@ import { ITemplateConfig } from "../interface";
 
 interface IProps {
   templateConfigInfo?: ITemplateConfig;
+  setSelectedNodeId?: (val:string) => void;
+  selectedNodeId?: string;
 }
 const WorkFlow = (props: IProps) => {
-  const { templateConfigInfo } = props;
-  return <Flow tasks={templateConfigInfo?.tasks} />;
+  const { templateConfigInfo,setSelectedNodeId, selectedNodeId } = props;
+  return <Flow tasks={templateConfigInfo?.tasks} setSelectedNodeId={setSelectedNodeId} selectedNodeId={selectedNodeId}/>;
 };
 
 export default WorkFlow;

src/views/Project/ProjectSubmitWork/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-05 18:14:13
+ * @LastEditTime: 2022-07-06 11:55:03
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -42,6 +42,7 @@ const ProjectSubmitWork = () => {
   let configFormRef: any = React.createRef();
   /** 是否全屏 */
   const [fullScreenShow, setFullScreenShow] = useState<boolean>(false);
+  const [selectedNodeId, setSelectedNodeId] = useState<string>("");
 
   // 前往工作台
   const goToWorkbench = (toWorkbenchList = false) => {
@@ -254,10 +255,11 @@ const ProjectSubmitWork = () => {
             onRef={configFormRef}
             templateConfigInfo={templateConfigInfo}
             setParameter={setParameter}
+            setSelectedNodeId={setSelectedNodeId}
           />
         </div>}
         <div className={styles.swFlowBox}  style={fullScreenShow ? { height: "100vh" } : undefined}>
-          <WorkFlow templateConfigInfo={templateConfigInfo} />
+          <WorkFlow templateConfigInfo={templateConfigInfo} setSelectedNodeId={setSelectedNodeId} selectedNodeId={selectedNodeId}/>
         </div>
       </div>
       <img

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

@@ -30,6 +30,8 @@ interface IProps extends ReactFlowProps {
   tasks?: ITask[];
   /** 点击batch事件 */
   onBatchClick?: (val: string) => void;
+  setSelectedNodeId?: (val:string) => void;
+  selectedNodeId?: string;
 }
 
   /** 获取imgUrl */
@@ -119,8 +121,7 @@ const FlowNode = (props: any) => {
 };
 
 const Flow = (props: IProps) => {
-  const { tasks, onBatchClick } = props;
-  const [selectedNodeId, setSelectedNodeId] = useState<string>("");
+  const { tasks, onBatchClick, setSelectedNodeId, selectedNodeId } = props;
   /** 自定义的节点类型 */
   const nodeTypes = useMemo(() => {
     return { batchNode: BatchNode, flowNode: FlowNode };
@@ -271,21 +272,24 @@ const Flow = (props: IProps) => {
 
   /** flowNode点击事件 */
   const onNodeClick = (e: any, node: Node) => {
+    
     tasks?.forEach((item) => {
       if (item.id === node.id) {   
         if (item.parentNode) {
-          setSelectedNodeId(item.parentNode);
+          setSelectedNodeId && setSelectedNodeId(item.parentNode);
           onBatchClick && onBatchClick(item.parentNode);
+          document.getElementById(`point${item.parentNode}`)?.scrollIntoView(true)
         } else {
-          setSelectedNodeId(node.id);
+          setSelectedNodeId && setSelectedNodeId(node.id);
           onBatchClick && onBatchClick(node.id || "");
+          document.getElementById(`point${node.id}`)?.scrollIntoView(true)
         }
       }
     });
   };
 
   const handlePaneClick = () => {
-    setSelectedNodeId('');
+    setSelectedNodeId && setSelectedNodeId('');
     onBatchClick && onBatchClick('');
   }