| | |
| | | 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' |
| | |
| | | render() { |
| | | let { lineMarks, onDoubleClick, data, className, ...resProps } = this.props |
| | | let style = {} |
| | | |
| | | if (data && data.$disabled) { |
| | | className = className + ' mk-disabled ' |
| | | } |
| | | |
| | | if (lineMarks && lineMarks.length > 0) { |
| | | lineMarks.some(mark => { |
| | |
| | | if (mark.fontColor) { |
| | | style.color = mark.fontColor |
| | | } |
| | | className += className + ' background' |
| | | className = className + ' background' |
| | | } else if (mark.signType[0] === 'underline') { |
| | | style.textDecoration = 'underline' |
| | | style.color = mark.color |
| | |
| | | } |
| | | |
| | | 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) |
| | |
| | | resProps.rowSpan = record['$$' + col.field] |
| | | } |
| | | |
| | | if (col.linkThdMenu || col.linkurl) { |
| | | if (!record.$disabled && (col.linkThdMenu || col.linkurl)) { |
| | | content = ( |
| | | <div> |
| | | <div className="link-menu" onDoubleClick={(e) => triggerLink(e, col, record)}></div> |
| | |
| | | if (col.format === 'percent') { |
| | | content = content * 100 |
| | | decimal = decimal > 2 ? decimal - 2 : 0 |
| | | } else if (col.format === 'abs') { |
| | | content = Math.abs(content) |
| | | } |
| | | |
| | | content = content.toFixed(decimal) |
| | |
| | | } |
| | | |
| | | 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) { |
| | |
| | | resProps.rowSpan = record['$$' + col.field] |
| | | } |
| | | |
| | | if (col.linkThdMenu || col.linkurl) { |
| | | if (!record.$disabled && (col.linkThdMenu || col.linkurl)) { |
| | | content = ( |
| | | <div> |
| | | <div className="link-menu" onDoubleClick={(e) => triggerLink(e, col, record)}></div> |
| | |
| | | let photos = '' |
| | | if (record[col.field]) { |
| | | photos = `${record[col.field]}` |
| | | photos = photos.split(',') |
| | | } |
| | | |
| | | if (/^data:image/.test(photos)) { |
| | | photos = [photos] |
| | | } else { |
| | | photos = photos.split(',').filter(Boolean) |
| | | } |
| | | |
| | | let cols = 24 / (col.picSort || 1) |
| | |
| | | } |
| | | |
| | | 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 |
| | |
| | | lineMarks: PropTypes.array, // 行标记 |
| | | fields: PropTypes.array, // 组件字段集 |
| | | ContainerId: PropTypes.any, // 标签页外层Id |
| | | BData: PropTypes.any, // 主表数据 |
| | | data: PropTypes.any, // 表格数据 |
| | | total: PropTypes.any, // 总数 |
| | | loading: PropTypes.bool, // 表格加载中 |
| | |
| | | MKEmitter.removeListener('resetTable', this.resetTable) |
| | | } |
| | | |
| | | mkCheckTopLine = (menuId) => { |
| | | mkCheckTopLine = (menuId, id) => { |
| | | const { MenuID, data, setting } = this.props |
| | | |
| | | if (MenuID !== menuId || !data || data.length === 0) return |
| | | |
| | | this.changedata(0) |
| | | this.setState({ selectedRowKeys: [0], activeIndex: 0 }) |
| | | this.props.chgSelectData([data[0]]) |
| | | let index = 0 |
| | | if (id) { |
| | | index = data.findIndex(item => item.$$uuid === id) |
| | | if (index === -1) { |
| | | index = 0 |
| | | } |
| | | } |
| | | |
| | | if (data[index].$disabled) return |
| | | |
| | | this.changedata(index) |
| | | this.setState({ selectedRowKeys: [index], activeIndex: index }) |
| | | this.props.chgSelectData([data[index]]) |
| | | |
| | | if (setting.$hasSyncModule) { |
| | | MKEmitter.emit('syncBalconyData', MenuID, [data[0]], data.length === 1) |
| | | MKEmitter.emit('syncBalconyData', MenuID, [data[index]], data.length === 1) |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | this.setState({ selectedRowKeys, activeIndex: _activeIndex }) |
| | | |
| | | let selects = this.props.data.filter((item, _index) => selectedRowKeys.includes(_index)) |
| | | let selects = this.props.data.filter((item, _index) => selectedRowKeys.includes(_index) && !item.$disabled) |
| | | |
| | | this.props.chgSelectData(selects) |
| | | if (setting.$hasSyncModule) { |
| | |
| | | const { setting, MenuID, data } = this.props |
| | | |
| | | if (!setting.tableType || this.state.pickup) return |
| | | if (record.$disabled) return |
| | | |
| | | let newkeys = fromJS(this.state.selectedRowKeys).toJS() |
| | | |
| | |
| | | this.setState({ selectedRowKeys: newkeys, activeIndex: _index !== '' ? _index : null }) |
| | | } |
| | | |
| | | let selects = this.props.data.filter((item, _index) => newkeys.includes(_index)) |
| | | let selects = this.props.data.filter((item, _index) => newkeys.includes(_index) && !item.$disabled) |
| | | |
| | | this.props.chgSelectData(selects) |
| | | |
| | |
| | | } |
| | | |
| | | changedata = (index) => { |
| | | const { MenuID, data, setting } = this.props |
| | | const { MenuID, data } = this.props |
| | | |
| | | let _id = '' |
| | | let _data = '' |
| | | |
| | | if (data && data.length > 0 && index !== '') { |
| | | _id = data[index][setting.primaryKey] || '' |
| | | _id = data[index].$$uuid || '' |
| | | _data = data[index] || '' |
| | | } |
| | | |
| | | if (_data && _data.$disabled) return |
| | | |
| | | MKEmitter.emit('resetSelectLine', MenuID, _id, _data) |
| | | } |
| | |
| | | const { setting } = this.props |
| | | |
| | | if (!setting.doubleClick) return |
| | | if (record.$disabled) return |
| | | |
| | | MKEmitter.emit('triggerBtnId', setting.doubleClick, [record]) |
| | | } |