!317 修复一些 review TODO 提到的问题
Merge pull request !317 from puhui999/dev-mall
This commit is contained in:
芋道源码
Gitee
@@ -43,15 +43,6 @@ const [Modal, modalApi] = useVbenModal({
|
||||
if (isOpen) {
|
||||
// 打开时，进行 loading 加载。后续 CropperImage 组件加载完毕，会自动关闭 loading（通过 handleReady）
|
||||
modalLoading(true);
|
||||
// TODO @puhui999：这里比 ele 多了，是符合预期的哇？
|
||||
const img = new Image();
|
||||
img.src = src.value;
|
||||
img.addEventListener('load', () => {
|
||||
modalLoading(false);
|
||||
});
|
||||
img.addEventListener('error', () => {
|
||||
modalLoading(false);
|
||||
});
|
||||
} else {
|
||||
// 关闭时，清空右侧预览
|
||||
previewSource.value = '';
|
||||
|
||||
@@ -15,9 +15,8 @@ export function useImagesUpload() {
|
||||
default: 5,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
// TODO: @puhui999：@dhb52 其实还是靠 props 默认参数起作用，没能从 formCreate 传递
|
||||
return (props: { maxNumber?: number; multiple?: boolean }) => (
|
||||
setup(props) {
|
||||
return () => (
|
||||
<ImageUpload maxNumber={props.maxNumber} multiple={props.multiple} />
|
||||
);
|
||||
},
|
||||
|
||||
@@ -96,14 +96,10 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
defaultValue: true,
|
||||
},
|
||||
{
|
||||
// TODO: @puhui999：商品关联
|
||||
fieldName: 'spuId',
|
||||
label: '商品关联',
|
||||
component: 'Input',
|
||||
formItemClass: 'col-span-2',
|
||||
componentProps: {
|
||||
placeholder: '请输入商品 SPU 编号',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'sort',
|
||||
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
updateArticle,
|
||||
} from '#/api/mall/promotion/article';
|
||||
import { $t } from '#/locales';
|
||||
import { SpuShowcase } from '#/views/mall/product/spu/components';
|
||||
|
||||
import { useFormSchema } from '../data';
|
||||
|
||||
@@ -41,6 +42,10 @@ const [Form, formApi] = useVbenForm({
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
// 同步商品选择到表单，确保验证时能获取到值
|
||||
if (formData.value?.spuId) {
|
||||
await formApi.setFieldValue('spuId', formData.value.spuId);
|
||||
}
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
@@ -82,6 +87,11 @@ const [Modal, modalApi] = useVbenModal({
|
||||
|
||||
<template>
|
||||
<Modal :title="getTitle" class="w-2/5">
|
||||
<Form class="mx-4" />
|
||||
<Form class="mx-4">
|
||||
<!-- 自定义插槽：商品选择 -->
|
||||
<template #spuId>
|
||||
<SpuShowcase v-model="formData!.spuId" :limit="1" />
|
||||
</template>
|
||||
</Form>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
@@ -49,6 +49,19 @@ const [Form, formApi] = useVbenForm({
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
// 同步商品/分类选择到表单，确保验证时能获取到值
|
||||
if (formData.value.productSpuIds) {
|
||||
await formApi.setFieldValue(
|
||||
'productSpuIds',
|
||||
formData.value.productSpuIds,
|
||||
);
|
||||
}
|
||||
if (formData.value.productCategoryIds) {
|
||||
await formApi.setFieldValue(
|
||||
'productCategoryIds',
|
||||
formData.value.productCategoryIds,
|
||||
);
|
||||
}
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
|
||||
@@ -10,7 +10,9 @@ import type {
|
||||
import { computed, nextTick, ref } from 'vue';
|
||||
|
||||
import { useVbenForm, useVbenModal } from '@vben/common-ui';
|
||||
import { PromotionDiscountTypeEnum } from '@vben/constants';
|
||||
import {
|
||||
cloneDeep,
|
||||
convertToInteger,
|
||||
erpCalculatePercentage,
|
||||
formatToFraction,
|
||||
@@ -39,13 +41,6 @@ defineOptions({ name: 'DiscountActivityForm' });
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
/** 折扣类型枚举 */
|
||||
// TODO @puhui999：这里可以使用 biz-mall 里的枚举噢；
|
||||
const PromotionDiscountTypeEnum = {
|
||||
PRICE: { type: 1 }, // 满减
|
||||
PERCENT: { type: 2 }, // 折扣
|
||||
};
|
||||
|
||||
// ================= 表单相关 =================
|
||||
const formData = ref<Partial<MallDiscountActivityApi.DiscountActivity>>({});
|
||||
const getTitle = computed(() => {
|
||||
@@ -243,8 +238,7 @@ const [Modal, modalApi] = useVbenModal({
|
||||
// 提交表单
|
||||
try {
|
||||
// 获取折扣商品配置
|
||||
// TODO @puhui999：structuredClone 执行会报错；
|
||||
const products = structuredClone(
|
||||
const products = cloneDeep(
|
||||
spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
|
||||
) as MallDiscountActivityApi.DiscountProduct[];
|
||||
// 转换金额为分
|
||||
@@ -252,7 +246,7 @@ const [Modal, modalApi] = useVbenModal({
|
||||
item.discountPercent = convertToInteger(item.discountPercent);
|
||||
item.discountPrice = convertToInteger(item.discountPrice);
|
||||
});
|
||||
const data = structuredClone(
|
||||
const data = cloneDeep(
|
||||
await formApi.getValues(),
|
||||
) as MallDiscountActivityApi.DiscountActivity;
|
||||
data.products = products;
|
||||
|
||||
@@ -52,9 +52,21 @@ const [Form, formApi] = useVbenForm({
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
// 在验证前同步 formData.rules 到表单中
|
||||
// TODO @puhui999：选择了分类、或者商品，还是报没选择；
|
||||
// 在验证前同步 formData 中的值到表单中
|
||||
await formApi.setFieldValue('rules', formData.value.rules || []);
|
||||
// 同步商品/分类选择到表单，确保验证时能获取到值
|
||||
if (formData.value.productSpuIds) {
|
||||
await formApi.setFieldValue(
|
||||
'productSpuIds',
|
||||
formData.value.productSpuIds,
|
||||
);
|
||||
}
|
||||
if (formData.value.productCategoryIds) {
|
||||
await formApi.setFieldValue(
|
||||
'productCategoryIds',
|
||||
formData.value.productCategoryIds,
|
||||
);
|
||||
}
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
|
||||
@@ -6,6 +6,7 @@ import type { CropperAvatarProps } from './typing';
|
||||
import { computed, ref, unref, watch, watchEffect } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { ElButton, ElMessage } from 'element-plus';
|
||||
@@ -83,16 +84,16 @@ defineExpose({
|
||||
class="duration-400 absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black bg-opacity-40 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
:style="getImageWrapperStyle"
|
||||
>
|
||||
<!-- TODO @puhui999：可以改成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/components/cropper/cropper-avatar.vue 里的 Icon 么？ -->
|
||||
<span
|
||||
<IconifyIcon
|
||||
icon="lucide:cloud-upload"
|
||||
class="m-auto text-gray-400"
|
||||
:style="{
|
||||
...getImageWrapperStyle,
|
||||
width: getIconWidth,
|
||||
height: getIconWidth,
|
||||
lineHeight: getIconWidth,
|
||||
}"
|
||||
class="icon-[ant-design--cloud-upload-outlined] text-gray-400"
|
||||
></span>
|
||||
/>
|
||||
</div>
|
||||
<!-- 头像图片 -->
|
||||
<img
|
||||
|
||||
@@ -4,6 +4,7 @@ import type { CropendResult, CropperModalProps, CropperType } from './typing';
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
import { dataURLtoBlob, isFunction } from '@vben/utils';
|
||||
|
||||
@@ -112,44 +113,19 @@ async function handleOk() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- TODO @puhui999：antd 版本里是 2/3 宽度，两边要对齐么？ -->
|
||||
<Modal
|
||||
v-bind="$attrs"
|
||||
:confirm-text="$t('ui.cropper.okText')"
|
||||
:fullscreen-button="false"
|
||||
:title="$t('ui.cropper.modalTitle')"
|
||||
class="w-[800px]"
|
||||
class="w-2/3"
|
||||
>
|
||||
<!-- TODO @puhui999：antd 版本有个 h-96，两边要对齐么？ -->
|
||||
<div class="flex">
|
||||
<div class="flex h-96">
|
||||
<!-- 左侧区域 -->
|
||||
<!-- TODO @puhui999：antd 版本是 h-full w-3/5 两边要对齐么？ -->
|
||||
<div class="h-[340px] w-[55%]">
|
||||
<div class="h-full w-3/5">
|
||||
<!-- 裁剪器容器 -->
|
||||
<!-- TODO @puhui999：antd class 简单一点，看看要不要对齐 -->
|
||||
<div
|
||||
class="h-[300px] bg-[#eee]"
|
||||
style="
|
||||
background-image:
|
||||
linear-gradient(
|
||||
45deg,
|
||||
rgb(0 0 0 / 25%) 25%,
|
||||
transparent 0,
|
||||
transparent 75%,
|
||||
rgb(0 0 0 / 25%) 0
|
||||
),
|
||||
linear-gradient(
|
||||
45deg,
|
||||
rgb(0 0 0 / 25%) 25%,
|
||||
transparent 0,
|
||||
transparent 75%,
|
||||
rgb(0 0 0 / 25%) 0
|
||||
);
|
||||
background-position:
|
||||
0 0,
|
||||
12px 12px;
|
||||
background-size: 24px 24px;
|
||||
"
|
||||
class="relative h-[300px] bg-gradient-to-b from-neutral-50 to-neutral-200"
|
||||
>
|
||||
<CropperImage
|
||||
v-if="src"
|
||||
@@ -162,8 +138,7 @@ async function handleOk() {
|
||||
</div>
|
||||
|
||||
<!-- 工具栏 -->
|
||||
<!-- TODO @puhui999：antd 是 mt-4，看看两边要不要对齐 -->
|
||||
<div class="mt-2.5 flex items-center justify-between">
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<ElUpload
|
||||
:before-upload="handleBeforeUpload"
|
||||
:file-list="[]"
|
||||
@@ -174,10 +149,9 @@ async function handleOk() {
|
||||
placement="bottom"
|
||||
>
|
||||
<ElButton size="small" type="primary">
|
||||
<!-- TODO @puhui999：可以改成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/components/cropper/cropper-modal.vue 里的 Icon 么？ -->
|
||||
<template #icon>
|
||||
<div class="flex items-center justify-center">
|
||||
<span class="icon-[ant-design--upload-outlined]"></span>
|
||||
<IconifyIcon icon="lucide:upload" />
|
||||
</div>
|
||||
</template>
|
||||
</ElButton>
|
||||
@@ -192,9 +166,8 @@ async function handleOk() {
|
||||
@click="handlerToolbar('reset')"
|
||||
>
|
||||
<template #icon>
|
||||
<!-- TODO @puhui999：可以改成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/components/cropper/cropper-modal.vue 里的 Icon 么？ -->
|
||||
<div class="flex items-center justify-center">
|
||||
<span class="icon-[ant-design--reload-outlined]"></span>
|
||||
<IconifyIcon icon="lucide:rotate-ccw" />
|
||||
</div>
|
||||
</template>
|
||||
</ElButton>
|
||||
@@ -211,10 +184,7 @@ async function handleOk() {
|
||||
>
|
||||
<template #icon>
|
||||
<div class="flex items-center justify-center">
|
||||
<!-- TODO @puhui999：可以改成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/components/cropper/cropper-modal.vue 里的 Icon 么？ -->
|
||||
<span
|
||||
class="icon-[ant-design--rotate-left-outlined]"
|
||||
></span>
|
||||
<IconifyIcon icon="ant-design:rotate-left-outlined" />
|
||||
</div>
|
||||
</template>
|
||||
</ElButton>
|
||||
@@ -230,11 +200,8 @@ async function handleOk() {
|
||||
@click="handlerToolbar('rotate', 45)"
|
||||
>
|
||||
<template #icon>
|
||||
<!-- TODO @puhui999：可以改成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/components/cropper/cropper-modal.vue 里的 Icon 么？ -->
|
||||
<div class="flex items-center justify-center">
|
||||
<span
|
||||
class="icon-[ant-design--rotate-right-outlined]"
|
||||
></span>
|
||||
<IconifyIcon icon="ant-design:rotate-right-outlined" />
|
||||
</div>
|
||||
</template>
|
||||
</ElButton>
|
||||
@@ -250,9 +217,8 @@ async function handleOk() {
|
||||
@click="handlerToolbar('scaleX')"
|
||||
>
|
||||
<template #icon>
|
||||
<!-- TODO @puhui999：可以改成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/components/cropper/cropper-modal.vue 里的 Icon 么？ -->
|
||||
<div class="flex items-center justify-center">
|
||||
<span class="icon-[vaadin--arrows-long-h]"></span>
|
||||
<IconifyIcon icon="vaadin:arrows-long-h" />
|
||||
</div>
|
||||
</template>
|
||||
</ElButton>
|
||||
@@ -268,9 +234,8 @@ async function handleOk() {
|
||||
@click="handlerToolbar('scaleY')"
|
||||
>
|
||||
<template #icon>
|
||||
<!-- TODO @puhui999：可以改成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/components/cropper/cropper-modal.vue 里的 Icon 么？ -->
|
||||
<div class="flex items-center justify-center">
|
||||
<span class="icon-[vaadin--arrows-long-v]"></span>
|
||||
<IconifyIcon icon="vaadin:arrows-long-v" />
|
||||
</div>
|
||||
</template>
|
||||
</ElButton>
|
||||
@@ -286,9 +251,8 @@ async function handleOk() {
|
||||
@click="handlerToolbar('zoom', 0.1)"
|
||||
>
|
||||
<template #icon>
|
||||
<!-- TODO @puhui999：可以改成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/components/cropper/cropper-modal.vue 里的 Icon 么？ -->
|
||||
<div class="flex items-center justify-center">
|
||||
<span class="icon-[ant-design--zoom-in-outlined]"></span>
|
||||
<IconifyIcon icon="lucide:zoom-in" />
|
||||
</div>
|
||||
</template>
|
||||
</ElButton>
|
||||
@@ -304,9 +268,8 @@ async function handleOk() {
|
||||
@click="handlerToolbar('zoom', -0.1)"
|
||||
>
|
||||
<template #icon>
|
||||
<!-- TODO @puhui999：可以改成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/components/cropper/cropper-modal.vue 里的 Icon 么？ -->
|
||||
<div class="flex items-center justify-center">
|
||||
<span class="icon-[ant-design--zoom-out-outlined]"></span>
|
||||
<IconifyIcon icon="lucide:zoom-out" />
|
||||
</div>
|
||||
</template>
|
||||
</ElButton>
|
||||
@@ -316,16 +279,16 @@ async function handleOk() {
|
||||
</div>
|
||||
|
||||
<!-- 右侧区域 -->
|
||||
<div class="h-[340px] w-[45%]">
|
||||
<div class="h-full w-2/5">
|
||||
<!-- 预览区域 -->
|
||||
<div
|
||||
class="mx-auto h-[220px] w-[220px] overflow-hidden rounded-full border border-gray-200"
|
||||
class="mx-auto h-56 w-56 overflow-hidden rounded-full border border-gray-200"
|
||||
>
|
||||
<img
|
||||
v-if="previewSource"
|
||||
:alt="$t('ui.cropper.preview')"
|
||||
:src="previewSource"
|
||||
class="h-full w-full"
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<!-- 头像组合预览 -->
|
||||
|
||||
@@ -15,9 +15,8 @@ export function useImagesUpload() {
|
||||
default: 5,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
// TODO: @puhui999：@dhb52 其实还是靠 props 默认参数起作用，没能从 formCreate 传递
|
||||
return (props: { maxNumber?: number; multiple?: boolean }) => (
|
||||
setup(props) {
|
||||
return () => (
|
||||
<ImageUpload maxNumber={props.maxNumber} multiple={props.multiple} />
|
||||
);
|
||||
},
|
||||
|
||||
@@ -1,442 +0,0 @@
|
||||
interface TreeHelperConfig {
|
||||
id: string;
|
||||
children: string;
|
||||
pid: string;
|
||||
}
|
||||
|
||||
const DEFAULT_CONFIG: TreeHelperConfig = {
|
||||
id: 'id',
|
||||
children: 'children',
|
||||
pid: 'pid',
|
||||
};
|
||||
export const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
isLeaf: 'leaf',
|
||||
emitPath: false, // 用于 cascader 组件：在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
|
||||
};
|
||||
|
||||
const getConfig = (config: Partial<TreeHelperConfig>) =>
|
||||
Object.assign({}, DEFAULT_CONFIG, config);
|
||||
|
||||
// tree from list
|
||||
export const listToTree = <T = any>(
|
||||
list: any[],
|
||||
config: Partial<TreeHelperConfig> = {},
|
||||
): T[] => {
|
||||
const conf = getConfig(config) as TreeHelperConfig;
|
||||
const nodeMap = new Map();
|
||||
const result: T[] = [];
|
||||
const { id, children, pid } = conf;
|
||||
|
||||
for (const node of list) {
|
||||
node[children] = node[children] || [];
|
||||
nodeMap.set(node[id], node);
|
||||
}
|
||||
for (const node of list) {
|
||||
const parent = nodeMap.get(node[pid]);
|
||||
(parent ? parent.children : result).push(node);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
export const treeToList = <T = any>(
|
||||
tree: any,
|
||||
config: Partial<TreeHelperConfig> = {},
|
||||
): T => {
|
||||
config = getConfig(config);
|
||||
const { children } = config;
|
||||
const result: any = [...tree];
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
const childNodes = result[i][children];
|
||||
if (!childNodes) continue;
|
||||
result.splice(i + 1, 0, ...childNodes);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
export const findNode = <T = any>(
|
||||
tree: any,
|
||||
func: Fn,
|
||||
config: Partial<TreeHelperConfig> = {},
|
||||
): null | T => {
|
||||
config = getConfig(config);
|
||||
const { children } = config;
|
||||
const list = [...tree];
|
||||
for (const node of list) {
|
||||
if (func(node)) return node;
|
||||
const childNodes = node[children];
|
||||
if (childNodes) {
|
||||
list.push(...childNodes);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export const findNodeAll = <T = any>(
|
||||
tree: any,
|
||||
func: Fn,
|
||||
config: Partial<TreeHelperConfig> = {},
|
||||
): T[] => {
|
||||
config = getConfig(config);
|
||||
const { children } = config;
|
||||
const list = [...tree];
|
||||
const result: T[] = [];
|
||||
for (const node of list) {
|
||||
func(node) && result.push(node);
|
||||
const childNodes = node[children];
|
||||
if (childNodes) {
|
||||
list.push(...childNodes);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
export const findPath = <T = any>(
|
||||
tree: any,
|
||||
func: Fn,
|
||||
config: Partial<TreeHelperConfig> = {},
|
||||
): null | T | T[] => {
|
||||
config = getConfig(config);
|
||||
const path: T[] = [];
|
||||
const list = [...tree];
|
||||
const visitedSet = new Set();
|
||||
const { children } = config;
|
||||
while (list.length > 0) {
|
||||
const node = list[0];
|
||||
if (visitedSet.has(node)) {
|
||||
path.pop();
|
||||
list.shift();
|
||||
} else {
|
||||
visitedSet.add(node);
|
||||
const childNodes = node[children];
|
||||
if (childNodes) {
|
||||
list.unshift(...childNodes);
|
||||
}
|
||||
path.push(node);
|
||||
if (func(node)) {
|
||||
return path;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export const findPathAll = (
|
||||
tree: any,
|
||||
func: Fn,
|
||||
config: Partial<TreeHelperConfig> = {},
|
||||
) => {
|
||||
config = getConfig(config);
|
||||
const path: any[] = [];
|
||||
const list = [...tree];
|
||||
const result: any[] = [];
|
||||
const visitedSet = new Set();
|
||||
const { children } = config;
|
||||
while (list.length > 0) {
|
||||
const node = list[0];
|
||||
if (visitedSet.has(node)) {
|
||||
path.pop();
|
||||
list.shift();
|
||||
} else {
|
||||
visitedSet.add(node);
|
||||
const childNodes = node[children];
|
||||
if (childNodes) {
|
||||
list.unshift(...childNodes);
|
||||
}
|
||||
path.push(node);
|
||||
func(node) && result.push([...path]);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
export const filter = <T = any>(
|
||||
tree: T[],
|
||||
func: (n: T) => boolean,
|
||||
config: Partial<TreeHelperConfig> = {},
|
||||
): T[] => {
|
||||
config = getConfig(config);
|
||||
const children = config.children as string;
|
||||
|
||||
function listFilter(list: T[]) {
|
||||
return list
|
||||
.map((node: any) => ({ ...node }))
|
||||
.filter((node) => {
|
||||
node[children] = node[children] && listFilter(node[children]);
|
||||
return func(node) || node[children]?.length > 0;
|
||||
});
|
||||
}
|
||||
|
||||
return listFilter(tree);
|
||||
};
|
||||
|
||||
export const forEach = <T = any>(
|
||||
tree: T[],
|
||||
func: (n: T) => any,
|
||||
config: Partial<TreeHelperConfig> = {},
|
||||
): void => {
|
||||
config = getConfig(config);
|
||||
const list: any[] = [...tree];
|
||||
const { children } = config;
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
// func 返回true就终止遍历，避免大量节点场景下无意义循环，引起浏览器卡顿
|
||||
if (func(list[i])) {
|
||||
return;
|
||||
}
|
||||
children &&
|
||||
list[i][children] &&
|
||||
list.splice(i + 1, 0, ...list[i][children]);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @description: Extract tree specified structure
|
||||
*/
|
||||
export const treeMap = <T = any>(
|
||||
treeData: T[],
|
||||
opt: { children?: string; conversion: Fn },
|
||||
): T[] => {
|
||||
return treeData.map((item) => treeMapEach(item, opt));
|
||||
};
|
||||
|
||||
/**
|
||||
* @description: Extract tree specified structure
|
||||
*/
|
||||
export const treeMapEach = (
|
||||
data: any,
|
||||
{ children = 'children', conversion }: { children?: string; conversion: Fn },
|
||||
) => {
|
||||
const haveChildren =
|
||||
Array.isArray(data[children]) && data[children].length > 0;
|
||||
const conversionData = conversion(data) || {};
|
||||
return haveChildren
|
||||
? {
|
||||
...conversionData,
|
||||
[children]: data[children].map((i: number) =>
|
||||
treeMapEach(i, {
|
||||
children,
|
||||
conversion,
|
||||
}),
|
||||
),
|
||||
}
|
||||
: {
|
||||
...conversionData,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 递归遍历树结构
|
||||
* @param treeDatas 树
|
||||
* @param callBack 回调
|
||||
* @param parentNode 父节点
|
||||
*/
|
||||
export const eachTree = (treeDatas: any[], callBack: Fn, parentNode = {}) => {
|
||||
treeDatas.forEach((element) => {
|
||||
const newNode = callBack(element, parentNode) || element;
|
||||
if (element.children) {
|
||||
eachTree(element.children, callBack, newNode);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 构造树型结构数据
|
||||
* @param {*} data 数据源
|
||||
* @param {*} id id字段 默认 'id'
|
||||
* @param {*} parentId 父节点字段 默认 'parentId'
|
||||
* @param {*} children 孩子节点字段 默认 'children'
|
||||
*/
|
||||
export const handleTree = (
|
||||
data: any[],
|
||||
id?: string,
|
||||
parentId?: string,
|
||||
children?: string,
|
||||
) => {
|
||||
if (!Array.isArray(data)) {
|
||||
console.warn('data must be an array');
|
||||
return [];
|
||||
}
|
||||
const config = {
|
||||
id: id || 'id',
|
||||
parentId: parentId || 'parentId',
|
||||
childrenList: children || 'children',
|
||||
};
|
||||
|
||||
const childrenListMap = {};
|
||||
const nodeIds = {};
|
||||
const tree: any[] = [];
|
||||
|
||||
for (const d of data) {
|
||||
const parentId = d[config.parentId];
|
||||
if (
|
||||
childrenListMap[parentId] === null ||
|
||||
childrenListMap[parentId] === undefined
|
||||
) {
|
||||
childrenListMap[parentId] = [];
|
||||
}
|
||||
nodeIds[d[config.id]] = d;
|
||||
childrenListMap[parentId].push(d);
|
||||
}
|
||||
|
||||
for (const d of data) {
|
||||
const parentId = d[config.parentId];
|
||||
if (nodeIds[parentId] === null || nodeIds[parentId] === undefined) {
|
||||
tree.push(d);
|
||||
}
|
||||
}
|
||||
|
||||
for (const t of tree) {
|
||||
adaptToChildrenList(t);
|
||||
}
|
||||
|
||||
function adaptToChildrenList(o) {
|
||||
if (childrenListMap[o[config.id]] !== null) {
|
||||
o[config.childrenList] = childrenListMap[o[config.id]];
|
||||
}
|
||||
if (o[config.childrenList]) {
|
||||
for (const c of o[config.childrenList]) {
|
||||
adaptToChildrenList(c);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return tree;
|
||||
};
|
||||
|
||||
/**
|
||||
* 构造树型结构数据
|
||||
* @param {*} data 数据源
|
||||
* @param {*} id id字段 默认 'id'
|
||||
* @param {*} parentId 父节点字段 默认 'parentId'
|
||||
* @param {*} children 孩子节点字段 默认 'children'
|
||||
* @param {*} rootId 根Id 默认 0
|
||||
*/
|
||||
// @ts-ignore: 遗留函数，保持原有逻辑不变
|
||||
export const handleTree2 = (data, id, parentId, children, rootId) => {
|
||||
id = id || 'id';
|
||||
parentId = parentId || 'parentId';
|
||||
// children = children || 'children'
|
||||
rootId =
|
||||
rootId ||
|
||||
Math.min(
|
||||
...data.map((item) => {
|
||||
return item[parentId];
|
||||
}),
|
||||
) ||
|
||||
0;
|
||||
// 对源数据深度克隆
|
||||
const cloneData = structuredClone(data);
|
||||
// 循环所有项
|
||||
const treeData = cloneData.filter((father) => {
|
||||
const branchArr = cloneData.filter((child) => {
|
||||
// 返回每一项的子级数组
|
||||
return father[id] === child[parentId];
|
||||
});
|
||||
branchArr.length > 0 ? (father.children = branchArr) : '';
|
||||
// 返回第一层
|
||||
return father[parentId] === rootId;
|
||||
});
|
||||
return treeData === '' ? data : treeData;
|
||||
};
|
||||
|
||||
/**
|
||||
* 校验选中的节点，是否为指定 level
|
||||
*
|
||||
* @param tree 要操作的树结构数据
|
||||
* @param nodeId 需要判断在什么层级的数据
|
||||
* @param level 检查的级别, 默认检查到二级
|
||||
* @return true 是；false 否
|
||||
*/
|
||||
export const checkSelectedNode = (
|
||||
tree: any[],
|
||||
nodeId: any,
|
||||
level = 2,
|
||||
): boolean => {
|
||||
if (tree === undefined || !Array.isArray(tree) || tree.length === 0) {
|
||||
console.warn('tree must be an array');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 校验是否是一级节点
|
||||
if (tree.some((item) => item.id === nodeId)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 递归计数
|
||||
let count = 1;
|
||||
|
||||
// 深层次校验
|
||||
function performAThoroughValidation(arr: any[]): boolean {
|
||||
count += 1;
|
||||
for (const item of arr) {
|
||||
if (item.id === nodeId) {
|
||||
return true;
|
||||
} else if (
|
||||
item.children !== undefined &&
|
||||
item.children.length > 0 &&
|
||||
performAThoroughValidation(item.children)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
for (const item of tree) {
|
||||
count = 1;
|
||||
if (
|
||||
performAThoroughValidation(item.children) && // 找到后对比是否是期望的层级
|
||||
count >= level
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取节点的完整结构
|
||||
* @param tree 树数据
|
||||
* @param nodeId 节点 id
|
||||
*/
|
||||
export const treeToString = (tree: any[], nodeId) => {
|
||||
if (tree === undefined || !Array.isArray(tree) || tree.length === 0) {
|
||||
console.warn('tree must be an array');
|
||||
return '';
|
||||
}
|
||||
// 校验是否是一级节点
|
||||
const node = tree.find((item) => item.id === nodeId);
|
||||
if (node !== undefined) {
|
||||
return node.name;
|
||||
}
|
||||
let str = '';
|
||||
|
||||
function performAThoroughValidation(arr) {
|
||||
if (arr === undefined || !Array.isArray(arr) || arr.length === 0) {
|
||||
return false;
|
||||
}
|
||||
for (const item of arr) {
|
||||
if (item.id === nodeId) {
|
||||
str += ` / ${item.name}`;
|
||||
return true;
|
||||
} else if (item.children !== undefined && item.children.length > 0) {
|
||||
str += ` / ${item.name}`;
|
||||
if (performAThoroughValidation(item.children)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
for (const item of tree) {
|
||||
str = `${item.name}`;
|
||||
if (performAThoroughValidation(item.children)) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return str;
|
||||
};
|
||||
@@ -92,14 +92,10 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
defaultValue: true,
|
||||
},
|
||||
{
|
||||
// TODO: @puhui999：商品关联
|
||||
fieldName: 'spuId',
|
||||
label: '商品关联',
|
||||
component: 'Input',
|
||||
formItemClass: 'col-span-2',
|
||||
componentProps: {
|
||||
placeholder: '请输入商品 SPU 编号',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'sort',
|
||||
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
updateArticle,
|
||||
} from '#/api/mall/promotion/article';
|
||||
import { $t } from '#/locales';
|
||||
import { SpuShowcase } from '#/views/mall/product/spu/components';
|
||||
|
||||
import { useFormSchema } from '../data';
|
||||
|
||||
@@ -41,6 +42,10 @@ const [Form, formApi] = useVbenForm({
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
// 同步商品选择到表单，确保验证时能获取到值
|
||||
if (formData.value?.spuId) {
|
||||
await formApi.setFieldValue('spuId', formData.value.spuId);
|
||||
}
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
@@ -82,6 +87,11 @@ const [Modal, modalApi] = useVbenModal({
|
||||
|
||||
<template>
|
||||
<Modal :title="getTitle" class="w-2/5">
|
||||
<Form class="mx-4" />
|
||||
<Form class="mx-4">
|
||||
<!-- 自定义插槽：商品选择 -->
|
||||
<template #spuId>
|
||||
<SpuShowcase v-model="formData!.spuId" :limit="1" />
|
||||
</template>
|
||||
</Form>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
@@ -49,6 +49,19 @@ const [Form, formApi] = useVbenForm({
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
// 同步商品/分类选择到表单，确保验证时能获取到值
|
||||
if (formData.value.productSpuIds) {
|
||||
await formApi.setFieldValue(
|
||||
'productSpuIds',
|
||||
formData.value.productSpuIds,
|
||||
);
|
||||
}
|
||||
if (formData.value.productCategoryIds) {
|
||||
await formApi.setFieldValue(
|
||||
'productCategoryIds',
|
||||
formData.value.productCategoryIds,
|
||||
);
|
||||
}
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
|
||||
@@ -10,7 +10,9 @@ import type {
|
||||
import { computed, nextTick, ref } from 'vue';
|
||||
|
||||
import { useVbenForm, useVbenModal } from '@vben/common-ui';
|
||||
import { PromotionDiscountTypeEnum } from '@vben/constants';
|
||||
import {
|
||||
cloneDeep,
|
||||
convertToInteger,
|
||||
erpCalculatePercentage,
|
||||
formatToFraction,
|
||||
@@ -37,12 +39,6 @@ import { useFormSchema } from '../data';
|
||||
|
||||
defineOptions({ name: 'DiscountActivityForm' });
|
||||
|
||||
/** 折扣类型枚举 */
|
||||
const PromotionDiscountTypeEnum = {
|
||||
PRICE: { type: 1 }, // 满减
|
||||
PERCENT: { type: 2 }, // 折扣
|
||||
};
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
// ================= 表单相关 =================
|
||||
@@ -243,7 +239,7 @@ const [Modal, modalApi] = useVbenModal({
|
||||
modalApi.lock();
|
||||
try {
|
||||
// 获取折扣商品配置
|
||||
const products = structuredClone(
|
||||
const products = cloneDeep(
|
||||
spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
|
||||
) as MallDiscountActivityApi.DiscountProduct[];
|
||||
|
||||
@@ -253,7 +249,7 @@ const [Modal, modalApi] = useVbenModal({
|
||||
item.discountPrice = convertToInteger(item.discountPrice);
|
||||
});
|
||||
|
||||
const data = structuredClone(
|
||||
const data = cloneDeep(
|
||||
await formApi.getValues(),
|
||||
) as MallDiscountActivityApi.DiscountActivity;
|
||||
data.products = products;
|
||||
|
||||
@@ -52,8 +52,21 @@ const [Form, formApi] = useVbenForm({
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
// 在验证前同步 formData.rules 到表单中
|
||||
// 在验证前同步 formData 中的值到表单中
|
||||
await formApi.setFieldValue('rules', formData.value.rules || []);
|
||||
// 同步商品/分类选择到表单，确保验证时能获取到值
|
||||
if (formData.value.productSpuIds) {
|
||||
await formApi.setFieldValue(
|
||||
'productSpuIds',
|
||||
formData.value.productSpuIds,
|
||||
);
|
||||
}
|
||||
if (formData.value.productCategoryIds) {
|
||||
await formApi.setFieldValue(
|
||||
'productCategoryIds',
|
||||
formData.value.productCategoryIds,
|
||||
);
|
||||
}
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
@@ -65,9 +78,8 @@ const [Modal, modalApi] = useVbenModal({
|
||||
// 使用 formData.value 作为基础，确保 rules 来自 formData
|
||||
const data = { ...values, ...formData.value };
|
||||
if (data.startAndEndTime && Array.isArray(data.startAndEndTime)) {
|
||||
// TODO @puhui999：这里 ele 会告警；antd 不会告警，可能要看看；
|
||||
data.startTime = Number(data.startAndEndTime[0]);
|
||||
data.endTime = Number(data.startAndEndTime[1]);
|
||||
data.startTime = data.startAndEndTime[0];
|
||||
data.endTime = data.startAndEndTime[1];
|
||||
delete data.startAndEndTime;
|
||||
}
|
||||
// 深拷贝 rules 避免修改原始数据
|
||||
|
||||
Reference in New Issue
Block a user