import React, {Component} from 'react'
|
import { is, fromJS } from 'immutable'
|
import { notification, Modal, Table, Input, Tabs } from 'antd'
|
import moment from 'moment'
|
import { TableOutlined, CloseCircleFilled } from '@ant-design/icons'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
const { Search } = Input
|
const { TabPane } = Tabs
|
|
class PopTable extends Component {
|
state = {
|
options: [],
|
searchKey: '',
|
pageIndex: 1,
|
pageSize: 10,
|
orderBy: '',
|
loading: false
|
}
|
|
timer = null
|
|
componentDidMount () {
|
const { config } = this.props
|
const { options } = this.state
|
|
if (config.onload === 'true' && options.length === 0) {
|
this.loadData()
|
}
|
}
|
|
loadData () {
|
const { BID, ID, config } = this.props
|
const { pageIndex, pageSize, searchKey, orderBy } = this.state
|
|
this.setState({
|
loading: true
|
})
|
|
let param = {
|
func: 'sPC_Get_TableData',
|
obj_name: 'data',
|
exec_type: window.GLOB.execType || 'y',
|
arr_field: config.arr_field,
|
default_sql: 'true',
|
custom_script: '',
|
menuname: config.label
|
}
|
|
let sql = ''
|
let DateCount = ''
|
let _search = ''
|
let _orderBy = orderBy || config.order || ''
|
let _datasource = config.dataSource
|
|
if (config.searchKey && searchKey) {
|
let fields = config.searchKey.split(',').map(field => field + ` like '%${searchKey}%'`)
|
_search = 'where ' + fields.join(' OR ')
|
}
|
|
_datasource = _datasource.replace(/@BID@/ig, `'${BID || ''}'`)
|
_datasource = _datasource.replace(/@ID@/ig, `'${ID || ''}'`)
|
|
if (config.laypage === 'true') {
|
sql = `/*system_query*/select top ${pageSize} ${config.arr_field} from (select ${config.arr_field} ,ROW_NUMBER() over(order by ${_orderBy}) as rows from ${_datasource} ${_search}) tmptable where rows > ${pageSize * (pageIndex - 1)} order by tmptable.rows `
|
DateCount = `/*system_query*/select count(1) as total from ${_datasource} ${_search}`
|
} else if (_orderBy) {
|
sql = `/*system_query*/select ${config.arr_field} from (select ${config.arr_field} ,ROW_NUMBER() over(order by ${_orderBy}) as rows from ${_datasource} ${_search}) tmptable order by tmptable.rows `
|
} else {
|
sql = `/*system_query*/select ${config.arr_field} from ${_datasource} ${_search} `
|
}
|
|
let departmentcode = sessionStorage.getItem('departmentcode') || ''
|
let organization = sessionStorage.getItem('organization') || ''
|
let mk_user_type = sessionStorage.getItem('mk_user_type') || ''
|
|
sql = `declare @mk_departmentcode nvarchar(512),@mk_organization nvarchar(512),@mk_user_type nvarchar(20)
|
Select @mk_departmentcode='${departmentcode}', @mk_organization='${organization}', @mk_user_type='${mk_user_type}'
|
${sql}`
|
|
// 测试系统打印查询语句
|
if (window.GLOB.debugger === true) {
|
console.info(`/*${config.label} 数据源*/\n` + sql.replace(/\n\s{6}/ig, '\n'))
|
DateCount && console.info(`/*${config.label} 总数查询*/\n` + DateCount.replace(/\n\s{6}/ig, '\n'))
|
}
|
|
param.LText = Utils.formatOptions(sql, param.exec_type)
|
param.DateCount = Utils.formatOptions(DateCount, param.exec_type)
|
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
param.secretkey = Utils.encrypt('', param.timestamp)
|
|
param.username = sessionStorage.getItem('User_Name') || ''
|
param.fullname = sessionStorage.getItem('Full_Name') || ''
|
|
Api.getSystemCacheConfig(param, config.cache === 'true').then(result => {
|
if (result.status) {
|
let options = result.data.map((item, index) => {
|
item.key = index
|
item.$$uuid = item[config.primaryKey] || ''
|
|
if (config.controlField && item[config.controlField] === 'true') {
|
item.$disabled = true
|
}
|
|
return item
|
})
|
|
this.setState({
|
options: options,
|
total: result.total || 0,
|
loading: false
|
})
|
|
if (result.message) {
|
if (result.ErrCode === 'Y') {
|
Modal.success({
|
title: result.message
|
})
|
} else if (result.ErrCode === 'S') {
|
notification.success({
|
top: 92,
|
message: result.message,
|
duration: 2
|
})
|
}
|
}
|
} else {
|
this.setState({
|
loading: false
|
})
|
|
if (!result.message) return
|
if (result.ErrCode === 'N') {
|
Modal.error({
|
title: result.message,
|
})
|
} else if (result.ErrCode !== '-2') {
|
notification.error({
|
top: 92,
|
message: result.message,
|
duration: 10
|
})
|
}
|
}
|
})
|
}
|
|
searchOption = (val) => {
|
this.setState({searchKey: val})
|
|
if (this.timer) {
|
clearTimeout(this.timer)
|
}
|
|
this.timer = setTimeout(() => {
|
this.loadData()
|
}, 500)
|
}
|
|
changeRow = (record) => {
|
if (record.$disabled) return
|
|
this.props.onChange(record)
|
}
|
|
changeTable = (pagination, filters, sorter) => {
|
let orderBy = ''
|
|
if (sorter.field && sorter.order) {
|
if (sorter.order === 'ascend') {
|
orderBy = `${sorter.field} asc`
|
} else {
|
orderBy = `${sorter.field} desc`
|
}
|
}
|
|
this.setState({
|
pageIndex: pagination.current,
|
pageSize: pagination.pageSize,
|
orderBy: orderBy,
|
}, () => {
|
this.loadData()
|
})
|
}
|
|
render() {
|
const { config, value } = this.props
|
const { options, loading, total, pageIndex, pageSize } = this.state
|
|
return <>
|
{config.searchKey ? <Search placeholder={config.placeholder} onSearch={this.searchOption} enterButton /> : null}
|
<Table
|
rowKey="$$uuid"
|
bordered={true}
|
rowSelection={null}
|
columns={config.cols}
|
dataSource={options}
|
loading={loading}
|
onRow={(record) => {
|
let className = ''
|
|
if (record.$disabled) {
|
className = ' mk-disable-line '
|
} else if (value === record.$$uuid) {
|
className = ' ant-table-row-selected '
|
}
|
|
return {
|
className: className,
|
onClick: () => {this.changeRow(record)},
|
}
|
}}
|
onChange={this.changeTable}
|
pagination={config.laypage === 'true' ? {
|
current: pageIndex,
|
pageSize: pageSize,
|
showSizeChanger: true,
|
total: total || 0,
|
showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条`
|
} : false}
|
/>
|
</>
|
}
|
}
|
|
class MKPopSelect extends Component {
|
constructor(props) {
|
super(props)
|
|
this.state = {
|
value: props.defaultValue,
|
visible: false
|
}
|
}
|
|
componentDidMount() {
|
const { autoFocus, config } = this.props
|
|
MKEmitter.addListener('setFocus' + config.tableId, this.setFocus)
|
|
if (autoFocus) {
|
this.trigger()
|
}
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('setFocus' + this.props.config.tableId, this.setFocus)
|
}
|
|
setFocus = (lId, colId) => {
|
const { config, lineId } = this.props
|
|
if (lId !== lineId || config.uuid !== colId) return
|
|
if (config.$ctrl) {
|
MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid)
|
}
|
|
this.setState({visible: true})
|
}
|
|
selectChange = (record) => {
|
const { config, lineId } = this.props
|
|
let values = {[config.field]: record.$$uuid}
|
|
if (config.linkSubField) {
|
config.linkSubField.forEach((m, i) => {
|
values[m] = record[m] !== undefined ? record[m] : ''
|
})
|
}
|
|
this.props.onChange(values, record.$$uuid)
|
|
this.setState({visible: false, value: record.$$uuid})
|
|
if (config.$ctrl) {
|
MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid)
|
}
|
|
this.props.onBlur && this.props.onBlur()
|
|
if (/\$noAct/.test(config.enter)) return
|
|
setTimeout(() => {
|
if (/\$next/.test(config.enter)) {
|
MKEmitter.emit('nextLine' + config.tableId, lineId, config.enter.replace('$next_', ''))
|
} else {
|
MKEmitter.emit('setFocus' + config.tableId, lineId, config.enter)
|
}
|
}, 10)
|
}
|
|
trigger = (e) => {
|
const { config, lineId } = this.props
|
|
e && e.stopPropagation()
|
|
if (config.$ctrl) {
|
MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid)
|
}
|
|
this.setState({visible: true})
|
}
|
|
clear = (e) => {
|
const { config, lineId } = this.props
|
|
e.stopPropagation()
|
|
let values = {[config.field]: ''}
|
|
if (config.linkSubField) {
|
config.linkSubField.forEach((m, i) => {
|
values[m] = ''
|
})
|
}
|
|
this.props.onChange(values, '')
|
this.setState({value: ''})
|
|
if (config.$ctrl) {
|
MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid)
|
}
|
}
|
|
cancel = () => {
|
const { config, lineId } = this.props
|
|
this.setState({visible: false})
|
|
if (config.$ctrl) {
|
MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid)
|
}
|
|
this.props.onBlur && this.props.onBlur()
|
}
|
|
render() {
|
const { autoFocus, BID, lineId, config } = this.props
|
const { value, visible } = this.state
|
|
return <>
|
{autoFocus ? <div className="mk-pop-select-mask" onClick={this.trigger}></div> : null}
|
<div className="mk-pop-select-wrap" onClick={this.trigger}>
|
{value}
|
{value && !autoFocus ? <CloseCircleFilled onClick={this.clear} /> : null}
|
<TableOutlined onClick={this.trigger}/>
|
</div>
|
<Modal
|
wrapClassName='mk-table-pop-select-modal'
|
title={config.label}
|
visible={visible}
|
closable={true}
|
centered={true}
|
maskClosable={false}
|
cancelText="关闭"
|
width={config.popWidth < 100 ? config.popWidth + 'vw' : config.popWidth}
|
onCancel={this.cancel}
|
destroyOnClose
|
>
|
{config.pops ? <Tabs>
|
{config.pops.map(tab => (
|
<TabPane tab={tab.tabName} key={tab.uuid}>
|
<PopTable config={tab} BID={BID} ID={lineId} value={value} onChange={this.selectChange}/>
|
</TabPane>
|
))}
|
</Tabs> :
|
<PopTable config={config} BID={BID} ID={lineId} value={value} onChange={this.selectChange}/>}
|
</Modal>
|
</>
|
}
|
}
|
|
export default MKPopSelect
|
