From 64b4a25f578dbe459002d356e60a1a3657cb4595 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 12 一月 2023 00:57:23 +0800 Subject: [PATCH] 2023-01-12 --- src/tabviews/custom/components/card/cardcellList/index.jsx | 184 ++++++++++++++++++++++++++++++++------------- 1 files changed, 130 insertions(+), 54 deletions(-) diff --git a/src/tabviews/custom/components/card/cardcellList/index.jsx b/src/tabviews/custom/components/card/cardcellList/index.jsx index ffe27b5..f9464f7 100644 --- a/src/tabviews/custom/components/card/cardcellList/index.jsx +++ b/src/tabviews/custom/components/card/cardcellList/index.jsx @@ -1,7 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Col, Tooltip, notification, Typography } from 'antd' +import { Col, Tooltip, notification, Typography, message } from 'antd' import moment from 'moment' // import Api from '@/api' @@ -9,11 +9,10 @@ import asyncElementComponent from '@/utils/asyncComponent' import { getMark } from '@/utils/utils.js' import MkIcon from '@/components/mk-icon' -import MKEmitter from '@/utils/events.js' -import LostPng from '@/assets/img/lost.png' import Encrypts from '@/components/encrypts' import './index.scss' +moment.suppressDeprecationWarnings = true const { Paragraph } = Typography const NormalButton = asyncComponent(() => import('@/tabviews/zshare/actionList/normalbutton')) const ExcelInButton = asyncComponent(() => import('@/tabviews/zshare/actionList/excelInbutton')) @@ -29,6 +28,7 @@ const QrCode = asyncElementComponent(() => import('@/components/qrcode')) const MkProgress = asyncElementComponent(() => import('@/components/mkProgress')) const Video = asyncComponent(() => import('@/components/video')) +const MkPicture = asyncComponent(() => import('@/components/mkPicture')) 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%', @@ -229,8 +229,15 @@ let contents = [] elements.forEach(card => { + let _style_ = null + + if (card.style && card.style.clear === 'left') { + _style_ = {clear: 'left'} + } + if (card.eleType === 'sequence') { let _style = {} + let className = '' if (card.marks) { _style.width = card.innerHeight _style.height = card.innerHeight @@ -239,11 +246,12 @@ let mark = getMark(card.marks, data, _style) _style = mark.style + className = mark.signType } contents.push( - <Col key={card.uuid} span={card.width}> + <Col key={card.uuid} style={_style_} span={card.width}> <div style={card.style}> - <div className="ant-mk-text"><span className="sequence-wrap" style={_style}>{data.$Index || ''}</span></div> + <div className={'ant-mk-text line1' + className} style={{height: card.innerHeight || 'auto'}}><span className="sequence-wrap" style={_style}>{data.$Index || ''}</span></div> </div> </Col> ) @@ -356,6 +364,7 @@ } } + let className = '' if (card.marks) { let mark = getMark(card.marks, data, _style) @@ -368,6 +377,7 @@ val = <span>{val} <MkIcon style={mark.innerStyle} type={mark.icon} /></span> } } + className = mark.signType } if (card.link || (card.anchors && card.anchors.length > 0)) { @@ -379,9 +389,9 @@ } contents.push( - <Col key={card.uuid} span={card.width}> + <Col key={card.uuid} style={_style_} span={card.width}> <div style={_style} onClick={(e) => {this.openNewView(e, card)}}> - <div className={'ant-mk-text line' + (card.height || '')} style={{height: card.innerHeight || 'auto'}}>{val}</div> + <div className={'ant-mk-text line' + (card.height || '') + className} style={{height: card.innerHeight || 'auto'}}>{val}</div> </div> </Col> ) @@ -431,6 +441,7 @@ } } + let className = '' if (card.marks) { let mark = getMark(card.marks, data, _style) @@ -443,30 +454,53 @@ val = <span>{val} <MkIcon style={mark.innerStyle} type={mark.icon} /></span> } } + className = mark.signType } contents.push( - <Col key={card.uuid} span={card.width}> + <Col key={card.uuid} style={_style_} span={card.width}> <div style={_style}> - <div className={'ant-mk-text line' + (card.height || '')} style={{height: card.innerHeight || 'auto'}}>{val}</div> + <div className={'ant-mk-text line' + (card.height || '') + className} style={{height: card.innerHeight || 'auto'}}>{val}</div> </div> </Col> ) } else if (card.eleType === 'icon') { let val = '' + let icon = '' + let height = card.innerHeight + + if (card.datatype === 'dynamic') { + icon = data[card.field] || '' + } else { + icon = card.icon + } + + if (!height) { // 鍏煎 + let fontSize = 14 + let lineHeight = 1.5 + + if (card.style.fontSize) { + fontSize = parseInt(card.style.fontSize) + } + if (card.style.lineHeight) { + lineHeight = parseFloat(card.style.lineHeight) + } + + height = fontSize * lineHeight + } - if (card.datatype === 'static') { + if (data.hasOwnProperty(card.tooltip)) { + val = data[card.tooltip] + } else { val = card.tooltip - } else if (data.hasOwnProperty(card.field)) { - val = data[card.field] } contents.push( - <Col key={card.uuid} span={card.width}> + <Col key={card.uuid} style={_style_} span={card.width}> <div style={card.style}> {val ? <Tooltip title={val}> - <MkIcon className="ant-mk-icon" style={{height: card.innerHeight || 'auto'}} type={card.icon}/> - </Tooltip> : <MkIcon className="ant-mk-icon" style={{height: card.innerHeight || 'auto'}} type={card.icon}/>} + <MkIcon className="ant-mk-icon" style={{height: height}} type={icon}/> + </Tooltip> : <MkIcon className="ant-mk-icon" style={{height: height}} type={icon}/>} </div> </Col> ) @@ -492,7 +526,7 @@ } contents.push( - <Col key={card.uuid} span={card.width}> + <Col key={card.uuid} style={_style_} span={card.width}> <div style={card.style}> <MkProgress value={val} config={card} color={color}/> </div> @@ -534,39 +568,29 @@ } else { _imagestyle.paddingTop = '100%' } + + _imagestyle.backgroundSize = card.backgroundSize || 'cover' if (card.link) { _style.cursor = 'pointer' } let scale = url && card.scale === 'true' - let urls = url ? url.split(',').filter(Boolean) : [LostPng] - - if (!url) { - _imagestyle = {backgroundSize: 'contain'} - } + let urls = url ? url.split(',').filter(Boolean) : [''] urls.forEach((u, i) => { - contents.push(<Col key={card.uuid + i} span={card.width}> + contents.push(<Col key={card.uuid + i} style={_style_} span={card.width}> <div style={_style} onClick={(e) => {this.openNewView(e, card)}}> - <div - className={'ant-mk-picture' + (scale ? ' scale' : '')} - onClick={(e) => { - if (!scale) return - - e.stopPropagation() - - MKEmitter.emit('mkImageScale', url, urls) - }} - style={{..._imagestyle, backgroundImage: `url('${u}')`}} - ></div> + <MkPicture style={_imagestyle} scale={scale} url={u} urls={urls}/> </div> </Col>) }) } else if (card.eleType === 'splitline') { let _borderWidth = card.borderWidth === undefined ? 1 : card.borderWidth + _style_ = _style_ || {} + _style_.minHeight = _borderWidth contents.push( - <Col key={card.uuid} span={card.width} style={{minHeight: _borderWidth}}> + <Col key={card.uuid} span={card.width} style={_style_}> <div style={card.style}> <div className="ant-mk-splitline" style={{borderColor: card.color, borderWidth: _borderWidth}}></div> </div> @@ -586,7 +610,7 @@ } contents.push( - <Col key={card.uuid} span={card.width}> + <Col key={card.uuid} style={_style_} span={card.width}> <div style={card.style}> <div style={{height: card.innerHeight || 25}}> {val ? <BarCode card={card} value={val}/> : null} @@ -619,7 +643,7 @@ urls.forEach((u, i) => { contents.push( - <Col key={card.uuid + i} span={card.width}> + <Col key={card.uuid + i} style={_style_} span={card.width}> <div className="video-wrap" style={card.style}> <Video card={card} poster={poster} value={u}/> </div> @@ -640,7 +664,7 @@ } contents.push( - <Col key={card.uuid} span={card.width}> + <Col key={card.uuid} style={_style_} span={card.width}> <div style={card.style}> <div style={{minHeight: card.qrWidth || 50}}> {val ? <QrCode card={card} value={val}/> : null} @@ -659,9 +683,9 @@ } contents.push( - <Col key={card.uuid} span={card.width}> - <div className="ant-mk-date" style={card.style}> - {val} + <Col key={card.uuid} style={_style_} span={card.width}> + <div style={card.style}> + <div className="ant-mk-text line1" style={{height: card.innerHeight || 'auto'}}>{val}</div> </div> </Col> ) @@ -729,6 +753,7 @@ } } + let className = '' if (card.marks) { let mark = getMark(card.marks, data, _style) @@ -741,12 +766,58 @@ val = <span>{val} <MkIcon style={mark.innerStyle} type={mark.icon} /></span> } } + className = mark.signType } contents.push( - <Col key={card.uuid} span={card.width}> + <Col key={card.uuid} style={_style_} span={card.width}> <div style={_style}> - <div className={'ant-mk-text line' + (card.height || '')} style={{height: card.innerHeight || 'auto'}}>{val}</div> + <div className={'ant-mk-text line' + (card.height || '') + className} style={{height: card.innerHeight || 'auto'}}>{val}</div> + </div> + </Col> + ) + } else if (card.eleType === 'color') { + let color = '' + + if (card.datatype === 'static') { + color = card.value + } else { + color = data[card.field] || '' + } + + if (color === '' && card.noValue === 'hide') { // 绌哄�奸殣钘� + return null + } + + let _bgstyle = {backgroundColor: color} + + if (PicRadio[card.lenWidRadio]) { + _bgstyle.paddingTop = PicRadio[card.lenWidRadio] + } else { + _bgstyle.paddingTop = '100%' + } + + if (card.copyable === 'true') { + _bgstyle.cursor = 'pointer' + } + + contents.push( + <Col key={card.uuid} style={_style_} span={card.width}> + <div className="ant-mk-color" style={card.style}> + <div style={_bgstyle} onClick={(e) => { + if (card.copyable === 'true') { + e.stopPropagation() + + let oInput = document.createElement('input') + oInput.value = color + document.body.appendChild(oInput) + oInput.select() + document.execCommand('Copy') + document.body.removeChild(oInput) + + message.success('澶嶅埗鎴愬姛銆�') + } + }}></div> </div> </Col> ) @@ -773,10 +844,15 @@ } else if (data.$$empty) { _data = [] } + + _style_ = _style_ || {} + if (card.wrapStyle) { + _style_ = {..._style_, ...card.wrapStyle} + } if (['exec', 'prompt', 'pop', 'form'].includes(card.OpenType)) { contents.push( - <Col key={card.uuid} className="mk-cell-btn" style={card.wrapStyle} span={card.width}> + <Col key={card.uuid} className="mk-cell-btn" style={_style_} span={card.width}> <NormalButton btn={card} BID={data.$$BID} @@ -790,7 +866,7 @@ ) } else if (card.OpenType === 'excelIn') { contents.push( - <Col key={card.uuid} className="mk-cell-btn" style={card.wrapStyle} span={card.width}> + <Col key={card.uuid} className="mk-cell-btn" style={_style_} span={card.width}> <ExcelInButton btn={card} BID={data.$$BID} @@ -803,7 +879,7 @@ ) } else if (card.OpenType === 'excelOut') { contents.push( - <Col key={card.uuid} className="mk-cell-btn" style={card.wrapStyle} span={card.width}> + <Col key={card.uuid} className="mk-cell-btn" style={_style_} span={card.width}> <ExcelOutButton btn={card} BID={data.$$BID} @@ -816,7 +892,7 @@ ) } else if (card.OpenType === 'popview') { contents.push( - <Col key={card.uuid} className="mk-cell-btn" style={card.wrapStyle} span={card.width}> + <Col key={card.uuid} className="mk-cell-btn" style={_style_} span={card.width}> <PopupButton btn={card} BID={data.$$BID} @@ -829,24 +905,23 @@ ) } else if (card.OpenType === 'tab') { contents.push( - <Col key={card.uuid} className="mk-cell-btn" style={card.wrapStyle} span={card.width}> + <Col key={card.uuid} className="mk-cell-btn" style={_style_} span={card.width}> <TabButton btn={card} + BID={data.$$BID} BData={data.$$BData || ''} disabled={_disabled} - setting={cards.setting} selectedData={_data} /> </Col> ) } else if (card.OpenType === 'innerpage') { contents.push( - <Col key={card.uuid} className="mk-cell-btn" style={card.wrapStyle} span={card.width}> + <Col key={card.uuid} className="mk-cell-btn" style={_style_} span={card.width}> <NewPageButton btn={card} BData={data.$$BData || ''} disabled={_disabled} - setting={cards.setting} selectedData={_data} /> </Col> @@ -854,7 +929,7 @@ } else if (card.OpenType === 'funcbutton') { if (card.funcType === 'changeuser' || card.funcType === 'closetab') { contents.push( - <Col key={card.uuid} className="mk-cell-btn" style={card.wrapStyle} span={card.width}> + <Col key={card.uuid} className="mk-cell-btn" style={_style_} span={card.width}> <ChangeUserButton btn={card} BID={data.$$BID} @@ -867,20 +942,21 @@ ) } else if (card.funcType === 'print') { contents.push( - <Col key={card.uuid} className="mk-cell-btn" style={card.wrapStyle} span={card.width}> + <Col key={card.uuid} className="mk-cell-btn" style={_style_} span={card.width}> <PrintButton btn={card} BID={data.$$BID} BData={data.$$BData || ''} disabled={_disabled} setting={cards.setting} + columns={cards.columns} selectedData={_data} /> </Col> ) } else if (card.funcType === 'megvii') { contents.push( - <Col key={card.uuid} className="mk-cell-btn" style={card.wrapStyle} span={card.width}> + <Col key={card.uuid} className="mk-cell-btn" style={_style_} span={card.width}> <FuncMegvii btn={card} BID={data.$$BID} @@ -892,7 +968,7 @@ ) } else if (card.funcType === 'filezip') { contents.push( - <Col key={card.uuid} className="mk-cell-btn" style={card.wrapStyle} span={card.width}> + <Col key={card.uuid} className="mk-cell-btn" style={_style_} span={card.width}> <FuncZip btn={card} BID={data.$$BID} -- Gitblit v1.8.0