完成合同支持两个表格

src/views/contract/components/paymentRegistration.vue

@@ -277,7 +277,16 @@
               <i class="el-icon-time" /> 查看同类历史记录
             </el-button>
           </div>
-          <div ref="mainTable" class="payment-table" v-html="forms" />
+          
+          <!-- Tab切换 -->
+          <el-tabs v-model="activePostPaymentTab" @tab-click="handleTabClick">
+            <el-tab-pane label="事后支付表格1" name="form1">
+              <div ref="mainTable1" class="payment-table" v-html="forms1" />
+            </el-tab-pane>
+            <el-tab-pane label="事后支付表格2" name="form2">
+              <div ref="mainTable2" class="payment-table" v-html="forms2" />
+            </el-tab-pane>
+          </el-tabs>
         </div>
       </template>
 
@@ -293,7 +302,7 @@
 
     <!-- 放大窗口 -->
     <el-dialog
-      title="事后支付表格"
+      :title="getZoomedDialogTitle()"
       :visible.sync="zoomedDialogVisible"
       width="80%"
       :append-to-body="false"
@@ -303,7 +312,7 @@
       custom-class="zoomed-table-dialog"
       @close="handleZoomedDialogClose"
     >
-      <div ref="zoomedTable" class="zoomed-table" v-html="forms" />
+      <div ref="zoomedTable" class="zoomed-table" v-html="getCurrentZoomedForms()" />
     </el-dialog>
 
     <!-- 历史记录弹窗 -->
@@ -560,6 +569,9 @@ export default {
       payment: [], // 合同关联的付款登记
       contractTemplate: null, // 合同模板HTML
       forms: null, // 实际表单HTML
+      forms1: null, // 事后支付表格1的HTML
+      forms2: null, // 事后支付表格2的HTML
+      activePostPaymentTab: 'form1', // 当前激活的tab
       payTable: [
         {
           label: '款项类型',
@@ -810,8 +822,11 @@ export default {
         this.currentStep = 1 // 重置到第一步
         this.paymentRegistrationForm = this.getDefaultPaymentRegistrationForm() // 每次弹窗打开时重置表单
         this.forms = null // <---清空表单HTML内容
+        this.forms1 = null // <---清空表格1的HTML内容
+        this.forms2 = null // <---清空表格2的HTML内容
         this.contract = {} // <--- 新增：重置合同对象
         this.contractTemplate = null // <--- 新增：重置模板
+        this.activePostPaymentTab = 'form1' // <--- 重置当前tab
         this.$nextTick(() => {
           if (this.$refs.paymentRegistration && this.$refs.paymentRegistration.$refs.elForm) {
             this.$refs.paymentRegistration.$refs.elForm.resetFields()
@@ -819,12 +834,22 @@ export default {
         })
       }
     },
-    forms: {
+    // 监听 forms1 和 forms2 的变化，设置对应的监听器
+    forms1: {
       handler(newVal) {
         if (newVal) {
-          // 当forms内容更新后，重新设置监听器
           this.$nextTick(() => {
-            this.setupAmountListeners(this.$refs.mainTable)
+            this.setupAmountListeners(this.$refs.mainTable1)
+          })
+        }
+      },
+      immediate: true
+    },
+    forms2: {
+      handler(newVal) {
+        if (newVal) {
+          this.$nextTick(() => {
+            this.setupAmountListeners(this.$refs.mainTable2)
           })
         }
       },
@@ -1005,6 +1030,9 @@ export default {
         this.currentStep = 1
         this.contractTemplate = this.contract.contract_template.template
         this.forms = this.contractTemplate
+        // 初始化两个tab的数据源
+        this.forms1 = this.contractTemplate
+        this.forms2 = this.contractTemplate
         if (!this.contract.contract_template.contract_template_fields) {
           this.contract.contract_template.contract_template_fields = this.contract.other_data || []
         }
@@ -1013,6 +1041,8 @@ export default {
         this.currentStep = 1
         this.contractTemplate = null
         this.forms = null
+        this.forms1 = null
+        this.forms2 = null
       }
 
       // 拉取合同模板关联数据
@@ -1029,13 +1059,43 @@ export default {
 
       // 设置 amount 输入框的监听
       this.$nextTick(() => {
-        // 为原始表格设置监听器
+        // 为多个表格设置监听器
-        this.setupAmountListeners(this.$refs.mainTable)
+        this.setupAmountListeners(this.$refs.mainTable1)
+        this.setupAmountListeners(this.$refs.mainTable2)
         // 为放大表格设置监听器
         this.setupAmountListeners(this.$refs.zoomedTable)
       })
     },
 
+    // 处理tab切换
+    handleTabClick(tab) {
+      this.activePostPaymentTab = tab.name
+      // 切换tab时重新设置监听器
+      this.$nextTick(() => {
+        if (tab.name === 'form1') {
+          this.setupAmountListeners(this.$refs.mainTable1)
+        } else if (tab.name === 'form2') {
+          this.setupAmountListeners(this.$refs.mainTable2)
+        }
+      })
+    },
+
+    // 获取放大窗口标题
+    getZoomedDialogTitle() {
+      return `事后支付表格${this.activePostPaymentTab === 'form1' ? '1' : '2'}`
+    },
+
+    // 获取当前放大的表格内容
+    getCurrentZoomedForms() {
+      // 根据当前选择的tab获取对应的表格内容
+      if (this.activePostPaymentTab === 'form1') {
+        return this.forms1
+      } else if (this.activePostPaymentTab === 'form2') {
+        return this.forms2
+      }
+      return this.forms
+    },
+
     // 初始化模板字段值
     initTemplateFields(contextData) {
       if (!contextData || !contextData.other_data_fill) return
@@ -1059,28 +1119,46 @@ export default {
             field.value = value
 
             // 更新DOM中的值
-            const dom = this.$refs.mainTable
+            const dom1 = this.$refs.mainTable1
-            if (dom) {
+            const dom2 = this.$refs.mainTable2
-              const input = dom.querySelector(`[data-field="${field.field}"]`)
+            
-              if (input) {
+            if (dom1) {
-                if (input.type === 'checkbox' || input.type === 'radio') {
+              const input1 = dom1.querySelector(`[data-field="${field.field}"]`)
-                  // 对于复选框和单选框，需要设置checked属性
+              if (input1) {
-                  if (field.value === input.value) {
+                if (input1.type === 'checkbox' || input1.type === 'radio') {
-                    input.checked = true
+                  if (field.value === input1.value) {
+                    input1.checked = true
+                  }
+                } else {
+                  input1.value = field.value
+                }
+              }
+            }
+            
+            if (dom2) {
+              const input2 = dom2.querySelector(`[data-field="${field.field}"]`)
+              if (input2) {
+                if (input2.type === 'checkbox' || input2.type === 'radio') {
+                  if (field.value === input2.value) {
+                    input2.checked = true
                   }
                 } else {
-                  // 对于其他类型的输入，直接设置value
+                  input2.value = field.value
-                  input.value = field.value
                 }
               }
             }
           }
         })
 
-        // 更新forms内容
+        // 更新两个tab的数据源
-        if (this.$refs.mainTable) {
+        if (this.$refs.mainTable1) {
-          this.forms = syncFormDomToHtml(this.$refs.mainTable, fields)
+          this.forms1 = syncFormDomToHtml(this.$refs.mainTable1, fields)
         }
+        if (this.$refs.mainTable2) {
+          this.forms2 = syncFormDomToHtml(this.$refs.mainTable2, fields)
+        }
+        // 更新共享的forms数据
+        this.forms = this.forms1
       }
     },
 
@@ -1090,10 +1168,17 @@ export default {
         if (res) {
           // 保存事后支付表格的数据
           if (this.contract.contract_template) {
-            const dom = this.$refs.zoomedTable
+            // 根据当前选择的tab获取对应的表格DOM
-            if (dom) {
+            let currentDom = null
+            if (this.activePostPaymentTab === 'form1') {
+              currentDom = this.$refs.mainTable1
+            } else if (this.activePostPaymentTab === 'form2') {
+              currentDom = this.$refs.mainTable2
+            }
+            
+            if (currentDom) {
               // 获取所有输入控件
-              const inputs = dom.querySelectorAll('input, select, textarea')
+              const inputs = currentDom.querySelectorAll('input, select, textarea')
 
               // 遍历所有输入控件，更新值到 HTML
               inputs.forEach(input => {
@@ -1103,7 +1188,7 @@ export default {
                   if (field) {
                     if (input.type === 'checkbox' || input.type === 'radio') {
                       // 对于复选框和单选框，需要找到选中的值
-                      const checkedInput = dom.querySelector(`[data-field="${fieldName}"]:checked`)
+                      const checkedInput = currentDom.querySelector(`[data-field="${fieldName}"]:checked`)
                       field.value = checkedInput ? checkedInput.value : ''
                       // 更新 HTML 中的 checked 状态
                       if (checkedInput) {
@@ -1118,8 +1203,14 @@ export default {
                 }
               })
 
-              // 获取更新后的 HTML
+              // 获取更新后的 HTML，并更新对应的数据源
-              this.forms = dom.innerHTML
+              if (this.activePostPaymentTab === 'form1') {
+                this.forms1 = currentDom.innerHTML
+                this.forms = this.forms1
+              } else if (this.activePostPaymentTab === 'form2') {
+                this.forms2 = currentDom.innerHTML
+                this.forms = this.forms2
+              }
             }
           }
 
@@ -1255,9 +1346,15 @@ export default {
         }
 
         // 从动态表单中获取当前付款金额
-        const mainTable = this.$refs.mainTable
+        let currentDom = null
-        if (mainTable) {
+        if (this.activePostPaymentTab === 'form1') {
-          const currentPaymentInput = mainTable.querySelector('input[data-field="currentDuePayment"]')
+          currentDom = this.$refs.mainTable1
+        } else if (this.activePostPaymentTab === 'form2') {
+          currentDom = this.$refs.mainTable2
+        }
+        
+        if (currentDom) {
+          const currentPaymentInput = currentDom.querySelector('input[data-field="currentDuePayment"]')
           if (currentPaymentInput) {
             const inputValue = currentPaymentInput.value
             if (inputValue && Number(inputValue) > 0) {
@@ -1270,9 +1367,23 @@ export default {
         // 如果有事后支付表格，下一步不做表单校验，直接切换 currentStep=2
         if (this.hasPostPaymentForm) {
           // 保存事后支付表格HTML数据，参考 openZoomedTable 逻辑
-          const dom = this.$refs.mainTable
+          let currentDom = null
-          if (dom && this.contract.contract_template) {
+          if (this.activePostPaymentTab === 'form1') {
-            this.forms = syncFormDomToHtml(dom, this.contract.contract_template.contract_template_fields)
+            currentDom = this.$refs.mainTable1
+          } else if (this.activePostPaymentTab === 'form2') {
+            currentDom = this.$refs.mainTable2
+          }
+          
+          if (currentDom && this.contract.contract_template) {
+            const updatedForms = syncFormDomToHtml(currentDom, this.contract.contract_template.contract_template_fields)
+            // 更新对应的数据源
+            if (this.activePostPaymentTab === 'form1') {
+              this.forms1 = updatedForms
+              this.forms = this.forms1
+            } else if (this.activePostPaymentTab === 'form2') {
+              this.forms2 = updatedForms
+              this.forms = this.forms2
+            }
             this.contract.forms = this.forms
           }
           this.currentStep = 2
@@ -1310,12 +1421,25 @@ export default {
 
     // 打开放大预览前，先同步当前表单数据
     openZoomedTable() {
-      const dom = this.$refs.mainTable
+      // 根据当前选择的tab获取对应的表格DOM
-      if (dom && this.contract.contract_template) {
+      let currentDom = null
+      if (this.activePostPaymentTab === 'form1') {
+        currentDom = this.$refs.mainTable1
+      } else if (this.activePostPaymentTab === 'form2') {
+        currentDom = this.$refs.mainTable2
+      }
+      
+      if (currentDom && this.contract.contract_template) {
         //console.log(this.contract.contract_template.contract_template_fields)
-        this.forms = syncFormDomToHtml(dom, this.contract.contract_template.contract_template_fields)
+        const updatedForms = syncFormDomToHtml(currentDom, this.contract.contract_template.contract_template_fields)
-        console.log('forms:'+this.forms)
+        console.log('forms:'+updatedForms)
-        this.contract.forms = this.forms
+        // 更新对应的数据源
+        if (this.activePostPaymentTab === 'form1') {
+          this.forms1 = updatedForms
+        } else if (this.activePostPaymentTab === 'form2') {
+          this.forms2 = updatedForms
+        }
+        this.contract.forms = updatedForms
       }
       this.zoomedDialogVisible = true
       // 设置 amount 输入框的监听
@@ -1330,8 +1454,28 @@ export default {
     handleZoomedDialogClose() {
       const dom = this.$refs.zoomedTable
       if (dom && this.contract.contract_template) {
-        this.forms = syncFormDomToHtml(dom, this.contract.contract_template.contract_template_fields)
+        // 从放大窗口获取更新后的数据
-        this.contract.forms = this.forms
+        const updatedForms = syncFormDomToHtml(dom, this.contract.contract_template.contract_template_fields)
+        
+        // 只更新当前激活tab的数据源
+        if (this.activePostPaymentTab === 'form1') {
+          this.forms1 = updatedForms
+        } else if (this.activePostPaymentTab === 'form2') {
+          this.forms2 = updatedForms
+        }
+        
+        // 更新共享的forms数据（用于提交）
+        this.forms = updatedForms
+        this.contract.forms = updatedForms
+        
+        // 重新设置监听器
+        this.$nextTick(() => {
+          if (this.activePostPaymentTab === 'form1' && this.$refs.mainTable1) {
+            this.setupAmountListeners(this.$refs.mainTable1)
+          } else if (this.activePostPaymentTab === 'form2' && this.$refs.mainTable2) {
+            this.setupAmountListeners(this.$refs.mainTable2)
+          }
+        })
       }
       this.zoomedDialogVisible = false
     },
@@ -1514,22 +1658,49 @@ export default {
 
         // 初始计算一次
         // this.calculateTotal()
+        
+        console.log('setupAmountListeners: listeners setup completed for dom', dom)
+        console.log('Found inputs:', {
+          sdate: dom.querySelectorAll('input[data-field^="sdate"]').length,
+          edate: dom.querySelectorAll('input[data-field^="edate"]').length,
+          wan: dom.querySelectorAll('input[data-field^="wan"]').length,
+          qian: dom.querySelectorAll('input[data-field^="qian"]').length,
+          bai: dom.querySelectorAll('input[data-field^="bai"]').length,
+          shi: dom.querySelectorAll('input[data-field^="shi"]').length,
+          yuan: dom.querySelectorAll('input[data-field^="yuan"]').length,
+          jiao: dom.querySelectorAll('input[data-field^="jiao"]').length,
+          fen: dom.querySelectorAll('input[data-field^="fen"]').length,
+          amount: dom.querySelectorAll('input[data-field^="amount"]').length,
+          total: dom.querySelectorAll('input[data-field="total"]').length
+        })
       }, 100)
     },
     caculateRoadDay() {
-      const sdateInput = this.$refs.mainTable.querySelector('input[data-field^="sdate"]')
+      // 计算当前激活的表格
-      const edateInput = this.$refs.mainTable.querySelector('input[data-field^="edate"]')
+      let currentDom = null
-      const sdate = sdateInput.value
+      if (this.activePostPaymentTab === 'form1') {
-      const edate = edateInput.value
+        currentDom = this.$refs.mainTable1
-      if (sdate && edate) {
+      } else if (this.activePostPaymentTab === 'form2') {
-        const s = new Date(sdate)
+        currentDom = this.$refs.mainTable2
-        const e = new Date(edate)
+      }
-        // 计算天数差
+      
-        const roadDay = Math.floor((e - s) / (1000 * 60 * 60 * 24)) + 1
+      if (currentDom) {
-        console.log('roadDay', sdate, edate, roadDay)
+        const sdateInput = currentDom.querySelector('input[data-field^="sdate"]')
-        const roadDayInput = this.$refs.mainTable.querySelector('input[data-field="roadDay"]')
+        const edateInput = currentDom.querySelector('input[data-field^="edate"]')
-        if (roadDayInput) {
+        if (sdateInput && edateInput) {
-          roadDayInput.value = roadDay
+          const sdate = sdateInput.value
+          const edate = edateInput.value
+          if (sdate && edate) {
+            const s = new Date(sdate)
+            const e = new Date(edate)
+            // 计算天数差
+            const roadDay = Math.floor((e - s) / (1000 * 60 * 60 * 24)) + 1
+            console.log('roadDay', sdate, edate, roadDay)
+            const roadDayInput = currentDom.querySelector('input[data-field="roadDay"]')
+            if (roadDayInput) {
+              roadDayInput.value = roadDay
+            }
+          }
         }
       }
 
@@ -1553,10 +1724,26 @@ export default {
     },
 
     calculateTotal() {
-      // 计算原始表格的总金额
+      console.log('calculateTotal called')
-      this.calculateTableTotal(this.$refs.mainTable)
+      
+      // 计算当前激活的表格的总金额
+      let currentDom = null
+      if (this.activePostPaymentTab === 'form1') {
+        currentDom = this.$refs.mainTable1
+      } else if (this.activePostPaymentTab === 'form2') {
+        currentDom = this.$refs.mainTable2
+      }
+      
+      if (currentDom) {
+        console.log('calculateTotal: calculating for current tab dom', currentDom)
+        this.calculateTableTotal(currentDom)
+      }
+      
       // 计算放大表格的总金额
-      this.calculateTableTotal(this.$refs.zoomedTable)
+      if (this.$refs.zoomedTable) {
+        console.log('calculateTotal: calculating for zoomed table')
+        this.calculateTableTotal(this.$refs.zoomedTable)
+      }
     },
 
     calculateTableTotal(dom) {
@@ -1979,6 +2166,40 @@ export default {
       padding: 20px 0;
     }
 
+    // Tab样式优化
+    ::v-deep .el-tabs__header {
+      margin-bottom: 20px;
+      border-bottom: 2px solid #EBEEF5;
+    }
+
+    ::v-deep .el-tabs__item {
+      font-size: 14px;
+      font-weight: 500;
+      color: #606266;
+      padding: 0 20px;
+      height: 40px;
+      line-height: 40px;
+      transition: all 0.3s;
+
+      &.is-active {
+        color: #409EFF;
+        font-weight: 600;
+      }
+
+      &:hover {
+        color: #409EFF;
+      }
+    }
+
+    ::v-deep .el-tabs__active-bar {
+      background-color: #409EFF;
+      height: 2px;
+    }
+
+    ::v-deep .el-tabs__content {
+      padding: 0;
+    }
+
     ::v-deep table {
       width: 100%;
       border-collapse: collapse;