add yansen branch

src/layouts/SearchList/BodyBodyPagination.jsx

@@ -0,0 +1,34 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { Pagination } from 'antd'
+
+import Style from './style.less'
+
+export default class BodyPagination extends PureComponent {
+  static propTypes = {
+    storage: PropTypes.func,
+    onChange: PropTypes.func,
+    configs: PropTypes.object,
+  }
+
+  // storage = this.props.storage
+
+  handleChange = (page, pageSize) => {
+    if (this.props.onChange) {
+      this.props.onChange(page, pageSize)
+    }
+  }
+
+  render() {
+    return (
+      <div className={Style['body-paged']}>
+        <Pagination
+          showSizeChanger
+          onChange={this.handleChange}
+          onShowSizeChange={this.handleChange} 
+          {...(this.props.configs || {})}
+        />
+      </div>
+    )
+  }
+}

src/layouts/SearchList/BodyHeader.jsx

@@ -0,0 +1,17 @@
+import React, { PureComponent } from 'react'
+import Style from './style.less';
+
+export default class BodyHeader extends PureComponent {
+  render() {
+    return (
+      <div className={Style['body-header']}>
+        <div className={Style['body-header-title']}>
+          {this.props.title}
+        </div>
+        <div className={Style['body-header-action']}>
+          {this.props.actions}
+        </div>
+      </div>
+    )
+  }
+}

src/layouts/SearchList/SearchBody.jsx

@@ -0,0 +1,28 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+import { Table } from 'antd'
+import { isFunction } from './utils'
+
+export default class SearchBody extends PureComponent {
+  static propTypes = {
+    storage: PropTypes.func,
+    dataSource: PropTypes.array,
+    configs: PropTypes.object,
+  }
+
+  // storage = this.props.storage
+
+  render() {
+    const { dataSource, configs } = this.props
+    const { render, ...leftProps } = configs || {}
+
+    if (isFunction(render)) {
+      return render(dataSource)
+    }
+
+    return (
+      <Table dataSource={dataSource} {...leftProps} />
+    )
+  }
+}

src/layouts/SearchList/SearchForm.jsx

@@ -0,0 +1,12 @@
+import React, { PureComponent } from 'react'
+
+export default class SearchForm extends PureComponent {
+  render() {
+    return (
+      <div>
+        
+      </div>
+    )
+  }
+}
+

src/layouts/SearchList/index.jsx

@@ -0,0 +1,116 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { notification } from 'antd'
+
+import SearchForm from './SearchForm'
+import SearchBody from './SearchBody'
+import BodyHeader from './BodyHeader'
+import BodyPagination from './BodyBodyPaginationation'
+import { getStorageBuilder } from './utils'
+import Style from './style.less'
+
+class SearchList extends React.PureComponent {
+  static propTypes = {
+    title: PropTypes.element,
+    actions: PropTypes.element,
+    search: PropTypes.object,
+    body: PropTypes.object,
+    pagination: PropTypes.object,
+  }
+
+  storage = getStorageBuilder(window.Math.random().toString(36).substr(2))
+
+  state = {
+    dataSource: [],
+    conditions: {},
+    pageConfig: {
+      current: 1,
+      pageSize: 10,
+      total: 0,
+    },
+  }
+
+  handlePageChange = (page, pageSize) => {
+    this.setState(
+      (state) => ({
+        ...state,
+        pageConfig: {
+          ...pageConfig,
+          current: page,
+          pageSize,
+        }
+      }),
+      this.queryData,
+    )
+  }
+
+  handleSearchSubmit = (conditions) => {
+    this.setState(
+      (state) => ({
+        ...state,
+        conditions,
+      }),
+      this.queryData,
+    )
+  }
+
+  queryData = () => {
+    if (this.props.service) {
+      const pageConfigProps = this.props.pagination || {}
+      const keyOfPageNumber = pageConfigProps.keyOfPageNumber || 'pageNumber'
+      const keyOfPageSize= pageConfigProps.keyOfPageSize || 'pageSize'
+      const keyOfTotalSize= pageConfigProps.keyOfTotalSize || 'total'
+
+      const { conditions = {}, pageConfig } = this.state
+
+      this.props.service({
+        ...conditions,
+        ...{
+          [`${keyOfPageNumber}`]: pageConfig.current,
+          [`${keyOfPageSize}`]: pageConfig.pageSize,
+        },
+      }).then((res) => {
+        const [dataSource, pageParams] = res || []
+
+        this.setState((state) => ({
+          ...state,
+          dataSource,
+          pageConfig: {
+            ...pageConfig,
+            total: pageParams[keyOfTotalSize],
+          },
+        }))
+      }).catch((e) => {
+        console.error(e)
+      })
+    }
+  }
+
+  render() {    
+    const {
+      keyOfPageNumber,
+      keyOfPageSize,
+      keyOfTotalSize,
+      ...leftPageParams,
+    } = this.props.pagination || {}
+
+    const pageConfig = {
+      ...leftPageParams,
+      ...this.state.pageConfig,
+    }
+
+    return (
+      <div className={Style['search-list']}>
+        <div className={Style['head']}>
+          <SearchForm storage={storage} onSubmit={this.handleSearchSubmit} 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} />
+          <BodyPagination storage={storage} onChange={this.handlePageChange} configs={pageConfig} />
+        </div>
+      </div>
+    )
+  }
+}

src/layouts/SearchList/style.less

@@ -0,0 +1,40 @@
+
+.search-list {
+  .head {
+    margin-bottom: 24px;
+    padding: 16px;
+    overflow: hidden;
+    background: #fff;
+  }
+
+  .body {
+    .body-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 64px;
+      padding: 0 24px;
+      line-height: 64px;
+
+      .body-header-title {
+        flex: 1 1;
+        color: #000;
+        font-size: 16px;
+        line-height: 24px;
+      }
+
+      .body-header-action {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+
+    }
+
+    .body-paged {
+      padding: 0 24px;
+      float: right;
+      margin: 16px 0;
+    }
+  }
+}

src/layouts/SearchList/utils.js

@@ -0,0 +1,34 @@
+
+export function isFunction(fn) {
+  return typeof fn === 'function'
+}
+
+export function setStorage(k, v) {
+  if (typeof v !== 'object') return
+
+  window.localStorage.setItem(k, window.JSON.stringify(v))
+}
+
+export function getStorage(k) {
+  const str = window.localStorage.getItem(k);
+  if (!str) return;
+
+  return window.JSON.parse(str);
+}
+
+export function getStorageBuilder(key, initData = {}) {
+  setStorage(key, initData)  
+
+  return {
+    set: (k, v) => {
+      const data = getStorage(key) || {}
+
+      setStorage({ ...data, [`${k}`]: v })
+    },
+
+    get: (k) => {
+      const data = getStorage(key) || {}
+      return data[k]
+    }
+  }
+}