如何在点击Create Change Order按钮时自动保存Change Orders界面信息

• 前端点击事件绑定：给「Create Change Request」界面的「Create Change Order」按钮绑定click事件，在事件回调中优先执行「Change Orders」界面的表单保存逻辑，完成后再触发原有的创建变更单流程。
  原生JavaScript示例代码：

  // 获取目标按钮
  const createBtn = document.querySelector('[data-action="create-change-order"]');
  // 绑定点击事件
  createBtn.addEventListener('click', async function(e) {
    // 阻止按钮默认提交行为（若为表单提交按钮）
    e.preventDefault();
    try {
      // 调用保存Change Orders信息的逻辑
      await saveChangeOrdersData();
      // 执行原有的创建变更单操作
      this.form.submit();
    } catch (err) {
      console.error('保存失败:', err);
      // 保存失败时可提示用户，中断创建流程
      alert('变更单信息保存失败，请重试');
    }
  });
  
  // 封装保存Change Orders数据的函数
  async function saveChangeOrdersData() {
    // 收集界面表单数据
    const formData = new FormData(document.querySelector('#change-orders-form'));
    // 调用后端保存接口
    const res = await fetch('/internal/api/save-change-orders', {
      method: 'POST',
      body: formData
    });
    if (!res.ok) throw new Error('接口请求失败');
  }
  

• 主流框架适配：

  • Vue场景：通过@click绑定处理方法，先完成保存再执行创建：

    <button @click="handleCreateChangeOrder">Create Change Order</button>
    
    <script setup>
    import { ref } from 'vue';
    import axios from 'axios';
    
    const changeOrdersForm = ref({/* 表单数据 */});
    
    async function handleCreateChangeOrder() {
      // 保存Change Orders数据
      await axios.post('/api/save-change-orders', changeOrdersForm.value);
      // 执行创建变更单逻辑
      await axios.post('/api/create-change-order', {/* 创建参数 */});
    }
    </script>
    

  • React场景：通过onClick绑定回调，按顺序执行操作：

    import { useState } from 'react';
    
    function ChangeRequest() {
      const [changeOrdersData, setChangeOrdersData] = useState({/* 表单数据 */});
    
      const handleCreate = async () => {
        // 先保存Change Orders信息
        await fetch('/api/save-change-orders', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(changeOrdersData)
        });
        // 再创建变更单
        await fetch('/api/create-change-order', { method: 'POST' });
      };
    
      return <button onClick={handleCreate}>Create Change Order</button>;
    }
    

• 后端兜底校验：若需确保数据一致性，可在后端接收「创建变更单」请求时，先自动关联保存「Change Orders」的对应数据，再执行创建逻辑，避免前端逻辑异常导致数据丢失。

内容的提问来源于stack exchange，提问作者Marco A.