完成事前和事后支付表格的填写

src/views/contract/contractList.vue

@@ -493,12 +493,12 @@
           <!-- 事前支付表格 -->
           <div v-if="form.before_contract_template && !form.showAfterPayment" class="form-section">
             <div class="section-title">事前支付表格</div>
-            <div v-html="form.before_contract_template.template"></div>
+            <div ref="beforePaymentForm" v-html="form.before_contract_template.template"></div>
           </div>
           <!-- 事后支付表格 -->
           <div v-else-if="form.contract_template" class="form-section">
             <div class="section-title">事后支付表格</div>
-            <div v-html="form.contract_template.template"></div>
+            <div ref="afterPaymentForm" v-html="form.contract_template.template"></div>
           </div>
           <!-- 无支付表格提示 -->
           <div v-else class="form-section">
@@ -512,10 +512,18 @@
         <div class="modal-footer">
           <Button v-if="currentStep > 1" @click="prevStep" class="action-button">上一步</Button>
           <Button v-if="currentStep < 3" type="primary" @click="nextStep" class="action-button">下一步</Button>
-          <!-- 当有事前支付表格且未显示事后支付表格时，显示"下一步"按钮 -->
+          <!-- 当有事前支付表格且未显示事后支付表格时，显示"下一步"和"跳过"按钮 -->
-          <Button v-if="currentStep === 3 && form.before_contract_template && !form.showAfterPayment" type="primary" @click="nextPaymentStep" class="action-button">下一步</Button>
+          <template v-if="currentStep === 3 && form.before_contract_template && !form.showAfterPayment">
-          <!-- 当显示事后支付表格或没有事前支付表格时，显示"提交"按钮 -->
+            <Button type="primary" @click="nextPaymentStep" class="action-button">下一步</Button>
-          <Button v-if="currentStep === 3 && (form.showAfterPayment || !form.before_contract_template)" type="primary" @click="submit" class="action-button">提交</Button>
+            <Button @click="skipPrePayment" class="action-button">跳过，稍后填写</Button>
+          </template>
+          <!-- 当显示事后支付表格时，显示"提交"和"跳过"按钮 -->
+          <template v-else-if="currentStep === 3 && form.contract_template">
+            <Button type="primary" @click="submit" class="action-button">提交</Button>
+            <Button @click="skipPostPayment" class="action-button">跳过，稍后填写</Button>
+          </template>
+          <!-- 当没有支付表格时，只显示"提交"按钮 -->
+          <Button v-else-if="currentStep === 3" type="primary" @click="submit" class="action-button">提交</Button>
           <Button @click="cancel" class="action-button">取消</Button>
         </div>
       </div>
@@ -1818,53 +1826,102 @@ export default {
     },
     //提交新建
     async submit() {
-      addContrant({
+      try {
-        // 第一步的数据
+        // 更新事前支付表格的 HTML 和值
-        category: this.form.category,
+        if (this.form.before_contract_template && 
-        work_type: this.form.affairType,
+            this.form.before_contract_template.contract_template_fields && 
-        contract_type: this.form.contractType,
+            this.$refs.beforePaymentForm) {
-        purchase_form: this.form.purchaseForm,
+          const inputs = this.$refs.beforePaymentForm.querySelectorAll('input, select, textarea');
-        purchase_sub_form: this.form.purchaseSubForm,
+          inputs.forEach(input => {
-        purchase_method: this.form.purchaseMethod,
+            const fieldName = input.getAttribute('data-field');
-        
+            if (fieldName) {
-        // 第二步的数据
+              const field = this.form.before_contract_template.contract_template_fields.find(f => f.field === fieldName);
-        type: this.form.type,
+              if (field) {
-        is_plan: this.form.isBudget ? 1 : 0,
+                if (input.type === 'checkbox' || input.type === 'radio') {
-        purchase_type_id: this.form.purchaseForm,  // 修改这里，使用 purchaseForm 而不是 methods
+                  const checkedInput = this.$refs.beforePaymentForm.querySelector(`[data-field="${fieldName}"]:checked`);
-        purchase_way_id: this.form.purchaseMethod,
+                  field.value = checkedInput ? checkedInput.value : '';
-        money_way_id: this.form.moneyWay.toString(),  // 修改这里，将数组转换为字符串
+                  if (checkedInput) {
-        plan_price: this.form.price,
+                    checkedInput.setAttribute('checked', 'checked');
-        name: this.form.name,
+                  }
-        contract_plan_links: this.form.plan.map(item => {
+                } else {
-          return item.value
+                  field.value = input.value;
-        }),
+                  input.setAttribute('value', input.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,
+          this.form.before_contract_template.template = this.$refs.beforePaymentForm.innerHTML;
-        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})) || [],
+        // 更新事后支付表格的 HTML 和值
-        
+        if (this.form.contract_template && 
-        // 第三步的数据
+            this.form.contract_template.contract_template_fields && 
-        before_contract_template: this.form.before_contract_template,
+            this.$refs.afterPaymentForm) {
-        contract_template: this.form.contract_template
+          const inputs = this.$refs.afterPaymentForm.querySelectorAll('input, select, textarea');
-      }).then(res => {
+          inputs.forEach(input => {
-        this.isShowAdd = false
+            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.resetForm();
-        this.$refs.planTable?.clearSelection()
+        this.$refs.planTable?.clearSelection();
-        this.getContracts()
+        this.getContracts();
-      }).catch(error => {
+      } 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('<select')) controlType = 'select';
+                else if (match.includes('<textarea')) controlType = 'textarea';
+                
+                // 根据控件类型设置 id 和 value
+                let newControl = match;
+                
+                // 添加 id
+                if (!newControl.includes('id=')) {
+                  newControl = newControl.replace('data-field', `id="before_${field.field}" data-field`);
+                }
+                
+                // 设置 value
+                if (controlType === 'checkbox' || controlType === 'radio') {
+                  // 对于复选框和单选框，需要处理 options
+                  const options = field.options ? JSON.parse(field.options) : [];
+                  options.forEach(opt => {
+                    const optionRegex = new RegExp(`<input[^>]*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('<select')) controlType = 'select';
+                else if (match.includes('<textarea')) controlType = 'textarea';
+                
+                // 根据控件类型设置 id 和 value
+                let newControl = match;
+                
+                // 添加 id
+                if (!newControl.includes('id=')) {
+                  newControl = newControl.replace('data-field', `id="after_${field.field}" data-field`);
+                }
+                
+                // 设置 value
+                if (controlType === 'checkbox' || controlType === 'radio') {
+                  // 对于复选框和单选框，需要处理 options
+                  const options = field.options ? JSON.parse(field.options) : [];
+                  options.forEach(opt => {
+                    const optionRegex = new RegExp(`<input[^>]*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;
+    }
+  }
+}
 </style>