lilei 3 gadi atpakaļ
vecāks
revīzija
35346e65a8

+ 92 - 0
src/libs/JGPrint.js

@@ -0,0 +1,92 @@
+import confirm from 'ant-design-vue/es/modal/confirm'
+import notification from 'ant-design-vue/es/notification'
+import { getLodop } from '@/libs/LodopFuncs'
+import moment from 'moment'
+// 打印页签,支持批量打印
+export const JGPrintTag = function (html, width, height, data) {
+  const LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'))
+  if (!LODOP) {
+    confirm({
+      title: '提示?',
+      content: h => <div>打印控件未安装,请先下载并安装。安装完成后,刷新页面即可打印。</div>,
+      okText: '立即下载',
+      okType: 'danger',
+      cancelText: '暂不打印',
+      onOk () {
+        var agent = navigator.userAgent.toLowerCase();
+        if (agent.indexOf("win32") >= 0 || agent.indexOf("wow32") >= 0) {
+            window.open('http://www.lodop.net/demolist/CLodop_Setup_for_Win32NT.zip')
+        }else if (agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0) {
+            window.open('http://www.lodop.net/download/CLodop_Setup_for_Win64NT_4.155EN.zip')
+        }
+      }
+    })
+    return
+  }
+  LODOP.PRINT_INIT("")
+  LODOP.SET_SHOW_MODE('HIDE_PAPER_BOARD', 1) //  隐藏底图上有模拟走纸板的条纹线
+  LODOP.SET_PRINT_MODE('POS_BASEON_PAPER', true) // 可使输出以纸张边缘为基点
+  LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', html)
+  LODOP.ADD_PRINT_BARCODE('36%','65%',90,90,"QRCode",data.qrCodeContent)
+  LODOP.SET_PRINT_STYLEA(0,"QRCodeVersion",5)
+  // LODOP.SET_PRINT_STYLEA(0,"QRCodeErrorLevel",'H')
+  LODOP.SET_PRINT_COPIES(data.printQty)// 指定份数
+  LODOP.SET_PRINT_PAGESIZE(1, width, height)
+  LODOP.PRINT()
+}
+ 
+// 导出下载excel
+export const downloadExcel = function (data, fileName) {
+  if (!data) { return }
+  const a = moment().format('YYYYMMDDHHmmss')
+  const fname = fileName + a
+  const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
+  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+    navigator.msSaveBlob(blob, fname + '.xlsx')
+  } else {
+    const link = document.createElement('a')
+    link.style.display = 'none'
+    var href = URL.createObjectURL(blob)
+    link.href = href
+    link.setAttribute('download', fname + '.xlsx')
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    window.URL.revokeObjectURL(href) // 释放掉blob对象
+  }
+}
+
+// 打印控件
+export const jGPrint = function (data, type) {
+    if (!data) {
+      return
+    }
+    const LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'))
+    if (!LODOP) {
+      confirm({
+        title: '提示?',
+        content: h => <div>打印控件未安装,请先下载并安装。安装完成后,刷新页面即可打印。</div>,
+        okText: '立即下载',
+        okType: 'danger',
+        cancelText: '暂不打印',
+        onOk () {
+          var agent = navigator.userAgent.toLowerCase();
+          if (agent.indexOf("win32") >= 0 || agent.indexOf("wow32") >= 0) {
+              window.open('http://www.lodop.net/demolist/CLodop_Setup_for_Win32NT.zip')
+          }else if (agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0) {
+              window.open('http://www.lodop.net/download/CLodop_Setup_for_Win64NT_4.155EN.zip')
+          }
+        }
+      })
+      return
+    }
+    LODOP.SET_SHOW_MODE('HIDE_PAPER_BOARD', 1) //  隐藏底图上有模拟走纸板的条纹线
+    // LODOP.SET_PRINT_MODE('POS_BASEON_PAPER', true) // 可使输出以纸张边缘为基点
+    LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', data)
+    LODOP.SET_PRINT_PAGESIZE(1,2090,40,"");
+    if (type == 'preview') { //  预览
+      LODOP.PREVIEW()
+    } else if (type == 'print') { //  打印
+      LODOP.PRINT()
+    }
+}

+ 187 - 0
src/libs/LodopFuncs.js

@@ -0,0 +1,187 @@
+//= =本JS是加载Lodop插件及CLodop服务的综合示例,可直接使用,建议看懂后融进自己页面程序==
+
+var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState
+
+//= =判断是否需要CLodop(那些不支持插件的浏览器):==
+function needCLodop () {
+  try {
+    var ua = navigator.userAgent
+    if (ua.match(/Windows\sPhone/i)) { return true }
+    if (ua.match(/iPhone|iPod|iPad/i)) { return true }
+    if (ua.match(/Android/i)) { return true }
+    if (ua.match(/Edge\D?\d+/i)) { return true }
+
+    var verTrident = ua.match(/Trident\D?\d+/i)
+    var verIE = ua.match(/MSIE\D?\d+/i)
+    var verOPR = ua.match(/OPR\D?\d+/i)
+    var verFF = ua.match(/Firefox\D?\d+/i)
+    var x64 = ua.match(/x64/i)
+    if ((!verTrident) && (!verIE) && (x64)) { return true } else if (verFF) {
+      verFF = verFF[0].match(/\d+/)
+      if ((verFF[0] >= 41) || (x64)) { return true }
+    } else if (verOPR) {
+      verOPR = verOPR[0].match(/\d+/)
+      if (verOPR[0] >= 32) { return true }
+    } else if ((!verTrident) && (!verIE)) {
+      var verChrome = ua.match(/Chrome\D?\d+/i)
+      if (verChrome) {
+        verChrome = verChrome[0].match(/\d+/)
+        if (verChrome[0] >= 41) { return true }
+      }
+    }
+    return false
+  } catch (err) {
+    return true
+  }
+}
+
+// 加载CLodop时用双端口(http是8000/18000,而https是8443/8444)以防其中某端口被占,
+// 主JS文件“CLodopfuncs.js”是固定文件名,其内容是动态的,与当前打印环境有关:
+function loadCLodop () {
+  if (CLodopJsState == 'loading' || CLodopJsState == 'complete') return
+  CLodopJsState = 'loading'
+  var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement
+  var JS1 = document.createElement('script')
+  var JS2 = document.createElement('script')
+
+  if (window.location.protocol == 'https:') {
+    JS1.src = 'https://localhost.lodop.net:8443/CLodopfuncs.js'
+    JS2.src = 'https://localhost.lodop.net:8444/CLodopfuncs.js'
+  } else {
+    JS1.src = 'http://localhost:8000/CLodopfuncs.js'
+    JS2.src = 'http://localhost:18000/CLodopfuncs.js'
+  }
+  JS1.onload = JS2.onload = function () { CLodopJsState = 'complete' }
+  JS1.onerror = JS2.onerror = function (evt) { CLodopJsState = 'complete' }
+  head.insertBefore(JS1, head.firstChild)
+  head.insertBefore(JS2, head.firstChild)
+  CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i))
+}
+
+if (needCLodop()) { loadCLodop() }// 开始加载
+
+//= =获取LODOP对象主过程,判断是否安装、需否升级:==
+function getLodop (oOBJECT, oEMBED) {
+  var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='http://www.lodop.net/demolist/install_lodop32.zip' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>"
+  var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='http://www.lodop.net/demolist/install_lodop32.zip' target='_self'>执行升级</a>,升级后请重新进入。</font>"
+  var strHtm64_Install = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='http://www.lodop.net/demolist/install_lodop64.zip' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>"
+  var strHtm64_Update = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='http://www.lodop.net/demolist/install_lodop64.zip' target='_self'>执行升级</a>,升级后请重新进入。</font>"
+  var strHtmFireFox = "<br><br><font color='#FF00FF'>(注意:如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它)</font>"
+  var strHtmChrome = "<br><br><font color='#FF00FF'>(如果此前正常,仅因浏览器升级或重安装而出问题,需重新执行以上安装)</font>"
+  var strCLodopInstall_1 = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动,点击这里<a href='http://www.lodop.net/demolist/CLodop_Setup_for_Win32NT.zip' target='_self'>下载执行安装</a>"
+  var strCLodopInstall_2 = "<br>(若此前已安装过,可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>)"
+  var strCLodopInstall_3 = ',成功后请刷新本页面。</font>'
+  var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='http://www.lodop.net/demolist/CLodop_Setup_for_Win32NT.zip' target='_self'>执行升级</a>,升级后请刷新页面。</font>"
+  var msgHtml = ''
+  var LODOP
+  try {
+    var ua = navigator.userAgent
+    var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i))
+    if (needCLodop()) {
+      try {
+        LODOP = getCLodop()
+      } catch (err) {}
+      if (!LODOP && CLodopJsState !== 'complete') {
+        if (CLodopJsState == 'loading') alert('网页还没下载完毕,请稍等一下再操作.'); else alert('没有加载CLodop的主js,请先调用loadCLodop过程.')
+        return
+      }
+      if (!LODOP) {
+        msgHtml = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : '') + strCLodopInstall_3
+        return
+      } else {
+        if (CLODOP.CVERSION < '4.0.9.9') {
+          msgHtml = strCLodopUpdate
+        }
+        if (oEMBED && oEMBED.parentNode) { oEMBED.parentNode.removeChild(oEMBED) } // 清理旧版无效元素
+        if (oOBJECT && oOBJECT.parentNode) { oOBJECT.parentNode.removeChild(oOBJECT) }
+      }
+    } else {
+      var is64IE = isIE && !!(ua.match(/x64/i))
+      //= =如果页面有Lodop就直接使用,否则新建:==
+      if (oOBJECT || oEMBED) {
+        if (isIE) { LODOP = oOBJECT } else { LODOP = oEMBED }
+      } else if (!CreatedOKLodopObject) {
+        LODOP = document.createElement('object')
+        LODOP.setAttribute('width', 0)
+        LODOP.setAttribute('height', 0)
+        LODOP.setAttribute('style', 'position:absolute;left:0px;top:-100px;width:0px;height:0px;')
+        if (isIE) { LODOP.setAttribute('classid', 'clsid:2105C259-1E0C-4534-8141-A753534CB4CA') } else { LODOP.setAttribute('type', 'application/x-print-lodop') }
+        document.documentElement.appendChild(LODOP)
+        CreatedOKLodopObject = LODOP
+      } else { LODOP = CreatedOKLodopObject }
+      //= =Lodop插件未安装时提示下载地址:==
+      if ((!LODOP) || (!LODOP.VERSION)) {
+        if (ua.indexOf('Chrome') >= 0) { msgHtml = strHtmChrome }
+        if (ua.indexOf('Firefox') >= 0) { msgHtml = strHtmFireFox }
+        msgHtml = (is64IE ? strHtm64_Install : strHtmInstall)
+        console.log(msgHtml)
+        return LODOP
+      }
+    }
+    if (LODOP.VERSION < '6.2.2.6') {
+      if (!needCLodop()) { msgHtml = (is64IE ? strHtm64_Update : strHtmUpdate) }
+    }
+    //= ==如下空白位置适合调用统一功能(如注册语句、语言选择等):==
+    LODOP.SET_LICENSES('', 'E89B8C436467D381F32C0B7F5674838FA59', '', '')
+    //= ==============================================.com//.com台级//.net
+    // alert('SET_LICENSES执行了')
+    console.log(msgHtml)
+    return LODOP
+  } catch (err) {
+    alert('getLodop出错:' + err)
+  }
+}
+
+/**
+ * 根据已有的html url进行打印
+ * @param type
+ * 是打印还是打印预览:preview-打印预览;其它值为打印。
+ * @param config
+ * 打印内容配置:
+ * 1、为字符串时,表示打印的html所在的远程url地址。
+ * 2、为对象时:{
+ * url:打印的html所在的远程url地址,
+ * width:html内容的实际宽度(单位像素)
+ * height:html内容的实际高度(单位像素)
+ * }
+ *
+ * 说明:
+ * JasperReports设计模板的像素和实际纸张的尺寸之比为72pt=1英寸(in)。
+ * Lodop打印的内容是按照一个dpi占96px=72pt=1in=2.54cm(厘米)=25.4mm(毫米)打印,JasperReports的html结果内容是按照一个dpi占72pt生成。
+ *
+ */
+function doPrintByHtml (type, config) {
+  if (!window.LODOP) {
+    alert('打印插件不可用,请先到首页进行下载安装,然后刷新浏览器!')
+    return
+  }
+  if (window.top && window.top.waltz && window.top.waltz.app && window.top.waltz.app.globalOption) {
+    var globalOption = window.top.waltz.app.globalOption
+    if (globalOption.lodopLicenseAuthor) {
+      LODOP.SET_LICENSES(globalOption.lodopLicenseAuthor, globalOption.lodopLicenseKey, '', '')
+    }
+  }
+  LODOP.PRINT_INIT('printTask')
+
+  var url
+  if ((typeof config === 'string') && config.constructor == String) {
+    url = config
+  } else {
+    url = config.url
+    var width = Math.round((config.width / 72) * 25.4) * 10 // 1 inch=25.4mm,Lodop默认单位为0.1mm
+    var height = Math.round((config.height / 72) * 25.4) * 10
+    // 设置纸张大小,设置后不允许用户手动修改纸张大小
+    LODOP.SET_PRINT_PAGESIZE(0, width, height, '')
+  }
+  // 指定按实际宽度缩放比例
+  LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Full-Width')
+  LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', 'URL:' + url)
+  LODOP.SET_PRINT_STYLE('Stretch', 2)
+  if (type == 'preview') {
+    LODOP.PREVIEW()
+  } else {
+    LODOP.PRINT()
+  }
+}
+
+export { getLodop }

+ 17 - 9
src/views/expenseManagement/expenseReimbursement/detail.vue

@@ -10,13 +10,19 @@
         </template>
         <!-- 操作区,位于 title 行的行尾 -->
         <template slot="extra">
+          <a-button
+            :disabled="detailData==null"
+            key="1"
+            type="default"
+            id="expenseManagementDetail-print-btn"
+            @click="handlePrint('preview')">打印预览</a-button>
           <a-button
             :disabled="detailData==null"
             key="2"
             type="primary"
-            class="button-info"
+            class="button-error"
             id="expenseManagementDetail-print-btn"
-            @click="handlePreview('print')">快捷打印</a-button>
+            @click="handlePrint('print')">快捷打印</a-button>
         </template>
       </a-page-header>
       <!-- 基础信息 -->
@@ -93,6 +99,7 @@
 import { STable } from '@/components'
 import { expenseAccountDetail, expenseAcctDetailFindList } from '@/api/expenseManagement'
 import previewModal from './previewModal.vue'
+import { jGPrint } from '@/libs/JGPrint.js'
 export default {
   name: 'ExpenseReimbursementDetail',
   components: { STable, previewModal },
@@ -143,14 +150,15 @@ export default {
     handleBack () {
       this.$router.push({ name: 'expenseReimbursementList' })
     },
-    // 打印预览
-    handlePreview (type) {
+    // 打印
+    handlePrint (type) {
       const html = document.getElementById('printTest').innerHTML
-      var iframe = document.getElementById('printfsqd')
-      var iframedoc = iframe.contentDocument || iframe.contentWindow.document
-      iframedoc.body.innerHTML = html
-      window.frames['printfsqd'].focus()
-      window.frames['printfsqd'].print()
+      // var iframe = document.getElementById('printfsqd')
+      // var iframedoc = iframe.contentDocument || iframe.contentWindow.document
+      // iframedoc.body.innerHTML = html
+      // window.frames['printfsqd'].focus()
+      // window.frames['printfsqd'].print()
+      jGPrint(html, type)
     },
     //  详情
     getDetail () {