vue2-client 1.15.5 → 1.15.7

package/src/base-client/components/common/XPrint/PrintBill.vue

@@ -1,302 +1,302 @@
-<template>
-  <div>
-    <a-modal
-      v-model="showModal"
-      title="收费发票"
-      width="60vw"
-      @ok="printGen"
-      @cancel="cancel"
-      style="min-width: 800px">
-      <a-skeleton v-if="!loaded" active/>
-      <div
-        style="display: flex;justify-content: center;"
-        :id="id"
-        v-else
-        v-html="bill.data">
-      </div>
-    </a-modal>
-    <div
-      v-if="!showModal"
-      style="justify-content: center;"
-      :id="id"
-      v-show="false"
-      v-html="bill.data">
-    </div>
-  </div>
-</template>
-<script>
-import { hiprint } from '@afwenming123/vue-plugin-hiprint'
-import DataModel from '@vue2-client/services/DataModel'
-import { mapState } from 'vuex'
-import { getConfigByNameAsync } from '@vue2-client/services/api/common'
-import { printHtml } from '@vue2-client/base-client/components/common/XPrint/PrintHtml'
-import hiPrintCss from './css/hiPrintCss'
-
-export default {
-  title: '收费发票',
-  data () {
-    return {
-      model: {},
-      bill: {},
-      hiprintTemplate: undefined,
-      showModal: false,
-      loaded: false,
-      id: 'normal-bill'
-    }
-  },
-  props: {
-    serviceName: {
-      type: String,
-      default: process.env.VUE_APP_SYSTEM_NAME
-    },
-    autoPrint: {
-      type: Boolean,
-      default: false
-    },
-    top: {
-      type: String,
-      default: '5mm'
-    },
-    left: {
-      type: String,
-      default: '5mm'
-    },
-    width: {
-      type: String,
-      default: '90%'
-    },
-    height: {
-      type: String,
-      default: '80%'
-    },
-    extra: {
-      type: Object,
-      default: function () {
-        return {
-          count: 0,
-          tops: []
-        }
-      }
-    }
-  },
-  ready () {
-  },
-  computed: {
-    ...mapState('account', { currUser: 'user' }),
-  },
-  methods: {
-    cancel () {
-      this.showModal = false
-      this.$emit('ok')
-    },
-    async getBillData (data) {
-      // 模板打印
-      if (data.template) {
-        this.id = 'preview_content_design'
-        getConfigByNameAsync(data.template, this.serviceName).then(async res => {
-          // 根据模板名称获取内容
-          this.hiprintTemplate = new hiprint.PrintTemplate({
-            template: res
-          })
-          // 不需要提供预览效果 直接使用浏览器的预览
-          // this.loaded = true
-          // this.$nextTick(async () => {
-          //   // 提供预览效果
-          //   const html = this.hiprintTemplate.getHtml({ table: Array.from({ length: 100 }, () => ({})) })
-          //   this.bill = { data: html[0].outerHTML }
-          // })
-        })
-      } else if (data.billUrl) {
-        //  v3 hbm.xml 打印
-        this.bill = new DataModel({ serviceName: this.serviceName, ...data, })
-        await this.bill.search()
-        this.loaded = true
-      }
-    },
-    async print (data) {
-      if (!this.autoPrint) {
-        this.showModal = true
-      }
-      await this.getBillData(data).catch(
-        _err => {
-          this.showModal = false
-          this.$message.error('获取发票信息失败')
-        }
-      )
-      if (this.autoPrint) {
-        this.printGen()
-      }
-    },
-    printGen () {
-      this.refreshData()
-      // hiprint 直接打印 需要对应客户端 / 暂时只使用 浏览器 pdf 打印
-      // https://gitee.com/ccsimple/vue-plugin-hiprint
-      // this.hiprintTemplate.print2({}, {}, {
-      //   styleHandler: () => {
-      //     const css = '<style>.hiprint-printElement-text{color:red !important;}</style>'
-      //     return css
-      //   }
-      // })
-      const that = this
-      if (this.hiprintTemplate) {
-        // 如果使用 hiprint 模板 使用浏览器预览打印
-        // 因为 旧版ie 不支持得样式 lodop 也不支持
-        this.hiprintTemplate.print({ table: Array.from({ length: 100 }, () => ({})) }, {}, {
-          callback: () => {
-            that.$emit('ok')
-          },
-          styleHandler: () => {
-            return hiPrintCss()
-          }
-        })
-      } else {
-        this.$nextTick(() => {
-            printHtml('lodop', {
-              id: this.id,
-              top: this.top,
-              left: this.left,
-              width: this.width,
-              height: this.height,
-              extra: this.extra,
-              preview: true,
-              html: document.getElementById(this.id).innerHTML
-            }).then(() => {
-              this.$emit('ok')
-              this.init()
-            }).catch(() => {
-              this.$emit('print-error')
-            })
-          }
-        )
-      }
-    },
-    refreshData () { // 让innerHTML获取的内容包含input和select(option)的最新值
-      const obj = document.getElementById(this.id)
-      let allInputObject = null
-      if (obj) {
-        allInputObject = obj.getElementsByTagName('input')
-      }
-      for (let i = 0; i < allInputObject.length; i++) {
-        if (allInputObject[i].type === 'checkbox') {
-          if (allInputObject[i].checked) {
-            allInputObject[i].setAttribute('checked', 'checked')
-          } else {
-            allInputObject[i].removeAttribute('checked')
-          }
-        } else if (allInputObject[i].type === 'radio') {
-          if (allInputObject[i].checked) {
-            allInputObject[i].setAttribute('checked', 'checked')
-          } else {
-            allInputObject[i].removeAttribute('checked')
-          }
-        } else {
-          allInputObject[i].setAttribute('value', allInputObject[i].value)
-        }
-      }
-      for (let i = 0; i < document.getElementsByTagName('select').length; i++) {
-        const sl = document.getElementsByTagName('select')[i]
-        for (let j = 0; j < sl.options.length; j++) {
-          if (sl.options[j].selected) {
-            sl.options[j].setAttribute('selected', 'selected')
-          } else {
-            sl.options[j] = new Option(sl.options[j].text, sl.options[j].value)
-          }
-        }
-      }
-    },
-    init () {
-      this.showModal = false
-      this.loaded = false
-      this.id = 'normal-bill'
-      this.bill = {}
-      this.model = {}
-    }
-  },
-  watch: {}
-}
-</script>
-<style scoped>
-
-#normal-bill >>> td {
-  padding: 0.5px;
-  border: 2px solid #000000;
-}
-
-#normal-bill >>> table {
-  border-collapse: collapse;
-  border: solid;
-}
-
-#normal-bill >>> .noborder {
-  border: 1px dashed #ccc;
-}
-
-#normal-bill >>> .tdleft {
-  text-align: left;
-}
-
-#normal-bill >>> .tdright {
-  text-align: right;
-}
-
-#normal-bill >>> .tdcenter {
-  text-align: center;
-}
-
-#normal-bill >>> .fs10 {
-  font-size: 0.4em;
-}
-
-#normal-bill >>> .fs11 {
-  font-size: 0.5em;
-}
-
-#normal-bill >>> .fs12 {
-  font-size: 0.6em;
-}
-
-#normal-bill >>> .fs13 {
-  font-size: 0.7em;
-}
-
-#normal-bill >>> .fs15 {
-  font-size: 0.9em;
-}
-
-#normal-bill >>> .fs17 {
-  font-size: 1.1em;
-}
-
-#normal-bill >>> .fs19 {
-  font-size: 1.2em;
-}
-
-#normal-bill >>> .fs24 {
-  font-size: 1.5em;
-}
-
-#normal-bill >>> .fs26 {
-  font-size: 1.6em;
-}
-
-#normal-bill >>> .b {
-  font-weight: bold;
-}
-
-#normal-bill >>> .td-border-right {
-  border-right: #000000 1px solid;
-}
-
-#normal-bill >>> .td-border-top {
-  border-top: #000000 1px solid;
-}
-
-#normal-bill >>> .td-border-left {
-  border-left: #000000 1px solid;
-}
-
-#normal-bill >>> .td-border-bottom {
-  border-bottom: #000000 1px solid;
-}
-
-</style>
+<template>
+  <div>
+    <a-modal
+      v-model="showModal"
+      title="收费发票"
+      width="60vw"
+      @ok="printGen"
+      @cancel="cancel"
+      style="min-width: 800px">
+      <a-skeleton v-if="!loaded" active/>
+      <div
+        style="display: flex;justify-content: center;"
+        :id="id"
+        v-else
+        v-html="bill.data">
+      </div>
+    </a-modal>
+    <div
+      v-if="!showModal"
+      style="justify-content: center;"
+      :id="id"
+      v-show="false"
+      v-html="bill.data">
+    </div>
+  </div>
+</template>
+<script>
+import { hiprint } from '@afwenming123/vue-plugin-hiprint'
+import DataModel from '@vue2-client/services/DataModel'
+import { mapState } from 'vuex'
+import { getConfigByNameAsync } from '@vue2-client/services/api/common'
+import { printHtml } from '@vue2-client/base-client/components/common/XPrint/PrintHtml'
+import hiPrintCss from './css/hiPrintCss'
+
+export default {
+  title: '收费发票',
+  data () {
+    return {
+      model: {},
+      bill: {},
+      hiprintTemplate: undefined,
+      showModal: false,
+      loaded: false,
+      id: 'normal-bill'
+    }
+  },
+  props: {
+    serviceName: {
+      type: String,
+      default: process.env.VUE_APP_SYSTEM_NAME
+    },
+    autoPrint: {
+      type: Boolean,
+      default: false
+    },
+    top: {
+      type: String,
+      default: '5mm'
+    },
+    left: {
+      type: String,
+      default: '5mm'
+    },
+    width: {
+      type: String,
+      default: '90%'
+    },
+    height: {
+      type: String,
+      default: '80%'
+    },
+    extra: {
+      type: Object,
+      default: function () {
+        return {
+          count: 0,
+          tops: []
+        }
+      }
+    }
+  },
+  ready () {
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+  },
+  methods: {
+    cancel () {
+      this.showModal = false
+      this.$emit('ok')
+    },
+    async getBillData (data) {
+      // 模板打印
+      if (data.template) {
+        this.id = 'preview_content_design'
+        getConfigByNameAsync(data.template, this.serviceName).then(async res => {
+          // 根据模板名称获取内容
+          this.hiprintTemplate = new hiprint.PrintTemplate({
+            template: res
+          })
+          // 不需要提供预览效果 直接使用浏览器的预览
+          // this.loaded = true
+          // this.$nextTick(async () => {
+          //   // 提供预览效果
+          //   const html = this.hiprintTemplate.getHtml({ table: Array.from({ length: 100 }, () => ({})) })
+          //   this.bill = { data: html[0].outerHTML }
+          // })
+        })
+      } else if (data.billUrl) {
+        //  v3 hbm.xml 打印
+        this.bill = new DataModel({ serviceName: this.serviceName, ...data, })
+        await this.bill.search()
+        this.loaded = true
+      }
+    },
+    async print (data) {
+      if (!this.autoPrint) {
+        this.showModal = true
+      }
+      await this.getBillData(data).catch(
+        _err => {
+          this.showModal = false
+          this.$message.error('获取发票信息失败')
+        }
+      )
+      if (this.autoPrint) {
+        this.printGen()
+      }
+    },
+    printGen () {
+      this.refreshData()
+      // hiprint 直接打印 需要对应客户端 / 暂时只使用 浏览器 pdf 打印
+      // https://gitee.com/ccsimple/vue-plugin-hiprint
+      // this.hiprintTemplate.print2({}, {}, {
+      //   styleHandler: () => {
+      //     const css = '<style>.hiprint-printElement-text{color:red !important;}</style>'
+      //     return css
+      //   }
+      // })
+      const that = this
+      if (this.hiprintTemplate) {
+        // 如果使用 hiprint 模板 使用浏览器预览打印
+        // 因为 旧版ie 不支持得样式 lodop 也不支持
+        this.hiprintTemplate.print({ table: Array.from({ length: 100 }, () => ({})) }, {}, {
+          callback: () => {
+            that.$emit('ok')
+          },
+          styleHandler: () => {
+            return hiPrintCss()
+          }
+        })
+      } else {
+        this.$nextTick(() => {
+            printHtml('lodop', {
+              id: this.id,
+              top: this.top,
+              left: this.left,
+              width: this.width,
+              height: this.height,
+              extra: this.extra,
+              preview: true,
+              html: document.getElementById(this.id).innerHTML
+            }).then(() => {
+              this.$emit('ok')
+              this.init()
+            }).catch(() => {
+              this.$emit('print-error')
+            })
+          }
+        )
+      }
+    },
+    refreshData () { // 让innerHTML获取的内容包含input和select(option)的最新值
+      const obj = document.getElementById(this.id)
+      let allInputObject = null
+      if (obj) {
+        allInputObject = obj.getElementsByTagName('input')
+      }
+      for (let i = 0; i < allInputObject.length; i++) {
+        if (allInputObject[i].type === 'checkbox') {
+          if (allInputObject[i].checked) {
+            allInputObject[i].setAttribute('checked', 'checked')
+          } else {
+            allInputObject[i].removeAttribute('checked')
+          }
+        } else if (allInputObject[i].type === 'radio') {
+          if (allInputObject[i].checked) {
+            allInputObject[i].setAttribute('checked', 'checked')
+          } else {
+            allInputObject[i].removeAttribute('checked')
+          }
+        } else {
+          allInputObject[i].setAttribute('value', allInputObject[i].value)
+        }
+      }
+      for (let i = 0; i < document.getElementsByTagName('select').length; i++) {
+        const sl = document.getElementsByTagName('select')[i]
+        for (let j = 0; j < sl.options.length; j++) {
+          if (sl.options[j].selected) {
+            sl.options[j].setAttribute('selected', 'selected')
+          } else {
+            sl.options[j] = new Option(sl.options[j].text, sl.options[j].value)
+          }
+        }
+      }
+    },
+    init () {
+      this.showModal = false
+      this.loaded = false
+      this.id = 'normal-bill'
+      this.bill = {}
+      this.model = {}
+    }
+  },
+  watch: {}
+}
+</script>
+<style scoped>
+
+#normal-bill >>> td {
+  padding: 0.5px;
+  border: 2px solid #000000;
+}
+
+#normal-bill >>> table {
+  border-collapse: collapse;
+  border: solid;
+}
+
+#normal-bill >>> .noborder {
+  border: 1px dashed #ccc;
+}
+
+#normal-bill >>> .tdleft {
+  text-align: left;
+}
+
+#normal-bill >>> .tdright {
+  text-align: right;
+}
+
+#normal-bill >>> .tdcenter {
+  text-align: center;
+}
+
+#normal-bill >>> .fs10 {
+  font-size: 0.4em;
+}
+
+#normal-bill >>> .fs11 {
+  font-size: 0.5em;
+}
+
+#normal-bill >>> .fs12 {
+  font-size: 0.6em;
+}
+
+#normal-bill >>> .fs13 {
+  font-size: 0.7em;
+}
+
+#normal-bill >>> .fs15 {
+  font-size: 0.9em;
+}
+
+#normal-bill >>> .fs17 {
+  font-size: 1.1em;
+}
+
+#normal-bill >>> .fs19 {
+  font-size: 1.2em;
+}
+
+#normal-bill >>> .fs24 {
+  font-size: 1.5em;
+}
+
+#normal-bill >>> .fs26 {
+  font-size: 1.6em;
+}
+
+#normal-bill >>> .b {
+  font-weight: bold;
+}
+
+#normal-bill >>> .td-border-right {
+  border-right: #000000 1px solid;
+}
+
+#normal-bill >>> .td-border-top {
+  border-top: #000000 1px solid;
+}
+
+#normal-bill >>> .td-border-left {
+  border-left: #000000 1px solid;
+}
+
+#normal-bill >>> .td-border-bottom {
+  border-bottom: #000000 1px solid;
+}
+
+</style>