feats

package.json

@@ -43,6 +43,7 @@
   "dependencies": {
     "@ant-design/pro-layout": "^4.5.9",
     "@antv/data-set": "^0.10.2",
+    "@zjxpcyc/xrc-form2": "^2.2.1",
     "ant": "^0.2.0",
     "antd": "^3.26.0",
     "classnames": "^2.2.6",

src/layouts/SearchList/BodyBodyPagination.jsx → src/layouts/SearchList/BodyPagination.jsx

@@ -6,7 +6,7 @@ import Style from './style.less'
 
 export default class BodyPagination extends PureComponent {
   static propTypes = {
-    storage: PropTypes.func,
+    storage: PropTypes.object,
     onChange: PropTypes.func,
     configs: PropTypes.object,
   }

src/layouts/SearchList/SearchBody.jsx

@@ -6,7 +6,7 @@ import { isFunction } from './utils'
 
 export default class SearchBody extends PureComponent {
   static propTypes = {
-    storage: PropTypes.func,
+    storage: PropTypes.object,
     dataSource: PropTypes.array,
     configs: PropTypes.object,
   }
@@ -22,7 +22,7 @@ export default class SearchBody extends PureComponent {
     }
 
     return (
-      <Table dataSource={dataSource} {...leftProps} />
+      <Table pagination={false} dataSource={dataSource} {...leftProps} />
     )
   }
 }

src/layouts/SearchList/SearchForm.jsx

@@ -1,11 +1,32 @@
 import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import createForm from '@zjxpcyc/xrc-form2'
+
+const Form = createForm()
 
 export default class SearchForm extends PureComponent {
+  static propTypes = {
+    storage: PropTypes.object,
+    onSubmit: PropTypes.func,
+    configs: PropTypes.object,
+  }
+
+  form = null
+  storage = this.props.storage
+
+  componentDidMount() {
+    const conditions = this.storage.get('form.values')
+
+    if (this.form && conditions) {
+      this.form.setFieldsValue(conditions)
+    }
+  }
+
   render() {
+    const { fields, ...leftProps } = this.props.configs || {}
+
     return (
-      <div>
-        
-      </div>
+      <Form wrappedComponentRef={f => this.form = f} layout="inline" fields={fields} onSubmit={this.props.onSubmit} {...leftProps} />
     )
   }
 }

src/layouts/SearchList/index.jsx

@@ -6,22 +6,23 @@ import { notification } from 'antd'
 import SearchForm from './SearchForm'
 import SearchBody from './SearchBody'
 import BodyHeader from './BodyHeader'
-import BodyPagination from './BodyBodyPaginationation'
+import BodyPagination from './BodyPagination'
 import { getStorageBuilder } from './utils'
 import Style from './style.less'
 
 class SearchList extends React.PureComponent {
   static propTypes = {
-    title: PropTypes.element,
-    actions: PropTypes.element,
+    storage: PropTypes.object,
+    title: PropTypes.any,
+    actions: PropTypes.any,
     search: PropTypes.object,
     body: PropTypes.object,
     pagination: PropTypes.object,
+    service: PropTypes.func,
   }
 
-  storage = getStorageBuilder(window.Math.random().toString(36).substr(2))
-
   state = {
+    defaultStorage: getStorageBuilder(window.Math.random().toString(36).substr(2)),
     dataSource: [],
     conditions: {},
     pageConfig: {
@@ -36,7 +37,7 @@ class SearchList extends React.PureComponent {
       (state) => ({
         ...state,
         pageConfig: {
-          ...pageConfig,
+          ...state.pageConfig,
           current: page,
           pageSize,
         }
@@ -77,7 +78,7 @@ class SearchList extends React.PureComponent {
           ...state,
           dataSource,
           pageConfig: {
-            ...pageConfig,
+            ...state.pageConfig,
             total: pageParams[keyOfTotalSize],
           },
         }))
@@ -87,12 +88,12 @@ class SearchList extends React.PureComponent {
     }
   }
 
-  render() {    
+  render() {
     const {
       keyOfPageNumber,
       keyOfPageSize,
       keyOfTotalSize,
-      ...leftPageParams,
+      ...leftPageParams
     } = this.props.pagination || {}
 
     const pageConfig = {
@@ -100,6 +101,8 @@ class SearchList extends React.PureComponent {
       ...this.state.pageConfig,
     }
 
+    const storage = this.props.storage || this.state.defaultStorage
+
     return (
       <div className={Style['search-list']}>
         <div className={Style['head']}>
@@ -114,3 +117,15 @@ class SearchList extends React.PureComponent {
     )
   }
 }
+
+function withSearchList (configs = {}) {
+  const cacheKey = `${configs.name || 'SearchList'}-${window.Math.random().toString(36).substr(2)}`
+  const storage = getStorageBuilder(cacheKey)
+
+  return React.forwardRef((props, ref) => {
+    return <SearchList storage={storage} {...props} ref={ref} />
+  })
+}
+
+export default SearchList;
+export { withSearchList }

src/pages/news/type/NewsType copy.jsx

@@ -0,0 +1,159 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal,Breadcrumb } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import styles from '../../style/GoodsList.less';
+import router from 'umi/router';
+import BuildSelect from '../../../components/SelectButton/BuildSelect';
+import AuthButton from '@/components/AuthButton';
+import apis from '../../../services/apis';
+import request from '../../../utils/request'
+
+const { Option } = Select;
+
+
+function header(props) {
+  // 获取初始化数据
+  const [ data, setData ] = useState({})
+
+  useEffect(() => {
+    getList({ pageNum: 1, pageSize: 10 });
+  },[])
+
+  // 查询列表
+  const getList = (params) => {
+    request({ ...apis.newsType.list, params: { ...params } }).then((data) => {
+        console.log(data)
+        setData(data)
+    })
+  }
+
+  
+  // 提交事件
+  const handleSubmit = (e, props) => {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        getList({ pageNum: 1, pageSize: 10, ...values })
+      }
+    });
+  }
+
+  const changePageNum = (pageNumber) => {
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        getList({ pageNum: pageNumber, pageSize: 10, ...values })
+      }
+    });
+  }
+
+
+  // 跳转到编辑资讯
+  const toEditNews = (id) => () => {
+    router.push({
+      pathname: '/news/type/editNews',
+      query: {
+        id
+      },
+    });
+  }
+
+  
+  const changeNewsStatus = (row, newsId) => () => {
+    Modal.confirm({
+      title: '确认删除？',
+      okText: '确认',
+      cancelText: '取消',
+      onOk() {
+
+        request({ ...apis.newsType.put, urlData: { id: newsId }, data: { ...row, status: -1 } }).then((data) => {
+          message.info('操作成功！')
+          getList({ pageNum: 1, pageSize: 10 });
+        }).catch((err) => {
+          console.log(err)
+          message.info(err.msg || err.message)
+        })
+
+      }
+    });
+  }
+  /**
+   *
+   *
+   * @param {*} props
+   * @returns
+   */
+  const columns = [
+    {
+      title: '类型图',
+      dataIndex: 'newsTypeImg',
+      key: 'newsTypeImg',
+      align: 'center',
+      render: (text, record) => <img src={record.newsTypeImg} style={{ width: '165px',height: '104px' }} className={styles.touxiang} />,
+    },
+    {
+      title: '名称',
+      dataIndex: 'newsTypeName',
+      key: 'newsTypeName',
+      align: 'center',
+
+    },
+    {
+      title: '操作',
+      dataIndex: 'handle',
+      key: 'handle',
+      align: 'center',
+      render: (x, row) => (
+        <>
+          <AuthButton name="admin.taNewsType.id.delete" noRight={null}>
+            <span style={{ color: '#EF273A', marginRight: '20px', cursor: 'pointer' }} onClick={changeNewsStatus(row, row.newsTypeId)}>
+              {row.status == 1 ? '删除' : '上架'}<Icon type="shopping-cart" className={styles.shoppingCart} />
+            </span>
+          </AuthButton>
+          <AuthButton name="admin.taNewsType.id.put" noRight={null}>
+            <span style={{ color: '#FF925C', cursor: 'pointer' }} onClick={toEditNews(row.newsTypeId)}>
+              编辑<Icon type="form" className={styles.edit} />
+            </span>
+          </AuthButton>
+        </>
+      ),
+    },
+  ];
+  function handleReset() {
+    props.form.resetFields();
+    getList({ pageNum: 1, pageSize: 10 })
+  }
+
+  const { getFieldDecorator } = props.form
+  return (
+
+    <>
+      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
+        <Form.Item>
+          {getFieldDecorator('buildingId')(
+            <BuildSelect />,
+          )}
+        </Form.Item>
+        <Form.Item>
+            <AuthButton name="admin.taNewsType.search" noRight={null}>
+              <Button type="primary" htmlType="submit" >
+                查询
+              </Button>
+            </AuthButton>
+            <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+              重置
+            </Button>
+        </Form.Item>
+      </Form>
+      <AuthButton name="admin.taNewsType.post" noRight={null}>
+        <Button type="danger" className={styles.addBtn} onClick={toEditNews()}>新增</Button>
+      </AuthButton>
+      <Table rowKey="newsType" 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>
+    </>
+  )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/news/type/NewsType.jsx

@@ -5,83 +5,22 @@ import styles from '../../style/GoodsList.less';
 import router from 'umi/router';
 import BuildSelect from '../../../components/SelectButton/BuildSelect';
 import AuthButton from '@/components/AuthButton';
-import apis from '../../../services/apis';
-import request from '../../../utils/request'
+// import apis from '../../../services/apis';
+import { fetchList, apis } from '../../../utils/request'
+import { withSearchList } from '@/layouts/SearchList'
 
 const { Option } = Select;
+const SearchList = withSearchList()
+const getNewsTypeList = fetchList(apis.newsType.list)
 
-
-function header(props) {
-  // 获取初始化数据
-  const [ data, setData ] = useState({})
-
-  useEffect(() => {
-    getList({ pageNum: 1, pageSize: 10 });
-  },[])
-
-  // 查询列表
-  const getList = (params) => {
-    request({ ...apis.newsType.list, params: { ...params } }).then((data) => {
-        console.log(data)
-        setData(data)
-    })
-  }
-
-  
-  // 提交事件
-  const handleSubmit = (e, props) => {
-    e.preventDefault();
-    props.form.validateFields((err, values) => {
-      if (!err) {
-        getList({ pageNum: 1, pageSize: 10, ...values })
-      }
-    });
-  }
-
-  const changePageNum = (pageNumber) => {
-    props.form.validateFields((err, values) => {
-      if (!err) {
-        getList({ pageNum: pageNumber, pageSize: 10, ...values })
-      }
-    });
-  }
-
-
-  // 跳转到编辑资讯
-  const toEditNews = (id) => () => {
-    router.push({
-      pathname: '/news/type/editNews',
-      query: {
-        id
-      },
-    });
-  }
-
+export default function NewsType(props) {
+  const conditions = [
+    {
+      name: 'buildingId',
+      node: BuildSelect,
+    }
+  ]
   
-  const changeNewsStatus = (row, newsId) => () => {
-    Modal.confirm({
-      title: '确认删除？',
-      okText: '确认',
-      cancelText: '取消',
-      onOk() {
-
-        request({ ...apis.newsType.put, urlData: { id: newsId }, data: { ...row, status: -1 } }).then((data) => {
-          message.info('操作成功！')
-          getList({ pageNum: 1, pageSize: 10 });
-        }).catch((err) => {
-          console.log(err)
-          message.info(err.msg || err.message)
-        })
-
-      }
-    });
-  }
-  /**
-   *
-   *
-   * @param {*} props
-   * @returns
-   */
   const columns = [
     {
       title: '类型图',
@@ -105,12 +44,12 @@ function header(props) {
       render: (x, row) => (
         <>
           <AuthButton name="admin.taNewsType.id.delete" noRight={null}>
-            <span style={{ color: '#EF273A', marginRight: '20px', cursor: 'pointer' }} onClick={changeNewsStatus(row, row.newsTypeId)}>
+            <span style={{ color: '#EF273A', marginRight: '20px', cursor: 'pointer' }}>
               {row.status == 1 ? '删除' : '上架'}<Icon type="shopping-cart" className={styles.shoppingCart} />
             </span>
           </AuthButton>
           <AuthButton name="admin.taNewsType.id.put" noRight={null}>
-            <span style={{ color: '#FF925C', cursor: 'pointer' }} onClick={toEditNews(row.newsTypeId)}>
+            <span style={{ color: '#FF925C', cursor: 'pointer' }}>
               编辑<Icon type="form" className={styles.edit} />
             </span>
           </AuthButton>
@@ -118,42 +57,172 @@ function header(props) {
       ),
     },
   ];
-  function handleReset() {
-    props.form.resetFields();
-    getList({ pageNum: 1, pageSize: 10 })
-  }
-
-  const { getFieldDecorator } = props.form
-  return (
+  
 
-    <>
-      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
-        <Form.Item>
-          {getFieldDecorator('buildingId')(
-            <BuildSelect />,
-          )}
-        </Form.Item>
-        <Form.Item>
-            <AuthButton name="admin.taNewsType.search" noRight={null}>
-              <Button type="primary" htmlType="submit" >
-                查询
-              </Button>
-            </AuthButton>
-            <Button style={{ marginLeft: 8 }} onClick={handleReset}>
-              重置
-            </Button>
-        </Form.Item>
-      </Form>
+  const renderActions = () => {
+    return (
       <AuthButton name="admin.taNewsType.post" noRight={null}>
-        <Button type="danger" className={styles.addBtn} onClick={toEditNews()}>新增</Button>
+        <Button type="danger" className={styles.addBtn}>新增</Button>
       </AuthButton>
-      <Table rowKey="newsType" 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>
-    </>
+    );
+  }
+
+  return (
+    <SearchList
+      title="资讯类型"
+      actions={renderActions()}
+      service={getNewsTypeList}
+      search={{ fields: conditions }}
+      body={{ columns }}
+      pagination={{}}
+    />
   )
 }
-const WrappedHeader = Form.create({ name: 'header' })(header);
 
-export default WrappedHeader
+// function header(props) {
+//   // 获取初始化数据
+//   const [ data, setData ] = useState({})
+
+//   useEffect(() => {
+//     getList({ pageNum: 1, pageSize: 10 });
+//   },[])
+
+//   // 查询列表
+//   const getList = (params) => {
+//     request({ ...apis.newsType.list, params: { ...params } }).then((data) => {
+//         console.log(data)
+//         setData(data)
+//     })
+//   }
+
+  
+//   // 提交事件
+//   const handleSubmit = (e, props) => {
+//     e.preventDefault();
+//     props.form.validateFields((err, values) => {
+//       if (!err) {
+//         getList({ pageNum: 1, pageSize: 10, ...values })
+//       }
+//     });
+//   }
+
+//   const changePageNum = (pageNumber) => {
+//     props.form.validateFields((err, values) => {
+//       if (!err) {
+//         getList({ pageNum: pageNumber, pageSize: 10, ...values })
+//       }
+//     });
+//   }
+
+
+//   // 跳转到编辑资讯
+//   const toEditNews = (id) => () => {
+//     router.push({
+//       pathname: '/news/type/editNews',
+//       query: {
+//         id
+//       },
+//     });
+//   }
+
+  
+//   const changeNewsStatus = (row, newsId) => () => {
+//     Modal.confirm({
+//       title: '确认删除？',
+//       okText: '确认',
+//       cancelText: '取消',
+//       onOk() {
+
+//         request({ ...apis.newsType.put, urlData: { id: newsId }, data: { ...row, status: -1 } }).then((data) => {
+//           message.info('操作成功！')
+//           getList({ pageNum: 1, pageSize: 10 });
+//         }).catch((err) => {
+//           console.log(err)
+//           message.info(err.msg || err.message)
+//         })
+
+//       }
+//     });
+//   }
+//   /**
+//    *
+//    *
+//    * @param {*} props
+//    * @returns
+//    */
+//   const columns = [
+//     {
+//       title: '类型图',
+//       dataIndex: 'newsTypeImg',
+//       key: 'newsTypeImg',
+//       align: 'center',
+//       render: (text, record) => <img src={record.newsTypeImg} style={{ width: '165px',height: '104px' }} className={styles.touxiang} />,
+//     },
+//     {
+//       title: '名称',
+//       dataIndex: 'newsTypeName',
+//       key: 'newsTypeName',
+//       align: 'center',
+
+//     },
+//     {
+//       title: '操作',
+//       dataIndex: 'handle',
+//       key: 'handle',
+//       align: 'center',
+//       render: (x, row) => (
+//         <>
+//           <AuthButton name="admin.taNewsType.id.delete" noRight={null}>
+//             <span style={{ color: '#EF273A', marginRight: '20px', cursor: 'pointer' }} onClick={changeNewsStatus(row, row.newsTypeId)}>
+//               {row.status == 1 ? '删除' : '上架'}<Icon type="shopping-cart" className={styles.shoppingCart} />
+//             </span>
+//           </AuthButton>
+//           <AuthButton name="admin.taNewsType.id.put" noRight={null}>
+//             <span style={{ color: '#FF925C', cursor: 'pointer' }} onClick={toEditNews(row.newsTypeId)}>
+//               编辑<Icon type="form" className={styles.edit} />
+//             </span>
+//           </AuthButton>
+//         </>
+//       ),
+//     },
+//   ];
+
+//   function handleReset() {
+//     props.form.resetFields();
+//     getList({ pageNum: 1, pageSize: 10 })
+//   }
+
+//   const { getFieldDecorator } = props.form
+//   return (
+
+//     <>
+//       <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
+//         <Form.Item>
+//           {getFieldDecorator('buildingId')(
+//             <BuildSelect />,
+//           )}
+//         </Form.Item>
+//         <Form.Item>
+//             <AuthButton name="admin.taNewsType.search" noRight={null}>
+//               <Button type="primary" htmlType="submit" >
+//                 查询
+//               </Button>
+//             </AuthButton>
+//             <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+//               重置
+//             </Button>
+//         </Form.Item>
+//       </Form>
+//       <AuthButton name="admin.taNewsType.post" noRight={null}>
+//         <Button type="danger" className={styles.addBtn} onClick={toEditNews()}>新增</Button>
+//       </AuthButton>
+//       <Table rowKey="newsType" 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>
+//     </>
+//   )
+// }
+// const WrappedHeader = Form.create({ name: 'header' })(header);
+
+// export default WrappedHeader

src/utils/request.js

@@ -120,6 +120,13 @@ 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) => {
+    const { records, ...page  } = res || {}
+    resolve([records, page])
+  }).catch(reject)
+})
+
 export default config => {
   if (typeof config === 'string') {
     return request(config);
@@ -129,4 +136,4 @@ export default config => {
   }
 };
 
-export { fetch, apis }
+export { fetch, fetchList, apis }