列表页Table组件增加动效

src/components/Animation/AnimTableBody.js

@@ -1,6 +1,6 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { TweenOneGroup } from 'rc-tween-one'
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TweenOneGroup } from 'rc-tween-one';
 
 const enterAnim = [
   {
@@ -38,30 +38,21 @@ const leaveAnim = [
     duration: 200,
     ease: 'easeOutQuad',
   },
-]
+];
 
-const AnimTableBody = ({ body, page = 1, current }) => {
-  if (current !== +page) {
-    return body
-  }
+const AnimTableBody = ({ className, children }) => {
 
   return (
     <TweenOneGroup
       component="tbody"
-      className={body.props.className}
+      className={className}
       enter={enterAnim}
       leave={leaveAnim}
       appear={false}
     >
-      {body.props.children}
+      {children}
     </TweenOneGroup>
-  )
-}
-
-AnimTableBody.propTypes = {
-  body: PropTypes.element,
-  page: PropTypes.any,
-  current: PropTypes.number.isRequired,
+  );
 }
 
-export default AnimTableBody
+export default AnimTableBody;

src/components/FilterItem/FilterItem.js

@@ -1,29 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styles from './FilterItem.less'
-
-const FilterItem = ({
-  label = '',
-  children,
-}) => {
-  const labelArray = label.split('')
-  return (
-    <div className={styles.filterItem}>
-      {labelArray.length > 0
-        ? <div className={styles.labelWrap}>
-          {labelArray.map((item, index) => <span className="labelText" key={index}>{item}</span>)}
-        </div>
-        : ''}
-      <div className={styles.item}>
-        {children}
-      </div>
-    </div>
-  )
-}
-
-FilterItem.propTypes = {
-  label: PropTypes.string,
-  children: PropTypes.element.isRequired,
-}
-
-export default FilterItem

src/components/FilterItem/FilterItem.less

@@ -1,17 +0,0 @@
-.filterItem {
-  display: flex;
-  justify-content: space-between;
-
-  .labelWrap {
-    width: 30px;
-    line-height: 28px;
-    margin-right: 10px;
-    justify-content: flex-start;
-    display: flex;
-    overflow: hidden;
-  }
-
-  .item {
-    flex: 1;
-  }
-}

src/components/FilterItem/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "FilterItem",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./FilterItem.js"
-}

src/routes/Campus/table.js

@@ -5,12 +5,10 @@ import { Modal, Table } from 'antd';
 import AnimTableBody from '../../components/Animation/AnimTableBody';
 import styles from './table.less';
 
-const confirm = Modal.confirm;
-
 export default class CampusTableList extends Component {
 
   handleDeleteItem = (record) => {
-    confirm({
+    Modal.confirm({
       title: '您确定要删除该校区吗?',
       onOk () {
         onDeleteItem(record.id);
@@ -71,17 +69,16 @@ export default class CampusTableList extends Component {
       )
     }];
 
-    // 数据table列表表头的筛选按钮点击重置后status与domain值为空，此时删除该参数
+    // 数据table列表表头的筛选按钮点击重置后merchantId值为空，此时删除该参数
     columns.map(item => {
       item.dataIndex === 'merchantId' && !curMerchant ? delete item.filteredValue : null;
     });
 
+    // 配置分页
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-    const getBodyWrapperProps = {
-      page: tableProps.pagination.page,
-      current: tableProps.pagination.current,
-    };
-    const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);
+
+    // 添加动画
+    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
 
     return (
       <Table
@@ -91,7 +88,9 @@ export default class CampusTableList extends Component {
         columns={columns}
         className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        getBodyWrapper={getBodyWrapper}
+        components={{
+          body: { wrapper: AnimationTableBody }
+        }}
       />
     );
   }

src/routes/CmsUser/table.js

@@ -97,12 +97,11 @@ export default class CMSUserTableList extends Component {
       )
     }];
 
+    // 配置分页
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-    const getBodyWrapperProps = {
-      page: tableProps.pagination.page,
-      current: tableProps.pagination.current,
-    };
-    const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);
+
+    // 添加动画
+    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
 
     return (
       <Table
@@ -112,7 +111,9 @@ export default class CMSUserTableList extends Component {
         columns={columns}
         className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        getBodyWrapper={getBodyWrapper}
+        components={{
+          body: { wrapper: AnimationTableBody }
+        }}
       />
     );
   }

src/routes/Combo/List/table.js

@@ -8,19 +8,11 @@ import AnimTableBody from '../../../components/Animation/AnimTableBody';
 import styles from './table.less';
 import { statuses, Codes } from '../../../utils/config';
 
-const confirm = Modal.confirm;
-
 export default class TableList extends PureComponent {
-  static propTypes = {
-    location: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    onDeleteItem: PropTypes.func.isRequired,
-    onEditItem: PropTypes.func.isRequired,
-  };
 
   handleOperateItem = (record) => {
     const { onDeleteItem, onRecoverItem } = this.props;
-    confirm({
+    Modal.confirm({
       title: `您确定要${record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}该课程包?`,
       onOk () {
         if (record.status === Codes.CODE_NORMAL) {
@@ -79,12 +71,11 @@ export default class TableList extends PureComponent {
       item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
     });
 
+    // 配置分页
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-    const getBodyWrapperProps = {
-      page: location.query.page,
-      current: tableProps.pagination.current,
-    };
-    const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);
+
+    // 添加动画
+    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
 
     return (
       <Table
@@ -94,7 +85,9 @@ export default class TableList extends PureComponent {
         columns={columns}
         className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        getBodyWrapper={getBodyWrapper}
+        components={{
+          body: { wrapper: AnimationTableBody }
+        }}
       />
     );
   }

src/routes/Course/List/table.js

@@ -8,19 +8,11 @@ import AnimTableBody from '../../../components/Animation/AnimTableBody';
 import styles from './table.less';
 import { statuses, Codes } from '../../../utils/config';
 
-const confirm = Modal.confirm;
-
 export default class TableList extends PureComponent {
-  static propTypes = {
-    location: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    onDeleteItem: PropTypes.func.isRequired,
-    onEditItem: PropTypes.func.isRequired,
-  };
 
   handleOperateItem = (record) => {
     const { onDeleteItem, onRecoverItem } = this.props;
-    confirm({
+    Modal.confirm({
       title: `您确定要${record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}该课程?`,
       onOk () {
         if (record.status === Codes.CODE_NORMAL) {
@@ -79,12 +71,11 @@ export default class TableList extends PureComponent {
       item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
     });
 
+    // 配置分页
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-    const getBodyWrapperProps = {
-      page: location.query.page,
-      current: tableProps.pagination.current,
-    };
-    const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);
+
+    // 添加动画
+    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
 
     return (
       <Table
@@ -94,7 +85,9 @@ export default class TableList extends PureComponent {
         columns={columns}
         className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        getBodyWrapper={getBodyWrapper}
+        components={{
+          body: { wrapper: AnimationTableBody }
+        }}
       />
     );
   }

src/routes/Lesson/List/table.js

@@ -8,19 +8,11 @@ import AnimTableBody from '../../../components/Animation/AnimTableBody';
 import styles from './table.less';
 import { statuses, Codes } from '../../../utils/config';
 
-const confirm = Modal.confirm;
-
 export default class TableList extends PureComponent {
-  static propTypes = {
-    location: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    onDeleteItem: PropTypes.func.isRequired,
-    onEditItem: PropTypes.func.isRequired,
-  };
 
   handleOperateItem = (record) => {
     const { onDeleteItem, onRecoverItem } = this.props;
-    confirm({
+    Modal.confirm({
       title: `您确定要${record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}该课?`,
       onOk () {
         if (record.status === Codes.CODE_NORMAL) {
@@ -74,17 +66,16 @@ export default class TableList extends PureComponent {
       )
     }];
 
-    // 数据table列表表头的筛选按钮点击重置后status与domain值为空，此时删除该参数
+    // 数据table列表表头的筛选按钮点击重置后status值为空，此时删除该参数
     columns.map(item => {
       item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
     });
 
+    // 配置分页
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-    const getBodyWrapperProps = {
-      page: location.query.page,
-      current: tableProps.pagination.current,
-    };
-    const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);
+
+    // 添加动画
+    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
 
     return (
       <Table
@@ -94,7 +85,9 @@ export default class TableList extends PureComponent {
         columns={columns}
         className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        getBodyWrapper={getBodyWrapper}
+        components={{
+          body: { wrapper: AnimationTableBody }
+        }}
       />
     );
   }

src/routes/MProduct/List/table.js

@@ -8,19 +8,11 @@ import AnimTableBody from '../../../components/Animation/AnimTableBody';
 import { itemStatuses, Codes, productType } from '../../../utils/config';
 import styles from './table.less';
 
-const confirm = Modal.confirm;
-
 export default class TableList extends PureComponent {
-  static propTypes = {
-    location: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    onDeleteItem: PropTypes.func.isRequired,
-    onEditItem: PropTypes.func.isRequired,
-  };
 
   handleOperateItem = (record) => {
     const { onDeleteItem, onRecoverItem } = this.props;
-    confirm({
+    Modal.confirm({
       title: `您确定要${record.status === Codes.CODE_NORMAL ? '下架' : '出售'}该产品?`,
       onOk () {
         if (record.status === Codes.CODE_NORMAL) {
@@ -96,19 +88,17 @@ export default class TableList extends PureComponent {
       )
     }];
 
-    // 数据table列表表头的筛选按钮点击重置后status与merchantName值为空，此时删除该参数
+    // 数据table列表表头的筛选按钮点击重置后status与merchantId值为空，此时删除该参数
     columns.map(item => {
       item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
       item.dataIndex === 'merchantId' && !curMid ? delete item.filteredValue : null;
     });
 
-    // 覆盖表格的默认样式，添加动画
+    // 配置分页
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-    const getBodyWrapperProps = {
-      page: location.query.page,
-      current: tableProps.pagination.current,
-    };
-    const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);
+
+    // 添加动画
+    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
 
     return (
       <Table
@@ -118,7 +108,9 @@ export default class TableList extends PureComponent {
         columns={columns}
         className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        getBodyWrapper={getBodyWrapper}
+        components={{
+          body: { wrapper: AnimationTableBody }
+        }}
       />
     );
   }

src/routes/Merchant/List/table.js

@@ -8,19 +8,11 @@ import AnimTableBody from '../../../components/Animation/AnimTableBody';
 import styles from './table.less';
 import { domains, statuses, Codes } from '../../../utils/config';
 
-const confirm = Modal.confirm;
-
 export default class TableList extends PureComponent {
-  static propTypes = {
-    location: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    onDeleteItem: PropTypes.func.isRequired,
-    onEditItem: PropTypes.func.isRequired,
-  };
 
   handleOperateItem = (record) => {
     const { onDeleteItem, onRecoverItem } = this.props;
-    confirm({
+    Modal.confirm({
       title: `您确定要${record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}该条记录?`,
       onOk () {
         if (record.status === Codes.CODE_NORMAL) {
@@ -90,12 +82,11 @@ export default class TableList extends PureComponent {
       item.dataIndex === 'domain' && !curDomain ? delete item.filteredValue : null;
     });
 
+    // 配置分页
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-    const getBodyWrapperProps = {
-      page: location.query.page,
-      current: tableProps.pagination.current,
-    };
-    const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);
+
+    // 添加动画
+    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
 
     return (
       <Table
@@ -105,7 +96,9 @@ export default class TableList extends PureComponent {
         columns={columns}
         className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        getBodyWrapper={getBodyWrapper}
+        components={{
+          body: { wrapper: AnimationTableBody }
+        }}
       />
     );
   }

src/routes/Order/List/table.js

@@ -10,15 +10,8 @@ import styles from './table.less';
 import { orderStatuses, Codes } from '../../../utils/config';
 
 const { RangePicker } = DatePicker;
-const confirm = Modal.confirm;
 
 export default class TableList extends PureComponent {
-  static propTypes = {
-    location: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    onDeleteItem: PropTypes.func.isRequired,
-    onEditItem: PropTypes.func.isRequired,
-  };
 
   state = {
     filtered: false,       //是否处于过滤状态
@@ -85,7 +78,7 @@ export default class TableList extends PureComponent {
     } else if (e.key === '2') {
       console.log('enter into edit page...');
     }else if (e.key === '3') {
-      confirm({
+      Modal.confirm({
         title: '你确定要作废该订单?',
         onOk () {
           console.log('deleting...');
@@ -93,7 +86,7 @@ export default class TableList extends PureComponent {
         },
       });
     } else if (e.key === '4') {
-      confirm({
+      Modal.confirm({
         title: '你确定要恢复该订单?',
         onOk () {
           console.log('recovering...');
@@ -124,10 +117,6 @@ export default class TableList extends PureComponent {
     const { timeBegin, timeEnd, filtered } = this.state;
 
     const columns = [{
-      title: '订单编号',
-      dataIndex: 'code',
-      key: 'code',
-    },{
       title: '终端编号',
       dataIndex: 'userCode',
       key: 'userCode',
@@ -139,18 +128,18 @@ export default class TableList extends PureComponent {
         <span>{`${record.provinceCode}-${record.cityName}-${record.zoneName}`}</span>
       ),
     },{
-      title: '领教定价',
-      dataIndex: 'lingjiaoPrice',
-      key: 'lingjiaoPrice',
-    },{
-      title: '渠道定价',
-      dataIndex: 'merchantPrice',
-      key: 'merchantPrice',
+      title: '商品标价(¥)',
+      dataIndex: 'originPrice',
+      key: 'originPrice',
     },{
-      title: '实际售价',
+      title: '实际售价(¥)',
       dataIndex: 'finalPrice',
       key: 'finalPrice',
     },{
+      title: '价格调整(¥)',
+      dataIndex: 'adjustPrice',
+      key: 'adjustPrice',
+    },{
       title: '状态',
       dataIndex: 'status',
       key: 'status',
@@ -190,6 +179,7 @@ export default class TableList extends PureComponent {
       render: (text, record) => (
         <DropOption onMenuClick={e => this.handleMenuClick(record, e)} menuOptions={this.renderOperationDropMenu(record)} />
       ),
+      fixed: 'right',
     }];
 
     // 数据table列表表头的筛选按钮点击重置后status值为空，此时删除该参数
@@ -197,12 +187,11 @@ export default class TableList extends PureComponent {
       item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
     });
 
+    // 配置分页
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-    const getBodyWrapperProps = {
-      page: location.query.page,
-      current: tableProps.pagination.current,
-    };
-    const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);
+
+    // 添加动画
+    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
 
     return (
       <Table
@@ -212,8 +201,9 @@ export default class TableList extends PureComponent {
         columns={columns}
         className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        scroll={{ x: 1300 }}
-        getBodyWrapper={getBodyWrapper}
+        components={{
+          body: { wrapper: AnimationTableBody }
+        }}
       />
     );
   }

src/routes/Order/List/table.less

@@ -14,38 +14,34 @@
       .ant-table-tbody > tr > td,
       .ant-table-thead > tr > th {
         &:nth-child(1) {
-          width: 12%;
+          width: 16%;
         }
 
         &:nth-child(2) {
-          width: 12%;
+          width: 18%;
         }
 
         &:nth-child(3) {
-          width: 13%;
+          width: 10%;
         }
 
         &:nth-child(4) {
-          width: 9%;
+          width: 10%;
         }
 
         &:nth-child(5) {
-          width: 9%;
+          width: 10%;
         }
 
         &:nth-child(6) {
-          width: 9%;
-        }
-
-        &:nth-child(7) {
           width: 10%;
         }
 
-        &:nth-child(8) {
+        &:nth-child(7) {
           width: 18%;
         }
 
-        &:nth-child(9) {
+        &:nth-child(8) {
           width: 8%;
         }
       }
@@ -84,11 +80,3 @@
     }
   }
 }
-
-.splitLine {
-  background: @border-color-split;
-  display: inline-block;
-  margin: 0 8px;
-  width: 1px;
-  height: 12px;
-}

src/routes/Resource/gallery/table.js

@@ -8,19 +8,11 @@ import AnimTableBody from '../../../components/Animation/AnimTableBody';
 import { statuses, Codes } from '../../../utils/config'
 import styles from './table.less';
 
-const confirm = Modal.confirm;
-
 export default class TableList extends PureComponent {
-  static propTypes = {
-    location: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    onDeleteItem: PropTypes.func.isRequired,
-    onEditItem: PropTypes.func.isRequired,
-  };
 
   handleOperateItem = (record) => {
     const { onDeleteItem, onRecoverItem } = this.props;
-    confirm({
+    Modal.confirm({
       title: `您确定要${record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}该条记录?`,
       onOk () {
         if (record.status === Codes.CODE_NORMAL) {
@@ -95,12 +87,11 @@ export default class TableList extends PureComponent {
       item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
     });
 
+    // 配置分页
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-    const getBodyWrapperProps = {
-      page: location.query.page,
-      current: tableProps.pagination.current,
-    };
-    const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);
+
+    // 添加动画
+    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
 
     return (
       <Table
@@ -110,7 +101,9 @@ export default class TableList extends PureComponent {
         columns={columns}
         className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        getBodyWrapper={getBodyWrapper}
+        components={{
+          body: { wrapper: AnimationTableBody }
+        }}
       />
     );
   }

src/routes/Resource/video/table.js

@@ -8,19 +8,11 @@ import AnimTableBody from '../../../components/Animation/AnimTableBody';
 import { statuses, quality, Codes } from '../../../utils/config'
 import styles from './table.less';
 
-const confirm = Modal.confirm;
-
 export default class TableList extends PureComponent {
-  static propTypes = {
-    location: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    onDeleteItem: PropTypes.func.isRequired,
-    onPlayVideo: PropTypes.func.isRequired,
-  };
 
   handleDeleteItem = (record) => {
     const { onDeleteItem } = this.props;
-    confirm({
+    Modal.confirm({
       title: `您确定要${record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}该视频?`,
       onOk () {
         onDeleteItem(record.id);
@@ -84,27 +76,27 @@ export default class TableList extends PureComponent {
       item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
     });
 
+    // 配置分页
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-    const getBodyWrapperProps = {
-      page: location.query.page,
-      current: tableProps.pagination.current,
-    };
-    const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);
-
     // 视频返回的数据量每页不固定，会出现分页bug，这里截取与pageSize相等
     const pageSize = tableProps.pagination.pageSize;
     const newSource = tableProps.dataSource.slice(0, pageSize);
 
+    // 添加动画
+    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
+
     return (
       <Table
         simple
         bordered
         { ...tableProps }
         columns={columns}
+        dataSource={newSource}
         className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        getBodyWrapper={getBodyWrapper}
-        dataSource={newSource}
+        components={{
+          body: { wrapper: AnimationTableBody }
+        }}
       />
     );
   }

src/routes/Support/List/table.js

@@ -8,19 +8,11 @@ import AnimTableBody from '../../../components/Animation/AnimTableBody';
 import styles from './table.less';
 import { statuses, Codes } from '../../../utils/config';
 
-const confirm = Modal.confirm;
-
 export default class TableList extends PureComponent {
-  static propTypes = {
-    location: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    onDeleteItem: PropTypes.func.isRequired,
-    onEditItem: PropTypes.func.isRequired,
-  };
 
   handleOperateItem = (record) => {
     const { onDeleteItem, onRecoverItem } = this.props;
-    confirm({
+    Modal.confirm({
       title: `您确定要${record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}该周边配套?`,
       onOk () {
         if (record.status === Codes.CODE_NORMAL) {
@@ -79,12 +71,11 @@ export default class TableList extends PureComponent {
       item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
     });
 
+    // 配置分页
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-    const getBodyWrapperProps = {
-      page: location.query.page,
-      current: tableProps.pagination.current,
-    };
-    const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);
+
+    // 添加动画
+    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
 
     return (
       <Table
@@ -94,7 +85,9 @@ export default class TableList extends PureComponent {
         columns={columns}
         className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        getBodyWrapper={getBodyWrapper}
+        components={{
+          body: { wrapper: AnimationTableBody }
+        }}
       />
     );
   }

src/routes/Tag/List/table.js

@@ -8,19 +8,11 @@ import AnimTableBody from '../../../components/Animation/AnimTableBody';
 import styles from './table.less';
 import { statuses, Codes } from '../../../utils/config';
 
-const confirm = Modal.confirm;
-
 export default class TableList extends PureComponent {
-  static propTypes = {
-    location: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    onDeleteItem: PropTypes.func.isRequired,
-    onEditItem: PropTypes.func.isRequired,
-  };
 
   handleOperateItem = (record) => {
     const { onDeleteItem, onRecoverItem } = this.props;
-    confirm({
+    Modal.confirm({
       title: `您确定要${record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}该条记录?`,
       onOk () {
         if (record.status === Codes.CODE_NORMAL) {
@@ -86,18 +78,17 @@ export default class TableList extends PureComponent {
       )
     }];
 
-    // 数据table列表表头的筛选按钮点击重置后status与domain值为空，此时删除该参数
+    // 数据table列表表头的筛选按钮点击重置后status与merchantId值为空，此时删除该参数
     columns.map(item => {
       item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
       item.dataIndex === 'merchantId' && !curMerchant ? delete item.filteredValue : null;
     });
 
+    // 配置分页
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-    const getBodyWrapperProps = {
-      page: location.query.page,
-      current: tableProps.pagination.current,
-    };
-    const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);
+
+    // 添加动画
+    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
 
     return (
       <Table
@@ -107,7 +98,9 @@ export default class TableList extends PureComponent {
         columns={columns}
         className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        getBodyWrapper={getBodyWrapper}
+        components={{
+          body: { wrapper: AnimationTableBody }
+        }}
       />
     );
   }

src/routes/TagGroup/List/table.js

@@ -8,19 +8,11 @@ import AnimTableBody from '../../../components/Animation/AnimTableBody';
 import styles from './table.less';
 import { statuses, Codes } from '../../../utils/config';
 
-const confirm = Modal.confirm;
-
 export default class TableList extends PureComponent {
-  static propTypes = {
-    location: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    onDeleteItem: PropTypes.func.isRequired,
-    onEditItem: PropTypes.func.isRequired,
-  };
 
   handleOperateItem = (record) => {
     const { onDeleteItem, onRecoverItem } = this.props;
-    confirm({
+    Modal.confirm({
       title: `您确定要${record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}该标签组?`,
       onOk () {
         if (record.status === Codes.CODE_NORMAL) {
@@ -88,12 +80,11 @@ export default class TableList extends PureComponent {
       item.dataIndex === 'merchantId' && !curMerchant ? delete item.filteredValue : null;
     });
 
+    // 配置分页
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-    const getBodyWrapperProps = {
-      page: location.query.page,
-      current: tableProps.pagination.current,
-    };
-    const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);
+
+    // 添加动画
+    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
 
     return (
       <Table
@@ -103,7 +94,9 @@ export default class TableList extends PureComponent {
         columns={columns}
         className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        getBodyWrapper={getBodyWrapper}
+        components={{
+          body: { wrapper: AnimationTableBody }
+        }}
       />
     );
   }

src/routes/Terminal/List/table.js

@@ -82,12 +82,11 @@ export default class TerminalTableList extends Component {
       item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
     });
 
+    // 配置分页
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-    const getBodyWrapperProps = {
-      page: location.query.page,
-      current: tableProps.pagination.current,
-    };
-    const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);
+
+    // 添加动画
+    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
 
     return (
       <Table
@@ -97,7 +96,9 @@ export default class TerminalTableList extends Component {
         columns={columns}
         className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        getBodyWrapper={getBodyWrapper}
+        components={{
+          body: { wrapper: AnimationTableBody }
+        }}
       />
     );
   }

src/routes/Ware/List/table.js

@@ -8,19 +8,11 @@ import AnimTableBody from '../../../components/Animation/AnimTableBody';
 import styles from './table.less';
 import { statuses, Codes } from '../../../utils/config';
 
-const confirm = Modal.confirm;
-
 export default class TableList extends PureComponent {
-  static propTypes = {
-    location: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    onDeleteItem: PropTypes.func.isRequired,
-    onEditItem: PropTypes.func.isRequired,
-  };
 
   handleOperateItem = (record) => {
     const { onDeleteItem, onRecoverItem } = this.props;
-    confirm({
+    Modal.confirm({
       title: `您确定要${record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}该条记录?`,
       onOk () {
         if (record.status === Codes.CODE_NORMAL) {
@@ -78,17 +70,14 @@ export default class TableList extends PureComponent {
       )
     }];
 
-    // 数据table列表表头的筛选按钮点击重置后status与domain值为空，此时删除该参数
     columns.map(item => {
       item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
     });
 
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-    const getBodyWrapperProps = {
-      page: location.query.page,
-      current: tableProps.pagination.current,
-    };
-    const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);
+
+    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
+
 
     return (
       <Table
@@ -98,7 +87,9 @@ export default class TableList extends PureComponent {
         columns={columns}
         className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        getBodyWrapper={getBodyWrapper}
+        components={{
+          body: { wrapper: AnimationTableBody }
+        }}
       />
     );
   }

src/utils/config.js

@@ -17,9 +17,9 @@ Codes.CODE_SUPPORT = 'SUPPORT';
 Codes.CODE_PACKAGE = 'PACKAGE';
 
 Codes.CODE_SALE = 'SALE';
-Codes.CODE_UNPAID = 0;
-Codes.CODE_PAID = 1;
-Codes.CODE_CANCEL = 2;
+Codes.CODE_UNPAID = 'PAYWAIT';
+Codes.CODE_PAID = 'PAYOK';
+Codes.CODE_CANCEL = 'PAYCANCEL';
 Codes.CODE_CP = 1010;
 Codes.CODE_LJ = 2010;
 Codes.CODE_PJ = 3010;