| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Spin, Empty, notification, Row, Col, Pagination, Modal, Switch } from 'antd' |
| | | import { Spin, Empty, Row, Col, Pagination, Switch } from 'antd' |
| | | import { DownOutlined, UpOutlined, PlusSquareOutlined, MinusSquareOutlined } from '@ant-design/icons' |
| | | |
| | | import Api from '@/api' |
| | |
| | | loading: false, // 数据加载状态 |
| | | card: null, // 卡片设置 |
| | | data: [], // 数据 |
| | | total: null, |
| | | total: 0, |
| | | precards: [], |
| | | nextcards: [], |
| | | selected: 'false', |
| | |
| | | |
| | | _config.wrap.wrapClass = `${_config.wrap.selStyle} ${_config.wrap.cardType || ''}` |
| | | |
| | | if (_config.wrap.zHeight || _config.wrap.minWidth) { |
| | | if (_config.wrap.zHeight) { |
| | | if (_config.wrap.zHeight <= 100) { |
| | | if (_config.wrap.zHeight < 0) { |
| | | _config.wrap.zHeight = `calc(100vh - ${-_config.wrap.zHeight}px)` |
| | | } else { |
| | | _config.wrap.zHeight = _config.wrap.zHeight + 'vh' |
| | | } |
| | | } |
| | | _config.wrap.wrapClass += ' fix-height' |
| | | } |
| | | _config.wrap.minWidth = _config.wrap.minWidth ? _config.wrap.minWidth + 'px' : '100%' |
| | | _config.wrap.zoomStyle = { |
| | | maxHeight: _config.wrap.zHeight || 'none', |
| | | '--mk-data-zoom-width': _config.wrap.minWidth |
| | | } |
| | | } else { |
| | | _config.wrap.zoomStyle = null |
| | | } |
| | | |
| | | if (_config.wrap.shifting === 'true') { |
| | | _config.wrap.shifting = 'shifting' |
| | | } else { |
| | | _config.wrap.shifting = '' |
| | | } |
| | | |
| | | let wrapStyle = null |
| | | let subcard = fromJS(_card).toJS() |
| | | let subconfig = fromJS(_config).toJS() |
| | |
| | | pageOptions.push(size) |
| | | pageOptions = pageOptions.sort((a, b) => a - b) |
| | | } |
| | | } |
| | | |
| | | if (_config.wrap.zHeight) { |
| | | _config.wrap.zHeight = _config.wrap.zHeight <= 100 ? _config.wrap.zHeight + 'vh' : _config.wrap.zHeight |
| | | } |
| | | |
| | | if (_config.wrap.zHeight || _config.wrap.minWidth) { |
| | | _config.wrap.zoomStyle = { |
| | | border: `1px solid ${_config.wrap.zBColor || 'transparent'}`, |
| | | height: _config.wrap.zHeight || 'auto' |
| | | if (_config.wrap.maxPageSize) { |
| | | pageOptions = pageOptions.filter(item => item <= _config.wrap.maxPageSize) |
| | | } |
| | | } else { |
| | | _config.wrap.zoomStyle = null |
| | | } |
| | | |
| | | this.setState({ |
| | |
| | | if (config.setting.onload === 'true') { |
| | | this.initExec() |
| | | } |
| | | |
| | | this.autoExec() |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | |
| | | } |
| | | } |
| | | |
| | | autoExec = (times) => { |
| | | const { config } = this.state |
| | | |
| | | if (!config.wrap.autoExec) return |
| | | |
| | | let btn = document.getElementById('button' + config.wrap.autoExec) |
| | | |
| | | this.autoTimer && clearTimeout(this.autoTimer) |
| | | |
| | | if (btn) { |
| | | MKEmitter.emit('triggerBtnId', config.wrap.autoExec, []) |
| | | } else if (!times || times < 20) { |
| | | times = times ? times + 1 : 1 |
| | | this.autoTimer = setTimeout(() => { |
| | | this.autoExec(times) |
| | | }, 1000) |
| | | } |
| | | } |
| | | |
| | | searchRefresh = (searchId) => { |
| | | const { config } = this.state |
| | | |
| | |
| | | |
| | | let supModule = config.setting.supModule |
| | | |
| | | if (position === 'line') { |
| | | if (position === 'line' || position === 'line_grid') { |
| | | if (lines && lines.length === 1) { |
| | | this.loadLinedata(lines[0].$$parentId || lines[0].$$uuid) |
| | | this.loadLinedata(lines[0].$$parentId || lines[0].$$uuid, position) |
| | | } else { |
| | | this.loadData(id) |
| | | } |
| | | } else if ((position === 'mainline' || position === 'popclose') && supModule && BID) { // 刷新源组件时,附带刷新上级行与当前组件 |
| | | MKEmitter.emit('reloadData', supModule, BID) |
| | | } else if (['mainline', 'maingrid', 'popclose'].includes(position) && supModule) { |
| | | MKEmitter.emit('reloadData', supModule, position === 'maingrid' ? '' : BID) |
| | | } else if (!btn || btn.resetPageIndex !== 'false') { |
| | | this.setState({ |
| | | pageIndex: 1 |
| | |
| | | if (!config.setting.supModule || config.setting.supModule !== MenuID) return |
| | | if (id !== this.state.BID || id !== '') { |
| | | this.setState({ BID: id, BData: data, pageIndex: 1 }, () => { |
| | | this.loadData() |
| | | if (!config.checkBid) { |
| | | this.loadData() |
| | | } |
| | | }) |
| | | } |
| | | } |
| | |
| | | |
| | | if (config.setting.supModule && !BID && config.wrap.supKey !== 'false') { // BID 不存在时,不做查询 |
| | | this.loaded = true |
| | | this.requestId = '' |
| | | |
| | | this.setState({ |
| | | activeKey: '', |
| | |
| | | total: 0, |
| | | loading: false |
| | | }) |
| | | |
| | | if (selected !== 'false' || (id && config.wrap.selected !== 'false')) { |
| | | setTimeout(() => { |
| | | this.checkTopLine(id) |
| | | }, 10) |
| | | if (selected === 'init') { |
| | | this.setState({selected: 'false'}) |
| | | } |
| | | } else { |
| | | MKEmitter.emit('resetSelectLine', config.uuid, '', '') |
| | | } |
| | | |
| | | MKEmitter.emit('resetSelectLine', config.uuid, '', '') |
| | | return |
| | | } |
| | | |
| | |
| | | let _orderBy = orderBy || config.setting.order || '' |
| | | let param = UtilsDM.getQueryDataParams(config.setting, searches, _orderBy, pageIndex, pageSize, BID) |
| | | |
| | | let result = await Api.genericInterface(param) |
| | | this.requestId = config.uuid + new Date().getTime() |
| | | |
| | | let result = await Api.genericInterface(param, '', '', this.requestId) |
| | | if (result.status) { |
| | | if (result.$requestId && this.requestId !== result.$requestId) return |
| | | |
| | | let start = 1 |
| | | if (config.setting.laypage) { |
| | | start = pageSize * (pageIndex - 1) + 1 |
| | |
| | | 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) |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * @description 获取单行数据 |
| | | */ |
| | | async loadLinedata (id) { |
| | | async loadLinedata (id, position) { |
| | | const { config, pageIndex, pageSize, search, BID, BData, orderBy } = this.state |
| | | |
| | | if (config.forbidLine) { |
| | |
| | | |
| | | let result = await Api.genericInterface(param) |
| | | if (result.status) { |
| | | if (position === 'line_grid' && (!result.data || !result.data[0])) { |
| | | this.loadData() |
| | | return |
| | | } |
| | | |
| | | let data = fromJS(this.state.data).toJS() |
| | | let selectedData = fromJS(this.state.selectedData).toJS() |
| | | let selectKeys = fromJS(this.state.selectKeys).toJS() |
| | |
| | | this.setState({ |
| | | loading: false |
| | | }) |
| | | notification.error({ |
| | | top: 92, |
| | | message: result.message, |
| | | duration: 10 |
| | | }) |
| | | |
| | | UtilsDM.queryFail(result) |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | if (!menu) return |
| | | |
| | | menu.param = {} |
| | | menu.param = {$BID: item.$$uuid || ''} |
| | | |
| | | if (card.setting.joint === 'true') { |
| | | menu.param.$BID = item.$$uuid || '' |
| | | |
| | | Object.keys(item).forEach(key => { |
| | | if (/^\$/.test(key)) return |
| | | if (key === 'children') return |
| | | menu.param[key] = item[key] |
| | | }) |
| | | } |
| | | Object.keys(item).forEach(key => { |
| | | if (/^\$/.test(key)) return |
| | | if (key === 'children') return |
| | | menu.param[key] = item[key] |
| | | }) |
| | | |
| | | MKEmitter.emit('modifyTabs', menu, true) |
| | | } |
| | |
| | | } |
| | | |
| | | return ( |
| | | <div className="double-data-card-box" id={'anchor' + config.uuid} style={config.style}> |
| | | <div className={'double-data-card-box ' + config.wrap.shifting} id={'anchor' + config.uuid} style={config.style}> |
| | | {loading ? |
| | | <div className="loading-mask"> |
| | | {data.length ? <div className="ant-spin-blur"></div> : null} |
| | |
| | | selectedData={selectedData} |
| | | /> : null |
| | | } |
| | | {config.wrap.pickup === 'true' && this.state.data.length > 0 ? <div className="pickup-wrap"><Switch title="收起" checkedChildren="开" unCheckedChildren="关" checked={pickup} onChange={this.pickupChange} /></div> : null} |
| | | {config.wrap.pickup === 'true' && this.state.data.length > 0 ? <div className="pickup-wrap"><Switch title="收起" checkedChildren={window.GLOB.dict['open'] || '开'} unCheckedChildren={window.GLOB.dict['shut'] || '关'} checked={pickup} onChange={this.pickupChange} /></div> : null} |
| | | <div className={config.wrap.zoomStyle ? 'data-zoom-box' : ''} style={config.wrap.zoomStyle}> |
| | | <div className={`data-zoom ${config.wrap.wrapClass}`} style={config.wrap.minWidth ? {minWidth: config.wrap.minWidth} : null}> |
| | | <Row className={'card-row-list '}> |
| | | <div className={`data-zoom ${config.wrap.wrapClass}`}> |
| | | <Row className="card-row-list"> |
| | | {precards.map((item, index) => ( |
| | | <Col key={'pre' + index} className="extend-card" style={item.wStyle} span={item.setting.width || 6}> |
| | | {item.setting.cardRole === 'header' ? <TableHeader card={item} data={extendData} refresh={this.refreshByHeader}> |
| | |
| | | } else { |
| | | subClass = opens.indexOf(item.key) > -1 ? 'mk-unfold' : 'mk-collapse' |
| | | unfold = opens.indexOf(item.key) > -1 |
| | | } |
| | | |
| | | if (!unfold && item.children.length > 5) { |
| | | return ( |
| | | <Col key={index} span={card.setting.width} style={card.wStyle}> |
| | | <div className={className} style={wrapStyle}> |
| | | <CardItem card={card} cards={config} data={item} onDoubleClick={() => this.onDoubleClick(item.key, subClass)} onClick={() => {this.changeCard(item.key, item, subClass)}}> |
| | | <span className="circle-select"></span> |
| | | {card.setting.controlIcon === 'left' ? <PlusSquareOutlined className={subClass} onClick={(e) => this.changeUnfold(e, item.key, subClass)}/> : null} |
| | | {card.setting.controlIcon === 'right' ? <UpOutlined className={subClass} onClick={(e) => this.changeUnfold(e, item.key, subClass)}/> : null} |
| | | </CardItem> |
| | | </div> |
| | | </Col> |
| | | ) |
| | | } |
| | | } |
| | | |
| | |
| | | </div> |
| | | {config.$empty && data.length === 0 ? <Empty description={false}/> : null} |
| | | </div> |
| | | {config.wrap.pagestyle === 'page' ? <Pagination size="small" total={total} showTotal={(t, range) => total > 0 ? `${range[0]}-${range[1]} 共 ${total} 条` : `共 ${total} 条`} pageSize={pageSize} showSizeChanger={true} pageSizeOptions={this.state.pageOptions} onChange={this.changePageIndex} onShowSizeChange={this.pageSizeChange} current={pageIndex}/> : null} |
| | | {config.wrap.pagestyle === 'more' && data.length > 0 ? <div className={'mk-more' + (pageSize * pageIndex >= total ? ' disabled' : '')} onClick={this.loadMore}>查看更多<DownOutlined/></div> : null} |
| | | {config.wrap.pagestyle === 'page' ? <Pagination size="small" total={total} showTotal={(t, range) => total > 0 ? `${range[0]}-${range[1]} ${window.GLOB.dict['of'] || '共'} ${total} ${window.GLOB.dict['items'] || '条'}` : `${total} ${window.GLOB.dict['items'] || '条'}`} pageSize={pageSize} showSizeChanger={true} pageSizeOptions={this.state.pageOptions} onChange={this.changePageIndex} onShowSizeChange={this.pageSizeChange} current={pageIndex}/> : null} |
| | | {config.wrap.pagestyle === 'more' && data.length > 0 ? <div className={'mk-more' + (pageSize * pageIndex >= total ? ' disabled' : '')} onClick={this.loadMore}>{window.GLOB.dict['view_more'] || '查看更多'}<DownOutlined/></div> : null} |
| | | </div> |
| | | ) |
| | | } |