细节调整

src/common/router.js

@@ -177,7 +177,7 @@ export const getRouterData = (app) => {
       name: '子订单详情',
     },
     '/sold': {
-      component: dynamicWrapper(app, ['soldProduct'], () => import('../routes/SoldProduct')),
+      component: dynamicWrapper(app, ['soldProduct', 'merchant/merchant'], () => import('../routes/SoldProduct')),
     },
     '/user': {
       component: dynamicWrapper(app, [], () => import('../layouts/UserLayout')),

src/models/merchant/detail.js

@@ -1,6 +1,6 @@
-import { queryOne, create, update, queryMerchantRecommend, updateMerchantRecommend } from '../../services/merchant';
 import pathToRegexp from 'path-to-regexp';
 import { message } from 'antd';
+import { queryOne, create, update, queryMerchantRecommend, updateMerchantRecommend } from '../../services/merchant';
 
 export default {
   namespace: 'merchantDetail',
@@ -35,11 +35,11 @@ export default {
           });
         }
       });
-    }
+    },
   },
 
   effects: {
-    * query ({ payload }, { call, put }) {
+    * query({ payload }, { call, put }) {
       yield put({ type: 'changeLoading', payload: { itemLoading: true } });
       const { data, success } = yield call(queryOne, payload);
       if (success) {
@@ -47,15 +47,15 @@ export default {
       }
       yield put({ type: 'changeLoading', payload: { itemLoading: false } });
     },
-    * create ({ payload, callback }, { call, put }) {
-      const { data, success } = yield call(create, payload);
+    * create({ payload, callback }, { call }) {
+      const { success } = yield call(create, payload);
       if (success) {
         message.success('创建成功!');
         if (callback) callback();
       }
     },
-    * update ({ payload, callback }, { call, put }) {
-      const { data, success } = yield call(update, payload);
+    * update({ payload, callback }, { call, put }) {
+      const { success } = yield call(update, payload);
       if (success) {
         message.success('修改成功!');
         if (callback) callback();
@@ -71,7 +71,7 @@ export default {
       yield put({ type: 'changeLoading', payload: { recLoading: false } });
     },
     * updateMerchantRecommend({ payload, callback }, { call, put }) {
-      const { data, success } = yield call(updateMerchantRecommend, payload);
+      const { success } = yield call(updateMerchantRecommend, payload);
       if (success) {
         message.success('修改成功!');
         if (callback) callback();
@@ -107,6 +107,6 @@ export default {
     },
     clearCache(state, action) {
       return { ...state, ...action.payload };
-    }
-  }
-}
+    },
+  },
+};

src/models/merchant/merchant.js

@@ -1,6 +1,7 @@
-import { query, create, update, remove } from '../../services/merchant';
 import modelExtend from 'dva-model-extend';
 import queryString from 'query-string';
+import { message } from 'antd';
+import { query, remove, moneyCharge } from '../../services/merchant';
 import { pageModel } from '../common';
 import config from '../../utils/config';
 import { checkSearchParams } from '../../utils/utils';
@@ -9,11 +10,9 @@ export default modelExtend(pageModel, {
   namespace: 'merchant',
 
   state: {
-    currentItem: {},
-    itemLoading: false,
     listLoading: false,
     modalVisible: false,
-    modalType: 'create',
+    currentItem: {},
   },
 
   subscriptions: {
@@ -27,12 +26,12 @@ export default modelExtend(pageModel, {
           });
         }
       });
-    }
+    },
   },
 
   effects: {
-    * query ({ payload = {} }, { call, put }) {
-      yield put({ type: 'changeLoading', payload: { listLoading: true }});
+    * query({ payload = {} }, { call, put }) {
+      yield put({ type: 'changeLoading', payload: { listLoading: true } });
       const { data, success } = yield call(query, payload);
       if (success) {
         yield put({
@@ -43,50 +42,41 @@ export default modelExtend(pageModel, {
               current: Number(payload.pageNo) || 1,
               pageSize: Number(payload.pageSize) || config.pageSize,
               total: data.totalSize,
-            }
-          }
+            },
+          },
         });
       }
-      yield put({ type: 'changeLoading', payload: { listLoading: false }});
-    },
-    * create ({ payload, callback }, { call, put }) {
-      const { data, success } = yield call(create, payload);
-      if (success) {
-        if (callback) callback();
-      }
+      yield put({ type: 'changeLoading', payload: { listLoading: false } });
     },
-    * update ({ payload, callback }, { call, put }) {
-      const { data, success } = yield call(update, payload);
+    * delete({ payload, callback }, { call }) {
+      const { success } = yield call(remove, payload);
       if (success) {
-        yield put({ type: 'hideModal' });
+        message.success('删除成功!');
         if (callback) callback();
       }
     },
-    * delete ({ payload, callback }, { call, put }) {
-      const { data, success } = yield call(remove, payload);
-      if (success) {
-        if (callback) callback();
-      }
-    },
-    * recover ({ payload, callback }, { call, put }) {
-      const { data, success } = yield call(update, payload);
+    * recharge({ payload, callback }, { call }) {
+      const { success } = yield call(moneyCharge, payload);
       if (success) {
+        message.success('充值成功!');
         if (callback) callback();
       }
     },
   },
 
   reducers: {
-    changeLoading(state, { payload }) {
-      return { ...state, ...payload };
+    changeLoading(state, action) {
+      return { ...state, ...action.payload };
     },
-
-    showModal(state, { payload }) {
-      return { ...state, ...payload, modalVisible: true };
+    showModal(state, action) {
+      return {
+        ...state,
+        modalVisible: true,
+        currentItem: action.payload,
+      };
     },
-
-    hideModal(state) {
-      return { ...state, modalVisible: false };
+    hideModal(state, action) {
+      return { ...state, ...action.payload, modalVisible: false };
     },
-  }
-})
+  },
+});

src/models/order/detail.js

@@ -1,7 +1,6 @@
-import { message } from 'antd';
-import { queryOne, querySubOrder, create, update, confirmPay, confirmSend, confirmReceive } from '../../services/order';
 import pathToRegexp from 'path-to-regexp';
-import { Codes } from '../../utils/config';
+import { message } from 'antd';
+import { queryOne, querySubOrder, create, confirmPay, confirmSend, confirmReceive } from '../../services/order';
 
 export default {
   namespace: 'orderDetail',
@@ -13,11 +12,12 @@ export default {
     itemLoading: false,
     terminalModalShow: false,
     productModalShow: false,
+    deliveryModalShow: false,
   },
 
   subscriptions: {
     setup({ dispatch, history }) {
-      history.listen(({ pathname, state, ...rest }) => {
+      history.listen(({ pathname, state }) => {
         const match = pathToRegexp('/trade/order/profile/:id').exec(pathname);
         const sub = pathToRegexp('/trade/order/sub/profile/:id').exec(pathname);
         if (match) {
@@ -30,11 +30,11 @@ export default {
           dispatch({ type: 'saveOperType', payload: { operType: 'view' } });
         }
       });
-    }
+    },
   },
 
   effects: {
-    * query ({ payload }, { call, put }) {
+    * query({ payload }, { call, put }) {
       yield put({ type: 'changeLoading', payload: { itemLoading: true } });
       const { data, success } = yield call(queryOne, payload);
       if (success) {
@@ -42,7 +42,7 @@ export default {
       }
       yield put({ type: 'changeLoading', payload: { itemLoading: false } });
     },
-    * querySubOrder ({ payload }, { call, put }) {
+    * querySubOrder({ payload }, { call, put }) {
       yield put({ type: 'changeLoading', payload: { itemLoading: true } });
       const { data, success } = yield call(querySubOrder, payload);
       if (success) {
@@ -50,35 +50,36 @@ export default {
       }
       yield put({ type: 'changeLoading', payload: { itemLoading: false } });
     },
-    * create ({ payload, callback }, { call, put }) {
-      const { data, success } = yield call(create, { ...payload });
+    * create({ payload, callback }, { call, put }) {
+      const { success } = yield call(create, { ...payload });
       if (success) {
         message.success('提交成功!');
         yield put({ type: 'initState' });
         if (callback) callback();
       }
     },
-    * orderPay ({ payload, callback }, { call, put }) {
-      const { data, success } = yield call(confirmPay, payload);
+    * orderPay({ payload, callback }, { call }) {
+      const { success } = yield call(confirmPay, payload);
       if (success) {
         message.success('支付成功!');
         if (callback) callback();
       }
     },
-    * orderSend ({ payload, callback }, { call, put }) {
-      const { data, success } = yield call(confirmSend, payload);
+    * orderSend({ payload, callback }, { call, put }) {
+      const { success } = yield call(confirmSend, payload);
       if (success) {
         message.success('发货成功!');
+        yield put({ type: 'hideDeliveryModal' });
         if (callback) callback();
       }
     },
-    * orderReceive ({ payload, callback }, { call, put }) {
-      const { data, success } = yield call(confirmReceive, payload);
+    * orderReceive({ payload, callback }, { call }) {
+      const { success } = yield call(confirmReceive, payload);
       if (success) {
-        message.success('确认收货成功!');
+        message.success('收货成功!');
         if (callback) callback();
       }
-    }
+    },
   },
 
   reducers: {
@@ -106,8 +107,14 @@ export default {
     hideProductModal(state, action) {
       return { ...state, ...action.payload, productModalShow: false };
     },
+    showDeliveryModal(state, action) {
+      return { ...state, ...action.payload, deliveryModalShow: true };
+    },
+    hideDeliveryModal(state, action) {
+      return { ...state, ...action.payload, deliveryModalShow: false };
+    },
     initState(state) {
       return { ...state, currentItem: {}, itemLoading: false };
-    }
-  }
-}
+    },
+  },
+};

src/routes/Campus/index.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import queryString from 'query-string';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
@@ -15,7 +14,6 @@ import { Codes } from '../../utils/config';
   merchant: state.merchant,
 }))
 export default class CampusList extends Component {
-
   componentDidMount() {
     this.props.dispatch({
       type: 'merchant/query',
@@ -35,7 +33,7 @@ export default class CampusList extends Component {
       pagination,
       currentItem,
       modalVisible,
-      modalType
+      modalType,
     } = campus;
 
     location.query = queryString.parse(location.search);
@@ -43,13 +41,13 @@ export default class CampusList extends Component {
     const { field, keyword, ...filters } = query;
 
     // 把携带的参数中空值项删除
-    Object.keys(filters).map(key => { filters[key] ? null : delete filters[key] });
+    Object.keys(filters).map((key) => { filters[key] ? null : delete filters[key]; });
     // 如果搜索内容不为空则添加进filters中
     if (field && keyword) {
       filters.field = field;
       filters.keyword = keyword;
     }
-    
+
     const modalProps = {
       item: modalType === 'create' ? {} : currentItem,
       visible: modalVisible,
@@ -57,7 +55,7 @@ export default class CampusList extends Component {
       merchants: merchant.list,
       title: `${modalType === 'create' ? '添加校区' : '编辑校区'}`,
       wrapClassName: 'vertical-center-modal',
-      onOk (data) {
+      onOk(data) {
         dispatch({
           type: `campus/${modalType}`,
           payload: data,
@@ -66,10 +64,10 @@ export default class CampusList extends Component {
               pathname: '/terminal/campus',
               search: queryString.stringify(filters),
             }));
-          }
+          },
         });
       },
-      onCancel () {
+      onCancel() {
         dispatch({
           type: 'campus/hideModal',
         });
@@ -87,8 +85,8 @@ export default class CampusList extends Component {
         dispatch(routerRedux.push({
           pathname,
           search: queryString.stringify({
-            ...payload
-          })
+            ...payload,
+          }),
         }));
       },
       onAdd: () => {
@@ -96,7 +94,7 @@ export default class CampusList extends Component {
           type: 'campus/showModal',
           payload: { modalType: 'create' },
         });
-      }
+      },
     };
 
     const listProps = {
@@ -114,7 +112,7 @@ export default class CampusList extends Component {
           return newObj;
         }, {});
         const data = { ...filters, ...tableFilters };
-        Object.keys(data).map(key => data[key] ? null : delete data[key]);
+        Object.keys(data).map(key => (data[key] ? null : delete data[key]));
         dispatch(routerRedux.push({
           pathname,
           search: queryString.stringify({
@@ -134,15 +132,15 @@ export default class CampusList extends Component {
         });
       },
       onDeleteItem: () => {
-        //TODO: 暂不提供删除校区功能
-      }
+        // TODO: 暂不提供删除校区功能
+      },
     };
     return (
       <PageHeaderLayout>
         <Card>
-          <Search { ...searchProps } />
-          <CampusTableList { ...listProps } />
-          {modalVisible && <CampusModalForm { ...modalProps } />}
+          <Search {...searchProps} />
+          <CampusTableList {...listProps} />
+          {modalVisible && <CampusModalForm {...modalProps} />}
         </Card>
       </PageHeaderLayout>
     );

src/routes/Campus/modal.js

@@ -1,10 +1,9 @@
 import React, { Component } from 'react';
-import { Form, Cascader, Select, Input, Modal, Icon } from 'antd';
+import { Form, Cascader, Select, Input, Modal } from 'antd';
 import * as city from '../../utils/city';
 
 @Form.create()
 export default class CampusModalForm extends Component {
-
   handleOnOk = () => {
     const { onOk, form, item } = this.props;
     const { validateFields, getFieldsValue } = form;
@@ -30,14 +29,14 @@ export default class CampusModalForm extends Component {
       wrapperCol: { span: 14 },
     };
 
-    const modalOpts = { ...modalProps, onOk: this.handleOnOk }
+    const modalOpts = { ...modalProps, onOk: this.handleOnOk };
 
     return (
       <Modal {...modalOpts}>
         <Form layout="horizontal">
           <Form.Item label="渠道名称" hasFeedback {...formItemLayout}>
             {getFieldDecorator('merchantId', {
-              rules: [{ required: true, type: 'string', message: "该项为必选项!" }],
+              rules: [{ required: true, type: 'string', message: '该项为必选项!' }],
               initialValue: item.merchantId,
             })(
               <Select
@@ -56,8 +55,8 @@ export default class CampusModalForm extends Component {
               rules: [
                 {
                   required: true,
-                  message: '校区地址为必选项！'
-                }
+                  message: '校区地址为必选项！',
+                },
               ],
               initialValue: item.provinceCode && [city.provCodeToName(item.provinceCode), ...(item.cityName || '').split(' ')],
             })(<Cascader
@@ -66,7 +65,7 @@ export default class CampusModalForm extends Component {
               placeholder="请选择"
             />)}
           </Form.Item>
-          {/*校区编号暂不显示
+          {/* 校区编号暂不显示
           <Form.Item label="校区编号：" {...formItemLayout}>
             {getFieldDecorator('code', {
               initialValue: item.code,
@@ -82,7 +81,7 @@ export default class CampusModalForm extends Component {
                   message: '校区名称为必填项！',
                 },
               ],
-            })(<Input placeholder="请填写"/>)}
+            })(<Input placeholder="请填写" />)}
           </Form.Item>
           <Form.Item label="联系人：" hasFeedback {...formItemLayout}>
             {getFieldDecorator('contactName', {
@@ -123,6 +122,6 @@ export default class CampusModalForm extends Component {
           </Form.Item>
         </Form>
       </Modal>
-    )
+    );
   }
 }

src/routes/Campus/search.js

@@ -1,5 +1,4 @@
-import react, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import { Button, Form, Row, Col, Icon } from 'antd';
 import DataSearch from '../../components/DataSearch';
 
@@ -7,7 +6,7 @@ const Search = ({
   field,
   keyword,
   onSearch,
-  onAdd
+  onAdd,
 }) => {
   const searchGroupProps = {
     field,
@@ -15,9 +14,9 @@ const Search = ({
     size: 'default',
     select: true,
     selectOptions: [{
-      value: 'name', name: '校区名称'
-    },{
-      value: 'code', name: '校区编号'
+      value: 'name', name: '校区名称',
+    }, {
+      value: 'code', name: '校区编号',
     }],
     selectProps: {
       defaultValue: field || 'code',
@@ -25,25 +24,17 @@ const Search = ({
     onSearch: (value) => {
       onSearch(value);
     },
-  }
+  };
   return (
     <Row gutter={24}>
       <Col lg={10} md={12} sm={16} xs={24} style={{ marginBottom: 16 }}>
-        <DataSearch { ...searchGroupProps } />
+        <DataSearch {...searchGroupProps} />
       </Col>
       <Col lg={{ offset: 7, span: 7 }} md={12} sm={8} xs={24} style={{ marginBottom: 16, textAlign: 'right' }}>
         <Button type="primary" onClick={onAdd}><Icon type="plus-circle" />添加校区</Button>
       </Col>
     </Row>
-  )
-}
-
-Search.propTypes = {
-  form: PropTypes.object.isRequired,
-  onSearch: PropTypes.func,
-  onAdd: PropTypes.func,
-  field: PropTypes.string,
-  keyword: PropTypes.string,
-}
+  );
+};
 
 export default Form.create()(Search);

src/routes/Campus/table.js

@@ -1,16 +1,13 @@
 import React, { Component } from 'react';
 import moment from 'moment';
-import classnames from 'classnames';
 import { Modal, Table } from 'antd';
-import AnimTableBody from '../../components/Animation/AnimTableBody';
-import styles from './table.less';
 
 export default class CampusTableList extends Component {
-
   handleDeleteItem = (record) => {
+    const { onDeleteItem } = this.props;
     Modal.confirm({
       title: '您确定要删除该校区吗?',
-      onOk () {
+      onOk() {
         onDeleteItem(record.id);
       },
     });
@@ -31,11 +28,13 @@ export default class CampusTableList extends Component {
       title: '校区编号',
       dataIndex: 'code',
       key: 'code',
-    },{
+      width: '12%',
+    }, {
       title: '校区名称',
       dataIndex: 'name',
       key: 'name',
-    },{
+      width: '34%',
+    }, {
       title: '渠道名称',
       dataIndex: 'merchantId',
       key: 'merchantId',
@@ -43,22 +42,26 @@ export default class CampusTableList extends Component {
       filters: merchantList.map(item => ({ text: item.name, value: item.id })),
       filterMultiple: false,
       filteredValue: [curMerchant],
-    },{
+      width: '10%',
+    }, {
       title: '联系人',
       dataIndex: 'contactName',
       key: 'contactName',
-    },{
+      width: '10%',
+    }, {
       title: '电话',
       dataIndex: 'mobile',
       key: 'mobile',
-    },{
+      width: '12%',
+    }, {
       title: '修改时间',
       dataIndex: 'gmtModified',
       key: 'gmtModified',
-      render: (text, record) => (
+      render: text => (
         <div>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</div>
-      )
-    },{
+      ),
+      width: '16%',
+    }, {
       title: '操作',
       dataIndex: 'operation',
       key: 'operation',
@@ -66,31 +69,25 @@ export default class CampusTableList extends Component {
         <div>
           <a onClick={() => onEditItem(record)}>编辑</a>
         </div>
-      )
+      ),
+      width: '6%',
     }];
 
     // 数据table列表表头的筛选按钮点击重置后merchantId值为空，此时删除该参数
-    columns.map(item => {
+    columns.map((item) => {
       item.dataIndex === 'merchantId' && !curMerchant ? delete item.filteredValue : null;
     });
 
     // 配置分页
-    tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-
-    // 添加动画
-    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
+    tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条` };
 
     return (
       <Table
         simple
         bordered
-        { ...tableProps }
+        {...tableProps}
         columns={columns}
-        className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        components={{
-          body: { wrapper: AnimationTableBody }
-        }}
       />
     );
   }

src/routes/Campus/table.less

@@ -1,78 +0,0 @@
-@import "~antd/lib/style/themes/default.less";
-@import "../../utils/utils.less";
-
-.table {
-  :global {
-    .ant-table-tbody > tr > td,
-    .ant-table-thead > tr > th {
-      height: 62px;
-    }
-  }
-
-  &.motion {
-    :global {
-      .ant-table-tbody > tr > td,
-      .ant-table-thead > tr > th {
-        &:nth-child(1) {
-          width: 16%;
-        }
-
-        &:nth-child(2) {
-          width: 20%;
-        }
-
-        &:nth-child(3) {
-          width: 12%;
-        }
-
-        &:nth-child(4) {
-          width: 10%;
-        }
-
-        &:nth-child(5) {
-          width: 14%;
-        }
-
-        &:nth-child(6) {
-          width: 18%;
-        }
-
-        &:nth-child(7) {
-          width: 10%;
-        }
-      }
-    }
-
-    .ant-table-thead {
-      & > tr {
-        transition: none;
-        display: block;
-
-        & > th {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-        }
-      }
-    }
-
-    .ant-table-tbody {
-      & > tr {
-        transition: none;
-        display: block;
-        border-bottom: 1px solid #f5f5f5;
-
-        & > td {
-          border-bottom: none;
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-        }
-
-        &.ant-table-expanded-row-level-1 > td {
-          height: auto;
-        }
-      }
-    }
-  }
-}

src/routes/CmsUser/index.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import queryString from 'query-string';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
@@ -14,12 +13,6 @@ import PageHeaderLayout from '../../layouts/PageHeaderLayout';
   merchant: state.merchant,
 }))
 export default class CMSUser extends Component {
-  static propTypes = {
-    cmsUser: PropTypes.object,
-    location: PropTypes.object,
-    dispatch: PropTypes.func,
-  };
-
   componentDidMount() {
     this.props.dispatch({
       type: 'merchant/query',
@@ -36,7 +29,7 @@ export default class CMSUser extends Component {
     location.query = queryString.parse(location.search);
     const { query, pathname } = location;
     const { field, keyword, ...filters } = query;
-    const { list, listLoading, pagination, currentItem, itemLoading, modalVisible, modalType } = cmsUser;
+    const { list, listLoading, pagination, currentItem, modalVisible, modalType } = cmsUser;
 
     Object.keys(filters).map(key => { filters[key] ? null : delete filters[key] });
     if (field && keyword) {
@@ -52,7 +45,7 @@ export default class CMSUser extends Component {
       modalType,
       title: `${modalType === 'create' ? '添加CMS用户' : '编辑CMS用户'}`,
       wrapClassName: 'vertical-center-modal',
-      onOk (data) {
+      onOk(data) {
         dispatch({
           type: `cmsUser/${modalType}`,
           payload: data,
@@ -61,10 +54,10 @@ export default class CMSUser extends Component {
               pathname: '/cms/user',
               search: queryString.stringify(filters),
             }));
-          }
+          },
         });
       },
-      onCancel () {
+      onCancel() {
         dispatch({
           type: 'cmsUser/hideModal',
         });
@@ -82,8 +75,8 @@ export default class CMSUser extends Component {
         dispatch(routerRedux.push({
           pathname,
           search: queryString.stringify({
-            ...payload
-          })
+            ...payload,
+          }),
         }));
       },
       onAdd: () => {
@@ -93,7 +86,7 @@ export default class CMSUser extends Component {
             modalType: 'create',
           },
         });
-      }
+      },
     };
 
     const listProps = {
@@ -143,7 +136,7 @@ export default class CMSUser extends Component {
                 search: queryString.stringify(filters),
               })
             );
-          }
+          },
         });
       },
       // 解禁
@@ -158,17 +151,17 @@ export default class CMSUser extends Component {
                 search: queryString.stringify(filters),
               })
             );
-          }
+          },
         });
-      }
+      },
     };
 
     return (
       <PageHeaderLayout>
         <Card>
-          <CMSUserSearch { ...searchProps } />
-          <CMSUserTableList { ...listProps } />
-          {modalVisible && <CMSUserModalForm { ...modalProps } />}
+          <CMSUserSearch {...searchProps} />
+          <CMSUserTableList {...listProps} />
+          {modalVisible && <CMSUserModalForm {...modalProps} />}
         </Card>
       </PageHeaderLayout>
     );

src/routes/CmsUser/modal.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { Form, Select, Switch, Radio, Input, Modal, Icon } from 'antd';
-import { Codes, domains } from '../../utils/config';
+import { Form, Select, Radio, Input, Modal } from 'antd';
+import { Codes } from '../../utils/config';
 
 @Form.create()
 export default class CMSUserModalForm extends Component {
@@ -41,7 +41,7 @@ export default class CMSUserModalForm extends Component {
         <Form layout="horizontal">
           <Form.Item label="选择厂商" hasFeedback {...formItemLayout}>
             {getFieldDecorator('merchantId', {
-              rules: [{ required: true, type: 'string', message: "该项为必选项!" }],
+              rules: [{ required: true, type: 'string', message: '该项为必选项!' }],
               initialValue: item.merchantId,
             })(
               <Select
@@ -49,7 +49,9 @@ export default class CMSUserModalForm extends Component {
                 allowClear
                 placeholder="请选择"
                 optionFilterProp="children"
-                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+                filterOption={(input, option) =>
+                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }
               >
                 {merchantList.map(selItem => <Select.Option value={selItem.id} key={selItem.id}>{`${selItem.code}/${selItem.name}`}</Select.Option>)}
               </Select>
@@ -62,16 +64,18 @@ export default class CMSUserModalForm extends Component {
             })(<Input placeholder="请输入" />)}
           </Form.Item>
           {modalType === 'create' ?
-            <Form.Item label="用户密码：" hasFeedback {...formItemLayout}>
-              {getFieldDecorator('password', {
+            (
+              <Form.Item label="用户密码：" hasFeedback {...formItemLayout}>
+                {getFieldDecorator('password', {
                 rules: [{ required: true, type: 'string', message: '密码为必填项!' }],
                 initialValue: item.password,
               })(<Input placeholder="请输入" />)}
-            </Form.Item>
-            :
-            <Form.Item label="用户密码：" hasFeedback {...formItemLayout}>
-              {getFieldDecorator('password')(<Input placeholder="修改密码时填写" />)}
-            </Form.Item>
+              </Form.Item>
+            ) : (
+              <Form.Item label="用户密码：" hasFeedback {...formItemLayout}>
+                {getFieldDecorator('password')(<Input placeholder="修改密码时填写" />)}
+              </Form.Item>
+            )
           }
           <Form.Item label="用户昵称：" hasFeedback {...formItemLayout}>
             {getFieldDecorator('nickName', {
@@ -83,8 +87,8 @@ export default class CMSUserModalForm extends Component {
               initialValue: item.gender || 'MALE',
             })(
               <Radio.Group>
-                <Radio value={'MALE'} key={'MALE'}>男</Radio>
-                <Radio value={'FEMALE'} key={'FEMALE'}>女</Radio>
+                <Radio value="MALE" key="MALE">男</Radio>
+                <Radio value="FEMALE" key="FEMALE">女</Radio>
               </Radio.Group>
             )}
           </Form.Item>
@@ -113,13 +117,6 @@ export default class CMSUserModalForm extends Component {
               initialValue: item.weChat,
             })(<Input />)}
           </Form.Item>
-          {/*
-          <Form.Item label="账号状态：" {...formItemLayout}>
-            {getFieldDecorator('status', {
-              valuePropsName: 'checked',
-          })(<Switch defaultChecked={item.status === Codes.CODE_NORMAL ? true : false} checkedChildren="使用中" unCheckedChildren="禁用中" />)}
-          </Form.Item>
-          */}
         </Form>
       </Modal>
     );

src/routes/CmsUser/table.js

@@ -1,22 +1,16 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import moment from 'moment';
-import classnames from 'classnames';
-import queryString from 'query-string';
-import { Avatar, Modal, Badge, Table, Icon } from 'antd';
-import AnimTableBody from '../../components/Animation/AnimTableBody';
+import { Divider, Avatar, Modal, Badge, Table } from 'antd';
 import { Codes, statuses, domains } from '../../utils/config';
-import styles from './table.less';
 
 export default class CMSUserTableList extends Component {
-
   handleOperateItem = (record) => {
     const { onDeleteItem, onRecoverItem } = this.props;
     Modal.confirm({
       title: `您确定要${record.status === Codes.CODE_NORMAL ? '禁用' : '解禁'}该账户?`,
-      onOk () {
+      onOk() {
         if (record.status === Codes.CODE_NORMAL) {
-          onDeleteItem({id: record.id});
+          onDeleteItem({ id: record.id });
         } else {
           onRecoverItem({ id: record.id, status: Codes.CODE_NORMAL });
         }
@@ -44,79 +38,80 @@ export default class CMSUserTableList extends Component {
       render: (text, record) => {
         return (
           <Avatar
-          src={text}
-          style={{ backgroundColor: colorList[Math.floor(Math.random()*(colorList.length -1))], verticalAlign: 'middle' }}
+            src={text}
+            style={{ backgroundColor: colorList[Math.floor(Math.random() * (colorList.length - 1))], verticalAlign: 'middle' }}
           >
             {record.nickName[0]}
           </Avatar>
         );
-      }
-    },{
+      },
+      width: '6%',
+    }, {
       title: '用户名称',
       dataIndex: 'name',
       key: 'name',
-    },{
+      width: '14%',
+    }, {
       title: '用户昵称',
       dataIndex: 'nickName',
       key: 'nickName',
-    },{
+      width: '13%',
+    }, {
       title: '厂商名称',
       dataIndex: 'merchantId',
       key: 'merchantId',
       render: (text, record) => record.merchantName,
-    },{
+      width: '13%',
+    }, {
       title: '厂商类型',
       dataIndex: 'domain',
       key: 'domain',
-      render: (text, record) => domains[record.domain]
-    },{
+      render: (text, record) => domains[record.domain],
+      width: '12%',
+    }, {
       title: '状态',
       dataIndex: 'status',
       key: 'status',
       render: (text, record) => {
-        const statusMap = {[Codes.CODE_NORMAL]: 'success', [Codes.CODE_DELETE]: 'error'};
+        const statusMap = { [Codes.CODE_NORMAL]: 'success', [Codes.CODE_DELETE]: 'error' };
         return (<Badge status={statusMap[record.status]} text={statuses[record.status]} />);
       },
       filters: Object.keys(statuses).map(key => ({ text: statuses[key], value: key })),
       filterMultiple: false,
       filteredValue: curStatus,
-    },{
+      width: '10%',
+    }, {
       title: '修改时间',
       dataIndex: 'gmtModified',
       key: 'gmtModified',
-      render: (text, record) => (
+      render: text => (
         <div>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</div>
       ),
-    },{
+      width: '19%',
+    }, {
       title: '操作',
       dataIndex: 'operation',
       key: 'operation',
       render: (text, record) => (
         <div>
           <a onClick={() => onEditItem(record)}>编辑</a>
-          <span className={styles.splitLine} />
+          <Divider type="vertical" />
           <a onClick={() => this.handleOperateItem(record)}>{record.status === Codes.CODE_NORMAL ? '禁用' : '解禁'}</a>
         </div>
-      )
+      ),
+      width: '13%',
     }];
 
     // 配置分页
-    tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-
-    // 添加动画
-    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
+    tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条` };
 
     return (
       <Table
         simple
         bordered
-        { ...tableProps }
+        {...tableProps}
         columns={columns}
-        className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        components={{
-          body: { wrapper: AnimationTableBody }
-        }}
       />
     );
   }

src/routes/CmsUser/table.less

@@ -1,90 +0,0 @@
-@import "~antd/lib/style/themes/default.less";
-@import "../../utils/utils.less";
-
-.table {
-  :global {
-    .ant-table-tbody > tr > td,
-    .ant-table-thead > tr > th {
-      height: 50px;
-    }
-  }
-
-  &.motion {
-    :global {
-      .ant-table-tbody > tr > td,
-      .ant-table-thead > tr > th {
-        &:nth-child(1) {
-          width: 8%;
-        }
-
-        &:nth-child(2) {
-          width: 14%;
-        }
-
-        &:nth-child(3) {
-          width: 13%;
-        }
-
-        &:nth-child(4) {
-          width: 13%;
-        }
-
-        &:nth-child(5) {
-          width: 10%;
-        }
-
-        &:nth-child(6) {
-          width: 10%;
-        }
-
-        &:nth-child(7) {
-          width: 19%;
-        }
-
-        &:nth-child(8) {
-          width: 13%;
-        }
-      }
-
-      .ant-table-thead {
-        & > tr {
-          transition: none;
-          display: block;
-
-          & > th {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-          }
-        }
-      }
-
-      .ant-table-tbody {
-        & > tr {
-          transition: none;
-          display: block;
-          border-bottom: 1px solid #f5f5f5;
-
-          & > td {
-            border-bottom: none;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-          }
-
-          &.ant-table-expanded-row-level-1 > td {
-            height: auto;
-          }
-        }
-      }
-    }
-  }
-}
-
-.splitLine {
-  background: @border-color-split;
-  display: inline-block;
-  margin: 0 8px;
-  width: 1px;
-  height: 12px;
-}

src/routes/Merchant/Edit/baseInfo.js

@@ -1,18 +1,9 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { Spin, Card, Form, Switch, Radio, Button, Input } from 'antd';
+import { Spin, Card, Form, Radio, Button, Input } from 'antd';
 import { domains, Codes } from '../../../utils/config';
 
 @Form.create()
 export default class BaseInfoCard extends PureComponent {
-  static propTypes = {
-    form: PropTypes.object.isRequired,
-    item: PropTypes.object.isRequired,
-    loading: PropTypes.bool.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired,
-  };
-
   handleSubmit = (e) => {
     e.preventDefault();
     const { form, onSubmit } = this.props;
@@ -51,22 +42,22 @@ export default class BaseInfoCard extends PureComponent {
         <Card>
           <Form layout="horizontal" onSubmit={this.handleSubmit}>
             <Form.Item label="厂商编号" hasFeedback {...formItemLayout}>
-              {getFieldDecorator('code',{
+              {getFieldDecorator('code', {
                 rules: [{ required: true, type: 'string', message: '编号为必填写!' }],
                 initialValue: item.code,
               })(<Input />)}
             </Form.Item>
             <Form.Item label="厂商名称" hasFeedback {...formItemLayout}>
-              {getFieldDecorator('name',{
+              {getFieldDecorator('name', {
                 rules: [{ required: true, type: 'string', message: '名称为必填项!' }],
                 initialValue: item.name,
               })(<Input />)}
             </Form.Item>
             <Form.Item label="厂商类型" {...formItemLayout}>
-              {getFieldDecorator('domain',{
+              {getFieldDecorator('domain', {
                 initialValue: item.domain || Codes.CODE_PJ,
               })(
-                <Radio.Group>
+                <Radio.Group disabled={item.domain ? true : false}>
                   {Object.keys(domains).map(key =>
                     <Radio value={Number(key)} key={`domain-${key}`}>{domains[Number(key)]}</Radio>
                   )}
@@ -74,34 +65,34 @@ export default class BaseInfoCard extends PureComponent {
               )}
             </Form.Item>
             <Form.Item label="联系人" hasFeedback {...formItemLayout}>
-              {getFieldDecorator('contactName',{
+              {getFieldDecorator('contactName', {
                 initialValue: item.contactName,
               })(<Input />)}
             </Form.Item>
             <Form.Item label="联系电话" hasFeedback {...formItemLayout}>
-              {getFieldDecorator('mobile',{
+              {getFieldDecorator('mobile', {
                 initialValue: item.mobile,
               })(<Input />)}
             </Form.Item>
             <Form.Item label="开户银行" hasFeedback {...formItemLayout}>
-              {getFieldDecorator('depositBank',{
+              {getFieldDecorator('depositBank', {
                 rules: [{ required: true, type: 'string', message: '开户行为必填项!' }],
                 initialValue: item.depositBank,
               })(<Input />)}
             </Form.Item>
             <Form.Item label="银行账户" hasFeedback {...formItemLayout}>
-              {getFieldDecorator('bankAccount',{
+              {getFieldDecorator('bankAccount', {
                 rules: [{ required: true, type: 'string', message: '账户为必填项!' }],
                 initialValue: item.bankAccount,
               })(<Input />)}
             </Form.Item>
             <Form.Item label="营业执照编号" hasFeedback {...formItemLayout}>
-              {getFieldDecorator('licenseId',{
+              {getFieldDecorator('licenseId', {
                 initialValue: item.licenseId,
               })(<Input />)}
             </Form.Item>
             <Form.Item label="纳税人识别号" hasFeedback {...formItemLayout}>
-              {getFieldDecorator('taxNumber',{
+              {getFieldDecorator('taxNumber', {
                 initialValue: item.taxNumber,
               })(<Input />)}
             </Form.Item>

src/routes/Merchant/Edit/index.js

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
 import { routerRedux } from 'dva/router';
-import PropTypes from 'prop-types';
 import queryString from 'query-string';
 import { connect } from 'dva';
 import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
@@ -13,11 +12,6 @@ import { Codes, pageSize } from '../../../utils/config';
   merchantDetail: state.merchantDetail,
 }))
 export default class MerchantDetail extends PureComponent {
-  static propTypes = {
-    merchantDetail: PropTypes.object,
-    mproduct: PropTypes.object,
-  };
-
   state = { curTab: 'baseInfo' };
 
   handleTabChange = (key) => {
@@ -75,12 +69,12 @@ export default class MerchantDetail extends PureComponent {
         pageNo: 1,
         pageSize,
         merchantId: id,
-      }
+      },
     });
   }
 
   handleRecommendModalTableChange = (pagination, filterArgs, filters) => {
-    const { merchantDetail } = this.props;
+    const { dispatch, merchantDetail } = this.props;
     const { currentItem } = merchantDetail;
     const { id } = currentItem;
     const newFilters = { ...filters };
@@ -97,7 +91,7 @@ export default class MerchantDetail extends PureComponent {
       merchantId: id,
     };
 
-    Object.keys(data).map(key => data[key] ? null : delete data[key]);
+    Object.keys(data).map(key => (data[key] ? null : delete data[key]));
     dispatch({ type: 'mproduct/query', payload: data });
   }
 
@@ -107,7 +101,7 @@ export default class MerchantDetail extends PureComponent {
     dispatch(
       routerRedux.push({
         pathname: '/merchant',
-        search: queryString.stringify(filters)
+        search: queryString.stringify(filters),
       })
     );
     dispatch({
@@ -128,7 +122,7 @@ export default class MerchantDetail extends PureComponent {
         dispatch(
           routerRedux.push({
             pathname: '/merchant',
-            search: queryString.stringify(filters)
+            search: queryString.stringify(filters),
           })
         );
       },
@@ -150,11 +144,11 @@ export default class MerchantDetail extends PureComponent {
     const { domain } = currentItem;
 
     let tabList;
-    if (operType === 'update' && domain === Codes.CODE_PJ) {
+    if (operType === 'update' && domain !== Codes.CODE_CP) {
       tabList = [{
         key: 'baseInfo',
         tab: '基础信息',
-      },{
+      }, {
         key: 'recommend',
         tab: '推荐位设置',
       }];
@@ -167,7 +161,7 @@ export default class MerchantDetail extends PureComponent {
         dispatch(
           routerRedux.push({
             pathname: '/merchant',
-            search: queryString.stringify(filters)
+            search: queryString.stringify(filters),
           })
         );
         dispatch({
@@ -177,8 +171,8 @@ export default class MerchantDetail extends PureComponent {
       },
       onSubmit: (data) => {
         const { gmtCreated, gmtModified, ...rest } = currentItem;
-        const newData = {...rest, ...data};
-        if (operType == 'create') {
+        const newData = { ...rest, ...data };
+        if (operType === 'create') {
           newData.status = Codes.CODE_NORMAL;
         }
         dispatch({
@@ -189,12 +183,12 @@ export default class MerchantDetail extends PureComponent {
               pathname: '/merchant',
               search: queryString.stringify(filters),
             }));
-          }
+          },
         });
-      }
+      },
     };
     const recommendTabProps = {
-      rowKeyName: "id",
+      rowKeyName: 'id',
       loading: recLoading,
       selTableData: recommend,
       modalVisible: recModalShow,
@@ -211,8 +205,8 @@ export default class MerchantDetail extends PureComponent {
     };
 
     const contentMap = {
-      baseInfo: <BaseInfoCard { ...baseInfoTabProps }/>,
-      recommend: <RecommendList { ...recommendTabProps } />
+      baseInfo: <BaseInfoCard {...baseInfoTabProps} />,
+      recommend: <RecommendList {...recommendTabProps} />,
     };
 
     return (

src/routes/Merchant/Edit/recommend.js

@@ -1,12 +1,10 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { Card, Spin, Table, Button } from 'antd';
 import SelectModal from '../../../components/SelectModal';
 import styles from './recommend.less';
 import { productType } from '../../../utils/config';
 
 export default class RecommendList extends PureComponent {
-
   render() {
     const {
       loading,
@@ -38,7 +36,7 @@ export default class RecommendList extends PureComponent {
       searchSelect: true,
       searchSelectOptions: [{
         value: 'name', name: '产品名称', mode: 'input',
-      },{
+      }, {
         value: 'code', name: '产品编号', mode: 'input',
       }],
       searchSelectProps: {
@@ -55,21 +53,21 @@ export default class RecommendList extends PureComponent {
       tableClassName: styles.sTable,
       tablePagination: false,
       tableDataSource: selTableData,
-      rowKeyName: rowKeyName,
+      rowKeyName,
       tableColumns: [{
         title: '产品编号',
         dataIndex: 'code',
         key: 'code',
-      },{
+      }, {
         title: '产品名称',
         dataIndex: 'name',
         key: 'name',
-      },{
+      }, {
         title: '类型',
         dataIndex: 'type',
         key: 'type',
-        render: (text, record) => productType[text],
-      }]
+        render: text => productType[text],
+      }],
     };
 
     const fsTableProps = {
@@ -78,33 +76,33 @@ export default class RecommendList extends PureComponent {
         title: '产品编号',
         dataIndex: 'code',
         key: 'code',
-      },{
+      }, {
         title: '产品名称',
         dataIndex: 'name',
         key: 'name',
-      },{
+      }, {
         title: '类型',
         dataIndex: 'type',
         key: 'type',
-        render: (text, record) => productType[text],
+        render: text => productType[text],
       }],
       ...fsTableOpts,
-    }
+    };
 
     const columns = [{
       title: '产品编号',
       dataIndex: 'code',
       key: 'code',
-    },{
+    }, {
       title: '产品名称',
       dataIndex: 'name',
       key: 'name',
-    },{
+    }, {
       title: '类型',
       dataIndex: 'type',
       key: 'type',
-      render: (text, record) => productType[text],
-    },{
+      render: text => productType[text],
+    }, {
       title: '位置',
       dataIndex: 'sort',
       key: 'sort',
@@ -122,9 +120,9 @@ export default class RecommendList extends PureComponent {
             pagination={false}
           />
           <Button onClick={onPageCancel} style={{ marginTop: 20 }}>退出</Button>
-          <Button onClick={onPageSubmit} type="primary" style={{ marginLeft: 50, marginTop: 20 }}>保存</Button>
+          <Button onClick={onPageSubmit} type="primary" style={{ marginLeft: 36, marginTop: 20 }}>保存</Button>
         </Card>
-        {/*渠道产品选择模态框*/}
+        {/* 渠道产品选择模态框 */}
         <SelectModal
           mode="multiple"
           {...modalProps}

src/routes/Merchant/List/index.js

@@ -1,31 +1,25 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import queryString from 'query-string';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
 import { Card } from 'antd';
 import TableList from './table';
 import Search from './search';
+import RechargeModalForm from './modal';
 import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
 
 @connect(state => ({ merchant: state.merchant }))
 export default class Merchant extends PureComponent {
-  static propTypes = {
-    merchant: PropTypes.object,
-    location: PropTypes.object,
-    dispatch: PropTypes.func,
-  };
-
   render() {
     const { location, dispatch, merchant } = this.props;
 
     location.query = queryString.parse(location.search);
     const { query, pathname } = location;
     const { field, keyword, ...filters } = query;
-    const { list, listLoading, pagination, currentItem, itemLoading, modalVisible, modalType } = merchant;
+    const { list, listLoading, pagination, modalVisible, currentItem } = merchant;
 
     // 把携带的参数中空值项删除
-    Object.keys(filters).map(key => { filters[key] ? null : delete filters[key] });
+    Object.keys(filters).map((key) => { filters[key] ? null : delete filters[key]; });
     // 如果搜索内容不为空则添加进filters中
     if (field && keyword) {
       filters[field] = keyword;
@@ -42,8 +36,8 @@ export default class Merchant extends PureComponent {
         dispatch(routerRedux.push({
           pathname,
           search: queryString.stringify({
-            ...payload
-          })
+            ...payload,
+          }),
         }));
       },
       onAdd: () => {
@@ -53,12 +47,38 @@ export default class Merchant extends PureComponent {
             state: filters,
           })
         );
-      }
+      },
+    };
+
+    const modalProps = {
+      item: currentItem,
+      visible: modalVisible,
+      maskClosable: false,
+      title: '账户充值',
+      wrapClassName: 'vertical-center-modal',
+      onOk(data) {
+        dispatch({
+          type: 'merchant/recharge',
+          payload: data,
+          callback: () => {
+            dispatch(routerRedux.push({
+              pathname: '/trade/order',
+              search: queryString.stringify(filters),
+            }));
+          },
+        });
+      },
+      onCancel() {
+        dispatch({
+          type: 'merchant/hideModal',
+        });
+      },
     };
 
     const listProps = {
       pagination,
       location,
+      modalVisible,
       dataSource: list,
       loading: listLoading,
       curDomain: filters.domain,
@@ -71,7 +91,7 @@ export default class Merchant extends PureComponent {
           return newObj;
         }, {});
         const data = { ...filters, ...tableFilters };
-        Object.keys(data).map(key => data[key] ? null : delete data[key]);
+        Object.keys(data).map(key => (data[key] ? null : delete data[key]));
         dispatch(routerRedux.push({
           pathname,
           search: queryString.stringify({
@@ -100,30 +120,23 @@ export default class Merchant extends PureComponent {
                 search: queryString.stringify(filters),
               })
             );
-          }
+          },
         });
       },
-      onRecoverItem: (payload) => {
+      onRechargeItem: (record) => {
         dispatch({
-          type: 'merchant/recover',
-          payload,
-          callback: () => {
-            dispatch(
-              routerRedux.push({
-                pathname,
-                search: queryString.stringify(filters),
-              })
-            );
-          }
+          type: 'merchant/showModal',
+          payload: record,
         });
-      }
+      },
     };
 
     return (
       <PageHeaderLayout>
         <Card>
-          <Search { ...searchProps } />
-          <TableList { ...listProps } />
+          <Search {...searchProps} />
+          <TableList {...listProps} />
+          <RechargeModalForm {...modalProps} />
         </Card>
       </PageHeaderLayout>
     );

src/routes/Merchant/List/modal.js

@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import { Form, Input, Modal } from 'antd';
+
+@Form.create()
+export default class RechargeModalForm extends Component {
+  /**
+   * 点击确定充值
+  */
+  handleModalOk = () => {
+    const { form, onOk, item } = this.props;
+    const { validateFields, getFieldsValue } = form;
+
+    validateFields((errors) => {
+      if (errors) return;
+      const data = { ...getFieldsValue() };
+      data.merchantId = item.id;
+      onOk(data);
+    });
+  }
+
+  render() {
+    const { item, form, ...modalProps } = this.props;
+    const { getFieldDecorator } = form;
+
+    const modalOpts = {
+      ...modalProps,
+      onOk: this.handleModalOk,
+    };
+
+    const formItemLayout = {
+      labelCol: { span: 7 },
+      wrapperCol: { span: 15 },
+    };
+
+    return (
+      <Modal {...modalOpts}>
+        <Form layout="horizontal">
+          <Form.Item label="账户余额：" {...formItemLayout}>
+            <span style={{ color: 'red' }}>{`${item.balance} 元`}</span>
+          </Form.Item>
+          <Form.Item label="充值金额：" {...formItemLayout}>
+            {getFieldDecorator('quantity', {
+                rules: [{ required: true, type: 'string', message: '请输入正确的金额!' }],
+                initalValue: '',
+            })(<Input suffix="¥" placeholder="请输入充值金额" style={{ width: '100%' }} />)}
+          </Form.Item>
+          <Form.Item label="备注：" {...formItemLayout}>
+            {getFieldDecorator('note', {
+            })(<Input placeholder="请输入" style={{ width: '100%' }} />)}
+          </Form.Item>
+        </Form>
+      </Modal>
+    );
+  }
+}

src/routes/Merchant/List/search.js

@@ -1,18 +1,8 @@
-import react, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { Button, Form, Row, Col, Icon } from 'antd';
+import React, { PureComponent } from 'react';
+import { Button, Row, Col, Icon } from 'antd';
 import DataSearch from '../../../components/DataSearch';
 
-@Form.create()
 export default class Search extends PureComponent {
-  static propTypes = {
-    form: PropTypes.object.isRequired,
-    onSearch: PropTypes.func,
-    onAdd: PropTypes.func,
-    field: PropTypes.string,
-    keyword: PropTypes.string,
-  };
-
   render() {
     const { field, keyword, onSearch, onAdd } = this.props;
 
@@ -22,12 +12,12 @@ export default class Search extends PureComponent {
       size: 'default',
       select: true,
       selectOptions: [{
-        value: 'name', name: '厂商名称'
-      },{
-        value: 'code', name: '厂商编号'
+        value: 'name', name: '厂商名称',
+      }, {
+        value: 'code', name: '厂商编号',
       }],
       selectProps: {
-        defaultValue: field || 'name',
+        defaultValue: field || 'code',
       },
       onSearch: (value) => {
         onSearch(value);
@@ -37,7 +27,7 @@ export default class Search extends PureComponent {
     return (
       <Row gutter={24}>
         <Col lg={10} md={12} sm={16} xs={24} style={{ marginBottom: 16 }}>
-          <DataSearch { ...searchGroupProps } />
+          <DataSearch {...searchGroupProps} />
         </Col>
         <Col lg={{ offset: 7, span: 7 }} md={12} sm={8} xs={24} style={{ marginBottom: 16, textAlign: 'right' }}>
           <Button type="primary" onClick={onAdd}><Icon type="plus-circle" />创建厂商</Button>

src/routes/Merchant/List/table.js

@@ -1,41 +1,59 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import moment from 'moment';
-import classnames from 'classnames';
-import queryString from 'query-string';
-import { Modal, Table, Menu, Icon, Badge } from 'antd';
-import AnimTableBody from '../../../components/Animation/AnimTableBody';
-import styles from './table.less';
+import { Divider, Modal, Table, Badge } from 'antd';
 import { domains, statuses, Codes } from '../../../utils/config';
+import { getLocalUser } from '../../../utils/helper';
 
 export default class TableList extends PureComponent {
-
-  handleOperateItem = (record) => {
-    const { onDeleteItem, onRecoverItem } = this.props;
+  /**
+   * 删除操作
+   */
+  handleDeleteItem = (record) => {
+    const { onDeleteItem } = this.props;
     Modal.confirm({
-      title: `您确定要${record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}该条记录?`,
-      onOk () {
-        if (record.status === Codes.CODE_NORMAL) {
-          onDeleteItem({id: record.id});
-        } else if (record.status === Codes.CODE_DELETE) {
-          onRecoverItem({ id: record.id, status: Codes.CODE_NORMAL });
-        }
-      },
-    })
+      okText: '确定',
+      cancelText: '取消',
+      title: '您确定要删除该厂商?',
+      onOk: () => onDeleteItem({ id: record.id }),
+    });
+  }
+
+  /**
+   * 充值操作(只有userid=1的用户才展示充值按钮)
+   */
+  handleRechargeItem = (record) => {
+    const { onRechargeItem } = this.props;
+    onRechargeItem(record);
   }
 
   render() {
-    const { curDomain, curStatus, onDeleteItem, onRecoverItem, onEditItem, location, pagination, ...tableProps } = this.props;
+    const {
+      curDomain,
+      curStatus,
+      onDeleteItem,
+      onEditItem,
+      pagination,
+      modalVisible,
+      form,
+      ...tableProps
+    } = this.props;
+
+    const formItemLayout = {
+      labelCol: { span: 7 },
+      wrapperCol: { span: 24 },
+    };
 
     const columns = [{
       title: '厂商编号',
       dataIndex: 'code',
       key: 'code',
-    },{
+      width: '14%',
+    }, {
       title: '厂商名称',
       dataIndex: 'name',
       key: 'name',
-    },{
+      width: '14%',
+    }, {
       title: '厂商类型',
       dataIndex: 'domain',
       key: 'domain',
@@ -45,60 +63,75 @@ export default class TableList extends PureComponent {
       filters: Object.keys(domains).map(key => ({ text: domains[key], value: key })),
       filterMultiple: false,
       filteredValue: [curDomain],
-    },{
+      width: '14%',
+    }, {
+      title: '账户余额(¥)',
+      dataIndex: 'balance',
+      key: 'balance',
+      width: '12%',
+    }, {
       title: '状态',
       dataIndex: 'status',
       key: 'status',
       render: (text, record) => {
-        const statusMap = {[Codes.CODE_NORMAL]: 'success', [Codes.CODE_DELETE]: 'error'};
+        const statusMap = { [Codes.CODE_NORMAL]: 'success', [Codes.CODE_DELETE]: 'error' };
         return (<Badge status={statusMap[record.status]} text={statuses[record.status]} />);
       },
       filters: Object.keys(statuses).map(key => ({ text: statuses[key], value: key })),
       filterMultiple: false,
       filteredValue: [curStatus],
-    },{
+      width: '14%',
+    }, {
       title: '修改时间',
       dataIndex: 'gmtModified',
       key: 'gmtModified',
-      render: (text, record) => (
+      render: text => (
         <div>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</div>
-      )
-    },{
+      ),
+    }, {
       title: '操作',
       dataIndex: 'operation',
       key: 'operation',
-      render: (text, record) => (
-        <div>
-          <a onClick={() => onEditItem(record)}>编辑</a>
-          <span className={styles.splitLine} />
-            <a onClick={() => this.handleOperateItem(record)}>{record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}</a>
-        </div>
-      )
+      render: (text, record) => {
+        if (getLocalUser().id === '1') {
+          return (
+            <div>
+              <a onClick={() => onEditItem(record)}>编辑</a>
+              <Divider type="vertical" />
+              <a onClick={() => this.handleRechargeItem(record)}>充值</a>
+              <Divider type="vertical" />
+              <a onClick={() => this.handleDeleteItem(record)}>删除</a>
+            </div>
+          );
+        } else {
+          return (
+            <div>
+              <a onClick={() => onEditItem(record)}>编辑</a>
+              <Divider type="vertical" />
+              <a onClick={() => this.handleDeleteItem(record)}>删除</a>
+            </div>
+          );
+        }
+      },
+      width: '15%',
     }];
 
     // 数据table列表表头的筛选按钮点击重置后status与domain值为空，此时删除该参数
-    columns.map(item => {
+    columns.map((item) => {
       item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
       item.dataIndex === 'domain' && !curDomain ? delete item.filteredValue : null;
     });
 
     // 配置分页
-    tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-
-    // 添加动画
-    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
+    tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条` };
 
     return (
       <Table
         simple
         bordered
-        { ...tableProps }
+        {...tableProps}
         columns={columns}
-        className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        components={{
-          body: { wrapper: AnimationTableBody }
-        }}
       />
     );
   }

src/routes/Merchant/List/table.less

@@ -1,82 +0,0 @@
-@import "~antd/lib/style/themes/default.less";
-@import "../../../utils/utils.less";
-
-.table {
-  :global {
-    .ant-table-tbody > tr > td,
-    .ant-table-thead > tr > th {
-      height: 62px;
-    }
-  }
-
-  &.motion {
-    :global {
-      .ant-table-tbody > tr > td,
-      .ant-table-thead > tr > th {
-        &:nth-child(1) {
-          width: 17%;
-        }
-
-        &:nth-child(2) {
-          width: 17%;
-        }
-
-        &:nth-child(3) {
-          width: 17%;
-        }
-
-        &:nth-child(4) {
-          width: 17%;
-        }
-
-        &:nth-child(5) {
-          width: 17%;
-        }
-
-        &:nth-child(6) {
-          width: 15%;
-        }
-      }
-
-      .ant-table-thead {
-        & > tr {
-          transition: none;
-          display: block;
-
-          & > th {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-          }
-        }
-      }
-
-      .ant-table-tbody {
-        & > tr {
-          transition: none;
-          display: block;
-          border-bottom: 1px solid #f5f5f5;
-
-          & > td {
-            border-bottom: none;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-          }
-
-          &.ant-table-expanded-row-level-1 > td {
-            height: auto;
-          }
-        }
-      }
-    }
-  }
-}
-
-.splitLine {
-  background: @border-color-split;
-  display: inline-block;
-  margin: 0 8px;
-  width: 1px;
-  height: 12px;
-}

src/routes/Order/Edit/OrderProfile.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
 import queryString from 'query-string';
-import { Card, Modal, Steps, Badge, Button, Table, Divider } from 'antd';
+import { Card, Modal, Button, Table } from 'antd';
 import moment from 'moment';
 import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
 import FooterToolbar from '../../../components/FooterToolbar';
@@ -11,6 +11,9 @@ import { provCodeToName } from '../../../utils/city';
 
 @connect(state => ({ orderDetail: state.orderDetail }))
 export default class OrderProfile extends Component {
+  /**
+   * 退出页面
+   */
   handlePageCancel = () => {
     const { filters, dispatch } = this.props;
     dispatch(routerRedux.push({
@@ -19,82 +22,58 @@ export default class OrderProfile extends Component {
     }));
   }
 
-  // handleOrderStatus = (id, type, name) => {
-  //   const { dispatch, orderDetail } = this.props;
-  //   const { filters } = orderDetail;
-  //   Modal.confirm({
-  //     title: name,
-  //     cancelText: '取消',
-  //     okText: '确认',
-  //     onOk: () =>
-  //       dispatch({
-  //         type: `orderDetail/${type}`,
-  //         payload: { id },
-  //         callback: () => {
-  //           dispatch(routerRedux.push({
-  //             pathname: `/trade/order/profile/${id}`,
-  //             search: queryString.stringify(filters),
-  //           }));
-  //         },
-  //       }),
-  //   });
-  // }
-  //
-  // nextStepOperation = (data) => {
-  //   const { orderStatus, id } = data;
-  //   switch (orderStatus) {
-  //     case Codes.CODE_UNPAID:
-  //       return (
-  //         <Button
-  //           type="primary"
-  //           onClick={() =>
-  //             this.handleOrderStatus(id, 'orderPay', '确定支付该订单?')}
-  //         >立即支付
-  //         </Button>
-  //       );
-  //       break;
-  //     case Codes.CODE_FORSEND:
-  //       return (
-  //         <Button
-  //           type="primary"
-  //           onClick={() =>
-  //             this.handleOrderStatus(id, 'orderSend', '确定发货?')}
-  //         >立即发货
-  //         </Button>
-  //       );
-  //       break;
-  //     case Codes.CODE_SENT:
-  //       return (
-  //         <Button
-  //           type="primary"
-  //           onClick={() =>
-  //             this.handleOrderStatus(id, 'orderReceive', '确认收货?')}
-  //         >确认收货</Button>
-  //       );
-  //       break;
-  //     case Codes.CODE_COMPLETE:
-  //       return null;
-  //       break;
-  //     default:
-  //       return (
-  //         <Button
-  //           type="primary"
-  //           disabled={true}
-  //         >处理中</Button>
-  //       );
-  //       break;
-  //   }
-  // }
+  /**
+   * 确认支付
+   */
+  confirmPay = () => {
+    const { dispatch, orderDetail } = this.props;
+    const { currentItem, filters } = orderDetail;
+    const { id } = currentItem;
+    Modal.confirm({
+      okText: '确认支付',
+      cancelText: '取消支付',
+      title: '确定支付该订单?',
+      onOk: () => {
+        dispatch({
+          type: 'orderDetail/orderPay',
+          payload: { id },
+          callback: () => dispatch(routerRedux.push({
+            pathname: `/trade/order/profile/${id}`,
+            search: queryString.stringify(filters),
+          })),
+        });
+      },
+    });
+  }
+
+  /**
+   * 渲染底部操作按钮
+   */
+  renderFooter = (status) => {
+    switch (status) {
+      case Codes.CODE_UNPAID:
+        return (
+          <FooterToolbar>
+            <Button onClick={this.handlePageCancel}>返回订单列表</Button>
+            <Button onClick={this.confirmPay} type="primary">立即支付</Button>
+          </FooterToolbar>
+        );
+      default:
+        return (
+          <FooterToolbar>
+            <Button onClick={this.handlePageCancel}>返回订单列表</Button>
+          </FooterToolbar>
+        );
+    }
+  }
 
   render() {
     const { orderDetail } = this.props;
     const { currentItem } = orderDetail;
     const {
       id,
-      code,
       gmtCreated,
       userCode,
-      status,
       provinceCode,
       cityName,
       zoneName,
@@ -118,7 +97,7 @@ export default class OrderProfile extends Component {
       dataIndex: 'field',
       key: 1,
       width: '20%',
-    },{
+    }, {
       title: 'value',
       dataIndex: 'value',
       key: 2,
@@ -129,19 +108,19 @@ export default class OrderProfile extends Component {
       field: '订单编号',
       value: id,
       key: 1,
-    },{
+    }, {
       field: '下单时间',
       value: moment(gmtCreated).format('YYYY-MM-DD HH:mm:ss'),
       key: 2,
-    },{
+    }, {
       field: '订单状态',
       value: orderStatuses[orderStatus],
       key: 3,
-    },{
+    }, {
       field: '拆分状态',
       value: orderSplitStatus[splitStatus],
       key: 4,
-    },{
+    }, {
       field: '拆分原因',
       value: '订单中包含实体物品或物品分属不同商家',
       key: 5,
@@ -151,27 +130,27 @@ export default class OrderProfile extends Component {
       field: '购买终端编号',
       value: userCode,
       key: 1,
-    },{
+    }, {
       field: '购买终端名称',
       value: `${classroomName}`,
       key: 2,
-    },{
+    }, {
       field: '终端所属校区',
       value: `${provCodeToName(provinceCode)}-${cityName}-${zoneName}`,
       key: 3,
-    },{
+    }, {
       field: '终端所属渠道',
       value: merchantName,
       key: 4,
-    },{
+    }, {
       field: '收货人姓名',
       value: name,
       key: 5,
-    },{
+    }, {
       field: '收货人电话',
       value: mobile,
       key: 6,
-    },{
+    }, {
       field: '收货地址',
       value: address,
       key: 7,
@@ -182,57 +161,50 @@ export default class OrderProfile extends Component {
       dataIndex: 'code',
       key: 1,
       width: '20%',
-    },{
+    }, {
       title: '商品名称',
       dataIndex: 'name',
       key: 2,
       width: '20%',
-    },{
+    }, {
       title: '商品类型',
       dataIndex: 'type',
-      render: (text, row) => productType[text],
+      render: text => productType[text],
       key: 3,
       width: '15%',
-    },{
+    }, {
       title: '商品售价(元)',
       dataIndex: 'merchantPrice',
       key: 4,
       width: '20%',
-    },{
+    }, {
       title: '商品数量',
       dataIndex: 'quantity',
       key: 5,
       width: '10%',
-    },{
+    }, {
       title: '操作',
       dataIndex: 'operation',
-      render: (text, row) => <a>查看详情</a>,
+      render: () => <a>查看详情</a>,
       key: 6,
       width: '15%',
     }];
-    // 子订单列表
-    const subOrderTableColumns = [{
-      title: '子订单编号',
-      dataIndex: 'id',
-      key: 1,
-      width: '20%',
-    }];
     // 结算信息 - table data
     const strs = [];
     (goods || []).forEach(item => strs.push(`${item.merchantPrice}(元) * ${item.quantity}`));
     const accountTableDatas = [{
       field: '商品总价',
-      value: `${strs.join(' + ')} = ${originPrice}(元)`,
+      value: () => `${strs.join(' + ')} = ${originPrice}(元)`,
       key: 1,
-    },{
+    }, {
       field: '支付金额',
-      value:
+      value: () => (
         <span>
           {`总价：${originPrice}(元) - 商品优惠：${adjustPrice}(元) = 订单总金额：`}
           <strong style={{ color: 'red' }}>{`${finalPrice}(元)`}</strong>
-        </span>,
+        </span>),
       key: 2,
-    }]
+    }];
 
     return (
       <PageHeaderLayout title="订单详情">
@@ -241,7 +213,7 @@ export default class OrderProfile extends Component {
             size="small"
             columns={simplyTableColumns}
             dataSource={orderInfoTableDatas}
-            bordered={true}
+            bordered
             pagination={false}
             showHeader={false}
           />
@@ -252,7 +224,7 @@ export default class OrderProfile extends Component {
             rowKey={record => record.id}
             columns={goodsTableColumns}
             dataSource={goods || []}
-            bordered={true}
+            bordered
             pagination={false}
           />
         </Card>
@@ -261,27 +233,25 @@ export default class OrderProfile extends Component {
             size="small"
             columns={simplyTableColumns}
             dataSource={consumerInfoTableData}
-            bordered={true}
+            bordered
             pagination={false}
             showHeader={false}
           />
         </Card>
         <Card title="订单备注" bordered={false} style={{ marginBottom: 20 }}>
-          {note ? note : '无'}
+          {note || '无'}
         </Card>
         <Card title="结算信息" bordered={false}>
           <Table
             size="small"
             columns={simplyTableColumns}
             dataSource={accountTableDatas}
-            bordered={true}
+            bordered
             pagination={false}
             showHeader={false}
           />
         </Card>
-        <FooterToolbar>
-          <Button onClick={this.handlePageCancel} type="primary">返回订单列表</Button>
-        </FooterToolbar>
+        {this.renderFooter(orderStatus)}
       </PageHeaderLayout>
     );
   }

src/routes/Order/Edit/SubOrderProfile.js

@@ -2,15 +2,18 @@ import React, { Component } from 'react';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
 import queryString from 'query-string';
-import { Card, Modal, Steps, Badge, Button, Table, Divider, Icon } from 'antd';
-import moment from 'moment';
+import { Card, Form, Modal, Steps, Button, Table, Input, Icon } from 'antd';
 import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
 import FooterToolbar from '../../../components/FooterToolbar';
-import { Codes, orderStatuses, productType, orderSplitStatus } from '../../../utils/config';
+import { Codes, productType } from '../../../utils/config';
 import { provCodeToName } from '../../../utils/city';
 
 @connect(state => ({ orderDetail: state.orderDetail }))
+@Form.create()
 export default class SubOrderProfile extends Component {
+  /**
+   * 返回订单列表
+   */
   handlePageCancel = () => {
     const { filters, dispatch } = this.props;
     dispatch(routerRedux.push({
@@ -19,69 +22,120 @@ export default class SubOrderProfile extends Component {
     }));
   }
 
-  // handleOrderStatus = (id, type, name) => {
-  //   const { dispatch, orderDetail } = this.props;
-  //   const { filters } = orderDetail;
-  //   Modal.confirm({
-  //     title: name,
-  //     cancelText: '取消',
-  //     okText: '确认',
-  //     onOk: () =>
-  //       dispatch({
-  //         type: `orderDetail/${type}`,
-  //         payload: { id },
-  //         callback: () => {
-  //           dispatch(routerRedux.push(`/trade/order/sub/profile/${id}`));
-  //         },
-  //       }),
-  //   });
-  // }
+  /**
+   * 显示发货弹框
+   */
+  showSendModal = () => {
+    this.props.dispatch({
+      type: 'orderDetail/showDeliveryModal',
+    });
+  }
+
+  /**
+   * 隐藏发货弹框
+   */
+  hideSendModal = () => {
+    this.props.dispatch({
+      type: 'orderDetail/hideDeliveryModal',
+    });
+    this.props.form.resetFields();
+  }
 
-  // nextStepOperation = (data) => {
-  //   const { orderStatus, id } = data;
-  //   switch (orderStatus) {
-  //     case Codes.CODE_UNPAID:
-  //       return (
-  //         <Button
-  //           type="primary"
-  //           onClick={() =>
-  //             this.handleOrderStatus(id, 'orderPay', '确定支付该订单?')}
-  //         >立即支付
-  //         </Button>
-  //       );
-  //       break;
-  //     case Codes.CODE_COMPLETE:
-  //       return null;
-  //       break;
-  //     case Codes.CODE_CANCEL:
-  //       return null;
-  //       break;
-  //     default:
-  //       return (
-  //         <Button
-  //           type="primary"
-  //           disabled={true}
-  //         >进行中</Button>
-  //       );
-  //       break;
-  //   }
-  // }
+  /**
+   * 点击确认发货
+   */
+  confirmSend = () => {
+    const { dispatch, form, orderDetail } = this.props;
+    const { validateFields, getFieldsValue } = form;
+    const { currentItem, filters } = orderDetail;
+    const { id } = currentItem;
+    validateFields((errors) => {
+      if (!errors) {
+        const trackNo = getFieldsValue(['tracKNo']);
+        dispatch({
+          type: 'orderDetail/orderSend',
+          payload: { id, trackNo },
+          callback: () => dispatch(routerRedux.push({
+            pathname: `/trade/order/sub/profile/${id}`,
+            search: queryString.stringify(filters),
+          })),
+        });
+      }
+    });
+  }
+
+  /**
+   * 点击确认收货
+   */
+  confirmReceipt = () => {
+    const { dispatch, orderDetail } = this.props;
+    const { currentItem, filters } = orderDetail;
+    const { id } = currentItem;
+    dispatch({
+      type: 'orderDetail/orderReceive',
+      payload: { id },
+      callback: () => dispatch(routerRedux.push({
+        pathname: `/trade/order/sub/profile/${id}`,
+        search: queryString.stringify(filters),
+      })),
+    });
+  }
+
+  /**
+   * 根据订单状态来生成操作按钮
+   */
+  renderFooter = (status) => {
+    switch (status) {
+      // 待发货订单
+      case Codes.CODE_FORSEND:
+        return (
+          <FooterToolbar>
+            <Button onClick={this.handlePageCancel}>返回订单列表</Button>
+            <Button onClick={this.showSendModal} type="primary">立即发货</Button>
+          </FooterToolbar>
+        );
+      // 待收货订单
+      case Codes.CODE_SENT:
+        return (
+          <FooterToolbar>
+            <Button onClick={this.handlePageCancel}>返回订单列表</Button>
+            <Button onClick={this.confirmReceipt} type="primary">确认收货</Button>
+          </FooterToolbar>
+        );
+      // 已完成订单
+      case Codes.CODE_COMPLETE:
+        return (
+          <FooterToolbar>
+            <Button onClick={this.handlePageCancel}>返回订单列表</Button>
+          </FooterToolbar>
+        );
+      // 已取消订单
+      case Codes.CODE_CANCEL:
+        return (
+          <FooterToolbar>
+            <Button onClick={this.handlePageCancel}>返回订单列表</Button>
+          </FooterToolbar>
+        );
+      default:
+        return (
+          <FooterToolbar>
+            <Button onClick={this.handlePageCancel}>返回订单列表</Button>
+          </FooterToolbar>
+        );
+    }
+  }
 
   render() {
-    const { orderDetail } = this.props;
-    const { currentItem } = orderDetail;
+    const { orderDetail, form } = this.props;
+    const { getFieldDecorator } = form;
+    const { currentItem, deliveryModalShow } = orderDetail;
     const {
-      id,
-      code,
-      gmtCreated,
       userCode,
-      status,
       provinceCode,
       cityName,
       zoneName,
       classroomName,
       orderStatus,
-      splitStatus,
       merchantName,
       originPrice,
       finalPrice,
@@ -91,6 +145,7 @@ export default class SubOrderProfile extends Component {
       mobile,
       address,
       note,
+      trackNo,
       goods,
     } = currentItem;
 
@@ -100,105 +155,82 @@ export default class SubOrderProfile extends Component {
       dataIndex: 'field',
       key: 1,
       width: '20%',
-    },{
+    }, {
       title: 'value',
       dataIndex: 'value',
       key: 2,
       width: '80%',
     }];
-    // 订单信息 - table data
-    const orderInfoTableDatas = [{
-      field: '订单编号',
-      value: id,
-      key: 1,
-    },{
-      field: '下单时间',
-      value: moment(gmtCreated).format('YYYY-MM-DD HH:mm:ss'),
-      key: 2,
-    },{
-      field: '订单状态',
-      value: orderStatuses[orderStatus],
-      key: 3,
-    },{
-      field: '拆分状态',
-      value: orderSplitStatus[splitStatus],
-      key: 4,
-    },{
-      field: '拆分原因',
-      value: '订单中包含实体物品或物品分属不同商家',
-      key: 5,
-    }];
     // 收货人信息 - table data
     const consumerInfoTableData = [{
       field: '购买终端编号',
       value: userCode,
       key: 1,
-    },{
+    }, {
       field: '购买终端名称',
       value: `${classroomName}`,
       key: 2,
-    },{
+    }, {
       field: '终端所属校区',
       value: `${provCodeToName(provinceCode)}-${cityName}-${zoneName}`,
       key: 3,
-    },{
+    }, {
       field: '终端所属渠道',
       value: merchantName,
       key: 4,
-    },{
+    }, {
       field: '收货人姓名',
       value: name,
       key: 5,
-    },{
+    }, {
       field: '收货人电话',
       value: mobile,
       key: 6,
-    },{
+    }, {
       field: '收货地址',
       value: address,
       key: 7,
     }];
+    // 物流信息 - table datas
+    const deliveryTableData = [{
+      field: '物流单号',
+      value: trackNo,
+      key: 1,
+    }];
     // 商品清单
     const goodsTableColumns = [{
       title: '商品编号',
       dataIndex: 'code',
       key: 1,
       width: '20%',
-    },{
+    }, {
       title: '商品名称',
       dataIndex: 'name',
       key: 2,
       width: '20%',
-    },{
+    }, {
       title: '商品类型',
       dataIndex: 'type',
-      render: (text, row) => productType[text],
+      render: text => productType[text],
       key: 3,
       width: '15%',
-    },{
+    }, {
       title: '商品售价(元)',
       dataIndex: 'merchantPrice',
       key: 4,
       width: '20%',
-    },{
+    }, {
       title: '商品数量',
       dataIndex: 'quantity',
       key: 5,
       width: '10%',
-    },{
+    }, {
       title: '操作',
       dataIndex: 'operation',
-      render: (text, row) => <a>查看详情</a>,
+      render: () => <a>查看详情</a>,
       key: 6,
       width: '15%',
     }];
-    // 子订单列表
-    const subOrderTableColumns = [{
-      title: '子订单编号',
-      dataIndex: 'id',
-      key: 1,
-      width: '20%',
-    }];
     // 结算信息 - table data
     const strs = [];
     (goods || []).forEach(item => strs.push(`${item.merchantPrice}(元) * ${item.quantity}`));
@@ -206,15 +238,15 @@ export default class SubOrderProfile extends Component {
       field: '商品总价',
       value: `${strs.join(' + ')} = ${originPrice}(元)`,
       key: 1,
-    },{
+    }, {
       field: '支付金额',
       value:
-        <span>
-          {`总价：${originPrice}(元) - 商品优惠：${adjustPrice}(元) = 订单总金额：`}
-          <strong style={{ color: 'red' }}>{`${finalPrice}(元)`}</strong>
-        </span>,
+  <span>
+    {`总价：${originPrice}(元) - 商品优惠：${adjustPrice}(元) = 订单总金额：`}
+    <strong style={{ color: 'red' }}>{`${finalPrice}(元)`}</strong>
+  </span>,
       key: 2,
-    }]
+    }];
 
     const entityStepMap = {
       [Codes.CODE_UNPAID]: 0,
@@ -235,26 +267,35 @@ export default class SubOrderProfile extends Component {
       [Codes.CODE_COMPLETE]: 4,
     };
 
+    const formItemLayout = {
+      labelCol: { span: 7 },
+      wrapperCol: { span: 15 },
+    };
+
     return (
       <PageHeaderLayout title="子订单详情">
-        {type == Codes.CODE_ENTITY ?
-          <Card title="订单状态" bordered={false} style={{ marginBottom: 20 }}>
-            <Steps current={entityStepMap[orderStatus]}>
-              <Steps.Step title="提交订单" icon={<Icon type="schedule" />} />
-              <Steps.Step title="付款成功" icon={<Icon type="red-envelope" />} />
-              <Steps.Step title="商品出库" icon={<Icon type="inbox" />} />
-              <Steps.Step title="等待收货" icon={<Icon type="rocket" />} />
-              <Steps.Step title="完成" icon={<Icon type="check" />} />
-            </Steps>
-          </Card>
+        {type === Codes.CODE_ENTITY ?
+          (
+            <Card title="订单状态" bordered={false} style={{ marginBottom: 20 }}>
+              <Steps current={entityStepMap[orderStatus]}>
+                <Steps.Step title="提交订单" icon={<Icon type="schedule" />} />
+                <Steps.Step title="付款成功" icon={<Icon type="red-envelope" />} />
+                <Steps.Step title="商品出库" icon={<Icon type="inbox" />} />
+                <Steps.Step title="等待收货" icon={<Icon type="rocket" />} />
+                <Steps.Step title="完成" icon={<Icon type="check" />} />
+              </Steps>
+            </Card>
+)
         :
-          <Card title="订单状态" bordered={false} style={{ marginBottom: 20 }}>
-            <Steps current={virtualStepMap[orderStatus]}>
-              <Steps.Step title="提交订单" icon={<Icon type="schedule" />} />
-              <Steps.Step title="付款成功" icon={<Icon type="red-envelope" />} />
-              <Steps.Step title="完成" icon={<Icon type="check" />} />
-            </Steps>
-          </Card>
+          (
+            <Card title="订单状态" bordered={false} style={{ marginBottom: 20 }}>
+              <Steps current={virtualStepMap[orderStatus]}>
+                <Steps.Step title="提交订单" icon={<Icon type="schedule" />} />
+                <Steps.Step title="付款成功" icon={<Icon type="red-envelope" />} />
+                <Steps.Step title="完成" icon={<Icon type="check" />} />
+              </Steps>
+            </Card>
+)
         }
         <Card title="商品清单" bordered={false} style={{ marginBottom: 20 }}>
           <Table
@@ -262,7 +303,7 @@ export default class SubOrderProfile extends Component {
             rowKey={record => record.id}
             columns={goodsTableColumns}
             dataSource={goods || []}
-            bordered={true}
+            bordered
             pagination={false}
           />
         </Card>
@@ -271,27 +312,53 @@ export default class SubOrderProfile extends Component {
             size="small"
             columns={simplyTableColumns}
             dataSource={consumerInfoTableData}
-            bordered={true}
+            bordered
             pagination={false}
             showHeader={false}
           />
         </Card>
+        {orderStatus === Codes.CODE_SENT ?
+          (
+            <Card title="物流信息" bordered={false} style={{ marginBottom: 20 }}>
+              <Table
+                size="small"
+                columns={simplyTableColumns}
+                dataSource={deliveryTableData}
+                bordered
+                pagination={false}
+                showHeader={false}
+              />
+            </Card>
+        ) : null}
         <Card title="订单备注" bordered={false} style={{ marginBottom: 20 }}>
-          {note ? note : '无'}
+          {note || '无'}
         </Card>
         <Card title="结算信息" bordered={false}>
           <Table
             size="small"
             columns={simplyTableColumns}
             dataSource={accountTableDatas}
-            bordered={true}
+            bordered
             pagination={false}
             showHeader={false}
           />
         </Card>
-        <FooterToolbar>
-          <Button onClick={this.handlePageCancel} type="primary">返回订单列表</Button>
-        </FooterToolbar>
+        <Modal
+          title="发货信息"
+          visible={deliveryModalShow}
+          onOk={this.confirmSend}
+          onCancel={this.hideSendModal}
+        >
+          <Form layout="horizontal">
+            <Form.Item label="物流单号：" hasFeedback {...formItemLayout}>
+              {getFieldDecorator('code', {
+                rules: [{ required: true, type: 'string', message: '请填写正确的物流单号!' }],
+                initialValue: trackNo,
+              })(<Input placeholder="请填写物流单号" />)}
+            </Form.Item>
+          </Form>
+        </Modal>
+        {this.renderFooter(orderStatus)}
       </PageHeaderLayout>
     );
   }

src/routes/Order/List/index.js

@@ -1,5 +1,4 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import queryString from 'query-string';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
@@ -7,28 +6,23 @@ import { Card } from 'antd';
 import TableList from './table';
 import Search from './search';
 import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
-import { Codes } from '../../../utils/config';
 
-@connect(state => ({
-  order: state.order,
-}))
+@connect(state => ({ order: state.order }))
 export default class Order extends PureComponent {
-  static propTypes = {
-    order: PropTypes.object,
-    location: PropTypes.object,
-    dispatch: PropTypes.func,
-  };
-
   render() {
     const { location, dispatch, order } = this.props;
 
     location.query = queryString.parse(location.search);
     const { query, pathname } = location;
     const { field, keyword, ...filters } = query;
-    const { list, listLoading, pagination, currentItem, itemLoading, modalVisible, modalType } = order;
+    const {
+      list,
+      listLoading,
+      pagination,
+    } = order;
 
     // 把携带的参数中空值项删除
-    Object.keys(filters).map(key => { filters[key] ? null : delete filters[key] });
+    Object.keys(filters).map(key => (filters[key] ? null : delete filters.key));
     // 如果搜索内容不为空则添加进filters中
     if (field && keyword) {
       filters.field = field;
@@ -46,8 +40,8 @@ export default class Order extends PureComponent {
         dispatch(routerRedux.push({
           pathname,
           search: queryString.stringify({
-            ...payload
-          })
+            ...payload,
+          }),
         }));
       },
       onAdd: () => {
@@ -57,7 +51,7 @@ export default class Order extends PureComponent {
             state: filters,
           })
         );
-      }
+      },
     };
 
     const listProps = {
@@ -68,7 +62,7 @@ export default class Order extends PureComponent {
       timeBegin: filters.timeBegin,
       timeEnd: filters.timeEnd,
       curStatus: filters.orderStatus,
-      onChange: (pagination, filterArgs) => {
+      onChange: (page, filterArgs) => {
         const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
         const tableFilters = Object.keys(filterArgs).reduce((obj, key) => {
           const newObj = { ...obj };
@@ -77,13 +71,13 @@ export default class Order extends PureComponent {
         }, {});
 
         const data = { ...filters, ...tableFilters };
-        Object.keys(data).map(key => data[key] ? null : delete data[key]);
+        Object.keys(data).map(key => (data[key] ? null : delete data[key]));
         dispatch(routerRedux.push({
           pathname,
           search: queryString.stringify({
             ...data,
-            pageNo: pagination.current,
-            pageSize: pagination.pageSize,
+            pageNo: page.current,
+            pageSize: page.pageSize,
           }),
         }));
       },
@@ -104,49 +98,13 @@ export default class Order extends PureComponent {
           );
         }
       },
-      onEditItem: (item) => {
-        dispatch(
-          routerRedux.push({
-            pathname: `/trade/order/edit/${item.id}`,
-            state: filters,
-          })
-        );
-      },
-      onDeleteItem: (id) => {
-        dispatch({
-          type: 'order/delete',
-          payload: id,
-          callback: () => {
-            dispatch(
-              routerRedux.push({
-                pathname,
-                search: queryString.stringify(filters),
-              })
-            );
-          }
-        });
-      },
-      onRecoverItem: (payload) => {
-        dispatch({
-          type: 'order/recover',
-          payload,
-          callback: () => {
-            dispatch(
-              routerRedux.push({
-                pathname,
-                search: queryString.stringify(filters),
-              })
-            );
-          }
-        });
-      }
     };
 
     return (
       <PageHeaderLayout>
         <Card>
-          <Search { ...searchProps } />
-          <TableList { ...listProps } />
+          <Search {...searchProps} />
+          <TableList {...listProps} />
         </Card>
       </PageHeaderLayout>
     );

src/routes/Order/List/list.js

@@ -1,122 +0,0 @@
-import React, { Component } from 'react';
-import { Card, List, Row, Col, Button } from 'antd';
-import moment from 'moment';
-import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
-import { Codes, orderStatuses, goodsType } from '../../../utils/config';
-import styles from './list.less';
-
-export default class OrderStandardList extends Component {
-
-  render() {
-    const { onViewItem, onChange, pagination, dataSource, loading } = this.props;
-    const newPagination = { ...pagination, onChange };
-
-    const OrderItem = ({content, viewable}) => {
-      const operation = () => {
-        if (content.orderStatus == Codes.CODE_UNPAID) {
-          return (
-            <div>
-              <Button type="primary">立即支付</Button>
-            </div>
-          );
-        } else if (content.orderStatus !== Codes.CODE_COMPLETE){
-          return (
-            <div>
-              <Button type="primary" disabled={true}>处理中...</Button>
-            </div>
-          );
-        } else {
-          return (
-            <div>已完成</div>
-          );
-        }
-      }
-      return (
-        <div className={styles.itemWrapper}>
-          <div className={styles.itemHeader}>
-            <div className={styles.time}>{moment(content.gmtCreated).format('YYYY-MM-DD HH:mm:ss')}</div>
-            <div className={styles.code}>{`订单号：${content.id}`}</div>
-            <div className={styles.status}>{`订单状态：${orderStatuses[content.orderStatus]}`}</div>
-          </div>
-          <div className={styles.itemBody}>
-            <div className={styles.goodsInfo}>
-              {'商品类型：' + goodsType[content.type] ? goodsType[content.type] : '未知' }
-            </div>
-            <div className={styles.userInfo}>
-              <ul>
-                <li>{`收货人：${content.name}`}</li>
-                <li>{`联系电话：${content.mobile}`}</li>
-                <li>{`收货地址：${content.address}`}</li>
-              </ul>
-            </div>
-            <div className={styles.jump}>
-              <a disabled={!viewable ? true : false} onClick={() => onViewItem({ id: content.id })}>订单详情</a>
-            </div>
-            <div className={styles.change}>
-              {operation()}
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    const splitedOrderRowMaker = (item) => {
-      // 未付款
-      if (item.orderStatus == Codes.CODE_UNPAID) {
-        return (
-          <OrderItem key={item.id} content={item} viewable={true}/>
-        );
-      // 已付款 需要拆单的(显示主订单及子订单)
-      } else {
-        return (
-          <div className={styles.orderItemWrapper}>
-            <div className={styles.rowHeader}>
-              <div className={styles.row1}>
-                <div className={styles.time}>{moment(item.gmtCreated).format('YYYY-MM-DD HH:mm:ss')}</div>
-                <div className={styles.code}>{`订单号：${item.id}`}</div>
-                <div className={styles.desc}>订单内包含实体物品或者供应商不同，故拆分成以下订单</div>
-              </div>
-              <div className={styles.row2}>
-                <div className={styles.receiver}>{`收货人：${item.name}`}</div>
-                <div className={styles.price}>{`订单金额：${item.finalPrice}(元)`}</div>
-                <div className={styles.status}>{`订单状态：${orderStatuses[item.orderStatus]}`}</div>
-                <div className={styles.operation}>
-                  <a onClick={() => onViewItem({ id: item.id })}>{`查看拆单详情>`}</a>
-                </div>
-              </div>
-            </div>
-            <div className={styles.subOrder}>
-              {item.detailList.map(one => <OrderItem key={one.id} content={one} viewable={false}/>)}
-            </div>
-          </div>
-        );
-      }
-      // 已付款 不需要拆单的(实际都会拆单)不显示主订单了
-      // } else {
-      //   return (
-      //     <div className={styles.common}>
-      //       {item.detailList.map(one => <OrderItem key={one.id} content={one} viewable={true}/>)}
-      //     </div>
-      //   );
-      // }
-    };
-
-    return (
-      <List
-        size="large"
-        rowKey="id"
-        split={false}
-        loading={loading}
-        pagination={newPagination}
-        dataSource={dataSource}
-        renderItem={item => (
-          <List.Item
-            key={item.id}
-          >
-            {splitedOrderRowMaker(item)}
-          </List.Item>
-        )}
-      />
-    );
-  }
-}

src/routes/Order/List/list.less

@@ -1,132 +0,0 @@
-.orderItemWrapper {
-  width: 100%;
-  height: 100%;
-
-  .rowHeader {
-    background-color: #f5f5f5;
-    border: 1px solid #e5e5e5;
-    border-radius: 5px 5px 0 0;
-    .row1 {
-      position: relative;
-      padding: 5px;
-      height: 40px;
-
-      .time {
-        float: left;
-        width: 20%;
-      }
-
-      .code {
-        float: left;
-        width: 40%;
-      }
-
-      .desc {
-        float: left;
-        width: 40%;
-      }
-    }
-
-    .row2 {
-      position: relative;
-      border-top: 1px solid #e5e5e5;
-      padding: 5px;
-      height: 40px;
-
-      .receiver {
-        float: left;
-        width: 20%;
-      }
-
-      .price {
-        float: left;
-        width: 40%;
-      }
-
-      .status {
-        float: left;
-        width: 20%;
-      }
-
-      .operation {
-        float: left;
-        width: 20%;
-      }
-    }
-  }
-}
-
-.itemWrapper {
-  width: 100%;
-  height: 100%;
-  border-bottom: 1px solid #e5e5e5;
-  border-left: 1px solid #e5e5e5;
-  border-right: 1px solid #e5e5e5;
-
-  .itemHeader {
-    height: 40px;
-    padding: 5px;
-    background-color: #f5f5f5;
-
-    .time {
-      float: left;
-      width: 20%;
-    }
-    .code {
-      float: left;
-      width: 40%;
-    }
-    .status {
-      float: left;
-      width: 40%;
-    }
-  }
-
-  .itemBody {
-    height: 100px;
-    border-top: 1px solid #e5e5e5;
-
-    .goodsInfo {
-      display:flex;
-      justify-content:center;
-      align-items:center;
-      float: left;
-      width: 20%;
-      height: 100%;
-      border-right: 1px solid #e5e5e5;
-    }
-    .userInfo {
-      display:flex;
-      justify-content:center;
-      align-items:center;
-      float: left;
-      width: 40%;
-      height: 100%;
-      border-right: 1px solid #e5e5e5;
-    }
-    .jump {
-      position: relative;
-      display:flex;
-      justify-content:center;
-      align-items:center;
-      float: left;
-      width: 20%;
-      height: 100%;
-      border-right: 1px solid #e5e5e5;
-    }
-    .change {
-      position: relative;
-      display:flex;
-      justify-content:center;
-      align-items:center;
-      float: left;
-      width: 20%;
-      height: 100%;
-    }
-  }
-}
-
-.common {
-  width: 100%;
-  height: 100%;
-}

src/routes/Order/List/search.js

@@ -1,18 +1,8 @@
-import react, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { Button, Form, Row, Col, Icon } from 'antd';
+import React, { PureComponent } from 'react';
+import { Button, Row, Col, Icon } from 'antd';
 import DataSearch from '../../../components/DataSearch';
 
-@Form.create()
 export default class Search extends PureComponent {
-  static propTypes = {
-    form: PropTypes.object.isRequired,
-    onSearch: PropTypes.func,
-    onAdd: PropTypes.func,
-    field: PropTypes.string,
-    keyword: PropTypes.string,
-  };
-
   render() {
     const { field, keyword, onSearch, onAdd } = this.props;
 
@@ -35,7 +25,7 @@ export default class Search extends PureComponent {
     return (
       <Row gutter={24}>
         <Col lg={10} md={12} sm={16} xs={24} style={{ marginBottom: 16 }}>
-          <DataSearch { ...searchGroupProps } />
+          <DataSearch {...searchGroupProps} />
         </Col>
         <Col lg={{ offset: 7, span: 7 }} md={12} sm={8} xs={24} style={{ marginBottom: 16, textAlign: 'right' }}>
           <Button type="primary" onClick={onAdd}><Icon type="plus-circle" />新建订单</Button>

src/routes/Order/List/table.js

@@ -1,21 +1,19 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import moment from 'moment';
-import queryString from 'query-string';
-import { Modal, Table, Menu, Icon, Badge, Button } from 'antd';
+import { Table, Badge } from 'antd';
 import { orderStatuses, Codes } from '../../../utils/config';
+import { provCodeToName } from '../../../utils/city';
 
 export default class TableList extends PureComponent {
-
   handleItemView = (record) => {
     const { onViewItem } = this.props;
     onViewItem(record);
   }
 
   render() {
-    const { onDeleteItem, onRecoverItem, onEditItem, dataSource, pagination, ...tableProps } = this.props;
+    const { dataSource, pagination, ...tableProps } = this.props;
     const newDataSource = [...dataSource];
-    newDataSource.forEach(item => {
+    newDataSource.forEach((item) => {
       if (Array.isArray(item.detailList) && item.detailList.length) {
         item.children = item.detailList.map(one => (
           {
@@ -36,30 +34,30 @@ export default class TableList extends PureComponent {
       key: 'id',
       fixed: 'left',
       width: 330,
-    },{
+    }, {
       title: '终端编号',
       dataIndex: 'userCode',
       key: 'userCode',
-    },{
+    }, {
       title: '校区',
       dataIndex: 'campusName',
       key: 'campusName',
       render: (text, record) => (
-        <span>{`${record.provinceCode}-${record.cityName}-${record.zoneName}`}</span>
+        <span>{`${provCodeToName(record.provinceCode)}-${record.cityName}-${record.zoneName}`}</span>
       ),
-    },{
+    }, {
       title: '商品总价(元)',
       dataIndex: 'originPrice',
       key: 'originPrice',
-    },{
+    }, {
       title: '优惠价格(元)',
       dataIndex: 'adjustPrice',
       key: 'adjustPrice',
-    },{
+    }, {
       title: '实际售价(元)',
       dataIndex: 'finalPrice',
       key: 'finalPrice',
-    },{
+    }, {
       title: '状态',
       dataIndex: 'orderStatus',
       key: 'orderStatus',
@@ -71,14 +69,14 @@ export default class TableList extends PureComponent {
         };
         return (<Badge status={statusMap[record.orderStatus] || 'processing'} text={orderStatuses[record.orderStatus]} />);
       },
-    },{
+    }, {
       title: '下单时间',
       dataIndex: 'gmtCreated',
       key: 'gmtCreated',
-      render: (text, record) => (
+      render: text => (
         <div>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</div>
       ),
-    },{
+    }, {
       title: '操作',
       dataIndex: 'operation',
       key: 'operation',
@@ -92,7 +90,7 @@ export default class TableList extends PureComponent {
     }];
 
     // 配置分页
-    tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
+    tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条` };
 
     return (
       <Table
@@ -101,7 +99,7 @@ export default class TableList extends PureComponent {
         dataSource={newDataSource}
         columns={columns}
         rowKey={record => record.id}
-        { ...tableProps }
+        {...tableProps}
         scroll={{ x: 1500 }}
       />
     );

src/routes/Order/List/table.less

@@ -1,82 +0,0 @@
-@import "~antd/lib/style/themes/default.less";
-@import "../../../utils/utils.less";
-
-.table {
-  :global {
-    .ant-table-tbody > tr > td,
-    .ant-table-thead > tr > th {
-      height: 50px;
-    }
-  }
-
-  &.motion {
-    :global {
-      .ant-table-tbody > tr > td,
-      .ant-table-thead > tr > th {
-        &:nth-child(1) {
-          width: 22%;
-        }
-
-        &:nth-child(2) {
-          width: 22%;
-        }
-
-        &:nth-child(3) {
-          width: 8%;
-        }
-
-        &:nth-child(4) {
-          width: 8%;
-        }
-
-        &:nth-child(5) {
-          width: 8%;
-        }
-
-        &:nth-child(6) {
-          width: 8%;
-        }
-
-        &:nth-child(7) {
-          width: 16%;
-        }
-
-        &:nth-child(8) {
-          width: 8%;
-        }
-      }
-
-      .ant-table-thead {
-        & > tr {
-          transition: none;
-          display: block;
-
-          & > th {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-          }
-        }
-      }
-
-      .ant-table-tbody {
-        & > tr {
-          transition: none;
-          display: block;
-          border-bottom: 1px solid #f5f5f5;
-
-          & > td {
-            border-bottom: none;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-          }
-
-          &.ant-table-expanded-row-level-1 > td {
-            height: auto;
-          }
-        }
-      }
-    }
-  }
-}

src/routes/SoldProduct/index.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'dva';
-import classnames from 'classnames';
 import {
-  Radio,
   Row,
   Col,
   Table,
@@ -10,18 +8,28 @@ import {
   Card,
   Input,
   Button,
-  DatePicker,
+  Select,
 } from 'antd';
 import moment from 'moment';
-import AnimTableBody from '../../components/Animation/AnimTableBody';
-import { productType, orderStatuses } from '../../utils/config';
+import { productType } from '../../utils/config';
 import styles from './index.less';
 
-const { RangePicker } = DatePicker;
-
 @Form.create()
-@connect(state => ({ snapshot: state.snapshot }))
+@connect(state => ({
+  snapshot: state.snapshot,
+  merchant: state.merchant,
+}))
 export default class SoldProductList extends Component {
+  componentDidMount() {
+    this.props.dispatch({
+      type: 'merchant/query',
+      payload: {
+        pageNo: 1,
+        pageSize: 1000,
+      },
+    });
+  }
+
   getFormValue = () => {
     const { form } = this.props;
     const { getFieldsValue } = form;
@@ -54,7 +62,7 @@ export default class SoldProductList extends Component {
   }
 
   render() {
-    const { snapshot, form } = this.props;
+    const { snapshot, merchant, form } = this.props;
     const { getFieldDecorator } = form;
     const { list, listLoading, pagination } = snapshot;
 
@@ -70,7 +78,7 @@ export default class SoldProductList extends Component {
       title: '类型',
       dataIndex: 'productType',
       key: 3,
-      render: (text, record) => productType[text],
+      render: text => productType[text],
     }, {
       title: '终端编号',
       dataIndex: 'userCode',
@@ -118,13 +126,57 @@ export default class SoldProductList extends Component {
       render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
     }];
 
-    const newPagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-    const AnimationTableBody = props => (<AnimTableBody {...props} />);
+    const newPagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条` };
 
     return (
       <Card>
-        <Form layout="inline" className={styles.tableSearchForm} onSubmit={this.handleFilterSubmit}>
+        <Form layout="vertical" className={styles.tableSearchForm} onSubmit={this.handleFilterSubmit}>
           <Row gutter={24}>
+            <Col span={8}>
+              <Form.Item label="渠道名称">
+                {getFieldDecorator('merchantId', {
+                })(
+                  <Select placeholder="请选择" style={{ width: '100%' }}>
+                    {merchant.list.map(item =>
+                      <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>)}
+                  </Select>
+                )}
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              <Form.Item label="校区名称">
+                {getFieldDecorator('campusName', {
+                })(<Input placeholder="请输入" />)}
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              <Form.Item label="校区编号">
+                {getFieldDecorator('campusCode', {
+                })(<Input placeholder="请输入" />)}
+              </Form.Item>
+            </Col>
+          </Row>
+          <Row gutter={24}>
+            <Col span={8}>
+              <Form.Item label="产品编号">
+                {getFieldDecorator('productCode', {
+                })(<Input placeholder="请输入" />)}
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              <Form.Item label="终端编号">
+                {getFieldDecorator('userCode', {
+                })(<Input placeholder="请输入" />)}
+              </Form.Item>
+            </Col>
+          </Row>
+          <Row>
+            <Col span={24} style={{ textAlign: 'left' }}>
+              <Button type="primary" htmlType="submit">搜索</Button>
+              <Button onClick={this.handleFilterReset} style={{ marginLeft: 8 }}>重置</Button>
+            </Col>
+          </Row>
+          {/* <Row gutter={24}>
             <Col span={12}>
               <Form.Item label="起始时间">
                 {getFieldDecorator('time', {
@@ -160,7 +212,9 @@ export default class SoldProductList extends Component {
                 })(
                   <Radio.Group style={{ width: '100%' }}>
                     <Radio key="all" value="all">不限</Radio>
-                    {Object.keys(orderStatuses).map(item => <Radio key={item} value={item}>{orderStatuses[item]}</Radio>)}
+                    {Object.keys(orderStatuses).map(item =>
+                      <Radio key={item} value={item}>{orderStatuses[item]}</Radio>)
+                    }
                   </Radio.Group>
                 )}
               </Form.Item>
@@ -171,7 +225,7 @@ export default class SoldProductList extends Component {
               <Button type="primary" htmlType="submit">搜索</Button>
               <Button onClick={this.handleFilterReset} style={{ marginLeft: 8 }}>重置</Button>
             </Col>
-          </Row>
+          </Row> */}
         </Form>
         <Table
           bordered
@@ -182,10 +236,6 @@ export default class SoldProductList extends Component {
           dataSource={list}
           pagination={newPagination}
           scroll={{ x: 1800 }}
-          className={classnames({ [styles.table]: true, [styles.motion]: true })}
-          components={{
-            body: { wrapper: AnimationTableBody },
-          }}
         />
       </Card>
     );

src/routes/SoldProduct/index.less

@@ -1,110 +1,6 @@
 @import "~antd/lib/style/themes/default.less";
 @import "../../utils/utils.less";
 
-.table {
-  :global {
-    .ant-table-tbody > tr > td,
-    .ant-table-thead > tr > th {
-      height: 50px;
-    }
-  }
-
-  &.motion {
-    :global {
-      .ant-table-tbody > tr > td,
-      .ant-table-thead > tr > th {
-        &:nth-child(1) {
-          width: 8%;
-        }
-
-        &:nth-child(2) {
-          width: 8%;
-        }
-
-        &:nth-child(3) {
-          width: 5%;
-        }
-
-        &:nth-child(4) {
-          width: 9%;
-        }
-
-        &:nth-child(5) {
-          width: 6%;
-        }
-
-        &:nth-child(6) {
-          width: 9%;
-        }
-
-        &:nth-child(7) {
-          width: 9%;
-        }
-
-        &:nth-child(8) {
-          width: 6%;
-        }
-
-        &:nth-child(9) {
-          width: 8%;
-        }
-
-        &:nth-child(10) {
-          width: 7%;
-        }
-
-        &:nth-child(11) {
-          width: 7%;
-        }
-
-        &:nth-child(12) {
-          width: 4%;
-        }
-
-        &:nth-child(13) {
-          width: 4%;
-        }
-
-        &:nth-child(14) {
-          width: 10%;
-        }
-      }
-
-      .ant-table-thead {
-        & > tr {
-          transition: none;
-          display: block;
-
-          & > th {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-          }
-        }
-      }
-
-      .ant-table-tbody {
-        & > tr {
-          transition: none;
-          display: block;
-          border-bottom: 1px solid #f5f5f5;
-
-          & > td {
-            border-bottom: none;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-          }
-
-          &.ant-table-expanded-row-level-1 > td {
-            height: auto;
-          }
-        }
-      }
-    }
-  }
-}
-
 .tableSearchForm {
   padding: 24px;
   background: #fbfbfb;

src/routes/Terminal/List/index.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import queryString from 'query-string';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
@@ -10,12 +9,6 @@ import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
 
 @connect(state => ({ terminal: state.terminal }))
 export default class TerminalList extends Component {
-  static propTypes = {
-    Terminal: PropTypes.object,
-    location: PropTypes.object,
-    dispatch: PropTypes.func,
-  };
-
   render() {
     const { dispatch, location, terminal } = this.props;
 
@@ -23,7 +16,7 @@ export default class TerminalList extends Component {
     const { query, pathname } = location;
     const { field, keyword, ...filters } = query;
 
-    Object.keys(filters).map(key => { filters[key] ? null : delete filters[key] });
+    Object.keys(filters).map((key) => { filters[key] ? null : delete filters[key]; });
     if (field && keyword) {
       filters.field = field;
       filters.keyword = keyword;
@@ -42,8 +35,8 @@ export default class TerminalList extends Component {
         dispatch(routerRedux.push({
           pathname,
           search: queryString.stringify({
-            ...payload
-          })
+            ...payload,
+          }),
         }));
       },
       onAdd: () => {
@@ -51,7 +44,7 @@ export default class TerminalList extends Component {
           pathname: '/terminal/user/add',
           state: filters,
         }));
-      }
+      },
     };
 
     const listProps = {
@@ -69,7 +62,7 @@ export default class TerminalList extends Component {
         }, {});
 
         const data = { ...filters, ...tableFilters };
-        Object.keys(data).map(key => data[key] ? null : delete data[key]);
+        Object.keys(data).map(key => (data[key] ? null : delete data[key]));
         dispatch(routerRedux.push({
           pathname,
           search: queryString.stringify({
@@ -97,7 +90,7 @@ export default class TerminalList extends Component {
                 search: queryString.stringify(filters),
               })
             );
-          }
+          },
         });
       },
       onRecoverItem: (payload) => {
@@ -111,16 +104,16 @@ export default class TerminalList extends Component {
                 search: queryString.stringify(filters),
               })
             );
-          }
+          },
         });
-      }
+      },
     };
 
     return (
       <PageHeaderLayout>
         <Card>
-          <TerminalSearch { ...searchProps } />
-          <TerminalTableList { ...listProps } />
+          <TerminalSearch {...searchProps} />
+          <TerminalTableList {...listProps} />
         </Card>
       </PageHeaderLayout>
     );

src/routes/Terminal/List/table.js

@@ -1,20 +1,15 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import moment from 'moment';
-import classnames from 'classnames';
 import queryString from 'query-string';
 import { Divider, Table, Modal, Badge } from 'antd';
-import AnimTableBody from '../../../components/Animation/AnimTableBody';
-import styles from './table.less';
 import { Codes, terminalStatuses } from '../../../utils/config';
 
 export default class TerminalTableList extends Component {
-
   handleOperateItem = (record) => {
     const { onDeleteItem, onRecoverItem } = this.props;
     Modal.confirm({
       title: `您确定要${record.status === Codes.CODE_NORMAL ? '禁用' : '解禁'}该终端账号?`,
-      onOk () {
+      onOk() {
         if (record.status === Codes.CODE_NORMAL) {
           onDeleteItem(record.id);
         } else {
@@ -34,38 +29,46 @@ export default class TerminalTableList extends Component {
       title: '终端编号',
       dataIndex: 'code',
       key: 'code',
-    },{
+      width: '14%',
+    }, {
       title: '终端名称',
       dataIndex: 'name',
       key: 'name',
-    },{
+      width: '8%',
+    }, {
       title: '校区',
       dataIndex: 'campusName',
       key: 'campusName',
-    },{
+      width: '35%',
+    }, {
       title: '渠道名称',
       dataIndex: 'merchantId',
       key: 'merchantId',
       render: (text, record) => record.merchantName,
-    },{
+      width: '10%',
+    }, {
       title: '状态',
       dataIndex: 'status',
       key: 'status',
       render: (text, record) => {
-        const statusMap = {[Codes.CODE_NORMAL]: 'success', [Codes.CODE_DISABLE]: 'error'};
+        const statusMap = { [Codes.CODE_NORMAL]: 'success', [Codes.CODE_DISABLE]: 'error' };
         return (<Badge status={statusMap[record.status]} text={terminalStatuses[record.status]} />);
       },
-      filters: Object.keys(terminalStatuses).map(key => ({ text: terminalStatuses[key], value: key })),
+      filters: Object.keys(terminalStatuses).map(key =>
+        ({ text: terminalStatuses[key], value: key })
+      ),
       filterMultiple: false,
       filteredValue: [curStatus],
-    },{
+      width: '7%',
+    }, {
       title: '修改时间',
       dataIndex: 'gmtModified',
       key: 'gmtModified',
-      render: (text, record) => (
+      render: text => (
         <div>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</div>
-      )
-    },{
+      ),
+      width: '16%',
+    }, {
       title: '操作',
       dataIndex: 'operation',
       key: 'operation',
@@ -75,30 +78,24 @@ export default class TerminalTableList extends Component {
           <Divider type="vertical" />
           <a onClick={() => this.handleOperateItem(record)}>{record.status === Codes.CODE_NORMAL ? '禁用' : '解禁'}</a>
         </div>
-      )
+      ),
+      width: '10%',
     }];
 
-    columns.map(item => {
+    columns.map((item) => {
       item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
     });
 
     // 配置分页
-    tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
-
-    // 添加动画
-    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
+    tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条` };
 
     return (
       <Table
         simple
         bordered
-        { ...tableProps }
+        {...tableProps}
         columns={columns}
-        className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        components={{
-          body: { wrapper: AnimationTableBody }
-        }}
       />
     );
   }

src/routes/Terminal/List/table.less

@@ -1,86 +0,0 @@
-@import "~antd/lib/style/themes/default.less";
-@import "../../../utils/utils.less";
-
-.table {
-  :global {
-    .ant-table-tbody > tr > td,
-    .ant-table-thead > tr > th {
-      height: 50px;
-    }
-  }
-
-  &.motion {
-    :global {
-      .ant-table-tbody > tr > td,
-      .ant-table-thead > tr > th {
-        &:nth-child(1) {
-          width: 16%;
-        }
-
-        &:nth-child(2) {
-          width: 12%;
-        }
-
-        &:nth-child(3) {
-          width: 22%;
-        }
-
-        &:nth-child(4) {
-          width: 10%;
-        }
-
-        &:nth-child(5) {
-          width: 10%;
-        }
-
-        &:nth-child(6) {
-          width: 18%;
-        }
-
-        &:nth-child(7) {
-          width: 12%;
-        }
-      }
-
-      .ant-table-thead {
-        & > tr {
-          transition: none;
-          display: block;
-
-          & > th {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-          }
-        }
-      }
-
-      .ant-table-tbody {
-        & > tr {
-          transition: none;
-          display: block;
-          border-bottom: 1px solid #f5f5f5;
-
-          & > td {
-            border-bottom: none;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-          }
-
-          &.ant-table-expanded-row-level-1 > td {
-            height: auto;
-          }
-        }
-      }
-    }
-  }
-}
-
-.splitLine {
-  background: @border-color-split;
-  display: inline-block;
-  margin: 0 8px;
-  width: 1px;
-  height: 12px;
-}

src/services/merchant.js

@@ -1,6 +1,6 @@
 import { stringify } from 'qs';
 import request from '../utils/request';
-import { merchants, merchant, recommend } from '../utils/api';
+import { merchants, merchant, recommend, recharge } from '../utils/api';
 
 export async function query(params) {
   return request(`${merchants}?${stringify(params)}`);
@@ -27,7 +27,7 @@ export async function update(params) {
 }
 
 export async function remove({ id }) {
-  const options = { method: 'DELETE' }
+  const options = { method: 'DELETE' };
   return request(`${merchant}/${id}`, options);
 }
 
@@ -42,3 +42,14 @@ export async function updateMerchantRecommend({ merchantId, idList }) {
   };
   return request(`${recommend}/${merchantId}`, options);
 }
+
+/**
+ * 账户充值
+ */
+export async function moneyCharge(params) {
+  const options = {
+    method: 'POST',
+    body: JSON.stringify(params),
+  };
+  return request(`${recharge}`, options);
+}

src/services/order.js

@@ -33,7 +33,7 @@ export async function update(params) {
 // 未支付订单可取消
 export async function remove({ id }) {
   const options = { method: 'DELETE' };
-  return request(`${order}`, options);
+  return request(`${order}/${id}`, options);
 }
 
 export async function confirmPay({ id }) {
@@ -41,8 +41,11 @@ export async function confirmPay({ id }) {
   return request(`${orderPay}/${id}`, options);
 }
 
-export async function confirmSend({ id }) {
-  const options = { method: 'POST' };
+export async function confirmSend({ id, ...rest }) {
+  const options = {
+    method: 'POST',
+    body: JSON.stringify(rest),
+  };
   return request(`${orderSend}/${id}`, options);
 }
 

src/theme.js

@@ -3,5 +3,7 @@ module.exports = {
   // 'primary-color': '#10e99b',
   'card-actions-background': '#f5f8fa',
   'table-header-bg': '#3eabe8',
+  'table-padding-vertical': '6px',
+  'table-padding-horizontal': '6px',
   // 'border-radius-base': '4px',
 };

src/utils/api.js

@@ -35,4 +35,5 @@ module.exports = {
   orderSend: `${config.apiHost}/order/send`,
   orderReceive: `${config.apiHost}/order/receive`,
   snapShot: `${config.apiHost}/order/snapshot`,
+  recharge: `${config.apiHost}/money/charge`,
 };

src/utils/config.js

@@ -3,7 +3,7 @@
 const Codes = {};
 Codes.CODE_VIDEO = 0;
 Codes.CODE_AUDIO = 1;
-Codes.CODE_LIVE  = 2;
+Codes.CODE_LIVE = 2;
 Codes.CODE_IMAGE = 3;
 
 Codes.CODE_NORMAL = 'NORMAL';
@@ -48,7 +48,7 @@ module.exports = {
   ossHost: 'http://efunimgs.oss-cn-beijing.aliyuncs.com',
   // apiHost: '/api',
   // 每页返回数据量
-  pageSize: 10,
+  pageSize: 20,
   // 标识码
   Codes,
   // 视频质量
@@ -68,12 +68,12 @@ module.exports = {
   },
   // 终端账号状态
   terminalStatuses: {
-    [Codes.CODE_NORMAL]: '使用中',
-    [Codes.CODE_DISABLE]: '禁用中',
+    [Codes.CODE_NORMAL]: '正常',
+    [Codes.CODE_DISABLE]: '禁用',
   },
   // 产品类型
   productType: {
-    [Codes.CODE_COURSE] : '课程',
+    [Codes.CODE_COURSE]: '课程',
     [Codes.CODE_SUPPORT]: '配套',
     [Codes.CODE_PACKAGE]: '课程包',
   },
@@ -87,14 +87,9 @@ module.exports = {
   resourceType: {
     [Codes.CODE_VIDEO]: '视频',
     [Codes.CODE_AUDIO]: '音频',
-    [Codes.CODE_LIVE] : '直播',
+    [Codes.CODE_LIVE]: '直播',
     [Codes.CODE_IMAGE]: '图片',
   },
-  // 标签类型
-  tagType: {
-    [Codes.CODE_COURSE] : '课程',
-    [Codes.CODE_SUPPORT]: '配套',
-  },
   // 订单状态
   orderStatuses: {
     [Codes.CODE_UNPAID]: '待支付',
@@ -115,7 +110,7 @@ module.exports = {
   // 商品类型
   goodsType: {
     [Codes.CODE_ENTITY]: '实体物品',
-    [Codes.CODE_VIRTUAL]: '虚拟物品'
+    [Codes.CODE_VIRTUAL]: '虚拟物品',
   },
   // 计价单位 名字: 时长
   chargeUnit: {