Commit 74b673e5 authored by 陈帅's avatar 陈帅

fix type error

parent de7f6505
@import '~antd/lib/style/themes/default.less';
.toolbar {
position: fixed;
right: 0;
bottom: 0;
z-index: 9;
width: 100%;
height: 56px;
padding: 0 24px;
line-height: 56px;
background: #fff;
border-top: 1px solid @border-color-split;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
&::after {
display: block;
clear: both;
content: '';
}
.left {
float: left;
}
.right {
float: right;
}
button + button {
margin-left: 8px;
}
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import styles from './index.less';
export interface FooterToolbarProps {
extra?: React.ReactNode;
style?: React.CSSProperties;
className?: string;
}
export default class FooterToolbar extends Component<FooterToolbarProps> {
static contextTypes = {
isMobile: PropTypes.bool,
};
state = {
width: undefined,
};
componentDidMount() {
window.addEventListener('resize', this.resizeFooterToolbar);
this.resizeFooterToolbar();
}
componentWillUnmount() {
window.removeEventListener('resize', this.resizeFooterToolbar);
}
resizeFooterToolbar = () => {
const sider = document.querySelector('.ant-layout-sider') as HTMLDivElement;
if (sider == null) {
return;
}
const { isMobile } = this.context;
const width = isMobile ? null : `calc(100% - ${sider.style.width})`;
const { width: stateWidth } = this.state;
if (stateWidth !== width) {
this.setState({ width });
}
};
render() {
const { children, className, extra, ...restProps } = this.props;
const { width } = this.state;
return (
<div className={classNames(className, styles.toolbar)} style={{ width }} {...restProps}>
<div className={styles.left}>{extra}</div>
<div className={styles.right}>{children}</div>
</div>
);
}
}
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Card, Form, Icon, Col, Row, DatePicker, TimePicker, Input, Select, Popover } from 'antd'; import {
Card,
Form,
Icon,
Button,
Col,
Row,
DatePicker,
TimePicker,
Input,
Select,
Popover,
} from 'antd';
import { connect } from 'dva'; import { connect } from 'dva';
import TableForm from './components/TableForm'; import TableForm from './components/TableForm';
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 FooterToolbar from './components/FooterToolbar';
const { Option } = Select; const { Option } = Select;
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
...@@ -47,9 +60,10 @@ const tableData = [ ...@@ -47,9 +60,10 @@ const tableData = [
interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps { interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps {
dispatch: Dispatch; dispatch: Dispatch;
submitting: boolean;
} }
@connect(({ loading }: { loading: { effects: any } }) => ({ @connect(({ loading }: { loading: { effects: { [key: string]: boolean } } }) => ({
submitting: loading.effects['BLOCK_NAME_CAMEL_CASE/submitAdvancedForm'], submitting: loading.effects['BLOCK_NAME_CAMEL_CASE/submitAdvancedForm'],
})) }))
class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEProps> { class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEProps> {
...@@ -99,7 +113,12 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro ...@@ -99,7 +113,12 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
content={errorList} content={errorList}
overlayClassName={styles.errorPopover} overlayClassName={styles.errorPopover}
trigger="click" trigger="click"
getPopupContainer={trigger => trigger && trigger.parentNode} getPopupContainer={(trigger: HTMLElement) => {
if (trigger && trigger.parentNode) {
return trigger.parentNode as HTMLElement;
}
return trigger;
}}
> >
<Icon type="exclamation-circle" /> <Icon type="exclamation-circle" />
</Popover> </Popover>
...@@ -140,8 +159,9 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro ...@@ -140,8 +159,9 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
render() { render() {
const { const {
form: { getFieldDecorator }, form: { getFieldDecorator },
submitting,
} = this.props; } = this.props;
const { width } = this.state;
return ( return (
<> <>
<Card title="仓库管理" className={styles.card} bordered={false}> <Card title="仓库管理" className={styles.card} bordered={false}>
...@@ -269,7 +289,12 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro ...@@ -269,7 +289,12 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
<TimePicker <TimePicker
placeholder="提醒时间" placeholder="提醒时间"
style={{ width: '100%' }} style={{ width: '100%' }}
getPopupContainer={trigger => trigger.ParentNode} getPopupContainer={trigger => {
if (trigger && trigger.parentNode) {
return trigger.parentNode as HTMLElement;
}
return trigger;
}}
/> />
)} )}
</Form.Item> </Form.Item>
...@@ -294,12 +319,12 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro ...@@ -294,12 +319,12 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
initialValue: tableData, initialValue: tableData,
})(<TableForm />)} })(<TableForm />)}
</Card> </Card>
{/* <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}>
提交 提交
</Button> </Button>
</FooterToolbar> */} </FooterToolbar>
</> </>
); );
} }
......
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