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

完成合同两个表格选择

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

Write Preview
Loading…
Cancel
Save