add 人员管理和选房(缺编辑)

2021-06-20 17:46:05 +08:00
parent c8e63d67d8
commit c694078569
7 changed files with 1079 additions and 84 deletions
--- a/web-react/src/components/query-list/index.jsx
+++ b/web-react/src/components/query-list/index.jsx
@@ -2,12 +2,13 @@ import React, { Component } from 'react'
 import { Button, Form, List, Pagination, Spin, Tooltip } from 'antd'
 import { AntIcon } from 'components'

-/**
-    * 渲染查询栏
-    * @returns 
-    */
-function renderQueryBar() {
+const propsMap = ['autoLoad', 'loadData', 'pageIndex', 'pageSize']

+/**
+ * 渲染查询栏
+ * @returns
+ */
+function renderQueryBar() {
    const { query, moreQuery } = this.props

    return (
@@ -15,20 +16,23 @@ function renderQueryBar() {
            <Form
                layout="inline"
                ref={this.form}
-                onFinish={(value) => this.onQuery(value)}
+                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>
+                        <Button htmlType="submit" type="primary" icon={<AntIcon type="search" />}>
+                            查询
+                        </Button>
                        <Tooltip placement="bottom" title="重置查询">
-                            <Button onClick={() => this.onResetQuery()} icon={<AntIcon type="undo" />} />
+                            <Button
+                                onClick={() => this.onResetQuery()}
+                                icon={<AntIcon type="undo" />}
+                            />
                        </Tooltip>
                    </Button.Group>
-                    {
-                        moreQuery && <Button>更多查询条件</Button>
-                    }
+                    {moreQuery && <Button>更多查询条件</Button>}
                </Form.Item>
            </Form>
        </div>
@@ -36,10 +40,9 @@ function renderQueryBar() {
 }

 export default class QueryList extends Component {
-
    state = {
        loading: false,
-        dataSource: []
+        dataSource: [],
    }

    // 查询表单实例
@@ -56,7 +59,7 @@ export default class QueryList extends Component {
        size: 'small',
        showSizeChanger: true,
        showQuickJumper: true,
-        showTotal: (total) => `总共${total}条数据`
+        showTotal: total => `总共${total}条数据`,
    }

    // 默认选中页码
@@ -68,7 +71,8 @@ export default class QueryList extends Component {
        super(props)

        this.autoLoad = typeof this.props.autoLoad === 'boolean' ? this.props.autoLoad : true
-        this.loadData = typeof this.props.loadData === 'function' ? this.props.loadData : async () => { }
+        this.loadData =
+            typeof this.props.loadData === 'function' ? this.props.loadData : async () => {}

        if (this.props.pageIndex) {
            this.pageIndex = this.props.pageIndex
@@ -96,13 +100,16 @@ export default class QueryList extends Component {
    onLoadData = async () => {
        this.onLoading()

-        const res = await this.props.loadData({
-            pageIndex: this.pagination.current,
-            pageSize: this.pagination.pageSize
-        }, this.query)
+        const res = await this.loadData(
+            {
+                pageIndex: this.pagination.current,
+                pageSize: this.pagination.pageSize,
+            },
+            this.query
+        )

        this.setState({
-            dataSource: res.rows || res.data || res.items
+            dataSource: res.rows || res.data || res.items,
        })

        this.pagination.total = res.totalCount
@@ -127,9 +134,9 @@ export default class QueryList extends Component {
    /**
     * 进行查询
     * 返回表单字段值,加载数据,并且返回到第一页
-     * @param {*} values 
+     * @param {*} values
     */
-    onQuery = (values) => {
+    onQuery = values => {
        this.query = values
        this.onReloadData(true)
    }
@@ -152,7 +159,7 @@ export default class QueryList extends Component {
        if (resetPage) {
            this.pagination = {
                ...this.pagination,
-                current: this.pageIndex
+                current: this.pageIndex,
            }
        }
        this.onLoadData()
@@ -162,30 +169,38 @@ export default class QueryList extends Component {
        this.pagination = {
            ...this.pagination,
            current,
-            pageSize
+            pageSize,
        }
        this.onLoadData()
    }

    render() {
+        const attrs = {}
+        Object.keys(this.props).forEach(key => {
+            if (!propsMap.includes(key)) {
+                attrs[key] = this.props[key]
+            }
+        })

        const props = {
            dataSource: this.state.dataSource,
            rowKey: record => record.id || Math.random().toString(16).slice(2),
-            ...this.props
+            ...attrs,
        }

        return (
            <section>
                {this.props.query && renderQueryBar.call(this)}
                <div className="yo-action-bar">
-                    <div className="yo-action-bar--actions">
-                        {this.props.operator}
-                    </div>
+                    <div className="yo-action-bar--actions">{this.props.operator}</div>
                    <div className="yo-action-bar--actions">
                        <Button.Group>
                            <Tooltip placement="bottom" title="刷新">
-                                <Button onClick={() => this.onReloadData()} type="text" icon={<AntIcon type="reload" />} />
+                                <Button
+                                    onClick={() => this.onReloadData()}
+                                    type="text"
+                                    icon={<AntIcon type="reload" />}
+                                />
                            </Tooltip>
                        </Button.Group>
                    </div>
@@ -193,14 +208,15 @@ export default class QueryList extends Component {
                <div className="yo-list">
                    <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
                        <List {...props} />
-                        {
-                            !!this.state.dataSource && !!this.state.dataSource.length &&
+                        {!!this.state.dataSource && !!this.state.dataSource.length && (
                            <Pagination
                                size="small"
                                {...this.pagination}
-                                onChange={(current, pageSize) => this.onListChange(current, pageSize)}
+                                onChange={(current, pageSize) =>
+                                    this.onListChange(current, pageSize)
+                                }
                            />
-                        }
+                        )}
                    </Spin>
                </div>
            </section>
--- a/web-react/src/components/query-table/index.jsx
+++ b/web-react/src/components/query-table/index.jsx
@@ -2,7 +2,9 @@ import React, { Component } from 'react'
 import { Form, Button, Table, Tooltip } from 'antd'
 import { AntIcon } from 'components'

-const clearChildren = (data) => {
+const propsMap = ['autoLoad', 'loadData', 'pageIndex', 'pageSize']
+
+const clearChildren = data => {
    data.forEach(p => {
        if (p.children) {
            if (p.children.length) {
@@ -16,11 +18,10 @@ const clearChildren = (data) => {
 }

 /**
-     * 渲染查询栏
-     * @returns 
-     */
+ * 渲染查询栏
+ * @returns
+ */
 function renderQueryBar() {
-
    const { query, moreQuery, onQueryChange } = this.props

    return (
@@ -28,21 +29,26 @@ function renderQueryBar() {
            <Form
                layout="inline"
                ref={this.form}
-                onFinish={(value) => this.onQuery(value)}
+                onFinish={value => this.onQuery(value)}
                initialValues={this.props.queryInitialValues}
-                onValuesChange={(changedValues, allValues) => onQueryChange && onQueryChange(changedValues, allValues)}
+                onValuesChange={(changedValues, allValues) =>
+                    onQueryChange && onQueryChange(changedValues, allValues)
+                }
            >
                {query}
                <Form.Item>
                    <Button.Group className="mr-xs">
-                        <Button htmlType="submit" type="primary" icon={<AntIcon type="search" />}>查询</Button>
+                        <Button htmlType="submit" type="primary" icon={<AntIcon type="search" />}>
+                            查询
+                        </Button>
                        <Tooltip placement="bottom" title="重置查询">
-                            <Button onClick={() => this.onResetQuery()} icon={<AntIcon type="undo" />} />
+                            <Button
+                                onClick={() => this.onResetQuery()}
+                                icon={<AntIcon type="undo" />}
+                            />
                        </Tooltip>
                    </Button.Group>
-                    {
-                        moreQuery && <Button>更多查询条件</Button>
-                    }
+                    {moreQuery && <Button>更多查询条件</Button>}
                </Form.Item>
            </Form>
        </div>
@@ -54,14 +60,13 @@ function renderTable(props, on) {
 }

 export default class QueryTable extends Component {
-
    state = {
        // 加载状态
        loading: false,
        // 表格类型
        type: '',
        // 数据
-        dataSource: []
+        dataSource: [],
    }

    // 查询表单实例
@@ -78,8 +83,8 @@ export default class QueryTable extends Component {
        size: 'small',
        showSizeChanger: true,
        showQuickJumper: true,
-        showTotal: (total) => `总共${total}条数据`,
-        position: ['bottomLeft']
+        showTotal: total => `总共${total}条数据`,
+        position: ['bottomLeft'],
    }

    // 默认选中页码
@@ -97,7 +102,8 @@ export default class QueryTable extends Component {
        super(props)

        this.autoLoad = typeof this.props.autoLoad === 'boolean' ? this.props.autoLoad : true
-        this.loadData = typeof this.props.loadData === 'function' ? this.props.loadData : async () => { }
+        this.loadData =
+            typeof this.props.loadData === 'function' ? this.props.loadData : async () => {}

        if (this.props.pageIndex) {
            this.pageIndex = this.props.pageIndex
@@ -125,22 +131,25 @@ export default class QueryTable extends Component {
    onLoadData = async () => {
        this.onLoading()

-        const res = await this.loadData({
-            pageIndex: this.pagination.current,
-            pageSize: this.pagination.pageSize,
-            ...this.sorter
-        }, this.query)
+        const res = await this.loadData(
+            {
+                pageIndex: this.pagination.current,
+                pageSize: this.pagination.pageSize,
+                ...this.sorter,
+            },
+            this.query
+        )
        if (res.rows || res.data || res.items) {
            this.setState({
                type: 'table',
-                dataSource: res.rows || res.data || res.items
+                dataSource: res.rows || res.data || res.items,
            })

            this.pagination.total = res.totalCount
        } else if (res) {
            this.setState({
                type: 'tree',
-                dataSource: clearChildren(res)
+                dataSource: clearChildren(res),
            })

            this.pagination = false
@@ -155,8 +164,8 @@ export default class QueryTable extends Component {
    onLoading = () => {
        this.setState({
            loading: {
-                indicator: <AntIcon type="loading" />
-            }
+                indicator: <AntIcon type="loading" />,
+            },
        })
    }

@@ -170,9 +179,9 @@ export default class QueryTable extends Component {
    /**
     * 进行查询
     * 返回表单字段值,加载数据,并且返回到第一页
-     * @param {*} values 
+     * @param {*} values
     */
-    onQuery = (values) => {
+    onQuery = values => {
        this.query = values
        this.onReloadData(true)
    }
@@ -182,12 +191,11 @@ export default class QueryTable extends Component {
     * 初始化表单字段值,加载数据,并返回到第一页
     */
    onResetQuery = () => {
-
        const { queryInitialValues, onQueryChange } = this.props

        this.form.current.resetFields()
        this.query = {
-            ...queryInitialValues
+            ...queryInitialValues,
        }
        const values = this.form.current.getFieldsValue()
        onQueryChange && onQueryChange(values, values)
@@ -202,7 +210,7 @@ export default class QueryTable extends Component {
        if (resetPage) {
            this.pagination = {
                ...this.pagination,
-                current: this.pageIndex
+                current: this.pageIndex,
            }
        }
        this.onLoadData()
@@ -210,14 +218,14 @@ export default class QueryTable extends Component {

    /**
     * 表格分页/筛选/排序
-     * @param {*} pagination 
-     * @param {*} filters 
-     * @param {*} sorter 
+     * @param {*} pagination
+     * @param {*} filters
+     * @param {*} sorter
     */
    onTableChange = (pagination, filters, sorter) => {
        this.pagination = {
            ...pagination,
-            showTotal: (total) => `总共${total}条数据`
+            showTotal: total => `总共${total}条数据`,
        }
        this.sorter = {
            sortField: sorter.field,
@@ -231,7 +239,7 @@ export default class QueryTable extends Component {
        if (!dataSource.find(item => !item.id)) {
            dataSource = [...dataSource, record]
            this.setState({
-                dataSource
+                dataSource,
            })
            return dataSource.length - 1
        }
@@ -239,11 +247,17 @@ export default class QueryTable extends Component {
    }

    render() {
-
        const { loading, dataSource } = this.state

        const { query, operator, columns } = this.props

+        const attrs = {}
+        Object.keys(this.props).forEach(key => {
+            if (!propsMap.includes(key)) {
+                attrs[key] = this.props[key]
+            }
+        })
+
        const props = {
            loading,
            pagination: this.pagination,
@@ -253,36 +267,35 @@ export default class QueryTable extends Component {
            size: 'middle',
            rowKey: record => record.id || Math.random().toString(16).slice(2),
            sticky: true,
-            ...this.props
+            ...attrs,
        }

        const on = {
-            onChange: (...args) => this.onTableChange.apply(this, args)
+            onChange: (...args) => this.onTableChange.apply(this, args),
        }

        return (
            <section>
                {query && renderQueryBar.call(this)}
                <div className="yo-action-bar">
-                    <div className="yo-action-bar--actions">
-                        {operator}
-                    </div>
+                    <div className="yo-action-bar--actions">{operator}</div>
                    <div className="yo-action-bar--actions">
                        <Button.Group>
                            <Tooltip placement="bottom" title="刷新">
-                                <Button onClick={() => this.onReloadData()} type="text" icon={<AntIcon type="reload" />} />
+                                <Button
+                                    onClick={() => this.onReloadData()}
+                                    type="text"
+                                    icon={<AntIcon type="reload" />}
+                                />
                            </Tooltip>
                        </Button.Group>
                    </div>
                </div>
-                {
-                    this.props.editable ?
-                        <Form ref={this.props.form}>
-                            {renderTable.call(this, props, on)}
-                        </Form>
-                        :
-                        renderTable.call(this, props, on)
-                }
+                {this.props.editable ? (
+                    <Form ref={this.props.form}>{renderTable.call(this, props, on)}</Form>
+                ) : (
+                    renderTable.call(this, props, on)
+                )}
            </section>
        )
    }