add 人员管理和选房(缺编辑)
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user