2020-10-11

king

2020-10-11 5902ba5c3ff85efc78c95364196cd6ab5d2d1601

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

@@ -16,6 +16,10 @@
import DragElement from './dragaction'
import ActionForm from '@/menu/actioncomponent/actionform'
import CreateFunc from '@/templates/zshare/createfunc'
import VerifyCard from '@/templates/zshare/verifycard'
import VerifyPrint from '@/menu/actioncomponent/verifyprint'
import VerifyExcelIn from '@/menu/actioncomponent/verifyexcelin'
import VerifyExcelOut from '@/menu/actioncomponent/verifyexcelout'
import './index.scss'

const { confirm } = Modal
@@ -23,7 +27,8 @@
class CardCellComponent extends Component {
  static propTpyes = {
    cards: PropTypes.object,         // 菜单配置信息
    card: PropTypes.object,
    cardCell: PropTypes.object,
    side: PropTypes.string,
    elements: PropTypes.array,       // 元素集
    updateElement: PropTypes.func    // 菜单配置更新
  }
@@ -34,7 +39,8 @@
    formlist: null,      // 表单信息
    elements: null,      // 按钮组
    visible: false,      // 模态框控制
    actvisible: false    // 按钮编辑模态框
    actvisible: false,   // 按钮编辑模态框
    profVisible: false
  }

  /**
@@ -50,10 +56,19 @@

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

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props.cards), fromJS(nextProps.cards)) || !is(fromJS(this.state), fromJS(nextState))
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.side !== nextProps.side) {
      this.setState({
        elements: fromJS(nextProps.elements).toJS()
      })
    }
  }

  /**
@@ -67,17 +82,107 @@
  }

  cardAddElement = (ids, element) => {
    if (!ids || ids.length !== 2 || ids[0] !== this.props.cards.uuid || ids[1] !== this.props.card.uuid) return
    const { cards, cardCell } = this.props

    if (!ids || ids.length !== 2 || ids[0] !== cards.uuid || ids[1] !== cardCell.uuid) return

    const { elements } = this.state

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

    if (element.eleType === 'button') {
      this.handleAction(element)
    } else {
      this.handleElement(element)
    }

  handleStyle = (element) => {
    const { cards, cardCell } = this.props

    let _style = element.style ? fromJS(element.style).toJS() : {}
    let options = ['font', 'border', 'padding', 'margin']

    if (element.eleType === 'button') {
      options.push('background')
      if (element.btnstyle) {
        _style = {..._style, ...element.btnstyle}
      }
    } else if (element.eleType === 'picture') {
      options = ['border', 'margin']
    } else if (element.eleType === 'slider') {
      options = ['padding', 'margin']
    } else if (element.eleType === 'splitline') {
      options = ['padding', 'margin']
    }

    this.setState({
      card: element
    })

    MKEmitter.emit('changeStyle', [cards.uuid, cardCell.uuid, element.uuid], options, _style)
  }

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

    if (comIds.length !== 3 || comIds[0] !== cards.uuid || comIds[1] !== cardCell.uuid) return

    let _card = fromJS(card).toJS()
    
    if (card.eleType === 'button') { // 拆分style
      let _style = fromJS(style).toJS()
      _card.style = {}

      if (_style.marginTop) {
        _card.style.marginTop = _style.marginTop
        delete _style.marginTop
      }
      if (_style.marginBottom) {
        _card.style.marginBottom = _style.marginBottom
        delete _style.marginBottom
      }
      if (_style.marginLeft) {
        _card.style.marginLeft = _style.marginLeft
        delete _style.marginLeft
      }
      if (_style.marginRight) {
        _card.style.marginRight = _style.marginRight
        delete _style.marginRight
      }
      if (_style.paddingTop) {
        _card.style.paddingTop = _style.paddingTop
        delete _style.paddingTop
      }
      if (_style.paddingBottom) {
        _card.style.paddingBottom = _style.paddingBottom
        delete _style.paddingBottom
      }
      if (_style.paddingLeft) {
        _card.style.paddingLeft = _style.paddingLeft
        delete _style.paddingLeft
      }
      if (_style.paddingRight) {
        _card.style.paddingRight = _style.paddingRight
        delete _style.paddingRight
      }
      if (_style.textAlign) {
        _card.style.textAlign = _style.textAlign
        delete _style.textAlign
      }

      _card.btnstyle = _style
    } else {
      _card.style = style
    }

    let _elements = elements.map(cell => {
      if (cell.uuid === _card.uuid) return _card
      return cell
    })

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

  /**
@@ -93,11 +198,15 @@
   * @description 元素编辑，获取元素表单信息
   */
  handleElement = (card) => {
    if (card.eleType === 'button') {
      this.handleAction(card)
    } else {
    this.setState({
      visible: true,
      card: card,
      formlist: getCardCellForm(card)
    })
    }
  }

  /**
@@ -172,14 +281,14 @@
        this.setState({
          actvisible: true,
          card: card,
          formlist: getActionForm(card, functip, cards.setting, menu.permFuncField, '', menulist, modules)
          formlist: getActionForm(card, functip, cards.setting, menu.permFuncField, 'card', menulist, modules)
        })
      })
    } else {
      this.setState({
        actvisible: true,
        card: card,
        formlist: getActionForm(card, functip, cards.setting, menu.permFuncField, '', menulist, modules)
        formlist: getActionForm(card, functip, cards.setting, menu.permFuncField, 'card', menulist, modules)
      })
    }
  }
@@ -264,7 +373,11 @@

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

@@ -285,7 +398,12 @@

    this.actionFormRef.handleConfirm().then(ele => {
      let _elements = elements.map(cell => {
        if (cell.uuid === ele.uuid) return ele
        if (cell.uuid === ele.uuid) {
          ele.eleType = 'button'
          ele.style = cell.style || {}
          return ele
        }

        return cell
      })

@@ -320,9 +438,46 @@
    })
  }

  /**
   * @description 验证信息配置
   */
  profileAction = (element) => {
    this.setState({
      profVisible: true,
      card: element
    })
  }

  /**
   * @description 验证信息保存
   */
  verifySubmit = () => {
    const { elements } = this.state
    
    this.verifyRef.handleConfirm().then(res => {
      console.log(res)
      let _elements = elements.map(cell => {
        if (cell.uuid === res.uuid) {
          res.eleType = 'button'
          res.style = cell.style || {}
          return res
        }

        return cell
      })

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

  render() {
    const { cards } = this.props
    const { elements, visible, actvisible, card, dict } = this.state
    const { elements, visible, actvisible, profVisible, card, dict } = this.state

    return (
      <div className="model-menu-card-cell-list">
@@ -330,6 +485,8 @@
          list={elements}
          handleList={this.handleList}
          handleMenu={this.handleElement}
          handleStyle={this.handleStyle}
          profileAction={this.profileAction}
          deleteMenu={this.deleteElement}
        />
        {/* 编辑按钮：复制、编辑 */}
@@ -374,6 +531,54 @@
            wrappedComponentRef={(inst) => this.actionFormRef = inst}
          />
        </Modal>
        {/* 按钮使用系统存储过程时，验证信息模态框 */}
        <Modal
          wrapClassName="model-table-action-verify-modal"
          title={'验证信息'}
          visible={profVisible}
          width={'75vw'}
          maskClosable={false}
          style={{minWidth: '900px', maxWidth: '1200px'}}
          okText={dict['model.submit']}
          onOk={this.verifySubmit}
          onCancel={() => { this.setState({ profVisible: false }) }}
          destroyOnClose
        >
          {card && !card.execMode && card.OpenType !== 'excelIn' && card.OpenType !== 'excelOut' ?
            <VerifyCard
              // floor={this.props.type}
              card={card}
              dict={dict}
              config={cards}
              columns={cards.columns}
              wrappedComponentRef={(inst) => this.verifyRef = inst}
            /> : null
          }
          {card && card.execMode ?
            <VerifyPrint
              card={card}
              dict={dict}
              columns={cards.columns}
              wrappedComponentRef={(inst) => this.verifyRef = inst}
            /> : null
          }
          {card && card.OpenType === 'excelIn' ?
            <VerifyExcelIn
              card={card}
              dict={dict}
              columns={cards.columns}
              wrappedComponentRef={(inst) => this.verifyRef = inst}
            /> : null
          }
          {card && card.OpenType === 'excelOut' ?
            <VerifyExcelOut
              card={card}
              dict={dict}
              config={cards}
              wrappedComponentRef={(inst) => this.verifyRef = inst}
            /> : null
          }
        </Modal>
      </div>
    )
  }