From 6c16e43cd6521460c804391c042348dbb14086fc Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 16 六月 2020 09:44:40 +0800
Subject: [PATCH] 2020-06-16
---
src/templates/sharecomponent/cardcomponent/index.jsx | 100 +++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 86 insertions(+), 14 deletions(-)
diff --git a/src/templates/sharecomponent/cardcomponent/index.jsx b/src/templates/sharecomponent/cardcomponent/index.jsx
index b860f71..61a81e1 100644
--- a/src/templates/sharecomponent/cardcomponent/index.jsx
+++ b/src/templates/sharecomponent/cardcomponent/index.jsx
@@ -26,6 +26,8 @@
dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
modaltype: '',
formlist: null,
+ cardwidth: 0,
+ cardheight: 0,
cardcell: null // 鍗＄墖鍏冪礌
}
@@ -35,10 +37,18 @@
UNSAFE_componentWillReceiveProps (nextProps) {
if (!is(fromJS(this.props.card), fromJS(nextProps.card))) {
-
+ setTimeout(() => {
+ if (nextProps.card.insert === 'true' && this.cardRef) {
+ if (this.cardRef.offsetWidth !== this.state.cardwidth || this.cardRef.offsetHeight !== this.state.cardheight) {
+ this.setState({
+ cardwidth: this.cardRef.offsetWidth,
+ cardheight: this.cardRef.offsetHeight
+ })
+ }
+ }
+ }, 200)
}
}
-
plotChange = (values) => {
const { card, config } = this.props
@@ -64,7 +74,10 @@
if (!_cell) {
_cell = {
datatype: 'dynamic',
- elemType: 'detail'
+ elemType: 'detail',
+ width: 100,
+ fontWeight: 'normal',
+ fontSize: 14
}
}
@@ -198,7 +211,7 @@
this.setState({
cardcell: _cell,
modaltype: 'avatar',
- formlist: getCardDetailForm(_cell, _columns, 'avatar')
+ formlist: getCardDetailForm(_cell, _columns, 'avatar', [], card.widthType === 'ratio')
})
}
@@ -295,9 +308,33 @@
})
}
+ componentDidMount() {
+ const { card } = this.props
+
+ if (card.insert === 'true' && this.cardRef) {
+ this.setState({
+ cardwidth: this.cardRef.offsetWidth,
+ cardheight: this.cardRef.offsetHeight
+ })
+ }
+ }
+
+ componentDidUpdate() {
+ const { card } = this.props
+
+ if (card.insert === 'true' && this.cardRef) {
+ if (this.cardRef.offsetWidth !== this.state.cardwidth || this.cardRef.offsetHeight !== this.state.cardheight) {
+ this.setState({
+ cardwidth: this.cardRef.offsetWidth,
+ cardheight: this.cardRef.offsetHeight
+ })
+ }
+ }
+ }
+
render() {
const { card } = this.props
- const { dict, modaltype, cardcell } = this.state
+ const { dict, modaltype, cardcell, cardwidth, cardheight } = this.state
let _width = '100%'
if (card.bottom && card.bottom.actions.length > 0) {
_width = Math.floor((100 / card.bottom.actions.length) * 10000) / 10000 + '%'
@@ -312,10 +349,38 @@
outclass += ' ant-card-bordered'
}
+ let metastyle = {}
+ if (card.subelement.includes('avatar')) {
+ let _cardWidth = card.cardWidth
+
+ // 璁＄畻鍗＄墖瀹藉害
+ if (card.widthType === 'ratio' && card.over !== 'roll') {
+ let _outWidth = document.body.offsetWidth - 260
+ _cardWidth = Math.floor(_outWidth * card.cardWidth / 24 - 20)
+ }
+
+ if (card.avatar.type === 'picture') {
+ if (card.avatar.widthType === 'ratio') {
+ if (card.avatar.width < 90) {
+ metastyle.display = 'flex'
+ }
+ } else {
+ if (card.avatar.width < _cardWidth * 0.9) {
+ metastyle.display = 'flex'
+ }
+ }
+ } else {
+ if (card.avatar.size < _cardWidth * 0.9) {
+ metastyle.display = 'flex'
+ }
+ }
+ }
+
return (
<div className="line-card-edit-box mingke-table">
{card.title ? <p className="chart-title">{card.title}</p> : null}
<div
+ ref={(ref) => this.cardRef = ref}
className={'ant-card chart-card ' + outclass}
style={card.widthType === 'absolute' ? { width: card.cardWidth } : null}
>
@@ -337,24 +402,26 @@
</div> : null
}
<div className="ant-card-body">
- <div className="ant-card-meta">
+ <div className="ant-card-meta" style={metastyle}>
<Icon type="plus" onClick={() => this.editdetail()} />
{card.subelement.includes('avatar') ?
- <div className="ant-card-meta-avatar">
+ <div className="ant-card-meta-avatar" style={{width: card.avatar.avatarWidth || 32, paddingTop: card.avatar.avatarWidth || 32}}>
<Icon className="edit" title="Edit" type="edit" onClick={this.editAvatar} />
<Icon className="edit close" title="close" type="close" onClick={() => this.deleteElem('avatar')} />
- <span className="ant-avatar ant-avatar-circle ant-avatar-image" style={{width: card.avatar.width || card.avatar.size || 32}}>
+ <span className="ant-avatar ant-avatar-circle ant-avatar-image" style={{borderRadius: card.avatar.radius === 'true' ? '50%' : 0}}>
{card.avatar.type === 'picture' ? <img src={avatar} alt=""/> : null}
{card.avatar.type === 'icon' ? <Icon className={'font ' + card.avatar.color} style={{fontSize: card.avatar.size + 'px'}} type={card.avatar.icon} /> : null}
</span>
</div> : null
}
- <DragDetail
- cardObj={card}
- handleList={this.handleList}
- handleMenu={this.editdetail}
- deleteMenu={this.deletedetail}
- />
+ <div className="ant-card-meta-detail" style={metastyle.display ? {flex: 1} : null}>
+ <DragDetail
+ cardObj={card}
+ handleList={this.handleList}
+ handleMenu={this.editdetail}
+ deleteMenu={this.deletedetail}
+ />
+ </div>
</div>
</div>
{card.subelement.includes('bottom') ?
@@ -370,6 +437,11 @@
</ul> : null
}
</div>
+ {card.insert === 'true' ?
+ <div className={'ant-card chart-card chart-card-insert' + outclass} style={{ width: cardwidth, height: cardheight }} >
+ <Icon type="plus" style={cardwidth > cardheight ? {fontSize: cardheight / 2 + 'px', lineHeight: cardheight + 'px'} : {fontSize: cardwidth / 2 + 'px', lineHeight: cardheight + 'px'}} />
+ </div> : null
+ }
{/* 鏄剧ず鍒楃紪杈� */}
<Modal
title="缂栬緫"
--
Gitblit v1.8.0