feats

src/components/PaginationWrapper/index.jsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Pagination } from 'antd';
+import classNames from 'classnames'
+import { useQuery } from '../../utils/hooks';
+import { ObjSpEqual } from '../../utils/utils'
+import Styles from './style.less'
+
+class PaginationWrapper extends React.PureComponent {
+
+  state = {
+    data: {
+      current: 1,
+      total: 0,
+      pages: 0,
+    },
+    loadding: false,
+  }
+
+  componentDidMount () {
+    this.fetchData(1)
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!ObjSpEqual(prevProps.params, this.props.params)) {
+      this.fetchData(1)
+    }
+  } 
+
+  fetchData = (page) => {
+    this.setState({ loadding: true })
+    
+    const requestParams = this.props.params || {}
+    this.props.request({
+      ...requestParams,
+      params: {
+        pageNum: page,              // 有的接口是 pageNum
+        pageNumber: page,  // 有的接口是 pageNumber
+        ...(requestParams.params || {}),
+      }
+    }).then((res) => {
+      this.setState({ loadding: false, data: res })
+    })
+  }
+
+  handlePageChange = (page) => {
+    this.fetchData(page)
+  }
+
+  render() {
+    const { className, style, bodyClass, footerClass, render } = this.props
+    const { data } = this.state
+
+    return (
+      <div className={classNames(Styles['pg-wrapper'], className)} style={style}>
+        <div className={classNames(Styles.body, bodyClass)}>
+          {render(data)}
+        </div>
+        <div className={classNames(Styles.footer, footerClass)}>
+          <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={this.handlePageChange} current={data.current}/>
+        </div>
+      </div>
+    )
+  }
+}
+
+PaginationWrapper.propTypes = {
+  request: PropTypes.func.isRequired,
+  render: PropTypes.func.isRequired,
+  params: PropTypes.object,
+  className: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.array,
+    PropTypes.object,
+  ]),
+  bodyClass: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.array,
+    PropTypes.object,
+  ]),
+  footerClass: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.array,
+    PropTypes.object,
+  ]),
+  style: PropTypes.object,
+}
+
+// /**
+//  * 分页封装
+//  * @param {page, params, request, render, className, style, bodyClass, footerClass} props 
+//  */
+// function PaginationWrapper(props) {
+//   const defaultPage = props.page || 1
+//   const [pageNum, setPage] = useState(defaultPage)
+//   const requestParams = props.params || {}
+//   const [data = {}, loading, err] = useQuery({ ...requestParams, params: { ...(requestParams.params || {}), pageNum, pageNumber: pageNum }}, props.request)
+
+//   // if (typeof props.setData === 'function') {
+//   //   props.setData(data)
+//   // }
+
+//   console.log('------render PaginationWrapper-------', pageNum, data, loading)
+
+//   return (
+//     <div className={classNames(Styles['pg-wrapper'], props.className)} style={props.style}>
+//       <div className={classNames(Styles.body, props.bodyClass)}>
+//         {props.render(data)}
+//       </div>
+//       <div className={classNames(Styles.footer, props.footerClass)}>
+//         <Pagination showQuickJumper defaultCurrent={defaultPage} total={data.total} onChange={pg => setPage(pg)} current={data.current}/>
+//       </div>
+//     </div>
+//   )
+// }
+
+export default PaginationWrapper

src/components/PaginationWrapper/style.less

@@ -0,0 +1,10 @@
+.pg-wrapper {
+  .body {}
+
+  .footer {
+    margin-top: 30px;
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+  }
+}

src/components/SearchForm/index.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTyps from 'prop-types';
+import { Form, Button } from 'antd';
+
+function isFunc(fn) { return typeof fn === 'function' };
+
+class SearchForm extends React.PureComponent {
+  handleSubmit = e => {
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err && isFunc(this.props.onSearch)) {
+        this.props.onSearch(values)
+        return
+      }
+
+      if (err) {
+        console.error(err)
+        if (isFunc(this.props.onError)) {
+          this.props.onError(err)
+        }
+        return
+      }
+    });
+  };
+
+  handleReset = e => {
+    this.props.form.resetFields()
+    if (isFunc(this.props.onReset)) {
+      this.props.onReset()
+    }
+  }
+
+  render () {
+    const { form, hideResetBtn } = this.props;
+
+    return (
+      <Form layout="inline" onSubmit={this.handleSubmit} colon={false}>
+        {
+          (this.props.fields || []).map((field, index) => {
+            const { element, render, name, label, value } = field || {}
+
+            if (!element && !render) return null;
+
+            const conifg = value  ? { initialValue: value } : {}
+            const Item = isFunc(render) ? render(this.props) : element
+
+            return <Form.Item label={label} key={`fm-${index}`}>{form.getFieldDecorator(name, conifg)(Item)}</Form.Item>
+          })
+        }
+        <Form.Item>
+          <Button type="primary" htmlType="submit">搜索</Button>
+        </Form.Item>
+        { hideResetBtn && (
+          <Form.Item>
+            <Button type="default" onClick="handleReset">重置</Button>
+          </Form.Item>
+        )}
+      </Form>
+    );
+  }
+}
+
+// 提供给父组件 onChange 事件
+function onValuesChange(props, changedValues, allValues) {
+  if (isFunc(props.onChange)) {
+    props.onChange(changedValues, allValues)
+  }
+}
+
+const EnhanceForm = Form.create({ onValuesChange })(SearchForm)
+
+EnhanceForm.propTypes = {
+  onSearch: PropTyps.func.isRequired,
+  onReset: PropTyps.func,
+  onError: PropTyps.func,
+  onChange: PropTyps.func,
+  fields: PropTyps.arrayOf(PropTyps.object),
+  hideResetBtn: PropTyps.bool,
+}
+
+export default EnhanceForm;

src/layouts/BasicLayout.jsx

@@ -27,7 +27,7 @@ const footerRender = () => {
         color: 'rgba(102, 102, 102, 1)',
       }}
     >
-      copy Right @ 知与行
+      Copy Right @ 知与行
     </div>
   )
 }

src/pages/system/messageList.jsx

@@ -1,32 +1,41 @@
 import React, { useState, useEffect } from 'react';
 import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker } from 'antd';
-import { FormattedMessage } from 'umi-plugin-react/locale';
+// import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../style/GoodsList.less';
 import router from 'umi/router';
 import moment from 'moment';
-import SelectCity from '../../components/SelectButton/CitySelect'
-import BuildSelect from '../../components/SelectButton/BuildSelect'
-import apis from '../../services/apis';
-import request from '../../utils/request'
+// import SelectCity from '../../components/SelectButton/CitySelect'
+// import BuildSelect from '../../components/SelectButton/BuildSelect'
+// import apis from '../../services/apis';
+// import request from '../../utils/request'
+import { fetch, apis } from '../../utils/request'
+// import { useQuery } from '../../utils/hooks'
+import PaginationWrapper from '../../components/PaginationWrapper'
+import SearchForm from '../../components/SearchForm'
 
-const { Option } = Select;
-const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+// const { Option } = Select;
+// const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+
+const getMessageList = fetch(apis.system.taCustomerMessage)
 
 const header = (props) => {
-  const [ data, setData ] = useState({})
-//   const [page, changePage] = useState({})
+  // const [ data, setData ] = useState({})
+// //   const [page, changePage] = useState({})
+
+//   useEffect(() => {
+//     getList({ pageNum: 1, pageSize: 10 });
+//   },[])
 
-  useEffect(() => {
-    getList({ pageNum: 1, pageSize: 10 });
-  },[])
+//   // 查询列表
+//   const getList = (params) => {
+//     request({ ...apis.system.taCustomerMessage, params: { ...params },}).then((data) => {
+//         console.log(data)
+//         setData(data)
+//     })
+//   }
 
-  // 查询列表
-  const getList = (params) => {
-    request({ ...apis.system.taCustomerMessage, params: { ...params },}).then((data) => {
-        console.log(data)
-        setData(data)
-    })
-  }
+  // const [pageNum, setPage] = useState(1)
+  // const [data, loading, err] = useQuery({params: { pageNum }}, getMessageList)
 
   const columns = [
     {
@@ -51,22 +60,49 @@ const header = (props) => {
   ];
    
   
-  const changePageNum = (pageNumber) => {
-      getList({ pageNum: pageNumber, pageSize: 10 })
-  }
+  // const changePageNum = (pageNumber) => {
+  //     getList({ pageNum: pageNumber, pageSize: 10 })
+  // }
+
+  
+  console.log('------render messagelist-------')
  
 
-  const { getFieldDecorator } = props.form
+  // const { getFieldDecorator } = props.form
   return (
-
     <>
-      <Table rowKey="messageList" dataSource={data.records} columns={columns} pagination={false}/>
-      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
-        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current}/>
-      </div>
+    <SearchForm
+      onSearch={console.log}
+      fields={[
+        {
+          label: 'Foo',
+          name: 'foo',
+          element: <Input />,
+        },
+        {
+          label: 'Bar',
+          name: 'bar',
+          element: (<Select style={{ width: '200px' }}>
+            <Select.Option value={1}>a</Select.Option>
+            <Select.Option value={2}>b</Select.Option>
+          </Select>)
+        },
+      ]}
+    ></SearchForm>
+    <PaginationWrapper
+      request={getMessageList}
+      render={data => <Table rowKey={record => record.messageId} dataSource={data.records} columns={columns} pagination={false}/>}
+    >
+    </PaginationWrapper>
     </>
+    // <>
+    //   <Table rowKey="messageList" dataSource={data.records} columns={columns} pagination={false}/>
+    //   <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
+    //     <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={pg => setPage(pg)} current={data.current}/>
+    //   </div>
+    // </>
   )
 }
-const WrappedHeader = Form.create({ name: 'header' })(header);
+// const WrappedHeader = Form.create({ name: 'header' })(header);
 
-export default WrappedHeader
+export default header

src/utils/hooks.js

@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from 'react';
+
+function ObjEqual(a, b) {
+  if (typeof(a) !== 'object' || typeof(b) !== 'object') {
+    return false
+  }
+
+  return JSON.stringify(a) === JSON.stringify(b)
+}
+
+export function useQuery(params, request) {
+  const [preParams, setParams] = useState({})
+  const [data, setData] = useState({})
+  const [error, setError] = useState()
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (ObjEqual(preParams, params)) {
+      return
+    }
+
+    setLoading(true)
+    setParams(params)
+    request(params).then((res) => {
+      setData(res)
+      setError(void 0)
+      setLoading(false)
+    }).catch((err) => {
+      setError(err)
+      setLoading(false)
+    })
+  })
+
+  return [
+    data,
+    loading,
+    error,
+  ]
+}

src/utils/utils.js

@@ -21,3 +21,7 @@ export const isAntDesignProOrDev = () => {
   return isAntDesignPro();
 };
 export const getPageQuery = () => parse(window.location.href.split('?')[1]);
+
+export function ObjSpEqual(a = {}, b = {}) {
+  return JSON.stringify(a) === JSON.stringify(b)
+}