Skip to content

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

Merge branch 'master' into 'staging' 

Master

See merge request !200
parents e7f7e081 2c78102d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 628 additions and 210 deletions
src/components/CommonComponents/CardTable/index.module.css
View file @ 777d07f5
......@@ -2,7 +2,5 @@
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.itemBox {
/* flex: 1; */
position: relative;
}
src/components/CommonComponents/CardTable/index.tsx
View file @ 777d07f5
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import MyCircularProgress from "@/components/mui/MyCircularProgress";
import style from "./index.module.css";
interface ICardTableProps {
......@@ -10,6 +11,7 @@ interface ICardTableProps {
horizontalSpacing?: number; // 水平方向的间隔
verticalSpacing?: number; // 垂直方向的间隔
renderBefore?: any;
loading?: boolean;
}
const CardTable = (props: ICardTableProps) => {
......@@ -22,6 +24,7 @@ const CardTable = (props: ICardTableProps) => {
verticalSpacing = 20,
itemMinWidth,
renderBefore,
loading = false,
} = props;
const [numberOfColumns, setNumberOfColumns] = useState(3);
......@@ -61,6 +64,7 @@ const CardTable = (props: ICardTableProps) => {
}}
ref={tableBoxRef}
>
<MyCircularProgress loading={loading} />
{renderBefore && renderBefore() && (
<div
className={style.itemBox}
......
src/components/CommonComponents/VirtuallyList/index.tsx
View file @ 777d07f5
import { useEffect, useState, useRef } from "react";
import MyCircularProgress from "@/components/mui/MyCircularProgress";
import { List } from "react-virtualized";
interface IVirtuallyListProps {
list: Array<any>;
renderRow: any;
rowHeight: Number | Function;
listStyle?: Object;
loading?: boolean;
onScroll?: Function;
}
const VirtuallyList = (props: IVirtuallyListProps) => {
const { list, renderRow } = props;
const {
list,
renderRow,
rowHeight,
listStyle,
loading = false,
onScroll,
} = props;
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
const virtuallyListBoxRef: any = useRef(null);
const getTableWidthHeight = () => {
setWidth(virtuallyListBoxRef?.current?.offsetWidth || 1000);
setHeight(virtuallyListBoxRef?.current?.offsetHeight || 300);
};
useEffect(() => {
getTableWidthHeight();
}, []);
window.onresize = () => {
getTableWidthHeight();
};
return (
<List
width={300}
height={300}
rowCount={list.length}
rowHeight={20}
rowRenderer={renderRow}
overscanRowCount={20}
/>
<div
ref={virtuallyListBoxRef}
style={{ width: "100%", height: "100%", position: "relative" }}
>
<MyCircularProgress loading={loading} />
<List
width={width}
height={height}
rowCount={list.length}
rowHeight={rowHeight}
rowRenderer={renderRow}
overscanRowCount={20}
style={listStyle}
onScroll={onScroll}
/>
</div>
);
};
export default VirtuallyList;
src/components/CommonComponents/VirtuallyTable/index.module.scss
View file @ 777d07f5
.VTHeader {
font-size: 12px;
line-height: 20px;
color: rgba(138, 144, 153, 1);
padding: 12px 16px;
white-space: nowrap;
font-weight: 400;
box-sizing: border-box;
display: flex;
align-items: center;
}
.VTHeaderRow {
background-color: rgba(247, 248, 250, 1);
box-sizing: border-box;
border-radius: 4px 4px 0 0;
border-bottom: 1px solid rgba(240, 242, 245, 1);
}
.VTRow {
background-color: #fff;
box-sizing: border-box;
border-bottom: 1px solid rgba(240, 242, 245, 1);
&:hover {
background-color: rgba(245, 246, 247, 1);
}
}
.VTActiveRow {
@extend .VTRow;
background-color: rgba(237, 244, 255, 1);
}
.VTRowColumn {
text-align: left;
box-sizing: border-box;
......@@ -25,5 +33,4 @@
line-height: 22px;
color: rgba(30, 38, 51, 1);
padding: 16px;
border-bottom: 1px solid rgba(240, 242, 245, 1);
}
src/components/CommonComponents/VirtuallyTable/index.tsx
View file @ 777d07f5
import React from "react";
import { useCallback, useEffect, useState, useRef, useMemo } from "react";
import { Column, Table, AutoSizer } from "react-virtualized";
import { useCallback, useEffect, useState, useRef } from "react";
import { Column, Table } from "react-virtualized";
import style from "./index.module.scss";
import "react-virtualized/styles.css"; // only needs to be imported once
import Checkbox from "@mui/material/Checkbox";
import MyCircularProgress from "@/components/mui/MyCircularProgress";
import { createTheme, ThemeProvider } from "@mui/material";
import NoData from "@/components/BusinessComponents/NoData";
import ascIcon from "@/assets/project/ascIcon.svg";
import descIcon from "@/assets/project/descIcon.svg";
import sortIcon from "@/assets/project/sort.svg";
type Order = "ASC" | "DESC"; // 升序为asc，降序为desc。
......@@ -20,24 +25,52 @@ interface IVirtuallyTableProps {
hasCheckbox?: boolean; // 是否有复选框
selectItems?: Array<any>; // 选中的项
setSelectItems?: any; // 设置选中的项
// fixedHead?: boolean; // 是否是固定表头
noDataText?: string; // 无数据提示文案
// hasTableFooter?: boolean; // 是否有分页组件
// page?: number; // 当前页
// pageChange?: any; // 页码改变
// count?: number; // 总页数
// totalElements?: number; // 数据总量 不止是列表渲染的长度
sortState?: sortState; // 排序状态
setSortState?: any; // 设置排序状态
// paginationType?: "simple" | "complex"; // 分页组件的类型 simple简洁式 complex复杂、带每页数量切换、总数等
// rowsPerPage?: number; // 每页多少条数据
// handleChangeRowsPerPage?: any; // 每页多少条数据变化
nodataText?: any; // 无数据文案
handleRow?: any; // 点击一行
activeId?: string; // 选中的一行的id
disableFn?: any; // 禁用时根据disableFn来判断是否禁用
headerHeight?: number; // 表头高度
}
const theme = createTheme({
components: {
// 复选框样式
MuiSvgIcon: {
styleOverrides: {
root: {
color: "rgba(209, 214, 222, 1)",
fontSize: "18px",
},
},
},
MuiCheckbox: {
styleOverrides: {
root: {
color: "rgba(209, 214, 222, 1)",
"&.MuiCheckbox-indeterminate .MuiSvgIcon-root": {
color: "rgba(19, 112, 255, 1)",
},
"&.Mui-checked .MuiSvgIcon-root": {
color: "rgba(19, 112, 255, 1)",
},
},
},
},
MuiButtonBase: {
styleOverrides: {
root: {
"&.MuiCheckbox-root": {
padding: 0,
},
},
},
},
},
});
const VirtuallyTable = (props: IVirtuallyTableProps) => {
const {
rows,
......@@ -53,10 +86,10 @@ const VirtuallyTable = (props: IVirtuallyTableProps) => {
handleRow,
activeId,
disableFn,
headerHeight = 59,
} = props;
const virtuallyTableBoxRef: any = useRef(null);
const virtuallyTableRef: any = useRef(null);
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
......@@ -74,53 +107,217 @@ const VirtuallyTable = (props: IVirtuallyTableProps) => {
getTableWidthHeight();
};
const onSelectAllClick = useCallback(
(e: any) => {
if (e.target.checked) {
setSelectItems && setSelectItems(rows.map((row) => row[tableKey]));
} else {
setSelectItems && setSelectItems([]);
}
},
[setSelectItems, tableKey, rows]
);
const onSelectRowClick = useCallback(
(e: any, itemValue: string) => {
if (e.target.checked) {
setSelectItems && setSelectItems([...selectItems, itemValue]);
} else {
const selectItemIndex = selectItems.indexOf(itemValue);
const newSelectItems = [
...selectItems.slice(0, selectItemIndex),
...selectItems.slice(selectItemIndex + 1, selectItems.length),
];
setSelectItems && setSelectItems(newSelectItems);
}
},
[selectItems, setSelectItems]
);
const handleSort = useCallback(
(field: string) => {
if (sortState?.field === field) {
if (sortState?.order === "ASC") {
setSortState({
field,
order: "DESC",
});
} else if (sortState?.order === "DESC") {
setSortState({
field,
order: "ASC",
});
} else {
setSortState({
field,
order: "DESC",
});
}
} else {
setSortState({
field,
order: "DESC",
});
}
},
[sortState, setSortState]
);
const handleRowFn = useCallback(
(row: any) => {
if (!disableFn) {
handleRow && handleRow(row);
} else {
!disableFn(row) && handleRow && handleRow(row);
}
},
[disableFn, handleRow]
);
return (
<div
ref={virtuallyTableBoxRef}
style={{ width: "100%", height: "100%", position: "relative" }}
>
<MyCircularProgress loading={loading} />
{width && height && (
<Table
ref={virtuallyTableRef}
width={width}
height={height}
headerHeight={59}
rowHeight={54}
rowCount={rows.length}
rowGetter={({ index }: any) => rows[index]}
headerClassName={style.VTHeader}
rowClassName={({ index }: any) => {
if (index < 0) {
return style.VTHeaderRow;
} else {
return style.VTRow;
}
}}
>
{headCells.map((headCell) => {
console.log(headCell.cellRenderer);
return (
<Column
key={headCell.id}
label={headCell.label}
dataKey={headCell.id}
width={headCell.width}
flexGrow={headCell.flexGrow || 0}
cellRenderer={
headCell.cellRenderer
? headCell.cellRenderer
: (data: any) => {
return data.cellData;
}
<ThemeProvider theme={theme}>
<div
ref={virtuallyTableBoxRef}
style={{ width: "100%", height: "100%", position: "relative" }}
>
<MyCircularProgress loading={loading} />
{width && height && (
<Table
width={width}
height={height}
headerHeight={headerHeight}
rowHeight={54}
rowCount={rows.length}
rowGetter={({ index }: any) => rows[index]}
headerClassName={style.VTHeader}
onRowClick={(data: any) => {
handleRowFn(data.rowData);
}}
rowClassName={({ index }: any) => {
if (index < 0) {
return style.VTHeaderRow;
} else {
if (rows[index][tableKey] === activeId) {
return style.VTActiveRow;
} else {
return style.VTRow;
}
}
}}
rowStyle={({ index }: any) => {
if (index !== -1) {
return {
background:
activeId === rows[index][tableKey]
? "rgba(237, 244, 255, 1)"
: "",
cursor: disableFn && disableFn(rows[index]) ? "no-drop" : "",
opacity: disableFn && disableFn(rows[index]) ? "0.3" : "",
};
}
}}
>
{hasCheckbox && (
<Column
dataKey="checkbox"
headerRenderer={() => {
return (
<Checkbox
indeterminate={
selectItems.length > 0 &&
selectItems.length < rows.length
}
checked={
rows.length > 0 && selectItems.length === rows.length
}
onChange={(e) => onSelectAllClick(e)}
/>
);
}}
headerStyle={{ margin: 0 }}
style={{ margin: 0 }}
width={50}
cellRenderer={(data: any) => {
return (
<Checkbox
checked={
selectItems.filter(
(selectItem) => selectItem === data.rowData[tableKey]
).length > 0
}
onChange={(e) =>
onSelectRowClick(e, data.rowData[tableKey])
}
/>
);
}}
className={style.VTRowColumn}
/>
);
})}
</Table>
)}
</div>
)}
{headCells.map((headCell) => {
return (
<Column
key={headCell.id}
// label={headCell.label}
headerRenderer={(data: any) => {
if (headCell.sort) {
return (
<div>
<span>{headCell.label}</span>
<img
src={
sortState?.field === headCell.id
? sortState?.order === "ASC"
? ascIcon
: sortState?.order === "DESC"
? descIcon
: sortIcon
: sortIcon
}
alt=""
onClick={() => handleSort(headCell.id)}
style={{
marginLeft: "8px",
cursor: "pointer",
position: "relative",
top: "3px",
}}
/>
</div>
);
} else {
return headCell.label;
}
}}
dataKey={headCell.id}
width={headCell.width}
flexGrow={headCell.flexGrow || 0}
cellRenderer={
headCell.cellRenderer
? headCell.cellRenderer
: (data: any) => {
return data.cellData;
}
}
className={style.VTRowColumn}
/>
);
})}
</Table>
)}
{rows.length === 0 && (
<NoData
text={nodataText}
noDataBoxStyle={{
position: "absolute",
bottom: 0,
width: `${width}px`,
height: `${height - headerHeight}px`,
}}
/>
)}
</div>
</ThemeProvider>
);
};
......
src/components/CommonComponents/VrituallyCardTable/index.module.scss 0 → 100644
View file @ 777d07f5
.tableBox {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
height: 100%;
position: relative;
}
src/components/CommonComponents/VrituallyCardTable/index.tsx 0 → 100644
View file @ 777d07f5
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import VirtuallyList from "../VirtuallyList";
import style from "./index.module.scss";
interface IVrituallyCardTableProps {
data: Array<any>; // 列表数据
renderItem: any; // 单个卡片的渲染函数 这里面的元素的boxSizing属性最好是"border-box",
rowHeight: number; // 行高 这个属性的高度最好是itemHeight + verticalSpacing
itemMinWidth?: number; // 单个卡片的最小宽度，有这个参数时numberOfColumns参数失效，效果为根据屏幕大小和单个卡片的最小宽度来适配每行渲染个数
tableKey?: string; // 表格数据的key
numberOfColumns?: number; // 列数 每行渲染几个
horizontalSpacing?: number; // 水平方向的间隔
verticalSpacing?: number; // 垂直方向的间隔
loading?: boolean;
}
const VrituallyCardTable = (props: IVrituallyCardTableProps) => {
const {
data,
renderItem,
tableKey = "id",
rowHeight,
numberOfColumns: propsNumberOfColumns = 3,
horizontalSpacing = 20,
verticalSpacing = 20,
itemMinWidth,
loading = false,
} = props;
const [numberOfColumns, setNumberOfColumns] = useState(3);
const tableBoxRef: any = useRef(null);
const getNumberOfColumns = useCallback(() => {
if (itemMinWidth) {
const boxWidth = tableBoxRef?.current?.offsetWidth;
if (boxWidth) {
setNumberOfColumns(Math.floor(boxWidth / itemMinWidth));
} else {
setNumberOfColumns(propsNumberOfColumns);
}
} else {
setNumberOfColumns(propsNumberOfColumns);
}
}, [itemMinWidth, propsNumberOfColumns]);
useEffect(() => {
getNumberOfColumns();
}, [getNumberOfColumns]);
const boxWidth = useMemo(() => {
return `${100 / numberOfColumns}%`;
}, [numberOfColumns]);
window.onresize = () => {
getNumberOfColumns();
};
const listData = useMemo(() => {
let resData: any = [[]];
data.forEach((item) => {
if (resData[resData.length - 1].length >= numberOfColumns) {
resData.push([item]);
} else {
resData[resData.length - 1].push(item);
}
});
return resData;
}, [numberOfColumns, data]);
const renderRow = ({
index,
isScrolling,
isVisible,
key,
parent,
style,
}: any) => {
return (
<div key={key} style={style}>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
boxSizing: "border-box",
height: "100%",
}}
>
{listData[index].map((item: any, index: number) => {
return (
<div
className={style.itemBox}
key={item[tableKey] ? item[tableKey] : index}
style={{
width: boxWidth,
paddingLeft: `${horizontalSpacing / 2}px`,
paddingRight: `${horizontalSpacing / 2}px`,
paddingBottom: `${verticalSpacing}px`,
boxSizing: "border-box",
}}
>
{renderItem(item, index)}
</div>
);
})}
</div>
</div>
);
};
return (
<div
className={style.tableBox}
style={{
marginLeft: `-${horizontalSpacing / 2}px`,
marginRight: `-${horizontalSpacing / 2}px`,
width: `calc(100% + ${horizontalSpacing}px)`,
}}
ref={tableBoxRef}
>
<VirtuallyList
list={listData}
renderRow={renderRow}
rowHeight={rowHeight}
loading={loading}
></VirtuallyList>
</div>
);
};
export default VrituallyCardTable;
src/components/mui/MyMuiTable.tsx 0 → 100644
View file @ 777d07f5
This diff is collapsed.
src/components/mui/MyTableNew.tsx
View file @ 777d07f5
This diff is collapsed.
src/views/Project/ProjectData/index.module.css
View file @ 777d07f5
......@@ -11,7 +11,7 @@
box-sizing: border-box;
}
.projectDataStickyTopPadding {
padding: 22px 24px 24px;
padding: 22px 24px 64px;
}
.projectDataTitle {
font-size: 18px;
......@@ -26,7 +26,7 @@
.tableBox {
/* flex: 1; */
height: calc(100% - 146px);
height: calc(100% - 140px);
}
.projectDataButtonAndSearch {
display: flex;
......
src/views/Project/ProjectData/index.tsx
View file @ 777d07f5
......@@ -271,18 +271,6 @@ const ProjectData = observer(() => {
}
};
// table配置
const versionsHeadCells = [
{ id: "name", label: "名称" },
{ id: "size", label: "大小", width: 200 },
{
id: "mtime",
label: "创建时间",
width: 200,
},
{ id: "caozuo", label: "操作", width: 200 },
];
// 文件夹下钻
const handleViewFolders = (item: any) => {
if (debounce) {
......@@ -304,52 +292,54 @@ const ProjectData = observer(() => {
};
// table配置
const renderName = (item: any) => {
if (item.type === "directory") {
const renderName = (data: any) => {
if (data.rowData.type === "directory") {
return (
<span
className={classnames({
[style.folderIconBox]: true,
[style.pointer]: true,
})}
onClick={() => handleViewFolders(item)}
onClick={() => handleViewFolders(data.rowData)}
>
<img className={style.folderIcon} src={folderIcon} alt="" />
{item.name}
{data.rowData.name}
</span>
);
} else if (item.type === "dataSet") {
} else if (data.rowData.type === "dataSet") {
return (
<span
className={classnames({
[style.folderIconBox]: true,
[style.pointer]: true,
})}
onClick={() => handleSeeDataset(item)}
onClick={() => handleSeeDataset(data.rowData)}
>
<img className={style.folderIcon} src={dataSetIcon} alt="" />
{item.name}
{data.rowData.name}
</span>
);
} else {
return (
<span className={style.folderIconBox}>
<img className={style.folderIcon} src={fileIcon} alt="" />
{item.name}
{data.rowData.name}
</span>
);
}
};
const renderSize = (item: any) => {
if (item.type === "dataSet") {
return `${item.size}条`;
const renderSize = (data: any) => {
if (data.rowData.type === "dataSet") {
return `${data.rowData.size}条`;
}
return `${item.size ? storageUnitFromB(Number(item.size)) : "-"}`;
return `${
data.rowData.size ? storageUnitFromB(Number(data.rowData.size)) : "-"
}`;
};
const renderMtime = (item: any) => {
return String(moment(item.mtime).format("YYYY-MM-DD HH:mm:ss"));
const renderMtime = (data: any) => {
return String(moment(data.rowData.mtime).format("YYYY-MM-DD HH:mm:ss"));
};
const renderButtons = (item: any) => {
const renderButtons = (data: any) => {
return (
<span style={{ whiteSpace: "nowrap" }}>
{!isAllDirectory && (
......@@ -362,14 +352,15 @@ const ProjectData = observer(() => {
height: "22px",
padding: "0 10px",
visibility:
item.type !== "dataSet" && item.type !== "directory"
data.rowData.type !== "dataSet" &&
data.rowData.type !== "directory"
? "visible"
: "hidden",
}}
variant="text"
size="medium"
disabled={selectIds.length > 0 || !isPass("PROJECT_DATA_DOWNLOAD")}
onClick={() => hanleDownloadFile(item)}
onClick={() => hanleDownloadFile(data.rowData)}
/>
)}
<MyButton
......@@ -384,7 +375,7 @@ const ProjectData = observer(() => {
variant="text"
size="medium"
onClick={() => {
setCurrentOperateFile(item);
setCurrentOperateFile(data.rowData);
setMoveDialogOpen(true);
}}
disabled={
......@@ -405,7 +396,7 @@ const ProjectData = observer(() => {
size="medium"
color="error"
onClick={() => {
setCurrentOperateFile(item);
setCurrentOperateFile(data.rowData);
setDeleteDialogOpen(true);
}}
disabled={
......@@ -416,6 +407,25 @@ const ProjectData = observer(() => {
);
};
// table配置
const versionsHeadCells = [
{
id: "name",
label: "名称",
width: 200,
flexGrow: 2,
cellRenderer: renderName,
},
{ id: "size", label: "大小", width: 200, cellRenderer: renderSize },
{
id: "mtime",
label: "创建时间",
width: 200,
cellRenderer: renderMtime,
},
{ id: "caozuo", label: "操作", width: 200, cellRenderer: renderButtons },
];
// 下载文件
const hanleDownloadFile = (item: any) => {
const downloadPath =
......@@ -590,18 +600,13 @@ const ProjectData = observer(() => {
</div>
<div className={style.tableBox}>
<MyTable
isVirtuallyTable={true}
fixedHead={true}
hasCheckbox={showCheckBox}
headCells={versionsHeadCells}
selectItems={selectIds}
setSelectItems={setSelectIds}
rows={showList.map((item: any, index: number) => ({
...item,
name: renderName(item),
size: renderSize(item),
mtime: renderMtime(item),
caozuo: renderButtons(item),
}))}
rows={showList}
/>
</div>
</div>
......
src/views/Project/ProjectSetting/ProjectMembers/components/AddMember.tsx
View file @ 777d07f5
......@@ -174,7 +174,7 @@ const AddMember = observer((props: IProps) => {
setProjectMember(e.target.value);
}
}}
placeholder="搜索项目成员"
placeholder="按回车搜索项目成员"
sx={{ mb: 2 }}
/>
<div style={{ height: "320px" }}>
......
src/views/Project/components/Flow/components/BatchNode/index.tsx
View file @ 777d07f5
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-12 11:20:29
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-09-07 10:06:13
* @LastEditTime: 2022-11-10 17:40:11
* @FilePath: /bkunyun/src/views/Project/components/Flow/components/BatchNode.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -73,7 +73,7 @@ const BatchNode = (props: IBatchNode) => {
? "1px solid #FF4E4E"
: "1px solid #fff",
left: index * 24 + 20,
top: '-47px',
top: isFlowNode ? '-47px' : '-3px',
}}
type="target"
position={Position.Top}
......
src/views/Project/components/Flow/index.tsx
View file @ 777d07f5
......@@ -269,22 +269,23 @@ const Flow = (props: IProps) => {
positionYArr.sort((a, b) => {
return a - b;
});
const initialHeight = isFlowNode(value.id) ? 66 : 12;
let width = 176,
height = 12;
height = initialHeight
if (positionXArr?.length) {
const val = positionXArr[positionXArr.length - 1] + 144;
width = val > 176 ? val : width;
}
if (positionYArr?.length) {
const val = positionYArr[positionYArr.length - 1] + 74;
height = val > 12 ? val : height;
height = val > initialHeight ? val : height;
}
return {
width,
height,
};
},
[tasks]
[isFlowNode, tasks]
);
/** 生成初始化node节点 */
......@@ -322,8 +323,9 @@ const Flow = (props: IProps) => {
/** 样式 */
style: {
...getBatchStyle(item),
marginTop: "-44px",
marginTop: isFlowNode(item.id) ? "-44px": '0px',
padding: "12px 20px 20px 20px",
visibility: 'visible',
},
},
/** 坐标 */
......@@ -494,7 +496,7 @@ const Flow = (props: IProps) => {
const getClassType = useCallback(
(connection: Connection) => {
let inputClassType = "",
outClassType: string | undefined = undefined;
outClassType: string | undefined = '';
tasks?.length &&
tasks.forEach((item) => {
if ([connection.source, connection.target].includes(item.id)) {
......@@ -612,7 +614,7 @@ const Flow = (props: IProps) => {
getTaskType(connection.target as string) === "FLOW"
) {
return;
} else if (inputClassType === outClassType) {
} else if (outClassType && (inputClassType.includes(outClassType) || outClassType.includes(inputClassType))) {
result = connectCheck(connection) as ITask[];
} else {
Message.error("端口数据类型不一致，无法连接！");
......
src/views/ResourceCenter/UserResources/UserResourcesEnvironment/SeeEnv/index.module.css
View file @ 777d07f5
......@@ -57,6 +57,6 @@
margin-left: 4px;
}
.LogViewBox {
margin: 0 24px;
margin: 0 24px 20px;
position: relative;
}
src/views/WorkFlowEdit/components/OperatorList/index.tsx
View file @ 777d07f5
......@@ -203,7 +203,7 @@ const OperatorList = observer((props: IOperatorListProps) => {
setKeyword(e.target.value);
}}
value={keyword}
placeholder="输入关键词搜索"
placeholder="输入关键词按回车搜索"
onKeyUp={handleEnterCode}
size="medium"
sx={{ height: 32, width: "100%" }}
......
src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
View file @ 777d07f5
......@@ -390,7 +390,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
</MyTooltip>
);
},
[handleParameterChange, cpuList, gpuList]
[handleParameterChange, cpuList, gpuList, cpuLoading, gpuLoading]
);
// 输入参数
......
src/views/demo/CardTableDemo/index.tsx
View file @ 777d07f5
import CardTable from "@/components/CommonComponents/CardTable";
import VrituallyCardTable from "@/components/CommonComponents/VrituallyCardTable";
const CardTableDemo = () => {
const list = [
......@@ -44,12 +45,28 @@ const CardTableDemo = () => {
];
const renderItem = (item: any) => {
return (
<div style={{ border: "1px solid red", height: "200px" }}>{item.id}</div>
<div
style={{
border: "1px solid red",
height: "200px",
boxSizing: "border-box",
}}
>
{item.id}
</div>
);
};
return (
<div>
CardTableDemo
<div style={{ height: "600px" }}>
<VrituallyCardTable
data={list}
renderItem={renderItem}
numberOfColumns={4}
rowHeight={220}
></VrituallyCardTable>
</div>
<CardTable
data={list}
renderItem={renderItem}
......
src/views/demo/VirtuallyListDemo/index.tsx
View file @ 777d07f5
import VirtuallyList from "@/components/CommonComponents/VirtuallyList";
import VirtuallyTable from "@/components/CommonComponents/VirtuallyTable";
import MyButton from "@/components/mui/MyButton";
const VirtuallyListDemo = () => {
let listData: Array<any> = [];
......@@ -25,6 +23,9 @@ const VirtuallyListDemo = () => {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
boxSizing: "border-box",
height: "100%",
border: "1px solid red",
}}
>
<div>{listData[index].name}</div>
......@@ -39,89 +40,14 @@ const VirtuallyListDemo = () => {
);
};
const rows = [
{
a: "啊手动阀建行卡实际付款啦即使对方卢卡库上的飞机啊离开解放了；拉萨的飞机拉萨酱豆腐啊肌肤抵抗力就",
b: "werewrw",
c: "asdfasf",
d: "asdfasdf",
e: "asd4534",
id: "1",
},
];
for (let i = 0; i < 10000; i++) {
rows.push({
a: "xcgh",
b: "sdf",
c: "sdfg",
d: "sdfg",
e: "wertwe",
id: "12" + i,
});
}
const buttonHeadCells = [
{
id: "a",
label: "属性a",
width: 150,
},
{
id: "b",
label: "属性b",
width: 150,
},
{
id: "c",
label: "属性c",
width: 150,
// flexGrow: 2,
},
{
id: "d",
label: "属性d",
width: 200,
flexGrow: 2,
},
{
id: "caozuo",
label: "操作",
width: 150,
cellRenderer: (data: any) => {
return (
<MyButton
text="删除"
onClick={() => {
// handleDelete(row.id);
}}
></MyButton>
);
},
},
];
return (
<div>
<div>
{/* <VirtuallyList list={listData} renderRow={renderRow}></VirtuallyList>; */}
</div>
<div style={{ height: "600px" }}>
<VirtuallyTable
// rows={rows}
rows={rows.map((row) => {
return {
...row,
// caozuo: (
// <MyButton
// text="删除"
// onClick={() => {
// // handleDelete(row.id);
// }}
// ></MyButton>
// ),
};
})}
headCells={buttonHeadCells}
/>
<VirtuallyList
list={listData}
renderRow={renderRow}
rowHeight={40}
></VirtuallyList>
</div>
</div>
);
......
src/views/demo/VirtuallyTableDemo/index.tsx 0 → 100644
View file @ 777d07f5
import { useState } from "react";
import VirtuallyTable from "@/components/CommonComponents/VirtuallyTable";
import MyButton from "@/components/mui/MyButton";
const VirtuallyTableDemo = () => {
const rows = [
{
a: "啊手动阀建行卡实际付款啦即使对方卢卡库上的飞机啊离开解放了；拉萨的飞机拉萨酱豆腐啊肌肤抵抗力就",
b: "werewrw",
c: "asdfasf",
d: "asdfasdf",
e: "asd4534",
id: "a1",
},
];
for (let i = 0; i < 10000; i++) {
rows.push({
a: "xcgh",
b: "sdf",
c: "sdfg",
d: "sdfg",
e: "wertwe",
id: String(i),
});
}
const buttonHeadCells = [
{
id: "a",
label: "属性a",
width: 150,
},
{
id: "b",
label: "属性b",
width: 150,
},
{
id: "c",
label: "属性c",
width: 150,
// flexGrow: 2,
},
{
id: "d",
label: "属性d",
width: 200,
flexGrow: 2,
},
{
id: "caozuo",
label: "操作",
width: 150,
cellRenderer: (data: any) => {
return (
<MyButton
text="删除"
onClick={() => {
// handleDelete(row.id);
}}
></MyButton>
);
},
},
];
const [selectItems, setSelectItems] = useState([]);
return (
<div style={{ height: "600px" }}>
<VirtuallyTable
selectItems={selectItems}
setSelectItems={setSelectItems}
rows={rows}
headCells={buttonHeadCells}
activeId="8"
/>
</div>
);
};
export default VirtuallyTableDemo;
src/views/demo/index.module.scss deleted 100644 → 0
View file @ e7f7e081
.box {
background-color: red;
}
src/views/demo/index.tsx
View file @ 777d07f5
......@@ -3,20 +3,24 @@ import QueueSelectDemo from "./QueueSelectDemo";
import IconfontDemo from "./IconfontDemo";
import CardTableDemo from "./CardTableDemo";
import VirtuallyListDemo from "./VirtuallyListDemo";
import VirtuallyTableDemo from "./VirtuallyTableDemo";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import { useState } from "react";
import styles from "./index.module.css";
import style from "./index.module.scss";
const Demo = () => {
const radioOptionsArr = [
{
value: "virtuallyTableDemo",
label: "virtuallyTableDemo",
},
{
value: "virtuallyListDemo",
label: "virtuallyListDemo",
},
{
value: "cardTable",
label: "cardTable",
label: "cardTable/virtuallyCardTable",
},
{
value: "iconfont",
......@@ -51,6 +55,9 @@ const Demo = () => {
{selectDemo === "virtuallyListDemo" && (
<VirtuallyListDemo></VirtuallyListDemo>
)}
{selectDemo === "virtuallyTableDemo" && (
<VirtuallyTableDemo></VirtuallyTableDemo>
)}
{selectDemo === "cardTable" && <CardTableDemo></CardTableDemo>}
{selectDemo === "iconfont" && <IconfontDemo></IconfontDemo>}
{selectDemo === "队列选择器" && <QueueSelectDemo></QueueSelectDemo>}
......
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