king
2022-08-02 8d66ff34fae5b048a6b7923cc75d34f13a08be9d
src/menu/components/card/cardsimplecomponent/index.jsx
@@ -1,7 +1,8 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Popover, Icon } from 'antd'
import { Popover } from 'antd'
import { PlusOutlined, PlusSquareOutlined, EditOutlined, ArrowLeftOutlined, ArrowRightOutlined, SwapOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons'
import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'
@@ -9,9 +10,10 @@
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'))
@@ -27,6 +29,7 @@
  state = {
    card: null,            // 卡片信息
    formlist: null,        // 设置表单信息
    appType: sessionStorage.getItem('appType')
  }
  /**
@@ -100,6 +103,8 @@
    newcard.padding = '5px'
    newcard.align = 'left'
    window.GLOB.$lock = false
    // 注册事件-添加元素
    MKEmitter.emit('cardAddElement', [cards.uuid, card.uuid], newcard)
  }
@@ -134,22 +139,56 @@
  getSettingForms = () => {
    const { cards } = this.props
    const { setting } = this.state.card
    const { card } = this.state
    if (cards.type !== 'carousel') {
      return getTableSetting(setting, cards.columns)
      let buttons = []
      card.elements && card.elements.forEach(item => {
        if (item.eleType === 'button') {
          buttons.push({
            value: item.uuid,
            label: item.label
          })
        }
      })
      return getTableSetting(card.setting, cards.columns, buttons, cards.action)
    } else {
      return getCarouselSetting(setting, cards.subtype === 'propcard')
      return getCarouselSetting(card.setting, cards.subtype === 'propcard')
    }
  }
  updateSetting = (res) => {
  updateNodes = (res) => {
    const { card } = this.state
    if (res.appmenu) {
      res.menu = res.appmenu
    this.setState({
      card: {...card, nodes: res}
    })
    this.props.updateElement({...card, nodes: res})
  }
  updateSetting = (res) => {
    const { card, appType } = this.state
    if (appType === '' && res.menu) {
      let list = null
      try {
        list = JSON.parse(sessionStorage.getItem('thdMenuList')) || []
      } catch (e) {
        list = []
      }
      let id = res.menu[res.menu.length - 1]
      list.forEach(item => {
        if (item.MenuID === id) {
          res.MenuID = id
          res.MenuName = item.MenuName
          res.MenuNo = item.MenuNo
          res.tabType = item.type
        }
      })
    }
    delete res.appmenu
    let _card = {...card, setting: res}
@@ -166,6 +205,11 @@
    if (cards.type === 'carousel') {
      _style.height = cards.style.height
    }
    let control = true
    if (cards.subtype === 'datacard' || cards.type === 'timeline') {
      control = false
    }
    
    _style = resetStyle(_style)
@@ -176,25 +220,25 @@
          <div className="card-control">
            <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
              <div className="mk-popover-control">
                <Icon className="plus" title="添加元素" onClick={this.addElement} type="plus" />
                <Icon className="plus" title="添加按钮" onClick={this.addButton} type="plus-square" />
                <NormalForm title="卡片设置" width={700} update={this.updateSetting} getForms={this.getSettingForms}>
                  <Icon type="edit" style={{color: '#1890ff'}} title="编辑"/>
                </NormalForm>
                <CopyComponent type="cardcell" card={card}/>
                <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
                {cards.subtype !== 'datacard' ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
                <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">
                    <Icon className="plus" title="前移" type="arrow-left" onClick={() => this.props.move(card, 'left')} />
                    <Icon className="close" title="后移" type="arrow-right" onClick={() => this.props.move(card, 'right')} />
                    <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')}>
                  <Icon type="swap" id={card.uuid + 'swap'}/>
                  <SwapOutlined id={card.uuid + 'swap'}/>
                </Popover> : null}
                {cards.subtype !== 'datacard' ? <Icon className="close" title="删除卡片" type="delete" onClick={() => this.props.deleteElement(card)} /> : null}
                {control ? <DeleteOutlined className="close" title="删除卡片" onClick={() => this.props.deleteElement(card)} /> : null}
              </div>
            } trigger="hover">
              <Icon type="tool" />
              <ToolOutlined/>
            </Popover>
          </div>
        </div>