filters

src/components/FilterItem/FilterItem.js

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

src/components/FilterItem/FilterItem.less

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

src/components/FilterItem/package.json

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

src/components/index.js

@@ -3,6 +3,7 @@ import DropOption from './DropOption'
 import Iconfont from './Iconfont'
 import Search from './Search'
 import Editor from './Editor'
+import FilterItem from './FilterItem'
 import * as Layout from './Layout/index.js'
 
 import layer from './layer'
@@ -14,5 +15,6 @@ export {
   Iconfont,
   Search,
   Editor,
+  FilterItem,
   layer,
  }

src/mock/users.js → src/mock/user.js

@@ -4,10 +4,10 @@ const config = require('../utils/config')
 const { apiPrefix } = config
 
 let usersListData = Mock.mock({
-  'data|100': [
+  'data|80-100': [
     {
       id: '@id',
-      name: '@cname',
+      name: '@name',
       nickName: '@last',
       phone: /^1[34578]\d{9}$/,
       'age|11-99': 1,
@@ -54,7 +54,6 @@ const adminUsers = [
   },
 ]
 
-
 const queryArray = (array, key, keyAlias = 'key') => {
   if (!(array instanceof Array)) {
     return null
@@ -94,16 +93,16 @@ module.exports = {
       })
       res.json({ success: true, message: 'Ok' })
     } else {
-      res.status(400).send({ message: 'Bad Request' })
+      res.status(400).end()
     }
   },
 
   [`GET ${apiPrefix}/user/logout`] (req, res) {
     res.clearCookie('token')
-    res.status(200).send({ message: 'OK' })
+    res.status(200).end()
   },
 
-  [`GET ${apiPrefix}/userInfo`] (req, res) {
+  [`GET ${apiPrefix}/user`] (req, res) {
     const cookie = req.headers.cookie || ''
     const cookies = qs.parse(cookie.replace(/\s/g, ''), { delimiter: ';' })
     const response = {}
@@ -174,11 +173,13 @@ module.exports = {
 
   [`DELETE ${apiPrefix}/user/:id`] (req, res) {
     const { id } = req.params
-    if (!id) {
-      res.status(400).end()
+    const data = queryArray(database, id, 'id')
+    if (data) {
+      database = database.filter((item) => item.id !== id)
+      res.status(204).end()
+    } else {
+      res.status(404).json(NOTFOUND)
     }
-    database = database.filter((item) => item.id !== id)
-    res.status(204).end()
   },
 
   [`PATCH ${apiPrefix}/user/:id`] (req, res) {

src/models/app.js

@@ -1,4 +1,4 @@
-import { getUserInfo, logout } from '../services/app'
+import { query, logout } from '../services/app'
 import { routerRedux } from 'dva/router'
 import { parse } from 'qs'
 import { config } from '../utils'
@@ -27,7 +27,7 @@ export default {
     *queryUser ({
       payload,
     }, { call, put }) {
-      const data = yield call(getUserInfo, parse(payload))
+      const data = yield call(query, parse(payload))
       if (data.success && data.user) {
         yield put({
           type: 'queryUserSuccess',

src/routes/request/index.js

@@ -11,11 +11,11 @@ import {
   Button,
 } from 'antd'
 const { api, baseURL } = config
-const { userInfo, dashboard, users, userLogin, user } = api
+const { dashboard, users, userLogin, user } = api
 
 const requestOptions = [
   {
-    url: baseURL + userInfo,
+    url: baseURL + user.replace('/:id', ''),
     desc: 'intercept request by mock.js',
   },
   {

src/routes/user/UserFilter.js

@@ -1,50 +1,132 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Form, Button, Row, Col, Switch } from 'antd'
-import { Search } from '../../components'
+import moment from 'moment'
+import { FilterItem } from '../../components'
+import { Form, Button, Row, Col, DatePicker, Input, Cascader, Switch } from 'antd'
+import city from '../../utils/city'
+
+const Search = Input.Search
+const { RangePicker } = DatePicker
+
+const ColProps = {
+  xs: 24,
+  sm: 12,
+  md: 8,
+  lg: 6,
+  xl: 48,
+  style: {
+    marginBottom: 16,
+  },
+}
+
+const TwoColProps = {
+  ...ColProps,
+  xl: 96,
+}
 
 const UserFilter = ({
-  field,
-  keyword,
-  onSearch,
   onAdd,
   isMotion,
   switchIsMotion,
+  onFilterChange,
+  filter,
+  form: {
+    getFieldDecorator,
+    getFieldsValue,
+    setFieldsValue,
+  },
 }) => {
-  const searchGroupProps = {
-    field,
-    keyword,
-    size: 'large',
-    select: true,
-    selectOptions: [{ value: 'name', name: '姓名' }, { value: 'address', name: '地址' }],
-    selectProps: {
-      defaultValue: field || 'name',
-    },
-    onSearch: (value) => {
-      onSearch(value)
-    },
+  const handleFields = (fields) => {
+    const { createTime } = fields
+    if (createTime.length) {
+      fields.createTime = [createTime[0].format('YYYY-MM-DD'), createTime[1].format('YYYY-MM-DD')]
+    }
+    return fields
+  }
+
+  const handleSubmit = () => {
+    let fields = getFieldsValue()
+    fields = handleFields(fields)
+    console.log(fields)
+    onFilterChange(fields)
+  }
+
+  const handleReset = () => {
+    const fields = getFieldsValue()
+    for (let item in fields) {
+      if ({}.hasOwnProperty.call(fields, item)) {
+        if (fields[item] instanceof Array) {
+          fields[item] = []
+        } else {
+          fields[item] = undefined
+        }
+      }
+    }
+    setFieldsValue(fields)
+    handleSubmit()
   }
+
+  const handleChange = (key, values) => {
+    let fields = getFieldsValue()
+    fields[key] = values
+    fields = handleFields(fields)
+    onFilterChange(fields)
+  }
+  const { name, address } = filter
+
+  let initialCreateTime = []
+  if (filter.createTime && filter.createTime[0]) {
+    initialCreateTime[0] = moment(filter.createTime[0])
+  }
+  if (filter.createTime && filter.createTime[1]) {
+    initialCreateTime[1] = moment(filter.createTime[1])
+  }
+
   return (
     <Row gutter={24}>
-      <Col lg={8} md={12} sm={16} xs={24} style={{ marginBottom: 16 }}>
-        <Search {...searchGroupProps} />
+      <Col {...ColProps}>
+        {getFieldDecorator('name', { initialValue: name })(<Search placeholder="Search Name" size="large" onSearch={handleSubmit} />)}
+      </Col>
+      <Col {...ColProps}>
+        {getFieldDecorator('address', { initialValue: address })(
+          <Cascader
+            size="large"
+            style={{ width: '100%' }}
+            options={city}
+            placeholder="Please pick an address"
+            onChange={handleChange.bind(null, 'address')}
+          />)}
+      </Col>
+      <Col {...ColProps}>
+        <FilterItem label="Createtime">
+          {getFieldDecorator('createTime', { initialValue: initialCreateTime })(
+            <RangePicker style={{ width: '100%' }} size="large" onChange={handleChange.bind(null, 'createTime')} />
+          )}
+        </FilterItem>
       </Col>
-      <Col lg={{ offset: 8, span: 8 }} md={12} sm={8} xs={24} style={{ marginBottom: 16, textAlign: 'right' }}>
-        {/* <Switch style={{ marginRight: 16 }} defaultChecked={isMotion} onChange={switchIsMotion} checkedChildren={'动画开'} unCheckedChildren={'动画关'} /> */}
-        <Button size="large" type="ghost" onClick={onAdd}>添加</Button>
+      <Col {...TwoColProps}>
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <div >
+            <Button type="primary" size="large" className="margin-right" onClick={handleSubmit}>Search</Button>
+            <Button size="large" className="margin-right" onClick={handleReset}>Reset</Button>
+          </div>
+          <div>
+            <Switch style={{ marginRight: 16 }} defaultChecked={isMotion} onChange={switchIsMotion} checkedChildren={'动画开'} unCheckedChildren={'动画关'} />
+            <Button size="large" type="ghost" onClick={onAdd}>Create</Button>
+          </div>
+        </div>
       </Col>
     </Row>
   )
 }
 
 UserFilter.propTypes = {
-  form: PropTypes.object.isRequired,
-  onSearch: PropTypes.func,
   onAdd: PropTypes.func,
-  field: PropTypes.string,
-  keyword: PropTypes.string,
   isMotion: PropTypes.bool,
   switchIsMotion: PropTypes.func,
+  form: PropTypes.object,
+  filter: PropTypes.object,
+  onFilterChange: PropTypes.func,
 }
 
 export default Form.create()(UserFilter)

src/routes/user/UserList.js

@@ -15,7 +15,7 @@ function list ({ loading, dataSource, pagination, onPageChange, onDeleteItem, on
       onEditItem(record)
     } else if (e.key === '2') {
       confirm({
-        title: '您确定要删除这条记录吗?',
+        title: 'Are you sure delete this record?',
         onOk () {
           onDeleteItem(record.id)
         },
@@ -25,51 +25,50 @@ function list ({ loading, dataSource, pagination, onPageChange, onDeleteItem, on
 
   const columns = [
     {
-      title: '头像',
+      title: 'Avatar',
       dataIndex: 'avatar',
       key: 'avatar',
       width: 64,
       className: styles.avatar,
       render: (text) => <img alt={'avatar'} width={24} src={text} />,
     }, {
-      title: '姓名',
+      title: 'Name',
       dataIndex: 'name',
       key: 'name',
       render: (text, record) => <Link to={`user/${record.id}`}>{text}</Link>,
     }, {
-      title: '昵称',
+      title: 'NickName',
       dataIndex: 'nickName',
       key: 'nickName',
     }, {
-      title: '年龄',
+      title: 'Age',
       dataIndex: 'age',
       key: 'age',
-      render: (text) => <span>{text}岁</span>,
     }, {
-      title: '性别',
+      title: 'Gender',
       dataIndex: 'isMale',
       key: 'isMale',
       render: (text) => <span>{text
-            ? '男'
-            : '女'}</span>,
+            ? 'Male'
+            : 'Female'}</span>,
     }, {
-      title: '电话',
+      title: 'Phone',
       dataIndex: 'phone',
       key: 'phone',
     }, {
-      title: '邮箱',
+      title: 'Email',
       dataIndex: 'email',
       key: 'email',
     }, {
-      title: '住址',
+      title: 'Address',
       dataIndex: 'address',
       key: 'address',
     }, {
-      title: '创建时间',
+      title: 'CreateTime',
       dataIndex: 'createTime',
       key: 'createTime',
     }, {
-      title: '操作',
+      title: 'Operation',
       key: 'operation',
       width: 100,
       render: (text, record) => {