12-23-上传master
This commit is contained in:
xingsy
25
src/pages/ListTableList/components/CreateForm.tsx
Normal file
25
src/pages/ListTableList/components/CreateForm.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import { Modal } from 'antd';
|
||||
|
||||
interface CreateFormProps {
|
||||
modalVisible: boolean;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const CreateForm: React.FC<CreateFormProps> = (props) => {
|
||||
const { modalVisible, onCancel } = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建规则"
|
||||
visible={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
footer={null}
|
||||
>
|
||||
{props.children}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateForm;
|
||||
214
src/pages/ListTableList/components/UpdateForm.tsx
Normal file
214
src/pages/ListTableList/components/UpdateForm.tsx
Normal file
@ -0,0 +1,214 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Form, Button, DatePicker, Input, Modal, Radio, Select, Steps } from 'antd';
|
||||
|
||||
import { TableListItem } from '../data.d';
|
||||
|
||||
export interface FormValueType extends Partial<TableListItem> {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
}
|
||||
|
||||
export interface UpdateFormProps {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => void;
|
||||
updateModalVisible: boolean;
|
||||
values: Partial<TableListItem>;
|
||||
}
|
||||
const FormItem = Form.Item;
|
||||
const { Step } = Steps;
|
||||
const { TextArea } = Input;
|
||||
const { Option } = Select;
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
export interface UpdateFormState {
|
||||
formVals: FormValueType;
|
||||
currentStep: number;
|
||||
}
|
||||
|
||||
const formLayout = {
|
||||
labelCol: { span: 7 },
|
||||
wrapperCol: { span: 13 },
|
||||
};
|
||||
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||
const [formVals, setFormVals] = useState<FormValueType>({
|
||||
name: props.values.name,
|
||||
desc: props.values.desc,
|
||||
key: props.values.key,
|
||||
target: '0',
|
||||
template: '0',
|
||||
type: '1',
|
||||
time: '',
|
||||
frequency: 'month',
|
||||
});
|
||||
|
||||
const [currentStep, setCurrentStep] = useState<number>(0);
|
||||
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const {
|
||||
onSubmit: handleUpdate,
|
||||
onCancel: handleUpdateModalVisible,
|
||||
updateModalVisible,
|
||||
values,
|
||||
} = props;
|
||||
|
||||
const forward = () => setCurrentStep(currentStep + 1);
|
||||
|
||||
const backward = () => setCurrentStep(currentStep - 1);
|
||||
|
||||
const handleNext = async () => {
|
||||
const fieldsValue = await form.validateFields();
|
||||
|
||||
setFormVals({ ...formVals, ...fieldsValue });
|
||||
|
||||
if (currentStep < 2) {
|
||||
forward();
|
||||
} else {
|
||||
handleUpdate({ ...formVals, ...fieldsValue });
|
||||
}
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
if (currentStep === 1) {
|
||||
return (
|
||||
<>
|
||||
<FormItem name="target" label="监控对象">
|
||||
<Select style={{ width: '100%' }}>
|
||||
<Option value="0">表一</Option>
|
||||
<Option value="1">表二</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem name="template" label="规则模板">
|
||||
<Select style={{ width: '100%' }}>
|
||||
<Option value="0">规则模板一</Option>
|
||||
<Option value="1">规则模板二</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem name="type" label="规则类型">
|
||||
<RadioGroup>
|
||||
<Radio value="0">强</Radio>
|
||||
<Radio value="1">弱</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (currentStep === 2) {
|
||||
return (
|
||||
<>
|
||||
<FormItem
|
||||
name="time"
|
||||
label="开始时间"
|
||||
rules={[{ required: true, message: '请选择开始时间！' }]}
|
||||
>
|
||||
<DatePicker
|
||||
style={{ width: '100%' }}
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="选择开始时间"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem name="frequency" label="调度周期">
|
||||
<Select style={{ width: '100%' }}>
|
||||
<Option value="month">月</Option>
|
||||
<Option value="week">周</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<FormItem
|
||||
name="name"
|
||||
label="规则名称"
|
||||
rules={[{ required: true, message: '请输入规则名称！' }]}
|
||||
>
|
||||
<Input placeholder="请输入" readOnly />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="desc"
|
||||
label="规则描述"
|
||||
rules={[{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }]}
|
||||
>
|
||||
<TextArea rows={4} placeholder="请输入至少五个字符" />
|
||||
</FormItem>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderFooter = () => {
|
||||
if (currentStep === 1) {
|
||||
return (
|
||||
<>
|
||||
<Button style={{ float: 'left' }} onClick={backward}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
|
||||
<Button type="primary" onClick={() => handleNext()}>
|
||||
下一步
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (currentStep === 2) {
|
||||
return (
|
||||
<>
|
||||
<Button style={{ float: 'left' }} onClick={backward}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
|
||||
<Button type="primary" onClick={() => handleNext()}>
|
||||
完成
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
|
||||
<Button type="primary" onClick={() => handleNext()}>
|
||||
下一步
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title="规则配置"
|
||||
visible={updateModalVisible}
|
||||
footer={renderFooter()}
|
||||
onCancel={() => handleUpdateModalVisible()}
|
||||
>
|
||||
<Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
|
||||
<Step title="基本信息" />
|
||||
<Step title="配置规则属性" />
|
||||
<Step title="设定调度周期" />
|
||||
</Steps>
|
||||
<Form
|
||||
{...formLayout}
|
||||
form={form}
|
||||
initialValues={{
|
||||
target: formVals.target,
|
||||
template: formVals.template,
|
||||
type: formVals.type,
|
||||
frequency: formVals.frequency,
|
||||
name: formVals.name,
|
||||
desc: formVals.desc,
|
||||
}}
|
||||
>
|
||||
{renderContent()}
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdateForm;
|
||||
Reference in New Issue
Block a user