tsai
/
ant-design-pro
mirror of https://github.com/ant-design/ant-design-pro
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

⚡️ performance: use profrom (#7442) 

* ⚡️ performance: use profrom

* up version
pull/7522/head
陈帅 6 years ago
committed by GitHub
parent
f0806eab69
commit
83de372980
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 106 additions and 166 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      package.json
  2. 269
      src/pages/ListTableList/components/UpdateForm.tsx

3
package.json
View File

@ -1,6 +1,6 @@
{
"name": "ant-design-pro",
"version": "4.2.1",
"version": "4.2.2",
"private": true,
"description": "An out-of-box UI solution for enterprise applications",
"scripts": {
@ -55,6 +55,7 @@
"dependencies": {
"@ant-design/icons": "^4.0.0",
"@ant-design/pro-descriptions": "^1.0.19",
"@ant-design/pro-form": "^1.0.1",
"@ant-design/pro-layout": "^6.4.19",
"@ant-design/pro-table": "^2.8.1",
"@umijs/route-utils": "^1.0.33",

269
src/pages/ListTableList/components/UpdateForm.tsx
View File

@ -1,5 +1,13 @@
import React, { useState } from 'react';
import { Form, Button, DatePicker, Input, Modal, Radio, Select, Steps } from 'antd';
import { Modal } from 'antd';
import {
ProFormSelect,
ProFormText,
ProFormTextArea,
StepsForm,
ProFormRadio,
ProFormDateTimePicker,
} from '@ant-design/pro-form';
import { TableListItem } from '../data.d';
@ -13,28 +21,18 @@ export interface FormValueType extends Partial<TableListItem> {
export interface UpdateFormProps {
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
onSubmit: (values: FormValueType) => void;
onSubmit: (values: FormValueType) => Promise<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>({
const [formValues] = useState<FormValueType>({
name: props.values.name,
desc: props.values.desc,
key: props.values.key,
@ -45,169 +43,110 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
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 { onCancel: handleUpdateModalVisible, updateModalVisible } = props;
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: '请选择开始时间！' }]}
return (
<StepsForm
stepsProps={{
size: 'small',
}}
stepsFormRender={(dom, submitter) => {
return (
<Modal
width={640}
bodyStyle={{ padding: '32px 40px 48px' }}
destroyOnClose
title="规则配置"
visible={updateModalVisible}
footer={submitter}
onCancel={() => handleUpdateModalVisible()}
>
<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
{dom}
</Modal>
);
}}
onFinish={props.onSubmit}
>
<StepsForm.StepFrom
initialValues={{
name: formValues.name,
desc: formValues.desc,
}}
title="基本信息"
>
<ProFormText
name="name"
label="规则名称"
rules={[{ required: true, message: '请输入规则名称！' }]}
>
<Input placeholder="请输入" />
</FormItem>
<FormItem
/>
<ProFormTextArea
name="desc"
label="规则描述"
placeholder="请输入至少五个字符"
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}
/>
</StepsForm.StepFrom>
<StepsForm.StepFrom
initialValues={{
target: formValues.target,
template: formValues.template,
}}
title="配置规则属性"
>
<ProFormSelect
name="target"
label="监控对象"
valueEnum={{
0: '表一',
1: '表二',
}}
/>
<ProFormSelect
name="template"
label="规则模板"
valueEnum={{
0: '规则模板一',
1: '规则模板二',
}}
/>
<ProFormRadio.Group
name="type"
label="规则类型"
options={[
{
value: '0',
label: '强',
},
{
value: '1',
label: '弱',
},
]}
/>
</StepsForm.StepFrom>
<StepsForm.StepFrom
initialValues={{
target: formVals.target,
template: formVals.template,
type: formVals.type,
frequency: formVals.frequency,
name: formVals.name,
desc: formVals.desc,
type: formValues.type,
frequency: formValues.frequency,
}}
title="设定调度周期"
>
{renderContent()}
</Form>
</Modal>
<ProFormDateTimePicker
name="time"
label="开始时间"
rules={[{ required: true, message: '请选择开始时间！' }]}
/>
<ProFormSelect
name="frequency"
label="监控对象"
width="xs"
valueEnum={{
month: '月',
week: '周',
}}
/>
</StepsForm.StepFrom>
</StepsForm>
);
};

Write Preview
Loading…
Cancel
Save