Skip to content

A
ant-design-pro

钟摆人-Puppet゜ / ant-design-pro
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
A
ant-design-pro

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 83de3729 编写于 作者: 陈 陈帅 提交者： GitHub
浏览文件
操作

⚡️ performance: use profrom (#7442) 

* ⚡️ performance: use profrom

* up version
上级 f0806eab
隐藏空白更改
内联 并排
Showing with 106 addition and 166 deletion
package.json
浏览文件 @ 83de3729
{ {
"name": "ant-design-pro", "name": "ant-design-pro",
"version": "4.2.1", "version": "4.2.2",
"private": true, "private": true,
"description": "An out-of-box UI solution for enterprise applications", "description": "An out-of-box UI solution for enterprise applications",
"scripts": { "scripts": {
...@@ -55,6 +55,7 @@ ...@@ -55,6 +55,7 @@
"dependencies": { "dependencies": {
"@ant-design/icons": "^4.0.0", "@ant-design/icons": "^4.0.0",
"@ant-design/pro-descriptions": "^1.0.19", "@ant-design/pro-descriptions": "^1.0.19",
"@ant-design/pro-form": "^1.0.1",
"@ant-design/pro-layout": "^6.4.19", "@ant-design/pro-layout": "^6.4.19",
"@ant-design/pro-table": "^2.8.1", "@ant-design/pro-table": "^2.8.1",
"@umijs/route-utils": "^1.0.33", "@umijs/route-utils": "^1.0.33",
......
src/pages/ListTableList/components/UpdateForm.tsx
浏览文件 @ 83de3729
import React, { useState } from 'react'; 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'; import { TableListItem } from '../data.d';
...@@ -13,28 +21,18 @@ export interface FormValueType extends Partial<TableListItem> { ...@@ -13,28 +21,18 @@ export interface FormValueType extends Partial<TableListItem> {
export interface UpdateFormProps { export interface UpdateFormProps {
onCancel: (flag?: boolean, formVals?: FormValueType) => void; onCancel: (flag?: boolean, formVals?: FormValueType) => void;
onSubmit: (values: FormValueType) => void; onSubmit: (values: FormValueType) => Promise<void>;
updateModalVisible: boolean; updateModalVisible: boolean;
values: Partial<TableListItem>; values: Partial<TableListItem>;
} }
const FormItem = Form.Item;
const { Step } = Steps;
const { TextArea } = Input;
const { Option } = Select;
const RadioGroup = Radio.Group;
export interface UpdateFormState { export interface UpdateFormState {
formVals: FormValueType; formVals: FormValueType;
currentStep: number; currentStep: number;
} }
const formLayout = {
labelCol: { span: 7 },
wrapperCol: { span: 13 },
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => { const UpdateForm: React.FC<UpdateFormProps> = (props) => {
const [formVals, setFormVals] = useState<FormValueType>({ const [formValues] = useState<FormValueType>({
name: props.values.name, name: props.values.name,
desc: props.values.desc, desc: props.values.desc,
key: props.values.key, key: props.values.key,
...@@ -45,169 +43,110 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => { ...@@ -45,169 +43,110 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
frequency: 'month', frequency: 'month',
}); });
const [currentStep, setCurrentStep] = useState<number>(0); const { onCancel: handleUpdateModalVisible, updateModalVisible } = props;
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 () => { return (
const fieldsValue = await form.validateFields(); <StepsForm
stepsProps={{
setFormVals({ ...formVals, ...fieldsValue }); size: 'small',
}}
if (currentStep < 2) { stepsFormRender={(dom, submitter) => {
forward(); return (
} else { <Modal
handleUpdate({ ...formVals, ...fieldsValue }); width={640}
} bodyStyle={{ padding: '32px 40px 48px' }}
}; destroyOnClose
title="规则配置"
const renderContent = () => { visible={updateModalVisible}
if (currentStep === 1) { footer={submitter}
return ( onCancel={() => handleUpdateModalVisible()}
<>
<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 {dom}
style={{ width: '100%' }} </Modal>
showTime );
format="YYYY-MM-DD HH:mm:ss" }}
placeholder="选择开始时间" onFinish={props.onSubmit}
/> >
</FormItem> <StepsForm.StepFrom
<FormItem name="frequency" label="调度周期"> initialValues={{
<Select style={{ width: '100%' }}> name: formValues.name,
<Option value="month">月</Option> desc: formValues.desc,
<Option value="week">周</Option> }}
</Select> title="基本信息"
</FormItem> >
</> <ProFormText
);
}
return (
<>
<FormItem
name="name" name="name"
label="规则名称" label="规则名称"
rules={[{ required: true, message: '请输入规则名称！' }]} rules={[{ required: true, message: '请输入规则名称！' }]}
> />
<Input placeholder="请输入" /> <ProFormTextArea
</FormItem>
<FormItem
name="desc" name="desc"
label="规则描述" label="规则描述"
placeholder="请输入至少五个字符"
rules={[{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }]} rules={[{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }]}
> />
<TextArea rows={4} placeholder="请输入至少五个字符" /> </StepsForm.StepFrom>
</FormItem> <StepsForm.StepFrom
</> initialValues={{
); target: formValues.target,
}; template: formValues.template,
}}
const renderFooter = () => { title="配置规则属性"
if (currentStep === 1) { >
return ( <ProFormSelect
<> name="target"
<Button style={{ float: 'left' }} onClick={backward}> label="监控对象"
上一步 valueEnum={{
</Button> 0: '表一',
<Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button> 1: '表二',
<Button type="primary" onClick={() => handleNext()}> }}
下一步 />
</Button> <ProFormSelect
</> name="template"
); label="规则模板"
} valueEnum={{
if (currentStep === 2) { 0: '规则模板一',
return ( 1: '规则模板二',
<> }}
<Button style={{ float: 'left' }} onClick={backward}> />
上一步 <ProFormRadio.Group
</Button> name="type"
<Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button> label="规则类型"
<Button type="primary" onClick={() => handleNext()}> options={[
完成 {
</Button> value: '0',
</> label: '强',
); },
} {
return ( value: '1',
<> label: '弱',
<Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button> },
<Button type="primary" onClick={() => handleNext()}> ]}
下一步 />
</Button> </StepsForm.StepFrom>
</> <StepsForm.StepFrom
);
};
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={{ initialValues={{
target: formVals.target, type: formValues.type,
template: formVals.template, frequency: formValues.frequency,
type: formVals.type,
frequency: formVals.frequency,
name: formVals.name,
desc: formVals.desc,
}} }}
title="设定调度周期"
> >
{renderContent()} <ProFormDateTimePicker
</Form> name="time"
</Modal> label="开始时间"
rules={[{ required: true, message: '请选择开始时间！' }]}
/>
<ProFormSelect
name="frequency"
label="监控对象"
width="xs"
valueEnum={{
month: '月',
week: '周',
}}
/>
</StepsForm.StepFrom>
</StepsForm>
); );
}; };
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或