导出word

2025-03-21 13:22:16 +08:00
parent 5fca38c45d
commit 8fd861c022
5 changed files with 314 additions and 36 deletions
--- a/base-vue/src/views/modules/contract/temp-add-or-update.vue
+++ b/base-vue/src/views/modules/contract/temp-add-or-update.vue
@@ -82,13 +82,16 @@
  </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="visible = false">取消</el-button>
-      <el-button size="mini" type="primary" @click="addAndPrint">打印</el-button>
+      <el-button size="mini" type="primary" @click="exportToWord">导出为 Word 文档</el-button>
    </span>
  </el-dialog>
 </template>

 <script>
-import { getLodop } from '@/utils/lodop/LodopFuncs'
+import Docxtemplater from 'docxtemplater'
+import PizZip from 'pizzip'
+import PizZipUtils from 'pizzip/utils/index.js'
+import { saveAs } from 'file-saver'
 export default {
  data () {
    return {
@@ -101,7 +104,7 @@ export default {
        totalSum: null,
        totalSumChina: null
      },
-      dataList: [{materialCode: 'S9410002000002'}, {materialCode: 'S9410002000003'}]
+      dataList: []
    }
  },
  props: {
@@ -163,40 +166,34 @@ export default {
      }
      return result.join('') + (decimalPart > 0 ? '元' : '元整')
    },
-    // 打印
-    addAndPrint () {
-      const LODOP = getLodop()
-      if (LODOP === undefined || LODOP === null) {
-        this.visible = false
-        return
+    exportToWord () {
+      const data = {
+        clientId: this.dataForm.clientId,
+        contractNumber: this.dataForm.contractNumber
      }
-      LODOP.PRINT_INITA('0mm', '0mm', '213mm', '297mm', '打印合同模板')
-      LODOP.SET_PRINT_PAGESIZE(1, 2100, 2970, 'A4')
-      LODOP.ADD_PRINT_TEXT(0, 0, '0', '0', '')
-      // 获取弹窗内容并转换为 HTML 字符串
-      const h1Content = `<h1>产品供销合同</h1>`
-      const popupContent = document.getElementById('popupContent').innerHTML
-      const printHtml = `
-        <style>
-          h1 {font-size: 14px;line-height: 1;text-align: center;margin-bottom: 30px;}
-          .zd-row {width: 100%;display: flex;}
-          .zd-col-12 {width: 50%;}
-          .dialog_content {width: 100%;font-family: '黑体'}
-          .item_p {font-size: 14px;color: #000;line-height: 1.5;padding-bottom: 12px;}
-          .tip_p {font-size: 14px;line-height: 1.5;margin: 0;}
-          .det_table {width: 100%;table-layout: fixed;width: 100%; border-collapse: collapse;border: 1px solid #000;}
-          .det_table th {font-size: 12px;color: #000;line-height: 23px;padding: 4px;border: 1px solid #000;text-align: center;}
-          .det_table td {font-size: 13px;color: #000;line-height: 23px;padding: 4px;border: 1px solid #000;text-align: center;}
-          .det_table_1 th, .det_table_1 td {text-align: left;}
-        </style>
-        ${h1Content}
-        ${popupContent}
-      `
-      // 添加弹窗内容到打印任务
-      LODOP.ADD_PRINT_HTM(0, '5%', '90%', '90%', printHtml)
-      // LODOP.PREVIEW()
-      LODOP.PRINT()
-    },
+      const templatePath = './static/word/template.docx'
+      PizZipUtils.getBinaryContent(templatePath, (error, content) =>{
+        if (error) {
+          throw error
+        }
+        const zip = new PizZip(content)
+        const doc = new Docxtemplater(zip, {
+          paragraphLoop: true,
+          linebreaks: true
+        })
+        doc.setData(data)
+        try {
+          doc.render()
+        } catch (error) {
+          console.error('模板渲染错误:', error)
+        }
+        const out = doc.getZip().generate({
+          type: 'blob',
+          mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+        })
+        saveAs(out, `合同${new Date().getTime()}.docx`)
+      })
+    }
  }
 }
 </script>
--- a/base-vue/src/views/modules/contract/temp-add-or-update的副本.vue
+++ b/base-vue/src/views/modules/contract/temp-add-or-update的副本.vue
@@ -0,0 +1,249 @@
+<template>
+  <el-dialog
+  title="产品供应合同"
+  :close-on-click-modal="false"
+  :visible.sync="visible">
+  <div class="dialog_content" id="popupContent">
+    <div style="width: 100%;">
+      <div class="zd-row">
+        <div class="zd-col-12 item_p">需方：{{ dataForm.clientId }}</div>
+        <div class="zd-col-12 item_p">合同编号：{{ dataForm.contractNumber }}</div>
+      </div>
+      <div class="zd-row">
+        <div class="zd-col-12 item_p">供方：上海诺力智能科技有限公司</div>
+        <div class="zd-col-12 item_p">签订时间：</div>
+      </div>
+      <p class="tip_p">一、产品明细单</p>
+      <table class="det_table">
+        <tr>
+          <th width="6.25%">序号</th>
+          <th width="25%">产品名称+订货代码</th>
+          <th width="25%">型号</th>
+          <th width="6.25%">数量</th>
+          <th width="6.25%">单位</th>
+          <th width="12.5%">单价(元)</th>
+          <th width="12.5%">总价(元)</th>
+          <th width="6.25%">备注</th>
+        </tr>
+        <tr v-for="(e, i) in dataForm.materData" :key="i">
+          <td>{{ i+1 }}</td>
+          <td>{{ e.materialName }}<br/>{{ e.materialCode }}</td>
+          <td>{{ e.materialType }}</td>
+          <td>{{ e.quantity }}</td>
+          <td>{{ e.unit }}</td>
+          <td>{{ e.price }}</td>
+          <td>{{ e.total }}</td>
+          <td>{{ e.remark }}</td>
+        </tr>
+        <tr>
+          <td colspan="6" style="text-align: left">共计：</td>
+          <td>{{ dataForm.totalSum }}</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td colspan="6" style="text-align: left">共计人民币金额：（大写）{{ dataForm.totalSumChina }}</td>
+          <td colspan="2">含13%增值税</td>
+        </tr>
+      </table>
+      <p class="tip_p">二、质量要求、技术标准、供方对质量负责的条件和期限:技术标准符合行业标准。</p>
+      <p class="tip_p">三、售后服务:保修期6个月，人为造成的损坏不在质保范围内。</p>
+      <p class="tip_p">四、交货时间、地点:货期:待定;交货地:待客户通知。</p>
+      <p class="tip_p">五、运输方式及到达站和费用负担:由供方负担。</p>
+      <p class="tip_p">六、包装标准:按国内标准包装。</p>
+      <p class="tip_p">八、结算方式:款到发货，付款方式:电汇。</p>
+      <p class="tip_p">八、违约责任:按《中华人民共和国民法典》执行。</p>
+      <p class="tip_p">九、解决合同纠纷的方式:买卖双方首先友好协商解决，协商不成，任何一方均可向有管辖权法院起诉。</p>
+      <p class="tip_p">十、其它约定事项:合同扫描件有效，签字盖章之日起生效。</p>
+      <table class="det_table det_table_1">
+        <tr>
+          <th width="50%">需方：</th>
+          <th width="50%">供方：</th>
+        </tr>
+        <tr>
+          <td>
+            <div>单位名称:</div>
+            <div>地址:</div>
+            <div>委托代理电话:</div>
+            <div>传真:</div>
+            <div>开户银行:</div>
+            <div>帐号:</div>
+          </td>
+          <td>
+            <div>单位名称:上海诺力智能科技有限公司(盖章)</div>
+            <div>地址:上海青浦区徐泾镇高光路215弄99号4号楼302室</div>
+            <div>委托代理电话:</div>
+            <div>传真:</div>
+            <div>开户银行:招商银行虹桥支行</div>
+            <div>帐号:12191702501091</div>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="mini" @click="visible = false">取消</el-button>
+      <el-button size="mini" type="primary" @click="addAndPrint">打印</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getLodop } from '@/utils/lodop/LodopFuncs'
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        contractId: 0,
+        clientId: null,
+        contractNumber: null,
+        materData: [],
+        totalSum: null,
+        totalSumChina: null
+      },
+      dataList: [{materialCode: 'S9410002000002'}, {materialCode: 'S9410002000003'}]
+    }
+  },
+  methods: {
+    init (id) {
+      this.dataForm.contractId = id || 0
+      this.visible = true
+      this.$nextTick(() => {
+        if (this.dataForm.contractId) {
+          this.$http({
+              url: this.$http.adornUrl(`/flow/contract/info/${this.dataForm.contractId}`),
+              method: 'get',
+              params: this.$http.adornParams()
+            }).then(({data}) => {
+              if (data && data.code === 0) {
+                this.dataForm.contractNumber = data.contract.contractNumber
+                this.dataForm.clientId = data.contract.clientId
+                this.dataForm.materData = JSON.parse(data.contract.materialJson).material
+                this.dataForm.totalSum = JSON.parse(data.contract.materialJson).total
+                this.dataForm.totalSumChina = this.toChineseCurrency(this.dataForm.totalSum)               
+              }
+            })
+        }
+      })
+    },
+    toChineseCurrency (amount) {
+      if (amount === 0) return '零元整'
+      const units = ['', '拾', '佰', '仟', '万', '拾', '佰', '仟', '亿']
+      const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
+      const result = []
+      // 将金额转换为整数部分和小数部分
+      const integerPart = Math.floor(amount) // 整数部分
+      const decimalPart = amount - integerPart // 小数部分
+      // 处理整数部分
+      let integerStr = integerPart.toString()
+      for (let i = 0; i < integerStr.length; i++) {
+        const digit = integerStr[integerStr.length - 1 - i];
+        if (digit !== '0') {
+          result.push(digits[digit], units[i])
+        } else if (!result.includes('零') && result.length > 0) {
+          result.push('零')
+        }
+      }
+      // 处理小数部分
+      if (decimalPart > 0) {
+        const decimalStr = (decimalPart * 100).toFixed(0).padStart(2, '0') // 小数部分乘以100并转为字符串
+        if (decimalStr !== '00') {
+          result.push('点')
+          for (let i = 0; i < decimalStr.length; i++) {
+            result.push(digits[decimalStr[i]])
+          }
+        }
+      }
+      // 去掉多余的零
+      while (result[0] === '零') {
+        result.shift()
+      }
+      return result.join('') + (decimalPart > 0 ? '元' : '元整')
+    },
+    // 打印
+    addAndPrint () {
+      const LODOP = getLodop()
+      LODOP.PRINT_INITA('0mm', '0mm', '213mm', '297mm', '打印合同模板')
+      LODOP.SET_PRINT_PAGESIZE(1, 2100, 2970, 'A4')
+      LODOP.ADD_PRINT_TEXT(0, 0, '0', '0', '')
+      // 获取弹窗内容并转换为 HTML 字符串
+      const h1Content = `<h1>产品供销合同</h1>`
+      const popupContent = document.getElementById('popupContent').innerHTML
+      const printHtml = `
+        <style>
+          h1 {font-size: 14px;line-height: 1;text-align: center;margin-bottom: 30px;}
+          .zd-row {width: 100%;display: flex;}
+          .zd-col-12 {width: 50%;}
+          .dialog_content {width: 100%;font-family: '黑体'}
+          .item_p {font-size: 14px;color: #000;line-height: 1.5;padding-bottom: 12px;}
+          .tip_p {font-size: 14px;line-height: 1.5;margin: 0;}
+          .det_table {width: 100%;table-layout: fixed;width: 100%; border-collapse: collapse;border: 1px solid #000;}
+          .det_table th {font-size: 12px;color: #000;line-height: 23px;padding: 4px;border: 1px solid #000;text-align: center;}
+          .det_table td {font-size: 13px;color: #000;line-height: 23px;padding: 4px;border: 1px solid #000;text-align: center;}
+          .det_table_1 th, .det_table_1 td {text-align: left;}
+        </style>
+        ${h1Content}
+        ${popupContent}
+      `
+      // 添加弹窗内容到打印任务
+      LODOP.ADD_PRINT_HTM(0, '5%', '90%', '90%', printHtml)
+      // LODOP.PREVIEW()
+      LODOP.PRINT()
+    },
+  }
+}
+</script>
+
+<style scoped>
+.zd-row {
+  width: 100%;
+  display: flex;
+}
+.zd-col-12 {
+  width: 50%;
+}
+.dialog_content {
+  width: 100%;
+}
+.item_p {
+  font-size: 14px;
+  color: #606266;
+  line-height: 1.5;
+  padding-bottom: 12px;
+}
+.tip_p {
+  font-size: 14px;
+  font-weight: 700;
+  color: #606266;
+  line-height: 1.5;
+  margin: 0;
+}
+.det_table {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  border: 1px solid #EBEEF5;
+  margin-top: 10px;
+}
+.det_table th {
+  font-size: 13px;
+  line-height: 23px;
+  color: #515a6e;
+  padding: 6px 6px;
+  font-weight: 700;
+  border: 1px solid #EBEEF5;
+  text-align: center;
+  background-color: #f5f5f5;
+}
+.det_table td {
+  font-size: 12px;
+  line-height: 23px;
+  color: #606266;
+  padding: 6px 6px;
+  border: 1px solid #EBEEF5;
+  text-align: center;
+}
+.det_table_1 th, .det_table_1 td {
+  text-align: left;
+}
+</style>