2023-02-17

king

2023-02-17 8137ac074ce6370e4b46295e7acf9c7870ef82d2

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

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Popover, Col } from 'antd'
import { PlusOutlined, PlusSquareOutlined, EditOutlined, ToolOutlined, FontColorsOutlined } from '@ant-design/icons'
import { UpOutlined, PlusOutlined, PlusSquareOutlined, EditOutlined, ToolOutlined, FontColorsOutlined } from '@ant-design/icons'

import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'
@@ -136,6 +136,7 @@
  }

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

    let buttons = []
@@ -148,10 +149,11 @@
      }
    })

    return getSettingForm(card.setting, buttons)
    return getSettingForm(card.setting, buttons, cards.columns, 'main')
  }

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

    let buttons = []
@@ -164,7 +166,7 @@
      }
    })

    return getSettingForm(card.backSetting, buttons)
    return getSettingForm(card.backSetting, buttons, cards.subColumns)
  }

  updateSetting = (res, type) => {
@@ -239,20 +241,32 @@

    let _style = {...card.style}
    let _backStyle = {...card.backStyle}

    _backStyle.marginLeft = _style.marginLeft
    _backStyle.marginRight = _style.marginRight
    _backStyle.marginBottom = _style.marginBottom
    
    delete _style.marginBottom
    let _wrapStyle = {}

    _style = resetStyle(_style)
    _backStyle = resetStyle(_backStyle)

    if (card.setting.position === 'inner') {
      Object.keys(_style).forEach(key => {
        if (!/^(margin|border|box)/.test(key)) return
        _wrapStyle[key] = _style[key]
        delete _style[key]
      })
    }

    let checkAll = ''
    if (cards.wrap.selStyle === 'check') {
      checkAll = 'mk-checkable'
    } else if (cards.wrap.selStyle === 'check square') {
      checkAll = 'mk-checkable square'
    }

    return (
      <Col span={card.setting.width || 24}>
        <div className="card-item-wrap">
          <div className={'card-item ' + (card.setting.btnControl || '')} style={_style} onDoubleClick={(e) => {e.stopPropagation(); this.doubleClickCard()}} id={card.uuid}>
        <div className="card-item-wrap" style={_wrapStyle}>
          <div className={`card-item ${card.setting.btnControl || ''} ${checkAll} mk-${card.setting.display}`} style={_style} onDoubleClick={(e) => {e.stopPropagation(); this.doubleClickCard()}} id={card.uuid}>
            <span className="circle-select"></span>
            {card.setting.controlIcon === 'left' ? <PlusSquareOutlined /> : <UpOutlined />}
            <div className="card-control" onDoubleClick={(e) => e.stopPropagation()}>
              <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
                <div className="mk-popover-control">
@@ -271,25 +285,27 @@
            </div>
            <CardCellComponent cards={cards} cardCell={card} side="main" elements={card.elements} updateElement={(elements, btn) => this.updateCard(elements, btn)}/>
          </div>
          <div className={'card-item ' + (card.backSetting.btnControl || '')} style={_backStyle} onDoubleClick={(e) => {e.stopPropagation(); this.doubleClickCard('sub')}} id={card.uuid}>
            <div className="card-control" onDoubleClick={(e) => e.stopPropagation()}>
              <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
                <div className="mk-popover-control">
                  <PlusOutlined className="plus" title="添加元素" onClick={() => this.addElement('sub')} />
                  <PlusSquareOutlined className="plus" title="添加按钮" onClick={() => this.addButton('sub')} />
                  <NormalForm title={'循环子卡片设置'} width={950} update={(res) => this.updateSetting(res, 'sub')} getForms={this.getBackSettingForms}>
                    <EditOutlined className="edit" title="编辑"/>
                  </NormalForm>
                  <CopyComponent type="cardcell" card={card}/>
                  <PasteController options={['action', 'customCardElement']} updateConfig={(element, resolve) => this.paste(element, resolve, 'sub')} />
                  <FontColorsOutlined className="style" title="调整样式" onClick={() => this.changeStyle('sub')} />
                </div>
              } trigger="hover">
                <ToolOutlined />
              </Popover>
          <Col span={card.backSetting.width || 24}>
            <div className={'card-item ' + (card.backSetting.btnControl || '')} style={_backStyle} onDoubleClick={(e) => {e.stopPropagation(); this.doubleClickCard('sub')}} id={card.uuid}>
              <div className="card-control" onDoubleClick={(e) => e.stopPropagation()}>
                <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
                  <div className="mk-popover-control">
                    <PlusOutlined className="plus" title="添加元素" onClick={() => this.addElement('sub')} />
                    <PlusSquareOutlined className="plus" title="添加按钮" onClick={() => this.addButton('sub')} />
                    <NormalForm title={'循环子卡片设置'} width={950} update={(res) => this.updateSetting(res, 'sub')} getForms={this.getBackSettingForms}>
                      <EditOutlined className="edit" title="编辑"/>
                    </NormalForm>
                    <CopyComponent type="cardcell" card={card}/>
                    <PasteController options={['action', 'customCardElement']} updateConfig={(element, resolve) => this.paste(element, resolve, 'sub')} />
                    <FontColorsOutlined className="style" title="调整样式" onClick={() => this.changeStyle('sub')} />
                  </div>
                } trigger="hover">
                  <ToolOutlined />
                </Popover>
              </div>
              <CardCellComponent cards={cards} cardCell={card} side="sub" elements={card.backElements} updateElement={(elements, btn) => this.updateCard(elements, btn, 'sub')}/>
            </div>
            <CardCellComponent cards={cards} cardCell={card} side="sub" elements={card.backElements} updateElement={(elements, btn) => this.updateCard(elements, btn, 'sub')}/>
          </div>
          </Col>
        </div>
      </Col>
    )