导出整理

2018-12-22 15:31:20 +08:00
parent e3dd21418f
commit d279a06c01
4 changed files with 72 additions and 22 deletions
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
    "html2canvas": "^1.0.0-alpha.12",
    "jquery": "^3.3.1",
    "js-cookie": "2.2.0",
-    "jspdf": "^1.4.1",
+    "jspdf": "^1.5.2",
    "node-sass": "^4.10.0",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
--- a/src/views/PurchasingCenter/CreateInquirySheet/exportExcel.js
+++ b/src/views/PurchasingCenter/CreateInquirySheet/exportExcel.js
@@ -5,7 +5,7 @@ export function exportExcelMethod(tableId, fileName, sheetName) {
 const tableToExcel = (function() {
  const uri = 'data:application/vnd.ms-excel;base64,'
  // 设置导出表格的单元格默认高度/宽度/边框样式/字体颜色/背景颜色/居中，网页显示表格宽度建议1240，tr/td视情况而定
-  const template = `<html xmlns:x="urn:schemas-microsoft-com:office:excel"><head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><meta charset="UTF-8"><style type="text/css">table td {border: 2px solid #000000;width:100px;text-align: center;color: #000000;}</style></head><body><table>{table}</table></body></html>`
+  const template = `<html xmlns:x="urn:schemas-microsoft-com:office:excel"><head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><meta charset="UTF-8"><style type="text/css">table td {border: 2px solid #000000;height:40px;text-align: center;color: #000000;}</style></head><body><table>{table}</table></body></html>`
  const base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
  const format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p] }) }
  return function(table, filename, sheetname) {
--- a/src/views/PurchasingCenter/CreateInquirySheet/index.vue
+++ b/src/views/PurchasingCenter/CreateInquirySheet/index.vue
@@ -295,12 +295,12 @@
            {{ scope.row.组件零件流水号 ? scope.row.物料规格 : scope.row.规格 }}
          </template>
        </el-table-column>
-        <el-table-column label="数量" align="center" min-width="100">
+        <el-table-column label="数量" align="center" min-width="90">
          <template slot-scope="scope">
            {{ scope.row.数量 }}
          </template>
        </el-table-column>
-        <el-table-column label="询价单编号" align="center" min-width="70">
+        <el-table-column label="询价单编号" align="center" min-width="150">
          <template slot-scope="scope">
            {{ scope.row.询价单编号 }}
          </template>
@@ -313,6 +313,37 @@
      </el-table>
    </el-card>

+    <div id="inquirySheet" style="width: 1000px;margin: 0 auto;display:none">
+      <table class="inquirySheet" cellspacing="0px" align="center" border="1 solid black" width="100%">
+        <tr>
+          <th style="border: none;text-align:left;font-size: 30px;font-weight: bold" colspan="3"><div style="margin: 10px;">GAOJING</div></th>
+          <th style="border: none;text-align:center;font-size: 30px;font-weight: bold" colspan="8"><div style="margin: 10px;">采购询价单</div></th>
+          <th style="border: none;" colspan="3"/>
+        </tr>
+        <tr>
+          <td style="border: none;" colspan="2">询价单编号:</td>
+          <td id="inquirySheetNum" style="border: none;" colspan="4"/>
+          <td style="border: none;" colspan="2">供应商名称:</td>
+          <td id="supplier" style="border: none;" colspan="6"/>
+        </tr>
+        <tr id="tablehead">
+          <td width="8.3%">序号</td>
+          <td width="16.6%" colspan="2">图号</td>
+          <td width="16.6%" colspan="2">名称</td>
+          <td width="16.6%" colspan="2">规格</td>
+          <td width="16.6%" colspan="2">数量</td>
+          <td width="16.6%" colspan="2">单价</td>
+          <td colspan="3">备注</td>
+        </tr>
+        <tr>
+          <td colspan="2">合计</td>
+          <td colspan="5"/>
+          <td colspan="4"/>
+          <td colspan="3"/>
+        </tr>
+      </table>
+    </div>
+
    <el-dialog :visible.sync="dialogVisible1" title="供应商选择" center style="min-height: 300px">
      <el-form ref="form1" :model="form1" label-position="left" label-width="90px" class="searchForm">
        <el-row>
@@ -494,6 +525,7 @@
 import { searchMaterial, searchPart, searchSupplier, searchCreateInquirySheet, searchCreateInquirySheet2, searchSheetDetail, editInquirySheet,
  createInquirySheet, deleteInquirySheet, addInquirySheet1, addInquirySheet2, outInquirySheet, searchAllMaterial, materialChange } from '@/api/PurchasingCenter/CreateInquirySheet'
 import { mapGetters } from 'vuex'
+import { exportExcelMethod } from './exportExcel'

 export default {
  name: '', // 创建询价单
@@ -765,20 +797,34 @@ export default {
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
-        // import('@/vendor/Export2Excelcjn').then(excel => {
-        //   const tHeader = ['询价单编号', '供应商名称', '物料名称', '物料规格', '物料型号', '数量', '单价', '备注'] // 表头内容
-        //   const filterVal = ['询价单编号', '供应商名称', '物料名称', '物料规格', '物料型号', '零件数量'] // tableData3里的属性名
-        //   const list = this.tableData3
-        //   const data = list.map(v => filterVal.map(j => v[j]))
-        //   excel.export_json_to_excel({
-        //     header: tHeader,
-        //     data,
-        //     filename: row.询价单编号 + '_' + row.供应商名称,
-        //     autoWidth: true,
-        //     bookType: 'xlsx'
-        //   })
-        // })
-      }).catch(() => {
+        const children = document.getElementsByClassName('tableData')
+        const parent = document.getElementsByClassName('inquirySheet')[0]
+        if (children.length !== 0) {
+          for (let i = children.length - 1; i >= 0; i--) {
+            parent.removeChild(children[i])
+          }
+        }
+        const tr = []
+        let length = 0
+        this.tableData3.length < 15 ? length = 15 : length = this.tableData3.length
+        for (let i = 0; i < length; i++) {
+          tr[i] = document.createElement('tr')
+          tr[i].setAttribute('class', 'tableData')
+          tr[i].innerHTML = `<td width="8.3%" height="30px"/><td height="30px" width="16.6%" colspan="2"/><td height="30px" width="16.6%" colspan="2"/><td height="30px" width="16.6%" colspan="2"/><td height="30px" width="16.6%" colspan="2"/><td height="30px" width="16.6%" colspan="2"/><td height="30px" colspan="3"/>`
+          document.getElementById('tablehead').after(tr[i])
+        }
+        for (let j = 0; j < this.tableData3.length; j++) {
+          document.getElementsByClassName('tableData')[j].children[0].innerHTML = j + 1
+          document.getElementsByClassName('tableData')[j].children[1].innerHTML = this.tableData3[j].物料型号 || this.tableData3[j].零件图号
+          document.getElementsByClassName('tableData')[j].children[2].innerHTML = this.tableData3[j].物料名称 || this.tableData3[j].零件名称
+          document.getElementsByClassName('tableData')[j].children[3].innerHTML = this.tableData3[j].物料规格 || this.tableData3[j].规格
+          document.getElementsByClassName('tableData')[j].children[4].innerHTML = this.tableData3[j].数量
+        }
+        document.getElementById('inquirySheetNum').innerHTML = row.询价单编号
+        document.getElementById('supplier').innerHTML = row.供应商名称
+        exportExcelMethod('inquirySheet', '采购询价单', '采购询价单sheet')
+      }).catch(res => {
+        console.log(res)
        this.$message({
          type: 'info',
          message: '已取消操作'
@@ -946,7 +992,7 @@ export default {
      this.materialOldValue = row.物料流水号
    },
    partChange(row) { // 零件变更 基本件
-      alert('没有基本件库，你想替换啥？')
+      alert('没有基本件库')
      console.log(row)
    },
    searchMaterial() {
@@ -988,6 +1034,10 @@ export default {
 </script>

 <style scoped>
+  .inquirySheet td{
+    height: 40px;
+    text-align: center;
+  }
  .el-card{
    margin-bottom: 15px;
  }
--- a/src/views/PurchasingCenter/OfflineContract/index.vue
+++ b/src/views/PurchasingCenter/OfflineContract/index.vue
@@ -462,7 +462,6 @@
 <script>
 import { searchInventoryNum, searchOfflineContract, searchOfflineContract2, searchSupplier, addOfflineContract, editOfflineContract, deleteOfflineContract, searchMateriel,
  addMateriel, deleteMateriel, doneOfflineContact, setSafeValue } from '@/api/PurchasingCenter/OfflineContract'
-// import { exportExcelMethod } from './exportExcel'
 import QRCode from 'qrcode'
 import $ from 'jquery'
 import { mapGetters } from 'vuex'
@@ -940,7 +939,9 @@ export default {
          }
        }
        const tr = []
-        for (let i = 0; i < this.tableData3.length; i++) {
+        let length = 0
+        this.tableData3.length < 15 ? length = 15 : length = this.tableData3.length
+        for (let i = 0; i < length; i++) {
          tr[i] = document.createElement('tr')
          tr[i].setAttribute('class', 'tableData')
          tr[i].innerHTML = `<td style="height: 40px"/><td colspan="2" style="height: 40px"/><td colspan="2" style="height: 40px"/><td colspan="2" style="height: 40px"/><td colspan="2" style="height: 40px"/><td colspan="2" style="height: 40px"/><td colspan="2" style="height: 40px"/><td style="height: 40px"/>`
@@ -963,7 +964,6 @@ export default {
        document.getElementById('supplier').innerHTML = row.供应商名称
        document.getElementById('buyer').innerHTML = row.采购员
        document.getElementById('total').innerHTML = total
-        // exportExcelMethod('offlineContract', '离线合同', '离线合同sheet')
        $('#qrCode').html(`<img id="img" style="display: block;margin: 0 auto">`)
        this.useqrcode(row.离线合同流水号) // 显示二维码
      }).then(() => {