update 搬迁list组件

web-react/src/components/query-list/index.jsx

@@ -1,11 +1,204 @@
 import React, { Component } from 'react'
+import { Button, Form, List, Pagination, Spin } from 'antd'
+import { AntIcon } from 'components'
 
 export default class QueryList extends Component {
-    render() {
-        return (
-            <div>
 
+    state = {
+        loading: false,
+        dataSource: []
+    }
+
+    // 查询表单实例
+    form = React.createRef()
+
+    // 查询值
+    query = {}
+
+    // 分页器配置
+    pagination = {
+        current: 1,
+        pageSize: 10,
+        total: 0,
+        size: 'small',
+        showSizeChanger: true,
+        showQuickJumper: true,
+        showTotal: (total) => `总共${total}条数据`
+    }
+
+    // 默认选中页码
+    pageIndex = 1
+    // 默认页面尺寸
+    pageSize = 10
+
+    constructor(props) {
+        super(props)
+
+        this.autoLoad = typeof this.props.autoLoad === 'boolean' ? this.props.autoLoad : true
+        this.loadData = typeof this.props.loadData === 'function' ? this.props.loadData : async () => { }
+
+        if (this.props.pageIndex) {
+            this.pageIndex = this.props.pageIndex
+            this.pagination.current = this.pageIndex
+        }
+        if (this.props.pageSize) {
+            this.pageSize = this.props.pageSize
+            this.pagination.pageSize = this.pageSize
+        }
+    }
+
+    /**
+     * 自动加载数据
+     */
+    componentDidMount() {
+        if (this.autoLoad) {
+            this.onLoadData()
+        }
+    }
+
+    /**
+     * 加载数据
+     * 调用外部传入的loadData函数,可在loadData中自行改变参数
+     */
+    async onLoadData() {
+        this.onLoading()
+
+        const res = await this.props.loadData({
+            pageIndex: this.pagination.current,
+            pageSize: this.pagination.pageSize
+        }, this.query)
+
+        this.setState({
+            dataSource: res.rows || res.data || res.items
+        })
+
+        this.pagination.total = res.totalCount
+
+        this.onLoaded()
+    }
+
+    /**
+     * 数据开始加载
+     */
+    onLoading() {
+        this.setState({ loading: true })
+    }
+
+    /**
+     * 数据加载完成
+     */
+    onLoaded() {
+        this.setState({ loading: false })
+    }
+
+    /**
+     * 进行查询
+     * 返回表单字段值,加载数据,并且返回到第一页
+     * @param {*} values 
+     */
+    onQuery(values) {
+        this.query = values
+        this.onReloadData(true)
+    }
+
+    /**
+     * 重置查询
+     * 初始化表单字段值,加载数据,并返回到第一页
+     */
+    onResetQuery() {
+        this.form.current.resetFields()
+        this.query = {}
+        this.onReloadData(true)
+    }
+
+    /**
+     * 重新加载表格数据
+     * @param {Boolean} resetPage 是否重置页码
+     */
+    onReloadData(resetPage = false) {
+        if (resetPage) {
+            this.pagination = {
+                ...this.pagination,
+                current: this.pageIndex
+            }
+        }
+        this.onLoadData()
+    }
+
+    onListChange(current, pageSize) {
+        this.pagination = {
+            ...this.pagination,
+            current,
+            pageSize
+        }
+        this.onLoadData()
+    }
+
+    /**
+    * 渲染查询栏
+    * @returns 
+    */
+    renderQueryBar() {
+
+        const { query, moreQuery } = this.props
+
+        return (
+            <div className="yo-query-bar">
+                <Form
+                    layout="inline"
+                    ref={this.form}
+                    onFinish={(value) => this.onQuery(value)}
+                >
+                    {query}
+                    <Form.Item>
+                        <Button.Group className="mr-xs">
+                            <Button htmlType="submit" type="primary">查询</Button>
+                            <Button onClick={() => this.onResetQuery()}>重置</Button>
+                        </Button.Group>
+                        {
+                            moreQuery && <Button>更多查询条件</Button>
+                        }
+                    </Form.Item>
+                </Form>
             </div>
         )
     }
+
+    render() {
+
+        const props = {
+            dataSource: this.state.dataSource,
+            rowKey: record => record.id || Math.random().toString(16).slice(2),
+            ...this.props
+        }
+
+        return (
+            <section>
+                {this.props.query && this.renderQueryBar()}
+                <div className="yo-action-bar">
+                    <div className="yo-action-bar--actions">
+                        {this.props.operator}
+                    </div>
+                    <div className="yo-action-bar--actions">
+                        <Button.Group>
+                            <Button>刷新</Button>
+                        </Button.Group>
+                    </div>
+                </div>
+                <div className="yo-list">
+                    <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
+                        <List {...props} />
+                        {
+                            !!this.state.dataSource && !!this.state.dataSource.length &&
+                            <Pagination
+                                size="small"
+                                {...this.pagination}
+                                onChange={(current, pageSize) => this.onListChange(current, pageSize)}
+                            />
+                        }
+                    </Spin>
+                </div>
+            </section>
+        )
+    }
 }