Skip to content

B
bkunyun
Commit 537687c6 authored by jiangzijing's avatar jiangzijing
Browse files
Options

Merge branch 'feat-20220718' into 'staging' 

Feat 20220718

See merge request !33
parents c50be623 45c5f606
Hide whitespace changes
Inline Side-by-side
Showing with 348 additions and 431 deletions
src/components/mui/MyButton.tsx
View file @ 537687c6
......@@ -82,12 +82,12 @@ const theme = createTheme({
},
},
outlinedSecondary: {
border: "1px solid #FF4E4E",
border: "1px solid rgba(221, 225, 230, 1)",
boxShadow: "none !important",
color: "#FF4E4E",
color: "rgba(30, 38, 51, 1)",
"&:hover": {
backgroundColor: "#FFEDED ",
border: "1px solid #FF4E4E",
backgroundColor: "rgba(240, 242, 245, 1) ",
border: "1px solid rgba(221, 225, 230, 1)",
},
},
textSecondary: {
......
src/components/mui/MyDialog.tsx
View file @ 537687c6
......@@ -89,6 +89,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
onClick={onClose}
variant="outlined"
size="small"
color="secondary"
/>
) : null}
{showConfirm ? (
......
src/components/mui/MyInput.tsx
View file @ 537687c6
......@@ -37,27 +37,36 @@ const MyInput = (props: MyInputProps) => {
fontSize: "14px",
"&.MuiInputBase-sizeSmall": {
height: "32px",
"& .MuiOutlinedInput-notchedOutline": {
height: "34px",
},
},
},
multiline: {
height: "auto",
textarea: {
padding: 0,
},
},
input: {},
},
},
MuiInputLabel: {
styleOverrides: {
root: {
top: label ? "-5px" : "-10px",
top: "-9px",
},
shrink: {
top: 0,
},
sizeSmall: {
top: "-5px",
},
},
},
MuiOutlinedInput: {
styleOverrides: {
root: {
height: "36px",
lineHeight: "36px",
paddingRight: "12px",
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderWidth: "1px",
},
":hover": {
"& .MuiOutlinedInput-notchedOutline": error
? {}
......@@ -70,9 +79,6 @@ const MyInput = (props: MyInputProps) => {
padding: "6.5px 12px",
verticalAlign: "middle",
},
notchedOutline: {
height: "36px",
},
},
},
},
......
src/components/mui/MyInputCopy.tsx deleted 100644 → 0
View file @ c50be623
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-05 14:00:37
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-21 17:33:59
* @FilePath: /bkunyun/src/components/mui/MyInput.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import TextField, { TextFieldProps } from "@mui/material/TextField";
import { ThemeProvider, createTheme } from "@mui/material/styles";
interface MyInputProps extends Omit<TextFieldProps, "value"> {
value?: string;
variant?: "standard" | "filled" | "outlined";
size?: "small" | "medium";
placeholder?: string;
fullWidth?: boolean; // 宽度是否和容器一致
error?: boolean;
}
const MyInput = (props: MyInputProps) => {
const {
size = "medium",
placeholder = "请输入",
fullWidth = true,
error = false,
label,
...other
} = props;
const theme = createTheme({
components: {
MuiInputBase: {
styleOverrides: {
root: {
height: "36px",
fontSize: "14px",
"&.MuiInputBase-sizeSmall": {
height: "32px",
},
},
},
},
MuiInputLabel: {
styleOverrides: {
root: {
top: "-9px",
},
shrink: {
top: 0,
},
sizeSmall: {
top: "-5px",
},
},
},
MuiOutlinedInput: {
styleOverrides: {
root: {
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderWidth: "1px",
},
":hover": {
"& .MuiOutlinedInput-notchedOutline": error
? {}
: {
borderColor: "#1370ff",
},
},
},
input: {
padding: "6.5px 12px",
verticalAlign: "middle",
},
},
},
},
});
return (
<ThemeProvider theme={theme}>
<TextField
error={error}
size={size}
placeholder={placeholder}
fullWidth={fullWidth}
label={label}
{...other}
/>
</ThemeProvider>
);
};
export default MyInput;
src/views/ConsoleLayout/index.tsx
View file @ 537687c6
......@@ -97,14 +97,12 @@ const ConsoleLayout = observer(() => {
dropValue={productOpen}
drop={true}
/>
{/* <ArrowDropDownIcon classes={{
root: cx({
[style.ArrowDropDownIconRoot]: true,
[style.ArrowDropDownIconRootOpen]: Boolean(productOpen)
})
}} /> */}
<Menu
id="product-menu"
anchorEl={productAnchorEl}
......
src/views/Project/ProjectData/AddFolder/index.tsx
View file @ 537687c6
import React, { useState, useEffect } from "react";
import { useState, useEffect } from "react";
import { TextField } from "@mui/material";
import MyDialog from "@/components/mui/MyDialog";
import { checkIsNumberLetterChinese } from "@/utils/util";
import { useMessage } from "@/components/MySnackbar";
......
src/views/Project/ProjectOverview/TaskCard/index.module.css
View file @ 537687c6
......@@ -38,6 +38,7 @@
.taskName {
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.taskStatus {
......
src/views/Project/ProjectOverview/TaskCard/index.tsx
View file @ 537687c6
......@@ -13,6 +13,7 @@ import fileIcon from "@/assets/project/fileIcon.svg";
import dataSetIcon from "@/assets/project/dataSetIcon.svg";
type TaskCardProps = {
id: string;
name: string;
creator: string;
state: string;
......@@ -24,7 +25,7 @@ type TaskCardProps = {
};
const TaskCard = (props: TaskCardProps) => {
const { name, creator, state, completeNum, totalNum, costTime, jobCost, outputs } = props;
const { id, name, creator, state, completeNum, totalNum, costTime, jobCost, outputs } = props;
const navigate = useNavigate();
const randerOutputs = useMemo(() => {
if (outputs) {
......@@ -62,6 +63,12 @@ const TaskCard = (props: TaskCardProps) => {
});
}
}
// 跳转详情页
const gotoDetail = (id: string) => {
navigate(`/product/cadd/projectJobDetail`, {
state: { taskId: id },
});
}
// 渲染状态图标
const renderStatusIcon = (data: string) => {
switch (data) {
......@@ -140,7 +147,7 @@ const TaskCard = (props: TaskCardProps) => {
return <div className={style.cardBox}>
<div className={style.cardLeft}>
<div className={style.topLine}>
<div className={style.taskName}>{name}</div>
<div className={style.taskName} onClick={() => gotoDetail(id)}>{name}</div>
<div className={style.taskStatus} style={{ color: renderTextColor(state), background: renderBackgroundColor(state) }}>
<img src={renderStatusIcon(state)} alt="" className={style.statusImg} />
<span>{renderStatusText(state)}</span>
......@@ -152,7 +159,7 @@ const TaskCard = (props: TaskCardProps) => {
<div>Progress</div>
<div style={{ color: renderTextColor(state) }}>{completeNum + "/" + totalNum}</div>
</div>
<MyProgress color={renderProgressColor(state)} value={(completeNum / totalNum) * 100}/>
<MyProgress color={renderProgressColor(state)} value={(completeNum / totalNum) * 100} />
</div>
<div className={style.bottomLine}>
<img alt="" src={runTime} />
......
src/views/Project/ProjectOverview/index.module.css
View file @ 537687c6
......@@ -38,6 +38,10 @@
color: #565C66;
}
.otherInformationBoxRight{
color: #565C66;
}
.numberDisplay {
font-size: 20px;
font-weight: 600;
......@@ -48,7 +52,7 @@
.verticalLine {
height: 32px;
border: 1px solid #EBEDF0;
margin-left: 10px;
margin-left: 20px;
margin-right: 20px;
}
......
src/views/Project/ProjectOverview/index.tsx
View file @ 537687c6
......@@ -44,19 +44,23 @@ const ProjectOverview = observer(() => {
},
});
useEffect(() => {
getOverview({
id: currentProjectStore.currentProjectInfo.id as string,
});
if (currentProjectStore.currentProjectInfo.id) {
getOverview({
id: currentProjectStore.currentProjectInfo.id as string,
});
}
}, [currentProjectStore.currentProjectInfo.id, getOverview]);
useEffect(() => {
getTaskOverviewList({
projectId: currentProjectStore.currentProjectInfo.id as string,
jobName: jobName,
day: Number(day),
page: page,
size: size,
});
if (currentProjectStore.currentProjectInfo.id) {
getTaskOverviewList({
projectId: currentProjectStore.currentProjectInfo.id as string,
jobName: jobName,
day: Number(day),
page: page,
size: size,
});
}
}, [currentProjectStore.currentProjectInfo.id, getTaskOverviewList, day, jobName]);
const handleKeyWordChangeKeyUp = (e: any) => {
......@@ -64,6 +68,21 @@ const ProjectOverview = observer(() => {
setJobName(e.target.value);
}
}
const storageUnitFromB = (b: number) => {
if (b <= 0) {
return { data: '0.00', unit: 'KB' };
} else if (b < 1024 * 1024) {
return { data: (b / 1024).toFixed(2), unit: 'KB' };
} else if (b < 1024 * 1024 * 1024) {
return { data: (b / (1024 * 1024)).toFixed(2), unit: 'MB' };
} else if (b < 1024 * 1024 * 1024 * 1024) {
return { data: (b / (1024 * 1024 * 1024)).toFixed(2), unit: 'G' };
} else {
return { data: (b / (1024 * 1024 * 1024 * 1024)).toFixed(2), unit: 'T' };
}
};
if (currentProjectStore.currentProjectInfo.name) {
if (loading) {
return (
......@@ -90,18 +109,21 @@ const ProjectOverview = observer(() => {
</div>
<div className={style.basicInformationRight}>
<div>
<div className={style.otherInformationBox}>项目总消费</div>
<div className={style.otherInformationBoxRight}>项目总消费</div>
<div><span className={style.numberDisplay}>{overviewInfo.projectCost?.toFixed(2)}</span>元</div>
</div>
<div className={style.verticalLine}></div>
<div>
<div className={style.otherInformationBox}>项目剩余预算</div>
<div className={style.otherInformationBoxRight}>项目剩余预算</div>
<div><span className={style.numberDisplay}>{overviewInfo.projectRemainingBudget?.toFixed(2)}</span>元</div>
</div>
<div className={style.verticalLine}></div>
<div>
<div className={style.otherInformationBox}>项目存储大小</div>
<div><span className={style.numberDisplay}>{overviewInfo.projectStorage?.toFixed(2)}</span> G</div>
<div className={style.otherInformationBoxRight} style={{ marginRight: '20px' }}>项目存储大小</div>
<div>
<span className={style.numberDisplay}>{overviewInfo.projectStorage !== undefined ? storageUnitFromB(overviewInfo.projectStorage).data : ''}</span>
{overviewInfo.projectStorage !== undefined ? storageUnitFromB(overviewInfo.projectStorage).unit : ''}
</div>
</div>
</div>
</div>
......@@ -134,6 +156,7 @@ const ProjectOverview = observer(() => {
{/* 任务列表卡片渲染 */}
{taskList.length > 0 && taskList.map((item: any) => {
return <TaskCard
id={item.id}
name={item.name}
creator={item.creator}
state={item.state}
......
src/views/Project/ProjectSetting/BaseInfo/index.tsx
View file @ 537687c6
......@@ -23,7 +23,7 @@ import InformationDisplay from "@/components/CommonComponents/InformationDisplay
import classnames from "classnames";
import { TextField } from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton";
import InputAdornment from '@mui/material/InputAdornment';
import InputAdornment from "@mui/material/InputAdornment";
import { useMessage } from "@/components/MySnackbar";
import Loading from "@/views/Loading";
import MyDialog from "@/components/mui/MyDialog";
......@@ -59,6 +59,13 @@ const BaseInfo = observer(() => {
).name;
// 弹窗显示控制
const [dialogOpen, setDialogOpen] = useState(false);
// 打开弹窗时重置表单
useEffect(() => {
if (dialogOpen) {
setDeleteProjectName("");
}
}, [dialogOpen]);
// 是否拥有编辑权限
const hasEditAuth = useMemo(() => {
if (!currentUserName) {
......@@ -75,7 +82,10 @@ const BaseInfo = observer(() => {
}, [currentUserName, projectInfo]);
const { run, loading } = useMyRequest(getProject, {
onSuccess: (result: any) => {
setProjectInfo({ ...result.data, projectBudget: result.data.projectBudget.toFixed(2) });
setProjectInfo({
...result.data,
projectBudget: result.data.projectBudget.toFixed(2),
});
},
});
useEffect(() => {
......@@ -184,43 +194,50 @@ const BaseInfo = observer(() => {
});
};
const budgetChange = (e: any) => {
let inputValue = e.target.value.replace('.', '')
if (inputValue.indexOf('.') !== -1) {
setBudgetCheck({
error: true,
help: "格式错误，请输入正确的金额，可精确至分（两位小数）",
});
return
}
if (isNaN(Number(inputValue))) {
setBudgetCheck({
error: true,
help: "格式错误，请输入正确的金额，可精确至分（两位小数）",
});
return
const checkBudget = (budget: string, showMessage = false) => {
let help = "";
if (budget) {
if (isNaN(Number(budget)) || Number(budget) > 10000000 || Number(budget) < 0) {
help = "格式错误，请输入0~10000000之间的数值，结果最高保留两位小数。";
setBudgetCheck({
error: true,
help,
});
showMessage && message.error(help);
return false;
} else {
setBudgetCheck({
error: false,
help: "",
});
return true;
}
} else {
setProjectInfo({
...projectInfo,
projectBudget: e.target.value
})
help = "格式错误，请输入0~10000000之间的数值，结果最高保留两位小数。";
setBudgetCheck({
error: false,
help: "",
error: true,
help,
});
showMessage && message.error(help);
return false;
}
}
const budgetBlur = (e: any) => {
const budgetChange = (e: any) => {
setProjectInfo({
...projectInfo,
projectBudget: Number(e.target.value).toFixed(2)
})
setBudgetCheck({
error: false,
help: "",
projectBudget: e.target.value,
});
checkBudget(e.target.value);
}
const budgetBlur = (e: any) => {
setProjectInfo({
...projectInfo,
projectBudget: Number(e.target.value) ? Number(e.target.value).toFixed(2) : e.target.value,
});
};
const { run: updateProjectRun, loading: updateLoading } = useMyRequest(
updateProject,
{
......@@ -235,7 +252,7 @@ const BaseInfo = observer(() => {
// 修改项目
const handleClickUpdate = () => {
if (checkName(projectInfo.name, true)) {
if (checkName(projectInfo.name, true) && checkBudget(projectInfo.projectBudget, true)) {
updateProjectRun({ ...projectInfo, product: "cadd" });
} else {
return;
......@@ -312,9 +329,9 @@ const BaseInfo = observer(() => {
size="small"
sx={{
width: "560px",
'& .MuiOutlinedInput-root': {
height: '36px'
}
"& .MuiOutlinedInput-root": {
height: "36px",
},
}}
/>
{/* <input
......@@ -390,12 +407,14 @@ const BaseInfo = observer(() => {
size="small"
sx={{
width: "560px",
'& .MuiOutlinedInput-root': {
height: '36px'
}
"& .MuiOutlinedInput-root": {
height: "36px",
},
}}
InputProps={{
startAdornment: <InputAdornment position="start">¥</InputAdornment>,
startAdornment: (
<InputAdornment position="start">¥</InputAdornment>
),
}}
/>
</div>
......@@ -426,10 +445,10 @@ const BaseInfo = observer(() => {
删除项目将删除其存储的数据和所有相关资源，并且已删除的项目无法恢复！请谨慎操作！
</div>
<MyButton
text='删除项目'
text="删除项目"
variant="contained"
onClick={() => setDialogOpen(true)}
color='error'
color="error"
// style={{
// backgroundColor: "#fff",
// color: "#FF4E4E",
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ 537687c6
......@@ -310,7 +310,15 @@ const ConfigForm = (props: ConfigFormProps) => {
onBlur={() => setSelectedBatchNodeId("")}
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
handleParameterChange(
{
target: {
value: e,
},
},
taskId,
parameter.name || ""
)
}
error={parameter.error || false}
helpertext={parameter.helperText}
......@@ -324,7 +332,15 @@ const ConfigForm = (props: ConfigFormProps) => {
onBlur={() => setSelectedBatchNodeId("")}
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
handleParameterChange(
{
target: {
value: e,
},
},
taskId,
parameter.name || ""
)
}
multiple={true}
error={parameter.error || false}
......
src/views/Project/ProjectSubmitWork/components/MySelect.tsx deleted 100644 → 0
View file @ c50be623
import * as React from "react";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import FormHelperText from "@mui/material/FormHelperText";
import Select, { SelectProps } from "@mui/material/Select";
export interface IOption {
label: string;
value: string;
disabled?: boolean;
}
export const optionsTransform = (
arr: Array<any>,
labelKey: string = "label",
valueKey: string = "value",
disabledKey: string = "disabled"
): Array<IOption> => {
return arr.map((item: any) => {
return {
label: item[labelKey],
value: item[valueKey],
disabled: item[disabledKey],
};
});
};
interface IProps
extends Omit<SelectProps, "value" | "options" | "onChange" | "title"> {
value?: any;
options: IOption[];
onChange?: any;
/** 类型变种 */
variant?: "standard" | "outlined" | "filled";
/** title */
title?: string;
/** 是否显示title */
isTitle?: boolean;
size?: "small" | "medium";
multiple?: boolean; // 多选
error?: boolean;
helpertext?: string;
fullWidth?: boolean;
}
export default function MySelect(props: IProps) {
const {
value,
options,
onChange,
title,
isTitle = false,
variant,
size = "small",
multiple = false,
error = false,
helpertext,
fullWidth = true,
} = props;
return (
<FormControl fullWidth={fullWidth} variant={variant} error={error}>
{isTitle ? (
<InputLabel id="demo-simple-select-label">
{title || "请选择"}
</InputLabel>
) : null}
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
label={title || ""}
size={size}
{...props}
value={value}
onChange={onChange}
multiple={multiple}
>
{options.length
? options?.map((item: IOption) => {
return (
<MenuItem
key={item.value}
value={item.value}
disabled={item?.disabled}
>
{item.label}
</MenuItem>
);
})
: null}
</Select>
{helpertext && error && <FormHelperText>{helpertext}</FormHelperText>}
</FormControl>
);
}
src/views/Project/components/AddProject/index.module.css
View file @ 537687c6
.formBox {
height: 300px;
width: 388px;
display: flex;
flex-direction: column;
padding: 10px 0;
justify-content: space-around;
padding: 8px 0;
width: 388px;
}
src/views/Project/components/AddProject/index.tsx
View file @ 537687c6
import style from "./index.module.css";
import { TextField, MenuItem } from "@mui/material";
import { MenuItem } from "@mui/material";
import MyInput from "@/components/mui/MyInput";
import MyDialog from "@/components/mui/MyDialog";
import React, { useState, useEffect } from "react";
import useMyRequest from "@/hooks/useMyRequest";
......@@ -165,7 +166,7 @@ const AddProject = (props: IAddProjectProps) => {
title="新建项目"
>
<div className={style.formBox} onClick={handleFromBox}>
<TextField
<MyInput
required
error={nameCheck.error}
id="name"
......@@ -174,9 +175,9 @@ const AddProject = (props: IAddProjectProps) => {
value={name}
onChange={handleNameChange}
helperText={nameCheck.help}
size="small"
sx={{ marginBottom: "20px" }}
/>
<TextField
<MyInput
id="zoneId"
select
required
......@@ -185,7 +186,7 @@ const AddProject = (props: IAddProjectProps) => {
onChange={handleZoneIdChange}
variant="outlined"
onClick={handleFromBox}
size="small"
sx={{ marginBottom: "20px" }}
>
{zoneIdOptions &&
zoneIdOptions.map((option) => (
......@@ -193,19 +194,30 @@ const AddProject = (props: IAddProjectProps) => {
{option.name}
</MenuItem>
))}
</TextField>
<TextField
value={desc}
error={descCheck.error}
id="desc"
label="项目描述"
multiline
rows={4}
placeholder="请输入项目描述"
onChange={handleDescChange}
helperText={descCheck.help}
size="small"
/>
</MyInput>
<div style={{ position: "relative" }}>
<MyInput
value={desc}
error={descCheck.error}
id="desc"
label="项目描述"
multiline
rows={4}
placeholder="请输入项目描述"
onChange={handleDescChange}
helperText={descCheck.help}
/>
<span
style={{
position: "absolute",
bottom: "7px",
right: "12px",
color: "rgba(194, 198, 204, 1)",
}}
>
{desc.length}/100
</span>
</div>
</div>
</MyDialog>
);
......
src/views/Project/components/ProjectListPopper/index.module.css
View file @ 537687c6
.projectBox {
width: 260px;
height: calc(100vh - 57px);
background-color: #fff;
border-right: 1px solid #ebedf0;
display: flex;
flex-direction: column;
width: 260px;
height: calc(100vh - 57px);
background-color: #fff;
border-right: 1px solid #ebedf0;
display: flex;
flex-direction: column;
}
.searchBox {
box-sizing: border-box;
height: 56px;
padding: 17px;
display: flex;
flex-direction: row;
justify-content: space-between;
box-sizing: border-box;
height: 56px;
padding: 17px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.searchButton {
width: 22px;
height: 22px;
width: 22px;
height: 22px;
}
.searchIcon {
color: #999999;
color: #999999;
}
.searchInput {
margin: 0 6px;
flex: 1;
color: #1e2633;
/* #C2C6CC */
font-size: 14px;
line-height: 22px;
border-right: 1px solid #ebedf0;
margin: 0 6px;
flex: 1;
color: #1e2633;
/* #C2C6CC */
font-size: 14px;
line-height: 22px;
border-right: 1px solid #ebedf0;
}
.add {
padding: 0 15px;
width: 22px;
height: 22px;
padding: 0 15px;
width: 22px;
height: 22px;
}
.addIcon {
color: #1e2633;
color: #1e2633;
}
.projectlist {
flex: 1;
overflow-y: scroll;
flex: 1;
overflow-y: scroll;
border-top: 1px solid #f0f2f5;
}
.projectli {
cursor: pointer;
cursor: pointer;
}
.projectli:hover {
background-color: #f2f7ff;
background-color: rgba(240, 242, 245, 1);
}
.projectliActive {
background-color: rgba(237, 244, 255, 1);
}
.projectliBorderBox {
box-sizing: border-box;
height: 86px;
margin: 0 0 0 24px;
padding: 20px 24px 20px 0;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
border-top: 1px solid #f0f2f5;
box-sizing: border-box;
height: 86px;
margin: 0 0 0 24px;
padding: 20px 24px 20px 0;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
border-bottom: 1px solid #f0f2f5;
}
.projectliLogo {
width: 24px;
margin-right: 12px;
width: 24px;
margin-right: 12px;
}
.projectName {
color: #1e2633;
line-height: 22px;
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
width: 166px;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
overflow: hidden;
color: #1e2633;
line-height: 22px;
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
width: 166px;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
overflow: hidden;
}
.projectOwnerTime {
display: flex;
justify-content: space-between;
display: flex;
justify-content: space-between;
}
.projectOwner {
color: #565c66;
line-height: 20px;
font-size: 14px;
margin-right: 32px;
max-width: 60px;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
overflow: hidden;
color: #565c66;
line-height: 20px;
font-size: 14px;
margin-right: 32px;
max-width: 60px;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
overflow: hidden;
}
.projectTime {
color: #8a9099;
line-height: 20px;
font-size: 14px;
color: #8a9099;
line-height: 20px;
font-size: 14px;
}
src/views/Project/components/ProjectListPopper/index.tsx
View file @ 537687c6
......@@ -3,6 +3,7 @@ import style from "./index.module.css";
import { InputBase, IconButton } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import AddIcon from "@mui/icons-material/Add";
import classNames from "classnames";
import { useStores } from "@/store/index";
import moment from "moment";
import React, { useMemo, useState } from "react";
......@@ -10,77 +11,86 @@ import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
const ProjectListPopper = observer((props: any) => {
const { handleChangeCurrentProject, handleClickOpen } = props;
const { currentProjectStore } = useStores();
const [name, setName] = useState("");
const nameChange = (e: any) => {
setName(e.target.value);
};
const { handleChangeCurrentProject, handleClickOpen } = props;
const { currentProjectStore } = useStores();
const projectList = toJS(currentProjectStore.projectList);
const currentProjectName = toJS(currentProjectStore.currentProjectInfo.name);
// 通过名称本地搜索
const [name, setName] = useState("");
const nameChange = (e: any) => {
setName(e.target.value);
};
const list = useMemo(() => {
return toJS(currentProjectStore.projectList).filter((item: any) => {
return item.name?.indexOf(name) !== -1;
});
}, [currentProjectStore.projectList, name]);
const list = useMemo(() => {
return projectList.filter((item: any) => {
return item.name?.indexOf(name) !== -1;
});
}, [projectList, name]);
const handleProjectBox = (e: React.SyntheticEvent) => {
e.nativeEvent.stopImmediatePropagation();
};
const handleProjectBox = (e: React.SyntheticEvent) => {
e.nativeEvent.stopImmediatePropagation();
};
return (
<div className={style.projectBox} onClick={handleProjectBox}>
<div className={style.searchBox}>
<IconButton
type="submit"
className={style.searchButton}
aria-label="search"
>
<SearchIcon className={style.searchIcon} />
</IconButton>
<InputBase
className={style.searchInput}
placeholder="请输入项目名称"
inputProps={{ "aria-label": "请输入项目名称" }}
value={name}
onChange={nameChange}
/>
<IconButton
onClick={handleClickOpen}
type="submit"
className={style.add}
aria-label="search"
>
<AddIcon className={style.addIcon} />
</IconButton>
</div>
<div className={style.projectlist}>
{list.map((item: any) => {
return (
<div
className={style.projectli}
key={item.id}
onClick={() => handleChangeCurrentProject(item)}
>
<div className={style.projectliBorderBox}>
<img src={smallLogo} alt="" className={style.projectliLogo} />
<div className={style.projectliInfo}>
<div className={style.projectName}>{item.name}</div>
<div className={style.projectOwnerTime}>
<span className={style.projectOwner} title={item.owner}>
{item.owner}
</span>
<span className={style.projectTime}>
{moment(item.createdAt).format("YYYY-MM-DD")}
</span>
</div>
</div>
</div>
</div>
);
})}
</div>
</div>
);
return (
<div className={style.projectBox} onClick={handleProjectBox}>
<div className={style.searchBox}>
<IconButton
type="submit"
className={style.searchButton}
aria-label="search"
>
<SearchIcon
className={style.searchIcon}
style={{ color: "rgba(153, 153, 153, 1)" }}
/>
</IconButton>
<InputBase
className={style.searchInput}
placeholder="请输入项目名称"
inputProps={{ "aria-label": "请输入项目名称" }}
value={name}
onChange={nameChange}
/>
<IconButton
onClick={handleClickOpen}
type="submit"
className={style.add}
aria-label="search"
>
<AddIcon className={style.addIcon} />
</IconButton>
</div>
<div className={style.projectlist}>
{list.map((item: any) => {
return (
<div
className={classNames({
[style.projectli]: true,
[style.projectliActive]: item.name === currentProjectName,
})}
key={item.id}
onClick={() => handleChangeCurrentProject(item)}
>
<div className={style.projectliBorderBox}>
<img src={smallLogo} alt="" className={style.projectliLogo} />
<div className={style.projectliInfo}>
<div className={style.projectName}>{item.name}</div>
<div className={style.projectOwnerTime}>
<span className={style.projectOwner} title={item.owner}>
{item.owner}
</span>
<span className={style.projectTime}>
{moment(item.createdAt).format("YYYY-MM-DD")}
</span>
</div>
</div>
</div>
</div>
);
})}
</div>
</div>
);
});
export default ProjectListPopper;
src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
View file @ 537687c6
......@@ -9,9 +9,6 @@ import {
import noTemplate from "@/assets/project/noTemplate.svg";
import MyInput from "@/components/mui/MyInput";
import MyCheckBox from "@/components/mui/MyCheckBox";
// import MySelect, {
// optionsTransform,
// } from "../../../Project/ProjectSubmitWork/components/MySelect";
import MySelect from "@/components/mui/MySelect";
import FileSelect, {
FileSelectType,
......@@ -491,7 +488,14 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<MySelect
value={parameter.defaultValue}
onChange={(e: any) =>
handleParameterChange(e, parameter.name || "")
handleParameterChange(
{
target: {
value: e,
},
},
parameter.name || ""
)
}
error={parameter.error || false}
helpertext={parameter.helperText}
......@@ -503,7 +507,14 @@ const ParameterSetting = (props: IParameterSettingProps) => {
<MySelect
value={parameter.defaultValue}
onChange={(e: any) =>
handleParameterChange(e, parameter.name || "")
handleParameterChange(
{
target: {
value: e,
},
},
parameter.name || ""
)
}
multiple={true}
error={parameter.error || false}
......
src/views/mui_demo/input.tsx
View file @ 537687c6
import { memo } from "react";
import { InputAdornment } from "@mui/material";
// import InputComponent from "@/components/mui/MyInput";
import InputComponent from "@/components/mui/MyInputCopy";
import InputComponent from "@/components/mui/MyInput";
const ProjectMembers = () => {
return (
......
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