创建采购合同

src/views/PurchasingCenter/CreatePurchaseContract/index.vue

@@ -0,0 +1,532 @@
+<template>
+  <div class="components-container">
+    <el-card>
+      <el-form label-width="90px" label-position="right">
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="合同编号:">
+              <el-select v-model="contractNumValue" filterable size="small" placeholder="合同编号" style="width:100%" @change="contractChange">
+                <el-option
+                  v-for="item in contractNums"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="供应商:">
+              <el-input v-model="supplierName" size="small" readonly/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="合同名称:">
+              <el-input v-model="contractName" size="small"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="是否含税:">
+              <el-input v-model="taxRate" size="small"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="1">
+            <el-tooltip :content="haTtax" placement="top">
+              <el-switch
+                v-model="haTtax"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                active-value="含税"
+                inactive-value="未税"
+                style="margin: 10px"/>
+            </el-tooltip>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="支付日期:">
+              <el-input v-model="payDate" size="small" type="textarea" rows="1"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="支付方式:">
+              <el-input v-model="payMethod" size="small" type="textarea" rows="1"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="开票信息:">
+              <el-input v-model="invoiceInfo" size="small" type="textarea" rows="1"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="其他说明:">
+              <el-input v-model="otherInfo" size="small" type="textarea" rows="1"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <el-table :data="tableData1" border style="margin-bottom: 10px;max-height: 300px;" height="300px" size="mini" show-summary>
+        <el-table-column label="序号" align="center" width="50" type="index"/>
+        <el-table-column label="物料计划到货时间" align="center" min-width="130">
+          <template slot-scope="scope">
+            <el-date-picker
+              v-model="scope.row.物料计划到货时间"
+              size="mini"
+              type="date"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"
+              style="width: 130px"/>
+          </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="150">
+          <template slot-scope="scope">
+            {{ scope.row.物料规格 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="订货数量" align="center" min-width="80">
+          <template slot-scope="scope">
+            {{ scope.row.订货数量 }}
+          </template>
+        </el-table-column>
+        <el-table-column v-show="haTtax==='未税'" label="单价（未税）" align="center" min-width="100">
+          <template slot-scope="scope">
+            <el-input v-show="haTtax==='未税'" v-model="scope.row.未税单价" size="mini" style="width:70px"/>
+            <span v-show="haTtax!=='未税'">—</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-show="haTtax==='含税'" label="单价（含税）" align="center" min-width="100">
+          <template slot-scope="scope">
+            <el-input v-show="haTtax==='含税'" v-model="scope.row.含税单价" size="mini" style="width:70px"/>
+            <span v-show="haTtax!=='含税'">—</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="总额（未税）" align="center" min-width="100" prop="未税总额">
+          <template slot-scope="scope">
+            {{ haTtax==='未税' ? scope.row.未税总额 = (Number(scope.row.订货数量) * Number(scope.row.未税单价)).toFixed(2) : scope.row.未税总额 = (scope.row.含税总额 / (1+taxRate)).toFixed(2) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="总额（含税）" align="center" min-width="100" prop="含税总额">
+          <template slot-scope="scope">
+            {{ haTtax==='含税' ? scope.row.含税总额 = (Number(scope.row.订货数量) * Number(scope.row.含税单价)).toFixed(2) : scope.row.含税总额 = (scope.row.未税总额 * (1+taxRate)).toFixed(2) }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <span>合同模板：</span>
+      <el-radio-group v-model="demoRadio" size="small" @change="demoChange">
+        <el-radio-button label="模板1"/>
+        <el-radio-button label="模板2"/>
+        <el-radio-button label="模板3"/>
+        <el-radio-button label="自定义"/>
+      </el-radio-group>
+      <el-button type="primary" plain size="small" style="margin-left:10px;" @click="editContract()">调整合同</el-button>
+      <el-button type="success" size="small" @click="generateContract()">生成合同</el-button>
+      <div style="float: right">
+        <span>合同总额：</span>
+        <el-input v-model="actualTotal" size="small" style="width: 100px"/>
+        <el-button type="primary" size="small" @click="submitTotal()">确定总额</el-button>
+      </div>
+      <hr>
+      <!--html代码-->
+      <div v-show="false">{{ content }}</div>
+      <!--富文本编辑器-->
+      <div v-show="!preview" id="tinymce" style="height:650px;">
+        <tinymce ref="tinymce" :height="500" v-model="contentNew" style="width:800px;margin: 0 auto"/>
+      </div>
+      <!--网页预览-->
+      <div v-show="preview" class="editor-content" style="min-height:500px;margin: 0px auto;width:800px;border:1px solid black" v-html="content"/>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import Tinymce from '@/components/Tinymce'
+import QRCode from 'qrcode'
+import { searchInquirySheet, searchSheetContract } from '@/api/PurchasingCenter/CreatePurchaseContract'
+import { convertCurrency } from '@/vendor/int2Chinese'
+import { mapGetters } from 'vuex'
+
+export default {
+  components: { Tinymce },
+  data() {
+    return {
+      haTtax: '未税',
+      taxRate: 0.16,
+      preview: false, // 预览
+      demoRadio: '自定义', // 模板radio
+      content: ``, // 合同格式模板
+      contentNew: ``, // tinymce的
+      contractName: '采购合同', // 合同名称
+      contractNum: '', // 合同编号
+      contractNums: [], // 合同编号数组
+      contractNumValue: '', // 合同流水号
+      supplierName: '', // 供应商名称
+      supplierAddress: '', // 供应商地址
+      untaxTotal: '', // 未税合计
+      tax: '', // 税额
+      taxTotal: '', // 含税合计
+      actualTotal: '', // 实际金额
+      actualTotal_zh: '', // 实际金额大写
+      payDate: '', // 支付日期
+      payMethod: '', // 支付方式
+      invoiceInfo: '', // 开票信息
+      otherInfo: '', // 其他说明
+      tableData1: []
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar',
+      'name',
+      'id'
+    ])
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      searchInquirySheet(0, 0, 0, 0, 1, this.id).then(response => { // 初始化询价单号
+        for (let i = 0; i < response.data.length; i++) {
+          this.contractNums.push({
+            value: response.data[i].询价单流水号,
+            label: response.data[i].询价单编号,
+            supplierName: response.data[i].供应商名称
+          })
+        }
+      })
+    },
+    submitTotal() { // 确定合同总额
+      this.$refs.tinymce.destroyTinymce()
+      document.getElementsByClassName('actualTotal')[0].innerHTML = this.actualTotal
+      document.getElementsByClassName('actualTotal')[1].innerHTML = this.actualTotal
+      document.getElementById('actualTotal_zh').innerHTML = convertCurrency(this.actualTotal)
+      this.contentNew = document.getElementsByClassName('editor-content')[0].innerHTML
+      this.$refs.tinymce.initTinymce()
+    },
+    contractChange() { // 选择合同select
+      for (let i = 0; i < this.contractNums.length; i++) {
+        if (this.contractNums[i].value === this.contractNumValue) {
+          this.supplierName = this.contractNums[i].supplierName
+          this.contractNum = this.contractNums[i].label
+        }
+      }
+      this.searchContractDetail()
+    },
+    searchContractDetail() { // 查询合同明细
+      this.tableData1 = []
+      searchSheetContract(this.contractNumValue).then(response => {
+        console.log(response.data)
+        for (let i = 0; i < response.data.length; i++) {
+          this.tableData1.push({
+            物料计划到货时间: response.data[i].物料计划到货时间,
+            物料名称: response.data[i].物料名称,
+            物料规格: response.data[i].物料规格,
+            订货数量: response.data[i].订货数量,
+            未税单价: 0,
+            未税总额: 0,
+            含税单价: 0,
+            含税总额: 0
+          })
+        }
+      })
+      console.log(this.tableData1)
+    },
+    demoChange() { // 模板change
+      switch (this.demoRadio) {
+        case '模板1':
+          this.demo1()
+          break
+        case '模板2':
+          this.demo2()
+          break
+        case '模板3':
+          this.demo3()
+          break
+        case '自定义':
+          this.customization()
+          break
+      }
+    },
+    demo1() { // 选择合同模板1
+      this.content = `
+<h1 style="text-align: center;">
+    <strong>采购合同</strong>
+</h1>
+<table style="border-collapse: collapse; width: 100%;" border="1">
+    <tbody>
+        <tr>
+            <td style="width: 25%; text-align: center;" rowspan="2">
+                <h1>
+                    <strong>GAOJING</strong>
+                </h1>
+            </td>
+            <td style="width: 25%;">
+                <h4 style="text-align: center;">合同名称：</h4>
+            </td>
+            <td id="contractName" style="width: 25%;">&nbsp;</td>
+            <td style="width: 25%;" rowspan="2"><img id="qrCode"></td>
+        </tr>
+        <tr>
+            <td style="width: 25%;">
+                <h4 style="text-align: center;">合同编号：</h4>
+            </td>
+            <td id="contractNum" style="width: 25%;">&nbsp;</td>
+        </tr>
+    </tbody>
+</table>
+<table style="border-collapse: collapse; width: 100%;" border="1">
+    <tbody>
+        <tr>
+            <td style="width: 25%;">买方：</td>
+            <td style="width: 25%;">江苏高精机电装配有限公司</td>
+            <td style="width: 25%;">卖方：</td>
+            <td id="supplierName" style="width: 25%;">&nbsp;</td>
+        </tr>
+        <tr>
+            <td style="width: 25%;">地址：</td>
+            <td style="width: 25%;">盐城市开放大道666号</td>
+            <td style="width: 25%;">地址：</td>
+            <td id="supplierAddress" style="width: 25%;">&nbsp;</td>
+        </tr>
+        <tr>
+            <td style="width: 25%;">法定代表人：</td>
+            <td style="width: 25%;">徐秀兵</td>
+            <td style="width: 25%;">法定代表人：</td>
+            <td style="width: 25%;">&nbsp;</td>
+        </tr>
+        <tr>
+            <td style="width: 25%;">电话：</td>
+            <td style="width: 25%;">&nbsp;</td>
+            <td style="width: 25%;">电话：</td>
+            <td style="width: 25%;">&nbsp;</td>
+        </tr>
+        <tr>
+            <td style="width: 25%;">传真：</td>
+            <td style="width: 25%;">&nbsp;</td>
+            <td style="width: 25%;">传真：</td>
+            <td style="width: 25%;">&nbsp;</td>
+        </tr>
+    </tbody>
+</table>
+<p>根据中华人民共和国合同法及相关法律法规，经买卖双方平等协商，就卖方向买方出售合同项下产品事宜达成一致，签订本合同（明细表及合同通用条款）如下：</p>
+<table style="border-collapse: collapse; width: 100%;"
+    border="1">
+    <tbody>
+        <tr>
+            <td style="width: 25%;">合同总额（人民币含税）：</td>
+            <td class="actualTotal" style="width: 25%;"></td>
+            <td style="width: 25%;">大写：</td>
+            <td id="actualTotal_zh" style="width: 25%;"></td>
+        </tr>
+        <tr>
+            <td style="width: 25%;">交货日期：</td>
+            <td style="width: 25%;" colspan="3">&nbsp;</td>
+        </tr>
+        <tr>
+            <td style="width: 25%;" rowspan="3">交货地点：</td>
+            <td style="width: 25%;">地址：</td>
+            <td style="width: 25%;" colspan="2">&nbsp;</td>
+        </tr>
+        <tr>
+            <td style="width: 25%;">联系人：</td>
+            <td style="width: 25%;" colspan="2">&nbsp;</td>
+        </tr>
+        <tr>
+            <td style="width: 25%;">联系电话：</td>
+            <td style="width: 25%;" colspan="2">&nbsp;</td>
+        </tr>
+        <tr>
+            <td style="width: 25%;">开票信息：</td>
+            <td style="width: 25%;" colspan="3">
+                <p id="invoiceInfo">&nbsp;</p>
+            </td>
+        </tr>
+        <tr>
+            <td style="width: 25%;">支付日期：</td>
+            <td style="width: 25%;" colspan="3">
+                <p id="payDate">&nbsp;</p>
+            </td>
+        </tr>
+        <tr>
+            <td style="width: 25%;">支付方式：</td>
+            <td style="width: 25%;" colspan="3">
+                <p id="payMethod">&nbsp;</p>
+            </td>
+        </tr>
+        <tr>
+            <td style="width: 25%;">其他说明：</td>
+            <td style="width: 25%;" colspan="3">
+                <p id="otherInfo">&nbsp;</p>
+            </td>
+        </tr>
+    </tbody>
+</table>
+<table style="border-collapse: collapse; width: 100%;" border="1">
+    <tbody>
+        <tr>
+            <td style="width: 50%;">
+                <p>买方：</p>
+                <p>（盖章）</p>
+                <p>授权代表人：_______________</p>
+                <p>&nbsp;</p>
+                <p>&nbsp;</p>
+            </td>
+            <td style="width: 50%;">
+                <p>卖方：</p>
+                <p>（盖章）</p>
+                <p>授权代表人：_______________&nbsp;</p>
+                <p>&nbsp;</p>
+                <p>&nbsp;</p>
+            </td>
+        </tr>
+    </tbody>
+</table>
+<p style="text-align: right;">日期：______年______月______日</p>
+<hr />
+<p style="text-align: center;">
+    <strong>明细表</strong>
+</p>
+<table style="border-collapse: collapse; width: 100%;" border="1">
+    <tbody id="tbody">
+        <tr id="tableHead">
+            <td style="width: 5%;">序号</td>
+            <td style="width: 10%;">图号</td>
+            <td style="width: 10%;">名称</td>
+            <td style="width: 10%;">规格型号</td>
+            <td style="width: 5%;">数量</td>
+            <td style="width: 10%;">单价金额</td>
+            <td style="width: 10%;">合计金额</td>
+            <td style="width: 12%;">交货时间</td>
+            <td style="width: 10%;">备注</td>
+        </tr>
+    </tbody>
+</table>
+<br>
+<span>未税合计：</span><span id="untaxTotal"></span><br><br>
+<span>税额：</span><span id="tax"></span><br><br>
+<span>含税总价（税率17%）：</span><span id="taxTotal"></span><br><br>
+<span>优惠后含税总价：</span><span class="actualTotal"></span><br><br>
+`
+    },
+    editContract() { // 选择一个询价单，整成合同明细
+      this.$refs.tinymce.destroyTinymce()
+      const opts = {
+        errorCorrectionLevel: 'H',
+        type: 'image/jpeg',
+        rendererOpts: {
+          quality: 0.3
+        }
+      }
+      const str = this.contractNumValue.toString()
+      QRCode.toDataURL(str, opts, function(err, url) {
+        if (err) throw err
+        if (document.getElementById('qrCode')) {
+          const img = document.getElementById('qrCode')
+          img.src = url
+        }
+      })
+      this.supplierAddress = '无锡市新区新畅南路3号'
+      document.getElementById('contractName') ? document.getElementById('contractName').innerHTML = this.contractName : ''
+      document.getElementById('contractNum') ? document.getElementById('contractNum').innerHTML = this.contractNum : ''
+      document.getElementById('supplierName') ? document.getElementById('supplierName').innerHTML = this.supplierName : ''
+      document.getElementById('supplierAddress') ? document.getElementById('supplierAddress').innerHTML = this.supplierAddress : ''
+      document.getElementById('payDate') ? document.getElementById('payDate').innerHTML = this.payDate : ''
+      document.getElementById('payMethod') ? document.getElementById('payMethod').innerHTML = this.payMethod : ''
+      document.getElementById('invoiceInfo') ? document.getElementById('invoiceInfo').innerHTML = this.invoiceInfo : ''
+      document.getElementById('otherInfo') ? document.getElementById('otherInfo').innerHTML = this.otherInfo : ''
+      // 明细表
+      // 移出旧数据
+      const children = document.getElementsByClassName('tableData')
+      const parent = document.getElementById('tbody')
+      if (children.length !== 0) {
+        for (let i = children.length - 1; i >= 0; i--) {
+          parent.removeChild(children[i])
+        }
+      }
+      // 放入新数据
+      const tr = []
+      for (let i = 0; i < this.tableData1.length; i++) {
+        tr[i] = document.createElement('tr')
+        tr[i].setAttribute('class', 'tableData')
+        tr[i].innerHTML = '<td style="width: 5%;"></td><td style="width: 10%;"></td><td style="width: 10%;"></td><td style="width: 10%;"></td><td style="width: 5%;"></td><td style="width: 10%;"></td><td style="width: 10%;"></td><td style="width: 12%;"></td><td style="width: 10%;"></td>'
+        document.getElementById('tableHead') ? document.getElementById('tableHead').after(tr[i]) : ''
+      }
+      this.actualTotal = 0
+      this.untaxTotal = 0
+      this.taxTotal = 0
+      for (let j = 0; j < this.tableData1.length; j++) {
+        this.actualTotal += Number(this.tableData1[j].含税总额)
+        this.untaxTotal += Number(this.tableData1[j].未税总额)
+        this.taxTotal += Number(this.tableData1[j].含税总额)
+        if (document.getElementsByClassName('tableData')[j]) {
+          document.getElementsByClassName('tableData')[j].children[0].innerHTML = j + 1
+          document.getElementsByClassName('tableData')[j].children[1].innerHTML = `图号` + j
+          document.getElementsByClassName('tableData')[j].children[2].innerHTML = this.tableData1[j].物料名称
+          document.getElementsByClassName('tableData')[j].children[3].innerHTML = this.tableData1[j].物料规格
+          document.getElementsByClassName('tableData')[j].children[4].innerHTML = this.tableData1[j].订货数量
+          this.haTtax === '含税' ? document.getElementsByClassName('tableData')[j].children[5].innerHTML = this.tableData1[j].含税单价 : document.getElementsByClassName('tableData')[j].children[5].innerHTML = this.tableData1[j].未税单价
+          document.getElementsByClassName('tableData')[j].children[6].innerHTML = Number(document.getElementsByClassName('tableData')[j].children[5].innerHTML) * Number(this.tableData1[j].订货数量)
+          document.getElementsByClassName('tableData')[j].children[7].innerHTML = this.tableData1[j].物料计划到货时间.split(' ')[0]
+          document.getElementsByClassName('tableData')[j].children[8].innerHTML = `备注` + j
+        }
+      }
+      this.actualTotal = this.actualTotal.toFixed(2)
+      this.actualTotal = this.untaxTotal.toFixed(2)
+      this.actualTotal = this.taxTotal.toFixed(2)
+      this.tax = this.taxTotal - this.untaxTotal
+      document.getElementById('untaxTotal') ? document.getElementById('untaxTotal').innerHTML = this.untaxTotal : ''
+      document.getElementById('tax') ? document.getElementById('tax').innerHTML = this.tax : ''
+      document.getElementById('taxTotal') ? document.getElementById('taxTotal').innerHTML = this.taxTotal : ''
+      document.getElementsByClassName('actualTotal') ? document.getElementsByClassName('actualTotal')[0].innerHTML = this.actualTotal : ''
+      document.getElementsByClassName('actualTotal') ? document.getElementsByClassName('actualTotal')[1].innerHTML = this.actualTotal : ''
+      document.getElementById('actualTotal_zh') ? document.getElementById('actualTotal_zh').innerHTML = this.actualTotal_zh : ''
+      this.contentNew = document.getElementsByClassName('editor-content')[0].innerHTML
+      this.$refs.tinymce.initTinymce()
+    },
+    demo2() {
+      this.content = `demo2`
+    },
+    demo3() {
+      this.content = `demo3`
+    },
+    customization() { // 自定义
+      this.content = `自定义`
+    },
+    generateContract() { // 生成采购合同
+      this.content = this.contentNew // 更新tinymce中的东西到html中，后续会用到
+      if (this.contractNumValue) {
+        this.$confirm('此操作将生成采购合同，确认完成编辑？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消操作'
+          })
+        })
+      } else {
+        this.$message.warning('请先选择合同进行编辑')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .editor-content{
+    margin-top: 20px;
+  }
+  span{
+    margin: 0 0 0 20px;
+  }
+</style>