创建采购合同

src/api/PurchasingCenter/CreatePurchaseContract.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 查询询价单列表 表1
+export function searchInquirySheet(check1, value1, check2, value2, check3, id) {
+  return request({
+    url: '',
+    method: 'post',
+    data: {
+      type: '1',
+      name: '采购管理_询价单_查询数据',
+      param: `供应商名称_check=${check1}&供应商名称=${value1}&询价单编号_check=${check2}&询价单编号=${value2}&采购员流水号_check=${check3}&采购员流水号=${id}`
+    }
+  })
+}
+// 根据询价单流水号查询物料详情
+export function searchSheetContract(num1) {
+  return request({
+    url: '',
+    method: 'post',
+    data: {
+      type: '1',
+      name: '采购管理_询价单明细_查询数据_根据询价单',
+      param: '询价单流水号=' + num1
+    }
+  })
+}

src/components/Tinymce/components/editorImage.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="upload-container">
+    <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">上传图片
+    </el-button>
+    <el-dialog :visible.sync="dialogVisible">
+      <el-upload
+        :multiple="true"
+        :file-list="fileList"
+        :show-file-list="true"
+        :on-remove="handleRemove"
+        :on-success="handleSuccess"
+        :before-upload="beforeUpload"
+        class="editor-slide-upload"
+        action="https://httpbin.org/post"
+        list-type="picture-card">
+        <el-button size="small" type="primary">点击上传</el-button>
+      </el-upload>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import { getToken } from 'api/qiniu'
+
+export default {
+  name: 'EditorSlideUpload',
+  props: {
+    color: {
+      type: String,
+      default: '#1890ff'
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      listObj: {},
+      fileList: []
+    }
+  },
+  methods: {
+    checkAllSuccess() {
+      return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
+    },
+    handleSubmit() {
+      const arr = Object.keys(this.listObj).map(v => this.listObj[v])
+      if (!this.checkAllSuccess()) {
+        this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！')
+        return
+      }
+      this.$emit('successCBK', arr)
+      this.listObj = {}
+      this.fileList = []
+      this.dialogVisible = false
+    },
+    handleSuccess(response, file) {
+      const uid = file.uid
+      const objKeyArr = Object.keys(this.listObj)
+      for (let i = 0, len = objKeyArr.length; i < len; i++) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          this.listObj[objKeyArr[i]].url = response.files.file
+          this.listObj[objKeyArr[i]].hasSuccess = true
+          return
+        }
+      }
+    },
+    handleRemove(file) {
+      const uid = file.uid
+      const objKeyArr = Object.keys(this.listObj)
+      for (let i = 0, len = objKeyArr.length; i < len; i++) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          delete this.listObj[objKeyArr[i]]
+          return
+        }
+      }
+    },
+    beforeUpload(file) {
+      const _self = this
+      const _URL = window.URL || window.webkitURL
+      const fileName = file.uid
+      this.listObj[fileName] = {}
+      return new Promise((resolve, reject) => {
+        const img = new Image()
+        img.src = _URL.createObjectURL(file)
+        img.onload = function() {
+          _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
+        }
+        resolve(true)
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.editor-slide-upload {
+  margin-bottom: 20px;
+  /deep/ .el-upload--picture-card {
+    width: 100%;
+  }
+}
+</style>

src/components/Tinymce/index.vue

@@ -0,0 +1,204 @@
+<template>
+  <div :class="{fullscreen:fullscreen}" class="tinymce-container editor-container">
+    <textarea :id="tinymceId" class="tinymce-textarea"/>
+    <div class="editor-custom-btn-container">
+      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import editorImage from './components/editorImage'
+import plugins from './plugins'
+import toolbar from './toolbar'
+
+export default {
+  name: 'Tinymce',
+  components: { editorImage },
+  props: {
+    id: {
+      type: String,
+      default: function() {
+        return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
+      }
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    toolbar: {
+      type: Array,
+      required: false,
+      default() {
+        return []
+      }
+    },
+    menubar: {
+      type: String,
+      default: 'file edit insert view format table'
+    },
+    height: {
+      type: Number,
+      required: false,
+      default: 360
+    }
+  },
+  data() {
+    return {
+      hasChange: false,
+      hasInit: false,
+      tinymceId: this.id,
+      fullscreen: false,
+      languageTypeList: {
+        'en': 'en',
+        'zh': 'zh_CN'
+      }
+    }
+  },
+  computed: {
+    language() {
+      return 'zh_CN'
+    }
+  },
+  watch: {
+    value(val) {
+      if (!this.hasChange && this.hasInit) {
+        this.$nextTick(() =>
+          window.tinymce.get(this.tinymceId).setContent(val || ''))
+      }
+    },
+    language() {
+      this.destroyTinymce()
+      this.$nextTick(() => this.initTinymce())
+    }
+  },
+  mounted() {
+    this.initTinymce()
+  },
+  activated() {
+    this.initTinymce()
+  },
+  deactivated() {
+    this.destroyTinymce()
+  },
+  destroyed() {
+    this.destroyTinymce()
+  },
+  methods: {
+    initTinymce() {
+      const _this = this
+      window.tinymce.init({
+        language: this.language,
+        selector: `#${this.tinymceId}`,
+        height: this.height,
+        body_class: 'panel-body ',
+        object_resizing: false,
+        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
+        menubar: this.menubar,
+        plugins: plugins,
+        end_container_on_empty_block: true,
+        powerpaste_word_import: 'clean',
+        code_dialog_height: 450,
+        code_dialog_width: 1000,
+        advlist_bullet_styles: 'square',
+        advlist_number_styles: 'default',
+        imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
+        default_link_target: '_blank',
+        link_title: false,
+        nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
+        init_instance_callback: editor => {
+          if (_this.value) {
+            editor.setContent(_this.value)
+          }
+          _this.hasInit = true
+          editor.on('NodeChange Change KeyUp SetContent', () => {
+            this.hasChange = true
+            this.$emit('input', editor.getContent())
+          })
+        },
+        setup(editor) {
+          editor.on('FullscreenStateChanged', (e) => {
+            _this.fullscreen = e.state
+          })
+        }
+        // 整合七牛上传
+        // images_dataimg_filter(img) {
+        //   setTimeout(() => {
+        //     const $image = $(img);
+        //     $image.removeAttr('width');
+        //     $image.removeAttr('height');
+        //     if ($image[0].height && $image[0].width) {
+        //       $image.attr('data-wscntype', 'image');
+        //       $image.attr('data-wscnh', $image[0].height);
+        //       $image.attr('data-wscnw', $image[0].width);
+        //       $image.addClass('wscnph');
+        //     }
+        //   }, 0);
+        //   return img
+        // },
+        // images_upload_handler(blobInfo, success, failure, progress) {
+        //   progress(0);
+        //   const token = _this.$store.getters.token;
+        //   getToken(token).then(response => {
+        //     const url = response.data.qiniu_url;
+        //     const formData = new FormData();
+        //     formData.append('token', response.data.qiniu_token);
+        //     formData.append('key', response.data.qiniu_key);
+        //     formData.append('file', blobInfo.blob(), url);
+        //     upload(formData).then(() => {
+        //       success(url);
+        //       progress(100);
+        //     })
+        //   }).catch(err => {
+        //     failure('出现未知问题，刷新页面，或者联系程序员')
+        //     console.log(err);
+        //   });
+        // },
+      })
+    },
+    destroyTinymce() {
+      if (window.tinymce.get(this.tinymceId)) {
+        window.tinymce.get(this.tinymceId).destroy()
+      }
+    },
+    setContent(value) {
+      window.tinymce.get(this.tinymceId).setContent(value)
+    },
+    getContent() {
+      window.tinymce.get(this.tinymceId).getContent()
+    },
+    imageSuccessCBK(arr) {
+      const _this = this
+      arr.forEach(v => {
+        window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tinymce-container {
+  position: relative;
+}
+.tinymce-container>>>.mce-fullscreen {
+  z-index: 10000;
+}
+.tinymce-textarea {
+  visibility: hidden;
+  z-index: -1;
+}
+.editor-custom-btn-container {
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  /*z-index: 2005;*/
+}
+.fullscreen .editor-custom-btn-container {
+  z-index: 10000;
+  position: fixed;
+}
+.editor-upload-btn {
+  display: inline-block;
+}
+</style>

src/components/Tinymce/plugins.js

@@ -0,0 +1,7 @@
+// Any plugins you want to use has to be imported
+// Detail plugins list see https://www.tinymce.com/docs/plugins/
+// Custom builds see https://www.tinymce.com/download/custom-builds/
+
+const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
+
+export default plugins

src/components/Tinymce/toolbar.js

@@ -0,0 +1,6 @@
+// Here is a list of the toolbar
+// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
+
+const toolbar = ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']
+
+export default toolbar

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>