import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Modal, notification, Popconfirm } from 'antd'
|
import { ApartmentOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons'
|
|
import Utils from '@/utils/utils.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import MarkForm from './markform'
|
import './index.scss'
|
|
const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))
|
const { confirm } = Modal
|
|
class ColsControl extends Component {
|
static propTpyes = {
|
config: PropTypes.object,
|
onSubmit: PropTypes.func
|
}
|
|
state = {
|
searches: [],
|
visible: false,
|
colsCtrls: [],
|
cols: [],
|
svalues: {},
|
cvalues: {},
|
columns: [
|
{
|
title: '字段',
|
dataIndex: 'field',
|
width: '18%'
|
},
|
{
|
title: '对比方式',
|
dataIndex: 'match',
|
width: '18%',
|
},
|
{
|
title: '对比值',
|
dataIndex: 'contrastValue',
|
width: '18%',
|
},
|
{
|
title: '显示列',
|
dataIndex: 'cols',
|
width: '24%',
|
render: text => {
|
return text.length
|
}
|
},
|
{
|
title: '操作',
|
align: 'center',
|
width: '18%',
|
dataIndex: 'operation',
|
render: (text, record) =>
|
(<div style={{textAlign: 'center', cursor: 'default'}}>
|
<span title="编辑" onClick={() => this.handleEdit(record)} style={{color: '#1890ff', marginRight: '15px', cursor: 'pointer'}}><EditOutlined /></span>
|
<Popconfirm
|
overlayClassName="popover-confirm"
|
title="确定删除吗?"
|
onConfirm={() => this.handleDelete(record)
|
}>
|
<span style={{color: '#ff4d4f', cursor: 'pointer'}}><DeleteOutlined /></span>
|
</Popconfirm>
|
</div>)
|
}
|
]
|
}
|
|
handleEdit = (record) => {
|
this.customForm.edit(record)
|
}
|
|
markChange = (values) => {
|
let colsCtrls = fromJS(this.state.colsCtrls).toJS()
|
|
let has = false
|
|
if (!values.uuid) {
|
colsCtrls.forEach(item => {
|
if (item.field.join('') === values.field.join('') && item.match === values.match && item.contrastValue === values.contrastValue) {
|
has = true
|
}
|
})
|
|
values.uuid = Utils.getuuid()
|
colsCtrls.push(values)
|
} else {
|
colsCtrls = colsCtrls.map(item => {
|
if (values.uuid === item.uuid) {
|
return values
|
}
|
|
if (item.field.join('') === values.field.join('') && item.match === values.match && item.contrastValue === values.contrastValue) {
|
has = true
|
}
|
|
return item
|
})
|
}
|
|
if (has) {
|
notification.warning({
|
top: 92,
|
message: '此设置已存在！',
|
duration: 5
|
})
|
return
|
}
|
|
this.setState({
|
colsCtrls: colsCtrls
|
})
|
}
|
|
handleDelete = (record) => {
|
const { colsCtrls } = this.state
|
|
this.setState({ colsCtrls: colsCtrls.filter(item => item.uuid !== record.uuid) })
|
}
|
|
resetMark = () => {
|
const { config } = this.props
|
const { columns } = this.state
|
|
let search = config.search || []
|
|
if (config.setting.useMSearch === 'true') { // 使用主搜索条件
|
let menu = fromJS(window.GLOB.customMenu).toJS()
|
|
let filterComponent = (box, mainSearch) => {
|
box.components.forEach(item => {
|
if (item.type !== 'search') return
|
mainSearch = item.search
|
})
|
let has = false
|
box.components.forEach(item => {
|
if (item.uuid === config.uuid) {
|
has = true
|
} else if (item.type === 'group') {
|
item.components.forEach(m => {
|
if (m.uuid !== config.uuid) return
|
has = true
|
})
|
}
|
})
|
|
if (has) {
|
search = [...search, ...(mainSearch || [])]
|
} else {
|
box.components.forEach(item => {
|
if (item.type !== 'tabs') return
|
|
item.subtabs.forEach(tab => {
|
filterComponent(tab, mainSearch)
|
})
|
})
|
}
|
}
|
filterComponent(menu, null)
|
}
|
|
let cvalues = {}
|
let cols = config.cols.map(item => {
|
let types = {custom: '自定义列', colspan: '合并列'}
|
let label = types[item.type] ? `${item.label}（${types[item.type]}）` : item.label
|
|
cvalues[item.uuid] = label
|
|
return {
|
key: item.uuid,
|
title: label
|
}
|
})
|
|
let searches = [{value: 'BID', label: 'BID'}]
|
let svalues = {BID: 'BID'}
|
search.forEach(item => {
|
if (!item.field || item.type === 'group') return
|
|
svalues[item.field] = item.label
|
searches.push({value: item.field, label: item.label})
|
})
|
|
let colsCtrls = fromJS(config.colsCtrls || []).toJS()
|
colsCtrls = colsCtrls.map(col => {
|
col.cols = col.cols.filter(f => !!cvalues[f])
|
return col
|
})
|
|
this.setState({
|
cols,
|
svalues,
|
columns: columns.map(col => {
|
if (col.dataIndex === 'field') {
|
col.render = (text) => {
|
return text.map(cell => svalues[cell] || cell).join('、')
|
}
|
} else if (col.dataIndex === 'cols') {
|
col.render = (text) => {
|
return text.map(cell => cvalues[cell] || cell).join('、')
|
}
|
}
|
|
return col
|
}),
|
visible: true,
|
searches: searches,
|
colsCtrls: colsCtrls
|
})
|
}
|
|
markSubmit = () => {
|
const { config } = this.props
|
const { colsCtrls, svalues } = this.state
|
|
let _config = fromJS(config).toJS()
|
let s = []
|
let c = []
|
|
colsCtrls.forEach((col, index) => {
|
if (col.field.findIndex(f => !svalues[f]) > -1) {
|
s.push(index + 1)
|
}
|
if (col.cols.length === 0) {
|
c.push(index + 1)
|
}
|
})
|
|
if (c.length > 0) {
|
Modal.warning({
|
title: `第 ${c.join('、')} 行中显示列不可为空。`,
|
okText: '知道了'
|
})
|
return
|
}
|
|
_config.colsCtrls = colsCtrls
|
|
if (this.customForm && this.customForm.state.editItem) {
|
const _this = this
|
let title = '存在未保存项，确定忽略吗？'
|
if (s.length > 0) {
|
title = `存在未保存项，且第 ${s.join('、')} 行中字段在搜索条件中不存在，确定忽略吗？`
|
}
|
confirm({
|
title: title,
|
onOk() {
|
_this.setState({ visible: false })
|
_this.props.onSubmit(_config)
|
},
|
onCancel() {}
|
})
|
} else if (s.length > 0) {
|
const _this = this
|
confirm({
|
title: `第 ${s.join('、')} 行中字段在搜索条件中不存在，确定忽略吗？`,
|
onOk() {
|
_this.setState({ visible: false })
|
_this.props.onSubmit(_config)
|
},
|
onCancel() {}
|
})
|
} else {
|
this.setState({
|
visible: false
|
})
|
this.props.onSubmit(_config)
|
}
|
}
|
|
render() {
|
const { config } = this.props
|
const { colsCtrls, columns, visible, cols, searches } = this.state
|
|
let className = ''
|
if (config.colsCtrls && config.colsCtrls.length) {
|
className = 'cols-ctrls'
|
}
|
|
return (
|
<div style={{display: 'inline-block'}} className={className}>
|
<ApartmentOutlined style={{color: '#13c2c2'}} title="显示列控制" onClick={this.resetMark} />
|
<Modal
|
wrapClassName="column-control-modal-wrap"
|
title="显示列控制"
|
visible={visible}
|
width={'75vw'}
|
maskClosable={false}
|
okText="提交"
|
onOk={this.markSubmit}
|
onCancel={() => { this.setState({ visible: false }) }}
|
destroyOnClose
|
>
|
<MarkForm columns={cols} searches={searches} markChange={this.markChange} wrappedComponentRef={(inst) => this.customForm = inst}/>
|
<EditTable actions={['edit', 'move', 'del']} data={colsCtrls} columns={columns} onChange={(colsCtrls) => this.setState({colsCtrls})}/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default ColsControl
|
