diff --git a/src/api/mall/product/property.ts b/src/api/mall/product/property.ts index 44dc663f..048b7641 100644 --- a/src/api/mall/product/property.ts +++ b/src/api/mall/product/property.ts @@ -65,6 +65,11 @@ export const getPropertyPage = (params: PageParam) => { return request.get({ url: '/product/property/page', params }) } +// 获得属性项精简列表 +export const getPropertySimpleList = (): Promise => { + return request.get({ url: '/product/property/simple-list' }) +} + // ------------------------ 属性值 ------------------- // 获得属性值分页 diff --git a/src/views/mall/product/spu/components/index.ts b/src/views/mall/product/spu/components/index.ts index 5569bc99..1716f704 100644 --- a/src/views/mall/product/spu/components/index.ts +++ b/src/views/mall/product/spu/components/index.ts @@ -5,7 +5,7 @@ interface PropertyAndValues { id: number name: string values?: PropertyAndValues[] - propertyOpts?: PropertyAndValues[] + propertyOpts?: PropertyAndValues[] // TODO @GoldenZqqq:建议直接复用 values; } interface RuleConfig { diff --git a/src/views/mall/product/spu/form/ProductAttributes.vue b/src/views/mall/product/spu/form/ProductAttributes.vue index 613e2ede..eaec16cc 100644 --- a/src/views/mall/product/spu/form/ProductAttributes.vue +++ b/src/views/mall/product/spu/form/ProductAttributes.vue @@ -122,6 +122,7 @@ const emit = defineEmits(['success']) // 定义 success 事件,用于操作成 const handleInputConfirm = async (index: number, propertyId: number) => { if (inputValue.value) { // 重复添加校验 + // TODO @芋艿:需要测试下 if (isNumber(inputValue.value)) { if (attributeList.value[index].values?.some((item) => item.id === inputValue.value)) { message.warning('已存在相同属性值,请重试') diff --git a/src/views/mall/product/spu/form/ProductPropertyAddForm.vue b/src/views/mall/product/spu/form/ProductPropertyAddForm.vue index f7500ceb..47915c7c 100644 --- a/src/views/mall/product/spu/form/ProductPropertyAddForm.vue +++ b/src/views/mall/product/spu/form/ProductPropertyAddForm.vue @@ -16,11 +16,11 @@ allow-create default-first-option :reserve-keyword="false" - placeholder="请选择属性名称" - style="width: 240px" + placeholder="请选择属性名称。如果不存在,可手动输入选择" + class="!w-360px" > { dialogVisible.value = true - getAttrOption() resetForm() + // 加载列表 + await getAttributeOptions() } defineExpose({ open }) // 提供 open 方法,用于打开弹窗 /** 提交表单 */ const submitForm = async () => { + // 情况一:如果是已存在的属性,直接结束,不提交表单新增 + for (const option of attributeOptions.value) { + if (option.name === formData.value.name) { + // 添加到属性列表 + attributeList.value.push({ + id: option.id, + ...formData.value, + values: [] + }) + // 触发属性列表的加载 + emit('success', option.id, option.id) + // 关闭弹窗 + dialogVisible.value = false + return + } + } + + // 情况二:如果是不存在的属性,则需要执行新增 // 校验表单 if (!formRef) return const valid = await formRef.value.validate() @@ -98,15 +117,7 @@ const submitForm = async () => { ...formData.value, values: [] }) - // 判断最终提交的属性名称是否是选择的 自己手动输入的属性名称不执行emit - for (const element of attrOption.value) { - if (element.name === formData.value.name) { - emit('success', propertyId, element.id) - message.success(t('common.createSuccess')) - dialogVisible.value = false - return - } - } + // 关闭弹窗 message.success(t('common.createSuccess')) dialogVisible.value = false } finally { @@ -123,12 +134,10 @@ const resetForm = () => { } /** 获取商品属性下拉选项 */ -const getAttrOption = async () => { +const getAttributeOptions = async () => { formLoading.value = true try { - // TODO @芋艿:需要增加一个全列表接口 - const data = await PropertyApi.getPropertyPage({ pageNo: 1, pageSize: 100 }) - attrOption.value = data.list + attributeOptions.value = await PropertyApi.getPropertySimpleList() } finally { formLoading.value = false } diff --git a/src/views/mall/product/spu/form/SkuForm.vue b/src/views/mall/product/spu/form/SkuForm.vue index c6856caf..801f3eea 100644 --- a/src/views/mall/product/spu/form/SkuForm.vue +++ b/src/views/mall/product/spu/form/SkuForm.vue @@ -197,6 +197,7 @@ const generateSkus = (propertyList: any[]) => { skuListRef.value.generateTableData(propertyList) } +// TODO @GoldenZqqq:这里不建议使用 success 去刷新。而是改成点击【属性值】的【添加】后,进行加载列表。后端提供了 getPropertyValueSimpleList 接口哈。 /* 获取属性值列表 */ const getPropertyValueList = async (id, propertyId) => { formLoading.value = true