| | |
| | | import { DownOutlined, UpOutlined, PlusSquareOutlined, MinusSquareOutlined } from '@ant-design/icons' |
| | | |
| | | import Api from '@/api' |
| | | import Utils from '@/utils/utils.js' |
| | | import UtilsDM from '@/utils/utils-datamanage.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import TimerTask from '@/utils/timer-task.js' |
| | |
| | | class DoubleDataCard extends Component { |
| | | static propTpyes = { |
| | | config: PropTypes.object, // 组件配置信息 |
| | | mainSearch: PropTypes.any, // 外层搜索条件 |
| | | } |
| | | |
| | | state = { |
| | |
| | | } |
| | | |
| | | _config.$extend = false |
| | | _config.$empty = true |
| | | |
| | | _config.subcards.forEach(item => { |
| | | if (item.setting.click === 'button' && !item.setting.linkbtn) { |
| | |
| | | } |
| | | } |
| | | |
| | | if (item.style.clear === 'left') { |
| | | item.wStyle = {clear: 'left'} |
| | | } else if (item.style.clear === 'right') { |
| | | item.wStyle = {float: 'right'} |
| | | } |
| | | |
| | | delete item.style.clear |
| | | |
| | | if (item.$cardType !== 'extendCard') { |
| | | _card = item |
| | | } else if (!_card) { |
| | | _config.$extend = true |
| | | if (item.setting.width !== 24) { |
| | | _config.$empty = false |
| | | } |
| | | precards.push(item) |
| | | } else { |
| | | _config.$extend = true |
| | | _config.$empty = false |
| | | nextcards.push(item) |
| | | } |
| | | }) |
| | | |
| | | _config.subcards = null |
| | | |
| | | let _data = null |
| | | |
| | | let selected = 'false' |
| | | if (_config.wrap.selected === 'always' || _config.wrap.selected === 'init' || _config.wrap.selected === 'sign') { |
| | | selected = _config.wrap.selected |
| | |
| | | _config.wrap.pagestyle = _config.wrap.pagestyle || 'page' |
| | | |
| | | _config.wrap.wrapClass = `${_config.wrap.selStyle} ${_config.wrap.cardType || ''}` |
| | | |
| | | this.loaded = _data !== null |
| | | |
| | | let wrapStyle = null |
| | | let subcard = fromJS(_card).toJS() |
| | |
| | | selected, |
| | | precards, |
| | | nextcards, |
| | | data: _data, |
| | | BID: BID || '', |
| | | BData: BData || '', |
| | | config: _config, |
| | |
| | | subconfig: subconfig, |
| | | wrapStyle: wrapStyle, |
| | | card: _card, |
| | | search: Utils.initMainSearch(_config.search), |
| | | search: _config.$searches, |
| | | arr_field: _config.columns.map(col => col.field).join(','), |
| | | }, () => { |
| | | if (_config.setting.onload === 'true') { |
| | | setTimeout(() => { |
| | | this.loadData() |
| | | }, _config.setting.delay || 0) |
| | | } |
| | | }) |
| | | } |
| | | |
| | |
| | | const { config } = this.state |
| | | |
| | | MKEmitter.addListener('reloadData', this.reloadData) |
| | | MKEmitter.addListener('refreshLineData', this.refreshLineData) |
| | | MKEmitter.addListener('resetSelectLine', this.resetParentParam) |
| | | MKEmitter.addListener('queryModuleParam', this.queryModuleParam) |
| | | MKEmitter.addListener('refreshByButtonResult', this.refreshByButtonResult) |
| | | |
| | | if (config.setting.useMSearch) { |
| | | MKEmitter.addListener('searchRefresh', this.searchRefresh) |
| | | } |
| | | |
| | | if (config.timer) { |
| | | this.timer = new TimerTask() |
| | | this.timer.init(config.uuid, config.timer, config.timerRepeats, () => { |
| | |
| | | }) |
| | | } |
| | | |
| | | if (config.$cache && !this.loaded) { |
| | | Api.getLCacheConfig(config.uuid).then(res => { |
| | | if (!res || this.loaded) return |
| | | let _data = res.map((item, index) => { |
| | | if (config.setting.onload === 'true') { |
| | | this.initExec() |
| | | } |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | componentWillUnmount () { |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('reloadData', this.reloadData) |
| | | MKEmitter.removeListener('searchRefresh', this.searchRefresh) |
| | | MKEmitter.removeListener('refreshLineData', this.refreshLineData) |
| | | MKEmitter.removeListener('resetSelectLine', this.resetParentParam) |
| | | MKEmitter.removeListener('queryModuleParam', this.queryModuleParam) |
| | | MKEmitter.removeListener('refreshByButtonResult', this.refreshByButtonResult) |
| | | |
| | | this.timer && this.timer.stop() |
| | | } |
| | | |
| | | initExec = () => { |
| | | const { config } = this.state |
| | | |
| | | if (config.$cache) { |
| | | let getData = (res) => { |
| | | return res.map((item, index) => { |
| | | let children = [] |
| | | |
| | | if (item[config.setting.subdata]) { |
| | |
| | | |
| | | return item |
| | | }) |
| | | } |
| | | |
| | | if (config.$time && !config.setting.laypage) { |
| | | Api.getLCacheConfig(config.uuid, config.$time).then(res => { |
| | | if (!res) { |
| | | setTimeout(() => { |
| | | this.loadData() |
| | | }, config.setting.delay || 0) |
| | | } |
| | | |
| | | this.setState({data: _data}) |
| | | }) |
| | | if (!res) return |
| | | |
| | | this.setState({data: getData(res)}) |
| | | }) |
| | | } else { |
| | | Api.getLCacheConfig(config.uuid, 0).then(res => { |
| | | if (!res || this.loaded) return |
| | | |
| | | this.setState({data: getData(res)}) |
| | | }) |
| | | |
| | | setTimeout(() => { |
| | | this.loadData() |
| | | }, config.setting.delay || 0) |
| | | } |
| | | } else { |
| | | setTimeout(() => { |
| | | this.loadData() |
| | | }, config.setting.delay || 0) |
| | | } |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | UNSAFE_componentWillReceiveProps (nextProps) { |
| | | searchRefresh = (searchId) => { |
| | | const { config } = this.state |
| | | |
| | | if (config.setting.useMSearch && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { |
| | | this.setState({pageIndex: 1}, () => { |
| | | this.loadData() |
| | | }) |
| | | } |
| | | } |
| | | |
| | | componentWillUnmount () { |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('reloadData', this.reloadData) |
| | | MKEmitter.removeListener('resetSelectLine', this.resetParentParam) |
| | | MKEmitter.removeListener('queryModuleParam', this.queryModuleParam) |
| | | MKEmitter.removeListener('refreshByButtonResult', this.refreshByButtonResult) |
| | | |
| | | this.timer && this.timer.stop() |
| | | if (config.$searchId !== searchId) return |
| | | |
| | | this.setState({pageIndex: 1}, () => { |
| | | this.loadData() |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 按钮执行完成后页面刷新 |
| | | * @param {*} menuId // 菜单Id |
| | | * @param {*} position // 刷新位置 |
| | | * @param {*} btn // 执行的按钮 |
| | | */ |
| | | refreshByButtonResult = (menuId, position, btn, id = '', lines) => { |
| | | const { config, BID } = this.state |
| | |
| | | } else { |
| | | this.loadData(id) |
| | | } |
| | | } |
| | | |
| | | if (position === 'popclose') { // 执行启动弹窗的按钮所选择的刷新项 |
| | | btn.$tabId && MKEmitter.emit('refreshPopButton', btn.$tabId) |
| | | } |
| | | refreshLineData = (menuId, btn, uuid, count) => { |
| | | const { config, data } = this.state |
| | | |
| | | if (config.uuid !== menuId) return |
| | | |
| | | let _data = fromJS(data).toJS().map(item => { |
| | | if (item.$$uuid === uuid) { |
| | | item[btn.field] = count |
| | | } |
| | | item.children.forEach(cell => { |
| | | if (cell.$$uuid === uuid) { |
| | | cell[btn.field] = count |
| | | } |
| | | }) |
| | | return item |
| | | }) |
| | | |
| | | this.setState({ |
| | | data: _data |
| | | }) |
| | | } |
| | | |
| | | checkTopLine = (id) => { |
| | |
| | | * @description 导出Excel时,获取页面搜索排序等参数 |
| | | */ |
| | | queryModuleParam = (menuId, callback) => { |
| | | const { mainSearch } = this.props |
| | | const { arr_field, config, search, orderBy } = this.state |
| | | |
| | | if (config.uuid !== menuId) return |
| | | |
| | | let searches = search ? fromJS(search).toJS() : [] |
| | | if (config.setting.useMSearch && mainSearch && mainSearch.length > 0) { // 主表搜索条件 |
| | | let keys = searches.map(item => item.key.toLowerCase()) |
| | | if (config.setting.useMSearch) { // 主表搜索条件 |
| | | let mainSearch = window.GLOB.SearchBox.get(config.$searchId) || [] |
| | | let keys = config.$s_keys || [] |
| | | mainSearch.forEach(item => { |
| | | if (!keys.includes(item.key.toLowerCase())) { |
| | | searches.push(item) |
| | | } |
| | | if (keys.includes(item.key.toLowerCase())) return |
| | | |
| | | searches.push(item) |
| | | }) |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | async loadData (id, type) { |
| | | const { mainSearch } = this.props |
| | | const { config, arr_field, pageIndex, pageSize, search, BID, BData, selected, card, orderBy } = this.state |
| | | |
| | | if (config.setting.supModule && !BID && config.wrap.supKey !== 'false') { // BID 不存在时,不做查询 |
| | |
| | | } |
| | | |
| | | let searches = fromJS(search).toJS() |
| | | if (config.setting.useMSearch && mainSearch && mainSearch.length > 0) { // 主表搜索条件 |
| | | let keys = searches.map(item => item.key.toLowerCase()) |
| | | if (config.setting.useMSearch) { // 主表搜索条件 |
| | | let mainSearch = window.GLOB.SearchBox.get(config.$searchId) || [] |
| | | let keys = config.$s_keys || [] |
| | | mainSearch.forEach(item => { |
| | | if (!keys.includes(item.key.toLowerCase())) { |
| | | searches.push(item) |
| | | } |
| | | if (keys.includes(item.key.toLowerCase())) return |
| | | |
| | | searches.push(item) |
| | | }) |
| | | } |
| | | |
| | | let requireFields = searches.filter(item => item.required && item.value === '') |
| | | if (requireFields.length > 0) { |
| | | if (config.$s_req && searches.filter(item => item.required && item.value === '').length > 0) { |
| | | return |
| | | } |
| | | |
| | |
| | | |
| | | this.loaded = true |
| | | if (config.$cache && pageIndex === 1 && config.setting.onload !== 'false') { |
| | | Api.writeCacheConfig(config.uuid, result.data || '') |
| | | Api.writeCacheConfig(config.uuid, result.data || []) |
| | | } |
| | | |
| | | if (selected !== 'false' || (id && config.wrap.selected !== 'false')) { |
| | |
| | | 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 |
| | | }) |
| | | } |
| | | } |
| | | } else { |
| | | this.setState({ |
| | | loading: false |
| | | }) |
| | | this.timer && this.timer.stop() |
| | | |
| | | if (!result.message) return |
| | | if (result.ErrCode === 'N') { |
| | | Modal.error({ |
| | | title: result.message, |
| | | }) |
| | | } else { |
| | | } else if (result.ErrCode !== '-2') { |
| | | notification.error({ |
| | | top: 92, |
| | | message: result.message, |
| | |
| | | * @description 获取单行数据 |
| | | */ |
| | | async loadLinedata (id) { |
| | | const { mainSearch } = this.props |
| | | const { config, arr_field, pageIndex, pageSize, search, BID, BData, orderBy } = this.state |
| | | |
| | | let searches = fromJS(search).toJS() |
| | | if (config.setting.useMSearch && mainSearch && mainSearch.length > 0) { // 主表搜索条件 |
| | | let keys = searches.map(item => item.key.toLowerCase()) |
| | | if (config.setting.useMSearch) { // 主表搜索条件 |
| | | let mainSearch = window.GLOB.SearchBox.get(config.$searchId) || [] |
| | | let keys = config.$s_keys || [] |
| | | mainSearch.forEach(item => { |
| | | if (!keys.includes(item.key.toLowerCase())) { |
| | | searches.push(item) |
| | | } |
| | | if (keys.includes(item.key.toLowerCase())) return |
| | | |
| | | searches.push(item) |
| | | }) |
| | | } |
| | | |
| | |
| | | <div className={`data-zoom ${config.wrap.wrapClass}`} style={config.wrap.minWidth ? {minWidth: config.wrap.minWidth} : null}> |
| | | <Row className={'card-row-list '}> |
| | | {precards.map((item, index) => ( |
| | | <Col key={'pre' + index} className="extend-card" span={item.setting.width || 6}> |
| | | <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}> |
| | | {item.setting.checkAll === 'show' ? <span onClick={this.checkAll} className={'circle-select' + checkAll}></span> : null} |
| | | </TableHeader> : <CardItem card={item} cards={config} data={extendData}> |
| | |
| | | } |
| | | |
| | | return ( |
| | | <Col key={index} span={card.setting.width}> |
| | | <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(index, subClass)} onClick={() => {this.changeCard(index, item, subClass)}}> |
| | | <span className="circle-select"></span> |
| | |
| | | ) |
| | | })} |
| | | {nextcards.map((item, index) => ( |
| | | <Col key={'next' + index} className="extend-card" span={item.setting.width || 6}> |
| | | <Col key={'next' + index} className="extend-card" style={item.wStyle} span={item.setting.width || 6}> |
| | | {item.setting.cardRole === 'header' ? <TableHeader card={item} data={extendData} refresh={this.refreshByHeader}> |
| | | {item.setting.checkAll === 'show' ? <span onClick={this.checkAll} className={'circle-select' + checkAll}></span> : null} |
| | | </TableHeader> : <CardItem card={item} cards={config} data={extendData}> |
| | |
| | | </Col> |
| | | ))} |
| | | </Row> |
| | | {!config.$extend && (!data || data.length === 0) ? <Empty description={false}/> : null} |
| | | </div> |
| | | {config.$empty && (!data || data.length === 0) ? <Empty description={false}/> : null} |
| | | </div> |
| | | {config.wrap.pagestyle === 'page' && data ? <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 && data.length > 0 ? <div className={'mk-more' + (pageSize * pageIndex >= total ? ' disabled' : '')} onClick={this.loadMore}>查看更多<DownOutlined/></div> : null} |