fix: mall SeckillActivity and CombinationActivity

This commit is contained in:
puhui999 2023-07-05 18:24:32 +08:00
parent ce3ca7c6ce
commit 4057130275
10 changed files with 152 additions and 65 deletions

View File

@ -1,20 +1,38 @@
import request from '@/config/axios'
import { Sku, Spu } from '@/api/mall/product/spu'
export interface CombinationActivityVO {
id: number
name: string
id?: number
name?: string
spuIds?: number[]
totalLimitCount?: number
singleLimitCount?: number
startTime?: Date
endTime?: Date
userSize?: number
totalNum?: number
successNum?: number
orderUserCount?: number
virtualGroup?: number
status?: number
limitDuration?: number
products: CombinationProductVO[]
}
// 拼团活动所需属性
export interface CombinationProductVO {
spuId: number
totalLimitCount: number
singleLimitCount: number
startTime: Date
endTime: Date
userSize: number
totalNum: number
successNum: number
orderUserCount: number
virtualGroup: number
status: number
limitDuration: number
skuId: number
activePrice: number // 拼团价格
}
// 扩展 Sku 配置
type SkuExtension = Sku & {
productConfig: CombinationProductVO
}
export interface SpuExtension extends Spu {
skus: SkuExtension[] // 重写类型
}
// 查询拼团活动列表

View File

@ -27,7 +27,7 @@ export function formatDate(date: Date, format?: string): string {
* +
*/
export function getNowDateTime() {
return dayjs().format('YYYY-MM-DD HH:mm:ss')
return dayjs()
}
/**

View File

@ -2,7 +2,7 @@
<!-- 情况一添加/修改 -->
<el-table
v-if="!isDetail && !isActivityComponent"
:data="isBatch ? skuList : formData!.skus"
:data="isBatch ? skuList : formData!.skus!"
border
class="tabNumWidth"
max-height="500"
@ -114,7 +114,7 @@
<el-table
v-if="isDetail"
ref="activitySkuListRef"
:data="formData!.skus"
:data="formData!.skus!"
border
max-height="500"
size="small"
@ -195,7 +195,7 @@
<!-- 情况三作为活动组件 -->
<el-table
v-if="isActivityComponent"
:data="formData!.skus"
:data="formData!.skus!"
border
max-height="500"
size="small"
@ -260,7 +260,7 @@ import { UploadImg } from '@/components/UploadFile'
import type { Property, Sku, Spu } from '@/api/mall/product/spu'
import { createImageViewer } from '@/components/ImageViewer'
import { RuleConfig } from '@/views/mall/product/spu/components/index'
import { Properties } from './index'
import { PropertyAndValues } from './index'
import { ElTable } from 'element-plus'
defineOptions({ name: 'SkuList' })
@ -272,7 +272,7 @@ const props = defineProps({
default: () => {}
},
propertyList: {
type: Array as PropType<Properties[]>,
type: Array as PropType<PropertyAndValues[]>,
default: () => []
},
ruleConfig: {
@ -482,7 +482,7 @@ const build = (propertyValuesList: Property[][]) => {
/** 监听属性列表,生成相关参数和表头 */
watch(
() => props.propertyList,
(propertyList: Properties[]) => {
(propertyList: PropertyAndValues[]) => {
//
if (!formData.value!.specType) {
return

View File

@ -7,11 +7,11 @@ import SkuList from './SkuList.vue'
import { Spu } from '@/api/mall/product/spu'
// TODO @puhui999Properties 改成 Property 更合适?
interface Properties {
// TODO @puhui999Properties 改成 Property 更合适?Property 在 Spu 中已存在避免冲突 PropertyAndValues
interface PropertyAndValues {
id: number
name: string
values?: Properties[]
values?: PropertyAndValues[]
}
interface RuleConfig {
@ -23,7 +23,7 @@ interface RuleConfig {
// 例需要校验价格必须大于0.01
// {
// name:'price',
// rule:(arg) => arg > 0.01
// rule:(arg: number) => arg > 0.01
// }
rule: (arg: any) => boolean
// 校验不通过时的消息提示
@ -34,11 +34,11 @@ interface RuleConfig {
*
*
* @param spu
* @return Property
* @return PropertyAndValues
*/
const getPropertyList = (spu: Spu): Properties[] => {
const getPropertyList = (spu: Spu): PropertyAndValues[] => {
// 直接拿返回的 skus 属性逆向生成出 propertyList
const properties: Properties[] = []
const properties: PropertyAndValues[] = []
// 只有是多规格才处理
if (spu.specType) {
spu.skus?.forEach((sku) => {
@ -66,6 +66,6 @@ export {
ProductPropertyAddForm,
SkuList,
getPropertyList,
Properties,
PropertyAndValues,
RuleConfig
}

View File

@ -1,21 +1,49 @@
<template>
<Dialog v-model="dialogVisible" :title="dialogTitle">
<Dialog v-model="dialogVisible" :title="dialogTitle" width="65%">
<Form
ref="formRef"
v-loading="formLoading"
:is-col="true"
:rules="rules"
:schema="allSchemas.formSchema"
>
<template #spuIds>
<el-button @click="spuSelectRef.open()">选择商品</el-button>
<SpuAndSkuList
ref="spuAndSkuListRef"
:rule-config="ruleConfig"
:spu-list="spuList"
:spu-property-list-p="spuPropertyList"
>
<el-table-column align="center" label="拼团价格(元)" min-width="168">
<template #default="{ row: sku }">
<el-input-number
v-model="sku.productConfig.activePrice"
:min="0"
:precision="2"
:step="0.1"
class="w-100%"
/>
</template>
</el-table-column>
</SpuAndSkuList>
</template>
</Form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="dialogVisible = false"> </el-button>
</template>
</Dialog>
<SpuSelect ref="spuSelectRef" @confirm="selectSpu" />
</template>
<script lang="ts" setup>
import * as CombinationActivityApi from '@/api/mall/promotion/combination/combinationactivity'
import { CombinationProductVO } from '@/api/mall/promotion/combination/combinationactivity'
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'
defineOptions({ name: 'PromotionCombinationActivityForm' })
@ -28,6 +56,52 @@ const formLoading = ref(false) // 表单的加载中1修改时的数据加
const formType = ref('') // create - update -
const formRef = ref() // Ref
// ================= =================
const spuSelectRef = ref() // Ref
const spuAndSkuListRef = ref() // sku Ref
const spuList = ref<CombinationActivityApi.SpuExtension[]>([]) // spu
const spuPropertyList = ref<SpuProperty<CombinationActivityApi.SpuExtension>[]>([])
const ruleConfig: RuleConfig[] = [
{
name: 'productConfig.activePrice',
rule: (arg) => arg > 0.01,
message: '商品拼团价格不能小于0.01 '
}
]
const selectSpu = (spuId: number, skuIds: number[]) => {
formRef.value.setValues({ spuId })
getSpuDetails([spuId])
console.log(skuIds)
}
/**
* 获取 SPU 详情
* @param spuIds
*/
const getSpuDetails = async (spuIds: number[]) => {
const spuProperties: SpuProperty<CombinationActivityApi.SpuExtension>[] = []
const res = (await ProductSpuApi.getSpuDetailList(
spuIds
)) as CombinationActivityApi.SpuExtension[]
spuList.value = []
res?.forEach((spu) => {
// sku
spu.skus?.forEach((sku) => {
const config: CombinationActivityApi.CombinationProductVO = {
spuId: spu.id!,
skuId: sku.id!,
activePrice: 0
}
sku.productConfig = config
})
spuProperties.push({ spuId: spu.id!, spuDetail: spu, propertyList: getPropertyList(spu) })
})
spuList.value.push(...res)
spuPropertyList.value = spuProperties
}
// ================= end =================
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
@ -57,6 +131,12 @@ const submitForm = async () => {
formLoading.value = true
try {
const data = formRef.value.formModel as CombinationActivityApi.CombinationActivityVO
const products = spuAndSkuListRef.value.getSkuConfigs('productConfig')
products.forEach((item: CombinationProductVO) => {
//
item.activePrice = convertToInteger(item.activePrice)
})
data.products = products
if (formType.value === 'create') {
await CombinationActivityApi.createCombinationActivity(data)
message.success(t('common.createSuccess'))

View File

@ -38,17 +38,19 @@ const crudSchemas = reactive<CrudSchema[]>([
show: true,
component: 'DatePicker',
componentProps: {
valueFormat: 'YYYY-MM-DD HH:mm:ss',
type: 'datetimerange'
valueFormat: 'x',
type: 'datetimerange',
rangeSeparator: '至'
}
},
form: {
component: 'DatePicker',
componentProps: {
valueFormat: 'YYYY-MM-DD HH:mm:ss',
type: 'datetimerange'
valueFormat: 'x',
type: 'datetimerange',
rangeSeparator: '至'
},
value: [getNowDateTime(), getNowDateTime()],
value: [getNowDateTime().valueOf(), getNowDateTime().valueOf()],
colProps: {
span: 24
}
@ -120,10 +122,7 @@ const crudSchemas = reactive<CrudSchema[]>([
field: 'virtualGroup',
isSearch: false,
isTable: false,
form: {
component: 'InputNumber',
value: 0
}
isForm: false
},
{
label: '活动状态',
@ -133,25 +132,9 @@ const crudSchemas = reactive<CrudSchema[]>([
isSearch: true,
isForm: false
},
{
label: '创建时间',
field: 'createTime',
formatter: dateFormatter,
isSearch: false,
isTable: false,
search: {
component: 'DatePicker',
componentProps: {
valueFormat: 'YYYY-MM-DD HH:mm:ss',
type: 'daterange',
defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
}
},
isForm: false
},
{
label: '拼团商品',
field: 'spuId',
field: 'spuIds',
isSearch: false,
form: {
colProps: {

View File

@ -111,7 +111,7 @@
</template>
<script lang="ts" setup>
import { getPropertyList, Properties, SkuList } from '@/views/mall/product/spu/components'
import { getPropertyList, PropertyAndValues, SkuList } from '@/views/mall/product/spu/components'
import { ElTable } from 'element-plus'
import { dateFormatter } from '@/utils/formatTime'
import { createImageViewer } from '@/components/ImageViewer'
@ -144,7 +144,7 @@ const queryParams = ref({
categoryId: null,
createTime: []
}) //
const propertyList = ref<Properties[]>([]) //
const propertyList = ref<PropertyAndValues[]>([]) //
const spuListRef = ref<InstanceType<typeof ElTable>>()
const skuListRef = ref() // Ref
const spuData = ref<ProductSpuApi.Spu>() //

View File

@ -1,11 +1,11 @@
import SpuSelect from './SpuSelect.vue'
import SpuAndSkuList from './SpuAndSkuList.vue'
import { Properties } from '@/views/mall/product/spu/components'
import { PropertyAndValues } from '@/views/mall/product/spu/components'
type SpuProperty<T> = {
spuId: number
spuDetail: T
propertyList: Properties[]
propertyList: PropertyAndValues[]
}
/**

View File

@ -66,6 +66,7 @@ import { allSchemas } from './seckillActivity.data'
import { getListAllSimple } from '@/api/mall/promotion/seckill/seckillConfig'
import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
import SeckillActivityForm from './SeckillActivityForm.vue'
import { cloneDeep } from 'lodash-es'
defineOptions({ name: 'PromotionSeckillActivity' })
@ -90,11 +91,10 @@ const handleDelete = (id: number) => {
tableMethods.delList(id, false)
}
// TODO @puhui configList
const seckillConfigAllSimple = ref([]) //
const configList = ref([]) //
const convertSeckillConfigNames = computed(
() => (row) =>
seckillConfigAllSimple.value
configList.value
?.filter((item) => row.configIds.includes(item.id))
?.map((config) => config.name)
)
@ -106,7 +106,13 @@ const expandChange = (row, expandedRows) => {
/** 初始化 **/
onMounted(async () => {
//
const index = allSchemas.tableColumns.findIndex((item) => item.field === 'spuId')
const column = cloneDeep(allSchemas.tableColumns[index])
allSchemas.tableColumns.splice(index, 1)
//
allSchemas.tableColumns.unshift(column)
await getList()
seckillConfigAllSimple.value = await getListAllSimple()
configList.value = await getListAllSimple()
})
</script>

View File

@ -186,7 +186,7 @@ const crudSchemas = reactive<CrudSchema[]>([
{
label: '秒杀活动商品',
field: 'spuId',
isTable: false,
isTable: true,
isSearch: false,
form: {
colProps: {