king
2020-11-10 a9ac16fecc0cf9bc66dfaefe4e9b35fa3c722812
src/menu/components/card/cardcellcomponent/index.jsx
@@ -25,7 +25,6 @@
const VerifyPrint = asyncComponent(() => import('@/menu/actioncomponent/verifyprint'))
const VerifyExcelIn = asyncComponent(() => import('@/menu/actioncomponent/verifyexcelin'))
const VerifyExcelOut = asyncComponent(() => import('@/menu/actioncomponent/verifyexcelout'))
// const ModalConfig = asyncComponent(() => import('@/menu/modalconfig'))
class CardCellComponent extends Component {
  static propTpyes = {
@@ -43,7 +42,7 @@
    elements: null,      // 按钮组
    visible: false,      // 模态框控制
    actvisible: false,   // 按钮编辑模态框
    profVisible: false
    profVisible: false,  // 验证信息编辑
  }
  /**
@@ -60,6 +59,7 @@
  componentDidMount () {
    MKEmitter.addListener('cardAddElement', this.cardAddElement)
    MKEmitter.addListener('submitStyle', this.getStyle)
    MKEmitter.addListener('submitModal', this.handleSave)
  }
  shouldComponentUpdate (nextProps, nextState) {
@@ -82,6 +82,8 @@
      return
    }
    MKEmitter.removeListener('cardAddElement', this.cardAddElement)
    MKEmitter.removeListener('submitStyle', this.getStyle)
    MKEmitter.removeListener('submitModal', this.handleSave)
  }
  cardAddElement = (ids, element) => {
@@ -100,10 +102,9 @@
    const { cards, cardCell } = this.props
    let _style = element.style ? fromJS(element.style).toJS() : {}
    let options = ['font', 'border', 'padding', 'margin']
    let options = ['font', 'border', 'padding', 'margin', 'backgroundColor']
    if (element.eleType === 'button') {
      options.push('background')
      if (element.btnstyle) {
        _style = {..._style, ...element.btnstyle}
      }
@@ -130,7 +131,32 @@
    let _card = fromJS(card).toJS()
    
    if (card.eleType === 'button') { // 拆分style
    if (_card.eleType === 'text' || _card.eleType === 'number' || _card.eleType === 'link') {
      _card.style = style
      let fontSize = 14
      let lineHeight = 1.5
      let line = _card.height || 1
      if (_card.style.fontSize) {
        fontSize = parseInt(_card.style.fontSize)
      }
      if (_card.style.lineHeight) {
        lineHeight = parseFloat(_card.style.lineHeight)
      }
      _card.innerHeight = fontSize * lineHeight * line
    } else if (_card.eleType === 'barcode') {
      _card.style = style
      let fontSize = 14
      if (_card.style.fontSize) {
        fontSize = parseInt(_card.style.fontSize)
      }
      _card.innerHeight = _card.barHeight + (_card.displayValue === 'true' ? fontSize + 2 : 0)
    } else if (_card.eleType === 'button') { // 拆分style
      let _style = fromJS(style).toJS()
      _card.style = {}
@@ -201,13 +227,15 @@
   * @description 元素编辑,获取元素表单信息
   */
  handleElement = (card) => {
    const { cards } = this.props
    if (card.eleType === 'button') {
      this.handleAction(card)
    } else {
      this.setState({
        visible: true,
        card: card,
        formlist: getCardCellForm(card)
        formlist: getCardCellForm(card, cards.type)
      })
    }
  }
@@ -374,16 +402,40 @@
  handleSubmit = () => {
    const { elements } = this.state
    this.elementFormRef.handleConfirm().then(ele => {
    this.elementFormRef.handleConfirm().then(res => {
      let _elements = elements.map(cell => {
        if (cell.uuid === ele.uuid) {
          ele.style = cell.style || {}
          if (ele.eleType === 'splitline' && cell.eleType !== 'splitline') {
            ele.style.paddingTop = '5px'
            ele.style.paddingBottom = '5px'
        if (cell.uuid === res.uuid) {
          res.style = cell.style || {}
          if (res.eleType === 'splitline' && cell.eleType !== 'splitline') {
            res.style.paddingTop = '5px'
            res.style.paddingBottom = '5px'
          } else if (res.eleType === 'text' || res.eleType === 'number' || res.eleType === 'link') {
            let fontSize = 14
            let lineHeight = 1.5
            let line = res.height || 1
            if (res.style && res.style.fontSize) {
              fontSize = parseInt(res.style.fontSize)
            }
            if (res.style && res.style.lineHeight) {
              lineHeight = parseFloat(res.style.lineHeight)
            }
            res.innerHeight = fontSize * lineHeight * line
            if (res.eleType === 'link' && !res.style.color) {
              res.style.color = 'rgba(24, 144, 255, 1)'
            }
          } else if (res.eleType === 'barcode') {
            let fontSize = 14
            if (res.style && res.style.fontSize) {
              fontSize = parseInt(res.style.fontSize)
            }
            res.innerHeight = res.barHeight + (res.displayValue === 'true' ? fontSize + 2 : 0)
          }
          
          return ele
          return res
        }
        return cell
      })
@@ -403,15 +455,13 @@
  handleActionSubmit = () => {
    const { elements } = this.state
    this.actionFormRef.handleConfirm().then(ele => {
    this.actionFormRef.handleConfirm().then(res => {
      let _elements = elements.map(cell => {
        if (cell.uuid === ele.uuid) {
          ele.eleType = 'button'
          ele.style = cell.style || {}
          ele.btnstyle = cell.btnstyle || {}
          return ele
        if (cell.uuid === res.uuid) {
          res = {...cell, ...res}
          delete res.focus
          return res
        }
        return cell
      })
@@ -460,15 +510,12 @@
   * @description 验证信息保存
   */
  verifySubmit = () => {
    const { elements } = this.state
    const { elements, card } = 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
        if (cell.uuid === card.uuid) {
          cell.verify = res
        }
        return cell
@@ -476,7 +523,7 @@
      this.setState({
        elements: _elements,
        actvisible: false
        profVisible: false
      }, () => {
        this.props.updateElement(_elements)
      })
@@ -484,7 +531,52 @@
  }
  handleSubConfig = (item) => {
    console.log(item)
    const { cards } = this.props
    if (item.eleType !== 'button') return
    if (item.OpenType === 'pop') {
      let btn = fromJS(item).toJS()
      if (!btn.modal) {
        btn.modal = {
          setting: {
            title: btn.label,
            width: 60,
            cols: '2',
            container: 'tab',
            focus: '',
            finish: 'close',
            clickouter: 'unclose',
            display: 'modal'
          },
          tables: [],
          groups: [],
          fields: []
        }
      }
      MKEmitter.emit('changeModal', cards, btn)
    }
  }
  handleSave = (_cards, btn, modal) => {
    const { cards } = this.props
    const { elements } = this.state
    if (cards.uuid !== _cards.uuid) return
    let _elements = elements.map(cell => {
      if (cell.uuid === btn.uuid) {
        cell.modal = modal
      }
      return cell
    })
    this.setState({
      elements: _elements
    }, () => {
      this.props.updateElement(_elements)
    })
  }
  render() {
@@ -502,18 +594,6 @@
          handleSubConfig={this.handleSubConfig}
          deleteMenu={this.deleteElement}
        />
          {/* <ModalConfig
            menu={this.state.editMenu}
            editTab={this.state.editTab}
            tabConfig={this.state.tabConfig}
            editSubTab={this.state.editSubTab}
            subTabConfig={this.state.subTabConfig}
            btnTab={this.state.btnTab}
            btnTabConfig={this.state.btnTabConfig}
            editAction={this.state.editAction}
            subConfig={this.state.subConfig}
            handleView={this.handleView}
          /> */}
        {/* 编辑按钮:复制、编辑 */}
        <Modal
          title={'编辑元素'}
@@ -572,7 +652,6 @@
        >
          {card && !card.execMode && card.OpenType !== 'excelIn' && card.OpenType !== 'excelOut' ?
            <VerifyCard
              // floor={this.props.type}
              card={card}
              dict={dict}
              config={cards}