diff --git a/src/views/contract/components/paymentRegistration-bk82.vue b/src/views/contract/components/paymentRegistration-bk82.vue new file mode 100644 index 0000000..e6461ed --- /dev/null +++ b/src/views/contract/components/paymentRegistration-bk82.vue @@ -0,0 +1,2124 @@ + + + + + + diff --git a/src/views/contract/components/paymentRegistration.vue b/src/views/contract/components/paymentRegistration.vue index e6461ed..7a476a2 100644 --- a/src/views/contract/components/paymentRegistration.vue +++ b/src/views/contract/components/paymentRegistration.vue @@ -277,7 +277,16 @@ 查看同类历史记录 -
+ + + + +
+ + +
+ +
@@ -293,7 +302,7 @@ -
+
@@ -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 - if (dom) { - const input = dom.querySelector(`[data-field="${field.field}"]`) - if (input) { - if (input.type === 'checkbox' || input.type === 'radio') { - // 对于复选框和单选框，需要设置checked属性 - if (field.value === input.value) { - input.checked = true + const dom1 = this.$refs.mainTable1 + const dom2 = this.$refs.mainTable2 + + if (dom1) { + const input1 = dom1.querySelector(`[data-field="${field.field}"]`) + if (input1) { + if (input1.type === 'checkbox' || input1.type === 'radio') { + 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 - input.value = field.value + input2.value = field.value } } } } }) - // 更新forms内容 - if (this.$refs.mainTable) { - this.forms = syncFormDomToHtml(this.$refs.mainTable, fields) + // 更新两个tab的数据源 + if (this.$refs.mainTable1) { + 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 - if (dom) { + // 根据当前选择的tab获取对应的表格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 - this.forms = dom.innerHTML + // 获取更新后的 HTML，并更新对应的数据源 + 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 - if (mainTable) { - const currentPaymentInput = mainTable.querySelector('input[data-field="currentDuePayment"]') + let currentDom = null + if (this.activePostPaymentTab === 'form1') { + 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 - if (dom && this.contract.contract_template) { - this.forms = syncFormDomToHtml(dom, this.contract.contract_template.contract_template_fields) + 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) { + 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 - if (dom && this.contract.contract_template) { + // 根据当前选择的tab获取对应的表格DOM + 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) - console.log('forms:'+this.forms) - this.contract.forms = this.forms + const updatedForms = syncFormDomToHtml(currentDom, this.contract.contract_template.contract_template_fields) + console.log('forms:'+updatedForms) + // 更新对应的数据源 + 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"]') - 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 = this.$refs.mainTable.querySelector('input[data-field="roadDay"]') - if (roadDayInput) { - roadDayInput.value = roadDay + // 计算当前激活的表格 + let currentDom = null + if (this.activePostPaymentTab === 'form1') { + currentDom = this.$refs.mainTable1 + } else if (this.activePostPaymentTab === 'form2') { + currentDom = this.$refs.mainTable2 + } + + if (currentDom) { + const sdateInput = currentDom.querySelector('input[data-field^="sdate"]') + const edateInput = currentDom.querySelector('input[data-field^="edate"]') + if (sdateInput && edateInput) { + 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() { - // 计算原始表格的总金额 - this.calculateTableTotal(this.$refs.mainTable) + console.log('calculateTotal called') + + // 计算当前激活的表格的总金额 + 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;