feat：【antd】【mall】diy-editor 的 promotion-seckill 初始化 100%
This commit is contained in:
YunaiV
@@ -169,8 +169,8 @@ const [Modal, modalApi] = useVbenModal({
|
|||||||
},
|
},
|
||||||
async onOpenChange(isOpen: boolean) {
|
async onOpenChange(isOpen: boolean) {
|
||||||
if (!isOpen) {
|
if (!isOpen) {
|
||||||
gridApi.grid.clearCheckboxRow();
|
await gridApi.grid.clearCheckboxRow();
|
||||||
gridApi.grid.clearRadioRow();
|
await gridApi.grid.clearRadioRow();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -163,8 +163,8 @@ const [Modal, modalApi] = useVbenModal({
|
|||||||
},
|
},
|
||||||
async onOpenChange(isOpen: boolean) {
|
async onOpenChange(isOpen: boolean) {
|
||||||
if (!isOpen) {
|
if (!isOpen) {
|
||||||
gridApi.grid.clearCheckboxRow();
|
await gridApi.grid.clearCheckboxRow();
|
||||||
gridApi.grid.clearRadioRow();
|
await gridApi.grid.clearRadioRow();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ import {
|
|||||||
|
|
||||||
import UploadImg from '#/components/upload/image-upload.vue';
|
import UploadImg from '#/components/upload/image-upload.vue';
|
||||||
import { ColorInput } from '#/views/mall/promotion/components';
|
import { ColorInput } from '#/views/mall/promotion/components';
|
||||||
import SeckillShowcase from '#/views/mall/promotion/seckill/components/seckill-showcase.vue';
|
import { SeckillShowcase } from '#/views/mall/promotion/seckill/components';
|
||||||
|
|
||||||
import ComponentContainerProperty from '../../component-container-property.vue';
|
import ComponentContainerProperty from '../../component-container-property.vue';
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as SeckillShowcase } from './showcase.vue';
|
||||||
@@ -1,184 +0,0 @@
|
|||||||
<!-- 秒杀活动橱窗组件 - 用于装修时展示和选择秒杀活动 -->
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
|
|
||||||
|
|
||||||
import { computed, ref, watch } from 'vue';
|
|
||||||
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
|
||||||
|
|
||||||
import { ElImage, ElTooltip } from 'element-plus';
|
|
||||||
|
|
||||||
import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
|
|
||||||
import SeckillTableSelect from '#/views/mall/promotion/seckill/components/seckill-table-select.vue';
|
|
||||||
|
|
||||||
interface SeckillShowcaseProps {
|
|
||||||
modelValue: number | number[];
|
|
||||||
limit?: number;
|
|
||||||
disabled?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<SeckillShowcaseProps>(), {
|
|
||||||
limit: Number.MAX_VALUE,
|
|
||||||
disabled: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
change: [value: any];
|
|
||||||
'update:modelValue': [value: number | number[]];
|
|
||||||
}>();
|
|
||||||
|
|
||||||
// 秒杀活动列表
|
|
||||||
const seckillActivityList = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
|
|
||||||
|
|
||||||
// 计算是否可以添加
|
|
||||||
const canAdd = computed(() => {
|
|
||||||
if (props.disabled) return false;
|
|
||||||
if (!props.limit) return true;
|
|
||||||
return seckillActivityList.value.length < props.limit;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 秒杀活动选择器引用
|
|
||||||
const seckillActivityTableSelectRef = ref();
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 打开秒杀活动选择器
|
|
||||||
*/
|
|
||||||
function openSeckillActivityTableSelect() {
|
|
||||||
seckillActivityTableSelectRef.value.open(seckillActivityList.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 选择活动后触发
|
|
||||||
*/
|
|
||||||
function handleActivitySelected(
|
|
||||||
activityList:
|
|
||||||
| MallSeckillActivityApi.SeckillActivity
|
|
||||||
| MallSeckillActivityApi.SeckillActivity[],
|
|
||||||
) {
|
|
||||||
seckillActivityList.value = Array.isArray(activityList)
|
|
||||||
? activityList
|
|
||||||
: [activityList];
|
|
||||||
emitActivityChange();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 删除活动
|
|
||||||
*/
|
|
||||||
function handleRemoveActivity(index: number) {
|
|
||||||
seckillActivityList.value.splice(index, 1);
|
|
||||||
emitActivityChange();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 发送变更事件
|
|
||||||
*/
|
|
||||||
function emitActivityChange() {
|
|
||||||
if (props.limit === 1) {
|
|
||||||
const seckillActivity =
|
|
||||||
seckillActivityList.value.length > 0
|
|
||||||
? seckillActivityList.value[0]
|
|
||||||
: null;
|
|
||||||
emit('update:modelValue', seckillActivity?.id || 0);
|
|
||||||
emit('change', seckillActivity);
|
|
||||||
} else {
|
|
||||||
emit(
|
|
||||||
'update:modelValue',
|
|
||||||
seckillActivityList.value.map((seckillActivity) => seckillActivity.id),
|
|
||||||
);
|
|
||||||
emit('change', seckillActivityList.value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 监听 modelValue 变化
|
|
||||||
watch(
|
|
||||||
() => props.modelValue,
|
|
||||||
async () => {
|
|
||||||
const ids = Array.isArray(props.modelValue)
|
|
||||||
? props.modelValue
|
|
||||||
: props.modelValue
|
|
||||||
? [props.modelValue]
|
|
||||||
: [];
|
|
||||||
|
|
||||||
// 不需要返显
|
|
||||||
if (ids.length === 0) {
|
|
||||||
seckillActivityList.value = [];
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 只有活动发生变化之后，才会查询活动
|
|
||||||
if (
|
|
||||||
seckillActivityList.value.length === 0 ||
|
|
||||||
seckillActivityList.value.some(
|
|
||||||
(seckillActivity) => !ids.includes(seckillActivity.id!),
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
seckillActivityList.value =
|
|
||||||
await SeckillActivityApi.getSeckillActivityListByIds(ids as number[]);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ immediate: true },
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="flex flex-wrap items-center gap-2">
|
|
||||||
<!-- 活动图片列表 -->
|
|
||||||
<div
|
|
||||||
v-for="(seckillActivity, index) in seckillActivityList"
|
|
||||||
:key="seckillActivity.id"
|
|
||||||
class="select-box spu-pic"
|
|
||||||
>
|
|
||||||
<ElTooltip :content="seckillActivity.name">
|
|
||||||
<div class="relative h-full w-full">
|
|
||||||
<ElImage :src="seckillActivity.picUrl" class="h-full w-full" />
|
|
||||||
<IconifyIcon
|
|
||||||
v-show="!disabled"
|
|
||||||
class="del-icon"
|
|
||||||
icon="ep:circle-close-filled"
|
|
||||||
@click="handleRemoveActivity(index)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ElTooltip>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 添加按钮 -->
|
|
||||||
<ElTooltip v-if="canAdd" content="选择活动">
|
|
||||||
<div class="select-box" @click="openSeckillActivityTableSelect">
|
|
||||||
<IconifyIcon icon="ep:plus" />
|
|
||||||
</div>
|
|
||||||
</ElTooltip>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 秒杀活动选择对话框 -->
|
|
||||||
<SeckillTableSelect
|
|
||||||
ref="seckillActivityTableSelectRef"
|
|
||||||
:multiple="limit !== 1"
|
|
||||||
@change="handleActivitySelected"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.select-box {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 1px dashed var(--el-border-color-darker);
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spu-pic {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.del-icon {
|
|
||||||
position: absolute;
|
|
||||||
top: -10px;
|
|
||||||
right: -10px;
|
|
||||||
z-index: 1;
|
|
||||||
width: 20px !important;
|
|
||||||
height: 20px !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,382 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
|
|
||||||
|
|
||||||
import { onMounted, ref } from 'vue';
|
|
||||||
|
|
||||||
import { ContentWrap } from '@vben/common-ui';
|
|
||||||
import { DICT_TYPE } from '@vben/constants';
|
|
||||||
import { getDictOptions } from '@vben/hooks';
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
|
||||||
import {
|
|
||||||
dateFormatter,
|
|
||||||
fenToYuan,
|
|
||||||
fenToYuanFormat,
|
|
||||||
formatDate,
|
|
||||||
handleTree,
|
|
||||||
} from '@vben/utils';
|
|
||||||
|
|
||||||
import { CHANGE_EVENT } from 'element-plus';
|
|
||||||
|
|
||||||
import * as ProductCategoryApi from '#/api/mall/product/category';
|
|
||||||
import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 活动表格选择对话框
|
|
||||||
* 1. 单选模式：
|
|
||||||
* 1.1 点击表格左侧的单选框时，结束选择，并关闭对话框
|
|
||||||
* 1.2 再次打开时，保持选中状态
|
|
||||||
* 2. 多选模式：
|
|
||||||
* 2.1 点击表格左侧的多选框时，记录选中的活动
|
|
||||||
* 2.2 切换分页时，保持活动的选中状态
|
|
||||||
* 2.3 点击右下角的确定按钮时，结束选择，关闭对话框
|
|
||||||
* 2.4 再次打开时，保持选中状态
|
|
||||||
*/
|
|
||||||
defineOptions({ name: 'SeckillTableSelect' });
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
// 多选模式
|
|
||||||
multiple: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
/** 确认选择时的触发事件 */
|
|
||||||
const emits = defineEmits<{
|
|
||||||
change: [
|
|
||||||
SeckillActivityApi:
|
|
||||||
| any
|
|
||||||
| MallSeckillActivityApi.SeckillActivity
|
|
||||||
| MallSeckillActivityApi.SeckillActivity[],
|
|
||||||
];
|
|
||||||
}>();
|
|
||||||
|
|
||||||
// 列表的总页数
|
|
||||||
const total = ref(0);
|
|
||||||
// 列表的数据
|
|
||||||
const list = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
|
|
||||||
// 列表的加载中
|
|
||||||
const loading = ref(false);
|
|
||||||
// 弹窗的是否展示
|
|
||||||
const dialogVisible = ref(false);
|
|
||||||
// 查询参数
|
|
||||||
const queryParams = ref({
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
name: undefined,
|
|
||||||
status: undefined,
|
|
||||||
});
|
|
||||||
|
|
||||||
/** 打开弹窗 */
|
|
||||||
const open = (SeckillList?: MallSeckillActivityApi.SeckillActivity[]) => {
|
|
||||||
// 重置
|
|
||||||
checkedActivitys.value = [];
|
|
||||||
checkedStatus.value = {};
|
|
||||||
isCheckAll.value = false;
|
|
||||||
isIndeterminate.value = false;
|
|
||||||
|
|
||||||
// 处理已选中
|
|
||||||
if (SeckillList && SeckillList.length > 0) {
|
|
||||||
checkedActivitys.value = [...SeckillList];
|
|
||||||
checkedStatus.value = Object.fromEntries(
|
|
||||||
SeckillList.map((activityVO) => [activityVO.id, true]),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
dialogVisible.value = true;
|
|
||||||
resetQuery();
|
|
||||||
};
|
|
||||||
// 提供 open 方法，用于打开弹窗
|
|
||||||
defineExpose({ open });
|
|
||||||
|
|
||||||
/** 查询列表 */
|
|
||||||
const getList = async () => {
|
|
||||||
loading.value = true;
|
|
||||||
try {
|
|
||||||
const data = await SeckillActivityApi.getSeckillActivityPage(
|
|
||||||
queryParams.value,
|
|
||||||
);
|
|
||||||
list.value = data.list;
|
|
||||||
total.value = data.total;
|
|
||||||
// checkbox绑定undefined会有问题，需要给一个bool值
|
|
||||||
list.value.forEach(
|
|
||||||
(activityVO) =>
|
|
||||||
(checkedStatus.value[activityVO.id || ''] =
|
|
||||||
checkedStatus.value[activityVO.id || ''] || false),
|
|
||||||
);
|
|
||||||
// 计算全选框状态
|
|
||||||
calculateIsCheckAll();
|
|
||||||
} finally {
|
|
||||||
loading.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
const handleQuery = () => {
|
|
||||||
queryParams.value.pageNo = 1;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
const resetQuery = () => {
|
|
||||||
queryParams.value = {
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
name: undefined,
|
|
||||||
status: undefined,
|
|
||||||
};
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 格式化秒杀价格
|
|
||||||
* @param products
|
|
||||||
*/
|
|
||||||
const formatSeckillPrice = (
|
|
||||||
products: MallSeckillActivityApi.SeckillProduct[],
|
|
||||||
) => {
|
|
||||||
const seckillPrice = Math.min(...products.map((item) => item.seckillPrice));
|
|
||||||
return `￥${fenToYuan(seckillPrice)}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 是否全选
|
|
||||||
const isCheckAll = ref(false);
|
|
||||||
// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
|
|
||||||
const isIndeterminate = ref(false);
|
|
||||||
// 选中的活动
|
|
||||||
const checkedActivitys = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
|
|
||||||
// 选中状态：key为活动ID，value为是否选中
|
|
||||||
const checkedStatus = ref<Record<string, boolean>>({});
|
|
||||||
|
|
||||||
// 选中的活动 activityId
|
|
||||||
const selectedActivityId = ref();
|
|
||||||
/** 单选中时触发 */
|
|
||||||
const handleSingleSelected = (
|
|
||||||
seckillActivityVO: MallSeckillActivityApi.SeckillActivity,
|
|
||||||
) => {
|
|
||||||
emits(CHANGE_EVENT, seckillActivityVO);
|
|
||||||
// 关闭弹窗
|
|
||||||
dialogVisible.value = false;
|
|
||||||
// 记住上次选择的ID
|
|
||||||
selectedActivityId.value = seckillActivityVO.id;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 多选完成 */
|
|
||||||
const handleEmitChange = () => {
|
|
||||||
// 关闭弹窗
|
|
||||||
dialogVisible.value = false;
|
|
||||||
emits(CHANGE_EVENT, [...checkedActivitys.value]);
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 全选/全不选 */
|
|
||||||
const handleCheckAll = (checked: boolean) => {
|
|
||||||
isCheckAll.value = checked;
|
|
||||||
isIndeterminate.value = false;
|
|
||||||
|
|
||||||
list.value.forEach((seckillActivity) =>
|
|
||||||
handleCheckOne(checked, seckillActivity, false),
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 选中一行
|
|
||||||
* @param checked 是否选中
|
|
||||||
* @param seckillActivity 活动
|
|
||||||
* @param isCalcCheckAll 是否计算全选
|
|
||||||
*/
|
|
||||||
const handleCheckOne = (
|
|
||||||
checked: boolean,
|
|
||||||
seckillActivity: MallSeckillActivityApi.SeckillActivity,
|
|
||||||
isCalcCheckAll: boolean,
|
|
||||||
) => {
|
|
||||||
if (checked) {
|
|
||||||
checkedActivitys.value.push(seckillActivity);
|
|
||||||
checkedStatus.value[seckillActivity.id || ''] = true;
|
|
||||||
} else {
|
|
||||||
const index = findCheckedIndex(seckillActivity);
|
|
||||||
if (index > -1) {
|
|
||||||
checkedActivitys.value.splice(index, 1);
|
|
||||||
checkedStatus.value[seckillActivity.id || ''] = false;
|
|
||||||
isCheckAll.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 计算全选框状态
|
|
||||||
if (isCalcCheckAll) {
|
|
||||||
calculateIsCheckAll();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 查找活动在已选中活动列表中的索引
|
|
||||||
const findCheckedIndex = (activityVO: MallSeckillActivityApi.SeckillActivity) =>
|
|
||||||
checkedActivitys.value.findIndex((item) => item.id === activityVO.id);
|
|
||||||
|
|
||||||
// 计算全选框状态
|
|
||||||
const calculateIsCheckAll = () => {
|
|
||||||
isCheckAll.value = list.value.every(
|
|
||||||
(activityVO) => checkedStatus.value[activityVO.id || ''],
|
|
||||||
);
|
|
||||||
// 计算中间状态：不是全部选中 && 任意一个选中
|
|
||||||
isIndeterminate.value =
|
|
||||||
!isCheckAll.value &&
|
|
||||||
list.value.some((activityVO) => checkedStatus.value[activityVO.id || '']);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 分类列表
|
|
||||||
const categoryList = ref();
|
|
||||||
// 分类树
|
|
||||||
const categoryTreeList = ref();
|
|
||||||
/** 初始化 */
|
|
||||||
onMounted(async () => {
|
|
||||||
await getList();
|
|
||||||
// 获得分类树
|
|
||||||
categoryList.value = await ProductCategoryApi.getCategoryList({});
|
|
||||||
categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Dialog
|
|
||||||
v-model="dialogVisible"
|
|
||||||
:append-to-body="true"
|
|
||||||
title="选择活动"
|
|
||||||
width="70%"
|
|
||||||
>
|
|
||||||
<ContentWrap>
|
|
||||||
<!-- 搜索工作栏 -->
|
|
||||||
<el-form
|
|
||||||
:inline="true"
|
|
||||||
:model="queryParams"
|
|
||||||
class="-mb-15px"
|
|
||||||
label-width="68px"
|
|
||||||
>
|
|
||||||
<el-form-item label="活动名称" prop="name">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.name"
|
|
||||||
placeholder="请输入活动名称"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleQuery"
|
|
||||||
class="!w-240px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="活动状态" prop="status">
|
|
||||||
<el-select
|
|
||||||
v-model="queryParams.status"
|
|
||||||
placeholder="请选择活动状态"
|
|
||||||
clearable
|
|
||||||
class="!w-240px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS, 'number')"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleQuery">
|
|
||||||
<IconifyIcon class="mr-5px" icon="ep:search" />
|
|
||||||
搜索
|
|
||||||
</el-button>
|
|
||||||
<el-button @click="resetQuery">
|
|
||||||
<IconifyIcon class="mr-5px" icon="ep:refresh" />
|
|
||||||
重置
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<el-table v-loading="loading" :data="list" show-overflow-tooltip>
|
|
||||||
<!-- 1. 多选模式（不能使用type="selection"，Element会忽略Header插槽） -->
|
|
||||||
<el-table-column width="55" v-if="multiple">
|
|
||||||
<template #header>
|
|
||||||
<el-checkbox
|
|
||||||
v-model="isCheckAll"
|
|
||||||
:indeterminate="isIndeterminate"
|
|
||||||
@change="handleCheckAll"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-checkbox
|
|
||||||
v-model="checkedStatus[row.id]"
|
|
||||||
@change="(checked: boolean) => handleCheckOne(checked, row, true)"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<!-- 2. 单选模式 -->
|
|
||||||
<el-table-column label="#" width="55" v-else>
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-radio
|
|
||||||
:value="row.id"
|
|
||||||
v-model="selectedActivityId"
|
|
||||||
@change="handleSingleSelected(row)"
|
|
||||||
>
|
|
||||||
<!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
|
|
||||||
|
|
||||||
</el-radio>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="活动编号" prop="id" min-width="80" />
|
|
||||||
<el-table-column label="活动名称" prop="name" min-width="140" />
|
|
||||||
<el-table-column label="活动时间" min-width="210">
|
|
||||||
<template #default="scope">
|
|
||||||
{{ formatDate(scope.row.startTime, 'YYYY-MM-DD') }}
|
|
||||||
~ {{ formatDate(scope.row.endTime, 'YYYY-MM-DD') }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="商品图片" prop="spuName" min-width="80">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-image
|
|
||||||
:src="scope.row.picUrl"
|
|
||||||
class="h-40px w-40px"
|
|
||||||
:preview-src-list="[scope.row.picUrl]"
|
|
||||||
preview-teleported
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="商品标题" prop="spuName" min-width="300" />
|
|
||||||
<el-table-column
|
|
||||||
label="原价"
|
|
||||||
prop="marketPrice"
|
|
||||||
min-width="100"
|
|
||||||
:formatter="fenToYuanFormat"
|
|
||||||
/>
|
|
||||||
<el-table-column label="秒杀价" prop="seckillPrice" min-width="100">
|
|
||||||
<template #default="scope">
|
|
||||||
{{ formatSeckillPrice(scope.row.products) }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="活动状态"
|
|
||||||
align="center"
|
|
||||||
prop="status"
|
|
||||||
min-width="100"
|
|
||||||
>
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag
|
|
||||||
:type="DICT_TYPE.COMMON_STATUS"
|
|
||||||
:value="scope.row.status"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="创建时间"
|
|
||||||
align="center"
|
|
||||||
prop="createTime"
|
|
||||||
:formatter="dateFormatter"
|
|
||||||
width="180px"
|
|
||||||
/>
|
|
||||||
</el-table>
|
|
||||||
<!-- 分页 -->
|
|
||||||
<Pagination
|
|
||||||
v-model:limit="queryParams.pageSize"
|
|
||||||
v-model:page="queryParams.pageNo"
|
|
||||||
:total="total"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
</ContentWrap>
|
|
||||||
<template #footer v-if="multiple">
|
|
||||||
<el-button type="primary" @click="handleEmitChange">确 定</el-button>
|
|
||||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
@@ -0,0 +1,147 @@
|
|||||||
|
<!-- 秒杀活动橱窗组件：用于展示和选择秒杀活动 -->
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
|
||||||
|
|
||||||
|
import { computed, ref, watch } from 'vue';
|
||||||
|
|
||||||
|
import { IconifyIcon } from '@vben/icons';
|
||||||
|
|
||||||
|
import { ElImage, ElTooltip } from 'element-plus';
|
||||||
|
|
||||||
|
import { getSeckillActivityListByIds } from '#/api/mall/promotion/seckill/seckillActivity';
|
||||||
|
|
||||||
|
import SeckillTableSelect from './table-select.vue';
|
||||||
|
|
||||||
|
interface SeckillShowcaseProps {
|
||||||
|
modelValue?: number | number[];
|
||||||
|
limit?: number;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<SeckillShowcaseProps>(), {
|
||||||
|
modelValue: undefined,
|
||||||
|
limit: Number.MAX_VALUE,
|
||||||
|
disabled: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue', 'change']);
|
||||||
|
|
||||||
|
const activityList = ref<MallSeckillActivityApi.SeckillActivity[]>([]); // 已选择的活动列表
|
||||||
|
const seckillTableSelectRef = ref<InstanceType<typeof SeckillTableSelect>>(); // 活动选择表格组件引用
|
||||||
|
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 getSeckillActivityListByIds(ids as number[]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
/** 打开活动选择对话框 */
|
||||||
|
function handleOpenActivitySelect() {
|
||||||
|
seckillTableSelectRef.value?.open(activityList.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 选择活动后触发 */
|
||||||
|
function handleActivitySelected(
|
||||||
|
activities:
|
||||||
|
| MallSeckillActivityApi.SeckillActivity
|
||||||
|
| MallSeckillActivityApi.SeckillActivity[],
|
||||||
|
) {
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<ElTooltip :content="activity.name">
|
||||||
|
<div class="relative h-full w-full">
|
||||||
|
<ElImage
|
||||||
|
: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"
|
||||||
|
@click="handleRemoveActivity(index)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ElTooltip>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 添加活动按钮 -->
|
||||||
|
<ElTooltip v-if="canAdd" content="选择活动">
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<IconifyIcon icon="ep:plus" class="text-xl text-gray-400" />
|
||||||
|
</div>
|
||||||
|
</ElTooltip>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 活动选择对话框 -->
|
||||||
|
<SeckillTableSelect
|
||||||
|
ref="seckillTableSelectRef"
|
||||||
|
:multiple="isMultiple"
|
||||||
|
@change="handleActivitySelected"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,277 @@
|
|||||||
|
<!-- 秒杀活动选择弹窗组件 -->
|
||||||
|
<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 { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
|
||||||
|
|
||||||
|
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 { getSeckillActivityPage } from '#/api/mall/promotion/seckill/seckillActivity';
|
||||||
|
|
||||||
|
interface SeckillTableSelectProps {
|
||||||
|
multiple?: boolean; // 是否多选：true - checkbox；false - radio
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<SeckillTableSelectProps>(), {
|
||||||
|
multiple: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
change: [
|
||||||
|
activity:
|
||||||
|
| MallSeckillActivityApi.SeckillActivity
|
||||||
|
| MallSeckillActivityApi.SeckillActivity[],
|
||||||
|
];
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const categoryList = ref<MallCategoryApi.Category[]>([]); // 分类列表
|
||||||
|
const categoryTreeList = ref<any[]>([]); // 分类树
|
||||||
|
|
||||||
|
/** 单选：处理选中变化 */
|
||||||
|
function handleRadioChange() {
|
||||||
|
const selectedRow =
|
||||||
|
gridApi.grid.getRadioRecord() as MallSeckillActivityApi.SeckillActivity;
|
||||||
|
if (selectedRow) {
|
||||||
|
emit('change', selectedRow);
|
||||||
|
modalApi.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化秒杀价格
|
||||||
|
* @param products
|
||||||
|
*/
|
||||||
|
const formatSeckillPrice = (
|
||||||
|
products: MallSeckillActivityApi.SeckillProduct[],
|
||||||
|
) => {
|
||||||
|
if (!products || products.length === 0) return '-';
|
||||||
|
const seckillPrice = Math.min(
|
||||||
|
...products.map((item) => item.seckillPrice || 0),
|
||||||
|
);
|
||||||
|
return `￥${fenToYuan(seckillPrice)}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 搜索表单 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,
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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,
|
||||||
|
align: 'center',
|
||||||
|
cellRender: {
|
||||||
|
name: 'CellImage',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'spuName',
|
||||||
|
title: '商品标题',
|
||||||
|
minWidth: 300,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'marketPrice',
|
||||||
|
title: '原价',
|
||||||
|
minWidth: 100,
|
||||||
|
align: 'center',
|
||||||
|
formatter: ({ cellValue }) => {
|
||||||
|
return cellValue ? `￥${fenToYuan(cellValue)}` : '-';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'products',
|
||||||
|
title: '秒杀价',
|
||||||
|
minWidth: 100,
|
||||||
|
align: 'center',
|
||||||
|
formatter: ({ cellValue }) => {
|
||||||
|
return formatSeckillPrice(cellValue);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'status',
|
||||||
|
title: '活动状态',
|
||||||
|
minWidth: 100,
|
||||||
|
align: 'center',
|
||||||
|
cellRender: {
|
||||||
|
name: 'CellDict',
|
||||||
|
props: { type: DICT_TYPE.COMMON_STATUS },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'createTime',
|
||||||
|
title: '创建时间',
|
||||||
|
width: 180,
|
||||||
|
align: 'center',
|
||||||
|
cellRender: {
|
||||||
|
name: 'CellDatetime',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
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 getSeckillActivityPage({
|
||||||
|
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 MallSeckillActivityApi.SeckillActivity[];
|
||||||
|
emit('change', selectedRows);
|
||||||
|
modalApi.close();
|
||||||
|
},
|
||||||
|
async onOpenChange(isOpen: boolean) {
|
||||||
|
if (!isOpen) {
|
||||||
|
await gridApi.grid.clearCheckboxRow();
|
||||||
|
await gridApi.grid.clearRadioRow();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. 先查询数据
|
||||||
|
await gridApi.query();
|
||||||
|
// 2. 设置已选中行
|
||||||
|
const data = modalApi.getData<
|
||||||
|
| MallSeckillActivityApi.SeckillActivity
|
||||||
|
| MallSeckillActivityApi.SeckillActivity[]
|
||||||
|
>();
|
||||||
|
if (props.multiple && Array.isArray(data) && data.length > 0) {
|
||||||
|
setTimeout(() => {
|
||||||
|
const tableData = gridApi.grid.getTableData().fullData;
|
||||||
|
data.forEach((activity) => {
|
||||||
|
const row = tableData.find(
|
||||||
|
(item: MallSeckillActivityApi.SeckillActivity) =>
|
||||||
|
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: MallSeckillActivityApi.SeckillActivity) => item.id === data.id,
|
||||||
|
);
|
||||||
|
if (row) {
|
||||||
|
gridApi.grid.setRadioRow(row);
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
/** 对外暴露的方法 */
|
||||||
|
defineExpose({
|
||||||
|
open: (
|
||||||
|
data?:
|
||||||
|
| MallSeckillActivityApi.SeckillActivity
|
||||||
|
| MallSeckillActivityApi.SeckillActivity[],
|
||||||
|
) => {
|
||||||
|
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>
|
||||||
Reference in New Issue
Block a user