From 15c85883578a493387d4eca9054cfe327478d072 Mon Sep 17 00:00:00 2001 From: tikkhun Date: Fri, 28 Nov 2025 10:51:11 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E4=BA=A7=E5=93=81=E5=88=97=E8=A1=A8):=20?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=87=AA=E5=8A=A8=E7=94=9F=E6=88=90SKU?= =?UTF-8?q?=E5=92=8C=E4=BA=A7=E5=93=81=E5=90=8D=E7=A7=B0=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 实现通过模板渲染API自动生成产品SKU和名称的功能 添加品牌、强度、口味和干湿选项的状态管理 优化表单布局，将生成按钮与对应字段分组 --- src/pages/Product/List/index.tsx | 238 +++++++++++++++++++++++-------- src/servers/api/template.ts | 19 +++ src/servers/api/typings.d.ts | 14 +- 3 files changed, 208 insertions(+), 63 deletions(-) diff --git a/src/pages/Product/List/index.tsx b/src/pages/Product/List/index.tsx index 7026ec5..79bc93e 100644 --- a/src/pages/Product/List/index.tsx +++ b/src/pages/Product/List/index.tsx @@ -7,6 +7,7 @@ import { productcontrollerGetstrengthall, productcontrollerUpdateproductnamecn, } from '@/servers/api/product'; +import { templatecontrollerRendertemplate } from '@/servers/api/template'; import { PlusOutlined } from '@ant-design/icons'; import { ActionType, @@ -14,14 +15,20 @@ import { PageContainer, ProColumns, ProForm, + ProFormInstance, ProFormSelect, ProFormText, ProFormTextArea, ProTable, } from '@ant-design/pro-components'; import { App, Button, Popconfirm } from 'antd'; -import React, { useRef } from 'react'; - +import React, { useRef, useState } from 'react'; +// TODO +interface DictItem { + id: number; + name: string; + title: string; +} const NameCn: React.FC<{ id: number; value: string | undefined; @@ -176,10 +183,99 @@ const List: React.FC = () => { const CreateForm: React.FC<{ tableRef: React.MutableRefObject; }> = ({ tableRef }) => { + // antd 的消息提醒 const { message } = App.useApp(); + // 表单引用 + const formRef = useRef(); + // 状态：存储品牌、强度和口味的选项 + const [brandOptions, setBrandOptions] = useState([]); + const [strengthOptions, setStrengthOptions] = useState([]); + const [flavorOptions, setFlavorOptions] = useState([]); + + /** + * @description 生成 SKU + */ + const handleGenerateSku = async () => { + try { + // 从表单引用中获取当前表单的值 + const formValues = formRef.current?.getFieldsValue(); + const { humidity, brandId, strengthId, flavorsId } = formValues; + // 检查是否所有必需的字段都已选择 + if (!brandId || !strengthId || !flavorsId || !humidity) { + message.warning('请先选择品牌、强度、口味和干湿'); + return; + } + + // 从选项中查找所选品牌、强度和口味的完整对象 + const brand = brandOptions.find((item) => item.id === brandId); + const strength = strengthOptions.find((item) => item.id === strengthId); + const flavor = flavorOptions.find((item) => item.id === flavorsId); + + // 调用模板渲染API来生成SKU + const { data: rendered, message: msg, success } = await templatecontrollerRendertemplate( + { name: 'product.sku' }, + { + brand: brand ? brand.name : "", + strength: strength ? strength.name : '', + flavor: flavor ? flavor.name : '', + humidity: humidity === 'dry' ? 'Dry' : 'Moisture', + }, + ); + if (!success) { + throw new Error(msg); + } + + // 将生成的SKU设置到表单字段中 + formRef.current?.setFieldsValue({ sku: rendered }); + } catch (error: any) { + message.error(`生成失败: ${error.message}`); + } + }; + + /** + * @description 生成产品名称 + */ + const handleGenerateName = async () => { + try { + // 从表单引用中获取当前表单的值 + const formValues = formRef.current?.getFieldsValue(); + const { humidity, brandId, strengthId, flavorsId } = formValues; + // 检查是否所有必需的字段都已选择 + if (!brandId || !strengthId || !flavorsId || !humidity) { + message.warning('请先选择品牌、强度、口味和干湿'); + return; + } + + // 从选项中查找所选品牌、强度和口味的完整对象 + const brand = brandOptions.find((item) => item.id === brandId); + const strength = strengthOptions.find((item) => item.id === strengthId); + const flavor = flavorOptions.find((item) => item.id === flavorsId); + + // 调用模板渲染API来生成产品名称 + const { message: msg, data: rendered, success } = await templatecontrollerRendertemplate( + { name: 'product.title' }, + { + brand: brand ? brand.title : "", + strength: strength ? strength.title : '', + flavor: flavor ? flavor.title : '', + model: '', + humidity: humidity === 'dry' ? 'Dry' : 'Moisture', + }, + ); + if (!success) { + throw new Error(msg); + } + // 将生成的名称设置到表单字段中 + formRef.current?.setFieldsValue({ name: rendered }); + } catch (error: any) { + message.error(`生成失败: ${error.message}`); + } + }; + // TODO 可以输入brand等 return ( title="新建" + formRef={formRef} // Pass formRef trigger={ + - - { - const { data = [] } = await productcontrollerGetbrandall(); - return data.map((item: API.Brand) => ({ - label: item.name, - value: item.id, - })); - }} - rules={[{ required: true, message: '请选择产品品牌' }]} - /> - { - const { data = [] } = await productcontrollerGetstrengthall(); - return data.map((item) => ({ - label: item.name, - value: item.id, - })); - }} - rules={[{ required: true, message: '请选择强度' }]} - /> - { - const { data = [] } = await productcontrollerGetflavorsall(); - return data.map((item) => ({ - label: item.name, - value: item.id, - })); - }} - rules={[{ required: true, message: '请选择口味' }]} - /> - + + ); }; diff --git a/src/servers/api/template.ts b/src/servers/api/template.ts index 05e7d8f..316c389 100644 --- a/src/servers/api/template.ts +++ b/src/servers/api/template.ts @@ -73,3 +73,22 @@ export async function templatecontrollerGettemplatelist(options?: { ...(options || {}), }); } + +/** 此处后端没有提供注释 POST /template/render/${param0} */ +export async function templatecontrollerRendertemplate( + // 叠加生成的Param类型 (非body参数swagger默认没有生成对象) + params: API.templatecontrollerRendertemplateParams, + body: Record, + options?: { [key: string]: any }, +) { + const { name: param0, ...queryParams } = params; + return request>(`/template/render/${param0}`, { + method: 'POST', + headers: { + 'Content-Type': 'text/plain', + }, + params: { ...queryParams }, + data: body, + ...(options || {}), + }); +} diff --git a/src/servers/api/typings.d.ts b/src/servers/api/typings.d.ts index 6837020..bc88ecc 100644 --- a/src/servers/api/typings.d.ts +++ b/src/servers/api/typings.d.ts @@ -71,6 +71,8 @@ declare namespace API { /** 口味 */ flavor?: DictItemDTO; humidity?: string; + /** 价格 */ + price?: number; }; type CreatePurchaseOrderDTO = { @@ -701,6 +703,8 @@ declare namespace API { description?: string; /** sku */ sku?: string; + /** 价格 */ + price?: number; /** 创建时间 */ createdAt: string; /** 更新时间 */ @@ -1536,6 +1540,8 @@ declare namespace API { name?: string; value?: string; description?: string; + /** 是否可删除 */ + deletable: boolean; /** 创建时间 */ createdAt: string; /** 更新时间 */ @@ -1550,6 +1556,10 @@ declare namespace API { name: string; }; + type templatecontrollerRendertemplateParams = { + name: string; + }; + type templatecontrollerUpdatetemplateParams = { id: number; }; @@ -1591,6 +1601,8 @@ declare namespace API { /** 口味 */ flavor?: DictItemDTO; humidity?: string; + /** 价格 */ + price?: number; }; type UpdatePurchaseOrderDTO = { @@ -1749,7 +1761,7 @@ declare namespace API { siteId: string; /** wp产品ID */ externalProductId: string; - /** sku */ + /** 商店sku */ sku?: string; /** 产品名称 */ name: string;