You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
3.1 KiB
138 lines
3.1 KiB
import {
|
|
ProFormDateTimePicker,
|
|
ProFormRadio,
|
|
ProFormSelect,
|
|
ProFormText,
|
|
ProFormTextArea,
|
|
StepsForm,
|
|
} from '@ant-design/pro-components';
|
|
import { Modal } from 'antd';
|
|
import React from 'react';
|
|
|
|
export interface FormValueType extends Partial<API.UserInfo> {
|
|
target?: string;
|
|
template?: string;
|
|
type?: string;
|
|
time?: string;
|
|
frequency?: string;
|
|
}
|
|
|
|
export interface UpdateFormProps {
|
|
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
|
onSubmit: (values: FormValueType) => Promise<void>;
|
|
updateModalVisible: boolean;
|
|
values: Partial<API.UserInfo>;
|
|
}
|
|
|
|
const UpdateForm: React.FC<UpdateFormProps> = (props) => (
|
|
<StepsForm
|
|
stepsProps={{
|
|
size: 'small',
|
|
}}
|
|
stepsFormRender={(dom, submitter) => {
|
|
return (
|
|
<Modal
|
|
width={640}
|
|
bodyStyle={{ padding: '32px 40px 48px' }}
|
|
destroyOnClose
|
|
title="规则配置"
|
|
open={props.updateModalVisible}
|
|
footer={submitter}
|
|
onCancel={() => props.onCancel()}
|
|
>
|
|
{dom}
|
|
</Modal>
|
|
);
|
|
}}
|
|
onFinish={props.onSubmit}
|
|
>
|
|
<StepsForm.StepForm
|
|
initialValues={{
|
|
name: props.values.name,
|
|
nickName: props.values.nickName,
|
|
}}
|
|
title="基本信息"
|
|
>
|
|
<ProFormText
|
|
width="md"
|
|
name="name"
|
|
label="规则名称"
|
|
rules={[{ required: true, message: '请输入规则名称！' }]}
|
|
/>
|
|
<ProFormTextArea
|
|
name="desc"
|
|
width="md"
|
|
label="规则描述"
|
|
placeholder="请输入至少五个字符"
|
|
rules={[
|
|
{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 },
|
|
]}
|
|
/>
|
|
</StepsForm.StepForm>
|
|
<StepsForm.StepForm
|
|
initialValues={{
|
|
target: '0',
|
|
template: '0',
|
|
}}
|
|
title="配置规则属性"
|
|
>
|
|
<ProFormSelect
|
|
width="md"
|
|
name="target"
|
|
label="监控对象"
|
|
valueEnum={{
|
|
0: '表一',
|
|
1: '表二',
|
|
}}
|
|
/>
|
|
<ProFormSelect
|
|
width="md"
|
|
name="template"
|
|
label="规则模板"
|
|
valueEnum={{
|
|
0: '规则模板一',
|
|
1: '规则模板二',
|
|
}}
|
|
/>
|
|
<ProFormRadio.Group
|
|
name="type"
|
|
width="md"
|
|
label="规则类型"
|
|
options={[
|
|
{
|
|
value: '0',
|
|
label: '强',
|
|
},
|
|
{
|
|
value: '1',
|
|
label: '弱',
|
|
},
|
|
]}
|
|
/>
|
|
</StepsForm.StepForm>
|
|
<StepsForm.StepForm
|
|
initialValues={{
|
|
type: '1',
|
|
frequency: 'month',
|
|
}}
|
|
title="设定调度周期"
|
|
>
|
|
<ProFormDateTimePicker
|
|
name="time"
|
|
label="开始时间"
|
|
rules={[{ required: true, message: '请选择开始时间！' }]}
|
|
/>
|
|
<ProFormSelect
|
|
name="frequency"
|
|
label="监控对象"
|
|
width="xs"
|
|
valueEnum={{
|
|
month: '月',
|
|
week: '周',
|
|
}}
|
|
/>
|
|
</StepsForm.StepForm>
|
|
</StepsForm>
|
|
);
|
|
|
|
export default UpdateForm;
|