import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Table, Popconfirm } from 'antd'
|
import { EditOutlined, DeleteOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons'
|
|
import Utils from '@/utils/utils.js'
|
import MarkForm from './markform'
|
import MkIcon from '@/components/mk-icon'
|
import './index.scss'
|
import '@/assets/css/table.scss'
|
|
class MarkColumn extends Component {
|
static propTpyes = {
|
columns: PropTypes.array, // 显示列
|
card: PropTypes.object,
|
}
|
|
state = {
|
marks: null,
|
columns: null,
|
markColumns: [
|
{
|
title: '字段',
|
dataIndex: 'field',
|
width: '20%',
|
render: (text, record) => {
|
let item = this.props.columns.filter(col => col.field === record.field)[0]
|
if (item) {
|
return item.label + '（' + item.field + '）'
|
} else {
|
return ''
|
}
|
}
|
},
|
{
|
title: '对比类型',
|
dataIndex: 'contrastType',
|
width: '15%',
|
render: (text, record) => {
|
if (record.contrastType === 'static') {
|
return '静态'
|
} else {
|
return '动态'
|
}
|
}
|
},
|
{
|
title: '对比值/字段',
|
dataIndex: 'contrastValue',
|
width: '20%',
|
render: (text, record) => {
|
if (record.contrastType === 'static') {
|
return '对比值: ' + text
|
} else {
|
let item = this.props.columns.filter(col => col.field === record.contrastField)[0]
|
if (item) {
|
return '字段: ' + item.label + '（' + item.field + '）'
|
} else {
|
return ''
|
}
|
}
|
}
|
},
|
{
|
title: '对比方式',
|
dataIndex: 'match',
|
width: '12%'
|
},
|
{
|
title: '标记效果',
|
dataIndex: 'signType',
|
width: '13%',
|
render: (text, record) => {
|
let item = this.props.columns.filter(col => col.field === record.field)[0]
|
if (!item) return ''
|
|
let content = ''
|
if (item.type === 'text') {
|
content = '文本'
|
} else {
|
content = Math.ceil(Math.random() * 100) * 10
|
}
|
|
let _outerclass = ''
|
if (record.signType === 'font') {
|
_outerclass = 'font ' + record.color[1]
|
} else if (record.signType === 'background') {
|
_outerclass = 'background ' + record.color[1]
|
} else if (record.signType === 'card') {
|
_outerclass = 'background ' + record.color[1]
|
content = '效果在卡片中可见'
|
} else if (record.signType === 'icon') {
|
if (record.position === 'front') {
|
content = <div><MkIcon className={'font ' + record.color[1]} type={record.icon} /> {content} </div>
|
} else {
|
content = <div> {content} <MkIcon className={'font ' + record.color[1]} type={record.icon} /> </div>
|
}
|
}
|
|
return <div className={_outerclass}>
|
<div className="baseboard"></div>
|
<div className="content">
|
{content}
|
</div>
|
</div>
|
}
|
},
|
{
|
title: '操作',
|
align: 'center',
|
dataIndex: 'operation',
|
render: (text, record) =>
|
(
|
<div>
|
<span className="operation-btn" onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><EditOutlined /></span>
|
<span className="operation-btn" onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><ArrowUpOutlined /></span>
|
<span className="operation-btn" onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><ArrowDownOutlined /></span>
|
<Popconfirm
|
overlayClassName="popover-confirm"
|
onConfirm={() => this.handleDelete(record)
|
}>
|
<span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span>
|
</Popconfirm>
|
</div>
|
)
|
}
|
]
|
}
|
|
UNSAFE_componentWillMount() {
|
const { columns, card } = this.props
|
|
this.setState({
|
columns: columns.filter(col => col.type === 'text' || col.type === 'number'),
|
marks: card.marks ? fromJS(card.marks).toJS() : []
|
})
|
}
|
|
markChange = (values) => {
|
let _marks = fromJS(this.state.marks).toJS()
|
|
if (values.uuid) {
|
_marks = _marks.map(item => {
|
if (item.uuid === values.uuid) {
|
return values
|
} else {
|
return item
|
}
|
})
|
} else {
|
values.uuid = Utils.getuuid()
|
_marks.push(values)
|
}
|
|
this.setState({
|
marks: _marks
|
})
|
}
|
|
handleDelete = (record) => {
|
const { marks } = this.state
|
|
let _marks = marks.filter(item => item.uuid !== record.uuid)
|
|
this.setState({ marks: _marks })
|
}
|
|
handleEdit = (record) => {
|
this.markForm.edit(record)
|
|
let node = document.getElementById('mark-column-box-modal').parentNode
|
|
if (node && node.scrollTop) {
|
let inter = Math.ceil(node.scrollTop / 10)
|
|
let timer = setInterval(() => {
|
if (node.scrollTop - inter > 0) {
|
node.scrollTop = node.scrollTop - inter
|
} else {
|
node.scrollTop = 0
|
clearInterval(timer)
|
}
|
}, 10)
|
}
|
}
|
|
handleUpDown = (record, direction) => {
|
let _marks = fromJS(this.state.marks).toJS()
|
let index = 0
|
|
_marks = _marks.filter((item, i) => {
|
if (item.uuid === record.uuid) {
|
index = i
|
}
|
|
return item.uuid !== record.uuid
|
})
|
if ((index === 0 && direction === 'up') || (index === _marks.length && direction === 'down')) {
|
return
|
}
|
|
if (direction === 'up') {
|
_marks.splice(index - 1, 0, record)
|
} else {
|
_marks.splice(index + 1, 0, record)
|
}
|
|
this.setState({
|
marks: _marks
|
})
|
}
|
|
render() {
|
const { card } = this.props
|
const { marks, markColumns, columns } = this.state
|
|
return (
|
<div id="mark-column-box-modal" className="">
|
<MarkForm
|
card={card}
|
columns={columns}
|
markChange={this.markChange}
|
wrappedComponentRef={(inst) => this.markForm = inst}
|
/>
|
<Table
|
bordered
|
rowKey="uuid"
|
className="mingke-table"
|
dataSource={marks}
|
rowClassName={(record) => record.signType === 'line' ? 'mk-table-line background ' + record.color[1] : ''}
|
columns={markColumns}
|
pagination={false}
|
/>
|
</div>
|
)
|
}
|
}
|
|
export default MarkColumn
|
