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

feat：【antd】mall 发布界面的评审

pull/238/MERGE
YunaiV 2025-10-22 23:53:48 +08:00
parent 495a924d56
commit ebc7aba637
10 changed files with 176 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,6 @@ import { DeliveryTypeEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { handleTree } from '@vben/utils';
import { z } from '#/adapter/form';
import { getSimpleBrandList } from '#/api/mall/product/brand';
import { getCategoryList } from '#/api/mall/product/category';
import { getSimpleTemplateList } from '#/api/mall/trade/delivery/expressTemplate';
@ -33,7 +32,6 @@ export function useInfoFormSchema(): VbenFormSchema[] {
{
fieldName: 'categoryId',
label: '分类名称',
// component: 'ApiCascader',
component: 'ApiTreeSelect',
componentProps: {
api: async () => {
@ -285,7 +283,7 @@ export function useOtherFormSchema(): VbenFormSchema[] {
componentProps: {
min: 0,
},
rules: z.number().min(0).optional().default(0),
rules: 'required',
},
{
fieldName: 'giveIntegral',
@ -294,7 +292,7 @@ export function useOtherFormSchema(): VbenFormSchema[] {
componentProps: {
min: 0,
},
rules: z.number().min(0).optional().default(0),
rules: 'required',
},
{
fieldName: 'virtualSalesCount',
@ -303,7 +301,7 @@ export function useOtherFormSchema(): VbenFormSchema[] {
componentProps: {
min: 0,
},
rules: z.number().min(0).optional().default(0),
rules: 'required',
},
];
}

10
apps/web-antd/src/views/mall/product/spu/form/index.ts
View File

@ -1,6 +1,7 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import type { MallSpuApi } from '#/api/mall/product/spu';
// TODO @puhui999：这个是不是 api 后端有定义类似的？如果是，是不是放到 api 哈？
export interface PropertyAndValues {
id: number;
name: string;
@ -23,12 +24,8 @@ export interface RuleConfig {
message: string;
}
/**
* 获得商品的规格列表 - 商品相关的公共函数
*
* @param spu
* @return PropertyAndValues 规格列表
*/
// TODO @puhui999：这个是只有 index.ts 在用么？还是别的模块也会用
/** 获得商品的规格列表 - 商品相关的公共函数 */
const getPropertyList = (spu: MallSpuApi.Spu): PropertyAndValues[] => {
// 直接拿返回的 skus 属性逆向生成出 propertyList
const properties: PropertyAndValues[] = [];
@ -62,4 +59,5 @@ const getPropertyList = (spu: MallSpuApi.Spu): PropertyAndValues[] => {
export { getPropertyList };
// 导出组件
// TODO @puhui999：如果 sku-list.vue 要对外，可以考虑在 spu 下面，搞个 components 模块；（目前看，别的模块应该会用到哈。）；modules 是当前模块用到的，components 是跨模块要用到的。
export { default as SkuList } from './modules/sku-list.vue';

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

@ -8,7 +8,7 @@ import { useRoute } from 'vue-router';
import { Page, useVbenModal } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';
import { convertToInteger, floatToFixed2, formatToFraction } from '@vben/utils';
import { convertToInteger, formatToFraction } from '@vben/utils';
import { Button, Card, message } from 'ant-design-vue';
@ -31,11 +31,6 @@ const spuId = ref<number>();
const { params, name } = useRoute();
const { closeCurrentTab } = useTabs();
const activeTabName = ref('info');
function onTabChange(key: string) {
activeTabName.value = key;
}
const tabList = ref([
{
key: 'info',
@ -58,44 +53,43 @@ const tabList = ref([
tab: '其它设置',
},
]);
// spu 表单数据
const formData = ref<MallSpuApi.Spu>({
name: '', // 商品名称
categoryId: undefined, // 商品分类
keyword: '', // 关键字
picUrl: '', // 商品封面图
sliderPicUrls: [], // 商品轮播图
introduction: '', // 商品简介
deliveryTypes: [], // 配送方式数组
deliveryTemplateId: undefined, // 运费模版
brandId: undefined, // 商品品牌
specType: false, // 商品规格
subCommissionType: false, // 分销类型
skus: [
{
price: 0, // 商品价格
marketPrice: 0, // 市场价
costPrice: 0, // 成本价
barCode: '', // 商品条码
picUrl: '', // 图片地址
stock: 0, // 库存
weight: 0, // 商品重量
volume: 0, // 商品体积
firstBrokeragePrice: 0, // 一级分销的佣金
secondBrokeragePrice: 0, // 二级分销的佣金
},
],
description: '', // 商品详情
sort: 0, // 商品排序
giveIntegral: 0, // 赠送积分
virtualSalesCount: 0, // 虚拟销量
});
const propertyList = ref<PropertyAndValues[]>([]); // 商品属性列表
const formLoading = ref(true); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const isDetail = ref(false); // 是否查看详情
const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const isDetail = ref(name === 'ProductSpuDetail'); // 是否查看详情
const skuListRef = ref(); // 商品属性列表 Ref
// sku 相关属性校验规则
const formData = ref<MallSpuApi.Spu>({
name: '',
categoryId: undefined,
keyword: '',
picUrl: '',
sliderPicUrls: [],
introduction: '',
deliveryTypes: [],
deliveryTemplateId: undefined,
brandId: undefined,
specType: false,
subCommissionType: false,
skus: [
{
price: 0,
marketPrice: 0,
costPrice: 0,
barCode: '',
picUrl: '',
stock: 0,
weight: 0,
volume: 0,
firstBrokeragePrice: 0,
secondBrokeragePrice: 0,
},
],
description: '',
sort: 0,
giveIntegral: 0,
virtualSalesCount: 0,
}); // spu 表单数据
const propertyList = ref<PropertyAndValues[]>([]); // 商品属性列表
const ruleConfig: RuleConfig[] = [
{
name: 'stock',
@ -117,7 +111,7 @@ const ruleConfig: RuleConfig[] = [
rule: (arg) => arg >= 0.01,
message: '商品成本价格必须大于等于 0.00 元！！！',
},
];
]; // sku 相关属性校验规则
const [InfoForm, infoFormApi] = useVbenForm({
commonConfig: {
@ -146,11 +140,11 @@ const [SkuForm, skuFormApi] = useVbenForm({
handleValuesChange: (values, fieldsChanged) => {
if (fieldsChanged.includes('subCommissionType')) {
formData.value.subCommissionType = values.subCommissionType;
changeSubCommissionType();
handleChangeSubCommissionType();
}
if (fieldsChanged.includes('specType')) {
formData.value.specType = values.specType;
onChangeSpec();
handleChangeSpec();
}
},
});
@ -199,7 +193,13 @@ const [OtherForm, otherFormApi] = useVbenForm({
showDefaultActions: false,
});
async function onSubmit() {
/** tab 切换 */
function handleTabChange(key: string) {
activeTabName.value = key;
}
/** 提交表单 */
async function handleSubmit() {
const values: MallSpuApi.Spu = await infoFormApi
.merge(skuFormApi)
.merge(deliveryFormApi)
@ -216,7 +216,7 @@ async function onSubmit() {
return;
}
values.skus.forEach((item) => {
// sku相关价格元转分
// 金额转换：元转分
item.price = convertToInteger(item.price);
item.marketPrice = convertToInteger(item.marketPrice);
item.costPrice = convertToInteger(item.costPrice);
@ -224,7 +224,7 @@ async function onSubmit() {
item.secondBrokeragePrice = convertToInteger(item.secondBrokeragePrice);
});
}
// 处理轮播图列表
// 处理轮播图列表 TODO @puhui999：这个是必须的哇？
const newSliderPicUrls: any[] = [];
values.sliderPicUrls!.forEach((item: any) => {
// 如果是前端选的图
@ -234,12 +234,13 @@ async function onSubmit() {
});
values.sliderPicUrls = newSliderPicUrls;
// 提交数据
await (spuId.value ? updateSpu(values) : createSpu(values));
}
/** 获得详情 */
async function getDetail() {
if (name === 'ProductSpuDetail') {
if (isDetail.value) {
isDetail.value = true;
infoFormApi.setDisabled(true);
skuFormApi.setDisabled(true);
@ -247,45 +248,36 @@ async function getDetail() {
descriptionFormApi.setDisabled(true);
otherFormApi.setDisabled(true);
}
const id = params.id as unknown as number;
if (id) {
try {
const res = await getSpu(spuId.value!);
res.skus?.forEach((item) => {
if (isDetail.value) {
item.price = floatToFixed2(item.price);
item.marketPrice = floatToFixed2(item.marketPrice);
item.costPrice = floatToFixed2(item.costPrice);
item.firstBrokeragePrice = floatToFixed2(item.firstBrokeragePrice);
item.secondBrokeragePrice = floatToFixed2(item.secondBrokeragePrice);
} else {
// 回显价格分转元
item.price = formatToFraction(item.price);
item.marketPrice = formatToFraction(item.marketPrice);
item.costPrice = formatToFraction(item.costPrice);
item.firstBrokeragePrice = formatToFraction(item.firstBrokeragePrice);
item.secondBrokeragePrice = formatToFraction(
item.secondBrokeragePrice,
);
}
});
formData.value = res;
// 初始化各表单值（异步）
infoFormApi.setValues(res);
skuFormApi.setValues(res);
deliveryFormApi.setValues(res);
descriptionFormApi.setValues(res);
otherFormApi.setValues(res);
} finally {
formLoading.value = false;
}
}
// 将 SKU 的属性，整理成 PropertyAndValues 数组
propertyList.value = getPropertyList(formData.value);
formLoading.value = true;
try {
const res = await getSpu(spuId.value!);
// 金额转换：元转分
res.skus?.forEach((item) => {
item.price = formatToFraction(item.price);
item.marketPrice = formatToFraction(item.marketPrice);
item.costPrice = formatToFraction(item.costPrice);
item.firstBrokeragePrice = formatToFraction(item.firstBrokeragePrice);
item.secondBrokeragePrice = formatToFraction(item.secondBrokeragePrice);
});
formData.value = res;
// 初始化各表单值
infoFormApi.setValues(res).then();
skuFormApi.setValues(res).then();
deliveryFormApi.setValues(res).then();
descriptionFormApi.setValues(res).then();
otherFormApi.setValues(res).then();
// 将 SKU 的属性，整理成 PropertyAndValues 数组
propertyList.value = getPropertyList(formData.value);
} finally {
formLoading.value = false;
}
}
// =========== sku form 逻辑 ===========
/** 打开属性添加表单 */
function openPropertyAddForm() {
productPropertyAddFormApi.open();
}
@ -296,7 +288,7 @@ function generateSkus(propertyList: any[]) {
}
/** 分销类型 */
function changeSubCommissionType() {
function handleChangeSubCommissionType() {
// 默认为零，类型切换后也要重置为零
for (const item of formData.value.skus!) {
item.firstBrokeragePrice = 0;
@ -305,10 +297,10 @@ function changeSubCommissionType() {
}
/** 选择规格 */
function onChangeSpec() {
function handleChangeSpec() {
// 重置商品属性列表
propertyList.value = [];
// 重置sku列表
// 重置 sku 列表
formData.value.skus = [
{
price: 0,
@ -325,7 +317,7 @@ function onChangeSpec() {
];
}
// 监听 sku form schema 变化，更新表单
/** 监听 sku form schema 变化，更新表单 */
watch(
propertyList,
() => {
@ -336,6 +328,7 @@ watch(
{ deep: true },
);
/** 初始化 */
onMounted(async () => {
spuId.value = params.id as unknown as number;
if (!spuId.value) {
@ -355,18 +348,18 @@ onMounted(async () => {
:loading="formLoading"
:tab-list="tabList"
:active-key="activeTabName"
@tab-change="onTabChange"
@tab-change="handleTabChange"
>
<template #tabBarExtraContent>
<Button type="primary" v-if="!isDetail" @click="onSubmit">
<Button type="primary" v-if="!isDetail" @click="handleSubmit">
保存
</Button>
<Button type="default" v-else @click="() => closeCurrentTab()">
返回列表
</Button>
</template>
<InfoForm class="w-3/5" v-show="activeTabName === 'info'" />
<InfoForm class="w-3/5" v-show="activeTabName === 'info'" />
<SkuForm class="w-full" v-show="activeTabName === 'sku'">
<template #singleSkuList>
<SkuList
@ -418,6 +411,7 @@ onMounted(async () => {
</div>
</template>
<style lang="scss" scoped>
// TODO @puhui999：这个样式是必须的哇？
:deep(.ant-tabs-tab-btn) {
font-size: 14px !important;
}

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

@ -21,7 +21,6 @@ const props = withDefaults(defineProps<Props>(), {
isDetail: false,
});
/** 输入框失去焦点或点击回车时触发 */
const emit = defineEmits(['success']);
interface Props {
@ -30,12 +29,15 @@ interface Props {
}
const inputValue = ref<string[]>([]); // 输入框值（tags 模式使用数组）
const attributeIndex = ref<null | number>(null); // 获取焦点时记录当前属性项的index
// 输入框显隐控制
const attributeIndex = ref<null | number>(null); // 获取焦点时记录当前属性项的 index
const inputVisible = computed(() => (index: number) => {
if (attributeIndex.value === null) return false;
if (attributeIndex.value === index) return true;
});
if (attributeIndex.value === null) {
return false;
}
if (attributeIndex.value === index) {
return true;
}
}); // 输入框显隐控制
interface InputRefItem {
inputRef?: {
@ -46,7 +48,10 @@ interface InputRefItem {
focus: () => void;
}
const inputRef = ref<InputRefItem[]>([]); // 标签输入框Ref
const inputRef = ref<InputRefItem[]>([]); // 标签输入框 Ref
const attributeList = ref<PropertyAndValues[]>([]); // 商品属性列表
const attributeOptions = ref<MallPropertyApi.PropertyValue[]>([]); // 商品属性值下拉框
/** 解决 ref 在 v-for 中的获取问题*/
function setInputRef(el: any) {
if (el === null || el === undefined) return;
@ -59,13 +64,13 @@ function setInputRef(el: any) {
inputRef.value.push(el);
}
}
const attributeList = ref<PropertyAndValues[]>([]); // 商品属性列表
const attributeOptions = ref<MallPropertyApi.PropertyValue[]>([]); // 商品属性值下拉框
watch(
() => props.propertyList,
(data) => {
if (!data) return;
if (!data) {
return;
}
attributeList.value = data;
},
{
@ -74,12 +79,12 @@ watch(
},
);
/** 删除属性值*/
/** 删除属性值 */
function handleCloseValue(index: number, valueIndex: number) {
attributeList.value?.[index]?.values?.splice(valueIndex, 1);
}
/** 删除属性*/
/** 删除属性 */
function handleCloseProperty(index: number) {
attributeList.value?.splice(index, 1);
emit('success', attributeList.value);
@ -93,7 +98,7 @@ async function showInput(index: number) {
await getAttributeOptions(attributeList.value?.[index]?.id!);
}
// 定义 success 事件，用于操作成功后的回调
/** 定义 success 事件，用于操作成功后的回调 */
async function handleInputConfirm(index: number, propertyId: number) {
// 从数组中取最后一个输入的值（tags 模式下 inputValue 是数组）
const currentValue = inputValue.value?.[inputValue.value.length - 1]?.trim();
@ -154,6 +159,7 @@ async function getAttributeOptions(propertyId: number) {
<template>
<Col v-for="(item, index) in attributeList" :key="index">
<!-- TODO @puhui999：1）间隙可以看看；2)vue3 + element-plus 添加属性这个按钮，是和属性名在一排，感觉更好看点。 -->
<div>
<span class="mx-1">属性名：</span>
<Tag
@ -174,6 +180,7 @@ async function getAttributeOptions(propertyId: number) {
class="mx-1"
@close="handleCloseValue(index, valueIndex)"
>
<!-- TODO @puhui999：这里貌似爆红？！idea -->
{{ value.name }}
</Tag>
<Select

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

@ -35,7 +35,9 @@ const attributeOptions = ref<MallPropertyApi.Property[]>([]); // 商品属性名
watch(
() => props.propertyList,
(data) => {
if (!data) return;
if (!data) {
return;
}
attributeList.value = data as any[];
},
{
@ -44,7 +46,6 @@ watch(
},
);
// 表单配置
const formSchema: VbenFormSchema[] = [
{
fieldName: 'name',
@ -62,7 +63,6 @@ const formSchema: VbenFormSchema[] = [
showSearch: true,
filterOption: true,
placeholder: '请选择属性名称。如果不存在，可手动输入选择',
// 支持手动输入新选项
mode: 'tags',
maxTagCount: 1,
allowClear: true,
@ -71,7 +71,6 @@ const formSchema: VbenFormSchema[] = [
},
];
// 初始化表单
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
@ -85,16 +84,15 @@ const [Form, formApi] = useVbenForm({
showDefaultActions: false,
});
// 初始化弹窗
const [Modal, modalApi] = useVbenModal({
destroyOnClose: true,
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) return;
if (!valid) {
return;
}
const values = await formApi.getValues();
const name = Array.isArray(values.name) ? values.name[0] : values.name;
// 重复添加校验
for (const attrItem of attributeList.value) {
if (attrItem.name === name) {
@ -103,6 +101,8 @@ const [Modal, modalApi] = useVbenModal({
}
}
// TODO @puhui999：modalApi.lock(); 这种写法；
// 情况一：属性名已存在，则直接使用
const existProperty = attributeOptions.value.find(
(item: MallPropertyApi.Property) => item.name === name,
@ -113,6 +113,7 @@ const [Modal, modalApi] = useVbenModal({
name,
values: [],
});
// TODO @puhui999：这里要不 if else；这样 await modalApi.close(); emit('success'); 可以复用？另外，感觉甚至可以情况二：add 后，成为 existProperty，可以进一步简化？
await modalApi.close();
emit('success');
return;
@ -132,7 +133,6 @@ const [Modal, modalApi] = useVbenModal({
await modalApi.close();
emit('success');
} catch (error) {
// 发生错误时不关闭弹窗
console.error('添加属性失败:', error);
}
},
@ -140,7 +140,6 @@ const [Modal, modalApi] = useVbenModal({
if (!isOpen) {
return;
}
// 重置表单
await formApi.resetForm();
},
});

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

@ -46,16 +46,16 @@ const { isBatch, isDetail, isComponent, isActivityComponent } = props;
const formData: Ref<MallSpuApi.Spu | undefined> = ref<MallSpuApi.Spu>(); // 表单数据
const skuList = ref<MallSpuApi.Sku[]>([
{
price: 0, // 商品价格
marketPrice: 0, // 市场价
costPrice: 0, // 成本价
barCode: '', // 商品条码
picUrl: '', // 图片地址
stock: 0, // 库存
weight: 0, // 商品重量
volume: 0, // 商品体积
firstBrokeragePrice: 0, // 一级分销的佣金
secondBrokeragePrice: 0, // 二级分销的佣金
price: 0,
marketPrice: 0,
costPrice: 0,
barCode: '',
picUrl: '',
stock: 0,
weight: 0,
volume: 0,
firstBrokeragePrice: 0,
secondBrokeragePrice: 0,
},
]); // 批量添加时的临时数据
@ -91,9 +91,7 @@ function deleteSku(row: MallSpuApi.Sku) {
const tableHeaders = ref<{ label: string; prop: string }[]>([]); // 多属性表头
/**
* 保存时，每个商品规格的表单要校验下。例如说,销售金额最低是 0.01 这种。
*/
/** 保存时，每个商品规格的表单要校验下。例如说,销售金额最低是 0.01 这种 */
function validateSku() {
validateProperty();
let warningInfo = '请检查商品各行相关属性配置，';
@ -116,6 +114,7 @@ function validateSku() {
}
}
// TODO @puhui999：是不是可以通过 getNestedValue 简化？
function getValue(obj: any, arg: string): unknown {
const keys = arg.split('.');
let value: any = obj;
@ -132,19 +131,20 @@ function getValue(obj: any, arg: string): unknown {
/**
* 选择时触发
*
* @param records 传递过来的选中的 sku 是一个数组
*/
function handleSelectionChange({ records }: { records: MallSpuApi.Sku[] }) {
emit('selectionChange', records);
}
/**
* 将传进来的值赋值给 skuList
*/
/** 将传进来的值赋值给 skuList */
watch(
() => props.propFormData,
(data) => {
if (!data) return;
if (!data) {
return;
}
formData.value = data;
},
{
@ -196,9 +196,7 @@ function generateTableData(propertyList: PropertyAndValues[]) {
}
}
/**
* 生成 skus 前置校验
*/
/** 生成 skus 前置校验 */
function validateData(propertyList: PropertyAndValues[]): boolean {
const skuPropertyIds: number[] = [];
formData.value!.skus!.forEach((sku: MallSpuApi.Sku) =>
@ -302,13 +300,13 @@ function getSkuTableRef() {
return activitySkuListRef.value;
}
// 暴露出生成 sku 方法，给添加属性成功时调用
defineExpose({ generateTableData, validateSku, getSkuTableRef });
</script>
<template>
<div>
<!-- 情况一：添加/修改 -->
<!-- TODO @puhui999：有可以通过 grid 来做么？主要考虑，这样不直接使用 vxe 标签，抽象程度更高； -->
<VxeTable
v-if="!isDetail && !isActivityComponent"
:data="isBatch ? skuList : formData?.skus || []"
@ -328,7 +326,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
</template>
</VxeColumn>
<template v-if="formData?.specType && !isBatch">
<!-- 根据商品属性动态添加 -->
<!-- 根据商品属性动态添加 -->
<VxeColumn
v-for="(item, index) in tableHeaders"
:key="index"
@ -481,7 +479,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
</template>
</VxeColumn>
<template v-if="formData?.specType && !isBatch">
<!-- 根据商品属性动态添加 -->
<!-- 根据商品属性动态添加 -->
<VxeColumn
v-for="(item, index) in tableHeaders"
:key="index"
@ -565,7 +563,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
</template>
</VxeColumn>
<template v-if="formData?.specType">
<!-- 根据商品属性动态添加 -->
<!-- 根据商品属性动态添加 -->
<VxeColumn
v-for="(item, index) in tableHeaders"
:key="index"
@ -605,7 +603,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
{{ row.stock }}
</template>
</VxeColumn>
<!-- 方便扩展每个活动配置的属性不一样 -->
<!-- 方便扩展每个活动配置的属性不一样 -->
<slot name="extension"></slot>
</VxeTable>
</div>

10
apps/web-antd/src/views/mall/product/spu/form/modules/sku-table-select.vue
View File

@ -24,7 +24,8 @@ const emit = defineEmits<{
const selectedSkuId = ref<number>();
const spuId = ref<number>();
// 配置列
/** 配置列 */
// TODO @puhui999：貌似列太宽了？
const gridColumns = computed<VxeGridProps['columns']>(() => [
{
field: 'id',
@ -65,7 +66,6 @@ const gridColumns = computed<VxeGridProps['columns']>(() => [
},
]);
// 初始化表格
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: gridColumns.value,
@ -95,14 +95,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
});
// 处理选中
/** 处理选中 */
function handleSelected(row: MallSpuApi.Sku) {
emit('change', row);
modalApi.close();
selectedSkuId.value = undefined;
}
// 初始化弹窗
const [Modal, modalApi] = useVbenModal({
destroyOnClose: true,
onOpenChange: async (isOpen: boolean) => {
@ -111,8 +110,8 @@ const [Modal, modalApi] = useVbenModal({
spuId.value = undefined;
return;
}
const data = modalApi.getData<SpuData>();
// TODO @puhui999：这里要不 if return，让括号的层级简单点。
if (data?.spuId) {
spuId.value = data.spuId;
// 触发数据查询
@ -125,7 +124,6 @@ const [Modal, modalApi] = useVbenModal({
<template>
<Modal class="w-[700px]" title="选择规格">
<Grid>
<!-- 单选列 -->
<template #radio-column="{ row }">
<Input
v-model="selectedSkuId"

59
apps/web-antd/src/views/mall/product/spu/form/modules/spu-table-select.vue
View File

@ -1,5 +1,6 @@
<!-- SPU 商品选择弹窗组件 -->
<script lang="ts" setup>
// TODO @puhui999：这个是不是可以放到 components 里？，和商品发布，关系不大
import type { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface';
import type { VbenFormSchema } from '#/adapter/form';
@ -30,33 +31,15 @@ const emit = defineEmits<{
change: [spu: MallSpuApi.Spu | MallSpuApi.Spu[]];
}>();
// 单选：选中的 SPU ID
const selectedSpuId = ref<number>();
// 多选：选中状态 map
const checkedStatus = ref<Record<number, boolean>>({});
// 多选：选中的 SPU 列表
const checkedSpus = ref<MallSpuApi.Spu[]>([]);
// 多选：全选状态
const isCheckAll = ref(false);
// 多选：半选状态
const isIndeterminate = ref(false);
const selectedSpuId = ref<number>(); // 单选：选中的 SPU ID
const checkedStatus = ref<Record<number, boolean>>({}); // 多选：选中状态 map
const checkedSpus = ref<MallSpuApi.Spu[]>([]); // 多选：选中的 SPU 列表
const isCheckAll = ref(false); // 多选：全选状态
const isIndeterminate = ref(false); // 多选：半选状态
// 分类列表（扁平）
const categoryList = ref<any[]>([]);
// 分类树
const categoryTreeList = ref<any[]>([]);
const categoryList = ref<any[]>([]); // 分类列表（扁平）
const categoryTreeList = ref<any[]>([]); // 分类树
// 初始化分类数据
onMounted(async () => {
try {
categoryList.value = await getCategoryList({});
categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
} catch (error) {
console.error('加载分类数据失败:', error);
}
});
// 搜索表单配置
const formSchema = computed<VbenFormSchema[]>(() => {
return [
{
@ -97,7 +80,6 @@ const formSchema = computed<VbenFormSchema[]>(() => {
];
});
// 列配置
const gridColumns = computed<VxeGridProps['columns']>(() => {
const columns: VxeGridProps['columns'] = [];
@ -121,7 +103,7 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
});
}
// 其他列
// 其它列
columns.push(
{
field: 'id',
@ -157,7 +139,6 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
return columns;
});
// 初始化表格
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: formSchema.value,
@ -172,6 +153,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
proxyConfig: {
ajax: {
async query({ page }: any, formValues: any) {
// TODO @puhui999：这里是不是不 try catch？
try {
const params = {
pageNo: page.currentPage,
@ -182,6 +164,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
createTime: formValues.createTime || undefined,
};
// TODO @puhui999：一次性的，是不是不声明 params，直接放到 getSpuPage 里？
const data = await getSpuPage(params);
// 初始化多选状态
@ -208,14 +191,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
});
// 单选：处理选中
// TODO @puhui999：如下的选中方法，可以因为 Grid 做简化么？
/** 单选：处理选中 */
function handleSingleSelected(row: MallSpuApi.Spu) {
selectedSpuId.value = row.id;
emit('change', row);
modalApi.close();
}
// 多选：全选/全不选
/** 多选：全选/全不选 */
function handleCheckAll(e: CheckboxChangeEvent) {
const checked = e.target.checked;
isCheckAll.value = checked;
@ -228,7 +212,7 @@ function handleCheckAll(e: CheckboxChangeEvent) {
calculateIsCheckAll();
}
// 多选：选中单个
/** 多选：选中单个 */
function handleCheckOne(
checked: boolean,
spu: MallSpuApi.Spu,
@ -255,7 +239,7 @@ function handleCheckOne(
}
}
// 多选：计算全选状态
/** 多选：计算全选状态 */
function calculateIsCheckAll() {
const currentList = gridApi.grid.getData();
if (currentList.length === 0) {
@ -272,7 +256,6 @@ function calculateIsCheckAll() {
isIndeterminate.value = checkedCount > 0 && checkedCount < currentList.length;
}
// 初始化弹窗
const [Modal, modalApi] = useVbenModal({
destroyOnClose: true,
// 多选模式时显示确认按钮
@ -284,7 +267,7 @@ const [Modal, modalApi] = useVbenModal({
: undefined,
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
// 关闭时清理状态
// TODO @puhui999：是不是直接清理，不要判断 selectedSpuId.value
if (!props.multiple) {
selectedSpuId.value = undefined;
}
@ -300,7 +283,6 @@ const [Modal, modalApi] = useVbenModal({
checkedStatus.value = {};
isCheckAll.value = false;
isIndeterminate.value = false;
// 恢复已选中的数据
if (Array.isArray(data) && data.length > 0) {
checkedSpus.value = [...data];
@ -316,9 +298,16 @@ const [Modal, modalApi] = useVbenModal({
}
// 触发查询
// TODO @puhui999：貌似不用这里再查询一次，100% 会查询的，记忆中是；
await gridApi.query();
},
});
/** 初始化分类数据 */
onMounted(async () => {
categoryList.value = await getCategoryList({});
categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
});
</script>
<template>

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

@ -145,7 +145,9 @@ const [Modal, modalApi] = useVbenModal({
// "确认"按钮的回调
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) return;
if (!valid) {
return;
}
modalApi.lock();
try {

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

@ -53,7 +53,9 @@ const rewardRuleRef = ref<InstanceType<typeof RewardRule>>();
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) return;
if (!valid) {
return;
}
modalApi.lock();
try {