Skip to content

B
bkunyun
Commit b9a6c048 authored by 吴永生#A02208's avatar 吴永生#A02208
Browse files
Options

fix: 算子列表ui开发

parent 91794fa1
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 159 additions and 120 deletions
src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx
View file @ b9a6c048
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-06 17:32:50
* @LastEditTime: 2022-07-06 21:25:00
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......
src/views/WorkFlowEdit/components/OperatorList/index.module.css
View file @ b9a6c048
......@@ -2,8 +2,11 @@
background-color: #fff;
border-radius: 4px;
cursor: grab;
padding: 16px 0;
border-bottom: 1px solid #f0f2f5;
padding: 16px 16px 0 24px;
}
.dragBox {
background-color: #f5f6f7;
}
.operatorItemTitle {
user-select: none;
......@@ -29,7 +32,22 @@
padding: 2px 8px;
}
.footerBx {
.searchBox {
padding: 0 24px 16px 24px;
}
.footerBox {
display: flex;
align-items: center;
padding-bottom: 16px;
border-bottom: 1px solid #f0f2f5;
}
.operatorListBox {
height: 100%;
}
.listBox {
overflow-y: scroll;
height: calc(100% - 48px);
}
src/views/WorkFlowEdit/components/OperatorList/index.tsx
View file @ b9a6c048
import { IOperatorItemProps } from "./interface";
import { OutlinedInput } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import classNames from "classnames";
import { useCallback, useState } from "react";
import { mockData } from "./mock";
import { IOperatorItemProps } from "./interface";
import styles from "./index.module.css";
......@@ -8,20 +12,41 @@ import styles from "./index.module.css";
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-06 15:16:01
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-06 16:27:16
* @LastEditTime: 2022-07-06 21:23:19
* @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
const OperatorItem = (props: IOperatorItemProps) => {
const { info } = props;
const [isDragStyle, setIsDragStyle] = useState<boolean>(false);
/** 拖拽开始 */
const onDragStart = useCallback(() => {
setIsDragStyle(true);
}, []);
/** 拖拽结束 */
const onDragEnd = useCallback((e: React.DragEvent<HTMLDivElement>) => {
console.log(e);
setIsDragStyle(false);
}, []);
return (
<div className={styles.operatorItemBox}>
<div
className={classNames({
[styles.operatorItemBox]: true,
[styles.dragBox]: isDragStyle,
})}
draggable={true}
onDragStart={onDragStart}
onDragEnd={onDragEnd}
>
<h2 className={styles.operatorItemTitle}>说什么呢啊</h2>
<div className={styles.operatorItemText}>
STU utility
是一个R-packa标处理目标处理，目标处理目标处理标处理目标处理后期委屈好委屈农，博啊发布丢我被欺安度切换阿斯顿几切换，i的亲戚我好奇你eqeqeweqeqeeqeqeqeqeq。
</div>
<div className={styles.footerBx}>
<div className={styles.footerBox}>
<span
className={styles.labelBox}
style={{
......@@ -31,6 +56,15 @@ const OperatorItem = (props: IOperatorItemProps) => {
>
公共平台
</span>
</div>
</div>
);
};
const OperatorList = () => {
return (
<div className={styles.operatorListBox}>
<div className={styles.searchBox}>
<OutlinedInput
onChange={(e: any) => {
console.log(e.target.value);
......@@ -38,23 +72,17 @@ const OperatorItem = (props: IOperatorItemProps) => {
// value={templateName}
placeholder="输入关键词搜索"
size="small"
sx={{ flex: 1, height: 32 }}
sx={{ height: 32, width: "100%" }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/>
</div>
<div className={styles.listBox}>
{mockData.map((item) => {
return <OperatorItem key={item.id} info={item} />;
})}
</div>
</div>
);
};
const OperatorList = () => {
const arr = [222, 3333, 339];
return (
<>
{arr.map((item) => {
return <OperatorItem key={item} info={item} />;
})}
</>
);
};
export default OperatorList;
src/views/WorkFlowEdit/components/OperatorList/mock.ts 0 → 100644
View file @ b9a6c048
This diff is collapsed.
src/views/WorkFlowEdit/index.module.css
View file @ b9a6c048
.swBox {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: RGBA(247, 248, 250, 1);
overflow-y: scroll;
}
.swHeader {
z-index: 1001;
position: sticky;
top: 0;
height: 56px;
background-color: #fff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.swHeaderLeft {
display: flex;
justify-content: flex-start;
align-items: center;
}
.swContent {
display: flex;
height: calc(100vh - 56px);
}
.swFormBox {
background-color: #fff;
border-right: 1xp solid rgba(235, 237, 240, 1);
width: 360px;
overflow-y: scroll;
box-sizing: border-box;
padding: 24px;
}
.swFlowBox {
flex: 1;
height: calc(100vh - 56px);
}
\ No newline at end of file
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: RGBA(247, 248, 250, 1);
overflow-y: scroll;
}
.swHeader {
z-index: 1001;
position: sticky;
top: 0;
height: 56px;
background-color: #fff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.swHeaderLeft {
display: flex;
justify-content: flex-start;
align-items: center;
}
.swContent {
display: flex;
height: calc(100vh - 56px);
}
.swFormBox {
background-color: #fff;
border-right: 1xp solid rgba(235, 237, 240, 1);
width: 360px;
/* overflow-y: scroll; */
box-sizing: border-box;
}
.swFlowBox {
flex: 1;
height: calc(100vh - 56px);
}
src/views/WorkFlowEdit/index.tsx
View file @ b9a6c048
......@@ -2,11 +2,11 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-06 15:21:55
* @LastEditTime: 2022-07-06 18:35:24
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import React, { useState } from "react";
import React, { useState } from "react";
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import IconButton from "@mui/material/IconButton";
import { useLocation, useNavigate } from "react-router-dom";
......@@ -16,63 +16,59 @@ import ButtonComponent from "@/components/mui/Button";
import { ITemplateConfig } from "../Project/ProjectSubmitWork/interface";
import OperatorList from "./components/OperatorList";
import styles from './index.module.css'
import styles from "./index.module.css";
const WorkFlowEdit = () => {
const [templateConfigInfo, setTemplateConfigInfo] =
useState<ITemplateConfig>();
const location: any = useLocation();
const navigate = useNavigate();
const [templateConfigInfo, setTemplateConfigInfo] =
useState<ITemplateConfig>();
const location: any = useLocation();
const navigate = useNavigate();
return (
<div className={styles.swBox}>
<div className={styles.swHeader}>
<div className={styles.swHeaderLeft}>
<MyPopconfirm
title="返回后，当前页面已填写内容将不保存，确认返回吗？"
onConfirm={()=>console.log(11)}
>
<IconButton
color="primary"
// onClick={() => handleGoBack()}
aria-label="upload picture"
component="span"
size="small"
>
<ArrowBackIosNewIcon
sx={{
color: "rgba(194, 198, 204, 1)",
width: "12px",
height: "12px",
}}
/>
</IconButton>
</MyPopconfirm>
</div>
<div className={styles.swHeaderRight}>
<MyPopconfirm
title="提交前请先确认参数填写无误，确认提交吗？"
onConfirm={()=>console.log(2)}
>
<ButtonComponent
text="保存"
// click={handleSubmitForm}
></ButtonComponent>
</MyPopconfirm>
</div>
</div>
<div className={styles.swContent}>
<div className={styles.swFormBox}>
<OperatorList/>
</div>
<div className={styles.swFlowBox}>
右侧
</div>
</div>
</div>
);
return (
<div className={styles.swBox}>
<div className={styles.swHeader}>
<div className={styles.swHeaderLeft}>
<MyPopconfirm
title="返回后，当前页面已填写内容将不保存，确认返回吗？"
onConfirm={() => console.log(11)}
>
<IconButton
color="primary"
// onClick={() => handleGoBack()}
aria-label="upload picture"
component="span"
size="small"
>
<ArrowBackIosNewIcon
sx={{
color: "rgba(194, 198, 204, 1)",
width: "12px",
height: "12px",
}}
/>
</IconButton>
</MyPopconfirm>
</div>
<div className={styles.swHeaderRight}>
<MyPopconfirm
title="提交前请先确认参数填写无误，确认提交吗？"
onConfirm={() => console.log(2)}
>
<ButtonComponent
text="保存"
// click={handleSubmitForm}
></ButtonComponent>
</MyPopconfirm>
</div>
</div>
<div className={styles.swContent}>
<div className={styles.swFormBox}>
<OperatorList />
</div>
<div className={styles.swFlowBox}>右侧</div>
</div>
</div>
);
};
export default WorkFlowEdit;
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