feat:【ele】【mall】point 代码对齐 antd

This commit is contained in:
puhui999
2025-12-20 10:59:40 +08:00
parent a7054ec09c
commit 41f0a9465d
4 changed files with 19 additions and 22 deletions

View File

@@ -9,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';
@@ -92,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',
@@ -128,7 +129,7 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
title: '创建时间',
width: 180,
align: 'center',
formatter: ({ cellValue }) => dateFormatter(cellValue),
formatter: 'formatDateTime',
},
);
return columns;

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 @puhui999getPropertyList 在 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!,

View File

@@ -1,5 +1,4 @@
<!-- 积分商城活动橱窗组件用于展示和选择积分商城活动 -->
<!-- TODO @puhui999antd 多了一个看着 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"

View File

@@ -1,5 +1,4 @@
<!-- 积分商城活动选择弹窗组件 -->
<!-- TODO @puhui999antd 多了一个看着 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;