Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in
Toggle navigation
B
bkunyun
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Administrator
bkunyun
Commits
5522d3b7
Commit
5522d3b7
authored
Aug 08, 2022
by
chenshouchao
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fat: 自定义算子功能交互补充
parent
7f6227f3
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
144 additions
and
104 deletions
+144
-104
index.module.css
...s/CustomOperator/components/OperatorList/index.module.css
+9
-0
index.tsx
src/views/CustomOperator/components/OperatorList/index.tsx
+36
-24
index.tsx
src/views/CustomOperator/components/SaveOperator/index.tsx
+75
-54
index.tsx
src/views/CustomOperator/index.tsx
+24
-26
No files found.
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
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment