2021-10-12

king

2021-10-12 2b4b1ecca5b6170bcbf3364b7ea81a248d0d6593

2021-10-12

 src/assets/css/main.scss

@@ -408,6 +408,10 @@
  }
}

.ant-tabs .ant-tabs-top-content.ant-tabs-content-animated { // 去除切换时的动画效果
  transition: margin-left 0s cubic-bezier(0.645, 0.045, 0.355, 1)!important;
}

// .ant-table.ant-table-mini .ant-table-thead > tr > th {
//   padding: 8px 4px;
// }

 src/components/tabview/index.scss

@@ -66,9 +66,6 @@
        }
      }
    }
    .ant-tabs .ant-tabs-top-content.ant-tabs-content-animated {
      transition: margin-left 0s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    iframe {
      width: 100%;
      height: calc(100vh - 115px);

 src/menu/components/tabs/antv-tabs/options.jsx

@@ -126,19 +126,43 @@
        {value: 'line', label: 'line'},
        {value: 'card', label: 'card'},
      ],
      forbid: appType === 'mob'
    },
    {
      type: 'radio',
      field: 'display',
      label: '标签显示',
      initval: setting.display || 'flex',
      field: 'autoSwitch',
      label: '自动切换',
      initval: setting.autoSwitch || 'false',
      tooltip: '存在两个及以上标签时有效。',
      required: false,
      options: [
        {value: 'flex', label: '弹性布局'},
        {value: 'inline-block', label: '定宽'},
        {value: 'true', label: '是'},
        {value: 'false', label: '否'},
      ],
      forbid: appType !== 'mob'
      controlFields: [
        {field: 'interval', values: ['true']},
        {field: 'tabLabel', values: ['true']},
      ]
    },
    {
      type: 'number',
      field: 'interval',
      label: '间隔（s）',
      initval: setting.interval || 5,
      min: 1,
      max: 1000,
      precision: 0,
      required: true
    },
    {
      type: 'radio',
      field: 'tabLabel',
      label: '标签栏',
      initval: setting.tabLabel || 'show',
      required: false,
      options: [
        {value: 'show', label: '显示'},
        {value: 'hide', label: '隐藏'},
      ]
    },
    {
      type: 'multiselect',

 src/mob/components/tabs/antv-tabs/options.jsx

@@ -66,19 +66,6 @@
 * @description tabs表单配置信息
 */
export function getTabsSetForm(setting) {
  let appType = sessionStorage.getItem('appType')
  let roleList = sessionStorage.getItem('sysRoles')

  if (roleList) {
    try {
      roleList = JSON.parse(roleList)
    } catch (e) {
      roleList = []
    }
  } else {
    roleList = []
  }

  const tabForm = [
    {
      type: 'text',
@@ -117,19 +104,6 @@
    },
    {
      type: 'radio',
      field: 'tabStyle',
      label: '页签样式',
      initval: setting.tabStyle || 'line',
      tooltip: '标签位置为top时有效，默认值为line。',
      required: true,
      options: [
        {value: 'line', label: 'line'},
        {value: 'card', label: 'card'},
      ],
      forbid: appType === 'mob'
    },
    {
      type: 'radio',
      field: 'display',
      label: '标签显示',
      initval: setting.display || 'flex',
@@ -138,17 +112,7 @@
        {value: 'flex', label: '弹性布局'},
        {value: 'inline-block', label: '定宽'},
      ],
      forbid: appType !== 'mob'
    },
    {
      type: 'multiselect',
      field: 'blacklist',
      label: '黑名单',
      initval: setting.blacklist || [],
      required: false,
      options: roleList,
      forbid: !!appType
    },
    }
  ]

  return tabForm

 src/tabviews/custom/components/tabs/antv-tabs/index.jsx

@@ -22,7 +22,8 @@
  state = {
    tabs: null,
    parentIds: [],
    bids: {}
    bids: {},
    activeIndex: 1
  }

  UNSAFE_componentWillMount () {
@@ -39,7 +40,13 @@
  }

  componentDidMount () {
    const { config } = this.props

    if (config.setting.autoSwitch === 'true' && config.subtabs.length > 1 && config.setting.interval) {
      this.autoSwitch(config.setting.interval)
    }
    MKEmitter.addListener('resetSelectLine', this.resetParentParam)

  }

  /**
@@ -62,12 +69,36 @@
    })
  }

  autoSwitch = (interval) => {
    const { tabs, activeIndex } = this.state

    if (!tabs) return

    let index = activeIndex

    if (!tabs.subtabs[index]) {
      index = 0
    }

    let id = 'tab' + tabs.subtabs[index].uuid

    this.setState({activeIndex: ++index})

    setTimeout(() => {
      let node = document.getElementById(id)
      if (node) {
        node.click()
        this.autoSwitch(interval)
      }
    }, interval * 1000)
  }

  render() {
    const { mainSearch, BID } = this.props
    const { tabs, bids } = this.state

    return (
      <div className="menu-antv-tabs-wrap" style={tabs.style}>
      <div className={'menu-antv-tabs-wrap ' + tabs.setting.tabLabel} style={tabs.style}>
        <Tabs defaultActiveKey="1" tabPosition={tabs.setting.position} type={tabs.setting.tabStyle}>
          {tabs.subtabs.map(tab => (
            <TabPane tab={<span id={'tab' + tab.uuid}>{tab.icon ? <Icon type={tab.icon} /> : null}{tab.label}</span>} key={tab.uuid}>

 src/tabviews/custom/components/tabs/antv-tabs/index.scss

@@ -6,3 +6,7 @@
  background-repeat: no-repeat;
  background-size: cover;
}

.menu-antv-tabs-wrap.hide >.ant-tabs >.ant-tabs-bar{
  display: none;
}