当前位置：首页 > news >正文

ave-form.vue 组件中如何将产品名称发送给后端？

news 来源：原创 2025/6/17 15:47:22

如何将产品名称发送给后端。

在这段代码中，产品名称（productName）的处理和发送主要发生在 save() 方法中。让我逐步分析：

产品ID的选择：

<w-form-select
  v-model="form.productId"
  label="涉及产品"
  label-width="120px"
  :operate-type="operateType"
  :list="productList"
  option-label="name"
  option-value="id"
/>

在表单中，用户通过下拉框选择产品，这里的 v-model="form.productId" 会绑定所选产品的 id 到 form.productId。
:list="productList" 是产品列表数据，来自 getProducts() 方法从后端获取的。
option-label="name" 表示下拉框显示的是产品的名称（name），而 option-value="id" 表示实际绑定的是产品的 id。

获取产品名称：
在 save() 方法中，通过以下代码从 productList 中找到选中的产品并获取其名称：

const selectedProduct = this.productList.find((p: any) => p.id === this.form.productId)

this.productList 是存储所有产品信息的数组。
.find() 方法根据 form.productId（用户选择的产品ID）找到对应的产品对象。
selectedProduct 会包含该产品的所有信息，包括 name（名称）。

准备发送的数据：

const data = {
  ...this.form,
  productName: selectedProduct?.name || '', // 添加产品名称
  productPhotos: JSON.stringify(this.form.productPhotos),
  purchaseRecords: JSON.stringify(this.form.purchaseRecords)
}

这里创建了一个新的 data 对象，使用展开运算符 ...this.form 复制了表单中的所有字段。
productName: selectedProduct?.name || '' 明确地将选中的产品名称添加到发送的数据中。如果 selectedProduct 存在，就取它的 name，否则为空字符串。
注意：form.productId 已经包含在 ...this.form 中，所以后端会同时收到产品ID和产品名称。

发送到后端：

const res: any = await esave(data)

esave(data) 是 API 调用（定义在 @/api/fake-registration 中），它将 data 对象发送给后端。
因为 data 中已经包含了 productName，所以产品名称会作为请求的一部分发送出去。

总结

用户在界面上选择产品时，form.productId 保存了产品ID。
在提交时，save() 方法通过 productId 从 productList 中查找对应的产品名称，并将其赋值给 data.productName。
最后，data 对象（包含 productName 和其他表单数据）通过 esave API 发送到后端。

如果后端需要的是产品名称而不仅仅是ID，这段代码已经确保了 productName 会被正确发送。

修改 ave-form.vue，在暂存和提交时添加 productName。

typescript:src/views/tools/fake-strategy/components/ave-form.vue

// ... 其他代码保持不变 ...

export default class extends Vue {
  // ... 其他属性和方法保持不变 ...

  private async save() {
    // 从产品列表中获取选中产品的名称
    const selectedProduct = this.productList.find((p: any) => p.id === this.form.productId)
    
    const data = {
      ...this.form,
      productName: selectedProduct?.name || '', // 添加产品名称
      productPhotos: JSON.stringify(this.form.productPhotos),
      purchaseRecords: JSON.stringify(this.form.purchaseRecords)
    }
    const res: any = await esave(data)
    if (res?.code === 0) {
      this.$emit('close', true)
    }
  }

  // ... 其他代码保持不变 ...
}