Commit 55b638e4 authored by jiangzijing's avatar jiangzijing

Merge branch 'feat-20220801' of http://120.77.149.83/root/bkunyun into feat-20220801

parents 385a8761 21d75bb6
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-13 09:56:57 * @Date: 2022-06-13 09:56:57
* @LastEditors: 吴永生 15770852798@163.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-15 17:10:49 * @LastEditTime: 2022-09-01 15:30:28
* @FilePath: /bkunyun/src/api/api_manager.ts * @FilePath: /bkunyun/src/api/api_manager.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -45,6 +45,9 @@ const RESTAPI = { ...@@ -45,6 +45,9 @@ const RESTAPI = {
API_TASK_OVERVIEW_LIST:`${BACKEND_API_URI_PREFIX}/cpp/workflowJobInformation`, // 查询任务概览 API_TASK_OVERVIEW_LIST:`${BACKEND_API_URI_PREFIX}/cpp/workflowJobInformation`, // 查询任务概览
API_OPERATOR_LISTSTREAMACTORS:`${BACKEND_API_URI_PREFIX}/cpp/workflow/liststreamactors`, // 获取流算子列表,可用于模糊查询,返回所有版本流算子 API_OPERATOR_LISTSTREAMACTORS:`${BACKEND_API_URI_PREFIX}/cpp/workflow/liststreamactors`, // 获取流算子列表,可用于模糊查询,返回所有版本流算子
API_SAVE_BATCHACTOR:`${BACKEND_API_URI_PREFIX}/cpp/workflow/savebatchactor`, // 保存批算子 API_SAVE_BATCHACTOR:`${BACKEND_API_URI_PREFIX}/cpp/workflow/savebatchactor`, // 保存批算子
API_PROJECT_USERS_LIST:`${BACKEND_API_URI_PREFIX}/cpp/project/listusers`, // 获取项目成员
API_ADD_PROJECT_USER:`${BACKEND_API_URI_PREFIX}/cpp/project/updatemember`, // 添加项目成员
API_GET_PROJECT_POWER:`${BACKEND_API_URI_PREFIX}/cpp/project/listroles`, // 获取项目权限
}; };
export default RESTAPI; export default RESTAPI;
...@@ -318,6 +318,34 @@ const saveBatchActor = (params: saveBatchParams) => { ...@@ -318,6 +318,34 @@ const saveBatchActor = (params: saveBatchParams) => {
}); });
}; };
// 获取项目成员
const fetchProjectUsersList = (params: {id: string}) => {
return request({
url: Api.API_PROJECT_USERS_LIST,
method: "get",
params,
});
};
// 修改项目成员信息
const addProjectUser = (id: string, params: any) => {
return request({
url: `${Api.API_ADD_PROJECT_USER}?id=${id}`,
method: "put",
data: params,
});
};
// 获取项目权限
const fetchProjectPower = (params: {id: string}) => {
return request({
url: Api.API_GET_PROJECT_POWER,
method: "get",
params,
});
};
export { export {
current, current,
menu, menu,
...@@ -342,5 +370,8 @@ export { ...@@ -342,5 +370,8 @@ export {
getTaskOverview, getTaskOverview,
getOperatorList, getOperatorList,
saveBatchActor, saveBatchActor,
fetchFlowOutputNumber fetchFlowOutputNumber,
fetchProjectUsersList,
addProjectUser,
fetchProjectPower
}; };
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 4</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="切换产品" transform="translate(-337.000000, -190.000000)">
<g id="编组-37" transform="translate(223.000000, 172.000000)">
<g id="编组-34" transform="translate(0.000000, 8.000000)">
<g id="编组-4" transform="translate(114.000000, 10.000000)">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<polyline id="路径-26" stroke="#1370FF" stroke-width="1.5" stroke-linejoin="round" points="4 8.33740166 7.27434245 11 12 5"></polyline>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 12备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-12备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<polygon id="路径-53备份-2" fill="#8A9099" points="4.5 6 11.5 6 8 11"></polygon>
</g>
</g>
</svg>
\ No newline at end of file
import React, { useCallback, useState} from "react"; import React, { useCallback, useState } from "react";
import Table from "@mui/material/Table"; import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody"; import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell"; import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer"; import TableContainer from "@mui/material/TableContainer";
import { TablePagination } from '@mui/material'; import { TablePagination } from "@mui/material";
import TableRow from "@mui/material/TableRow"; import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper"; import Paper from "@mui/material/Paper";
import Checkbox from "@mui/material/Checkbox"; import Checkbox from "@mui/material/Checkbox";
import { useEffect } from "react"; import { useEffect } from "react";
import { useImperativeHandle } from "react"; import { useImperativeHandle } from "react";
// import Spin from "./Spin"; import MyCircularProgress from "@/components/mui/MyCircularProgress";
import EnhancedTableHeadComponent from "./components/EnhancedTableHead" import EnhancedTableHeadComponent from "./components/EnhancedTableHead";
import { getComparator, stableSort, useStyles } from "./utils"; import { getComparator, stableSort, useStyles } from "./utils";
import ActionsComponent from "./components/ActionsComponent"; import ActionsComponent from "./components/ActionsComponent";
import {ITableProps} from './interface' import { ITableProps } from "./interface";
export default function EnhancedTable(props: ITableProps) { export default function EnhancedTable(props: ITableProps) {
const classes: any = useStyles; const classes: any = useStyles;
const [order, setOrder] = useState("asc"); const [order, setOrder] = useState("asc");
const [orderBy, setOrderBy] = useState(""); const [orderBy, setOrderBy] = useState("");
const { headCells, rows, footer = true, elevation1, tableStyle, tableCellStyle, tableContainerStyle, stickyHeader, onRowClick, defaultRow, minHeight = '', borderBottom = '', onDoubleClick, const {
load, size, checkboxData, rowsPerPage = 10, initSelected, page = 0, changePage = function () { }, toolbar, count, param, disabledParam = "id", headTableCellCheckbox, RowHeight = '', CellWidth = '', rowHover, TableNodataPadding = '', TableNodataLineHeight = '', tableBodySx, radioClick} = props; headCells,
rows,
footer = true,
elevation1,
tableStyle,
tableCellStyle,
tableContainerStyle,
stickyHeader,
onRowClick,
defaultRow,
minHeight = "",
borderBottom = "",
onDoubleClick,
loading = false,
noDataText = "暂无数据",
size,
checkboxData,
rowsPerPage = 10,
initSelected,
page = 0,
changePage = function () {},
toolbar,
count,
param,
disabledParam = "id",
headTableCellCheckbox,
RowHeight = "",
CellWidth = "",
rowHover,
TableNodataPadding = "",
TableNodataLineHeight = "",
tableBodySx,
radioClick,
} = props;
const [selected, setSelected] = useState(initSelected || []); const [selected, setSelected] = useState(initSelected || []);
const [rowsPerPageOptions] = useState(initSelected || [5, 10, 20, 50, { value: -1, label: 'All' }]); const [rowsPerPageOptions] = useState(
const [onRow, setOnRow] = useState('') initSelected || [5, 10, 20, 50, { value: -1, label: "All" }]
);
const [onRow, setOnRow] = useState("");
// 重置复选框选中选项 // 重置复选框选中选项
const initSelectedFunc = (e: any) => { const initSelectedFunc = (e: any) => {
setSelected(e) setSelected(e);
} };
useImperativeHandle(props.onRef, () => { useImperativeHandle(props.onRef, () => {
return { return {
...@@ -38,13 +73,13 @@ export default function EnhancedTable(props: ITableProps) { ...@@ -38,13 +73,13 @@ export default function EnhancedTable(props: ITableProps) {
}); });
useEffect(() => { useEffect(() => {
setOnRow(defaultRow) setOnRow(defaultRow);
}, [defaultRow]) }, [defaultRow]);
const onRowClickDefault = (value: any) => { const onRowClickDefault = (value: any) => {
setOnRow(value) setOnRow(value);
onRowClick && onRowClick(value) onRowClick && onRowClick(value);
} };
const handleRequestSort = (event: any, property: any) => { const handleRequestSort = (event: any, property: any) => {
const isAsc = orderBy === property && order === "asc"; const isAsc = orderBy === property && order === "asc";
...@@ -54,7 +89,7 @@ export default function EnhancedTable(props: ITableProps) { ...@@ -54,7 +89,7 @@ export default function EnhancedTable(props: ITableProps) {
const handleSelectAllClick = (event: any) => { const handleSelectAllClick = (event: any) => {
if (event.target.checked) { if (event.target.checked) {
const newSelecteds = rows.map((n: any) => n[param || 'id']); const newSelecteds = rows.map((n: any) => n[param || "id"]);
setSelected(newSelecteds); setSelected(newSelecteds);
checkboxData(newSelecteds); checkboxData(newSelecteds);
return; return;
...@@ -78,13 +113,13 @@ export default function EnhancedTable(props: ITableProps) { ...@@ -78,13 +113,13 @@ export default function EnhancedTable(props: ITableProps) {
selected.slice(selectedIndex + 1) selected.slice(selectedIndex + 1)
); );
} }
checkboxData(newSelected) checkboxData(newSelected);
setSelected(newSelected); setSelected(newSelected);
}; };
const handleRadioClick = (id: string) => { const handleRadioClick = (id: string) => {
setSelected(id) setSelected(id);
} };
const handleOnPageChange = (event: any, newPage: number) => { const handleOnPageChange = (event: any, newPage: number) => {
changePage(newPage, Number(rowsPerPage)); changePage(newPage, Number(rowsPerPage));
...@@ -98,27 +133,39 @@ export default function EnhancedTable(props: ITableProps) { ...@@ -98,27 +133,39 @@ export default function EnhancedTable(props: ITableProps) {
// const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage); // const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
const renderTableCellValue = useCallback(((item: any, row: any, index: number)=>{ const renderTableCellValue = useCallback(
if( (item: any, row: any, index: number) => {
item.render if (item.render) {
) { return <>{item.render(row[item.id], row, index)}</>;
return <>{item.render(row[item.id], row, index)}</> } else if (row[item.id]) {
} else if(row[item.id]) { return row[item.id] || "-";
return row[item.id] || '-'
} else { } else {
return '-' return "-";
} }
}),[]) },
[]
);
return ( return (
<div className={classes.root}> <div className={classes.root}>
<Paper sx={{ <Paper
boxShadow: 'none' sx={{
}} className={classes.paper} classes={{ elevation1: elevation1 || classes.elevation1 }} > boxShadow: "none",
{/* <Spin spin={spin} /> */} }}
className={classes.paper}
classes={{ elevation1: elevation1 || classes.elevation1 }}
>
{toolbar && toolbar} {toolbar && toolbar}
<TableContainer style={{ ...tableContainerStyle }}> <TableContainer style={{ ...tableContainerStyle }}>
<Table stickyHeader={stickyHeader || false} className={classes.table} style={{ ...tableStyle }} aria-labelledby="tableTitle" size={size || "medium"} aria-label="cloudam table header" > <Table
stickyHeader={stickyHeader || false}
className={classes.table}
style={{ ...tableStyle }}
aria-labelledby="tableTitle"
size={size || "medium"}
aria-label="cloudam table header"
>
<MyCircularProgress loading={loading}>
<EnhancedTableHeadComponent <EnhancedTableHeadComponent
classes={classes()} classes={classes()}
{...props} {...props}
...@@ -131,38 +178,81 @@ export default function EnhancedTable(props: ITableProps) { ...@@ -131,38 +178,81 @@ export default function EnhancedTable(props: ITableProps) {
rowCount={rows.length} rowCount={rows.length}
headCells={headCells || []} headCells={headCells || []}
/> />
<TableBody sx={{ <TableBody
...tableBodySx sx={{
}}> ...tableBodySx,
{ }}
(rows.length === 0 && !load) && <TableRow> >
{rows.length === 0 && !loading && (
<TableRow>
<TableCell <TableCell
sx={{ sx={{
borderBottom: '1px solid #F0F2F5', borderBottom: "1px solid #F0F2F5",
textAlign: 'center' textAlign: "center",
color: "#8A9099",
}} }}
colSpan={headCells?.filter((k: any) => k.id === "checkbox")?.length === 0 ? headCells?.length : headCells?.length + 1} colSpan={
headCells?.filter((k: any) => k.id === "checkbox")
?.length === 0
? headCells?.length
: headCells?.length + 1
}
className={classes.TypographyStyle} className={classes.TypographyStyle}
style={{ minHeight: minHeight, height: minHeight, borderBottom: borderBottom, padding: TableNodataPadding, lineHeight: TableNodataLineHeight }} style={{
minHeight: minHeight,
height: minHeight,
borderBottom: borderBottom,
padding: TableNodataPadding,
lineHeight: TableNodataLineHeight,
}}
> >
No Data {noDataText}
</TableCell> </TableCell>
</TableRow> </TableRow>
} )}
{stableSort(rows, getComparator(order, orderBy)).slice(page * Number(rowsPerPage), page * Number(rowsPerPage) + Number(rowsPerPage)).map((row: any, index: number) => { {stableSort(rows, getComparator(order, orderBy))
.slice(
page * Number(rowsPerPage),
page * Number(rowsPerPage) + Number(rowsPerPage)
)
.map((row: any, index: number) => {
const isItemSelected = isSelected(row[param || "id"]); const isItemSelected = isSelected(row[param || "id"]);
const labelId = `enhanced-table-checkbox-${index}`; const labelId = `enhanced-table-checkbox-${index}`;
return ( return (
<TableRow <TableRow
hover={rowHover ? false : (row[disabledParam || "enabled"] ? true : false)} hover={
rowHover
? false
: row[disabledParam || "enabled"]
? true
: false
}
onDoubleClick={() => { onDoubleClick={() => {
onDoubleClick && onDoubleClick(row) onDoubleClick && onDoubleClick(row);
}} }}
style={{ style={{
height: RowHeight, height: RowHeight,
border: onRow === row[param || "id"] ? !row[disabledParam] ? "" : '1px solid #136EFA' : "", border:
backgroundColor: onRow === row[param || "id"] ? !row[disabledParam] ? "rgba(255, 255, 255, 0.4)" : "rgba(19, 110, 250, 0.1)" : "", onRow === row[param || "id"]
cursor: props.cursor ? (row[props.cursor] ? "pointer" : "auto") : (onRowClick ? !row[disabledParam] ? "no-drop" : "pointer" : "auto"), ? !row[disabledParam]
? ""
: "1px solid #136EFA"
: "",
backgroundColor:
onRow === row[param || "id"]
? !row[disabledParam]
? "rgba(255, 255, 255, 0.4)"
: "rgba(19, 110, 250, 0.1)"
: "",
cursor: props.cursor
? row[props.cursor]
? "pointer"
: "auto"
: onRowClick
? !row[disabledParam]
? "no-drop"
: "pointer"
: "auto",
}} }}
role="checkbox" role="checkbox"
aria-checked={isItemSelected} aria-checked={isItemSelected}
...@@ -170,53 +260,75 @@ export default function EnhancedTable(props: ITableProps) { ...@@ -170,53 +260,75 @@ export default function EnhancedTable(props: ITableProps) {
key={row[param || "id"] || index} key={row[param || "id"] || index}
selected={isItemSelected} selected={isItemSelected}
onClick={() => { onClick={() => {
radioClick && radioClick(row) radioClick && radioClick(row);
radioClick && handleRadioClick(row[param || "id"]) radioClick && handleRadioClick(row[param || "id"]);
}} }}
> >
{ {headCells.filter((k: any) => k.id === "checkbox")
headCells.filter((k: any) => k.id === "checkbox").length > 0 && <TableCell .length > 0 && (
<TableCell
sx={{ sx={{
borderBottom: '1px solid #F0F2F5' borderBottom: "1px solid #F0F2F5",
}} }}
onClick={(event) => { onClick={(event) => {
// if (!row[disabledParam]) return; // if (!row[disabledParam]) return;
onRowClick && onRowClickDefault(row[param || "id"]) onRowClick &&
headCells.filter((k: any) => k.id === "checkbox").length > 0 && handleClick(event, row[param || "id"]) onRowClickDefault(row[param || "id"]);
headCells.filter((k: any) => k.id === "checkbox")
.length > 0 &&
handleClick(event, row[param || "id"]);
}} }}
padding="checkbox"> padding="checkbox"
<Checkbox sx={{ color: '#D1D6DE' }} color={"primary"} checked={isItemSelected} inputProps={{ "aria-labelledby": labelId }} /> >
<Checkbox
sx={{ color: "#D1D6DE" }}
color={"primary"}
checked={isItemSelected}
inputProps={{ "aria-labelledby": labelId }}
/>
</TableCell> </TableCell>
} )}
{ {headCells
headCells.filter((item: any) => item.id !== 'checkbox').map((item: any, k: any) => { .filter((item: any) => item.id !== "checkbox")
.map((item: any, k: any) => {
return ( return (
<TableCell key={k} component="th" id={labelId + k} <TableCell
key={k}
component="th"
id={labelId + k}
sx={{ sx={{
borderBottom: '1px solid #F0F2F5' borderBottom: "1px solid #F0F2F5",
}} }}
// align={} // align={}
style={{ width: CellWidth, textAlign: item.numeric ? "right" : "left", paddingRight: item.sort && item.numeric ? "40px" : "", border: tableCellStyle }} style={{
width: CellWidth,
textAlign: item.numeric ? "right" : "left",
paddingRight:
item.sort && item.numeric ? "40px" : "",
border: tableCellStyle,
}}
scope="row" scope="row"
padding={item.disablePadding ? "none" : "normal"} padding={
item.disablePadding ? "none" : "normal"
}
classes={{ classes={{
body: classes.bodyTableCell body: classes.bodyTableCell,
}} }}
> { >
renderTableCellValue(item, row, index) {" "}
} {renderTableCellValue(item, row, index)}
</TableCell> </TableCell>
) );
}) })}
}
</TableRow> </TableRow>
); );
})} })}
</TableBody> </TableBody>
</MyCircularProgress>
</Table> </Table>
</TableContainer> </TableContainer>
{ {footer ? (
footer ? <TablePagination <TablePagination
rowsPerPageOptions={rowsPerPageOptions} rowsPerPageOptions={rowsPerPageOptions}
component="div" component="div"
count={count || rows.length} count={count || rows.length}
...@@ -225,9 +337,8 @@ export default function EnhancedTable(props: ITableProps) { ...@@ -225,9 +337,8 @@ export default function EnhancedTable(props: ITableProps) {
ActionsComponent={ActionsComponent} ActionsComponent={ActionsComponent}
onPageChange={handleOnPageChange} onPageChange={handleOnPageChange}
onRowsPerPageChange={handleChangeRowsPerPage} onRowsPerPageChange={handleChangeRowsPerPage}
/> : null />
} ) : null}
</Paper> </Paper>
</div> </div>
); );
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生 15770852798@163.com * @Author: 吴永生 15770852798@163.com
* @Date: 2022-07-26 10:23:43 * @Date: 2022-07-26 10:23:43
* @LastEditors: 吴永生 15770852798@163.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-26 11:53:00 * @LastEditTime: 2022-09-01 16:00:34
* @FilePath: /bkunyun/src/components/mui/MyTable/interface.ts * @FilePath: /bkunyun/src/components/mui/MyTable/interface.ts
* @Description: 这是默认设置,请设置`customMade`,打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`,打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -32,7 +32,7 @@ export interface ITableProps { ...@@ -32,7 +32,7 @@ export interface ITableProps {
/** 每行双击事件 */ /** 每行双击事件 */
onDoubleClick?: any, onDoubleClick?: any,
/** 是否loading */ /** 是否loading */
load?: boolean, loading?: boolean,
/** table size */ /** table size */
size?: any, size?: any,
/** 选中的checkbox数据 */ /** 选中的checkbox数据 */
...@@ -71,4 +71,6 @@ export interface ITableProps { ...@@ -71,4 +71,6 @@ export interface ITableProps {
onRef?: any; onRef?: any;
/** 手型 */ /** 手型 */
cursor?: string cursor?: string
/** 没有数据文案 */
noDataText?: string
} }
\ No newline at end of file
...@@ -18,6 +18,7 @@ type projectInfo = { ...@@ -18,6 +18,7 @@ type projectInfo = {
type productInfo = { type productInfo = {
id?: string; id?: string;
name?: string; name?: string;
path?: string;
}; };
/** 用户信息 */ /** 用户信息 */
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-10 18:05:21 * @Date: 2022-06-10 18:05:21
* @LastEditors: 吴永生 15770852798@163.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-09-01 14:09:28 * @LastEditTime: 2022-09-01 15:54:33
* @FilePath: /bkunyun/src/views/ConsoleLayout/components/TransferList/index.tsx * @FilePath: /bkunyun/src/views/ConsoleLayout/components/TransferList/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
......
...@@ -13,10 +13,69 @@ ...@@ -13,10 +13,69 @@
} }
.logo { .logo {
padding: 0px 16px 0px 20px; padding: 0px 32px 0px 20px;
margin-top: -10px; margin-top: -10px;
} }
.menuBox {
line-height: 57px;
height: 57px;
font-size: 14px;
color: rgba(86, 92, 102, 1);
margin-right: 24px;
cursor: pointer;
position: relative;
}
.menuTitle:hover {
color: #1e2633;
}
.menuBox:hover .productList {
display: block;
}
.triangle {
width: 16px;
height: 16px;
position: relative;
top: 4px;
transition: width 1s;
-webkit-transition: width 1s;
}
.menuBox:hover .triangle {
transform: rotateX(180deg);
}
.productList {
position: absolute;
top: 57px;
left: -16px;
padding: 8px 0;
display: none;
background: #ffffff;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
border-radius: 4px;
z-index: 1002;
}
.productLi {
height: 36px;
padding: 7px 50px 7px 16px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
line-height: 22px;
cursor: pointer;
position: relative;
box-sizing: border-box;
}
.productLi:hover {
color: rgba(19, 112, 255, 1);
}
.productLiActive {
color: rgba(19, 112, 255, 1);
}
.selectActive {
width: 16px;
height: 16px;
position: absolute;
top: 10px;
right: 12px;
}
.uploadIconBox { .uploadIconBox {
width: 32px; width: 32px;
height: 32px; height: 32px;
...@@ -39,10 +98,18 @@ ...@@ -39,10 +98,18 @@
} }
.topRightItem { .topRightItem {
margin-right: 20px; margin-right: 24px;
} }
.topRightTriangle {
.ArrowDropDownIconRoot { color: #8a9099;
transition: all 0.2s !important;
transform: rotate(0);
}
.topRightTriangleOpen {
color: #8a9099;
transform: rotate(180deg);
}
/* .ArrowDropDownIconRoot {
color: #8a9099; color: #8a9099;
transition: all 0.2s !important; transition: all 0.2s !important;
transform: rotate(0); transform: rotate(0);
...@@ -51,7 +118,7 @@ ...@@ -51,7 +118,7 @@
.ArrowDropDownIconRootOpen { .ArrowDropDownIconRootOpen {
color: #8a9099; color: #8a9099;
transform: rotate(180deg); transform: rotate(180deg);
} } */
.menuPaper { .menuPaper {
border: 1px solid #f0f2f5; border: 1px solid #f0f2f5;
......
import React, { useEffect, useState } from "react"; import React, { useEffect } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom"; import { Outlet, useLocation, useNavigate } from "react-router-dom";
import cx from "classnames"; import cx from "classnames";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import Avatar from "@mui/material/Avatar"; import Avatar from "@mui/material/Avatar";
import { Box, Menu, MenuItem } from "@mui/material"; import { Box, Menu, MenuItem } from "@mui/material";
import classNames from "classnames"; import classNames from "classnames";
import uploadIcon from "@/assets/img/uploadIcon.svg"; import uploadIcon from "@/assets/img/uploadIcon.svg";
import triangle from "@/assets/project/triangle.svg";
import selectActive from "@/assets/project/selectActive.svg";
import globalText from "@/utils/globalText_CN"; import globalText from "@/utils/globalText_CN";
import useIndex from "./useIndex"; import useIndex from "./useIndex";
import { useStores } from "@/store/index"; import { useStores } from "@/store/index";
import MyButton from "@/components/mui/MyButton";
import logo from "@/assets/img/logo.svg"; import logo from "@/assets/img/logo.svg";
import MyPopover from "@/components/mui/MyPopover"; import MyPopover from "@/components/mui/MyPopover";
import TranSferList from "./components/TransferList"; import TranSferList from "./components/TransferList";
import { getProjectList } from "@/api/project_api"; import { getProjectList } from "@/api/project_api";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import { toJS } from "mobx";
import { import {
setFileServerEndPointLocalStorage, setFileServerEndPointLocalStorage,
getFiletokenAccordingToId, getFiletokenAccordingToId,
...@@ -35,19 +36,15 @@ const ConsoleLayout = observer(() => { ...@@ -35,19 +36,15 @@ const ConsoleLayout = observer(() => {
handleClose, handleClose,
} = useIndex(); } = useIndex();
const [currentProduct, setCurrentProduct] = useState<{
path: string;
name: string;
}>();
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const productInfo = toJS(currentProjectStore.currentProductInfo);
const { run: runGetProjectList } = useMyRequest(getProjectList, { const { run: runGetProjectList } = useMyRequest(getProjectList, {
onSuccess: (res) => { onSuccess: (res) => {
let list = res.data; let list = res.data;
if (list.length === 0) { if (list.length === 0) {
currentProjectStore.setProjectList([]); currentProjectStore.setProjectList([]);
currentProjectStore.changeProject({}); currentProjectStore.changeProject({});
navigate(currentProduct?.path as string); navigate(productInfo?.path as string);
} else { } else {
currentProjectStore.setProjectList(list); currentProjectStore.setProjectList(list);
currentProjectStore.changeProject(list[0]); currentProjectStore.changeProject(list[0]);
...@@ -56,15 +53,18 @@ const ConsoleLayout = observer(() => { ...@@ -56,15 +53,18 @@ const ConsoleLayout = observer(() => {
list[0].filetoken = res; list[0].filetoken = res;
currentProjectStore.changeProject(list[0]); currentProjectStore.changeProject(list[0]);
}); });
navigate(currentProduct?.path as string); navigate(productInfo?.path as string);
} }
}, },
}); });
// 切换产品 // 切换产品
const getProduct = (item: any) => { const getProduct = (item: any) => {
currentProjectStore.changeProductInfo({ id: item.id, name: item.name }); currentProjectStore.changeProductInfo({
setCurrentProduct(item); id: item.id,
name: item.name,
path: item.path,
});
runGetProjectList({ runGetProjectList({
product: item.id, product: item.id,
}); });
...@@ -83,58 +83,48 @@ const ConsoleLayout = observer(() => { ...@@ -83,58 +83,48 @@ const ConsoleLayout = observer(() => {
<Box className={style.topApp}> <Box className={style.topApp}>
<Box className={style.topLeftBox}> <Box className={style.topLeftBox}>
<img src={logo} alt="" className={style.logo} /> <img src={logo} alt="" className={style.logo} />
<MyButton {/* <MyButton
text={globalText.console} text={globalText.console}
variant={"text"} variant={"text"}
style={{ color: "#565C66" }} style={{ color: "#565C66" }}
onClick={() => navigate("/home")} onClick={() => navigate("/home")}
/> /> */}
<div className={style.menuBox} onClick={() => navigate("/home")}>
<div className={style.menuTitle}>{globalText.console}</div>
</div>
<Box sx={{ display: "flex", alignItems: "center" }}> <div className={style.menuBox}>
<MyButton <div className={style.menuTitle}>
text={globalText.product} <span>{globalText.product}</span>
variant={"text"} <img className={style.triangle} src={triangle} alt="" />
style={{ color: "#565C66", paddingLeft: '8px' }} </div>
onClick={handleProductClick} <div className={style.productList}>
dropValue={productOpen}
drop={true}
/>
{/* <ArrowDropDownIcon classes={{
root: cx({
[style.ArrowDropDownIconRoot]: true,
[style.ArrowDropDownIconRootOpen]: Boolean(productOpen)
})
}} /> */}
<Menu
id="product-menu"
anchorEl={productAnchorEl}
open={productOpen}
onClose={handleClose}
classes={{
paper: style.menuPaper,
}}
MenuListProps={{
"aria-labelledby": "product-button",
}}
>
{menuStore.productList.map((item) => { {menuStore.productList.map((item) => {
return ( return (
<MenuItem <div
key={item.path} key={item.path}
classes={{ className={classNames({
root: style.menuItemRoot, [style.productLi]: true,
}} [style.productLiActive]: productInfo.path === item.path,
})}
onClick={() => { onClick={() => {
getProduct(item); getProduct(item);
handleClose(); handleClose();
}} }}
> >
{item.name} {item.name}
</MenuItem> {productInfo.path === item.path && (
<img
className={style.selectActive}
src={selectActive}
alt=""
/>
)}
</div>
); );
})} })}
</Menu> </div>
</Box> </div>
</Box> </Box>
<Box className={style.topRightBox}> <Box className={style.topRightBox}>
...@@ -152,7 +142,6 @@ const ConsoleLayout = observer(() => { ...@@ -152,7 +142,6 @@ const ConsoleLayout = observer(() => {
style={{ verticalAlign: "middle" }} style={{ verticalAlign: "middle" }}
/> />
</div> </div>
</MyPopover> </MyPopover>
<Box className={style.topRightItem}> <Box className={style.topRightItem}>
<Box <Box
...@@ -170,13 +159,13 @@ const ConsoleLayout = observer(() => { ...@@ -170,13 +159,13 @@ const ConsoleLayout = observer(() => {
> >
H H
</Avatar> </Avatar>
<ArrowDropDownIcon <img
classes={{ className={classNames({
root: cx({ [style.topRightTriangle]: true,
[style.ArrowDropDownIconRoot]: true, [style.topRightTriangleOpen]: Boolean(utilityOpen),
[style.ArrowDropDownIconRootOpen]: Boolean(utilityOpen), })}
}), src={triangle}
}} alt=""
/> />
</Box> </Box>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生 15770852798@163.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-09-01 14:09:34 * @LastEditTime: 2022-09-01 16:14:10
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -13,12 +13,17 @@ import { memo, useCallback, useEffect, useMemo, useState } from "react"; ...@@ -13,12 +13,17 @@ import { memo, useCallback, useEffect, useMemo, useState } from "react";
import { Box, OutlinedInput } from "@mui/material"; import { Box, OutlinedInput } from "@mui/material";
import Dialog from "@/components/mui/MyDialog"; import Dialog from "@/components/mui/MyDialog";
import { IResponse, useHttp } from "@/api/http"; import useMyRequest from "@/hooks/useMyRequest";
import { useStores } from "@/store"; import { useStores } from "@/store";
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
import MySelect, { IOption } from "@/components/mui/MySelect"; import MySelect, { IOption } from "@/components/mui/MySelect";
import MyTable from "@/components/mui/MyTable"; import MyTable from "@/components/mui/MyTable";
import SearchInput from "@/components/BusinessComponents/SearchInput"; import SearchInput from "@/components/BusinessComponents/SearchInput";
import {
addProjectUser,
fetchProjectPower,
fetchProjectUsersList,
} from "@/api/project_api";
interface IProps { interface IProps {
setAddMemberDialog: (val: boolean) => void; setAddMemberDialog: (val: boolean) => void;
...@@ -29,7 +34,6 @@ interface IProps { ...@@ -29,7 +34,6 @@ interface IProps {
const AddMember = observer((props: IProps) => { const AddMember = observer((props: IProps) => {
const { addMemberDialog, setAddMemberDialog, getTableList } = props; const { addMemberDialog, setAddMemberDialog, getTableList } = props;
const http = useHttp();
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const [tableData, setTableData] = useState([]); const [tableData, setTableData] = useState([]);
...@@ -76,14 +80,6 @@ const AddMember = observer((props: IProps) => { ...@@ -76,14 +80,6 @@ const AddMember = observer((props: IProps) => {
]; ];
}, [changePermission, selectOptions]); }, [changePermission, selectOptions]);
useEffect(() => {
if (addMemberDialog) {
http.get<IResponse<any>>("/cpp/project/listroles").then((res) => {
setSelectOptions(res.data);
});
}
}, [addMemberDialog, http]);
/** 过滤表格数据 */ /** 过滤表格数据 */
useEffect(() => { useEffect(() => {
if (!!projectMember) { if (!!projectMember) {
...@@ -97,18 +93,48 @@ const AddMember = observer((props: IProps) => { ...@@ -97,18 +93,48 @@ const AddMember = observer((props: IProps) => {
} }
}, [projectMember, tableData]); }, [projectMember, tableData]);
// 获取表格数据接口
const { run: getProjectUsersList } = useMyRequest(fetchProjectUsersList, {
onSuccess: (res: any) => {
setTableData(res?.data);
},
});
// 获取项目权限
const { run: getProjectPower } = useMyRequest(fetchProjectPower, {
onSuccess: (res: any) => {
setSelectOptions(res.data);
},
});
// 添加项目成员
const { run: saveProjectUser } = useMyRequest(addProjectUser, {
onSuccess: (res: any) => {
const { errorCode } = res;
if (errorCode === 0) {
Message.success("新增成功!");
getTableList();
setAddMemberDialog(false);
}
},
});
useEffect(() => {
if (addMemberDialog) {
getProjectPower();
}
}, [addMemberDialog, getProjectPower]);
/** 获取表格数据 */ /** 获取表格数据 */
useEffect(() => { useEffect(() => {
if (!addMemberDialog) return; if (!addMemberDialog) return;
const projectInfo = toJS(currentProjectStore?.currentProjectInfo); const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
http getProjectUsersList({ id: projectInfo?.id || "" });
.get<IResponse<any>>("/cpp/project/listusers", { }, [
params: { id: projectInfo?.id || "" }, currentProjectStore?.currentProjectInfo,
}) addMemberDialog,
.then((res) => { getProjectUsersList,
setTableData(res?.data); ]);
});
}, [currentProjectStore?.currentProjectInfo, http, addMemberDialog]);
const onClose = (event: any = {}, reason: any = "other") => { const onClose = (event: any = {}, reason: any = "other") => {
// 点击弹窗外不关闭弹窗 // 点击弹窗外不关闭弹窗
...@@ -124,19 +150,7 @@ const AddMember = observer((props: IProps) => { ...@@ -124,19 +150,7 @@ const AddMember = observer((props: IProps) => {
return checkData.includes(item?.username); return checkData.includes(item?.username);
}); });
if (params.length) { if (params.length) {
http saveProjectUser(projectInfo?.id || "", params);
.put<IResponse<any>>(
`/cpp/project/updatemember?id=${projectInfo?.id || ""}`,
params
)
.then((res) => {
const { errorCode } = res;
if (errorCode === 0) {
Message.success("新增成功!");
getTableList();
setAddMemberDialog(false);
}
});
} else { } else {
Message.info("请先选择项目成员!"); Message.info("请先选择项目成员!");
} }
...@@ -162,6 +176,9 @@ const AddMember = observer((props: IProps) => { ...@@ -162,6 +176,9 @@ const AddMember = observer((props: IProps) => {
/> />
<div style={{ overflow: "overlay", maxHeight: 400 }}> <div style={{ overflow: "overlay", maxHeight: 400 }}>
<MyTable <MyTable
noDataText={
projectMember ? `暂无 "${projectMember}" 搜索结果` : undefined
}
tableContainerStyle={{ height: 346 }} tableContainerStyle={{ height: 346 }}
checkboxData={(val: string[]) => setCheckData(val)} checkboxData={(val: string[]) => setCheckData(val)}
param="username" param="username"
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56 * @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生 15770852798@163.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-17 10:58:02 * @LastEditTime: 2022-09-01 14:39:36
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -223,6 +223,7 @@ const ProjectSubmitWork = observer(() => { ...@@ -223,6 +223,7 @@ const ProjectSubmitWork = observer(() => {
promotedParameters, promotedParameters,
}); });
} else { } else {
handleCancel();
Message.error("请完善算子信息后提交任务"); Message.error("请完善算子信息后提交任务");
} }
}; };
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生 15770852798@163.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-22 15:33:02 * @LastEditTime: 2022-09-01 16:35:02
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -87,13 +87,11 @@ const ProjectMembers = observer(() => { ...@@ -87,13 +87,11 @@ const ProjectMembers = observer(() => {
const [jobData, setJobData] = useState(""); const [jobData, setJobData] = useState("");
const [openDialog, setOpenDialog] = useState(false); const [openDialog, setOpenDialog] = useState(false);
const [dialogType, setDialogType] = useState("del"); const [dialogType, setDialogType] = useState("del");
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false);
// 获取作业列表 // 获取作业列表
const { run: getWorkflowJobInfo } = useMyRequest( const { run: getWorkflowJobInfo } = useMyRequest(getWorkflowJobList, {
getWorkflowJobList,
{
onSuccess: (result: any) => { onSuccess: (result: any) => {
setLoading(false) setLoading(false);
setJobList(result.data.content); setJobList(result.data.content);
setCount(result.data.totalElements); setCount(result.data.totalElements);
timer && clearTimeout(timer as number); timer && clearTimeout(timer as number);
...@@ -108,8 +106,7 @@ const ProjectMembers = observer(() => { ...@@ -108,8 +106,7 @@ const ProjectMembers = observer(() => {
}); });
}, 60000); }, 60000);
}, },
} });
);
useEffect(() => { useEffect(() => {
return () => { return () => {
...@@ -298,7 +295,7 @@ const ProjectMembers = observer(() => { ...@@ -298,7 +295,7 @@ const ProjectMembers = observer(() => {
const handleKeyWordChangeKeyUp = (e: any) => { const handleKeyWordChangeKeyUp = (e: any) => {
if (e.keyCode === 13) { if (e.keyCode === 13) {
setJobName(e.target.value); setJobName(e.target.value);
setLoading(true) setLoading(true);
} }
}; };
...@@ -367,7 +364,7 @@ const ProjectMembers = observer(() => { ...@@ -367,7 +364,7 @@ const ProjectMembers = observer(() => {
name: jobName, name: jobName,
state: currency === "ALL" ? "" : currency, state: currency === "ALL" ? "" : currency,
}); });
setLoading(true) setLoading(true);
}} }}
> >
<img alt="" src={onload} /> <img alt="" src={onload} />
...@@ -375,7 +372,7 @@ const ProjectMembers = observer(() => { ...@@ -375,7 +372,7 @@ const ProjectMembers = observer(() => {
</Box> </Box>
<Box className={styles.body} style={{ position: "relative" }}> <Box className={styles.body} style={{ position: "relative" }}>
<MyCircularProgress loading={loading} /> <MyCircularProgress loading={loading}>
{jobList.length === 0 && !loading && ( {jobList.length === 0 && !loading && (
<Box <Box
sx={{ sx={{
...@@ -397,7 +394,10 @@ const ProjectMembers = observer(() => { ...@@ -397,7 +394,10 @@ const ProjectMembers = observer(() => {
{jobList.length > 0 && {jobList.length > 0 &&
jobList.map((item: any, key) => { jobList.map((item: any, key) => {
return ( return (
<Box className={styles.tabBox} onClick={() => rowClick(item.id)}> <Box
className={styles.tabBox}
onClick={() => rowClick(item.id)}
>
<Box className={styles.tabBoxInfo}> <Box className={styles.tabBoxInfo}>
<div className={styles.tabBoxTitle}>{item.name}</div> <div className={styles.tabBoxTitle}>{item.name}</div>
<Box className={styles.tabBoxDescInfo}> <Box className={styles.tabBoxDescInfo}>
...@@ -493,6 +493,7 @@ const ProjectMembers = observer(() => { ...@@ -493,6 +493,7 @@ const ProjectMembers = observer(() => {
</Box> </Box>
); );
})} })}
</MyCircularProgress>
</Box> </Box>
<TablePagination <TablePagination
......
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