Skip to content

B
bkunyun
Commit 61b7dc0e authored by wuyongsheng's avatar wuyongsheng
Browse files
Options

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

fix: 右侧点击添加锚点

See merge request sunyihao/bkunyun!79
parents 5d65b4e3 6997ea3f
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 23 deletions
src/components/mui/MyCheckBox.tsx
View file @ 61b7dc0e
/*
* @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
View file @ 61b7dc0e
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
View file @ 61b7dc0e
/*
* @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
View file @ 61b7dc0e
......@@ -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
View file @ 61b7dc0e
......@@ -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
View file @ 61b7dc0e
......@@ -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
View file @ 61b7dc0e
......@@ -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('');
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment