Skip to content

B
bkunyun
Commit 68f92861 authored by wuyongsheng's avatar wuyongsheng
Browse files
Options

feat: 算子列表 添加缺省 页

parent 541e7a1e
Hide whitespace changes
Inline Side-by-side
Showing with 187 additions and 77 deletions
src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx
View file @ 68f92861
......@@ -2,7 +2,7 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-18 16:12:55
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-25 21:16:00
* @LastEditTime: 2022-10-26 13:57:17
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -31,7 +31,13 @@ import {
saveOperator,
} from "@/api/resourceCenter";
import { IOperatorAddFormData } from "../../interface";
import { checkFormData, checkParamsConfig, initCode, text } from "./utils";
import {
checkFormData,
checkParamsConfig,
editDefaultVersion,
initCode,
text,
} from "./utils";
import batchOperator from "@/assets/resourceCenter/batchOperator.svg";
import flowOperator from "@/assets/resourceCenter/flowOperator.svg";
import { useMessage } from "@/components/MySnackbar";
......@@ -79,6 +85,7 @@ const AddOperator = observer((props: IAddOperator) => {
/** 表单数据 */
const [formData, setFormData] = useState<IOperatorAddFormData>({
version: "1.0.0",
productId: defaultProduct,
});
/** 表单数据修改 */
......@@ -120,18 +127,20 @@ const AddOperator = observer((props: IAddOperator) => {
productId = "",
description = "",
envId = "",
command: newCommand,
} = res.data;
const newVersion = editDefaultVersion(version);
/** 设置表单数据 */
setFormData({
title,
type,
version,
version: newVersion,
productId,
description,
envId,
});
setCommand(Base64.decode(command));
setCommand(Base64.decode(newCommand || ""));
/** 有envId 就是基于应用环境创建的 */
if (type === "BATCH") {
......@@ -230,7 +239,11 @@ const AddOperator = observer((props: IAddOperator) => {
};
const handleSubmit = useCallback(() => {
const resultErrors = checkFormData(formData, batchBuildType);
const resultErrors = checkFormData(
formData,
batchBuildType,
detailInfo?.version || "0.99.99"
);
const paramsResultError = paramsConfigBlur();
setFormErrors(resultErrors);
......@@ -433,7 +446,7 @@ const AddOperator = observer((props: IAddOperator) => {
: "#C2C6CC",
}}
>
{formData?.description?.length}/300
{formData?.description?.length || 0}/300
</span>
</FormItemBox>
) : null}
......@@ -452,7 +465,9 @@ const AddOperator = observer((props: IAddOperator) => {
horizontal: "right",
}}
>
<span style={{ color: "#1370FF" }}>帮助手册</span>
<span style={{ color: "#1370FF", cursor: "pointer" }}>
帮助手册
</span>
</MyPopover>
</div>
<div className={style.code}>
......@@ -491,6 +506,20 @@ const AddOperator = observer((props: IAddOperator) => {
changeFormData({ description: e.target.value });
}}
/>
<span
style={{
position: "absolute",
fontSize: "14px",
bottom: "7px",
right: "12px",
color:
Number(formData?.description?.length) >= 300
? "#d32f2f"
: "#C2C6CC",
}}
>
{formData?.description?.length || 0}/300
</span>
</FormItemBox>
</div>
)}
......
src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/utils.ts
View file @ 68f92861
......@@ -2,7 +2,7 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-20 17:36:14
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-24 15:52:56
* @LastEditTime: 2022-10-26 13:56:10
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/utils.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -12,11 +12,36 @@ import { IOperatorAddFormData } from "../../interface";
type IBuildType = "ENVIRONMENT" | "OPERATOR";
export const checkFormData = (formData: IOperatorAddFormData, taskType: IBuildType)=>{
// 校验新版本号是否大于旧版本号
const checkNewOldVersion = (version: string, oldVersion: string): string => {
let versionArr: any[] = version.split(".");
let oldVersionArr: any[] = oldVersion.split(".");
versionArr = versionArr.map((item) => Number(item));
oldVersionArr = oldVersionArr.map((item) => Number(item));
if (versionArr[0] < oldVersionArr[0]) {
return "新版本号必须大于老版本号且大于等于1.0.0"
} else if (versionArr[0] === oldVersionArr[0]) {
if (versionArr[1] < oldVersionArr[1]) {
return "新版本号必须大于老版本号且大于等于1.0.0"
} else if (versionArr[1] === oldVersionArr[1]) {
if (versionArr[2] <= oldVersionArr[2]) {
return "新版本号必须大于老版本号且大于等于1.0.0"
}
}
}
return '';
}
export const checkFormData = (formData: IOperatorAddFormData, taskType: IBuildType, oldVersion: string)=>{
const reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]{1,15}$");
const result:IOperatorAddFormData = {}
const versionErr = checkNewOldVersion(formData?.version || '', oldVersion )
if(!formData?.title){
result.title = '请输入算子名称'
}
......@@ -26,6 +51,10 @@ export const checkFormData = (formData: IOperatorAddFormData, taskType: IBuildTy
if(!/^[1-9]\d?(\.(0|[1-9]\d?)){2}$/.test(formData?.version || '')){
result.version = '格式不正确,必须为X.Y.Z格式,且XYZ必须为0~99的正整数'
}
if(versionErr) {
result.version = versionErr
}
if(!formData?.version){
result.version = '请输入算子版本'
}
......@@ -39,6 +68,26 @@ export const checkFormData = (formData: IOperatorAddFormData, taskType: IBuildTy
return result
}
/** 编辑算子版本默认加0.0.1 */
export const editDefaultVersion = (version: string)=>{
let arr = version.split(".");
if (arr.length === 3) {
if (Number(arr[2]) < 99) {
arr[2] = String(Number(arr[2]) + 1);
} else {
arr[2] = "0";
if (Number(arr[1]) < 99) {
arr[1] = String(Number(arr[1]) + 1);
} else {
arr[1] = "0";
arr[0] = String(Number(arr[0]) + 1);
}
}
}
return arr.join(".")
}
/** 参数配置校验 */
export const checkParamsConfig = (val: string) => {
let result: any = []
......@@ -56,7 +105,7 @@ export const checkParamsConfig = (val: string) => {
if( item?.description > 300 ){
result.push(`description: ${item?.description}`)
}
if( !['STRING','FILE','DATASET','INT','FLOAT','DOUBLE','BOOLEAN','ARRAY_STRING','ARRAY_FILE','ARRAY_DATASET','ARRAY_INT','ARRAY_FLOAT','ARRAY_DOUBLE','ARRAY_BOOLEAN'].includes(item?.classType )){
if( !['STRING','FILE','DATASET','INT','FLOAT','DOUBLE','BOOLEAN','ARRAY_STRING','ARRAY_FILE','ARRAY_DATASET','ARRAY_INT','ARRAY_FLOAT','ARRAY_DOUBLE','ARRAY_BOOLEAN','TEXT','JSON'].includes(item?.classType )){
result.push(`classType: ${item?.classType}`)
}
if(!['true','false'].includes(String(item?.required)) ) {
......
src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
View file @ 68f92861
......@@ -2,7 +2,7 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-17 14:35:11
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-25 20:53:24
* @LastEditTime: 2022-10-26 14:05:04
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -12,6 +12,7 @@ import { observer } from "mobx-react";
import _ from "lodash";
import Add from "@mui/icons-material/Add";
import noFile from "@/assets/project/noFile.svg";
import SearchInput from "@/components/BusinessComponents/SearchInput";
import MySelect from "@/components/mui/MySelect";
import MyButton from "@/components/mui/MyButton";
......@@ -23,6 +24,7 @@ import useMyRequest from "@/hooks/useMyRequest";
import { IOperatorInfo } from "./interface";
import styles from "./index.module.css";
import MyCircularProgress from "@/components/mui/MyCircularProgress";
const WorkflowOperator = observer(() => {
const [pageType, setPageType] = useState<string>("");
......@@ -39,7 +41,7 @@ const WorkflowOperator = observer(() => {
const [list, setList] = useState<IOperatorInfo[]>();
const { run: getList } = useMyRequest(getOperatorList, {
const { run: getList, loading } = useMyRequest(getOperatorList, {
// refreshDeps: [],
onSuccess: (res) => {
console.log(res);
......@@ -71,76 +73,106 @@ const WorkflowOperator = observer(() => {
return (
<>
<div className={styles.indexBox}>
<div className={styles.headerBox}>
<div>
<SearchInput
sx={{ width: 340, marginRight: "16px" }}
placeholder="输入关键词搜索"
value={searchParams.keyword}
onKeyUp={handleKeyWordChangeKeyUp}
onChange={(e) => {
setSearchParams({ ...searchParams, keyword: e.target.value });
}}
/>
<MySelect
title="所属产品"
isTitle={true}
options={
[
<MyCircularProgress loading={loading}>
<div className={styles.indexBox}>
<div className={styles.headerBox}>
<div>
<SearchInput
sx={{ width: 340, marginRight: "16px" }}
placeholder="输入关键词搜索"
value={searchParams.keyword}
onKeyUp={handleKeyWordChangeKeyUp}
onChange={(e) => {
setSearchParams({ ...searchParams, keyword: e.target.value });
}}
/>
<MySelect
title="所属产品"
isTitle={true}
options={
[
{ label: "全部", value: "all" },
...productListStore?.productList,
] || []
}
value={searchParams.productId}
onChange={(e) => {
setSearchParams({ ...searchParams, productId: e });
}}
className={styles.searchSelectBox}
sx={{ width: "150px", height: "32px" }}
/>
<MySelect
title="环境类型"
isTitle={true}
value={searchParams.type}
onChange={(e) => {
setSearchParams({ ...searchParams, type: e });
}}
options={[
{ label: "全部", value: "all" },
...productListStore?.productList,
] || []
}
value={searchParams.productId}
onChange={(e) => {
setSearchParams({ ...searchParams, productId: e });
}}
className={styles.searchSelectBox}
sx={{ width: "150px", height: "32px" }}
/>
<MySelect
title="环境类型"
isTitle={true}
value={searchParams.type}
onChange={(e) => {
setSearchParams({ ...searchParams, type: e });
{
label: "批式",
value: "BATCH",
},
{
label: "流式",
value: "FLOW",
},
]}
sx={{ width: "150px", height: "32px" }}
/>
</div>
<MyButton
text="构建算子"
startIcon={<Add />}
onClick={() => {
setPageType("add");
setDetailsId("");
}}
options={[
{ label: "全部", value: "all" },
{
label: "批式",
value: "BATCH",
},
{
label: "流式",
value: "FLOW",
},
]}
sx={{ width: "150px", height: "32px" }}
/>
></MyButton>
</div>
<MyButton
text="构建算子"
startIcon={<Add />}
onClick={() => {
setPageType("add");
setDetailsId("");
}}
></MyButton>
</div>
<div className={styles.contentBox}>
{list?.map((item) => {
return (
<OperatorCard
setDetailsId={setDetailsId}
operatorInfo={item}
setPageType={setPageType}
{list?.length ? (
<div className={styles.contentBox}>
{list?.map((item) => {
return (
<OperatorCard
setDetailsId={setDetailsId}
operatorInfo={item}
setPageType={setPageType}
/>
);
})}
</div>
) : (
<div style={{ position: "relative" }}>
<img
src={noFile}
alt=""
style={{
position: "absolute",
top: "100px",
left: "50%",
transform: "translate(-50%, 0)",
}}
/>
);
})}
<span
style={{
position: "absolute",
top: "165px",
left: "50%",
transform: "translate(-50%, 0)",
fontSize: "14px",
lineHeight: "22px",
color: "#8a9099",
}}
>
暂无工作流算子
</span>
</div>
)}
</div>
</div>
</MyCircularProgress>
{pageType && (
<AddOperator
getList={newGetList}
......
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