| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { connect } from 'react-redux' |
| | | import { Spin, Empty, notification, Row, Col, Pagination } from 'antd' |
| | | import { Spin, Empty, notification, message, Row, Col, Pagination } from 'antd' |
| | | |
| | | import Api from '@/api' |
| | | import Utils from '@/utils/utils.js' |
| | |
| | | import nextImg from '@/assets/img/next.png' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import { modifyTabview } from '@/store/action' |
| | | import './index.scss' |
| | | |
| | | const CardItem = asyncComponent(() => import('../cardItem')) |
| | |
| | | total: null, |
| | | precards: [], |
| | | nextcards: [], |
| | | selected: 'false' |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { data, initdata, BID } = this.props |
| | | const { data, initdata, BID, BData } = this.props |
| | | let _config = fromJS(this.props.config).toJS() |
| | | |
| | | let _card = null |
| | |
| | | let nextcards = [] |
| | | |
| | | _config.subcards.forEach(item => { |
| | | item.setting.$click = '' |
| | | if (item.setting.click === 'button') { |
| | | if (item.elements.filter(ele => ele.eleType === 'button').length < 2) { |
| | | item.setting.$click = ' trigger-button' |
| | | if (item.setting.click === 'button' && !item.setting.linkbtn) { |
| | | item.elements.forEach(ele => { |
| | | if (ele.eleType === 'button') { |
| | | item.setting.linkbtn = ele.uuid |
| | | } |
| | | }) |
| | | if (!item.setting.linkbtn) { |
| | | item.setting.click = '' |
| | | } |
| | | item.setting.click = '' |
| | | } |
| | | |
| | | if (item.$cardType !== 'extendCard') { |
| | |
| | | _config.wrap.cardFloat = null |
| | | } |
| | | |
| | | let selected = 'false' |
| | | if (_config.wrap.selected === 'always' || _config.wrap.selected === 'init') { |
| | | selected = _config.wrap.selected |
| | | } |
| | | |
| | | 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 (selected !== 'false') { |
| | | setTimeout(() => { |
| | | this.checkTopLine() |
| | | }, 200) |
| | | if (selected === 'init') { |
| | | selected = 'false' |
| | | } |
| | | } |
| | | } |
| | | |
| | | _config.columns.forEach(item => { |
| | |
| | | }) |
| | | |
| | | this.setState({ |
| | | selected, |
| | | precards, |
| | | nextcards, |
| | | sync: _sync, |
| | | data: _data, |
| | | BID: BID || '', |
| | | BData: BData || '', |
| | | config: _config, |
| | | card: _card, |
| | | search: Utils.initMainSearch(_config.search), |
| | |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('reloadData', this.reloadData) |
| | | MKEmitter.addListener('mkCheckAll', this.mkCheckAll) |
| | | MKEmitter.addListener('resetSelectLine', this.resetParentParam) |
| | | MKEmitter.addListener('queryModuleParam', this.queryModuleParam) |
| | | MKEmitter.addListener('refreshByButtonResult', this.refreshByButtonResult) |
| | |
| | | } |
| | | |
| | | UNSAFE_componentWillReceiveProps (nextProps) { |
| | | const { sync, config, BID } = this.state |
| | | const { sync, config, BID, BData, selected } = 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] || [] |
| | | } |
| | | _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 |
| | | }) |
| | | |
| | | _data = _data.map((item, index) => { |
| | | item.key = index |
| | | item.$$uuid = item[config.setting.primaryKey] || '' |
| | | item.$$BID = BID || '' |
| | | item.$Index = index + 1 + '' |
| | | return item |
| | | }) |
| | | if (selected !== 'false') { |
| | | setTimeout(() => { |
| | | this.checkTopLine() |
| | | }, 200) |
| | | if (selected === 'init') { |
| | | this.setState({selected: 'false'}) |
| | | } |
| | | } |
| | | } |
| | | |
| | | this.setState({sync: false, data: _data}) |
| | | } else if (config.setting.syncRefresh && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { |
| | |
| | | return |
| | | } |
| | | MKEmitter.removeListener('reloadData', this.reloadData) |
| | | MKEmitter.removeListener('mkCheckAll', this.mkCheckAll) |
| | | MKEmitter.removeListener('resetSelectLine', this.resetParentParam) |
| | | MKEmitter.removeListener('queryModuleParam', this.queryModuleParam) |
| | | MKEmitter.removeListener('refreshByButtonResult', this.refreshByButtonResult) |
| | |
| | | * @param {*} position // 刷新位置 |
| | | * @param {*} btn // 执行的按钮 |
| | | */ |
| | | refreshByButtonResult = (menuId, position, btn) => { |
| | | refreshByButtonResult = (menuId, position, btn, id, lines) => { |
| | | const { config, BID } = this.state |
| | | |
| | | if (config.uuid !== menuId) return |
| | | |
| | | if (!btn || btn.resetPageIndex !== 'false') { |
| | | if (position === 'line' && lines && lines.length === 1) { |
| | | this.loadLinedata(lines[0].$$uuid) |
| | | } else if (!btn || btn.resetPageIndex !== 'false') { |
| | | this.setState({ |
| | | pageIndex: 1 |
| | | }, () => { |
| | |
| | | } |
| | | } |
| | | |
| | | reloadData = (btn) => { |
| | | if (!btn || btn.resetPageIndex !== 'false') { |
| | | checkTopLine = () => { |
| | | const { config, data } = this.state |
| | | |
| | | if (!data || data.length === 0) { |
| | | this.setState({ |
| | | pageIndex: 1 |
| | | }, () => { |
| | | this.loadmaindata(true, 'true') |
| | | this.getStatFieldsValue() |
| | | activeKey: '', |
| | | selectKeys: [], |
| | | selectedData: [] |
| | | }) |
| | | |
| | | MKEmitter.emit('resetSelectLine', config.uuid, '', '') |
| | | if (config.setting.$hasSyncModule) { |
| | | MKEmitter.emit('syncBalconyData', config.uuid, [], false) |
| | | } |
| | | return |
| | | } |
| | | |
| | | this.setState({ |
| | | activeKey: 0, |
| | | selectKeys: [0], |
| | | selectedData: [data[0]] |
| | | }) |
| | | |
| | | MKEmitter.emit('resetSelectLine', config.uuid, data[0].$$uuid, data[0]) |
| | | if (config.setting.$hasSyncModule) { |
| | | MKEmitter.emit('syncBalconyData', config.uuid, [data[0]], data.length === 1) |
| | | } |
| | | } |
| | | |
| | | mkCheckAll = (menuId, checked) => { |
| | | const { config, data } = this.state |
| | | |
| | | if (config.uuid !== menuId) return |
| | | |
| | | if (checked) { |
| | | this.setState({ |
| | | activeKey: '', |
| | | selectKeys: data.map((item, index) => index), |
| | | selectedData: data |
| | | }) |
| | | |
| | | MKEmitter.emit('resetSelectLine', config.uuid, '', '') |
| | | MKEmitter.emit('syncBalconyData', config.uuid, data, data.length > 0) |
| | | if (data.length === 0) { |
| | | message.warning('未获取到数据!') |
| | | } |
| | | } else { |
| | | this.loadmaindata(true, 'false') |
| | | this.getStatFieldsValue() |
| | | this.setState({ |
| | | activeKey: '', |
| | | selectKeys: [], |
| | | selectedData: [] |
| | | }) |
| | | |
| | | MKEmitter.emit('resetSelectLine', config.uuid, '', '') |
| | | MKEmitter.emit('syncBalconyData', config.uuid, [], false) |
| | | } |
| | | } |
| | | |
| | |
| | | const { config } = this.state |
| | | |
| | | if (!config.setting.supModule || config.setting.supModule !== MenuID) return |
| | | if (id !== this.state.BID) { |
| | | if (id !== this.state.BID || id !== '') { |
| | | this.setState({ BID: id, BData: data, pageIndex: 1 }, () => { |
| | | this.loadData() |
| | | }) |
| | |
| | | |
| | | async loadData () { |
| | | const { mainSearch, menuType } = this.props |
| | | const { config, arr_field, pageIndex, search, BID } = this.state |
| | | const { config, arr_field, pageIndex, search, BID, BData, selected } = this.state |
| | | |
| | | if (config.setting.supModule && !BID) { // BID 不存在时,不做查询 |
| | | this.setState({ |
| | |
| | | total: 0, |
| | | loading: false |
| | | }) |
| | | |
| | | if (selected !== 'false') { |
| | | setTimeout(() => { |
| | | this.checkTopLine() |
| | | }, 200) |
| | | if (selected === 'init') { |
| | | this.setState({selected: 'false'}) |
| | | } |
| | | } else { |
| | | MKEmitter.emit('resetSelectLine', config.uuid, '', '') |
| | | if (config.setting.$hasSyncModule) { |
| | | MKEmitter.emit('syncBalconyData', config.uuid, [], false) |
| | | } |
| | | } |
| | | return |
| | | } |
| | | |
| | |
| | | start = config.setting.pageSize * (pageIndex - 1) + 1 |
| | | } |
| | | |
| | | if (selected !== 'false') { |
| | | setTimeout(() => { |
| | | this.checkTopLine() |
| | | }, 200) |
| | | if (selected === 'init') { |
| | | this.setState({selected: 'false'}) |
| | | } |
| | | } else { |
| | | MKEmitter.emit('resetSelectLine', config.uuid, '', '') |
| | | if (config.setting.$hasSyncModule) { |
| | | MKEmitter.emit('syncBalconyData', config.uuid, [], false) |
| | | } |
| | | } |
| | | |
| | | this.setState({ |
| | | activeKey: '', |
| | | selectKeys: [], |
| | |
| | | item.key = index |
| | | item.$$uuid = item[config.setting.primaryKey] || '' |
| | | item.$$BID = BID || '' |
| | | item.$$BData = BData || '' |
| | | item.$Index = index + start + '' |
| | | return item |
| | | }), |
| | |
| | | */ |
| | | async loadLinedata (id) { |
| | | const { mainSearch, menuType } = this.props |
| | | const { config, arr_field, pageIndex, search, BID } = this.state |
| | | const { config, arr_field, pageIndex, search, BID, BData } = this.state |
| | | |
| | | let searches = fromJS(search).toJS() |
| | | if (config.setting.useMSearch && mainSearch && mainSearch.length > 0) { // 主表搜索条件 |
| | |
| | | let _orderBy = config.setting.order || '' |
| | | let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, pageIndex, config.setting.pageSize, BID, menuType, id) |
| | | |
| | | if (param.func === 'sPC_Get_TableData') { |
| | | param.menuname = config.name || '' |
| | | } |
| | | |
| | | let result = await Api.genericInterface(param) |
| | | if (result.status) { |
| | | let data = fromJS(this.state.data).toJS() |
| | |
| | | _data.key = item.key |
| | | _data.$$uuid = _data[config.setting.primaryKey] || '' |
| | | _data.$$BID = BID || '' |
| | | item.$$BData = BData || '' |
| | | _data.$Index = item.$Index |
| | | return _data |
| | | } else { |
| | | return item |
| | | } |
| | | }) |
| | | } catch { |
| | | } catch (e) { |
| | | console.warn('数据查询错误') |
| | | } |
| | | } |
| | |
| | | } |
| | | |
| | | changeCard = (index, item) => { |
| | | const { config, selectKeys, selectedData, activeKey } = this.state |
| | | |
| | | this.openView(item) |
| | | const { config, selectKeys, selectedData, activeKey, data } = this.state |
| | | |
| | | if (!config.wrap.cardType) return |
| | | |
| | |
| | | }) |
| | | |
| | | MKEmitter.emit('resetSelectLine', config.uuid, (_item ? _item.$$uuid : ''), _item) |
| | | } |
| | | |
| | | 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) |
| | | if (config.setting.$hasSyncModule) { |
| | | MKEmitter.emit('syncBalconyData', config.uuid, _selectedData, data.length === _selectedData.length) |
| | | } |
| | | } |
| | | |
| | |
| | | <Row className="card-row-list"> |
| | | {offset ? <Col span={offset} style={{height: '10px'}}> </Col> : null} |
| | | {precards.map((item, index) => ( |
| | | <Col key={'pre' + index} className={item.setting.$click} span={item.setting.width || 6}> |
| | | <CardItem card={item} cards={config} data={{$$BID: BID, $$type: 'extendCard'}}/> |
| | | <Col key={'pre' + index} className="extend-card" span={item.setting.width || 6}> |
| | | <CardItem card={item} cards={config} data={{$$BID: BID, $$BData: BData, $$type: 'extendCard'}}/> |
| | | </Col> |
| | | ))} |
| | | {data && data.map((item, index) => ( |
| | | <Col className={(activeKey === index ? ' active' : (selectKeys.indexOf(index) > -1 ? ' selected' : '')) + (card.setting.$click ? ' pointer' : '') + card.setting.$click} key={index} span={card.setting.width} onClick={() => {this.changeCard(index, item)}}> |
| | | <Col className={(activeKey === index ? ' active' : (selectKeys.indexOf(index) > -1 ? ' selected' : '')) + (card.setting.click ? ' pointer' : '')} key={index} span={card.setting.width} onClick={() => {this.changeCard(index, item)}}> |
| | | <CardItem card={card} cards={config} data={item}/> |
| | | </Col> |
| | | ))} |
| | | {nextcards.map((item, index) => ( |
| | | <Col key={'next' + index} className={item.setting.$click} span={item.setting.width || 6}> |
| | | <CardItem card={item} cards={config} data={{$$BID: BID, $$type: 'extendCard'}}/> |
| | | <Col key={'next' + index} className="extend-card" span={item.setting.width || 6}> |
| | | <CardItem card={item} cards={config} data={{$$BID: BID, $$BData: BData, $$type: 'extendCard'}}/> |
| | | </Col> |
| | | ))} |
| | | </Row> |
| | |
| | | } |
| | | } |
| | | |
| | | 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 |