| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Spin, notification, Row, Col, Empty, Pagination, Modal } from 'antd' |
| | | import { Spin, Row, Col, Empty, Pagination } from 'antd' |
| | | import { DownOutlined } from '@ant-design/icons' |
| | | |
| | | import Api from '@/api' |
| | |
| | | import './index.scss' |
| | | |
| | | const CardCellComponent = asyncComponent(() => import('../cardcellList')) |
| | | const MainAction = asyncComponent(() => import('@/tabviews/zshare/actionList')) |
| | | const NormalHeader = asyncComponent(() => import('@/tabviews/custom/components/share/normalheader')) |
| | | |
| | | class TableCard extends Component { |
| | |
| | | } |
| | | |
| | | state = { |
| | | BID: '', // 上级ID |
| | | config: null, // 图表配置信息 |
| | | loading: false, // 数据加载状态 |
| | | search: null, // 搜索条件 |
| | | pageIndex: 1, // 页码 |
| | | total: 0, // 总数 |
| | | data: null, // 数据 |
| | | BID: '', |
| | | config: null, |
| | | loading: false, |
| | | search: null, |
| | | pageIndex: 1, |
| | | total: 0, |
| | | data: null, |
| | | precards: [], |
| | | BData: '' |
| | | } |
| | | |
| | |
| | | _data = window.GLOB.SyncData.get(_config.dataName) || [] |
| | | |
| | | if (_config.$cache) { |
| | | Api.writeCacheConfig(_config.uuid, fromJS(_data).toJS()) |
| | | Api.writeCacheConfig(_config.uuid, fromJS(_data).toJS(), BID) |
| | | } |
| | | |
| | | _config.setting.sync = 'false' |
| | |
| | | } |
| | | } |
| | | |
| | | let precards = [] |
| | | _config.subcards = _config.subcards.filter(item => { |
| | | if (item.setting.condition === 'title') { |
| | | precards.push(item) |
| | | return false |
| | | } |
| | | return true |
| | | }) |
| | | |
| | | this.setState({ |
| | | BID: BID || '', |
| | | BData: BData || '', |
| | | data: _data, |
| | | config: _config, |
| | | search: _config.$searches |
| | | search: _config.$searches, |
| | | precards |
| | | }) |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | initExec = () => { |
| | | const { config } = this.state |
| | | const { config, BID } = this.state |
| | | |
| | | if (config.$cache) { |
| | | if (config.$time && !config.setting.laypage) { |
| | | if (!this.loaded) { |
| | | Api.getLCacheConfig(config.uuid, config.$time).then(res => { |
| | | Api.getLCacheConfig(config.uuid, config.$time, BID).then(res => { |
| | | if (!res.valid && config.setting.onload === 'true') { |
| | | setTimeout(() => { |
| | | this.loadData('init') |
| | |
| | | } |
| | | } else { |
| | | if (!this.loaded) { |
| | | Api.getLCacheConfig(config.uuid, 0).then(res => { |
| | | Api.getLCacheConfig(config.uuid, 0, BID).then(res => { |
| | | if (!res.data || this.loaded) return |
| | | |
| | | let _data = res.data.map((item, index) => { |
| | |
| | | let _data = window.GLOB.SyncData.get(config.dataName) || [] |
| | | |
| | | if (config.$cache) { |
| | | Api.writeCacheConfig(config.uuid, fromJS(_data).toJS()) |
| | | Api.writeCacheConfig(config.uuid, fromJS(_data).toJS(), BID) |
| | | } |
| | | |
| | | _data = _data.map((item, index) => { |
| | |
| | | |
| | | if (config.uuid !== menuId) return |
| | | |
| | | if ((position === 'mainline' || position === 'popclose') && config.setting.supModule && BID) { // 刷新源组件时,附带刷新上级行与当前组件 |
| | | MKEmitter.emit('reloadData', config.setting.supModule, BID) |
| | | if (['mainline', 'maingrid', 'popclose'].includes(position) && config.setting.supModule) { |
| | | MKEmitter.emit('reloadData', config.setting.supModule, position === 'maingrid' ? '' : BID) |
| | | } else { |
| | | this.loadData() |
| | | } |
| | |
| | | |
| | | this.loaded = true |
| | | if (config.$cache && type === 'init') { |
| | | Api.writeCacheConfig(config.uuid, result.data || []) |
| | | Api.writeCacheConfig(config.uuid, result.data || [], BID) |
| | | } |
| | | |
| | | let data = [] |
| | |
| | | this.timer && this.timer.stop() |
| | | } |
| | | } |
| | | if (result.message) { |
| | | if (result.ErrCode === 'Y') { |
| | | Modal.success({ |
| | | title: result.message |
| | | }) |
| | | } else if (result.ErrCode === 'S') { |
| | | notification.success({ |
| | | top: 92, |
| | | message: result.message, |
| | | duration: 2 |
| | | }) |
| | | } |
| | | } |
| | | |
| | | UtilsDM.querySuccess(result) |
| | | } else { |
| | | this.setState({ |
| | | loading: false |
| | | }) |
| | | this.timer && this.timer.stop() |
| | | |
| | | if (!result.message) return |
| | | if (result.ErrCode === 'N') { |
| | | Modal.error({ |
| | | title: result.message, |
| | | }) |
| | | } else if (result.ErrCode !== '-2') { |
| | | notification.error({ |
| | | top: 92, |
| | | message: result.message, |
| | | duration: 10 |
| | | }) |
| | | } |
| | | UtilsDM.queryFail(result) |
| | | } |
| | | } |
| | | |
| | |
| | | openView = (card, data) => { |
| | | if (card.setting.click === 'menu' && card.setting.menu) { |
| | | let menuId = card.setting.menu.slice(-1)[0] |
| | | let menu = window.GLOB.mkThdMenus.filter(m => m.MenuID === menuId)[0] |
| | | let menu = null |
| | | |
| | | if (!menu && card.setting.MenuName && card.setting.MenuID) { |
| | | if (window.GLOB.mkThdMenus.has(menuId)) { |
| | | menu = {...window.GLOB.mkThdMenus.get(menuId)} |
| | | } else if (card.setting.MenuID) { |
| | | menu = { |
| | | MenuID: card.setting.MenuID, |
| | | MenuName: card.setting.MenuName, |
| | | MenuNo: card.setting.MenuNo || '', |
| | | type: card.setting.tabType |
| | | } |
| | | } |
| | | |
| | | if (!menu) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '菜单已删除或没有访问权限!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | if (!menu) return |
| | | |
| | | let newtab = { |
| | | ...menu, |
| | | param: {} |
| | | } |
| | | menu.param = {$BID: data.$$uuid || ''} |
| | | |
| | | if (card.setting.joint === 'true') { |
| | | newtab.param.$BID = data.$$uuid || '' |
| | | Object.keys(data).forEach(key => { |
| | | if (/^\$/.test(key)) return |
| | | menu.param[key] = data[key] |
| | | }) |
| | | |
| | | Object.keys(data).forEach(key => { |
| | | if (/^\$/.test(key)) return |
| | | newtab.param[key] = data[key] |
| | | }) |
| | | } |
| | | |
| | | MKEmitter.emit('modifyTabs', newtab, true) |
| | | MKEmitter.emit('modifyTabs', menu, true) |
| | | } else if (card.setting.click === 'link') { |
| | | let src = card.setting.linkurl |
| | | |
| | |
| | | } |
| | | |
| | | src = src + `${con}id=${data.$$uuid || ''}&appkey=${window.GLOB.appkey}&userid=${sessionStorage.getItem('UserID')}&LoginUID=${sessionStorage.getItem('LoginUID') || ''}` |
| | | } else if (/@/.test(src)) { |
| | | src = src.replace(/@id@/ig, data.$$uuid || '') |
| | | src = src.replace(/@appkey@/ig, window.GLOB.appkey) |
| | | src = src.replace(/@userid@/ig, sessionStorage.getItem('UserID')) |
| | | src = src.replace(/@LoginUID@/ig, sessionStorage.getItem('LoginUID')) |
| | | |
| | | Object.keys(data).forEach(key => { |
| | | if (/^\$/.test(key)) return |
| | | let reg = new RegExp('@' + key + '@', 'ig') |
| | | src = src.replace(reg, data[key]) |
| | | }) |
| | | } |
| | | |
| | | window.open(src) |
| | | } else if (card.setting.click === 'button' && card.setting.linkbtn) { |
| | | MKEmitter.emit('triggerBtnId', card.setting.linkbtn, [data], 'linkbtn') |
| | | MKEmitter.emit('triggerBtnId', card.setting.linkbtn, [data], 'linkbtn', (data.$$uuid || '') + (data.$Index || '')) |
| | | } |
| | | } |
| | | |
| | | getLines = (data) => { |
| | | getLines = (data, lindex) => { |
| | | const { config } = this.state |
| | | |
| | | let line = [] |
| | | |
| | | config.subcards.forEach((item, index) => { |
| | | let display = item.setting.condition !== 'true' |
| | | let className = '' |
| | | |
| | | if (!display && item.setting.controlField) { |
| | | let val = data[item.setting.controlField] |
| | |
| | | } else if (item.setting.controlType === '<' && val < item.setting.controlValue) { |
| | | display = true |
| | | } |
| | | |
| | | className = 'mk_line_' + val |
| | | } |
| | | |
| | | if (!display) return |
| | | |
| | | if (config.wrap.parity === 'true') { |
| | | if (lindex % 2 === 1) { |
| | | className += ' mk-even-line' |
| | | } |
| | | } |
| | | |
| | | line.push( |
| | | <Col key={index} span={24}> |
| | | <Col key={index} className={className} span={24}> |
| | | <div className="card-item-box" style={item.style} onClick={() => {this.openView(item, data)}}> |
| | | <CardCellComponent data={data} cards={config} cardCell={item} elements={item.elements}/> |
| | | </div> |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { config, loading, data, BID, pageIndex, total } = this.state |
| | | const { config, loading, data, BID, pageIndex, total, BData, precards } = this.state |
| | | |
| | | if (config.wrap.empty === 'hidden' && (!data || data.length === 0)) return null |
| | | |
| | |
| | | </div> : null |
| | | } |
| | | <NormalHeader config={config} BID={BID} refresh={this.refreshSearch} /> |
| | | {data && data.length > 0 ? <Row className={'card-row-list' + (config.wrap.parity === 'true' ? ' mk-parity' : '')} style={{height: config.wrap.contentHeight}}> |
| | | {data.map(item => this.getLines(item))} |
| | | </Row> : null} |
| | | {data && data.length === 0 ? <div className="card-row-list" style={{height: config.wrap.contentHeight}}> |
| | | <Empty description={false}/> |
| | | </div> : null} |
| | | {config.action && config.action.length > 0 ? |
| | | <MainAction |
| | | BID={BID} |
| | | BData={BData} |
| | | setting={config.setting} |
| | | actions={config.action} |
| | | columns={config.columns} |
| | | selectedData={[]} |
| | | /> : null |
| | | } |
| | | <Row className={`card-row-list ${config.wrap.hover === 'true' ? 'mk-hover' : ''}`} style={{height: config.wrap.contentHeight}}> |
| | | {precards.map((item, index) => ( |
| | | <Col key={index} className="extend-card" span={24}> |
| | | <div className="card-item-box" style={item.style}> |
| | | <CardCellComponent data={data && data[0] ? data[0] : {}} cards={config} cardCell={item} elements={item.elements}/> |
| | | </div> |
| | | </Col> |
| | | ))} |
| | | {data && data.length > 0 ? data.map((item, index) => this.getLines(item, index)) : null} |
| | | {data && data.length === 0 ? <Empty description={false}/> : null} |
| | | </Row> |
| | | {config.wrap.pagestyle === 'page' ? <Pagination size="small" current={pageIndex} total={total} onChange={this.changePageIndex} /> : null} |
| | | {config.wrap.pagestyle === 'more' && data && data.length > 0 ? <div className={'mk-more' + (config.setting.pageSize * pageIndex >= total ? ' disabled' : '')} onClick={this.loadMore}>查看更多<DownOutlined/></div> : null} |
| | | {config.wrap.pagestyle === 'more' && data && data.length > 0 ? <div className={'mk-more' + (config.setting.pageSize * pageIndex >= total ? ' disabled' : '')} onClick={this.loadMore}>{window.GLOB.dict['view_more'] || '查看更多'}<DownOutlined/></div> : null} |
| | | </div> |
| | | ) |
| | | } |