update 大量细节处理

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

@@ -15,6 +15,43 @@ const clearChildren = (data) => {
     return data
 }
 
+/**
+     * 渲染查询栏
+     * @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>
+    )
+}
+
+function renderTable(props, on) {
+    return <Table className="yo-table" {...props} {...on} />
+}
+
 export default class QueryTable extends Component {
 
     state = {
@@ -84,7 +121,7 @@ export default class QueryTable extends Component {
      * 加载数据
      * 调用外部传入的loadData函数,可在loadData中自行改变参数
      */
-    async onLoadData() {
+    onLoadData = async () => {
         this.onLoading()
 
         const res = await this.loadData({
@@ -114,7 +151,7 @@ export default class QueryTable extends Component {
     /**
      * 数据开始加载
      */
-    onLoading() {
+    onLoading = () => {
         this.setState({
             loading: {
                 indicator: <AntIcon type="loading" />
@@ -125,7 +162,7 @@ export default class QueryTable extends Component {
     /**
      * 数据加载完成
      */
-    onLoaded() {
+    onLoaded = () => {
         this.setState({ loading: false })
     }
 
@@ -134,7 +171,7 @@ export default class QueryTable extends Component {
      * 返回表单字段值,加载数据,并且返回到第一页
      * @param {*} values 
      */
-    onQuery(values) {
+    onQuery = (values) => {
         this.query = values
         this.onReloadData(true)
     }
@@ -143,7 +180,7 @@ export default class QueryTable extends Component {
      * 重置查询
      * 初始化表单字段值,加载数据,并返回到第一页
      */
-    onResetQuery() {
+    onResetQuery = () => {
         this.form.current.resetFields()
         this.query = {
             ...this.props.queryInitialValues
@@ -155,7 +192,7 @@ export default class QueryTable extends Component {
      * 重新加载表格数据
      * @param {Boolean} resetPage 是否重置页码
      */
-    onReloadData(resetPage = false) {
+    onReloadData = (resetPage = false) => {
         if (resetPage) {
             this.pagination = {
                 ...this.pagination,
@@ -171,7 +208,7 @@ export default class QueryTable extends Component {
      * @param {*} filters 
      * @param {*} sorter 
      */
-    onTableChange(pagination, filters, sorter) {
+    onTableChange = (pagination, filters, sorter) => {
         this.pagination = {
             ...pagination,
             showTotal: (total) => `总共${total}条数据`
@@ -183,7 +220,7 @@ export default class QueryTable extends Component {
         this.onLoadData()
     }
 
-    onAddRow(record = {}) {
+    onAddRow = (record = {}) => {
         let { dataSource } = this.state
         if (!dataSource.find(item => !item.id)) {
             dataSource = [...dataSource, record]
@@ -195,43 +232,6 @@ export default class QueryTable extends Component {
         return false
     }
 
-    /**
-     * 渲染查询栏
-     * @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>
-        )
-    }
-
-    renderTable(props, on) {
-        return <Table className="yo-table" {...props} {...on} />
-    }
-
     render() {
 
         const { loading, dataSource } = this.state
@@ -256,7 +256,7 @@ export default class QueryTable extends Component {
 
         return (
             <section>
-                {query && this.renderQueryBar()}
+                {query && renderQueryBar.call(this)}
                 <div className="yo-action-bar">
                     <div className="yo-action-bar--actions">
                         {operator}
@@ -272,10 +272,10 @@ export default class QueryTable extends Component {
                 {
                     this.props.editable ?
                         <Form ref={this.props.form}>
-                            {this.renderTable(props, on)}
+                            {renderTable.call(this, props, on)}
                         </Form>
                         :
-                        this.renderTable(props, on)
+                        renderTable.call(this, props, on)
                 }
             </section>
         )