2021-07-28

king

2021-07-28 137fb8ea6af2789b3238b22bac31d80bced41dfe

 src/menu/components/card/table-card/index.jsx

@@ -5,7 +5,7 @@

import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'

import { resetStyle } from '@/utils/utils-custom.js'
import MKEmitter from '@/utils/events.js'
import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/model.js'
@@ -15,6 +15,7 @@
const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const WrapComponent = asyncIconComponent(() => import('../data-card/wrapsetting'))
const CardComponent = asyncComponent(() => import('./cardcomponent'))
const MobPagination = asyncIconComponent(() => import('@/menu/components/share/mobPagination'))
const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent'))
const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent'))
@@ -33,6 +34,7 @@
  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    card: null,
    appType: sessionStorage.getItem('appType'),
    back: false
  }

@@ -171,6 +173,7 @@
   * @description 单个卡片信息更新
   */
  deleteCard = (cell) => {
    const { appType } = this.state
    let card = fromJS(this.state.card).toJS()
    let _this = this

@@ -178,15 +181,6 @@
      content: '确定删除卡片吗？',
      onOk() {
        card.subcards = card.subcards.filter(item => item.uuid !== cell.uuid)
        
        let uuids = []
        cell.elements && cell.elements.forEach(c => {
          if (c.eleType === 'button') {
            uuids.push(c.uuid)
          }
        })

        MKEmitter.emit('delButtons', uuids)

        if (card.btnlog) {
          card.btnlog = card.btnlog.filter(c => c.$parentId !== cell.uuid)
@@ -194,6 +188,20 @@

        _this.setState({card})
        _this.props.updateConfig(card)

        if (appType === 'mob') return

        let uuids = []

        cell.elements && cell.elements.forEach(c => {
          if (c.eleType !== 'button' || (appType === 'pc' && c.OpenType !== 'popview')) return

          uuids.push(c.uuid)
        })

        if (uuids.length === 0) return
        
        MKEmitter.emit('delButtons', uuids)
      },
      onCancel() {}
    })
@@ -202,7 +210,7 @@
  changeStyle = () => {
    const { card } = this.state

    MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin'], card.style)
    MKEmitter.emit('changeStyle', [card.uuid], ['height', 'background', 'border', 'padding', 'margin'], card.style)
  }

  getStyle = (comIds, style) => {
@@ -314,6 +322,26 @@
    }
  }

  move = (item, direction) => {
    let card = fromJS(this.state.card).toJS()

    let dragIndex = card.subcards.findIndex(c => c.uuid === item.uuid)
    let hoverIndex = null

    if (direction === 'left') {
      hoverIndex = dragIndex - 1
    } else {
      hoverIndex = dragIndex + 1
    }

    if (hoverIndex === -1 || hoverIndex === card.subcards.length) return 

    card.subcards.splice(hoverIndex, 0, ...card.subcards.splice(dragIndex, 1))

    this.setState({card})
    this.props.updateConfig(card)
  }

  clickComponent = (e) => {
    if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') {
      e.stopPropagation()
@@ -322,15 +350,16 @@
  }

  render() {
    const { card } = this.state
    const { card, appType } = this.state
    let _style = resetStyle(card.style)

    return (
      <div className="menu-table-card-edit-box" style={{...card.style, height: card.wrap.height}} onClick={this.clickComponent} id={card.uuid}>
      <div className="menu-table-card-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}>
        <NormalHeader config={card} updateComponent={this.updateComponent}/>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <Icon className="plus" title="添加卡片" onClick={this.addCard} type="plus" />
            <Icon className="plus" title="添加搜索" onClick={this.addSearch} type="plus-circle" />
            {appType !== 'mob' ? <Icon className="plus" title="添加搜索" onClick={this.addSearch} type="plus-circle" /> : null}
            <WrapComponent config={card} updateConfig={this.updateComponent} />
            <CopyComponent type="tablecard" card={card}/>
            <PasteComponent config={card} options={['cardcell', 'search', 'form']} updateConfig={this.updateComponent} />
@@ -343,10 +372,11 @@
        } trigger="hover">
          <Icon type="tool" />
        </Popover>
        <div style={{minHeight: card.wrap.height - 90}}>
          {card.subcards.map(subcard => (<CardComponent key={subcard.uuid} cards={card} card={subcard} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))}
        <div style={{minHeight: 'calc(100% - 90px)'}}>
          {card.subcards.map(subcard => (<CardComponent key={subcard.uuid} cards={card} card={subcard} updateElement={this.updateCard} move={this.move} deleteElement={this.deleteCard}/>))}
        </div>
        {card.setting.laypage === 'true' ? <Pagination size="small" total={50} /> : null}
        {card.setting.laypage === 'true' && card.wrap.pagestyle !== 'slide' && appType !== 'mob' ? <Pagination size="small" total={50} /> : null}
        {card.setting.laypage === 'true' && card.wrap.pagestyle !== 'slide' && appType === 'mob' ? <MobPagination /> : null}
      </div>
    )
  }