user Multiple Option

src/index.html

@@ -14,6 +14,18 @@
 
 <body>
   <div id="root"></div>
+  <script type="text/javascript">
+    (function() {
+      var __oldConsoleError = window.console.error.bind(console)
+      window.console.error = function(message, b) {
+        if (message === "Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead." ||
+          "Warning: A Component: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.") {
+          return false
+        }
+        __oldConsoleError(message)
+      }
+    })()
+  </script>
   <script src="/index.js"></script>
 </body>
 

src/mock/user.js

@@ -163,6 +163,13 @@ module.exports = {
     })
   },
 
+  [`DELETE ${apiPrefix}/users`] (req, res) {
+    const { ids } = req.body
+    database = database.filter((item) => !ids.some(_ => _ === item.id))
+    res.status(204).end()
+  },
+
+
   [`POST ${apiPrefix}/user`] (req, res) {
     const newData = req.body
     newData.createTime = Mock.mock('@now')

src/models/user.js

@@ -1,7 +1,9 @@
 import { create, remove, update } from '../services/user'
-import { query } from '../services/users'
+import * as usersService from '../services/users'
 import { parse } from 'qs'
 
+const { query } = usersService
+
 export default {
 
   namespace: 'user',
@@ -11,6 +13,7 @@ export default {
     currentItem: {},
     modalVisible: false,
     modalType: 'create',
+    selectedRowKeys: [],
     isMotion: localStorage.getItem('antdAdminUserIsMotion') === 'true',
     pagination: {
       showSizeChanger: true,
@@ -54,9 +57,21 @@ export default {
       }
     },
 
-    *'delete' ({ payload }, { call, put }) {
+    *'delete' ({ payload }, { call, put, select }) {
       const data = yield call(remove, { id: payload })
+      const { selectedRowKeys } = yield select(_ => _.user)
       if (data.success) {
+        yield put({ type: 'updateState', payload: { selectedRowKeys: selectedRowKeys.filter(_ => _ !== payload) } })
+        yield put({ type: 'query' })
+      } else {
+        throw data
+      }
+    },
+
+    *'multiDelete' ({ payload }, { call, put }) {
+      const data = yield call(usersService.remove, payload)
+      if (data.success) {
+        yield put({ type: 'updateState', payload: { selectedRowKeys: [] } })
         yield put({ type: 'query' })
       } else {
         throw data
@@ -99,6 +114,13 @@ export default {
         } }
     },
 
+    updateState (state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      }
+    },
+
     showModal (state, action) {
       return { ...state, ...action.payload, modalVisible: true }
     },

src/routes/user/List.js

@@ -90,7 +90,7 @@ const List = ({ onDeleteItem, onEditItem, isMotion, location, ...tableProps }) =
         {...tableProps}
         className={classnames({ [styles.table]: true, [styles.motion]: isMotion })}
         bordered
-        scroll={{ x: 1200 }}
+        scroll={{ x: 1250 }}
         columns={columns}
         simple
         rowKey={record => record.id}

src/routes/user/List.less

@@ -17,11 +17,11 @@
       .ant-table-tbody > tr > td,
       .ant-table-thead > tr > th {
         &:nth-child(1) {
-          width: 6%;
+          width: 5%;
         }
 
         &:nth-child(2) {
-          width: 8%;
+          width: 6%;
         }
 
         &:nth-child(3) {
@@ -29,7 +29,7 @@
         }
 
         &:nth-child(4) {
-          width: 6%;
+          width: 8%;
         }
 
         &:nth-child(5) {
@@ -37,22 +37,26 @@
         }
 
         &:nth-child(6) {
-          width: 8%;
+          width: 6%;
         }
 
         &:nth-child(7) {
-          width: 16%;
+          width: 8%;
         }
 
         &:nth-child(8) {
-          width: 20%;
+          width: 15%;
         }
 
         &:nth-child(9) {
-          width: 14%;
+          width: 17%;
         }
 
         &:nth-child(10) {
+          width: 13%;
+        }
+
+        &:nth-child(11) {
           width: 8%;
         }
       }

src/routes/user/index.js

@@ -2,12 +2,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { routerRedux } from 'dva/router'
 import { connect } from 'dva'
+import { Row, Col, Button, Popconfirm } from 'antd'
 import List from './List'
 import Filter from './Filter'
 import Modal from './Modal'
 
 const User = ({ location, dispatch, user, loading }) => {
-  const { list, pagination, currentItem, modalVisible, modalType, isMotion } = user
+  const { list, pagination, currentItem, modalVisible, modalType, isMotion, selectedRowKeys } = user
   const { pageSize } = pagination
 
   const modalProps = {
@@ -62,6 +63,17 @@ const User = ({ location, dispatch, user, loading }) => {
         },
       })
     },
+    rowSelection: {
+      selectedRowKeys,
+      onChange: (keys) => {
+        dispatch({
+          type: 'user/updateState',
+          payload: {
+            selectedRowKeys: keys,
+          },
+        })
+      },
+    },
   }
 
   const filterProps = {
@@ -103,9 +115,29 @@ const User = ({ location, dispatch, user, loading }) => {
     },
   }
 
+  const handleDeleteItems = () => {
+    dispatch({
+      type: 'user/multiDelete',
+      payload: {
+        ids: selectedRowKeys,
+      },
+    })
+  }
+
   return (
     <div className="content-inner">
       <Filter {...filterProps} />
+      {
+         selectedRowKeys.length > 0 &&
+           <Row style={{ marginBottom: 24, textAlign: 'right', fontSize: 13 }}>
+             <Col>
+               {`Selected ${selectedRowKeys.length} items `}
+               <Popconfirm title={'Are you sure delete these items?'} placement="left" onConfirm={handleDeleteItems}>
+                 <Button type="primary" size="large" style={{ marginLeft: 8 }}>Remove</Button>
+               </Popconfirm>
+             </Col>
+           </Row>
+      }
       <List {...listProps} />
       {modalVisible && <Modal {...modalProps} />}
     </div>

src/services/users.js

@@ -9,3 +9,11 @@ export async function query (params) {
     data: params,
   })
 }
+
+export async function remove (params) {
+  return request({
+    url: users,
+    method: 'delete',
+    data: params,
+  })
+}