feats

src/layouts/SearchList/SearchForm.jsx

@@ -1,32 +1,70 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import createForm from '@zjxpcyc/xrc-form2'
+import { Button } from 'antd'
 
 const Form = createForm()
 
+function clearProperties (o) {
+  return Object.keys(o).reduce((acc, k) => {
+    return {
+      ...acc,
+      [`${k}`]: undefined,
+    }
+  }, {})
+}
+
 export default class SearchForm extends PureComponent {
   static propTypes = {
     storage: PropTypes.object,
     onSubmit: PropTypes.func,
+    onCancel: PropTypes.func,
     configs: PropTypes.object,
   }
 
-  form = null
-  storage = this.props.storage
+  wrapperForm = null
+  storage = this.props.storage || {}
 
   componentDidMount() {
-    const conditions = this.storage.get('form.values')
+    const conditions = this.storage.get('conditions')
 
-    if (this.form && conditions) {
-      this.form.setFieldsValue(conditions)
+    if (this.wrapperForm && conditions) {
+      this.wrapperForm.props.form.setFieldsValue(conditions)
     }
   }
 
+  handleCancel = () => {
+    const conditions = this.storage.get('conditions') || {}
+    this.storage.set('conditions', {})
+
+    if (this.wrapperForm) {
+      this.wrapperForm.props.form.setFieldsValue(clearProperties(conditions))
+    }
+
+    if (this.props.onCancel) {
+      this.props.onCancel()
+    }
+  }
+
+  wrapperFields = (fields) => {
+    return [
+      ...fields,
+      {
+        action: true,
+        render: (props) => (<Button htmlType="submit" type="primary">搜索</Button>)
+      },
+      {
+        action: true,
+        render: (props) => (<Button htmlType="button" onClick={this.handleCancel} style={{ marginLeft: '16px' }}>重置</Button>)
+      },
+    ]
+  }
+
   render() {
     const { fields, ...leftProps } = this.props.configs || {}
 
     return (
-      <Form wrappedComponentRef={f => this.form = f} layout="inline" fields={fields} onSubmit={this.props.onSubmit} {...leftProps} />
+      <Form wrappedComponentRef={f => this.wrapperForm = f} submitBtn={false} cancelBtn={false} layout="inline" fields={this.wrapperFields(fields)} onSubmit={this.props.onSubmit} {...leftProps} />
     )
   }
 }

src/layouts/SearchList/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { notification } from 'antd'
+import { Spin, notification } from 'antd'
 
 import SearchForm from './SearchForm'
 import SearchBody from './SearchBody'
@@ -19,26 +19,39 @@ class SearchList extends React.PureComponent {
     body: PropTypes.object,
     pagination: PropTypes.object,
     service: PropTypes.func,
+    reServe: PropTypes.func,
   }
 
   state = {
-    defaultStorage: getStorageBuilder(window.Math.random().toString(36).substr(2)),
+    defaultStorage: this.props.storage || getStorageBuilder('PAGE-SearchList'),
     dataSource: [],
-    conditions: {},
+    conditions: this.getStorage().get('conditions') || {},
+    loadding: false,
     pageConfig: {
-      current: 1,
-      pageSize: 10,
+      ...(this.getStorage().get('pagination') || { current: 1, pageSize: 10 }),
       total: 0,
     },
   }
 
-  handlePageChange = (page, pageSize) => {
+  componentDidMount () {
+    if (this.props.reServe) {
+      this.props.reServe(this.queryData)
+    }
+  }
+  
+  getStorage() {
+    return this.props.storage || this.state.defaultStorage
+  }
+
+  handlePageChange = (current, pageSize) => {
+    this.getStorage().set('pagination', { current, pageSize: 10 })
+
     this.setState(
       (state) => ({
         ...state,
         pageConfig: {
           ...state.pageConfig,
-          current: page,
+          current,
           pageSize,
         }
       }),
@@ -46,16 +59,32 @@ class SearchList extends React.PureComponent {
     )
   }
 
-  handleSearchSubmit = (conditions) => {
+  repondToSearch = (conditions) => {
+    // 查询提交会重置页码
+    const { pageConfig } = this.state
+    const newPageConfig = { ...pageConfig, current: 1, total: 0 }
+
+    this.getStorage().set('conditions', conditions)
+    this.getStorage().set('pagination', newPageConfig)
+
     this.setState(
       (state) => ({
         ...state,
         conditions,
+        pageConfig: newPageConfig,
       }),
       this.queryData,
     )
   }
 
+  handleSearchSubmit = (conditions) => {
+    this.repondToSearch(conditions)
+  }
+
+  handleSearchCancel = () => {
+    this.repondToSearch({})
+  }
+
   queryData = () => {
     if (this.props.service) {
       const pageConfigProps = this.props.pagination || {}
@@ -65,6 +94,8 @@ class SearchList extends React.PureComponent {
 
       const { conditions = {}, pageConfig } = this.state
 
+      this.setState({ loadding: true })
+
       this.props.service({
         ...conditions,
         ...{
@@ -76,6 +107,7 @@ class SearchList extends React.PureComponent {
 
         this.setState((state) => ({
           ...state,
+          loadding: false,
           dataSource,
           pageConfig: {
             ...state.pageConfig,
@@ -83,6 +115,7 @@ class SearchList extends React.PureComponent {
           },
         }))
       }).catch((e) => {
+        this.setState({ loadding: false })
         console.error(e)
       })
     }
@@ -101,16 +134,18 @@ class SearchList extends React.PureComponent {
       ...this.state.pageConfig,
     }
 
-    const storage = this.props.storage || this.state.defaultStorage
+    const storage = this.getStorage()
 
     return (
       <div className={Style['search-list']}>
         <div className={Style['head']}>
-          <SearchForm storage={storage} onSubmit={this.handleSearchSubmit} configs={this.props.search} />
+          <SearchForm storage={storage} onSubmit={this.handleSearchSubmit} onCancel={this.handleSearchCancel} configs={this.props.search} />
         </div>
         <div className={Style['body']}>
           <BodyHeader storage={storage} title={this.props.title} actions={this.props.actions} />
-          <SearchBody storage={storage} dataSource={this.state.dataSource} configs={this.props.body} />
+          <Spin spinning={this.state.loadding}>
+            <SearchBody storage={storage} dataSource={this.state.dataSource} configs={this.props.body} />
+          </Spin>
           <BodyPagination storage={storage} onChange={this.handlePageChange} configs={pageConfig} />
         </div>
       </div>
@@ -119,7 +154,7 @@ class SearchList extends React.PureComponent {
 }
 
 function withSearchList (configs = {}) {
-  const cacheKey = `${configs.name || 'SearchList'}-${window.Math.random().toString(36).substr(2)}`
+  const cacheKey = `PAGE-${configs.name || 'SearchList'}`
   const storage = getStorageBuilder(cacheKey)
 
   return React.forwardRef((props, ref) => {

src/layouts/SearchList/style.less

@@ -8,6 +8,12 @@
   }
 
   .body {
+    &::after {
+      content: '';
+      clear: both;
+      display: block;
+    }
+
     .body-header {
       display: flex;
       align-items: center;

src/layouts/SearchList/utils.js

@@ -16,14 +16,16 @@ export function getStorage(k) {
   return window.JSON.parse(str);
 }
 
-export function getStorageBuilder(key, initData = {}) {
-  setStorage(key, initData)  
+export function getStorageBuilder(key, initData) {
+  if (initData) {
+    setStorage(key, initData)  
+  }
 
   return {
     set: (k, v) => {
       const data = getStorage(key) || {}
 
-      setStorage({ ...data, [`${k}`]: v })
+      setStorage(key, { ...data, [`${k}`]: v })
     },
 
     get: (k) => {

src/pages/news/type/NewsType.jsx

@@ -10,10 +10,12 @@ import { fetchList, apis } from '../../../utils/request'
 import { withSearchList } from '@/layouts/SearchList'
 
 const { Option } = Select;
-const SearchList = withSearchList()
+const SearchList = withSearchList({ name: 'NEWSTYPE' })
 const getNewsTypeList = fetchList(apis.newsType.list)
 
 export default function NewsType(props) {
+  let queryData = null
+
   const conditions = [
     {
       name: 'buildingId',
@@ -57,8 +59,13 @@ export default function NewsType(props) {
       ),
     },
   ];
-  
 
+  const handleReServe = (callback) => {
+    queryData = callback
+    // 立即调用一次
+    queryData()
+  }
+  
   const renderActions = () => {
     return (
       <AuthButton name="admin.taNewsType.post" noRight={null}>
@@ -67,14 +74,17 @@ export default function NewsType(props) {
     );
   }
 
+  const rowKey = r => r.newsTypeId
+
   return (
     <SearchList
       title="资讯类型"
       actions={renderActions()}
       service={getNewsTypeList}
       search={{ fields: conditions }}
-      body={{ columns }}
-      pagination={{}}
+      reServe={handleReServe}
+      body={{ columns, rowKey }}
+      pagination={{ keyOfPageNumber: 'pageNum' }}
     />
   )
 }

src/utils/request.js

@@ -117,11 +117,10 @@ request.interceptors.response.use(async (response, options) => {
   }
 });
 
-
 const fetch = api => options => request(api.url, {...api, ...options || {}})
 
 const fetchList = api => options => new Promise((resolve, reject) => {
-  request(api.url, {...api, ...options || {}}).then((res) => {
+  request(api.url, {...api, params: options }).then((res) => {
     const { records, ...page  } = res || {}
     resolve([records, page])
   }).catch(reject)