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 = {
@@ -20,13 +21,16 @@
    config: PropTypes.object,        // 组件配置信息
    mainSearch: PropTypes.any,       // 外层搜索条件
    menuType: PropTypes.any,         // 菜单类型
    dataManager: PropTypes.any,      // 数据权限
  }

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

  UNSAFE_componentWillMount () {
    const { data } = this.props
    const { data, initdata, BID } = this.props
    let _config = fromJS(this.props.config).toJS()
    let _card = _config.subcards[0]
    let _cols = new Map()
@@ -46,6 +50,18 @@
    if (_config.setting.sync === 'true' && data) {
      _data = data[_config.dataName] || []
      _sync = false
    } else if (_config.setting.sync === 'true' && initdata) {
      _data = initdata || []
      _sync = false
    }

    if (_data) {
      _data = _data.map((item, index) => {
        item.key = index
        item.$$uuid = item[_config.setting.primaryKey] || ''
        item.$$BID = BID || ''
        return item
      })
    }

    _config.columns.forEach(item => {
@@ -68,6 +84,7 @@
    this.setState({
      sync: _sync,
      data: _data,
      BID: BID || '',
      config: _config,
      card: _card,
      arr_field: _config.columns.map(col => col.field).join(','),
@@ -80,6 +97,7 @@

  componentDidMount () {
    MKEmitter.addListener('syncRefreshComponentId', this.reload)
    MKEmitter.addListener('resetSelectLine', this.resetParentParam)
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -87,13 +105,20 @@
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    const { sync, config } = this.state
    const { sync, config, BID } = this.state

    if (sync && !is(fromJS(this.props.data), fromJS(nextProps.data))) {
      let _data = []
      if (nextProps.data && nextProps.data[config.dataName]) {
        _data = nextProps.data[config.dataName] || []
      }

      _data = _data.map((item, index) => {
        item.key = index
        item.$$uuid = item[config.setting.primaryKey] || ''
        item.$$BID = BID || ''
        return item
      })

      this.setState({sync: false, data: _data})
    } else if (!is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) {
@@ -110,6 +135,7 @@
      return
    }
    MKEmitter.removeListener('syncRefreshComponentId', this.reload)
    MKEmitter.removeListener('resetSelectLine', this.resetParentParam)
  }

  reload = (syncId) => {
@@ -124,9 +150,33 @@
    })
  }

  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, BData: data }, () => {
        this.loadData()
      })
    }
  }

  async loadData () {
    const { mainSearch, BID, menuType, dataManager } = this.props
    const { config, arr_field, pageIndex } = this.state
    const { mainSearch, menuType } = this.props
    const { config, arr_field, pageIndex, BID } = this.state

    if (config.setting.supModule && !BID) { // BID 不存在时，不做查询
      this.setState({
        activeKey: '',
        selectKeys: [],
        selectedData: [],
        pageIndex: 1,
        data: [],
        total: 0,
        loading: false
      })
      return
    }

    let searches = []
    if (mainSearch && mainSearch.length > 0) { // 主表搜索条件
@@ -143,13 +193,20 @@
    })

    let _orderBy = config.setting.order || ''
    let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, pageIndex, config.setting.pageSize, BID, menuType, dataManager)
    let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, pageIndex, config.setting.pageSize, BID, menuType)

    let result = await Api.genericInterface(param)
    if (result.status) {
      this.setState({
        activeKey: '',
        data: result.data,
        selectKeys: [],
        selectedData: [],
        data: result.data.map((item, index) => {
          item.key = index
          item.$$uuid = item[config.setting.primaryKey] || ''
          item.$$BID = BID || ''
          return item
        }),
        total: result.total,
        loading: false
      })
@@ -171,7 +228,7 @@
    if (type === 'refresh' && position === 'grid') {
      this.loadData()
      if (btn && btn.syncComponent && btn.syncComponent[0]) {
        let syncId = btn.syncComponent[btn.syncComponent.length - 1]
        let syncId = btn.syncComponent.slice(-1)[0]
        if (config.uuid !== syncId) {
          MKEmitter.emit('syncRefreshComponentId', syncId)
        }
@@ -203,25 +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 { BID } = this.props
    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 (
@@ -232,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 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}
        {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>
    )
  }