Commit c468a497 authored by 陈帅's avatar 陈帅

use PageHeaderWrapper for @ant-design/pro-layout

parent edcebb9b
@import '~antd/lib/style/themes/default.less';
.children-content {
margin: 24px 24px 0;
}
.main {
.detail {
display: flex;
}
.row {
display: flex;
width: 100%;
}
.title-content {
margin-bottom: 16px;
}
@media screen and (max-width: @screen-sm) {
.content {
margin: 24px 0 0;
}
}
.title,
.content {
flex: auto;
}
.extraContent,
.main {
flex: 0 1 auto;
}
.main {
width: 100%;
}
.title {
margin-bottom: 16px;
}
.logo,
.content,
.extraContent {
margin-bottom: 16px;
}
.extraContent {
min-width: 242px;
margin-left: 88px;
text-align: right;
}
}
@media screen and (max-width: @screen-xl) {
.extraContent {
margin-left: 44px;
}
}
@media screen and (max-width: @screen-lg) {
.extraContent {
margin-left: 20px;
}
}
@media screen and (max-width: @screen-md) {
.row {
display: block;
}
.action,
.extraContent {
margin-left: 0;
text-align: left;
}
}
@media screen and (max-width: @screen-sm) {
.detail {
display: block;
}
}
import React from 'react';
import { RouteContext } from '@ant-design/pro-layout';
import { PageHeader, Typography } from 'antd';
import styles from './index.less';
import { GridContent } from '@ant-design/pro-layout';
interface IPageHeaderWrapperProps {
content?: React.ReactNode;
title?: React.ReactNode;
extraContent?: React.ReactNode;
}
const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
children,
content,
title,
extraContent,
...restProps
}) => (
<RouteContext.Consumer>
{value => (
<div style={{ margin: '-24px -24px 0' }}>
<PageHeader {...restProps} {...value} title={title || value.title}>
<div className={styles.detail}>
<div className={styles.main}>
<div className={styles.row}>
{content && <div className={styles.content}>{content}</div>}
{extraContent && <div className={styles.extraContent}>{extraContent}</div>}
</div>
</div>
</div>
</PageHeader>
{children ? (
<GridContent>
<div className={styles['children-content']}>{children}</div>
</GridContent>
) : null}
</div>
)}
</RouteContext.Consumer>
);
export default PageHeaderWrapper;
......@@ -6,10 +6,10 @@ import { Row, Col, Card, List, Avatar } from 'antd';
import { Dispatch } from 'redux';
import EditableLinkGroup from './components/EditableLinkGroup';
import PageHeaderWrapper from './components/PageHeaderWrapper';
import Radar from './components/Radar';
import { ModalState } from './model';
import { ICurrentUser, IActivities, IRadarData, INotice } from './data';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './style.less';
......
@import '~antd/lib/style/themes/default.less';
.children-content {
margin: 24px 24px 0;
}
.main {
.detail {
display: flex;
}
.row {
display: flex;
width: 100%;
}
.title-content {
margin-bottom: 16px;
}
@media screen and (max-width: @screen-sm) {
.content {
margin: 24px 0 0;
}
}
.title,
.content {
flex: auto;
}
.extraContent,
.main {
flex: 0 1 auto;
}
.main {
width: 100%;
}
.title {
margin-bottom: 16px;
}
.logo,
.content,
.extraContent {
margin-bottom: 16px;
}
.extraContent {
min-width: 242px;
margin-left: 88px;
text-align: right;
}
}
@media screen and (max-width: @screen-xl) {
.extraContent {
margin-left: 44px;
}
}
@media screen and (max-width: @screen-lg) {
.extraContent {
margin-left: 20px;
}
}
@media screen and (max-width: @screen-md) {
.row {
display: block;
}
.action,
.extraContent {
margin-left: 0;
text-align: left;
}
}
@media screen and (max-width: @screen-sm) {
.detail {
display: block;
}
}
import React from 'react';
import { RouteContext, GridContent } from '@ant-design/pro-layout';
import { PageHeader, Tabs, Typography } from 'antd';
import styles from './index.less';
import { TabsProps } from 'antd/lib/tabs';
interface IPageHeaderTabConfig {
tabList?: Array<{
key: string;
tab: string;
}>;
tabActiveKey?: TabsProps['activeKey'];
onTabChange?: TabsProps['onChange'];
tabBarExtraContent?: TabsProps['tabBarExtraContent'];
}
interface IPageHeaderWrapperProps extends IPageHeaderTabConfig {
content?: React.ReactNode;
title?: React.ReactNode;
extraContent?: React.ReactNode;
}
/**
* render Footer tabList
* In order to be compatible with the old version of the PageHeader
* basically all the functions are implemented.
*/
const renderFooter = ({
tabList,
tabActiveKey,
onTabChange,
tabBarExtraContent,
}: IPageHeaderTabConfig) => {
return tabList && tabList.length ? (
<Tabs
className={styles.tabs}
activeKey={tabActiveKey}
onChange={key => {
if (onTabChange) {
onTabChange(key);
}
}}
tabBarExtraContent={tabBarExtraContent}
>
{tabList.map(item => (
<Tabs.TabPane tab={item.tab} key={item.key} />
))}
</Tabs>
) : null;
};
const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
children,
title,
content,
extraContent,
...restProps
}) => (
<RouteContext.Consumer>
{value => (
<div style={{ margin: '-24px -24px 0' }}>
<PageHeader
{...value}
{...restProps}
title={
<Typography.Title
level={4}
style={{
margin: 0,
}}
>
{title || value.title}
</Typography.Title>
}
footer={renderFooter(restProps)}
>
<div className={styles.detail}>
<div className={styles.main}>
<div className={styles.row}>
{content && <div className={styles.content}>{content}</div>}
{extraContent && <div className={styles.extraContent}>{extraContent}</div>}
</div>
</div>
</div>
</PageHeader>
{children ? (
<GridContent>
<div className={styles['children-content']}>{children}</div>
</GridContent>
) : null}
</div>
)}
</RouteContext.Consumer>
);
export default PageHeaderWrapper;
......@@ -7,7 +7,7 @@ import { FlowToolbar } from './components/EditorToolbar';
import { FlowItemPanel } from './components/EditorItemPanel';
import { FlowDetailPanel } from './components/EditorDetailPanel';
import styles from './index.less';
import PageHeaderWrapper from './components/PageHeaderWrapper';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { formatMessage } from 'umi-plugin-react/locale';
GGEditor.setTrackable(false);
......
......@@ -7,7 +7,7 @@ import { KoniToolbar } from './components/EditorToolbar';
import { KoniItemPanel } from './components/EditorItemPanel';
import { KoniDetailPanel } from './components/EditorDetailPanel';
import styles from './index.less';
import PageHeaderWrapper from './components/PageHeaderWrapper';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { formatMessage } from 'umi-plugin-react/locale';
GGEditor.setTrackable(false);
......
......@@ -7,7 +7,7 @@ import { MindToolbar } from './components/EditorToolbar';
import { MindDetailPanel } from './components/EditorDetailPanel';
import data from './worldCup2018.json';
import styles from './index.less';
import PageHeaderWrapper from './components/PageHeaderWrapper';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { formatMessage } from 'umi-plugin-react/locale';
GGEditor.setTrackable(false);
......
......@@ -18,6 +18,7 @@ import styles from './style.less';
import { FormComponentProps } from 'antd/lib/form';
import { Dispatch } from 'redux';
import FooterToolbar from './components/FooterToolbar';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
const { Option } = Select;
const { RangePicker } = DatePicker;
......@@ -98,10 +99,11 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
if (!errors[key]) {
return null;
}
const errorMessage = errors[key] || [];
return (
<li key={key} className={styles.errorListItem} onClick={() => scrollToField(key)}>
<Icon type="cross-circle-o" className={styles.errorIcon} />
<div className={styles.errorMessage}>{errors[key][0]}</div>
<div className={styles.errorMessage}>{errorMessage[0]}</div>
<div className={styles.errorField}>{fieldLabels[key]}</div>
</li>
);
......@@ -164,164 +166,166 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
const { width } = this.state;
return (
<>
<Card title="仓库管理" className={styles.card} bordered={false}>
<Form layout="vertical" hideRequiredMark>
<Row gutter={16}>
<Col lg={6} md={12} sm={24}>
<Form.Item label={fieldLabels.name}>
{getFieldDecorator('name', {
rules: [{ required: true, message: '请输入仓库名称' }],
})(<Input placeholder="请输入仓库名称" />)}
</Form.Item>
</Col>
<Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
<Form.Item label={fieldLabels.url}>
{getFieldDecorator('url', {
rules: [{ required: true, message: '请选择' }],
})(
<Input
style={{ width: '100%' }}
addonBefore="http://"
addonAfter=".com"
placeholder="请输入"
/>,
)}
</Form.Item>
</Col>
<Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
<Form.Item label={fieldLabels.owner}>
{getFieldDecorator('owner', {
rules: [{ required: true, message: '请选择管理员' }],
})(
<Select placeholder="请选择管理员">
<Option value="xiao">付晓晓</Option>
<Option value="mao">周毛毛</Option>
</Select>,
)}
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col lg={6} md={12} sm={24}>
<Form.Item label={fieldLabels.approver}>
{getFieldDecorator('approver', {
rules: [{ required: true, message: '请选择审批员' }],
})(
<Select placeholder="请选择审批员">
<Option value="xiao">付晓晓</Option>
<Option value="mao">周毛毛</Option>
</Select>,
)}
</Form.Item>
</Col>
<Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
<Form.Item label={fieldLabels.dateRange}>
{getFieldDecorator('dateRange', {
rules: [{ required: true, message: '请选择生效日期' }],
})(
<RangePicker
placeholder={['开始日期', '结束日期']}
style={{ width: '100%' }}
/>,
)}
</Form.Item>
</Col>
<Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
<Form.Item label={fieldLabels.type}>
{getFieldDecorator('type', {
rules: [{ required: true, message: '请选择仓库类型' }],
})(
<Select placeholder="请选择仓库类型">
<Option value="private">私密</Option>
<Option value="public">公开</Option>
</Select>,
)}
</Form.Item>
</Col>
</Row>
</Form>
</Card>
<Card title="任务管理" className={styles.card} bordered={false}>
<Form layout="vertical" hideRequiredMark>
<Row gutter={16}>
<Col lg={6} md={12} sm={24}>
<Form.Item label={fieldLabels.name2}>
{getFieldDecorator('name2', {
rules: [{ required: true, message: '请输入' }],
})(<Input placeholder="请输入" />)}
</Form.Item>
</Col>
<Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
<Form.Item label={fieldLabels.url2}>
{getFieldDecorator('url2', {
rules: [{ required: true, message: '请选择' }],
})(<Input placeholder="请输入" />)}
</Form.Item>
</Col>
<Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
<Form.Item label={fieldLabels.owner2}>
{getFieldDecorator('owner2', {
rules: [{ required: true, message: '请选择管理员' }],
})(
<Select placeholder="请选择管理员">
<Option value="xiao">付晓晓</Option>
<Option value="mao">周毛毛</Option>
</Select>,
)}
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col lg={6} md={12} sm={24}>
<Form.Item label={fieldLabels.approver2}>
{getFieldDecorator('approver2', {
rules: [{ required: true, message: '请选择审批员' }],
})(
<Select placeholder="请选择审批员">
<Option value="xiao">付晓晓</Option>
<Option value="mao">周毛毛</Option>
</Select>,
)}
</Form.Item>
</Col>
<Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
<Form.Item label={fieldLabels.dateRange2}>
{getFieldDecorator('dateRange2', {
rules: [{ required: true, message: '请输入' }],
})(
<TimePicker
placeholder="提醒时间"
style={{ width: '100%' }}
getPopupContainer={trigger => {
if (trigger && trigger.parentNode) {
return trigger.parentNode as HTMLElement;
}
return trigger;
}}
/>,
)}
</Form.Item>
</Col>
<Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
<Form.Item label={fieldLabels.type2}>
{getFieldDecorator('type2', {
rules: [{ required: true, message: '请选择仓库类型' }],
})(
<Select placeholder="请选择仓库类型">
<Option value="private">私密</Option>
<Option value="public">公开</Option>
</Select>,
)}
</Form.Item>
</Col>
</Row>
</Form>
</Card>
<Card title="成员管理" bordered={false}>
{getFieldDecorator('members', {
initialValue: tableData,
})(<TableForm />)}
</Card>
<PageHeaderWrapper content="高级表单常见于一次性输入和提交大批量数据的场景。">
<Card title="仓库管理" className={styles.card} bordered={false}>
<Form layout="vertical" hideRequiredMark>
<Row gutter={16}>
<Col lg={6} md={12} sm={24}>
<Form.Item label={fieldLabels.name}>
{getFieldDecorator('name', {
rules: [{ required: true, message: '请输入仓库名称' }],
})(<Input placeholder="请输入仓库名称" />)}
</Form.Item>
</Col>
<Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
<Form.Item label={fieldLabels.url}>
{getFieldDecorator('url', {
rules: [{ required: true, message: '请选择' }],
})(
<Input
style={{ width: '100%' }}
addonBefore="http://"
addonAfter=".com"
placeholder="请输入"
/>,
)}
</Form.Item>
</Col>
<Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
<Form.Item label={fieldLabels.owner}>
{getFieldDecorator('owner', {
rules: [{ required: true, message: '请选择管理员' }],
})(
<Select placeholder="请选择管理员">
<Option value="xiao">付晓晓</Option>
<Option value="mao">周毛毛</Option>
</Select>,
)}
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col lg={6} md={12} sm={24}>
<Form.Item label={fieldLabels.approver}>
{getFieldDecorator('approver', {
rules: [{ required: true, message: '请选择审批员' }],
})(
<Select placeholder="请选择审批员">
<Option value="xiao">付晓晓</Option>
<Option value="mao">周毛毛</Option>
</Select>,
)}
</Form.Item>
</Col>
<Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
<Form.Item label={fieldLabels.dateRange}>
{getFieldDecorator('dateRange', {
rules: [{ required: true, message: '请选择生效日期' }],
})(
<RangePicker
placeholder={['开始日期', '结束日期']}
style={{ width: '100%' }}
/>,
)}
</Form.Item>
</Col>
<Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
<Form.Item label={fieldLabels.type}>
{getFieldDecorator('type', {
rules: [{ required: true, message: '请选择仓库类型' }],
})(
<Select placeholder="请选择仓库类型">
<Option value="private">私密</Option>
<Option value="public">公开</Option>
</Select>,
)}
</Form.Item>
</Col>
</Row>
</Form>
</Card>
<Card title="任务管理" className={styles.card} bordered={false}>
<Form layout="vertical" hideRequiredMark>
<Row gutter={16}>
<Col lg={6} md={12} sm={24}>
<Form.Item label={fieldLabels.name2}>
{getFieldDecorator('name2', {
rules: [{ required: true, message: '请输入' }],
})(<Input placeholder="请输入" />)}
</Form.Item>
</Col>
<Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
<Form.Item label={fieldLabels.url2}>
{getFieldDecorator('url2', {
rules: [{ required: true, message: '请选择' }],
})(<Input placeholder="请输入" />)}
</Form.Item>
</Col>
<Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
<Form.Item label={fieldLabels.owner2}>
{getFieldDecorator('owner2', {
rules: [{ required: true, message: '请选择管理员' }],
})(
<Select placeholder="请选择管理员">
<Option value="xiao">付晓晓</Option>
<Option value="mao">周毛毛</Option>
</Select>,
)}
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col lg={6} md={12} sm={24}>
<Form.Item label={fieldLabels.approver2}>
{getFieldDecorator('approver2', {
rules: [{ required: true, message: '请选择审批员' }],
})(
<Select placeholder="请选择审批员">
<Option value="xiao">付晓晓</Option>
<Option value="mao">周毛毛</Option>
</Select>,
)}
</Form.Item>
</Col>
<Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
<Form.Item label={fieldLabels.dateRange2}>
{getFieldDecorator('dateRange2', {
rules: [{ required: true, message: '请输入' }],
})(
<TimePicker
placeholder="提醒时间"
style={{ width: '100%' }}
getPopupContainer={trigger => {
if (trigger && trigger.parentNode) {
return trigger.parentNode as HTMLElement;
}
return trigger;
}}
/>,
)}
</Form.Item>
</Col>
<Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
<Form.Item label={fieldLabels.type2}>
{getFieldDecorator('type2', {
rules: [{ required: true, message: '请选择仓库类型' }],
})(
<Select placeholder="请选择仓库类型">
<Option value="private">私密</Option>
<Option value="public">公开</Option>
</Select>,
)}
</Form.Item>
</Col>
</Row>
</Form>
</Card>
<Card title="成员管理" bordered={false}>
{getFieldDecorator('members', {
initialValue: tableData,
})(<TableForm />)}
</Card>
</PageHeaderWrapper>
<FooterToolbar style={{ width }}>
{this.getErrorInfo()}
<Button type="primary" onClick={this.validate} loading={submitting}>
......
export default {
'BLOCK_NAME.basic.title': 'Basic form',
'BLOCK_NAME.basic.description':
'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
'BLOCK_NAME.email.required': 'Please enter your email!',
'BLOCK_NAME.email.wrong-format': 'The email address is in the wrong format!',
'BLOCK_NAME.userName.required': 'Please enter your userName!',
'BLOCK_NAME.password.required': 'Please enter your password!',
'BLOCK_NAME.password.twice': 'The passwords entered twice do not match!',
'BLOCK_NAME.strength.msg':
"Please enter at least 6 characters and don't use passwords that are easy to guess.",
'BLOCK_NAME.strength.strong': 'Strength: strong',
'BLOCK_NAME.strength.medium': 'Strength: medium',
'BLOCK_NAME.strength.short': 'Strength: too short',
'BLOCK_NAME.confirm-password.required': 'Please confirm your password!',
'BLOCK_NAME.phone-number.required': 'Please enter your phone number!',
'BLOCK_NAME.phone-number.wrong-format': 'Malformed phone number!',
'BLOCK_NAME.verification-code.required': 'Please enter the verification code!',
'BLOCK_NAME.title.required': 'Please enter a title',
'BLOCK_NAME.date.required': 'Please select the start and end date',
'BLOCK_NAME.goal.required': 'Please enter a description of the goal',
'BLOCK_NAME.standard.required': 'Please enter a metric',
'BLOCK_NAME.form.get-captcha': 'Get Captcha',
'BLOCK_NAME.captcha.second': 'sec',
'BLOCK_NAME.form.optional': ' (optional) ',
'BLOCK_NAME.form.submit': 'Submit',
'BLOCK_NAME.form.save': 'Save',
'BLOCK_NAME.email.placeholder': 'Email',
'BLOCK_NAME.password.placeholder': 'Password',
'BLOCK_NAME.confirm-password.placeholder': 'Confirm password',
'BLOCK_NAME.phone-number.placeholder': 'Phone number',
'BLOCK_NAME.verification-code.placeholder': 'Verification code',
'BLOCK_NAME.title.label': 'Title',
'BLOCK_NAME.title.placeholder': 'Give the target a name',
'BLOCK_NAME.date.label': 'Start and end date',
'BLOCK_NAME.placeholder.start': 'Start date',
'BLOCK_NAME.placeholder.end': 'End date',
'BLOCK_NAME.goal.label': 'Goal description',
'BLOCK_NAME.goal.placeholder': 'Please enter your work goals',
'BLOCK_NAME.standard.label': 'Metrics',
'BLOCK_NAME.standard.placeholder': 'Please enter a metric',
'BLOCK_NAME.client.label': 'Client',
'BLOCK_NAME.label.tooltip': 'Target service object',
'BLOCK_NAME.client.placeholder':
'Please describe your customer service, internal customers directly @ Name / job number',
'BLOCK_NAME.invites.label': 'Inviting critics',
'BLOCK_NAME.invites.placeholder':
'Please direct @ Name / job number, you can invite up to 5 people',
'BLOCK_NAME.weight.label': 'Weight',
'BLOCK_NAME.weight.placeholder': 'Please enter weight',
'BLOCK_NAME.public.label': 'Target disclosure',
'BLOCK_NAME.label.help': 'Customers and invitees are shared by default',
'BLOCK_NAME.radio.public': 'Public',
'BLOCK_NAME.radio.partially-public': 'Partially public',
'BLOCK_NAME.radio.private': 'Private',
'BLOCK_NAME.publicUsers.placeholder': 'Open to',
'BLOCK_NAME.option.A': 'Colleague A',
'BLOCK_NAME.option.B': 'Colleague B',
'BLOCK_NAME.option.C': 'Colleague C',
};
export default {
'BLOCK_NAME.basic.title': 'Basic form',
'BLOCK_NAME.basic.description':
'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
'BLOCK_NAME.email.required': 'Por favor insira seu email!',
'BLOCK_NAME.email.wrong-format': 'O email está errado!',
'BLOCK_NAME.userName.required': 'Por favor insira nome de usuário!',
'BLOCK_NAME.password.required': 'Por favor insira sua senha!',
'BLOCK_NAME.password.twice': 'As senhas não estão iguais!',
'BLOCK_NAME.strength.msg':
'Por favor insira pelo menos 6 caracteres e não use senhas fáceis de adivinhar.',
'BLOCK_NAME.strength.strong': 'Força: forte',
'BLOCK_NAME.strength.medium': 'Força: média',
'BLOCK_NAME.strength.short': 'Força: curta',
'BLOCK_NAME.confirm-password.required': 'Por favor confirme sua senha!',
'BLOCK_NAME.phone-number.required': 'Por favor insira seu telefone!',
'BLOCK_NAME.phone-number.wrong-format': 'Formato de telefone errado!',
'BLOCK_NAME.verification-code.required': 'Por favor insira seu código de verificação!',
'BLOCK_NAME.form.get-captcha': 'Get Captcha',
'BLOCK_NAME.captcha.second': 'sec',
'BLOCK_NAME.email.placeholder': 'Email',
'BLOCK_NAME.password.placeholder': 'Senha',
'BLOCK_NAME.confirm-password.placeholder': 'Confirme a senha',
'BLOCK_NAME.phone-number.placeholder': 'Telefone',
'BLOCK_NAME.verification-code.placeholder': 'Código de verificação',
'BLOCK_NAME.form.optional': ' (optional) ',
'BLOCK_NAME.form.submit': 'Submit',
'BLOCK_NAME.form.save': 'Save',
'BLOCK_NAME.title.label': 'Title',
'BLOCK_NAME.title.placeholder': 'Give the target a name',
'BLOCK_NAME.date.label': 'Start and end date',
'BLOCK_NAME.placeholder.start': 'Start date',
'BLOCK_NAME.placeholder.end': 'End date',
'BLOCK_NAME.goal.label': 'Goal description',
'BLOCK_NAME.goal.placeholder': 'Please enter your work goals',
'BLOCK_NAME.standard.label': 'Metrics',
'BLOCK_NAME.standard.placeholder': 'Please enter a metric',
'BLOCK_NAME.client.label': 'Client',
'BLOCK_NAME.label.tooltip': 'Target service object',
'BLOCK_NAME.client.placeholder':
'Please describe your customer service, internal customers directly @ Name / job number',
'BLOCK_NAME.invites.label': 'Inviting critics',
'BLOCK_NAME.invites.placeholder':
'Please direct @ Name / job number, you can invite up to 5 people',
'BLOCK_NAME.weight.label': 'Weight',
'BLOCK_NAME.weight.placeholder': 'Please enter weight',
'BLOCK_NAME.public.label': 'Target disclosure',
'BLOCK_NAME.label.help': 'Customers and invitees are shared by default',
'BLOCK_NAME.radio.public': 'Public',
'BLOCK_NAME.radio.partially-public': 'Partially public',
'BLOCK_NAME.radio.private': 'Private',
'BLOCK_NAME.publicUsers.placeholder': 'Open to',
'BLOCK_NAME.option.A': 'Colleague A',
'BLOCK_NAME.option.B': 'Colleague B',
'BLOCK_NAME.option.C': 'Colleague C',
};
export default {
'BLOCK_NAME.basic.title': '基础表单',
'BLOCK_NAME.basic.description':
'表单页用于向用户收集或验证信息,基础表单常见于数据项较少的表单场景。',
'BLOCK_NAME.email.required': '请输入邮箱地址!',
'BLOCK_NAME.email.wrong-format': '邮箱地址格式错误!',
'BLOCK_NAME.userName.required': '请输入用户名!',
'BLOCK_NAME.password.required': '请输入密码!',
'BLOCK_NAME.password.twice': '两次输入的密码不匹配!',
'BLOCK_NAME.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
'BLOCK_NAME.strength.strong': '强度:强',
'BLOCK_NAME.strength.medium': '强度:中',
'BLOCK_NAME.strength.short': '强度:太短',
'BLOCK_NAME.confirm-password.required': '请确认密码!',
'BLOCK_NAME.phone-number.required': '请输入手机号!',
'BLOCK_NAME.phone-number.wrong-format': '手机号格式错误!',
'BLOCK_NAME.verification-code.required': '请输入验证码!',
'BLOCK_NAME.title.required': '请输入标题',
'BLOCK_NAME.date.required': '请选择起止日期',
'BLOCK_NAME.goal.required': '请输入目标描述',
'BLOCK_NAME.standard.required': '请输入衡量标准',
'BLOCK_NAME.form.get-captcha': '获取验证码',
'BLOCK_NAME.captcha.second': '',
'BLOCK_NAME.form.optional': '(选填)',
'BLOCK_NAME.form.submit': '提交',
'BLOCK_NAME.form.save': '保存',
'BLOCK_NAME.email.placeholder': '邮箱',
'BLOCK_NAME.password.placeholder': '至少6位密码,区分大小写',
'BLOCK_NAME.confirm-password.placeholder': '确认密码',
'BLOCK_NAME.phone-number.placeholder': '手机号',
'BLOCK_NAME.verification-code.placeholder': '验证码',
'BLOCK_NAME.title.label': '标题',
'BLOCK_NAME.title.placeholder': '给目标起个名字',
'BLOCK_NAME.date.label': '起止日期',
'BLOCK_NAME.placeholder.start': '开始日期',
'BLOCK_NAME.placeholder.end': '结束日期',
'BLOCK_NAME.goal.label': '目标描述',
'BLOCK_NAME.goal.placeholder': '请输入你的阶段性工作目标',
'BLOCK_NAME.standard.label': '衡量标准',
'BLOCK_NAME.standard.placeholder': '请输入衡量标准',
'BLOCK_NAME.client.label': '客户',
'BLOCK_NAME.label.tooltip': '目标的服务对象',
'BLOCK_NAME.client.placeholder': '请描述你服务的客户,内部客户直接 @姓名/工号',
'BLOCK_NAME.invites.label': '邀评人',
'BLOCK_NAME.invites.placeholder': '请直接 @姓名/工号,最多可邀请 5 人',
'BLOCK_NAME.weight.label': '权重',
'BLOCK_NAME.weight.placeholder': '请输入',
'BLOCK_NAME.public.label': '目标公开',
'BLOCK_NAME.label.help': '客户、邀评人默认被分享',
'BLOCK_NAME.radio.public': '公开',
'BLOCK_NAME.radio.partially-public': '部分公开',
'BLOCK_NAME.radio.private': '不公开',
'BLOCK_NAME.publicUsers.placeholder': '公开给',
'BLOCK_NAME.option.A': '同事甲',
'BLOCK_NAME.option.B': '同事乙',
'BLOCK_NAME.option.C': '同事丙',
};
export default {
'BLOCK_NAME.basic.title': '基礎表單',
'BLOCK_NAME.basic.description':
'表單頁用於向用戶收集或驗證信息,基礎表單常見於數據項較少的表單場景。',
'BLOCK_NAME.email.required': '請輸入郵箱地址!',
'BLOCK_NAME.email.wrong-format': '郵箱地址格式錯誤!',
'BLOCK_NAME.userName.required': '請輸入賬戶!',
'BLOCK_NAME.password.required': '請輸入密碼!',
'BLOCK_NAME.password.twice': '兩次輸入的密碼不匹配!',
'BLOCK_NAME.strength.msg': '請至少輸入 6 個字符。請不要使用容易被猜到的密碼。',
'BLOCK_NAME.strength.strong': '強度:強',
'BLOCK_NAME.strength.medium': '強度:中',
'BLOCK_NAME.strength.short': '強度:太短',
'BLOCK_NAME.confirm-password.required': '請確認密碼!',
'BLOCK_NAME.phone-number.required': '請輸入手機號!',
'BLOCK_NAME.phone-number.wrong-format': '手機號格式錯誤!',
'BLOCK_NAME.verification-code.required': '請輸入驗證碼!',
'BLOCK_NAME.title.required': '請輸入標題',
'BLOCK_NAME.date.required': '請選擇起止日期',
'BLOCK_NAME.goal.required': '請輸入目標描述',
'BLOCK_NAME.standard.required': '請輸入衡量標淮',
'BLOCK_NAME.form.get-captcha': '獲取驗證碼',
'BLOCK_NAME.captcha.second': '',
'BLOCK_NAME.form.optional': '(選填)',
'BLOCK_NAME.form.submit': '提交',
'BLOCK_NAME.form.save': '保存',
'BLOCK_NAME.email.placeholder': '郵箱',
'BLOCK_NAME.password.placeholder': '至少6位密碼,區分大小寫',
'BLOCK_NAME.confirm-password.placeholder': '確認密碼',
'BLOCK_NAME.phone-number.placeholder': '手機號',
'BLOCK_NAME.verification-code.placeholder': '驗證碼',
'BLOCK_NAME.title.label': '標題',
'BLOCK_NAME.title.placeholder': '給目標起個名字',
'BLOCK_NAME.date.label': '起止日期',
'BLOCK_NAME.placeholder.start': '開始日期',
'BLOCK_NAME.placeholder.end': '結束日期',
'BLOCK_NAME.goal.label': '目標描述',
'BLOCK_NAME.goal.placeholder': '請輸入妳的階段性工作目標',
'BLOCK_NAME.standard.label': '衡量標淮',
'BLOCK_NAME.standard.placeholder': '請輸入衡量標淮',
'BLOCK_NAME.client.label': '客戶',
'BLOCK_NAME.label.tooltip': '目標的服務對象',
'BLOCK_NAME.client.placeholder': '請描述妳服務的客戶,內部客戶直接 @姓名/工號',
'BLOCK_NAME.invites.label': '邀評人',
'BLOCK_NAME.invites.placeholder': '請直接 @姓名/工號,最多可邀請 5 人',
'BLOCK_NAME.weight.label': '權重',
'BLOCK_NAME.weight.placeholder': '請輸入',
'BLOCK_NAME.public.label': '目標公開',
'BLOCK_NAME.label.help': '客戶、邀評人默認被分享',
'BLOCK_NAME.radio.public': '公開',
'BLOCK_NAME.radio.partially-public': '部分公開',
'BLOCK_NAME.radio.private': '不公開',
'BLOCK_NAME.publicUsers.placeholder': '公開給',
'BLOCK_NAME.option.A': '同事甲',
'BLOCK_NAME.option.B': '同事乙',
'BLOCK_NAME.option.C': '同事丙',
};
......@@ -13,7 +13,7 @@ import {
Icon,
Tooltip,
} from 'antd';
import PageHeaderWrapper from './components/PageHeaderWrapper';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './style.less';
import { FormComponentProps } from 'antd/lib/form';
import { Dispatch } from 'redux';
......
import React, { Component, Fragment } from 'react';
import { Card, Steps } from 'antd';
import { connect } from 'dva';
import PageHeaderWrapper from './components/PageHeaderWrapper';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import Step1 from './components/Step1';
import Step2 from './components/Step2';
import Step3 from './components/Step3';
......
export interface member {
export interface Member {
avatar: string;
name: string;
id: string;
}
export interface basiclistitemdatatype {
export interface BasicListItemDataType {
id: string;
owner: string;
title: string;
......
......@@ -25,7 +25,7 @@ import { IStateType } from './model';
import { Dispatch } from 'redux';
import { BasicListItemDataType } from './data';
import Result from './Result';
import { GridContent } from '@ant-design/pro-layout';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './style.less';
......@@ -290,8 +290,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
);
};
return (
<React.Fragment>
<GridContent>
<>
<PageHeaderWrapper>
<div className={styles.standardList}>
<Card bordered={false}>
<Row>
......@@ -321,9 +321,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
icon="plus"
onClick={this.showModal}
ref={component => {
/* eslint-disable */
this.addBtn = findDOMNode(component) as HTMLButtonElement;
/* eslint-enable */
}}
>
添加
......@@ -360,7 +358,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
/>
</Card>
</div>
</GridContent>
</PageHeaderWrapper>
<Modal
title={done ? null : `任务${current ? '编辑' : '添加'}`}
......@@ -373,7 +371,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
>
{getModalContent()}
</Modal>
</React.Fragment>
</>
);
}
}
......
......@@ -4,7 +4,7 @@ import { Dispatch } from 'redux';
import { IStateType } from './model';
import { CardListItemDataType } from './data';
import { Card, Button, Typography, Icon, List } from 'antd';
import PageHeaderWrapper from './components/PageHeaderWrapper';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
const { Paragraph } = Typography;
......
......@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import router from 'umi/router';
import { connect } from 'dva';
import { Input } from 'antd';
import PageHeaderWrapper from './components/PageHeaderWrapper';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
interface PAGE_NAME_UPPER_CAMEL_CASEProps {
match: {
......
......@@ -27,6 +27,7 @@ import { IStateType } from './model';
import styles from './style.less';
import UpdateForm, { IFormValsType } from './components/UpdateForm';
import CreateForm from './components/CreateForm';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
const FormItem = Form.Item;
const { Option } = Select;
......@@ -435,7 +436,7 @@ class TableList extends Component<TableListProps, TableListState> {
handleUpdate: this.handleUpdate,
};
return (
<Fragment>
<PageHeaderWrapper>
<Card bordered={false}>
<div className={styles.tableList}>
<div className={styles.tableListForm}>{this.renderForm()}</div>
......@@ -473,7 +474,7 @@ class TableList extends Component<TableListProps, TableListState> {
form={form}
/>
) : null}
</Fragment>
</PageHeaderWrapper>
);
}
}
......
......@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Badge, Table, Divider } from 'antd';
import DescriptionList from './components/DescriptionList';
import PageHeaderWrapper from './components/PageHeaderWrapper';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './style.less';
import { BasicProfileDataType, BasicGood } from './data';
import { Dispatch } from 'redux';
......
{
"private": true,
"scripts": {
"dev": "cross-env PAGES_PATH='EditorFlow/src' umi dev",
"dev": "cross-env PAGES_PATH='ListBasicList/src' umi dev",
"lint": "npm run lint:ts && npm run lint:style && npm run lint:prettier",
"lint-staged": "lint-staged",
"lint-staged:ts": "tslint",
......@@ -26,7 +26,9 @@
"**/*.{ts,tsx}": "npm run lint-staged:ts"
},
"dependencies": {
"cross-env": "^5.2.0"
"@types/react-dom": "^16.8.4",
"cross-env": "^5.2.0",
"react-dom": "^16.8.6"
},
"devDependencies": {
"@types/classnames": "^2.2.7",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment