king
2023-06-22 79e4981aa6cc9354276fc54cdf6d14eb08ab7fee
src/menu/components/card/cardsimplecomponent/index.jsx
@@ -10,12 +10,13 @@
import { getTableSetting, getCarouselSetting } from './options'
import Utils from '@/utils/utils.js'
import MKEmitter from '@/utils/events.js'
// import './index.scss'
import './index.scss'
const NormalForm = asyncIconComponent(() => import('@/components/normalform'))
const NodesWrap = asyncComponent(() => import('./node-wrap'))
const CardCellComponent = asyncComponent(() => import('../cardcellcomponent'))
const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
const PasteController = asyncIconComponent(() => import('@/components/paste'))
class CardBoxComponent extends Component {
  static propTpyes = {
@@ -82,7 +83,6 @@
  }
  
  addElement = () => {
    const { cards } = this.props
    const { card } = this.state
    let newcard = {}
@@ -98,11 +98,10 @@
    window.GLOB.$lock = false
    // 注册事件-添加元素
    MKEmitter.emit('cardAddElement', [cards.uuid, card.uuid], newcard)
    MKEmitter.emit('cardAddElement', card.uuid, newcard)
  }
  addButton = () => {
    const { cards } = this.props
    const { card } = this.state
    let newcard = {eleType: 'button', label: 'button', verify: null, show: 'link', sqlType: '', Ot: 'requiredSgl', OpenType: 'prompt', icon: '', class: 'primary', intertype: 'system', execSuccess: 'grid', execError: 'never', popClose: 'never'}
@@ -111,7 +110,7 @@
    
    // 注册事件-添加元素
    MKEmitter.emit('cardAddElement', [cards.uuid, card.uuid], newcard)
    MKEmitter.emit('cardAddElement', card.uuid, newcard)
  }
  changeStyle = () => {
@@ -188,6 +187,25 @@
    this.props.updateElement(_card)
  }
  paste = (element, resolve) => {
    const { card } = this.state
    let _uuid = Utils.getuuid()
    if (element.copyType === 'action') {
      element.eleType = 'button'
      element.width = element.width || 12
    }
    element.uuid = _uuid
    element.focus = true
    resolve({status: true})
    // 注册事件-添加元素
    MKEmitter.emit('cardAddElement', card.uuid, element)
  }
  render() {
    const { cards } = this.props
    const { card } = this.state
@@ -195,7 +213,7 @@
    let _style = {...card.style}
    if (cards.type === 'carousel') {
      _style.height = cards.style.height
      _style.height = cards.wrap.height
    }
    let control = true
@@ -206,33 +224,32 @@
    _style = resetStyle(_style)
    return (
      <div className="ant-col ant-col-24">
        <div className="card-item" style={_style}>
          <CardCellComponent cards={cards} cardCell={card} elements={card.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">
                <PlusOutlined className="plus" title="添加元素" onClick={this.addElement}/>
                <PlusSquareOutlined className="plus" title="添加按钮" onClick={this.addButton}/>
                {cards.type !== 'timeline' ? <NormalForm title="卡片设置" width={800} update={this.updateSetting} getForms={this.getSettingForms}>
                  <EditOutlined style={{color: '#1890ff'}} title="编辑"/>
                </NormalForm> : <NodesWrap card={card} updateMenus={this.updateNodes}/>}
                {cards.type !== 'timeline' ? <CopyComponent type="cardcell" card={card}/> : null}
                <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/>
                {control ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
                  <div className="mk-popover-control">
                    <ArrowLeftOutlined className="plus" title="前移" onClick={() => this.props.move(card, 'left')} />
                    <ArrowRightOutlined className="close" title="后移" onClick={() => this.props.move(card, 'right')} />
                  </div>
                } trigger="hover" getPopupContainer={() => document.getElementById(card.uuid + 'swap')}>
                  <SwapOutlined id={card.uuid + 'swap'}/>
                </Popover> : null}
                {control ? <DeleteOutlined className="close" title="删除卡片" onClick={() => this.props.deleteElement(card)} /> : null}
              </div>
            } trigger="hover">
              <ToolOutlined/>
            </Popover>
          </div>
      <div className="card-item" style={_style}>
        <CardCellComponent cards={cards} cardCell={card} elements={card.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">
              <PlusOutlined className="plus" title="添加元素" onClick={this.addElement}/>
              <PlusSquareOutlined className="plus" title="添加按钮" onClick={this.addButton}/>
              {cards.type !== 'timeline' ? <NormalForm title="卡片设置" width={800} update={this.updateSetting} getForms={this.getSettingForms}>
                <EditOutlined style={{color: '#1890ff'}} title="编辑"/>
              </NormalForm> : <NodesWrap card={card} updateMenus={this.updateNodes}/>}
              {cards.type !== 'timeline' ? <CopyComponent type="cardcell" card={card}/> : null}
              <PasteController options={['action', 'customCardElement']} updateConfig={this.paste} />
              <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/>
              {control ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
                <div className="mk-popover-control">
                  <ArrowLeftOutlined className="plus" title="前移" onClick={() => this.props.move(card, 'left')} />
                  <ArrowRightOutlined className="close" title="后移" onClick={() => this.props.move(card, 'right')} />
                </div>
              } trigger="hover" getPopupContainer={() => document.getElementById(card.uuid + 'swap')}>
                <SwapOutlined id={card.uuid + 'swap'}/>
              </Popover> : null}
              {control ? <DeleteOutlined className="close" title="删除卡片" onClick={() => this.props.deleteElement(card)} /> : null}
            </div>
          } trigger="hover">
            <ToolOutlined/>
          </Popover>
        </div>
      </div>
    )