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) {
|
||||
if (!isOpen) {
|
||||
gridApi.grid.clearCheckboxRow();
|
||||
gridApi.grid.clearRadioRow();
|
||||
await gridApi.grid.clearCheckboxRow();
|
||||
await gridApi.grid.clearRadioRow();
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -163,8 +163,8 @@ const [Modal, modalApi] = useVbenModal({
|
||||
},
|
||||
async onOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
gridApi.grid.clearCheckboxRow();
|
||||
gridApi.grid.clearRadioRow();
|
||||
await gridApi.grid.clearCheckboxRow();
|
||||
await gridApi.grid.clearRadioRow();
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ import {
|
||||
|
||||
import UploadImg from '#/components/upload/image-upload.vue';
|
||||
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';
|
||||
|
||||
|
||||
@@ -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