| | |
| | | import md5 from 'md5' |
| | | import { connect } from 'react-redux' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Table, Typography, Icon, Col, Switch, message } from 'antd' |
| | | import { Table, Typography, Col, Switch, message } from 'antd' |
| | | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import { getMark } from '@/utils/utils.js' |
| | | import MkIcon from '@/components/mk-icon' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import zhCN from '@/locales/zh-CN/main.js' |
| | | import enUS from '@/locales/en-US/main.js' |
| | |
| | | } |
| | | |
| | | class BodyCell extends React.Component { |
| | | getMark = (record, marks, style, content) => { |
| | | marks.some(mark => { |
| | | let originVal = record[mark.field[0]] + '' |
| | | let contrastVal = '' |
| | | let result = false |
| | | |
| | | if (mark.field[1] === 'static') { |
| | | contrastVal = mark.contrastValue + '' |
| | | } else { |
| | | contrastVal = record[mark.field[2]] + '' |
| | | } |
| | | |
| | | if (mark.match === '=') { |
| | | result = originVal === contrastVal |
| | | } else if (mark.match === '!=') { |
| | | result = originVal !== contrastVal |
| | | } else if (mark.match === 'like') { |
| | | result = originVal.indexOf(contrastVal) > -1 |
| | | } else if (mark.match === '>') { |
| | | try { |
| | | originVal = parseFloat(originVal) |
| | | contrastVal = parseFloat(contrastVal) |
| | | } catch (e) { |
| | | originVal = NaN |
| | | } |
| | | |
| | | if (!isNaN(originVal) && !isNaN(contrastVal) && originVal > contrastVal) { |
| | | result = true |
| | | } |
| | | } else if (mark.match === '<') { |
| | | try { |
| | | originVal = parseFloat(originVal) |
| | | contrastVal = parseFloat(contrastVal) |
| | | } catch (e) { |
| | | originVal = NaN |
| | | } |
| | | |
| | | if (!isNaN(originVal) && !isNaN(contrastVal) && originVal < contrastVal) { |
| | | result = true |
| | | } |
| | | } |
| | | |
| | | if (result) { |
| | | if (mark.signType[0] === 'font') { |
| | | style.color = mark.color |
| | | } else if (mark.signType[0] === 'background') { |
| | | style.background = mark.color |
| | | if (mark.fontColor) { |
| | | style.color = mark.fontColor |
| | | } |
| | | } else if (mark.signType[0] === 'underline') { |
| | | style.textDecoration = 'underline' |
| | | style.color = mark.color |
| | | } else if (mark.signType[0] === 'line-through') { |
| | | style.textDecoration = 'line-through' |
| | | style.color = mark.color |
| | | } else if (mark.signType[0] === 'icon') { |
| | | let icon = (<Icon style={{color: mark.color}} type={mark.signType[3]} />) |
| | | if (mark.signType[1] === 'front') { |
| | | content = <span>{icon} {content}</span> |
| | | } else { |
| | | content = <span>{content} {icon}</span> |
| | | } |
| | | } |
| | | } |
| | | return result |
| | | }) |
| | | |
| | | return content |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !nextProps.record || !is(fromJS(this.props.record), fromJS(nextProps.record)) |
| | | } |
| | |
| | | } |
| | | |
| | | if (col.marks) { |
| | | style = style || {} |
| | | content = this.getMark(record, col.marks, style, content) |
| | | let mark = getMark(col.marks, record, style) |
| | | |
| | | style = mark.style |
| | | |
| | | if (mark.icon) { |
| | | if (mark.position === 'front') { |
| | | content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span> |
| | | } else { |
| | | content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> |
| | | } |
| | | } |
| | | } |
| | | if (col.blur) { |
| | | content = md5(content) |
| | |
| | | } |
| | | |
| | | if (col.marks) { |
| | | style = style || {} |
| | | content = this.getMark(record, col.marks, style, content) |
| | | let mark = getMark(col.marks, record, style) |
| | | |
| | | style = mark.style |
| | | |
| | | if (mark.icon) { |
| | | if (mark.position === 'front') { |
| | | content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span> |
| | | } else { |
| | | content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> |
| | | } |
| | | } |
| | | } |
| | | |
| | | if (col.blur) { |
| | |
| | | } |
| | | |
| | | if (col.marks) { |
| | | style = style || {} |
| | | content = this.getMark(record, col.marks, style, content) |
| | | let mark = getMark(col.marks, record, style) |
| | | |
| | | style = mark.style |
| | | |
| | | if (mark.icon) { |
| | | if (mark.position === 'front') { |
| | | content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span> |
| | | } else { |
| | | content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> |
| | | } |
| | | } |
| | | } |
| | | |
| | | resProps.children = content |