| | |
|---|
| | | import asyncComponent from '@/utils/asyncComponent' |
|---|
| | | import UtilsDM from '@/utils/utils-datamanage.js' |
|---|
| | | import MKEmitter from '@/utils/events.js' |
|---|
| | | import TimerTask from '@/utils/timer-task.js' |
|---|
| | | import './index.scss' |
|---|
| | | |
|---|
| | | const CardCellComponent = asyncComponent(() => import('@/tabviews/custom/components/card/cardcellList')) |
|---|
| | |
|---|
| | | |
|---|
| | | class NormalTimeline extends Component { |
|---|
| | | static propTpyes = { |
|---|
| | | BID: PropTypes.any, // 父级Id |
|---|
| | | data: PropTypes.array, // 统一查询数据 |
|---|
| | | config: PropTypes.object, // 组件配置信息 |
|---|
| | | mainSearch: PropTypes.any, // 外层搜索条件 |
|---|
| | | menuType: PropTypes.any, // 菜单类型 |
|---|
| | | config: PropTypes.object |
|---|
| | | } |
|---|
| | | |
|---|
| | | state = { |
|---|
| | | BID: '', // 上级ID |
|---|
| | | config: null, // 图表配置信息 |
|---|
| | | loading: false, // 数据加载状态 |
|---|
| | | sync: false, // 是否统一请求数据 |
|---|
| | | data: null, // 数据 |
|---|
| | | BData: '', |
|---|
| | | card: null |
|---|
| | | card: null, |
|---|
| | | description: false |
|---|
| | | } |
|---|
| | | |
|---|
| | | loaded = false |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * @description 初始化处理 |
|---|
| | | * 1、 initdata 为打印时使用的数据集 |
|---|
| | | */ |
|---|
| | | UNSAFE_componentWillMount () { |
|---|
| | | const { data, initdata, BID, BData } = this.props |
|---|
| | | let _config = fromJS(this.props.config).toJS() |
|---|
| | | let _cols = new Map() |
|---|
| | | const { config } = this.props |
|---|
| | | |
|---|
| | | let _config = fromJS(config).toJS() |
|---|
| | | let _data = null |
|---|
| | | let card = null |
|---|
| | | let _sync = _config.setting.sync === 'true' |
|---|
| | | let BID = '' |
|---|
| | | let BData = '' |
|---|
| | | |
|---|
| | | if (_config.setting.sync === 'true' && data) { |
|---|
| | | _data = data[_config.dataName] || [] |
|---|
| | | _sync = false |
|---|
| | | } else if (_config.setting.sync === 'true' && initdata) { |
|---|
| | | _data = initdata || [] |
|---|
| | | _sync = false |
|---|
| | | if (_config.setting.supModule) { |
|---|
| | | BData = window.GLOB.CacheData.get(_config.setting.supModule) |
|---|
| | | } else { |
|---|
| | | BData = window.GLOB.CacheData.get(_config.$pageId) |
|---|
| | | } |
|---|
| | | if (BData) { |
|---|
| | | BID = BData.$BID || '' |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (_data) { |
|---|
| | | _data = _data.map((item, index) => { |
|---|
| | | item.key = index |
|---|
| | | item.$$uuid = item[_config.setting.primaryKey] || '' |
|---|
| | | item.$$BID = BID || '' |
|---|
| | | item.$$BData = BData || '' |
|---|
| | | item.$Index = index + 1 + '' |
|---|
| | | return item |
|---|
| | | }) |
|---|
| | | if (_config.setting.sync === 'true') { |
|---|
| | | _config.setting.onload = 'false' |
|---|
| | | |
|---|
| | | if (window.GLOB.SyncData.has(_config.dataName)) { |
|---|
| | | _data = window.GLOB.SyncData.get(_config.dataName) || [] |
|---|
| | | |
|---|
| | | if (_config.$cache) { |
|---|
| | | Api.writeCacheConfig(_config.uuid, fromJS(_data).toJS(), BID) |
|---|
| | | } |
|---|
| | | |
|---|
| | | _config.setting.sync = 'false' |
|---|
| | | |
|---|
| | | _data = _data.map((item, index) => { |
|---|
| | | item.key = index |
|---|
| | | item.$$uuid = item[_config.setting.primaryKey] || '' |
|---|
| | | item.$$BID = BID || '' |
|---|
| | | item.$$BData = BData || '' |
|---|
| | | item.$Index = index + 1 + '' |
|---|
| | | return item |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.loaded = true |
|---|
| | | |
|---|
| | | window.GLOB.SyncData.delete(_config.dataName) |
|---|
| | | } |
|---|
| | | } else if (_config.setting.supModule && !BID) { |
|---|
| | | _config.setting.onload = 'false' |
|---|
| | | } |
|---|
| | | |
|---|
| | | _config.search = [] |
|---|
| | | _config.wrap.contentHeight = _config.wrap.title ? 'calc(100% - 45px)' : '100%' |
|---|
| | | |
|---|
| | | _config.columns.forEach(item => { |
|---|
| | | if (item.type !== 'number') return |
|---|
| | | _cols.set(item.field, item) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | card = _config.subcards[0] |
|---|
| | | card.elements = card.elements.map(item => { |
|---|
| | | if (item.eleType === 'number' && item.field && _cols.has(item.field) && typeof(item.decimal) !== 'number') { |
|---|
| | | item.decimal = _cols.get(item.field).decimal || 0 |
|---|
| | | |
|---|
| | | if (_config.wrap.dotSign === 'adaptive') { |
|---|
| | | try { |
|---|
| | | let cl = Math.floor(document.body.clientWidth * _config.width / 24 / 320) |
|---|
| | | _config.wrap.dotSign = ['', 'size16', 'size18', 'size20', 'size22', 'size24', 'size24', 'size24', 'size24'][cl] |
|---|
| | | } catch(e) { |
|---|
| | | _config.wrap.dotSign = 'size20' |
|---|
| | | } |
|---|
| | | return item |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.setState({ |
|---|
| | | card, |
|---|
| | | sync: _sync, |
|---|
| | | BID: BID || '', |
|---|
| | | BData: BData || '', |
|---|
| | | data: _data, |
|---|
| | | config: _config, |
|---|
| | | arr_field: _config.columns.map(col => col.field).join(','), |
|---|
| | | }, () => { |
|---|
| | | if (_config.setting.sync !== 'true' && _config.setting.onload === 'true') { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.loadData() |
|---|
| | | }, _config.setting.delay || 0) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | componentDidMount () { |
|---|
| | | 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.setting.sync === 'true') { |
|---|
| | | MKEmitter.addListener('transferSyncData', this.transferSyncData) |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (config.timer) { |
|---|
| | | this.timer = new TimerTask() |
|---|
| | | this.timer.init(config.uuid, config.timer, config.timerRepeats, () => { |
|---|
| | | this.loadData('timer') |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.initExec() |
|---|
| | | } |
|---|
| | | |
|---|
| | | shouldComponentUpdate (nextProps, nextState) { |
|---|
| | |
|---|
| | | 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('transferSyncData', this.transferSyncData) |
|---|
| | | MKEmitter.removeListener('refreshByButtonResult', this.refreshByButtonResult) |
|---|
| | | |
|---|
| | | this.timer && this.timer.stop() |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * @description 图表数据更新，刷新内容 |
|---|
| | | */ |
|---|
| | | UNSAFE_componentWillReceiveProps (nextProps) { |
|---|
| | | const { sync, config, BID, BData } = this.state |
|---|
| | | initExec = () => { |
|---|
| | | const { 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] || [] |
|---|
| | | if (config.$cache) { |
|---|
| | | if (config.$time) { |
|---|
| | | if (!this.loaded) { |
|---|
| | | Api.getLCacheConfig(config.uuid, config.$time, BID).then(res => { |
|---|
| | | if (!res.valid && config.setting.onload === 'true') { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.loadData('init') |
|---|
| | | }, config.setting.delay || 0) |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (!res.data || this.loaded) return |
|---|
| | | |
|---|
| | | this.setState({data: res.data.map((item, index) => { |
|---|
| | | item.key = index |
|---|
| | | item.$$uuid = item[config.setting.primaryKey] || '' |
|---|
| | | item.$Index = index + 1 + '' |
|---|
| | | |
|---|
| | | return item |
|---|
| | | })}) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | if (!this.loaded) { |
|---|
| | | Api.getLCacheConfig(config.uuid, 0, BID).then(res => { |
|---|
| | | if (!res.data || this.loaded) return |
|---|
| | | |
|---|
| | | this.setState({data: res.data.map((item, index) => { |
|---|
| | | item.key = index |
|---|
| | | item.$$uuid = item[config.setting.primaryKey] || '' |
|---|
| | | item.$Index = index + 1 + '' |
|---|
| | | |
|---|
| | | return item |
|---|
| | | })}) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (config.setting.onload === 'true') { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.loadData('init') |
|---|
| | | }, config.setting.delay || 0) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | _data = _data.map((item, index) => { |
|---|
| | | item.key = index |
|---|
| | | item.$$uuid = item[config.setting.primaryKey] || '' |
|---|
| | | item.$$BID = BID || '' |
|---|
| | | item.$$BData = BData || '' |
|---|
| | | item.$Index = index + 1 + '' |
|---|
| | | return item |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.setState({sync: false, data: _data}) |
|---|
| | | } else if (config.setting.syncRefresh && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { |
|---|
| | | this.setState({}, () => { |
|---|
| | | } else if (config.setting.onload === 'true') { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.loadData() |
|---|
| | | }) |
|---|
| | | }, config.setting.delay || 0) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | transferSyncData = (syncId) => { |
|---|
| | | const { config } = this.state |
|---|
| | | |
|---|
| | | if (config.$syncId !== syncId) return |
|---|
| | | |
|---|
| | | const { BID, BData } = this.state |
|---|
| | | |
|---|
| | | let _data = window.GLOB.SyncData.get(config.dataName) || [] |
|---|
| | | |
|---|
| | | if (config.$cache) { |
|---|
| | | Api.writeCacheConfig(config.uuid, fromJS(_data).toJS(), BID) |
|---|
| | | } |
|---|
| | | |
|---|
| | | _data = _data.map((item, index) => { |
|---|
| | | item.key = index |
|---|
| | | item.$$uuid = item[config.setting.primaryKey] || '' |
|---|
| | | item.$$BID = BID || '' |
|---|
| | | item.$$BData = BData || '' |
|---|
| | | item.$Index = index + 1 + '' |
|---|
| | | return item |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.loaded = true |
|---|
| | | |
|---|
| | | this.setState({data: _data}) |
|---|
| | | |
|---|
| | | window.GLOB.SyncData.delete(config.dataName) |
|---|
| | | |
|---|
| | | MKEmitter.removeListener('transferSyncData', this.transferSyncData) |
|---|
| | | } |
|---|
| | | |
|---|
| | | searchRefresh = (searchId) => { |
|---|
| | | const { config } = this.state |
|---|
| | | |
|---|
| | | if (config.$searchId !== searchId) return |
|---|
| | | |
|---|
| | | this.setState({}, () => { |
|---|
| | | this.loadData() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | |
|---|
| | | |
|---|
| | | 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() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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 |
|---|
| | | } |
|---|
| | | return item |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.setState({ |
|---|
| | | data: _data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | resetParentParam = (MenuID, id, data) => { |
|---|
| | |
|---|
| | | this.loadData() |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | /** |
|---|
| | | * @description 导出Excel时，获取页面搜索排序等参数 |
|---|
| | | */ |
|---|
| | | queryModuleParam = (menuId, btnId) => { |
|---|
| | | const { mainSearch } = this.props |
|---|
| | | const { arr_field, config } = this.state |
|---|
| | | queryModuleParam = (menuId, callback) => { |
|---|
| | | const { config } = this.state |
|---|
| | | |
|---|
| | | if (config.uuid !== menuId) return |
|---|
| | | |
|---|
| | | let searches = [] |
|---|
| | | if (config.setting.useMSearch && mainSearch && mainSearch.length > 0) { // 主表搜索条件 |
|---|
| | | let keys = searches.map(item => item.key.toLowerCase()) |
|---|
| | | mainSearch.forEach(item => { |
|---|
| | | if (!keys.includes(item.key.toLowerCase())) { |
|---|
| | | searches.push(item) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | if (config.setting.useMSearch) { // 主表搜索条件 |
|---|
| | | searches = window.GLOB.SearchBox.get(config.$searchId) || [] |
|---|
| | | } |
|---|
| | | |
|---|
| | | MKEmitter.emit('returnModuleParam', config.uuid, btnId, { |
|---|
| | | arr_field: arr_field, |
|---|
| | | callback({ |
|---|
| | | orderBy: config.setting.order || '', |
|---|
| | | search: searches, |
|---|
| | | menuName: config.name |
|---|
| | | search: searches |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | async loadData () { |
|---|
| | | const { mainSearch, menuType } = this.props |
|---|
| | | const { config, arr_field, BID, BData } = this.state |
|---|
| | | |
|---|
| | | async loadData (type) { |
|---|
| | | const { config, BID, BData } = this.state |
|---|
| | | |
|---|
| | | if (config.setting.supModule && !BID) { // BID 不存在时，不做查询 |
|---|
| | | this.setState({ |
|---|
| | | data: [], |
|---|
| | | }) |
|---|
| | | this.loaded = true |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 内部函数为z_mk_express，表示查询快递信息 |
|---|
| | | if (config.setting.interType === 'inner' && config.setting.innerFunc === 'z_mk_express') { |
|---|
| | | this.getExpress() |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | let searches = [] |
|---|
| | | if (config.setting.useMSearch && mainSearch && mainSearch.length > 0) { // 主表搜索条件 |
|---|
| | | let keys = searches.map(item => item.key) |
|---|
| | | mainSearch.forEach(item => { |
|---|
| | | if (!keys.includes(item.key)) { |
|---|
| | | searches.push(item) |
|---|
| | | if (config.setting.useMSearch) { // 主表搜索条件 |
|---|
| | | searches = window.GLOB.SearchBox.get(config.$searchId) || [] |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (config.$s_req && searches.filter(item => item.required && item.value === '').length > 0) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (type !== 'timer') { |
|---|
| | | this.setState({ |
|---|
| | | loading: true |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | let _orderBy = config.setting.order || '' |
|---|
| | | let param = UtilsDM.getQueryDataParams(config.setting, searches, _orderBy, 1, config.setting.pageSize, BID) |
|---|
| | | |
|---|
| | | let result = await Api.genericInterface(param) |
|---|
| | | if (result.status) { |
|---|
| | | this.loaded = true |
|---|
| | | if (config.$cache && type === 'init') { |
|---|
| | | Api.writeCacheConfig(config.uuid, result.data || [], BID) |
|---|
| | | } |
|---|
| | | |
|---|
| | | let data = result.data.map((item, index) => { |
|---|
| | | item.key = index |
|---|
| | | item.$$uuid = item[config.setting.primaryKey] || '' |
|---|
| | | item.$$BID = BID || '' |
|---|
| | | item.$$BData = BData || '' |
|---|
| | | item.$Index = index + 1 + '' |
|---|
| | | return item |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.setState({ |
|---|
| | | data: data, |
|---|
| | | loading: false |
|---|
| | | }) |
|---|
| | | |
|---|
| | | if (config.timer && config.clearField && result.data && result.data[0]) { |
|---|
| | | let vals = (config.clearValue || '').split(',') |
|---|
| | | if (vals.includes(result.data[0][config.clearField])) { |
|---|
| | | this.timer && this.timer.stop() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | UtilsDM.querySuccess(result) |
|---|
| | | } else { |
|---|
| | | this.setState({ |
|---|
| | | loading: false |
|---|
| | | }) |
|---|
| | | this.timer && this.timer.stop() |
|---|
| | | |
|---|
| | | UtilsDM.queryFail(result) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | getExpress = () => { |
|---|
| | | const { BData } = this.state |
|---|
| | | |
|---|
| | | let code = '' |
|---|
| | | let order = '' |
|---|
| | | if (BData) { |
|---|
| | | Object.keys(BData).forEach(key => { |
|---|
| | | if (key.toLowerCase() === 'expresscode') { |
|---|
| | | code = BData[key] |
|---|
| | | } else if (key.toLowerCase() === 'expressno') { |
|---|
| | | order = BData[key] |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | let requireFields = searches.filter(item => item.required && item.value === '') |
|---|
| | | if (requireFields.length > 0) { |
|---|
| | | if (!code || !order) { |
|---|
| | | notification.warning({ |
|---|
| | | top: 92, |
|---|
| | | message: '未获取到快递' + (!code ? '公司编码。' : '单号。'), |
|---|
| | | duration: 5 |
|---|
| | | }) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.setState({ |
|---|
| | | loading: true |
|---|
| | | }) |
|---|
| | | Api.expressRequest(`express/${code}/${order}`).then(res => { |
|---|
| | | if (!res || typeof(res) !== 'string') { |
|---|
| | | notification.error({ |
|---|
| | | top: 92, |
|---|
| | | message: '未获取到快递信息', |
|---|
| | | duration: 10 |
|---|
| | | }) |
|---|
| | | } else if (/查询无结果/.test(res)) { |
|---|
| | | this.setState({description: res, data: [], loading: false}) |
|---|
| | | } else { |
|---|
| | | let data = res.split(/\n/).filter(Boolean) |
|---|
| | | |
|---|
| | | let _orderBy = config.setting.order || '' |
|---|
| | | let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, 1, config.setting.pageSize, BID, menuType) |
|---|
| | | data = data.map((item, i) => { |
|---|
| | | return { |
|---|
| | | $Index: i, |
|---|
| | | date: item.substr(0, 19), |
|---|
| | | content: item.substr(20) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let result = await Api.genericInterface(param) |
|---|
| | | if (result.status) { |
|---|
| | | this.setState({ |
|---|
| | | data: result.data.map((item, index) => { |
|---|
| | | item.key = index |
|---|
| | | item.$$uuid = item[config.setting.primaryKey] || '' |
|---|
| | | item.$$BID = BID || '' |
|---|
| | | item.$$BData = BData || '' |
|---|
| | | item.$Index = index + 1 + '' |
|---|
| | | return item |
|---|
| | | }), |
|---|
| | | loading: false |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | this.setState({ |
|---|
| | | loading: false |
|---|
| | | }) |
|---|
| | | notification.error({ |
|---|
| | | top: 92, |
|---|
| | | message: result.message, |
|---|
| | | duration: 10 |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | this.setState({ |
|---|
| | | data: data, |
|---|
| | | loading: false |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | getnodes = (data) => { |
|---|
| | |
|---|
| | | </Timeline.Item>) |
|---|
| | | } |
|---|
| | | |
|---|
| | | render() { |
|---|
| | | const { config, loading, data } = this.state |
|---|
| | | getMknodes = (data) => { |
|---|
| | | const { config, card } = this.state |
|---|
| | | |
|---|
| | | let color = config.wrap.color |
|---|
| | | let dot = '' |
|---|
| | | let linebg = {} |
|---|
| | | if (config.wrap.node && card.nodes && card.nodes.length > 0) { |
|---|
| | | let sign = data[config.wrap.node] |
|---|
| | | card.nodes.some(item => { |
|---|
| | | if (sign === item.sign) { |
|---|
| | | color = item.color |
|---|
| | | |
|---|
| | | if (item.icon) { |
|---|
| | | dot = <MkIcon type={item.icon}/> |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (item.linecolor) { |
|---|
| | | linebg = {borderColor: item.linecolor} |
|---|
| | | } |
|---|
| | | return true |
|---|
| | | } |
|---|
| | | return false |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (config.wrap.mode === 'down') { |
|---|
| | | return (<div className="mk-time-line-item" key={data.$Index}> |
|---|
| | | <div className="mk-timeline-item-content"> |
|---|
| | | <div className="card-item-box" style={card.style}> |
|---|
| | | <CardCellComponent data={data} cards={config} cardCell={card} elements={card.elements}/> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div className="mk-timeline-item-head"> |
|---|
| | | <div className="mk-timeline-item-tail" style={linebg}></div> |
|---|
| | | <div className={'mk-dot ' + (dot ? 'mk-dot-icon' : '')} style={{background: color, color: color}}> |
|---|
| | | {dot} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div>) |
|---|
| | | } else { |
|---|
| | | return (<div className="mk-time-line-item" key={data.$Index}> |
|---|
| | | <div className="mk-timeline-item-head"> |
|---|
| | | <div className="mk-timeline-item-tail" style={linebg}></div> |
|---|
| | | <div className={'mk-dot ' + (dot ? 'mk-dot-icon' : '')} style={{background: color, color: color}}> |
|---|
| | | {dot} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div className="mk-timeline-item-content"> |
|---|
| | | <div className="card-item-box" style={card.style}> |
|---|
| | | <CardCellComponent data={data} cards={config} cardCell={card} elements={card.elements}/> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div>) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | render() { |
|---|
| | | const { config, loading, data, description } = this.state |
|---|
| | | |
|---|
| | | if (config.wrap.empty === 'hidden' && (!data || data.length === 0)) return null |
|---|
| | | |
|---|
| | | return ( |
|---|
| | | <div className="normal-timeline-box" id={'anchor' + config.uuid} style={{...config.style}}> |
|---|
| | | <div className={'normal-timeline-box ' + (config.wrap.btnControl || '')} id={'anchor' + config.uuid} style={{...config.style}}> |
|---|
| | | {loading ? |
|---|
| | | <div className="loading-mask"> |
|---|
| | | {data ? <div className="ant-spin-blur"></div> : null} |
|---|
| | |
|---|
| | | </div> : null |
|---|
| | | } |
|---|
| | | <NormalHeader config={config} /> |
|---|
| | | {data && data.length > 0 ? <Timeline mode={config.wrap.mode} reverse={config.wrap.reverse === 'true'} className={'card-row-list ' + (config.wrap.line || '')} style={{height: config.wrap.contentHeight}}> |
|---|
| | | {config.wrap.direction !== 'horizontal' && data && data.length > 0 ? <Timeline mode={config.wrap.mode} className={'card-row-list ' + (config.wrap.line || '')} style={{height: config.wrap.contentHeight}}> |
|---|
| | | {data.map(item => this.getnodes(item))} |
|---|
| | | </Timeline> : null} |
|---|
| | | {config.wrap.direction === 'horizontal' && data && data.length > 0 ? <div className={`mk-time-line-wrap card-row-list ${config.wrap.line || ''} ${config.wrap.iconSize || ''} ${config.wrap.dotSign || ''}`} style={{height: config.wrap.contentHeight}}> |
|---|
| | | {data.map(item => this.getMknodes(item))} |
|---|
| | | </div> : null} |
|---|
| | | {data && data.length === 0 ? <div className="card-row-list" style={{height: config.wrap.contentHeight}}> |
|---|
| | | <Empty description={false}/> |
|---|
| | | <Empty description={description}/> |
|---|
| | | </div> : null} |
|---|
| | | </div> |
|---|
| | | ) |
|---|
