Skip to content

B
bkunyun
Commit 72f8ff82 authored by chenshouchao's avatar chenshouchao
Browse files
Options

feat: 删除不必要的引用

parent 0388a4d0
Hide whitespace changes
Inline Side-by-side
Showing with 675 additions and 668 deletions
src/api/fileserver/raysyncApi.ts
View file @ 72f8ff82
...@@ -28,9 +28,9 @@ const APIPORT = function () { ...@@ -28,9 +28,9 @@ const APIPORT = function () {
}; };
// 当前计算区 // 当前计算区
let currentRegion = localStorage.getItem("current-region"); // let currentRegion = localStorage.getItem("current-region");
let currentRegionJson = currentRegion && JSON.parse(currentRegion); // let currentRegionJson = currentRegion && JSON.parse(currentRegion);
let user = getLoaclStorageOfKey("userinfo"); // let user = getLoaclStorageOfKey("userinfo");
// 文件路径 // 文件路径
// const FILEPATH = // const FILEPATH =
......
src/views/Project/ProjectSetting/ProjectMembers/index.tsx
View file @ 72f8ff82
...@@ -24,7 +24,6 @@ import styles from "./index.module.css"; ...@@ -24,7 +24,6 @@ import styles from "./index.module.css";
import { IDialogInfo } from "./interface"; import { IDialogInfo } from "./interface";
import { toJS } from "mobx"; import { toJS } from "mobx";
import { useStores } from "@/store"; import { useStores } from "@/store";
import { isProjectOwner } from "@/utils/util";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
const ProjectMembers = observer(() => { const ProjectMembers = observer(() => {
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ 72f8ff82
import { ITemplateConfig, IRenderTasks, IRenderTask } from "../interface"; import { ITemplateConfig, IRenderTasks } from "../interface";
import styles from "./index.module.css"; import styles from "./index.module.css";
import MyInput from "@/components/mui/MyInput"; import MyInput from "@/components/mui/MyInput";
import Tooltip from "@mui/material/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import classnames from "classnames"; import classnames from "classnames";
import { useState, useMemo, useImperativeHandle, useCallback } from "react"; import { useState, useMemo, useImperativeHandle } from "react";
import FileSelect from "@/components/FileSelect"; import FileSelect from "@/components/FileSelect";
import moment from "moment"; import moment from "moment";
import MySelect, { optionsTransform } from "../components/MySelect"; import MySelect, { optionsTransform } from "../components/MySelect";
import MyCheckBox from "@/components/mui/MyCheckBox"; import MyCheckBox from "@/components/mui/MyCheckBox";
import MyRadio from "@/components/mui/MyRadio"; import MyRadio from "@/components/mui/MyRadio";
import _ from "lodash";
import { getCheckResult } from "../util"; import { getCheckResult } from "../util";
import fileSelectIcon from "@/assets/project/fileSelect.svg"; import fileSelectIcon from "@/assets/project/fileSelect.svg";
import questionMark from "@/assets/project/questionMark.svg"; import questionMark from "@/assets/project/questionMark.svg";
......
src/views/Project/ProjectSubmitWork/index.tsx
View file @ 72f8ff82
...@@ -26,11 +26,12 @@ import fullScreen from "@/assets/project/fullScreen.svg"; ...@@ -26,11 +26,12 @@ import fullScreen from "@/assets/project/fullScreen.svg";
import partialScreen from "@/assets/project/partialScreen.svg"; import partialScreen from "@/assets/project/partialScreen.svg";
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
import { useStores } from "@/store"; import { useStores } from "@/store";
import { observer } from "mobx-react-lite";
import MyPopconfirm from "@/components/mui/MyPopconfirm"; import MyPopconfirm from "@/components/mui/MyPopconfirm";
import styles from "./index.module.css"; import styles from "./index.module.css";
const ProjectSubmitWork = () => { const ProjectSubmitWork = observer(() => {
const Message = useMessage(); const Message = useMessage();
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const projectId = toJS(currentProjectStore.currentProjectInfo.id); const projectId = toJS(currentProjectStore.currentProjectInfo.id);
...@@ -291,6 +292,6 @@ const ProjectSubmitWork = () => { ...@@ -291,6 +292,6 @@ const ProjectSubmitWork = () => {
/> />
</div> </div>
); );
}; });
export default ProjectSubmitWork; export default ProjectSubmitWork;
src/views/Project/ProjectWorkbench/workbenchList/index.tsx
View file @ 72f8ff82
...@@ -7,373 +7,410 @@ ...@@ -7,373 +7,410 @@
* @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
*/ */
import { memo, useCallback, useEffect, useState } from "react"; import { memo, useCallback, useEffect, useState } from "react";
import _ from "lodash";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Box, Typography } from "@mui/material"; import { Box, Typography } from "@mui/material";
import OutlinedInput from "@mui/material/OutlinedInput"; import OutlinedInput from "@mui/material/OutlinedInput";
import SearchIcon from "@mui/icons-material/Search"; import SearchIcon from "@mui/icons-material/Search";
import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress'; import LinearProgress, {
import { TablePagination } from '@mui/material'; linearProgressClasses,
import TextField from '@mui/material/TextField'; } from "@mui/material/LinearProgress";
import MenuItem from '@mui/material/MenuItem'; import { TablePagination } from "@mui/material";
import TextField from "@mui/material/TextField";
import MenuItem from "@mui/material/MenuItem";
import SimpleDialog from "./components/simpleDialog" import SimpleDialog from "./components/simpleDialog";
import { useStores } from "@/store"; import { useStores } from "@/store";
import { observer } from "mobx-react-lite";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import ActionsComponent from "../../../../components/Material.Ui/Table/ActionsComponent" import ActionsComponent from "../../../../components/Material.Ui/Table/ActionsComponent";
import runTime from '../../../../assets/project/runTime.svg' import runTime from "../../../../assets/project/runTime.svg";
import jobCost from '../../../../assets/project/jobCost.svg' import jobCost from "../../../../assets/project/jobCost.svg";
import jobSue from '../../../../assets/project/jobSue.svg' import jobSue from "../../../../assets/project/jobSue.svg";
import jobFail from '../../../../assets/project/jobFail.svg' import jobFail from "../../../../assets/project/jobFail.svg";
import jobRun from '../../../../assets/project/jobRun.svg' import jobRun from "../../../../assets/project/jobRun.svg";
import jobCadence from '../../../../assets/project/jobCadence.svg' import jobCadence from "../../../../assets/project/jobCadence.svg";
import jobStop from '../../../../assets/project/jobStop.svg' import jobStop from "../../../../assets/project/jobStop.svg";
import jobDel from '../../../../assets/project/jobDel.svg' import jobDel from "../../../../assets/project/jobDel.svg";
import noData from '../../../../assets/project/noTemplate.svg' import noData from "../../../../assets/project/noTemplate.svg";
import { import {
getWorkflowJobList, getWorkflowJobList,
deleteWorkflowJob, deleteWorkflowJob,
cancelWorkflowJob cancelWorkflowJob,
} from "@/api/workbench_api"; } from "@/api/workbench_api";
import styles from "./index.module.css"; import styles from "./index.module.css";
import { toJS } from "mobx";
const currencies = [ const currencies = [
{ {
value: 'ALL', value: "ALL",
label: '全部', label: "全部",
}, },
{ {
value: 'RUNNING', value: "RUNNING",
label: '正在运行', label: "正在运行",
}, },
{ {
value: 'SUCCEEDED', value: "SUCCEEDED",
label: '运行成功', label: "运行成功",
}, },
{ {
value: 'FAILED', value: "FAILED",
label: '运行失败', label: "运行失败",
}, },
{ {
value: 'ABORTED', value: "ABORTED",
label: '运行终止', label: "运行终止",
}, },
]; ];
const ProjectMembers = () => { const ProjectMembers = observer(() => {
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const [jobName, setJobName] = useState('') const projectId = toJS(currentProjectStore.currentProjectInfo.id);
const [jobList, setJobList] = useState([]) const [jobName, setJobName] = useState("");
const [currency, setCurrency] = useState('ALL'); const [jobList, setJobList] = useState([]);
const [page, setPage] = useState(0) const [currency, setCurrency] = useState("ALL");
const [size, setSize] = useState(10) const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10) const [size, setSize] = useState(10);
const [count, setCount] = useState(0) const [rowsPerPage, setRowsPerPage] = useState(10);
/** 简单弹窗 */ const [count, setCount] = useState(0);
const [jobData, setJobData] = useState(''); /** 简单弹窗 */
const [openDialog, setOpenDialog] = useState(false); const [jobData, setJobData] = useState("");
const [dialogType, setDialogType] = useState('del'); const [openDialog, setOpenDialog] = useState(false);
// 获取作业列表 const [dialogType, setDialogType] = useState("del");
const { run: getWorkflowJobInfo } = useMyRequest(getWorkflowJobList, { // 获取作业列表
onSuccess: (result: any) => { const { run: getWorkflowJobInfo } = useMyRequest(getWorkflowJobList, {
setJobList(result.data.content); onSuccess: (result: any) => {
setCount(result.data.totalElements) setJobList(result.data.content);
}, setCount(result.data.totalElements);
}); },
const navigate = useNavigate() });
const navigate = useNavigate();
// 删除作业
const { run: delWorkflowJob } = useMyRequest(deleteWorkflowJob, {
onSuccess: (result: any) => {
setOpenDialog(false)
getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
page: page,
size: size,
name: jobName,
state: currency === 'ALL' ? "" : currency
});
},
});
// 删除作业
const { run: cancelWorkflowJobInfo } = useMyRequest(cancelWorkflowJob, {
onSuccess: (result: any) => {
setOpenDialog(false)
getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
page: page,
size: size,
name: jobName,
state: currency === 'ALL' ? "" : currency
});
},
});
const searchChange = (data: any) => {
setJobName(data.length > 30 ? data.slice(0, 30) : data);
}
const handleChange = (event: any) => { // 删除作业
setCurrency(event.target.value); const { run: delWorkflowJob } = useMyRequest(deleteWorkflowJob, {
}; onSuccess: (result: any) => {
setOpenDialog(false);
getWorkflowJobInfo({
projectId: projectId as string,
page: page,
size: size,
name: jobName,
state: currency === "ALL" ? "" : currency,
});
},
});
/** 关闭弹窗 */ // 删除作业
const closeDialog = () => { const { run: cancelWorkflowJobInfo } = useMyRequest(cancelWorkflowJob, {
setOpenDialog(false); onSuccess: (result: any) => {
}; setOpenDialog(false);
getWorkflowJobInfo({
projectId: projectId as string,
page: page,
size: size,
name: jobName,
state: currency === "ALL" ? "" : currency,
});
},
});
/** 弹窗确认 */ const searchChange = (data: any) => {
const onConfirm = () => { setJobName(data.length > 30 ? data.slice(0, 30) : data);
if (dialogType === "del") { };
delWorkflowJob({
id: jobData
})
} else {
cancelWorkflowJobInfo({
jobid: jobData
})
}
};
useEffect(() => { const handleChange = (event: any) => {
getWorkflowJobInfo({ setCurrency(event.target.value);
projectId: currentProjectStore.currentProjectInfo.id as string, };
page: page,
size: size,
name: jobName,
state: currency === 'ALL' ? "" : currency
});
}, [currentProjectStore.currentProjectInfo.id, getWorkflowJobInfo]);
const handleChangePage = (event: any, newPage: any) => { /** 关闭弹窗 */
setPage(newPage) const closeDialog = () => {
getWorkflowJobInfo({ setOpenDialog(false);
projectId: currentProjectStore.currentProjectInfo.id as string, };
page: newPage,
size: size,
name: jobName,
state: currency === 'ALL' ? "" : currency
});
}
const handleChangeRowsPerPage = (event: any) => { /** 弹窗确认 */
setRowsPerPage(event.target.value) const onConfirm = () => {
setSize(event.target.value) if (dialogType === "del") {
getWorkflowJobInfo({ delWorkflowJob({
projectId: currentProjectStore.currentProjectInfo.id as string, id: jobData,
page: page, });
size: event.target.value, } else {
name: jobName, cancelWorkflowJobInfo({
state: currency === 'ALL' ? "" : currency jobid: jobData,
}); });
} }
};
useEffect(() => { useEffect(() => {
setTimeout(() => { getWorkflowJobInfo({
getWorkflowJobInfo({ projectId: projectId as string,
projectId: currentProjectStore.currentProjectInfo.id as string, page: page,
page: page, size: size,
size: size, name: jobName,
name: jobName, state: currency === "ALL" ? "" : currency,
state: currency === 'ALL' ? "" : currency });
}); }, [
}, 300) currentProjectStore.currentProjectInfo.id,
}, [jobName, currency]); getWorkflowJobInfo,
projectId,
page,
size,
jobName,
currency,
]);
const renderStatusIcon = (data: string) => { const handleChangePage = (event: any, newPage: any) => {
switch (data) { setPage(newPage);
case "RUNNING": getWorkflowJobInfo({
return jobRun projectId: projectId as string,
case "ABORTED": page: newPage,
return jobCadence size: size,
case "FAILED": name: jobName,
return jobFail state: currency === "ALL" ? "" : currency,
case "SUCCEEDED": });
return jobSue };
default:
return jobCadence
}
}
const renderStatusText = (data: string) => { const handleChangeRowsPerPage = (event: any) => {
switch (data) { setRowsPerPage(event.target.value);
case "RUNNING": setSize(event.target.value);
return '正在运行' getWorkflowJobInfo({
case "ABORTED": projectId: projectId as string,
return '运行终止' page: page,
case "FAILED": size: event.target.value,
return '运行失败' name: jobName,
case "SUCCEEDED": state: currency === "ALL" ? "" : currency,
return '运行成功' });
default: };
return '未知'
}
}
const renderProgress = (data: any) => { useEffect(() => {
switch (data) { setTimeout(() => {
case "RUNNING": getWorkflowJobInfo({
return '#1370FF' projectId: projectId as string,
case "ABORTED": page: page,
return '#C2C6CC' size: size,
case "FAILED": name: jobName,
return '#FF4E4E' state: currency === "ALL" ? "" : currency,
case "SUCCEEDED": });
return '#0DD09B' }, 300);
default: }, [jobName, currency, projectId, getWorkflowJobInfo, page, size]);
return '#C2C6CC'
}
}
/** 点击每一行 */ const renderStatusIcon = (data: string) => {
const rowClick = useCallback( switch (data) {
(id: string) => { case "RUNNING":
navigate(`/product/cadd/projectJobDetail`, { return jobRun;
state: { taskId: id }, case "ABORTED":
}); return jobCadence;
}, case "FAILED":
[navigate], return jobFail;
); case "SUCCEEDED":
return jobSue;
default:
return jobCadence;
}
};
return ( const renderStatusText = (data: string) => {
<Box className={styles.headerBox}> switch (data) {
case "RUNNING":
return "正在运行";
case "ABORTED":
return "运行终止";
case "FAILED":
return "运行失败";
case "SUCCEEDED":
return "运行成功";
default:
return "未知";
}
};
<Box className={styles.tabHeader}> const renderProgress = (data: any) => {
<OutlinedInput switch (data) {
onChange={(e: any) => { case "RUNNING":
searchChange(e.target.value) return "#1370FF";
}} case "ABORTED":
value={jobName} return "#C2C6CC";
placeholder="输入关键词搜索" case "FAILED":
size="small" return "#FF4E4E";
sx={{ width: 340, height: 32 }} case "SUCCEEDED":
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />} return "#0DD09B";
/> default:
return "#C2C6CC";
}
};
<Box className={styles.tabHeaderSelect}> /** 点击每一行 */
<TextField const rowClick = useCallback(
select (id: string) => {
label="运行状态" navigate(`/product/cadd/projectJobDetail`, {
value={currency} state: { taskId: id },
onChange={handleChange} });
size="small" },
sx={{ [navigate]
width: 180, height: 32, );
'& .MuiOutlinedInput-root': {
height: '32px',
color: "#1E2633",
fontSize: '14px'
},
'& .MuiInputLabel-root': {
color: "#8A9099",
fontSize: '14px'
},
}}
>
{currencies.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Box>
</Box> return (
<Box className={styles.headerBox}>
<Box className={styles.tabHeader}>
<OutlinedInput
onChange={(e: any) => {
searchChange(e.target.value);
}}
value={jobName}
placeholder="输入关键词搜索"
size="small"
sx={{ width: 340, height: 32 }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/>
<Box className={styles.body}> <Box className={styles.tabHeaderSelect}>
{ <TextField
jobList.length === 0 && select
<Box sx={{ label="运行状态"
display: 'flex', alignItems: 'center', flexDirection: 'column', minHeight: 'calc(100vh - 376px)', value={currency}
justifyContent: 'center' onChange={handleChange}
}}> size="small"
<img alt="" src={noData} /> sx={{
<Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#8A9099' }}>暂未任务</Typography> width: 180,
</Box> height: 32,
} "& .MuiOutlinedInput-root": {
{ height: "32px",
jobList.length > 0 && jobList.map((item: any, key) => { color: "#1E2633",
return ( fontSize: "14px",
<Box className={styles.tabBox} onClick={()=>rowClick(item.id)}> },
<Box className={styles.tabBoxInfo}> "& .MuiInputLabel-root": {
<div className={styles.tabBoxTitle}>{item.name}</div> color: "#8A9099",
<Box className={styles.tabBoxDescInfo}> fontSize: "14px",
<div className={styles.tabBoxDesc} style={{ marginRight: "24px" }} >创建时间：{item.createTime}</div> },
<div className={styles.tabBoxDesc}>创建人：{item.creator}</div> }}
</Box> >
</Box> {currencies.map((option) => (
<Box className={styles.tabBoxMiddle}> <MenuItem key={option.value} value={option.value}>
<img alt="" src={runTime} /> {option.label}
<div className={styles.tabBoxTime}>{item.costTime}</div> </MenuItem>
</Box> ))}
<Box className={styles.tabBoxMiddle}> </TextField>
<img alt="" src={jobCost} /> </Box>
<div className={styles.tabBoxTime}>{item.jobCost}</div> </Box>
</Box>
<Box className={styles.tabBoxJobStatus}>
<img alt="" src={renderStatusIcon(item.state)} />
<div className={styles.tabBoxStatusText}>{renderStatusText(item.state)}</div>
<Box sx={{ width: '100%' }}>
<LinearProgress variant="determinate" value={(item.completeNum / item.totalNum) * 100}
sx={{
borderRadius: '3px', height: "6px",
backgroundColor: "#F0F2F5",
marginRight: '16px',
[`& .${linearProgressClasses.bar}`]: {
backgroundColor: renderProgress(item.state),
borderRadius: '3px',
},
}}
/>
</Box>
<div style={{ color: renderProgress(item.state) }} className={styles.tabBoxStatusText}>{item.completeNum + "/" + item.totalNum}</div>
</Box>
<Box className={styles.body}>
<Box className={styles.tabBoxJobOperate}> {jobList.length === 0 && (
<img alt="" <Box
src={item.state === "RUNNING" ? jobStop : jobDel} sx={{
style={{ cursor: "pointer" }} display: "flex",
onClick={(event) => { alignItems: "center",
event.stopPropagation(); flexDirection: "column",
event.nativeEvent.stopImmediatePropagation(); minHeight: "calc(100vh - 376px)",
setJobData(item.id) justifyContent: "center",
setOpenDialog(true) }}
setDialogType(item.state === "RUNNING" ? 'stop' : 'del') >
}} <img alt="" src={noData} />
/> <Typography
</Box> sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
</Box> >
) 暂未任务
}) </Typography>
} </Box>
</Box> )}
{jobList.length > 0 &&
jobList.map((item: any, key) => {
return (
<Box className={styles.tabBox} onClick={() => rowClick(item.id)}>
<Box className={styles.tabBoxInfo}>
<div className={styles.tabBoxTitle}>{item.name}</div>
<Box className={styles.tabBoxDescInfo}>
<div
className={styles.tabBoxDesc}
style={{ marginRight: "24px" }}
>
创建时间：{item.createTime}
</div>
<div className={styles.tabBoxDesc}>
创建人：{item.creator}
</div>
</Box>
</Box>
<Box className={styles.tabBoxMiddle}>
<img alt="" src={runTime} />
<div className={styles.tabBoxTime}>{item.costTime}</div>
</Box>
<Box className={styles.tabBoxMiddle}>
<img alt="" src={jobCost} />
<div className={styles.tabBoxTime}>{item.jobCost}</div>
</Box>
<Box className={styles.tabBoxJobStatus}>
<img alt="" src={renderStatusIcon(item.state)} />
<div className={styles.tabBoxStatusText}>
{renderStatusText(item.state)}
</div>
<Box sx={{ width: "100%" }}>
<LinearProgress
variant="determinate"
value={(item.completeNum / item.totalNum) * 100}
sx={{
borderRadius: "3px",
height: "6px",
backgroundColor: "#F0F2F5",
marginRight: "16px",
[`& .${linearProgressClasses.bar}`]: {
backgroundColor: renderProgress(item.state),
borderRadius: "3px",
},
}}
/>
</Box>
<div
style={{ color: renderProgress(item.state) }}
className={styles.tabBoxStatusText}
>
{item.completeNum + "/" + item.totalNum}
</div>
</Box>
<TablePagination <Box className={styles.tabBoxJobOperate}>
rowsPerPageOptions={[5, 10, 20, 50]} <img
labelRowsPerPage={'每页行数：'} alt=""
ActionsComponent={ActionsComponent} src={item.state === "RUNNING" ? jobStop : jobDel}
component="div" style={{ cursor: "pointer" }}
count={count || jobList.length} onClick={(event) => {
rowsPerPage={rowsPerPage || 10} event.stopPropagation();
page={page} event.nativeEvent.stopImmediatePropagation();
onPageChange={handleChangePage}// setJobData(item.id);
onRowsPerPageChange={handleChangeRowsPerPage}// setOpenDialog(true);
/> setDialogType(item.state === "RUNNING" ? "stop" : "del");
}}
/>
</Box>
</Box>
);
})}
</Box>
<SimpleDialog <TablePagination
text={dialogType === "del" ? '任务被删除后将无法恢复，确认继续吗？' : '正在运行的任务终止后将无法重新运行，确认继续吗？'} rowsPerPageOptions={[5, 10, 20, 50]}
title={dialogType === "del" ? '删除任务' : '终止任务'} labelRowsPerPage={"每页行数："}
openDialog={openDialog} ActionsComponent={ActionsComponent}
closeDialog={closeDialog} component="div"
onConfirm={onConfirm} count={count || jobList.length}
/> rowsPerPage={rowsPerPage || 10}
page={page}
onPageChange={handleChangePage} //
onRowsPerPageChange={handleChangeRowsPerPage} //
/>
</Box> <SimpleDialog
); text={
}; dialogType === "del"
? "任务被删除后将无法恢复，确认继续吗？"
: "正在运行的任务终止后将无法重新运行，确认继续吗？"
}
title={dialogType === "del" ? "删除任务" : "终止任务"}
openDialog={openDialog}
closeDialog={closeDialog}
onConfirm={onConfirm}
/>
</Box>
);
});
export default memo(ProjectMembers); export default memo(ProjectMembers);
src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx
View file @ 72f8ff82
import { memo, useEffect, useState, useMemo } from "react"; import { useEffect, useState, useMemo } from "react";
import style from "./index.module.css"; import style from "./index.module.css";
import classNames from "classnames"; import classNames from "classnames";
import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined"; import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
......
src/views/Project/ProjectWorkbench/workbenchTemplate/index.module.css
View file @ 72f8ff82
.headerBox { .headerBox {
margin-bottom: 20px; margin-bottom: 20px;
} }
.removeItemBox { .removeItemBox {
color: #ff4e4e; color: #ff4e4e;
margin-left: 32px; margin-left: 32px;
cursor: pointer; cursor: pointer;
} }
.tabBox { .tabBox {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 24px; margin-bottom: 24px;
} }
.templateBlock { .templateBlock {
width: 21.4876%; width: 21.4876%;
height: 160px; height: 160px;
background: #FFFFFF; background: #ffffff;
border-radius: 4px; border-radius: 4px;
border: 1px solid #EBEDF0; border: 1px solid #ebedf0;
padding: 16px 20px; padding: 16px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
margin: 8px; margin: 8px;
} }
.addTemplateMask { .addTemplateMask {
background: rgb(56, 56, 56, 0.7); background: rgb(56, 56, 56, 0.7);
position: absolute; position: absolute;
z-index: 800; z-index: 800;
top: 0%; top: 0%;
left: 0%; left: 0%;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: end; align-items: flex-end;
flex-direction: column; flex-direction: column;
} }
.addTemplateBlock { .addTemplateBlock {
background: #FFFFFF; background: #ffffff;
z-index: 900; z-index: 900;
border-radius: 16px 0px 0px 0px; border-radius: 16px 0px 0px 0px;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.addTemplateBox { .addTemplateBox {
width: 16.8751%; width: 16.8751%;
height: 114px; height: 114px;
background: #FFFFFF; background: #ffffff;
border-radius: 4px; border-radius: 4px;
border: 1px solid #F0F2F5; border: 1px solid #f0f2f5;
padding: 16px 20px; padding: 16px 20px;
margin: 8px; margin: 8px;
cursor: pointer; cursor: pointer;
} }
.addTemplateBox:hover { .addTemplateBox:hover {
box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08); box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08);
} }
.templateDescText { .templateDescText {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
display: -webkit-box; display: -webkit-box;
height: 54px; height: 54px;
font-size: 12px !important; font-size: 12px !important;
font-weight: 400 !important; font-weight: 400 !important;
color: #8A9099 !important; color: #8a9099 !important;
} }
.addNewTemplate { .addNewTemplate {
width: 380px; width: 380px;
height: 194px; height: 194px;
background: #FFFFFF; background: #ffffff;
border-radius: 4px; border-radius: 4px;
border: 1px solid #EBEDF0; border: 1px solid #ebedf0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
} }
\ No newline at end of file
src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx
View file @ 72f8ff82
...@@ -12,21 +12,17 @@ import OutlinedInput from "@mui/material/OutlinedInput"; ...@@ -12,21 +12,17 @@ import OutlinedInput from "@mui/material/OutlinedInput";
import SearchIcon from "@mui/icons-material/Search"; import SearchIcon from "@mui/icons-material/Search";
import { toJS } from "mobx"; import { toJS } from "mobx";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
// import Button from "@mui/material/Button";
import Add from "@mui/icons-material/Add"; import Add from "@mui/icons-material/Add";
import Button from "@/components/mui/Button"; import Button from "@/components/mui/Button";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import TemplateBox from "./components/templateBox"; import TemplateBox from "./components/templateBox";
import SimpleDialog from "./components/simpleDialog"; import SimpleDialog from "./components/simpleDialog";
// import AddTemplate from "./components/addTemplate";
import AddTemplate from "./components/AddTemplate/index"; import AddTemplate from "./components/AddTemplate/index";
import noData from "../../../../assets/project/noTemplate.svg"; import noData from "../../../../assets/project/noTemplate.svg";
import { import {
getWorkbenchTemplate, getWorkbenchTemplate,
deleteWorkbenchTemplate, deleteWorkbenchTemplate,
getAddWorkbenchTemplate,
addWorkbenchTemplate,
} from "@/api/workbench_api"; } from "@/api/workbench_api";
import usePass from "@/hooks/usePass"; import usePass from "@/hooks/usePass";
import { useStores } from "@/store"; import { useStores } from "@/store";
...@@ -47,12 +43,6 @@ const ProjectMembers = observer(() => { ...@@ -47,12 +43,6 @@ const ProjectMembers = observer(() => {
const [templateId, setTemplateId] = useState(""); const [templateId, setTemplateId] = useState("");
/** 简单弹窗（删除模板） */ /** 简单弹窗（删除模板） */
const [openDialog, setOpenDialog] = useState(false); const [openDialog, setOpenDialog] = useState(false);
/** 增加模板 */
const [openAddTemplate, setOpenAddTemplate] = useState(false);
/** 可增加模板列表 */
const [addTemplateList, setAddTemplateList] = useState([]);
/** 已选择增加的模板列表 */
const [selectTemplateData, setSelectTemplateData] = useState<string[]>([]);
const [showAddTemplate, setShowAddTemplate] = useState(false); const [showAddTemplate, setShowAddTemplate] = useState(false);
// 获取模板列表 // 获取模板列表
...@@ -73,25 +63,6 @@ const ProjectMembers = observer(() => { ...@@ -73,25 +63,6 @@ const ProjectMembers = observer(() => {
}, },
}); });
// 添加工作流模板-获取模板列表
const { run: getAddTemplateList } = useMyRequest(getAddWorkbenchTemplate, {
onSuccess: (result: any) => {
setAddTemplateList(result.data);
setOpenAddTemplate(true);
},
});
// 项目管理员-添加工作流模板-提交
const { run: addTemplate } = useMyRequest(addWorkbenchTemplate, {
onSuccess: (result: any) => {
setOpenAddTemplate(false);
getTemplateInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
});
setSelectTemplateData([]);
},
});
useEffect(() => { useEffect(() => {
getTemplateInfo({ getTemplateInfo({
projectId: currentProjectStore.currentProjectInfo.id as string, projectId: currentProjectStore.currentProjectInfo.id as string,
...@@ -124,44 +95,6 @@ const ProjectMembers = observer(() => { ...@@ -124,44 +95,6 @@ const ProjectMembers = observer(() => {
/** 增加模板 */ /** 增加模板 */
const addTemplateBlock = () => { const addTemplateBlock = () => {
setShowAddTemplate(true); setShowAddTemplate(true);
// getAddTemplateList({
// projectId: currentProjectStore.currentProjectInfo.id as string,
// productId: "cadd",
// });
};
/** 关闭增加模板 */
const closeAddTemplateBlock = () => {
setOpenAddTemplate(false);
setSelectTemplateData([]);
};
/** 增加模板操作 */
const addTemplateCallback = () => {
addTemplate({
projectId: currentProjectStore.currentProjectInfo.id as string,
workflowSpecIds: selectTemplateData,
});
};
/** 搜索模板 */
const searchTemplateNameCallback = (data: any) => {
getAddTemplateList({
projectId: currentProjectStore.currentProjectInfo.id as string,
productId: "cadd",
title: data,
});
};
const templateSelectCallback = (data: string) => {
let list: string[] = [...selectTemplateData];
if (selectTemplateData.filter((e) => e === data).length > 0) {
list = list.filter((e) => e !== data);
setSelectTemplateData(list);
} else {
list.push(data);
setSelectTemplateData(list);
}
}; };
const searchChange = (data: any) => { const searchChange = (data: any) => {
...@@ -171,11 +104,11 @@ const ProjectMembers = observer(() => { ...@@ -171,11 +104,11 @@ const ProjectMembers = observer(() => {
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
getTemplateInfo({ getTemplateInfo({
projectId: currentProjectStore.currentProjectInfo.id as string, projectId: projectIdData as string,
title: templateName, title: templateName,
}); });
}, 300); }, 300);
}, [templateName]); }, [templateName, getTemplateInfo, projectIdData]);
return ( return (
<Box className={styles.headerBox}> <Box className={styles.headerBox}>
...@@ -256,16 +189,6 @@ const ProjectMembers = observer(() => { ...@@ -256,16 +189,6 @@ const ProjectMembers = observer(() => {
</Box> </Box>
)} )}
{/* <AddTemplate
openAddTemplate={openAddTemplate}
closeAddTemplateBlock={closeAddTemplateBlock}
addTemplateList={addTemplateList}
templateSelectCallback={templateSelectCallback}
selectTemplateData={selectTemplateData}
addTemplateCallback={addTemplateCallback}
searchTemplateNameCallback={searchTemplateNameCallback}
/> */}
{showAddTemplate && ( {showAddTemplate && (
<AddTemplate <AddTemplate
setShowAddTemplate={setShowAddTemplate} setShowAddTemplate={setShowAddTemplate}
......
src/views/WorkFlowEdit/components/OperatorList/index.tsx
View file @ 72f8ff82
...@@ -6,7 +6,6 @@ import { observer } from "mobx-react-lite"; ...@@ -6,7 +6,6 @@ import { observer } from "mobx-react-lite";
import { toJS } from "mobx"; import { toJS } from "mobx";
import cloneDeep from "lodash/cloneDeep"; import cloneDeep from "lodash/cloneDeep";
import { mockData } from "./mock";
import { IOperatorItemProps, IOperatorListProps } from "./interface"; import { IOperatorItemProps, IOperatorListProps } from "./interface";
import { ITask } from "@/views/Project/ProjectSubmitWork/interface"; import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
......
src/views/mui_demo/button.tsx
View file @ 72f8ff82
import { memo, useCallback, useEffect, useMemo, useState } from "react"; import { memo } from "react";
import _ from "lodash"; import DeleteIcon from "@mui/icons-material/Delete";
import { IResponse, useHttp } from "@/api/http";
import { useStores } from "@/store";
import DeleteIcon from '@mui/icons-material/Delete';
import Button from "@/components/mui/Button"; import Button from "@/components/mui/Button";
const ProjectMembers = () => { const ProjectMembers = () => {
const http = useHttp(); return (
<>
const { currentProjectStore } = useStores(); <Button size={"large"} text={"确定"} />
&nbsp;&nbsp;
useEffect(() => { <Button text={"确定"} />
&nbsp;&nbsp;
}, []); <Button size={"small"} text={"确定"} />
<br />
<br />
return ( <Button size={"large"} text={"确定"} disabled />
<> &nbsp;&nbsp;
<Button size={"large"} text={'确定'} /> <Button text={"确定"} disabled />
&nbsp;&nbsp; &nbsp;&nbsp;
<Button text={'确定'} /> <Button size={"small"} text={"确定"} disabled />
&nbsp;&nbsp; <br />
<Button size={"small"} text={'确定'} /> <br />
<br /><br /> <Button size={"large"} color={"secondary"} text={"确定"} />
<Button size={"large"} text={'确定'} disabled /> &nbsp;&nbsp;
&nbsp;&nbsp; <Button color={"secondary"} text={"确定"} />
<Button text={'确定'} disabled /> &nbsp;&nbsp;
&nbsp;&nbsp; <Button size={"small"} color={"secondary"} text={"确定"} />
<Button size={"small"} text={'确定'} disabled /> <br /> <br />
<br /><br /> <Button
<Button size={"large"} color={"secondary"} text={'确定'} /> text={"确定"}
&nbsp;&nbsp; size={"large"}
<Button color={"secondary"} text={'确定'} /> style={{ color: "aqua", background: "burlywood" }}
&nbsp;&nbsp; />
<Button size={"small"} color={"secondary"} text={'确定'} /> &nbsp;&nbsp;
<br /> <br /> <Button
<Button text={'确定'} size={"large"} style={{ color: "aqua", background: "burlywood" }} /> text={"确定"}
&nbsp;&nbsp; style={{ color: "aqua", background: "burlywood" }}
<Button text={'确定'} style={{ color: "aqua", background: "burlywood" }} /> />
&nbsp;&nbsp; &nbsp;&nbsp;
<Button text={'确定'} size={"small"} style={{ color: "aqua", background: "burlywood" }} /> <Button
<br /> <br /> text={"确定"}
outlined size={"small"}
<br /> style={{ color: "aqua", background: "burlywood" }}
<Button size={"large"} variant={"outlined"} text={'确定'} /> />
&nbsp;&nbsp; <br /> <br />
<Button variant={"outlined"} text={'确定'} /> outlined
&nbsp;&nbsp; <br />
<Button size={"small"} variant={"outlined"} text={'确定'} /> <Button size={"large"} variant={"outlined"} text={"确定"} />
<br /> <br /> &nbsp;&nbsp;
<Button size={"large"} variant={"outlined"} disabled text={'确定'} /> <Button variant={"outlined"} text={"确定"} />
&nbsp;&nbsp; &nbsp;&nbsp;
<Button variant={"outlined"} disabled text={'确定'} /> <Button size={"small"} variant={"outlined"} text={"确定"} />
&nbsp;&nbsp; <br /> <br />
<Button size={"small"} variant={"outlined"} disabled text={'确定'} /> <Button size={"large"} variant={"outlined"} disabled text={"确定"} />
<br /> <br /> &nbsp;&nbsp;
<Button size={"large"} variant={"outlined"} color={"secondary"} text={'确定'} /> <Button variant={"outlined"} disabled text={"确定"} />
&nbsp;&nbsp; &nbsp;&nbsp;
<Button variant={"outlined"} color={"secondary"} text={'确定'} /> <Button size={"small"} variant={"outlined"} disabled text={"确定"} />
&nbsp;&nbsp; <br /> <br />
<Button size={"small"} variant={"outlined"} color={"secondary"} text={'确定'} /> <Button
<br /> <br /> size={"large"}
<Button text={'确定'} size={"large"} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} /> variant={"outlined"}
&nbsp;&nbsp; color={"secondary"}
<Button text={'确定'} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} /> text={"确定"}
&nbsp;&nbsp; />
<Button text={'确定'} size={"small"} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} /> &nbsp;&nbsp;
<br /> <br /> <Button variant={"outlined"} color={"secondary"} text={"确定"} />
text &nbsp;&nbsp;
<br /> <Button
<Button size={"large"} variant={"text"} text={'确定确定确定确定确定确定'} /> size={"small"}
&nbsp;&nbsp; variant={"outlined"}
<Button variant={"text"} text={'确定确定确定确定确定确定'} /> color={"secondary"}
&nbsp;&nbsp; text={"确定"}
<Button size={"small"} variant={"text"} text={'确定确定确定确定确定确定'} /> />
<br /> <br /> <br />
<Button size={"large"} disabled variant={"text"} text={'确定确定确定确定确定确定'} /> <Button
&nbsp;&nbsp; text={"确定"}
<Button variant={"text"} disabled text={'确定确定确定确定确定确定'} /> size={"large"}
&nbsp;&nbsp; variant={"outlined"}
<Button size={"small"} disabled variant={"text"} text={'确定确定确定确定确定确定'} /> style={{ color: "aqua", background: "burlywood" }}
<br /> />
<Button size={"large"} color={"secondary"} variant={"text"} text={'确定确定确定确定确定确定'} /> &nbsp;&nbsp;
&nbsp;&nbsp; <Button
<Button variant={"text"} color={"secondary"} text={'确定确定确定确定确定确定'} /> text={"确定"}
&nbsp;&nbsp; variant={"outlined"}
<Button size={"small"} color={"secondary"} variant={"text"} text={'确定确定确定确定确定确定'} /> style={{ color: "aqua", background: "burlywood" }}
<br /> <br /> />
img &nbsp;&nbsp;
<br /> <Button
<Button text={'确定确定确定确定确定确定'} img={<DeleteIcon />} /> text={"确定"}
<br /> <br /> size={"small"}
select variant={"outlined"}
<br /> style={{ color: "aqua", background: "burlywood" }}
<Button />
text={'更多'} <br /> <br />
select={ text
[ <br />
{ name: "1111111" }, <Button
{ name: "1111111" }, size={"large"}
{ name: "1111111" }, variant={"text"}
{ name: "1111111", color: "red" }, text={"确定确定确定确定确定确定"}
] />
} /> &nbsp;&nbsp;
<Button <Button variant={"text"} text={"确定确定确定确定确定确定"} />
text={'更多'} &nbsp;&nbsp;
color={"secondary"} variant={"text"} <Button
select={ size={"small"}
[ variant={"text"}
{ name: "1111111" }, text={"确定确定确定确定确定确定"}
{ name: "1111111" }, />
{ name: "1111111" }, <br />
{ name: "1111111", color: "red" }, <Button
] size={"large"}
} /> disabled
variant={"text"}
text={"确定确定确定确定确定确定"}
</> />
); &nbsp;&nbsp;
<Button variant={"text"} disabled text={"确定确定确定确定确定确定"} />
&nbsp;&nbsp;
<Button
size={"small"}
disabled
variant={"text"}
text={"确定确定确定确定确定确定"}
/>
<br />
<Button
size={"large"}
color={"secondary"}
variant={"text"}
text={"确定确定确定确定确定确定"}
/>
&nbsp;&nbsp;
<Button
variant={"text"}
color={"secondary"}
text={"确定确定确定确定确定确定"}
/>
&nbsp;&nbsp;
<Button
size={"small"}
color={"secondary"}
variant={"text"}
text={"确定确定确定确定确定确定"}
/>
<br /> <br />
img
<br />
<Button text={"确定确定确定确定确定确定"} img={<DeleteIcon />} />
<br /> <br />
select
<br />
<Button
text={"更多"}
select={[
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111", color: "red" },
]}
/>
<Button
text={"更多"}
color={"secondary"}
variant={"text"}
select={[
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111", color: "red" },
]}
/>
</>
);
}; };
export default memo(ProjectMembers); export default memo(ProjectMembers);
src/views/mui_demo/input.tsx
View file @ 72f8ff82
import { memo, useCallback, useEffect, useMemo, useState } from "react"; import { memo } from "react";
import _ from "lodash"; import { InputAdornment } from "@mui/material";
import { IResponse, useHttp } from "@/api/http";
import { useStores } from "@/store";
import DeleteIcon from '@mui/icons-material/Delete';
import { InputAdornment } from '@mui/material';
import InputComponent from "@/components/mui/Input"; import InputComponent from "@/components/mui/Input";
const ProjectMembers = () => { const ProjectMembers = () => {
const http = useHttp(); return (
<>
const { currentProjectStore } = useStores(); <InputComponent
fullWidth={false}
useEffect(() => { label={"test"}
defaultValue={"sssssssss"}
}, []); size={"large"}
/>
&nbsp;&nbsp;&nbsp;&nbsp;
return ( <InputComponent
<> fullWidth={false}
label={"test"}
<InputComponent error={true}
fullWidth={false} helperText={"你还急急急靠靠靠靠靠靠靠靠靠靠靠靠靠靠"}
label={"test"} />
defaultValue={"sssssssss"} &nbsp;&nbsp;&nbsp;&nbsp;
size={'large'} <InputComponent
/> fullWidth={false}
&nbsp;&nbsp;&nbsp;&nbsp; label={"test"}
<InputComponent size={"small"}
fullWidth={false} disabled
label={"test"} />
error={true} &nbsp;&nbsp;&nbsp;&nbsp;
helperText={"你还急急急靠靠靠靠靠靠靠靠靠靠靠靠靠靠"} <InputComponent fullWidth={false} label={"xsmall"} size={"xsmall"} />
/>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent <InputComponent
fullWidth={false} fullWidth={false}
label={"test"} placeholder={"测试机哦"}
size={'small'} endAdornment={
disabled <InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>
/>&nbsp;&nbsp;&nbsp;&nbsp; }
<InputComponent />
fullWidth={false} &nbsp;&nbsp;&nbsp;&nbsp;
label={"xsmall"} <InputComponent
size={'xsmall'} fullWidth={false}
/>&nbsp;&nbsp;&nbsp;&nbsp; size={"small"}
<InputComponent placeholder={"xxxxxx"}
fullWidth={false} endAdornment={
placeholder={"测试机哦"} <InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>
endAdornment={<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>} }
/>&nbsp;&nbsp;&nbsp;&nbsp; />
<InputComponent fullWidth={false} size={"small"} placeholder={"xxxxxx"} endAdornment={<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>} /> <br /> <br />
<br /> <br /> <InputComponent
<InputComponent fullWidth={true}
fullWidth={true} select={{
select={ json: [
{ { value: "1", label: "2" },
json: [{value:'1',label:"2"},{value:'3',label:"4"}] { value: "3", label: "4" },
} ],
} }}
/> />
<br /><br /> <br />
{/* <SelectComponent <br />
{/* <SelectComponent
option={json} option={json}
/> />
<br /><br /> <br /><br />
...@@ -72,10 +69,10 @@ const ProjectMembers = () => { ...@@ -72,10 +69,10 @@ const ProjectMembers = () => {
option={json} option={json}
size={"small"} size={"small"}
/> */} /> */}
<br /><br /> <br />
<br />
</> </>
); );
}; };
export default memo(ProjectMembers); export default memo(ProjectMembers);
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