From 31ec63f0419895876cbaba99637a884a32d33d0d Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期三, 01 九月 2021 10:31:45 +0800 Subject: [PATCH] 2021-09-01 --- src/tabviews/custom/components/card/data-card/index.jsx | 615 +++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 561 insertions(+), 54 deletions(-) diff --git a/src/tabviews/custom/components/card/data-card/index.jsx b/src/tabviews/custom/components/card/data-card/index.jsx index 9c52d9c..5ec9396 100644 --- a/src/tabviews/custom/components/card/data-card/index.jsx +++ b/src/tabviews/custom/components/card/data-card/index.jsx @@ -1,17 +1,22 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Spin, Empty, notification, Col } from 'antd' +import { connect } from 'react-redux' +import { Spin, Empty, notification, message, Row, Col, Pagination } from 'antd' import Api from '@/api' +import Utils from '@/utils/utils.js' import UtilsDM from '@/utils/utils-datamanage.js' import preImg from '@/assets/img/prev.png' 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')) +const MainAction = asyncComponent(() => import('@/tabviews/zshare/actionList')) +const NormalHeader = asyncComponent(() => import('@/tabviews/custom/components/share/normalheader')) class DataCard extends Component { static propTpyes = { @@ -20,65 +25,320 @@ config: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅 mainSearch: PropTypes.any, // 澶栧眰鎼滅储鏉′欢 menuType: PropTypes.any, // 鑿滃崟绫诲瀷 - dataManager: PropTypes.any, // 鏁版嵁鏉冮檺 } state = { + BID: '', // 涓婄骇ID + BData: '', // 涓婄骇琛屾暟鎹� config: null, // 鍥捐〃閰嶇疆淇℃伅 - pageIndex: 1, + search: null, // 鎼滅储鏉′欢 + pageIndex: 1, // 椤电爜 activeKey: '', // 閫変腑鍗� + selectKeys: [], // 澶氶�夋椂閫変腑鍗$墖 + selectedData: [], // 閫変腑鏁版嵁锛岀敤浜庡伐鍏锋爮鎸夐挳 loading: false, // 鏁版嵁鍔犺浇鐘舵�� + sync: false, // 鏄惁缁熶竴璇锋眰鏁版嵁 card: null, // 鍗$墖璁剧疆 data: null, // 鏁版嵁 - total: null + total: null, + precards: [], + nextcards: [], } UNSAFE_componentWillMount () { + const { data, initdata, BID } = this.props let _config = fromJS(this.props.config).toJS() + let _card = null + let precards = [] + 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' + } + item.setting.click = '' + } + + if (item.$cardType !== 'extendCard') { + _card = item + } else if (!_card) { + precards.push(item) + } else { + nextcards.push(item) + } + }) + + _config.subcards = null + + let _cols = new Map() + + let _data = null + let _sync = _config.setting.sync === 'true' + + 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.wrap.cardFloat && _config.wrap.cardFloat !== 'left') { + let _width = 0 + precards.forEach(card => { + _width += card.setting.width + }) + nextcards.forEach(card => { + _width += card.setting.width + }) + + _config.$offset = _width + } else { + _config.wrap.cardFloat = null + } + + if (_data) { + _data = _data.map((item, index) => { + item.key = index + item.$$uuid = item[_config.setting.primaryKey] || '' + item.$$BID = BID || '' + item.$Index = index + 1 + '' + return item + }) + } + + _config.columns.forEach(item => { + _cols.set(item.field, item) + }) + + _card.elements = _card.elements.map(item => { + if (item.field && _cols.has(item.field)) { + item.col = _cols.get(item.field) + } + return item + }) + _card.backElements = _card.backElements.map(item => { + if (item.field && _cols.has(item.field)) { + item.col = _cols.get(item.field) + } + return item + }) + this.setState({ + precards, + nextcards, + sync: _sync, + data: _data, + BID: BID || '', config: _config, - card: _config.subcards[0], + card: _card, + search: Utils.initMainSearch(_config.search), arr_field: _config.columns.map(col => col.field).join(','), }, () => { - this.loadData() + if (_config.setting.sync !== 'true' && _config.setting.onload === 'true') { + this.loadData() + } }) } componentDidMount () { - MKEmitter.addListener('syncRefreshComponentId', this.reload) + 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) } shouldComponentUpdate (nextProps, nextState) { return !is(fromJS(this.state), fromJS(nextState)) } + UNSAFE_componentWillReceiveProps (nextProps) { + const { sync, 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] || [] + } + + _data = _data.map((item, index) => { + item.key = index + item.$$uuid = item[config.setting.primaryKey] || '' + item.$$BID = BID || '' + 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({pageIndex: 1}, () => { + this.loadData() + }) + } + } + componentWillUnmount () { this.setState = () => { return } - MKEmitter.removeListener('syncRefreshComponentId', this.reload) + 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) } - reload = (syncId) => { + /** + * @description 鎸夐挳鎵ц瀹屾垚鍚庨〉闈㈠埛鏂� + * @param {*} menuId // 鑿滃崟Id + * @param {*} position // 鍒锋柊浣嶇疆 + * @param {*} btn // 鎵ц鐨勬寜閽� + */ + refreshByButtonResult = (menuId, position, btn) => { + const { config, BID } = this.state + + if (config.uuid !== menuId) return + + if (!btn || btn.resetPageIndex !== 'false') { + this.setState({ + pageIndex: 1 + }, () => { + this.loadData() + }) + } else { + this.loadData() + } + + if (btn.syncComponentId && btn.syncComponentId !== config.uuid && btn.syncComponentId !== config.setting.supModule) { + MKEmitter.emit('reloadData', btn.syncComponentId) // 鍚岀骇鏍囩鍒锋柊 + } + + if (position === 'mainline' && config.setting.supModule) { // 涓昏〃琛屽埛鏂� + MKEmitter.emit('reloadData', config.setting.supModule, (BID || 'empty')) + } else if (position === 'popclose') { // 鏍囩鍏抽棴鍒锋柊 + config.setting.supModule && MKEmitter.emit('reloadData', config.setting.supModule, (BID || 'empty')) + btn.$tabId && MKEmitter.emit('refreshPopButton', btn.$tabId) + } + } + + 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.setState({ + activeKey: '', + selectKeys: [], + selectedData: [] + }) + + MKEmitter.emit('resetSelectLine', config.uuid, '', '') + MKEmitter.emit('syncBalconyData', config.uuid, [], false) + } + } + + reloadData = (menuId, id) => { const { config } = this.state - if (syncId && syncId !== config.uuid) return + if (config.uuid !== menuId) return + if (id === 'empty') return - this.setState({ - pageIndex: 1 - }, () => { + if (!id) { this.loadData() + } else { + this.loadLinedata(id) + } + } + + resetParentParam = (MenuID, id, data) => { + const { config } = this.state + + if (!config.setting.supModule || config.setting.supModule !== MenuID) return + if (id !== this.state.BID) { + this.setState({ BID: id, BData: data, pageIndex: 1 }, () => { + this.loadData() + }) + } + } + + /** + * @description 瀵煎嚭Excel鏃讹紝鑾峰彇椤甸潰鎼滅储鎺掑簭绛夊弬鏁� + */ + queryModuleParam = (menuId, btnId) => { + const { mainSearch } = this.props + const { arr_field, config, search } = 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()) + mainSearch.forEach(item => { + if (!keys.includes(item.key.toLowerCase())) { + searches.push(item) + } + }) + } + + MKEmitter.emit('returnModuleParam', config.uuid, btnId, { + arr_field: arr_field, + orderBy: config.setting.order || '', + search: searches, + menuName: config.name }) } async loadData () { - const { mainSearch, BID, menuType, dataManager } = this.props - const { config, arr_field, pageIndex } = this.state - - let searches = [] - if (mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 - searches = [...mainSearch, ...searches] + const { mainSearch, menuType } = this.props + const { config, arr_field, pageIndex, search, BID, BData } = this.state + + if (config.setting.supModule && !BID) { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇� + this.setState({ + activeKey: '', + selectKeys: [], + selectedData: [], + pageIndex: 1, + data: [], + total: 0, + loading: false + }) + MKEmitter.emit('resetSelectLine', config.uuid, '', '') + if (config.setting.$hasSyncModule) { + MKEmitter.emit('syncBalconyData', config.uuid, [], false) + } + return + } + + let searches = fromJS(search).toJS() + 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) + } + }) + } + + let requireFields = searches.filter(item => item.required && item.value === '') + if (requireFields.length > 0) { + return } this.setState({ @@ -86,16 +346,34 @@ }) let _orderBy = config.setting.order || '' - let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, pageIndex, config.setting.pageSize, BID, menuType, dataManager) + let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, pageIndex, config.setting.pageSize, BID, menuType) let result = await Api.genericInterface(param) if (result.status) { + let start = 1 + if (config.setting.laypage) { + start = config.setting.pageSize * (pageIndex - 1) + 1 + } + this.setState({ activeKey: '', - data: result.data, + selectKeys: [], + selectedData: [], + data: result.data.map((item, index) => { + item.key = index + item.$$uuid = item[config.setting.primaryKey] || '' + item.$$BID = BID || '' + item.$$BData = BData || '' + item.$Index = index + start + '' + return item + }), total: result.total, loading: false }) + MKEmitter.emit('resetSelectLine', config.uuid, '', '') + if (config.setting.$hasSyncModule) { + MKEmitter.emit('syncBalconyData', config.uuid, [], false) + } } else { this.setState({ loading: false @@ -108,17 +386,67 @@ } } - updateStatus = (type, position, btn) => { - const { config } = this.state + /** + * @description 鑾峰彇鍗曡鏁版嵁 + */ + async loadLinedata (id) { + const { mainSearch, menuType } = this.props + const { config, arr_field, pageIndex, search, BID, BData } = this.state - if (type === 'refresh' && position === 'grid') { - this.loadData() - if (btn && btn.syncComponent && btn.syncComponent[0]) { - let syncId = btn.syncComponent[btn.syncComponent.length - 1] - if (config.uuid !== syncId) { - MKEmitter.emit('syncRefreshComponentId', syncId) + let searches = fromJS(search).toJS() + 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) + } + }) + } + + this.setState({ + loading: true + }) + + let _orderBy = config.setting.order || '' + let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, pageIndex, config.setting.pageSize, BID, menuType, id) + + let result = await Api.genericInterface(param) + if (result.status) { + let data = fromJS(this.state.data).toJS() + if (result.data && result.data[0]) { + let _data = result.data[0] + + try { + data = data.map(item => { + if (item[config.setting.primaryKey] === _data[config.setting.primaryKey]) { + _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 (e) { + console.warn('鏁版嵁鏌ヨ閿欒') } } + + this.setState({ + data: data, + loading: false + }) + } else { + this.setState({ + loading: false + }) + notification.error({ + top: 92, + message: result.message, + duration: 10 + }) } } @@ -146,48 +474,227 @@ this.loadData() }) } - - changeCard = (index, item) => { - const { config } = this.state - if (config.wrap.switch !== 'true') return - + changePageIndex = (page) => { this.setState({ - activeKey: index + pageIndex: page + }, () => { + this.loadData() }) } - render() { - const { BID } = this.props - const { config, loading, data, pageIndex, total, card, activeKey } = this.state + refreshSearch = (list) => { + this.setState({ + search: list, + pageIndex: 1 + }, () => { + this.loadData() + }) + } + + changeCard = (index, item) => { + const { config, selectKeys, selectedData, activeKey, data } = this.state - let _total = config.setting.pageSize * pageIndex - let pageable = config.pageable && config.setting.laypage - if ((pageIndex === 1 && total <= _total) || !data) { - pageable = false + this.openView(item) + + if (!config.wrap.cardType) return + + let _selectKeys = [] + let _selectedData = [] + let _activeKey = '' + let _item = item + if (config.wrap.cardType === 'checkbox') { + if (activeKey === index) { + _selectKeys = selectKeys.filter(key => key !== index) + _selectedData = selectedData.filter(cell => cell.key !== index) + _activeKey = _selectKeys.slice(-1)[0] + _item = selectedData.slice(-1)[0] || '' + } else if (selectKeys.indexOf(index) > -1) { + _selectKeys = selectKeys.filter(key => key !== index) + _selectedData = selectedData.filter(cell => cell.key !== index) + _activeKey = activeKey + _item = selectedData.filter(cell => cell.key === activeKey)[0] || '' + } else { + _selectKeys = [...selectKeys, index] + _selectedData = [...selectedData, item] + _activeKey = index + } + } else { + if (activeKey === index) return + + _selectedData = [item] + _activeKey = index + } + + this.setState({ + activeKey: _activeKey, + selectKeys: _selectKeys, + selectedData: _selectedData + }) + + MKEmitter.emit('resetSelectLine', config.uuid, (_item ? _item.$$uuid : ''), _item) + if (config.setting.$hasSyncModule) { + MKEmitter.emit('syncBalconyData', config.uuid, _selectedData, data.length === _selectedData.length) + } + } + + 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', 'menu_board'].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 (e) { + console.warn('鑿滃崟鍙傛暟瑙f瀽閿欒锛�') + } + } 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, precards, nextcards, loading, data, pageIndex, total, card, activeKey, BID, BData, selectedData, selectKeys } = this.state + + let _total = 0 + let switchable = false + if (config.wrap.pagestyle === 'switch' && config.pageable && config.setting.laypage && total > config.setting.pageSize && data) { + _total = config.setting.pageSize * pageIndex + switchable = true + } + let offset = 0 + + if (config.wrap.cardFloat) { + let length = data ? data.length : 0 + if (card.setting.width * length + config.$offset < 24) { + offset = 24 - card.setting.width * length - config.$offset + if (config.wrap.cardFloat === 'center') { + offset = Math.floor(offset / 2) + } + } } return ( <div className="custom-data-card-box" style={config.style}> {loading ? <div className="loading-mask"> - <div className="ant-spin-blur"></div> + {data ? <div className="ant-spin-blur"></div> : null} <Spin /> </div> : null } - {pageable ? <div className={'prev-page ' + (pageIndex === 1 ? 'disabled' : '')} onClick={this.prevPage}><div><div><img src={preImg} alt=""/></div></div></div> : null} - {data && data.length > 0 ? <div className="card-row-list"> - {data.map((item, index) => ( - <Col className={activeKey === index ? 'active' : ''} key={index} span={card.setting.width || 6} onClick={() => {this.changeCard(index, item)}}> - <CardItem BID={BID} card={card} cards={config} data={item} updateStatus={this.updateStatus}/> - </Col> - ))} - </div> : null} - {pageable ? <div className={'prev-page ' + (total <= _total ? 'disabled' : '')} onClick={this.nextPage}><div><div><img src={nextImg} alt=""/></div></div></div> : null} - {data && data.length === 0 ? <Empty description={false}/> : null} + <NormalHeader config={config} BID={BID} menuType={this.props.menuType} refresh={this.refreshSearch} /> + {config.action && config.action.length > 0 ? + <MainAction + BID={BID} + BData={BData} + setting={config.setting} + actions={config.action} + columns={config.columns} + selectedData={selectedData} + /> : null + } + <div className={`data-zoom ${config.wrap.cardType || ''} ${config.wrap.scale || ''}`}> + {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"> + {offset ? <Col span={offset} style={{height: '10px'}}> </Col> : null} + {precards.map((item, index) => ( + <Col key={'pre' + index} className={'extend-card ' + item.setting.$click} span={item.setting.width || 6}> + <CardItem card={item} cards={config} data={{$$BID: BID, $$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)}}> + <CardItem card={card} cards={config} data={item}/> + </Col> + ))} + {nextcards.map((item, index) => ( + <Col key={'next' + index} className={'extend-card ' + item.setting.$click} span={item.setting.width || 6}> + <CardItem card={item} cards={config} data={{$$BID: BID, $$type: 'extendCard'}}/> + </Col> + ))} + </Row> + {switchable ? <div className={'prev-page ' + (total <= _total ? 'disabled' : '')} onClick={this.nextPage}><div><div><img src={nextImg} alt=""/></div></div></div> : null} + {precards.length === 0 && nextcards.length === 0 && (!data || data.length === 0) ? <Empty description={false}/> : null} + </div> + {config.wrap.pagestyle !== 'switch' && config.setting.laypage && data ? <Pagination size="small" total={total} showTotal={t => `鍏� ${t} 鏉} pageSize={config.setting.pageSize} onChange={this.changePageIndex} current={pageIndex}/> : null} </div> ) } } -export default DataCard \ No newline at end of file +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) \ No newline at end of file -- Gitblit v1.8.0