king
2020-08-31 b3547d1c531e479021219fda5df153a11b9b52a3
src/templates/sharecomponent/cardcomponent/index.jsx
@@ -1,7 +1,7 @@
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'
@@ -81,7 +81,7 @@
      }
    }
    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,
@@ -277,8 +277,6 @@
    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()
@@ -296,8 +294,6 @@
    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)
@@ -385,34 +381,44 @@
          style={card.widthType === 'absolute' ? { width: card.cardWidth } : null}
        >
          {card.subelement.includes('header') ?
            <div className="ant-card-head">
              <Icon className="edit" title="Edit" type="edit" onClick={this.editHeader} />
              <Icon className="edit close" title="close" type="close" onClick={() => this.deleteElem('header')} />
              <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 className="ant-card-extra">
                    <span>
                      {['icon', 'all'].includes(card.header.show) ? <Icon type={card.header.actions[0].icon || 'dash'}/> : null}
                      {['text', 'all'].includes(card.header.show) ? card.header.actions[0].text : null}
                    </span>
                  </div> : null
                }
            <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="close" title="close" type="close" onClick={() => this.deleteElem('header')} />
              </div>
            </div> : null
            } 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 className="ant-card-extra">
                      <span>
                        {['icon', 'all'].includes(card.header.show) ? <Icon type={card.header.actions[0].icon || 'dash'}/> : null}
                        {['text', 'all'].includes(card.header.show) ? card.header.actions[0].text : null}
                      </span>
                    </div> : null
                  }
                </div>
              </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}}>
                  <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={{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
                <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="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>
                </Popover> : null
              }
              <div className="ant-card-meta-detail" style={metastyle.display ? {flex: 1} : null}>
                <DragDetail
@@ -425,16 +431,21 @@
            </div>
          </div>
          {card.subelement.includes('bottom') ?
            <ul className="ant-card-actions">
              <Icon className="edit" title="Edit" type="edit" onClick={this.editBottom} />
              <Icon className="edit close" title="close" type="close" onClick={() => this.deleteElem('bottom')} />
              {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
            <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="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>
            </Popover> : null
          }
        </div>
        {card.extraAction ?