import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Button, Modal, Empty, notification } from 'antd'
|
|
import Utils from '@/utils/utils.js'
|
import EditCard from './editcard'
|
|
import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
class FieldsComponent extends Component {
|
static propTpyes = {
|
type: PropTypes.string, // 搜索条件添加、显示列添加
|
config: PropTypes.object, // 容器Id
|
updatefield: PropTypes.func
|
}
|
|
state = {
|
appType: sessionStorage.getItem('appType'),
|
fields: [], // 字段集
|
visible: false, // 模态框控制
|
selectCards: []
|
}
|
|
queryField = () => {
|
const { type, config } = this.props
|
// 判断是否已选择表名
|
if (!window.GLOB.tableFields || window.GLOB.tableFields.length === 0) {
|
notification.warning({
|
top: 92,
|
message: '请选择表名！',
|
duration: 5
|
})
|
return
|
}
|
|
// 表字段集转为map数据
|
let columns = new Map()
|
window.GLOB.tableFields.forEach(table => {
|
table.columns.forEach(column => {
|
columns.set(column.field.toLowerCase(), column)
|
})
|
})
|
|
if (type === 'search') {
|
// 添加搜索条件，字段集中存在搜索条件字段，使用搜索条件对象替换字段集，设置数据类型
|
config.search.forEach(item => {
|
if (item.field && columns.has(item.field.toLowerCase())) {
|
let _datatype = columns.get(item.field.toLowerCase()).datatype
|
columns.set(item.field.toLowerCase(), {...item, origin: true, datatype: _datatype})
|
}
|
})
|
} else if (type === 'columns') {
|
// 添加显示列，字段集中存在显示列字段，使用显示列对象替换字段集，设置数据类型
|
config.columns.forEach(item => {
|
if (item.field && columns.has(item.field.toLowerCase())) {
|
let _datatype = columns.get(item.field.toLowerCase()).datatype
|
columns.set(item.field.toLowerCase(), {...item, origin: true, datatype: _datatype})
|
}
|
})
|
} else if (type === 'fields') {
|
config.columns.forEach(item => {
|
if (columns.has(item.field.toLowerCase())) {
|
let _datatype = columns.get(item.field.toLowerCase()).datatype
|
columns.set(item.field.toLowerCase(), {...item, origin: true, datatype: _datatype})
|
}
|
})
|
} else if (type === 'form') {
|
config.fields.forEach(item => {
|
if (item.field && columns.has(item.field.toLowerCase())) {
|
let _datatype = columns.get(item.field.toLowerCase()).datatype
|
columns.set(item.field.toLowerCase(), {...item, origin: true, datatype: _datatype})
|
}
|
})
|
}
|
|
// 显示字段集弹窗
|
this.setState({
|
visible: true,
|
selectCards: [],
|
fields: [...columns.values()]
|
})
|
}
|
|
addFieldSubmit = () => {
|
const { type } = this.props
|
const { selectCards, fields } = this.state
|
// 字段集为空，关闭弹窗
|
if (!fields || fields.length === 0) {
|
this.setState({ visible: false })
|
}
|
|
let config = fromJS(this.props.config).toJS()
|
|
// 获取已选字段集合
|
let cards = selectCards
|
let columnsMap = new Map()
|
cards.forEach(card => {
|
columnsMap.set(card.field.toLowerCase(), card)
|
})
|
|
let items = []
|
let keys = []
|
if (type === 'search') {
|
selectCards.forEach(item => {
|
let _match = ''
|
let initval = ''
|
if (item.type === 'select') {
|
_match = '='
|
} else {
|
item.type = 'text'
|
_match = 'like'
|
}
|
|
let newcard = {
|
uuid: Utils.getuuid(),
|
label: item.label,
|
field: item.field,
|
initval: initval,
|
type: item.type,
|
resourceType: '0',
|
options: [],
|
orderType: 'asc',
|
match: _match,
|
}
|
|
items.push(newcard)
|
keys.push(item.field.toLowerCase())
|
})
|
MKEmitter.emit('plusSearch', config.uuid, items, 'multil')
|
} else if (type === 'columns') {
|
selectCards.forEach(item => {
|
let newcard = {
|
uuid: Utils.getuuid(),
|
Align: 'left',
|
label: item.label,
|
field: item.field,
|
Hide: 'false',
|
IsSort: 'true',
|
type: item.type,
|
Width: item.type === 'number' ? 80 : 120
|
}
|
|
if (item.type === 'number') {
|
newcard.decimal = item.decimal
|
} else {
|
newcard.fieldlength = item.length || 50
|
}
|
|
items.push(newcard)
|
keys.push(item.field.toLowerCase())
|
})
|
MKEmitter.emit('plusColumns', config.uuid, items)
|
} else if (type === 'fields') {
|
items = [...config.columns]
|
|
selectCards.forEach(item => {
|
let _t = item.$datatype || (item.type === 'number' ? 'Decimal(18,0)' : 'Nvarchar(50)')
|
let newcard = {
|
uuid: Utils.getuuid(),
|
label: item.label,
|
field: item.field,
|
datatype: _t
|
}
|
items.push(newcard)
|
keys.push(item.field.toLowerCase())
|
})
|
|
this.props.updatefield(items)
|
} else if (type === 'form') {
|
let firstItem = config.fields[0]
|
let span = this.state.appType === 'mob' ? 24 : 12
|
let labelwidth = 33.3
|
if (firstItem && firstItem.span) {
|
span = firstItem.span
|
labelwidth = firstItem.labelwidth || 33.3
|
}
|
selectCards.forEach(item => { // 循环添加新增字段
|
let newcard = {
|
uuid: Utils.getuuid(),
|
label: item.label,
|
field: item.field,
|
initval: item.type === 'number' ? 0 : '',
|
type: item.type,
|
resourceType: '0',
|
span: span,
|
labelwidth: labelwidth,
|
options: [],
|
dataSource: '',
|
decimal: item.decimal,
|
orderType: 'asc',
|
readonly: 'false',
|
required: 'true'
|
}
|
|
if (item.type === 'text' && item.length >= 256) {
|
newcard.type = 'textarea'
|
newcard.fieldlength = item.length
|
if (firstItem) {
|
if (firstItem.type === newcard.type) {
|
newcard.span = firstItem.span
|
newcard.labelwidth = firstItem.labelwidth
|
} else {
|
newcard.span = 24
|
if (firstItem.span === 12) {
|
newcard.labelwidth = 16.2
|
} else if (firstItem.span === 8) {
|
newcard.labelwidth = 10.5
|
} else if (firstItem.span === 6) {
|
newcard.labelwidth = 7.7
|
}
|
}
|
} else {
|
newcard.span = 24
|
newcard.labelwidth = 16.2
|
}
|
}
|
|
items.push(newcard)
|
keys.push(item.field.toLowerCase())
|
})
|
|
this.props.plusFields(items)
|
}
|
|
this.setState({
|
selectCards: [],
|
fields: fromJS(fields).toJS().map(cell => {
|
if (keys.includes(cell.field.toLowerCase())) {
|
cell.origin = true
|
}
|
return cell
|
})
|
})
|
|
notification.success({
|
top: 92,
|
message: '操作成功',
|
duration: 2
|
})
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
onChange = (selectCards) => {
|
this.setState({selectCards})
|
}
|
|
render() {
|
const { type } = this.props
|
const { fields } = this.state
|
|
return (
|
<div className="quickly-add">
|
<Button type="primary" block onClick={this.queryField}>批量添加</Button>
|
{/* 根据字段名添加显示列及搜索条件 */}
|
<Modal
|
wrapClassName="model-table-fieldmanage-modal"
|
title="编辑"
|
visible={this.state.visible}
|
width={'65vw'}
|
maskClosable={false}
|
cancelText="关闭"
|
onOk={this.addFieldSubmit}
|
onCancel={() => this.setState({ visible: false })}
|
destroyOnClose
|
>
|
{fields.length > 0 ? <EditCard data={fields} onChange={this.onChange} type={type} /> : <Empty />}
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default FieldsComponent
|
