2020-11-06

king

2020-11-06 00de865d827da6687928b10f031482628a5144c8

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

@@ -15,11 +15,12 @@

const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const WrapComponent = asyncIconComponent(() => import('../data-card/wrapsetting'))
const CardComponent = asyncComponent(() => import('../cardcomponent'))
const SearchComponent = asyncComponent(() => import('@/menu/searchcomponent'))
const CardComponent = asyncComponent(() => import('./cardcomponent'))

const { confirm } = Modal

class antvBarLineChart extends Component {
class TableCardEditComponent extends Component {
  static propTpyes = {
    card: PropTypes.object,
    deletecomponent: PropTypes.func,
@@ -53,9 +54,7 @@
          uuid: Utils.getuuid(),
          setting: { width: 24, type: 'simple'},
          style: {
            borderWidth: '1px', borderColor: '#e8e8e8',
            paddingTop: '15px', paddingBottom: '15px', paddingLeft: '15px', paddingRight: '15px',
            marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px'
            paddingTop: '5px', paddingBottom: '5px', paddingLeft: '15px', paddingRight: '15px',
          },
          elements: []
        }]
@@ -72,15 +71,18 @@
        switchable: false,  // 组件属性 - 数据是否可切换
        dataName: card.dataName || '',
        width: 12,
        search: [],
        name: card.name,
        subtype: card.subtype,
        setting: { interType: 'system' },
        wrap: { name: card.name, width: 12, addable: 'false', switch: 'false', datatype: 'dynamic' },
        style: { marginLeft: '0px', marginRight: '0px', marginTop: '8px', marginBottom: '8px' },
        wrap: { name: card.name, width: 12 },
        style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' },
        headerStyle: { fontSize: '16px' },
        columns: [],
        scripts: [],
        subcards: subcards
      }
      
      this.setState({
        card: _card
      })
@@ -165,12 +167,25 @@
    MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin'], card.style)
  }

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

    MKEmitter.emit('changeStyle', [card.uuid, 'header'], ['font', 'border'], card.headerStyle)
  }

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

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

    let _card = {...card, style}
    let _card = {}
    if (comIds.length === 1) {
      _card = {...card, style}
    } else if (comIds.length === 2 && comIds[1] === 'header') {
      _card = {...card, headerStyle: style}
    } else {
      return
    }

    this.setState({
      card: _card
@@ -186,9 +201,7 @@
      uuid: Utils.getuuid(),
      setting: { width: 6, type: 'simple'},
      style: {
        borderWidth: '1px', borderColor: '#e8e8e8',
        paddingTop: '15px', paddingBottom: '15px', paddingLeft: '15px', paddingRight: '15px',
        marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px'
        paddingTop: '5px', paddingBottom: '5px', paddingLeft: '15px', paddingRight: '15px',
      },
      elements: []
    }
@@ -208,15 +221,48 @@
    this.props.updateConfig(card)
  }

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

    let newcard = {}
    newcard.uuid = Utils.getuuid()
    newcard.focus = true

    newcard.label = 'label'
    newcard.initval = ''
    newcard.type = 'select'
    newcard.resourceType = '0'
    newcard.options = []
    newcard.setAll = 'false'
    newcard.orderType = 'asc'
    newcard.display = 'dropdown'
    newcard.match = '='

    // 注册事件-添加搜索
    MKEmitter.emit('addSearch', card.uuid, newcard)
  }

  render() {
    const { menu } = this.props
    const { card } = this.state

    return (
      <div className="menu-prop-card-edit-box" style={{...card.style, minHeight: card.wrap.minHeight}}>
      <div className="menu-table-card-edit-box" style={{...card.style, height: card.wrap.height}}>
        <div className="table-header" style={card.headerStyle}>
          <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
            <div className="mk-popover-control">
              <Icon className="style" title="调整样式" onClick={this.changeTitleStyle} type="font-colors" />
            </div>
          } trigger="hover">
            <span className="table-title">{card.wrap.title || ''}</span>
          </Popover>
          <SearchComponent config={card} updatesearch={this.updateComponent}/>
        </div>
        <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" />
            <WrapComponent config={card} sysRoles={this.props.menu.sysRoles} updateConfig={this.updateComponent} />
            <Icon className="plus" title="添加搜索" onClick={this.addSearch} type="plus-circle" />
            <WrapComponent config={card} sysRoles={menu ? menu.sysRoles : []} updateConfig={this.updateComponent} />
            <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
            <Icon className="close" title="删除组件" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
            {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null}
@@ -240,4 +286,4 @@
  return {}
}

export default connect(mapStateToProps, mapDispatchToProps)(antvBarLineChart)
export default connect(mapStateToProps, mapDispatchToProps)(TableCardEditComponent)