smart-flow/yudao-ui-admin-vben
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

review：【antd】【mall】商品发布相关

Browse Source
This commit is contained in:
YunaiV
2025-11-01 11:05:04 +08:00
parent f2c90ea7a4
commit 7f192823d7
11 changed files with 35 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web-antd/src/api/mall/promotion/reward/rewardActivity.ts
View File

@@ -18,6 +18,7 @@ export namespace MallRewardActivityApi {
export interface RewardActivity {
id?: number; // 活动编号
name?: string; // 活动名称
status?: number; // 活动状态
startTime?: Date; // 开始时间
endTime?: Date; // 结束时间
startAndEndTime?: Date[]; // 开始和结束时间（仅前端使用）

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

@@ -8,8 +8,6 @@ import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { fenToYuan } from '@vben/utils';
import { message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getSpu } from '#/api/mall/product/spu';
@@ -61,6 +59,7 @@ const gridColumns = computed<VxeGridProps['columns']>(() => [
},
]);
// TODO @芋艿：要不要直接非 pager？
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: gridColumns.value,
@@ -76,17 +75,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
if (!spuId.value) {
return { items: [], total: 0 };
}
try {
const spu = await getSpu(spuId.value);
return {
items: spu.skus || [],
total: spu.skus?.length || 0,
};
} catch (error) {
message.error('加载 SKU 数据失败');
console.error(error);
return { items: [], total: 0 };
}
const spu = await getSpu(spuId.value);
return {
items: spu.skus || [],
total: spu.skus?.length || 0,
};
},
},
},
@@ -113,12 +106,10 @@ const [Modal, modalApi] = useVbenModal({
spuId.value = undefined;
return;
}
const data = modalApi.getData<SpuData>();
if (!data?.spuId) {
return;
}
spuId.value = data.spuId;
await gridApi.query();
},

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

@@ -28,17 +28,19 @@ const emit = defineEmits(['update:modelValue', 'change']);
const productSpus = ref<MallSpuApi.Spu[]>([]);
const spuTableSelectRef = ref<InstanceType<typeof SpuTableSelect>>();
const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
/** 计算是否可以添加 */
const canAdd = computed(() => {
if (props.disabled) return false;
if (!props.limit) return true;
if (props.disabled) {
return false;
}
if (!props.limit) {
return true;
}
return productSpus.value.length < props.limit;
});
/** 是否为多选模式 */
const isMultiple = computed(() => props.limit !== 1);
/** 监听 modelValue 变化，加载商品详情 */
watch(
() => props.modelValue,

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

@@ -26,6 +26,7 @@ const emit = defineEmits<{
change: [spu: MallSpuApi.Spu | MallSpuApi.Spu[]];
}>();
// TODO @芋艿：要不要加类型；
const categoryList = ref<any[]>([]);
const categoryTreeList = ref<any[]>([]);
@@ -71,13 +72,11 @@ const formSchema = computed<VbenFormSchema[]>(() => [
/** 表格列配置 */
const gridColumns = computed<VxeGridProps['columns']>(() => {
const columns: VxeGridProps['columns'] = [];
if (props.multiple) {
columns.push({ type: 'checkbox', width: 55 });
} else {
columns.push({ type: 'radio', width: 55 });
}
columns.push(
{
field: 'id',
@@ -109,7 +108,6 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
},
},
);
return columns;
});
@@ -129,14 +127,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
reserve: true,
}
: undefined,
radioConfig: !props.multiple
? {
radioConfig: props.multiple
? undefined
: {
reserve: true,
}
: undefined,
},
proxyConfig: {
ajax: {
async query({ page }: any, formValues: any) {
// TODO @芋艿：怎么简化下。
const data = await getSpuPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
@@ -145,7 +144,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
categoryId: formValues.categoryId || undefined,
createTime: formValues.createTime || undefined,
});
return {
items: data.list || [],
total: data.total || 0,
@@ -165,6 +163,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
});
/** 多选：处理选中变化 */
// TODO @芋艿：要不要清理掉？
function handleCheckboxChange() {
// vxe-table 自动管理选中状态，无需手动处理
}
@@ -180,13 +179,16 @@ function handleRadioChange() {
const [Modal, modalApi] = useVbenModal({
destroyOnClose: true,
// TODO @芋艿：看看怎么简化
onConfirm: props.multiple
? () => {
const selectedRows = gridApi.grid.getCheckboxRecords() as MallSpuApi.Spu[];
const selectedRows =
gridApi.grid.getCheckboxRecords() as MallSpuApi.Spu[];
emit('change', selectedRows);
modalApi.close();
}
: undefined,
// TODO @芋艿：看看怎么简化？
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
gridApi.grid.clearCheckboxRow();

1
apps/web-antd/src/views/mall/product/spu/form/data.ts
View File

@@ -102,6 +102,7 @@ export function useInfoFormSchema(): VbenFormSchema[] {
}
/** 价格库存的表单 */
// TODO @puhui999：貌似太宽了。。。屏幕小的，整个 table 展示补全哈~~
export function useSkuFormSchema(
propertyList: any[] = [],
isDetail: boolean = false,

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

@@ -212,7 +212,9 @@ function build(
const result: MallSpuApi.Property[][] = [];
const rest = build(propertyValuesList.slice(1));
const firstList = propertyValuesList[0];
if (!firstList) return [];
if (!firstList) {
return [];
}
for (const element of firstList) {
for (const element_ of rest) {
@@ -289,8 +291,6 @@ defineExpose({
<template>
<div>
<!-- 情况一：添加/修改 -->
<!-- TODO @puhui999：有可以通过 grid 来做么？主要考虑，这样不直接使用 vxe 标签，抽象程度更高； -->
<!-- TODO 还是先这样吧 🤣🤣 -->
<VxeTable
v-if="!isDetail && !isActivityComponent"
:data="isBatch ? skuList : formData?.skus || []"

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

@@ -37,6 +37,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
keepSource: true,
proxyConfig: {
ajax: {
// TODO @芋艿：要不要 ele 和 antd 统一下；
query: async ({ page }, formValues) => {
const params: any = {
pageNo: page.currentPage,

8
apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts
View File

@@ -102,7 +102,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
// 隐藏 ID 字段
{
fieldName: 'id',
component: 'Input',
@@ -111,7 +110,6 @@ export function useFormSchema(): VbenFormSchema[] {
show: () => false,
},
},
// 活动名称
{
fieldName: 'name',
label: '活动名称',
@@ -122,7 +120,6 @@ export function useFormSchema(): VbenFormSchema[] {
allowClear: true,
},
},
// 活动时间
{
fieldName: 'startAndEndTime',
label: '活动时间',
@@ -135,7 +132,6 @@ export function useFormSchema(): VbenFormSchema[] {
allowClear: true,
},
},
// 条件类型
{
fieldName: 'conditionType',
label: '条件类型',
@@ -147,7 +143,6 @@ export function useFormSchema(): VbenFormSchema[] {
},
rules: z.number().default(PromotionConditionTypeEnum.PRICE.type),
},
// 活动范围
{
fieldName: 'productScope',
label: '活动范围',
@@ -159,7 +154,6 @@ export function useFormSchema(): VbenFormSchema[] {
},
rules: z.number().default(PromotionProductScopeEnum.ALL.scope),
},
// 备注
{
fieldName: 'remark',
label: '备注',
@@ -170,14 +164,12 @@ export function useFormSchema(): VbenFormSchema[] {
allowClear: true,
},
},
// 优惠规则（自定义组件插槽）
{
fieldName: 'rules',
label: '优惠设置',
component: 'Input',
formItemClass: 'items-start',
},
// 商品范围选择（自定义组件插槽）
{
fieldName: 'productSpuIds',
label: '选择商品',

7
apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
View File

@@ -3,6 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
import { Page, useVbenModal } from '@vben/common-ui';
import { CommonStatusEnum } from '@vben/constants';
import { message } from 'ant-design-vue';
@@ -41,6 +42,7 @@ function handleEdit(row: MallRewardActivityApi.RewardActivity) {
/** 关闭满减送活动 */
async function handleClose(row: MallRewardActivityApi.RewardActivity) {
// TODO @puhui999：这个国际化，需要加下哈；closing、closeSuccess；
const hideLoading = message.loading({
content: $t('ui.actionMessage.closing', [row.name]),
duration: 0,
@@ -104,7 +106,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
<Page auto-content-height>
<FormModal @success="handleRefresh" />
<Grid table-title="满减送活动">
<!-- 工具栏按钮 -->
<template #toolbar-tools>
<TableAction
:actions="[
@@ -118,8 +119,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
]"
/>
</template>
<!-- 行操作按钮 -->
<template #actions="{ row }">
<TableAction
:actions="[
@@ -136,7 +135,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
danger: true,
icon: ACTION_ICON.CLOSE,
auth: ['promotion:reward-activity:close'],
ifShow: row.status === 0,
ifShow: row.status === CommonStatusEnum.ENABLE,
popConfirm: {
title: '确认关闭该满减送活动吗？',
confirm: handleClose.bind(null, row),

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

@@ -1,5 +1,4 @@
<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form';
import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
import { computed, nextTick, ref } from 'vue';
@@ -45,7 +44,7 @@ const [Form, formApi] = useVbenForm({
class: 'w-full',
},
labelWidth: 100,
} as VbenFormProps['commonConfig'],
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
@@ -53,6 +52,7 @@ const [Form, formApi] = useVbenForm({
const rewardRuleRef = ref<InstanceType<typeof RewardRule>>();
// TODO @芋艿：这里需要在简化下；
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();

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

@@ -35,7 +35,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
/** 新增/编辑的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
// 隐藏的 ID 字段
{
component: 'Input',
fieldName: 'id',