完成编辑支付表格

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 ref="beforePaymentForm" v-html="isEditMode ? (form.before_forms || form.before_contract_template.template) : form.before_contract_template.template"></div>
+            <div ref="beforePaymentForm" v-html="form.before_forms || form.before_contract_template.template"></div>
           </div>
           <!-- 事后支付表格 -->
           <div v-else-if="form.contract_template" class="form-section">
             <div class="section-title">事后支付表格</div>
-            <div ref="afterPaymentForm" v-html="isEditMode ? (form.forms || form.contract_template.template) : form.contract_template.template"></div>
+            <div ref="afterPaymentForm" v-html="form.forms || form.contract_template.template"></div>
           </div>
           <!-- 无支付表格提示 -->
           <div v-else class="form-section">
@@ -520,7 +520,7 @@
               <Button @click="skipPrePayment" class="action-button">跳过，稍后填写</Button>
             </template>
             <!-- 编辑模式下，只有当before_forms为空时才显示跳过按钮 -->
-            <template v-else-if="!form.before_forms || form.before_forms.trim() === ''">
+            <template v-else-if="(!form.before_forms || form.before_forms.trim() === '' || !form.skipBeforeTemplate)">
               <Button type="primary" @click="nextPaymentStep" class="action-button">下一步</Button>
               <Button @click="skipPrePayment" class="action-button">跳过，稍后填写</Button>
             </template>
@@ -537,7 +537,7 @@
               <Button @click="skipPostPayment" class="action-button">跳过，稍后填写</Button>
             </template>
             <!-- 编辑模式下，只有当forms为空时才显示跳过按钮 -->
-            <template v-else-if="!form.forms || form.forms.trim() === ''">
+            <template v-else-if="(!form.forms || form.forms.trim() === '' || !form.skipAfterTemplate)">
               <Button type="primary" @click="submit" class="action-button">提交</Button>
               <Button @click="skipPostPayment" class="action-button">跳过，稍后填写</Button>
             </template>
@@ -1266,8 +1266,12 @@ export default {
         purchaseMethod: '',
         forms:'',
         before_forms:'',
+        originBeforeForms:'',
+        originAfterForms:'',
         other_data:[],
         before_other_data:[],
+        skipBeforeTemplate:false,
+        skipAfterTemplate:false,
         name: '',
         type: '', // 项目类型
         moneyWay: [],
@@ -1864,6 +1868,76 @@ export default {
     //提交新建
     async submit() {
       try {
+        // 保存事前支付表格的数据
+        if (!this.form.showAfterPayment && this.form.before_contract_template) {
+          // 获取所有输入控件
+          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;
+          
+          // 更新模板和保存数据
+          this.form.before_forms = beforeFormHtml;
+        }
+
+        // 保存事后支付表格的数据
+        if (this.form.showAfterPayment && this.form.contract_template) {
+          // 获取所有输入控件
+          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.forms = afterFormHtml;
+        }
+
         // 构建提交数据
         const submitData = {
           ...this.form,
@@ -1885,24 +1959,24 @@ export default {
         submitData.purchase_way_id = this.form.purchaseMethod
 
         // 处理事前支付模板
-        if (this.form.skipBeforeTemplate) {
+        if (this.form.skipBeforeTemplate && !this.isEditMode) {
           // 如果用户选择跳过，提交空的模板和字段列表
           submitData.before_forms = '';
           submitData.before_other_data = [];
         } else if (this.form.before_contract_template) {
           // 如果用户填写了模板，提交当前填写的模板和字段列表
-          submitData.before_forms = this.form.before_contract_template.template;
+          submitData.before_forms = this.form.before_forms;
           submitData.before_other_data = this.form.before_contract_template.contract_template_fields;
         }
 
         // 处理事后支付模板
-        if (this.form.skipAfterTemplate) {
+        if (this.form.skipAfterTemplate && !this.isEditMode) {
           // 如果用户选择跳过，提交空的模板和字段列表
           submitData.forms = '';
           submitData.other_data = [];
         } else if (this.form.contract_template) {
           // 如果用户填写了模板，提交当前填写的模板和字段列表
-          submitData.forms = this.form.contract_template.template;
+          submitData.forms = this.form.forms;
           submitData.other_data = this.form.contract_template.contract_template_fields;
         }
 
@@ -2031,14 +2105,26 @@ export default {
         }
         // 获取模版配置
         this.getTemplateConfig();
-
       } else if (this.currentStep === 2) {
+        // 验证基本信息表单
         this.$refs.basicInfoForm.validate((valid) => {
           if (valid) {
-            // 在进入第三步之前，重置 showAfterPayment 状态
+            // 在进入第三步之前，确保所有必要的数据都被正确设置
+            if (!this.form.type) {
+              this.form.type = '';
+            }
+            if (!this.form.contract_carry_department) {
+              this.form.contract_carry_department = [];
+            }
+            if (!this.form.moneyWay) {
+              this.form.moneyWay = [];
+            }
+
+            // 如果存在事前支付表格，则跳转到事前支付表格
             if (this.form.before_contract_template) {
               this.form.showAfterPayment = false;
             }
+
             this.currentStep++;
           }
         });
@@ -2083,8 +2169,7 @@ export default {
           // 获取更新后的 HTML
           const afterFormHtml = this.$refs.afterPaymentForm.innerHTML;
           
-          // 更新模板和保存数据
+          // 更新模保存数据
-          this.form.contract_template.template = afterFormHtml;
           this.form.forms = afterFormHtml;
         }
         if (this.form.showAfterPayment && this.form.before_contract_template) {
@@ -2160,6 +2245,14 @@ export default {
           this.form.before_forms = currentBeforeForms;
         }
 
+        if (this.form.forms && this.form.forms.trim() !== '') {
+          this.form.skipAfterTemplate = true;
+        }
+
+        if (this.form.before_forms && this.form.before_forms.trim() !== '') {
+          this.form.skipBeforeTemplate = true;
+        }
+        
         // 进入下一步
         this.currentStep++
       } catch (error) {
@@ -2565,7 +2658,6 @@ export default {
         const beforeFormHtml = this.$refs.beforePaymentForm.innerHTML;
         
         // 更新模板和保存数据
-        this.form.before_contract_template.template = beforeFormHtml;
         this.form.before_forms = beforeFormHtml;
       }
       this.form.showAfterPayment = true;
@@ -2595,22 +2687,26 @@ export default {
     // 跳过事前支付表格
     skipPrePayment() {
       this.form.showAfterPayment = true
-
+      if (this.isEditMode) {
+        this.form.before_forms = this.originBeforeForms;
+      }else{
+        this.form.before_forms = '';
+        this.form.before_other_data = [];
         this.form.skipBeforeTemplate = true;
-      this.form.before_contract_template = {
+      }
-        template: '',
+      
-        contract_template_fields: []
-      };
     },
 
     // 跳过事后支付表格
     skipPostPayment() {
-
+      if (this.isEditMode) {
+        this.form.forms = this.originAfterForms;
+      }else{
+        this.form.forms = '';
+        this.form.other_data = [];
         this.form.skipAfterTemplate = true;
-      this.form.contract_template = {
+      }
-        template: '',
+
-        contract_template_fields: []
-      };
       this.submit()
     },
 
@@ -2687,6 +2783,8 @@ export default {
             ...this.form,
             forms: detail.forms,
             before_forms: detail.before_forms,
+            originBeforeForms: detail.before_forms,
+            originAfterForms: detail.forms,
             other_data: detail.other_data,
             before_other_data: detail.before_other_data,
             type: detail.type,
@@ -2799,7 +2897,11 @@ export default {
             }),
             contract_carry_department: detail.contract_carry_department.map(i => i.carry_department_id),
             before_contract_template: detail.before_contract_template,
-            contract_template: detail.contract_template
+            contract_template: detail.contract_template,
+            before_forms: detail.before_forms,
+            before_other_data: detail.before_other_data,
+            forms: detail.forms,
+            other_data: detail.other_data,
           };
           
           // 设置预算计划显示文本