Browse Source

chore: 优化当删除FormList的Item时,如果没有填写内容,则直接删除

pull/179/head
cp3hnu 11 months ago
parent
commit
871c8d7b5a
6 changed files with 78 additions and 40 deletions
  1. +9
    -7
      react-ui/src/pages/AutoML/components/CreateForm/TrialConfig.tsx
  2. +12
    -9
      react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx
  3. +1
    -1
      react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.tsx
  4. +12
    -11
      react-ui/src/pages/ModelDeployment/CreateVersion/index.tsx
  5. +2
    -1
      react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx
  6. +42
    -11
      react-ui/src/utils/ui.tsx

+ 9
- 7
react-ui/src/pages/AutoML/components/CreateForm/TrialConfig.tsx View File

@@ -1,6 +1,6 @@
import SubAreaTitle from '@/components/SubAreaTitle';
import { AutoMLTaskType } from '@/enums';
import { modalConfirm } from '@/utils/ui';
import { removeFormListItem } from '@/utils/ui';
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { Button, Col, Flex, Form, Input, InputNumber, Radio, Row, Select } from 'antd';
import { classificationMetrics, regressionMetrics } from './ExecuteConfig';
@@ -72,12 +72,14 @@ function TrialConfig() {
type="text"
icon={<MinusCircleOutlined />}
onClick={() => {
modalConfirm({
title: '确定要删除该指标权重吗?',
onOk: () => {
remove(name);
},
});
removeFormListItem(
form,
'metrics',
name,
remove,
['name', 'value'],
'删除后,该该指标权重将不可恢复',
);
}}
></Button>
{index === fields.length - 1 && (


+ 12
- 9
react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx View File

@@ -8,7 +8,7 @@ import SubAreaTitle from '@/components/SubAreaTitle';
import { hyperParameterOptimizedModeOptions } from '@/enums';
import { useComputingResource } from '@/hooks/resource';
import { isEmpty } from '@/utils';
import { modalConfirm } from '@/utils/ui';
import { modalConfirm, removeFormListItem } from '@/utils/ui';
import { MinusCircleOutlined, PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import {
Button,
@@ -396,12 +396,14 @@ function ExecuteConfig() {
size="middle"
icon={<MinusCircleOutlined />}
onClick={() => {
modalConfirm({
title: '确定要删除该参数吗?',
onOk: () => {
remove(name);
},
});
removeFormListItem(
form,
'parameters',
name,
remove,
['name', 'type'],
'删除后,该参数将不可恢复',
);
}}
></Button>
{index === fields.length - 1 && (
@@ -460,7 +462,7 @@ function ExecuteConfig() {
);
if (arr.length > 0 && arr.length < runParameters.length) {
return Promise.reject(
new Error(`手动运行超参数 ${name} 必须全部填写或者都不填写`),
new Error(`手动运行超参数 "${name}" 必须全部填写或者都不填写`),
);
}
}
@@ -518,7 +520,8 @@ function ExecuteConfig() {
icon={<MinusCircleOutlined />}
onClick={() => {
modalConfirm({
title: '确定要删除该运行参数吗?',
title: '删除后,该运行参数将不可恢复',
content: '是否确认删除?',
onOk: () => {
remove(name);
},


+ 1
- 1
react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.tsx View File

@@ -68,7 +68,7 @@ function ParameterRange({ type, value, onConfirm }: ParameterRangeProps) {
<Flex
style={{
marginLeft: '10px',
marginBottom: '20px',
marginBottom: '24px',
flex: 'none',
width: '66px',
}}


+ 12
- 11
react-ui/src/pages/ModelDeployment/CreateVersion/index.tsx View File

@@ -20,7 +20,7 @@ import {
import { changePropertyName } from '@/utils';
import { to } from '@/utils/promise';
import SessionStorage from '@/utils/sessionStorage';
import { modalConfirm } from '@/utils/ui';
import { removeFormListItem } from '@/utils/ui';
import { MinusCircleOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { useNavigate, useParams } from '@umijs/max';
import { App, Button, Col, Flex, Form, Input, InputNumber, Row, Select } from 'antd';
@@ -434,7 +434,6 @@ function CreateServiceVersion() {
{fields.map(({ key, name, ...restField }, index) => (
<Flex
key={key}
align="center"
gap="0 8px"
style={{
position: 'relative',
@@ -453,16 +452,16 @@ function CreateServiceVersion() {
},
]}
>
<Input placeholder="请输入变量名" disabled={disabled} />
<Input placeholder="请输入变量名" disabled={disabled} allowClear />
</Form.Item>
<span style={{ marginBottom: '24px' }}>=</span>
<span style={{ lineHeight: '46px' }}>=</span>
<Form.Item
{...restField}
name={[name, 'value']}
style={{ flex: 1 }}
rules={[{ required: true, message: '请输入变量值' }]}
>
<Input placeholder="请输入变量值" disabled={disabled} />
<Input placeholder="请输入变量值" disabled={disabled} allowClear />
</Form.Item>
<Flex
style={{
@@ -484,12 +483,14 @@ function CreateServiceVersion() {
icon={<MinusCircleOutlined />}
disabled={disabled}
onClick={() => {
modalConfirm({
title: '确定要删除该环境变量吗?',
onOk: () => {
remove(name);
},
});
removeFormListItem(
form,
'env_variables',
name,
remove,
['key', 'value'],
'删除后,该环境变量将不可恢复',
);
}}
></Button>
{index === fields.length - 1 && (


+ 2
- 1
react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx View File

@@ -40,7 +40,8 @@ const GlobalParamsDrawer = forwardRef(

const removeParameter = (name: number, remove: (param: number) => void) => {
modalConfirm({
title: '确认删除该参数吗?',
title: '删除后,该全局参数将不可恢复',
content: '是否确认删除?',
onOk: () => {
remove(name);
},


+ 42
- 11
react-ui/src/utils/ui.tsx View File

@@ -8,7 +8,16 @@ import { removeAllPageCacheState } from '@/hooks/pageCacheState';
import themes from '@/styles/theme.less';
import { type ClientInfo } from '@/types';
import { history } from '@umijs/max';
import { Modal, Upload, message, type ModalFuncProps, type UploadFile } from 'antd';
import {
Modal,
Upload,
message,
type FormInstance,
type ModalFuncProps,
type UploadFile,
} from 'antd';
import { NamePath } from 'antd/es/form/interface';
import { isEmpty } from './index';
import { closeAllModals } from './modal';
import SessionStorage from './sessionStorage';

@@ -143,16 +152,38 @@ export const limitUploadFileType = (type: string) => {
};

/**
* 滚动到底部
*
* @param {boolean} smooth - Determines if the scroll should be smooth
* 删除 FormList 表单项,如果表单项没有值,则直接删除,否则弹出确认框
* @param form From实例
* @param listName FormList 的 name
* @param name FormList 的其中一项
* @param remove FormList 的删除方法
* @param fieldNames FormList 的子项名称数组
* @param confirmTitle 弹出确认框的标题
*/
export const scrollToBottom = (element: HTMLElement | null, smooth: boolean = true) => {
if (element) {
const optons: ScrollToOptions = {
top: element.scrollHeight,
behavior: smooth ? 'smooth' : 'instant',
};
element.scrollTo(optons);
export const removeFormListItem = (
form: FormInstance,
listName: NamePath,
name: number,
remove: (name: number) => void,
fieldNames: NamePath[],
confirmTitle: string,
) => {
const fields = fieldNames.map((item) => [listName, name, item].flat());
const isEmptyField = fields.every((item) => {
const value = form.getFieldValue(item);
return isEmpty(value);
});

if (isEmptyField) {
remove(name);
return;
}

modalConfirm({
title: confirmTitle,
content: '是否确认删除?',
onOk: () => {
remove(name);
},
});
};

Loading…
Cancel
Save