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

feat: 优化sku list 显示效果

Browse Source
This commit is contained in:
xingyu4j
2025-11-03 18:05:53 +08:00
parent a79483a71d
commit 34a8c44f9a
3 changed files with 53 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -128,10 +128,6 @@ const [InfoForm, infoFormApi] = useVbenForm({
const [SkuForm, skuFormApi] = useVbenForm({ const [SkuForm, skuFormApi] = useVbenForm({
commonConfig: { commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 120, labelWidth: 120,
}, },
layout: 'horizontal', layout: 'horizontal',
@@ -364,6 +360,7 @@ onMounted(async () => {
<template #singleSkuList> <template #singleSkuList>
<SkuList <SkuList
ref="skuListRef" ref="skuListRef"
class="w-full"
:is-detail="isDetail" :is-detail="isDetail"
:prop-form-data="formData" :prop-form-data="formData"
:property-list="propertyList" :property-list="propertyList"

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

@@ -289,17 +289,22 @@ defineExpose({
</script> </script>
<template> <template>
<div> <div class="w-full">
<!-- 情况一：添加/修改 --> <!-- 情况一：添加/修改 -->
<VxeTable <VxeTable
v-if="!isDetail && !isActivityComponent" v-if="!isDetail && !isActivityComponent"
:data="isBatch ? skuList : formData?.skus || []" :data="isBatch ? skuList : formData?.skus || []"
border border
max-height="500" max-height="500"
:column-config="{
resizable: true,
}"
:resizable-config="{
dragMode: 'fixed',
}"
size="small" size="small"
class="w-full"
> >
<VxeColumn align="center" title="图片" min-width="120"> <VxeColumn align="center" title="图片" width="120" fixed="left">
<template #default="{ row }"> <template #default="{ row }">
<ImageUpload <ImageUpload
v-model:value="row.picUrl" v-model:value="row.picUrl"
@@ -316,7 +321,8 @@ defineExpose({
:key="index" :key="index"
:title="item.label" :title="item.label"
align="center" align="center"
min-width="120" fixed="left"
min-width="80"
> >
<template #default="{ row }"> <template #default="{ row }">
<span class="font-bold text-[#40aaff]"> <span class="font-bold text-[#40aaff]">
@@ -325,12 +331,12 @@ defineExpose({
</template> </template>
</VxeColumn> </VxeColumn>
</template> </template>
<VxeColumn align="center" title="商品条码" min-width="168"> <VxeColumn align="center" title="商品条码" width="168">
<template #default="{ row }"> <template #default="{ row }">
<Input v-model:value="row.barCode" class="w-full" /> <Input v-model:value="row.barCode" class="w-full" />
</template> </template>
</VxeColumn> </VxeColumn>
<VxeColumn align="center" title="销售价" min-width="168"> <VxeColumn align="center" title="销售价" width="168">
<template #default="{ row }"> <template #default="{ row }">
<InputNumber <InputNumber
v-model:value="row.price" v-model:value="row.price"
@@ -341,7 +347,7 @@ defineExpose({
/> />
</template> </template>
</VxeColumn> </VxeColumn>
<VxeColumn align="center" title="市场价" min-width="168"> <VxeColumn align="center" title="市场价" width="168">
<template #default="{ row }"> <template #default="{ row }">
<InputNumber <InputNumber
v-model:value="row.marketPrice" v-model:value="row.marketPrice"
@@ -352,7 +358,7 @@ defineExpose({
/> />
</template> </template>
</VxeColumn> </VxeColumn>
<VxeColumn align="center" title="成本价" min-width="168"> <VxeColumn align="center" title="成本价" width="168">
<template #default="{ row }"> <template #default="{ row }">
<InputNumber <InputNumber
v-model:value="row.costPrice" v-model:value="row.costPrice"
@@ -363,12 +369,12 @@ defineExpose({
/> />
</template> </template>
</VxeColumn> </VxeColumn>
<VxeColumn align="center" title="库存" min-width="168"> <VxeColumn align="center" title="库存" width="168">
<template #default="{ row }"> <template #default="{ row }">
<InputNumber v-model:value="row.stock" :min="0" class="w-full" /> <InputNumber v-model:value="row.stock" :min="0" class="w-full" />
</template> </template>
</VxeColumn> </VxeColumn>
<VxeColumn align="center" title="重量(kg)" min-width="168"> <VxeColumn align="center" title="重量(kg)" width="168">
<template #default="{ row }"> <template #default="{ row }">
<InputNumber <InputNumber
v-model:value="row.weight" v-model:value="row.weight"
@@ -379,7 +385,7 @@ defineExpose({
/> />
</template> </template>
</VxeColumn> </VxeColumn>
<VxeColumn align="center" title="体积(m^3)" min-width="168"> <VxeColumn align="center" title="体积(m^3)" width="168">
<template #default="{ row }"> <template #default="{ row }">
<InputNumber <InputNumber
v-model:value="row.volume" v-model:value="row.volume"
@@ -391,7 +397,7 @@ defineExpose({
</template> </template>
</VxeColumn> </VxeColumn>
<template v-if="formData?.subCommissionType"> <template v-if="formData?.subCommissionType">
<VxeColumn align="center" title="一级返佣(元)" min-width="168"> <VxeColumn align="center" title="一级返佣(元)" width="168">
<template #default="{ row }"> <template #default="{ row }">
<InputNumber <InputNumber
v-model:value="row.firstBrokeragePrice" v-model:value="row.firstBrokeragePrice"
@@ -402,7 +408,7 @@ defineExpose({
/> />
</template> </template>
</VxeColumn> </VxeColumn>
<VxeColumn align="center" title="二级返佣(元)" min-width="168"> <VxeColumn align="center" title="二级返佣(元)" width="168">
<template #default="{ row }"> <template #default="{ row }">
<InputNumber <InputNumber
v-model:value="row.secondBrokeragePrice" v-model:value="row.secondBrokeragePrice"
@@ -446,13 +452,18 @@ defineExpose({
border border
max-height="500" max-height="500"
size="small" size="small"
class="w-full" :column-config="{
resizable: true,
}"
:resizable-config="{
dragMode: 'fixed',
}"
:checkbox-config="isComponent ? { reserve: true } : undefined" :checkbox-config="isComponent ? { reserve: true } : undefined"
@checkbox-change="handleSelectionChange" @checkbox-change="handleSelectionChange"
@checkbox-all="handleSelectionChange" @checkbox-all="handleSelectionChange"
> >
<VxeColumn v-if="isComponent" type="checkbox" width="45" /> <VxeColumn v-if="isComponent" type="checkbox" width="45" />
<VxeColumn align="center" title="图片" min-width="120"> <VxeColumn align="center" title="图片" max-width="140" fixed="left">
<template #default="{ row }"> <template #default="{ row }">
<Image <Image
v-if="row.picUrl" v-if="row.picUrl"
@@ -469,7 +480,8 @@ defineExpose({
:key="index" :key="index"
:title="item.label" :title="item.label"
align="center" align="center"
min-width="80" max-width="80"
fixed="left"
> >
<template #default="{ row }"> <template #default="{ row }">
<span class="font-bold text-[#40aaff]"> <span class="font-bold text-[#40aaff]">
@@ -478,48 +490,48 @@ defineExpose({
</template> </template>
</VxeColumn> </VxeColumn>
</template> </template>
<VxeColumn align="center" title="商品条码" min-width="100"> <VxeColumn align="center" title="商品条码" width="100">
<template #default="{ row }"> <template #default="{ row }">
{{ row.barCode }} {{ row.barCode }}
</template> </template>
</VxeColumn> </VxeColumn>
<VxeColumn align="center" title="销售价(元)" min-width="80"> <VxeColumn align="center" title="销售价(元)" width="80">
<template #default="{ row }"> <template #default="{ row }">
{{ row.price }} {{ row.price }}
</template> </template>
</VxeColumn> </VxeColumn>
<VxeColumn align="center" title="市场价(元)" min-width="80"> <VxeColumn align="center" title="市场价(元)" width="80">
<template #default="{ row }"> <template #default="{ row }">
{{ row.marketPrice }} {{ row.marketPrice }}
</template> </template>
</VxeColumn> </VxeColumn>
<VxeColumn align="center" title="成本价(元)" min-width="80"> <VxeColumn align="center" title="成本价(元)" width="80">
<template #default="{ row }"> <template #default="{ row }">
{{ row.costPrice }} {{ row.costPrice }}
</template> </template>
</VxeColumn> </VxeColumn>
<VxeColumn align="center" title="库存" min-width="80"> <VxeColumn align="center" title="库存" width="80">
<template #default="{ row }"> <template #default="{ row }">
{{ row.stock }} {{ row.stock }}
</template> </template>
</VxeColumn> </VxeColumn>
<VxeColumn align="center" title="重量(kg)" min-width="80"> <VxeColumn align="center" title="重量(kg)" width="80">
<template #default="{ row }"> <template #default="{ row }">
{{ row.weight }} {{ row.weight }}
</template> </template>
</VxeColumn> </VxeColumn>
<VxeColumn align="center" title="体积(m^3)" min-width="80"> <VxeColumn align="center" title="体积(m^3)" width="80">
<template #default="{ row }"> <template #default="{ row }">
{{ row.volume }} {{ row.volume }}
</template> </template>
</VxeColumn> </VxeColumn>
<template v-if="formData?.subCommissionType"> <template v-if="formData?.subCommissionType">
<VxeColumn align="center" title="一级返佣(元)" min-width="80"> <VxeColumn align="center" title="一级返佣(元)" width="80">
<template #default="{ row }"> <template #default="{ row }">
{{ row.firstBrokeragePrice }} {{ row.firstBrokeragePrice }}
</template> </template>
</VxeColumn> </VxeColumn>
<VxeColumn align="center" title="二级返佣(元)" min-width="80"> <VxeColumn align="center" title="二级返佣(元)" width="80">
<template #default="{ row }"> <template #default="{ row }">
{{ row.secondBrokeragePrice }} {{ row.secondBrokeragePrice }}
</template> </template>
@@ -534,10 +546,15 @@ defineExpose({
border border
max-height="500" max-height="500"
size="small" size="small"
class="w-full" :column-config="{
resizable: true,
}"
:resizable-config="{
dragMode: 'fixed',
}"
> >
<VxeColumn v-if="isComponent" type="checkbox" width="45" /> <VxeColumn v-if="isComponent" type="checkbox" width="45" fixed="left" />
<VxeColumn align="center" title="图片" min-width="120"> <VxeColumn align="center" title="图片" max-width="140" fixed="left">
<template #default="{ row }"> <template #default="{ row }">
<Image <Image
:src="row.picUrl" :src="row.picUrl"
@@ -553,7 +570,8 @@ defineExpose({
:key="index" :key="index"
:title="item.label" :title="item.label"
align="center" align="center"
min-width="80" width="80"
fixed="left"
> >
<template #default="{ row }"> <template #default="{ row }">
<span class="font-bold text-[#40aaff]"> <span class="font-bold text-[#40aaff]">
@@ -562,27 +580,27 @@ defineExpose({
</template> </template>
</VxeColumn> </VxeColumn>
</template> </template>
<VxeColumn align="center" title="商品条码" min-width="100"> <VxeColumn align="center" title="商品条码" width="100">
<template #default="{ row }"> <template #default="{ row }">
{{ row.barCode }} {{ row.barCode }}
</template> </template>
</VxeColumn> </VxeColumn>
<VxeColumn align="center" title="销售价(元)" min-width="80"> <VxeColumn align="center" title="销售价(元)" width="80">
<template #default="{ row }"> <template #default="{ row }">
{{ formatToFraction(row.price) }} {{ formatToFraction(row.price) }}
</template> </template>
</VxeColumn> </VxeColumn>
<VxeColumn align="center" title="市场价(元)" min-width="80"> <VxeColumn align="center" title="市场价(元)" width="80">
<template #default="{ row }"> <template #default="{ row }">
{{ formatToFraction(row.marketPrice) }} {{ formatToFraction(row.marketPrice) }}
</template> </template>
</VxeColumn> </VxeColumn>
<VxeColumn align="center" title="成本价(元)" min-width="80"> <VxeColumn align="center" title="成本价(元)" width="80">
<template #default="{ row }"> <template #default="{ row }">
{{ formatToFraction(row.costPrice) }} {{ formatToFraction(row.costPrice) }}
</template> </template>
</VxeColumn> </VxeColumn>
<VxeColumn align="center" title="库存" min-width="80"> <VxeColumn align="center" title="库存" width="80">
<template #default="{ row }"> <template #default="{ row }">
{{ row.stock }} {{ row.stock }}
</template> </template>