Merge branch 'feat-20220718' into 'release'

Feat 20220718

See merge request !35

src/components/BusinessComponents/NoData/index.module.css

+.noDataBox {
+	background-color: #fff;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+}
+.noDataText {
+	margin-top: 8px;
+	font-size: 14px;
+	line-height: 22px;
+	color: #8a9099;
+}

src/components/BusinessComponents/NoData/index.tsx

+import noFile from "@/assets/project/noFile.svg";
+import style from "./index.module.css";
+
+type INoDataProps = {
+	text?: string;
+	noDataBoxStyle?: any;
+};
+
+const NoData = (props: INoDataProps) => {
+	return (
+		<div className={style.noDataBox} style={{ ...props.noDataBoxStyle }}>
+			<img className={style.noDataImg} src={noFile} alt="" />
+			<span className={style.noDataText}>
+				{props.text ? props.text : "暂无数据"}
+			</span>
+		</div>
+	);
+};
+
+export default NoData;

src/components/mui/MyCircularProgress.tsx

+// 局部loading组件  挂载在目标块下，目标块最少要添加一个position: relative; 或者absolute
+import CircularProgress from "@mui/material/CircularProgress";
+
+type IMyCircularProgressProps = {
+	loading: boolean;
+	minHeight?: string;
+	maxHeight?: string;
+	zIndex?: number;
+};
+
+const MyCircularProgress = (props: IMyCircularProgressProps) => {
+	const {
+		loading,
+		minHeight = "none",
+		maxHeight = "100vh",
+		zIndex = "100",
+	} = props;
+	if (loading) {
+		return (
+			<div
+				style={{
+					minHeight: minHeight,
+					width: "100%",
+					height: "100%",
+					position: "absolute",
+					top: 0,
+					zIndex: zIndex,
+				}}
+			>
+				<div
+					style={{
+						width: "100%",
+						height: "100%",
+						position: "absolute",
+						top: 0,
+						opacity: 0.6,
+						background: "#fff",
+					}}
+				></div>
+				<div
+					style={{
+						width: "100%",
+						height: "100%",
+						maxHeight: maxHeight,
+						display: "flex",
+						justifyContent: "center",
+						alignItems: "center",
+					}}
+				>
+					<CircularProgress></CircularProgress>
+				</div>
+			</div>
+		);
+	} else {
+		return null;
+	}
+};
+
+export default MyCircularProgress;

src/views/Project/ProjectData/SeeDataset/index.tsx

@@ -17,6 +17,7 @@ import { useStores } from "@/store";
 import { toJS } from "mobx";
 import classNames from "classnames";
 import Save from "./save";
+import NoData from "@/components/BusinessComponents/NoData";
 import Download from "./download";
 import style from "./index.module.css";
 
@@ -62,7 +63,9 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 		setSort(e);
 	};
 	const handleKeywordChange = (e: any) => {
+		if (e.target.value.length <= 30) {
 			setKeyword(e.target.value);
+		}
 	};
 
 	const pageChange = (value: number) => {
@@ -248,6 +251,8 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 					</div>
 				</div>
 				<div className={style.table}>
+					{list.length !== 0 && (
+						<>
 							<div className={style.list}>
 								{list.map((item, index) => {
 									return (
@@ -269,7 +274,10 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 												</div>
 											)}
 											<div className={style.datasetLiBottom}>
-										<div className={style.datasetLiTitle} title={item.smiles}>
+												<div
+													className={style.datasetLiTitle}
+													title={item.smiles}
+												>
 													{item.smiles}
 												</div>
 												{showData.length !== 0 && (
@@ -285,7 +293,9 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 																		<span className={style.datasetLiDataLiKey}>
 																			{key}
 																		</span>
-																<span className={style.datasetLiDataLiValue}>
+																		<span
+																			className={style.datasetLiDataLiValue}
+																		>
 																			{item.meta[key]}
 																		</span>
 																	</div>
@@ -341,9 +351,17 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 									);
 								})}
 							</div>
+
 							<div className={style.pagination}>
-						<MyPagination page={page} pageChange={pageChange} count={count} />
+								<MyPagination
+									page={page}
+									pageChange={pageChange}
+									count={count}
+								/>
 							</div>
+						</>
+					)}
+					{list.length === 0 && <NoData></NoData>}
 				</div>
 			</div>
 			<div className={style.foot}>

src/views/Project/ProjectData/index.module.css

@@ -12,6 +12,9 @@
 	font-weight: 600;
 	margin-bottom: 24px;
 }
+.projectDataHeader {
+	position: relative;
+}
 .projectDataButtonAndSearch {
 	display: flex;
 	justify-content: space-between;

src/views/Project/ProjectData/index.tsx

@@ -2,7 +2,6 @@ import React, { useState, useCallback, useEffect, useMemo } from "react";
 import style from "./index.module.css";
 import classnames from "classnames";
 import { IconButton } from "@mui/material";
-import SearchIcon from "@mui/icons-material/Search";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import MyTable from "@/components/mui/MyTable";
 import dataSetIcon from "@/assets/project/dataSetIcon.svg";
@@ -26,7 +25,6 @@ import { useLocation } from "react-router-dom";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import SeeDataset from "./SeeDataset";
 import { getDataFind, getDataFileSearch } from "@/api/project_api";
-import MyInput from "@/components/mui/MyInput";
 import MyButton from "@/components/mui/MyButton";
 import SearchInput from "@/components/BusinessComponents/SearchInput";
 

src/views/Project/ProjectSetting/BaseInfo/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-07-26 20:39:32
+ * @LastEditTime: 2022-07-28 18:32:03
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -318,7 +318,8 @@ const BaseInfo = observer(() => {
 					>
 						项目名称
 					</div>
-					<TextField
+
+					<MyInput
 						required
 						error={nameCheck.error}
 						id="name"
@@ -326,21 +327,8 @@ const BaseInfo = observer(() => {
 						value={projectInfo.name}
 						onChange={nameChange}
 						helperText={nameCheck.help}
-						size="small"
-						sx={{
-							width: "560px",
-							"& .MuiOutlinedInput-root": {
-								height: "36px",
-							},
-						}}
+						style={{ width: "560px" }}
 					/>
-					{/* <input
-            value={projectInfo.name}
-            className={style.projectInfoListLiValue}
-            onChange={nameChange}
-            maxLength={30}
-            placeholder="请输入项目名称"
-          ></input> */}
 				</div>
 				<div className={style.projectInfoListLi}>
 					<div className={style.projectInfoListLiLabel}>项目描述</div>
@@ -354,6 +342,13 @@ const BaseInfo = observer(() => {
 						placeholder="项目描述限制100字以内"
 						maxLength={100}
 					></textarea>
+					{/* <MyInput
+						value={projectInfo.desc}
+						multiline
+						rows={4}
+						placeholder="项目描述限制100字以内"
+						onChange={descChange}
+					/> */}
 				</div>
 				<div className={style.projectInfoListLi}>
 					<div className={style.projectInfoListLiLabel}>计算区</div>
@@ -375,42 +370,26 @@ const BaseInfo = observer(() => {
 				</div>
 				<div className={style.projectInfoListLi}>
 					<div className={style.projectInfoListLiLabel}>创建人</div>
-					<input
+					<MyInput
 						value={projectInfo.owner}
 						disabled
-						className={classnames({
-							[style.projectInfoListLiValue]: true,
-							[style.disable]: true,
-						})}
-					></input>
+						style={{ width: "560px" }}
+					/>
 				</div>
 				<div className={style.projectInfoListLi}>
 					<div className={style.projectInfoListLiLabel}>项目预算</div>
-					{/* <MyInput
-						sx={{
-							width: "560px",
-							'& .MuiOutlinedInput-root': {
-								height: '36px'
-							}
-						}}
-					/> */}
-					<TextField
+					<MyInput
 						required
 						error={budgetCheck.error}
 						disabled={currentUserName !== projectInfo.tenantUser}
-						id="projectBudget"
+						// id="projectBudget"
 						variant="outlined"
 						value={projectInfo.projectBudget}
 						onChange={budgetChange}
 						onBlur={budgetBlur}
 						helperText={budgetCheck.help}
-						size="small"
-						sx={{
-							width: "560px",
-							"& .MuiOutlinedInput-root": {
-								height: "36px",
-							},
-						}}
+						// size="small"
+						style={{ width: "560px" }}
 						InputProps={{
 							startAdornment: (
 								<InputAdornment position="start">¥</InputAdornment>
@@ -420,14 +399,11 @@ const BaseInfo = observer(() => {
 				</div>
 				<div className={style.projectInfoListLi}>
 					<div className={style.projectInfoListLiLabel}>扣费账号</div>
-					<input
+					<MyInput
 						value={projectInfo.tenantUser}
 						disabled
-						className={classnames({
-							[style.projectInfoListLiValue]: true,
-							[style.disable]: true,
-						})}
-					></input>
+						style={{ width: "560px" }}
+					/>
 				</div>
 				<div className={style.projectInfoListLi}>
 					<LoadingButton

src/views/Project/ProjectSetting/ProjectMembers/components/AddMember.tsx

@@ -2,23 +2,24 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-07-26 11:13:10
+ * @LastEditTime: 2022-07-28 18:10:42
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 import _ from "lodash";
-
-import Dialog from "@/components/mui/MyDialog";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { Box, OutlinedInput } from "@mui/material";
-import SearchIcon from "@mui/icons-material/Search";
+
+import Dialog from "@/components/mui/MyDialog";
 import { IResponse, useHttp } from "@/api/http";
 import { useStores } from "@/store";
 import { useMessage } from "@/components/MySnackbar";
 import MySelect, { IOption } from "@/components/mui/MySelect";
 import MyTable from "@/components/mui/MyTable";
+import SearchInput from "@/components/BusinessComponents/SearchInput";
+
 interface IProps {
 	setAddMemberDialog: (val: boolean) => void;
 	addMemberDialog: boolean;
@@ -158,19 +159,15 @@ const AddMember = observer((props: IProps) => {
 				title="添加成员"
 			>
 				<Box>
-					<Box sx={{ mb: 2 }}>
-						<OutlinedInput
-							onChange={(e: any) => {
-								_.debounce(() => {
+					<SearchInput
+						onKeyUp={(e: any) => {
+							if (e.keyCode === 13) {
 								setProjectMember(e.target.value);
-								}, 200)();
+							}
 						}}
 						placeholder="搜索项目成员"
-							size="small"
-							sx={{ width: "100%", height: 32 }}
-							endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
+						sx={{ mb: 2 }}
 					/>
-					</Box>
 					<div style={{ overflowY: "scroll", maxHeight: 400 }}>
 						<MyTable
 							checkboxData={(val: string[]) => setCheckData(val)}

src/views/Project/components/AddProject/index.tsx

-import style from "./index.module.css";
 import { MenuItem } from "@mui/material";
+import React, { useState, useEffect } from "react";
+
 import MyInput from "@/components/mui/MyInput";
 import MyDialog from "@/components/mui/MyDialog";
-import React, { useState, useEffect } from "react";
 import useMyRequest from "@/hooks/useMyRequest";
 import { hpczone, addProject } from "@/api/project_api";
 import { useMessage } from "@/components/MySnackbar";
@@ -14,6 +14,8 @@ import {
 	getFiletokenAccordingToId,
 } from "@/views/Project/project";
 
+import style from "./index.module.css";
+
 type zoneIdOption = {
 	id: string;
 	name: string;