diff --git a/src/views/contract/contractList.vue b/src/views/contract/contractList.vue index 93e9d98..917d96c 100644 --- a/src/views/contract/contractList.vue +++ b/src/views/contract/contractList.vue @@ -493,12 +493,12 @@
事前支付表格
-
+
事后支付表格
-
+
@@ -512,10 +512,18 @@
- - - - + + + + + +
@@ -1818,53 +1826,102 @@ export default { }, //提交新建 async submit() { - addContrant({ - // 第一步的数据 - category: this.form.category, - work_type: this.form.affairType, - contract_type: this.form.contractType, - purchase_form: this.form.purchaseForm, - purchase_sub_form: this.form.purchaseSubForm, - purchase_method: this.form.purchaseMethod, - - // 第二步的数据 - type: this.form.type, - is_plan: this.form.isBudget ? 1 : 0, - purchase_type_id: this.form.purchaseForm, // 修改这里，使用 purchaseForm 而不是 methods - purchase_way_id: this.form.purchaseMethod, - money_way_id: this.form.moneyWay.toString(), // 修改这里，将数组转换为字符串 - plan_price: this.form.price, - name: this.form.name, - contract_plan_links: this.form.plan.map(item => { - return item.value - }), - is_substitute: this.form.is_substitute, - is_simple: this.form.is_simple, - has_charge: this.form.has_charge, - supply: this.form.supply, - money: this.form.money, - status: this.form.is_simple ? 2 : 1, - gov_plane_id: this.form.gov_plane_id, - contract_carry_department: this.form.contract_carry_department?.map(i => ({carry_department_id: i})) || [], - - // 第三步的数据 - before_contract_template: this.form.before_contract_template, - contract_template: this.form.contract_template - }).then(res => { - this.isShowAdd = false + try { + // 更新事前支付表格的 HTML 和值 + if (this.form.before_contract_template && + this.form.before_contract_template.contract_template_fields && + this.$refs.beforePaymentForm) { + const inputs = this.$refs.beforePaymentForm.querySelectorAll('input, select, textarea'); + inputs.forEach(input => { + const fieldName = input.getAttribute('data-field'); + if (fieldName) { + const field = this.form.before_contract_template.contract_template_fields.find(f => f.field === fieldName); + if (field) { + if (input.type === 'checkbox' || input.type === 'radio') { + const checkedInput = this.$refs.beforePaymentForm.querySelector(`[data-field="${fieldName}"]:checked`); + field.value = checkedInput ? checkedInput.value : ''; + if (checkedInput) { + checkedInput.setAttribute('checked', 'checked'); + } + } else { + field.value = input.value; + input.setAttribute('value', input.value); + } + } + } + }); + this.form.before_contract_template.template = this.$refs.beforePaymentForm.innerHTML; + } + + // 更新事后支付表格的 HTML 和值 + if (this.form.contract_template && + this.form.contract_template.contract_template_fields && + this.$refs.afterPaymentForm) { + const inputs = this.$refs.afterPaymentForm.querySelectorAll('input, select, textarea'); + inputs.forEach(input => { + const fieldName = input.getAttribute('data-field'); + if (fieldName) { + const field = this.form.contract_template.contract_template_fields.find(f => f.field === fieldName); + if (field) { + if (input.type === 'checkbox' || input.type === 'radio') { + const checkedInput = this.$refs.afterPaymentForm.querySelector(`[data-field="${fieldName}"]:checked`); + field.value = checkedInput ? checkedInput.value : ''; + if (checkedInput) { + checkedInput.setAttribute('checked', 'checked'); + } + } else { + field.value = input.value; + input.setAttribute('value', input.value); + } + } + } + }); + this.form.contract_template.template = this.$refs.afterPaymentForm.innerHTML; + } + + // 提交数据 + const res = await addContrant({ + category: this.form.category, + work_type: this.form.affairType, + contract_type: this.form.contractType, + purchase_form: this.form.purchaseForm, + purchase_sub_form: this.form.purchaseSubForm, + purchase_method: this.form.purchaseMethod, + type: this.form.type, + is_plan: this.form.isBudget ? 1 : 0, + purchase_type_id: this.form.purchaseForm, + purchase_way_id: this.form.purchaseMethod, + money_way_id: this.form.moneyWay.toString(), + plan_price: this.form.price, + name: this.form.name, + contract_plan_links: this.form.plan.map(item => item.value), + is_substitute: this.form.is_substitute, + is_simple: this.form.is_simple, + has_charge: this.form.has_charge, + supply: this.form.supply, + money: this.form.money, + status: this.form.is_simple ? 2 : 1, + gov_plane_id: this.form.gov_plane_id, + contract_carry_department: this.form.contract_carry_department?.map(i => ({carry_department_id: i})) || [], + before_contract_template: this.form.before_contract_template, + contract_template: this.form.contract_template + }); + + this.isShowAdd = false; Message({ type: 'success', message: '操作成功' - }) - this.resetForm() - this.$refs.planTable?.clearSelection() - this.getContracts() - }).catch(error => { + }); + this.resetForm(); + this.$refs.planTable?.clearSelection(); + this.getContracts(); + } catch (error) { + console.error('提交失败:', error); Message({ type: 'error', message: error.message || '提交失败' - }) - }) + }); + } }, //删除合同 @@ -1983,18 +2040,56 @@ export default { this.currentStep++ } }) - } else { + } else if (this.currentStep === 3) { this.currentStep++ } }, prevStep() { + // 如果在事后支付表格，先保存内容 + if (this.currentStep === 3 && this.form.showAfterPayment && + this.form.contract_template && + this.form.contract_template.contract_template_fields && + this.$refs.afterPaymentForm) { + // 获取所有输入控件 + const inputs = this.$refs.afterPaymentForm.querySelectorAll('input, select, textarea'); + + // 遍历所有输入控件，更新值到 HTML + inputs.forEach(input => { + const fieldName = input.getAttribute('data-field'); + if (fieldName) { + const field = this.form.contract_template.contract_template_fields.find(f => f.field === fieldName); + if (field) { + if (input.type === 'checkbox' || input.type === 'radio') { + // 对于复选框和单选框，需要找到选中的值 + const checkedInput = this.$refs.afterPaymentForm.querySelector(`[data-field="${fieldName}"]:checked`); + field.value = checkedInput ? checkedInput.value : ''; + // 更新 HTML 中的 checked 状态 + if (checkedInput) { + checkedInput.setAttribute('checked', 'checked'); + } + } else { + field.value = input.value; + // 更新 HTML 中的 value + input.setAttribute('value', input.value); + } + } + } + }); + + // 获取更新后的 HTML + const afterFormHtml = this.$refs.afterPaymentForm.innerHTML; + + // 更新模板 + this.form.contract_template.template = afterFormHtml; + } + if (this.currentStep === 3 && this.form.showAfterPayment && this.form.before_contract_template) { // 如果在事后支付表格且有事前支付表格，则返回事前支付表格 - this.form.showAfterPayment = false + this.form.showAfterPayment = false; } else { // 其他情况正常返回上一步 - this.currentStep-- + this.currentStep--; } }, @@ -2068,10 +2163,131 @@ export default { // 保存支付表格模板 if (config.before_contract_template) { - this.form.before_contract_template = config.before_contract_template + // 处理事前支付表格模板 + let beforeTemplate = config.before_contract_template.template; + if (beforeTemplate && config.before_contract_template.contract_template_fields) { + console.log('处理事前支付表格模板:', config.before_contract_template.contract_template_fields) + + // 遍历字段列表，为每个字段找到对应的控件 + config.before_contract_template.contract_template_fields.forEach(field => { + // 在模板中查找 data-field 属性值与字段名相同的控件 + const regex = new RegExp(`<[^>]*data-field="${field.field}"[^>]*>`, 'g'); + const matches = beforeTemplate.match(regex); + + if (matches) { + matches.forEach(match => { + // 获取控件类型 + let controlType = 'text'; + if (match.includes('type="number"')) controlType = 'number'; + else if (match.includes('type="date"')) controlType = 'date'; + else if (match.includes('type="checkbox"')) controlType = 'checkbox'; + else if (match.includes('type="radio"')) controlType = 'radio'; + else if (match.includes(' { + const optionRegex = new RegExp(`]*value="${opt.value}"[^>]*>`, 'g'); + const optionMatches = newControl.match(optionRegex); + if (optionMatches) { + optionMatches.forEach(optionMatch => { + const checked = field.value === opt.value ? 'checked' : ''; + newControl = newControl.replace(optionMatch, optionMatch.replace('>', ` ${checked}>`)); + }); + } + }); + } else { + // 对于其他控件，直接设置 value + if (!newControl.includes('value=')) { + newControl = newControl.replace('>', ` value="${field.value || ''}">`); + } else { + newControl = newControl.replace(/value="[^"]*"/, `value="${field.value || ''}"`); + } + } + + // 替换原控件 + beforeTemplate = beforeTemplate.replace(match, newControl); + }); + } + }); + } + this.form.before_contract_template = config.before_contract_template; + this.form.before_contract_template.template = beforeTemplate; } + if (config.contract_template) { - this.form.contract_template = config.contract_template + // 处理事后支付表格模板 + let afterTemplate = config.contract_template.template; + if (afterTemplate && config.contract_template.contract_template_fields) { + console.log('处理事后支付表格模板:', config.contract_template.contract_template_fields) + + // 遍历字段列表，为每个字段找到对应的控件 + config.contract_template.contract_template_fields.forEach(field => { + // 在模板中查找 data-field 属性值与字段名相同的控件 + const regex = new RegExp(`<[^>]*data-field="${field.field}"[^>]*>`, 'g'); + const matches = afterTemplate.match(regex); + + if (matches) { + matches.forEach(match => { + // 获取控件类型 + let controlType = 'text'; + if (match.includes('type="number"')) controlType = 'number'; + else if (match.includes('type="date"')) controlType = 'date'; + else if (match.includes('type="checkbox"')) controlType = 'checkbox'; + else if (match.includes('type="radio"')) controlType = 'radio'; + else if (match.includes(' { + const optionRegex = new RegExp(`]*value="${opt.value}"[^>]*>`, 'g'); + const optionMatches = newControl.match(optionRegex); + if (optionMatches) { + optionMatches.forEach(optionMatch => { + const checked = field.value === opt.value ? 'checked' : ''; + newControl = newControl.replace(optionMatch, optionMatch.replace('>', ` ${checked}>`)); + }); + } + }); + } else { + // 对于其他控件，直接设置 value + if (!newControl.includes('value=')) { + newControl = newControl.replace('>', ` value="${field.value || ''}">`); + } else { + newControl = newControl.replace(/value="[^"]*"/, `value="${field.value || ''}"`); + } + } + + // 替换原控件 + afterTemplate = afterTemplate.replace(match, newControl); + }); + } + }); + } + this.form.contract_template = config.contract_template; + this.form.contract_template.template = afterTemplate; } }, @@ -2297,7 +2513,42 @@ export default { }, // 切换到事后支付表格 nextPaymentStep() { - this.form.showAfterPayment = true + // 保存事前支付表格的数据 + if (this.form.before_contract_template && this.form.before_contract_template.contract_template_fields) { + // 获取所有输入控件 + const inputs = this.$refs.beforePaymentForm.querySelectorAll('input, select, textarea'); + + // 遍历所有输入控件，更新值到 HTML + inputs.forEach(input => { + const fieldName = input.getAttribute('data-field'); + if (fieldName) { + const field = this.form.before_contract_template.contract_template_fields.find(f => f.field === fieldName); + if (field) { + if (input.type === 'checkbox' || input.type === 'radio') { + // 对于复选框和单选框，需要找到选中的值 + const checkedInput = this.$refs.beforePaymentForm.querySelector(`[data-field="${fieldName}"]:checked`); + field.value = checkedInput ? checkedInput.value : ''; + // 更新 HTML 中的 checked 状态 + if (checkedInput) { + checkedInput.setAttribute('checked', 'checked'); + } + } else { + field.value = input.value; + // 更新 HTML 中的 value + input.setAttribute('value', input.value); + } + } + } + }); + + // 获取更新后的 HTML + const beforeFormHtml = this.$refs.beforePaymentForm.innerHTML; + console.log("被修改的模板", beforeFormHtml); + + // 更新模板 + this.form.before_contract_template.template = beforeFormHtml; + } + this.form.showAfterPayment = true; }, // 获取资金渠道名称的方法 getMoneyWayName(id) { @@ -2320,6 +2571,36 @@ export default { removeDepartment(id) { this.form.contract_carry_department = this.form.contract_carry_department.filter(item => item !== id) }, + + // 跳过事前支付表格 + skipPrePayment() { + this.form.showAfterPayment = true + }, + + // 跳过事后支付表格 + skipPostPayment() { + this.submit() + }, + + // 更新事前表格字段值 + updateBeforeFieldValue(field, value) { + if (this.form.before_contract_template && this.form.before_contract_template.contract_template_fields) { + const fieldObj = this.form.before_contract_template.contract_template_fields.find(f => f.field === field); + if (fieldObj) { + fieldObj.value = value; + } + } + }, + + // 更新事后表格字段值 + updateAfterFieldValue(field, value) { + if (this.form.contract_template && this.form.contract_template.contract_template_fields) { + const fieldObj = this.form.contract_template.contract_template_fields.find(f => f.field === field); + if (fieldObj) { + fieldObj.value = value; + } + } + }, }, mounted() { this.window.width = screen.availWidth * 0.95 @@ -2755,4 +3036,17 @@ export default { } } } + +.skip-option { + margin-top: 16px; + text-align: center; + + .el-button { + color: #909399; + + &:hover { + color: #409EFF; + } + } +}