网站界面设计的原则公众号软文素材

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

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

1. 产品ID的选择：

<w-form-selectv-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。

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

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

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

3. 准备发送的数据：

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和产品名称。

4. 发送到后端：

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)}}// ... 其他代码保持不变 ...
}

主要修改：

1. 在 save 方法中，根据选中的 productId 从 productList 中找到对应的产品
2. 将产品名称 (productName) 添加到发送给后端的数据中

这样在点击暂存或提交按钮时，都会将产品名称一起发送给后端。

---