2025-03-24

king

2025-03-24 1563e2ef18b013bb7bb5781a22e7d92f40454f69

 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, Modal, Button } 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'
@@ -11,9 +12,13 @@
import MKEmitter from '@/utils/events.js'
import './index.scss'

const { confirm } = Modal

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 = {
@@ -27,6 +32,8 @@
  state = {
    card: null,            // 卡片信息
    formlist: null,        // 设置表单信息
    appType: sessionStorage.getItem('appType'),
    timestamp: ''
  }

  /**
@@ -36,12 +43,9 @@
    const { card } = this.props

    this.setState({
      card: fromJS(card).toJS()
      card: fromJS(card).toJS(),
      timestamp: new Date().getTime() + ''
    })
  }

  componentDidMount () {
    MKEmitter.addListener('submitStyle', this.getStyle)
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -55,14 +59,10 @@
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('submitStyle', this.getStyle)
  }

  getStyle = (comIds, style) => {
    const { cards } = this.props
  getStyle = (style) => {
    const { card } = this.state

    if (comIds.length !== 2 || comIds[0] !== cards.uuid || comIds[1] !== card.uuid) return

    let _card = fromJS(card).toJS()
    _card.style = style
@@ -87,7 +87,6 @@
  }
  
  addElement = () => {
    const { cards } = this.props
    const { card } = this.state

    let newcard = {}
@@ -100,12 +99,13 @@
    newcard.padding = '5px'
    newcard.align = 'left'

    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'}
@@ -114,7 +114,7 @@
    

    // 注册事件-添加元素
    MKEmitter.emit('cardAddElement', [cards.uuid, card.uuid], newcard)
    MKEmitter.emit('cardAddElement', card.uuid, newcard)
  }

  changeStyle = () => {
@@ -129,7 +129,7 @@
      options = ['background', 'border', 'padding', 'margin', 'shadow']
    }

    MKEmitter.emit('changeStyle', [cards.uuid, card.uuid], options, _style)
    MKEmitter.emit('changeStyle', options, _style, this.getStyle)
  }

  getSettingForms = () => {
@@ -146,14 +146,44 @@
          })
        }
      })
      return getTableSetting(card.setting, cards.columns, buttons)
      return getTableSetting(card.setting, cards.columns, buttons, cards.action)
    } else {
      return getCarouselSetting(card.setting, cards.subtype === 'propcard')
    }
  }

  updateSetting = (res) => {
  updateNodes = (res) => {
    const { card } = this.state

    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
        }
      })
    }

    let _card = {...card, setting: res}

@@ -161,46 +191,170 @@
    this.props.updateElement(_card)
  }

  updateFields = (elements, resolve, type) => {
    const { card } = this.state

    let items = elements

    if (type === 'form') {
      items = []

      elements.forEach(item => {
        let cell = {
          uuid: Utils.getuuid(),
          eleType: 'text',
          height: 1,
          innerHeight: 21,
          prefix: item.label ? item.label + ': ' : '',
          datatype: item.field ? 'dynamic' : 'static',
          field: item.field || '',
          width: item.span || 12,
          value: '',
          style: {marginBottom: '15px', color: 'rgba(0, 0, 0, 0.85)'}
        }

        if (item.type === 'number') {
          cell.eleType = 'number'
          cell.decimal = typeof(item.decimal) === 'number' ? item.decimal : ''
        } else if (item.type === 'split') {
          cell.width = 24
          cell.prefix = ''
          cell.value = item.label || ''
          cell.style = {
            color: '#1890ff',
            marginBottom: '15px',
            borderBottomWidth: '1px',
            borderBottomColor: '#e9e9e9'
          }
        }

        items.push(cell)
      })
    }

    if (items.length === 0) {
      resolve({status: false, message: '元素不可为空！'})
      return
    }

    let _card = { ...card, elements: items }
    let _card2 = { ...card, elements: [...card.elements, ...items] }

    if (card.elements.length === 0) {
      this.setState({
        card: _card,
        timestamp: new Date().getTime() + ''
      })

      this.props.updateElement(_card)
    } else {
      const that = this
      const _modal = confirm({
        title: '卡片中已存在元素，请选择要进行的操作。',
        className: 'mk-confirm-modal',
        content: <div className="footer">
          <Button key="cancel" onClick={() => _modal.destroy()}>取消</Button>
          <Button key="replace" className="mk-border-purple" onClick={() => {
            that.setState({
              card: _card,
              timestamp: new Date().getTime() + ''
            })
      
            that.props.updateElement(_card)
            _modal.destroy()
          }}>替换</Button>
          <Button key="confirm" className="mk-border-green" onClick={() => {
            that.setState({
              card: _card2,
              timestamp: new Date().getTime() + ''
            })
      
            that.props.updateElement(_card2)
            _modal.destroy()
          }}>添加</Button>
        </div>
      })
    }

    resolve({status: true})
  }

  paste = (element, resolve) => {
    const { card } = this.state

    if (['simpleform', 'forms', 'formgroup', 'cardcell'].includes(element.copyType)) {
      if (element.copyType === 'simpleform') {
        this.updateFields(element.subcards[0].fields, resolve, 'form')
      } else if (element.copyType === 'forms') {
        this.updateFields(element.fields, resolve, 'form')
      } else if (element.copyType === 'formgroup') {
        this.updateFields(element.fields, resolve, 'form')
      } else {
        this.updateFields(element.elements, resolve)
      }
      return
    }

    let _uuid = Utils.getuuid()
    
    if (element.copyType === 'action') {
      element.eleType = 'button'
      element.width = element.width || element.width === 0 ? 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
    const { card, timestamp } = this.state

    let _style = {...card.style}

    if (cards.type === 'carousel') {
      _style.height = cards.style.height
      _style.height = cards.wrap.height
    }

    let control = true
    if (cards.subtype === 'datacard' || cards.type === 'timeline') {
      control = false
    }
    
    _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">
                <Icon className="plus" title="添加元素" onClick={this.addElement} type="plus" />
                <Icon className="plus" title="添加按钮" onClick={this.addButton} type="plus-square" />
                <NormalForm title="卡片设置" width={800} 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={
                  <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')} />
                  </div>
                } trigger="hover" getPopupContainer={() => document.getElementById(card.uuid + 'swap')}>
                  <Icon type="swap" id={card.uuid + 'swap'}/>
                </Popover> : null}
                {cards.subtype !== 'datacard' ? <Icon className="close" title="删除卡片" type="delete" onClick={() => this.props.deleteElement(card)} /> : null}
              </div>
            } trigger="hover">
              <Icon type="tool" />
            </Popover>
          </div>
      <div className="card-item" style={_style}>
        <CardCellComponent cards={cards} cardCell={card} timestamp={timestamp} 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', 'simpleform', 'forms', 'formgroup', 'cardcell']} 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>
    )