| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Spin, Empty, notification, message, Row, Col, Pagination, Modal } from 'antd' |
| | | import { Spin, Empty, message, Row, Col, Pagination, Switch, notification } from 'antd' |
| | | import { DownOutlined } from '@ant-design/icons' |
| | | |
| | | import Api from '@/api' |
| | |
| | | selectedData: [], |
| | | loading: false, |
| | | card: null, |
| | | data: null, |
| | | total: null, |
| | | data: [], |
| | | total: 0, |
| | | precards: [], |
| | | nextcards: [], |
| | | selected: 'false', |
| | | supNodes: [], |
| | | supComs: null |
| | | pickup: false |
| | | } |
| | | |
| | | loaded = false |
| | | supModules = [] |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { config } = this.props |
| | |
| | | _config.wrap.selected = 'false' |
| | | } |
| | | |
| | | let supComs = null |
| | | if (_config.wrap.supType === 'multi') { |
| | | supComs = _config.supNodes.map(item => item.componentId) |
| | | } |
| | | |
| | | _config.wrap.selStyle = _config.wrap.selStyle || 'active' |
| | | _config.wrap.selStyle = _config.wrap.selStyle || 'none' |
| | | _config.wrap.pagestyle = _config.wrap.pagestyle || 'page' |
| | | _config.wrap.scale = _config.wrap.scale === 'true' ? 'scale' : '' |
| | | _config.wrap.layout = (_config.wrap.layout || 'grid') + '-layout float-' + (_config.wrap.cardFloat || 'left') |
| | | |
| | | _config.wrap.wrapClass = `${_config.wrap.selStyle} ${_config.wrap.cardType || ''} ${_config.wrap.scale}` |
| | | _config.wrap.wrapClass = `${_config.wrap.selStyle} ${_config.wrap.cardType || ''} ${_config.wrap.scale} ${config.wrap.hover === 'true' ? 'mk-hover' : ''} ${config.wrap.empSign === 'hidden' ? 'mk-empty-hide' : ''}` |
| | | |
| | | if (_config.wrap.shifting === 'true') { |
| | | _config.wrap.shifting = 'shifting' |
| | | } else { |
| | | _config.wrap.shifting = '' |
| | | } |
| | | |
| | | let pageOptions = ['10', '25', '50', '100', '500', '1000'] |
| | | |
| | |
| | | pageOptions.push(size) |
| | | pageOptions = pageOptions.sort((a, b) => a - b) |
| | | } |
| | | |
| | | if (_config.wrap.maxPageSize) { |
| | | pageOptions = pageOptions.filter(item => item <= _config.wrap.maxPageSize) |
| | | } |
| | | } |
| | | |
| | | let _data = null |
| | | let _data = [] |
| | | if (_config.setting.sync === 'true') { |
| | | _config.setting.onload = 'false' |
| | | |
| | |
| | | _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' |
| | |
| | | |
| | | window.GLOB.SyncData.delete(_config.dataName) |
| | | } |
| | | } else if (_config.setting.supModule && !BID && _config.wrap.supKey !== 'false') { |
| | | _config.setting.onload = 'false' |
| | | } |
| | | |
| | | if (_config.wrap.zHeight) { |
| | | _config.wrap.zoomStyle = {} |
| | | if (_config.wrap.zHeight <= 100) { |
| | | if (_config.wrap.zHeight < 0) { |
| | | _config.wrap.zoomStyle.maxHeight = `calc(100vh - ${-_config.wrap.zHeight}px)` |
| | | _config.wrap.zoomStyle.minHeight = '100px' |
| | | } else { |
| | | _config.wrap.zoomStyle.maxHeight = _config.wrap.zHeight + 'vh' |
| | | } |
| | | } else { |
| | | _config.wrap.zoomStyle.maxHeight = _config.wrap.zHeight + 'px' |
| | | } |
| | | |
| | | if (_config.style) { |
| | | delete _config.style.height |
| | | } |
| | | _config.wrap.layout += ' fix-height' |
| | | } else { |
| | | _config.wrap.zoomStyle = null |
| | | } |
| | | |
| | | this.setState({ |
| | | pageSize: _config.setting.pageSize || 10, |
| | | pageOptions, |
| | | supComs, |
| | | selected, |
| | | precards, |
| | | nextcards, |
| | |
| | | } |
| | | |
| | | this.initExec() |
| | | |
| | | this.autoExec() |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | |
| | | } |
| | | |
| | | initExec = () => { |
| | | const { config } = this.state |
| | | const { config, BID } = this.state |
| | | |
| | | this.loaded && this.prevCheck() |
| | | |
| | | 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') |
| | |
| | | return item |
| | | }) |
| | | |
| | | this.setState({data: _data}) |
| | | this.setState({data: _data}, () => { |
| | | this.prevCheck() |
| | | }) |
| | | }) |
| | | } |
| | | } 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) => { |
| | |
| | | } |
| | | } |
| | | |
| | | 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) |
| | | } |
| | | } |
| | | |
| | | transferSyncData = (syncId) => { |
| | | const { config } = this.state |
| | | |
| | |
| | | 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.$searchId !== searchId) return |
| | | |
| | | this.setState({pageIndex: 1}, () => { |
| | | this.loadData() |
| | | }) |
| | | this.reloadIndex() |
| | | } |
| | | |
| | | /** |
| | |
| | | * @param {*} btn // 执行的按钮 |
| | | */ |
| | | refreshByButtonResult = (menuId, position, btn, id = '', lines) => { |
| | | const { config, BID, supComs, supNodes } = this.state |
| | | const { config, BID } = this.state |
| | | |
| | | if (config.uuid !== menuId) return |
| | | |
| | | if (supComs) { |
| | | if (position === 'mainline' || position === 'popclose') { // 主表刷新,去除同步刷新组件 |
| | | let supNode = supNodes[supNodes.length - 1] |
| | | supComs.forEach((item, i) => { |
| | | let _id = config.wrap.selected === 'always' ? id : '' |
| | | if (config.supNodes) { |
| | | if (['mainline', 'maingrid', 'popclose'].includes(position)) { |
| | | let supNode = this.supModules[this.supModules.length - 1] |
| | | config.supNodes.forEach((item, i) => { |
| | | setTimeout(() => { |
| | | if (supNode && supNode.key === item) { |
| | | MKEmitter.emit('reloadData', item, supNode.value) |
| | |
| | | }, i * 10) |
| | | }) |
| | | } else { |
| | | if (position === 'line') { |
| | | if (position === 'line' || position === 'line_grid') { |
| | | if (lines && lines.length === 1) { |
| | | this.loadLinedata(lines[0].$$uuid) |
| | | if (config.forbidLine) { |
| | | this.loadData(lines[0].$$uuid, 'repage') |
| | | } else { |
| | | this.loadLinedata(lines[0].$$uuid, position) |
| | | } |
| | | } else { |
| | | this.loadData(id) |
| | | this.loadData(_id, 'repage') |
| | | } |
| | | } else if (!btn || btn.resetPageIndex !== 'false') { |
| | | this.setState({ |
| | | pageIndex: 1 |
| | | }, () => { |
| | | this.loadData(id) |
| | | }) |
| | | } else if (btn.resetPageIndex !== 'false') { |
| | | this.reloadIndex() |
| | | } else { |
| | | this.loadData(id) |
| | | this.loadData(_id, 'repage') |
| | | } |
| | | } |
| | | } else { |
| | | let supModule = config.setting.supModule |
| | | |
| | | if (position === 'line') { |
| | | if (position === 'line' || position === 'line_grid') { |
| | | if (lines && lines.length === 1) { |
| | | this.loadLinedata(lines[0].$$uuid) |
| | | if (config.forbidLine) { |
| | | this.loadData(lines[0].$$uuid, 'repage') |
| | | } else { |
| | | this.loadLinedata(lines[0].$$uuid, position) |
| | | } |
| | | } else { |
| | | this.loadData(id) |
| | | this.loadData(_id, 'repage') |
| | | } |
| | | } else if ((position === 'mainline' || position === 'popclose') && supModule && BID) { // 刷新源组件时,附带刷新上级行与当前组件 |
| | | MKEmitter.emit('reloadData', supModule, BID) |
| | | } else if (!btn || btn.resetPageIndex !== 'false') { |
| | | this.setState({ |
| | | pageIndex: 1 |
| | | }, () => { |
| | | this.loadData(id) |
| | | }) |
| | | } else if (['mainline', 'maingrid', 'popclose'].includes(position) && supModule) { |
| | | MKEmitter.emit('reloadData', supModule, position === 'maingrid' ? '' : BID) |
| | | } else if (btn.resetPageIndex !== 'false') { |
| | | this.reloadIndex() |
| | | } else { |
| | | this.loadData(id) |
| | | this.loadData(_id, 'repage') |
| | | } |
| | | } |
| | | } |
| | |
| | | }) |
| | | } |
| | | |
| | | reloadIndex = () => { |
| | | this.setState({ |
| | | pageIndex: 1 |
| | | }, () => { |
| | | this.loadData() |
| | | }) |
| | | } |
| | | |
| | | prevCheck = (id) => { |
| | | const { selected } = this.state |
| | | |
| | | if (selected === 'false' && !id) return |
| | | |
| | | setTimeout(() => { |
| | | this.checkTopLine(id) |
| | | this.checkTopLine(id, selected) |
| | | }, 10) |
| | | |
| | | if (selected === 'init') { |
| | |
| | | } |
| | | } |
| | | |
| | | checkTopLine = (id) => { |
| | | const { config, data, selected } = this.state |
| | | checkTopLine = (id, selected) => { |
| | | const { config, data } = this.state |
| | | |
| | | if (!data || data.length === 0) { |
| | | this.setState({ |
| | | activeKey: '', |
| | | selectKeys: [], |
| | | selectedData: [] |
| | | }) |
| | | |
| | | MKEmitter.emit('resetSelectLine', config.uuid, '', '') |
| | | if (config.setting.$hasSyncModule) { |
| | | MKEmitter.emit('syncBalconyData', config.uuid, [], false) |
| | | let index = -1 |
| | | let keys = [] |
| | | let items = [] |
| | | |
| | | if (data.length > 0) { |
| | | if (id) { |
| | | index = data.findIndex(item => item.$$uuid === id && !item.$disabled) |
| | | } |
| | | return |
| | | } |
| | | |
| | | if (selected === 'sign') { |
| | | let index = '' |
| | | let keys = [] |
| | | let items = [] |
| | | let last = '' |
| | | data.forEach((item, i) => { |
| | | if (!item.$disabled && item.selected === 'true') { |
| | | items.push(item) |
| | | keys.push(i) |
| | | index = i |
| | | last = item |
| | | |
| | | if (index !== -1) { |
| | | keys = [index] |
| | | items = [data[index]] |
| | | } else if (selected === 'sign') { |
| | | data.forEach((item, i) => { |
| | | if (!item.$disabled && item.selected === 'true') { |
| | | items.push(item) |
| | | keys.push(i) |
| | | index = i |
| | | } |
| | | }) |
| | | } else if (selected !== 'false') { |
| | | if (!data[0].$disabled) { |
| | | index = 0 |
| | | keys = [index] |
| | | items = [data[index]] |
| | | } |
| | | }) |
| | | |
| | | this.setState({ |
| | | activeKey: index, |
| | | selectKeys: keys, |
| | | selectedData: items |
| | | }) |
| | | |
| | | MKEmitter.emit('resetSelectLine', config.uuid, last ? last.$$uuid : '', last) |
| | | if (config.setting.$hasSyncModule) { |
| | | MKEmitter.emit('syncBalconyData', config.uuid, items, data.length === keys.length) |
| | | } |
| | | return |
| | | } |
| | | |
| | | let index = 0 |
| | | if (id) { |
| | | index = data.findIndex(item => item.$$uuid === id) |
| | | if (index === -1) { |
| | | index = 0 |
| | | } |
| | | } |
| | | |
| | | if (data[index].$disabled) { |
| | | if (index === -1) { |
| | | this.setState({ |
| | | activeKey: '', |
| | | selectKeys: [], |
| | |
| | | } |
| | | return |
| | | } |
| | | |
| | | let item = items[items.length - 1] |
| | | |
| | | this.setState({ |
| | | activeKey: index, |
| | | selectKeys: [index], |
| | | selectedData: [data[index]] |
| | | selectKeys: keys, |
| | | selectedData: items |
| | | }) |
| | | |
| | | MKEmitter.emit('resetSelectLine', config.uuid, data[index].$$uuid, data[index]) |
| | | MKEmitter.emit('resetSelectLine', config.uuid, item.$$uuid, item) |
| | | if (config.setting.$hasSyncModule) { |
| | | MKEmitter.emit('syncBalconyData', config.uuid, [data[index]], data.length === 1) |
| | | MKEmitter.emit('syncBalconyData', config.uuid, items, data.length === keys.length) |
| | | } |
| | | } |
| | | |
| | |
| | | MKEmitter.emit('resetSelectLine', config.uuid, last ? last.$$uuid : '', last) |
| | | MKEmitter.emit('syncBalconyData', config.uuid, items, data.length > 0 && data.length === keys.length) |
| | | if (items.length === 0) { |
| | | message.warning('未获取到数据!') |
| | | message.warning(window.GLOB.dict['no_data'] || '未获取到数据!') |
| | | } |
| | | } else { |
| | | this.setState({ |
| | |
| | | const { config, data, selectedData } = this.state |
| | | |
| | | if (config.wrap.cardType !== 'checkbox') return |
| | | if (!data || data.length === 0) return |
| | | if (data.length === 0) return |
| | | |
| | | if (selectedData.length === 0 || selectedData.length < data.length) { |
| | | let index = '' |
| | |
| | | if (config.uuid !== menuId) return |
| | | |
| | | if (!id) { |
| | | this.loadData() |
| | | this.reloadIndex() |
| | | } else if (config.forbidLine) { |
| | | this.loadData(id, 'repage') |
| | | } else { |
| | | this.loadLinedata(id) |
| | | } |
| | | } |
| | | |
| | | resetParentParam = (MenuID, id, data) => { |
| | | const { config, supComs } = this.state |
| | | const { config } = this.state |
| | | |
| | | if (supComs) { |
| | | if (!supComs.includes(MenuID)) return |
| | | let supNodes = this.state.supNodes.filter(item => item.key !== MenuID) |
| | | if (config.supNodes) { |
| | | if (!config.supNodes.includes(MenuID)) return |
| | | this.supModules = this.supModules.filter(item => item.key !== MenuID) |
| | | let bid = '' |
| | | let _data = null |
| | | |
| | | if (id) { |
| | | supNodes.push({key: MenuID, value: id, data}) |
| | | this.supModules.push({key: MenuID, value: id, data}) |
| | | } |
| | | if (supNodes.length > 0) { |
| | | bid = supNodes[supNodes.length - 1].value |
| | | _data = supNodes[supNodes.length - 1].data |
| | | if (this.supModules.length > 0) { |
| | | bid = this.supModules[this.supModules.length - 1].value |
| | | _data = this.supModules[this.supModules.length - 1].data |
| | | } |
| | | |
| | | if (bid !== this.state.BID || bid !== '') { |
| | | this.setState({ BID: bid, BData: _data, pageIndex: 1, supNodes }, () => { |
| | | this.setState({ BID: bid, BData: _data, pageIndex: 1 }, () => { |
| | | this.loadData() |
| | | }) |
| | | } else { |
| | | this.setState({ supNodes }) |
| | | } |
| | | } else { |
| | | 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: '', |
| | |
| | | loading: false |
| | | }) |
| | | |
| | | if (selected !== 'false' || (id && config.wrap.selected !== 'false')) { |
| | | this.prevCheck(id) |
| | | } else { |
| | | MKEmitter.emit('resetSelectLine', config.uuid, '', '') |
| | | if (config.setting.$hasSyncModule) { |
| | | MKEmitter.emit('syncBalconyData', config.uuid, [], false) |
| | | } |
| | | MKEmitter.emit('resetSelectLine', config.uuid, '', '') |
| | | if (config.setting.$hasSyncModule) { |
| | | MKEmitter.emit('syncBalconyData', config.uuid, [], false) |
| | | } |
| | | if (config.$hasTopModule) { |
| | | window.GLOB.CacheData.set(config.uuid + 'tb', { $$empty: true, $$uuid: '' }) |
| | | MKEmitter.emit('mkPublicData', config.uuid + 'tb', { $$empty: true, $$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 |
| | | |
| | | if (type === 'repage' && result.data.length === 0 && pageIndex > 1) { |
| | | this.reloadIndex() |
| | | return |
| | | } |
| | | |
| | | let start = 1 |
| | | if (config.setting.laypage) { |
| | | start = pageSize * (pageIndex - 1) + 1 |
| | |
| | | |
| | | this.loaded = true |
| | | if (config.$cache && type === 'init') { |
| | | Api.writeCacheConfig(config.uuid, result.data || []) |
| | | Api.writeCacheConfig(config.uuid, result.data || [], BID) |
| | | } |
| | | |
| | | if (selected !== 'false' || (id && config.wrap.selected !== 'false')) { |
| | | if (selected !== 'false' || id) { |
| | | this.prevCheck(id) |
| | | } else { |
| | | MKEmitter.emit('resetSelectLine', config.uuid, '', '') |
| | |
| | | selectedData: [], |
| | | data: data, |
| | | total: total, |
| | | pickup: false, |
| | | loading: false |
| | | }) |
| | | |
| | | if (config.$hasTopModule) { |
| | | window.GLOB.CacheData.set(config.uuid + 'tb', data[0] || { $$empty: true, $$uuid: '' }) |
| | | MKEmitter.emit('mkPublicData', config.uuid + 'tb', data[0] || { $$empty: true, $$uuid: '' }) |
| | | } |
| | | |
| | | if (config.timer && config.clearField && result.data && result.data[0]) { |
| | | let vals = (config.clearValue || '').split(',') |
| | |
| | | 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 |
| | | |
| | | let searches = fromJS(search).toJS() |
| | |
| | | |
| | | let result = await Api.genericInterface(param) |
| | | if (result.status) { |
| | | if (position === 'line_grid' && (!result.data || !result.data[0])) { |
| | | this.reloadIndex() |
| | | return |
| | | } |
| | | |
| | | let data = fromJS(this.state.data).toJS() |
| | | let selectedData = fromJS(this.state.selectedData).toJS() |
| | | let selectKeys = fromJS(this.state.selectKeys).toJS() |
| | |
| | | _data.$$uuid = _data[config.setting.primaryKey] || '' |
| | | _data.$$BID = BID || '' |
| | | _data.$$BData = BData || '' |
| | | |
| | | if (config.wrap.controlField) { |
| | | if (config.wrap.controlVal.includes(_data[config.wrap.controlField] + '')) { |
| | | _data.$disabled = true |
| | | } |
| | | } |
| | | |
| | | data = data.map(item => { |
| | | if (item.$$uuid === _data.$$uuid) { |
| | |
| | | this.setState({ |
| | | loading: false |
| | | }) |
| | | notification.error({ |
| | | top: 92, |
| | | message: result.message, |
| | | duration: 10 |
| | | }) |
| | | |
| | | UtilsDM.queryFail(result) |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | refreshSearch = (list) => { |
| | | const { config, BID } = this.state |
| | | |
| | | if (config.setting.supModule && !BID && config.wrap.supKey !== 'false') { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: config.setting.supModTip || window.GLOB.dict['sup_key_req'] || '需要上级主键值!', |
| | | duration: 5 |
| | | }) |
| | | this.setState({ |
| | | search: list |
| | | }) |
| | | return |
| | | } |
| | | |
| | | this.setState({ |
| | | search: list, |
| | | pageIndex: 1 |
| | |
| | | }) |
| | | } |
| | | |
| | | render() { |
| | | const { config, precards, nextcards, loading, data, pageIndex, pageSize, total, card, activeKey, BID, BData, selectedData, selectKeys } = this.state |
| | | pickupChange = () => { |
| | | this.setState({ |
| | | pickup: !this.state.pickup |
| | | }) |
| | | } |
| | | |
| | | if (config.wrap.empty === 'hidden' && (!data || data.length === 0)) return null |
| | | render() { |
| | | const { config, precards, nextcards, loading, pageIndex, pageSize, total, card, activeKey, BID, BData, selectedData, selectKeys, pickup } = this.state |
| | | |
| | | let data = this.state.data |
| | | |
| | | if (config.wrap.empty === 'hidden' && data.length === 0) return null |
| | | |
| | | let _total = 0 |
| | | let switchable = false |
| | | if (config.wrap.pagestyle === 'switch' && total > pageSize && data) { |
| | | if (config.wrap.pagestyle === 'switch' && total > pageSize) { |
| | | _total = pageSize * pageIndex |
| | | switchable = true |
| | | } |
| | |
| | | if (config.$extend) { |
| | | extendData = {$$BID: BID, $$BData: BData, $$selectedData: selectedData, $$type: 'extendCard'} |
| | | |
| | | if (data && data[0]) { |
| | | if (data[0]) { |
| | | if (selectedData[0]) { |
| | | extendData = {...extendData, ...selectedData[0]} |
| | | } else { |
| | |
| | | } |
| | | } |
| | | |
| | | if (pickup) { |
| | | data = data.filter(item => selectKeys.includes(item.key)) |
| | | } |
| | | |
| | | return ( |
| | | <div className="custom-data-card-box" id={'anchor' + config.uuid} style={config.style}> |
| | | <div className={'custom-data-card-box ' + config.wrap.shifting} id={'anchor' + config.uuid} style={config.style}> |
| | | {loading ? |
| | | <div className="loading-mask"> |
| | | {data ? <div className="ant-spin-blur"></div> : null} |
| | | {data.length ? <div className="ant-spin-blur"></div> : null} |
| | | <Spin /> |
| | | </div> : null |
| | | } |
| | |
| | | selectedData={selectedData} |
| | | /> : 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={`data-zoom ${config.wrap.wrapClass}`}> |
| | | {switchable ? <div className={'prev-page ' + (pageIndex === 1 ? 'disabled' : '')} onClick={this.prevPage}><div><div><img src={preImg} alt=""/></div></div></div> : null} |
| | | <Row className={'card-row-list ' + config.wrap.layout}> |
| | | <Row className={'card-row-list ' + config.wrap.layout} style={config.wrap.zoomStyle}> |
| | | {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}> |
| | |
| | | </CardItem>} |
| | | </Col> |
| | | ))} |
| | | {data && data.map((item, index) => { |
| | | {data.map((item, index) => { |
| | | let className = 'mk-card ' |
| | | if (config.wrap.parity === 'true') { |
| | | if (index % 2 === 1) { |
| | | className += 'mk-parity-bg ' |
| | | className += 'mk-even-line ' |
| | | } |
| | | } |
| | | if (item.$disabled) { |
| | | className = 'mk-disabled' |
| | | } else if (activeKey === index) { |
| | | } else if (activeKey === item.key) { |
| | | className += 'active' |
| | | } else if (selectKeys.indexOf(index) > -1) { |
| | | } else if (selectKeys.indexOf(item.key) > -1) { |
| | | className += 'selected' |
| | | } |
| | | |
| | | return ( |
| | | <Col className={className} key={index} style={card.wStyle} span={card.setting.width}> |
| | | <CardItem card={card} cards={config} data={item} onClick={() => {this.changeCard(index, item)}}> |
| | | <CardItem card={card} cards={config} data={item} onClick={() => {this.changeCard(item.key, item)}}> |
| | | <span className="circle-select"></span> |
| | | </CardItem> |
| | | </Col> |
| | |
| | | </Row> |
| | | {switchable ? <div className={'prev-page ' + (total <= _total ? 'disabled' : '')} onClick={this.nextPage}><div><div><img src={nextImg} alt=""/></div></div></div> : null} |
| | | </div> |
| | | {config.$empty && (!data || data.length === 0) ? <Empty description={false}/> : null} |
| | | {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} |
| | | {config.$empty && data.length === 0 ? <Empty description={false}/> : 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> |
| | | ) |
| | | } |