Skip to content

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

feat: 批流算子新增表单联调

parent 12c2f227
Hide whitespace changes
Inline Side-by-side
Showing with 137 additions and 31 deletions
src/api/api_manager.ts
View file @ d5f78e01
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-13 09:56:57
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-19 21:14:11
* @LastEditTime: 2022-10-20 14:56:21
* @FilePath: /bkunyun/src/api/api_manager.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -55,6 +55,7 @@ const RESTAPI = {
API_ACTORENV_LIST:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/list`, // 查询用户的应用环境（算子环境）
API_ACTORENV_DELETE:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/delete`, // 删除用户算子环境
API_ACTORENV_DETAIL:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/detail`, // 查询应用环境的详情信息
API_ACTOR_ENV_OPTIONS:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/usableenv`, // 查询用户应用环境下拉
};
export default RESTAPI;
src/api/resourceCenter.ts
View file @ d5f78e01
......@@ -2,7 +2,7 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-19 17:09:23
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-20 09:26:12
* @LastEditTime: 2022-10-20 15:01:36
* @FilePath: /bkunyun/src/api/resourceCenter.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -55,7 +55,7 @@ const addActorenvBuildenv = (params: addActorenvBuildenvParams) => {
// 获取公共环境
const getActorenvList = (params: {
type: 'BATCH' | 'FLOW' | '',
type?: 'BATCH' | 'FLOW' | '',
page: number,
size: number,
title?: string,
......@@ -93,6 +93,15 @@ const getActorenvDetail = (params: {id: string}) => {
});
};
// 查询应用环境的详情信息
const getActorEnvOptions = (params: {type: string}) => {
return request({
url: `${Api.API_ACTOR_ENV_OPTIONS}`,
method: "get",
params
});
};
export {
getPublicEnv,
getPublicProject,
......@@ -101,4 +110,5 @@ export {
deleteActorenv,
getOperatorList,
getActorenvDetail,
getActorEnvOptions
};
src/components/mui/FormItemBox/index.module.css
View file @ d5f78e01
......@@ -31,7 +31,7 @@
.dynamicFormitem_helpText {
position: absolute;
bottom: -36px;
font-size: 13px;
font-size: 12px;
line-height: 1.15;
color: #9894a5;
}
......@@ -41,6 +41,6 @@
.dynamicFormitem_errorTips {
position: absolute;
bottom: -20px;
font-size: 13px;
font-size: 12px;
color: #ff4e4e;
}
src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx
View file @ d5f78e01
......@@ -2,7 +2,7 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-18 16:12:55
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-20 11:59:34
* @LastEditTime: 2022-10-20 19:44:43
* @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
*/
......@@ -13,9 +13,7 @@ import { observer } from "mobx-react";
import MyInput from "@/components/mui/MyInput";
import MySelect from "@/components/mui/MySelect";
import MyButton from "@/components/mui/MyButton";
import style from "./index.module.css";
import SwitchBatchFolw from "@/views/ResourceCenter/components/SwitchBatchFolw";
import Code from "@/components/CommonComponents/Code";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
......@@ -23,6 +21,13 @@ import BatchOperatorFlow from "@/views/Project/components/Flow/components/BatchO
import OperatorList from "@/views/CustomOperator/components/OperatorList";
import FormItemBox from "@/components/mui/FormItemBox";
import { useStores } from "@/store";
import useMyRequest from "@/hooks/useMyRequest";
import { getActorEnvOptions } from "@/api/resourceCenter";
import { IOperatorAddFormData } from "../../interface";
import style from "./index.module.css";
import { checkFormData, checkParamsConfig } from "./utils";
import { Base64 } from "js-base64";
interface IAddOperator {
pageType: string;
......@@ -45,9 +50,17 @@ const AddOperator = observer((props: IAddOperator) => {
const [inputActive, setInputActive] = useState(false);
/** 产品store */
const { productListStore } = useStores();
/** 应用环境下拉 */
const [actorEnvOptions, setActorEnvOptions] = useState([]);
/** 参数配置 */
const [code, setCode] = useState("");
// const [formData, setFormData] = useState<any>();
/** 运行脚本 */
const [command, setCommand] = useState<string>("");
/** 表单数据 */
const [formData, setFormData] = useState<IOperatorAddFormData>({});
/** 表单数据修改 */
const [formErrors, setFormErrors] = useState<IOperatorAddFormData>({});
const buildTypeList = useMemo(() => {
return [
......@@ -56,14 +69,47 @@ const AddOperator = observer((props: IAddOperator) => {
];
}, []);
/** 表单数据 */
const changeFormData = useCallback(
(val: IOperatorAddFormData) => {
setFormData({ ...formData, ...val });
},
[formData]
);
/** 获取应用环境下拉 */
const { run: fetchActorEnvOptions } = useMyRequest(getActorEnvOptions, {
onSuccess: (res: any) => {
if (res.message === "success") {
const newActorEnvOptions =
res?.data?.map((item: any) => {
return { label: item.title, value: item.id };
}) || [];
setActorEnvOptions(newActorEnvOptions);
}
},
});
useEffect(() => {
fetchActorEnvOptions({ type: taskType });
}, [fetchActorEnvOptions, taskType]);
/** 切换类型 */
const handleRadio = (val: IBuildType) => {
setBatchBuildType(val);
};
const handleSubmit = () => {
console.log(33);
};
const handleSubmit = useCallback(() => {
const paramsError = checkParamsConfig(code);
const resultErrors = checkFormData(formData, taskType);
setFormErrors(resultErrors);
if (!Object.getOwnPropertyNames(resultErrors)?.length) return;
const params = {
...formData,
command: Base64.encode(command),
};
console.log(params, 33);
}, [command, formData, taskType, code]);
return (
<div className={style.addOperatorBox}>
......@@ -100,12 +146,23 @@ const AddOperator = observer((props: IAddOperator) => {
<FormItemBox
label="算子名称"
labelClassName={style.labelClassName}
className={classNames({
[style.operatorFormItem]: formErrors?.title,
})}
itemFlex="column"
errorMessage={formErrors?.title || ""}
require
>
<MyInput
helperText="30字符以内，仅限字母、数字、中文"
helperText={
formErrors?.title ? "" : "15字符以内，仅限字母、数字、中文"
}
placeholder="请输入算子名称"
value={formData?.title}
onChange={(e) => {
if (e.target.value?.length > 15) return;
changeFormData({ title: e.target.value });
}}
/>
</FormItemBox>
<FormItemBox
......@@ -113,13 +170,20 @@ const AddOperator = observer((props: IAddOperator) => {
labelClassName={style.labelClassName}
className={style.operatorFormItem}
itemFlex="column"
errorMessage={formErrors?.version || ""}
require
>
<MyInput />
<MyInput
value={formData?.version}
onChange={(e) => {
changeFormData({ version: e.target.value });
}}
/>
</FormItemBox>
<FormItemBox
label="所属产品"
labelClassName={style.labelClassName}
errorMessage={formErrors?.productId || ""}
className={classNames({
[style.operatorFormItem]: batchBuildType === "ENVIRONMENT",
})}
......@@ -129,6 +193,10 @@ const AddOperator = observer((props: IAddOperator) => {
<MySelect
fullWidth
options={productListStore?.productList || []}
value={formData?.productId}
onChange={(e) => {
changeFormData({ productId: e });
}}
/>
</FormItemBox>
{batchBuildType === "ENVIRONMENT" ? (
......@@ -136,12 +204,17 @@ const AddOperator = observer((props: IAddOperator) => {
label="应用环境"
labelClassName={style.labelClassName}
className={style.operatorFormItem}
errorMessage={formErrors?.envId || ""}
itemFlex="column"
require
>
<MySelect
fullWidth
options={[{ label: "cadd", value: "CADD" }]}
options={actorEnvOptions || []}
value={formData?.envId}
onChange={(e) => {
changeFormData({ envId: e });
}}
/>
</FormItemBox>
) : null}
......@@ -150,8 +223,17 @@ const AddOperator = observer((props: IAddOperator) => {
label="描述"
labelClassName={style.labelClassName}
itemFlex="column"
errorMessage={formErrors?.description || ""}
>
<MyInput multiline rows={4} placeholder="请输入算子描述" />
<MyInput
multiline
rows={4}
placeholder="请输入算子描述"
value={formData?.description}
onChange={(e) => {
changeFormData({ description: e.target.value });
}}
/>
</FormItemBox>
) : null}
</div>
......@@ -162,7 +244,9 @@ const AddOperator = observer((props: IAddOperator) => {
<div className={style.code}>
<Code
value={code}
onChange={(e: string) => setCode(e)}
onChange={(e: string) => {
setCode(e);
}}
height="535px"
/>
</div>
......@@ -174,12 +258,17 @@ const AddOperator = observer((props: IAddOperator) => {
labelClassName={style.labelClassName}
className={style.operatorFormItem}
itemFlex="column"
errorMessage={formErrors?.description || ""}
>
<MyInput
style={{ width: "420px" }}
multiline
rows={10}
placeholder="请输入算子描述"
value={formData?.description}
onChange={(e) => {
changeFormData({ description: e.target.value });
}}
/>
</FormItemBox>
</div>
......@@ -192,8 +281,8 @@ const AddOperator = observer((props: IAddOperator) => {
{batchBuildType === "ENVIRONMENT" ? (
<div className={style.code}>
<Code
value={code}
onChange={(e: string) => setCode(e)}
value={command}
onChange={(e: string) => setCommand(e)}
height="350px"
/>
</div>
......@@ -221,7 +310,7 @@ const AddOperator = observer((props: IAddOperator) => {
)}
</div>
<div className={style.buttonBox}>
<MyButton text="开始构建"></MyButton>
<MyButton text="开始构建" onClick={handleSubmit} />
</div>
</div>
</div>
......
src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
View file @ d5f78e01
......@@ -2,7 +2,7 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-17 14:35:11
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-20 11:30:10
* @LastEditTime: 2022-10-20 17:11:22
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -10,6 +10,7 @@
import { useCallback, useEffect, useState } from "react";
import { observer } from "mobx-react";
import _ from "lodash";
import Add from "@mui/icons-material/Add";
import SearchInput from "@/components/BusinessComponents/SearchInput";
import MySelect from "@/components/mui/MySelect";
......@@ -18,11 +19,11 @@ import OperatorCard from "./components/OperatorCard";
import AddOperator from "./components/AddOperator";
import { useStores } from "@/store";
import { getOperatorList, IOperatorListParams } from "@/api/resourceCenter";
import styles from "./index.module.css";
import useMyRequest from "@/hooks/useMyRequest";
import { IOperatorInfo } from "./interface";
import styles from "./index.module.css";
const WorkflowOperator = observer(() => {
const [pageType, setPageType] = useState<string>("");
/** 产品store */
......@@ -119,12 +120,7 @@ const WorkflowOperator = observer(() => {
</div>
<MyButton
text="构建算子"
img={
<span
style={{ fontSize: "14px", marginRight: "8px" }}
className="iconfont icon-dianzan"
></span>
}
startIcon={<Add />}
onClick={() => setPageType("add")}
></MyButton>
</div>
......
src/views/ResourceCenter/UserResources/WorkflowOperator/interface.ts
View file @ d5f78e01
......@@ -2,7 +2,7 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-19 20:50:18
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-20 11:03:29
* @LastEditTime: 2022-10-20 19:05:27
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -19,4 +19,13 @@ export interface IOperatorInfo{
export enum operatorType {
'FLOW' = '流算子',
'BATCH' = '批算子',
}
export interface IOperatorAddFormData {
title?: string;
type?: IOperatorType;
version?: string;
productId?: string;
description?: string;
envId?: string;
}
\ No newline at end of file
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