离线合同查询

src/views/PurchasingCenter/FundApproval1/index.vue

@@ -118,7 +118,7 @@
       </div>
     </el-card>
     <h3 style="margin-top: 0">采购合同</h3>
-    <div id="print" class="print" style="min-height:500px;margin: 0px auto;width:800px;border:1px solid black" v-html="contractDetail1"/>
+    <div id="print" class="print" style="background-color:white;min-height:500px;margin: 0px auto;width:800px;border:1px solid black" v-html="contractDetail1"/>
     <h3 style="">离线合同</h3>
     <el-table v-loading="" :data="contractDetail2" :summary-method="getSummaries" border style="margin-top:10px;max-height: 500px;" height="500px" size="mini" show-summary>
       <el-table-column label="离线合同编号" align="center" min-width="150">

src/views/PurchasingCenter/FundApproval2/index.vue

@@ -118,9 +118,9 @@
       </div>
     </el-card>
     <h3 id="firstAnchor" style="margin-top: 0">采购合同</h3>
-    <div id="print" class="print" style="min-height:500px;margin: 0px auto;width:800px;border:1px solid black" v-html="contractDetail1"/><hr>
+    <div id="print" class="print" style="background-color:white;min-height:500px;margin: 0px auto;width:800px;border:1px solid black" v-html="contractDetail1"/><hr>
     <h3 id="secondAnchor" style="">离线合同</h3>
-    <div id="offlineContract" style="min-height:500px;margin: 0 auto;width: 800px;border:1px solid black">
+    <div id="offlineContract" style="background-color:white;min-height:500px;margin: 0 auto;width: 800px;border:1px solid black">
       <table v-show="contractDetail2.length > 0" class="offlineContract" cellspacing="0px" align="center" border="1 solid black" width="100%">
         <tr>
           <th colspan="14"><h1>离线合同</h1></th>

src/views/PurchasingCenter/OfflineContractSearch/index.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div slot="header">
+        <el-row>
+          <span>合同编号:</span>
+          <el-input v-model="contractNumber" placeholder="合同编号" size="small" clearable style="width:180px"/>
+          <span>供应商:</span>
+          <el-input v-model="supplierName" placeholder="供应商" size="small" clearable style="width:180px"/>
+          <el-button
+            type="success"
+            size="small"
+            icon="el-icon-search"
+            style="margin-left:10px"
+            @click="total1=0;pageCurrent1=1;pageSize1=10;searchTable1()">查询</el-button>
+        </el-row>
+      </div>
+      <el-table
+        v-loading="loading1"
+        id="expandTable"
+        :data="tableData1"
+        size="mini"
+        border
+        style="width: 100%;max-height: 350px;"
+        height="350px"
+        highlight-current-row
+        @row-click="searchTable2">
+        <el-table-column label="供应商" align="center" min-width="220">
+          <template slot-scope="scope">
+            {{ scope.row.供应商名称 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="离线合同名称" align="center" min-width="150">
+          <template slot-scope="scope">
+            {{ scope.row.离线合同名称 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="离线合同编号" align="center" min-width="160">
+          <template slot-scope="scope">
+            {{ scope.row.离线合同编号 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="采购员" align="center" min-width="60">
+          <template slot-scope="scope">
+            {{ scope.row.采购员 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="总金额" align="center" min-width="60">
+          <template slot-scope="scope">
+            {{ scope.row.合同总额 }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="block" style="margin-top: 10px;">
+        <el-pagination
+          :current-page="pageCurrent1"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="pageSize1"
+          :total="total1"
+          style="display:inline-block;width:50%"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange1"
+          @current-change="handleCurrentChange1"/>
+      </div>
+    </el-card>
+    <div id="offlineContract" style="background-color:white;min-height:500px;margin: 0 auto;width: 800px;border:1px solid black">
+      <table v-show="contractDetail.length > 0" class="offlineContract" cellspacing="0px" align="center" border="1 solid black" width="100%">
+        <tr>
+          <th colspan="14"><h1>离线合同</h1></th>
+        </tr>
+        <tr>
+          <td colspan="3" rowspan="2" style="text-align:center;font-size: 30px;font-weight: bold">GAOJING</td>
+          <td width="80px">合同名称</td>
+          <td id="contractName" colspan="2" style="text-align: left;"/>
+          <td width="80px">供应商</td>
+          <td id="supplier" colspan="5" style="text-align: left;"/>
+          <td id="qrCode" colspan="2" rowspan="2"/>
+        </tr>
+        <tr>
+          <td width="80px">合同编号</td>
+          <td id="contractNum" colspan="2" style="text-align: left;"/>
+          <td width="80px">采购员</td>
+          <td id="buyer" colspan="5" style="text-align: left;"/>
+        </tr>
+        <tr id="tablehead">
+          <td width="50px">序号</td>
+          <td colspan="2">名称</td>
+          <td>规格</td>
+          <td colspan="2">型号</td>
+          <td>数量</td>
+          <td colspan="2">单价</td>
+          <td colspan="2">合计</td>
+          <td>交货期</td>
+          <td colspan="2">备注</td>
+        </tr>
+        <tr>
+          <td>总计</td>
+          <td id="remark" colspan="10"/>
+          <td id="total" colspan="2" style="text-align: left;"/>
+          <td/>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { searchOfflineContract, searchOfflineContractContent } from '@/api/PurchasingCenter/OfflineContractSearch'
+import QRCode from 'qrcode'
+import $ from 'jquery'
+export default {
+  name: 'OfflineContractSearch',
+  data() {
+    return {
+      contractNumber: '',
+      supplierName: '',
+      total1: 0,
+      pageCurrent1: 1,
+      pageSize1: 10,
+      tableData1: [],
+      loading1: false,
+      contractDetail: []
+    }
+  },
+  created() {
+    this.searchTable1()
+  },
+  methods: {
+    // 查合同列表
+    searchTable1() {
+      let check1, check2
+      this.contractNumber ? check1 = 1 : check1 = 0
+      this.supplierName ? check2 = 1 : check2 = 0
+      this.loading1 = true
+      searchOfflineContract(this.pageCurrent1, this.pageSize1, check1, this.contractNumber, check2, this.supplierName).then(response => {
+        this.tableData1 = response.data.rows
+        this.total1 = response.data.total
+        this.loading1 = false
+      })
+    },
+    // 离线合同列表分页
+    handleSizeChange1(val) {
+      this.pageSize1 = val
+      this.searchTable1()
+    },
+    // 离线合同列表分页
+    handleCurrentChange1(val) {
+      this.pageCurrent1 = val
+      this.searchTable1()
+    },
+    searchTable2(row) {
+      searchOfflineContractContent(row.离线合同流水号).then(response => {
+        this.contractDetail = response.data
+        this.showOffline(row)
+      })
+    },
+    showOffline(row) {
+      const children = document.getElementsByClassName('tableData')
+      const parent = document.getElementsByClassName('offlineContract')[0]
+      if (children.length !== 0) {
+        for (let i = children.length - 1; i >= 0; i--) {
+          parent.removeChild(children[i])
+        }
+      }
+      const tr = []
+      let length = 0
+      this.contractDetail.length < 15 ? length = 15 : length = this.contractDetail.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 style="height: 40px"/><td colspan="2" style="height: 40px"/><td style="height: 40px"/><td colspan="2" style="height: 40px"/><td colspan="2" style="height: 40px"/><td style="height: 40px"/><td colspan="2" style="height: 40px"/>`
+        $('#tablehead').after(tr[i])
+      }
+      let total = 0
+      for (let j = 0; j < this.contractDetail.length; j++) {
+        document.getElementsByClassName('tableData')[j].children[0].innerHTML = j + 1
+        document.getElementsByClassName('tableData')[j].children[1].innerHTML = this.contractDetail[j].物料名称
+        document.getElementsByClassName('tableData')[j].children[2].innerHTML = this.contractDetail[j].物料规格
+        document.getElementsByClassName('tableData')[j].children[3].innerHTML = this.contractDetail[j].物料型号
+        document.getElementsByClassName('tableData')[j].children[4].innerHTML = this.contractDetail[j].数量
+        document.getElementsByClassName('tableData')[j].children[5].innerHTML = this.contractDetail[j].单价
+        document.getElementsByClassName('tableData')[j].children[6].innerHTML = (this.contractDetail[j].数量 * this.contractDetail[j].单价).toFixed(2)
+        document.getElementsByClassName('tableData')[j].children[7].innerHTML = this.contractDetail[j].交货期要求
+        document.getElementsByClassName('tableData')[j].children[8].innerHTML = this.contractDetail[j].备注
+        total += Number(this.contractDetail[j].数量 * this.contractDetail[j].单价)
+      }
+      total = total.toFixed(2)
+      document.getElementById('contractNum').innerHTML = row.离线合同编号
+      document.getElementById('contractName').innerHTML = row.离线合同名称
+      document.getElementById('supplier').innerHTML = row.供应商名称
+      document.getElementById('buyer').innerHTML = row.采购员
+      document.getElementById('total').innerHTML = total
+      document.getElementById('remark').innerHTML = row.离线合同备注
+      $('#qrCode').html(`<img id="img">`)
+      this.useqrcode(row.离线合同流水号) // 显示二维码
+    },
+    useqrcode(contractNum) { // 二维码
+      const opts = {
+        errorCorrectionLevel: 'H',
+        type: 'image/jpeg',
+        rendererOpts: {
+          quality: 0.3
+        }
+      }
+      const str = contractNum
+      QRCode.toDataURL(str, opts, function(err, url) {
+        if (err) throw err
+        const img = document.getElementById('img')
+        img.src = url
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-card{
+    margin-bottom: 15px;
+  }
+  .el-date-editor{
+    width:200px
+  }
+  .el-select{
+    width:200px
+  }
+  .el-input{
+    width:200px
+  }
+  span{
+    margin: 10px 0 10px 10px;
+  }
+  .searchForm .el-form-item{
+    margin-bottom: 5px;
+  }
+  .el-tag{
+    margin: 0
+  }
+</style>

src/views/PurchasingCenter/PurchaseContractApproval/index.vue

@@ -115,7 +115,7 @@
       </div>
     </el-card>
 
-    <div style="min-height:500px;margin: 0px auto;width:800px;border:1px solid black" v-html="returns"/>
+    <div style="background-color:white;min-height:500px;margin: 0px auto;width:800px;border:1px solid black" v-html="returns"/>
 
     <el-dialog :visible.sync="dialogVisible3" title="审批" center style="min-height: 300px;" width="370px">
       <el-form ref="form2" :model="form2" :rules="rules2" label-position="left" label-width="110px" class="demo-ruleForm">
@@ -142,7 +142,8 @@
 
 <script>
 import { initContract, initBuyer, searchTable1, searchTable2, submitApproval } from '@/api/PurchasingCenter/PurchaseContractApproval'
-
+import QRCode from 'qrcode'
+import $ from 'jquery'
 export default {
   data() {
     return {
@@ -273,6 +274,24 @@ export default {
       this.contractValue = parseInt(row.采购合同流水号)
       searchTable2(this.contractValue).then(response => {
         this.returns = response.data[0].合同内容
+      }).then(() => {
+        $('#contractName').next('td').html(`<img id="img">`)
+        this.useqrcode(row.采购合同流水号) // 显示二维码
+      })
+    },
+    useqrcode(contractNum) { // 二维码
+      const opts = {
+        errorCorrectionLevel: 'H',
+        type: 'image/jpeg',
+        rendererOpts: {
+          quality: 0.3
+        }
+      }
+      const str = contractNum
+      QRCode.toDataURL(str, opts, function(err, url) {
+        if (err) throw err
+        const img = document.getElementById('img')
+        img.src = url
       })
     }
   }

src/views/PurchasingCenter/PurchaseContractSearch/index.vue

@@ -185,7 +185,7 @@
           @current-change="handleCurrentChange1"/>
       </div>
     </el-card>
-    <div id="print" class="print" style="min-height:500px;margin: 0px auto;width:800px;border:1px solid black" v-html="returns"/>
+    <div id="print" class="print" style="background-color:white;min-height:500px;margin: 0px auto;width:800px;border:1px solid black" v-html="returns"/>
     <el-card v-show="searchView">
       <!--将新一般处理页添加至通讯服务器-->
       <div>附件图：</div>