2020-12-16

king

2020-12-16 06404e701a89955958cbf56213e2eec618d8644d

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

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

import Api from '@/api'
import UtilsDM from '@/utils/utils-datamanage.js'
@@ -12,6 +12,7 @@
import './index.scss'

const CardItem = asyncComponent(() => import('../cardItem'))
const MainAction = asyncComponent(() => import('@/tabviews/zshare/actionList'))

class DataCard extends Component {
  static propTpyes = {
@@ -24,9 +25,12 @@

  state = {
    BID: '',                   // 上级ID
    BData: '',                 // 上级行数据
    config: null,              // 图表配置信息
    pageIndex: 1,              // 页码
    activeKey: '',             // 选中卡
    selectKeys: [],            // 多选时选中卡片
    selectedData: [],          // 选中数据，用于工具栏按钮
    loading: false,            // 数据加载状态
    sync: false,               // 是否统一请求数据
    card: null,                // 卡片设置
@@ -146,12 +150,12 @@
    })
  }

  resetParentParam = (MenuID, id) => {
  resetParentParam = (MenuID, id, data) => {
    const { config } = this.state

    if (!config.setting.supModule || config.setting.supModule !== MenuID) return
    if (id !== this.state.BID) {
      this.setState({ BID: id }, () => {
      this.setState({ BID: id, BData: data }, () => {
        this.loadData()
      })
    }
@@ -164,6 +168,8 @@
    if (config.setting.supModule && !BID) { // BID 不存在时，不做查询
      this.setState({
        activeKey: '',
        selectKeys: [],
        selectedData: [],
        pageIndex: 1,
        data: [],
        total: 0,
@@ -193,6 +199,8 @@
    if (result.status) {
      this.setState({
        activeKey: '',
        selectKeys: [],
        selectedData: [],
        data: result.data.map((item, index) => {
          item.key = index
          item.$$uuid = item[config.setting.primaryKey] || ''
@@ -252,24 +260,64 @@
      this.loadData()
    })
  }

  changePageIndex = (page) => {
    this.setState({
      pageIndex: page
    }, () => {
      this.loadData()
    })
  }
  
  changeCard = (index, item) => {
    const { config } = this.state
    const { config, selectKeys, selectedData, activeKey } = this.state

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

    let _selectKeys = []
    let _selectedData = []
    let _activeKey = ''
    let _item = item
    if (config.wrap.cardType === 'checkbox') {
      if (activeKey === index) {
        _selectKeys = selectKeys.filter(key => key !== index)
        _selectedData = selectedData.filter(cell => cell.key !== index)
        _activeKey = _selectKeys.slice(-1)[0]
        _item = selectedData.slice(-1)[0] || ''
      } else if (selectKeys.indexOf(index) > -1) {
        _selectKeys = selectKeys.filter(key => key !== index)
        _selectedData = selectedData.filter(cell => cell.key !== index)
        _activeKey = activeKey
        _item = selectedData.filter(cell => cell.key === activeKey)[0] || ''
      } else {
        _selectKeys = [...selectKeys, index]
        _selectedData = [...selectedData, item]
        _activeKey = index
      }
    } else {
      if (activeKey === index) return

      _selectedData = [item]
      _activeKey = index
    }

    this.setState({
      activeKey: index
      activeKey: _activeKey,
      selectKeys: _selectKeys,
      selectedData: _selectedData
    })

    MKEmitter.emit('resetSelectLine', config.uuid, (_item ? _item.$$uuid : ''), _item)
  }

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

    let _total = config.setting.pageSize * pageIndex
    let pageable = config.pageable && config.setting.laypage
    if ((pageIndex === 1 && total <= _total) || !data) {
      pageable = false
    let _total = 0
    let switchable = false
    if (config.wrap.pagestyle === 'switch' && config.pageable && config.setting.laypage && total > config.setting.pageSize && data) {
      _total = config.setting.pageSize * pageIndex
      switchable = true
    }

    return (
@@ -280,16 +328,31 @@
            <Spin />
          </div> : null
        }
        {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) => (
            <Col className={activeKey === index ? 'active' : ''} key={index} span={card.setting.width || 6} onClick={() => {this.changeCard(index, item)}}>
              <CardItem 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}
        {data && data.length === 0 ? <Empty description={false}/> : null}
        {config.action && config.action.length > 0 ?
          <MainAction
            BID={BID}
            BData={BData}
            setting={config.setting}
            actions={config.action}
            columns={config.columns}
            selectedData={selectedData}
            refreshdata={this.refreshbyaction}
            getexceloutparam={this.getexceloutparam}
          /> : null
        }
        <div className="data-zoom">
          {switchable ? <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) => (
              <Col className={activeKey === index ? 'active' : (selectKeys.indexOf(index) > -1 ? 'selected' : '')} key={index} span={card.setting.width} onClick={() => {this.changeCard(index, item)}}>
                <CardItem card={card} cards={config} data={item} updateStatus={this.updateStatus}/>
              </Col>
            ))}
          </div> : null}
          {switchable ? <div className={'prev-page ' + (total <= _total ? 'disabled' : '')} onClick={this.nextPage}><div><div><img src={nextImg} alt=""/></div></div></div> : null}
          {data && data.length === 0 ? <Empty description={false}/> : null}
        </div>
        {config.wrap.pagestyle !== 'switch' && config.setting.laypage && data ? <Pagination size="small" total={total} showTotal={t => `共 ${t} 条`} pageSize={config.setting.pageSize} onChange={this.changePageIndex} current={pageIndex}/> : null}
      </div>
    )
  }