contract demo

src/views/PurchasingCenter/CreatePurchaseContract/index.vue

@@ -129,26 +129,24 @@
           </template>
         </el-table-column>
       </el-table>
-      <span>合同模板：</span>
+      <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-button label="模板2" disabled/>
+        <!--<el-radio-button label="自定义" disabled/>-->
       </el-radio-group>
       <el-button type="primary" plain size="small" style="margin-left:10px;" @click="editContract()">预览合同</el-button>
-      <span>合同总额：</span>
+      <span>②确认合同总额：</span>
       <el-input v-model="actualTotal" size="small" style="width: 100px"/>
-      <el-button type="primary" size="small" @click="submitTotal()">确定总额</el-button>
-      <div style="float: right">
-        <el-button type="success" size="small" @click="generateContract()">递交审批</el-button>
-      </div>
+      <el-button type="primary" size="small" @click="submitTotal()">确认</el-button>
+      <span>③递交审批：</span>
+      <el-button type="success" size="small" @click="generateContract()">递交</el-button>
       <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 v-show="!preview" id="tinymce" style="height:850px;">
+        <tinymce ref="tinymce" :height="700" 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"/>
@@ -161,7 +159,8 @@ import Tinymce from '@/components/Tinymce'
 import { searchInquirySheet, searchSheetContract, doneContract } from '@/api/PurchasingCenter/CreatePurchaseContract'
 import { convertCurrency } from '@/vendor/int2Chinese'
 import { mapGetters } from 'vuex'
-
+import $ from 'jquery'
+import { sleep } from '@/utils/tool'
 export default {
   components: { Tinymce },
   inject: ['reload'],
@@ -170,7 +169,7 @@ export default {
       hasTax: '未税',
       taxRate: 0.16,
       preview: false, // 预览
-      demoRadio: '自定义', // 模板radio
+      demoRadio: '模板1', // 模板radio
       content: ``, // 合同格式模板
       contentNew: ``, // tinymce的
       contractName: '采购合同', // 合同名称
@@ -203,8 +202,6 @@ export default {
   },
   computed: {
     ...mapGetters([
-      'sidebar',
-      'avatar',
       'name',
       'id'
     ])
@@ -278,12 +275,9 @@ export default {
         case '模板2':
           this.demo2()
           break
-        case '模板3':
-          this.demo3()
-          break
-        case '自定义':
-          this.customization()
-          break
+        // case '自定义':
+        //   this.customization()
+        //   break
       }
     },
     demo1() { // 选择合同模板1
@@ -438,7 +432,10 @@ export default {
 <span>优惠后含税总价：</span><span class="actualTotal"></span><span>元</span><br><br>
 `
     },
-    editContract() { // 选择一个询价单，整成合同明细
+    async editContract() { // 选择一个询价单，整成合同明细
+      this.demoChange()
+      await sleep(0) // 处理渲染延迟
+      console.log(document.getElementById('tbody'))
       if (this.contractNumValue) {
         this.$refs.tinymce.destroyTinymce()
         document.getElementById('contractName') ? document.getElementById('contractName').innerHTML = this.contractName : ''
@@ -458,6 +455,7 @@ export default {
         // 移出旧数据
         const children = document.getElementsByClassName('tableData')
         const parent = document.getElementById('tbody')
+        console.log(children, parent)
         if (children.length !== 0) {
           for (let i = children.length - 1; i >= 0; i--) {
             parent.removeChild(children[i])
@@ -469,7 +467,8 @@ export default {
           tr[i] = document.createElement('tr')
           tr[i].setAttribute('class', 'tableData')
           tr[i].innerHTML = '<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>'
-          document.getElementById('tableHead') ? document.getElementById('tableHead').after(tr[i]) : ''
+          const tableHead = $('#tableHead')
+          tableHead ? tableHead.after(tr[i]) : ''
         }
         this.actualTotal = 0
         this.untaxTotal = 0
@@ -503,18 +502,15 @@ export default {
         this.contentNew = document.getElementsByClassName('editor-content')[0].innerHTML
         this.$refs.tinymce.initTinymce()
       } else {
-        this.$message.warning('请先选择合同进行调整')
+        this.$message.warning('请先选择合同，再预览')
       }
     },
     demo2() {
       this.content = `demo2`
     },
-    demo3() {
-      this.content = `demo3`
-    },
-    customization() { // 自定义
-      this.content = `自定义`
-    },
+    // customization() { // 自定义
+    //   this.content = `自定义`
+    // },
     generateContract() { // 生成采购合同
       this.content = this.contentNew.replace(/&nbsp;/g, '')
       this.content = this.content.replace(/\n/g, '')