import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Table, Input, Button } from 'antd'
|
|
import Api from '@/api'
|
import UtilsDM from '@/utils/utils-datamanage.js'
|
// import './index.scss'
|
|
class SearchWrap extends Component {
|
static propTpyes = {
|
search: PropTypes.array,
|
onChange: PropTypes.func
|
}
|
|
state = {
|
search: []
|
}
|
|
UNSAFE_componentWillMount () {
|
const { search } = this.props
|
|
this.setState({
|
search: fromJS(search).toJS()
|
})
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
searchChange = (val, key) => {
|
const { search } = this.state
|
|
this.setState({search: search.map(item => {
|
if (item.field === key) {
|
item.value = val
|
}
|
return item
|
})})
|
}
|
|
trigger = () => {
|
const { search } = this.state
|
|
this.props.onChange(search)
|
}
|
|
render() {
|
const { search } = this.state
|
|
return (
|
<div className="tb-search-wrap">
|
{search.map(item => (
|
<div className="search-item" key={item.field}>
|
{item.label}：
|
<Input autoComplete="off" onChange={(e) => this.searchChange(e.target.value, item.field)}/>
|
</div>
|
))}
|
<Button onClick={this.trigger}>搜索</Button>
|
</div>
|
)
|
}
|
}
|
|
class SubTable extends Component {
|
static propTpyes = {
|
config: PropTypes.object
|
}
|
|
state = {
|
pageIndex: 1, // 初始页面索引
|
pageSize: 10, // 每页数据条数
|
columns: null, // 显示列
|
pageOptions: [],
|
search: []
|
}
|
|
UNSAFE_componentWillMount () {
|
const { config } = this.props
|
|
let _columns = []
|
|
config.columns.forEach(item => {
|
if (item.Hide === 'true') return
|
_columns.push({
|
align: 'center',
|
dataIndex: item.field,
|
title: item.label,
|
sorter: false,
|
width: item.Width || 120
|
})
|
})
|
|
let size = (config.setting.pageSize || 10) + ''
|
let pageOptions = ['10', '25', '50', '100', '500', '1000']
|
|
if (!pageOptions.includes(size)) {
|
pageOptions.push(size)
|
pageOptions = pageOptions.sort((a, b) => a - b)
|
}
|
|
this.setState({
|
pageSize: config.pageSize || 10,
|
pageOptions,
|
search: fromJS(config.search).toJS(),
|
columns: _columns
|
})
|
}
|
|
componentDidMount() {
|
const { config } = this.props
|
|
if (config.setting.onload === 'true') {
|
this.loadData()
|
}
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
/**
|
* @description 数据加载
|
*/
|
async loadData () {
|
const { config, tax_type } = this.props
|
const { search, pageIndex, pageSize } = this.state
|
|
this.setState({
|
loading: true
|
})
|
|
let searches = search.map(item => ({
|
key: item.field,
|
match: item.match,
|
type: item.type,
|
value: item.value || ''
|
}))
|
|
let param = UtilsDM.getQueryDataParams(config.setting, searches, config.setting.order, pageIndex, pageSize, '')
|
|
this.requestId = config.uuid + new Date().getTime()
|
|
let result = await Api.genericInterface(param, config.setting.js_script, '', this.requestId)
|
|
if (result.status) {
|
if (result.$requestId && this.requestId !== result.$requestId) return
|
|
let start = pageSize * (pageIndex - 1) + 1
|
|
let data = result.data.map((item, index) => {
|
item.key = index
|
item.$Index = start + index + ''
|
|
if (tax_type) {
|
item.tax_rate = tax_type === 'special_invoice' ? item.general_tax_rate : item.small_tax_rate
|
item.tax_rate = isNaN(item.tax_rate) ? 0 : +item.tax_rate
|
}
|
|
return item
|
})
|
|
let total = result.total || 0
|
if (config.setting.custompage && data.length) {
|
total = data[data.length - 1].mk_total || 0
|
}
|
|
this.setState({
|
data: data,
|
total: total,
|
loading: false
|
})
|
|
UtilsDM.querySuccess(result)
|
} else {
|
this.setState({
|
loading: false
|
})
|
|
UtilsDM.queryFail(result)
|
}
|
}
|
|
changeTable = (pagination) => {
|
this.setState({
|
pageIndex: pagination.current,
|
pageSize: pagination.pageSize,
|
}, () => {
|
this.loadData()
|
})
|
}
|
|
doubleClickLine = (record) => {
|
this.props.onChange(record)
|
}
|
|
searchChange = (search) => {
|
this.setState({search: search}, () => {
|
this.loadData()
|
})
|
}
|
|
render() {
|
const { pageIndex, pageSize, pageOptions, columns, total, loading, data, search } = this.state
|
|
return (
|
<>
|
<SearchWrap search={search} onChange={this.searchChange}/>
|
<Table
|
className="inv-table"
|
columns={columns}
|
dataSource={data}
|
bordered={true}
|
loading={loading}
|
onRow={(record) => {
|
return {
|
onDoubleClick: () => {this.doubleClickLine(record)}
|
}
|
}}
|
onChange={this.changeTable}
|
pagination={{
|
current: pageIndex,
|
pageSize: pageSize,
|
pageSizeOptions: pageOptions,
|
showSizeChanger: true,
|
total: total || 0,
|
showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条`
|
}}
|
/>
|
</>
|
)
|
}
|
}
|
|
export default SubTable
|
