import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Modal, Col } from 'antd'
|
import { AntDesignOutlined } from '@ant-design/icons'
|
|
import Utils from '@/utils/utils.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import MarkForm from './markform'
|
import MkIcon from '@/components/mk-icon'
|
import { minkeIconSystem } from '@/utils/option.js'
|
import zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.js'
|
import '@/assets/css/table.scss'
|
import './index.scss'
|
|
const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))
|
const { confirm } = Modal
|
|
class MarkColumn extends Component {
|
static propTpyes = {
|
field: PropTypes.any,
|
columns: PropTypes.array, // 显示列
|
marks: PropTypes.object,
|
onSubmit: PropTypes.func
|
}
|
|
state = {
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
marks: null,
|
columns: null,
|
visible: false,
|
markColumns: [
|
{
|
title: '对比字段',
|
dataIndex: 'field',
|
width: '16%',
|
editable: true,
|
inputType: 'cascader',
|
options: [],
|
render: text => {
|
return (
|
<div>{text[0]} VS {text[2] ? text[2] : '静态值'}</div>
|
)
|
}
|
},
|
{
|
title: '对比方式',
|
dataIndex: 'match',
|
width: '16%',
|
editable: true,
|
inputType: 'select',
|
options: [
|
{ value: '=', text: '=' },
|
{ value: '!=', text: '!=' },
|
{ value: '>', text: '>' },
|
{ value: '<', text: '<' },
|
{ value: 'like', text: 'like' }
|
]
|
},
|
{
|
title: '对比值',
|
dataIndex: 'contrastValue',
|
width: '16%',
|
editable: true,
|
required: false,
|
inputType: 'input'
|
},
|
{
|
title: '颜色',
|
dataIndex: 'color',
|
inputType: 'color',
|
editable: true,
|
width: '16%',
|
render: text => {
|
return (<div style={{width: '80px', height: '23px', background: text}}></div>)
|
}
|
},
|
{
|
title: '标记方式',
|
dataIndex: 'signType',
|
width: '16%',
|
editable: true,
|
inputType: 'cascader',
|
options: [],
|
render: text => {
|
let sign = {
|
'font': '文字',
|
'background': '背景',
|
'underline': '下划线',
|
'line-through': '中划线',
|
'icon': '图标',
|
'iconfront': '图标',
|
'iconback': '图标',
|
}
|
|
return (
|
<div>{sign[text[0]]} {text[2] ? <MkIcon type={text[text.length - 1]} /> : null}</div>
|
)
|
}
|
}
|
]
|
}
|
|
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 })
|
}
|
|
resetMark = () => {
|
const { marks, columns, type } = this.props
|
let markColumns = fromJS(this.state.markColumns).toJS()
|
let _columns = fromJS(columns).toJS()
|
|
_columns.unshift({field: '$Index', label: '序号'})
|
|
let options = _columns.map(col => {
|
return {
|
value: col.field,
|
label: col.label,
|
isLeaf: false,
|
children: [
|
{
|
value: 'static',
|
label: '静态值'
|
},
|
{
|
value: 'dynamic',
|
label: '动态值',
|
children: _columns.map(cell => {
|
return {
|
value: cell.field,
|
label: cell.label
|
}
|
})
|
}
|
]
|
}
|
})
|
|
let icons = [
|
{
|
value: 'direction',
|
label: '方向性图标',
|
children: minkeIconSystem.direction.map(cell => {
|
return {
|
value: cell,
|
label: (<MkIcon type={cell} />)
|
}
|
})
|
},
|
{
|
value: 'hint',
|
label: '提示建议性图标',
|
children: minkeIconSystem.hint.map(cell => {
|
return {
|
value: cell,
|
label: (<MkIcon type={cell} />)
|
}
|
})
|
},
|
{
|
value: 'edit',
|
label: '编辑类图标',
|
children: minkeIconSystem.edit.map(cell => {
|
return {
|
value: cell,
|
label: (<MkIcon type={cell} />)
|
}
|
})
|
},
|
{
|
value: 'data',
|
label: '数据类图标',
|
children: minkeIconSystem.data.map(cell => {
|
return {
|
value: cell,
|
label: (<MkIcon type={cell} />)
|
}
|
})
|
},
|
{
|
value: 'normal',
|
label: '网站通用图标',
|
children: minkeIconSystem.normal.map(cell => {
|
return {
|
value: cell,
|
label: (<MkIcon type={cell} />)
|
}
|
})
|
}
|
]
|
let signs = [
|
{
|
value: 'font',
|
label: '文字'
|
},
|
{
|
value: 'background',
|
label: '背景'
|
},
|
{
|
value: 'underline',
|
label: '下划线'
|
},
|
{
|
value: 'line-through',
|
label: '中划线'
|
},
|
{
|
value: 'iconfront',
|
label: '图标（前）',
|
children: icons
|
},
|
{
|
value: 'iconback',
|
label: '图标（后）',
|
children: icons
|
}
|
]
|
|
if (type === 'line' || type === 'sequence') {
|
signs.pop()
|
signs.pop()
|
} else if (type === 'slider') {
|
markColumns = markColumns.filter(col => {
|
col.width = '20%'
|
return col.dataIndex !== 'signType'
|
})
|
signs = []
|
}
|
|
let _marks = marks ? fromJS(marks).toJS() : []
|
_marks = _marks.map(item => {
|
if (item.signType && item.signType[0] === 'icon') {
|
item.signType = [item.signType[0] + item.signType[1], item.signType[2], item.signType[3]]
|
}
|
return item
|
})
|
|
this.setState({
|
visible: true,
|
marks: _marks,
|
markColumns: markColumns.map(col => {
|
if (col.dataIndex === 'field') {
|
col.options = options
|
} else if (col.dataIndex === 'signType') {
|
col.options = signs
|
}
|
|
return col
|
}),
|
options,
|
signs
|
})
|
}
|
|
markSubmit = () => {
|
let save = false
|
let input = document.getElementById('contrastValue')
|
let val = input && input.value ? input.value : ''
|
|
if (!val) {
|
save = true
|
}
|
|
let marks = this.state.marks.map(item => {
|
if (item.signType && item.signType[0] === 'background') {
|
try {
|
let colors = item.color.match(/\d+/g)
|
if ((colors[0] * 0.299 + colors[1] * 0.578 + colors[2] * 0.114) * colors[3] < 192) {
|
item.fontColor = '#ffffff'
|
} else {
|
item.fontColor = ''
|
}
|
} catch (e) {
|
item.fontColor = ''
|
}
|
}
|
if (val && item.contrastValue === val) {
|
save = true
|
}
|
return item
|
})
|
|
if (save) {
|
this.setState({
|
visible: false
|
})
|
this.props.onSubmit(marks)
|
} else {
|
const _this = this
|
confirm({
|
title: '存在未保存标记，确定忽略吗？',
|
onOk() {
|
_this.setState({ visible: false })
|
_this.props.onSubmit(marks)
|
},
|
onCancel() {}
|
})
|
}
|
}
|
|
render() {
|
const { marks, markColumns, visible, options, signs, dict } = this.state
|
|
return (
|
<div style={{display: 'inline-block'}}>
|
<AntDesignOutlined className="profile" title="标记" onClick={this.resetMark} />
|
<Modal
|
wrapClassName="model-table-column-mark-modal"
|
title={'标记设置'}
|
visible={visible}
|
width={'75vw'}
|
maskClosable={false}
|
okText={dict['model.submit']}
|
onOk={this.markSubmit}
|
onCancel={() => { this.setState({ visible: false }) }}
|
destroyOnClose
|
>
|
<MarkForm field={this.props.field} dict={dict} signs={signs} columns={options} markChange={this.markChange}/>
|
<Col style={{fontSize: '12px', color: '#757575', paddingLeft: '10px'}} span={24}>注：从上到下，匹配第一个符合条件的标记。</Col>
|
<EditTable actions={['edit', 'move', 'del']} data={marks} columns={markColumns} onChange={(marks) => this.setState({marks})}/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default MarkColumn
|
