1.表格样式调整;

2.标签、标签组、资源管理代码优化

src/components/SelectModal/index.js

@@ -127,11 +127,11 @@ export default class SelectModal extends PureComponent {
 
   handleOnOk = () => {
     const { onOk, mode, onCancel } = this.props;
-    if (mode === 'multiple') {
+    if (mode == 'multiple' || mode == 'sort') {
       const { selTableData } = this.state;
       onOk(selTableData);
     }
-    if (mode === 'single') {
+    if (mode == 'single') {
       onCancel();
     }
   }

src/index.less

@@ -17,125 +17,6 @@ body {
   height: 8px;
 }
 
-// :global {
-//   .ant-breadcrumb {
-//     & > span {
-//       &:last-child {
-//         color: #999;
-//         font-weight: normal;
-//       }
-//     }
-//   }
-//
-//   .ant-breadcrumb-link {
-//     .anticon + span {
-//       margin-left: 4px;
-//     }
-//   }
-//
-//   .ant-table {
-//     .ant-table-thead > tr > th {
-//       text-align: center;
-//     }
-//
-//     .ant-table-tbody > tr > td {
-//       text-align: center;
-//     }
-//
-//     &.ant-table-small {
-//       .ant-table-thead > tr > th {
-//         background: #f7f7f7;
-//       }
-//
-//       .ant-table-body > table {
-//         padding: 0;
-//       }
-//     }
-//   }
-//
-//   .ant-table-pagination {
-//     float: none!important;
-//     display: table;
-//     margin: 16px auto !important;
-//   }
-//
-//   .ant-popover-inner {
-//     border: none;
-//     border-radius: 0;
-//     box-shadow: 0 0 20px rgba(100, 100, 100, 0.2);
-//   }
-//
-//   .vertical-center-modal {
-//     display: flex;
-//     align-items: center;
-//     justify-content: center;
-//
-//     .ant-modal {
-//       top: 0;
-//
-//       .ant-modal-body {
-//         max-height: 80vh;
-//         overflow-y: auto;
-//       }
-//     }
-//   }
-//
-//   .ant-form-item-control {
-//     vertical-align: middle;
-//   }
-//
-//   .ant-modal-mask {
-//     background-color: rgba(55, 55, 55, 0.2);
-//   }
-//
-//   .ant-modal-content {
-//     box-shadow: none;
-//   }
-//
-//   .ant-select-dropdown-menu-item {
-//     padding: 12px 16px !important;
-//   }
-//
-//   .margin-right {
-//     margin-right: 16px;
-//   }
-//
-//   a:focus {
-//     text-decoration: none;
-//   }
-// }
-// @media (min-width: 1600px) {
-//   :global {
-//     .ant-col-xl-48 {
-//       width: 20%;
-//     }
-//
-//     .ant-col-xl-96 {
-//       width: 40%;
-//     }
-//   }
-// }
-// @media (max-width: 767px) {
-//   :global {
-//     .ant-pagination-item,
-//     .ant-pagination-next,
-//     .ant-pagination-options,
-//     .ant-pagination-prev {
-//       margin-bottom: 8px;
-//     }
-//
-//     .ant-card {
-//       .ant-card-head {
-//         padding: 0 12px;
-//       }
-//
-//       .ant-card-body {
-//         padding: 12px;
-//       }
-//     }
-//   }
-// }
-
 .globalSpin {
   width: 100%;
   margin: 40px 0 !important;

src/models/group/detail.js

@@ -23,7 +23,7 @@ export default {
           dispatch({ type: 'saveFilters', payload: state });
           dispatch({ type: 'saveOperType', payload: { operType: 'update' } });
         }
-        if (pathname === '/tag/tagGroup/add') {
+        if (pathname == '/tag/tagGroup/add') {
           dispatch({ type: 'saveFilters', payload: state });
           dispatch({ type: 'saveOperType', payload: { operType: 'create' } });
         }
@@ -57,35 +57,31 @@ export default {
   },
 
   reducers: {
-    changeLoading(state, { payload }) {
-      return { ...state, ...payload };
+    changeLoading(state, action) {
+      return { ...state, ...action.payload };
     },
-
-    querySuccess(state, { payload }) {
-      return { ...state, currentItem: payload };
+    querySuccess(state, action) {
+      const currentItem = action.payload;
+      return { ...state, currentItem };
     },
-
-    saveFilters(state, { payload: filters }) {
+    saveFilters(state, action) {
+      const filters = action.payload.filters;
       return { ...state, filters };
     },
-
-    showModal(state) {
-      return { ...state, modalVisible: true };
+    showModal(state, action) {
+      return { ...state, ...action.payload, modalVisible: true };
     },
-
-    hideModal(state) {
-      return { ...state, modalVisible: false };
+    hideModal(state, action) {
+      return { ...state, ...action.payload, modalVisible: false };
     },
-
-    saveOperType(state, { payload }) {
-      return { ...state, ...payload };
+    saveOperType(state, action) {
+      return { ...state, ...action.payload };
     },
-
-    saveSortResult(state, { payload: { tagList } }) {
+    saveSortResult(state, action) {
+      const tagList = action.payload.tagList;
       const currentItem = { ...state.currentItem, tagList };
       return { ...state, modalVisible: false, currentItem };
     },
-
     initState(state) {
       return { ...state, currentItem: {}, itemLoading: false };
     }

src/models/group/group.js

@@ -14,7 +14,7 @@ export default modelExtend(pageModel, {
   subscriptions: {
     setup({ dispatch, history }) {
       history.listen((location) => {
-        if (location.pathname === '/tag/tagGroup') {
+        if (location.pathname == '/tag/tagGroup') {
           const payload = checkSearchParams(queryString.parse(location.search));
           dispatch({
             type: 'query',
@@ -51,13 +51,6 @@ export default modelExtend(pageModel, {
         if (callback) callback();
       }
     },
-    * recover ({ payload, callback }, { call, put }) {
-      const { data, success } = yield call(update, payload);
-      if (success) {
-        message.success('恢复成功!');
-        if (callback) callback();
-      }
-    },
   },
 
   reducers: {

src/models/resource.js

@@ -44,7 +44,7 @@ export default modelExtend(pageModel, {
   effects: {
     * query ({ payload = {} }, { call, put }) {
       yield put({ type: 'changeLoading', payload: { listLoading: true }});
-      const { data, success } = yield call(query, payload);
+      const { data, success } = yield call(query, { ...payload, pageSize });
       if (success) {
         yield put({
           type: 'querySuccess',
@@ -83,13 +83,6 @@ export default modelExtend(pageModel, {
         if (callback) callback();
       }
     },
-    * recover ({ payload, callback }, { call, put }) {
-      const { data, success } = yield call(update, payload);
-      if (success) {
-        message.success('恢复成功!');
-        if (callback) callback();
-      }
-    },
   },
 
   reducers: {

src/models/tag/detail.js

@@ -23,7 +23,7 @@ export default {
           dispatch({ type: 'saveFilters', payload: state });
           dispatch({ type: 'saveOperType', payload: { operType: 'update' } });
         }
-        if (pathname === '/tag/tagItem/add') {
+        if (pathname == '/tag/tagItem/add') {
           dispatch({ type: 'saveFilters', payload: state });
           dispatch({ type: 'saveOperType', payload: { operType: 'create' } });
         }
@@ -41,7 +41,7 @@ export default {
       yield put({ type: 'changeLoading', payload: { itemLoading: false } });
     },
     * create ({ payload, callback }, { call, put }) {
-      const { data, success } = yield call(create, { ...payload, status: Codes.CODE_NORMAL });
+      const { data, success } = yield call(create, payload);
       if (success) {
         message.success('创建成功!');
         yield put({ type: 'initState' });
@@ -59,27 +59,47 @@ export default {
   },
 
   reducers: {
-    changeLoading(state, { payload }) {
-      return { ...state, ...payload };
+    changeLoading(state, action) {
+      return { ...state, ...action.payload };
     },
-    querySuccess(state, { payload }) {
-      return { ...state, currentItem: payload };
+    querySuccess(state, action) {
+      return {
+        ...state,
+        currentItem: action.payload,
+      };
     },
-    saveFilters(state, { payload: filters }) {
-      return { ...state, filters };
+    saveFilters(state, action) {
+      return {
+        ...state,
+        filters: action.payload.filters,
+      };
     },
-    showModal(state) {
-      return { ...state, modalVisible: true };
+    showModal(state, action) {
+      return {
+        ...state,
+        ...action.payload,
+        modalVisible: true,
+      };
     },
-    hideModal(state) {
-      return { ...state, modalVisible: false };
+    hideModal(state, action) {
+      return {
+        ...state,
+        ...action.payload,
+        modalVisible: false,
+      };
     },
-    saveOperType(state, { payload }) {
-      return { ...state, ...payload };
+    saveOperType(state, action) {
+      return { ...state, ...action.payload };
     },
-    saveSortResult(state, { payload: { itemList } }) {
-      const currentItem = { ...state.currentItem, itemList };
-      return { ...state, modalVisible: false, currentItem };
+    saveSortResult(state, action) {
+      return {
+        ...state,
+        modalVisible: false,
+        currentItem: {
+          ...state.currentItem,
+          itemList: action.payload.itemList,
+        }
+      };
     },
     initState(state) {
       return { ...state, currentItem: {}, itemLoading: false };

src/models/tag/tag.js

@@ -51,13 +51,6 @@ export default modelExtend(pageModel, {
         if (callback) callback();
       }
     },
-    * recover ({ payload, callback }, { call, put }) {
-      const { data, success } = yield call(update, payload);
-      if (success) {
-        message.success('恢复成功!');
-        if (callback) callback();
-      }
-    },
   },
 
   reducers: {

src/routes/Resource/gallery/index.js

@@ -57,7 +57,6 @@ export default class Gallery extends Component {
     const listProps = {
       pagination,
       location,
-      curStatus: filters.status,
       dataSource: list,
       loading: listLoading,
       onChange: (pagination, filterArgs) => {
@@ -111,21 +110,6 @@ export default class Gallery extends Component {
           }
         });
       },
-      // 恢复一条数据后，刷新页面并保持筛选数据不变
-      onRecoverItem: (payload) => {
-        dispatch({
-          type: 'resource/recover',
-          payload,
-          callback: () => {
-            dispatch(
-              routerRedux.push({
-                pathname,
-                search: queryString.stringify(filters),
-              })
-            );
-          }
-        });
-      }
     };
 
     const modalProps = {
@@ -134,7 +118,7 @@ export default class Gallery extends Component {
       maskClosable: false,
       signature,
       modalType,
-      title: `${modalType === 'create' ? '添加图片' : '编辑图片'}`,
+      title: `${modalType == 'create' ? '添加图片' : '编辑图片'}`,
       wrapClassName: 'vertical-center-modal',
       onOk (data) {
         dispatch({

src/routes/Resource/gallery/modal.js

@@ -6,7 +6,6 @@ import { Codes, statuses } from '../../../utils/config';
 
 @Form.create()
 export default class ModalForm extends PureComponent {
-
   // 图片上传成功
   handleSingleUpload = (file, fileName, signature) => {
     const { onUpload, onRemove } = this.props;
@@ -45,12 +44,12 @@ export default class ModalForm extends PureComponent {
     validateFields((errors) => {
       if (errors) return;
       const data = { ...getFieldsValue() };
-      if (modalType === 'update') {
+      if (modalType == 'update') {
         const { id, status, type } = item;
         data.id = id;
         data.type = type;
         data.status = status;
-      } else if (modalType === 'create') {
+      } else if (modalType == 'create') {
         data.status = Codes.CODE_NORMAL; // 创建图片，默认状态status="NORAML"
         data.type = Codes.CODE_IMAGE;  // 创建图片，默认类型type=3
       }

src/routes/Resource/gallery/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 { 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;
 

src/routes/Resource/gallery/table.js

@@ -1,31 +1,22 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import moment from 'moment';
-import classnames from 'classnames';
-import queryString from 'query-string';
 import { Divider, Popover, Modal, Table, Menu, Icon, Badge } from 'antd';
-import AnimTableBody from '../../../components/Animation/AnimTableBody';
 import { statuses, Codes, ossHost } from '../../../utils/config'
-import styles from './table.less';
 
 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 });
-        }
-      },
-    })
+      title: `您确定要删除该图片?`,
+      okText: '确定',
+      cancelText: '取消',
+      onOk: () => onDeleteItem({id: record.id}),
+    });
   }
 
   render() {
-    const { curStatus, onDeleteItem, onEditItem, location, pagination, ...tableProps } = this.props;
+    const { onDeleteItem, onEditItem, pagination, ...tableProps } = this.props;
 
     const columns = [{
       title: '缩略图',
@@ -39,19 +30,23 @@ export default class TableList extends PureComponent {
         >
           <img alt="" src={`${ossHost}/${record.path}`} width={70} />
         </Popover>
-      )
+      ),
+      width: '14%',
     },{
       title: '图片编号',
       dataIndex: 'code',
       key: 'code',
+      width: '20%',
     },{
       title: '图片名称',
       dataIndex: 'name',
       key: 'name',
+      width: '20%',
     },{
       title: '图片大小(B)',
       dataIndex: 'size',
       key: 'size',
+      width: '12%',
     },{
       title: '状态',
       dataIndex: 'status',
@@ -60,16 +55,15 @@ export default class TableList extends PureComponent {
         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) => (
         <div>{moment(text).format('YYYY-MM-DD')}</div>
-      )
+      ),
+      width: '12%',
     },{
       title: '操作',
       dataIndex: 'operation',
@@ -78,33 +72,22 @@ export default class TableList extends PureComponent {
         <div>
           <a onClick={() => onEditItem(record)}>编辑</a>
           <Divider type="vertical" />
-          <a onClick={() => this.handleOperateItem(record)}>{record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}</a>
+          <a onClick={() => this.handleDeleteItem(record)}>删除</a>
         </div>
-      )
+      ),
+      width: '12%',
     }];
 
-    // 数据table列表表头的筛选按钮点击重置后status值为空，此时删除该参数
-    columns.map(item => {
-      item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
-    });
-
     // 配置分页
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
 
-    // 添加动画
-    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
-
     return (
       <Table
         simple
         bordered
         { ...tableProps }
         columns={columns}
-        className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        components={{
-          body: { wrapper: AnimationTableBody }
-        }}
       />
     );
   }

src/routes/Resource/gallery/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: 50px;
-    }
-  }
-
-  &.motion {
-    :global {
-      .ant-table-tbody > tr > td,
-      .ant-table-thead > tr > th {
-        &:nth-child(1) {
-          width: 16%;
-        }
-
-        &:nth-child(2) {
-          width: 16%;
-        }
-
-        &:nth-child(3) {
-          width: 16%;
-        }
-
-        &:nth-child(4) {
-          width: 12%;
-        }
-
-        &:nth-child(5) {
-          width: 12%;
-        }
-
-        &:nth-child(6) {
-          width: 14%;
-        }
-
-        &:nth-child(7) {
-          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/Resource/video/modal.js

@@ -1,13 +1,8 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { Modal } from 'antd';
 import VideoPlayer from '../../../components/VideoPlayer';
 
 export default class ModalForm extends PureComponent {
-  static propTypes = {
-    item: PropTypes.object,
-  };
-
   render() {
     const { item = {}, isPaused, ...modalProps } = this.props;
     const newModalProps = {

src/routes/Resource/video/search.js

@@ -1,20 +1,10 @@
 import react, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { Button, Form, Row, Col, Icon } from 'antd';
+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,
-    field: PropTypes.string,
-    keyword: PropTypes.string,
-  };
-
   render() {
     const { field, keyword, onSearch } = this.props;
-
     const searchGroupProps = {
       field,
       keyword,
@@ -26,7 +16,7 @@ export default class Search extends PureComponent {
         value: 'code', name: '视频编号'
       }],
       selectProps: {
-        defaultValue: field || 'name',
+        defaultValue: field || 'code',
       },
       onSearch: (value) => {
         onSearch(value);

src/routes/Resource/video/table.js

@@ -1,45 +1,34 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import moment from 'moment';
-import classnames from 'classnames';
-import queryString from 'query-string';
-import { Divider, Modal, Table, Menu, Icon, Badge } from 'antd';
-import AnimTableBody from '../../../components/Animation/AnimTableBody';
+import { Table, Badge } from 'antd';
 import { statuses, quality, Codes } from '../../../utils/config'
-import styles from './table.less';
 
 export default class TableList extends PureComponent {
 
-  handleDeleteItem = (record) => {
-    const { onDeleteItem } = this.props;
-    Modal.confirm({
-      title: `您确定要${record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}该视频?`,
-      onOk () {
-        onDeleteItem(record.id);
-      },
-    })
-  }
-
   render() {
-    const { curStatus, onPlayVideo, location, pagination, ...tableProps } = this.props;
+    const { onPlayVideo, pagination, ...tableProps } = this.props;
 
     const columns = [{
       title: '视频编号',
       dataIndex: 'code',
       key: 'code',
+      width: '15%',
     },{
       title: '视频名称',
       dataIndex: 'name',
       key: 'name',
+      width: '32%',
     },{
       title: '视频格式',
       dataIndex: 'format',
       key: 'format',
+      width: '10%',
     },{
       title: '视频质量',
       dataIndex: 'quality',
       key: 'quality',
       render: (text, record) => quality[text],
+      width: '10%',
     },{
       title: '状态',
       dataIndex: 'status',
@@ -48,16 +37,15 @@ export default class TableList extends PureComponent {
         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: 'gmtCreated',
       key: 'gmtCreated',
       render: (text, record) => (
         <div>{moment(text).format('YYYY-MM-DD')}</div>
-      )
+      ),
+      width: '15%',
     },{
       title: '操作',
       dataIndex: 'operation',
@@ -66,23 +54,16 @@ export default class TableList extends PureComponent {
         <div>
           <a onClick={() => onPlayVideo(record)}>播放</a>
         </div>
-      )
+      ),
+      width: '8%',
     }];
 
-    // 数据table列表表头的筛选按钮点击重置后status值为空，此时删除该参数
-    columns.map(item => {
-      item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
-    });
-
     // 配置分页
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
     // 视频返回的数据量每页不固定，会出现分页bug，这里截取与pageSize相等
     const pageSize = tableProps.pagination.pageSize;
     const newSource = tableProps.dataSource.slice(0, pageSize);
 
-    // 添加动画
-    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
-
     return (
       <Table
         simple
@@ -90,11 +71,7 @@ export default class TableList extends PureComponent {
         { ...tableProps }
         columns={columns}
         dataSource={newSource}
-        className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        components={{
-          body: { wrapper: AnimationTableBody }
-        }}
       />
     );
   }

src/routes/Resource/video/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: 50px;
-    }
-  }
-
-  &.motion {
-    :global {
-      .ant-table-tbody > tr > td,
-      .ant-table-thead > tr > th {
-        &:nth-child(1) {
-          width: 20%;
-        }
-
-        &:nth-child(2) {
-          width: 23%;
-        }
-
-        &:nth-child(3) {
-          width: 15%;
-        }
-
-        &:nth-child(4) {
-          width: 10%;
-        }
-
-        &:nth-child(5) {
-          width: 10%;
-        }
-
-        &:nth-child(6) {
-          width: 12%;
-        }
-
-        &: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/Tag/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 { Spin, Badge, Table, Radio, Card, Form, Input, Icon, Button, Select } from 'antd';
@@ -14,10 +13,6 @@ import { Codes, itemStatuses, tagType } from '../../../utils/config';
   group: state.group,
 }))
 export default class TagDetail extends PureComponent {
-  static propTypes = {
-    tagDetail: PropTypes.object,
-  };
-
   componentDidMount() {
     const { dispatch } = this.props;
     dispatch({
@@ -64,9 +59,12 @@ export default class TagDetail extends PureComponent {
     validateFields((errors) => {
       if (errors) return;
       let data = {};
-      if (operType === 'create') {
-        data = { ...getFieldsValue(), status: Codes.CODE_NORMAL };
-      } else if (operType === 'update') {
+      if (operType == 'create') {
+        data = {
+          ...getFieldsValue(),
+          status: Codes.CODE_NORMAL
+        };
+      } else if (operType == 'update') {
         const { id, groupId, itemList, name, status } = currentItem;
         data = {
           id,
@@ -104,8 +102,9 @@ export default class TagDetail extends PureComponent {
   }
 
   render() {
-    const { dispatch, form: { getFieldDecorator }, tagDetail, group } = this.props;
+    const { dispatch, form, tagDetail, group } = this.props;
     const { itemLoading, currentItem, filters, modalVisible } = tagDetail;
+    const { getFieldDecorator } = form;
     const { list } = group;
     const { itemList, name, code, type, groupId } = currentItem;
 

src/routes/Tag/Edit/modal.js

@@ -1,23 +1,15 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { Badge } from 'antd';
 import SelectModal from '../../../components/SelectModal';
 import { Codes, tagType, itemStatuses } from '../../../utils/config';
 
 export default class ItemSortModal extends PureComponent {
-  static propTypes = {
-    itemList: PropTypes.array.isRequired,
-    modalVisible: PropTypes.bool.isRequired,
-    rowKeyName: PropTypes.string.isRequired,
-  };
-
   render() {
     const { itemList, modalVisible, rowKeyName, onCancel, onOk } = this.props;
     const modalProps = {
       title: '商品排序',
       maskClosable: false,
       visible: modalVisible,
-      destroyOnClose: true,
       onCancel,
       onOk,
     };

src/routes/Tag/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';
@@ -14,12 +13,6 @@ import { Codes } from '../../../utils/config';
   merchant: state.merchant,
 }))
 export default class Tag extends PureComponent {
-  static propTypes = {
-    group: PropTypes.object,
-    location: PropTypes.object,
-    dispatch: PropTypes.func,
-  };
-
   componentDidMount() {
     const { dispatch } = this.props;
     dispatch({
@@ -38,7 +31,15 @@ export default class Tag extends PureComponent {
     location.query = queryString.parse(location.search);
     const { query, pathname } = location;
     const { field, keyword, ...filters } = query;
-    const { list, listLoading, pagination, currentItem, itemLoading, modalVisible, modalType } = tagModel;
+    const {
+      list,
+      listLoading,
+      pagination,
+      currentItem,
+      itemLoading,
+      modalVisible,
+      modalType
+    } = tagModel;
 
     // 把携带的参数中空值项删除
     Object.keys(filters).map(key => { filters[key] ? null : delete filters[key] });
@@ -51,17 +52,6 @@ export default class Tag extends PureComponent {
     const searchProps = {
       field,
       keyword,
-      filterSelectProps: {
-        data: merchant.list.map(item => { return { value: item.id, name: item.name } }),
-        onSelectSearch: (value) => {
-          dispatch({
-            type: 'merchant/query',
-            payload: {
-              name: value,
-            }
-          });
-        },
-      },
       onSearch: (payload) => {
         if (!payload.keyword.length) {
           delete payload.field;
@@ -133,20 +123,6 @@ export default class Tag extends PureComponent {
           }
         });
       },
-      onRecoverItem: (params) => {
-        dispatch({
-          type: 'tagModel/recover',
-          payload: params,
-          callback: () => {
-            dispatch(
-              routerRedux.push({
-                pathname,
-                search: queryString.stringify(filters),
-              })
-            );
-          }
-        });
-      }
     };
 
     return (

src/routes/Tag/List/search.js

@@ -1,25 +1,14 @@
 import react, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { Button, Form, Row, Col, Icon } from 'antd';
+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, filterSelectProps } = this.props;
+    const { field, keyword, onSearch, onAdd } = this.props;
 
     const searchGroupProps = {
       field,
       keyword,
-      filterSelectProps,
       size: 'default',
       select: true,
       selectOptions: [{
@@ -28,9 +17,7 @@ export default class Search extends PureComponent {
       selectProps: {
         defaultValue: field || 'name',
       },
-      onSearch: (value) => {
-        onSearch(value);
-      },
+      onSearch: (value) => onSearch(value),
     };
 
     return (

src/routes/Tag/List/table.js

@@ -1,44 +1,40 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import moment from 'moment';
-import classnames from 'classnames';
-import queryString from 'query-string';
-import { Divider, Modal, Table, Menu, Icon, Badge } from 'antd';
-import AnimTableBody from '../../../components/Animation/AnimTableBody';
-import styles from './table.less';
+import { Divider, Modal, Table, Icon, Badge } from 'antd';
 import { statuses, Codes } from '../../../utils/config';
 
 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 {
-          onRecoverItem({ id: record.id, status: Codes.CODE_NORMAL });
-        }
-      },
-    })
+      title: `您确定要删除该标签?`,
+      okText: '确定',
+      cancelText: '取消',
+      onOk: () => onDeleteItem({id: record.id}),
+    });
   }
 
   render() {
-    const { curStatus, curMerchant, merchantList, onDeleteItem, onRecoverItem, onEditItem, location, pagination, ...tableProps } = this.props;
+    const {
+      curMerchant,
+      merchantList,
+      onDeleteItem,
+      onEditItem,
+      pagination,
+      ...tableProps
+    } = this.props;
 
     const columns = [{
-    //   title: '标签编号',
-    //   dataIndex: 'code',
-    //   key: 'code',
-    // },{
       title: '标签名称',
       dataIndex: 'name',
       key: 'name',
+      width: '20%',
     },{
       title: '所属标签组',
       dataIndex: 'groupName',
       key: 'groupName',
+      width: '20%',
     },{
       title: '渠道名称',
       dataIndex: 'merchantId',
@@ -47,6 +43,7 @@ export default class TableList extends PureComponent {
       filters: merchantList.map(item => ({ text: item.name, value: item.id })),
       filterMultiple: false,
       filteredValue: [curMerchant],
+      width: '17%',
     },{
       title: '状态',
       dataIndex: 'status',
@@ -55,16 +52,15 @@ export default class TableList extends PureComponent {
         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: '11%',
     },{
       title: '修改时间',
       dataIndex: 'gmtModified',
       key: 'gmtModified',
       render: (text, record) => (
         <div>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</div>
-      )
+      ),
+      width: '19%',
     },{
       title: '操作',
       dataIndex: 'operation',
@@ -73,34 +69,27 @@ export default class TableList extends PureComponent {
         <div>
           <a onClick={() => onEditItem(record)}>编辑</a>
           <Divider type="vertical" />
-          <a onClick={() => this.handleOperateItem(record)}>{record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}</a>
+          <a onClick={() => this.handleDeleteItem(record)}>删除</a>
         </div>
-      )
+      ),
+      width: '15%',
     }];
 
     // 数据table列表表头的筛选按钮点击重置后status与merchantId值为空，此时删除该参数
     columns.map(item => {
-      item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
       item.dataIndex === 'merchantId' && !curMerchant ? delete item.filteredValue : null;
     });
 
     // 配置分页
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
 
-    // 添加动画
-    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
-
     return (
       <Table
         simple
         bordered
         { ...tableProps }
         columns={columns}
-        className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        components={{
-          body: { wrapper: AnimationTableBody }
-        }}
       />
     );
   }

src/routes/Tag/List/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: 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: 15%;
-        }
-
-        &:nth-child(4) {
-          width: 14%;
-        }
-
-        &:nth-child(5) {
-          width: 19%;
-        }
-
-        &:nth-child(6) {
-          width: 18%;
-        }
-
-        // &:nth-child(7) {
-        //   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/TagGroup/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 { Spin, Badge, Table, Card, Form, Input, Icon, Button, Select } from 'antd';
@@ -8,20 +7,12 @@ import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
 import TagSortModal from './modal';
 import { Codes, statuses, tagType } from '../../../utils/config';
 
-const FormItem = Form.Item;
-const Option = Select.Option;
-
 @Form.create()
 @connect(state => ({
   groupDetail: state.groupDetail,
   merchant: state.merchant,
 }))
 export default class GroupDetail extends PureComponent {
-  static propTypes = {
-    groupDetail: PropTypes.object,
-    merchant: PropTypes.object,
-  };
-
   // 组件一挂载完成，立即请求1000条厂商数据
   // TODO 有弊端，待后期优化
   componentDidMount() {
@@ -31,7 +22,6 @@ export default class GroupDetail extends PureComponent {
       payload: {
         pageNo: 1,
         pageSize: 1000,
-        // status: Codes.CODE_NORMAL 不对状态进行过滤
       }
     });
   }
@@ -47,6 +37,7 @@ export default class GroupDetail extends PureComponent {
   }
 
   handleModalOk = (data) => {
+    console.log('hahaha');
     const { dispatch } = this.props;
     dispatch({
       type: 'groupDetail/saveSortResult',
@@ -72,12 +63,12 @@ export default class GroupDetail extends PureComponent {
       if (errors) return;
 
       let data = {};
-      if (operType === 'create') {
+      if (operType == 'create') {
         data = {
           ...getFieldsValue(),
           status: Codes.CODE_NORMAL
         };
-      } else if (operType === 'update') {
+      } else if (operType == 'update') {
         const { id, merchantId, status, tagList, name, code } = currentItem;
         data = {
           id,
@@ -118,9 +109,10 @@ export default class GroupDetail extends PureComponent {
   }
 
   render() {
-    const { dispatch, form: { getFieldDecorator }, groupDetail, merchant } = this.props;
+    const { dispatch, form, groupDetail, merchant } = this.props;
     const { itemLoading, currentItem, filters, modalVisible, operType } = groupDetail;
     const { tagList, name, code, merchantId } = currentItem;
+    const { getFieldDecorator } = form;
     const { list } = merchant;
 
     const tagTableColumns = [{
@@ -140,11 +132,6 @@ export default class GroupDetail extends PureComponent {
         const statusMap = {[Codes.CODE_NORMAL]: 'success', [Codes.CODE_DELETE]: 'error'};
         return (<Badge status={statusMap[record.status]} text={statuses[record.status]} />);
       },
-    // },{
-    //   title: '标签类型',
-    //   dataIndex: 'type',
-    //   key: 'type',
-    //   render: (text, record) => (<span>{tagType[record.type]}</span>),
     }];
 
     const formItemLayout = {
@@ -167,19 +154,19 @@ export default class GroupDetail extends PureComponent {
         <Spin spinning={itemLoading}>
           <Card>
             <Form layout="horizontal" onSubmit={this.handlePageSubmit}>
-              <FormItem label="标签组编号：" hasFeedback {...formItemLayout}>
+              <Form.Item label="标签组编号：" hasFeedback {...formItemLayout}>
                 {getFieldDecorator('code', {
                   rules: [{ required: true, type: 'string', message: "编号为必填项!" }],
                   initialValue: code,
                 })(<Input placeholder="请输入" />)}
-              </FormItem>
-              <FormItem label="标签组名称：" hasFeedback {...formItemLayout}>
+              </Form.Item>
+              <Form.Item label="标签组名称：" hasFeedback {...formItemLayout}>
                 {getFieldDecorator('name', {
                   rules: [{ required: true, type: 'string', message: "名称为必填项!" }],
                   initialValue: name,
                 })(<Input placeholder="请输入" />)}
-              </FormItem>
-              <FormItem label="渠道名称" hasFeedback {...formItemLayout}>
+              </Form.Item>
+              <Form.Item label="渠道名称" hasFeedback {...formItemLayout}>
                 {getFieldDecorator('merchantId', {
                   rules: [{ required: true, type: 'string', message: "渠道为必选项!" }],
                   initialValue: merchantId,
@@ -189,17 +176,17 @@ export default class GroupDetail extends PureComponent {
                     allowClear
                     placeholder="请输入渠道编号或者名称进行筛选"
                     optionFilterProp="children"
-                    disabled={operType === 'update' ? true : false}
+                    disabled={operType == 'update' ? true : false}
                     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>)}
+                    {list.map(item => <Select.Option value={item.id} key={item.id}>{`${item.code}/${item.name}`}</Select.Option>)}
                   </Select>
                 )}
-              </FormItem>
-              <FormItem label="标签排序" {...formItemLayout}>
+              </Form.Item>
+              <Form.Item label="标签排序" {...formItemLayout}>
                 <Button onClick={this.handleModalShow} disabled={!tagList || !tagList.length} type="primary" size="small" icon="edit">排序</Button>
-              </FormItem>
-              <FormItem wrapperCol={{ offset: 7, span: 12 }}>
+              </Form.Item>
+              <Form.Item wrapperCol={{ offset: 7, span: 12 }}>
                 <Table
                   locale={{
                     emptyText: <span style={{ color: "#C6D0D6" }}>&nbsp;&nbsp;<Icon type="frown-o"/>该标签组下不包含任何标签，无法排序，请先去关联标签吧!</span>
@@ -210,11 +197,11 @@ export default class GroupDetail extends PureComponent {
                   bordered
                   pagination={false}
                 />
-              </FormItem>
-              <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
+              </Form.Item>
+              <Form.Item {...submitFormLayout} style={{ marginTop: 32 }}>
                 <Button onClick={this.handlePageCancel}>取消</Button>
                 <Button type="primary" style={{ marginLeft: 35 }} htmlType="submit">提交</Button>
-              </FormItem>
+              </Form.Item>
             </Form>
             <TagSortModal
               tagList={tagList || []}

src/routes/TagGroup/Edit/modal.js

@@ -1,16 +1,9 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { Badge } from 'antd';
 import SelectModal from '../../../components/SelectModal';
 import { Codes, tagType, statuses } from '../../../utils/config';
 
 export default class TagSortModal extends PureComponent {
-  static propTypes = {
-    tagList: PropTypes.array.isRequired,
-    modalVisible: PropTypes.bool.isRequired,
-    rowKeyName: PropTypes.string.isRequired,
-  };
-
   render() {
     const { tagList, modalVisible, rowKeyName, onCancel, onOk } = this.props;
     const modalProps = {
@@ -43,11 +36,6 @@ export default class TagSortModal extends PureComponent {
           const statusMap = {[Codes.CODE_NORMAL]: 'success', [Codes.CODE_DELETE]: 'error'};
           return (<Badge status={statusMap[record.status]} text={statuses[record.status]} />);
         },
-      // },{
-      //   title: '标签类型',
-      //   dataIndex: 'type',
-      //   key: 'type',
-      //   render: (text, record) => (<span>{tagType[record.type]}</span>),
       }],
     };
 

src/routes/TagGroup/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';
@@ -14,19 +13,13 @@ import { Codes } from '../../../utils/config';
   merchant: state.merchant
 }))
 export default class TagGroup extends PureComponent {
-  static propTypes = {
-    group: PropTypes.object,
-    location: PropTypes.object,
-    dispatch: PropTypes.func,
-  };
-
   componentDidMount() {
     const { dispatch } = this.props;
     dispatch({
       type: 'merchant/query',
       payload: {
         pageNo: 1,
-        pageSize: 20,
+        pageSize: 1000,
         domain: Codes.CODE_PJ,
       }
     });
@@ -51,18 +44,6 @@ export default class TagGroup extends PureComponent {
     const searchProps = {
       field,
       keyword,
-      filterSelectProps: {
-        data: merchant.list.map(item => { return { value: item.id, name: item.name } }),
-        onSelectSearch: (value) => {
-          dispatch({
-            type: 'merchant/query',
-            payload: {
-              name: value,
-              status: Codes.CODE_NORMAL
-            }
-          });
-        },
-      },
       onSearch: (payload) => {
         if (!payload.keyword.length) {
           delete payload.field;
@@ -134,20 +115,6 @@ export default class TagGroup extends PureComponent {
           }
         });
       },
-      onRecoverItem: (payload) => {
-        dispatch({
-          type: 'group/recover',
-          payload,
-          callback: () => {
-            dispatch(
-              routerRedux.push({
-                pathname,
-                search: queryString.stringify(filters),
-              })
-            );
-          }
-        });
-      }
     };
 
     return (

src/routes/TagGroup/List/search.js

@@ -1,25 +1,14 @@
 import react, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { Button, Form, Row, Col, Icon } from 'antd';
+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, filterSelectProps } = this.props;
+    const { field, keyword, onSearch, onAdd } = this.props;
 
     const searchGroupProps = {
       field,
       keyword,
-      filterSelectProps,
       size: 'default',
       select: true,
       selectOptions: [{
@@ -30,9 +19,7 @@ export default class Search extends PureComponent {
       selectProps: {
         defaultValue: field || 'code',
       },
-      onSearch: (value) => {
-        onSearch(value);
-      },
+      onSearch: (value) => onSearch(value),
     };
 
     return (

src/routes/TagGroup/List/table.js

@@ -1,40 +1,33 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import moment from 'moment';
-import classnames from 'classnames';
-import queryString from 'query-string';
 import { Divider, Modal, Table, Menu, Icon, Badge } from 'antd';
-import AnimTableBody from '../../../components/Animation/AnimTableBody';
-import styles from './table.less';
 import { statuses, Codes } from '../../../utils/config';
 
 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 {
-          onRecoverItem({ id: record.id, status: Codes.CODE_NORMAL });
-        }
-      },
-    })
+      title: `您确定要删除该标签组?`,
+      okText: '确定',
+      cancelText: '取消',
+      onOk: () => onDeleteItem({id: record.id}),
+    });
   }
 
   render() {
-    const { curStatus, curMerchant, merchantList, onDeleteItem, onRecoverItem, onEditItem, location, pagination, ...tableProps } = this.props;
+    const { curMerchant, merchantList, onDeleteItem, onEditItem, pagination, ...tableProps } = this.props;
 
     const columns = [{
       title: '标签组编号',
       dataIndex: 'code',
       key: 'code',
+      width: '20%',
     },{
       title: '标签组名称',
       dataIndex: 'name',
       key: 'name',
+      width: '20%',
     },{
       title: '渠道名称',
       dataIndex: 'merchantId',
@@ -43,6 +36,7 @@ export default class TableList extends PureComponent {
       filters: merchantList.map(item => ({ text: item.name, value: item.id })),
       filterMultiple: false,
       filteredValue: [curMerchant],
+      width: '15%',
     },{
       title: '状态',
       dataIndex: 'status',
@@ -51,16 +45,15 @@ export default class TableList extends PureComponent {
         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: '15%',
     },{
       title: '修改时间',
       dataIndex: 'gmtModified',
       key: 'gmtModified',
       render: (text, record) => (
         <div>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</div>
-      )
+      ),
+      width: '18%',
     },{
       title: '操作',
       dataIndex: 'operation',
@@ -69,34 +62,27 @@ export default class TableList extends PureComponent {
         <div>
           <a onClick={() => onEditItem(record)}>编辑</a>
           <Divider type="vertical" />
-          <a onClick={() => this.handleOperateItem(record)}>{record.status === Codes.CODE_NORMAL ? '删除' : '恢复'}</a>
+          <a onClick={() => this.handleDeleteItem(record)}>删除</a>
         </div>
-      )
+      ),
+      width: '12%',
     }];
 
     // 数据table列表表头的筛选按钮点击重置后status与domain值为空，此时删除该参数
     columns.map(item => {
-      item.dataIndex === 'status' && !curStatus ? delete item.filteredValue : null;
       item.dataIndex === 'merchantId' && !curMerchant ? delete item.filteredValue : null;
     });
 
     // 配置分页
     tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
 
-    // 添加动画
-    const AnimationTableBody = (props) => (<AnimTableBody {...props}/>);
-
     return (
       <Table
         simple
         bordered
         { ...tableProps }
         columns={columns}
-        className={classnames({ [styles.table]: true, [styles.motion]: true })}
         rowKey={record => record.id}
-        components={{
-          body: { wrapper: AnimationTableBody }
-        }}
       />
     );
   }

src/routes/TagGroup/List/table.less

@@ -1,74 +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: 17%;
-        }
-
-        &:nth-child(2) {
-          width: 17%;
-        }
-
-        &:nth-child(3) {
-          width: 17%;
-        }
-
-        &:nth-child(4) {
-          width: 16%;
-        }
-
-        &:nth-child(5) {
-          width: 18%;
-        }
-
-        &: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;
-          }
-        }
-      }
-    }
-  }
-}

src/theme.js

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

src/utils/config.js

@@ -58,8 +58,8 @@ module.exports = {
   },
   // 状态类型
   statuses: {
-    [Codes.CODE_NORMAL]: '使用中',
-    [Codes.CODE_DELETE]: '已删除',
+    [Codes.CODE_NORMAL]: '正常',
+    [Codes.CODE_DELETE]: '删除',
   },
   // 商品出售状态
   itemStatuses: {