2020-06-16

king

2020-06-16 6c16e43cd6521460c804391c042348dbb14086fc

 src/templates/sharecomponent/cardcomponent/index.jsx

@@ -26,6 +26,8 @@
    dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
    modaltype: '',
    formlist: null,
    cardwidth: 0,
    cardheight: 0,
    cardcell: null   // 卡片元素
  }

@@ -35,10 +37,18 @@

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (!is(fromJS(this.props.card), fromJS(nextProps.card))) {

      setTimeout(() => {
        if (nextProps.card.insert === 'true' && this.cardRef) {
          if (this.cardRef.offsetWidth !== this.state.cardwidth || this.cardRef.offsetHeight !== this.state.cardheight) {
            this.setState({
              cardwidth: this.cardRef.offsetWidth,
              cardheight: this.cardRef.offsetHeight
            })
          }
        }
      }, 200)
    }
  }


  plotChange = (values) => {
    const { card, config } = this.props
@@ -64,7 +74,10 @@
    if (!_cell) {
      _cell = {
        datatype: 'dynamic',
        elemType: 'detail'
        elemType: 'detail',
        width: 100,
        fontWeight: 'normal',
        fontSize: 14
      }
    }

@@ -198,7 +211,7 @@
    this.setState({
      cardcell: _cell,
      modaltype: 'avatar',
      formlist: getCardDetailForm(_cell, _columns, 'avatar')
      formlist: getCardDetailForm(_cell, _columns, 'avatar', [], card.widthType === 'ratio')
    })
  }

@@ -295,9 +308,33 @@
    })
  }

  componentDidMount() {
    const { card } = this.props

    if (card.insert === 'true' && this.cardRef) {
      this.setState({
        cardwidth: this.cardRef.offsetWidth,
        cardheight: this.cardRef.offsetHeight
      })
    }
  }

  componentDidUpdate() {
    const { card } = this.props

    if (card.insert === 'true' && this.cardRef) {
      if (this.cardRef.offsetWidth !== this.state.cardwidth || this.cardRef.offsetHeight !== this.state.cardheight) {
        this.setState({
          cardwidth: this.cardRef.offsetWidth,
          cardheight: this.cardRef.offsetHeight
        })
      }
    }
  }

  render() {
    const { card } = this.props
    const { dict, modaltype, cardcell } = this.state
    const { dict, 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 + '%'
@@ -312,10 +349,38 @@
      outclass += ' ant-card-bordered'
    }

    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)
      }
      
      if (card.avatar.type === 'picture') {
        if (card.avatar.widthType === 'ratio') {
          if (card.avatar.width < 90) {
            metastyle.display = 'flex'
          }
        } else {
          if (card.avatar.width < _cardWidth * 0.9) {
            metastyle.display = 'flex'
          }
        }
      } else {
        if (card.avatar.size < _cardWidth * 0.9) {
          metastyle.display = 'flex'
        }
      }
    }

    return (
      <div className="line-card-edit-box mingke-table">
        {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}
        >
@@ -337,24 +402,26 @@
            </div> : null
          }
          <div className="ant-card-body">
            <div className="ant-card-meta">
            <div className="ant-card-meta" style={metastyle}>
              <Icon type="plus" onClick={() => this.editdetail()} />
              {card.subelement.includes('avatar') ?
                <div className="ant-card-meta-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={{width: card.avatar.width || card.avatar.size || 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
              }
              <DragDetail
                cardObj={card}
                handleList={this.handleList}
                handleMenu={this.editdetail}
                deleteMenu={this.deletedetail}
              />
              <div className="ant-card-meta-detail" style={metastyle.display ? {flex: 1} : null}>
                <DragDetail
                  cardObj={card}
                  handleList={this.handleList}
                  handleMenu={this.editdetail}
                  deleteMenu={this.deletedetail}
                />
              </div>
            </div>
          </div>
          {card.subelement.includes('bottom') ?
@@ -370,6 +437,11 @@
            </ul> : null
          }
        </div>
        {card.insert === 'true' ?
          <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> : null
        }
        {/* 显示列编辑 */}
        <Modal
          title="编辑"