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'; ...@@ -6,10 +6,10 @@ import { Row, Col, Card, List, Avatar } from 'antd';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import EditableLinkGroup from './components/EditableLinkGroup'; import EditableLinkGroup from './components/EditableLinkGroup';
import PageHeaderWrapper from './components/PageHeaderWrapper';
import Radar from './components/Radar'; import Radar from './components/Radar';
import { ModalState } from './model'; import { ModalState } from './model';
import { ICurrentUser, IActivities, IRadarData, INotice } from './data'; import { ICurrentUser, IActivities, IRadarData, INotice } from './data';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './style.less'; 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'; ...@@ -7,7 +7,7 @@ import { FlowToolbar } from './components/EditorToolbar';
import { FlowItemPanel } from './components/EditorItemPanel'; import { FlowItemPanel } from './components/EditorItemPanel';
import { FlowDetailPanel } from './components/EditorDetailPanel'; import { FlowDetailPanel } from './components/EditorDetailPanel';
import styles from './index.less'; import styles from './index.less';
import PageHeaderWrapper from './components/PageHeaderWrapper'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { formatMessage } from 'umi-plugin-react/locale'; import { formatMessage } from 'umi-plugin-react/locale';
GGEditor.setTrackable(false); GGEditor.setTrackable(false);
......
...@@ -7,7 +7,7 @@ import { KoniToolbar } from './components/EditorToolbar'; ...@@ -7,7 +7,7 @@ import { KoniToolbar } from './components/EditorToolbar';
import { KoniItemPanel } from './components/EditorItemPanel'; import { KoniItemPanel } from './components/EditorItemPanel';
import { KoniDetailPanel } from './components/EditorDetailPanel'; import { KoniDetailPanel } from './components/EditorDetailPanel';
import styles from './index.less'; import styles from './index.less';
import PageHeaderWrapper from './components/PageHeaderWrapper'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { formatMessage } from 'umi-plugin-react/locale'; import { formatMessage } from 'umi-plugin-react/locale';
GGEditor.setTrackable(false); GGEditor.setTrackable(false);
......
...@@ -7,7 +7,7 @@ import { MindToolbar } from './components/EditorToolbar'; ...@@ -7,7 +7,7 @@ import { MindToolbar } from './components/EditorToolbar';
import { MindDetailPanel } from './components/EditorDetailPanel'; import { MindDetailPanel } from './components/EditorDetailPanel';
import data from './worldCup2018.json'; import data from './worldCup2018.json';
import styles from './index.less'; import styles from './index.less';
import PageHeaderWrapper from './components/PageHeaderWrapper'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { formatMessage } from 'umi-plugin-react/locale'; import { formatMessage } from 'umi-plugin-react/locale';
GGEditor.setTrackable(false); GGEditor.setTrackable(false);
......
...@@ -18,6 +18,7 @@ import styles from './style.less'; ...@@ -18,6 +18,7 @@ import styles from './style.less';
import { FormComponentProps } from 'antd/lib/form'; import { FormComponentProps } from 'antd/lib/form';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import FooterToolbar from './components/FooterToolbar'; import FooterToolbar from './components/FooterToolbar';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
const { Option } = Select; const { Option } = Select;
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
...@@ -98,10 +99,11 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro ...@@ -98,10 +99,11 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
if (!errors[key]) { if (!errors[key]) {
return null; return null;
} }
const errorMessage = errors[key] || [];
return ( return (
<li key={key} className={styles.errorListItem} onClick={() => scrollToField(key)}> <li key={key} className={styles.errorListItem} onClick={() => scrollToField(key)}>
<Icon type="cross-circle-o" className={styles.errorIcon} /> <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> <div className={styles.errorField}>{fieldLabels[key]}</div>
</li> </li>
); );
...@@ -164,6 +166,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro ...@@ -164,6 +166,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
const { width } = this.state; const { width } = this.state;
return ( return (
<> <>
<PageHeaderWrapper content="高级表单常见于一次性输入和提交大批量数据的场景。">
<Card title="仓库管理" className={styles.card} bordered={false}> <Card title="仓库管理" className={styles.card} bordered={false}>
<Form layout="vertical" hideRequiredMark> <Form layout="vertical" hideRequiredMark>
<Row gutter={16}> <Row gutter={16}>
...@@ -322,6 +325,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro ...@@ -322,6 +325,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
initialValue: tableData, initialValue: tableData,
})(<TableForm />)} })(<TableForm />)}
</Card> </Card>
</PageHeaderWrapper>
<FooterToolbar style={{ width }}> <FooterToolbar style={{ width }}>
{this.getErrorInfo()} {this.getErrorInfo()}
<Button type="primary" onClick={this.validate} loading={submitting}> <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 { ...@@ -13,7 +13,7 @@ import {
Icon, Icon,
Tooltip, Tooltip,
} from 'antd'; } from 'antd';
import PageHeaderWrapper from './components/PageHeaderWrapper'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './style.less'; import styles from './style.less';
import { FormComponentProps } from 'antd/lib/form'; import { FormComponentProps } from 'antd/lib/form';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
......
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import { Card, Steps } from 'antd'; import { Card, Steps } from 'antd';
import { connect } from 'dva'; import { connect } from 'dva';
import PageHeaderWrapper from './components/PageHeaderWrapper'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import Step1 from './components/Step1'; import Step1 from './components/Step1';
import Step2 from './components/Step2'; import Step2 from './components/Step2';
import Step3 from './components/Step3'; import Step3 from './components/Step3';
......
export interface member { export interface Member {
avatar: string; avatar: string;
name: string; name: string;
id: string; id: string;
} }
export interface basiclistitemdatatype { export interface BasicListItemDataType {
id: string; id: string;
owner: string; owner: string;
title: string; title: string;
......
...@@ -25,7 +25,7 @@ import { IStateType } from './model'; ...@@ -25,7 +25,7 @@ import { IStateType } from './model';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import { BasicListItemDataType } from './data'; import { BasicListItemDataType } from './data';
import Result from './Result'; import Result from './Result';
import { GridContent } from '@ant-design/pro-layout'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './style.less'; import styles from './style.less';
...@@ -290,8 +290,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component< ...@@ -290,8 +290,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
); );
}; };
return ( return (
<React.Fragment> <>
<GridContent> <PageHeaderWrapper>
<div className={styles.standardList}> <div className={styles.standardList}>
<Card bordered={false}> <Card bordered={false}>
<Row> <Row>
...@@ -321,9 +321,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component< ...@@ -321,9 +321,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
icon="plus" icon="plus"
onClick={this.showModal} onClick={this.showModal}
ref={component => { ref={component => {
/* eslint-disable */
this.addBtn = findDOMNode(component) as HTMLButtonElement; this.addBtn = findDOMNode(component) as HTMLButtonElement;
/* eslint-enable */
}} }}
> >
添加 添加
...@@ -360,7 +358,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component< ...@@ -360,7 +358,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
/> />
</Card> </Card>
</div> </div>
</GridContent> </PageHeaderWrapper>
<Modal <Modal
title={done ? null : `任务${current ? '编辑' : '添加'}`} title={done ? null : `任务${current ? '编辑' : '添加'}`}
...@@ -373,7 +371,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component< ...@@ -373,7 +371,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
> >
{getModalContent()} {getModalContent()}
</Modal> </Modal>
</React.Fragment> </>
); );
} }
} }
......
...@@ -4,7 +4,7 @@ import { Dispatch } from 'redux'; ...@@ -4,7 +4,7 @@ import { Dispatch } from 'redux';
import { IStateType } from './model'; import { IStateType } from './model';
import { CardListItemDataType } from './data'; import { CardListItemDataType } from './data';
import { Card, Button, Typography, Icon, List } from 'antd'; import { Card, Button, Typography, Icon, List } from 'antd';
import PageHeaderWrapper from './components/PageHeaderWrapper'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
const { Paragraph } = Typography; const { Paragraph } = Typography;
......
...@@ -2,7 +2,7 @@ import React, { Component } from 'react'; ...@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import router from 'umi/router'; import router from 'umi/router';
import { connect } from 'dva'; import { connect } from 'dva';
import { Input } from 'antd'; import { Input } from 'antd';
import PageHeaderWrapper from './components/PageHeaderWrapper'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
interface PAGE_NAME_UPPER_CAMEL_CASEProps { interface PAGE_NAME_UPPER_CAMEL_CASEProps {
match: { match: {
......
...@@ -27,6 +27,7 @@ import { IStateType } from './model'; ...@@ -27,6 +27,7 @@ import { IStateType } from './model';
import styles from './style.less'; import styles from './style.less';
import UpdateForm, { IFormValsType } from './components/UpdateForm'; import UpdateForm, { IFormValsType } from './components/UpdateForm';
import CreateForm from './components/CreateForm'; import CreateForm from './components/CreateForm';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
const FormItem = Form.Item; const FormItem = Form.Item;
const { Option } = Select; const { Option } = Select;
...@@ -435,7 +436,7 @@ class TableList extends Component<TableListProps, TableListState> { ...@@ -435,7 +436,7 @@ class TableList extends Component<TableListProps, TableListState> {
handleUpdate: this.handleUpdate, handleUpdate: this.handleUpdate,
}; };
return ( return (
<Fragment> <PageHeaderWrapper>
<Card bordered={false}> <Card bordered={false}>
<div className={styles.tableList}> <div className={styles.tableList}>
<div className={styles.tableListForm}>{this.renderForm()}</div> <div className={styles.tableListForm}>{this.renderForm()}</div>
...@@ -473,7 +474,7 @@ class TableList extends Component<TableListProps, TableListState> { ...@@ -473,7 +474,7 @@ class TableList extends Component<TableListProps, TableListState> {
form={form} form={form}
/> />
) : null} ) : null}
</Fragment> </PageHeaderWrapper>
); );
} }
} }
......
...@@ -2,7 +2,7 @@ import React, { Component } from 'react'; ...@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { Card, Badge, Table, Divider } from 'antd'; import { Card, Badge, Table, Divider } from 'antd';
import DescriptionList from './components/DescriptionList'; import DescriptionList from './components/DescriptionList';
import PageHeaderWrapper from './components/PageHeaderWrapper'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './style.less'; import styles from './style.less';
import { BasicProfileDataType, BasicGood } from './data'; import { BasicProfileDataType, BasicGood } from './data';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
......
{ {
"private": true, "private": true,
"scripts": { "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": "npm run lint:ts && npm run lint:style && npm run lint:prettier",
"lint-staged": "lint-staged", "lint-staged": "lint-staged",
"lint-staged:ts": "tslint", "lint-staged:ts": "tslint",
...@@ -26,7 +26,9 @@ ...@@ -26,7 +26,9 @@
"**/*.{ts,tsx}": "npm run lint-staged:ts" "**/*.{ts,tsx}": "npm run lint-staged:ts"
}, },
"dependencies": { "dependencies": {
"cross-env": "^5.2.0" "@types/react-dom": "^16.8.4",
"cross-env": "^5.2.0",
"react-dom": "^16.8.6"
}, },
"devDependencies": { "devDependencies": {
"@types/classnames": "^2.2.7", "@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