2020-05-20

king

2020-05-20 4c775de9de07291b345fd5c975a87230ddedd5ca

 src/templates/sharecomponent/cardcomponent/index.jsx

@@ -10,6 +10,7 @@

import DragDetail from './dragdetail'
import CardDetailForm from './carddetailform'
import avatar from '@/assets/img/avatar.png'
import './index.scss'

const { confirm } = Modal
@@ -62,7 +63,8 @@
    const { config } = this.props
    if (!_cell) {
      _cell = {
        datatype: 'dynamic'
        datatype: 'dynamic',
        elemType: 'detail'
      }
    }

@@ -97,9 +99,12 @@
        text: col.label
      }
    })
    let _actions = config.action.filter(item => item.position === 'grid')
    let _actions = config.action.filter(item => item.Ot && item.Ot !== 'notRequired' && !['excelIn', 'excelOut'].includes(item.OpenType))

    let actionIds = []
    _actions = _actions.map(item => {
      actionIds.push(item.uuid)

      return {
        value: item.uuid,
        icon: item.icon,
@@ -112,7 +117,6 @@
      _cell.field = ''
    }
    if (_cell.actions.length > 0) {
      let actionIds = _actions.map(item => item.value)
      _cell.actions = _cell.actions.filter(item => actionIds.includes(item.value))
    }

@@ -120,6 +124,74 @@
      cardcell: _cell,
      modaltype: 'header',
      formlist: getCardDetailForm(_cell, _columns, 'header', _actions)
    })
  }

  editBottom = () => {
    const { config, card } = this.props

    let _actions = config.action.filter(item => item.Ot && item.Ot !== 'notRequired' && !['excelIn', 'excelOut'].includes(item.OpenType))

    let actionIds = []
    _actions = _actions.map(item => {
      actionIds.push(item.uuid)

      return {
        value: item.uuid,
        icon: item.icon,
        text: item.label
      }
    })

    let _cell = fromJS(card.bottom).toJS()

    if (_cell.actions.length > 0) {
      _cell.actions = _cell.actions.filter(item => actionIds.includes(item.value))
    }

    this.setState({
      cardcell: _cell,
      modaltype: 'bottom',
      formlist: getCardDetailForm(_cell, [], 'bottom', _actions)
    })
  }

  editAvatar = () => {
    const { config, card } = this.props

    let _columns = []
    config.columns.forEach(col => {
      if (['picture'].includes(col.type)) {
        _columns.push({
          type: 'picture',
          uuid: col.uuid,
          value: col.field,
          text: col.label
        })
      } else if (['text', 'number'].includes(col.type) && col.marks) {
        let mark = col.marks.filter(_mark => _mark.signType === 'icon' && _mark.icon)[0]
        if (mark) {
          _columns.push({
            type: 'icon',
            uuid: col.uuid,
            value: col.field,
            text: col.label,
            icon: mark.icon
          })
        }
      }
    })

    let _cell = fromJS(card.avatar).toJS()
    if (_columns.filter(col => col.value === _cell.field && col.type === _cell.type).length === 0) {
      _cell.field = ''
      _cell.content = ''
    }

    this.setState({
      cardcell: _cell,
      modaltype: 'avatar',
      formlist: getCardDetailForm(_cell, _columns, 'avatar')
    })
  }

@@ -146,18 +218,26 @@
        })
        this.plotChange({details: _details})
      } else if (modaltype === 'header') {
        let _header = fromJS(this.props.card.header).toJS()
        _header.content = res.content
        _header.datatype = res.datatype
        _header.field = res.field
        _header.actions = res.actions
  
        this.setState({
          cardcell: null,
          modaltype: '',
          formlist: null
        })
        this.plotChange({header: _header})
        this.plotChange({header: res})
      } else if (modaltype === 'bottom') {
        this.setState({
          cardcell: null,
          modaltype: '',
          formlist: null
        })
        this.plotChange({bottom: res})
      } else if (modaltype === 'avatar') {
        this.setState({
          cardcell: null,
          modaltype: '',
          formlist: null
        })
        this.plotChange({avatar: res})
      }
    })
  }
@@ -195,15 +275,19 @@
    const { card } = this.props
    const { dict, modaltype, cardcell } = this.state
    let _width = '100%'
    if (card.actions.length > 0) {
      _width = Math.floor((100 / card.actions.length) * 10000) / 10000 + '%'
    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.background && card.background[1]) {
      outclass += ' background ' + card.background[1]
    }
    console.log(card)
    return (
      <div className="line-card-edit-box">
      <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' + (card.widthType === 'ratio' ? ' ant-col ant-col-' + card.cardWidth : '')}
          className={'ant-card ant-card-bordered chart-card ' + outclass}
          style={card.widthType === 'absolute' ? { width: card.cardWidth } : null}
        >
          {card.subelement.includes('header') ?
@@ -211,9 +295,9 @@
              <Icon className="edit" title="Edit" type="edit" onClick={this.editHeader} />
              <div className="ant-card-head-wrapper">
                <div className="ant-card-head-title">{card.header.content}</div>
                <div className="ant-card-extra">
                  <span>Action</span>
                </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}
              </div>
            </div> : null
          }
@@ -223,8 +307,9 @@
              {card.subelement.includes('avatar') ?
                <div className="ant-card-meta-avatar">
                  <Icon className="edit" title="Edit" type="edit" onClick={this.editAvatar} />
                  <span className="ant-avatar ant-avatar-circle ant-avatar-image" style={{width: 32, height: 32}}>
                    <img src={card.avatar.content || 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'} alt=""/>
                  <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}
                  </span>
                </div> : null
              }
@@ -236,12 +321,13 @@
              />
            </div>
          </div> : null}
          {card.subelement.includes('actions') ?
          {card.subelement.includes('bottom') ?
            <ul className="ant-card-actions">
              <Icon className="edit" title="Edit" type="edit" onClick={this.editAction} />
              {card.actions.map((item, i) => (<li key={i} style={{width: _width}}>
              <Icon className="edit" title="Edit" type="edit" onClick={this.editBottom} />
              {card.bottom.actions.map((item, i) => (<li key={i} style={{width: _width}}>
                <span>
                  <Icon type={item.icon || 'dash'}/>
                  {['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