xiaoy
/
contract-business-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成合同支持两个表格

Browse Source
master
linyongLynn 4 months ago
parent 8386826a16
commit 611b700d80
2 changed files with 2401 additions and 56 deletions
Show Stats Download Patch File Download Diff File

2124
src/views/contract/components/paymentRegistration-bk82.vue
View File

File diff suppressed because it is too large Load Diff

311
src/views/contract/components/paymentRegistration.vue
Unescape View File

@ -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) {
this.$nextTick(() => {
this.setupAmountListeners(this.$refs.mainTable1)
})
}
},
immediate: true
},
forms2: {
handler(newVal) {
if (newVal) {
// 当forms内容更新后，重新设置监听器
this.$nextTick(() => {
this.setupAmountListeners(this.$refs.mainTable)
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,11 +1658,36 @@ 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
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) {
@ -1527,11 +1696,13 @@ export default {
// 计算天数差
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"]')
const roadDayInput = currentDom.querySelector('input[data-field="roadDay"]')
if (roadDayInput) {
roadDayInput.value = roadDay
}
}
}
}
if (this.$refs.zoomedTable) {
const sdateZoomedInput = this.$refs.zoomedTable.querySelector('input[data-field^="sdate"]')
@ -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)
}
// 计算放大表格的总金额
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;

Write Preview
Loading…
Cancel
Save