fix: expand model after edting replicas

This commit is contained in:
jialin
2025-10-27 14:13:47 +08:00
parent 7e81871118
commit 6969cb0b9c
5 changed files with 36 additions and 182 deletions
@@ -135,7 +135,11 @@ const CellContent: React.FC<CellContentProps> = (props) => {
...row,
[dataIndex]: current
},
dataIndex
{
dataIndex,
newValue: current,
oldValue: row[dataIndex]
}
);
setIsEditing(false);
};
@@ -1,11 +1,6 @@
import { CheckOutlined, FormOutlined, UndoOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Input, InputNumber, Tooltip } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import React, { useContext, useEffect } from 'react';
import React from 'react';
import styled from 'styled-components';
import RowContext from '../row-context';
import { SealColumnProps } from '../types';
import CellContent from './cell-content';
@@ -33,146 +28,8 @@ const CellWrapper = styled.div`
}
`;
interface EditButtonsProps {
isEditing: boolean;
editable?: any;
handleSubmit: () => void;
handleUndo: () => void;
handleEdit: () => void;
}
interface CellContentProps {
isEditing: boolean;
current: any;
editable: any;
onChange: (val: any) => void;
row?: any;
render?: (text: any, record: any) => React.ReactNode;
}
const EditButtons: React.FC<EditButtonsProps> = (props) => {
const intl = useIntl();
const { isEditing, editable, handleSubmit, handleUndo, handleEdit } = props;
if (!editable) {
return null;
}
if (isEditing) {
return (
<span className="flex-column">
<Tooltip
key="confirm"
title={intl.formatMessage({ id: 'common.button.confirm' })}
>
<Button
type="text"
size="small"
className="m-l-10"
onClick={handleSubmit}
>
<CheckOutlined />
</Button>
</Tooltip>
<Tooltip
title={intl.formatMessage({ id: 'common.button.cancel' })}
key="undo"
>
<Button
type="text"
size="small"
className="m-l-10"
onClick={handleUndo}
>
<UndoOutlined />
</Button>
</Tooltip>
</span>
);
}
return (
<span className="flex-column">
<Tooltip
key="edit"
title={
_.isBoolean(editable) ? (
intl.formatMessage({ id: 'common.button.edit' })
) : (
<span>{editable.title || ''}</span>
)
}
>
<Button
type="text"
size="small"
className="m-l-10"
onClick={handleEdit}
>
<FormOutlined />
</Button>
</Tooltip>
</span>
);
};
const Content: React.FC<CellContentProps> = (props) => {
const { editable, current, isEditing, row, render, onChange } = props;
if (isEditing && editable) {
const isNumType =
typeof editable === 'object' && editable?.valueType === 'number';
return isNumType ? (
<InputNumber
style={{ width: '80px' }}
min={0}
value={current}
onChange={onChange}
/>
) : (
<Input value={current} onChange={(e) => onChange(e.target.value)} />
);
}
if (render) {
return render(current, row);
}
return current;
};
const TableCell: React.FC<SealColumnProps> = (props) => {
const { row, onCell } = useContext(RowContext);
const { dataIndex, render, align, editable } = props;
const [isEditing, setIsEditing] = React.useState(false);
const [current, setCurrent] = React.useState(row[dataIndex]);
const cachedValue = React.useRef(null);
const handleEdit = () => {
setIsEditing(true);
};
const handleSubmit = async () => {
cachedValue.current = current;
await onCell?.(
{
...row,
[dataIndex]: current
},
dataIndex
);
setIsEditing(false);
};
const handleUndo = () => {
setCurrent(cachedValue.current);
setIsEditing(false);
};
const handleValueChange = (val: any) => {
setCurrent(val);
};
useEffect(() => {
cachedValue.current = row[dataIndex];
setCurrent(row[dataIndex]);
}, [row[dataIndex]]);
return (
<CellWrapper
@@ -182,23 +39,6 @@ const TableCell: React.FC<SealColumnProps> = (props) => {
right: align === 'right'
})}
>
{/* <span className="cell-content flex-center">
<Content
onChange={handleValueChange}
isEditing={isEditing}
editable={editable}
current={current}
row={row}
render={render}
></Content>
<EditButtons
editable={editable}
isEditing={isEditing}
handleEdit={handleEdit}
handleSubmit={handleSubmit}
handleUndo={handleUndo}
></EditButtons>
</span> */}
<CellContent
dataIndex={dataIndex}
render={render}
+4 -1
View File
@@ -2,7 +2,10 @@ import React from 'react';
interface RowContextType {
row: Record<string, any>;
onCell?: (record: any, dataIndex: string) => any;
onCell?: (
record: any,
data: { dataIndex: string; newValue: any; oldValue: any }
) => any;
}
const RowContext = React.createContext<RowContextType>({} as RowContextType);
+22 -19
View File
@@ -218,14 +218,17 @@ const Models: React.FC<ModelsProps> = ({
setSortOrder(order);
};
const handleOnCell = useCallback(async (record: any) => {
const handleOnCell = useMemoizedFn(async (record: any, extra: any) => {
try {
await updateModel(getFormattedData(record));
message.success(intl.formatMessage({ id: 'common.message.success' }));
if (extra.newValue > extra.oldValue) {
updateExpandedRowKeys([record.id, ...expandedRowKeys]);
}
} catch (error) {
// ignore
}
}, []);
});
const handleStartModel = async (row: ListItem) => {
await updateModel(getFormattedData(row, { replicas: 1 }));
@@ -236,23 +239,23 @@ const Models: React.FC<ModelsProps> = ({
removeExpandedRowKey([row.id]);
};
const handleModalOk = useCallback(
async (data: FormData) => {
try {
await updateModel({
data,
id: currentData.current?.id as number
});
setOpenAddModal(false);
message.success(intl.formatMessage({ id: 'common.message.success' }));
setTimeout(() => {
handleSearch();
}, 150);
restoreScrollHeight();
} catch (error) {}
},
[handleSearch]
);
const handleModalOk = async (data: FormData) => {
try {
await updateModel({
data,
id: currentData.current?.id as number
});
setOpenAddModal(false);
message.success(intl.formatMessage({ id: 'common.message.success' }));
if (data.replicas > currentData.current?.replicas) {
updateExpandedRowKeys([currentData.current?.id, ...expandedRowKeys]);
}
setTimeout(() => {
handleSearch();
}, 150);
restoreScrollHeight();
} catch (error) {}
};
const handleModalCancel = useCallback(() => {
setOpenAddModal(false);
+4
View File
@@ -102,6 +102,10 @@ const AddModal: React.FC<AddModalProps> = ({
<Form.Item<FormData> name="is_admin" rules={[{ required: false }]}>
<SealSelect
label={intl.formatMessage({ id: 'users.table.role' })}
disabled={
data?.id === initialState?.currentUser?.id &&
action === PageAction.EDIT
}
>
{UserRolesOptions.map((item) => {
return (