feat：【ele】【mall】product/spu 的 components 迁移
This commit is contained in:
YunaiV
@@ -0,0 +1,4 @@
|
||||
export { default as SkuTableSelect } from './sku-table-select.vue';
|
||||
export { default as SpuShowcase } from './spu-showcase.vue';
|
||||
export { default as SpuTableSelect } from './spu-table-select.vue';
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
<!-- SKU 选择弹窗组件 -->
|
||||
<script lang="ts" setup>
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import type { MallSpuApi } from '#/api/mall/product/spu';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { fenToYuan } from '@vben/utils';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getSpu } from '#/api/mall/product/spu';
|
||||
|
||||
interface SpuData {
|
||||
spuId: number;
|
||||
}
|
||||
|
||||
const emit = defineEmits<{
|
||||
change: [sku: MallSpuApi.Sku];
|
||||
}>();
|
||||
|
||||
const spuId = ref<number>();
|
||||
|
||||
/** 表格列配置 */
|
||||
const gridColumns = computed<VxeGridProps['columns']>(() => [
|
||||
{
|
||||
type: 'radio',
|
||||
width: 55,
|
||||
},
|
||||
{
|
||||
field: 'picUrl',
|
||||
title: '图片',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
cellRender: {
|
||||
name: 'CellImage',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'properties',
|
||||
title: '规格',
|
||||
minWidth: 120,
|
||||
align: 'center',
|
||||
formatter: ({ cellValue }) => {
|
||||
return (
|
||||
cellValue?.map((p: MallSpuApi.Property) => p.valueName)?.join(' ') ||
|
||||
'-'
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'price',
|
||||
title: '销售价(元)',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
formatter: ({ cellValue }) => {
|
||||
return fenToYuan(cellValue);
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
// TODO @芋艿：要不要直接非 pager？
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: gridColumns.value,
|
||||
height: 400,
|
||||
border: true,
|
||||
showOverflow: true,
|
||||
radioConfig: {
|
||||
reserve: true,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async () => {
|
||||
if (!spuId.value) {
|
||||
return { list: [], total: 0 };
|
||||
}
|
||||
const spu = await getSpu(spuId.value);
|
||||
return {
|
||||
list: spu.skus || [],
|
||||
total: spu.skus?.length || 0,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
gridEvents: {
|
||||
radioChange: handleRadioChange,
|
||||
},
|
||||
});
|
||||
|
||||
/** 处理选中 */
|
||||
function handleRadioChange() {
|
||||
const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Sku;
|
||||
if (selectedRow) {
|
||||
emit('change', selectedRow);
|
||||
modalApi.close();
|
||||
}
|
||||
}
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
destroyOnClose: true,
|
||||
onOpenChange: async (isOpen: boolean) => {
|
||||
if (!isOpen) {
|
||||
gridApi.grid.clearRadioRow();
|
||||
spuId.value = undefined;
|
||||
return;
|
||||
}
|
||||
const data = modalApi.getData<SpuData>();
|
||||
if (!data?.spuId) {
|
||||
return;
|
||||
}
|
||||
spuId.value = data.spuId;
|
||||
await gridApi.query();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal class="w-[700px]" title="选择规格">
|
||||
<Grid />
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -0,0 +1,156 @@
|
||||
<!-- 商品橱窗组件：用于展示和选择商品 SPU -->
|
||||
<script lang="ts" setup>
|
||||
import type { MallSpuApi } from '#/api/mall/product/spu';
|
||||
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { ElImage, ElTooltip } from 'element-plus';
|
||||
|
||||
import { getSpuDetailList } from '#/api/mall/product/spu';
|
||||
|
||||
import SpuTableSelect from './spu-table-select.vue';
|
||||
|
||||
interface SpuShowcaseProps {
|
||||
modelValue?: number | number[];
|
||||
limit?: number;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<SpuShowcaseProps>(), {
|
||||
modelValue: undefined,
|
||||
limit: Number.MAX_VALUE,
|
||||
disabled: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'change']);
|
||||
|
||||
const productSpus = ref<MallSpuApi.Spu[]>([]);
|
||||
const spuTableSelectRef = ref<InstanceType<typeof SpuTableSelect>>();
|
||||
const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
|
||||
|
||||
/** 计算是否可以添加 */
|
||||
const canAdd = computed(() => {
|
||||
if (props.disabled) {
|
||||
return false;
|
||||
}
|
||||
if (!props.limit) {
|
||||
return true;
|
||||
}
|
||||
return productSpus.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) {
|
||||
productSpus.value = [];
|
||||
return;
|
||||
}
|
||||
// 只有商品发生变化时才重新查询
|
||||
if (
|
||||
productSpus.value.length === 0 ||
|
||||
productSpus.value.some((spu) => !ids.includes(spu.id!))
|
||||
) {
|
||||
productSpus.value = await getSpuDetailList(ids);
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
/** 打开商品选择对话框 */
|
||||
function handleOpenSpuSelect() {
|
||||
spuTableSelectRef.value?.open(productSpus.value);
|
||||
}
|
||||
|
||||
/** 选择商品后触发 */
|
||||
function handleSpuSelected(spus: MallSpuApi.Spu | MallSpuApi.Spu[]) {
|
||||
productSpus.value = Array.isArray(spus) ? spus : [spus];
|
||||
emitSpuChange();
|
||||
}
|
||||
|
||||
/** 删除商品 */
|
||||
function handleRemoveSpu(index: number) {
|
||||
productSpus.value.splice(index, 1);
|
||||
emitSpuChange();
|
||||
}
|
||||
|
||||
/** 触发变更事件 */
|
||||
function emitSpuChange() {
|
||||
if (props.limit === 1) {
|
||||
const spu = productSpus.value.length > 0 ? productSpus.value[0] : null;
|
||||
emit('update:modelValue', spu?.id || 0);
|
||||
emit('change', spu);
|
||||
} else {
|
||||
emit(
|
||||
'update:modelValue',
|
||||
productSpus.value.map((spu) => spu.id!),
|
||||
);
|
||||
emit('change', productSpus.value);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<!-- 已选商品列表 -->
|
||||
<div
|
||||
v-for="(spu, index) in productSpus"
|
||||
:key="spu.id"
|
||||
class="spu-item group relative"
|
||||
>
|
||||
<ElTooltip :content="spu.name">
|
||||
<div class="relative h-full w-full">
|
||||
<ElImage
|
||||
:src="spu.picUrl"
|
||||
class="h-full w-full rounded-lg object-cover"
|
||||
:preview-src-list="[spu.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="handleRemoveSpu(index)"
|
||||
/>
|
||||
</div>
|
||||
</ElTooltip>
|
||||
</div>
|
||||
|
||||
<!-- 添加商品按钮 -->
|
||||
<ElTooltip v-if="canAdd" content="选择商品">
|
||||
<div
|
||||
class="spu-add-box hover:border-primary hover:bg-primary/5 flex cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors"
|
||||
@click="handleOpenSpuSelect"
|
||||
>
|
||||
<IconifyIcon icon="ep:plus" class="text-xl text-gray-400" />
|
||||
</div>
|
||||
</ElTooltip>
|
||||
</div>
|
||||
|
||||
<!-- 商品选择对话框 -->
|
||||
<SpuTableSelect
|
||||
ref="spuTableSelectRef"
|
||||
:multiple="isMultiple"
|
||||
@change="handleSpuSelected"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.spu-item {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.spu-add-box {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,244 @@
|
||||
<!-- SPU 商品选择弹窗组件 -->
|
||||
<script lang="ts" setup>
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import type { MallSpuApi } from '#/api/mall/product/spu';
|
||||
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { handleTree } from '@vben/utils';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getCategoryList } from '#/api/mall/product/category';
|
||||
import { getSpuPage } from '#/api/mall/product/spu';
|
||||
import { getRangePickerDefaultProps } from '#/utils';
|
||||
|
||||
interface SpuTableSelectProps {
|
||||
multiple?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<SpuTableSelectProps>(), {
|
||||
multiple: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
change: [spu: MallSpuApi.Spu | MallSpuApi.Spu[]];
|
||||
}>();
|
||||
|
||||
// TODO @芋艿：要不要加类型；
|
||||
const categoryList = ref<any[]>([]);
|
||||
const categoryTreeList = ref<any[]>([]);
|
||||
|
||||
/** 搜索表单 Schema */
|
||||
const formSchema = computed<VbenFormSchema[]>(() => [
|
||||
{
|
||||
fieldName: 'name',
|
||||
label: '商品名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入商品名称',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'categoryId',
|
||||
label: '商品分类',
|
||||
component: 'TreeSelect',
|
||||
componentProps: {
|
||||
treeData: categoryTreeList.value,
|
||||
fieldNames: {
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
},
|
||||
treeCheckStrictly: true,
|
||||
placeholder: '请选择商品分类',
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
treeNodeFilterProp: 'name',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'createTime',
|
||||
label: '创建时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
/** 表格列配置 */
|
||||
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: 100,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
field: 'picUrl',
|
||||
title: '商品图',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
cellRender: {
|
||||
name: 'CellImage',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '商品名称',
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
field: 'categoryId',
|
||||
title: '商品分类',
|
||||
minWidth: 120,
|
||||
formatter: ({ cellValue }) => {
|
||||
const category = categoryList.value?.find((c) => c.id === cellValue);
|
||||
return category?.name || '-';
|
||||
},
|
||||
},
|
||||
);
|
||||
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: props.multiple
|
||||
? {
|
||||
reserve: true,
|
||||
}
|
||||
: undefined,
|
||||
radioConfig: props.multiple
|
||||
? undefined
|
||||
: {
|
||||
reserve: true,
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
isHover: true,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
async query({ page }: any, formValues: any) {
|
||||
return await getSpuPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
tabType: 0,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
gridEvents: props.multiple
|
||||
? {
|
||||
checkboxChange: handleCheckboxChange,
|
||||
checkboxAll: handleCheckboxChange,
|
||||
}
|
||||
: {
|
||||
radioChange: handleRadioChange,
|
||||
},
|
||||
});
|
||||
|
||||
/** 多选：处理选中变化 */
|
||||
// TODO @芋艿：要不要清理掉？
|
||||
function handleCheckboxChange() {
|
||||
// vxe-table 自动管理选中状态，无需手动处理
|
||||
}
|
||||
|
||||
/** 单选：处理选中变化 */
|
||||
function handleRadioChange() {
|
||||
const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Spu;
|
||||
if (selectedRow) {
|
||||
emit('change', selectedRow);
|
||||
modalApi.close();
|
||||
}
|
||||
}
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
destroyOnClose: true,
|
||||
// TODO @芋艿：看看怎么简化
|
||||
onConfirm: props.multiple
|
||||
? () => {
|
||||
const selectedRows =
|
||||
gridApi.grid.getCheckboxRecords() as MallSpuApi.Spu[];
|
||||
emit('change', selectedRows);
|
||||
modalApi.close();
|
||||
}
|
||||
: undefined,
|
||||
// TODO @芋艿：看看怎么简化？
|
||||
async onOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
gridApi.grid.clearCheckboxRow();
|
||||
gridApi.grid.clearRadioRow();
|
||||
return;
|
||||
}
|
||||
|
||||
const data = modalApi.getData<MallSpuApi.Spu | MallSpuApi.Spu[]>();
|
||||
|
||||
// 先查询数据，确保表格已加载
|
||||
await gridApi.query();
|
||||
|
||||
if (props.multiple && Array.isArray(data) && data.length > 0) {
|
||||
// 等待数据加载完成后再设置选中状态
|
||||
setTimeout(() => {
|
||||
const tableData = gridApi.grid.getTableData().fullData;
|
||||
data.forEach((spu) => {
|
||||
// 在表格数据中查找匹配的行
|
||||
const row = tableData.find((item: MallSpuApi.Spu) => item.id === spu.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: MallSpuApi.Spu) => item.id === data.id);
|
||||
if (row) {
|
||||
gridApi.grid.setRadioRow(row);
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
/** 初始化分类数据 */
|
||||
onMounted(async () => {
|
||||
categoryList.value = await getCategoryList({});
|
||||
categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
|
||||
});
|
||||
|
||||
/** 对外暴露的方法 */
|
||||
defineExpose({
|
||||
open: (data?: MallSpuApi.Spu | MallSpuApi.Spu[]) => {
|
||||
modalApi.setData(data).open();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :class="props.multiple ? 'w-[900px]' : 'w-[800px]'" title="选择商品">
|
||||
<Grid />
|
||||
</Modal>
|
||||
</template>
|
||||
Reference in New Issue
Block a user