Merge branch 'feat-20221012-environment' into 'release'

feat: 算子列表 添加缺省 页

See merge request !153

src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx

@@ -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

@@ -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

@@ -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}