From 71e3da644eca32a5aa40503e903efb0640748093 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 21 七月 2023 17:00:59 +0800 Subject: [PATCH] 2023-07-21 --- src/views/billprint/index.jsx | 476 ++++++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 322 insertions(+), 154 deletions(-) diff --git a/src/views/billprint/index.jsx b/src/views/billprint/index.jsx index d1e8084..a52fd05 100644 --- a/src/views/billprint/index.jsx +++ b/src/views/billprint/index.jsx @@ -21,11 +21,16 @@ const AntvScatter = asyncComponent(() => import('@/tabviews/custom/components/chart/antv-scatter')) const DataCard = asyncComponent(() => import('@/tabviews/custom/components/card/data-card')) const PropCard = asyncComponent(() => import('@/tabviews/custom/components/card/prop-card')) +const DoubleDataCard = asyncComponent(() => import('@/tabviews/custom/components/card/double-data-card')) const TableCard = asyncComponent(() => import('@/tabviews/custom/components/card/table-card')) const NormalTable = asyncComponent(() => import('@/tabviews/custom/components/table/normal-table')) const SandBox = asyncComponent(() => import('@/tabviews/custom/components/code/sand-box')) const TimeLine = asyncComponent(() => import('@/tabviews/custom/components/timeline/normal-timeline')) +const BraftEditor = asyncComponent(() => import('@/tabviews/custom/components/editor/braft-editor')) const Balcony = asyncComponent(() => import('@/tabviews/custom/components/card/balcony')) +const AntvG6 = asyncComponent(() => import('@/tabviews/custom/components/chart/antv-G6')) +const AntvX6 = asyncComponent(() => import('@/tabviews/custom/components/chart/antv-X6')) +const DebugTable = asyncComponent(() => import('@/tabviews/debugtable')) class BillPrint extends Component { state = { @@ -37,6 +42,8 @@ data: '', tempId: '', config: null, + urlParam: null, + visible: false, auto: true } @@ -55,12 +62,14 @@ let param = JSON.parse(window.decodeURIComponent(window.atob(params.param))) sessionStorage.setItem('dataM', param.dataM || '') - sessionStorage.setItem('localDataM', param.dataM || '') this.setState({ BID: param.id || '', - tempId: param.tempId + tempId: param.tempId, + urlParam: param }, () => { - this.getMenuParam() + setTimeout(() => { + this.getMenuParam() + }, 200) }) } catch (e) { notification.warning({ @@ -76,6 +85,53 @@ return !is(fromJS(this.state), fromJS(nextState)) } + componentDidMount() { + const _this = this + + Object.defineProperty(window, 'debug', { + configurable: true, + enumerable: true, + set(value) { + if (value + '' === 'false') { + window.debugger = false + window.GLOB.breakpoint = false + sessionStorage.removeItem('breakpoint') + } else { + window.debugger = true + window.GLOB.breakpoint = value + '' + sessionStorage.setItem('breakpoint', value) + } + _this.debugChange() + } + }) + + document.onkeydown = (event) => { + let e = event || window.event + let keyCode = e.keyCode || e.which || e.charCode + let preKey = '' + + if (e.ctrlKey) { + preKey = 'ctrl' + } else if (e.shiftKey) { + preKey = 'shift' + } else if (e.altKey) { + preKey = 'alt' + } + + if (!preKey || !keyCode) return + + let _shortcut = `${preKey}+${keyCode}` + + if (window.GLOB.breakpoint && _shortcut === 'ctrl+67') { + window.debugger = false + window.GLOB.breakpoint = false + sessionStorage.removeItem('breakpoint') + + _this.debugChange() + } + } + } + /** * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊 */ @@ -83,6 +139,10 @@ this.setState = () => { return } + } + + debugChange = () => { + this.setState({visible: !this.state.visible}) } getTouristMsg = () => { @@ -135,7 +195,7 @@ } getMenuParam = () => { - const { tempId, BID } = this.state + const { tempId, BID, urlParam } = this.state let _param = { func: 'sPC_Get_LongParam', @@ -144,16 +204,14 @@ window.GLOB.dataFormat = false // 鎵撳嵃鍘婚櫎姘村嵃 - if (window.GLOB.mainSystemApi) { // 浠庡崟鐐圭櫥褰曟湇鍔″櫒鍙栨墦鍗伴厤缃俊鎭� - _param.rduri = window.GLOB.mainSystemApi - } - - Api.getLocalConfig(_param).then(result => { + Api.getCacheConfig(_param).then(result => { if (result.status) { let config = '' try { - config = JSON.parse(window.decodeURIComponent(window.atob(result.LongParam))) + config = window.decodeURIComponent(window.atob(result.LongParam)) + config = config.replace(/@mywebsite@\//ig, window.GLOB.baseurl) + config = JSON.parse(config) } catch (e) { console.warn('Parse Failure') config = '' @@ -225,7 +283,6 @@ let userName = sessionStorage.getItem('User_Name') || '' let fullName = sessionStorage.getItem('Full_Name') || '' - let city = sessionStorage.getItem('city') || '' if (sessionStorage.getItem('isEditState') === 'true') { userName = sessionStorage.getItem('CloudUserName') || '' @@ -234,8 +291,7 @@ let regs = [ { reg: /@userName@/ig, value: `'${userName}'` }, - { reg: /@fullName@/ig, value: `'${fullName}'` }, - { reg: /@login_city@/ig, value: `'${city}'` } + { reg: /@fullName@/ig, value: `'${fullName}'` } ] if (window.GLOB.externalDatabase !== null) { @@ -245,27 +301,105 @@ }) } + if (config.urlFields) { + config.urlFields.forEach(field => { + let val = `'${urlParam ? (urlParam[field] || '') : ''}'` + regs.push({ + reg: new RegExp('@' + field + '@', 'ig'), + value: val + }) + }) + } + + window.GLOB.CacheData.set(tempId, {$BID: BID}) + config.components = config.components.map(component => { if (component.action) component.action = [] - if (component.search) component.search = [] + if (component.search) { + component.search = [] + component.$searches = [] + } component.data = [] // 鍒濆鍖栨暟鎹负绌� - if (component.type === 'table' && component.subtype === 'normaltable') { + if (component.subtype === 'tablecard') { // 鍏煎 + component.type = 'card' + } + + component.$pageId = tempId + if (component.setting && component.setting.supModule) { + let pid = component.setting.supModule.pop() + if (pid && pid !== 'empty') { + component.setting.supModule = pid + } else { + component.setting.supModule = '' + } + } + + if (component.type === 'table') { let getColumns = (cols) => { - return cols.map(item => { + return cols.filter(item => { if (item.type === 'colspan') { item.subcols = getColumns(item.subcols) + if (item.subcols.length === 0) { + return false + } + } else if (item.type === 'custom') { + item.elements = item.elements.filter(cell => { + if (cell.eleType === 'button') return false + + cell = this.resetElement(cell) + return cell + }) + if (item.elements.length === 0) { + return false + } } else { item.IsSort = 'false' } - return item + return true }) } component.cols = getColumns(component.cols) + component.statFields = [] + } else if (['card', 'carousel', 'timeline'].includes(component.type)) { + component.subcards && component.subcards.forEach(card => { + if (card.style.boxShadow) { + delete card.style.hShadow + delete card.style.vShadow + delete card.style.shadowBlur + delete card.style.shadowColor + } + + card.elements = card.elements.filter(cell => { + if (cell.eleType === 'button') return false + + cell = this.resetElement(cell) + + return true + }) + + if (!card.backElements || card.backElements.length === 0) return + + card.backElements = card.backElements.filter(cell => { + if (cell.eleType === 'button') return false + + cell = this.resetElement(cell) + + return true + }) + }) + } else if (component.type === 'balcony') { + component.elements = component.elements.filter(cell => { + if (cell.eleType === 'button') return false + + cell = this.resetElement(cell) + + return true + }) } - if (component.wrap.datatype === 'static') { + if (component.wrap && component.wrap.datatype === 'static') { component.format = '' } @@ -298,13 +432,11 @@ } if (sessionStorage.getItem('dataM') === 'true') { // 鏁版嵁鏉冮檺 - component.setting.dataresource = component.setting.dataresource.replace(/\$@/ig, '/*') - component.setting.dataresource = component.setting.dataresource.replace(/@\$/ig, '*/') - _customScript = _customScript.replace(/\$@/ig, '/*') - _customScript = _customScript.replace(/@\$/ig, '*/') + component.setting.dataresource = component.setting.dataresource.replace(/\$@/ig, '/*').replace(/@\$/ig, '*/').replace(/@datam@/ig, '\'Y\'') + _customScript = _customScript.replace(/\$@/ig, '/*').replace(/@\$/ig, '*/').replace(/@datam@/ig, '\'Y\'') } else { - component.setting.dataresource = component.setting.dataresource.replace(/@\$|\$@/ig, '') - _customScript = _customScript.replace(/@\$|\$@/ig, '') + component.setting.dataresource = component.setting.dataresource.replace(/@\$|\$@/ig, '').replace(/@datam@/ig, '\'\'') + _customScript = _customScript.replace(/@\$|\$@/ig, '').replace(/@datam@/ig, '\'\'') } regs.forEach(cell => { @@ -315,14 +447,14 @@ component.setting.customScript = _customScript // 鏁寸悊鍚庤嚜瀹氫箟鑴氭湰 // floor 缁勪欢鐨勫眰绾� - // dataName 绯荤粺鐢熸垚鐨勬暟鎹簮鍚嶇О // pageable 鏄惁鍒嗛〉锛岀粍浠跺睘鎬э紝涓嶅垎椤电殑缁勪欢鎵嶅彲浠ョ粺涓�鏌ヨ - if (component.dataName && component.setting.sync === 'true') { + if (component.setting.sync === 'true') { + component.dataName = 'mk' + component.uuid.slice(-18) let param = this.getDefaultParam(component) _pars.push(param) } else { let arr_field = component.columns.map(col => col.field).join(',') - let param = UtilsDM.getQueryDataParams(component.setting, arr_field, [], component.setting.order || '', 1, 1000, BID, '') + let param = UtilsDM.getQueryDataParams(component.setting, arr_field, [], component.setting.order || '', 1, 1000, BID) param.componentId = component.uuid @@ -340,7 +472,20 @@ params.unshift(_pars) } + if (config.everyPCount && !config.printPage) { // 鍏煎 + config.printPage = 'page' + } + + config.printPage = config.printPage || 'auto' + + if (config.printPage === 'auto') { + config.everyPCount = 99999 + } + + config.limit = config.everyPCount || 15 + this.setState({ + auto: config.printPage === 'auto', config }, () => { if (params.length === 0) { @@ -359,14 +504,36 @@ }) } + resetElement = (cell) => { + cell.style = cell.style || {} + if (['text', 'number', 'formula'].includes(cell.eleType)) { + cell.innerHeight = cell.innerHeight || 'auto' + cell.alignItems = cell.height > 1 ? cell.alignItems : '' + + if (cell.eleType === 'number' && typeof(cell.decimal) === 'number') { + cell.round = Math.pow(10, cell.decimal) + if (cell.format === 'percent') { + cell.decimal = cell.decimal > 2 ? cell.decimal - 2 : 0 + } + } + } + + return cell + } + reload = () => { + const { tempId } = this.state + this.setState({ loadingview: true, pages: null, data: '', config: null }, () => { - this.getMenuParam() + Api.deleteMenuStorage(tempId) + setTimeout(() => { + this.getMenuParam() + }, 50) }) } @@ -401,7 +568,6 @@ foreign_key: '', sql: _dataresource, script: _customScript, - transaction: setting.transaction === 'true' } } @@ -410,14 +576,18 @@ if (!params || params.length === 0) return '' let LText_field = [] - let transaction = false let userName = sessionStorage.getItem('User_Name') || '' let fullName = sessionStorage.getItem('Full_Name') || '' let RoleID = sessionStorage.getItem('role_id') || '' let departmentcode = sessionStorage.getItem('departmentcode') || '' let organization = sessionStorage.getItem('organization') || '' + let mk_user_type = sessionStorage.getItem('mk_user_type') || '' + let nation = sessionStorage.getItem('nation') || '' + let province = sessionStorage.getItem('province') || '' let city = sessionStorage.getItem('city') || '' + let district = sessionStorage.getItem('district') || '' + let address = sessionStorage.getItem('address') || '' if (sessionStorage.getItem('isEditState') === 'true') { userName = sessionStorage.getItem('CloudUserName') || '' @@ -429,13 +599,10 @@ let _script = item.script if (index === 0) { - _script = `declare @ErrorCode nvarchar(50),@retmsg nvarchar(4000),@UserName nvarchar(50),@FullName nvarchar(50),@RoleID nvarchar(512),@mk_departmentcode nvarchar(50),@mk_organization nvarchar(50),@login_city nvarchar(50) - select @ErrorCode='',@retmsg ='',@UserName='${userName}', @FullName='${fullName}', @RoleID='${RoleID}', @mk_departmentcode='${departmentcode}', @mk_organization='${organization}', @login_city='${city}' + _script = `declare @ErrorCode nvarchar(50),@retmsg nvarchar(4000),@UserName nvarchar(50),@FullName nvarchar(50),@RoleID nvarchar(512),@mk_departmentcode nvarchar(512),@mk_organization nvarchar(512),@mk_user_type nvarchar(20),@mk_nation nvarchar(50),@mk_province nvarchar(50),@mk_city nvarchar(50),@mk_district nvarchar(50),@mk_address nvarchar(100) + select @ErrorCode='',@retmsg ='',@UserName='${userName}', @FullName='${fullName}', @RoleID='${RoleID}', @mk_departmentcode='${departmentcode}', @mk_organization='${organization}', @mk_user_type='${mk_user_type}', @mk_nation='${nation}', @mk_province='${province}', @mk_city='${city}', @mk_district='${district}', @mk_address='${address}' ${_script} ` - } - if (item.transaction) { - transaction = true } item.columns.forEach(cell => { @@ -451,10 +618,6 @@ BID: BID || '' } - if (transaction) { - param.func = 'sPC_Get_structured_data_try' - } - param.LText = Utils.formatOptions(param.LText) param.LText_field = Utils.formatOptions(param.LText_field) param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') @@ -467,13 +630,13 @@ * @description 涓昏〃鏁版嵁鍔犺浇 */ loadmaindata = (params) => { - const { components, everyPCount, firstCount, lastCount } = this.state.config + const { components, limit } = this.state.config let deffers = params.map(item => { let componentId = item.componentId delete item.componentId return new Promise(resolve => { - Api.getLocalConfig(item).then(res => { + Api.genericInterface(item).then(res => { if (!res.status) { notification.warning({ top: 92, @@ -517,10 +680,11 @@ this.setState({loadingview: false, pages}) } - let auto = true - - if (comps[comps.length - 1].wrap && comps[comps.length - 1].wrap.printHeight) { - auto = false + let setData = (item) => { + if (item.setting && item.setting.sync === 'true' && item.data) { + item.dataName = Utils.getuuid() + window.GLOB.SyncData.set(item.dataName, item.data) + } } while (!over) { @@ -528,8 +692,6 @@ let count = 0 let _pageover = false let pagesover = false - - let limit = pageIndex === 1 ? (firstCount || 20) : (everyPCount || 20) comps.forEach((_item, index) => { let item = fromJS(_item).toJS() @@ -539,6 +701,7 @@ } if (item.wrap && item.wrap.printType === 'headerOrfooter') { // 椤电湁椤佃剼 + setData(item) page.push(item) } else if (_pageover) { return @@ -552,10 +715,12 @@ } if (count <= limit) { _item.added = true + setData(item) page.push(item) } } else if (!item.added) { _item.added = true + setData(item) page.push(item) } } else { @@ -568,12 +733,18 @@ if (count >= limit) { _pageover = true + } else if (_item.dataArray.length > 0) { + _pageover = true + } + + setData(item) page.push(item) } _item.added = true } else if (!item.added) { _item.added = true + setData(item) page.push(item) } } else if (!item.added && item.wrap && item.wrap.printHeight) { @@ -588,10 +759,12 @@ } if (count <= limit) { _item.added = true + setData(item) page.push(item) } } else if (!item.added) { _item.added = true + setData(item) page.push(item) } @@ -600,102 +773,64 @@ } }) - if (pagesover && lastCount && count > lastCount) { - pagesover = false - page = [] - count = 0 - _pageover = false - - if (pageIndex === 1) { - limit = (everyPCount - firstCount) + (everyPCount - lastCount) - - if (limit <= 0) { - limit = firstCount - } - } else { - limit = lastCount - } - - comps.forEach((_item, index) => { - let item = fromJS(_item).toJS() - if (item.wrap && item.wrap.printType === 'headerOrfooter') { // 椤电湁椤佃剼 - page.push(item) - } else if (_pageover) { - return - } else if (item.subtype === 'datacard' || item.type === 'table') { - if (_item.dataArray && _item.dataArray.length > 0) { - if (item.subtype === 'datacard' && item.wrap.layout === 'flex') { - if (!item.added && item.wrap.printHeight) { - count += item.wrap.printHeight - if (count >= limit) { - _pageover = true - } - if (count <= limit) { - _item.added = true - page.push(item) - } - } else if (!item.added) { - _item.added = true - page.push(item) - } - } else { - item.data = [] - - while (count + 1 <= limit && _item.dataArray.length > 0) { - item.data.push(_item.dataArray.shift()) - count++ - } - - if (count >= limit) { - _pageover = true - } - page.push(item) - } - _item.added = true - } else if (!item.added) { - _item.added = true - page.push(item) - } - } else if (!item.added && item.wrap && item.wrap.printHeight) { - if (item.wrap.empty === 'hidden' && (!item.data || item.data.length === 0)) { - _item.added = true - return - } - count += item.wrap.printHeight - if (count >= limit) { - _pageover = true - } - if (count <= limit) { - _item.added = true - page.push(item) - } - } else if (!item.added) { - _item.added = true - page.push(item) - } - - if (index + 1 === length && !_pageover) { - pagesover = true - } - }) - } - pages.push(page) pageIndex++ - if (pageIndex >= 200 || pagesover) { + if (pageIndex >= 2000 || pagesover) { over = true } } - this.setState({loadingview: false, pages, auto}) + this.setState({loadingview: false, pages}) }) + } + + canvasToImage(canvas) { + let image = new Image() + image.src = canvas.toDataURL('image/jpg') + image.style = 'width:100%;height:100%;position:absolute;z-index:1;left:0px;top:0px;' + return image + } + + chartToImage(canvas) { + let image = new Image() + image.src = canvas.toDataURL('image/jpg') + image.style = `width:100%;height:${canvas.style.height || '100%'};` + return image } print = () => { const { config, printing } = this.state - + if (printing) return + + let qrcodes = document.getElementsByClassName('qrcode-box') + + for (let i = 0; i < qrcodes.length; i++) { + let canvas = qrcodes[i].getElementsByTagName('canvas')[0] + + if (canvas) { + let img = this.canvasToImage(canvas) + + canvas.remove() + qrcodes[i].append(img) + } + } + + let charts = document.getElementsByTagName('canvas') + + if (charts.length) { + for (let i = 0; i < charts.length; i++) { + let img = this.chartToImage(charts[i]) + let parentNode = charts[i].parentNode + + parentNode.append(img) + } + + while (charts[0]) { + charts[0].remove() + } + } let jubuData = document.getElementById('bill-print').innerHTML @@ -747,70 +882,102 @@ getComponents = (components) => { return components.map(item => { + let style = null + + if (item.style && item.style.clear === 'left') { + style = {clear: 'left'} + } else if (item.style && item.style.clear === 'right') { + style = {float: 'right'} + } + if (item.type === 'bar' || item.type === 'line') { return ( - <Col span={item.width} key={item.uuid}> - <AntvBarAndLine config={item} initdata={item.data} mainSearch={[]} menuType="" /> + <Col span={item.width} style={style} key={item.uuid}> + <AntvBarAndLine config={item}/> </Col> ) } else if (item.type === 'pie') { return ( - <Col span={item.width} key={item.uuid}> - <AntvPie config={item} initdata={item.data} mainSearch={[]} menuType="" /> + <Col span={item.width} style={style} key={item.uuid}> + <AntvPie config={item} /> </Col> ) } else if (item.type === 'scatter') { return ( - <Col span={item.width} key={item.uuid}> - <AntvScatter config={item} initdata={item.data} mainSearch={[]} menuType="" /> + <Col span={item.width} style={style} key={item.uuid}> + <AntvScatter config={item}/> </Col> ) } else if (item.type === 'dashboard') { return ( - <Col span={item.width} key={item.uuid}> - <AntvDashboard config={item} initdata={item.data} mainSearch={[]} menuType="" /> + <Col span={item.width} style={style} key={item.uuid}> + <AntvDashboard config={item}/> </Col> ) } else if (item.type === 'card' && item.subtype === 'datacard') { return ( - <Col span={item.width} key={item.uuid}> - <DataCard config={item} initdata={item.data} mainSearch={[]} menuType="" /> + <Col span={item.width} style={style} key={item.uuid}> + <DataCard config={item} /> </Col> ) } else if (item.type === 'card' && item.subtype === 'propcard') { return ( - <Col span={item.width} key={item.uuid}> - <PropCard config={item} initdata={item.data} mainSearch={[]} menuType="" /> + <Col span={item.width} style={style} key={item.uuid}> + <PropCard config={item} /> </Col> ) - } else if (item.type === 'table' && item.subtype === 'tablecard') { + } else if (item.type === 'card' && item.subtype === 'dualdatacard') { return ( - <Col span={item.width} key={item.uuid}> - <TableCard config={item} initdata={item.data} mainSearch={[]} menuType="" /> + <Col span={item.width} style={style} key={item.uuid}> + <DoubleDataCard config={item}/> + </Col> + ) + } else if (item.type === 'card' && item.subtype === 'tablecard') { + return ( + <Col span={item.width} style={style} key={item.uuid}> + <TableCard config={item}/> </Col> ) } else if (item.type === 'table' && item.subtype === 'normaltable') { return ( - <Col span={item.width} key={item.uuid}> - <NormalTable config={item} initdata={item.data} mainSearch={[]} menuType="" /> + <Col span={item.width} style={style} key={item.uuid}> + <NormalTable config={item}/> </Col> ) } else if (item.type === 'code') { return ( - <Col span={item.width} key={item.uuid}> - <SandBox config={item} initdata={item.data} mainSearch={[]} menuType="" /> + <Col span={item.width} style={style} key={item.uuid}> + <SandBox config={item}/> </Col> ) } else if (item.type === 'balcony') { return ( - <Col span={item.width} key={item.uuid}> - <Balcony config={item} initdata={item.data} menuType="" /> + <Col span={item.width} style={style} key={item.uuid}> + <Balcony config={item}/> </Col> ) } else if (item.type === 'timeline') { return ( - <Col span={item.width} key={item.uuid}> - <TimeLine config={item} initdata={item.data} menuType="" /> + <Col span={item.width} style={style} key={item.uuid}> + <TimeLine config={item}/> + </Col> + ) + } else if (item.type === 'editor') { + return ( + <Col span={item.width} style={style} key={item.uuid}> + <BraftEditor config={item}/> + </Col> + ) + } else if (item.type === 'antvG6') { + return ( + <Col span={item.width} style={style} key={item.uuid}> + <AntvG6 config={item}/> + </Col> + ) + } else if (item.type === 'antvX6') { + return ( + <Col span={item.width} style={style} key={item.uuid}> + <AntvX6 config={item}/> </Col> ) } else { @@ -826,9 +993,10 @@ <div className="bill-print-wrap" > {loadingview && <Spin size="large" />} {pages ? <div id="bill-print"> - {pages.map((components, index) => (<div className={'print-page' + (auto ? ' auto' : '')} key={index} style={{...config.style, overflow: 'hidden', boxSizing: 'border-box'}}><Row>{this.getComponents(components)}</Row></div>))} + {pages.map((components, index) => (<div className={'print-page' + (auto ? ' auto' : '')} key={index} style={{...config.style, overflow: 'hidden', boxSizing: 'border-box'}}><Row className="component-wrap">{this.getComponents(components)}</Row></div>))} </div> : null} {viewlost ? <NotFount msg={this.state.lostmsg} /> : null} + {config && window.GLOB.breakpoint ? <DebugTable /> : null} {pages && !loadingview && !viewlost ? <div className="print-button"><Button icon="printer" size="large" shape="circle" onClick={this.print}></Button></div> : null} {!loadingview && !viewlost ? <div className="refresh-button"><Button icon="reload" size="large" shape="circle" onClick={this.reload}></Button></div> : null} </div> -- Gitblit v1.8.0