2020-10-09

king

2020-10-09 8701e6928b20cc3c4af763f8e72be5396c2be99d

 src/menu/components/card/cardcomponent/index.jsx

@@ -6,19 +6,17 @@
import asyncComponent from '@/utils/asyncComponent'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
// import { getCardCellForm } from './formconfig'
import SettingForm from './settingform'

import Utils from '@/utils/utils.js'
import MKEmitter from '@/utils/events.js'
import './index.scss'

const { confirm } = Modal
const CardCellComponent = asyncComponent(() => import('../cardcellcomponent'))

class CardBoxComponent extends Component {
  static propTpyes = {
    config: PropTypes.object,        // 菜单配置信息
    cards: PropTypes.object,         // 卡片行配置信息
    card: PropTypes.object,          // 卡片配置信息
    deleteElement: PropTypes.func,   // 卡片删除
    updateElement: PropTypes.func    // 菜单配置更新
@@ -47,7 +45,6 @@
  }

  componentDidMount () {
    MKEmitter.addListener('cardAddElement', this.cardAddElement)
    MKEmitter.addListener('submitStyle', this.getStyle)
  }

@@ -62,15 +59,14 @@
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('cardAddElement', this.cardAddElement)
    MKEmitter.removeListener('submitStyle', this.getStyle)
  }

  getStyle = (comIds, style) => {
    const { config } = this.props
    const { cards } = this.props
    const { card, side } = this.state

    if (comIds.length !== 2 || comIds[0] !== config.uuid || comIds[1] !== card.uuid) return
    if (comIds.length !== 2 || comIds[0] !== cards.uuid || comIds[1] !== card.uuid) return

    let _card = fromJS(card).toJS()
    if (side === 'back') {
@@ -86,108 +82,22 @@
    this.props.updateElement(_card)
  }

  updateCard = (cell) => {
  updateCard = (elements) => {
    const { card, side } = this.state

  }
    let _card = {}

  cardAddElement = (cardId, element) => {
    if (cardId !== this.props.config.uuid) return

    const { elements } = this.state

    this.setState({elements: [...elements, element]})
    this.handleElement(element)
  }

  /**
   * @description 按钮顺序调整
   */
  handleList = (list) => {
    const { config } = this.props

    this.setState({elements: list}, () => {
      this.props.updateElement({...config, elements: list})
    })
  }

  /**
   * @description 按钮编辑，获取按钮表单信息
   */
  handleElement = (card) => {
    this.setState({
      visible: true,
      card: card,
      // formlist: getCardCellForm(card)
    })
  }

  /**
   * @description 取消保存，如果元素为新添元素，则从序列中删除
   */
  editModalCancel = () => {
    const { card, elements } = this.state
    let _elements = null

    if (card.focus) {
      _elements = elements.filter(item => item.uuid !== card.uuid)
    if (side === 'back') {
      _card = {...card, backElements: elements}
    } else {
      _elements = elements
      _card = {...card, elements: elements}
    }

    this.setState({
      card: null,
      elements: _elements,
      visible: false
      card: _card
    })
  }

  /**
   * @description 搜索修改后提交保存
   * 1、去除系统默认搜索条件
   * 2、字段及提示文字重复校验
   * 3、更新下拉菜单可选集合
   * 4、下拉菜单数据源语法验证
   */
  handleSubmit = () => {
    const { config } = this.props
    const { elements } = this.state

    this.elementFormRef.handleConfirm().then(ele => {
      let _elements = elements.map(cell => {
        if (cell.uuid === ele.uuid) return ele
        return cell
      })

      this.setState({
        elements: _elements,
        visible: false
      }, () => {
        this.props.updateElement({...config, elements: _elements})
      })
    })
  }

  /**
   * @description 按钮删除
   */
  deleteElement = (card) => {
    const { config } = this.props
    const { dict, elements } = this.state
    let _this = this

    confirm({
      content: dict['model.confirm'] + dict['model.delete'] + '元素吗？',
      onOk() {
        let _elements = elements.filter(item => item.uuid !== card.uuid)

        _this.setState({
          elements: _elements
        }, () => {
          _this.props.updateElement({...config, elements: _elements})
        })
      },
      onCancel() {}
    })
    this.props.updateElement(_card)
  }

  changeSide = () => {
@@ -212,6 +122,7 @@
  }
  
  addElement = () => {
    const { cards } = this.props
    const { card } = this.state

    let newcard = {}
@@ -225,10 +136,11 @@
    newcard.align = 'left'

    // 注册事件-添加元素
    MKEmitter.emit('cardAddElement', card.uuid, newcard)
    MKEmitter.emit('cardAddElement', [cards.uuid, card.uuid], newcard)
  }

  addButton = () => {
    const { cards } = this.props
    const { card } = this.state

    let newcard = {}
@@ -252,11 +164,11 @@
    newcard.show = 'link'

    // 注册事件-添加元素
    MKEmitter.emit('addButton', card.uuid, newcard)
    MKEmitter.emit('cardAddElement', [cards.uuid, card.uuid], newcard)
  }

  changeStyle = () => {
    const { config } = this.props
    const { cards } = this.props
    const { card, side } = this.state

    let _style = null
@@ -268,7 +180,7 @@
      options = ['background', 'border', 'padding', 'margin']
    }

    MKEmitter.emit('changeStyle', [config.uuid, card.uuid], options, _style)
    MKEmitter.emit('changeStyle', [cards.uuid, card.uuid], options, _style)
  }

  settingSubmit = () => {
@@ -292,6 +204,7 @@
  }

  render() {
    const { cards } = this.props
    const { card, elements, side, settingVisible, dict } = this.state

    let _style = card.style
@@ -301,7 +214,7 @@

    return (
      <div className={'ant-col card-item ant-col-' + (card.setting.width || 6)} style={_style}>
        <CardCellComponent config={card} elements={elements} updateElement={this.updateComponent}/>
        <CardCellComponent cards={cards} card={card} elements={elements} updateElement={this.updateCard}/>
        <div className="card-control">
          <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
            <div className="mk-popover-control">
@@ -310,6 +223,7 @@
              <Icon className="edit" type="edit" onClick={() => this.setState({settingVisible: true})} />
              <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
              {card.setting.type === 'multi' ? <Switch size="small" onClick={this.changeSide} defaultChecked /> : null}
              <Icon className="close" title="删除卡片" type="delete" onClick={() => this.props.deleteElement(card)} />
            </div>
          } trigger="hover">
            <Icon type="tool" />