2023-04-05

king

2023-04-05 0a98c5dab4f2783ff5250cb69715340b40d801bb

2023-04-05

 src/menu/components/card/cardcellcomponent/dragaction/index.jsx

@@ -1,6 +1,7 @@
import React, { useState } from 'react'
import { useDrop } from 'react-dnd'
import { is, fromJS } from 'immutable'
import { message } from 'antd'
import update from 'immutability-helper'

import Card from './card'
@@ -53,7 +54,6 @@
    }

    copycard.uuid = Utils.getuuid()
    copycard.originCard = card

    try {
      delete _val.$srcId
@@ -76,12 +76,18 @@
      oInput.select()
      document.execCommand('Copy')
      document.body.removeChild(oInput)
      
      message.success('复制成功。')
    } else {
      message.warning('复制失败。')
    }

    _cards.push(copycard)

    handleList(_cards)
    handleMenu(copycard)
    if (card.eleType !== 'button') {
      _cards.push(copycard)
  
      handleList(_cards)
      handleMenu(copycard)
    }
  }

  const changeStyle = id => {

 src/menu/components/card/cardcellcomponent/elementform/index.jsx

@@ -15,8 +15,8 @@

const cardTypeOptions = {
  sequence: ['eleType', 'width'],
  text: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix', 'link', 'anchors', 'noValue', 'bgImage', 'fixStyle', 'copyable'],
  number: ['eleType', 'datatype', 'width', 'height', 'prefix', 'postfix', 'noValue', 'fixStyle'],
  text: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix', 'link', 'anchors', 'noValue', 'bgImage', 'fixStyle', 'copyable', 'alignItems'],
  number: ['eleType', 'datatype', 'width', 'height', 'prefix', 'postfix', 'noValue', 'fixStyle', 'alignItems'],
  picture: ['eleType', 'datatype', 'width', 'lenWidRadio', 'maxWidth', 'link', 'noValue'],
  video: ['eleType', 'datatype', 'width', 'aspectRatio', 'autoPlay', 'loop', 'startTime', 'noValue', 'posterType'],
  icon: ['eleType', 'datatype', 'width', 'tooltip'],
@@ -25,7 +25,7 @@
  barcode: ['eleType', 'datatype', 'width', 'barHeight', 'displayValue', 'interval', 'noValue'],
  qrcode: ['eleType', 'datatype', 'width', 'qrWidth', 'color', 'url', 'noValue'],
  currentDate: ['eleType', 'width', 'dateFormat', 'prefix', 'postfix', 'fixStyle'],
  formula: ['eleType', 'width', 'height', 'prefix', 'postfix', 'eval', 'formula', 'noValue', 'fixStyle'],
  formula: ['eleType', 'width', 'height', 'prefix', 'postfix', 'eval', 'formula', 'noValue', 'fixStyle', 'alignItems'],
  color: ['eleType', 'datatype', 'width', 'lenWidRadio', 'noValue', 'copyable'],
}


 src/menu/components/card/cardcellcomponent/formconfig.jsx

@@ -43,6 +43,11 @@
    tooltip = '在扩展卡片中，动态数据显示值为获取到的第一行数据。'
  }

  let width = card.width || 12
  if (/x/.test(card.width)) {
    width = +width.replace(/x/, '.5')
  }

  let forms = [
    {
      type: 'select',
@@ -328,12 +333,12 @@
    {
      type: 'number',
      key: 'width',
      min: 1,
      min: 0.5,
      max: 24,
      precision: 0,
      precision: 1,
      label: '元素宽度',
      initVal: card.width || 12,
      tooltip: '栅格布局，每行等分为24列。',
      initVal: width,
      tooltip: '栅格布局，每行等分为24列，可设置半列即.5。',
      required: true
    },
    {
@@ -570,6 +575,19 @@
    },
    {
      type: 'radio',
      key: 'alignItems',
      label: '垂直对齐',
      initVal: card.alignItems || '',
      tooltip: '垂直方向的对齐方式。',
      required: false,
      options: [
        { value: '', text: '居上' },
        { value: 'center', text: '居中' },
        { value: 'end', text: '居下' }
      ]
    },
    {
      type: 'radio',
      key: 'fixStyle',
      label: '前后缀',
      initVal: card.fixStyle || '',

 src/menu/components/card/cardcellcomponent/index.jsx

@@ -361,6 +361,13 @@
    const { elements } = this.state

    this.elementFormRef.handleConfirm().then(res => {
      if (res.width % 0.5) {
        res.width = parseInt(res.width / 0.5) * 0.5
      }
      if (res.width % 1) {
        res.width = (res.width + '').replace(/.5/, 'x')
      }

      let _elements = elements.map(cell => {
        if (cell.uuid === res.uuid) {
          res.style = cell.style || {}
@@ -744,7 +751,7 @@
    const { elements, visible, actvisible, profVisible, card, record } = this.state

    return (
      <div className="model-menu-card-cell-list">
      <div className={'model-menu-card-cell-list ' + (cardCell && cardCell.setting.layout === 'flex' ? 'mk-flex' : '') }>
        <DragElement
          list={elements}
          parent={cardCell}

 src/menu/components/card/cardcellcomponent/index.scss

@@ -43,4 +43,231 @@
  .card-cell:hover, .card-button-cell:hover {
    box-shadow: 0px 0px 2px #1890ff;
  }
  .card-detail-row {
    .ant-col[class*="x"] {
      float: left;
      box-sizing: border-box;
    }
    >.ant-col-0x {
      width: 2.08333333%;
    }
    >.ant-col-1x {
      width: 6.25%;
    }
    >.ant-col-2x {
      width: 10.41666667%;
    }
    >.ant-col-3x {
      width: 14.58333333%;
    }
    >.ant-col-4x {
      width: 18.75%;
    }
    >.ant-col-5x {
      width: 22.91666667%;
    }
    >.ant-col-6x {
      width: 27.08333333%;
    }
    >.ant-col-7x {
      width: 31.25%;
    }
    >.ant-col-8x {
      width: 35.41666667%;
    }
    >.ant-col-9x {
      width: 39.58333333%;
    }
    >.ant-col-10x {
      width: 43.75%;
    }
    >.ant-col-11x {
      width: 47.91666667%;
    }
    >.ant-col-12x {
      width: 52.08333333%;
    }
    >.ant-col-13x {
      width: 56.25%;
    }
    >.ant-col-14x {
      width: 60.41666667%;
    }
    >.ant-col-15x {
      width: 64.58333333%;
    }
    >.ant-col-16x {
      width: 68.75%;
    }
    >.ant-col-17x {
      width: 72.91666667%;
    }
    >.ant-col-18x {
      width: 77.08333333%;
    }
    >.ant-col-19x {
      width: 81.25%;
    }
    >.ant-col-20x {
      width: 85.41666667%;
    }
    >.ant-col-21x {
      width: 89.58333333%;
    }
    >.ant-col-22x {
      width: 93.75%;
    }
    >.ant-col-23x {
      width: 97.91666667%;
    }
  }
}
.model-menu-card-cell-list.mk-flex {
  >.card-detail-row {
    display: flex;
    >.ant-col-1 {
      flex: 1;
    }
    >.ant-col-2 {
      flex: 2;
    }
    >.ant-col-3 {
      flex: 3;
    }
    >.ant-col-4 {
      flex: 4;
    }
    >.ant-col-5 {
      flex: 5;
    }
    >.ant-col-6 {
      flex: 6;
    }
    >.ant-col-7 {
      flex: 7;
    }
    >.ant-col-8 {
      flex: 8;
    }
    >.ant-col-9 {
      flex: 9;
    }
    >.ant-col-10 {
      flex: 10;
    }
    >.ant-col-11 {
      flex: 11;
    }
    >.ant-col-12 {
      flex: 12;
    }
    >.ant-col-13 {
      flex: 13;
    }
    >.ant-col-14 {
      flex: 14;
    }
    >.ant-col-15 {
      flex: 15;
    }
    >.ant-col-16 {
      flex: 16;
    }
    >.ant-col-17 {
      flex: 17;
    }
    >.ant-col-18 {
      flex: 18;
    }
    >.ant-col-19 {
      flex: 19;
    }
    >.ant-col-20 {
      flex: 20;
    }
    >.ant-col-21 {
      flex: 21;
    }
    >.ant-col-22 {
      flex: 22;
    }
    >.ant-col-23 {
      flex: 23;
    }
    >.ant-col-24 {
      flex: 24;
    }
    >.ant-col-0x {
      flex: 0.5;
    }
    >.ant-col-1x {
      flex: 1.5;
    }
    >.ant-col-2x {
      flex: 2.5;
    }
    >.ant-col-3x {
      flex: 3.5;
    }
    >.ant-col-4x {
      flex: 4.5;
    }
    >.ant-col-5x {
      flex: 5.5;
    }
    >.ant-col-6x {
      flex: 6.5;
    }
    >.ant-col-7x {
      flex: 7.5;
    }
    >.ant-col-8x {
      flex: 8.5;
    }
    >.ant-col-9x {
      flex: 9.5;
    }
    >.ant-col-10x {
      flex: 10.5;
    }
    >.ant-col-11x {
      flex: 11.5;
    }
    >.ant-col-12x {
      flex: 12.5;
    }
    >.ant-col-13x {
      flex: 13.5;
    }
    >.ant-col-14x {
      flex: 14.5;
    }
    >.ant-col-15x {
      flex: 15.5;
    }
    >.ant-col-16x {
      flex: 16.5;
    }
    >.ant-col-17x {
      flex: 17.5;
    }
    >.ant-col-18x {
      flex: 18.5;
    }
    >.ant-col-19x {
      flex: 19.5;
    }
    >.ant-col-20x {
      flex: 20.5;
    }
    >.ant-col-21x {
      flex: 21.5;
    }
    >.ant-col-22x {
      flex: 22.5;
    }
    >.ant-col-23x {
      flex: 23.5;
    }
  }
}

 src/menu/components/card/cardcomponent/options.jsx

@@ -214,6 +214,17 @@
    },
    {
      type: 'radio',
      field: 'layout',
      label: '元素布局',
      initval: setting.layout || 'grid',
      required: false,
      options: [
        {value: 'grid', label: '栅格布局'},
        {value: 'flex', label: '弹性布局'},
      ]
    },
    {
      type: 'radio',
      field: 'clickType',
      label: '触发方式',
      initval: setting.clickType || 'normal',

 src/menu/components/card/cardsimplecomponent/options.jsx

@@ -218,6 +218,17 @@
    },
    {
      type: 'radio',
      field: 'layout',
      label: '元素布局',
      initval: setting.layout || 'grid',
      required: false,
      options: [
        {value: 'grid', label: '栅格布局'},
        {value: 'flex', label: '弹性布局'},
      ]
    },
    {
      type: 'radio',
      field: 'click',
      label: '点击事件',
      initval: setting.click || '',

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

@@ -602,7 +602,7 @@
            <PlusOutlined className="plus" title="添加卡片" onClick={() => this.addCard()}/>
            {appType !== 'mob' ? <PlusCircleOutlined className="plus" title="添加搜索" onClick={() => this.addSearch()}/> : null}
            <PlusSquareOutlined className="plus" title="添加按钮" onClick={() => this.addButton()}/>
            <NormalForm title="数据卡设置" width={800} update={this.updateWrap} getForms={this.getWrapForms}>
            <NormalForm title="双重数据卡设置" width={800} update={this.updateWrap} getForms={this.getWrapForms}>
              <EditOutlined style={{color: '#1890ff'}} title="编辑"/>
            </NormalForm>
            <CopyComponent type="datacard" card={card}/>

 src/menu/components/card/double-data-card/options.jsx

@@ -199,6 +199,17 @@
      required: false
    },
    {
      type: 'number',
      field: 'minWidth',
      label: '最小宽度',
      min: 0,
      max: 5000,
      precision: 0,
      initval: wrap.minWidth,
      tooltip: '设置卡片区域的最小宽度，显示区域小于此值将出现横向滚动。',
      required: false
    },
    {
      type: 'radio',
      field: 'permission',
      label: '权限验证',

 src/menu/components/card/doublecardcomponent/options.jsx

@@ -165,6 +165,17 @@
    },
    {
      type: 'radio',
      field: 'layout',
      label: '元素布局',
      initval: setting.layout || 'grid',
      required: false,
      options: [
        {value: 'grid', label: '栅格布局'},
        {value: 'flex', label: '弹性布局'},
      ]
    },
    {
      type: 'radio',
      field: 'clickType',
      label: '触发方式',
      initval: setting.clickType || 'normal',

 src/menu/components/share/actioncomponent/dragaction/index.jsx

@@ -1,6 +1,7 @@
import React, { useState } from 'react'
import { useDrop } from 'react-dnd'
import { is, fromJS } from 'immutable'
import { message } from 'antd'
import update from 'immutability-helper'

import Utils from '@/utils/utils.js'
@@ -69,7 +70,6 @@
    }

    copycard.uuid = Utils.getuuid()
    copycard.originCard = card

    try {
      delete _val.$srcId
@@ -92,13 +92,17 @@
      oInput.select()
      document.execCommand('Copy')
      document.body.removeChild(oInput)

      message.success('复制成功。')
    } else {
      message.warning('复制失败。')
    }

    const { index: overIndex } = findCard(id)
    // const { index: overIndex } = findCard(id)

    const _cards = update(cards, { $splice: [[overIndex + 1, 0, copycard]] })
    // const _cards = update(cards, { $splice: [[overIndex + 1, 0, copycard]] })

    handleList(_cards, copycard)
    // handleList(_cards, copycard)
  }

  const [, drop] = useDrop({

 src/mob/colorsketch/index.jsx

@@ -50,10 +50,10 @@
      }
      
      normal_colors.forEach(item => {
        if (!colors.includes(item)) {
          colors.push(item)
        }
        colors.push({color: item, title: '常用色：' + item})
      })
    } else {
      normal_colors = []
    }

    if (_colors) {
@@ -64,15 +64,15 @@
      }
      
      _colors.forEach(item => {
        if (!colors.includes(item.linkurl)) {
          colors.push(item.linkurl)
        }
        if (normal_colors.includes(item.linkurl)) return
        
        colors.push({color: item.linkurl, title: '系统色：' + item.linkurl})
      })
    }

    if (colors.length < 40) {
      for (let i = colors.length; i < 40; i++) {
        colors.push('transparent')
        colors.push({color: 'transparent', title: '' + i})
      }
    }

@@ -102,8 +102,8 @@

  onVisibleChange = (status) => {
    const { initVal, color } = this.state

    if (!status && color && color !== initVal) {
    
    if (!status && color && color !== initVal && color !== 'rgba(0, 0, 0, 0)' && color !== 'transparent' && !/rgba\(\d+,\s*\d+,\s*\d+,\s*0\)/.test(color)) {
      let normal_colors = localStorage.getItem(_href + 'normal_colors')

      if (normal_colors) {
@@ -117,6 +117,7 @@
      }

      normal_colors.unshift(color)
      normal_colors = Array.from(new Set(normal_colors))

      if (normal_colors.length > 10) {
        normal_colors.length = 10

 src/tabviews/custom/components/card/cardcellList/index.jsx

@@ -400,11 +400,18 @@
        if (card.bgImage && data[card.bgImage]) {
          _style.backgroundImage = `url('${data[card.bgImage]}')`
        }

        let lineStyle = {height: card.innerHeight || 'auto'}
        if (card.alignItems) {
          lineStyle.display = 'flex'
          lineStyle.alignItems = card.alignItems
          lineStyle.justifyContent = _style.textAlign || 'left'
        }
  
        contents.push(
          <Col key={card.uuid} style={_style_} span={card.width}>
            <div style={_style} onClick={(e) => {this.openNewView(e, card)}}>
              <div className={'ant-mk-text line' + (card.height || '') + className} style={{height: card.innerHeight || 'auto'}}>{val}</div>
              <div className={'ant-mk-text line' + (card.height || '') + className} style={lineStyle}>{val}</div>
            </div>
          </Col>
        )
@@ -470,11 +477,18 @@
          }
          className = mark.signType
        }

        let lineStyle = {height: card.innerHeight || 'auto'}
        if (card.alignItems) {
          lineStyle.display = 'flex'
          lineStyle.alignItems = card.alignItems
          lineStyle.justifyContent = _style.textAlign || 'left'
        }
  
        contents.push(
          <Col key={card.uuid} style={_style_} span={card.width}>
            <div style={_style}>
              <div className={'ant-mk-text line' + (card.height || '') + className} style={{height: card.innerHeight || 'auto'}}>{val}</div>
              <div className={'ant-mk-text line' + (card.height || '') + className} style={lineStyle}>{val}</div>
            </div>
          </Col>
        )
@@ -789,11 +803,18 @@
          }
          className = mark.signType
        }

        let lineStyle = {height: card.innerHeight || 'auto'}
        if (card.alignItems) {
          lineStyle.display = 'flex'
          lineStyle.alignItems = card.alignItems
          lineStyle.justifyContent = _style.textAlign || 'left'
        }
  
        contents.push(
          <Col key={card.uuid} style={_style_} span={card.width}>
            <div style={_style}>
              <div className={'ant-mk-text line' + (card.height || '') + className} style={{height: card.innerHeight || 'auto'}}>{val}</div>
              <div className={'ant-mk-text line' + (card.height || '') + className} style={lineStyle}>{val}</div>
            </div>
          </Col>
        )
@@ -996,8 +1017,10 @@
  }

  render() {
    const { cardCell } = this.props
    
    return (
      <div className="card-cell-list">
      <div className={'card-cell-list ' + (cardCell && cardCell.setting.layout === 'flex' ? 'mk-flex' : '')}>
        {this.getContent()}
      </div>
    )

 src/tabviews/custom/components/card/cardcellList/index.scss

@@ -193,9 +193,233 @@
    width: 26px;
    height: 26px;
  }

  .ant-col[class*="x"] {
    float: left;
    box-sizing: border-box;
  }
  >.ant-col-0x {
    width: 2.08333333%;
  }
  >.ant-col-1x {
    width: 6.25%;
  }
  >.ant-col-2x {
    width: 10.41666667%;
  }
  >.ant-col-3x {
    width: 14.58333333%;
  }
  >.ant-col-4x {
    width: 18.75%;
  }
  >.ant-col-5x {
    width: 22.91666667%;
  }
  >.ant-col-6x {
    width: 27.08333333%;
  }
  >.ant-col-7x {
    width: 31.25%;
  }
  >.ant-col-8x {
    width: 35.41666667%;
  }
  >.ant-col-9x {
    width: 39.58333333%;
  }
  >.ant-col-10x {
    width: 43.75%;
  }
  >.ant-col-11x {
    width: 47.91666667%;
  }
  >.ant-col-12x {
    width: 52.08333333%;
  }
  >.ant-col-13x {
    width: 56.25%;
  }
  >.ant-col-14x {
    width: 60.41666667%;
  }
  >.ant-col-15x {
    width: 64.58333333%;
  }
  >.ant-col-16x {
    width: 68.75%;
  }
  >.ant-col-17x {
    width: 72.91666667%;
  }
  >.ant-col-18x {
    width: 77.08333333%;
  }
  >.ant-col-19x {
    width: 81.25%;
  }
  >.ant-col-20x {
    width: 85.41666667%;
  }
  >.ant-col-21x {
    width: 89.58333333%;
  }
  >.ant-col-22x {
    width: 93.75%;
  }
  >.ant-col-23x {
    width: 97.91666667%;
  }
}
.card-cell-list::after {
  content: ' ';
  display: block;
  clear: both;
}
.card-cell-list.mk-flex {
  display: flex;
  >.ant-col-1 {
    flex: 1;
  }
  >.ant-col-2 {
    flex: 2;
  }
  >.ant-col-3 {
    flex: 3;
  }
  >.ant-col-4 {
    flex: 4;
  }
  >.ant-col-5 {
    flex: 5;
  }
  >.ant-col-6 {
    flex: 6;
  }
  >.ant-col-7 {
    flex: 7;
  }
  >.ant-col-8 {
    flex: 8;
  }
  >.ant-col-9 {
    flex: 9;
  }
  >.ant-col-10 {
    flex: 10;
  }
  >.ant-col-11 {
    flex: 11;
  }
  >.ant-col-12 {
    flex: 12;
  }
  >.ant-col-13 {
    flex: 13;
  }
  >.ant-col-14 {
    flex: 14;
  }
  >.ant-col-15 {
    flex: 15;
  }
  >.ant-col-16 {
    flex: 16;
  }
  >.ant-col-17 {
    flex: 17;
  }
  >.ant-col-18 {
    flex: 18;
  }
  >.ant-col-19 {
    flex: 19;
  }
  >.ant-col-20 {
    flex: 20;
  }
  >.ant-col-21 {
    flex: 21;
  }
  >.ant-col-22 {
    flex: 22;
  }
  >.ant-col-23 {
    flex: 23;
  }
  >.ant-col-24 {
    flex: 24;
  }
  >.ant-col-0x {
    flex: 0.5;
  }
  >.ant-col-1x {
    flex: 1.5;
  }
  >.ant-col-2x {
    flex: 2.5;
  }
  >.ant-col-3x {
    flex: 3.5;
  }
  >.ant-col-4x {
    flex: 4.5;
  }
  >.ant-col-5x {
    flex: 5.5;
  }
  >.ant-col-6x {
    flex: 6.5;
  }
  >.ant-col-7x {
    flex: 7.5;
  }
  >.ant-col-8x {
    flex: 8.5;
  }
  >.ant-col-9x {
    flex: 9.5;
  }
  >.ant-col-10x {
    flex: 10.5;
  }
  >.ant-col-11x {
    flex: 11.5;
  }
  >.ant-col-12x {
    flex: 12.5;
  }
  >.ant-col-13x {
    flex: 13.5;
  }
  >.ant-col-14x {
    flex: 14.5;
  }
  >.ant-col-15x {
    flex: 15.5;
  }
  >.ant-col-16x {
    flex: 16.5;
  }
  >.ant-col-17x {
    flex: 17.5;
  }
  >.ant-col-18x {
    flex: 18.5;
  }
  >.ant-col-19x {
    flex: 19.5;
  }
  >.ant-col-20x {
    flex: 20.5;
  }
  >.ant-col-21x {
    flex: 21.5;
  }
  >.ant-col-22x {
    flex: 22.5;
  }
  >.ant-col-23x {
    flex: 23.5;
  }
}

 src/tabviews/custom/components/card/double-data-card/index.jsx

@@ -917,64 +917,66 @@
            selectedData={selectedData}
          /> : null
        }
        <div className={`data-zoom ${config.wrap.wrapClass}`}>
          <Row className={'card-row-list '}>
            {precards.map((item, index) => (
              <Col key={'pre' + index} className="extend-card" span={item.setting.width || 6}>
                <CardItem card={item} cards={config} data={extendData}>
                  {item.setting.checkAll === 'show' ? <span onClick={this.checkAll} className={'circle-select' + checkAll}></span> : null}
                </CardItem>
              </Col>
            ))}
            {data && data.map((item, index) => {
              let className = 'card-item-wrap mk-card ' + mainBox
              let subClass = 'mk-unfold'
              let unfold = true

              if (item.$disabled) {
                className = 'mk-disabled ' + mainBox
              } else if (activeKey === index) {
                className += 'active'
              } else if (selectKeys.indexOf(index) > -1) {
                className += 'selected'
              }

              if (card.setting.display !== 'default') {
                if (item.children.length === 0) {
                  subClass = 'mk-disabled'
                  unfold = false
                } else {
                  subClass = opens.indexOf(index) > -1 ? 'mk-unfold' : 'mk-collapse'
                  unfold = opens.indexOf(index) > -1
                }
              }

              return (
                <Col key={index} span={card.setting.width}>
                  <div className={className} style={wrapStyle}>
                    <CardItem card={card} cards={config} data={item} onDoubleClick={() => this.onDoubleClick(index, subClass)} onClick={() => {this.changeCard(index, item, subClass)}}>
                      <span className="circle-select"></span>
                      {card.setting.controlIcon === 'left' ? (!unfold ? <PlusSquareOutlined className={subClass} onClick={(e) => this.changeUnfold(e, index, subClass)}/> : <MinusSquareOutlined className={subClass} onClick={(e) => this.changeUnfold(e, index, subClass)}/>) : null}
                      {card.setting.controlIcon === 'right' ? <UpOutlined className={subClass} onClick={(e) => this.changeUnfold(e, index, subClass)}/> : null}
                    </CardItem>
                    <div className={'sub-card-wrap ' + subClass + (config.wrap.parity === 'true' ? ' mk-parity-bg' : '')}>
                      {item.children.map((cell, index) => <Col key={'sub' + index} span={subcard.setting.width || 24}>
                        <CardItem card={subcard} cards={subconfig} data={cell} />
                      </Col>)}
                    </div>
                  </div>
        <div className={config.wrap.minWidth ? 'data-zoom-box' : ''}>
          <div className={`data-zoom ${config.wrap.wrapClass}`} style={config.wrap.minWidth ? {minWidth: config.wrap.minWidth} : null}>
            <Row className={'card-row-list '}>
              {precards.map((item, index) => (
                <Col key={'pre' + index} className="extend-card" span={item.setting.width || 6}>
                  <CardItem card={item} cards={config} data={extendData}>
                    {item.setting.checkAll === 'show' ? <span onClick={this.checkAll} className={'circle-select' + checkAll}></span> : null}
                  </CardItem>
                </Col>
              )
            })}
            {nextcards.map((item, index) => (
              <Col key={'next' + index} className="extend-card" span={item.setting.width || 6}>
                <CardItem card={item} cards={config} data={extendData}>
                  {item.setting.checkAll === 'show' ? <span onClick={this.checkAll} className={'circle-select' + checkAll}></span> : null}
                </CardItem>
              </Col>
            ))}
          </Row>
          {precards.length === 0 && nextcards.length === 0 && (!data || data.length === 0) ? <Empty description={false}/> : null}
              ))}
              {data && data.map((item, index) => {
                let className = 'card-item-wrap mk-card ' + mainBox
                let subClass = 'mk-unfold'
                let unfold = true

                if (item.$disabled) {
                  className = 'mk-disabled ' + mainBox
                } else if (activeKey === index) {
                  className += 'active'
                } else if (selectKeys.indexOf(index) > -1) {
                  className += 'selected'
                }

                if (card.setting.display !== 'default') {
                  if (item.children.length === 0) {
                    subClass = 'mk-disabled'
                    unfold = false
                  } else {
                    subClass = opens.indexOf(index) > -1 ? 'mk-unfold' : 'mk-collapse'
                    unfold = opens.indexOf(index) > -1
                  }
                }

                return (
                  <Col key={index} span={card.setting.width}>
                    <div className={className} style={wrapStyle}>
                      <CardItem card={card} cards={config} data={item} onDoubleClick={() => this.onDoubleClick(index, subClass)} onClick={() => {this.changeCard(index, item, subClass)}}>
                        <span className="circle-select"></span>
                        {card.setting.controlIcon === 'left' ? (!unfold ? <PlusSquareOutlined className={subClass} onClick={(e) => this.changeUnfold(e, index, subClass)}/> : <MinusSquareOutlined className={subClass} onClick={(e) => this.changeUnfold(e, index, subClass)}/>) : null}
                        {card.setting.controlIcon === 'right' ? <UpOutlined className={subClass} onClick={(e) => this.changeUnfold(e, index, subClass)}/> : null}
                      </CardItem>
                      <div className={'sub-card-wrap ' + subClass + (config.wrap.parity === 'true' ? ' mk-parity-bg' : '')}>
                        {item.children.map((cell, index) => <Col key={'sub' + index} span={subcard.setting.width || 24}>
                          <CardItem card={subcard} cards={subconfig} data={cell} />
                        </Col>)}
                      </div>
                    </div>
                  </Col>
                )
              })}
              {nextcards.map((item, index) => (
                <Col key={'next' + index} className="extend-card" span={item.setting.width || 6}>
                  <CardItem card={item} cards={config} data={extendData}>
                    {item.setting.checkAll === 'show' ? <span onClick={this.checkAll} className={'circle-select' + checkAll}></span> : null}
                  </CardItem>
                </Col>
              ))}
            </Row>
            {precards.length === 0 && nextcards.length === 0 && (!data || data.length === 0) ? <Empty description={false}/> : null}
          </div>
        </div>
        {config.wrap.pagestyle === 'page' && config.setting.laypage && data ? <Pagination size="small" total={total} showTotal={(t, range) => `${range[0]}-${range[1]} 共 ${total} 条`} pageSize={pageSize} showSizeChanger={true} pageSizeOptions={this.state.pageOptions} onChange={this.changePageIndex} onShowSizeChange={this.pageSizeChange} current={pageIndex}/> : null}
        {config.wrap.pagestyle === 'more' && config.setting.laypage && data && data.length > 0 ? <div className={'mk-more' + (pageSize * pageIndex >= total ? ' disabled' : '')} onClick={this.loadMore}>查看更多<DownOutlined/></div> : null}

 src/tabviews/custom/components/card/double-data-card/index.scss

@@ -297,6 +297,25 @@
      }
    }
  }
  .data-zoom-box {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 10px;
  }
  .data-zoom-box::-webkit-scrollbar {
    height: 7px;
  }
  .data-zoom-box::-webkit-scrollbar-thumb {
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
    background: rgba(0, 0, 0, 0.13);
  }
  .data-zoom-box::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0);
  }
}
.double-data-card-box::-webkit-scrollbar {
  width: 7px;