fix: 完善拼团活动 CRUD

(cherry picked from commit dc39ad0cd1)
This commit is contained in:
puhui999 2023-07-14 17:35:35 +08:00 committed by shizhong
parent e7e0c7a6b7
commit 84d538ad69
5 changed files with 89 additions and 32 deletions

View File

@ -4,7 +4,7 @@ import { Sku, Spu } from '@/api/mall/product/spu'
export interface CombinationActivityVO {
id?: number
name?: string
spuIds?: number[]
spuId?: number
totalLimitCount?: number
singleLimitCount?: number
startTime?: Date
@ -27,7 +27,7 @@ export interface CombinationProductVO {
}
// 扩展 Sku 配置
type SkuExtension = Sku & {
export type SkuExtension = Sku & {
productConfig: CombinationProductVO
}
@ -59,8 +59,3 @@ export const updateCombinationActivity = async (data: CombinationActivityVO) =>
export const deleteCombinationActivity = async (id: number) => {
return await request.delete({ url: '/promotion/combination-activity/delete?id=' + id })
}
// 导出拼团活动 Excel
export const exportCombinationActivity = async (params) => {
return await request.download({ url: '/promotion/combination-activity/export-excel', params })
}

View File

@ -7,7 +7,7 @@
:rules="rules"
:schema="allSchemas.formSchema"
>
<template #spuIds>
<template #spuId>
<el-button @click="spuSelectRef.open()">选择商品</el-button>
<SpuAndSkuList
ref="spuAndSkuListRef"
@ -34,7 +34,7 @@
<el-button @click="dialogVisible = false"> </el-button>
</template>
</Dialog>
<SpuSelect ref="spuSelectRef" @confirm="selectSpu" />
<SpuSelect ref="spuSelectRef" :isSelectSku="true" @confirm="selectSpu" />
</template>
<script lang="ts" setup>
import * as CombinationActivityApi from '@/api/mall/promotion/combination/combinationactivity'
@ -43,7 +43,7 @@ import { allSchemas, rules } from './combinationActivity.data'
import { SpuAndSkuList, SpuProperty, SpuSelect } from '@/views/mall/promotion/components'
import { getPropertyList, RuleConfig } from '@/views/mall/product/spu/components'
import * as ProductSpuApi from '@/api/mall/product/spu'
import { convertToInteger } from '@/utils'
import { convertToInteger, formatToFraction } from '@/utils'
defineOptions({ name: 'PromotionCombinationActivityForm' })
@ -71,32 +71,51 @@ const ruleConfig: RuleConfig[] = [
]
const selectSpu = (spuId: number, skuIds: number[]) => {
formRef.value.setValues({ spuId })
getSpuDetails([spuId])
console.log(skuIds)
getSpuDetails(spuId, skuIds)
}
/**
* 获取 SPU 详情
* @param spuIds
*/
const getSpuDetails = async (spuIds: number[]) => {
const getSpuDetails = async (
spuId: number,
skuIds: number[] | undefined,
products?: CombinationProductVO[]
) => {
const spuProperties: SpuProperty<CombinationActivityApi.SpuExtension>[] = []
const res = (await ProductSpuApi.getSpuDetailList(
spuIds
)) as CombinationActivityApi.SpuExtension[]
const res = (await ProductSpuApi.getSpuDetailList([
spuId
])) as CombinationActivityApi.SpuExtension[]
if (res.length == 0) {
return
}
spuList.value = []
res?.forEach((spu) => {
// sku
spu.skus?.forEach((sku) => {
const config: CombinationActivityApi.CombinationProductVO = {
spuId: spu.id!,
skuId: sku.id!,
activePrice: 0
//
const spu = res[0]
const selectSkus =
typeof skuIds === 'undefined' ? spu?.skus : spu?.skus?.filter((sku) => skuIds.includes(sku.id!))
selectSkus?.forEach((sku) => {
let config: CombinationProductVO = {
spuId: spu.id!,
skuId: sku.id!,
activePrice: 0
}
if (typeof products !== 'undefined') {
const product = products.find((item) => item.skuId === sku.id)
if (product) {
//
product.activePrice = formatToFraction(product.activePrice)
}
sku.productConfig = config
})
spuProperties.push({ spuId: spu.id!, spuDetail: spu, propertyList: getPropertyList(spu) })
config = product || config
}
sku.productConfig = config
})
spuList.value.push(...res)
spu.skus = selectSkus as CombinationActivityApi.SkuExtension[]
spuProperties.push({
spuId: spu.id!,
spuDetail: spu,
propertyList: getPropertyList(spu)
})
spuList.value.push(spu)
spuPropertyList.value = spuProperties
}
@ -107,11 +126,19 @@ const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
await resetForm()
//
if (id) {
formLoading.value = true
try {
const data = await CombinationActivityApi.getCombinationActivity(id)
const data = (await CombinationActivityApi.getCombinationActivity(
id
)) as CombinationActivityApi.CombinationActivityVO
await getSpuDetails(
data.spuId!,
data.products?.map((sku) => sku.skuId),
data.products
)
formRef.value.setValues(data)
} finally {
formLoading.value = false
@ -120,6 +147,14 @@ const open = async (type: string, id?: number) => {
}
defineExpose({ open }) // open
/** 重置表单 */
const resetForm = async () => {
spuList.value = []
spuPropertyList.value = []
await nextTick()
formRef.value.getElFormRef().resetFields()
}
/** 提交表单 */
const emit = defineEmits(['success']) // success
const submitForm = async () => {

View File

@ -134,7 +134,7 @@ const crudSchemas = reactive<CrudSchema[]>([
},
{
label: '拼团商品',
field: 'spuIds',
field: 'spuId',
isSearch: false,
form: {
colProps: {

View File

@ -29,6 +29,14 @@
total: tableObject.total
}"
>
<template #spuId="{ row }">
<el-image
:src="row.picUrl"
class="w-30px h-30px align-middle mr-5px"
@click="imagePreview(row.picUrl)"
/>
<span class="align-middle">{{ row.spuName }}</span>
</template>
<template #action="{ row }">
<el-button
v-hasPermi="['promotion:combination-activity:update']"
@ -57,6 +65,8 @@
import { allSchemas } from './combinationActivity.data'
import * as CombinationActivityApi from '@/api/mall/promotion/combination/combinationactivity'
import CombinationActivityForm from './CombinationActivityForm.vue'
import { cloneDeep } from 'lodash-es'
import { createImageViewer } from '@/components/ImageViewer'
defineOptions({ name: 'PromotionCombinationActivity' })
@ -70,6 +80,13 @@ const { tableObject, tableMethods } = useTable({
//
const { getList, setSearchParams } = tableMethods
/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
createImageViewer({
urlList: [imgUrl]
})
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
@ -83,6 +100,17 @@ const handleDelete = (id: number) => {
/** 初始化 **/
onMounted(() => {
/*
TODO
后面准备封装成一个函数来操作 tableColumns 重新排列比如说需求是表单上商品选择是在后面的而列表展示的时候需要调到位置
封装效果支持批量操作给出 field 和需要插入的位置[{field:'spuId',index: 1}] 效果为把 field spuId column 移动到第一个位置
*/
//
const index = allSchemas.tableColumns.findIndex((item) => item.field === 'spuId')
const column = cloneDeep(allSchemas.tableColumns[index])
allSchemas.tableColumns.splice(index, 1)
//
allSchemas.tableColumns.unshift(column)
getList()
})
</script>

View File

@ -87,7 +87,6 @@ const selectSpu = (spuId: number, skuIds: number[]) => {
}
/**
* 获取 SPU 详情
* @param spuIds
*/
const getSpuDetails = async (
spuId: number,
@ -113,7 +112,7 @@ const getSpuDetails = async (
if (typeof products !== 'undefined') {
const product = products.find((item) => item.skuId === sku.id)
if (product) {
//
//
product.seckillPrice = formatToFraction(product.seckillPrice)
}
config = product || config