import React, {Component} from 'react'
|
import { is, fromJS } from 'immutable'
|
import { Select } from 'antd'
|
import { notification, Modal, Table, Input } from 'antd'
|
import moment from 'moment'
|
import { TableOutlined } 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
|
|
class MKPopSelect extends Component {
|
constructor(props) {
|
super(props)
|
|
let config = fromJS(props.config).toJS()
|
let value = config.initval
|
|
let arrfield = config.columns.map(f => f.field)
|
|
if (config.subFields && config.subFields.length > 0) {
|
config.subFields.forEach(n => {
|
if (!arrfield.includes(n.field)) {
|
arrfield.push(n.field)
|
}
|
})
|
}
|
|
if (sessionStorage.getItem('dataM') === 'true') { // 数据权限
|
config.dataSource = config.dataSource.replace(/\$@/ig, '/*').replace(/@\$/ig, '*/').replace(/@datam@/ig, '\'Y\'')
|
} else {
|
config.dataSource = config.dataSource.replace(/@\$|\$@/ig, '').replace(/@datam@/ig, '\'\'')
|
}
|
|
config.dataSource = config.dataSource.replace(/@LoginUID@/ig, `'${sessionStorage.getItem('LoginUID') || ''}'`)
|
config.dataSource = config.dataSource.replace(/@SessionUid@/ig, `'${localStorage.getItem('SessionUid') || ''}'`)
|
config.dataSource = config.dataSource.replace(/@UserID@/ig, `'${sessionStorage.getItem('UserID') || ''}'`)
|
config.dataSource = config.dataSource.replace(/@Appkey@/ig, `'${window.GLOB.appkey || ''}'`)
|
config.dataSource = config.dataSource.replace(/@lang@/ig, `'${sessionStorage.getItem('lang')}'`)
|
|
if (/\s/.test(config.dataSource)) { // 拼接别名
|
config.dataSource = '(' + config.dataSource + ') tb'
|
}
|
|
let columns = []
|
let labels = {}
|
config.columns.forEach(col => {
|
labels[col.field] = col.label
|
|
if (col.Hide === 'true') return
|
|
columns.push({
|
dataIndex: col.field,
|
title: col.label,
|
sorter: col.IsSort === 'true',
|
width: col.Width || 120
|
})
|
})
|
|
let placeholder = ''
|
if (!config.searchKey) {
|
config.onload = 'true'
|
} else {
|
placeholder = []
|
config.searchKey.split(',').forEach(key => {
|
if (!labels[key]) {
|
placeholder = ''
|
} else if (placeholder) {
|
placeholder.push(labels[key])
|
}
|
})
|
|
placeholder = placeholder ? placeholder.join('、') : ''
|
}
|
|
this.state = {
|
config: config,
|
options: [],
|
columns,
|
value,
|
showValue: config.showValue,
|
placeholder,
|
arr_field: arrfield.join(','),
|
searchKey: '',
|
pageIndex: 1,
|
pageSize: 10,
|
orderBy: '',
|
visible: false,
|
loading: false
|
}
|
|
this.timer = null
|
}
|
|
componentDidMount () {
|
const { config } = this.state
|
|
if (config.onload === 'true') {
|
this.loadData()
|
}
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
loadData () {
|
const { BID, ID } = this.props
|
const { config, pageIndex, pageSize, arr_field, searchKey, orderBy } = this.state
|
|
this.setState({
|
loading: true
|
})
|
|
let param = null
|
if (window.backend && window.GLOB.CacheData.has('sql_' + config.uuid)) {
|
let ex = window.GLOB.CacheData.get('sql_' + config.uuid)
|
let sysvals = {
|
time_id: Utils.getguid(),
|
mk_departmentcode: sessionStorage.getItem('departmentcode') || '',
|
mk_organization: sessionStorage.getItem('organization') || '',
|
mk_user_type: sessionStorage.getItem('mk_user_type') || '',
|
id: ID || '',
|
bid: BID || '',
|
datam: sessionStorage.getItem('dataM') === 'true' ? 'Y' : '',
|
datam_begin: sessionStorage.getItem('dataM') === 'true' ? 'Y' : '',
|
datam_end: sessionStorage.getItem('dataM') === 'true' ? 'Y' : '',
|
orderby: orderBy || config.order || '',
|
pagesize: config.laypage === 'true' ? pageSize : '9999',
|
pageindex: pageIndex
|
}
|
if (window.GLOB.externalDatabase !== null) {
|
sysvals.db = window.GLOB.externalDatabase
|
}
|
|
let exps = []
|
|
if (config.searchKey) {
|
if (!searchKey) {
|
exps.push({
|
key: 'mk_search',
|
value: []
|
})
|
} else {
|
exps.push({
|
key: 'mk_search',
|
value: [{
|
key: config.searchKey,
|
match: '01',
|
type: /,/.test(config.searchKey) ? 'text_or' : 'text',
|
value: searchKey
|
}]
|
})
|
}
|
config.searchKey.split(',').forEach(key => {
|
sysvals[key.toLowerCase()] = searchKey || ''
|
})
|
}
|
|
ex.reps.forEach(n => {
|
let key = n.toLowerCase()
|
if (sysvals.hasOwnProperty(key)) {
|
exps.push({
|
key: n,
|
value: sysvals[key]
|
})
|
}
|
})
|
|
param = {
|
$backend: true,
|
$type: 's_Get_TableData',
|
data: [{
|
id: ex.id,
|
menuname: config.label || '',
|
exps: exps,
|
md5_id: ''
|
}]
|
}
|
} else {
|
param = {
|
func: 'sPC_Get_TableData',
|
obj_name: 'data',
|
exec_type: window.GLOB.execType || 'y',
|
arr_field: 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} ${arr_field} from (select ${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 ${arr_field} from (select ${arr_field} ,ROW_NUMBER() over(order by ${_orderBy}) as rows from ${_datasource} ${_search}) tmptable order by tmptable.rows `
|
} else {
|
sql = `/*system_query*/select ${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) {
|
window.mkInfo(`/*${config.label} 数据源*/\n` + sql.replace(/\n\s{6}/ig, '\n'))
|
DateCount && window.mkInfo(`/*${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.genericInterface(param).then(result => {
|
if (result.status) {
|
let options = result.data.map((item, index) => {
|
item.key = index
|
item.$$uuid = item[config.primaryKey] || ''
|
item.$label = item[config.showField]
|
|
if (config.controlField && item[config.controlField] === 'true') {
|
item.$disabled = true
|
}
|
|
return item
|
})
|
|
let showValue = this.state.showValue
|
|
if (showValue) {
|
if (options.findIndex(item => this.state.value === item.$$uuid) > -1) {
|
showValue = ''
|
}
|
}
|
|
this.setState({
|
showValue,
|
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)
|
}
|
|
selectChange = (val, record) => {
|
const { config } = this.state
|
let other = {}
|
|
if (config.subFields) {
|
let option = record || null
|
|
if (!option) {
|
option = this.state.options.filter(m => m.$$uuid === val)[0]
|
}
|
|
option && config.subFields.forEach((n, i) => {
|
other[n.field] = option[n.field]
|
setTimeout(() => {
|
MKEmitter.emit('mkFC', 'input', n.uuid, option[n.field])
|
}, i * 5)
|
})
|
}
|
|
if (config.linkFields) {
|
config.linkFields.forEach((m, i) => {
|
setTimeout(() => {
|
MKEmitter.emit('mkFP', m.uuid, val, 0)
|
}, (i + 1) * 100)
|
})
|
}
|
|
this.props.onChange(val, other)
|
this.setState({value: val, showValue: ''}, () => {
|
if (config.enter === 'tab') {
|
MKEmitter.emit('mkFC', 'focus', config.tabUuid)
|
} else if (config.enter === 'sub') {
|
config.tabUuid && MKEmitter.emit('mkFC', 'focus', config.tabUuid)
|
if (config.subFields) {
|
setTimeout(() => {
|
this.props.onSubmit(config.tabUuid)
|
}, 1000)
|
} else {
|
this.props.onSubmit(config.tabUuid)
|
}
|
}
|
})
|
}
|
|
trigger = (e) => {
|
e.stopPropagation()
|
|
this.setState({visible: true})
|
}
|
|
changeRow = (record) => {
|
|
if (record.$disabled) return
|
|
this.selectChange(record.$$uuid, record)
|
this.setState({visible: false})
|
}
|
|
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 { value, showValue, config, options, visible, loading, total, pageIndex, pageSize, columns, placeholder, searchKey } = this.state
|
|
return <>
|
<Select
|
className="mk-pop-select"
|
showSearch={!!config.searchKey}
|
allowClear
|
value={showValue || value}
|
onSearch={(val) => val && this.searchOption(val)}
|
filterOption={false}
|
onChange={(val) => this.selectChange(val === undefined ? '' : val)}
|
disabled={config.readonly}
|
suffixIcon={<TableOutlined onClick={this.trigger}/>}
|
>
|
{options.map(option =>
|
<Select.Option disabled={option.$disabled} key={option.key} value={option.$$uuid}>{option.$label}</Select.Option>
|
)}
|
</Select>
|
<Modal
|
wrapClassName='mk-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.setState({visible: false})}
|
destroyOnClose
|
>
|
{config.searchKey ? <Search placeholder={placeholder} defaultValue={searchKey} onSearch={this.searchOption} enterButton /> : null}
|
<Table
|
rowKey="$$uuid"
|
bordered={true}
|
rowSelection={null}
|
columns={columns}
|
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}
|
/>
|
</Modal>
|
</>
|
}
|
}
|
|
export default MKPopSelect
|
