update 迁移table和modal-form组件,迁移app管理
This commit is contained in:
@@ -1,11 +1,248 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Form, Button, Table } from 'antd'
|
||||
import { AntIcon } from 'components'
|
||||
|
||||
const clearChildren = (data) => {
|
||||
data.forEach(p => {
|
||||
if (p.children) {
|
||||
if (p.children.length) {
|
||||
p.children = clearChildren(p.children)
|
||||
} else {
|
||||
delete p.children
|
||||
}
|
||||
}
|
||||
})
|
||||
return data
|
||||
}
|
||||
|
||||
export default class QueryTable extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
state = {
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 表格类型
|
||||
type: '',
|
||||
// 数据
|
||||
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
|
||||
|
||||
// 排序字段
|
||||
sorter = {
|
||||
sortField: '',
|
||||
sortOrder: '',
|
||||
}
|
||||
|
||||
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.sorter
|
||||
}, this.query)
|
||||
if (res.rows || res.data || res.items) {
|
||||
this.setState({
|
||||
type: 'table',
|
||||
dataSource: res.rows || res.data || res.items
|
||||
})
|
||||
|
||||
this.pagination.total = res.totalCount
|
||||
} else if (res) {
|
||||
this.setState({
|
||||
type: 'tree',
|
||||
dataSource: clearChildren(res)
|
||||
})
|
||||
|
||||
this.pagination = false
|
||||
}
|
||||
|
||||
this.onLoaded()
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据开始加载
|
||||
*/
|
||||
onLoading() {
|
||||
this.setState({
|
||||
loading: {
|
||||
indicator: <AntIcon type="loading" />
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据加载完成
|
||||
*/
|
||||
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()
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格分页/筛选/排序
|
||||
* @param {*} pagination
|
||||
* @param {*} filters
|
||||
* @param {*} sorter
|
||||
*/
|
||||
onTableChange(pagination, filters, sorter) {
|
||||
this.pagination = pagination
|
||||
this.sorter = {
|
||||
sortField: sorter.field,
|
||||
sortOrder: sorter.order,
|
||||
}
|
||||
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 { loading, dataSource } = this.state
|
||||
|
||||
const { query, operator, columns } = this.props
|
||||
|
||||
const props = {
|
||||
loading,
|
||||
pagination: this.pagination,
|
||||
dataSource,
|
||||
columns: (columns || []).filter(p => !p.hidden),
|
||||
bordered: true,
|
||||
size: 'middle',
|
||||
rowKey: record => record.id || Math.random().toString(16).slice(2),
|
||||
scroll: { x: 'max-content' }
|
||||
}
|
||||
|
||||
const on = {
|
||||
onChange: (...args) => this.onTableChange.apply(this, args)
|
||||
}
|
||||
|
||||
return (
|
||||
<section>
|
||||
{query && this.renderQueryBar()}
|
||||
<div className="yo-action-bar">
|
||||
<div className="yo-action-bar--actions">
|
||||
{operator}
|
||||
</div>
|
||||
<div className="yo-action-bar--actions">
|
||||
<Button.Group>
|
||||
<Button>刷新</Button>
|
||||
</Button.Group>
|
||||
</div>
|
||||
</div>
|
||||
<Table className="yo-table" {...props} {...on} />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user