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 611b700d80
commit f4eb7186f4
1 changed files with 130 additions and 87 deletions
Show Stats Download Patch File Download Diff File

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

@ -278,15 +278,22 @@
</el-button>
</div>
<!-- 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 v-if="hasSecondPostPaymentForm">
<!-- 有第二个表格时显示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>
<div v-else>
<!-- 只有一个表格时直接显示事后支付表格1 -->
<div ref="mainTable1" class="payment-table" v-html="forms1" />
</div>
</div>
</template>
@ -732,6 +739,7 @@ export default {
],
zoomedDialogVisible: false, // 控制放大表格弹窗的显示
hasPostPaymentForm: false, // 是否有事后支付表格
hasSecondPostPaymentForm: false, // 是否有第二个事后支付表格
contract_category: {},
templateContextData: null, // 合同模板关联数据
total: 0,
@ -826,6 +834,7 @@ export default {
this.forms2 = null // <---清空表格2的HTML内容
this.contract = {} // <--- 新增：重置合同对象
this.contractTemplate = null // <--- 新增：重置模板
this.hasSecondPostPaymentForm = false // <--- 重置第二个模板标志
this.activePostPaymentTab = 'form1' // <--- 重置当前tab
this.$nextTick(() => {
if (this.$refs.paymentRegistration && this.$refs.paymentRegistration.$refs.elForm) {
@ -1030,14 +1039,28 @@ export default {
this.currentStep = 1
this.contractTemplate = this.contract.contract_template.template
this.forms = this.contractTemplate
// 初始化两个tab的数据源
// 初始化第一个tab的数据源
this.forms1 = this.contractTemplate
this.forms2 = this.contractTemplate
// 检查是否有第二个事后支付表格模板
if (this.contract.contract_template2 && this.contract.contract_template2.template) {
this.hasSecondPostPaymentForm = true
// 初始化第二个tab的数据源
this.forms2 = this.contract.contract_template2.template
if (!this.contract.contract_template2.contract_template_fields) {
this.contract.contract_template2.contract_template_fields = this.contract.other_data || []
}
} else {
this.hasSecondPostPaymentForm = false
this.forms2 = null
}
if (!this.contract.contract_template.contract_template_fields) {
this.contract.contract_template.contract_template_fields = this.contract.other_data || []
}
} else {
this.hasPostPaymentForm = false
this.hasSecondPostPaymentForm = false
this.currentStep = 1
this.contractTemplate = null
this.forms = null
@ -1100,65 +1123,63 @@ export default {
initTemplateFields(contextData) {
if (!contextData || !contextData.other_data_fill) return
// 获取事后支付模板
// 初始化第一个模板的字段
if (this.contract.contract_template && this.contract.contract_template.contract_template_fields) {
const fields = this.contract.contract_template.contract_template_fields
this.initTemplateFieldsForTable(fields, contextData, 1)
}
// 遍历模板字段
fields.forEach(field => {
// 检查字段是否有link_type且该字段在other_data_fill中存在
if (field.link_field && contextData.other_data_fill[field.link_field]) {
let value = contextData.other_data_fill[field.link_field]
// 如果是upper_money字段，转换为金额大写
if (field.link_field === 'upper_money') {
value = numberToChinese(Number(value))
}
// 初始化第二个模板的字段（如果存在）
if (this.contract.contract_template2 && this.contract.contract_template2.contract_template_fields) {
const fields2 = this.contract.contract_template2.contract_template_fields
this.initTemplateFieldsForTable(fields2, contextData, 2)
}
},
// 设置字段值
field.value = value
// 为指定表格初始化模板字段值
initTemplateFieldsForTable(fields, contextData, tableIndex) {
// 遍历模板字段
fields.forEach(field => {
// 检查字段是否有link_type且该字段在other_data_fill中存在
if (field.link_field && contextData.other_data_fill[field.link_field]) {
let value = contextData.other_data_fill[field.link_field]
// 如果是upper_money字段，转换为金额大写
if (field.link_field === 'upper_money') {
value = numberToChinese(Number(value))
}
// 更新DOM中的值
const dom1 = this.$refs.mainTable1
const dom2 = this.$refs.mainTable2
// 设置字段值
field.value = value
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
}
}
}
// 更新DOM中的值
const dom = tableIndex === 1 ? this.$refs.mainTable1 : this.$refs.mainTable2
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 {
input2.value = field.value
if (dom) {
const input = dom.querySelector(`[data-field="${field.field}"]`)
if (input) {
if (input.type === 'checkbox' || input.type === 'radio') {
if (field.value === input.value) {
input.checked = true
}
} else {
input.value = field.value
}
}
}
})
// 更新两个tab的数据源
if (this.$refs.mainTable1) {
this.forms1 = syncFormDomToHtml(this.$refs.mainTable1, fields)
}
if (this.$refs.mainTable2) {
this.forms2 = syncFormDomToHtml(this.$refs.mainTable2, fields)
})
// 更新对应tab的数据源
const dom = tableIndex === 1 ? this.$refs.mainTable1 : this.$refs.mainTable2
if (dom) {
const updatedForms = syncFormDomToHtml(dom, fields)
if (tableIndex === 1) {
this.forms1 = updatedForms
this.forms = this.forms1 // 默认使用第一个表格的数据
} else if (tableIndex === 2) {
this.forms2 = updatedForms
}
// 更新共享的forms数据
this.forms = this.forms1
}
},
@ -1167,16 +1188,20 @@ export default {
this.$refs['paymentRegistration'].$refs['elForm'].validate().then(res => {
if (res) {
// 保存事后支付表格的数据
if (this.contract.contract_template) {
// 根据当前选择的tab获取对应的表格DOM
if (this.contract.contract_template || this.contract.contract_template2) {
// 根据当前选择的tab获取对应的表格DOM和模板字段
let currentDom = null
if (this.activePostPaymentTab === 'form1') {
let templateFields = null
if (this.activePostPaymentTab === 'form1' && this.contract.contract_template) {
currentDom = this.$refs.mainTable1
} else if (this.activePostPaymentTab === 'form2') {
templateFields = this.contract.contract_template.contract_template_fields
} else if (this.activePostPaymentTab === 'form2' && this.contract.contract_template2) {
currentDom = this.$refs.mainTable2
templateFields = this.contract.contract_template2.contract_template_fields
}
if (currentDom) {
if (currentDom && templateFields) {
// 获取所有输入控件
const inputs = currentDom.querySelectorAll('input, select, textarea')
@ -1184,7 +1209,7 @@ export default {
inputs.forEach(input => {
const fieldName = input.getAttribute('data-field')
if (fieldName) {
const field = this.contract.contract_template.contract_template_fields.find(f => f.field === fieldName)
const field = templateFields.find(f => f.field === fieldName)
if (field) {
if (input.type === 'checkbox' || input.type === 'radio') {
// 对于复选框和单选框，需要找到选中的值
@ -1423,15 +1448,23 @@ export default {
openZoomedTable() {
// 根据当前选择的tab获取对应的表格DOM
let currentDom = null
let templateFields = null
if (this.activePostPaymentTab === 'form1') {
currentDom = this.$refs.mainTable1
if (this.contract.contract_template) {
templateFields = this.contract.contract_template.contract_template_fields
}
} else if (this.activePostPaymentTab === 'form2') {
currentDom = this.$refs.mainTable2
if (this.contract.contract_template2) {
templateFields = this.contract.contract_template2.contract_template_fields
}
}
if (currentDom && this.contract.contract_template) {
//console.log(this.contract.contract_template.contract_template_fields)
const updatedForms = syncFormDomToHtml(currentDom, this.contract.contract_template.contract_template_fields)
if (currentDom && templateFields) {
//console.log(templateFields)
const updatedForms = syncFormDomToHtml(currentDom, templateFields)
console.log('forms:'+updatedForms)
// 更新对应的数据源
if (this.activePostPaymentTab === 'form1') {
@ -1453,29 +1486,39 @@ export default {
handleZoomedDialogClose() {
const dom = this.$refs.zoomedTable
if (dom && this.contract.contract_template) {
// 从放大窗口获取更新后的数据
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
if (dom) {
// 根据当前激活的tab选择对应的模板
let templateFields = null
if (this.activePostPaymentTab === 'form1' && this.contract.contract_template) {
templateFields = this.contract.contract_template.contract_template_fields
} else if (this.activePostPaymentTab === 'form2' && this.contract.contract_template2) {
templateFields = this.contract.contract_template2.contract_template_fields
}
// 更新共享的forms数据（用于提交）
this.forms = updatedForms
this.contract.forms = updatedForms
if (templateFields) {
// 从放大窗口获取更新后的数据
const updatedForms = syncFormDomToHtml(dom, templateFields)
// 重新设置监听器
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)
// 只更新当前激活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
},

Write Preview
Loading…
Cancel
Save