2024-08-25

king

2024-08-25 326aa6b3effaccc71cfe0775d47b0f29eb3695a6

 src/templates/sharecomponent/cardcomponent/index.jsx

@@ -1,13 +1,12 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Icon, Modal, Popover } 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 { getCardDetailForm } from './formconfig'
import MkIcon from '@/components/mk-icon'
import DragDetail from './dragdetail'
import CardDetailForm from './carddetailform'
import avatar from '@/assets/img/avatar.png'
@@ -23,7 +22,6 @@
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    modaltype: '',
    formlist: null,
    cardwidth: 0,
@@ -211,7 +209,7 @@
    this.setState({
      cardcell: _cell,
      modaltype: 'avatar',
      formlist: getCardDetailForm(_cell, _columns, 'avatar', [], card.widthType === 'ratio')
      formlist: getCardDetailForm(_cell, _columns, 'avatar', [])
    })
  }

@@ -272,33 +270,31 @@

  deletedetail = (cell) => {
    const { card } = this.props
    const { dict } = this.state
    let _this = this
    let that = this

    confirm({
      content: dict['model.confirm'] + dict['model.delete'] + ` - ${cell.content} ？`,
      content: `确定删除 - ${cell.content} ？`,
      onOk() {
        let _details = fromJS(card.details).toJS()

        _details = _details.filter(item => item.uuid !== cell.uuid)

        _this.plotChange({details: _details})
        that.plotChange({details: _details})
      },
      onCancel() {}
    })
  }

  deleteElem = (type) => {
    const { dict } = this.state
    let _this = this
    let that = this

    confirm({
      content: dict['model.confirm'] + dict['model.delete'] + '？',
      content: '确定删除？',
      onOk() {
        let _subelement = fromJS(_this.props.card.subelement).toJS()
        let _subelement = fromJS(that.props.card.subelement).toJS()
        _subelement = _subelement.filter(_type => _type !== type)

        _this.plotChange({subelement: _subelement})
        that.plotChange({subelement: _subelement})
      },
      onCancel() {}
    })
@@ -330,12 +326,21 @@

  render() {
    const { card } = this.props
    const { dict, modaltype, cardcell, cardwidth, cardheight } = this.state
    const { modaltype, cardcell, cardwidth, cardheight } = this.state
    let _width = '100%'
    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
    }
@@ -347,23 +352,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') {
@@ -377,14 +372,13 @@
        {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') ?
            <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')} />
                <EditOutlined className="edit" onClick={this.editHeader} />
                <CloseOutlined className="close" onClick={() => this.deleteElem('header')} />
              </div>
            } trigger="hover">
              <div className="ant-card-head">
@@ -393,7 +387,7 @@
                  {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}
                        {['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
@@ -404,18 +398,18 @@
          }
          <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') ?
                <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')} />
                    <EditOutlined className="edit" onClick={this.editAvatar} />
                    <CloseOutlined className="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}}>
                  <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' ? <Icon className={'font ' + card.avatar.color} style={{fontSize: card.avatar.size + 'px'}} type={card.avatar.icon} /> : 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
@@ -433,14 +427,14 @@
          {card.subelement.includes('bottom') ?
            <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')} />
                <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) ? <Icon type={item.icon || 'dash'}/> : null}
                    {['icon', 'all'].includes(card.bottom.show) ? <MkIcon type={item.icon || 'dash'}/> : null}
                    {['text', 'all'].includes(card.bottom.show) ? item.text : null}
                  </span>
                </li>))}
@@ -449,8 +443,8 @@
          }
        </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
        }
        {/* 显示列编辑 */}
@@ -464,7 +458,6 @@
          destroyOnClose
        >
          <CardDetailForm
            dict={dict}
            card={cardcell}
            inputSubmit={this.handleSubmit}
            formlist={this.state.formlist}