yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

!307 mall 商城优化完善 

Merge pull request !307 from puhui999/dev-mall
pull/305/MERGE
芋道源码 2025-12-21 11:13:33 +00:00 committed by Gitee
parent 7ab917dc48 568d5aa4cf
commit a3f282cba3
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
45 changed files with 1670 additions and 1470 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web-antd/src/views/mall/product/comment/modules/form.vue
View File

@ -99,16 +99,14 @@ const [Modal, modalApi] = useVbenModal({
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
// 关闭时重置表单状态
selectedSku.value = undefined;
await formApi.setValues({ spuId: undefined, skuId: undefined });
return;
}
// 加载数据
const data = modalApi.getData<MallCommentApi.Comment>();
if (!data || !data.id) {
// 新建模式：重置表单
// TODO @puhui999：这里的重置，可以统一到 103 行那么？
selectedSku.value = undefined;
await formApi.setValues({ spuId: undefined, skuId: undefined });
return;
}
// 编辑模式：加载数据

9
apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue
View File

@ -4,7 +4,7 @@ import type { MallSpuApi } from '#/api/mall/product/spu';
import { computed, ref, watch } from 'vue';
import { CloseCircleFilled, PlusOutlined } from '@vben/icons';
import { IconifyIcon } from '@vben/icons';
import { Image, Tooltip } from 'ant-design-vue';
@ -110,9 +110,9 @@ function emitSpuChange() {
class="h-full w-full rounded-lg object-cover"
/>
<!-- 删除按钮 -->
<!-- TODO @puhui999：还是使用 IconifyIcon：使用自己的中立的图标，方便 antd 和 ele 共享 -->
<CloseCircleFilled
<IconifyIcon
v-if="!disabled"
icon="lucide:circle-x"
class="absolute -right-2 -top-2 cursor-pointer text-xl text-red-500 opacity-0 transition-opacity hover:text-red-600 group-hover:opacity-100"
@click="handleRemoveSpu(index)"
/>
@ -126,8 +126,7 @@ function emitSpuChange() {
class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors hover:border-primary hover:bg-primary/5"
@click="handleOpenSpuSelect"
>
<!-- TODO @puhui999：还是使用 IconifyIcon：使用自己的中立的图标，方便 antd 和 ele 共享 -->
<PlusOutlined class="text-xl text-gray-400" />
<IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
</div>
</Tooltip>
</div>

58
apps/web-antd/src/views/mall/product/spu/form/index.vue
View File

@ -32,30 +32,6 @@ const spuId = ref<number>();
const { params, name } = useRoute();
const { closeCurrentTab } = useTabs();
const activeTabName = ref('info');
// TODO @puhui999：这个要不要类似 ele 里，直接写到 html 里？
const tabList = ref([
{
key: 'info',
tab: '基础设置',
},
{
key: 'sku',
tab: '价格库存',
},
{
key: 'delivery',
tab: '物流设置',
},
{
key: 'description',
tab: '商品详情',
},
{
key: 'other',
tab: '其它设置',
},
]);
const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const isDetail = ref(name === 'ProductSpuDetail'); // 是否查看详情
const skuListRef = ref(); // 商品属性列表 Ref
@ -95,22 +71,22 @@ const propertyList = ref<PropertyAndValues[]>([]); // 商品属性列表
const ruleConfig: RuleConfig[] = [
{
name: 'stock',
rule: (arg) => arg >= 0,
rule: (arg: number) => arg >= 0,
message: '商品库存必须大于等于 1 ！！！',
},
{
name: 'price',
rule: (arg) => arg >= 0.01,
rule: (arg: number) => arg >= 0.01,
message: '商品销售价格必须大于等于 0.01 元！！！',
},
{
name: 'marketPrice',
rule: (arg) => arg >= 0.01,
rule: (arg: number) => arg >= 0.01,
message: '商品市场价格必须大于等于 0.01 元！！！',
},
{
name: 'costPrice',
rule: (arg) => arg >= 0.01,
rule: (arg: number) => arg >= 0.01,
message: '商品成本价格必须大于等于 0.00 元！！！',
},
]; // sku 相关属性校验规则
@ -222,7 +198,7 @@ async function handleSubmit() {
item.secondBrokeragePrice = convertToInteger(item.secondBrokeragePrice);
});
}
// 处理轮播图列表 TODO @puhui999：这个是必须的哇？
// 处理轮播图列表：上传组件可能返回对象或字符串，统一处理成字符串数组
const newSliderPicUrls: any[] = [];
values.sliderPicUrls!.forEach((item: any) => {
// 如果是前端选的图
@ -344,7 +320,28 @@ onMounted(async () => {
<Card
class="h-full w-full"
:loading="formLoading"
:tab-list="tabList"
:tab-list="[
{
key: 'info',
tab: '基础设置',
},
{
key: 'sku',
tab: '价格库存',
},
{
key: 'delivery',
tab: '物流设置',
},
{
key: 'description',
tab: '商品详情',
},
{
key: 'other',
tab: '其它设置',
},
]"
:active-key="activeTabName"
@tab-change="handleTabChange"
>
@ -410,7 +407,6 @@ onMounted(async () => {
</div>
</template>
<style lang="scss" scoped>
// TODO @puhui999：这个样式是必须的哇？
:deep(.ant-tabs-tab-btn) {
font-size: 14px !important;
}

53
apps/web-antd/src/views/mall/promotion/bargain/activity/data.ts
View File

@ -33,6 +33,7 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
showTime: true,
placeholder: '请选择开始时间',
},
rules: 'required',
@ -44,51 +45,18 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
showTime: true,
placeholder: '请选择结束时间',
},
rules: 'required',
},
{
fieldName: 'bargainFirstPrice',
label: '砍价起始价格(元)',
component: 'InputNumber',
componentProps: {
min: 0,
precision: 2,
step: 0.01,
placeholder: '请输入砍价起始价格',
},
rules: 'required',
},
{
fieldName: 'bargainMinPrice',
label: '砍价底价(元)',
component: 'InputNumber',
componentProps: {
min: 0,
precision: 2,
step: 0.01,
placeholder: '请输入砍价底价',
},
rules: 'required',
},
{
fieldName: 'stock',
label: '活动库存',
component: 'InputNumber',
componentProps: {
min: 1,
placeholder: '请输入活动库存',
},
rules: 'required',
},
{
fieldName: 'helpMaxCount',
label: '助力人数',
component: 'InputNumber',
componentProps: {
min: 1,
placeholder: '请输入助力人数',
placeholder: '达到该人数才能砍到低价',
},
rules: 'required',
},
@ -98,7 +66,7 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'InputNumber',
componentProps: {
min: 1,
placeholder: '请输入砍价次数',
placeholder: '最大帮砍次数',
},
rules: 'required',
},
@ -108,7 +76,7 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'InputNumber',
componentProps: {
min: 1,
placeholder: '请输入购买限制',
placeholder: '最大购买次数',
},
rules: 'required',
},
@ -120,7 +88,7 @@ export function useFormSchema(): VbenFormSchema[] {
min: 0,
precision: 2,
step: 0.01,
placeholder: '请输入最小砍价金额',
placeholder: '用户每次砍价的最小金额',
},
},
{
@ -131,9 +99,16 @@ export function useFormSchema(): VbenFormSchema[] {
min: 0,
precision: 2,
step: 0.01,
placeholder: '请输入最大砍价金额',
placeholder: '用户每次砍价的最大金额',
},
},
{
fieldName: 'spuId',
label: '砍价商品',
component: 'Input',
rules: 'required',
formItemClass: 'col-span-2',
},
];
}

390
apps/web-antd/src/views/mall/promotion/bargain/activity/modules/form.vue
View File

@ -1,13 +1,20 @@
<script lang="ts" setup>
import type { MallSpuApi } from '#/api/mall/product/spu';
import type { MallBargainActivityApi } from '#/api/mall/promotion/bargain/bargainActivity';
import type {
RuleConfig,
SpuProperty,
} from '#/views/mall/product/spu/components';
import { computed, nextTick, ref } from 'vue';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
import { Button, message } from 'ant-design-vue';
import { Button, InputNumber, message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { VxeColumn } from '#/adapter/vxe-table';
import { getSpu } from '#/api/mall/product/spu';
import {
createBargainActivity,
@ -15,7 +22,11 @@ import {
updateBargainActivity,
} from '#/api/mall/promotion/bargain/bargainActivity';
import { $t } from '#/locales';
import { SpuSkuSelect } from '#/views/mall/product/spu/components';
import {
getPropertyList,
SpuAndSkuList,
SpuSkuSelect,
} from '#/views/mall/product/spu/components';
import { useFormSchema } from '../data';
@ -30,47 +41,6 @@ const getTitle = computed(() => {
: $t('ui.actionTitle.create', ['砍价活动']);
});
// ================= 商品选择相关 =================
const spuId = ref<number>();
const skuId = ref<number>();
const spuName = ref<string>('');
const skuInfo = ref<{
picUrl: string;
price: number;
skuName: string;
}>();
const spuSkuSelectRef = ref(); // 商品选择弹窗 Ref
/** 打开商品选择弹窗 */
const handleSelectProduct = () => {
spuSkuSelectRef.value?.open();
};
/** 选择商品后的回调 */
async function handleSpuSelected(selectedSpuId: number, skuIds?: number[]) {
const spu = await getSpu(selectedSpuId);
if (!spu) return;
spuId.value = spu.id;
spuName.value = spu.name || '';
// 砍价活动只选择一个 SKU
if (skuIds && skuIds.length > 0) {
const selectedSku = spu.skus?.find((sku) => sku.id === skuIds[0]);
if (selectedSku) {
skuId.value = selectedSku.id;
skuInfo.value = {
skuName: selectedSku.name || '',
picUrl: selectedSku.picUrl || spu.picUrl || '',
price: Number(selectedSku.price) || 0,
};
}
}
}
// ================= end =================
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
@ -78,46 +48,151 @@ const [Form, formApi] = useVbenForm({
},
labelWidth: 130,
},
wrapperClass: 'grid-cols-2',
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
});
// ================= 商品选择相关 =================
const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
const ruleConfig: RuleConfig[] = [
{
name: 'productConfig.bargainFirstPrice',
rule: (arg) => arg > 0,
message: '商品砍价起始价格必须大于 0 ！！！',
},
{
name: 'productConfig.bargainMinPrice',
rule: (arg) => arg >= 0,
message: '商品砍价底价不能小于 0 ！！！',
},
{
name: 'productConfig.stock',
rule: (arg) => arg >= 1,
message: '商品活动库存必须大于等于 1 ！！！',
},
];
const spuList = ref<MallSpuApi.Spu[]>([]); // 选择的 SPU 列表
const spuPropertyList = ref<SpuProperty<MallSpuApi.Spu>[]>([]); // SPU 属性列表
/** 打开商品选择器 */
function openSpuSelect() {
spuSkuSelectRef.value?.open();
}
/** 选择商品后的回调 */
async function handleSpuSelected(spuId: number, skuIds?: number[]) {
await formApi.setFieldValue('spuId', spuId);
await getSpuDetails(spuId, skuIds);
}
/** 获取 SPU 详情 */
async function getSpuDetails(
spuId: number,
skuIds?: number[],
products?: MallBargainActivityApi.BargainProduct[],
) {
const res = await getSpu(spuId);
if (!res) {
return;
}
spuList.value = [];
// 筛选指定的 SKU（砍价活动只选择一个 SKU）
const selectSkus =
skuIds === undefined
? res.skus
: res.skus?.filter((sku) => skuIds.includes(sku.id!));
// 为每个 SKU 配置砍价活动相关的配置
selectSkus?.forEach((sku) => {
let config: MallBargainActivityApi.BargainProduct = {
spuId: res.id!,
skuId: sku.id!,
bargainFirstPrice: 1,
bargainMinPrice: 1,
stock: 1,
};
// 如果是编辑模式，回填已有配置
if (products !== undefined) {
const product = products.find((item) => item.skuId === sku.id);
if (product) {
// 分转元
product.bargainFirstPrice = formatToFraction(
product.bargainFirstPrice,
) as unknown as number;
product.bargainMinPrice = formatToFraction(
product.bargainMinPrice,
) as unknown as number;
}
config = product || config;
}
// 动态添加 productConfig 属性到 SKU
(
sku as MallSpuApi.Sku & {
productConfig: MallBargainActivityApi.BargainProduct;
}
).productConfig = config;
});
res.skus = selectSkus;
const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
{
spuId: res.id!,
spuDetail: res,
propertyList: getPropertyList(res),
},
];
// 直接赋值，因为砍价活动只选择一个 SPU
spuList.value = [res];
spuPropertyList.value = spuProperties;
}
// ================= end =================
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
// 验证商品和 SKU 选择
if (!spuId.value) {
message.error('请选择砍价商品');
return;
}
if (!skuId.value) {
message.error('请选择商品 SKU');
return;
}
// 提交表单
modalApi.lock();
try {
// 获取砍价商品配置（深拷贝避免直接修改原对象）
const products: MallBargainActivityApi.BargainProduct[] = cloneDeep(
spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
);
if (products.length === 0) {
message.error('请选择砍价商品');
return;
}
// 价格需要转为分
products.forEach((item) => {
item.bargainFirstPrice = convertToInteger(item.bargainFirstPrice);
item.bargainMinPrice = convertToInteger(item.bargainMinPrice);
});
// 提交表单
const values = await formApi.getValues();
const data = {
...values,
spuId: spuId.value,
skuId: skuId.value,
bargainFirstPrice: Math.round((values.bargainFirstPrice || 0) * 100),
bargainMinPrice: Math.round((values.bargainMinPrice || 0) * 100),
// 用户每次砍价金额元转分
randomMinPrice: values.randomMinPrice
? Math.round(values.randomMinPrice * 100)
? convertToInteger(values.randomMinPrice)
: undefined,
randomMaxPrice: values.randomMaxPrice
? Math.round(values.randomMaxPrice * 100)
? convertToInteger(values.randomMaxPrice)
: undefined,
// 合并砍价商品配置（砍价活动只有一个商品）
...products[0],
} as MallBargainActivityApi.BargainActivity;
await (formData.value?.id
? updateBargainActivity(data)
: createBargainActivity(data));
@ -132,54 +207,44 @@ const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
spuId.value = undefined;
skuId.value = undefined;
spuName.value = '';
skuInfo.value = undefined;
spuList.value = [];
spuPropertyList.value = [];
return;
}
// 加载表单数据
// 加载数据
const data = modalApi.getData<MallBargainActivityApi.BargainActivity>();
if (!data || !data.id) {
return;
}
// 加载数据
modalApi.lock();
try {
formData.value = await getBargainActivity(data.id);
await nextTick();
// 对齐活动商品处理结构
await getSpuDetails(
formData.value.spuId,
[formData.value.skuId],
[
{
spuId: formData.value.spuId,
skuId: formData.value.skuId,
bargainFirstPrice: formData.value.bargainFirstPrice, // 砍价起始价格，单位分
bargainMinPrice: formData.value.bargainMinPrice, // 砍价底价
stock: formData.value.stock, // 活动库存
},
],
);
// 设置表单值时，价格字段从分转换为元
await formApi.setValues({
...formData.value,
bargainFirstPrice: (formData.value.bargainFirstPrice || 0) / 100,
bargainMinPrice: (formData.value.bargainMinPrice || 0) / 100,
randomMinPrice: formData.value.randomMinPrice
? formData.value.randomMinPrice / 100
? formatToFraction(formData.value.randomMinPrice)
: undefined,
randomMaxPrice: formData.value.randomMaxPrice
? formData.value.randomMaxPrice / 100
? formatToFraction(formData.value.randomMaxPrice)
: undefined,
});
// 加载商品和 SKU 信息
if (formData.value.spuId) {
const spu = await getSpu(formData.value.spuId);
if (spu) {
spuId.value = spu.id;
spuName.value = spu.name || '';
if (formData.value.skuId) {
const selectedSku = spu.skus?.find(
(sku) => sku.id === formData.value?.skuId,
);
if (selectedSku) {
skuId.value = selectedSku.id;
skuInfo.value = {
skuName: selectedSku.name || '',
picUrl: selectedSku.picUrl || spu.picUrl || '',
price: Number(selectedSku.price) || 0,
};
}
}
}
}
} finally {
modalApi.unlock();
}
@ -188,74 +253,75 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-3/5" :title="getTitle">
<div class="mx-4">
<Form />
<div>
<Modal :title="getTitle" class="w-[70%]">
<Form class="mx-4">
<!-- 商品选择 -->
<template #spuId>
<div class="w-full">
<Button v-if="!formData?.id" type="primary" @click="openSpuSelect">
选择商品
</Button>
<!-- 商品选择区域 -->
<div class="mt-4">
<div class="mb-2 flex items-center">
<span class="text-sm font-medium">砍价活动商品:</span>
<Button class="ml-2" type="primary" @click="handleSelectProduct">
选择商品
</Button>
<span v-if="spuName" class="ml-4 text-sm text-gray-600">
已选择: {{ spuName }}
</span>
</div>
<!-- SPU 和 SKU 列表展示 -->
<SpuAndSkuList
ref="spuAndSkuListRef"
:rule-config="ruleConfig"
:spu-list="spuList"
:spu-property-list-p="spuPropertyList"
class="mt-4"
>
<!-- 扩展列：砍价活动特有配置 -->
<template #default>
<VxeColumn
align="center"
min-width="168"
title="砍价起始价格(元)"
>
<template #default="{ row: sku }">
<InputNumber
v-model:value="sku.productConfig.bargainFirstPrice"
:min="0"
:precision="2"
:step="0.1"
class="w-full"
/>
</template>
</VxeColumn>
<VxeColumn align="center" min-width="168" title="砍价底价(元)">
<template #default="{ row: sku }">
<InputNumber
v-model:value="sku.productConfig.bargainMinPrice"
:min="0"
:precision="2"
:step="0.1"
class="w-full"
/>
</template>
</VxeColumn>
<VxeColumn align="center" min-width="168" title="活动库存">
<template #default="{ row: sku }">
<InputNumber
v-model:value="sku.productConfig.stock"
:max="sku.stock"
:min="0"
class="w-full"
/>
</template>
</VxeColumn>
</template>
</SpuAndSkuList>
</div>
</template>
</Form>
</Modal>
<!-- SKU 信息展示 -->
<div v-if="skuInfo" class="mt-4">
<table class="w-full border-collapse border border-gray-300">
<!-- TODO @puhui999：和 element-plus 有点差别哈；ps：是不是用 grid 组件呀？或者 vxe 组件
图片
颜色
版本
商品条码
销售价(元)
市场价(元)
成本价(元)
库存
砍价起始价格(元)
砍价底价(元)
活动库存
-->
<thead>
<tr class="bg-gray-100">
<th class="border border-gray-300 px-4 py-2">商品图片</th>
<th class="border border-gray-300 px-4 py-2">SKU 名称</th>
<th class="border border-gray-300 px-4 py-2">原价(元)</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-gray-300 px-4 py-2 text-center">
<img
v-if="skuInfo.picUrl"
:src="skuInfo.picUrl"
alt="商品图片"
class="h-16 w-16 object-cover"
/>
</td>
<td class="border border-gray-300 px-4 py-2">
{{ skuInfo.skuName }}
</td>
<td class="border border-gray-300 px-4 py-2 text-center">
¥{{ (skuInfo.price / 100).toFixed(2) }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</Modal>
<!-- 商品选择器弹窗（单选模式） -->
<SpuSkuSelect
ref="spuSkuSelectRef"
:is-select-sku="true"
:radio="true"
@select="handleSpuSelected"
/>
<!-- 商品选择器弹窗（单选模式） -->
<SpuSkuSelect
ref="spuSkuSelectRef"
:is-select-sku="true"
:radio="true"
@select="handleSpuSelected"
/>
</div>
</template>

32
apps/web-antd/src/views/mall/promotion/combination/activity/data.ts
View File

@ -24,16 +24,7 @@ export function useFormSchema(): VbenFormSchema[] {
placeholder: '请输入活动名称',
},
rules: 'required',
},
{
fieldName: 'status',
label: '活动状态',
component: 'Select',
componentProps: {
placeholder: '请选择活动状态',
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
rules: 'required',
formItemClass: 'col-span-2',
},
{
fieldName: 'startTime',
@ -41,9 +32,9 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'DatePicker',
componentProps: {
placeholder: '请选择开始时间',
showTime: false,
showTime: true,
valueFormat: 'x',
format: 'YYYY-MM-DD',
format: 'YYYY-MM-DD HH:mm:ss',
},
rules: 'required',
},
@ -53,18 +44,18 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'DatePicker',
componentProps: {
placeholder: '请选择结束时间',
showTime: false,
showTime: true,
valueFormat: 'x',
format: 'YYYY-MM-DD',
format: 'YYYY-MM-DD HH:mm:ss',
},
rules: 'required',
},
{
fieldName: 'userSize',
label: '用户数量',
label: '拼团人数',
component: 'InputNumber',
componentProps: {
placeholder: '请输入用户数量',
placeholder: '达到该人数即成团',
min: 2,
},
rules: 'required',
@ -74,7 +65,7 @@ export function useFormSchema(): VbenFormSchema[] {
label: '限制时长',
component: 'InputNumber',
componentProps: {
placeholder: '请输入限制时长(小时)',
placeholder: '限制时长(小时)',
min: 0,
},
rules: 'required',
@ -105,6 +96,13 @@ export function useFormSchema(): VbenFormSchema[] {
options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
},
},
{
fieldName: 'spuId',
label: '拼团商品',
component: 'Input',
rules: 'required',
formItemClass: 'col-span-2',
},
];
}

345
apps/web-antd/src/views/mall/promotion/combination/activity/modules/form.vue
View File

@ -1,13 +1,20 @@
<script lang="ts" setup>
import type { MallSpuApi } from '#/api/mall/product/spu';
import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
import type {
RuleConfig,
SpuProperty,
} from '#/views/mall/product/spu/components';
import { computed, nextTick, ref } from 'vue';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
import { Button, message } from 'ant-design-vue';
import { Button, InputNumber, message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { VxeColumn } from '#/adapter/vxe-table';
import { getSpu } from '#/api/mall/product/spu';
import {
createCombinationActivity,
@ -15,58 +22,25 @@ import {
updateCombinationActivity,
} from '#/api/mall/promotion/combination/combinationActivity';
import { $t } from '#/locales';
import { SpuSkuSelect } from '#/views/mall/product/spu/components';
import {
getPropertyList,
SpuAndSkuList,
SpuSkuSelect,
} from '#/views/mall/product/spu/components';
import { useFormSchema } from '../data';
defineOptions({ name: 'CombinationActivityForm' });
const emit = defineEmits(['success']);
const formData = ref<MallCombinationActivityApi.CombinationActivity>();
const formData = ref<MallCombinationActivityApi.CombinationActivity>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['拼团活动'])
: $t('ui.actionTitle.create', ['拼团活动']);
});
// ================= 商品选择相关 =================
const spuId = ref<number>();
const spuName = ref<string>('');
const skuTableData = ref<any[]>([]);
const spuSkuSelectRef = ref(); // 商品选择弹窗 Ref
/** 打开商品选择弹窗 */
const handleSelectProduct = () => {
spuSkuSelectRef.value?.open();
};
/** 选择商品后的回调 */
async function handleSpuSelected(selectedSpuId: number, skuIds?: number[]) {
const spu = await getSpu(selectedSpuId);
if (!spu) return;
spuId.value = spu.id;
spuName.value = spu.name || '';
// 筛选指定的 SKU
const selectedSkus = skuIds
? spu.skus?.filter((sku) => skuIds.includes(sku.id!))
: spu.skus;
skuTableData.value =
selectedSkus?.map((sku) => ({
skuId: sku.id!,
skuName: sku.name || '',
picUrl: sku.picUrl || spu.picUrl || '',
price: sku.price || 0,
combinationPrice: 0,
})) || [];
}
// ================= end =================
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
@ -74,49 +48,126 @@ const [Form, formApi] = useVbenForm({
},
labelWidth: 100,
},
wrapperClass: 'grid-cols-2',
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
});
// ================= 商品选择相关 =================
const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
const ruleConfig: RuleConfig[] = [
{
name: 'productConfig.combinationPrice',
rule: (arg) => arg >= 0.01,
message: '商品拼团价格不能小于 0.01 ！！！',
},
];
const spuList = ref<MallSpuApi.Spu[]>([]); // 选择的 SPU 列表
const spuPropertyList = ref<SpuProperty<MallSpuApi.Spu>[]>([]); // SPU 属性列表
/** 打开商品选择器 */
function openSpuSelect() {
spuSkuSelectRef.value?.open();
}
/** 选择商品后的回调 */
async function handleSpuSelected(spuId: number, skuIds?: number[]) {
await formApi.setFieldValue('spuId', spuId);
await getSpuDetails(spuId, skuIds);
}
/** 获取 SPU 详情 */
async function getSpuDetails(
spuId: number,
skuIds?: number[],
products?: MallCombinationActivityApi.CombinationProduct[],
) {
const res = await getSpu(spuId);
if (!res) {
return;
}
spuList.value = [];
// 筛选指定的 SKU
const selectSkus =
skuIds === undefined
? res.skus
: res.skus?.filter((sku) => skuIds.includes(sku.id!));
// 为每个 SKU 配置拼团活动相关的配置
selectSkus?.forEach((sku) => {
let config: MallCombinationActivityApi.CombinationProduct = {
spuId: res.id!,
skuId: sku.id!,
combinationPrice: 0,
};
// 如果是编辑模式，回填已有配置
if (products !== undefined) {
const product = products.find((item) => item.skuId === sku.id);
if (product) {
// 分转元
product.combinationPrice = formatToFraction(
product.combinationPrice,
) as unknown as number;
}
config = product || config;
}
// 动态添加 productConfig 属性到 SKU
(
sku as MallSpuApi.Sku & {
productConfig: MallCombinationActivityApi.CombinationProduct;
}
).productConfig = config;
});
res.skus = selectSkus;
const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
{
spuId: res.id!,
spuDetail: res,
propertyList: getPropertyList(res),
},
];
// 直接赋值，因为拼团活动只选择一个 SPU
spuList.value = [res];
spuPropertyList.value = spuProperties;
}
// ================= end =================
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
// 验证商品和 SKU 配置
if (!spuId.value) {
message.error('请选择拼团商品');
return;
}
if (skuTableData.value.length === 0) {
message.error('请至少配置一个 SKU');
return;
}
// 验证 SKU 配置
const hasInvalidSku = skuTableData.value.some(
(sku) => sku.combinationPrice < 0.01,
);
if (hasInvalidSku) {
message.error('请正确配置 SKU 的拼团价格（≥0.01）');
return;
}
// 提交表单
modalApi.lock();
try {
// 获取拼团商品配置（深拷贝避免直接修改原对象）
const products: MallCombinationActivityApi.CombinationProduct[] =
cloneDeep(spuAndSkuListRef.value?.getSkuConfigs('productConfig') || []);
if (products.length === 0) {
message.error('请选择拼团商品');
return;
}
// 价格需要转为分
products.forEach((item) => {
item.combinationPrice = convertToInteger(item.combinationPrice);
});
// 提交表单
const values = await formApi.getValues();
const data: any = {
const data = {
...values,
spuId: spuId.value,
products: skuTableData.value.map((sku) => ({
skuId: sku.skuId,
combinationPrice: Math.round(sku.combinationPrice * 100), // 转换为分
})),
};
products,
} as MallCombinationActivityApi.CombinationActivity;
await (formData.value?.id
? updateCombinationActivity(data)
: createCombinationActivity(data));
@ -131,46 +182,29 @@ const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
spuId.value = undefined;
spuName.value = '';
skuTableData.value = [];
spuList.value = [];
spuPropertyList.value = [];
return;
}
// 加载数据
const data =
modalApi.getData<MallCombinationActivityApi.CombinationActivity>();
if (!data || !data.id) {
return;
}
// 加载数据
modalApi.lock();
try {
formData.value = await getCombinationActivity(data.id);
await nextTick();
// 对齐活动商品处理结构
await getSpuDetails(
formData.value.spuId!,
formData.value.products?.map((sku) => sku.skuId),
formData.value.products,
);
// 设置表单值
await formApi.setValues(formData.value);
// 加载商品和 SKU 信息
// TODO @puhui999：if return，简化括号层级
if (formData.value.spuId) {
const spu = await getSpu(formData.value.spuId);
if (spu) {
spuId.value = spu.id;
spuName.value = spu.name || '';
// 回填 SKU 配置
const products = formData.value.products || [];
skuTableData.value =
spu.skus
?.filter((sku) => products.some((p) => p.skuId === sku.id))
.map((sku) => {
const product = products.find((p) => p.skuId === sku.id);
return {
skuId: sku.id!,
skuName: sku.name || '',
picUrl: sku.picUrl || spu.picUrl || '',
price: sku.price || 0,
combinationPrice: (product?.combinationPrice || 0) / 100, // 分转元
};
}) || [];
}
}
} finally {
modalApi.unlock();
}
@ -179,80 +213,49 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-4/5" :title="getTitle">
<div class="mx-4">
<Form />
<div>
<Modal :title="getTitle" class="w-[70%]">
<Form class="mx-4">
<!-- 商品选择 -->
<template #spuId>
<div class="w-full">
<Button v-if="!formData?.id" type="primary" @click="openSpuSelect">
选择商品
</Button>
<!-- 商品选择区域 -->
<div class="mt-4">
<div class="mb-2 flex items-center">
<span class="text-sm font-medium">拼团活动商品:</span>
<Button class="ml-2" type="primary" @click="handleSelectProduct">
选择商品
</Button>
<span v-if="spuName" class="ml-4 text-sm text-gray-600">
已选择: {{ spuName }}
</span>
</div>
<!-- SPU 和 SKU 列表展示 -->
<SpuAndSkuList
ref="spuAndSkuListRef"
:rule-config="ruleConfig"
:spu-list="spuList"
:spu-property-list-p="spuPropertyList"
class="mt-4"
>
<!-- 扩展列：拼团活动特有配置 -->
<template #default>
<VxeColumn align="center" min-width="168" title="拼团价格(元)">
<template #default="{ row: sku }">
<InputNumber
v-model:value="sku.productConfig.combinationPrice"
:min="0"
:precision="2"
:step="0.1"
class="w-full"
/>
</template>
</VxeColumn>
</template>
</SpuAndSkuList>
</div>
</template>
</Form>
</Modal>
<!-- SKU 配置表格 -->
<div v-if="skuTableData.length > 0" class="mt-4">
<table class="w-full border-collapse border border-gray-300">
<thead>
<tr class="bg-gray-100">
<th class="border border-gray-300 px-4 py-2">商品图片</th>
<th class="border border-gray-300 px-4 py-2">SKU 名称</th>
<th class="border border-gray-300 px-4 py-2">原价(元)</th>
<th class="border border-gray-300 px-4 py-2">拼团价格(元)</th>
</tr>
</thead>
<tbody>
<tr v-for="(sku, index) in skuTableData" :key="index">
<td class="border border-gray-300 px-4 py-2 text-center">
<img
v-if="sku.picUrl"
:src="sku.picUrl"
alt="商品图片"
class="h-16 w-16 object-cover"
/>
</td>
<!-- TODO @puhui999：这里貌似和 element-plus 没对齐；；ps：是不是用 grid 组件呀？或者 vxe 组件
图片
商品条码
销售价(元)
市场价(元)
成本价(元)
库存
拼团价格(元)
-->
<td class="border border-gray-300 px-4 py-2">
{{ sku.skuName }}
</td>
<td class="border border-gray-300 px-4 py-2 text-center">
¥{{ (sku.price / 100).toFixed(2) }}
</td>
<td class="border border-gray-300 px-4 py-2">
<!-- TODO @puhui999：是不是要使用 antd 的哈？ -->
<input
v-model.number="sku.combinationPrice"
type="number"
min="0"
step="0.01"
class="w-full rounded border border-gray-300 px-2 py-1"
/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</Modal>
<!-- 商品选择器弹窗 -->
<SpuSkuSelect
ref="spuSkuSelectRef"
:is-select-sku="true"
@select="handleSpuSelected"
/>
<!-- 商品选择器弹窗 -->
<SpuSkuSelect
ref="spuSkuSelectRef"
:is-select-sku="true"
@select="handleSpuSelected"
/>
</div>
</template>

4
apps/web-antd/src/views/mall/promotion/coupon/components/select.vue
View File

@ -2,7 +2,7 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
import { ref } from 'vue';
import { nextTick, ref } from 'vue';
import { Modal } from 'ant-design-vue';
@ -57,6 +57,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
/** 打开弹窗 */
async function open() {
visible.value = true;
// 等待 Modal 和 Grid 组件挂载完成后再查询
await nextTick();
await gridApi.query();
}

4
apps/web-antd/src/views/mall/promotion/point/components/index.ts
View File

@ -1,2 +1,2 @@
export { default as PointShowcase } from './point-showcase.vue';
export { default as PointTableSelect } from './point-table-select.vue';
export { default as PointShowcase } from './showcase.vue';
export { default as PointTableSelect } from './table-select.vue';

7
apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue → apps/web-antd/src/views/mall/promotion/point/components/showcase.vue
View File

@ -1,5 +1,4 @@
<!-- 积分商城活动橱窗组件：用于展示和选择积分商城活动 -->
<!-- TODO @puhui999：不需要 point- 前缀 --->
<script lang="ts" setup>
import type { MallPointActivityApi } from '#/api/mall/promotion/point';
@ -11,7 +10,7 @@ import { Image, Tooltip } from 'ant-design-vue';
import { getPointActivityListByIds } from '#/api/mall/promotion/point';
import PointTableSelect from './point-table-select.vue';
import TableSelect from './table-select.vue';
interface PointShowcaseProps {
modelValue?: number | number[];
@ -28,7 +27,7 @@ const props = withDefaults(defineProps<PointShowcaseProps>(), {
const emit = defineEmits(['update:modelValue', 'change']);
const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]); // 已选择的活动列表
const pointTableSelectRef = ref<InstanceType<typeof PointTableSelect>>(); // 活动选择表格组件引用
const pointTableSelectRef = ref<InstanceType<typeof TableSelect>>(); // 活动选择表格组件引用
const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
/** 计算是否可以添加 */
@ -141,7 +140,7 @@ function emitActivityChange() {
</div>
<!-- 活动选择对话框 -->
<PointTableSelect
<TableSelect
ref="pointTableSelectRef"
:multiple="isMultiple"
@change="handleActivitySelected"

8
apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue → apps/web-antd/src/views/mall/promotion/point/components/table-select.vue
View File

@ -1,5 +1,4 @@
<!-- 积分商城活动选择弹窗组件 -->
<!-- TODO @puhui999：不需要 point- 前缀 --->
<script lang="ts" setup>
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
@ -10,7 +9,6 @@ import { computed } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { dateFormatter, fenToYuanFormat } from '@vben/utils';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getPointActivityPage } from '#/api/mall/promotion/point';
@ -93,7 +91,9 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
title: '原价',
minWidth: 100,
align: 'center',
formatter: ({ cellValue }) => fenToYuanFormat(cellValue),
formatter: ({ cellValue }) => {
return `¥${(cellValue / 100).toFixed(2)}`;
},
},
{
field: 'status',
@ -129,7 +129,7 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
title: '创建时间',
width: 180,
align: 'center',
formatter: ({ cellValue }) => dateFormatter(cellValue),
formatter: 'formatDateTime',
},
);
return columns;

25
apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
View File

@ -11,6 +11,7 @@ import {
import { convertToInteger, formatToFraction } from '@vben/utils';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';
import { useVbenForm } from '#/adapter/form';
import {
@ -73,23 +74,7 @@ const [Modal, modalApi] = useVbenModal({
item.limit = convertToInteger(item.limit || 0);
}
});
// 设置 productScopeValues
switch (data.productScope) {
// TODO @puhui999：这里要不要搞成类似优惠劵的
case PromotionProductScopeEnum.CATEGORY.scope: {
const categoryIds = data.productCategoryIds;
data.productScopeValues = Array.isArray(categoryIds)
? categoryIds
: categoryIds
? [categoryIds]
: [];
break;
}
case PromotionProductScopeEnum.SPU.scope: {
data.productScopeValues = data.productSpuIds;
break;
}
}
// productScopeValues 已通过 data.ts 中的 dependencies.trigger 自动同步到表单值中
await (data.id
? updateRewardActivity(data as MallRewardActivityApi.RewardActivity)
: createRewardActivity(data as MallRewardActivityApi.RewardActivity));
@ -114,7 +99,11 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock();
try {
const result = await getReward(data.id);
result.startAndEndTime = [result.startTime, result.endTime] as any[];
// antd RangePicker 需要 dayjs 对象
result.startAndEndTime = [
result.startTime ? dayjs(result.startTime) : undefined,
result.endTime ? dayjs(result.endTime) : undefined,
] as any[];
result.rules?.forEach((item: any) => {
item.discountPrice = formatToFraction(item.discountPrice || 0);
if (result.conditionType === PromotionConditionTypeEnum.PRICE.type) {

14
apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts
View File

@ -59,8 +59,8 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'DatePicker',
componentProps: {
placeholder: '请选择活动开始时间',
showTime: false,
format: 'YYYY-MM-DD',
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'x',
class: 'w-full',
},
@ -72,8 +72,8 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'DatePicker',
componentProps: {
placeholder: '请选择活动结束时间',
showTime: false,
format: 'YYYY-MM-DD',
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'x',
class: 'w-full',
},
@ -137,6 +137,12 @@ export function useFormSchema(): VbenFormSchema[] {
},
formItemClass: 'col-span-2',
},
{
fieldName: 'spuId',
label: '秒杀商品',
component: 'Input',
formItemClass: 'col-span-2',
},
];
}

366
apps/web-antd/src/views/mall/promotion/seckill/activity/modules/form.vue
View File

@ -1,13 +1,20 @@
<script lang="ts" setup>
import type { MallSpuApi } from '#/api/mall/product/spu';
import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
import type {
RuleConfig,
SpuProperty,
} from '#/views/mall/product/spu/components';
import { computed, nextTick, ref } from 'vue';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
import { Button, message } from 'ant-design-vue';
import { Button, InputNumber, message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { VxeColumn } from '#/adapter/vxe-table';
import { getSpu } from '#/api/mall/product/spu';
import {
createSeckillActivity,
@ -15,11 +22,18 @@ import {
updateSeckillActivity,
} from '#/api/mall/promotion/seckill/seckillActivity';
import { $t } from '#/locales';
import { SpuSkuSelect } from '#/views/mall/product/spu/components';
import {
getPropertyList,
SpuAndSkuList,
SpuSkuSelect,
} from '#/views/mall/product/spu/components';
import { useFormSchema } from '../data';
defineOptions({ name: 'PromotionSeckillActivityForm' });
const emit = defineEmits(['success']);
const formData = ref<MallSeckillActivityApi.SeckillActivity>();
const getTitle = computed(() => {
return formData.value?.id
@ -27,94 +41,140 @@ const getTitle = computed(() => {
: $t('ui.actionTitle.create', ['秒杀活动']);
});
// ================= 商品选择相关 =================
const spuId = ref<number>();
const spuName = ref<string>('');
const skuTableData = ref<any[]>([]);
const spuSkuSelectRef = ref(); // 商品选择弹窗 Ref
/** 打开商品选择弹窗 */
const handleSelectProduct = () => {
spuSkuSelectRef.value?.open();
};
/** 选择商品后的回调 */
async function handleSpuSelected(selectedSpuId: number, skuIds?: number[]) {
const spu = await getSpu(selectedSpuId);
if (!spu) return;
spuId.value = spu.id;
spuName.value = spu.name || '';
// 筛选指定的 SKU
const selectedSkus = skuIds
? spu.skus?.filter((sku) => skuIds.includes(sku.id!))
: spu.skus;
skuTableData.value =
selectedSkus?.map((sku) => ({
skuId: sku.id!,
skuName: sku.name || '',
picUrl: sku.picUrl || spu.picUrl || '',
price: sku.price || 0,
stock: 0,
seckillPrice: 0,
})) || [];
}
// ================= end =================
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
labelWidth: 120,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
// ================= 商品选择相关 =================
const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
const ruleConfig: RuleConfig[] = [
{
name: 'productConfig.stock',
rule: (arg) => arg >= 1,
message: '商品秒杀库存必须大于等于 1 ！！！',
},
{
name: 'productConfig.seckillPrice',
rule: (arg) => arg >= 0.01,
message: '商品秒杀价格必须大于等于 0.01 ！！！',
},
];
const spuList = ref<MallSpuApi.Spu[]>([]); // 选择的 SPU 列表
const spuPropertyList = ref<SpuProperty<MallSpuApi.Spu>[]>([]); // SPU 属性列表
/** 打开商品选择器 */
function openSpuSelect() {
spuSkuSelectRef.value?.open();
}
/** 选择商品后的回调 */
async function handleSpuSelected(spuId: number, skuIds?: number[]) {
await formApi.setFieldValue('spuId', spuId);
await getSpuDetails(spuId, skuIds);
}
/** 获取 SPU 详情 */
async function getSpuDetails(
spuId: number,
skuIds?: number[],
products?: MallSeckillActivityApi.SeckillProduct[],
) {
const res = await getSpu(spuId);
if (!res) {
return;
}
spuList.value = [];
// 筛选指定的 SKU
const selectSkus =
skuIds === undefined
? res.skus
: res.skus?.filter((sku) => skuIds.includes(sku.id!));
// 为每个 SKU 配置秒杀活动相关的配置
selectSkus?.forEach((sku) => {
let config: MallSeckillActivityApi.SeckillProduct = {
spuId: res.id!,
skuId: sku.id!,
stock: 0,
seckillPrice: 0,
};
// 如果是编辑模式，回填已有配置
if (products !== undefined) {
const product = products.find((item) => item.skuId === sku.id);
if (product) {
// 分转元
product.seckillPrice = formatToFraction(
product.seckillPrice,
) as unknown as number;
}
config = product || config;
}
// 动态添加 productConfig 属性到 SKU
(
sku as MallSpuApi.Sku & {
productConfig: MallSeckillActivityApi.SeckillProduct;
}
).productConfig = config;
});
res.skus = selectSkus;
const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
{
spuId: res.id!,
spuDetail: res,
propertyList: getPropertyList(res),
},
];
// 直接赋值，因为秒杀活动只选择一个 SPU
spuList.value = [res];
spuPropertyList.value = spuProperties;
}
// ================= end =================
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
// 验证商品和 SKU 配置
if (!spuId.value) {
message.error('请选择秒杀商品');
return;
}
if (skuTableData.value.length === 0) {
message.error('请至少配置一个 SKU');
return;
}
// 验证 SKU 配置
const hasInvalidSku = skuTableData.value.some(
(sku) => sku.stock < 1 || sku.seckillPrice < 0.01,
);
if (hasInvalidSku) {
message.error('请正确配置 SKU 的秒杀库存（≥1）和秒杀价格（≥0.01）');
return;
}
// 提交表单
modalApi.lock();
try {
// 获取秒杀商品配置（深拷贝避免直接修改原对象）
const products: MallSeckillActivityApi.SeckillProduct[] = cloneDeep(
spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
);
if (products.length === 0) {
message.error('请选择秒杀商品');
return;
}
// 价格需要转为分
products.forEach((item) => {
item.seckillPrice = convertToInteger(item.seckillPrice);
});
// 提交表单
const values = await formApi.getValues();
const data: any = {
const data = {
...values,
spuId: spuId.value,
products: skuTableData.value.map((sku) => ({
skuId: sku.skuId,
stock: sku.stock,
seckillPrice: Math.round(sku.seckillPrice * 100), // 转换为分
})),
};
products,
} as MallSeckillActivityApi.SeckillActivity;
await (formData.value?.id
? updateSeckillActivity(data)
: createSeckillActivity(data));
@ -129,9 +189,8 @@ const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
spuId.value = undefined;
spuName.value = '';
skuTableData.value = [];
spuList.value = [];
spuPropertyList.value = [];
return;
}
@ -140,36 +199,18 @@ const [Modal, modalApi] = useVbenModal({
if (!data || !data.id) {
return;
}
// 加载数据
modalApi.lock();
try {
formData.value = await getSeckillActivity(data.id);
await nextTick();
// 对齐活动商品处理结构
await getSpuDetails(
formData.value.spuId!,
formData.value.products?.map((sku) => sku.skuId),
formData.value.products,
);
// 设置表单值
await formApi.setValues(formData.value);
// 加载商品和 SKU 信息
// TODO @puhui999：if return 简化括号层级
if (formData.value.spuId) {
const spu = await getSpu(formData.value.spuId);
if (spu) {
spuId.value = spu.id;
spuName.value = spu.name || '';
// 回填 SKU 配置
const products = formData.value.products || [];
skuTableData.value =
spu.skus
?.filter((sku) => products.some((p) => p.skuId === sku.id))
.map((sku) => {
const product = products.find((p) => p.skuId === sku.id);
return {
skuId: sku.id!,
skuName: sku.name || '',
picUrl: sku.picUrl || spu.picUrl || '',
price: sku.price || 0,
stock: product?.stock || 0,
seckillPrice: (product?.seckillPrice || 0) / 100, // 分转元
};
}) || [];
}
}
} finally {
modalApi.unlock();
}
@ -178,80 +219,59 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-4/5" :title="getTitle">
<div class="mx-4">
<Form />
<div>
<Modal :title="getTitle" class="w-[70%]">
<Form class="mx-4">
<!-- 商品选择 -->
<template #spuId>
<div class="w-full">
<Button v-if="!formData?.id" type="primary" @click="openSpuSelect">
选择商品
</Button>
<!-- 商品选择区域 -->
<div class="mt-4">
<div class="mb-2 flex items-center">
<span class="text-sm font-medium">秒杀活动商品:</span>
<Button class="ml-2" type="primary" @click="handleSelectProduct">
选择商品
</Button>
<span v-if="spuName" class="ml-4 text-sm text-gray-600">
已选择: {{ spuName }}
</span>
</div>
<!-- SPU 和 SKU 列表展示 -->
<SpuAndSkuList
ref="spuAndSkuListRef"
:rule-config="ruleConfig"
:spu-list="spuList"
:spu-property-list-p="spuPropertyList"
class="mt-4"
>
<!-- 扩展列：秒杀活动特有配置 -->
<template #default>
<VxeColumn align="center" min-width="168" title="秒杀库存">
<template #default="{ row: sku }">
<InputNumber
v-model:value="sku.productConfig.stock"
:max="sku.stock"
:min="0"
class="w-full"
/>
</template>
</VxeColumn>
<VxeColumn align="center" min-width="168" title="秒杀价格(元)">
<template #default="{ row: sku }">
<InputNumber
v-model:value="sku.productConfig.seckillPrice"
:min="0"
:precision="2"
:step="0.1"
class="w-full"
/>
</template>
</VxeColumn>
</template>
</SpuAndSkuList>
</div>
</template>
</Form>
</Modal>
<!-- SKU 配置表格 -->
<div v-if="skuTableData.length > 0" class="mt-4">
<!-- TODO @puhui999：Grid？或者 VXETable 哇？ -->
<table class="w-full border-collapse border border-gray-300">
<thead>
<tr class="bg-gray-100">
<th class="border border-gray-300 px-4 py-2">商品图片</th>
<th class="border border-gray-300 px-4 py-2">SKU 名称</th>
<th class="border border-gray-300 px-4 py-2">原价(元)</th>
<th class="border border-gray-300 px-4 py-2">秒杀库存</th>
<th class="border border-gray-300 px-4 py-2">秒杀价格(元)</th>
</tr>
</thead>
<tbody>
<tr v-for="(sku, index) in skuTableData" :key="index">
<td class="border border-gray-300 px-4 py-2 text-center">
<img
v-if="sku.picUrl"
:src="sku.picUrl"
alt="商品图片"
class="h-16 w-16 object-cover"
/>
</td>
<td class="border border-gray-300 px-4 py-2">
{{ sku.skuName }}
</td>
<td class="border border-gray-300 px-4 py-2 text-center">
¥{{ (sku.price / 100).toFixed(2) }}
</td>
<td class="border border-gray-300 px-4 py-2">
<input
v-model.number="sku.stock"
type="number"
min="0"
class="w-full rounded border border-gray-300 px-2 py-1"
/>
</td>
<td class="border border-gray-300 px-4 py-2">
<input
v-model.number="sku.seckillPrice"
type="number"
min="0"
step="0.01"
class="w-full rounded border border-gray-300 px-2 py-1"
/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</Modal>
<!-- 商品选择器弹窗 -->
<SpuSkuSelect
ref="spuSkuSelectRef"
:is-select-sku="true"
@select="handleSpuSelected"
/>
<!-- 商品选择器弹窗 -->
<SpuSkuSelect
ref="spuSkuSelectRef"
:is-select-sku="true"
@select="handleSpuSelected"
/>
</div>
</template>

22
apps/web-ele/src/views/mall/product/comment/data.ts
View File

@ -3,7 +3,6 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MallCommentApi } from '#/api/mall/product/comment';
import { z } from '#/adapter/form';
import { getSpuSimpleList } from '#/api/mall/product/spu';
import { getRangePickerDefaultProps } from '#/utils';
/** 新增/修改的表单 */
@ -17,19 +16,28 @@ export function useFormSchema(): VbenFormSchema[] {
show: () => false,
},
},
// TODO @puhui999：商品的选择
{
fieldName: 'spuId',
label: '商品',
component: 'ApiSelect',
component: 'Input',
componentProps: {
api: getSpuSimpleList,
labelField: 'name',
valueField: 'id',
placeholder: '请选择商品',
},
rules: 'required',
},
{
fieldName: 'skuId',
label: '商品规格',
component: 'Input',
componentProps: {
placeholder: '请选择商品规格',
},
dependencies: {
triggerFields: ['spuId'],
show: (values) => !!values.spuId,
},
rules: 'required',
},
{
fieldName: 'userAvatar',
label: '用户头像',
@ -88,7 +96,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
{
fieldName: 'replyStatus',
label: '回复状态',
component: 'Select',
component: 'RadioGroup',
componentProps: {
options: [
{ label: '已回复', value: true },

21
apps/web-ele/src/views/mall/product/comment/index.vue
View File

@ -2,8 +2,6 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MallCommentApi } from '#/api/mall/product/comment';
import { h } from 'vue';
import { confirm, DocAlert, Page, prompt, useVbenModal } from '@vben/common-ui';
import { ElInput, ElMessage, ElRate } from 'element-plus';
@ -37,17 +35,17 @@ function handleCreate() {
/** 回复评价 */
function handleReply(row: MallCommentApi.Comment) {
prompt({
component: () => {
return h(ElInput, {
type: 'textarea',
placeholder: '请输入回复内容',
});
component: ElInput,
componentProps: {
type: 'textarea',
placeholder: '请输入回复内容',
rows: 4,
},
content: row.content
? `用户评论：${row.content}\n请输入回复内容：`
: '请输入回复内容：',
title: '回复评论',
modelPropName: 'value',
modelPropName: 'modelValue',
}).then(async (val) => {
if (val) {
await replyComment({
@ -127,10 +125,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
<FormModal @success="handleRefresh" />
<Grid table-title="评论列表">
<template #descriptionScores="{ row }">
<ElRate v-model="row.descriptionScores" :disabled="true" />
<ElRate :model-value="row.descriptionScores" disabled />
</template>
<template #benefitScores="{ row }">
<ElRate v-model="row.benefitScores" :disabled="true" />
<ElRate :model-value="row.benefitScores" disabled />
</template>
<template #toolbar-tools>
<TableAction
@ -150,8 +148,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
:actions="[
{
label: '回复',
type: 'primary',
link: true,
type: 'text',
auth: ['product:comment:update'],
onClick: handleReply.bind(null, row),
},

96
apps/web-ele/src/views/mall/product/comment/modules/form.vue
View File

@ -1,22 +1,30 @@
<script lang="ts" setup>
import type { MallCommentApi } from '#/api/mall/product/comment';
import type { MallSpuApi } from '#/api/mall/product/spu';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import { ElButton, ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import { createComment, getComment } from '#/api/mall/product/comment';
import { getSpu } from '#/api/mall/product/spu';
import { $t } from '#/locales';
import {
SkuTableSelect,
SpuShowcase,
} from '#/views/mall/product/spu/components';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
// TODO @puhui999：这里和 yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/product/comment/modules/form.vue 存在差异，是不是还没迁移到呀。
const formData = ref<MallCommentApi.Comment>();
const formData = ref<Partial<MallCommentApi.Comment>>({
descriptionScores: 5,
benefitScores: 5,
});
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['虚拟评论'])
@ -36,6 +44,40 @@ const [Form, formApi] = useVbenForm({
showDefaultActions: false,
});
const skuTableSelectRef = ref<InstanceType<typeof SkuTableSelect>>();
const selectedSku = ref<MallSpuApi.Sku>();
/** 处理商品的选择变化 */
async function handleSpuChange(spu?: MallSpuApi.Spu | null) {
// 处理商品选择：如果 spu 为 null 或 id 为 0，表示清空选择
const spuId = spu?.id && spu.id ? spu.id : undefined;
formData.value.spuId = spuId;
await formApi.setFieldValue('spuId', spuId);
// 清空已选规格
selectedSku.value = undefined;
formData.value.skuId = undefined;
await formApi.setFieldValue('skuId', undefined);
}
/** 打开商品规格的选择弹框 */
async function openSkuSelect() {
const currentValues =
(await formApi.getValues()) as Partial<MallCommentApi.Comment>;
const currentSpuId = currentValues.spuId ?? formData.value?.spuId;
if (!currentSpuId) {
ElMessage.warning('请先选择商品');
return;
}
skuTableSelectRef.value?.open({ spuId: currentSpuId });
}
/** 处理商品规格的选择 */
async function handleSkuSelected(sku: MallSpuApi.Sku) {
selectedSku.value = sku;
formData.value.skuId = sku.id;
await formApi.setFieldValue('skuId', sku.id);
}
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
@ -57,7 +99,9 @@ const [Modal, modalApi] = useVbenModal({
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
// 关闭时重置表单状态
selectedSku.value = undefined;
await formApi.setValues({ spuId: undefined, skuId: undefined });
return;
}
// 加载数据
@ -65,11 +109,22 @@ const [Modal, modalApi] = useVbenModal({
if (!data || !data.id) {
return;
}
// 编辑模式：加载数据
modalApi.lock();
try {
formData.value = await getComment(data.id);
// 设置到 values
await formApi.setValues(formData.value);
// 回显已选的商品规格
if (formData.value?.spuId && formData.value?.skuId) {
const spu = await getSpu(formData.value.spuId);
const sku = spu.skus?.find((item) => item.id === formData.value!.skuId);
if (sku) {
selectedSku.value = sku;
}
} else {
selectedSku.value = undefined;
}
} finally {
modalApi.unlock();
}
@ -79,6 +134,37 @@ const [Modal, modalApi] = useVbenModal({
<template>
<Modal class="w-2/5" :title="getTitle">
<Form class="mx-4" />
<Form class="mx-4">
<template #spuId>
<SpuShowcase
v-model="(formData as any).spuId"
:limit="1"
@change="handleSpuChange"
/>
</template>
<template #skuId>
<div class="flex items-center gap-2">
<ElButton
type="primary"
:disabled="!formData?.spuId"
@click="openSkuSelect"
>
选择规格
</ElButton>
<span
v-if="
selectedSku &&
selectedSku.properties &&
selectedSku.properties.length > 0
"
>
已选：
{{ selectedSku.properties.map((p: any) => p.valueName).join('/') }}
</span>
<span v-else-if="selectedSku">已选：{{ selectedSku.id }}</span>
</div>
</template>
</Form>
<SkuTableSelect ref="skuTableSelectRef" @change="handleSkuSelected" />
</Modal>
</template>

29
apps/web-ele/src/views/mall/product/spu/components/sku-table-select.vue
View File

@ -22,16 +22,6 @@ const emit = defineEmits<{
const visible = ref(false);
const spuId = ref<number>();
/** 处理选中 */
function handleRadioChange() {
const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Sku;
if (selectedRow) {
emit('change', selectedRow);
closeModal();
}
}
// TODO @puhui999：这里的代码风格，对齐 antd 的；可以使用 idea 对比两个文件哈；
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useSkuGridColumns(),
@ -39,20 +29,33 @@ const [Grid, gridApi] = useVbenVxeGrid({
border: true,
radioConfig: {
reserve: true,
highlight: true,
},
rowConfig: {
keyField: 'id',
isHover: true,
},
pagerConfig: {
enabled: false,
},
},
gridEvents: {
radioChange: handleRadioChange,
radioChange: () => {
const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Sku;
if (selectedRow) {
emit('change', selectedRow);
// 关闭弹窗
visible.value = false;
gridApi.grid.clearRadioRow();
spuId.value = undefined;
}
},
},
});
/** 关闭弹窗 */
function closeModal() {
visible.value = false;
gridApi.grid.clearRadioRow();
spuId.value = undefined;
}
@ -63,6 +66,8 @@ async function openModal(data?: SpuData) {
}
spuId.value = data.spuId;
visible.value = true;
// 注意：useVbenVxeGrid 关闭分页(pagerConfig.enabled=false)后，proxyConfig.ajax.query 的结果不会传递到 vxe-table
// 需要手动调用 reloadData 设置表格数据
if (!spuId.value) {
gridApi.grid?.reloadData([]);
return;

7
apps/web-ele/src/views/mall/product/spu/components/spu-select.vue
View File

@ -295,6 +295,7 @@ onMounted(async () => {
title="商品选择"
width="70%"
:destroy-on-close="true"
:append-to-body="true"
@close="closeModal"
>
<Grid>
@ -312,8 +313,10 @@ onMounted(async () => {
</template>
</Grid>
<template #footer>
<el-button @click="closeModal">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
<span class="dialog-footer">
<el-button @click="closeModal">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</span>
</template>
</ElDialog>
</template>

7
apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue
View File

@ -108,14 +108,12 @@ function emitSpuChange() {
<ElImage
:src="spu.picUrl"
class="h-full w-full rounded-lg object-cover"
:preview-src-list="[spu.picUrl!]"
fit="cover"
/>
<!-- 删除按钮 -->
<!-- TODO @puhui999：还是使用 IconifyIcon：使用自己的中立的图标，方便 antd 和 ele 共享 -->
<IconifyIcon
v-if="!disabled"
icon="ep:circle-close-filled"
icon="lucide:circle-x"
class="absolute -right-2 -top-2 cursor-pointer text-xl text-red-500 opacity-0 transition-opacity hover:text-red-600 group-hover:opacity-100"
@click="handleRemoveSpu(index)"
/>
@ -129,8 +127,7 @@ function emitSpuChange() {
class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors hover:border-primary hover:bg-primary/5"
@click="handleOpenSpuSelect"
>
<!-- TODO @puhui999：还是使用 IconifyIcon：使用自己的中立的图标，方便 antd 和 ele 共享 -->
<IconifyIcon icon="ep:plus" class="text-xl text-gray-400" />
<IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
</div>
</ElTooltip>
</div>

80
apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
View File

@ -52,19 +52,23 @@ const formSchema = computed<VbenFormSchema[]>(() => [
component: 'Input',
componentProps: {
placeholder: '请输入商品名称',
clearable: true,
allowClear: true,
},
},
{
fieldName: 'categoryId',
label: '商品分类',
component: 'ApiTreeSelect',
component: 'TreeSelect',
componentProps: {
options: categoryTreeList,
props: { label: 'name', children: 'children' },
nodeKey: 'id',
data: categoryTreeList,
props: {
label: 'name',
value: 'id',
},
checkStrictly: true,
placeholder: '请选择商品分类',
clearable: true,
filterable: true,
},
},
{
@ -73,7 +77,7 @@ const formSchema = computed<VbenFormSchema[]>(() => [
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
clearable: true,
allowClear: true,
},
},
]);
@ -162,40 +166,35 @@ const [Grid, gridApi] = useVbenVxeGrid({
async function openModal(data?: MallSpuApi.Spu | MallSpuApi.Spu[]) {
initData.value = data;
visible.value = true;
// 等待 Grid 组件完全初始化后再查询数据
await nextTick();
// 1. 查询数据
await gridApi.query();
// 2. 设置已选中行
const tableData = gridApi.grid.getTableData().fullData;
if (
props.multiple &&
Array.isArray(initData.value) &&
initData.value.length > 0
) {
setTimeout(() => {
(initData.value as unknown as MallSpuApi.Spu[])!.forEach((spu) => {
if (gridApi.grid) {
// 1. 先查询数据
await gridApi.query();
// 2. 设置已选中行
if (props.multiple && Array.isArray(data) && data.length > 0) {
setTimeout(() => {
const tableData = gridApi.grid.getTableData().fullData;
data.forEach((spu) => {
const row = tableData.find(
(item: MallSpuApi.Spu) => item.id === spu.id,
);
if (row) {
gridApi.grid.setCheckboxRow(row, true);
}
});
}, 300);
} else if (!props.multiple && data && !Array.isArray(data)) {
setTimeout(() => {
const tableData = gridApi.grid.getTableData().fullData;
const row = tableData.find(
(item: MallSpuApi.Spu) => item.id === spu.id,
(item: MallSpuApi.Spu) => item.id === data.id,
);
if (row) {
gridApi.grid.setCheckboxRow(row, true);
gridApi.grid.setRadioRow(row);
}
});
}, 300);
} else if (
!props.multiple &&
initData.value &&
!Array.isArray(initData.value)
) {
setTimeout(() => {
const row = tableData.find(
(item: MallSpuApi.Spu) =>
item.id === (initData.value as MallSpuApi.Spu).id,
);
if (row) {
gridApi.grid.setRadioRow(row);
}
}, 300);
}, 300);
}
}
}
@ -214,10 +213,9 @@ function handleConfirm() {
closeModal();
}
/** 对外暴露的方法 */
defineExpose({
open: openModal,
});
}); // 对外暴露的方法
/** 初始化分类数据 */
onMounted(async () => {
@ -236,9 +234,11 @@ onMounted(async () => {
@close="closeModal"
>
<Grid />
<template v-if="props.multiple" #footer>
<el-button @click="closeModal">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
<template #footer>
<span v-if="props.multiple" class="dialog-footer">
<el-button @click="closeModal">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</span>
</template>
</ElDialog>
</template>

119
apps/web-ele/src/views/mall/product/spu/form/index.vue
View File

@ -32,7 +32,6 @@ const spuId = ref<number>();
const { params, name } = useRoute();
const { closeCurrentTab } = useTabs();
const activeTabName = ref('info');
const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const isDetail = ref(name === 'ProductSpuDetail'); // 是否查看详情
const skuListRef = ref(); // 商品属性列表 Ref
@ -70,7 +69,6 @@ const formData = ref<MallSpuApi.Spu>({
}); // spu 表单数据
const propertyList = ref<PropertyAndValues[]>([]); // 商品属性列表
const ruleConfig: RuleConfig[] = [
// TODO @puhui999：ele 这里都有 :number，antd 要不要加？
{
name: 'stock',
rule: (arg: number) => arg >= 0,
@ -200,7 +198,7 @@ async function handleSubmit() {
item.secondBrokeragePrice = convertToInteger(item.secondBrokeragePrice);
});
}
// 处理轮播图列表 TODO @puhui999：这个是必须的哇？
// 处理轮播图列表：上传组件可能返回对象或字符串，统一处理成字符串数组
const newSliderPicUrls: any[] = [];
values.sliderPicUrls!.forEach((item: any) => {
// 如果是前端选的图
@ -319,13 +317,10 @@ onMounted(async () => {
<ProductPropertyAddFormModal :property-list="propertyList" />
<Page auto-content-height>
<ElCard class="spu-form-card h-full w-full" v-loading="formLoading">
<ElCard class="h-full w-full" v-loading="formLoading">
<template #header>
<div class="flex items-center justify-between">
<ElTabs
v-model="activeTabName"
@tab-click="(tab: any) => handleTabChange(tab.paneName)"
>
<ElTabs v-model="activeTabName" @tab-change="handleTabChange">
<ElTabPane label="基础设置" name="info" />
<ElTabPane label="价格库存" name="sku" />
<ElTabPane label="物流设置" name="delivery" />
@ -333,7 +328,7 @@ onMounted(async () => {
<ElTabPane label="其它设置" name="other" />
</ElTabs>
<div>
<ElButton v-if="!isDetail" type="primary" @click="handleSubmit">
<ElButton type="primary" v-if="!isDetail" @click="handleSubmit">
保存
</ElButton>
<ElButton v-else @click="() => closeCurrentTab()">
@ -343,71 +338,61 @@ onMounted(async () => {
</div>
</template>
<div class="flex-1 overflow-auto">
<InfoForm class="w-3/5" v-show="activeTabName === 'info'" />
<SkuForm class="w-full" v-show="activeTabName === 'sku'">
<template #singleSkuList>
<SkuList
ref="skuListRef"
class="w-full"
<InfoForm class="w-3/5" v-show="activeTabName === 'info'" />
<SkuForm class="w-full" v-show="activeTabName === 'sku'">
<template #singleSkuList>
<SkuList
ref="skuListRef"
class="w-full"
:is-detail="isDetail"
:prop-form-data="formData"
:property-list="propertyList"
:rule-config="ruleConfig"
/>
</template>
<template #productAttributes>
<div>
<ElButton class="mb-10px mr-15px" @click="openPropertyAddForm">
添加属性
</ElButton>
<ProductAttributes
:is-detail="isDetail"
:prop-form-data="formData"
:property-list="propertyList"
:rule-config="ruleConfig"
@success="generateSkus"
/>
</template>
<template #productAttributes>
<div>
<ElButton class="mb-10px mr-15px" @click="openPropertyAddForm">
添加属性
</ElButton>
<ProductAttributes
:is-detail="isDetail"
:property-list="propertyList"
@success="generateSkus"
/>
</div>
</template>
<template #batchSkuList>
<SkuList
:is-batch="true"
:is-detail="isDetail"
:prop-form-data="formData"
:property-list="propertyList"
/>
</template>
<template #multiSkuList>
<SkuList
ref="skuListRef"
:is-detail="isDetail"
:prop-form-data="formData"
:property-list="propertyList"
:rule-config="ruleConfig"
/>
</template>
</SkuForm>
<DeliveryForm class="w-3/5" v-show="activeTabName === 'delivery'" />
<DescriptionForm
class="w-3/5"
v-show="activeTabName === 'description'"
/>
<OtherForm class="w-3/5" v-show="activeTabName === 'other'" />
</div>
</div>
</template>
<template #batchSkuList>
<SkuList
:is-batch="true"
:is-detail="isDetail"
:prop-form-data="formData"
:property-list="propertyList"
/>
</template>
<template #multiSkuList>
<SkuList
ref="skuListRef"
:is-detail="isDetail"
:prop-form-data="formData"
:property-list="propertyList"
:rule-config="ruleConfig"
/>
</template>
</SkuForm>
<DeliveryForm class="w-3/5" v-show="activeTabName === 'delivery'" />
<DescriptionForm
class="w-3/5"
v-show="activeTabName === 'description'"
/>
<OtherForm class="w-3/5" v-show="activeTabName === 'other'" />
</ElCard>
</Page>
</div>
</template>
<style scoped>
.spu-form-card {
display: flex;
flex-direction: column;
}
.spu-form-card :deep(.el-card__body) {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
<style lang="scss" scoped>
:deep(.el-tabs__nav-wrap::after) {
display: none;
}
</style>

7
apps/web-ele/src/views/mall/product/spu/form/modules/product-attributes.vue
View File

@ -215,18 +215,17 @@ async function getAttributeOptions(propertyId: number) {
<ElOption
v-for="item2 in attributeOptions"
:key="item2.id"
:value="item2.name"
:label="item2.name"
:value="item2.name"
/>
</ElSelect>
<ElTag
v-show="!inputVisible(index)"
@click="showInput(index)"
class="mx-1 cursor-pointer"
effect="plain"
class="mx-1 cursor-pointer border-dashed bg-gray-100"
>
<div class="flex items-center">
<IconifyIcon class="mr-2" icon="ep:plus" />
<IconifyIcon class="mr-2" icon="lucide:plus" />
添加
</div>
</ElTag>

2
apps/web-ele/src/views/mall/product/spu/form/modules/product-property-add-form.vue
View File

@ -61,9 +61,9 @@ const formSchema: VbenFormSchema[] = [
}));
},
filterable: true,
allowCreate: true,
placeholder: '请选择属性名称。如果不存在，可手动输入选择',
multiple: true,
allowCreate: true,
clearable: true,
},
rules: 'required',

74
apps/web-ele/src/views/mall/promotion/bargain/activity/data.ts
View File

@ -24,7 +24,7 @@ export function useFormSchema(): VbenFormSchema[] {
placeholder: '请输入活动名称',
},
rules: 'required',
// TODO @puhui999：这里和 antd 里的不太一样，可以看看。
formItemClass: 'col-span-2',
},
{
fieldName: 'startTime',
@ -33,8 +33,8 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
type: 'datetime',
placeholder: '请选择开始时间',
class: '!w-full',
},
rules: 'required',
},
@ -45,48 +45,8 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
type: 'datetime',
placeholder: '请选择结束时间',
class: '!w-full',
},
rules: 'required',
},
{
fieldName: 'bargainFirstPrice',
label: '砍价起始价格(元)',
component: 'InputNumber',
componentProps: {
min: 0,
precision: 2,
step: 0.01,
placeholder: '请输入砍价起始价格',
controlsPosition: 'right',
class: '!w-full',
},
rules: 'required',
},
{
fieldName: 'bargainMinPrice',
label: '砍价底价(元)',
component: 'InputNumber',
componentProps: {
min: 0,
precision: 2,
step: 0.01,
placeholder: '请输入砍价底价',
controlsPosition: 'right',
class: '!w-full',
},
rules: 'required',
},
{
fieldName: 'stock',
label: '活动库存',
component: 'InputNumber',
componentProps: {
min: 1,
placeholder: '请输入活动库存',
controlsPosition: 'right',
class: '!w-full',
},
rules: 'required',
},
@ -96,9 +56,8 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'InputNumber',
componentProps: {
min: 1,
placeholder: '请输入助力人数',
placeholder: '达到该人数才能砍到低价',
controlsPosition: 'right',
class: '!w-full',
},
rules: 'required',
},
@ -108,9 +67,8 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'InputNumber',
componentProps: {
min: 1,
placeholder: '请输入砍价次数',
placeholder: '最大帮砍次数',
controlsPosition: 'right',
class: '!w-full',
},
rules: 'required',
},
@ -120,9 +78,8 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'InputNumber',
componentProps: {
min: 1,
placeholder: '请输入购买限制',
placeholder: '最大购买次数',
controlsPosition: 'right',
class: '!w-full',
},
rules: 'required',
},
@ -134,9 +91,8 @@ export function useFormSchema(): VbenFormSchema[] {
min: 0,
precision: 2,
step: 0.01,
placeholder: '请输入最小砍价金额',
placeholder: '用户每次砍价的最小金额',
controlsPosition: 'right',
class: '!w-full',
},
},
{
@ -147,11 +103,17 @@ export function useFormSchema(): VbenFormSchema[] {
min: 0,
precision: 2,
step: 0.01,
placeholder: '请输入最大砍价金额',
placeholder: '用户每次砍价的最大金额',
controlsPosition: 'right',
class: '!w-full',
},
},
{
fieldName: 'spuId',
label: '砍价商品',
component: 'Input',
rules: 'required',
formItemClass: 'col-span-2',
},
];
}
@ -223,15 +185,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
field: 'bargainFirstPrice',
title: '起始价格',
minWidth: 100,
// TODO @puhui999：这里和 antd 不太一样，得看看
formatter: 'formatFenToYuanAmount',
formatter: 'formatAmount2',
},
{
field: 'bargainMinPrice',
title: '砍价底价',
minWidth: 100,
// TODO @puhui999：这里和 antd 不太一样，得看看
formatter: 'formatFenToYuanAmount',
formatter: 'formatAmount2',
},
{
field: 'recordUserCount',

397
apps/web-ele/src/views/mall/promotion/bargain/activity/modules/form.vue
View File

@ -1,13 +1,20 @@
<script lang="ts" setup>
import type { MallSpuApi } from '#/api/mall/product/spu';
import type { MallBargainActivityApi } from '#/api/mall/promotion/bargain/bargainActivity';
import type {
RuleConfig,
SpuProperty,
} from '#/views/mall/product/spu/components';
import { computed, nextTick, ref } from 'vue';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
import { ElMessage } from 'element-plus';
import { ElButton, ElInputNumber, ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import { VxeColumn } from '#/adapter/vxe-table';
import { getSpu } from '#/api/mall/product/spu';
import {
createBargainActivity,
@ -15,7 +22,11 @@ import {
updateBargainActivity,
} from '#/api/mall/promotion/bargain/bargainActivity';
import { $t } from '#/locales';
import { SpuSkuSelect } from '#/views/mall/product/spu/components';
import {
getPropertyList,
SpuAndSkuList,
SpuSkuSelect,
} from '#/views/mall/product/spu/components';
import { useFormSchema } from '../data';
@ -30,47 +41,6 @@ const getTitle = computed(() => {
: $t('ui.actionTitle.create', ['砍价活动']);
});
// ================= 商品选择相关 =================
const spuId = ref<number>();
const skuId = ref<number>();
const spuName = ref<string>('');
const skuInfo = ref<{
picUrl: string;
price: number;
skuName: string;
}>();
const spuSkuSelectRef = ref(); // 商品选择弹窗 Ref
/** 打开商品选择弹窗 */
const handleSelectProduct = () => {
spuSkuSelectRef.value?.open();
};
/** 选择商品后的回调 */
async function handleSpuSelected(selectedSpuId: number, skuIds?: number[]) {
const spu = await getSpu(selectedSpuId);
if (!spu) return;
spuId.value = spu.id;
spuName.value = spu.name || '';
// 砍价活动只选择一个 SKU
if (skuIds && skuIds.length > 0) {
const selectedSku = spu.skus?.find((sku) => sku.id === skuIds[0]);
if (selectedSku) {
skuId.value = selectedSku.id;
skuInfo.value = {
skuName: selectedSku.name || '',
picUrl: selectedSku.picUrl || spu.picUrl || '',
price: Number(selectedSku.price) || 0,
};
}
}
}
// ================= end =================
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
@ -78,46 +48,151 @@ const [Form, formApi] = useVbenForm({
},
labelWidth: 130,
},
wrapperClass: 'grid-cols-2',
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
});
// ================= 商品选择相关 =================
const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
const ruleConfig: RuleConfig[] = [
{
name: 'productConfig.bargainFirstPrice',
rule: (arg) => arg > 0,
message: '商品砍价起始价格必须大于 0 ！！！',
},
{
name: 'productConfig.bargainMinPrice',
rule: (arg) => arg >= 0,
message: '商品砍价底价不能小于 0 ！！！',
},
{
name: 'productConfig.stock',
rule: (arg) => arg >= 1,
message: '商品活动库存必须大于等于 1 ！！！',
},
];
const spuList = ref<MallSpuApi.Spu[]>([]); // 选择的 SPU 列表
const spuPropertyList = ref<SpuProperty<MallSpuApi.Spu>[]>([]); // SPU 属性列表
/** 打开商品选择器 */
function openSpuSelect() {
spuSkuSelectRef.value?.open();
}
/** 选择商品后的回调 */
async function handleSpuSelected(spuId: number, skuIds?: number[]) {
await formApi.setFieldValue('spuId', spuId);
await getSpuDetails(spuId, skuIds);
}
/** 获取 SPU 详情 */
async function getSpuDetails(
spuId: number,
skuIds?: number[],
products?: MallBargainActivityApi.BargainProduct[],
) {
const res = await getSpu(spuId);
if (!res) {
return;
}
spuList.value = [];
// 筛选指定的 SKU（砍价活动只选择一个 SKU）
const selectSkus =
skuIds === undefined
? res.skus
: res.skus?.filter((sku) => skuIds.includes(sku.id!));
// 为每个 SKU 配置砍价活动相关的配置
selectSkus?.forEach((sku) => {
let config: MallBargainActivityApi.BargainProduct = {
spuId: res.id!,
skuId: sku.id!,
bargainFirstPrice: 1,
bargainMinPrice: 1,
stock: 1,
};
// 如果是编辑模式，回填已有配置
if (products !== undefined) {
const product = products.find((item) => item.skuId === sku.id);
if (product) {
// 分转元
product.bargainFirstPrice = formatToFraction(
product.bargainFirstPrice,
) as unknown as number;
product.bargainMinPrice = formatToFraction(
product.bargainMinPrice,
) as unknown as number;
}
config = product || config;
}
// 动态添加 productConfig 属性到 SKU
(
sku as MallSpuApi.Sku & {
productConfig: MallBargainActivityApi.BargainProduct;
}
).productConfig = config;
});
res.skus = selectSkus;
const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
{
spuId: res.id!,
spuDetail: res,
propertyList: getPropertyList(res),
},
];
// 直接赋值，因为砍价活动只选择一个 SPU
spuList.value = [res];
spuPropertyList.value = spuProperties;
}
// ================= end =================
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
// 验证商品和 SKU 选择
if (!spuId.value) {
ElMessage.error('请选择砍价商品');
return;
}
if (!skuId.value) {
ElMessage.error('请选择商品 SKU');
return;
}
// 提交表单
modalApi.lock();
try {
// 获取砍价商品配置（深拷贝避免直接修改原对象）
const products: MallBargainActivityApi.BargainProduct[] = cloneDeep(
spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
);
if (products.length === 0) {
ElMessage.error('请选择砍价商品');
return;
}
// 价格需要转为分
products.forEach((item) => {
item.bargainFirstPrice = convertToInteger(item.bargainFirstPrice);
item.bargainMinPrice = convertToInteger(item.bargainMinPrice);
});
// 提交表单
const values = await formApi.getValues();
const data = {
...values,
spuId: spuId.value,
skuId: skuId.value,
bargainFirstPrice: Math.round((values.bargainFirstPrice || 0) * 100),
bargainMinPrice: Math.round((values.bargainMinPrice || 0) * 100),
// 用户每次砍价金额元转分
randomMinPrice: values.randomMinPrice
? Math.round(values.randomMinPrice * 100)
? convertToInteger(values.randomMinPrice)
: undefined,
randomMaxPrice: values.randomMaxPrice
? Math.round(values.randomMaxPrice * 100)
? convertToInteger(values.randomMaxPrice)
: undefined,
// 合并砍价商品配置（砍价活动只有一个商品）
...products[0],
} as MallBargainActivityApi.BargainActivity;
await (formData.value?.id
? updateBargainActivity(data)
: createBargainActivity(data));
@ -132,54 +207,44 @@ const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
spuId.value = undefined;
skuId.value = undefined;
spuName.value = '';
skuInfo.value = undefined;
spuList.value = [];
spuPropertyList.value = [];
return;
}
// 加载表单数据
// 加载数据
const data = modalApi.getData<MallBargainActivityApi.BargainActivity>();
if (!data || !data.id) {
return;
}
// 加载数据
modalApi.lock();
try {
formData.value = await getBargainActivity(data.id);
await nextTick();
// 对齐活动商品处理结构
await getSpuDetails(
formData.value.spuId,
[formData.value.skuId],
[
{
spuId: formData.value.spuId,
skuId: formData.value.skuId,
bargainFirstPrice: formData.value.bargainFirstPrice, // 砍价起始价格，单位分
bargainMinPrice: formData.value.bargainMinPrice, // 砍价底价
stock: formData.value.stock, // 活动库存
},
],
);
// 设置表单值时，价格字段从分转换为元
await formApi.setValues({
...formData.value,
bargainFirstPrice: (formData.value.bargainFirstPrice || 0) / 100,
bargainMinPrice: (formData.value.bargainMinPrice || 0) / 100,
randomMinPrice: formData.value.randomMinPrice
? formData.value.randomMinPrice / 100
? formatToFraction(formData.value.randomMinPrice)
: undefined,
randomMaxPrice: formData.value.randomMaxPrice
? formData.value.randomMaxPrice / 100
? formatToFraction(formData.value.randomMaxPrice)
: undefined,
});
// 加载商品和 SKU 信息
if (formData.value.spuId) {
const spu = await getSpu(formData.value.spuId);
if (spu) {
spuId.value = spu.id;
spuName.value = spu.name || '';
if (formData.value.skuId) {
const selectedSku = spu.skus?.find(
(sku) => sku.id === formData.value?.skuId,
);
if (selectedSku) {
skuId.value = selectedSku.id;
skuInfo.value = {
skuName: selectedSku.name || '',
picUrl: selectedSku.picUrl || spu.picUrl || '',
price: Number(selectedSku.price) || 0,
};
}
}
}
}
} finally {
modalApi.unlock();
}
@ -188,74 +253,82 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-3/5" :title="getTitle">
<div class="mx-4">
<Form />
<div>
<Modal :title="getTitle" class="w-[70%]">
<Form class="mx-4">
<!-- 商品选择 -->
<template #spuId>
<div class="w-full">
<ElButton
v-if="!formData?.id"
type="primary"
@click="openSpuSelect"
>
选择商品
</ElButton>
<!-- 商品选择区域 -->
<div class="mt-4">
<div class="mb-2 flex items-center">
<span class="text-sm font-medium">砍价活动商品:</span>
<el-button class="ml-2" type="primary" @click="handleSelectProduct">
选择商品
</el-button>
<span v-if="spuName" class="ml-4 text-sm text-gray-600">
已选择: {{ spuName }}
</span>
</div>
<!-- SPU 和 SKU 列表展示 -->
<SpuAndSkuList
ref="spuAndSkuListRef"
:rule-config="ruleConfig"
:spu-list="spuList"
:spu-property-list-p="spuPropertyList"
class="mt-4"
>
<!-- 扩展列：砍价活动特有配置 -->
<template #default>
<VxeColumn
align="center"
min-width="168"
title="砍价起始价格(元)"
>
<template #default="{ row: sku }">
<ElInputNumber
v-model="sku.productConfig.bargainFirstPrice"
:min="0"
:precision="2"
:step="0.1"
class="w-full"
controls-position="right"
/>
</template>
</VxeColumn>
<VxeColumn align="center" min-width="168" title="砍价底价(元)">
<template #default="{ row: sku }">
<ElInputNumber
v-model="sku.productConfig.bargainMinPrice"
:min="0"
:precision="2"
:step="0.1"
class="w-full"
controls-position="right"
/>
</template>
</VxeColumn>
<VxeColumn align="center" min-width="168" title="活动库存">
<template #default="{ row: sku }">
<ElInputNumber
v-model="sku.productConfig.stock"
:max="sku.stock"
:min="0"
class="w-full"
controls-position="right"
/>
</template>
</VxeColumn>
</template>
</SpuAndSkuList>
</div>
</template>
</Form>
</Modal>
<!-- SKU 信息展示 -->
<div v-if="skuInfo" class="mt-4">
<table class="w-full border-collapse border border-gray-300">
<!-- TODO @puhui999：和 element-plus 有点差别哈；ps：是不是用 grid 组件呀？或者 vxe 组件
图片
颜色
版本
商品条码
销售价(元)
市场价(元)
成本价(元)
库存
砍价起始价格(元)
砍价底价(元)
活动库存
-->
<thead>
<tr class="bg-gray-100">
<th class="border border-gray-300 px-4 py-2">商品图片</th>
<th class="border border-gray-300 px-4 py-2">SKU 名称</th>
<th class="border border-gray-300 px-4 py-2">原价(元)</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-gray-300 px-4 py-2 text-center">
<img
v-if="skuInfo.picUrl"
:src="skuInfo.picUrl"
alt="商品图片"
class="h-16 w-16 object-cover"
/>
</td>
<td class="border border-gray-300 px-4 py-2">
{{ skuInfo.skuName }}
</td>
<td class="border border-gray-300 px-4 py-2 text-center">
¥{{ (skuInfo.price / 100).toFixed(2) }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</Modal>
<!-- 商品选择器弹窗（单选模式） -->
<SpuSkuSelect
ref="spuSkuSelectRef"
:is-select-sku="true"
:radio="true"
@select="handleSpuSelected"
/>
<!-- 商品选择器弹窗（单选模式） -->
<SpuSkuSelect
ref="spuSkuSelectRef"
:is-select-sku="true"
:radio="true"
@select="handleSpuSelected"
/>
</div>
</template>

9
apps/web-ele/src/views/mall/promotion/bargain/record/data.ts
View File

@ -75,15 +75,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
field: 'activity.bargainMinPrice',
title: '最低价',
minWidth: 100,
// TODO @puhui999：这里和 antd 不同
formatter: 'formatFenToYuanAmount',
formatter: 'formatAmount2',
},
{
field: 'bargainPrice',
title: '当前价',
minWidth: 100,
// TODO @puhui999：这里和 antd 不同
formatter: 'formatFenToYuanAmount',
formatter: 'formatAmount2',
},
{
field: 'activity.helpMaxCount',
@ -154,8 +152,7 @@ export function useHelpGridColumns(): VxeTableGridOptions['columns'] {
field: 'reducePrice',
title: '砍价金额',
minWidth: 100,
// TODO @puhui999：这里和 antd 不同
formatter: 'formatFenToYuanAmount',
formatter: 'formatAmount2',
},
{
field: 'createTime',

42
apps/web-ele/src/views/mall/promotion/combination/activity/data.ts
View File

@ -24,16 +24,7 @@ export function useFormSchema(): VbenFormSchema[] {
placeholder: '请输入活动名称',
},
rules: 'required',
},
{
fieldName: 'status',
label: '活动状态',
component: 'Select',
componentProps: {
placeholder: '请选择活动状态',
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
rules: 'required',
formItemClass: 'col-span-2',
},
{
fieldName: 'startTime',
@ -41,10 +32,9 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'DatePicker',
componentProps: {
placeholder: '请选择开始时间',
showTime: false,
type: 'datetime',
valueFormat: 'x',
format: 'YYYY-MM-DD',
class: '!w-full',
format: 'YYYY-MM-DD HH:mm:ss',
},
rules: 'required',
},
@ -54,22 +44,19 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'DatePicker',
componentProps: {
placeholder: '请选择结束时间',
showTime: false,
type: 'datetime',
valueFormat: 'x',
format: 'YYYY-MM-DD',
class: '!w-full',
format: 'YYYY-MM-DD HH:mm:ss',
},
rules: 'required',
},
{
fieldName: 'userSize',
label: '用户数量',
label: '拼团人数',
component: 'InputNumber',
componentProps: {
placeholder: '请输入用户数量',
placeholder: '达到该人数即成团',
min: 2,
controlsPosition: 'right',
class: '!w-full',
},
rules: 'required',
},
@ -78,10 +65,8 @@ export function useFormSchema(): VbenFormSchema[] {
label: '限制时长',
component: 'InputNumber',
componentProps: {
placeholder: '请输入限制时长(小时)',
placeholder: '限制时长(小时)',
min: 0,
controlsPosition: 'right',
class: '!w-full',
},
rules: 'required',
},
@ -92,8 +77,6 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
placeholder: '请输入总限购数量',
min: 0,
controlsPosition: 'right',
class: '!w-full',
},
},
{
@ -103,8 +86,6 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
placeholder: '请输入单次限购数量',
min: 0,
controlsPosition: 'right',
class: '!w-full',
},
},
{
@ -115,6 +96,13 @@ export function useFormSchema(): VbenFormSchema[] {
options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
},
},
{
fieldName: 'spuId',
label: '拼团商品',
component: 'Input',
rules: 'required',
formItemClass: 'col-span-2',
},
];
}

354
apps/web-ele/src/views/mall/promotion/combination/activity/modules/form.vue
View File

@ -1,12 +1,20 @@
<script lang="ts" setup>
import type { MallSpuApi } from '#/api/mall/product/spu';
import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
import type {
RuleConfig,
SpuProperty,
} from '#/views/mall/product/spu/components';
import { computed, nextTick, ref } from 'vue';
import { computed, ref } from 'vue';
import { useVbenForm, useVbenModal } from '@vben/common-ui';
import { useVbenModal } from '@vben/common-ui';
import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
import { ElMessage } from 'element-plus';
import { ElButton, ElInputNumber, ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import { VxeColumn } from '#/adapter/vxe-table';
import { getSpu } from '#/api/mall/product/spu';
import {
createCombinationActivity,
@ -14,58 +22,25 @@ import {
updateCombinationActivity,
} from '#/api/mall/promotion/combination/combinationActivity';
import { $t } from '#/locales';
import { SpuSkuSelect } from '#/views/mall/product/spu/components';
import {
getPropertyList,
SpuAndSkuList,
SpuSkuSelect,
} from '#/views/mall/product/spu/components';
import { useFormSchema } from '../data';
defineOptions({ name: 'CombinationActivityForm' });
const emit = defineEmits(['success']);
const formData = ref<MallCombinationActivityApi.CombinationActivity>();
const formData = ref<MallCombinationActivityApi.CombinationActivity>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['拼团活动'])
: $t('ui.actionTitle.create', ['拼团活动']);
});
// ================= 商品选择相关 =================
const spuId = ref<number>();
const spuName = ref<string>('');
const skuTableData = ref<any[]>([]);
const spuSkuSelectRef = ref(); // 商品选择弹窗 Ref
/** 打开商品选择弹窗 */
const handleSelectProduct = () => {
spuSkuSelectRef.value?.open();
};
/** 选择商品后的回调 */
async function handleSpuSelected(selectedSpuId: number, skuIds?: number[]) {
const spu = await getSpu(selectedSpuId);
if (!spu) return;
spuId.value = spu.id;
spuName.value = spu.name || '';
// 筛选指定的 SKU
const selectedSkus = skuIds
? spu.skus?.filter((sku) => skuIds.includes(sku.id!))
: spu.skus;
skuTableData.value =
selectedSkus?.map((sku) => ({
skuId: sku.id!,
skuName: sku.name || '',
picUrl: sku.picUrl || spu.picUrl || '',
price: sku.price || 0,
combinationPrice: 0,
})) || [];
}
// ================= end =================
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
@ -73,49 +48,126 @@ const [Form, formApi] = useVbenForm({
},
labelWidth: 100,
},
wrapperClass: 'grid-cols-2',
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
// ================= 商品选择相关 =================
const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
const ruleConfig: RuleConfig[] = [
{
name: 'productConfig.combinationPrice',
rule: (arg) => arg >= 0.01,
message: '商品拼团价格不能小于 0.01 ！！！',
},
];
const spuList = ref<MallSpuApi.Spu[]>([]); // 选择的 SPU 列表
const spuPropertyList = ref<SpuProperty<MallSpuApi.Spu>[]>([]); // SPU 属性列表
/** 打开商品选择器 */
function openSpuSelect() {
spuSkuSelectRef.value?.open();
}
/** 选择商品后的回调 */
async function handleSpuSelected(spuId: number, skuIds?: number[]) {
await formApi.setFieldValue('spuId', spuId);
await getSpuDetails(spuId, skuIds);
}
/** 获取 SPU 详情 */
async function getSpuDetails(
spuId: number,
skuIds?: number[],
products?: MallCombinationActivityApi.CombinationProduct[],
) {
const res = await getSpu(spuId);
if (!res) {
return;
}
spuList.value = [];
// 筛选指定的 SKU
const selectSkus =
skuIds === undefined
? res.skus
: res.skus?.filter((sku) => skuIds.includes(sku.id!));
// 为每个 SKU 配置拼团活动相关的配置
selectSkus?.forEach((sku) => {
let config: MallCombinationActivityApi.CombinationProduct = {
spuId: res.id!,
skuId: sku.id!,
combinationPrice: 0,
};
// 如果是编辑模式，回填已有配置
if (products !== undefined) {
const product = products.find((item) => item.skuId === sku.id);
if (product) {
// 分转元
product.combinationPrice = formatToFraction(
product.combinationPrice,
) as unknown as number;
}
config = product || config;
}
// 动态添加 productConfig 属性到 SKU
(
sku as MallSpuApi.Sku & {
productConfig: MallCombinationActivityApi.CombinationProduct;
}
).productConfig = config;
});
res.skus = selectSkus;
const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
{
spuId: res.id!,
spuDetail: res,
propertyList: getPropertyList(res),
},
];
// 直接赋值，因为拼团活动只选择一个 SPU
spuList.value = [res];
spuPropertyList.value = spuProperties;
}
// ================= end =================
const [Dialog, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
// 验证商品和 SKU 配置
if (!spuId.value) {
ElMessage.error('请选择拼团商品');
return;
}
if (skuTableData.value.length === 0) {
ElMessage.error('请至少配置一个 SKU');
return;
}
// 验证 SKU 配置
const hasInvalidSku = skuTableData.value.some(
(sku) => sku.combinationPrice < 0.01,
);
if (hasInvalidSku) {
ElMessage.error('请正确配置 SKU 的拼团价格（≥0.01）');
return;
}
// 提交表单
modalApi.lock();
try {
// 获取拼团商品配置（深拷贝避免直接修改原对象）
const products: MallCombinationActivityApi.CombinationProduct[] =
cloneDeep(spuAndSkuListRef.value?.getSkuConfigs('productConfig') || []);
if (products.length === 0) {
ElMessage.error('请选择拼团商品');
return;
}
// 价格需要转为分
products.forEach((item) => {
item.combinationPrice = convertToInteger(item.combinationPrice);
});
// 提交表单
const values = await formApi.getValues();
const data: any = {
const data = {
...values,
spuId: spuId.value,
products: skuTableData.value.map((sku) => ({
skuId: sku.skuId,
combinationPrice: Math.round(sku.combinationPrice * 100), // 转换为分
})),
};
products,
} as MallCombinationActivityApi.CombinationActivity;
await (formData.value?.id
? updateCombinationActivity(data)
: createCombinationActivity(data));
@ -130,46 +182,29 @@ const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
spuId.value = undefined;
spuName.value = '';
skuTableData.value = [];
spuList.value = [];
spuPropertyList.value = [];
return;
}
// 加载数据
const data =
modalApi.getData<MallCombinationActivityApi.CombinationActivity>();
if (!data || !data.id) {
return;
}
// 加载数据
modalApi.lock();
try {
formData.value = await getCombinationActivity(data.id);
await nextTick();
// 对齐活动商品处理结构
await getSpuDetails(
formData.value.spuId!,
formData.value.products?.map((sku) => sku.skuId),
formData.value.products,
);
// 设置表单值
await formApi.setValues(formData.value);
// 加载商品和 SKU 信息
// TODO @puhui999：if return，简化括号层级
if (formData.value.spuId) {
const spu = await getSpu(formData.value.spuId);
if (spu) {
spuId.value = spu.id;
spuName.value = spu.name || '';
// 回填 SKU 配置
const products = formData.value.products || [];
skuTableData.value =
spu.skus
?.filter((sku) => products.some((p) => p.skuId === sku.id))
.map((sku) => {
const product = products.find((p) => p.skuId === sku.id);
return {
skuId: sku.id!,
skuName: sku.name || '',
picUrl: sku.picUrl || spu.picUrl || '',
price: sku.price || 0,
combinationPrice: (product?.combinationPrice || 0) / 100, // 分转元
};
}) || [];
}
}
} finally {
modalApi.unlock();
}
@ -178,80 +213,53 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-4/5" :title="getTitle">
<div class="mx-4">
<Form />
<div>
<Dialog :title="getTitle" class="w-[70%]">
<Form class="mx-4">
<!-- 商品选择 -->
<template #spuId>
<div class="w-full">
<ElButton
v-if="!formData?.id"
type="primary"
@click="openSpuSelect"
>
选择商品
</ElButton>
<!-- 商品选择区域 -->
<div class="mt-4">
<div class="mb-2 flex items-center">
<span class="text-sm font-medium">拼团活动商品:</span>
<ElButton class="ml-2" type="primary" @click="handleSelectProduct">
选择商品
</ElButton>
<span v-if="spuName" class="ml-4 text-sm text-gray-600">
已选择: {{ spuName }}
</span>
</div>
<!-- SPU 和 SKU 列表展示 -->
<SpuAndSkuList
ref="spuAndSkuListRef"
:rule-config="ruleConfig"
:spu-list="spuList"
:spu-property-list-p="spuPropertyList"
class="mt-4"
>
<!-- 扩展列：拼团活动特有配置 -->
<template #default>
<VxeColumn align="center" min-width="168" title="拼团价格(元)">
<template #default="{ row: sku }">
<ElInputNumber
v-model="sku.productConfig.combinationPrice"
:min="0"
:precision="2"
:step="0.1"
class="w-full"
/>
</template>
</VxeColumn>
</template>
</SpuAndSkuList>
</div>
</template>
</Form>
</Dialog>
<!-- SKU 配置表格 -->
<div v-if="skuTableData.length > 0" class="mt-4">
<table class="w-full border-collapse border border-gray-300">
<thead>
<tr class="bg-gray-100">
<th class="border border-gray-300 px-4 py-2">商品图片</th>
<th class="border border-gray-300 px-4 py-2">SKU 名称</th>
<th class="border border-gray-300 px-4 py-2">原价(元)</th>
<th class="border border-gray-300 px-4 py-2">拼团价格(元)</th>
</tr>
</thead>
<tbody>
<tr v-for="(sku, index) in skuTableData" :key="index">
<td class="border border-gray-300 px-4 py-2 text-center">
<img
v-if="sku.picUrl"
:src="sku.picUrl"
alt="商品图片"
class="h-16 w-16 object-cover"
/>
</td>
<!-- TODO @puhui999：这里貌似和 element-plus 没对齐；；ps：是不是用 grid 组件呀？或者 vxe 组件
图片
商品条码
销售价(元)
市场价(元)
成本价(元)
库存
拼团价格(元)
-->
<td class="border border-gray-300 px-4 py-2">
{{ sku.skuName }}
</td>
<td class="border border-gray-300 px-4 py-2 text-center">
¥{{ (sku.price / 100).toFixed(2) }}
</td>
<td class="border border-gray-300 px-4 py-2">
<!-- TODO @puhui999：是不是要使用 antd 的哈？ -->
<input
v-model.number="sku.combinationPrice"
type="number"
min="0"
step="0.01"
class="w-full rounded border border-gray-300 px-2 py-1"
/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</Modal>
<!-- 商品选择器弹窗 -->
<SpuSkuSelect
ref="spuSkuSelectRef"
:is-select-sku="true"
@select="handleSpuSelected"
/>
<!-- 商品选择器弹窗 -->
<SpuSkuSelect
ref="spuSkuSelectRef"
:is-select-sku="true"
@select="handleSpuSelected"
/>
</div>
</template>

6
apps/web-ele/src/views/mall/promotion/combination/record/data.ts
View File

@ -20,9 +20,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
{
fieldName: 'createTime',
label: '创建时间',
component: 'RangePicker',
component: 'DatePicker',
componentProps: {
placeholder: ['开始时间', '结束时间'],
type: 'daterange',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
clearable: true,
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},

2
apps/web-ele/src/views/mall/promotion/coupon/template/data.ts
View File

@ -60,7 +60,6 @@ export function useFormSchema(): VbenFormSchema[] {
rules: 'required',
defaultValue: PromotionProductScopeEnum.ALL.scope,
},
// TODO @puhui999： 商品选择器优化
{
fieldName: 'productSpuIds',
label: '商品',
@ -84,7 +83,6 @@ export function useFormSchema(): VbenFormSchema[] {
},
rules: 'required',
},
// TODO @puhui999： 商品分类选择器优化
{
fieldName: 'productCategoryIds',
label: '商品分类',

25
apps/web-ele/src/views/mall/promotion/coupon/template/modules/form.vue
View File

@ -16,11 +16,18 @@ import {
updateCouponTemplate,
} from '#/api/mall/promotion/coupon/couponTemplate';
import { $t } from '#/locales';
import { ProductCategorySelect } from '#/views/mall/product/category/components';
import { SpuShowcase } from '#/views/mall/product/spu/components';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<MallCouponTemplateApi.CouponTemplate>();
const formData = ref<
Partial<MallCouponTemplateApi.CouponTemplate> & {
productCategoryIds?: number | number[];
productSpuIds?: number[];
}
>({});
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['优惠券模板'])
@ -64,7 +71,7 @@ const [Modal, modalApi] = useVbenModal({
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
formData.value = {};
return;
}
// 加载数据
@ -75,7 +82,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock();
try {
formData.value = await getCouponTemplate(data.id);
const processedData = await processLoadData(formData.value);
const processedData = await processLoadData(formData.value as any);
// 设置到表单
await formApi.setValues(processedData);
} finally {
@ -144,7 +151,15 @@ async function processLoadData(
<template>
<Modal :title="getTitle" class="w-2/5">
<Form class="mx-4" />
<!-- TODO @puhui999：这里需要同步下 -->
<Form class="mx-4">
<!-- 自定义插槽：商品选择 -->
<template #productSpuIds>
<SpuShowcase v-model="formData.productSpuIds" />
</template>
<!-- 自定义插槽：分类选择 -->
<template #productCategoryIds>
<ProductCategorySelect v-model="formData.productCategoryIds" />
</template>
</Form>
</Modal>
</template>

9
apps/web-ele/src/views/mall/promotion/discountActivity/data.ts
View File

@ -69,8 +69,15 @@ export function useFormSchema(): VbenFormSchema[] {
placeholder: '请输入备注',
rows: 4,
},
formItemClass: 'col-span-2',
},
{
fieldName: 'spuIds',
label: '活动商品',
component: 'Input',
rules: 'required',
formItemClass: 'col-span-2',
},
// TODO @puhui999：这里和 antd 对应的不太一样；
];
}

4
apps/web-ele/src/views/mall/promotion/discountActivity/index.vue
View File

@ -46,7 +46,7 @@ async function handleClose(row: MallDiscountActivityApi.DiscountActivity) {
text: '正在关闭中...',
});
try {
await closeDiscountActivity(row.id as number);
await closeDiscountActivity(row.id!);
ElMessage.success('关闭成功');
handleRefresh();
} finally {
@ -60,7 +60,7 @@ async function handleDelete(row: MallDiscountActivityApi.DiscountActivity) {
text: $t('ui.actionMessage.deleting', [row.name]),
});
try {
await deleteDiscountActivity(row.id as number);
await deleteDiscountActivity(row.id!);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
handleRefresh();
} finally {

19
apps/web-ele/src/views/mall/promotion/discountActivity/modules/form.vue
View File

@ -13,14 +13,18 @@ import {
updateDiscountActivity,
} from '#/api/mall/promotion/discount/discountActivity';
import { $t } from '#/locales';
import { SpuShowcase } from '#/views/mall/product/spu/components';
import { useFormSchema } from '../data';
defineOptions({ name: 'DiscountActivityForm' });
// TODO @puhui999：这里和 yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/discountActivity/modules/form.vue 不太一样
const emit = defineEmits(['success']);
const formData = ref<MallDiscountActivityApi.DiscountActivity>();
const formData = ref<
Partial<MallDiscountActivityApi.DiscountActivity> & {
spuIds?: number[];
}
>({});
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['限时折扣活动'])
@ -70,8 +74,7 @@ const [Modal, modalApi] = useVbenModal({
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
// TODO @puhui999：这里和 yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/discountActivity/modules/form.vue 不太一样
formData.value = undefined;
formData.value = {};
return;
}
// 加载数据
@ -93,7 +96,11 @@ const [Modal, modalApi] = useVbenModal({
<template>
<Modal class="w-3/5" :title="getTitle">
<!-- TODO @puhui999：这里和 yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/discountActivity/modules/form.vue 不太一样 -->
<Form />
<Form>
<!-- 自定义插槽：商品选择 -->
<template #spuIds>
<SpuShowcase v-model="formData.spuIds" />
</template>
</Form>
</Modal>
</template>

7
apps/web-ele/src/views/mall/promotion/point/activity/modules/form.vue
View File

@ -4,7 +4,7 @@ import type { MallPointActivityApi } from '#/api/mall/promotion/point';
import type {
RuleConfig,
SpuProperty,
} from '#/views/mall/product/spu/components/type';
} from '#/views/mall/product/spu/components';
import { computed, ref } from 'vue';
@ -23,11 +23,10 @@ import {
} from '#/api/mall/promotion/point';
import { $t } from '#/locales';
import {
getPropertyList,
SpuAndSkuList,
SpuSkuSelect,
} from '#/views/mall/product/spu/components';
// TODO @puhui999：getPropertyList 在 antd 和 el 导入的路径不同；是不是要统一下哈；
import { getPropertyList } from '#/views/mall/product/spu/components/property-util';
import { useFormSchema } from '../data';
@ -100,7 +99,6 @@ async function getSpuDetails(
return;
}
// TODO @puhui999：这里的 spuList，是不是直接放到 145 行就 ok 啦；（尾部）；
spuList.value = [];
// 筛选指定的 SKU
@ -134,7 +132,6 @@ async function getSpuDetails(
});
res.skus = selectSkus;
// TODO @puhui999：这里的逻辑，是不是放到 147 行（尾部）；
const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
{
spuId: res.id!,

19
apps/web-ele/src/views/mall/promotion/point/components/showcase.vue
View File

@ -1,5 +1,4 @@
<!-- 积分商城活动橱窗组件：用于展示和选择积分商城活动 -->
<!-- TODO @puhui999：antd 多了一个，看着 ele 要迁移下？ --->
<script lang="ts" setup>
import type { MallPointActivityApi } from '#/api/mall/promotion/point';
@ -11,7 +10,7 @@ import { ElImage, ElTooltip } from 'element-plus';
import { getPointActivityListByIds } from '#/api/mall/promotion/point';
import PointTableSelect from './table-select.vue';
import TableSelect from './table-select.vue';
interface PointShowcaseProps {
modelValue?: number | number[];
@ -28,7 +27,7 @@ const props = withDefaults(defineProps<PointShowcaseProps>(), {
const emit = defineEmits(['update:modelValue', 'change']);
const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]); // 已选择的活动列表
const pointTableSelectRef = ref<InstanceType<typeof PointTableSelect>>(); // 活动选择表格组件引用
const pointTableSelectRef = ref<InstanceType<typeof TableSelect>>(); // 活动选择表格组件引用
const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
/** 计算是否可以添加 */
@ -109,21 +108,21 @@ function emitActivityChange() {
<div
v-for="(activity, index) in pointActivityList"
:key="activity.id"
class="group relative h-[60px] w-[60px] overflow-hidden rounded-lg"
class="relative h-[60px] w-[60px] overflow-hidden rounded-lg border border-dashed border-gray-300"
>
<ElTooltip :content="activity.spuName">
<div class="relative h-full w-full">
<ElImage
:preview-src-list="[activity.picUrl!]"
:src="activity.picUrl"
class="h-full w-full rounded-lg object-cover"
:preview-src-list="[activity.picUrl!]"
fit="cover"
/>
<!-- 删除按钮 -->
<IconifyIcon
v-if="!disabled"
icon="ep:circle-close-filled"
class="absolute -right-2 -top-2 cursor-pointer text-xl text-red-500 opacity-0 transition-opacity hover:text-red-600 group-hover:opacity-100"
icon="lucide:x"
class="absolute -right-2 -top-2 z-10 h-5 w-5 cursor-pointer text-red-500 hover:text-red-600"
@click="handleRemoveActivity(index)"
/>
</div>
@ -133,16 +132,16 @@ function emitActivityChange() {
<!-- 添加活动按钮 -->
<ElTooltip v-if="canAdd" content="选择活动">
<div
class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors hover:border-primary hover:bg-primary/5"
class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
@click="handleOpenActivitySelect"
>
<IconifyIcon icon="ep:plus" class="text-xl text-gray-400" />
<IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
</div>
</ElTooltip>
</div>
<!-- 活动选择对话框 -->
<PointTableSelect
<TableSelect
ref="pointTableSelectRef"
:multiple="isMultiple"
@change="handleActivitySelected"

8
apps/web-ele/src/views/mall/promotion/point/components/table-select.vue
View File

@ -1,5 +1,4 @@
<!-- 积分商城活动选择弹窗组件 -->
<!-- TODO @puhui999：antd 多了一个，看着 ele 要迁移下？ --->
<script lang="ts" setup>
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
@ -10,7 +9,6 @@ import { computed } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { dateFormatter, fenToYuanFormat } from '@vben/utils';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getPointActivityPage } from '#/api/mall/promotion/point';
@ -93,7 +91,9 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
title: '原价',
minWidth: 100,
align: 'center',
formatter: ({ cellValue }) => fenToYuanFormat(cellValue),
formatter: ({ cellValue }) => {
return `¥${(cellValue / 100).toFixed(2)}`;
},
},
{
field: 'status',
@ -129,7 +129,7 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
title: '创建时间',
width: 180,
align: 'center',
formatter: ({ cellValue }) => dateFormatter(cellValue),
formatter: 'formatDateTime',
},
);
return columns;

13
apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue
View File

@ -54,6 +54,7 @@ async function handleClose(row: MallRewardActivityApi.RewardActivity) {
}
}
/** 删除满减送活动 */
async function handleDelete(row: MallRewardActivityApi.RewardActivity) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
@ -120,16 +121,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
:actions="[
{
label: $t('common.edit'),
type: 'link',
type: 'primary',
link: true,
icon: ACTION_ICON.EDIT,
auth: ['promotion:reward-activity:update'],
onClick: handleEdit.bind(null, row),
},
// TODO @puhui999：下面两个按钮，type、danger 属性无效，应该是 el 不是这个哈。
{
label: '关闭',
type: 'link',
danger: true,
type: 'danger',
link: true,
icon: ACTION_ICON.CLOSE,
auth: ['promotion:reward-activity:close'],
ifShow: row.status === CommonStatusEnum.ENABLE,
@ -140,8 +141,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
{
label: $t('common.delete'),
type: 'link',
danger: true,
type: 'danger',
link: true,
icon: ACTION_ICON.DELETE,
auth: ['promotion:reward-activity:delete'],
popConfirm: {

17
apps/web-ele/src/views/mall/promotion/rewardActivity/modules/form.vue
View File

@ -72,22 +72,7 @@ const [Modal, modalApi] = useVbenModal({
item.limit = convertToInteger(item.limit || 0);
}
});
switch (data.productScope) {
// TODO @puhui999：是不是也可以类似优惠劵的处理策略哈；
case PromotionProductScopeEnum.CATEGORY.scope: {
const categoryIds = data.productCategoryIds;
data.productScopeValues = Array.isArray(categoryIds)
? categoryIds
: categoryIds
? [categoryIds]
: [];
break;
}
case PromotionProductScopeEnum.SPU.scope: {
data.productScopeValues = data.productSpuIds;
break;
}
}
// productScopeValues 已通过 data.ts 中的 dependencies.trigger 自动同步到表单值中
await (data.id
? updateRewardActivity(data as MallRewardActivityApi.RewardActivity)
: createRewardActivity(data as MallRewardActivityApi.RewardActivity));

2
apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
View File

@ -130,7 +130,7 @@ onMounted(async () => {
<span class="text-gray-500">送</span>
<ElInputNumber
v-model="item.giveCount"
class="!w-20"
class="!w-32"
:min="0"
:step="1"
/>

9
apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
View File

@ -58,8 +58,7 @@ function handleDelete(ruleIndex: number) {
</script>
<template>
<!-- TODO @puhui999：这里报错了；idea -->
<ElRow :gutter="[16, 16]">
<ElRow :gutter="16">
<template v-if="formData.rules">
<ElCol v-for="(rule, index) in formData.rules" :key="index" :span="24">
<ElCard size="small" class="rounded-lg">
@ -174,9 +173,9 @@ function handleDelete(ruleIndex: number) {
</template>
<!-- 添加规则按钮 -->
<Col :span="24" class="mt-2">
<Button type="primary" @click="handleAdd">+ 添加优惠规则</Button>
</Col>
<ElCol :span="24" class="mt-2">
<ElButton type="primary" @click="handleAdd">+ 添加优惠规则</ElButton>
</ElCol>
<!-- 提示信息 -->
<ElCol :span="24" class="mt-2">

16
apps/web-ele/src/views/mall/promotion/seckill/activity/data.ts
View File

@ -59,8 +59,8 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'DatePicker',
componentProps: {
placeholder: '请选择活动开始时间',
showTime: false,
format: 'YYYY-MM-DD',
type: 'datetime',
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'x',
class: 'w-full',
},
@ -72,8 +72,8 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'DatePicker',
componentProps: {
placeholder: '请选择活动结束时间',
showTime: false,
format: 'YYYY-MM-DD',
type: 'datetime',
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'x',
class: 'w-full',
},
@ -85,7 +85,7 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'ApiSelect',
componentProps: {
placeholder: '请选择秒杀时段',
mode: 'multiple',
multiple: true,
api: getSimpleSeckillConfigList,
labelField: 'name',
valueField: 'id',
@ -137,6 +137,12 @@ export function useFormSchema(): VbenFormSchema[] {
},
formItemClass: 'col-span-2',
},
{
fieldName: 'spuId',
label: '秒杀商品',
component: 'Input',
formItemClass: 'col-span-2',
},
];
}

28
apps/web-ele/src/views/mall/promotion/seckill/activity/index.vue
View File

@ -4,8 +4,7 @@ import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckil
import { onMounted } from 'vue';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage, ElTag } from 'element-plus';
@ -16,6 +15,7 @@ import {
getSeckillActivityPage,
} from '#/api/mall/promotion/seckill/seckillActivity';
import { getSimpleSeckillConfigList } from '#/api/mall/promotion/seckill/seckillConfig';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import { formatConfigNames, formatTimeRange, setConfigList } from './formatter';
@ -45,10 +45,16 @@ function handleCreate() {
/** 关闭活动 */
async function handleClose(row: MallSeckillActivityApi.SeckillActivity) {
await confirm('确认关闭该秒杀活动吗？');
await closeSeckillActivity(row.id as number);
ElMessage.success('关闭成功');
handleRefresh();
const loadingInstance = ElLoading.service({
text: '活动关闭中...',
});
try {
await closeSeckillActivity(row.id as number);
ElMessage.success('关闭成功');
handleRefresh();
} finally {
loadingInstance.close();
}
}
/** 删除活动 */
@ -84,10 +90,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
},
},
// TODO @puhui999：antd 没有，是不是要统一哈。
cellConfig: {
height: 250,
},
rowConfig: {
keyField: 'id',
isHover: true,
@ -165,8 +167,10 @@ onMounted(async () => {
link: true,
auth: ['promotion:seckill-activity:close'],
ifShow: row.status === 0,
// TODO @puhui999：antd 这里是 popConfirm，看看要不要统一
onClick: handleClose.bind(null, row),
popConfirm: {
title: '确认关闭该秒杀活动吗？',
confirm: handleClose.bind(null, row),
},
},
{
label: $t('common.delete'),

369
apps/web-ele/src/views/mall/promotion/seckill/activity/modules/form.vue
View File

@ -1,13 +1,20 @@
<script lang="ts" setup>
import type { MallSpuApi } from '#/api/mall/product/spu';
import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
import type {
RuleConfig,
SpuProperty,
} from '#/views/mall/product/spu/components';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
import { ElMessage } from 'element-plus';
import { ElButton, ElInputNumber, ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import { VxeColumn } from '#/adapter/vxe-table';
import { getSpu } from '#/api/mall/product/spu';
import {
createSeckillActivity,
@ -15,11 +22,18 @@ import {
updateSeckillActivity,
} from '#/api/mall/promotion/seckill/seckillActivity';
import { $t } from '#/locales';
import { SpuSkuSelect } from '#/views/mall/product/spu/components';
import {
getPropertyList,
SpuAndSkuList,
SpuSkuSelect,
} from '#/views/mall/product/spu/components';
import { useFormSchema } from '../data';
defineOptions({ name: 'PromotionSeckillActivityForm' });
const emit = defineEmits(['success']);
const formData = ref<MallSeckillActivityApi.SeckillActivity>();
const getTitle = computed(() => {
return formData.value?.id
@ -27,94 +41,140 @@ const getTitle = computed(() => {
: $t('ui.actionTitle.create', ['秒杀活动']);
});
// ================= 商品选择相关 =================
const spuId = ref<number>();
const spuName = ref<string>('');
const skuTableData = ref<any[]>([]);
const spuSkuSelectRef = ref(); // 商品选择弹窗 Ref
/** 打开商品选择弹窗 */
const handleSelectProduct = () => {
spuSkuSelectRef.value?.open();
};
/** 选择商品后的回调 */
async function handleSpuSelected(selectedSpuId: number, skuIds?: number[]) {
const spu = await getSpu(selectedSpuId);
if (!spu) return;
spuId.value = spu.id;
spuName.value = spu.name || '';
// 筛选指定的 SKU
const selectedSkus = skuIds
? spu.skus?.filter((sku) => skuIds.includes(sku.id!))
: spu.skus;
skuTableData.value =
selectedSkus?.map((sku) => ({
skuId: sku.id!,
skuName: sku.name || '',
picUrl: sku.picUrl || spu.picUrl || '',
price: sku.price || 0,
stock: 0,
seckillPrice: 0,
})) || [];
}
// ================= end =================
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
labelWidth: 120,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
// ================= 商品选择相关 =================
const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
const ruleConfig: RuleConfig[] = [
{
name: 'productConfig.stock',
rule: (arg) => arg >= 1,
message: '商品秒杀库存必须大于等于 1 ！！！',
},
{
name: 'productConfig.seckillPrice',
rule: (arg) => arg >= 0.01,
message: '商品秒杀价格必须大于等于 0.01 ！！！',
},
];
const spuList = ref<MallSpuApi.Spu[]>([]); // 选择的 SPU 列表
const spuPropertyList = ref<SpuProperty<MallSpuApi.Spu>[]>([]); // SPU 属性列表
/** 打开商品选择器 */
function openSpuSelect() {
spuSkuSelectRef.value?.open();
}
/** 选择商品后的回调 */
async function handleSpuSelected(spuId: number, skuIds?: number[]) {
await formApi.setFieldValue('spuId', spuId);
await getSpuDetails(spuId, skuIds);
}
/** 获取 SPU 详情 */
async function getSpuDetails(
spuId: number,
skuIds?: number[],
products?: MallSeckillActivityApi.SeckillProduct[],
) {
const res = await getSpu(spuId);
if (!res) {
return;
}
spuList.value = [];
// 筛选指定的 SKU
const selectSkus =
skuIds === undefined
? res.skus
: res.skus?.filter((sku) => skuIds.includes(sku.id!));
// 为每个 SKU 配置秒杀活动相关的配置
selectSkus?.forEach((sku) => {
let config: MallSeckillActivityApi.SeckillProduct = {
spuId: res.id!,
skuId: sku.id!,
stock: 0,
seckillPrice: 0,
};
// 如果是编辑模式，回填已有配置
if (products !== undefined) {
const product = products.find((item) => item.skuId === sku.id);
if (product) {
// 分转元
product.seckillPrice = formatToFraction(
product.seckillPrice,
) as unknown as number;
}
config = product || config;
}
// 动态添加 productConfig 属性到 SKU
(
sku as MallSpuApi.Sku & {
productConfig: MallSeckillActivityApi.SeckillProduct;
}
).productConfig = config;
});
res.skus = selectSkus;
const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
{
spuId: res.id!,
spuDetail: res,
propertyList: getPropertyList(res),
},
];
// 直接赋值，因为秒杀活动只选择一个 SPU
spuList.value = [res];
spuPropertyList.value = spuProperties;
}
// ================= end =================
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
// 验证商品和 SKU 配置
if (!spuId.value) {
ElMessage.error('请选择秒杀商品');
return;
}
if (skuTableData.value.length === 0) {
ElMessage.error('请至少配置一个 SKU');
return;
}
// 验证 SKU 配置
const hasInvalidSku = skuTableData.value.some(
(sku) => sku.stock < 1 || sku.seckillPrice < 0.01,
);
if (hasInvalidSku) {
ElMessage.error('请正确配置 SKU 的秒杀库存（≥1）和秒杀价格（≥0.01）');
return;
}
// 提交表单
modalApi.lock();
try {
// 获取秒杀商品配置（深拷贝避免直接修改原对象）
const products: MallSeckillActivityApi.SeckillProduct[] = cloneDeep(
spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
);
if (products.length === 0) {
ElMessage.error('请选择秒杀商品');
return;
}
// 价格需要转为分
products.forEach((item) => {
item.seckillPrice = convertToInteger(item.seckillPrice);
});
// 提交表单
const values = await formApi.getValues();
const data: any = {
const data = {
...values,
spuId: spuId.value,
products: skuTableData.value.map((sku) => ({
skuId: sku.skuId,
stock: sku.stock,
seckillPrice: Math.round(sku.seckillPrice * 100), // 转换为分
})),
};
products,
} as MallSeckillActivityApi.SeckillActivity;
await (formData.value?.id
? updateSeckillActivity(data)
: createSeckillActivity(data));
@ -129,9 +189,8 @@ const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
spuId.value = undefined;
spuName.value = '';
skuTableData.value = [];
spuList.value = [];
spuPropertyList.value = [];
return;
}
@ -140,36 +199,18 @@ const [Modal, modalApi] = useVbenModal({
if (!data || !data.id) {
return;
}
// 加载数据
modalApi.lock();
try {
formData.value = await getSeckillActivity(data.id);
// TODO @puhui999：这里需要 nextTick 么？因为 antd 有
// 对齐活动商品处理结构
await getSpuDetails(
formData.value.spuId!,
formData.value.products?.map((sku) => sku.skuId),
formData.value.products,
);
// 设置表单值
await formApi.setValues(formData.value);
// 加载商品和 SKU 信息
// TODO @puhui999：if return 简化括号层级
if (formData.value.spuId) {
const spu = await getSpu(formData.value.spuId);
if (spu) {
spuId.value = spu.id;
spuName.value = spu.name || '';
// 回填 SKU 配置
const products = formData.value.products || [];
skuTableData.value =
spu.skus
?.filter((sku) => products.some((p) => p.skuId === sku.id))
.map((sku) => {
const product = products.find((p) => p.skuId === sku.id);
return {
skuId: sku.id!,
skuName: sku.name || '',
picUrl: sku.picUrl || spu.picUrl || '',
price: sku.price || 0,
stock: product?.stock || 0,
seckillPrice: (product?.seckillPrice || 0) / 100, // 分转元
};
}) || [];
}
}
} finally {
modalApi.unlock();
}
@ -178,81 +219,63 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-4/5" :title="getTitle">
<div class="mx-4">
<Form />
<div>
<Modal :title="getTitle" class="w-[70%]">
<Form class="mx-4">
<!-- 商品选择 -->
<template #spuId>
<div class="w-full">
<ElButton
v-if="!formData?.id"
type="primary"
@click="openSpuSelect"
>
选择商品
</ElButton>
<!-- 商品选择区域 -->
<div class="mt-4">
<div class="mb-2 flex items-center">
<span class="text-sm font-medium">秒杀活动商品:</span>
<!-- TODO @puhui999：使用 ElButton 这种哈 -->
<el-button class="ml-2" type="primary" @click="handleSelectProduct">
选择商品
</el-button>
<span v-if="spuName" class="ml-4 text-sm text-gray-600">
已选择: {{ spuName }}
</span>
</div>
<!-- SPU 和 SKU 列表展示 -->
<SpuAndSkuList
ref="spuAndSkuListRef"
:rule-config="ruleConfig"
:spu-list="spuList"
:spu-property-list-p="spuPropertyList"
class="mt-4"
>
<!-- 扩展列：秒杀活动特有配置 -->
<template #default>
<VxeColumn align="center" min-width="168" title="秒杀库存">
<template #default="{ row: sku }">
<ElInputNumber
v-model="sku.productConfig.stock"
:max="sku.stock"
:min="0"
class="w-full"
/>
</template>
</VxeColumn>
<VxeColumn align="center" min-width="168" title="秒杀价格(元)">
<template #default="{ row: sku }">
<ElInputNumber
v-model="sku.productConfig.seckillPrice"
:min="0"
:precision="2"
:step="0.1"
class="w-full"
/>
</template>
</VxeColumn>
</template>
</SpuAndSkuList>
</div>
</template>
</Form>
</Modal>
<!-- SKU 配置表格 -->
<div v-if="skuTableData.length > 0" class="mt-4">
<!-- TODO @puhui999：Grid？或者 VXETable 哇？ -->
<table class="w-full border-collapse border border-gray-300">
<thead>
<tr class="bg-gray-100">
<th class="border border-gray-300 px-4 py-2">商品图片</th>
<th class="border border-gray-300 px-4 py-2">SKU 名称</th>
<th class="border border-gray-300 px-4 py-2">原价(元)</th>
<th class="border border-gray-300 px-4 py-2">秒杀库存</th>
<th class="border border-gray-300 px-4 py-2">秒杀价格(元)</th>
</tr>
</thead>
<tbody>
<tr v-for="(sku, index) in skuTableData" :key="index">
<td class="border border-gray-300 px-4 py-2 text-center">
<img
v-if="sku.picUrl"
:src="sku.picUrl"
alt="商品图片"
class="h-16 w-16 object-cover"
/>
</td>
<td class="border border-gray-300 px-4 py-2">
{{ sku.skuName }}
</td>
<td class="border border-gray-300 px-4 py-2 text-center">
¥{{ (sku.price / 100).toFixed(2) }}
</td>
<td class="border border-gray-300 px-4 py-2">
<input
v-model.number="sku.stock"
type="number"
min="0"
class="w-full rounded border border-gray-300 px-2 py-1"
/>
</td>
<td class="border border-gray-300 px-4 py-2">
<input
v-model.number="sku.seckillPrice"
type="number"
min="0"
step="0.01"
class="w-full rounded border border-gray-300 px-2 py-1"
/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</Modal>
<!-- 商品选择器弹窗 -->
<SpuSkuSelect
ref="spuSkuSelectRef"
:is-select-sku="true"
@select="handleSpuSelected"
/>
<!-- 商品选择器弹窗 -->
<SpuSkuSelect
ref="spuSkuSelectRef"
:is-select-sku="true"
@select="handleSpuSelected"
/>
</div>
</template>