| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Icon, Modal } from 'antd' |
| | | import { Icon, Modal, Popover } from 'antd' |
| | | |
| | | import Utils from '@/utils/utils.js' |
| | | import zhCN from '@/locales/zh-CN/model.js' |
| | |
| | | } |
| | | } |
| | | |
| | | let _columns = config.columns.filter(col => ['text', 'number', 'link'].includes(col.type)) |
| | | let _columns = config.columns.filter(col => ['text', 'number', 'link', 'textarea'].includes(col.type)) |
| | | _columns = _columns.map(col => { |
| | | return { |
| | | uuid: col.uuid, |
| | |
| | | |
| | | confirm({ |
| | | content: dict['model.confirm'] + dict['model.delete'] + ` - ${cell.content} ?`, |
| | | okText: dict['model.confirm'], |
| | | cancelText: dict['model.cancel'], |
| | | onOk() { |
| | | let _details = fromJS(card.details).toJS() |
| | | |
| | |
| | | |
| | | confirm({ |
| | | content: dict['model.confirm'] + dict['model.delete'] + '?', |
| | | okText: dict['model.confirm'], |
| | | cancelText: dict['model.cancel'], |
| | | onOk() { |
| | | let _subelement = fromJS(_this.props.card.subelement).toJS() |
| | | _subelement = _subelement.filter(_type => _type !== type) |
| | |
| | | style={card.widthType === 'absolute' ? { width: card.cardWidth } : null} |
| | | > |
| | | {card.subelement.includes('header') ? |
| | | <div className="ant-card-head"> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <Icon className="edit" title="Edit" type="edit" onClick={this.editHeader} /> |
| | | <Icon className="edit close" title="close" type="close" onClick={() => this.deleteElem('header')} /> |
| | | <Icon className="close" title="close" type="close" onClick={() => this.deleteElem('header')} /> |
| | | </div> |
| | | } trigger="hover"> |
| | | <div className="ant-card-head"> |
| | | <div className="ant-card-head-wrapper"> |
| | | <div className="ant-card-head-title">{card.header.content}</div> |
| | | {card.header.actions && card.header.actions.length > 0 ? |
| | |
| | | </div> : null |
| | | } |
| | | </div> |
| | | </div> : null |
| | | </div> |
| | | </Popover> : null |
| | | } |
| | | <div className="ant-card-body"> |
| | | <div className="ant-card-meta" style={metastyle}> |
| | | <Icon type="plus" onClick={() => this.editdetail()} /> |
| | | {card.subelement.includes('avatar') ? |
| | | <div className="ant-card-meta-avatar" style={{width: card.avatar.avatarWidth || 32, paddingTop: card.avatar.avatarWidth || 32}}> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <Icon className="edit" title="Edit" type="edit" onClick={this.editAvatar} /> |
| | | <Icon className="edit close" title="close" type="close" onClick={() => this.deleteElem('avatar')} /> |
| | | <Icon className="close" title="close" type="close" onClick={() => this.deleteElem('avatar')} /> |
| | | </div> |
| | | } trigger="hover"> |
| | | <div className="ant-card-meta-avatar" style={{width: card.avatar.avatarWidth || 32, paddingTop: card.avatar.avatarWidth || 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 |
| | | </div> |
| | | </Popover> : null |
| | | } |
| | | <div className="ant-card-meta-detail" style={metastyle.display ? {flex: 1} : null}> |
| | | <DragDetail |
| | |
| | | </div> |
| | | </div> |
| | | {card.subelement.includes('bottom') ? |
| | | <ul className="ant-card-actions"> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <Icon className="edit" title="Edit" type="edit" onClick={this.editBottom} /> |
| | | <Icon className="edit close" title="close" type="close" onClick={() => this.deleteElem('bottom')} /> |
| | | <Icon className="close" title="close" type="close" onClick={() => this.deleteElem('bottom')} /> |
| | | </div> |
| | | } trigger="hover"> |
| | | <ul className="ant-card-actions"> |
| | | {card.bottom.actions.map((item, i) => (<li key={i} style={{width: _width}}> |
| | | <span> |
| | | {['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 |
| | | </ul> |
| | | </Popover> : null |
| | | } |
| | | </div> |
| | | {card.extraAction ? |