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/tabviews/zshare/cardcomponent/index.jsx | 96 +++++++++++++++++++++++++++++++++++-------------
1 files changed, 70 insertions(+), 26 deletions(-)
diff --git a/src/tabviews/zshare/cardcomponent/index.jsx b/src/tabviews/zshare/cardcomponent/index.jsx
index 503416b..e9e7cfe 100644
--- a/src/tabviews/zshare/cardcomponent/index.jsx
+++ b/src/tabviews/zshare/cardcomponent/index.jsx
@@ -4,6 +4,7 @@
import { Icon, Card, Spin, Empty, Tabs } from 'antd'
import asyncComponent from '@/utils/asyncComponent'
+import '@/assets/css/table.scss'
import './index.scss'
const NormalButton = asyncComponent(() => import('@/tabviews/zshare/actionList/normalbutton'))
@@ -221,6 +222,8 @@
if (mark.match === '=' && originVal === contrastVal) {
className = mark.color[1]
+ } else if (mark.match === '!=' && originVal !== contrastVal) {
+ className = mark.color[1]
} else if (mark.match === 'like' && originVal.indexOf(contrastVal) > -1) {
className = mark.color[1]
} else if (mark.match === '>' && originVal > contrastVal) {
@@ -395,18 +398,18 @@
extra={extra}
actions={actions}
>
- <div className={'ant-card-meta' + (card.switch ? ' switch' : '')} onClick={this.switchCard}>
+ <div className={'ant-card-meta' + (card.switch ? ' switch' : '')} style={card.flex ? {display: 'flex'} : null} onClick={this.switchCard}>
{card.avatar ?
- <div className="ant-card-meta-avatar">
- <span className="ant-avatar ant-avatar-circle ant-avatar-image" style={card.avatar.class}>
+ <div className="ant-card-meta-avatar" style={card.avatar.class}>
+ <span className="ant-avatar ant-avatar-image" style={card.avatar.radius ? {borderRadius: '50%'} : null}>
{this.getAvatar()}
</span>
</div> : null
}
- <div className="ant-card-meta-detail" style={card.marginLeft || null}>
+ <div className="ant-card-meta-detail" style={card.flex ? {flex: 1} : null}>
{card.details.map((detail, i) => {
return (
- <div className={detail.class} key={i}>
+ <div className={detail.class} style={detail.style} key={i}>
{detail.column ? this.getContent(detail.column) : detail.content}
</div>
)
@@ -503,44 +506,54 @@
card.avatar = null
} else {
card.avatar.marks = _marks
- card.avatar.outWidth = plot.avatar.size + 16
- card.avatar.class = {width: plot.avatar.size, fontSize: plot.avatar.size + 'px'}
+ card.avatar.width = plot.avatar.size
+ card.avatar.class = {width: plot.avatar.size, paddingTop: plot.avatar.size, fontSize: plot.avatar.size + 'px'}
}
} else if (card.avatar.type === 'picture' && colMap.get(plot.avatar.field)) {
card.avatar.field = plot.avatar.field
- card.avatar.outWidth = plot.avatar.width + 16
+ card.avatar.width = plot.avatar.width
+ card.avatar.widthType = plot.avatar.widthType
+ card.avatar.radius = plot.avatar.radius !== 'false'
- card.avatar.class = {width: plot.avatar.width}
+ let _width = card.avatar.width
+ if (plot.avatar.widthType === 'ratio') {
+ _width = _width + '%'
+ }
+
+ card.avatar.class = {width: _width, paddingTop: _width}
}
- }
-
- if (card.avatar) {
- card.marginLeft = {marginLeft: card.avatar.outWidth}
}
card.details = []
if (plot.details.length > 0) {
- card.details = plot.details.map(item => {
+ card.details = plot.details.map(_item => {
+ let item = fromJS(_item).toJS()
+
if (item.datatype === 'dynamic' && colMap.get(item.field)) {
item.column = colMap.get(item.field)
} else {
item.datatype = 'static'
}
- let _class = ''
- if (item.bold === 'true') {
- _class = ' ant-card-meta-title'
- } else {
- _class = ' ant-card-meta-description'
- }
-
- if (item.width) {
- _class += ' ' + item.width
- }
+ item.fontSize = item.fontSize || 14
+ item.height = item.height || 1
+ item.fontWeight = item.fontWeight || 'normal'
+ item.width = item.width + '%'
+
+ let _style = {}
+ _style.fontWeight = item.fontWeight
+ _style.width = item.width
+ _style.fontSize = item.fontSize + 'px'
+ _style.height = item.height * item.fontSize * 1.5
+
+ item.style = _style
+
+ let _class = 'mk-card-detail-item '
if (item.align) {
- _class += ' ' + item.align
+ _class += item.align + ' '
}
+ _class += 'line' + item.height
item.class = _class
return item
@@ -605,6 +618,37 @@
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
}
+ componentDidMount () {
+ const { plot } = this.props
+ const { card } = this.state
+
+ let _flex = false
+ if (card.avatar) {
+ let _cardWidth = 300
+ if (plot.widthType === 'absolute') {
+ _cardWidth = plot.cardWidth
+ } else {
+ let _outWidth = document.body.offsetWidth - 260
+ if (this.cardRef.offsetWidth) {
+ _outWidth = this.cardRef.offsetWidth
+ }
+ _cardWidth = Math.floor(_outWidth * plot.cardWidth / 24 - 20)
+ }
+
+ if (card.avatar.widthType === 'ratio') {
+ if (card.avatar.width < 90) {
+ _flex = true
+ }
+ } else if (card.avatar.width < _cardWidth * 0.9) {
+ _flex = true
+ }
+
+ this.setState({
+ card: {...this.state.card, flex: _flex}
+ })
+ }
+ }
+
/**
* @description 鍗＄墖鍒囨崲
*/
@@ -623,7 +667,7 @@
const { card, colMap, selectKey } = this.state
return (
- <div className="card-row-box mingke-table" style={!plot.title ? {paddingTop: '15px'} : null}>
+ <div className="card-row-box mingke-table" ref={(ref) => this.cardRef = ref} style={!plot.title ? {paddingTop: '15px'} : null}>
{loading ?
<div className="loading-mask">
<div className="ant-spin-blur"></div>
--
Gitblit v1.8.0