Commit ca0fc530 authored by wuyongsheng's avatar wuyongsheng

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

parents b66de646 9fc9d4df
<?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
...@@ -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;
}; };
/** 用户信息 */ /** 用户信息 */
......
...@@ -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>
......
...@@ -87,11 +87,13 @@ const ProjectMembers = observer(() => { ...@@ -87,11 +87,13 @@ 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 { run: getWorkflowJobInfo, loading } = useMyRequest( const { run: getWorkflowJobInfo } = useMyRequest(
getWorkflowJobList, getWorkflowJobList,
{ {
onSuccess: (result: any) => { onSuccess: (result: any) => {
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);
...@@ -296,6 +298,7 @@ const ProjectMembers = observer(() => { ...@@ -296,6 +298,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)
} }
}; };
...@@ -364,6 +367,7 @@ const ProjectMembers = observer(() => { ...@@ -364,6 +367,7 @@ const ProjectMembers = observer(() => {
name: jobName, name: jobName,
state: currency === "ALL" ? "" : currency, state: currency === "ALL" ? "" : currency,
}); });
setLoading(true)
}} }}
> >
<img alt="" src={onload} /> <img alt="" src={onload} />
......
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