2020-05-22

king

2020-05-22 523cec6c87d88b43954a4409a8dfde6aade095a1

 src/templates/sharecomponent/cardcomponent/index.jsx

@@ -176,7 +176,8 @@
            uuid: col.uuid,
            value: col.field,
            text: col.label,
            icon: mark.icon
            icon: mark.icon,
            color: mark.color[1]
          })
        }
      }
@@ -268,7 +269,24 @@
      },
      onCancel() {}
    })
    
  }

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

    confirm({
      content: dict['model.confirm'] + dict['model.delete'] + '？',
      okText: dict['model.confirm'],
      cancelText: dict['header.cancel'],
      onOk() {
        let _subelement = fromJS(_this.props.card.subelement).toJS()
        _subelement = _subelement.filter(_type => _type !== type)

        _this.plotChange({subelement: _subelement})
      },
      onCancel() {}
    })
  }

  render() {
@@ -279,37 +297,52 @@
      _width = Math.floor((100 / card.bottom.actions.length) * 10000) / 10000 + '%'
    }
    let outclass = card.widthType === 'ratio' ? ' ant-col ant-col-' + card.cardWidth : ''
    if (card.background && card.background[1]) {
      outclass += ' background ' + card.background[1]
    if (card.background) {
      outclass += ' background ' + card.background
    }
    console.log(card)
    if (card.border === 'hidden') {
      outclass += ' without-border'
    } else {
      outclass += ' ant-card-bordered'
    }

    return (
      <div className="line-card-edit-box mingke-table">
        {card.title ? <p className="chart-title">{card.title}</p> : null}
        <div
          className={'ant-card ant-card-bordered chart-card ' + outclass}
          className={'ant-card chart-card ' + outclass}
          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>{card.header.actions.length === 1 ? card.header.actions[0].text : 'Action'}</span>
                </div> : null}
                {card.header.actions && card.header.actions.length > 0 ?
                  <div className="ant-card-extra">
                    {card.header.actions.length === 1 ?
                      <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> : null
                    }
                    {card.header.actions.length > 1 ? <span>Action</span> : null}
                  </div> : null
                }
              </div>
            </div> : null
          }
          {card.subelement.includes('content') ? <div className="ant-card-body">
          <div className="ant-card-body">
            <div className="ant-card-meta">
              <Icon type="plus" onClick={() => this.editdetail()} />
              {card.subelement.includes('avatar') ?
                <div className="ant-card-meta-avatar">
                  <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}}>
                    {card.avatar.type === 'picture' ? <img src={avatar} alt=""/> : null}
                    {card.avatar.type === 'icon' ? <Icon className="avatar-icon" style={{fontSize: card.avatar.size + 'px'}} type={card.avatar.icon} /> : 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
              }
@@ -320,10 +353,11 @@
                deleteMenu={this.deletedetail}
              />
            </div>
          </div> : null}
          </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}