feact: 任务列表、服务器状态
JINGYJ
1 year ago
parent
e3307046be
commit
b7bae347c6
@ -0,0 +1,54 @@
|
||||
/**
|
||||
* 停止按钮
|
||||
*
|
||||
*/
|
||||
import { DeleteOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Popconfirm } from 'antd';
|
||||
import { proIconForTableActionStyle } from '../../../config/defaultIcon';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
type StopBtnProps = {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
buttonType?: 'defalut' | 'deleteIcon';
|
||||
deleteApi: () => void;
|
||||
};
|
||||
|
||||
const StopBtn: React.FC<StopBtnProps> = (props) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<Popconfirm
|
||||
key="destroy"
|
||||
placement="topLeft"
|
||||
title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
|
||||
description={intl.formatMessage({
|
||||
id: 'common.modal.table.stop.content',
|
||||
defaultMessage: '$$$',
|
||||
})}
|
||||
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
|
||||
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
|
||||
onConfirm={() => {
|
||||
props.deleteApi();
|
||||
}}
|
||||
>
|
||||
{/* {props.buttonType === 'deleteIcon' ? (
|
||||
<>
|
||||
<DeleteOutlined style={{
|
||||
color: "rgba(232, 13, 13, 1)",
|
||||
...proIconForTableActionStyle
|
||||
}} />
|
||||
</>
|
||||
) : (
|
||||
<Button type="link" size="small" danger>
|
||||
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
|
||||
</Button>
|
||||
)} */}
|
||||
<Button type="link" size="small" danger>
|
||||
<FormattedMessage id="pages.searchTable.stop" defaultMessage="Destroy" />
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
);
|
||||
};
|
||||
|
||||
export default StopBtn;
|
||||
@ -0,0 +1,185 @@
|
||||
/**
|
||||
* 服务器状态新建弹框
|
||||
*
|
||||
*/
|
||||
import { postBusinessImageCreateBusinessImage } from '@/services/resource/BusinessImage';
|
||||
import { ModalForm, ProForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
|
||||
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||
import { Button, Form, message } from 'antd';
|
||||
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
|
||||
import React from 'react';
|
||||
export type FormValueType = {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
} & Partial<API.BusinessImage>;
|
||||
|
||||
export type CreateFormProps = {
|
||||
createModalOpen: boolean;
|
||||
handleModal: () => void;
|
||||
values: Partial<API.BusinessImage>;
|
||||
reload: any;
|
||||
};
|
||||
const CreateForm: React.FC<CreateFormProps> = (props) => {
|
||||
const intl = useIntl();
|
||||
const [form] = Form.useForm<API.BusinessImage>();
|
||||
|
||||
return (
|
||||
<ModalForm<API.BusinessImage>
|
||||
width={proFormModelWidth}
|
||||
title={intl.formatMessage({
|
||||
id: 'resource.server_status.table.list.add',
|
||||
defaultMessage: '$$$',
|
||||
})}
|
||||
open={props.createModalOpen}
|
||||
form={form}
|
||||
autoFocusFirstInput
|
||||
modalProps={{
|
||||
destroyOnClose: true,
|
||||
onCancel: () => props.handleModal(),
|
||||
}}
|
||||
submitTimeout={2000}
|
||||
onFinish={async (values) => {
|
||||
postBusinessImageCreateBusinessImage(values)
|
||||
.then(() => {
|
||||
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||
props.reload();
|
||||
})
|
||||
.catch(() => {
|
||||
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||
});
|
||||
props.handleModal();
|
||||
return true;
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="resource.server_status.table.list.parameter" defaultMessage="$$$" />
|
||||
<ProForm.Group>
|
||||
<ProFormText
|
||||
width={proFormItemStyleProps.column2Width}
|
||||
name="name"
|
||||
label={
|
||||
<FormattedMessage id="resource.server_status.table.list.name" defaultMessage="$$$" />
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'resource.server_status.table.list.name',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="resource.server_status.table.list.name"
|
||||
defaultMessage="name is required"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormItemStyleProps.column2Width}
|
||||
name="userName"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="resource.server_status.table.list.userName"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'resource.server_status.table.list.userName',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="resource.server_status.table.list.userName"
|
||||
defaultMessage="version is required"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormItemStyleProps.column2Width}
|
||||
name="ip"
|
||||
label={
|
||||
<FormattedMessage id="resource.server_status.table.list.ip" defaultMessage="$$$" />
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'resource.server_status.table.list.ip',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormItemStyleProps.column2Width}
|
||||
name="password"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="resource.server_status.table.list.password"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'resource.server_status.table.list.password',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormItemStyleProps.column2Width}
|
||||
name="defaultPort"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="resource.server_status.table.list.defaultPort"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'resource.server_status.table.list.defaultPort',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
/>
|
||||
<ProFormTextArea
|
||||
width={proFormItemStyleProps.width}
|
||||
name="publicKeyString"
|
||||
label={
|
||||
<FormattedMessage id="resource.server_status.table.list.publicKeyString" defaultMessage="$$$" />
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'resource.server_status.table.list.publicKeyString',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
/>
|
||||
<Button type="primary" ghost><FormattedMessage id="resource.server_status.table.list.connectivityTesting" defaultMessage="$$$" /></Button>
|
||||
</ProForm.Group>
|
||||
</ModalForm>
|
||||
);
|
||||
};
|
||||
export default CreateForm;
|
||||
@ -0,0 +1,115 @@
|
||||
/*
|
||||
* @Author: zhoux zhouxia@supervision.ltd
|
||||
* @Date: 2023-11-06 16:12:17
|
||||
* @LastEditors: zhoux zhouxia@supervision.ltd
|
||||
* @LastEditTime: 2023-12-11 16:12:17
|
||||
* @FilePath: \general-ai-platform-web\src\pages\Setting\components\ProjectCardList.tsx
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
import React from 'react';
|
||||
|
||||
import { Progress } from 'antd';
|
||||
// import { postModelVersionGetModelVersionListByIds } from '@/services/resource/ModelVersion';
|
||||
|
||||
// const [tabs, setTabs] = useState([]);
|
||||
// const [projectData, setProjectData] = useState<any>({});
|
||||
// const [tab, setTab] = useState('');
|
||||
// const [modelVersionData, setModelVersionData] = useState<any[]>([]);
|
||||
|
||||
/**styles */
|
||||
const listItemStyle = {
|
||||
display: 'flex',
|
||||
fontSize: 14,
|
||||
color: '#333333',
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
padding: '8px 0 0',
|
||||
};
|
||||
|
||||
const listItemLabelStyle = {
|
||||
fontSize: 14,
|
||||
color: '#666666',
|
||||
minWidth: 40,
|
||||
};
|
||||
|
||||
const listItemTextStyle = {
|
||||
fontSize: 14,
|
||||
margin: 0,
|
||||
};
|
||||
// 卡片
|
||||
export type UpdateProjectProps = {
|
||||
info: Record<string, any>;
|
||||
// reload: any;
|
||||
};
|
||||
|
||||
type DeviceItemProgress = {
|
||||
label: string;
|
||||
percent: number;
|
||||
};
|
||||
|
||||
// 进度条
|
||||
// TODO 进度条的边框圆角调整为矩形
|
||||
const DeviceItemProgress: React.FC<DeviceItemProgress> = (props) => {
|
||||
let strokeColor = 'rgb(243,48,5)';
|
||||
switch (props.label) {
|
||||
case 'CPU':
|
||||
strokeColor = 'rgb(243,48,5)';
|
||||
break;
|
||||
case '内存':
|
||||
strokeColor = 'rgb(33,169,122)';
|
||||
break;
|
||||
case '存储':
|
||||
strokeColor = 'rgb(33,169,122)';
|
||||
break;
|
||||
case 'GPU':
|
||||
strokeColor = 'rgb(250,173,20)';
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ width: '100%', display: 'flex' }} className='rectProgress_box'>
|
||||
<span style={listItemLabelStyle}>{props.label}</span>
|
||||
<Progress style={{padding:0, margin: 0, borderRadius: 0}} size={['100%', 10]} height={46} percent={props.percent * 100} strokeColor={strokeColor} showInfo={false} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const DeviceStatusCard: React.FC<UpdateProjectProps> = ({
|
||||
info,
|
||||
}: {
|
||||
info: Record<string, any>;
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'left',
|
||||
paddingLeft: 15,
|
||||
paddingRight: 15,
|
||||
}}
|
||||
>
|
||||
{/* <div style={{ display: 'flex', alignItems: 'center', paddingBottom: 10 }}>
|
||||
<span style={{ fontWeight: 700, fontSize: 14, paddingRight: 10 }}>苏胜天算法模型</span>
|
||||
<Tag color="#44AEF5">经典算法</Tag>
|
||||
</div> */}
|
||||
<ul style={{width: '100%'}}>
|
||||
<li style={listItemStyle}>
|
||||
<DeviceItemProgress label="CPU" percent={0.79}></DeviceItemProgress>
|
||||
</li>
|
||||
<li style={listItemStyle}>
|
||||
<DeviceItemProgress label="内存" percent={0.18}></DeviceItemProgress>
|
||||
</li>
|
||||
<li style={listItemStyle}>
|
||||
<DeviceItemProgress label="存储" percent={0.16}></DeviceItemProgress>
|
||||
</li>
|
||||
<li style={listItemStyle}>
|
||||
<DeviceItemProgress label="GPU" percent={0.58}></DeviceItemProgress>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeviceStatusCard;
|
||||
@ -0,0 +1,191 @@
|
||||
/**
|
||||
* 服务器状态编辑弹框
|
||||
*
|
||||
*/
|
||||
import { putBusinessImageUpdateBusinessImage } from '@/services/resource/BusinessImage';
|
||||
import {
|
||||
ModalForm,
|
||||
ProForm,
|
||||
ProFormText,
|
||||
ProFormTextArea,
|
||||
} from '@ant-design/pro-components';
|
||||
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||
import { Button, Form, message } from 'antd';
|
||||
import React from 'react';
|
||||
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
|
||||
export type FormValueType = {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
} & Partial<API.BusinessImage>;
|
||||
|
||||
export type UpdateFormProps = {
|
||||
updateModalOpen: boolean;
|
||||
handleModal: () => void;
|
||||
values: Partial<API.BusinessImage>;
|
||||
reload: any;
|
||||
};
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||
const intl = useIntl();
|
||||
const [form] = Form.useForm<API.BusinessImage>();
|
||||
|
||||
return (
|
||||
<ModalForm<API.BusinessImage>
|
||||
width={proFormModelWidth}
|
||||
title={intl.formatMessage({
|
||||
id: 'resource.business_image.table.list.update',
|
||||
defaultMessage: '$$$',
|
||||
})}
|
||||
open={props.updateModalOpen}
|
||||
form={form}
|
||||
autoFocusFirstInput
|
||||
modalProps={{
|
||||
destroyOnClose: true,
|
||||
onCancel: () => props.handleModal(),
|
||||
}}
|
||||
submitTimeout={2000}
|
||||
onFinish={async (values) => {
|
||||
putBusinessImageUpdateBusinessImage(values)
|
||||
.then(() => {
|
||||
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||
props.reload();
|
||||
})
|
||||
.catch(() => {
|
||||
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||
});
|
||||
|
||||
props.handleModal();
|
||||
return true;
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="resource.server_status.table.list.parameter" defaultMessage="$$$" />
|
||||
<ProForm.Group>
|
||||
<ProFormText
|
||||
width={proFormItemStyleProps.column2Width}
|
||||
name="name"
|
||||
label={
|
||||
<FormattedMessage id="resource.server_status.table.list.name" defaultMessage="$$$" />
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'resource.server_status.table.list.name',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="resource.server_status.table.list.name"
|
||||
defaultMessage="name is required"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormItemStyleProps.column2Width}
|
||||
name="userName"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="resource.server_status.table.list.userName"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'resource.server_status.table.list.userName',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="resource.server_status.table.list.userName"
|
||||
defaultMessage="version is required"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormItemStyleProps.column2Width}
|
||||
name="ip"
|
||||
label={
|
||||
<FormattedMessage id="resource.server_status.table.list.ip" defaultMessage="$$$" />
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'resource.server_status.table.list.ip',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormItemStyleProps.column2Width}
|
||||
name="password"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="resource.server_status.table.list.password"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'resource.server_status.table.list.password',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormItemStyleProps.column2Width}
|
||||
name="defaultPort"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="resource.server_status.table.list.defaultPort"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'resource.server_status.table.list.defaultPort',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
/>
|
||||
<ProFormTextArea
|
||||
width={proFormItemStyleProps.width}
|
||||
name="publicKeyString"
|
||||
label={
|
||||
<FormattedMessage id="resource.server_status.table.list.publicKeyString" defaultMessage="$$$" />
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'resource.server_status.table.list.publicKeyString',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
/>
|
||||
<Button type="primary" ghost><FormattedMessage id="resource.server_status.table.list.connectivityTesting" defaultMessage="$$$" /></Button>
|
||||
</ProForm.Group>
|
||||
</ModalForm>
|
||||
);
|
||||
};
|
||||
export default UpdateForm;
|
||||
@ -0,0 +1,92 @@
|
||||
import { putProjectUpdateProject } from '@/services/project/Project';
|
||||
import {
|
||||
ModalForm,
|
||||
ProForm,
|
||||
ProFormText,
|
||||
} from '@ant-design/pro-components';
|
||||
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||
import { Form, message } from 'antd';
|
||||
import { proFormSmallItemStyleProps, proFormSmallModelWidth } from '../../../../../config/defaultForm';
|
||||
import React from 'react';
|
||||
export type FormValueType = {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
} & Partial<API.Project>;
|
||||
|
||||
export type UpdateFormProps = {
|
||||
updateModalOpen: boolean;
|
||||
handleModal: () => void;
|
||||
values: Partial<API.Project>;
|
||||
reload: any;
|
||||
};
|
||||
|
||||
|
||||
|
||||
const UpdateParameterForm: React.FC<UpdateFormProps> = (props) => {
|
||||
const intl = useIntl();
|
||||
const [form] = Form.useForm<API.Project>();
|
||||
|
||||
return (
|
||||
<ModalForm<API.Project>
|
||||
width={proFormSmallModelWidth}
|
||||
title={intl.formatMessage({
|
||||
id: 'system.parameter.table.list.editor',
|
||||
defaultMessage: '$$$',
|
||||
})}
|
||||
open={props.updateModalOpen}
|
||||
form={form}
|
||||
autoFocusFirstInput
|
||||
modalProps={{
|
||||
destroyOnClose: true,
|
||||
onCancel: () => props.handleModal(),
|
||||
}}
|
||||
submitTimeout={2000}
|
||||
onFinish={async (values) => {
|
||||
putProjectUpdateProject(values)
|
||||
.then(() => {
|
||||
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||
props.reload();
|
||||
})
|
||||
.catch(() => {
|
||||
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||
});
|
||||
|
||||
props.handleModal();
|
||||
return true;
|
||||
}}
|
||||
>
|
||||
<ProForm.Group>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="name"
|
||||
label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'system.parameter.table.list.label',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
initialValue={props.values.name}
|
||||
disabled={false}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="system.parameter.table.rule.required.label"
|
||||
defaultMessage="account is required"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ProForm.Group>
|
||||
</ModalForm>
|
||||
);
|
||||
};
|
||||
export default UpdateParameterForm;
|
||||
@ -0,0 +1,244 @@
|
||||
import { PageContainer, ProCard, ProForm } from '@ant-design/pro-components';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { EditOutlined } from '@ant-design/icons';
|
||||
import { Button, Input, message, } from 'antd';
|
||||
import type { ActionType } from '@ant-design/pro-components';
|
||||
import styles from "./parameterSetting.less";
|
||||
import UpdateParameterForm from './components/UpdateParameterForm';
|
||||
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @参数设置
|
||||
* @returns
|
||||
*/
|
||||
const ParameterSetting: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [updateParameterModalOpen, setUpdateParameterModalOpen] = useState<boolean>(false);
|
||||
const [currentRow, setCurrentRow] = useState<API.Project>();
|
||||
|
||||
const handleUpdateParameterModal = () => {
|
||||
if (updateParameterModalOpen) {
|
||||
setUpdateParameterModalOpen(false);
|
||||
setCurrentRow(undefined);
|
||||
} else {
|
||||
setUpdateParameterModalOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
const [stateValue, setStateValue] = useState({});
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<ProCard
|
||||
style={{ background: 'white' }}
|
||||
bodyStyle={{
|
||||
padding: 40,
|
||||
margin: 0,
|
||||
}}
|
||||
gutter={24}
|
||||
wrap
|
||||
ghost
|
||||
>
|
||||
<ProForm
|
||||
layout='vertical'
|
||||
grid={true}
|
||||
rowProps={{
|
||||
gutter: 24
|
||||
}}
|
||||
submitter={false}
|
||||
>
|
||||
|
||||
<ProForm.Item
|
||||
label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
|
||||
style={{
|
||||
width: '50%'
|
||||
}}>
|
||||
<Input placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'system.parameter.table.list.label',
|
||||
defaultMessage: '$$$',
|
||||
})}`} disabled style={{
|
||||
width: '92%'
|
||||
}} />
|
||||
<Button
|
||||
type="link"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => {
|
||||
setUpdateParameterModalOpen(true);
|
||||
}}
|
||||
/>
|
||||
</ProForm.Item>
|
||||
<ProForm.Item
|
||||
label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
|
||||
style={{
|
||||
width: '50%'
|
||||
}}>
|
||||
<Input placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'system.parameter.table.list.label',
|
||||
defaultMessage: '$$$',
|
||||
})}`} disabled style={{
|
||||
width: '92%'
|
||||
}} />
|
||||
<Button
|
||||
type="link"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => {
|
||||
setUpdateParameterModalOpen(true);
|
||||
}}
|
||||
/>
|
||||
</ProForm.Item>
|
||||
<ProForm.Item
|
||||
label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
|
||||
style={{
|
||||
width: '50%'
|
||||
}}>
|
||||
<Input placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'system.parameter.table.list.label',
|
||||
defaultMessage: '$$$',
|
||||
})}`} disabled style={{
|
||||
width: '92%'
|
||||
}} />
|
||||
<Button
|
||||
type="link"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => {
|
||||
setUpdateParameterModalOpen(true);
|
||||
}}
|
||||
/>
|
||||
</ProForm.Item>
|
||||
<ProForm.Item
|
||||
label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
|
||||
style={{
|
||||
width: '50%'
|
||||
}}>
|
||||
<Input placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'system.parameter.table.list.label',
|
||||
defaultMessage: '$$$',
|
||||
})}`} disabled style={{
|
||||
width: '92%'
|
||||
}} />
|
||||
<Button
|
||||
type="link"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => {
|
||||
setUpdateParameterModalOpen(true);
|
||||
}}
|
||||
/>
|
||||
</ProForm.Item>
|
||||
<ProForm.Item
|
||||
label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
|
||||
style={{
|
||||
width: '50%'
|
||||
}}>
|
||||
<Input placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'system.parameter.table.list.label',
|
||||
defaultMessage: '$$$',
|
||||
})}`} disabled style={{
|
||||
width: '92%'
|
||||
}} />
|
||||
<Button
|
||||
type="link"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => {
|
||||
setUpdateParameterModalOpen(true);
|
||||
}}
|
||||
/>
|
||||
</ProForm.Item>
|
||||
<ProForm.Item
|
||||
label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
|
||||
style={{
|
||||
width: '50%'
|
||||
}}>
|
||||
<Input placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'system.parameter.table.list.label',
|
||||
defaultMessage: '$$$',
|
||||
})}`} disabled style={{
|
||||
width: '92%'
|
||||
}} />
|
||||
<Button
|
||||
type="link"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => {
|
||||
setUpdateParameterModalOpen(true);
|
||||
}}
|
||||
/>
|
||||
</ProForm.Item>
|
||||
<ProForm.Item
|
||||
label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
|
||||
style={{
|
||||
width: '50%'
|
||||
}}>
|
||||
<Input placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'system.parameter.table.list.label',
|
||||
defaultMessage: '$$$',
|
||||
})}`} disabled style={{
|
||||
width: '92%'
|
||||
}} />
|
||||
<Button
|
||||
type="link"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => {
|
||||
setUpdateParameterModalOpen(true);
|
||||
}}
|
||||
/>
|
||||
</ProForm.Item>
|
||||
<ProForm.Item
|
||||
label={<FormattedMessage id="system.parameter.table.list.label" defaultMessage="$$$" />}
|
||||
style={{
|
||||
width: '50%'
|
||||
}}>
|
||||
<Input placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'system.parameter.table.list.label',
|
||||
defaultMessage: '$$$',
|
||||
})}`} disabled style={{
|
||||
width: '92%'
|
||||
}} />
|
||||
<Button
|
||||
type="link"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => {
|
||||
setUpdateParameterModalOpen(true);
|
||||
}}
|
||||
/>
|
||||
</ProForm.Item>
|
||||
</ProForm>
|
||||
</ProCard>
|
||||
<UpdateParameterForm
|
||||
updateModalOpen={updateParameterModalOpen}
|
||||
values={currentRow || {}}
|
||||
handleModal={handleUpdateParameterModal}
|
||||
reload={actionRef.current?.reload}
|
||||
/>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default ParameterSetting;
|
||||
@ -0,0 +1,29 @@
|
||||
.infoBox {
|
||||
margin-left: 78px;
|
||||
padding-top: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
height: 90px;
|
||||
color: #333;
|
||||
}
|
||||
.infoBoxRight {
|
||||
margin-left: 65px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
height: 90px;
|
||||
color: #333;
|
||||
}
|
||||
.spanStyle {
|
||||
display: inline-block;
|
||||
width: 68px;
|
||||
color: #666;
|
||||
}
|
||||
.inputWidth {
|
||||
.ant-form-item-control-input {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue