mirror of
https://gitee.com/yudaocode/yudao-ui-admin-vben.git
synced 2025-12-30 02:22:25 +00:00
feat:【ele】【mall】point 代码对齐 antd
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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!,
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user