2021-12-22

king

2021-12-22 bd1dfc9e6c9b9f8076ca2783ce598e0936b4c664

 src/templates/sharecomponent/cardcomponent/index.jsx

@@ -1,13 +1,14 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Icon, Modal } from 'antd'
import { Modal, Popover } from 'antd'
import { EditOutlined, CloseOutlined, PlusOutlined } from '@ant-design/icons'

import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import { getCardDetailForm } from '@/templates/zshare/formconfig'

import MkIcon from '@/components/mk-icon'
import DragDetail from './dragdetail'
import CardDetailForm from './carddetailform'
import avatar from '@/assets/img/avatar.png'
@@ -23,7 +24,7 @@
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    modaltype: '',
    formlist: null,
    cardwidth: 0,
@@ -81,7 +82,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,
@@ -211,7 +212,7 @@
    this.setState({
      cardcell: _cell,
      modaltype: 'avatar',
      formlist: getCardDetailForm(_cell, _columns, 'avatar', [], card.widthType === 'ratio')
      formlist: getCardDetailForm(_cell, _columns, 'avatar', [])
    })
  }

@@ -277,8 +278,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 +295,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)
@@ -339,7 +336,16 @@
    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.widthType === 'absolute') {
      card.cardWidth = 6
    }
    if (card.avatar && card.avatar.widthType === 'absolute') {
      card.avatar.width = 32
    }

    let outclass = 'ant-col-' + card.cardWidth

    if (card.background) {
      outclass += ' background ' + card.background
    }
@@ -351,23 +357,13 @@

    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)
      }
      let _outWidth = document.body.offsetWidth - 260
      let _cardWidth = Math.floor(_outWidth * card.cardWidth / 24 - 20)
      
      if (card.avatar.type === 'picture') {
        if (card.avatar.widthType === 'ratio') {
          if (card.avatar.width < 90 && card.avatar.display !== 'block') {
            metastyle.display = 'flex'
          }
        } else {
          if (card.avatar.width < _cardWidth * 0.9 && card.avatar.display !== 'block') {
            metastyle.display = 'flex'
          }
        if (card.avatar.width < 90 && card.avatar.display !== 'block') {
          metastyle.display = 'flex'
        }
      } else {
        if (card.avatar.size < _cardWidth * 0.9 && card.avatar.display !== 'block') {
@@ -381,38 +377,47 @@
        {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}
          className={'ant-card chart-card ant-col ' + outclass}
        >
          {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">
                <EditOutlined className="edit" onClick={this.editHeader} />
                <CloseOutlined className="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) ? <MkIcon 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()} />
              <PlusOutlined 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">
                    <EditOutlined className="edit" onClick={this.editAvatar} />
                    <CloseOutlined className="close" onClick={() => this.deleteElem('avatar')} />
                  </div>
                } trigger="hover">
                  <div className="ant-card-meta-avatar" style={card.avatar.type === 'icon' ? {width: card.avatar.width, paddingTop: card.avatar.width} : {width: card.avatar.width + '%', paddingTop: card.avatar.width + '%'}}>
                    <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' ? <MkIcon 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,21 +430,26 @@
            </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">
                <EditOutlined className="edit" onClick={this.editBottom} />
                <CloseOutlined className="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) ? <MkIcon type={item.icon || 'dash'}/> : null}
                    {['text', 'all'].includes(card.bottom.show) ? item.text : null}
                  </span>
                </li>))}
              </ul>
            </Popover> : null
          }
        </div>
        {card.extraAction ?
          <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 className={'ant-card chart-card chart-card-insert ' + outclass} style={{ width: cardwidth, height: cardheight }} >
            <PlusOutlined style={cardwidth > cardheight ? {fontSize: cardheight / 2 + 'px', lineHeight: cardheight + 'px'} : {fontSize: cardwidth / 2 + 'px', lineHeight: cardheight + 'px'}} />
          </div> : null
        }
        {/* 显示列编辑 */}