| | |
| | | import { Icon, Col, Tooltip, notification } from 'antd' |
| | | import moment from 'moment' |
| | | |
| | | import zhCN from '@/locales/zh-CN/model.js' |
| | | import enUS from '@/locales/en-US/model.js' |
| | | import asyncComponent from './asyncButtonComponent' |
| | | import asyncElementComponent from '@/utils/asyncComponent' |
| | | |
| | | import MKEmitter from '@/utils/events.js' |
| | | import LostPng from '@/assets/img/lost.png' |
| | | import './index.scss' |
| | | |
| | |
| | | const BarCode = asyncElementComponent(() => import('@/components/barcode')) |
| | | const QrCode = asyncElementComponent(() => import('@/components/qrcode')) |
| | | const Video = asyncComponent(() => import('@/components/video')) |
| | | const PicRadio = { |
| | | '4:3': '75%', '3:2': '66.67%', '16:9': '56.25%', '2:1': '50%', '3:1': '33.33%', '4:1': '25%', |
| | | '5:1': '20%', '6:1': '16.67%', '7:1': '14.29%', '8:1': '12.5%', '9:1': '11.11%', |
| | | '10:1': '10%', '3:4': '133.33%', '2:3': '150%', '9:16': '177.78%' |
| | | } |
| | | |
| | | class CardCellComponent extends Component { |
| | | static propTpyes = { |
| | | seq: PropTypes.any, // 序号 |
| | | cards: PropTypes.object, // 菜单配置信息 |
| | | cardCell: PropTypes.object, |
| | | data: PropTypes.object, |
| | | syncData: PropTypes.array, |
| | | elements: PropTypes.array, // 元素集 |
| | | } |
| | | |
| | | state = { |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | card: null, // 编辑中元素 |
| | | elements: null, // 按钮组 |
| | | } |
| | |
| | | try { |
| | | originVal = parseFloat(originVal) |
| | | contrastVal = parseFloat(contrastVal) |
| | | } catch { |
| | | } catch (e) { |
| | | originVal = NaN |
| | | } |
| | | |
| | |
| | | try { |
| | | originVal = parseFloat(originVal) |
| | | contrastVal = parseFloat(contrastVal) |
| | | } catch { |
| | | } catch (e) { |
| | | originVal = NaN |
| | | } |
| | | |
| | |
| | | try { |
| | | originVal = parseFloat(originVal) |
| | | contrastVal = parseFloat(contrastVal) |
| | | } catch { |
| | | } catch (e) { |
| | | originVal = NaN |
| | | } |
| | | |
| | |
| | | try { |
| | | originVal = parseFloat(originVal) |
| | | contrastVal = parseFloat(contrastVal) |
| | | } catch { |
| | | } catch (e) { |
| | | originVal = NaN |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | getContent = (card) => { |
| | | const { data, cards, seq } = this.props |
| | | const { data, cards } = this.props |
| | | |
| | | if (card.eleType === 'sequence') { |
| | | let _style = {} |
| | | if (card.marks) { |
| | | _style.width = card.innerHeight |
| | | _style.height = card.innerHeight |
| | | _style.lineHeight = card.innerHeight + 'px' |
| | | this.getMark(card.marks, _style) |
| | | } |
| | | return ( |
| | | <Col key={card.uuid} span={card.width}> |
| | | <div style={card.style}> |
| | | <div className={'ant-mk-text'}>{seq}</div> |
| | | <div className="ant-mk-text"><span className="sequence-wrap" style={_style}>{data.$Index || ''}</span></div> |
| | | </div> |
| | | </Col> |
| | | ) |
| | |
| | | let _style = card.style ? {...card.style} : {} |
| | | |
| | | if (card.datatype === 'static') { |
| | | val = card.value |
| | | val = card.value || '' |
| | | if (/@username@|@fullName@|@login_city@/ig.test(val)) { |
| | | let userName = sessionStorage.getItem('User_Name') || '' |
| | | let fullName = sessionStorage.getItem('Full_Name') || '' |
| | | let city = sessionStorage.getItem('city') || '' |
| | | val = val.replace(/@username@/ig, userName).replace(/@fullName@/ig, fullName).replace(/@login_city@/ig, city) |
| | | } |
| | | } else if (data.hasOwnProperty(card.field)) { |
| | | val = data[card.field] |
| | | } |
| | | |
| | | if (val === '' && card.noValue === 'hide') { // 空值隐藏 |
| | | return null |
| | | } |
| | | |
| | | if (val !== '' && card.format) { |
| | |
| | | return ( |
| | | <Col key={card.uuid} span={card.width}> |
| | | <div style={_style} onClick={(e) => {this.openNewView(e, card)}}> |
| | | <div className={'ant-mk-text line' + card.height} style={{height: card.innerHeight || 21}}>{val}</div> |
| | | <div className={'ant-mk-text line' + (card.height || '')} style={{height: card.innerHeight || 'auto'}}>{val}</div> |
| | | </div> |
| | | </Col> |
| | | ) |
| | |
| | | return ( |
| | | <Col key={card.uuid} span={card.width}> |
| | | <div style={_style}> |
| | | <div className={'ant-mk-text line' + card.height} style={{height: card.innerHeight || 21}}>{val}</div> |
| | | <div className={'ant-mk-text line' + (card.height || '')} style={{height: card.innerHeight || 'auto'}}>{val}</div> |
| | | </div> |
| | | </Col> |
| | | ) |
| | |
| | | ) |
| | | } else if (card.eleType === 'picture') { |
| | | let _imagestyle = {} |
| | | let _style = card.style ? {...card.style} : {} |
| | | let _style = card.style ? {margin: '0 auto', ...card.style} : {} |
| | | let url = '' |
| | | if (card.maxWidth) { |
| | | _style.maxWidth = card.maxWidth |
| | | if (_style.marginLeft === '0px') { |
| | | delete _style.marginLeft |
| | | } |
| | | if (_style.marginRight === '0px') { |
| | | delete _style.marginRight |
| | | } |
| | | } |
| | | |
| | | if (card.datatype === 'static') { |
| | | url = card.url |
| | |
| | | _imagestyle.borderRadius = _style.borderRadius |
| | | } |
| | | |
| | | if (card.lenWidRadio === '16:9') { |
| | | _imagestyle.paddingTop = '56.25%' |
| | | } else if (card.lenWidRadio === '3:2') { |
| | | _imagestyle.paddingTop = '66.67%' |
| | | } else if (card.lenWidRadio === '4:3') { |
| | | _imagestyle.paddingTop = '75%' |
| | | if (PicRadio[card.lenWidRadio]) { |
| | | _imagestyle.paddingTop = PicRadio[card.lenWidRadio] |
| | | } else { |
| | | _imagestyle.paddingTop = '100%' |
| | | } |
| | |
| | | _style.cursor = 'pointer' |
| | | } |
| | | |
| | | let scale = url && card.scale === 'true' |
| | | |
| | | return ( |
| | | <Col key={card.uuid} span={card.width}> |
| | | <div style={_style} onClick={(e) => {this.openNewView(e, card)}}> |
| | | <div className="ant-mk-picture" style={_imagestyle}></div> |
| | | <div |
| | | className={'ant-mk-picture' + (scale ? ' scale' : '')} |
| | | onClick={(e) => { |
| | | if (scale) { |
| | | e.stopPropagation() |
| | | } else { |
| | | return |
| | | } |
| | | |
| | | MKEmitter.emit('mkImageScale', url) |
| | | }} |
| | | style={_imagestyle} |
| | | ></div> |
| | | </div> |
| | | </Col> |
| | | ) |
| | |
| | | </div> |
| | | </Col> |
| | | ) |
| | | } else if (card.eleType === 'formula') { |
| | | let val = 0 |
| | | let _style = card.style ? {...card.style} : {} |
| | | |
| | | if (card.$sync) { |
| | | this.props.syncData.forEach(item => { |
| | | let _val = card.formula |
| | | Object.keys(item).forEach(key => { |
| | | let reg = new RegExp('@' + key + '@', 'ig') |
| | | _val = _val.replace(reg, item[key]) |
| | | }) |
| | | try { |
| | | // eslint-disable-next-line |
| | | _val = eval(_val) |
| | | } catch (e) { |
| | | _val = 0 |
| | | } |
| | | |
| | | val += _val |
| | | }) |
| | | } else if (data) { |
| | | let _val = card.formula |
| | | Object.keys(data).forEach(key => { |
| | | let reg = new RegExp('@' + key + '@', 'ig') |
| | | _val = _val.replace(reg, data[key]) |
| | | }) |
| | | |
| | | try { |
| | | // eslint-disable-next-line |
| | | _val = eval(_val) |
| | | } catch (e) { |
| | | _val = 0 |
| | | } |
| | | |
| | | val = _val |
| | | } |
| | | |
| | | if (val !== '') { |
| | | val = `${card.prefix || ''}${val}${card.postfix || ''}` |
| | | } |
| | | |
| | | if (card.marks) { |
| | | val = this.getMark(card.marks, _style, val) |
| | | } |
| | | |
| | | return ( |
| | | <Col key={card.uuid} span={card.width}> |
| | | <div style={_style}> |
| | | <div className={'ant-mk-text line' + (card.height || '')} style={{height: card.innerHeight || 'auto'}}>{val}</div> |
| | | </div> |
| | | </Col> |
| | | ) |
| | | } else if (card.eleType === 'button') { |
| | | let _data = [data] |
| | | |
| | | if (data.$$type === 'extendCard') { |
| | | _data = [] |
| | | } else if (card.$sync) { |
| | | _data = this.props.syncData |
| | | } |
| | | |
| | | if (['exec', 'prompt', 'pop'].includes(card.OpenType)) { |
| | | return ( |
| | | <Col key={card.uuid} span={card.width}> |
| | | <div style={card.style}> |
| | | <NormalButton |
| | | BID={data.$$BID} |
| | | btn={card} |
| | | show={card.show} |
| | | style={card.btnstyle} |
| | | setting={cards.setting} |
| | | columns={cards.columns} |
| | | selectedData={[data]} |
| | | /> |
| | | </div> |
| | | <Col key={card.uuid} className="mk-cell-btn" span={card.width}> |
| | | <NormalButton |
| | | BID={data.$$BID} |
| | | BData={data.$$BData || ''} |
| | | btn={card} |
| | | show={card.show} |
| | | style={card.style} |
| | | setting={cards.setting} |
| | | columns={cards.columns} |
| | | selectedData={_data} |
| | | /> |
| | | </Col> |
| | | ) |
| | | } else if (card.OpenType === 'excelIn') { |
| | | return ( |
| | | <Col key={card.uuid} span={card.width}> |
| | | <div style={card.style}> |
| | | <ExcelInButton |
| | | BID={data.$$BID} |
| | | btn={card} |
| | | show={card.show} |
| | | style={card.btnstyle} |
| | | setting={cards.setting} |
| | | selectedData={[data]} |
| | | /> |
| | | </div> |
| | | <Col key={card.uuid} className="mk-cell-btn" span={card.width}> |
| | | <ExcelInButton |
| | | BID={data.$$BID} |
| | | btn={card} |
| | | show={card.show} |
| | | style={card.style} |
| | | setting={cards.setting} |
| | | selectedData={_data} |
| | | /> |
| | | </Col> |
| | | ) |
| | | } else if (card.OpenType === 'excelOut') { |
| | | return ( |
| | | <Col key={card.uuid} span={card.width}> |
| | | <div style={card.style}> |
| | | <ExcelOutButton |
| | | BID={data.$$BID} |
| | | btn={card} |
| | | show={card.show} |
| | | style={card.btnstyle} |
| | | setting={cards.setting} |
| | | /> |
| | | </div> |
| | | <Col key={card.uuid} className="mk-cell-btn" span={card.width}> |
| | | <ExcelOutButton |
| | | BID={data.$$BID} |
| | | btn={card} |
| | | show={card.show} |
| | | style={card.style} |
| | | setting={cards.setting} |
| | | /> |
| | | </Col> |
| | | ) |
| | | } else if (card.OpenType === 'popview') { |
| | | return ( |
| | | <Col key={card.uuid} span={card.width}> |
| | | <div style={card.style}> |
| | | <PopupButton |
| | | BID={data.$$BID} |
| | | btn={card} |
| | | show={card.show} |
| | | style={card.btnstyle} |
| | | setting={cards.setting} |
| | | selectedData={[data]} |
| | | /> |
| | | </div> |
| | | <Col key={card.uuid} className="mk-cell-btn" span={card.width}> |
| | | <PopupButton |
| | | BID={data.$$BID} |
| | | BData={data.$$BData || ''} |
| | | btn={card} |
| | | show={card.show} |
| | | style={card.style} |
| | | setting={cards.setting} |
| | | selectedData={_data} |
| | | /> |
| | | </Col> |
| | | ) |
| | | } else if (card.OpenType === 'tab') { |
| | | return ( |
| | | <Col key={card.uuid} span={card.width}> |
| | | <div style={card.style}> |
| | | <TabButton |
| | | btn={card} |
| | | show={card.show} |
| | | style={card.btnstyle} |
| | | setting={cards.setting} |
| | | selectedData={[data]} |
| | | /> |
| | | </div> |
| | | <Col key={card.uuid} className="mk-cell-btn" span={card.width}> |
| | | <TabButton |
| | | btn={card} |
| | | show={card.show} |
| | | style={card.style} |
| | | setting={cards.setting} |
| | | selectedData={_data} |
| | | /> |
| | | </Col> |
| | | ) |
| | | } else if (card.OpenType === 'innerpage') { |
| | | return ( |
| | | <Col key={card.uuid} span={card.width}> |
| | | <div style={card.style}> |
| | | <NewPageButton |
| | | btn={card} |
| | | show={card.show} |
| | | style={card.btnstyle} |
| | | setting={cards.setting} |
| | | selectedData={[data]} |
| | | /> |
| | | </div> |
| | | <Col key={card.uuid} className="mk-cell-btn" span={card.width}> |
| | | <NewPageButton |
| | | btn={card} |
| | | show={card.show} |
| | | style={card.style} |
| | | setting={cards.setting} |
| | | selectedData={_data} |
| | | /> |
| | | </Col> |
| | | ) |
| | | } else if (card.OpenType === 'funcbutton') { |
| | | if (card.funcType === 'changeuser') { |
| | | if (card.funcType === 'changeuser' || card.funcType === 'closetab') { |
| | | return ( |
| | | <Col key={card.uuid} span={card.width}> |
| | | <div style={card.style}> |
| | | <ChangeUserButton |
| | | BID={data.$$BID} |
| | | btn={card} |
| | | show={card.show} |
| | | style={card.btnstyle} |
| | | setting={cards.setting} |
| | | selectedData={[data]} |
| | | /> |
| | | </div> |
| | | <Col key={card.uuid} className="mk-cell-btn" span={card.width}> |
| | | <ChangeUserButton |
| | | BID={data.$$BID} |
| | | btn={card} |
| | | show={card.show} |
| | | style={card.style} |
| | | setting={cards.setting} |
| | | selectedData={_data} |
| | | /> |
| | | </Col> |
| | | ) |
| | | } else if (card.funcType === 'print') { |
| | | return ( |
| | | <Col key={card.uuid} span={card.width}> |
| | | <div style={card.style}> |
| | | <PrintButton |
| | | BID={data.$$BID} |
| | | btn={card} |
| | | show={card.show} |
| | | style={card.btnstyle} |
| | | setting={cards.setting} |
| | | selectedData={[data]} |
| | | /> |
| | | </div> |
| | | <Col key={card.uuid} className="mk-cell-btn" span={card.width}> |
| | | <PrintButton |
| | | BID={data.$$BID} |
| | | BData={data.$$BData || ''} |
| | | btn={card} |
| | | show={card.show} |
| | | style={card.style} |
| | | setting={cards.setting} |
| | | selectedData={_data} |
| | | /> |
| | | </Col> |
| | | ) |
| | | } |
| | | } |
| | | } |
| | | |
| | | return null |
| | | } |
| | | |
| | | render() { |