From 9ee35fc165a546a09b85f5667cc2a8b8e728993f Mon Sep 17 00:00:00 2001 From: puhui999 Date: Wed, 3 May 2023 02:28:35 +0800 Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E7=AE=A1=E7=90=86:=20?= =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=9B=B8=E5=85=B3=E7=BB=84=E4=BB=B6=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E9=80=BB=E8=BE=91,=E5=AE=8C=E6=88=90=E8=A1=A8?= =?UTF-8?q?=E5=8D=95=E4=BF=9D=E5=AD=98=E5=92=8C=E6=95=B0=E6=8D=AE=E5=9B=9E?= =?UTF-8?q?=E6=98=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/mall/product/management/sku.ts | 0 src/api/mall/product/management/spu.ts | 4 + .../mall/product/management/type/skuType.ts | 4 + .../mall/product/management/type/spuType.ts | 3 +- src/api/mall/product/property.ts | 4 +- src/views/mall/product/management/addForm.vue | 19 ++++- .../management/components/BasicInfoForm.vue | 7 +- .../product/management/components/SkuList.vue | 32 ++++++-- src/views/mall/product/management/index.vue | 76 +++++++++++++------ 9 files changed, 112 insertions(+), 37 deletions(-) delete mode 100644 src/api/mall/product/management/sku.ts diff --git a/src/api/mall/product/management/sku.ts b/src/api/mall/product/management/sku.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/src/api/mall/product/management/spu.ts b/src/api/mall/product/management/spu.ts index 1205b0f2..007963bb 100644 --- a/src/api/mall/product/management/spu.ts +++ b/src/api/mall/product/management/spu.ts @@ -13,3 +13,7 @@ export const createSpu = (data: SpuType) => { export const updateSpu = (data: SpuType) => { return request.put({ url: '/product/spu/update', data }) } +// 获得商品spu +export const getSpu = (id: number) => { + return request.get({ url: `/product/spu/get-detail?id=${id}` }) +} diff --git a/src/api/mall/product/management/type/skuType.ts b/src/api/mall/product/management/type/skuType.ts index 6de0d893..42889dc4 100644 --- a/src/api/mall/product/management/type/skuType.ts +++ b/src/api/mall/product/management/type/skuType.ts @@ -11,6 +11,10 @@ export interface Property { * 关联 {@link ProductPropertyValueDO#getId()} */ valueId?: number + /** + * 属性值名称 + */ + valueName?: string } export interface SkuType { diff --git a/src/api/mall/product/management/type/spuType.ts b/src/api/mall/product/management/type/spuType.ts index f0deaed3..11c3c888 100644 --- a/src/api/mall/product/management/type/spuType.ts +++ b/src/api/mall/product/management/type/spuType.ts @@ -1,6 +1,7 @@ import { SkuType } from './skuType' export interface SpuType { + id?: number name?: string // 商品名称 categoryId?: number | null // 商品分类 keyword?: string // 关键字 @@ -11,7 +12,7 @@ export interface SpuType { deliveryTemplateId?: number // 运费模版 specType?: boolean // 商品规格 subCommissionType?: boolean // 分销类型 - skus?: SkuType[] // sku数组 + skus: SkuType[] // sku数组 description?: string // 商品详情 sort?: string // 商品排序 giveIntegral?: number // 赠送积分 diff --git a/src/api/mall/product/property.ts b/src/api/mall/product/property.ts index 01c79f9f..ac8bac59 100644 --- a/src/api/mall/product/property.ts +++ b/src/api/mall/product/property.ts @@ -71,8 +71,8 @@ export const getPropertyList = (params: any) => { } // 获得属性项列表 -export const getPropertyListAndValue = (params: any) => { - return request.get({ url: '/product/property/get-value-list', params }) +export const getPropertyListAndValue = (data: any) => { + return request.post({ url: '/product/property/get-value-list', data }) } // ------------------------ 属性值 ------------------- diff --git a/src/views/mall/product/management/addForm.vue b/src/views/mall/product/management/addForm.vue index 673aa2a3..27f8a8ae 100644 --- a/src/views/mall/product/management/addForm.vue +++ b/src/views/mall/product/management/addForm.vue @@ -36,6 +36,7 @@ import { useTagsViewStore } from '@/store/modules/tagsView' import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components' import type { SpuType } from '@/api/mall/product/management/type/spuType' // 业务api import * as managementApi from '@/api/mall/product/management/spu' +import * as PropertyApi from '@/api/mall/product/property' const { t } = useI18n() // 国际化 const message = useMessage() // 消息弹窗 @@ -122,8 +123,20 @@ const formData = ref({ /** 获得详情 */ const getDetail = async () => { const id = query.id as unknown as number - if (!id) { - return + if (id) { + formLoading.value = true + try { + const res = (await managementApi.getSpu(id)) as SpuType + formData.value = res + // 直接取第一个值就能得到所有属性的id + const propertyIds = res.skus[0]?.properties.map((item) => item.propertyId) + const PropertyS = await PropertyApi.getPropertyListAndValue({ propertyIds }) + await nextTick() + // 回显商品属性 + BasicInfoRef.value.addAttribute(PropertyS) + } finally { + formLoading.value = false + } } } @@ -145,7 +158,7 @@ const submitForm = async () => { // 多规格情况移除skus相关属性值value if (formData.value.specType) { item.properties.forEach((item2) => { - delete item2.value + delete item2.valueName }) } }) diff --git a/src/views/mall/product/management/components/BasicInfoForm.vue b/src/views/mall/product/management/components/BasicInfoForm.vue index 1d3f93df..1b60c17e 100644 --- a/src/views/mall/product/management/components/BasicInfoForm.vue +++ b/src/views/mall/product/management/components/BasicInfoForm.vue @@ -131,6 +131,10 @@ const ProductManagementBasicInfoRef = ref() // 表单Ref const attributeList = ref([]) // 商品属性列表 /** 添加商品属性 */ const addAttribute = (property: any) => { + if (Array.isArray(property)) { + attributeList.value = property + return + } attributeList.value.push(property) } const formData = reactive({ @@ -191,7 +195,7 @@ const validate = async () => { } }) } -defineExpose({ validate }) +defineExpose({ validate, addAttribute }) // 分销类型 const changeSubCommissionType = () => { @@ -203,7 +207,6 @@ const changeSubCommissionType = () => { } // 选择规格 const onChangeSpec = () => { - console.log(111) // 重置商品属性列表 attributeList.value = [] // 重置sku列表 diff --git a/src/views/mall/product/management/components/SkuList.vue b/src/views/mall/product/management/components/SkuList.vue index 7ac596e9..2a7441cc 100644 --- a/src/views/mall/product/management/components/SkuList.vue +++ b/src/views/mall/product/management/components/SkuList.vue @@ -1,5 +1,11 @@ @@ -106,11 +106,38 @@ /> + + + - @@ -166,7 +191,8 @@ const headerNum = ref([ type: 5 } ]) -const imgViewVisible = ref(false) +const imgViewVisible = ref(false) // 商品图预览 +const imageViewerList = ref([]) // 商品图预览列表 const queryParams = reactive({ pageNo: 1, pageSize: 10 @@ -184,7 +210,21 @@ const getList = async () => { loading.value = false } } - +/** + * 更改SPU状态 + * @param row + */ +const changeStatus = (row) => { + console.log(row) +} +/** + * 商品图预览 + * @param imgUrl + */ +const imagePreview = (imgUrl: string) => { + imageViewerList.value = [imgUrl] + imgViewVisible.value = true +} /** 搜索按钮操作 */ const handleQuery = () => { getList() @@ -196,26 +236,18 @@ const resetQuery = () => { handleQuery() } +/** + * 新增或修改 + * @param id + */ const openForm = (id?: number) => { if (typeof id === 'number') { push('/product/productManagementAdd?id=' + id) + return } push('/product/productManagementAdd') } -/** 删除按钮操作 */ -// const handleDelete = async (id: number) => { -// try { -// // 删除的二次确认 -// await message.delConfirm() -// // 发起删除 -// await ProductBrandApi.deleteBrand(id) -// message.success(t('common.delSuccess')) -// // 刷新列表 -// await getList() -// } catch {} -// } - /** 初始化 **/ onMounted(() => { getList()