2020-10-29

king

2020-10-29 944730f2794b87aa053f53084f0d082d4af6fd41

2020-10-29

 src/assets/css/action.scss

@@ -137,6 +137,7 @@
  // 图标颜色
  .mk-icon, .mk-icon:hover, .mk-icon:active, .mk-icon:focus {
    background: transparent;
    border-color: transparent;
  }
  .mk-icon.mk-gray {
    color: #666;

 src/menu/actioncomponent/actionform/index.jsx

@@ -243,14 +243,7 @@
        this.props.form.setFieldsValue(_fieldval)
      })
    } else if (key === 'funcType') {
      let _options = ['label', 'OpenType', 'funcType', 'icon', 'class']
      if (value === 'print') {
        if (this.state.interType === 'outer') {
          _options = ['label', 'OpenType', 'funcType', 'execMode', 'intertype', 'innerFunc', 'sysInterface', 'interface', 'outerFunc', 'callbackFunc', 'Ot', 'icon', 'class', 'execSuccess', 'execError']
        } else {
          _options = ['label', 'OpenType', 'funcType', 'execMode', 'intertype', 'innerFunc', 'Ot', 'icon', 'class', 'execSuccess', 'execError']
        }
      }
      let _options = this.getOptions(this.state.openType, this.state.interType, value, card.pageTemplate)
      let _fieldval = {}

      this.setState({
@@ -303,17 +296,14 @@
        } else if (value === 'LogicDelete' || value === 'delete') {
          _fieldval.label = '删除'
          _fieldval.class = 'danger'
          _fieldval.Ot = 'required'
          _fieldval.Ot = 'requiredSgl'
        }

        this.props.form.setFieldsValue(_fieldval)
      })
    } else if (key === 'pageTemplate') {
      let _options = ['label', 'Ot', 'OpenType', 'pageTemplate', 'icon', 'class']
      let _fieldval = {}
      if (value === 'custom') {
        _options.push('url', 'joint')
      }
      let _options = this.getOptions(this.state.openType, this.state.interType, this.state.funcType, value)

      this.setState({
        openType: value,

 src/menu/actioncomponent/dragaction/card.jsx

@@ -38,15 +38,27 @@

  let btnElement = null
  if (card.show === 'icon') {
    btnElement = (card.icon ? <Icon type={card.icon} className={'mk-icon mk-' + card.class}/> : null)
    btnElement = (
      <Button
        type="link"
        className={'mk-icon mk-' + card.class}
        icon={card.icon}
        onDoubleClick={() => doubleClickCard(id)}
      >{card.icon ? '' : card.label}</Button>
    )
  } else if (card.show === 'link') {
    btnElement = (<span className={'mk-link mk-' + card.class}>{card.label}{card.icon ? <Icon type={card.icon}/> : null}</span>)
    btnElement = (
      <Button
        type="link"
        className={'mk-link mk-' + card.class}
        onDoubleClick={() => doubleClickCard(id)}
      >{card.label}{card.icon ? <Icon type={card.icon}/> : null}</Button>
    )
  } else {
    btnElement = (
      <Button
        className={'mk-btn mk-' + card.class}
        icon={card.icon}
        key={card.uuid}
        onDoubleClick={() => doubleClickCard(id)}
      >
        {card.label}

 src/menu/actioncomponent/index.scss

@@ -23,7 +23,7 @@
      cursor: move;
    }
    button {
      min-width: 65px;
      // min-width: 65px;
      cursor: move;
      .anticon-table {
        font-size: 10px;

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

@@ -40,7 +40,14 @@
  const getContent = () => {
    if (card.eleType === 'text' || card.eleType === 'number') {
      let val = `${card.prefix || ''}${card.datatype === 'static' ? (card.value || '') : (card.field || '')}${card.postfix || ''}`
      return val
      return (
        <div className={'ant-mk-text line' + card.height} style={{height: card.innerHeight || 21}}>{val}</div>
      )
    } else if (card.eleType === 'link') {
      let val = card.label || card.value || card.field
      return (
        <div className={'ant-mk-text line' + card.height} style={{height: card.innerHeight || 21}}>{val}</div>
      )
    } else if (card.eleType === 'icon') {
      return (<Icon type={card.icon}/>)
    } else if (card.eleType === 'slider') {
@@ -65,8 +72,8 @@
        _imagestyle = {backgroundImage: `url('${demos[index]}')`}
      }

      if (card.radius === 'true') {
        _imagestyle.borderRadius = '50%'
      if (card.style && card.style.borderRadius) {
        _imagestyle.borderRadius = card.style.borderRadius
      }

      if (card.lenWidRadio === '16:9') {
@@ -84,7 +91,9 @@
      )
    } else if (card.eleType === 'splitline') {
      return (
        <div className="ant-mk-splitline" style={{backgroundColor: card.color}}></div>
        <div style={{paddingTop: '1px'}}>
          <div className="ant-mk-splitline" style={{borderColor: card.color}}></div>
        </div>
      )
    }
  }

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

@@ -1,4 +1,48 @@
.card-detail-row {
  .ant-mk-text {
    font-style: inherit;
    font-weight: inherit;
    text-decoration: inherit;
  }
  .ant-mk-text:not(.line1) {
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .line1 {
    overflow: hidden;
    word-break: break-word;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .line2 {
    -webkit-line-clamp: 2;
  }
  .line3 {
    -webkit-line-clamp: 3;
  }
  .line4 {
    -webkit-line-clamp: 4;
  }
  .line5 {
    -webkit-line-clamp: 5;
  }
  .line6 {
    -webkit-line-clamp: 6;
  }
  .line7 {
    -webkit-line-clamp: 7;
  }
  .line8 {
    -webkit-line-clamp: 8;
  }
  .line9 {
    -webkit-line-clamp: 9;
  }
  .line10 {
    -webkit-line-clamp: 10;
  }
  .ant-mk-slider {
    box-sizing: border-box;
    margin: 0;
@@ -43,7 +87,7 @@
    }
  }
  .ant-mk-splitline {
    height: 1px;
    border-top: 1px solid;
  }
  .ant-mk-picture {
    background-size: cover;

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

@@ -9,13 +9,13 @@
import './index.scss'

const cardTypeOptions = {
  text: ['eleType', 'datatype', 'format', 'fontSize', 'fontWeight', 'width', 'height', 'align', 'padding', 'prefix', 'postfix'],
  number: ['eleType', 'datatype', 'format', 'fontSize', 'fontWeight', 'width', 'height', 'align', 'padding', 'prefix', 'postfix'],
  picture: ['eleType', 'datatype', 'width', 'lenWidRadio', 'radius', 'padding', 'url'],
  icon: ['eleType', 'icon', 'datatype', 'fontSize', 'width', 'align', 'padding'],
  link: ['eleType', 'datatype', 'labelfield', 'fontSize', 'width', 'height', 'align', 'padding', 'prefix'],
  slider: ['eleType', 'datatype', 'width', 'color', 'padding', 'maxValue'],
  splitline: ['eleType', 'color', 'width', 'padding'],
  text: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix'],
  number: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix'],
  picture: ['eleType', 'datatype', 'width', 'lenWidRadio', 'url'],
  icon: ['eleType', 'icon', 'datatype', 'width'],
  link: ['eleType', 'datatype', 'label', 'width', 'height', 'joint'],
  slider: ['eleType', 'datatype', 'width', 'color', 'maxValue'],
  splitline: ['eleType', 'color', 'width'],
}

class MainSearch extends Component {
@@ -53,16 +53,6 @@
                text: col.label
              })
            } else if (/^Nvarchar/ig.test(col.datatype) && card.eleType !== 'number' && card.eleType !== 'slider') {
              item.options.push({
                value: col.field,
                text: col.label
              })
            }
          })
        } else if (item.key === 'labelfield') {
          item.options = []
          config.columns.forEach(col => {
            if (/^Nvarchar/ig.test(col.datatype)) {
              item.options.push({
                value: col.field,
                text: col.label
@@ -195,13 +185,6 @@

      if (item.type === 'text') { // 文本搜索
        let rules = []

        if (item.key === 'padding') {
          rules = [{
            pattern: /^\d+px$|^\d+px\s\d+px$|^\d+px\s\d+px\s\d+px$|^\d+px\s\d+px\s\d+px\s\d+px$/ig,
            message: '请正确输入内边距！'
          }]
        }

        fields.push(
          <Col span={12} key={index}>

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

@@ -1,7 +1,7 @@
// import zhCN from '@/locales/zh-CN/model.js'
// import enUS from '@/locales/en-US/model.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'

// const Formdict = localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
const Formdict = localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS

/**
 * @description 获取按钮表单配置信息
@@ -105,12 +105,11 @@
      required: true
    },
    {
      type: 'select',
      key: 'labelfield',
      label: '提示字段',
      initVal: card.labelfield || '',
      required: false,
      options: []
      type: 'text',
      key: 'label',
      label: '显示信息',
      initVal: card.label || '',
      required: false
    },
    {
      type: 'text',
@@ -199,14 +198,17 @@
    },
    {
      type: 'radio',
      key: 'radius',
      label: '圆角',
      initVal: card.radius || 'false',
      key: 'joint',
      label: Formdict['model.form.paramJoint'],
      initVal: card.joint || 'true',
      required: false,
      options: [
        { value: 'true', text: '有' },
        { value: 'false', text: '无' }
      ]
      options: [{
        value: 'true',
        text: Formdict['model.true']
      }, {
        value: 'false',
        text: Formdict['model.false']
      }]
    },
  ]


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

@@ -102,10 +102,9 @@
    const { cards, cardCell } = this.props

    let _style = element.style ? fromJS(element.style).toJS() : {}
    let options = ['font', 'border', 'padding', 'margin']
    let options = ['font', 'border', 'padding', 'margin', 'backgroundColor']

    if (element.eleType === 'button') {
      options.push('background')
      if (element.btnstyle) {
        _style = {..._style, ...element.btnstyle}
      }
@@ -132,7 +131,22 @@

    let _card = fromJS(card).toJS()
    
    if (card.eleType === 'button') { // 拆分style
    if (_card.eleType === 'text' || _card.eleType === 'number' || _card.eleType === 'link') {
      _card.style = style

      let fontSize = 14
      let lineHeight = 1.5
      let line = _card.height || 1

      if (_card.style.fontSize) {
        fontSize = parseInt(_card.style.fontSize)
      }
      if (_card.style.lineHeight) {
        lineHeight = parseFloat(_card.style.lineHeight)
      }

      _card.innerHeight = fontSize * lineHeight * line
    } else if (_card.eleType === 'button') { // 拆分style
      let _style = fromJS(style).toJS()
      _card.style = {}

@@ -376,16 +390,32 @@
  handleSubmit = () => {
    const { elements } = this.state

    this.elementFormRef.handleConfirm().then(ele => {
    this.elementFormRef.handleConfirm().then(res => {
      let _elements = elements.map(cell => {
        if (cell.uuid === ele.uuid) {
          ele.style = cell.style || {}
          if (ele.eleType === 'splitline' && cell.eleType !== 'splitline') {
            ele.style.paddingTop = '5px'
            ele.style.paddingBottom = '5px'
        if (cell.uuid === res.uuid) {
          res.style = cell.style || {}
          if (res.eleType === 'splitline' && cell.eleType !== 'splitline') {
            res.style.paddingTop = '5px'
            res.style.paddingBottom = '5px'
          } else if (res.eleType === 'text' || res.eleType === 'number' || res.eleType === 'link') {
            let fontSize = 14
            let lineHeight = 1.5
            let line = res.height || 1
      
            if (res.style && res.style.fontSize) {
              fontSize = parseInt(res.style.fontSize)
            }
            if (res.style && res.style.lineHeight) {
              lineHeight = parseFloat(res.style.lineHeight)
            }
            res.innerHeight = fontSize * lineHeight * line

            if (res.eleType === 'link' && !res.style.color) {
              res.style.color = 'rgba(24, 144, 255, 1)'
            }
          }
          
          return ele
          return res
        }
        return cell
      })
@@ -410,10 +440,8 @@
        if (cell.uuid === res.uuid) {
          res = {...cell, ...res}
          delete res.focus

          return res
        }

        return cell
      })


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

@@ -21,6 +21,8 @@
    button {
      background-size: cover;
      background-position: center center;
      height: auto;
      min-height: 32px;
      span {
        font-style: inherit;
        text-decoration: inherit;

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

@@ -244,6 +244,7 @@
        >
          <SettingForm
            dict={dict}
            cards={cards}
            setting={card.setting}
            wrappedComponentRef={(inst) => this.settingRef = inst}
          />

 src/menu/components/card/cardcomponent/settingform/index.jsx

@@ -1,12 +1,13 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Radio, Tooltip, Icon, InputNumber } from 'antd'
import { Form, Row, Col, Radio, Tooltip, Icon, Input, InputNumber } from 'antd'

import './index.scss'

class SettingForm extends Component {
  static propTpyes = {
    dict: PropTypes.object,    // 字典项
    cards: PropTypes.object,   // 卡片集
    setting: PropTypes.object, // 数据源配置
  }

@@ -28,7 +29,7 @@
  }

  render() {
    const { setting } = this.props
    const { setting, cards } = this.props
    const { getFieldDecorator } = this.props.form

    const formItemLayout = {
@@ -98,6 +99,18 @@
                )}
              </Form.Item>
            </Col> : null}
            {cards.subtype === 'propcard' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="卡片点击时，向其他组件传递的BID值。">
                  <Icon type="question-circle" />
                  主键值
                </Tooltip>
              }>
                {getFieldDecorator('primaryId', {
                  initialValue: setting.primaryId || ''
                })(<Input placeholder="" autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
          </Row>
        </Form>
      </div>

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

@@ -31,6 +31,9 @@
  .card-item {
    overflow-y: hidden;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 50px;
  }
  

 src/menu/components/card/prop-card/index.scss

@@ -31,6 +31,9 @@
  .card-item {
    overflow-y: hidden;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 50px;
  }
  

 src/menu/components/chart/antv-bar/index.jsx

@@ -526,7 +526,7 @@
          },
        })
      }
      

      const chart = new Chart({
        container: card.uuid,
        autoFit: true,

 src/menu/components/chart/antv-bar/index.scss

@@ -8,6 +8,7 @@
  
  .canvas {
    margin: 0px;
    // padding: 20px 15px 15px;
    padding: 15px;
    letter-spacing: 0px;
  }
@@ -47,7 +48,6 @@
    position: absolute;
    right: 0px;
    z-index: 4;
    padding-top: 10px;
    font-size: 16px;
  
    .ant-row .anticon-plus {

 src/menu/modelsource/option.jsx

@@ -16,8 +16,8 @@
// 组件配置信息
export const menuOptions = [
  { type: 'menu', url: tabs, component: 'tabs', subtype: 'tabs', title: '标签页', width: 24 },
  { type: 'menu', url: card1, component: 'card', subtype: 'datacard', title: '数据卡', config: `[{"uuid":"160135809128212dm7i29fim9ksto9od","setting":{"width":6},"style":{"paddingTop":"15px","marginTop":"4px","paddingRight":"15px","marginRight":"8px","marginLeft":"8px","backgroundColor":"rgba(255, 255, 255, 1)","borderColor":"#e8e8e8","paddingLeft":"15px","marginBottom":"4px","borderWidth":"1px","paddingBottom":"10px"},"backStyle":{},"elements":[{"datatype":"static","width":12,"marks":null,"height":1,"value":"关单","style":{},"prefix":"","postfix":"","format":"","eleType":"text","uuid":"160231860159931untbea62sgokunc5s"},{"datatype":"dynamic","width":12,"marks":null,"style":{"color":"rgba(250, 219, 20, 1)","textAlign":"right"},"btnstyle":{},"eleType":"icon","icon":"question-circle","field":"nvarchar2","uuid":"1602318768361nv8ql4t47sgcsn88b0u"},{"datatype":"static","width":24,"marks":null,"height":1,"value":"100","style":{"fontSize":"24px","fontWeight":"500","color":"rgba(0, 0, 0, 1)"},"prefix":"","btnstyle":{},"postfix":"","format":"","eleType":"text","uuid":"1602318817884v70gtgb65ubnm8mbcvv"},{"color":"#1890ff","width":24,"marks":null,"maxValue":100,"style":{"color":"rgba(250, 140, 22, 1)","paddingTop":"20px","paddingBottom":"10px"},"btnstyle":{},"eleType":"slider","field":"int1","uuid":"16023188871233rkktuvpp1h077igrsu"},{"eleType":"splitline","width":24,"color":"#e8e8e8","uuid":"1602320017038n31bk9o831ggug0tu0b","marks":null,"style":{"marginTop":"10px","marginBottom":"10px"},"btnstyle":{}},{"datatype":"static","width":12,"marks":null,"height":1,"value":"100","style":{"marginTop":"6px"},"prefix":"关单","btnstyle":{},"postfix":"","format":"","eleType":"text","uuid":"1602320061243drd7lf3agvn04kgr175"}],"backElements":[]}]` },
  { type: 'menu', url: card2, component: 'card', subtype: 'propcard', title: '属性卡', config: `[{"uuid":"1603681387259qaqf1127f72esmtchge","setting":{"width":6,"type":"simple"},"style":{"paddingTop":"15px","marginTop":"8px","paddingRight":"15px","marginRight":"8px","marginLeft":"8px","borderColor":"#e8e8e8","paddingLeft":"15px","marginBottom":"8px","borderWidth":"1px","paddingBottom":"15px"},"backStyle":{},"elements":[{"datatype":"static","width":12,"marks":null,"height":1,"value":"超时工单","style":{"color":"rgba(67, 67, 67, 0.51)"},"prefix":"","postfix":"","format":"","eleType":"text","uuid":"1603681402945qnkgm7q8cng65evn5ev"},{"eleType":"icon","datatype":"static","width":12,"icon":"question-circle","tooltip":"超时工单","uuid":"1603681473384i2crkbtofg4pu76k06a","marks":null,"style":{"textAlign":"right","color":"rgba(250, 219, 20, 1)"}},{"datatype":"static","width":12,"marks":null,"height":1,"value":"100","style":{"fontSize":"24px","color":"rgba(0, 0, 0, 1)"},"prefix":"","postfix":"","format":"","eleType":"number","uuid":"1603681539870d704ufqf98kc6t7537t"},{"color":"rgba(250, 219, 20, 1)","datatype":"static","width":24,"marks":null,"maxValue":100,"value":50,"style":{"paddingTop":"10px","paddingBottom":"10px"},"eleType":"slider","uuid":"1603683067556mvupau0odvrtv45u7o8"},{"eleType":"splitline","width":24,"color":"#e8e8e8","uuid":"1603683117981t9k55k8an430fuppmci","marks":null,"style":{"paddingTop":"5px","paddingBottom":"5px"}},{"datatype":"static","width":12,"marks":null,"height":1,"value":"100","style":{"color":"rgba(0, 0, 0, 0.65)","marginTop":"10px"},"prefix":"超时工单  ","postfix":"","format":"","eleType":"text","uuid":"1603683136553uvsmkfohkft9idbfkhu"}],"backElements":[]}]` },
  { type: 'menu', url: card1, component: 'card', subtype: 'datacard', title: '数据卡', config: `[{"uuid":"160135809128212dm7i29fim9ksto9od","setting":{"width":6},"style":{"paddingTop":"15px","marginTop":"4px","paddingRight":"15px","marginRight":"8px","marginLeft":"8px","backgroundColor":"rgba(255, 255, 255, 1)","borderColor":"#e8e8e8","paddingLeft":"15px","marginBottom":"4px","borderWidth":"1px","paddingBottom":"10px"},"backStyle":{},"elements":[{"datatype":"static","width":12,"marks":null,"height":1,"value":"关单","style":{},"prefix":"","postfix":"","format":"","eleType":"text","uuid":"160231860159931untbea62sgokunc5s"},{"datatype":"dynamic","width":12,"marks":null,"style":{"color":"rgba(250, 219, 20, 1)","textAlign":"right"},"btnstyle":{},"eleType":"icon","icon":"question-circle","field":"nvarchar2","uuid":"1602318768361nv8ql4t47sgcsn88b0u"},{"datatype":"static","width":24,"marks":null,"height":1,"innerHeight":36,"value":"100","style":{"fontSize":"24px","fontWeight":"500","color":"rgba(0, 0, 0, 1)"},"prefix":"","btnstyle":{},"postfix":"","format":"","eleType":"text","uuid":"1602318817884v70gtgb65ubnm8mbcvv"},{"color":"#1890ff","width":24,"marks":null,"maxValue":100,"style":{"color":"rgba(250, 140, 22, 1)","paddingTop":"20px","paddingBottom":"10px"},"btnstyle":{},"eleType":"slider","field":"int1","uuid":"16023188871233rkktuvpp1h077igrsu"},{"eleType":"splitline","width":24,"color":"#e8e8e8","uuid":"1602320017038n31bk9o831ggug0tu0b","marks":null,"style":{"marginTop":"10px","marginBottom":"10px"},"btnstyle":{}},{"datatype":"static","width":12,"marks":null,"height":1,"value":"100","style":{"marginTop":"6px"},"prefix":"关单","btnstyle":{},"postfix":"","format":"","eleType":"text","uuid":"1602320061243drd7lf3agvn04kgr175"}],"backElements":[]}]` },
  { type: 'menu', url: card2, component: 'card', subtype: 'propcard', title: '属性卡', config: `[{"uuid":"1603681387259qaqf1127f72esmtchge","setting":{"width":6,"type":"simple"},"style":{"paddingTop":"15px","marginTop":"8px","paddingRight":"15px","marginRight":"8px","marginLeft":"8px","borderColor":"#e8e8e8","paddingLeft":"15px","marginBottom":"8px","borderWidth":"1px","paddingBottom":"15px"},"backStyle":{},"elements":[{"datatype":"static","width":12,"marks":null,"height":1,"value":"超时工单","style":{"color":"rgba(67, 67, 67, 0.51)"},"prefix":"","postfix":"","format":"","eleType":"text","uuid":"1603681402945qnkgm7q8cng65evn5ev"},{"eleType":"icon","datatype":"static","width":12,"icon":"question-circle","tooltip":"超时工单","uuid":"1603681473384i2crkbtofg4pu76k06a","marks":null,"style":{"textAlign":"right","color":"rgba(250, 219, 20, 1)"}},{"datatype":"static","width":24,"marks":null,"height":1,"innerHeight":36,"value":"100","style":{"fontSize":"24px","color":"rgba(0, 0, 0, 1)"},"prefix":"","postfix":"","format":"","eleType":"number","uuid":"1603681539870d704ufqf98kc6t7537t"},{"color":"rgba(250, 219, 20, 1)","datatype":"static","width":24,"marks":null,"maxValue":100,"value":50,"style":{"paddingTop":"10px","paddingBottom":"10px"},"eleType":"slider","uuid":"1603683067556mvupau0odvrtv45u7o8"},{"eleType":"splitline","width":24,"color":"#e8e8e8","uuid":"1603683117981t9k55k8an430fuppmci","marks":null,"style":{"paddingTop":"5px","paddingBottom":"5px"}},{"datatype":"static","width":12,"marks":null,"height":1,"value":"100","style":{"color":"rgba(0, 0, 0, 0.65)","marginTop":"10px"},"prefix":"超时工单  ","postfix":"","format":"","eleType":"text","uuid":"1603683136553uvsmkfohkft9idbfkhu"}],"backElements":[]}]` },
  { type: 'menu', url: line, component: 'line', subtype: 'line', title: '折线图' },
  { type: 'menu', url: line1, component: 'line', subtype: 'line1', title: '阶梯折线图' },
  { type: 'menu', url: bar, component: 'bar', subtype: 'bar', title: '柱状图' },

 src/menu/stylecontroller/index.jsx

@@ -391,7 +391,7 @@
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('background') ? <Panel header="背景" key="background">
              {options.includes('background') || options.includes('backgroundColor') ? <Panel header="背景" key="background">
                <Col span={24}>
                  <Form.Item
                    colon={false}
@@ -401,7 +401,7 @@
                    <ColorSketch value={card.backgroundColor || '#ffffff'} onChange={this.changeBackgroundColor} />
                  </Form.Item>
                </Col>
                <Col span={24}>
                {!options.includes('backgroundColor') ? <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="背景图片" type="picture" />}
@@ -410,7 +410,7 @@
                    <FileUpload value={bgimages} maxFile={2} fileType="text" onChange={this.imgChange}/>
                    <Input placeholder="" value={backgroundImage} autoComplete="off" onChange={this.changeBackgroundImageInput} />
                  </Form.Item>
                </Col>
                </Col> : null}
              </Panel> : null}
              {options.includes('border') ? <Panel header="边框" key="border">
                <Col span={24}>

 src/tabviews/commontable/index.jsx

@@ -517,7 +517,13 @@
    }

    this.setState({
      loading: true
      selectedData: [],
      loading: true,
      BIDs: {
        ...BIDs,
        mainTable: '',
        mainTabledata: ''
      }
    })

    let _orderBy = orderBy || setting.order
@@ -531,14 +537,8 @@
          return item
        }),
        total: result.total,
        selectedData: [],
        loading: false,
        pickup: false,
        BIDs: {
          ...BIDs,
          mainTable: '',
          mainTabledata: ''
        }
        pickup: false
      })
    } else {
      this.setState({

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

@@ -1,7 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Col } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import zhCN from '@/locales/zh-CN/model.js'
@@ -13,9 +12,11 @@

class CardBoxComponent extends Component {
  static propTpyes = {
    cards: PropTypes.object,         // 卡片行配置信息
    card: PropTypes.object,          // 卡片配置信息
    data: PropTypes.object
    BID: PropTypes.any,         // 上级ID
    cards: PropTypes.object,    // 卡片行配置信息
    card: PropTypes.object,     // 卡片配置信息
    data: PropTypes.object,
    updateStatus: PropTypes.func  // 状态更新
  }

  state = {
@@ -44,14 +45,12 @@
  }

  render() {
    const { card, data } = this.props
    const { card, data, BID, cards } = this.props

    return (
      <Col span={card.setting.width || 6}>
        <div className="card-item-box" style={card.style}>
          <CardCellComponent data={data} elements={card.elements}/>
        </div>
      </Col>
      <div className="card-item-box" style={card.style}>
        <CardCellComponent BID={BID} data={data} cards={cards} cardCell={card} elements={card.elements} updateStatus={this.props.updateStatus}/>
      </div>
    )
  }
}

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

New file
@@ -0,0 +1,34 @@
import React, {Component} from 'react'
import { Button } from 'antd'

/**
 * @description 异步加载模块
 * @param {*} importComponent
 */
export default function asyncComponent(importComponent) {
  return class extends Component {
    constructor(props) {
      super(props)

      this.state = {
        component: null
      }
    }

    async componentDidMount() {
      const {default: component} = await importComponent()

      this.setState({component})
    }

    // <Button className="loading-skeleton" disabled={true}></Button> // 骨架按钮
    render() {
      const C = this.state.component
      const btn = this.props.btn || {}

      return C ?
        <C {...this.props} /> :
        <Button className={'mk-btn mk-' + btn.class} type={btn.show !== 'button' ? 'link' : ''} icon={btn.icon} disabled={true} >{btn.label}</Button>
    }
  }
}

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

@@ -1,19 +1,31 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Button, Icon, Col, Tooltip } from 'antd'
import { Icon, Col, Tooltip, notification } from 'antd'

import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import asyncComponent from './asyncButtonComponent'

import './index.scss'

const NormalButton = asyncComponent(() => import('@/tabviews/zshare/actionList/normalbutton'))
const ExcelInButton = asyncComponent(() => import('@/tabviews/zshare/actionList/excelInbutton'))
const ExcelOutButton = asyncComponent(() => import('@/tabviews/zshare/actionList/exceloutbutton'))
const PopupButton = asyncComponent(() => import('@/tabviews/zshare/actionList/popupbutton'))
const TabButton = asyncComponent(() => import('@/tabviews/zshare/actionList/tabbutton'))
const NewPageButton = asyncComponent(() => import('@/tabviews/zshare/actionList/newpagebutton'))
const ChangeUserButton = asyncComponent(() => import('@/tabviews/zshare/actionList/changeuserbutton'))
const PrintButton = asyncComponent(() => import('@/tabviews/zshare/actionList/printbutton'))

class CardCellComponent extends Component {
  static propTpyes = {
    BID: PropTypes.any,              // 上级ID
    cards: PropTypes.object,         // 菜单配置信息
    cardCell: PropTypes.object,
    data: PropTypes.object,
    elements: PropTypes.array,       // 元素集
    updateStatus: PropTypes.func,    // 状态更新
  }

  state = {
@@ -46,8 +58,38 @@
    }
  }

  openNewView = (card, url) => {
    const { cardCell, data, cards } = this.props
    if (!url) {
      notification.warning({
        top: 92,
        message: '地址链接不可为空！',
        duration: 5
      })
      return
    }
    let Id = ''
    let con = '?'

    if (/\?/ig.test(url)) {
      con = '&'
    }

    if (cards.subtype === 'propcard') {
      Id = cardCell.setting.primaryId || ''
    } else {
      Id = data[cards.setting.primaryKey] || ''
    }
    
    if (card.joint === 'true') {
      url = url + `${con}id=${Id}&appkey=${window.GLOB.appkey}&userid=${sessionStorage.getItem('UserID')}&LoginUID=${sessionStorage.getItem('LoginUID') || ''}`
    }

    window.open(url)
  }

  getContent = (card) => {
    const { data } = this.props
    const { data, BID, cards } = this.props

    if (card.eleType === 'text' || card.eleType === 'number') {
      let val = ''
@@ -64,7 +106,29 @@

      return (
        <Col key={card.uuid} span={card.width}>
          <div style={card.style}>{val}</div>
          <div style={card.style}>
            <div className={'ant-mk-text line' + card.height} style={{height: card.innerHeight || 21}}>{val}</div>
          </div>
        </Col>
      )
    } else if (card.eleType === 'link') {
      let url = ''

      if (card.datatype === 'static') {
        url = card.value
      } else if (data.hasOwnProperty(card.field)) {
        url = data[card.field]
      }

      let val = card.label || url

      return (
        <Col key={card.uuid} span={card.width}>
          <div style={card.style}>
            <div className={'ant-mk-text line' + card.height} style={{height: card.innerHeight || 21}}>
              <span style={{cursor: 'pointer'}} onClick={(e) => {e.stopPropagation(); this.openNewView(card, url)}}>{val}</span>
            </div>
          </div>
        </Col>
      )
    } else if (card.eleType === 'icon') {
@@ -154,41 +218,140 @@
      return (
        <Col key={card.uuid} span={card.width}>
          <div style={card.style}>
            <div className="ant-mk-splitline" style={{backgroundColor: card.color}}></div>
            <div className="ant-mk-splitline" style={{borderColor: card.color}}></div>
          </div>
        </Col>
      )
    } else if (card.eleType === 'button') {
      if (card.show === 'icon') {
      if (['exec', 'prompt', 'pop'].includes(card.OpenType)) {
        return (
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <Button className={'mk-link mk-' + card.class} style={card.btnstyle} type="link"><Icon type={card.icon}/></Button>
            </div>
          </Col>
        )
      } else if (card.show === 'link') {
        return (
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <Button className={'mk-link mk-' + card.class} style={card.btnstyle} type="link">{card.label}{card.icon ? <Icon type={card.icon}/> : null}</Button>
            </div>
          </Col>
        )
      } else {
        return (
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <Button
                className={'mk-btn mk-' + card.class}
                icon={card.icon}
              <NormalButton
                BID={BID}
                btn={card}
                show={card.show}
                style={card.btnstyle}
              >
                {card.label}
              </Button>
                setting={cards.setting}
                columns={cards.columns}
                selectedData={[data]}
                updateStatus={this.props.updateStatus}
              />
            </div>
          </Col>
        )
      } else if (card.OpenType === 'excelIn') {
        return (
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <ExcelInButton
                BID={BID}
                btn={card}
                show={card.show}
                style={card.btnstyle}
                setting={cards.setting}
                selectedData={[data]}
                updateStatus={this.props.updateStatus}
              />
            </div>
          </Col>
        )
      } else if (card.OpenType === 'excelOut') {
        return (
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <ExcelOutButton
                BID={BID}
                btn={card}
                show={card.show}
                style={card.btnstyle}
                setting={cards.setting}
                // getexceloutparam={getexceloutparam}
                updateStatus={this.props.updateStatus}
              />
            </div>
          </Col>
        )
      } else if (card.OpenType === 'popview') {
        return (
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <PopupButton
                BID={BID}
                btn={card}
                show={card.show}
                style={card.btnstyle}
                setting={cards.setting}
                selectedData={[data]}
                updateStatus={this.props.updateStatus}
              />
            </div>
          </Col>
        )
      } else if (card.OpenType === 'tab') {
        return (
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <TabButton
                btn={card}
                show={card.show}
                style={card.btnstyle}
                setting={cards.setting}
                selectedData={[data]}
                updateStatus={this.props.updateStatus}
              />
            </div>
          </Col>
        )
      } else if (card.OpenType === 'innerpage') {
        return (
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <NewPageButton
                btn={card}
                show={card.show}
                style={card.btnstyle}
                setting={cards.setting}
                selectedData={[data]}
                updateStatus={this.props.updateStatus}
              />
            </div>
          </Col>
        )
      } else if (card.OpenType === 'funcbutton') {
        if (card.funcType === 'changeuser') {
          return (
            <Col key={card.uuid} span={card.width}>
              <div style={card.style}>
                <ChangeUserButton
                  BID={BID}
                  btn={card}
                  show={card.show}
                  style={card.btnstyle}
                  setting={cards.setting}
                  selectedData={[data]}
                  updateStatus={this.props.updateStatus}
                />
              </div>
            </Col>
          )
        } else if (card.funcType === 'print') {
          return (
            <Col key={card.uuid} span={card.width}>
              <div style={card.style}>
                <PrintButton
                  BID={BID}
                  btn={card}
                  show={card.show}
                  style={card.btnstyle}
                  setting={cards.setting}
                  selectedData={[data]}
                  updateStatus={this.props.updateStatus}
                />
              </div>
            </Col>
          )
        }
      }
    }
  }

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

@@ -0,0 +1,107 @@

.card-cell-list {
  position: relative;

  .ant-mk-text {
    font-style: inherit;
    font-weight: inherit;
    text-decoration: inherit;
  }
  .ant-mk-text:not(.line1) {
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .line1 {
    overflow: hidden;
    word-break: break-word;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .line2 {
    -webkit-line-clamp: 2;
  }
  .line3 {
    -webkit-line-clamp: 3;
  }
  .line4 {
    -webkit-line-clamp: 4;
  }
  .line5 {
    -webkit-line-clamp: 5;
  }
  .line6 {
    -webkit-line-clamp: 6;
  }
  .line7 {
    -webkit-line-clamp: 7;
  }
  .line8 {
    -webkit-line-clamp: 8;
  }
  .line9 {
    -webkit-line-clamp: 9;
  }
  .line10 {
    -webkit-line-clamp: 10;
  }
  button {
    height: auto;
    min-height: 32px;
  }
  .ant-mk-slider {
    box-sizing: border-box;
    margin: 0;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: 'tnum', "tnum";
    position: relative;
    height: 12px;
    padding: 3px 0;
    cursor: pointer;
    touch-action: none;

    .ant-mk-slider-track {
      height: 7px;
      position: absolute;
      background-color: #91d5ff;
      border-radius: 4px;
      transition: background-color 0.3s;
    }
    .ant-mk-slider-rail {
      height: 7px;
      position: absolute;
      width: 100%;
      background-color: #f5f5f5;
      border-radius: 2px;
      transition: background-color 0.3s;
    }
    .ant-mk-slider-handle {
      position: absolute;
      width: 14px;
      height: 14px;
      margin-top: -4px;
      margin-left: -7px;
      background-color: #fff;
      border: solid 2px #91d5ff;
      border-radius: 50%;
      cursor: pointer;
      transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), -webkit-box-shadow 0.6s, -webkit-transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    }
  }
  .ant-mk-splitline {
    border-top: 1px solid;
  }
  .ant-slider {
    margin: 0px;
  }
}
.card-cell-list::after {
  content: ' ';
  display: block;
  clear: both;
}

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

@@ -1,16 +1,16 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Spin, Empty, notification } from 'antd'
import { Spin, Empty, notification, Col } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import Api from '@/api'
// import Utils from '@/utils/utils.js'
import UtilsDM from '@/utils/utils-datamanage.js'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
import preImg from '@/assets/img/prev.png'
import nextImg from '@/assets/img/next.png'
import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

const CardItem = asyncComponent(() => import('../cardItem'))
@@ -29,7 +29,9 @@
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, // 字典
    config: null,              // 图表配置信息
    pageIndex: 1,
    activeKey: '',             // 选中卡
    loading: false,            // 数据加载状态
    card: null,                // 卡片设置
    data: null,                // 数据
    total: null
  }
@@ -39,28 +41,38 @@

    this.setState({
      config: _config,
      card: _config.subcards[0],
      arr_field: _config.columns.map(col => col.field).join(','),
    }, () => {
      this.loadData()
    })
  }

  /**
   * @description 校验图表的按钮组，如果为统计图表，计算图表字段
   */
  componentDidMount () {

  }

  /**
   * @description 图表数据更新，刷新内容
   */
  UNSAFE_componentWillReceiveProps (nextProps) {
    
    MKEmitter.addListener('syncRefreshComponentId', this.reload)
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  componentWillUnmount () {
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('syncRefreshComponentId', this.reload)
  }

  reload = (syncId) => {
    const { config } = this.state

    if (syncId && syncId !== config.uuid) return

    this.setState({
      pageIndex: 1
    }, () => {
      this.loadData()
    })
  }

  async loadData () {
@@ -82,6 +94,7 @@
    let result = await Api.genericInterface(param)
    if (result.status) {
      this.setState({
        activeKey: '',
        data: result.data,
        total: result.total,
        loading: false
@@ -98,6 +111,20 @@
    }
  }

  updateStatus = (type, position, btn) => {
    const { config } = this.state

    if (type === 'refresh' && position === 'grid') {
      this.loadData()
      if (btn && btn.syncComponent && btn.syncComponent[0]) {
        let syncId = btn.syncComponent[btn.syncComponent.length - 1]
        if (config.uuid !== syncId) {
          MKEmitter.emit('syncRefreshComponentId', syncId)
        }
      }
    }
  }

  prevPage = () => {
    const { pageIndex } = this.state

@@ -109,6 +136,7 @@
      this.loadData()
    })
  }

  nextPage = () => {
    const { config, pageIndex, total } = this.state
    let _total = config.setting.pageSize * pageIndex
@@ -121,9 +149,20 @@
      this.loadData()
    })
  }
  
  changeCard = (index, item) => {
    const { config } = this.state

    if (config.wrap.switch !== 'true') return

    this.setState({
      activeKey: index
    })
  }

  render() {
    const { config, loading, data, pageIndex, total } = this.state
    const { BID } = this.props
    const { config, loading, data, pageIndex, total, card, activeKey } = this.state

    let _total = config.setting.pageSize * pageIndex
    let pageable = config.pageable && config.setting.laypage
@@ -132,7 +171,7 @@
    }

    return (
      <div className="custom-card-box" style={config.style}>
      <div className="custom-data-card-box" style={config.style}>
        {loading ?
          <div className="loading-mask">
            <div className="ant-spin-blur"></div>
@@ -142,7 +181,9 @@
        {pageable ? <div className={'prev-page ' + (pageIndex === 1 ? 'disabled' : '')} onClick={this.prevPage}><div><div><img src={preImg} alt=""/></div></div></div> : null}
        {data && data.length > 0 ? <div className="card-row-list">
          {data.map((item, index) => (
            <CardItem key={index} card={config.subcards[0]} cards={config} data={item} />
            <Col className={activeKey === index ? 'active' : ''} key={index} span={card.setting.width || 6} onClick={() => {this.changeCard(index, item)}}>
              <CardItem BID={BID} card={card} cards={config} data={item} updateStatus={this.updateStatus}/>
            </Col>
          ))}
        </div> : null}
        {pageable ? <div className={'prev-page ' + (total <= _total ? 'disabled' : '')} onClick={this.nextPage}><div><div><img src={nextImg} alt=""/></div></div></div> : null}

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

@@ -1,4 +1,4 @@
.custom-card-box {
.custom-data-card-box {
  background: #ffffff;
  background-position: center center;
  background-repeat: no-repeat;
@@ -37,67 +37,19 @@
  }
  .card-row-list {
    flex: 10;

    .card-item-box {
      transition: all 0.3s;
    }
    >.active >.card-item-box {
      border-color: #1890ff!important;
      box-shadow: 0 0 3px #1890ff;
    }
  }
  .card-item-box {
    .card-cell-list::after {
      content: ' ';
      display: block;
      clear: both;
    }
  }

  .card-cell-list {
    position: relative;
  
    .ant-mk-slider {
      box-sizing: border-box;
      margin: 0;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5;
      list-style: none;
      font-feature-settings: 'tnum', "tnum";
      position: relative;
      height: 12px;
      padding: 3px 0;
      cursor: pointer;
      touch-action: none;
  
      .ant-mk-slider-track {
        height: 7px;
        position: absolute;
        background-color: #91d5ff;
        border-radius: 4px;
        transition: background-color 0.3s;
      }
      .ant-mk-slider-rail {
        height: 7px;
        position: absolute;
        width: 100%;
        background-color: #f5f5f5;
        border-radius: 2px;
        transition: background-color 0.3s;
      }
      .ant-mk-slider-handle {
        position: absolute;
        width: 14px;
        height: 14px;
        margin-top: -4px;
        margin-left: -7px;
        background-color: #fff;
        border: solid 2px #91d5ff;
        border-radius: 50%;
        cursor: pointer;
        transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), -webkit-box-shadow 0.6s, -webkit-transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
      }
    }
    .ant-mk-splitline {
      height: 1px;
    }
    .ant-slider {
      margin: 0px;
    }
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .ant-empty {

 src/tabviews/custom/components/card/prop-card/index.jsx

@@ -1,13 +1,14 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Spin, notification } from 'antd'
import { Spin, notification, Col } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import Api from '@/api'
import UtilsDM from '@/utils/utils-datamanage.js'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
import MKEmitter from '@/utils/events.js'
import './index.scss'

const CardItem = asyncComponent(() => import('../cardItem'))
@@ -26,6 +27,7 @@
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, // 字典
    config: null,              // 图表配置信息
    loading: true,             // 数据加载状态
    activeKey: '',             // 选中数据
    data: null,                // 数据
  }

@@ -40,22 +42,27 @@
    })
  }

  /**
   * @description 校验图表的按钮组，如果为统计图表，计算图表字段
   */
  componentDidMount () {

  }

  /**
   * @description 图表数据更新，刷新内容
   */
  UNSAFE_componentWillReceiveProps (nextProps) {
    
    MKEmitter.addListener('syncRefreshComponentId', this.reload)
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  componentWillUnmount () {
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('syncRefreshComponentId', this.reload)
  }

  reload = (syncId) => {
    const { config } = this.state

    if (syncId && syncId !== config.uuid) return

    this.loadData()
  }

  async loadData () {
@@ -85,6 +92,7 @@
    let result = await Api.genericInterface(param)
    if (result.status) {
      this.setState({
        activeKey: '',
        data: result.data,
        loading: false
      })
@@ -100,11 +108,36 @@
    }
  }

  updateStatus = (type, position, btn) => {
    const { config } = this.state

    if (type === 'refresh' && position === 'grid') {
      this.loadData()
      if (btn && btn.syncComponent && btn.syncComponent[0]) {
        let syncId = btn.syncComponent[btn.syncComponent.length - 1]
        if (config.uuid !== syncId) {
          MKEmitter.emit('syncRefreshComponentId', syncId)
        }
      }
    }
  }

  changeCard = (index, item) => {
    const { config } = this.state

    if (config.wrap.switch !== 'true') return

    this.setState({
      activeKey: index
    })
  }

  render() {
    const { config, loading, data } = this.state
    const { BID } = this.props
    const { config, loading, data, activeKey } = this.state

    return (
      <div className="custom-card-box" style={config.style}>
      <div className="custom-prop-card-box" style={config.style}>
        {loading ?
          <div className="loading-mask">
            <div className="ant-spin-blur"></div>
@@ -113,7 +146,9 @@
        }
        {data ? <div className="card-row-list">
          {config.subcards.map((item, index) => (
            <CardItem key={index} card={item} cards={config} data={data[0] || {}} />
            <Col className={activeKey === index ? 'active' : ''} key={index} span={item.setting.width || 6} onClick={() => {this.changeCard(index, item)}}>
              <CardItem BID={BID} card={item} cards={config} data={data[0] || {}} updateStatus={this.updateStatus}/>
            </Col>
          ))}
        </div> : null}
      </div>

 src/tabviews/custom/components/card/prop-card/index.scss

@@ -1,10 +1,9 @@
.custom-card-box {
.custom-prop-card-box {
  background: #ffffff;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 50px;
  display: flex;
  position: relative;

  .card-row-list::after {
@@ -12,69 +11,21 @@
    display: block;
    clear: both;
  }

  .card-row-list {
    flex: 10;
  }
  .card-item-box {
    .card-cell-list::after {
      content: ' ';
      display: block;
      clear: both;
    .card-item-box {
      transition: all 0.3s;
    }
    >.active >.card-item-box {
      border-color: #1890ff!important;
      box-shadow: 0 0 3px #1890ff;
    }
  }

  .card-cell-list {
    position: relative;
  
    .ant-mk-slider {
      box-sizing: border-box;
      margin: 0;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5;
      list-style: none;
      font-feature-settings: 'tnum', "tnum";
      position: relative;
      height: 12px;
      padding: 3px 0;
      cursor: pointer;
      touch-action: none;
  
      .ant-mk-slider-track {
        height: 7px;
        position: absolute;
        background-color: #91d5ff;
        border-radius: 4px;
        transition: background-color 0.3s;
      }
      .ant-mk-slider-rail {
        height: 7px;
        position: absolute;
        width: 100%;
        background-color: #f5f5f5;
        border-radius: 2px;
        transition: background-color 0.3s;
      }
      .ant-mk-slider-handle {
        position: absolute;
        width: 14px;
        height: 14px;
        margin-top: -4px;
        margin-left: -7px;
        background-color: #fff;
        border: solid 2px #91d5ff;
        border-radius: 50%;
        cursor: pointer;
        transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), -webkit-box-shadow 0.6s, -webkit-transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
      }
    }
    .ant-mk-splitline {
      height: 1px;
    }
    .ant-slider {
      margin: 0px;
    }
  .card-item-box {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .loading-mask {

 src/tabviews/custom/components/chart/antv-bar-line/index.scss

@@ -40,8 +40,7 @@

  .canvas {
    margin: 0;
    // border: 1px solid #e8e8e8;
    padding: 15px;
    padding: 20px 15px 15px;
    letter-spacing: 0px;
  }
  .canvas.empty {

 src/tabviews/custom/components/chart/antv-pie/index.scss

@@ -40,7 +40,6 @@

  .canvas {
    margin: 0;
    // border: 1px solid #e8e8e8;
    padding: 15px;
    letter-spacing: 0px;
  }

 src/tabviews/subtable/index.jsx

@@ -426,6 +426,7 @@
      }
    }
    this.setState({
      selectedData: [],
      loading: true
    })

@@ -442,7 +443,6 @@
          return item
        }),
        total: result.total,
        selectedData: [],
        pickup: false,
        loading: false
      })

 src/tabviews/subtabtable/index.jsx

@@ -342,6 +342,7 @@
    }

    this.setState({
      selectedData: [],
      loading: true
    })

@@ -356,7 +357,6 @@
          return item
        }),
        total: result.total,
        selectedData: [],
        loading: false
      })
    } else {

 src/tabviews/zshare/actionList/changeuserbutton/index.jsx

@@ -145,7 +145,7 @@
          icon={btn.icon}
          loading={loading}
          className={'mk-btn mk-' + btn.class}
          onClick={() => {this.actionTrigger()}}
          onClick={(e) => {e.stopPropagation(); this.actionTrigger()}}
        >{btn.label}</Button>
      )
    } else { // icon、text、 all 卡片
@@ -154,7 +154,7 @@
          type="link"
          loading={loading}
          icon={show === 'text' ? '' : (btn.icon || '')}
          onClick={() => {this.actionTrigger()}}
          onClick={(e) => {e.stopPropagation(); this.actionTrigger()}}
        >{show === 'icon' && btn.icon ? '' : btn.label}</Button>
      )
    }

 src/tabviews/zshare/actionList/excelInbutton/index.jsx

@@ -144,7 +144,7 @@
      loading: false
    })

    this.props.updateStatus('refresh', btn.execSuccess)
    this.props.updateStatus('refresh', btn.execSuccess, btn)
  }

  /**
@@ -181,7 +181,7 @@
      loading: false
    })

    this.props.updateStatus('refresh', btn.execError)
    this.props.updateStatus('refresh', btn.execError, btn)
  }

  /**
@@ -394,7 +394,7 @@
    const { loading } = this.state

    if (show === 'actionList') {
      return <div style={{display: 'inline-block'}}>
      return <div style={{display: 'inline-block'}} onClick={(e) => e.stopPropagation()}>
        <Button
          icon={btn.icon}
          loading={loading}
@@ -404,7 +404,7 @@
        <ExcelIn btn={btn} triggerExcelIn={() => this.updateStatus('start')} returndata={this.getexceldata} ref="excelIn" />
      </div>
    } else { // icon、text、 all 卡片
      return <div style={{display: 'inline-block'}}>
      return <div style={{display: 'inline-block'}} onClick={(e) => e.stopPropagation()}>
        <Button
          type="link"
          loading={loading}

 src/tabviews/zshare/actionList/exceloutbutton/index.jsx

@@ -658,7 +658,7 @@
      loading: false
    })

    this.props.updateStatus('refresh', btn.execSuccess)
    this.props.updateStatus('refresh', btn.execSuccess, btn)
  }

  /**
@@ -695,7 +695,7 @@
      loading: false
    })

    this.props.updateStatus('refresh', btn.execError)
    this.props.updateStatus('refresh', btn.execError, btn)
  }

  render() {
@@ -707,7 +707,7 @@
        <Button
          className={'mk-btn mk-' + btn.class}
          icon={btn.icon}
          onClick={() => {this.actionTrigger()}}
          onClick={(e) => {e.stopPropagation(); this.actionTrigger()}}
          loading={loading}
        >{btn.label}</Button>
      )
@@ -717,7 +717,7 @@
          type="link"
          loading={loading}
          icon={show === 'text' ? '' : (show === 'icon' ? (btn.icon || 'download') : (btn.icon || ''))}
          onClick={() => {this.actionTrigger()}}
          onClick={(e) => {e.stopPropagation(); this.actionTrigger()}}
        >{show === 'icon' ? '' : btn.label}</Button>
      )
    }

 src/tabviews/zshare/actionList/newpagebutton/index.jsx

@@ -93,7 +93,6 @@
      let _p = `ID=${Id}&userid=${sessionStorage.getItem('UserID')}&LoginUID=${sessionStorage.getItem('LoginUID')}&logo=${window.GLOB.doclogo}&name=${sessionStorage.getItem('Full_Name')}&icp=${window.GLOB.ICP}&copyRight=${window.GLOB.copyRight}`
      let url = '#/pay/' +  window.btoa(window.encodeURIComponent(_p))
      
      this.props.updateStatus('start')
      confirm({
        title: '请在付款页面完成订单支付。',
        content: '',

 src/tabviews/zshare/actionList/normalbutton/index.jsx

@@ -22,9 +22,9 @@
    show: PropTypes.any,              // 按钮显示样式控制
    BID: PropTypes.string,            // 主表ID
    BData: PropTypes.any,             // 主表数据
    style: PropTypes.any,             // 按钮样式
    selectedData: PropTypes.any,      // 子表中选择数据
    Tab: PropTypes.any,               // 如果当前元素为标签时，tab为标签信息
    MenuID: PropTypes.string,         // 菜单ID
    btn: PropTypes.object,            // 按钮
    columns: PropTypes.any,           // 字段列
    setting: PropTypes.any,           // 页面通用设置
@@ -176,8 +176,10 @@
      this.execSubmit(data, () => { this.setState({loading: false})})
    } else if (btn.OpenType === 'pop') {
      this.updateStatus('start')

      this.setState({
        tabledata: data
        tabledata: data,
        btnconfig: btn.modal ? btn.modal : this.state.btnconfig
      }, () => {
        this.improveAction()
      })
@@ -737,7 +739,7 @@
      this.sendMessage()
    }

    this.props.updateStatus('refresh', btn.execSuccess)
    this.props.updateStatus('refresh', btn.execSuccess, btn)
  }

  sendMessage = () => {
@@ -879,7 +881,7 @@
      loading: false
    })

    this.props.updateStatus('refresh', btn.execError)
    this.props.updateStatus('refresh', btn.execError, btn)
  }

  /**
@@ -1164,12 +1166,13 @@
  }

  render() {
    const { btn, show } = this.props
    const { btn, show, style } = this.props
    const { loadingNumber, loading } = this.state

    if (show === 'actionList') {
    if (show === 'actionList' || show === 'button') {
      return <div style={{display: 'inline-block'}} onClick={(e) => e.stopPropagation()}>
        <Button
          style={style}
          icon={btn.icon}
          loading={loading}
          className={'mk-btn mk-' + btn.class}
@@ -1192,6 +1195,7 @@
      return <div style={{display: 'inline-block'}} onClick={(e) => e.stopPropagation()}>
        <Button
          type="link"
          style={style}
          loading={loading}
          icon={show === 'text' ? '' : (btn.icon || '')}
          onClick={() => {this.actionTrigger()}}

 src/tabviews/zshare/actionList/popupbutton/index.jsx

@@ -115,7 +115,7 @@

  // 操作后刷新主表
  reloadtable = () => {
    this.props.updateStatus('refresh', 'grid', true)
    this.props.updateStatus('refresh', 'grid')
  }

  /**
@@ -129,7 +129,7 @@
      loading: false
    })

    this.props.updateStatus('refresh', btn.popClose)
    this.props.updateStatus('refresh', btn.popClose, btn)
  }

  render() {

 src/tabviews/zshare/actionList/printbutton/index.jsx

@@ -141,7 +141,8 @@
    if (btn.execMode === 'pop') {
      this.updateStatus('start')
      this.setState({
        tabledata: data
        tabledata: data,
        btnconfig: btn.modal ? btn.modal : this.state.btnconfig
      }, () => {
        this.improveAction()
      })
@@ -954,7 +955,7 @@
      loading: false
    })

    this.props.updateStatus('refresh', btn.execSuccess)
    this.props.updateStatus('refresh', btn.execSuccess, btn)
  }

  /**
@@ -991,7 +992,7 @@
      loading: false
    })

    this.props.updateStatus('refresh', btn.execError)
    this.props.updateStatus('refresh', btn.execError, btn)
  }

  /**
@@ -1271,7 +1272,7 @@
    const { loadingNumber, loading } = this.state

    if (show === 'actionList') {
      return <div style={{display: 'inline-block'}}>
      return <div style={{display: 'inline-block'}} onClick={(e) => e.stopPropagation()}>
        <Button
          icon={btn.icon}
          loading={loading}
@@ -1281,7 +1282,7 @@
        {this.getModels()}
      </div>
    } else { // icon、text、 all 卡片
      return <div style={{display: 'inline-block'}}>
      return <div style={{display: 'inline-block'}} onClick={(e) => e.stopPropagation()}>
        <Button
          type="link"
          loading={loading}

 src/tabviews/zshare/actionList/tabbutton/index.jsx

@@ -135,7 +135,11 @@
    }

    this.setState({}, () => {
      tabs.splice(index + 1, 0, newtab)
      if (MenuID) {
        tabs.splice(index + 1, 0, newtab)
      } else {
        tabs.push(newtab)
      }
      this.props.modifyTabview(tabs)
    })