Skip to content

B
bkunyun
Commit 5522d3b7 authored by chenshouchao's avatar chenshouchao
Browse files
Options

fat: 自定义算子功能交互补充

parent 7f6227f3
Hide whitespace changes
Inline Side-by-side
Showing with 144 additions and 104 deletions
src/views/CustomOperator/components/OperatorList/index.module.css
View file @ 5522d3b7
......@@ -81,3 +81,12 @@
height: 2px;
background-color: rgba(86, 92, 102, 1);
}
.loading {
display: flex;
justify-content: center;
align-items: center;
line-height: 20px;
font-size: 12px;
color: rgba(86, 92, 102, 1);
padding: 4px;
}
src/views/CustomOperator/components/OperatorList/index.tsx
View file @ 5522d3b7
......@@ -5,6 +5,7 @@ import cloneDeep from "lodash/cloneDeep";
import { getScrollLoader } from "@/utils/util";
import { useState, useCallback, useEffect } from "react";
import { getOperatorList } from "@/api/project_api";
import CircularProgress from "@mui/material/CircularProgress";
import useMyRequest from "@/hooks/useMyRequest";
import { useStores } from "@/store";
import { toJS } from "mobx";
......@@ -17,7 +18,6 @@ type IProps = {
setOperatorList: any;
};
let isInRequest = false;
const OperatorList = (props: IProps) => {
const { operatorList, setOperatorList } = props; // 流程图中流算子列表
const { currentProjectStore } = useStores();
......@@ -27,11 +27,9 @@ const OperatorList = (props: IProps) => {
const [dragItem, setDragItem] = useState<any>({}); // 拖拽的算子
const [page, setPage] = useState(0); //
const [isLastPage, setIsLastPage] = useState(false);
const { run: getOperatorListRun } = useMyRequest(getOperatorList, {
// todo 加载中 没有更多了样式
const { run: getOperatorListRun, loading } = useMyRequest(getOperatorList, {
onSuccess: (res) => {
isInRequest = false;
console.log("res", res);
let arr = res?.data?.content;
setIsLastPage(res?.data?.last);
arr.forEach((item: any, index: number) => {
......@@ -42,7 +40,7 @@ const OperatorList = (props: IProps) => {
classTypeName: "String",
defaultValue: null,
description: "",
domType: "INPUT",
domType: "dataset",
hidden: false,
isnull: false,
level: null,
......@@ -65,7 +63,7 @@ const OperatorList = (props: IProps) => {
classTypeName: "String",
defaultValue: null,
description: "",
domType: "INPUT",
domType: "dataset",
hidden: false,
isnull: false,
level: null,
......@@ -81,26 +79,20 @@ const OperatorList = (props: IProps) => {
validators: [],
});
});
setList(arr);
setList([...list, ...arr]);
// setList(res?.data?.content || []);
},
onError: () => {
isInRequest = false;
},
});
const getOperatorListFun = useCallback(
(keyword: string = "", page = 0) => {
if (isInRequest) {
return;
} else {
getOperatorListRun({
productId: productId as string,
keyword,
page,
size: 5,
});
}
getOperatorListRun({
productId: productId as string,
keyword,
page,
size: 5,
});
// size: 20 todo
},
[productId, getOperatorListRun]
);
......@@ -109,8 +101,15 @@ const OperatorList = (props: IProps) => {
getOperatorListFun();
}, [getOperatorListFun]);
const keywordChange = (e: any) => {
if (e.target.value.length <= 30) {
setKeyword(e.target.value);
}
};
const handleKeywordKeyUp = (e: any) => {
if (e.keyCode === 13) {
setList([]);
setKeyword(e.target.value);
setPage(0);
getOperatorListFun(e.target.value, 0);
......@@ -170,7 +169,7 @@ const OperatorList = (props: IProps) => {
const handleScroll = (e: any) => {
if (getScrollLoader(e)) {
console.log("加载1");
if (isInRequest || isLastPage) {
if (loading || isLastPage) {
return;
} else {
console.log("加载2");
......@@ -316,8 +315,8 @@ const OperatorList = (props: IProps) => {
<InputBase
className={styles.searchInput}
placeholder="请输入算子名称"
// value={keyword}
// onChange={keywordChange}
value={keyword}
onChange={keywordChange}
onKeyUp={handleKeywordKeyUp}
/>
</div>
......@@ -341,6 +340,19 @@ const OperatorList = (props: IProps) => {
</div>
);
})}
{!loading && (
<div className={styles.loading}>
<CircularProgress
size={12}
sx={{
color: "rgba(19, 112, 255, 1)",
marginRight: "8px",
}}
/>
加载中...
</div>
)}
{!isLastPage && <div className={styles.loading}>已经到底了</div>}
</div>
</div>
);
......
src/views/CustomOperator/components/SaveOperator/index.tsx
View file @ 5522d3b7
......@@ -2,46 +2,40 @@ import { saveUserSpec } from "@/api/workbench_api";
import MyDialog from "@/components/mui/MyDialog";
import MyInput from "@/components/mui/MyInput";
import { checkIsNumberLetterChinese } from "@/utils/util";
import _ from "lodash";
import { useState } from "react";
import useMyRequest from "@/hooks/useMyRequest";
import { saveBatchActor } from "@/api/project_api";
import { useStores } from "@/store";
import styles from "./index.module.css";
// import styles from "./index.module.css";
import { useMessage } from "@/components/MySnackbar";
import { toJS } from "mobx";
import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
interface IProps {
saveFormDialog: boolean;
setSaveFormDialog: (val: boolean) => void;
onBack?: () => void;
title: string;
setTitle: (val: string) => void;
version: string;
setVersion: (val: string) => void;
description: string;
setDescription: (val: string) => void;
creator?: string;
templateConfigInfo: ITask[];
id?: string;
operatorList: ITask[];
}
const SaveOperator = (props: IProps) => {
const {
saveFormDialog,
setSaveFormDialog,
onBack,
title,
setTitle,
version,
setVersion,
description,
setDescription,
templateConfigInfo,
creator,
id,
} = props;
const { saveFormDialog, setSaveFormDialog, operatorList } = props;
const { currentProjectStore } = useStores();
const Message = useMessage();
const productId = toJS(currentProjectStore.currentProductInfo.id);
const [title, setTitle] = useState("");
const [version, setVersion] = useState("1.0.0");
const [description, setDescription] = useState("");
// 保存批算子
const { run: saveBatchActorRun } = useMyRequest(saveBatchActor, {
onSuccess: (res) => {
Message.success("保存算子成功");
setSaveFormDialog(false);
sessionStorage.setItem("operatorList", "[]");
console.log("res", res);
},
});
const [titleHelper, setTitleHelper] = useState({
// 算子名称错误提示
error: false,
......@@ -53,14 +47,6 @@ const SaveOperator = (props: IProps) => {
helperText: "",
});
// 算子保存方法
const { run: saveUserSpecRun } = useMyRequest(saveUserSpec, {
onSuccess: (res) => {
Message.success("保存成功!");
onBack && onBack();
},
});
// 关闭表单弹窗
const handleCloseDialog = () => {
setSaveFormDialog(false);
......@@ -124,6 +110,7 @@ const SaveOperator = (props: IProps) => {
error: false,
helperText: "",
});
return true;
} else {
setVersionHelper({
error: true,
......@@ -133,28 +120,63 @@ const SaveOperator = (props: IProps) => {
}
};
// 坐标转换
const positionTransform = () => {
const copyOperatorList: ITask[] = _.cloneDeep(operatorList);
const positionXArr = copyOperatorList.map((operatorLi) => {
return operatorLi.position.x;
});
const positionYArr = copyOperatorList.map((operatorLi) => {
return operatorLi.position.y;
});
let minPositionX = Math.min(...positionXArr);
let minPositionY = Math.min(...positionYArr);
let startingPointX = minPositionX - 40;
let startingPointY = minPositionY - 10;
return copyOperatorList.map((operatorLi) => {
return {
...operatorLi,
position: {
x: operatorLi.position.x - startingPointX,
y: operatorLi.position.y - startingPointY,
},
};
});
};
// 表单弹窗确定，新建算子
const handleOncofirm = () => {
console.log(operatorList);
if (checkTitle(title) && checkVersion(version)) {
if (id) {
saveUserSpecRun({
title,
version,
description,
tasks: templateConfigInfo,
productId,
id,
creator,
});
} else {
saveUserSpecRun({
title,
version,
description,
tasks: templateConfigInfo,
productId,
});
}
saveBatchActorRun({
query: {
productId: productId as string,
batchName: title,
batchVersion: version,
description: description,
},
body: positionTransform(),
});
// operatorList
// if (id) {
// saveUserSpecRun({
// title,
// version,
// description,
// tasks: templateConfigInfo,
// productId,
// id,
// creator,
// });
// } else {
// saveUserSpecRun({
// title,
// version,
// description,
// tasks: templateConfigInfo,
// productId,
// });
// }
}
};
......@@ -165,7 +187,7 @@ const SaveOperator = (props: IProps) => {
onClose={handleCloseDialog}
onConfirm={handleOncofirm}
>
<div className={styles.saveBox}>
<div style={{ width: "388px" }}>
<MyInput
value={title}
label="算子名称"
......@@ -174,7 +196,6 @@ const SaveOperator = (props: IProps) => {
error={titleHelper.error}
helperText={titleHelper.helperText}
style={{ margin: "20px 0" }}
disabled={id ? true : false}
></MyInput>
<MyInput
value={version}
......
src/views/CustomOperator/index.tsx
View file @ 5522d3b7
......@@ -4,12 +4,9 @@ import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
import MyButton from "@/components/mui/MyButton";
import OperatorList from "./components/OperatorList";
// import Flow from "../Project/components/Flow";
import useMyRequest from "@/hooks/useMyRequest";
import { saveBatchActor } from "@/api/project_api";
import { useMessage } from "@/components/MySnackbar";
import { useStores } from "@/store";
import BatchOperatorFlow from "../Project/components/Flow/components/BatchOperatorFlow";
import { toJS } from "mobx";
import SaveOperator from "./components/SaveOperator";
import { ITask } from "../Project/ProjectSubmitWork/interface";
import _ from "lodash";
import styles from "./index.module.css";
......@@ -21,9 +18,13 @@ type IProps = {
const CustomOperator = observer((props: IProps) => {
const { setShowCustomOperator } = props;
const Message = useMessage();
const [operatorList, setOperatorList] = useState<ITask[]>([]);
const { currentProjectStore } = useStores();
const productId = toJS(currentProjectStore.currentProductInfo.id);
const sessionStorageOperatorList = JSON.parse(
sessionStorage.getItem("operatorList") || "[]"
);
const [operatorList, setOperatorList] = useState<ITask[]>(
sessionStorageOperatorList
);
const [saveFormDialog, setSaveFormDialog] = useState(false);
// const [showCustomOperator, setShowCustomOperator] = useState(false);
/** 设置选中唯一标识符 */
......@@ -32,25 +33,6 @@ const CustomOperator = observer((props: IProps) => {
// console.log(val);
}, []);
// 保存批算子
const { run: saveBatchActorRun } = useMyRequest(saveBatchActor, {
onSuccess: (res) => {
console.log("res", res);
},
});
const handleSave = useCallback(() => {
saveBatchActorRun({
query: {
productId: productId as string,
batchName: "123456",
batchVersion: "1.0.0",
description: "",
},
body: [],
});
}, [saveBatchActorRun, productId]);
// 判断 每个流算子必须至少有一条连接线。
const checkHasOneLine = (sourceArr: string[], targetArr: string[]) => {
const all = _.uniq([...sourceArr, ...targetArr]);
......@@ -124,6 +106,10 @@ const CustomOperator = observer((props: IProps) => {
return check;
};
useEffect(() => {
sessionStorage.setItem("operatorList", JSON.stringify(operatorList));
}, [operatorList]);
const handleCheck = () => {
if (operatorList.length === 0) {
Message.error("内容不能为空！");
......@@ -137,18 +123,25 @@ const CustomOperator = observer((props: IProps) => {
edge.target && targetArr.push(edge.target);
});
});
console.log("operatorList", operatorList);
console.log("sourceArr", sourceArr);
console.log("targetArr", targetArr);
if (!checkHasOneLine([...sourceArr], [...targetArr])) {
console.log("checkHasOneLine");
Message.error("内容校验未通过，请检查！");
return;
}
if (!checkIn([...targetArr])) {
console.log("checkIn");
Message.error("内容校验未通过，请检查！");
return;
}
if (!checkOut([...sourceArr])) {
console.log("checkOut");
Message.error("内容校验未通过，请检查！");
return;
}
setSaveFormDialog(true);
};
return (
......@@ -162,6 +155,11 @@ const CustomOperator = observer((props: IProps) => {
handleCheck();
}}
></MyButton>
<SaveOperator
saveFormDialog={saveFormDialog}
setSaveFormDialog={setSaveFormDialog}
operatorList={operatorList}
></SaveOperator>
</div>
<div className={styles.coContent} id="customOperatorFlow">
<OperatorList
......
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