add ware manage module;

.roadhogrc.mock.js

@@ -4,9 +4,10 @@ import { campusList } from './mock/campus';
 import { terminalList } from './mock/terminal';
 import { merchantList } from './mock/merchant';
 import { resourceList } from './mock/resource';
-import { signature } from './mock/signature';
 import { groupList } from './mock/group';
 import { tagList } from './mock/tag';
+import { wareList } from './mock/ware';
+import { signature } from './mock/signature';
 import * as api from './src/utils/api';
 
 // mock数据持久化
@@ -16,6 +17,7 @@ global.merchantList = merchantList;
 global.resourceList = resourceList;
 global.groupList = groupList;
 global.tagList = tagList;
+global.wareList = wareList;
 global.signature = signature;
 
 // 操作成功响应内容
@@ -211,6 +213,28 @@ const proxy = {
     const { id } = req.params;
     queryOne(global.tagList, id, res);
   },
+  // 课件
+  [`POST ${api.ware.replace('/:id', '')}`]: (req, res) => {
+    console.log(`[POST][${api.ware}]`, req.body);
+    res.send(create(global.wareList, req.body));
+  },
+  [`DELETE ${api.ware}`]: (req, res) => {
+    const { id } = req.params;
+    remove(global.wareList, id, res);
+  },
+  [`PUT ${api.ware.replace('/:id', '')}`]: (req, res) => {
+    console.log(`[PUT][${api.ware}]`, req.body);
+    res.send(update(global.wareList, req.body));
+  },
+  [`GET ${api.wares}`]: (req, res) => {
+    console.log(`[GET][${api.wares}]`, req.query);
+    res.send(query(global.wareList, req.query));
+  },
+  [`GET ${api.ware}`]: (req, res) => {
+    console.log(`[GET][${api.ware}]`, req.params);
+    const { id } = req.params;
+    queryOne(global.wareList, id, res);
+  },
 };
 
 // 是否禁用代理

mock/lesson.js

@@ -0,0 +1,17 @@
+let lessonList = [];
+const status = ['NORMAL', 'DEL'];
+for (let i = 1; i < 100; i++) {
+  lessonList.push({
+    id: String(i),
+    code: 'Lesson-test-' + i,
+    name: '心里课' + i,
+    digest: '这是一段描述，我很累很累，对不起，是我太差劲。',
+    sort: i,
+    status: status[i % 2],
+    gmtCreated: 1512981450000,
+    gmtModified: 1512981450000,
+    wareList: null,
+  });
+}
+
+module.exports = { lessongList };

mock/resource.js

@@ -7,7 +7,7 @@ for (let i = 1; i < 100; i++) {
       name: '破解表情密码01',
       size: 90,
       status: 'NORMAL',
-      type: '3',
+      type: 3,
       gmtCreated: (new Date()).getTime(),
       gmtModified: (new Date()).getTime(),
       url: 'http://efunimgs.oss-cn-beijing.aliyuncs.com/resources/J/02/01/612102.jpg',
@@ -17,7 +17,7 @@ for (let i = 1; i < 100; i++) {
       name: '测试图片',
       size: 100,
       status: 'DEL',
-      type: '3',
+      type: 3,
       gmtCreated: (new Date()).getTime(),
       gmtModified: (new Date()).getTime(),
       url: 'http://efunimgs.oss-cn-beijing.aliyuncs.com/resources/J/02/01/611901.jpg',
@@ -27,7 +27,7 @@ for (let i = 1; i < 100; i++) {
       name: '测试视频',
       size: 1024,
       status: 'NORMAL',
-      type: '0',
+      type: 0,
       gmtCreated: (new Date()).getTime(),
       gmtModified: (new Date()).getTime(),
       url: 'http://efunvideo.ai160.com/vs2m/015/01503009/01503009031/01503009031.m3u8',

mock/ware.js

@@ -0,0 +1,36 @@
+const wareList = [];
+for (let i = 1; i < 401; i++) {
+  wareList.push({
+    id: String(i),
+    code: 'J-001-' + i,
+    name: `第${i}课件`,
+    digest: null,
+    cpId: '805',
+    status: 'NORMAL',
+    gmtCreated: 1512981450000,
+    gmtModified: 1512981450000,
+    resourceList: [{
+      id: 'abckiejijnafkdjkdafsk0' + i,
+      code: 'J-01-03' + i,
+      name: '测试图片',
+      size: 100,
+      status: 'DEL',
+      type: 3,
+      gmtCreated: (new Date()).getTime(),
+      gmtModified: (new Date()).getTime(),
+      url: 'http://efunimgs.oss-cn-beijing.aliyuncs.com/resources/J/02/01/611901.jpg',
+    },{
+      id: 'dsakfjweioqdasfjkadioe' + i,
+      code: 'V-01-02' + i,
+      name: '测试视频',
+      size: 1024,
+      status: 'NORMAL',
+      type: 0,
+      gmtCreated: (new Date()).getTime(),
+      gmtModified: (new Date()).getTime(),
+      url: 'http://efunvideo.ai160.com/vs2m/015/01503009/01503009031/01503009031.m3u8',
+    }],
+  });
+}
+
+module.exports = { wareList };

src/common/router.js

@@ -81,6 +81,17 @@ export const getRouterData = (app) => {
       component: dynamicWrapper(app, ['tag/detail', 'group/group'], () => import('../routes/Tag/detail')),
       name: '修改标签',
     },
+    '/product/ware': {
+      component: dynamicWrapper(app, ['ware/ware'], () => import('../routes/Ware')),
+    },
+    '/product/ware/add': {
+      component: dynamicWrapper(app, ['ware/detail', 'resource'], () => import('../routes/Ware/detail')),
+      name: '添加课件',
+    },
+    '/product/ware/edit/:id': {
+      component: dynamicWrapper(app, ['ware/detail', 'resource'], () => import('../routes/Ware/detail')),
+      name: '修改课件',
+    },
     '/user': {
       component: dynamicWrapper(app, [], () => import('../layouts/UserLayout')),
     },

src/components/SelectModal/ForSelTable.js

@@ -1,40 +1,63 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { Table } from 'antd';
+import { cloneDeep } from 'lodash';
+import { Table, Button } from 'antd';
 
 export default class ForSelTable extends PureComponent {
   static propTypes = {
-    list: PropTypes.array.isRequired,
-    listLoading: PropTypes.bool.isRequired,
+    dataSource: PropTypes.array.isRequired,
+    loading: PropTypes.bool.isRequired,
     pagination: PropTypes.object.isRequired,
     columns: PropTypes.array.isRequired,
     rowKeyName: PropTypes.string.isRequired,
-    styles: PropTypes.object,
     onChange: PropTypes.func,
     onAdd: PropTypes.func,
   };
 
   render() {
-    const { rowKeyName, list, listLoading, pagination, columns, onAdd, styles = {} } = this.props;
+    const {
+      rowKeyName,
+      dataSource,
+      loading,
+      pagination,
+      className,
+      columns,
+      selected,
+      onChange,
+      onAdd,
+      ...rest,
+    } = this.props;
+
     const addColumn = {
-      title: '选择',
-      dataIndex: 'select',
-      key: 'select',
+      title: '操作',
+      dataIndex: 'add-btn',
+      key: 'add-btn',
       render: (text, record) => (
-        <Button onClick={onAdd} size="small" type="primary">添加</Button>
+        <Button
+          onClick={() => onAdd(record)}
+          disabled={selected.filter(item => item.id === record.id).length}
+          size="small"
+          type="primary"
+        >
+          {selected.filter(item => item.id === record.id).length ? '已添加' : '添加'}
+        </Button>
       ),
     };
-    columns.push(addColumn);
+
+    const curSpaceColumns = cloneDeep(columns);
+    curSpaceColumns.push(addColumn);
+
     return (
       <Table
         rowKey={rowKeyName}
         bordered={true}
-        columns={columns}
-        dataSource={list}
-        loading={listLoading}
+        columns={curSpaceColumns}
+        dataSource={dataSource}
+        loading={loading}
         pagination={pagination}
-        className={styles.table}
         onChange={onChange}
+        className={className}
+        {...rest}
       />
     );
   }

src/components/SelectModal/SelTable.js

@@ -17,28 +17,28 @@ export default class SelTable extends PureComponent {
   };
 
   render() {
-    const { operSort, operDel, columns, dataSource, rowKeyName, onUp, onDown, ...rest } = this.props;
+    const { operSort, operDel, columns, dataSource, rowKeyName, onUp, onDown, onDel, ...rest } = this.props;
     // 防止污染原始数据
     const curSpaceColumns = cloneDeep(columns);
 
     const sortColumn = {
       title: '排序',
-      dataIndex: 'operation',
-      key: 'operation',
+      dataIndex: 'sort-operation',
+      key: 'sort-operation',
       render: (text, record) => (
         <ButtonGroup>
-          <Button onClick={() => onUp(record[rowKeyName])} size="small" icon="up-circle"></Button>
-          <Button onClick={() => onDown(record[rowKeyName])} size="small" icon="down-circle"></Button>
+          <Button onClick={() => onUp(record)} size="small" icon="up-circle-o"></Button>
+          <Button onClick={() => onDown(record)} size="small" icon="down-circle-o"></Button>
         </ButtonGroup>
       ),
     };
 
     const delColumn = {
       title: '删除',
-      dataIndex: 'del',
-      key: 'del',
+      dataIndex: 'del-operation',
+      key: 'del-operation',
       render: (text, record) => (
-        <Button size="small" icon="delete"></Button>
+        <Button onClick={() => onDel(record)} size="small" icon="delete"></Button>
       ),
     };
 

src/components/SelectModal/index.js

@@ -6,7 +6,7 @@ import DataSearch from '../DataSearch';
 import SelTable from './SelTable';
 import ForSelTable from './ForSelTable';
 
-const ButtonGroup = ButtonGroup;
+const ButtonGroup = Button.Group;
 
 export default class SelectModal extends PureComponent {
   static propTypes = {
@@ -33,26 +33,29 @@ export default class SelectModal extends PureComponent {
     this.state = {
       tableTabLeft: true,
       selTableData: this.props.tableDataSource,
+      kv: {},
     };
   }
 
   componentWillReceiveProps(nextProps) {
-    this.setState({ selTableData: nextProps.tableDataSource });
+    if (!this.props.visible && nextProps.visible) {
+      this.setState({ selTableData: nextProps.tableDataSource, tableTabLeft: true });
+    }
   }
 
-  handleTableTabChange = () => {
+  handleTabChange = () => {
     const { tableTabLeft } = this.state;
     this.setState({ tableTabLeft: !tableTabLeft });
   }
 
   // 向上调整一个位置
-  handleOnUp = (key) => {
+  handleOnUp = (record) => {
     const { selTableData } = this.state;
     const { rowKeyName } = this.props;
     const arr = cloneDeep(selTableData);
 
     // 找到该行在列表中的索引
-    const index = arr.findIndex(item => item[rowKeyName] === key);
+    const index = arr.findIndex(item => item[rowKeyName] === record[rowKeyName]);
     //第一个元素或者未找到元素不做操作
     if (!index || -1 === index) return;
     //与前一个元素进行位置互换
@@ -64,13 +67,13 @@ export default class SelectModal extends PureComponent {
   }
 
   // 向下调整一个位置
-  handleOnDown = (key) => {
+  handleOnDown = (record) => {
     const { selTableData } = this.state;
     const { rowKeyName } = this.props;
     const arr = cloneDeep(selTableData);
 
     // 找到该行在列表中的索引
-    const index = arr.findIndex(item => item[rowKeyName] == key);
+    const index = arr.findIndex(item => item[rowKeyName] == record[rowKeyName]);
     //最后一个元素或者未找到元素不做操作
     if (index + 1 === arr.length || -1 === index) return;
     //与后一个元素进行位置互换
@@ -81,12 +84,34 @@ export default class SelectModal extends PureComponent {
     this.setState({ selTableData: arr });
   }
 
-  handleOnAdd = (id) => {
+  // 从待选列表添加一条数据到已选列表
+  handleOnAdd = (record) => {
+    const { selTableData } = this.state;
+    const arr = cloneDeep(selTableData);
+    arr.push(record);
+    this.setState({ selTableData: arr });
+  }
 
+  // 从待选列表中删除一条数据
+  handleOnDel = (record) => {
+    const { selTableData } = this.state;
+    const arr = cloneDeep(selTableData);
+    const filteredArr = arr.filter(item => item.id !== record.id);
+    this.setState({ selTableData: filteredArr });
   }
 
-  handleOnDel = (id) => {
+  // 进行搜索
+  handleOnSearch = (kv) => {
+    const { onSearch } = this.props;
+    this.setState({ field: kv.field, keyword: kv.keyword });
+    onSearch(kv);
+  }
 
+  // 翻页
+  handleOnChange = (pagination, filterArgs) => {
+    const { fsTableOnChange } = this.props;
+    const { field, keyword } = this.state;
+    fsTableOnChange(pagination, filterArgs, { field, keyword });
   }
 
   handleOnCancel = () => {
@@ -103,10 +128,11 @@ export default class SelectModal extends PureComponent {
   comboConverter = () => {
     const { tableTabLeft, selTableData } = this.state;
     const {
-      mode, rowKeyName, searchProps,
+      mode, rowKeyName, searchField, searchKeyWord, searchSize, searchSelect,
+      searchSelectProps, searchSelectOptions, onSearch, tableClassName,
       tableColumns, tablePagination, tableDataSource, operSort, operDel,
-      fsTableLoading, fsTableColumns, fsTableDataSource, fstablePagination,
-      onCancel, onOk, ...modalProps
+      fsTableLoading, fsTableColumns, fsTableDataSource, fsTablePagination,
+      fsTableOnChange, fsTableClassName, onCancel, onOk, ...modalProps
     } = this.props;
 
     switch (mode) {
@@ -126,30 +152,73 @@ export default class SelectModal extends PureComponent {
               operDel={operDel}
               onUp={this.handleOnUp}
               onDown={this.handleOnDown}
+              onDel={this.handleOnDel}
+            />
+          </Modal>
+        );
+        break;
+      case 'single':
+        return (
+          <Modal
+            onCancel={this.handleOnCancel}
+            onOk={this.handleOnOk}
+            {...modalProps}
+          >
+            <DataSearch {...searchProps} />
+            <ForSelTable {...forSelTableProps}/>
+          </Modal>
+        );
+        break;
+      case 'multiple':
+        return (
+          <Modal
+            onCancel={this.handleOnCancel}
+            onOk={this.handleOnOk}
+            {...modalProps}
+          >
+            <DataSearch
+              field={searchField}
+              keyword={searchKeyWord}
+              size={searchSize}
+              select={searchSelect}
+              selectProps={searchSelectProps}
+              selectOptions={searchSelectOptions}
+              onSearch={this.handleOnSearch}
+            />
+            <ButtonGroup style={{ marginTop: 10, marginBottom: 10 }}>
+              <Button type="primary" onClick={this.handleTabChange} ghost={tableTabLeft ? false : true}>待选</Button>
+              <Button type="primary" onClick={this.handleTabChange} ghost={tableTabLeft ? true : false}>{`已选[${selTableData.length}]`}</Button>
+            </ButtonGroup>
+            <ForSelTable
+              rowKeyName={rowKeyName}
+              className={fsTableClassName}
+              dataSource={fsTableDataSource}
+              columns={fsTableColumns}
+              loading={fsTableLoading}
+              pagination={fsTablePagination}
+              onChange={this.handleOnChange}
+              onAdd={this.handleOnAdd}
+              scroll={{ y: 300 }}
+              selected={selTableData}
+              style={{ display: (tableTabLeft ? "block" : "none") }}
+            />
+            <SelTable
+              dataSource={selTableData}
+              columns={tableColumns}
+              pagination={tablePagination}
+              rowKeyName={rowKeyName}
+              className={tableClassName}
+              operSort={operSort}
+              operDel={operDel}
+              onUp={this.handleOnUp}
+              onDown={this.handleOnDown}
+              onDel={this.handleOnDel}
+              scroll={{ y: 300 }}
+              style={{ display: (tableTabLeft ? "none" : "block") }}
             />
           </Modal>
         );
         break;
-      // case 'single':
-      //   return (
-      //     <Modal {...modalProps}>
-      //       <DataSearch {...searchProps} />
-      //       <ForSelTable {...forSelTableProps}/>
-      //     </Modal>
-      //   );
-      //   break;
-      // case 'multiple':
-      //   return (
-      //     <Modal {...modalProps}>
-      //       <DataSearch />
-      //       <ButtonGroup>
-      //         <Button type="primary" onClick={this.handleTabChange} ghost={tableTabLeft ? false : true}>待选</Button>
-      //         <Button type="primary" onClick={this.handleTabChange} ghost={tableTabLeft ? true : false}>{`已选[]`}</Button>
-      //       </ButtonGroup>
-      //       {tableTabLeft ? <ForSelTable {...forSelTableProps} /> : <SelTable {...selTableProps}/>}
-      //     </Modal>
-      //   );
-      //   break;
       default:
         break;
     }

src/models/ware/detail.js

@@ -0,0 +1,105 @@
+import { queryOne, create, update } from '../../services/ware';
+import { message } from 'antd';
+import pathToRegexp from 'path-to-regexp';
+import { Codes } from '../../utils/config';
+
+export default {
+  namespace: 'wareDetail',
+
+  state: {
+    filters: {},
+    operType: 'create',
+    currentItem: {},
+    modalVisible: false,
+    itemLoading: false,
+  },
+
+  subscriptions: {
+    setup({ dispatch, history }) {
+      history.listen(({ pathname, state, ...rest }) => {
+        const match = pathToRegexp('/product/ware/edit/:id').exec(pathname);
+        if (match) {
+          dispatch({ type: 'query', payload: { id: match[1] } });
+          dispatch({ type: 'saveFilters', payload: state });
+          dispatch({ type: 'saveOperType', payload: { operType: 'update' } });
+        }
+        if (pathname === '/product/ware/add') {
+          dispatch({ type: 'saveFilters', payload: state });
+          dispatch({ type: 'saveFilters', payload: state });
+          dispatch({ type: 'saveOperType', payload: { operType: 'create' } });
+        }
+      });
+    }
+  },
+
+  effects: {
+    * query ({ payload }, { call, put }) {
+      yield put({ type: 'changeLoading', payload: { itemLoading: true } });
+      const { data, success } = yield call(queryOne, payload);
+      if (success) {
+        yield put({ type: 'querySuccess', payload: { ...data } });
+      }
+      yield put({ type: 'changeLoading', payload: { itemLoading: false } });
+    },
+    * create ({ payload, callback }, { call, put }) {
+      // 创建课件，默认状态为NORMAL
+      const { data, success } = yield call(create, { ...payload, status: Codes.CODE_NORMAL });
+      if (success) {
+        message.success('创建成功!');
+        yield put({ type: 'clearPage' });
+        if (callback) {
+          callback();
+        }
+      } else {
+        message.error('创建失败!');
+      }
+    },
+    * update ({ payload, callback }, { call, put }) {
+      const { data, success } = yield call(update, payload);
+      if (success) {
+        message.success('更新成功!');
+        yield put({ type: 'clearPage' });
+        if (callback) {
+          callback();
+        }
+      } else {
+        message.error('更新失败!');
+      }
+    }
+  },
+
+  reducers: {
+    changeLoading(state, { payload }) {
+      return { ...state, ...payload };
+    },
+
+    querySuccess(state, { payload }) {
+      return { ...state, currentItem: payload };
+    },
+
+    saveFilters(state, { payload: filters }) {
+      return { ...state, filters };
+    },
+
+    showModal(state) {
+      return { ...state, modalVisible: true };
+    },
+
+    hideModal(state) {
+      return { ...state, modalVisible: false };
+    },
+
+    saveOperType(state, { payload }) {
+      return { ...state, ...payload };
+    },
+
+    saveSortResult(state, { payload: { resourceList } }) {
+      const currentItem = { ...state.currentItem, resourceList };
+      return { ...state, modalVisible: false, currentItem };
+    },
+
+    clearPage(state) {
+      return { ...state, currentItem: {}, itemLoading: false };
+    }
+  }
+}

src/models/ware/ware.js

@@ -0,0 +1,113 @@
+import { query, create, update, remove } from '../../services/ware';
+import modelExtend from 'dva-model-extend';
+import queryString from 'query-string';
+import { message } from 'antd';
+import { pageModel } from '../common';
+import { pageSize } from '../../utils/config';
+import { checkSearchParams } from '../../utils/utils';
+
+export default modelExtend(pageModel, {
+  namespace: 'ware',
+
+  state: {
+    currentItem: {},
+    itemLoading: false,
+    listLoading: false,
+    modalVisible: false,
+    modalType: 'create',
+  },
+
+  subscriptions: {
+    setup({ dispatch, history }) {
+      history.listen((location) => {
+        if (location.pathname === '/product/ware') {
+          const payload = checkSearchParams(queryString.parse(location.search));
+          dispatch({
+            type: 'query',
+            payload,
+          });
+        }
+      });
+    }
+  },
+
+  effects: {
+    * query ({ payload = {} }, { call, put }) {
+      yield put({ type: 'changeLoading', payload: { listLoading: true }});
+      const { data, success } = yield call(query, payload);
+      if (success) {
+        yield put({
+          type: 'querySuccess',
+          payload: {
+            list: data.list,
+            pagination: {
+              current: Number(payload.pageNo) || 1,
+              pageSize: Number(payload.pageSize) || 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) {
+        message.success('创建成功!');
+        if (callback) {
+          callback();
+        }
+      } else {
+        message.error('创建失败!');
+      }
+    },
+    * update ({ payload, callback }, { call, put }) {
+      const { data, success } = yield call(update, payload);
+      if (success) {
+        yield put({ type: 'hideModal' });
+        message.success('更新成功!');
+        if (callback) {
+          callback();
+        }
+      } else {
+        message.error('更新失败!');
+      }
+    },
+    * delete ({ payload, callback }, { call, put }) {
+      const { data, success } = yield call(remove, payload);
+      if (success) {
+        message.success('删除成功!');
+        if (callback) {
+          callback();
+        }
+      } else {
+        message.error('删除失败!');
+      }
+    },
+    * recover ({ payload, callback }, { call, put }) {
+      const { data, success } = yield call(update, payload);
+      if (success) {
+        message.success('恢复成功!');
+        if (callback) {
+          callback();
+        }
+      } else {
+        message.error('恢复失败!');
+      }
+    },
+  },
+
+  reducers: {
+    changeLoading(state, { payload }) {
+      return { ...state, ...payload };
+    },
+
+    showModal(state, { payload }) {
+      return { ...state, ...payload, modalVisible: true };
+    },
+
+    hideModal(state) {
+      return { ...state, modalVisible: false };
+    },
+  }
+})

src/routes/Campus/table.less

@@ -2,75 +2,71 @@
 @import "../../utils/utils.less";
 
 .table {
-  :global {
-    .ant-table-tbody > tr > td,
-    .ant-table-thead > tr > th {
-      height: 62px;
-    }
+  .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%;
-        }
+    .ant-table-tbody > tr > td,
+    .ant-table-thead > tr > th {
+      &:nth-child(1) {
+        width: 16%;
+      }
 
-        &:nth-child(2) {
-          width: 20%;
-        }
+      &:nth-child(2) {
+        width: 20%;
+      }
 
-        &:nth-child(3) {
-          width: 10%;
-        }
+      &:nth-child(3) {
+        width: 10%;
+      }
 
-        &:nth-child(4) {
-          width: 18%;
-        }
+      &:nth-child(4) {
+        width: 18%;
+      }
 
-        &:nth-child(5) {
-          width: 16%;
-        }
+      &:nth-child(5) {
+        width: 16%;
+      }
 
-        &:nth-child(6) {
-          width: 12%;
-        }
+      &:nth-child(6) {
+        width: 12%;
+      }
 
-        &:nth-child(7) {
-          width: 8%;
-        }
+      &:nth-child(7) {
+        width: 8%;
       }
+    }
 
-      .ant-table-thead {
-        & > tr {
-          transition: none;
-          display: block;
+    .ant-table-thead {
+      & > tr {
+        transition: none;
+        display: block;
 
-          & > th {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-          }
+        & > th {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
         }
       }
+    }
 
-      .ant-table-tbody {
-        & > tr {
-          transition: none;
-          display: block;
-          border-bottom: 1px solid #f5f5f5;
+    .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;
-          }
+        & > td {
+          border-bottom: none;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+        }
 
-          &.ant-table-expanded-row-level-1 > td {
-            height: auto;
-          }
+        &.ant-table-expanded-row-level-1 > td {
+          height: auto;
         }
       }
     }

src/routes/Merchant/table.less

@@ -2,71 +2,67 @@
 @import "../../utils/utils.less";
 
 .table {
-  :global {
-    .ant-table-tbody > tr > td,
-    .ant-table-thead > tr > th {
-      height: 62px;
-    }
+  .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%;
-        }
+    .ant-table-tbody > tr > td,
+    .ant-table-thead > tr > th {
+      &:nth-child(1) {
+        width: 17%;
+      }
 
-        &:nth-child(2) {
-          width: 17%;
-        }
+      &:nth-child(2) {
+        width: 17%;
+      }
 
-        &:nth-child(3) {
-          width: 17%;
-        }
+      &:nth-child(3) {
+        width: 17%;
+      }
 
-        &:nth-child(4) {
-          width: 17%;
-        }
+      &:nth-child(4) {
+        width: 17%;
+      }
 
-        &:nth-child(5) {
-          width: 17%;
-        }
+      &:nth-child(5) {
+        width: 17%;
+      }
 
-        &:nth-child(6) {
-          width: 15%;
-        }
+      &:nth-child(6) {
+        width: 15%;
       }
+    }
 
-      .ant-table-thead {
-        & > tr {
-          transition: none;
-          display: block;
+    .ant-table-thead {
+      & > tr {
+        transition: none;
+        display: block;
 
-          & > th {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-          }
+        & > th {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
         }
       }
+    }
 
-      .ant-table-tbody {
-        & > tr {
-          transition: none;
-          display: block;
-          border-bottom: 1px solid #f5f5f5;
+    .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;
-          }
+        & > td {
+          border-bottom: none;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+        }
 
-          &.ant-table-expanded-row-level-1 > td {
-            height: auto;
-          }
+        &.ant-table-expanded-row-level-1 > td {
+          height: auto;
         }
       }
     }

src/routes/Resource/gallery/table.less

@@ -5,7 +5,7 @@
   :global {
     .ant-table-tbody > tr > td,
     .ant-table-thead > tr > th {
-      height: 62px;
+      height: 50px;
     }
   }
 

src/routes/Resource/video/table.less

@@ -5,7 +5,7 @@
   :global {
     .ant-table-tbody > tr > td,
     .ant-table-thead > tr > th {
-      height: 62px;
+      height: 50px;
     }
   }
 

src/routes/Tag/table.less

@@ -5,7 +5,7 @@
   :global {
     .ant-table-tbody > tr > td,
     .ant-table-thead > tr > th {
-      height: 62px;
+      height: 50px;
     }
   }
 

src/routes/TagGroup/table.less

@@ -5,7 +5,7 @@
   :global {
     .ant-table-tbody > tr > td,
     .ant-table-thead > tr > th {
-      height: 62px;
+      height: 50px;
     }
   }
 

src/routes/Terminal/table.less

@@ -5,7 +5,7 @@
   :global {
     .ant-table-tbody > tr > td,
     .ant-table-thead > tr > th {
-      height: 62px;
+      height: 50px;
     }
   }
 

src/routes/Ware/detail/index.js

@@ -0,0 +1,272 @@
+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 { Spin, Popover, Badge, Table, Radio, Card, Form, Input, Icon, Button, Select } from 'antd';
+import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
+import ResourceSelectSortModal from './modal';
+import { Codes, resourceType } from '../../../utils/config';
+
+const FormItem = Form.Item;
+const Option = Select.Option;
+const { TextArea } = Input;
+
+@Form.create()
+@connect(state => ({
+  wareDetail: state.wareDetail,
+  resource: state.resource,
+}))
+export default class WareDetail extends PureComponent {
+  static propTypes = {
+    wareDetail: PropTypes.object,
+  };
+
+  // 展示模态框 - 加载第一页数据
+  handleModalShow = () => {
+    const { dispatch } = this.props;
+    dispatch({ type: 'wareDetail/showModal' });
+    dispatch({ type: 'resource/query', payload: { pageNo: 1, pageSize: 10 } });
+  }
+
+  // 取消/关闭 - 隐藏模态框
+  handleModalCancel = () => {
+    const { dispatch } = this.props;
+    dispatch({ type: 'wareDetail/hideModal' });
+  }
+
+  // 提交 - 保存选择和排序完的数据到model中
+  handleModalOk = (data) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'wareDetail/saveSortResult',
+      payload: { resourceList: data }
+    });
+  }
+
+  // 搜索
+  handleModalSearch = (data) => {
+    const { dispatch } = this.props;
+    const newData = { ...data };
+    if (newData.keyword) {
+      newData[newData.field] = newData.keyword;
+      delete newData.field;
+      delete newData.keyword;
+    } else {
+      delete newData.field;
+      delete newData.keyword;
+    }
+    dispatch({
+      type: 'resource/query',
+      payload: { ...newData, pageNo: 1, pageSize: 10 },
+    });
+  }
+
+  // 翻页 - 资源列表
+  handleModalTableOnChange = (pagination, filterArgs, filters) => {
+    const { dispatch } = this.props;
+    const newFilters = { ...filters };
+    if (newFilters.keyword) {
+      newFilters[newFilters.field] = newFilters.keyword;
+      delete newFilters.field;
+      delete newFilters.keyword;
+    } else {
+      delete newFilters.field;
+      delete newFilters.keyword;
+    }
+    const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
+    const tableFilters = Object.keys(filterArgs).reduce((obj, key) => {
+      const newObj = { ...obj };
+      newObj[key] = getValue(filterArgs[key]);
+      return newObj;
+    }, {});
+
+    const data = { ...newFilters, ...tableFilters, pageNo: pagination.current, pageSize: pagination.pageSize };
+    Object.keys(data).map(key => data[key] ? null : delete data[key]);
+    dispatch({ type: 'resource/query', payload: data });
+  }
+
+  handlePageSubmit = (e) => {
+    e.preventDefault()
+    const {
+      dispatch,
+      form: {
+        validateFields,
+        getFieldsValue,
+        resetFields
+      },
+      wareDetail: {
+        operType,
+        currentItem,
+        filters,
+      }
+    } = this.props;
+    validateFields((errors) => {
+      if (errors) { return; }
+      const data = {
+        ...currentItem,
+        ...getFieldsValue(),
+      };
+      dispatch({
+        type: `wareDetail/${operType}`,
+        payload: data,
+        callback: () => {
+          dispatch(
+            routerRedux.push({
+              pathname: '/product/ware',
+              search: queryString.stringify(filters),
+            })
+          );
+        }
+      })
+      resetFields();
+    });
+  }
+
+  handlePageCancel = () => {
+    const { dispatch, wareDetail: { filters } } = this.props;
+    dispatch({ type: 'wareDetail/clearPage' });
+    dispatch(
+      routerRedux.push({
+        pathname: '/product/ware',
+        search: queryString.stringify(filters),
+      })
+    );
+  }
+
+  render() {
+    const { dispatch, form: { getFieldDecorator }, wareDetail, resource } = this.props;
+    const { itemLoading, currentItem, filters, modalVisible } = wareDetail;
+    const { resourceList, name, code, digest } = currentItem;
+    const { list, listLoading, pagination } = resource;
+
+    // 待选表格去掉分页的跳转及变换页码
+    if (pagination) {
+      delete pagination.showQuickJumper;
+      delete pagination.showSizeChanger;
+    }
+
+    const subTableColumns = [{
+      title: '缩略图',
+      dataIndex: 'url',
+      key: 'url',
+      render: (text, record) => (
+        record.type !== Codes.CODE_IMAGE ? <Icon type="video-camera" style={{ fontSize: 40}} /> :
+          <Popover
+            content={<img alt="" src={record.url} width={350} />}
+            title={record.name}
+          >
+            <img alt="" src={record.url} width={70} />
+          </Popover>
+      ),
+    },{
+      title: '资源编号',
+      dataIndex: 'code',
+      key: 'code',
+    },{
+      title: '资源名称',
+      dataIndex: 'name',
+      key: 'name',
+    },{
+      title: '资源类型',
+      dataIndex: 'type',
+      key: 'type',
+      render: (text, record) => (resourceType[record.type]),
+    }];
+
+    const formItemLayout = {
+      labelCol: {
+        span: 7,
+      },
+      wrapperCol: {
+        span: 12,
+      },
+    };
+    const submitFormLayout = {
+      wrapperCol: {
+        xs: { span: 24, offset: 0 },
+        sm: { span: 10, offset: 7 },
+      },
+    };
+
+    return (
+      <PageHeaderLayout>
+        <Spin spinning={itemLoading}>
+          <Card>
+            <Form layout="horizontal" onSubmit={this.handlePageSubmit}>
+              <FormItem label="课件编号：" hasFeedback {...formItemLayout}>
+                {getFieldDecorator('code', {
+                  rules: [{ required: true, type: 'string', message: "编号为必填项!" }],
+                  initialValue: code,
+                })(<Input />)}
+              </FormItem>
+              <FormItem label="课件名称：" hasFeedback {...formItemLayout}>
+                {getFieldDecorator('name', {
+                  rules: [{ required: true, type: 'string', message: "名称为必填项!" }],
+                  initialValue: name,
+                })(<Input />)}
+              </FormItem>
+              <FormItem label="课件简述：" hasFeedback {...formItemLayout}>
+                {getFieldDecorator('digest', {
+                  initialValue: digest,
+                })(<TextArea />)}
+              </FormItem>
+              {/*内容提供商暂不用选择
+              <FormItem label="提供商" hasFeedback {...formItemLayout}>
+                {getFieldDecorator('groupId', {
+                  rules: [{ required: true, type: 'string', message: "标签组为必选项!" }],
+                  initialValue: groupId,
+                })(
+                  <Select
+                    showSearch
+                    allowClear
+                    placeholder="请输入标签组编号或者名称进行筛选"
+                    optionFilterProp="children"
+                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+                  >
+                    {list.map(item => <Option value={item.id} key={item.id}>{`${item.code}/${item.name}`}</Option>)}
+                  </Select>
+                )}
+              </FormItem>
+              */}
+              <FormItem label="选择资源" {...formItemLayout}>
+                <Button onClick={this.handleModalShow} type="primary" size="small" icon="edit">编辑</Button>
+              </FormItem>
+              <FormItem wrapperCol={{ offset: 7, span: 12 }}>
+                <Table
+                  locale={{
+                    emptyText: <span style={{ color: "#C6D0D6" }}>&nbsp;&nbsp;<Icon type="frown-o"/>
+                      该课件下不包含任何内容，请选择图片或视频!</span>
+                  }}
+                  dataSource={resourceList}
+                  columns={subTableColumns}
+                  rowKey={record => record.id}
+                  bordered
+                  pagination={false}
+                />
+              </FormItem>
+              <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
+                <Button onClick={this.handlePageCancel}>取消</Button>
+                <Button type="primary" style={{ marginLeft: 35 }} htmlType="submit">提交</Button>
+              </FormItem>
+            </Form>
+            <ResourceSelectSortModal
+              rowKeyName="id"
+              modalVisible={modalVisible}
+              style={{ top: 20 }}
+              width={600}
+              onCancel={this.handleModalCancel}
+              onOk={this.handleModalOk}
+              onSearch={this.handleModalSearch}
+              selTableData={resourceList || []}
+              fsTableDataSource={list}
+              fsTableLoading={listLoading}
+              fsTablePagination={pagination}
+              fsTableOnChange={this.handleModalTableOnChange}
+            />
+          </Card>
+        </Spin>
+      </PageHeaderLayout>
+    );
+  }
+}

src/routes/Ware/detail/modal.js

@@ -0,0 +1,123 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Badge, Popover, Icon } from 'antd';
+import SelectModal from '../../../components/SelectModal';
+import styles from './modal.less';
+import { Codes, resourceType } from '../../../utils/config';
+
+export default class ResourceSelectSortModal extends PureComponent {
+  static propTypes = {
+    selTableData: PropTypes.array.isRequired,
+    modalVisible: PropTypes.bool.isRequired,
+    rowKeyName: PropTypes.string.isRequired,
+  };
+
+  render() {
+    const { selTableData, modalVisible, rowKeyName, onCancel, onOk, onSearch, ...fsTableOpts } = this.props;
+
+    const modalProps = {
+      title: '选择课件资源',
+      maskClosable: false,
+      visible: modalVisible,
+      onCancel,
+      onOk,
+    };
+
+    const searchProps = {
+      searchField: 'name',
+      searchKeyWord: '',
+      searchSize: 'default',
+      searchSelect: true,
+      searchSelectOptions: [{
+        value: 'name', name: '资源名称', mode: 'input',
+      },{
+        value: 'code', name: '资源编号', mode: 'input',
+      }],
+      searchSelectProps: {
+        defaultValue: 'name',
+      },
+      onSearch: (value) => {
+        onSearch(value);
+      },
+    };
+
+    const selTableProps = {
+      operDel: true,
+      operSort: true,
+      tableClassName: styles.sTable,
+      tablePagination: false,
+      tableDataSource: selTableData,
+      rowKeyName: rowKeyName,
+      tableColumns: [{
+        title: '缩略图',
+        dataIndex: 'url',
+        key: 'url',
+        render: (text, record) => (
+          record.type !== Codes.CODE_IMAGE ? <Icon type="video-camera" style={{ fontSize: 40}} /> :
+            <Popover
+              content={<img alt="" src={record.url} width={350} />}
+              title={record.name}
+            >
+              <img alt="" src={record.url} width={70} />
+            </Popover>
+        ),
+      },{
+        title: '资源编号',
+        dataIndex: 'code',
+        key: 'code',
+      },{
+        title: '资源名称',
+        dataIndex: 'name',
+        key: 'name',
+      },{
+        title: '资源类型',
+        dataIndex: 'type',
+        key: 'type',
+        render: (text, record) => (resourceType[record.type]),
+      }],
+    };
+
+    //待选资源Table属性
+    const fsTableProps = {
+      fsTableClassName: styles.fsTable,
+      fsTableColumns: [{
+        title: '缩略图',
+        dataIndex: 'url',
+        key: 'url',
+        render: (text, record) => (
+          record.type !== Codes.CODE_IMAGE ? <Icon type="video-camera" style={{ fontSize: 40}} /> :
+            <Popover
+              content={<img alt="" src={record.url} width={350} />}
+              title={record.name}
+            >
+              <img alt="" src={record.url} width={70} />
+            </Popover>
+        ),
+      },{
+        title: '资源编号',
+        dataIndex: 'code',
+        key: 'code',
+      },{
+        title: '资源名称',
+        dataIndex: 'name',
+        key: 'name',
+      },{
+        title: '资源类型',
+        dataIndex: 'type',
+        key: 'type',
+        render: (text, record) => (resourceType[record.type]),
+      }],
+      ...fsTableOpts,
+    }
+
+    return (
+      <SelectModal
+        mode="multiple"
+        { ...searchProps }
+        { ...modalProps }
+        { ...selTableProps }
+        { ...fsTableProps }
+      />
+    );
+  }
+}

src/routes/Ware/detail/modal.less

@@ -0,0 +1,136 @@
+.fsTable {
+  :global {
+    .ant-table-tbody > tr > td,
+    .ant-table-thead > tr > th {
+      height: 50px;
+    }
+  }
+
+  :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: 22%;
+      }
+
+      &:nth-child(4) {
+        width: 17%;
+      }
+
+      &:nth-child(5) {
+        width: 17%;
+      }
+    }
+
+    .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;
+        }
+      }
+    }
+  }
+}
+
+
+.sTable {
+  :global {
+    .ant-table-tbody > tr > td,
+    .ant-table-thead > tr > th {
+      height: 50px;
+    }
+  }
+
+  :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: 18%;
+      }
+
+      &:nth-child(6) {
+        width: 14%;
+      }
+    }
+
+    .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/Ware/index.js

@@ -0,0 +1,135 @@
+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 PageHeaderLayout from '../../layouts/PageHeaderLayout';
+import { Codes } from '../../utils/config';
+
+@connect(state => ({
+  ware: state.ware,
+}))
+export default class Tag extends PureComponent {
+  static propTypes = {
+    group: PropTypes.object,
+    location: PropTypes.object,
+    dispatch: PropTypes.func,
+  };
+
+  render() {
+    const { location, dispatch, ware } = 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 } = ware;
+
+    // 把携带的参数中空值项删除
+    Object.keys(filters).map(key => { filters[key] ? null : delete filters[key] });
+    // 如果搜索内容不为空则添加进filters中
+    if (field && keyword) {
+      filters.field = field;
+      filters.keyword = keyword;
+    }
+
+    const searchProps = {
+      field,
+      keyword,
+      onSearch: (payload) => {
+        if (!payload.keyword.length) {
+          delete payload.field;
+          delete payload.keyword;
+        }
+        dispatch(routerRedux.push({
+          pathname,
+          search: queryString.stringify({
+            ...payload
+          })
+        }));
+      },
+      onAdd: () => {
+        dispatch(
+          routerRedux.push({
+            pathname: '/product/ware/add',
+            state: filters,
+          })
+        );
+      }
+    };
+
+    const listProps = {
+      pagination,
+      location,
+      dataSource: list,
+      loading: listLoading,
+      curStatus: filters.status,
+      onChange: (pagination, filterArgs) => {
+        const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
+        const tableFilters = Object.keys(filterArgs).reduce((obj, key) => {
+          const newObj = { ...obj };
+          newObj[key] = getValue(filterArgs[key]);
+          return newObj;
+        }, {});
+
+        const data = { ...filters, ...tableFilters };
+        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,
+          }),
+        }));
+      },
+      onEditItem: (item) => {
+        dispatch(
+          routerRedux.push({
+            pathname: `/product/ware/edit/${item.id}`,
+            state: filters,
+          })
+        );
+      },
+      onDeleteItem: (id) => {
+        dispatch({
+          type: 'ware/delete',
+          payload: id,
+          callback: () => {
+            dispatch(
+              routerRedux.push({
+                pathname,
+                search: queryString.stringify(filters),
+              })
+            );
+          }
+        });
+      },
+      onRecoverItem: (payload) => {
+        dispatch({
+          type: 'ware/recover',
+          payload,
+          callback: () => {
+            dispatch(
+              routerRedux.push({
+                pathname,
+                search: queryString.stringify(filters),
+              })
+            );
+          }
+        });
+      }
+    };
+
+    return (
+      <PageHeaderLayout>
+        <Card>
+          <Search { ...searchProps } />
+          <TableList { ...listProps } />
+        </Card>
+      </PageHeaderLayout>
+    );
+  }
+}

src/routes/Ware/search.js

@@ -0,0 +1,48 @@
+import react, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Form, 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;
+
+    const searchGroupProps = {
+      field,
+      keyword,
+      size: 'default',
+      select: true,
+      selectOptions: [{
+        value: 'name', name: '课件名称', mode: 'input',
+      },{
+        value: 'code', name: '课件编号', mode: 'input',
+      }],
+      selectProps: {
+        defaultValue: field || 'name',
+      },
+      onSearch: (value) => {
+        onSearch(value);
+      },
+    };
+
+    return (
+      <Row gutter={24}>
+        <Col lg={10} md={12} sm={16} xs={24} style={{ marginBottom: 16 }}>
+          <DataSearch { ...searchGroupProps } />
+        </Col>
+        <Col lg={{ offset: 7, span: 7 }} md={12} sm={8} xs={24} style={{ marginBottom: 16, textAlign: 'right' }}>
+          <Button type="ghost" onClick={onAdd}><Icon type="plus-circle" />添加</Button>
+        </Col>
+      </Row>
+    );
+  }
+}

src/routes/Ware/table.js

@@ -0,0 +1,105 @@
+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 { statuses, Codes } from '../../utils/config';
+
+const confirm = Modal.confirm;
+
+export default class TableList extends PureComponent {
+  static propTypes = {
+    location: PropTypes.object,
+    onChange: PropTypes.func.isRequired,
+    onDeleteItem: PropTypes.func.isRequired,
+    onEditItem: PropTypes.func.isRequired,
+  };
+
+  handleOperateItem = (record) => {
+    const { onDeleteItem, onRecoverItem } = this.props;
+    confirm({
+      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 });
+        }
+      },
+    })
+  }
+
+  render() {
+    const { curStatus, onDeleteItem, onRecoverItem, onEditItem, location, pagination, ...tableProps } = this.props;
+
+    const columns = [{
+      title: '课件编号',
+      dataIndex: 'code',
+      key: 'code',
+    },{
+      title: '课件名称',
+      dataIndex: 'name',
+      key: 'name',
+    },{
+      title: '供应商',
+      dataIndex: 'cpId',
+      key: 'cpId',
+    },{
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (text, record) => {
+        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],
+    },{
+      title: '添加时间',
+      dataIndex: 'gmtCreated',
+      key: 'gmtCreated',
+      render: (text, record) => (
+        <div>{moment(text).format('YYYY-MM-DD')}</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>
+      )
+    }];
+
+    // 数据table列表表头的筛选按钮点击重置后status与domain值为空，此时删除该参数
+    columns.map(item => {
+      item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
+    });
+
+    tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
+    const getBodyWrapperProps = {
+      page: location.query.page,
+      current: tableProps.pagination.current,
+    };
+    const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);
+
+    return (
+      <Table
+        simple
+        bordered
+        { ...tableProps }
+        columns={columns}
+        className={classnames({ [styles.table]: true, [styles.motion]: true })}
+        rowKey={record => record.id}
+        getBodyWrapper={getBodyWrapper}
+      />
+    );
+  }
+}

src/routes/Ware/table.less

@@ -0,0 +1,82 @@
+@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: 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/services/ware.js

@@ -0,0 +1,32 @@
+import { stringify } from 'qs';
+import request from '../utils/request';
+import { wares, ware } from '../utils/api';
+
+export async function query(params) {
+  return request(`${wares}?${stringify(params)}`);
+}
+
+export async function queryOne({ id }) {
+  return request(`${ware.replace('/:id', `/${id}`)}`);
+}
+
+export async function create(params) {
+  const options = {
+    method: 'POST',
+    body: JSON.stringify(params),
+  };
+  return request(`${ware.replace('/:id', '')}`, options);
+}
+
+export async function update(params) {
+  const options = {
+    method: 'PUT',
+    body: JSON.stringify(params),
+  };
+  return request(`${ware.replace('/:id', '')}`, options);
+}
+
+export async function remove({ id }) {
+  const options = { method: 'DELETE' }
+  return request(`${ware.replace('/:id', `/${id}`)}`, options);
+}

src/utils/api.js

@@ -18,4 +18,6 @@ module.exports = {
   group: `${config.apiHost}/group/:id`,
   tags: `${config.apiHost}/tag/list`,
   tag: `${config.apiHost}/tag/:id`,
+  wares: `${config.apiHost}/ware/list`,
+  ware: `${config.apiHost}/ware/:id`
 };