| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { connect } from 'react-redux' |
| | | import { Spin, Empty, notification, Carousel } from 'antd' |
| | | |
| | | import Api from '@/api' |
| | | import UtilsDM from '@/utils/utils-datamanage.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import { modifyTabview } from '@/store/action' |
| | | import './index.scss' |
| | | |
| | | const CardItem = asyncComponent(() => import('../cardItem')) |
| | |
| | | sync: false, // 是否统一请求数据 |
| | | card: null, // 卡片设置 |
| | | data: null, // 数据 |
| | | BData: null |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { data, initdata, BID } = this.props |
| | | const { data, initdata, BID, BData } = this.props |
| | | let _config = fromJS(this.props.config).toJS() |
| | | let _card = _config.subcards[0] |
| | | let _cols = new Map() |
| | |
| | | item.key = index |
| | | item.$$uuid = item[_config.setting.primaryKey] || '' |
| | | item.$$BID = BID || '' |
| | | item.$$BData = BData || '' |
| | | item.$Index = index + 1 |
| | | return item |
| | | }) |
| | | } |
| | | |
| | | _config.columns.forEach(item => { |
| | | if (item.type !== 'number') return |
| | | _cols.set(item.field, item) |
| | | }) |
| | | |
| | |
| | | } |
| | | |
| | | _card.elements = _card.elements.map(item => { |
| | | if (item.field && _cols.has(item.field)) { |
| | | item.col = _cols.get(item.field) |
| | | if (item.eleType === 'number' && item.field && _cols.has(item.field) && typeof(item.decimal) !== 'number') { |
| | | item.decimal = _cols.get(item.field).decimal || 0 |
| | | } |
| | | return item |
| | | }) |
| | |
| | | sync: _sync, |
| | | data: _data, |
| | | BID: BID || '', |
| | | BData: BData || '', |
| | | config: _config, |
| | | card: _card, |
| | | arr_field: _config.columns.map(col => col.field).join(','), |
| | | }, () => { |
| | | if (_config.setting.sync !== 'true' && _config.setting.onload === 'true') { |
| | | this.loadData() |
| | | setTimeout(() => { |
| | | this.loadData() |
| | | }, _config.setting.delay || 0) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('resetSelectLine', this.resetParentParam) |
| | | MKEmitter.addListener('getexceloutparam', this.getexceloutparam) |
| | | MKEmitter.addListener('queryModuleParam', this.queryModuleParam) |
| | | MKEmitter.addListener('refreshByButtonResult', this.refreshByButtonResult) |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | UNSAFE_componentWillReceiveProps (nextProps) { |
| | | const { sync, config, BID } = this.state |
| | | const { sync, config, BID, BData } = this.state |
| | | |
| | | if (sync && !is(fromJS(this.props.data), fromJS(nextProps.data))) { |
| | | let _data = [] |
| | |
| | | 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 (nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { |
| | | if (config.setting.syncRefresh === 'true') { |
| | | this.setState({}, () => { |
| | | this.loadData() |
| | | }) |
| | | } |
| | | } else if (config.setting.syncRefresh && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { |
| | | this.setState({}, () => { |
| | | this.loadData() |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | return |
| | | } |
| | | MKEmitter.removeListener('resetSelectLine', this.resetParentParam) |
| | | MKEmitter.removeListener('getexceloutparam', this.getexceloutparam) |
| | | MKEmitter.removeListener('queryModuleParam', this.queryModuleParam) |
| | | MKEmitter.removeListener('refreshByButtonResult', this.refreshByButtonResult) |
| | | } |
| | | |
| | |
| | | const { config } = this.state |
| | | |
| | | if (!config.setting.supModule || config.setting.supModule !== MenuID) return |
| | | if (id !== this.state.BID) { |
| | | this.setState({ BID: id }, () => { |
| | | if (id !== this.state.BID || id !== '') { |
| | | this.setState({ BID: id, BData: data }, () => { |
| | | this.loadData() |
| | | }) |
| | | } |
| | |
| | | /** |
| | | * @description 导出Excel时,获取页面搜索排序等参数 |
| | | */ |
| | | getexceloutparam = (menuId, btnId) => { |
| | | queryModuleParam = (menuId, btnId) => { |
| | | const { mainSearch } = this.props |
| | | const { arr_field, config } = this.state |
| | | |
| | | if (config.uuid !== menuId) return |
| | | |
| | | let searches = mainSearch ? fromJS(mainSearch).toJS() : [] |
| | | let searches = config.setting.useMSearch && mainSearch ? fromJS(mainSearch).toJS() : [] |
| | | |
| | | MKEmitter.emit('execExcelout', config.uuid, btnId, { |
| | | MKEmitter.emit('returnModuleParam', config.uuid, btnId, { |
| | | arr_field: arr_field, |
| | | orderBy: config.setting.order || '', |
| | | search: searches, |
| | |
| | | |
| | | async loadData () { |
| | | const { mainSearch, menuType } = this.props |
| | | const { config, arr_field, BID } = this.state |
| | | const { config, arr_field, BID, BData } = this.state |
| | | |
| | | if (config.setting.supModule && !BID) { // BID 不存在时,不做查询 |
| | | this.setState({ |
| | |
| | | return |
| | | } |
| | | |
| | | let searches = mainSearch ? fromJS(mainSearch).toJS() : [] |
| | | let searches = config.setting.useMSearch && mainSearch ? fromJS(mainSearch).toJS() : [] |
| | | let requireFields = searches.filter(item => item.required && item.value === '') |
| | | if (requireFields.length > 0) { |
| | | return |
| | | } |
| | | |
| | | this.setState({ |
| | | loading: true |
| | |
| | | item.key = index |
| | | item.$$uuid = item[config.setting.primaryKey] || '' |
| | | item.$$BID = BID || '' |
| | | item.$$BData = BData || '' |
| | | item.$Index = index + 1 |
| | | return item |
| | | }), |
| | | loading: false |
| | |
| | | } |
| | | } |
| | | |
| | | openView = (item) => { |
| | | const { card } = this.state |
| | | |
| | | if (card.setting.click === 'menu') { |
| | | let menu = null |
| | | |
| | | if (card.setting.menu && card.setting.menu.length > 0) { |
| | | let menu_id = card.setting.menu.slice(-1)[0] |
| | | menu = this.props.permMenus.filter(m => m.MenuID === menu_id)[0] || '' |
| | | } |
| | | |
| | | if (!menu) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '菜单已删除或没有访问权限!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | let newtab = { |
| | | ...menu, |
| | | selected: true, |
| | | param: {} |
| | | } |
| | | |
| | | if (card.setting.joint === 'true') { |
| | | newtab.param.BID = item.$$uuid |
| | | } |
| | | |
| | | if (['linkage_navigation', 'linkage'].includes(window.GLOB.navBar)) { |
| | | this.props.modifyTabview([newtab]) |
| | | } else { |
| | | let tabs = this.props.tabviews.filter((tab, i) => { |
| | | tab.selected = false |
| | | return tab.MenuID !== newtab.MenuID |
| | | }) |
| | | |
| | | if (this.props.tabviews.length > tabs.length) { |
| | | this.props.modifyTabview(fromJS(tabs).toJS()) |
| | | } |
| | | |
| | | this.setState({}, () => { |
| | | tabs.push(newtab) |
| | | this.props.modifyTabview(tabs) |
| | | }) |
| | | } |
| | | } else if (card.setting.click === 'link') { |
| | | let src = card.setting.linkurl |
| | | |
| | | if (src.indexOf('paramsmain/') > -1) { |
| | | try { |
| | | let _url = src.split('paramsmain/')[0] + 'paramsmain/' |
| | | let _param = JSON.parse(window.decodeURIComponent(window.atob(src.split('paramsmain/')[1]))) |
| | | |
| | | _param.UserID = sessionStorage.getItem('UserID') |
| | | _param.LoginUID = sessionStorage.getItem('LoginUID') |
| | | _param.User_Name = sessionStorage.getItem('User_Name') |
| | | _param.param = { BID: item.$$uuid } |
| | | src = _url + window.btoa(window.encodeURIComponent(JSON.stringify(_param))) |
| | | } catch { |
| | | console.warn('菜单参数解析错误!') |
| | | } |
| | | } else if (card.setting.joint === 'true') { |
| | | let con = '?' |
| | | |
| | | if (/\?/ig.test(src)) { |
| | | con = '&' |
| | | } |
| | | |
| | | src = src + `${con}id=${item.$$uuid}&appkey=${window.GLOB.appkey}&userid=${sessionStorage.getItem('UserID')}&LoginUID=${sessionStorage.getItem('LoginUID') || ''}` |
| | | } |
| | | |
| | | window.open(src) |
| | | } |
| | | } |
| | | |
| | | render() { |
| | | const { config, loading, data, card } = this.state |
| | | |
| | | return ( |
| | | <div className="custom-data-carousel-box" style={{...config.style, minHeight: config.wrap.minHeight}}> |
| | | <div className="custom-data-carousel-box" style={config.style}> |
| | | {loading ? |
| | | <div className="loading-mask"> |
| | | {data ? <div className="ant-spin-blur"></div> : null} |
| | |
| | | autoplaySpeed={config.wrap.speed} |
| | | > |
| | | {data.map((item, index) => ( |
| | | <div key={index} onClick={() => {this.openView(item)}}> |
| | | <div key={index}> |
| | | <CardItem card={card} cards={config} data={item}/> |
| | | </div> |
| | | ))} |
| | |
| | | } |
| | | } |
| | | |
| | | const mapStateToProps = (state) => { |
| | | return { |
| | | permMenus: state.permMenus, |
| | | tabviews: state.tabviews, |
| | | } |
| | | } |
| | | |
| | | const mapDispatchToProps = (dispatch) => { |
| | | return { |
| | | modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews)) |
| | | } |
| | | } |
| | | |
| | | export default connect(mapStateToProps, mapDispatchToProps)(DataCard) |
| | | export default DataCard |