2020-09-29

king

2020-09-29 30273c297c59887434f44a75df75f13db6c8885c

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

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { Icon, Popover, Switch } from 'antd'
import { Icon, Popover } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'
@@ -15,8 +15,7 @@

const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const WrapComponent = asyncIconComponent(() => import('./wrapsetting'))
// const ActionComponent = asyncComponent(() => import('@/menu/actioncomponent'))
const CardCellComponent = asyncComponent(() => import('../cardcellcomponent'))
const CardComponent = asyncComponent(() => import('../cardcomponent'))

class antvBarLineChart extends Component {
  static propTpyes = {
@@ -60,12 +59,17 @@
        name: card.name,
        subtype: card.subtype,
        setting: { interType: 'system' },
        wrap: { name: card.name, width: 24, cardWidth: 6, addable: 'false', switch: 'false' },
        wrap: { name: card.name, width: 24, addable: 'false', switch: 'false' },
        style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' },
        columns: [],
        scripts: [],
        // action: [],
        elements: []
        subcards: [{
          uuid: Utils.getuuid(),
          setting: { width: 6 },
          elements: [],
          backElements: []
        }]
      }
      this.setState({
        card: _card
@@ -107,56 +111,7 @@
    this.props.updateConfig(component)
  }

  addElement = () => {
    const { card } = this.state

    let newcard = {}
    newcard.uuid = Utils.getuuid()
    newcard.focus = true
    
    newcard.eleType = 'text'
    newcard.datatype = 'dynamic'
    newcard.color = 'rgba(0,0,0,0.85)'
    newcard.padding = '5px'
    newcard.align = 'left'

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

  addButton = () => {
    const { card } = this.state

    let newcard = {}
    newcard.uuid = Utils.getuuid()
    newcard.focus = true
    
    newcard.label = 'button'
    newcard.sqlType = ''
    newcard.Ot = 'requiredSgl'
    newcard.OpenType = 'prompt'
    newcard.icon = ''
    newcard.class = 'default'
    newcard.intertype = 'system'
    newcard.method = 'POST'
    newcard.execSuccess = 'grid'
    newcard.execError = 'never'
    newcard.popClose = 'never'
    newcard.errorTime = 10
    newcard.verify = null
    newcard.show = 'link'

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

  changeStyle = () => {
    const { card } = this.state

    MKEmitter.emit('changeStyle', [card.uuid], ['font', 'background', 'border'], {})
  }

  changeOutStyle = () => {
    const { card } = this.state

    MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin'], card.style)
@@ -165,16 +120,12 @@
  getStyle = (comIds, style) => {
    const { card } = this.state

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

    this.setState({
      card: {...card, style}
    })
    console.log(style)
  }

  changeSide = () => {
    this.setState(prev => ({ back: !prev.back }))
  }

  render() {
@@ -185,29 +136,14 @@
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <WrapComponent config={card} updateConfig={this.updateComponent} />
            <Icon className="style" title="调整样式" onClick={this.changeOutStyle} type="font-colors" />
            <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
            <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
            <SettingComponent config={card} updateConfig={this.updateComponent} />
          </div>
        } trigger="hover">
          <Icon type="tool" />
        </Popover>
        <div className={'ant-col card-item ant-col-' + (card.wrap.cardWidth || 6)} style={{height: card.wrap.height ? card.wrap.height + 'px' : 'auto'}}>
          <CardCellComponent config={card} updateElement={this.updateComponent}/>
          {/* <ActionComponent plus="false" config={card} updateaction={this.updateComponent}/> */}
          <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" />
                <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
                <Switch size="small" onClick={this.changeSide} defaultChecked />
              </div>
            } trigger="hover">
              <Icon type="tool" />
            </Popover>
          </div>
        </div>
        {card.subcards.map(subcard => (<CardComponent key={subcard.uuid} config={card} card={subcard} updateElement={this.updateComponent}/>))}
        {card.wrap.addable === 'true' ? <div className="card-add-button"><Icon type="plus" /></div> : null}
      </div>
    )