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

feat：【antd】【mall】diy-editor 代码风格统一 & 逐个测试 50%

Browse Source
This commit is contained in:
YunaiV
2025-11-11 19:34:42 +08:00
parent 7b0bb55df0
commit 4488425cbf
17 changed files with 696 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/src/views/mall/promotion/combination/components/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default as CombinationShowcase } from './showcase.vue';

146
apps/web-antd/src/views/mall/promotion/combination/components/showcase.vue Normal file
View File

@@ -0,0 +1,146 @@
<!-- 拼团活动橱窗组件：用于展示和选择拼团活动 -->
<script lang="ts" setup>
import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
import { computed, ref, watch } from 'vue';
import { CloseCircleFilled, PlusOutlined } from '@vben/icons';
import { Image, Tooltip } from 'ant-design-vue';
import { getCombinationActivityListByIds } from '#/api/mall/promotion/combination/combinationActivity';
import CombinationTableSelect from './table-select.vue';
interface CombinationShowcaseProps {
modelValue?: number | number[];
limit?: number;
disabled?: boolean;
}
const props = withDefaults(defineProps<CombinationShowcaseProps>(), {
modelValue: undefined,
limit: Number.MAX_VALUE,
disabled: false,
});
const emit = defineEmits(['update:modelValue', 'change']);
const activityList = ref<MallCombinationActivityApi.CombinationActivity[]>([]); // 已选择的活动列表
const combinationTableSelectRef =
ref<InstanceType<typeof CombinationTableSelect>>(); // 活动选择表格组件引用
const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
/** 计算是否可以添加 */
const canAdd = computed(() => {
if (props.disabled) {
return false;
}
if (!props.limit) {
return true;
}
return activityList.value.length < props.limit;
});
/** 监听 modelValue 变化，加载活动详情 */
watch(
() => props.modelValue,
async (newValue) => {
// eslint-disable-next-line unicorn/no-nested-ternary
const ids = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
if (ids.length === 0) {
activityList.value = [];
return;
}
// 只有活动发生变化时才重新查询
if (
activityList.value.length === 0 ||
activityList.value.some((activity) => !ids.includes(activity.id!))
) {
activityList.value = await getCombinationActivityListByIds(ids);
}
},
{ immediate: true },
);
/** 打开活动选择对话框 */
function handleOpenActivitySelect() {
combinationTableSelectRef.value?.open(activityList.value);
}
/** 选择活动后触发 */
function handleActivitySelected(
activities:
| MallCombinationActivityApi.CombinationActivity
| MallCombinationActivityApi.CombinationActivity[],
) {
activityList.value = Array.isArray(activities) ? activities : [activities];
emitActivityChange();
}
/** 删除活动 */
function handleRemoveActivity(index: number) {
activityList.value.splice(index, 1);
emitActivityChange();
}
/** 触发变更事件 */
function emitActivityChange() {
if (props.limit === 1) {
const activity =
activityList.value.length > 0 ? activityList.value[0] : null;
emit('update:modelValue', activity?.id || 0);
emit('change', activity);
} else {
emit(
'update:modelValue',
activityList.value.map((activity) => activity.id!),
);
emit('change', activityList.value);
}
}
</script>
<template>
<div class="flex flex-wrap items-center gap-2">
<!-- 已选活动列表 -->
<div
v-for="(activity, index) in activityList"
:key="activity.id"
class="group relative h-[60px] w-[60px] overflow-hidden rounded-lg"
>
<Tooltip :title="activity.name">
<div class="relative h-full w-full">
<Image
:src="activity.picUrl"
class="h-full w-full rounded-lg object-cover"
/>
<!-- 删除按钮 -->
<CloseCircleFilled
v-if="!disabled"
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"
@click="handleRemoveActivity(index)"
/>
</div>
</Tooltip>
</div>
<!-- 添加活动按钮 -->
<Tooltip v-if="canAdd" title="选择活动">
<div
class="hover:border-primary hover:bg-primary/5 flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors"
@click="handleOpenActivitySelect"
>
<PlusOutlined class="text-xl text-gray-400" />
</div>
</Tooltip>
</div>
<!-- 活动选择对话框 -->
<CombinationTableSelect
ref="combinationTableSelectRef"
:multiple="isMultiple"
@change="handleActivitySelected"
/>
</template>

285
apps/web-antd/src/views/mall/promotion/combination/components/table-select.vue Normal file
View File

@@ -0,0 +1,285 @@
<!-- 拼团活动选择弹窗组件 -->
<script lang="ts" setup>
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { MallCategoryApi } from '#/api/mall/product/category';
import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
import { computed, onMounted, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { fenToYuan, formatDate, handleTree } from '@vben/utils';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getCategoryList } from '#/api/mall/product/category';
import { getCombinationActivityPage } from '#/api/mall/promotion/combination/combinationActivity';
interface CombinationTableSelectProps {
multiple?: boolean; // 是否多选：true - checkbox；false - radio
}
const props = withDefaults(defineProps<CombinationTableSelectProps>(), {
multiple: false,
});
const emit = defineEmits<{
change: [
activity:
| MallCombinationActivityApi.CombinationActivity
| MallCombinationActivityApi.CombinationActivity[],
];
}>();
const categoryList = ref<MallCategoryApi.Category[]>([]); // 分类列表
const categoryTreeList = ref<any[]>([]); // 分类树
/** 单选：处理选中变化 */
function handleRadioChange() {
const selectedRow =
gridApi.grid.getRadioRecord() as MallCombinationActivityApi.CombinationActivity;
if (selectedRow) {
emit('change', selectedRow);
modalApi.close();
}
}
/**
* 格式化拼团价格
* @param products
*/
const formatCombinationPrice = (
products: MallCombinationActivityApi.CombinationProduct[],
) => {
if (!products || products.length === 0) return '-';
const combinationPrice = Math.min(
...products.map((item) => item.combinationPrice || 0),
);
return `￥${fenToYuan(combinationPrice)}`;
};
/** 搜索表单 Schema */
const formSchema = computed<VbenFormSchema[]>(() => [
{
fieldName: 'name',
label: '活动名称',
component: 'Input',
componentProps: {
placeholder: '请输入活动名称',
clearable: true,
},
},
{
fieldName: 'status',
label: '活动状态',
component: 'Select',
componentProps: {
placeholder: '请选择活动状态',
clearable: true,
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
},
]);
/** 表格列配置 */
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',
title: '活动编号',
minWidth: 80,
},
{
field: 'name',
title: '活动名称',
minWidth: 140,
},
{
field: 'activityTime',
title: '活动时间',
minWidth: 210,
formatter: ({ row }) => {
return `${formatDate(row.startTime, 'YYYY-MM-DD')} ~ ${formatDate(row.endTime, 'YYYY-MM-DD')}`;
},
},
{
field: 'picUrl',
title: '商品图片',
width: 100,
cellRender: {
name: 'CellImage',
},
},
{
field: 'spuName',
title: '商品标题',
minWidth: 300,
},
{
field: 'marketPrice',
title: '原价',
minWidth: 100,
formatter: ({ cellValue }) => {
return cellValue ? `￥${fenToYuan(cellValue)}` : '-';
},
},
{
field: 'products',
title: '拼团价',
minWidth: 100,
formatter: ({ cellValue }) => {
return formatCombinationPrice(cellValue);
},
},
{
field: 'groupCount',
title: '开团组数',
minWidth: 100,
},
{
field: 'groupSuccessCount',
title: '成团组数',
minWidth: 100,
},
{
field: 'recordCount',
title: '购买次数',
minWidth: 100,
},
{
field: 'status',
title: '活动状态',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
},
},
{
field: 'createTime',
title: '创建时间',
width: 180,
formatter: 'formatDateTime',
},
);
return columns;
});
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: formSchema.value,
layout: 'horizontal',
collapsed: false,
},
gridOptions: {
columns: gridColumns.value,
height: 500,
border: true,
checkboxConfig: {
reserve: true,
},
radioConfig: {
reserve: true,
},
rowConfig: {
keyField: 'id',
isHover: true,
},
proxyConfig: {
ajax: {
async query({ page }: any, formValues: any) {
return await getCombinationActivityPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
},
gridEvents: {
radioChange: handleRadioChange,
},
});
const [Modal, modalApi] = useVbenModal({
destroyOnClose: true,
showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
onConfirm: () => {
const selectedRows =
gridApi.grid.getCheckboxRecords() as MallCombinationActivityApi.CombinationActivity[];
emit('change', selectedRows);
modalApi.close();
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
gridApi.grid.clearCheckboxRow();
gridApi.grid.clearRadioRow();
return;
}
// 1. 先查询数据
await gridApi.query();
// 2. 设置已选中行
const data = modalApi.getData<
| MallCombinationActivityApi.CombinationActivity
| MallCombinationActivityApi.CombinationActivity[]
>();
if (props.multiple && Array.isArray(data) && data.length > 0) {
setTimeout(() => {
const tableData = gridApi.grid.getTableData().fullData;
data.forEach((activity) => {
const row = tableData.find(
(item: MallCombinationActivityApi.CombinationActivity) =>
item.id === activity.id,
);
if (row) {
gridApi.grid.setCheckboxRow(row, true);
}
});
}, 300);
} else if (!props.multiple && data && !Array.isArray(data)) {
setTimeout(() => {
const tableData = gridApi.grid.getTableData().fullData;
const row = tableData.find(
(item: MallCombinationActivityApi.CombinationActivity) =>
item.id === data.id,
);
if (row) {
gridApi.grid.setRadioRow(row);
}
}, 300);
}
},
});
/** 对外暴露的方法 */
defineExpose({
open: (
data?:
| MallCombinationActivityApi.CombinationActivity
| MallCombinationActivityApi.CombinationActivity[],
) => {
modalApi.setData(data).open();
},
});
/** 初始化分类数据 */
onMounted(async () => {
categoryList.value = await getCategoryList({});
categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
});
</script>
<template>
<Modal title="选择活动" class="w-[950px]">
<Grid />
</Modal>
</template>

29
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
View File

@@ -1,23 +1,14 @@
<script setup lang="ts">
import type { NoticeBarProperty } from './config';
import { ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { Divider, Image } from 'ant-design-vue';
import { Carousel, Divider, Image } from 'ant-design-vue';
/** 公告栏 */
defineOptions({ name: 'NoticeBar' });
const props = defineProps<{ property: NoticeBarProperty }>();
// 自动轮播
const activeIndex = ref(0);
setInterval(() => {
const contents = props.property.contents || [];
activeIndex.value = (activeIndex.value + 1) % (contents.length || 1);
}, 3000);
defineProps<{ property: NoticeBarProperty }>();
</script>
<template>
@@ -30,11 +21,17 @@ setInterval(() => {
>
<Image :src="property.iconUrl" class="h-[18px]" :preview="false" />
<Divider type="vertical" />
<div class="h-6 flex-1 truncate pr-2 leading-6">
{{ property.contents?.[activeIndex]?.text }}
</div>
<Carousel
:autoplay="true"
:dots="false"
vertical
class="flex-1 pr-2"
style="height: 24px"
>
<div v-for="(item, index) in property.contents" :key="index">
<div class="h-6 truncate leading-6">{{ item.text }}</div>
</div>
</Carousel>
<IconifyIcon icon="lucide:arrow-right" />
</div>
</template>
<style scoped lang="scss"></style>

15
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
View File

@@ -7,25 +7,18 @@ import { Form, FormItem, Textarea } from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { ColorInput } from '#/views/mall/promotion/components';
// 导航栏属性面板
/** 导航栏属性面板 */
defineOptions({ name: 'PageConfigProperty' });
const props = defineProps<{ modelValue: PageConfigProperty }>();
const emit = defineEmits(['update:modelValue']);
// 表单校验
const rules = {};
const formData = useVModel(props, 'modelValue', emit);
</script>
<template>
<Form
:model="formData"
:rules="rules"
:label-col="{ span: 6 }"
:wrapper-col="{ span: 18 }"
>
<Form :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
<FormItem label="页面描述" name="description">
<Textarea
v-model:value="formData!.description"
@@ -47,5 +40,3 @@ const formData = useVModel(props, 'modelValue', emit);
</FormItem>
</Form>
</template>
<style scoped lang="scss"></style>

8
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
View File

@@ -9,10 +9,10 @@ import { getArticle } from '#/api/mall/promotion/article';
/** 营销文章 */
defineOptions({ name: 'PromotionArticle' });
// 定义属性
const props = defineProps<{ property: PromotionArticleProperty }>();
// 商品列表
const article = ref<MallArticleApi.Article>();
const props = defineProps<{ property: PromotionArticleProperty }>(); // 定义属性
const article = ref<MallArticleApi.Article>(); // 商品列表
watch(
() => props.property.id,

14
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
View File

@@ -12,18 +12,18 @@ import { getArticlePage } from '#/api/mall/promotion/article';
import ComponentContainerProperty from '../../component-container-property.vue';
// 营销文章属性面板
/** 营销文章属性面板 */
defineOptions({ name: 'PromotionArticleProperty' });
const props = defineProps<{ modelValue: PromotionArticleProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
// 文章列表
const articles = ref<MallArticleApi.Article[]>([]);
// 加载中
const loading = ref(false);
// 查询文章列表
const articles = ref<MallArticleApi.Article[]>([]); // 文章列表
const loading = ref(false); // 加载中
/** 查询文章列表 */
const queryArticleList = async (title?: string) => {
loading.value = true;
const { list } = await getArticlePage({
@@ -35,7 +35,7 @@ const queryArticleList = async (title?: string) => {
loading.value = false;
};
// 初始化
/** 初始化 */
onMounted(() => {
queryArticleList();
});

39
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
View File

@@ -15,10 +15,10 @@ import { getCombinationActivityListByIds } from '#/api/mall/promotion/combinatio
/** 拼团卡片 */
defineOptions({ name: 'PromotionCombination' });
// 定义属性
const props = defineProps<{ property: PromotionCombinationProperty }>();
// 商品列表
const spuList = ref<MallSpuApi.Spu[]>([]);
const spuList = ref<MallSpuApi.Spu[]>([]); // 商品列表
const spuIdList = ref<number[]>([]);
const combinationActivityList = ref<
MallCombinationActivityApi.CombinationActivity[]
@@ -30,7 +30,7 @@ watch(
try {
// 新添加的拼团组件，是没有活动ID的
const activityIds = props.property.activityIds;
// 检查活动ID的有效性
// 检查活动 ID 的有效性
if (Array.isArray(activityIds) && activityIds.length > 0) {
// 获取拼团活动详情列表
combinationActivityList.value =
@@ -68,32 +68,25 @@ watch(
},
);
/**
* 计算商品的间距
* @param index 商品索引
*/
const calculateSpace = (index: number) => {
// 商品的列数
const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
// 第一列没有左边距
const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
// 第一行没有上边距
const marginTop = index < columns ? '0' : `${props.property.space}px`;
/** 计算商品的间距 */
function calculateSpace(index: number) {
const columns = props.property.layoutType === 'twoCol' ? 2 : 1; // 商品的列数
const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`; // 第一列没有左边距
const marginTop = index < columns ? '0' : `${props.property.space}px`; // 第一行没有上边距
return { marginLeft, marginTop };
};
}
// 容器
const containerRef = ref();
// 计算商品的宽度
const calculateWidth = () => {
const containerRef = ref(); // 容器
/** 计算商品的宽度 */
function calculateWidth() {
let width = '100%';
// 双列时每列的宽度为：（总宽度 - 间距）/ 2
if (props.property.layoutType === 'twoCol') {
// 双列时每列的宽度为：（总宽度 - 间距）/ 2
width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
}
return { width };
};
}
</script>
<template>
<div

26
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
View File

@@ -1,11 +1,6 @@
<script setup lang="ts">
import type { PromotionCombinationProperty } from './config';
import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
import { onMounted, ref } from 'vue';
import { CommonStatusEnum } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
@@ -22,27 +17,20 @@ import {
Tooltip,
} from 'ant-design-vue';
import { getCombinationActivityPage } from '#/api/mall/promotion/combination/combinationActivity';
import UploadImg from '#/components/upload/image-upload.vue';
// import CombinationShowcase from '#/views/mall/promotion/combination/components/combination-showcase.vue';
import { CombinationShowcase } from '#/views/mall/promotion/combination/components';
import { ColorInput } from '#/views/mall/promotion/components';
// 拼团属性面板
import ComponentContainerProperty from '../../component-container-property.vue';
/** 拼团属性面板 */
defineOptions({ name: 'PromotionCombinationProperty' });
const props = defineProps<{ modelValue: PromotionCombinationProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
// 活动列表
const activityList = ref<MallCombinationActivityApi.CombinationActivity[]>([]);
onMounted(async () => {
const { list } = await getCombinationActivityPage({
pageNo: 1,
pageSize: 10,
status: CommonStatusEnum.ENABLE,
});
activityList.value = list;
});
</script>
<template>
@@ -184,5 +172,3 @@ onMounted(async () => {
</Form>
</ComponentContainerProperty>
</template>
<style scoped lang="scss"></style>

39
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
View File

@@ -14,10 +14,10 @@ import { getPointActivityListByIds } from '#/api/mall/promotion/point';
/** 积分商城卡片 */
defineOptions({ name: 'PromotionPoint' });
// 定义属性
const props = defineProps<{ property: PromotionPointProperty }>();
// 商品列表
const spuList = ref<MallPointActivityApi.SpuExtensionWithPoint[]>([]);
const spuList = ref<MallPointActivityApi.SpuExtensionWithPoint[]>([]); // 商品列表
const spuIdList = ref<number[]>([]);
const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]);
@@ -27,7 +27,7 @@ watch(
try {
// 新添加的积分商城组件，是没有活动ID的
const activityIds = props.property.activityIds;
// 检查活动ID的有效性
// 检查活动 ID 的有效性
if (Array.isArray(activityIds) && activityIds.length > 0) {
// 获取积分商城活动详情列表
pointActivityList.value = await getPointActivityListByIds(activityIds);
@@ -65,32 +65,25 @@ watch(
},
);
/**
* 计算商品的间距
* @param index 商品索引
*/
const calculateSpace = (index: number) => {
// 商品的列数
const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
// 第一列没有左边距
const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
// 第一行没有上边距
const marginTop = index < columns ? '0' : `${props.property.space}px`;
/** 计算商品的间距 */
function calculateSpace(index: number) {
const columns = props.property.layoutType === 'twoCol' ? 2 : 1; // 商品的列数
const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`; // 第一列没有左边距
const marginTop = index < columns ? '0' : `${props.property.space}px`; // 第一行没有上边距
return { marginLeft, marginTop };
};
}
// 容器
const containerRef = ref();
// 计算商品的宽度
const calculateWidth = () => {
const containerRef = ref(); // 容器
/** 计算商品的宽度 */
function calculateWidth() {
let width = '100%';
// 双列时每列的宽度为：（总宽度 - 间距）/ 2
if (props.property.layoutType === 'twoCol') {
// 双列时每列的宽度为：（总宽度 - 间距）/ 2
width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
}
return { width };
};
}
</script>
<template>
<div

165
apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
View File

@@ -1,7 +1,5 @@
<!-- eslint-disable unicorn/no-nested-ternary -->
<!-- 积分活动橱窗组件 - 用于装修时展示和选择积分活动 -->
<!-- 积分商城活动橱窗组件：用于展示和选择积分商城活动 -->
<script lang="ts" setup>
// TODO @puhui999：看看是不是整体优化下代码风格，参考别的模块
import type { MallPointActivityApi } from '#/api/mall/promotion/point';
import { computed, ref, watch } from 'vue';
@@ -15,128 +13,113 @@ import { getPointActivityListByIds } from '#/api/mall/promotion/point';
import PointTableSelect from './point-table-select.vue';
interface PointShowcaseProps {
modelValue: number | number[];
modelValue?: number | number[];
limit?: number;
disabled?: boolean;
}
const props = withDefaults(defineProps<PointShowcaseProps>(), {
modelValue: undefined,
limit: Number.MAX_VALUE,
disabled: false,
});
const emit = defineEmits<{
change: [value: any];
'update:modelValue': [value: number | number[]];
}>();
const emit = defineEmits(['update:modelValue', 'change']);
// 积分活动列表
const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]);
const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]); // 已选择的活动列表
const pointTableSelectRef = ref<InstanceType<typeof PointTableSelect>>(); // 活动选择表格组件引用
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 pointActivityList.value.length < props.limit;
});
// 积分活动选择器引用
const pointActivityTableSelectRef = ref();
/**
* 打开积分活动选择器
*/
function openPointActivityTableSelect() {
pointActivityTableSelectRef.value.open(pointActivityList.value);
}
/**
* 选择活动后触发
*/
function handleActivitySelected(
activityList:
| MallPointActivityApi.PointActivity
| MallPointActivityApi.PointActivity[],
) {
pointActivityList.value = Array.isArray(activityList)
? activityList
: [activityList];
emitActivityChange();
}
/**
* 删除活动
*/
function handleRemoveActivity(index: number) {
pointActivityList.value.splice(index, 1);
emitActivityChange();
}
/**
* 发送变更事件
*/
function emitActivityChange() {
if (props.limit === 1) {
const pointActivity =
pointActivityList.value.length > 0 ? pointActivityList.value[0] : null;
emit('update:modelValue', pointActivity?.id || 0);
emit('change', pointActivity);
} else {
emit(
'update:modelValue',
pointActivityList.value.map((pointActivity) => pointActivity.id),
);
emit('change', pointActivityList.value);
}
}
// 监听 modelValue 变化
/** 监听 modelValue 变化，加载活动详情 */
watch(
() => props.modelValue,
async () => {
const ids = Array.isArray(props.modelValue)
? props.modelValue
: props.modelValue
? [props.modelValue]
: [];
// 不需要返显
async (newValue) => {
// eslint-disable-next-line unicorn/no-nested-ternary
const ids = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
if (ids.length === 0) {
pointActivityList.value = [];
return;
}
// 只有活动发生变化之后，才会查询活动
// 只有活动发生变化时才重新查询
if (
pointActivityList.value.length === 0 ||
pointActivityList.value.some(
(pointActivity) => !ids.includes(pointActivity.id!),
)
pointActivityList.value.some((activity) => !ids.includes(activity.id!))
) {
pointActivityList.value = await getPointActivityListByIds(ids);
}
},
{ immediate: true },
);
/** 打开活动选择对话框 */
function handleOpenActivitySelect() {
pointTableSelectRef.value?.open(pointActivityList.value);
}
/** 选择活动后触发 */
function handleActivitySelected(
activities:
| MallPointActivityApi.PointActivity
| MallPointActivityApi.PointActivity[],
) {
pointActivityList.value = Array.isArray(activities)
? activities
: [activities];
emitActivityChange();
}
/** 删除活动 */
function handleRemoveActivity(index: number) {
pointActivityList.value.splice(index, 1);
emitActivityChange();
}
/** 触发变更事件 */
function emitActivityChange() {
if (props.limit === 1) {
const activity =
pointActivityList.value.length > 0 ? pointActivityList.value[0] : null;
emit('update:modelValue', activity?.id || 0);
emit('change', activity);
} else {
emit(
'update:modelValue',
pointActivityList.value.map((activity) => activity.id!),
);
emit('change', pointActivityList.value);
}
}
</script>
<template>
<div class="flex flex-wrap items-center gap-2">
<!-- 活动图片列表 -->
<!-- 已选活动列表 -->
<div
v-for="(pointActivity, index) in pointActivityList"
:key="pointActivity.id"
class="relative flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300"
v-for="(activity, index) in pointActivityList"
:key="activity.id"
class="relative h-[60px] w-[60px] overflow-hidden rounded-lg border border-dashed border-gray-300"
>
<Tooltip :title="pointActivity.spuName">
<Tooltip :title="activity.spuName">
<div class="relative h-full w-full">
<Image
:preview="true"
:src="pointActivity.picUrl"
:src="activity.picUrl"
class="h-full w-full rounded-lg object-cover"
/>
<!-- 删除按钮 -->
<IconifyIcon
v-show="!disabled"
v-if="!disabled"
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)"
@@ -145,21 +128,21 @@ watch(
</Tooltip>
</div>
<!-- 添加按钮 -->
<!-- 添加活动按钮 -->
<Tooltip v-if="canAdd" title="选择活动">
<div
class="flex h-14 w-14 cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
@click="openPointActivityTableSelect"
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="lucide:plus" class="text-lg text-gray-400" />
<IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
</div>
</Tooltip>
</div>
<!-- 积分活动选择对话框 -->
<!-- 活动选择对话框 -->
<PointTableSelect
ref="pointActivityTableSelectRef"
:multiple="limit !== 1"
ref="pointTableSelectRef"
:multiple="isMultiple"
@change="handleActivitySelected"
/>
</template>

346
apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue
View File

@@ -1,23 +1,21 @@
<!-- 积分活动表格选择器 -->
<!-- 积分商城活动选择弹窗组件 -->
<script lang="ts" setup>
// TODO @puhui999：看看是不是整体优化下代码风格，参考别的模块
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { MallPointActivityApi } from '#/api/mall/promotion/point';
import { computed, ref } from 'vue';
import { computed } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { Checkbox, Radio } from 'ant-design-vue';
import { dateFormatter, fenToYuanFormat } from '@vben/utils';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getPointActivityPage } from '#/api/mall/promotion/point';
interface PointTableSelectProps {
multiple?: boolean;
multiple?: boolean; // 是否单选：true - checkbox；false - radio
}
const props = withDefaults(defineProps<PointTableSelectProps>(), {
@@ -26,90 +24,75 @@ const props = withDefaults(defineProps<PointTableSelectProps>(), {
const emit = defineEmits<{
change: [
value:
activity:
| MallPointActivityApi.PointActivity
| MallPointActivityApi.PointActivity[],
];
}>();
// 单选：选中的活动 ID
const selectedActivityId = ref<number>();
// 多选：选中状态映射
const checkedStatus = ref<Record<number, boolean>>({});
// 多选：选中的活动列表
const checkedActivities = ref<MallPointActivityApi.PointActivity[]>([]);
/** 单选：处理选中变化 */
function handleRadioChange() {
const selectedRow =
gridApi.grid.getRadioRecord() as MallPointActivityApi.PointActivity;
if (selectedRow) {
emit('change', selectedRow);
modalApi.close();
}
}
// 全选状态
const isCheckAll = ref(false);
const isIndeterminate = ref(false);
/** 计算已兑换数量 */
const getRedeemedQuantity = (row: MallPointActivityApi.PointActivity) =>
(row.totalStock || 0) - (row.stock || 0);
// 搜索表单配置
const formSchema = computed<VbenFormSchema[]>(() => {
return [
{
fieldName: 'status',
label: '活动状态',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
placeholder: '请选择活动状态',
allowClear: true,
},
/** 搜索表单 Schema */
const formSchema = computed<VbenFormSchema[]>(() => [
{
fieldName: 'status',
label: '活动状态',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
placeholder: '请选择活动状态',
clearable: true,
},
];
});
},
]);
// 列配置
/** 表格列配置 */
const gridColumns = computed<VxeGridProps['columns']>(() => {
const columns: VxeGridProps['columns'] = [];
// 多选模式
if (props.multiple) {
columns.push({
field: 'checkbox',
title: '',
width: 55,
align: 'center',
slots: { default: 'checkbox-column', header: 'checkbox-header' },
});
columns.push({ type: 'checkbox', width: 55 });
} else {
// 单选模式
columns.push({
field: 'radio',
title: '#',
width: 55,
align: 'center',
slots: { default: 'radio-column' },
});
columns.push({ type: 'radio', width: 55 });
}
columns.push(
{
field: 'id',
title: '活动编号',
minWidth: 80,
minWidth: 100,
align: 'center',
},
{
field: 'picUrl',
title: '商品图片',
minWidth: 80,
width: 100,
align: 'center',
cellRender: {
name: 'CellImage',
props: {
height: 40,
},
},
},
{
field: 'spuName',
title: '商品标题',
minWidth: 300,
minWidth: 200,
},
{
field: 'marketPrice',
title: '原价',
minWidth: 100,
formatter: 'formatAmount2',
align: 'center',
formatter: ({ cellValue }) => fenToYuanFormat(cellValue),
},
{
field: 'status',
@@ -118,9 +101,7 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
align: 'center',
cellRender: {
name: 'CellDict',
props: {
type: DICT_TYPE.COMMON_STATUS,
},
props: { type: DICT_TYPE.COMMON_STATUS },
},
},
{
@@ -140,216 +121,119 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
title: '已兑换数量',
minWidth: 100,
align: 'center',
formatter: ({ row }) => (row.totalStock || 0) - (row.stock || 0),
formatter: ({ row }) => getRedeemedQuantity(row),
},
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
width: 180,
align: 'center',
formatter: 'formatDateTime',
formatter: ({ cellValue }) => dateFormatter(cellValue),
},
);
return columns;
});
// 初始化表格
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: formSchema.value,
layout: 'horizontal',
collapsed: false,
},
gridOptions: {
columns: gridColumns.value,
height: 500,
border: true,
showOverflow: true,
checkboxConfig: {
reserve: true,
},
radioConfig: {
reserve: true,
},
rowConfig: {
keyField: 'id',
isHover: true,
},
proxyConfig: {
ajax: {
async query({ page }: any, formValues: any) {
try {
const params: any = {
pageNo: page.currentPage,
pageSize: page.pageSize,
};
if (formValues.status !== undefined) {
params.status = formValues.status;
}
const data = await getPointActivityPage(params);
const list = data.list || [];
// 初始化 checkbox 绑定
list.forEach(
(activityVO) =>
(checkedStatus.value[activityVO.id] =
checkedStatus.value[activityVO.id] || false),
);
// 计算全选框状态
calculateIsCheckAll(list);
return {
items: list,
total: data.total || 0,
};
} catch (error) {
console.error('加载积分活动数据失败:', error);
return { items: [], total: 0 };
}
return await getPointActivityPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
},
gridEvents: {
radioChange: handleRadioChange,
},
});
/**
* 单选：处理选中
*/
function handleSingleSelected(row: MallPointActivityApi.PointActivity) {
selectedActivityId.value = row.id;
emit('change', row);
modalApi.close();
}
/**
* 多选：全选/全不选
*/
function handleCheckAll(e: any) {
const checked = e.target.checked;
isCheckAll.value = checked;
isIndeterminate.value = false;
const list = gridApi.grid.getData();
list.forEach((pointActivity) =>
handleCheckOne(checked, pointActivity, false),
);
}
/**
* 多选：选中一行
*/
function handleCheckOne(
checked: boolean,
pointActivity: MallPointActivityApi.PointActivity,
isCalcCheckAll: boolean,
) {
if (checked) {
checkedActivities.value.push(pointActivity);
checkedStatus.value[pointActivity.id] = true;
} else {
const index = findCheckedIndex(pointActivity);
if (index > -1) {
checkedActivities.value.splice(index, 1);
checkedStatus.value[pointActivity.id] = false;
isCheckAll.value = false;
}
}
// 计算全选框状态
if (isCalcCheckAll) {
const list = gridApi.grid.getData();
calculateIsCheckAll(list);
}
}
/**
* 查找活动在已选中列表中的索引
*/
function findCheckedIndex(activityVO: MallPointActivityApi.PointActivity) {
return checkedActivities.value.findIndex((item) => item.id === activityVO.id);
}
/**
* 计算全选框状态
*/
function calculateIsCheckAll(list: MallPointActivityApi.PointActivity[]) {
isCheckAll.value = list.every(
(activityVO) => checkedStatus.value[activityVO.id],
);
isIndeterminate.value =
!isCheckAll.value &&
list.some((activityVO) => checkedStatus.value[activityVO.id]);
}
/**
* 多选：确认选择
*/
function handleConfirm() {
emit('change', [...checkedActivities.value]);
modalApi.close();
}
/**
* 打开对话框
*/
function open(pointList?: MallPointActivityApi.PointActivity[]) {
// 重置
checkedActivities.value = [];
checkedStatus.value = {};
isCheckAll.value = false;
isIndeterminate.value = false;
// 处理已选中
if (pointList && pointList.length > 0) {
checkedActivities.value = [...pointList];
checkedStatus.value = Object.fromEntries(
pointList.map((activityVO) => [activityVO.id, true]),
);
}
modalApi.open();
}
// 暴露 open 方法
defineExpose({ open });
// 初始化弹窗
const [Modal, modalApi] = useVbenModal({
onConfirm: props.multiple ? handleConfirm : undefined,
destroyOnClose: true,
showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
onConfirm: () => {
const selectedRows =
gridApi.grid.getCheckboxRecords() as MallPointActivityApi.PointActivity[];
emit('change', selectedRows);
modalApi.close();
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
// 关闭时清理状态
if (!props.multiple) {
selectedActivityId.value = undefined;
}
await gridApi.grid.clearCheckboxRow();
await gridApi.grid.clearRadioRow();
return;
}
// 打开时触发查询
// 1. 先查询数据
await gridApi.query();
// 2. 设置已选中行
const data = modalApi.getData<
MallPointActivityApi.PointActivity | MallPointActivityApi.PointActivity[]
>();
if (props.multiple && Array.isArray(data) && data.length > 0) {
setTimeout(() => {
const tableData = gridApi.grid.getTableData().fullData;
data.forEach((activity) => {
const row = tableData.find(
(item: MallPointActivityApi.PointActivity) =>
item.id === activity.id,
);
if (row) {
gridApi.grid.setCheckboxRow(row, true);
}
});
}, 300);
} else if (!props.multiple && data && !Array.isArray(data)) {
setTimeout(() => {
const tableData = gridApi.grid.getTableData().fullData;
const row = tableData.find(
(item: MallPointActivityApi.PointActivity) => item.id === data.id,
);
if (row) {
gridApi.grid.setRadioRow(row);
}
}, 300);
}
},
});
/** 对外暴露的方法 */
defineExpose({
open: (
data?:
| MallPointActivityApi.PointActivity
| MallPointActivityApi.PointActivity[],
) => {
modalApi.setData(data).open();
},
});
</script>
<template>
<Modal class="w-[70%]" title="选择活动">
<Grid>
<!-- 多选：表头 checkbox -->
<template v-if="props.multiple" #checkbox-header>
<Checkbox
v-model:checked="isCheckAll"
:indeterminate="isIndeterminate"
@change="handleCheckAll"
/>
</template>
<!-- 多选：行 checkbox -->
<template v-if="props.multiple" #checkbox-column="{ row }">
<Checkbox
v-model:checked="checkedStatus[row.id]"
@change="(e: any) => handleCheckOne(e.target.checked, row, true)"
/>
</template>
<!-- 单选：行 radio -->
<template v-if="!props.multiple" #radio-column="{ row }">
<Radio
:checked="selectedActivityId === row.id"
:value="row.id"
class="cursor-pointer"
@click="handleSingleSelected(row)"
/>
</template>
</Grid>
<Modal title="选择活动" class="w-[950px]">
<Grid />
</Modal>
</template>

2
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
View File

@@ -19,7 +19,7 @@ export interface NoticeContentProperty {
export const component = {
id: 'NoticeBar',
name: '公告栏',
icon: 'ep:bell',
icon: 'lucide:bell',
property: {
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/xinjian.png',
contents: [

4
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
View File

@@ -5,7 +5,7 @@ import type { MallArticleApi } from '#/api/mall/promotion/article';
import { ref, watch } from 'vue';
import * as ArticleApi from '#/api/mall/promotion/article/index';
import { getArticle } from '#/api/mall/promotion/article';
/** 营销文章 */
defineOptions({ name: 'PromotionArticle' });
@@ -18,7 +18,7 @@ watch(
() => props.property.id,
async () => {
if (props.property.id) {
article.value = await ArticleApi.getArticle(props.property.id);
article.value = await getArticle(props.property.id);
}
},
{

12
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
View File

@@ -10,8 +10,8 @@ import { fenToYuan } from '@vben/utils';
import { ElImage } from 'element-plus';
import * as ProductSpuApi from '#/api/mall/product/spu';
import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
import { getSpuDetailList } from '#/api/mall/product/spu';
import { getCombinationActivityListByIds } from '#/api/mall/promotion/combination/combinationActivity';
/** 拼团卡片 */
defineOptions({ name: 'PromotionCombination' });
@@ -34,9 +34,7 @@ watch(
if (Array.isArray(activityIds) && activityIds.length > 0) {
// 获取拼团活动详情列表
combinationActivityList.value =
await CombinationActivityApi.getCombinationActivityListByIds(
activityIds,
);
await getCombinationActivityListByIds(activityIds);
// 获取拼团活动的 SPU 详情列表
spuList.value = [];
@@ -44,7 +42,7 @@ watch(
.map((activity) => activity.spuId)
.filter((spuId): spuId is number => typeof spuId === 'number');
if (spuIdList.value.length > 0) {
spuList.value = await ProductSpuApi.getSpuDetailList(spuIdList.value);
spuList.value = await getSpuDetailList(spuIdList.value);
}
// 更新 SPU 的最低价格
@@ -78,7 +76,7 @@ function calculateSpace(index: number) {
return { marginLeft, marginTop };
}
const containerRef = ref();
const containerRef = ref(); // 容器
/** 计算商品的宽度 */
function calculateWidth() {

2
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
View File

@@ -74,7 +74,7 @@ function calculateSpace(index: number) {
return { marginLeft, marginTop };
}
const containerRef = ref();
const containerRef = ref(); // 容器
/** 计算商品的宽度 */
function calculateWidth() {

5
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
View File

@@ -54,11 +54,6 @@ const formData = useVModel(props, 'modelValue', emit);
<IconifyIcon icon="fluent:text-column-two-24-filled" />
</ElRadioButton>
</ElTooltip>
<!--<ElTooltip class="item" content="三列" placement="bottom">
<ElRadioButton value="threeCol">
<IconifyIcon icon="fluent:text-column-three-24-filled" />
</ElRadioButton>
</ElTooltip>-->
</ElRadioGroup>
</ElFormItem>
<ElFormItem label="商品名称" prop="fields.name.show">