oneos-v5/backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化 antd-pro

Browse Source
This commit is contained in:
sin
2019-02-27 11:06:55 +08:00
parent 9f4fdb7f6e
commit b2068ae44b
458 changed files with 28090 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

247
admin-web/src/pages/Forms/BasicForm.js Normal file
View File

@@ -0,0 +1,247 @@
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi/locale';
import {
Form,
Input,
DatePicker,
Select,
Button,
Card,
InputNumber,
Radio,
Icon,
Tooltip,
} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './style.less';
const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;
@connect(({ loading }) => ({
submitting: loading.effects['form/submitRegularForm'],
}))
@Form.create()
class BasicForms extends PureComponent {
handleSubmit = e => {
const { dispatch, form } = this.props;
e.preventDefault();
form.validateFieldsAndScroll((err, values) => {
if (!err) {
dispatch({
type: 'form/submitRegularForm',
payload: values,
});
}
});
};
render() {
const { submitting } = this.props;
const {
form: { getFieldDecorator, getFieldValue },
} = this.props;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 7 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
md: { span: 10 },
},
};
const submitFormLayout = {
wrapperCol: {
xs: { span: 24, offset: 0 },
sm: { span: 10, offset: 7 },
},
};
return (
<PageHeaderWrapper
title={<FormattedMessage id="app.forms.basic.title" />}
content={<FormattedMessage id="app.forms.basic.description" />}
>
<Card bordered={false}>
<Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
<FormItem {...formItemLayout} label={<FormattedMessage id="form.title.label" />}>
{getFieldDecorator('title', {
rules: [
{
required: true,
message: formatMessage({ id: 'validation.title.required' }),
},
],
})(<Input placeholder={formatMessage({ id: 'form.title.placeholder' })} />)}
</FormItem>
<FormItem {...formItemLayout} label={<FormattedMessage id="form.date.label" />}>
{getFieldDecorator('date', {
rules: [
{
required: true,
message: formatMessage({ id: 'validation.date.required' }),
},
],
})(
<RangePicker
style={{ width: '100%' }}
placeholder={[
formatMessage({ id: 'form.date.placeholder.start' }),
formatMessage({ id: 'form.date.placeholder.end' }),
]}
/>
)}
</FormItem>
<FormItem {...formItemLayout} label={<FormattedMessage id="form.goal.label" />}>
{getFieldDecorator('goal', {
rules: [
{
required: true,
message: formatMessage({ id: 'validation.goal.required' }),
},
],
})(
<TextArea
style={{ minHeight: 32 }}
placeholder={formatMessage({ id: 'form.goal.placeholder' })}
rows={4}
/>
)}
</FormItem>
<FormItem {...formItemLayout} label={<FormattedMessage id="form.standard.label" />}>
{getFieldDecorator('standard', {
rules: [
{
required: true,
message: formatMessage({ id: 'validation.standard.required' }),
},
],
})(
<TextArea
style={{ minHeight: 32 }}
placeholder={formatMessage({ id: 'form.standard.placeholder' })}
rows={4}
/>
)}
</FormItem>
<FormItem
{...formItemLayout}
label={
<span>
<FormattedMessage id="form.client.label" />
<em className={styles.optional}>
<FormattedMessage id="form.optional" />
<Tooltip title={<FormattedMessage id="form.client.label.tooltip" />}>
<Icon type="info-circle-o" style={{ marginRight: 4 }} />
</Tooltip>
</em>
</span>
}
>
{getFieldDecorator('client')(
<Input placeholder={formatMessage({ id: 'form.client.placeholder' })} />
)}
</FormItem>
<FormItem
{...formItemLayout}
label={
<span>
<FormattedMessage id="form.invites.label" />
<em className={styles.optional}>
<FormattedMessage id="form.optional" />
</em>
</span>
}
>
{getFieldDecorator('invites')(
<Input placeholder={formatMessage({ id: 'form.invites.placeholder' })} />
)}
</FormItem>
<FormItem
{...formItemLayout}
label={
<span>
<FormattedMessage id="form.weight.label" />
<em className={styles.optional}>
<FormattedMessage id="form.optional" />
</em>
</span>
}
>
{getFieldDecorator('weight')(
<InputNumber
placeholder={formatMessage({ id: 'form.weight.placeholder' })}
min={0}
max={100}
/>
)}
<span className="ant-form-text">%</span>
</FormItem>
<FormItem
{...formItemLayout}
label={<FormattedMessage id="form.public.label" />}
help={<FormattedMessage id="form.public.label.help" />}
>
<div>
{getFieldDecorator('public', {
initialValue: '1',
})(
<Radio.Group>
<Radio value="1">
<FormattedMessage id="form.public.radio.public" />
</Radio>
<Radio value="2">
<FormattedMessage id="form.public.radio.partially-public" />
</Radio>
<Radio value="3">
<FormattedMessage id="form.public.radio.private" />
</Radio>
</Radio.Group>
)}
<FormItem style={{ marginBottom: 0 }}>
{getFieldDecorator('publicUsers')(
<Select
mode="multiple"
placeholder={formatMessage({ id: 'form.publicUsers.placeholder' })}
style={{
margin: '8px 0',
display: getFieldValue('public') === '2' ? 'block' : 'none',
}}
>
<Option value="1">
<FormattedMessage id="form.publicUsers.option.A" />
</Option>
<Option value="2">
<FormattedMessage id="form.publicUsers.option.B" />
</Option>
<Option value="3">
<FormattedMessage id="form.publicUsers.option.C" />
</Option>
</Select>
)}
</FormItem>
</div>
</FormItem>
<FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
<Button type="primary" htmlType="submit" loading={submitting}>
<FormattedMessage id="form.submit" />
</Button>
<Button style={{ marginLeft: 8 }}>
<FormattedMessage id="form.save" />
</Button>
</FormItem>
</Form>
</Card>
</PageHeaderWrapper>
);
}
}
export default BasicForms;