update 大量细节处理

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

@@ -2,6 +2,39 @@ import React, { Component } from 'react'
 import { Button, Form, List, Pagination, Spin, Tooltip } from 'antd'
 import { AntIcon } from 'components'
 
+/**
+    * 渲染查询栏
+    * @returns 
+    */
+function renderQueryBar() {
+
+    const { query, moreQuery } = this.props
+
+    return (
+        <div className="yo-query-bar">
+            <Form
+                layout="inline"
+                ref={this.form}
+                onFinish={(value) => this.onQuery(value)}
+                initialValues={this.props.queryInitialValues}
+            >
+                {query}
+                <Form.Item>
+                    <Button.Group className="mr-xs">
+                        <Button htmlType="submit" type="primary" icon={<AntIcon type="search" />}>查询</Button>
+                        <Tooltip placement="bottom" title="重置查询">
+                            <Button onClick={() => this.onResetQuery()} icon={<AntIcon type="undo" />} />
+                        </Tooltip>
+                    </Button.Group>
+                    {
+                        moreQuery && <Button>更多查询条件</Button>
+                    }
+                </Form.Item>
+            </Form>
+        </div>
+    )
+}
+
 export default class QueryList extends Component {
 
     state = {
@@ -60,7 +93,7 @@ export default class QueryList extends Component {
      * 加载数据
      * 调用外部传入的loadData函数,可在loadData中自行改变参数
      */
-    async onLoadData() {
+    onLoadData = async () => {
         this.onLoading()
 
         const res = await this.props.loadData({
@@ -80,14 +113,14 @@ export default class QueryList extends Component {
     /**
      * 数据开始加载
      */
-    onLoading() {
+    onLoading = () => {
         this.setState({ loading: true })
     }
 
     /**
      * 数据加载完成
      */
-    onLoaded() {
+    onLoaded = () => {
         this.setState({ loading: false })
     }
 
@@ -96,7 +129,7 @@ export default class QueryList extends Component {
      * 返回表单字段值,加载数据,并且返回到第一页
      * @param {*} values 
      */
-    onQuery(values) {
+    onQuery = (values) => {
         this.query = values
         this.onReloadData(true)
     }
@@ -105,7 +138,7 @@ export default class QueryList extends Component {
      * 重置查询
      * 初始化表单字段值,加载数据,并返回到第一页
      */
-    onResetQuery() {
+    onResetQuery = () => {
         this.form.current.resetFields()
         this.query = {}
         this.onReloadData(true)
@@ -115,7 +148,7 @@ export default class QueryList extends Component {
      * 重新加载表格数据
      * @param {Boolean} resetPage 是否重置页码
      */
-    onReloadData(resetPage = false) {
+    onReloadData = (resetPage = false) => {
         if (resetPage) {
             this.pagination = {
                 ...this.pagination,
@@ -125,7 +158,7 @@ export default class QueryList extends Component {
         this.onLoadData()
     }
 
-    onListChange(current, pageSize) {
+    onListChange = (current, pageSize) => {
         this.pagination = {
             ...this.pagination,
             current,
@@ -134,39 +167,6 @@ export default class QueryList extends Component {
         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)}
-                    initialValues={this.props.queryInitialValues}
-                >
-                    {query}
-                    <Form.Item>
-                        <Button.Group className="mr-xs">
-                            <Button htmlType="submit" type="primary" icon={<AntIcon type="search" />}>查询</Button>
-                            <Tooltip placement="bottom" title="重置查询">
-                                <Button onClick={() => this.onResetQuery()} icon={<AntIcon type="undo" />} />
-                            </Tooltip>
-                        </Button.Group>
-                        {
-                            moreQuery && <Button>更多查询条件</Button>
-                        }
-                    </Form.Item>
-                </Form>
-            </div>
-        )
-    }
-
     render() {
 
         const props = {
@@ -177,7 +177,7 @@ export default class QueryList extends Component {
 
         return (
             <section>
-                {this.props.query && this.renderQueryBar()}
+                {this.props.query && renderQueryBar.call(this)}
                 <div className="yo-action-bar">
                     <div className="yo-action-bar--actions">
                         {this.props.operator}