import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Button, Modal, Empty, notification } from 'antd'
|
|
import Utils from '@/utils/utils.js'
|
import zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.js'
|
import EditCard from './editcard'
|
|
import './index.scss'
|
|
// **悲观者往往正确，乐观者往往成功
|
class FieldsComponent extends Component {
|
static propTpyes = {
|
type: PropTypes.string, // 搜索条件添加、显示列添加
|
config: PropTypes.object, // 容器Id
|
tableFields: PropTypes.string, // 已选表字段集
|
updatefield: PropTypes.func
|
}
|
|
state = {
|
dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
|
fields: [], // 字段集
|
tableVisible: false, // 模态框控制
|
}
|
|
queryField = () => {
|
const { type, config, tableFields } = this.props
|
// 判断是否已选择表名
|
if (!config.tables || config.tables.length === 0) {
|
notification.warning({
|
top: 92,
|
message: '请选择表名！',
|
duration: 5
|
})
|
return
|
}
|
|
// 表字段集转为map数据
|
let columns = new Map()
|
tableFields.forEach(table => {
|
table.columns.forEach(column => {
|
columns.set(column.field, column)
|
})
|
})
|
|
if (type === 'search') {
|
// 添加搜索条件，字段集中存在搜索条件字段，使用搜索条件对象替换字段集，设置数据类型
|
config.search.forEach(item => {
|
if (columns.has(item.field)) {
|
let _datatype = columns.get(item.field).datatype
|
columns.set(item.field, {...item, selected: true, datatype: _datatype})
|
}
|
})
|
} else if (type === 'columns') {
|
// 添加显示列，字段集中存在显示列字段，使用显示列对象替换字段集，设置数据类型
|
config.columns.forEach(item => {
|
if (columns.has(item.field)) {
|
let _datatype = columns.get(item.field).datatype
|
columns.set(item.field, {...item, selected: true, datatype: _datatype})
|
}
|
})
|
}
|
|
// 显示字段集弹窗
|
this.setState({
|
tableVisible: true,
|
fields: [...columns.values()]
|
})
|
}
|
|
addFieldSubmit = () => {
|
const { type } = this.props
|
// 字段集为空，关闭弹窗
|
if (!this.state.fields || this.state.fields.length === 0) {
|
this.setState({
|
tableVisible: false
|
})
|
}
|
|
let config = fromJS(this.props.config).toJS()
|
|
// 获取已选字段集合
|
let cards = this.refs.searchcard.state.selectCards
|
let columnsMap = new Map()
|
cards.forEach(card => {
|
columnsMap.set(card.field, card)
|
})
|
|
let items = []
|
if (type === 'search') {
|
config.search.forEach(item => {
|
if (columnsMap.has(item.field)) {
|
let cell = columnsMap.get(item.field)
|
|
if (cell.selected && cell.type === item.type) { // 数据未修改
|
items.push(item)
|
} else if (cell.selected) { // 数据类型修改
|
if (cell.type === 'select') {
|
item.match = '='
|
} else if (cell.type === 'daterange') {
|
item.match = 'between'
|
} else {
|
cell.type = 'text'
|
item.match = 'like'
|
}
|
|
item.type = cell.type
|
item.initval = ''
|
items.push(item)
|
}
|
columnsMap.delete(item.field)
|
} else if (!item.origin) {
|
items.push(item)
|
}
|
})
|
|
let _columns = [...columnsMap.values()]
|
|
_columns.forEach(item => {
|
if (item.selected) {
|
let _match = ''
|
if (item.type === 'select') {
|
_match = '='
|
} else if (item.type === 'daterange') {
|
_match = 'between'
|
} else {
|
item.type = 'text'
|
_match = 'like'
|
}
|
|
let newcard = {
|
uuid: Utils.getuuid(),
|
label: item.label,
|
field: item.field,
|
initval: '',
|
type: item.type,
|
resourceType: '0',
|
setAll: 'false',
|
options: [],
|
dataSource: '',
|
linkField: '',
|
valueField: '',
|
valueText: '',
|
orderBy: '',
|
orderType: 'asc',
|
match: _match,
|
display: 'dropdown'
|
}
|
|
items.push(newcard)
|
}
|
})
|
} else if (type === 'columns') {
|
config.columns.forEach(item => {
|
if (columnsMap.has(item.field)) {
|
let cell = columnsMap.get(item.field)
|
|
if (cell.selected) {
|
items.push(item)
|
}
|
columnsMap.delete(item.field)
|
} else if (!item.origin) {
|
items.push(item)
|
}
|
})
|
|
let _columns = [...columnsMap.values()]
|
|
_columns.forEach(item => {
|
if (item.selected) {
|
let newcard = {
|
uuid: Utils.getuuid(),
|
Align: 'left',
|
label: item.label,
|
field: item.field,
|
Hide: 'false',
|
IsSort: item.type === 'picture' ? 'false' : 'true',
|
type: item.type,
|
Width: 120
|
}
|
|
items.push(newcard)
|
}
|
})
|
}
|
|
let _config = null
|
|
if (type === 'search') {
|
_config = {...this.props.config, search: items}
|
} else if (type === 'columns') {
|
_config = {...this.props.config, columns: items}
|
}
|
|
if (_config) {
|
this.props.updatefield(_config)
|
|
notification.success({
|
top: 92,
|
message: '操作成功',
|
duration: 2
|
})
|
}
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
render() {
|
const { type } = this.props
|
const { dict, fields } = this.state
|
|
let label = ''
|
if (type === 'search') {
|
label = dict['header.menu.search.add']
|
} else if (type === 'columns') {
|
label = dict['header.menu.column.add']
|
}
|
|
return (
|
<div>
|
<Button type="primary" block onClick={this.queryField}>{label}</Button>
|
{/* 根据字段名添加显示列及搜索条件 */}
|
<Modal
|
wrapClassName="model-table-fieldmanage-modal"
|
title={dict['model.edit']}
|
visible={this.state.tableVisible}
|
width={'65vw'}
|
maskClosable={false}
|
style={{minWidth: '900px', maxWidth: '1200px'}}
|
cancelText={dict['header.close']}
|
onOk={this.addFieldSubmit}
|
onCancel={() => { // 取消添加
|
this.setState({
|
tableVisible: false
|
})
|
}}
|
destroyOnClose
|
>
|
{fields.length > 0 ?
|
<EditCard data={fields} ref="searchcard" type={type} dict={dict} /> : null
|
}
|
{(!fields || fields.length === 0) &&
|
<Empty />
|
}
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default FieldsComponent
|
