From 4c775de9de07291b345fd5c975a87230ddedd5ca Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 20 五月 2020 09:27:13 +0800
Subject: [PATCH] 2020-05-20
---
src/templates/sharecomponent/cardcomponent/index.jsx | 134 ++++++++++++++++++++++++++++++++++++--------
1 files changed, 110 insertions(+), 24 deletions(-)
diff --git a/src/templates/sharecomponent/cardcomponent/index.jsx b/src/templates/sharecomponent/cardcomponent/index.jsx
index baed22f..ab53003 100644
--- a/src/templates/sharecomponent/cardcomponent/index.jsx
+++ b/src/templates/sharecomponent/cardcomponent/index.jsx
@@ -10,6 +10,7 @@
import DragDetail from './dragdetail'
import CardDetailForm from './carddetailform'
+import avatar from '@/assets/img/avatar.png'
import './index.scss'
const { confirm } = Modal
@@ -62,7 +63,8 @@
const { config } = this.props
if (!_cell) {
_cell = {
- datatype: 'dynamic'
+ datatype: 'dynamic',
+ elemType: 'detail'
}
}
@@ -97,9 +99,12 @@
text: col.label
}
})
- let _actions = config.action.filter(item => item.position === 'grid')
+ let _actions = config.action.filter(item => item.Ot && item.Ot !== 'notRequired' && !['excelIn', 'excelOut'].includes(item.OpenType))
+ let actionIds = []
_actions = _actions.map(item => {
+ actionIds.push(item.uuid)
+
return {
value: item.uuid,
icon: item.icon,
@@ -112,7 +117,6 @@
_cell.field = ''
}
if (_cell.actions.length > 0) {
- let actionIds = _actions.map(item => item.value)
_cell.actions = _cell.actions.filter(item => actionIds.includes(item.value))
}
@@ -120,6 +124,74 @@
cardcell: _cell,
modaltype: 'header',
formlist: getCardDetailForm(_cell, _columns, 'header', _actions)
+ })
+ }
+
+ editBottom = () => {
+ const { config, card } = this.props
+
+ let _actions = config.action.filter(item => item.Ot && item.Ot !== 'notRequired' && !['excelIn', 'excelOut'].includes(item.OpenType))
+
+ let actionIds = []
+ _actions = _actions.map(item => {
+ actionIds.push(item.uuid)
+
+ return {
+ value: item.uuid,
+ icon: item.icon,
+ text: item.label
+ }
+ })
+
+ let _cell = fromJS(card.bottom).toJS()
+
+ if (_cell.actions.length > 0) {
+ _cell.actions = _cell.actions.filter(item => actionIds.includes(item.value))
+ }
+
+ this.setState({
+ cardcell: _cell,
+ modaltype: 'bottom',
+ formlist: getCardDetailForm(_cell, [], 'bottom', _actions)
+ })
+ }
+
+ editAvatar = () => {
+ const { config, card } = this.props
+
+ let _columns = []
+ config.columns.forEach(col => {
+ if (['picture'].includes(col.type)) {
+ _columns.push({
+ type: 'picture',
+ uuid: col.uuid,
+ value: col.field,
+ text: col.label
+ })
+ } else if (['text', 'number'].includes(col.type) && col.marks) {
+ let mark = col.marks.filter(_mark => _mark.signType === 'icon' && _mark.icon)[0]
+ if (mark) {
+ _columns.push({
+ type: 'icon',
+ uuid: col.uuid,
+ value: col.field,
+ text: col.label,
+ icon: mark.icon
+ })
+ }
+ }
+ })
+
+ let _cell = fromJS(card.avatar).toJS()
+ if (_columns.filter(col => col.value === _cell.field && col.type === _cell.type).length === 0) {
+ _cell.field = ''
+ _cell.content = ''
+ }
+
+ this.setState({
+ cardcell: _cell,
+ modaltype: 'avatar',
+ formlist: getCardDetailForm(_cell, _columns, 'avatar')
})
}
@@ -146,18 +218,26 @@
})
this.plotChange({details: _details})
} else if (modaltype === 'header') {
- let _header = fromJS(this.props.card.header).toJS()
- _header.content = res.content
- _header.datatype = res.datatype
- _header.field = res.field
- _header.actions = res.actions
-
this.setState({
cardcell: null,
modaltype: '',
formlist: null
})
- this.plotChange({header: _header})
+ this.plotChange({header: res})
+ } else if (modaltype === 'bottom') {
+ this.setState({
+ cardcell: null,
+ modaltype: '',
+ formlist: null
+ })
+ this.plotChange({bottom: res})
+ } else if (modaltype === 'avatar') {
+ this.setState({
+ cardcell: null,
+ modaltype: '',
+ formlist: null
+ })
+ this.plotChange({avatar: res})
}
})
}
@@ -195,15 +275,19 @@
const { card } = this.props
const { dict, modaltype, cardcell } = this.state
let _width = '100%'
- if (card.actions.length > 0) {
- _width = Math.floor((100 / card.actions.length) * 10000) / 10000 + '%'
+ if (card.bottom && card.bottom.actions.length > 0) {
+ _width = Math.floor((100 / card.bottom.actions.length) * 10000) / 10000 + '%'
}
-
+ let outclass = card.widthType === 'ratio' ? ' ant-col ant-col-' + card.cardWidth : ''
+ if (card.background && card.background[1]) {
+ outclass += ' background ' + card.background[1]
+ }
+ console.log(card)
return (
- <div className="line-card-edit-box">
+ <div className="line-card-edit-box mingke-table">
{card.title ? <p className="chart-title">{card.title}</p> : null}
<div
- className={'ant-card ant-card-bordered chart-card' + (card.widthType === 'ratio' ? ' ant-col ant-col-' + card.cardWidth : '')}
+ className={'ant-card ant-card-bordered chart-card ' + outclass}
style={card.widthType === 'absolute' ? { width: card.cardWidth } : null}
>
{card.subelement.includes('header') ?
@@ -211,9 +295,9 @@
<Icon className="edit" title="Edit" type="edit" onClick={this.editHeader} />
<div className="ant-card-head-wrapper">
<div className="ant-card-head-title">{card.header.content}</div>
- <div className="ant-card-extra">
- <span>Action</span>
- </div>
+ {card.header.actions && card.header.actions.length > 0 ? <div className="ant-card-extra">
+ <span>{card.header.actions.length === 1 ? card.header.actions[0].text : 'Action'}</span>
+ </div> : null}
</div>
</div> : null
}
@@ -223,8 +307,9 @@
{card.subelement.includes('avatar') ?
<div className="ant-card-meta-avatar">
<Icon className="edit" title="Edit" type="edit" onClick={this.editAvatar} />
- <span className="ant-avatar ant-avatar-circle ant-avatar-image" style={{width: 32, height: 32}}>
- <img src={card.avatar.content || 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'} alt=""/>
+ <span className="ant-avatar ant-avatar-circle ant-avatar-image" style={{width: card.avatar.width || card.avatar.size || 32}}>
+ {card.avatar.type === 'picture' ? <img src={avatar} alt=""/> : null}
+ {card.avatar.type === 'icon' ? <Icon className="avatar-icon" style={{fontSize: card.avatar.size + 'px'}} type={card.avatar.icon} /> : null}
</span>
</div> : null
}
@@ -236,12 +321,13 @@
/>
</div>
</div> : null}
- {card.subelement.includes('actions') ?
+ {card.subelement.includes('bottom') ?
<ul className="ant-card-actions">
- <Icon className="edit" title="Edit" type="edit" onClick={this.editAction} />
- {card.actions.map((item, i) => (<li key={i} style={{width: _width}}>
+ <Icon className="edit" title="Edit" type="edit" onClick={this.editBottom} />
+ {card.bottom.actions.map((item, i) => (<li key={i} style={{width: _width}}>
<span>
- <Icon type={item.icon || 'dash'}/>
+ {['icon', 'all'].includes(card.bottom.show) ? <Icon type={item.icon || 'dash'}/> : null}
+ {['text', 'all'].includes(card.bottom.show) ? item.text : null}
</span>
</li>))}
</ul> : null
--
Gitblit v1.8.0