oneos-v5/frontend
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'yudao/dev' into dev

Browse Source
This commit is contained in:
jason
2025-12-29 00:12:30 +08:00
parent 6606dfd40a 6da4a39ff9
commit 64ac25de00
89 changed files with 4805 additions and 4392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@@ -9,7 +9,7 @@
## 🐶 新手必读
- nodejs > 20.12.0 && pnpm > 10.14.0 (强制使用pnpm)
- nodejs > 20.12.0 && pnpm > 10.22.0 (强制使用pnpm)
- 演示地址【Vue3 + element-plus】：<http://dashboard-vue3.yudao.iocoder.cn>
- 演示地址【Vue3 + vben5(ant-design-vue)】：<http://dashboard-vben.yudao.iocoder.cn>
- 演示地址【Vue2 + element-ui】：<http://dashboard.yudao.iocoder.cn>
@@ -41,22 +41,22 @@
| 框架 | 说明 | 版本 |
| --- | --- | --- |
| [Vue](https://staging-cn.vuejs.org/) | vue框架 | 3.5.17 |
| [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 7.1.2 |
| [Vue](https://staging-cn.vuejs.org/) | vue框架 | 3.5.24 |
| [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 7.2.2 |
| [Ant Design Vue](https://www.antdv.com/) | Ant Design Vue | 4.2.6 |
| [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.10.2 |
| [Naive UI](https://www.naiveui.com/) | Naive UI | 2.42.0 |
| [TDesign](https://tdesign.tencent.com/) | TDesign | 1.17.1 |
| [TypeScript](https://www.typescriptlang.org/docs/) | JavaScript 超集 | 5.8.3 |
| [TypeScript](https://www.typescriptlang.org/docs/) | JavaScript 超集 | 5.9.3 |
| [pinia](https://pinia.vuejs.org/) | Vue 存储库替代 vuex5 | 3.0.3 |
| [vueuse](https://vueuse.org/) | 常用工具集 | 13.4.0 |
| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 11.1.7 |
| [vue-router](https://router.vuejs.org/) | Vue 路由 | 4.5.1 |
| [Tailwind CSS](https://tailwindcss.com/) | 原子 CSS | 3.4.17 |
| [Tailwind CSS](https://tailwindcss.com/) | 原子 CSS | 3.4.18 |
| [Iconify](https://iconify.design/) | 图标组件 | 5.0.0 |
| [Iconify](https://icon-sets.iconify.design/) | 在线图标库 | 2.2.354 |
| [Iconify](https://icon-sets.iconify.design/) | 在线图标库 | 2.2.406 |
| [TinyMCE](https://www.tiny.cloud/) | 富文本编辑器 | 6.1.0 |
| [Echarts](https://echarts.apache.org/) | 图表库 | 5.6.0 |
| [Echarts](https://echarts.apache.org/) | 图表库 | 6.0.0 |
| [axios](https://axios-http.com/) | http客户端 | 1.10.0 |
| [dayjs](https://day.js.org/) | 日期处理库 | 1.11.13 |
| [vee-validate](https://vee-validate.logaretm.com/) | 表单验证 | 4.15.1 |

265
apps/web-antd/src/adapter/component/index.ts
View File

@@ -3,15 +3,31 @@
* 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
*/
import type { Component } from 'vue';
import type {
UploadChangeParam,
UploadFile,
UploadProps,
} from 'ant-design-vue';
import type { Component, Ref } from 'vue';
import type { BaseFormComponentType } from '@vben/common-ui';
import type { Recordable } from '@vben/types';
import { defineAsyncComponent, defineComponent, h, ref } from 'vue';
import {
defineAsyncComponent,
defineComponent,
h,
ref,
render,
unref,
watch,
} from 'vue';
import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { $t } from '@vben/locales';
import { isEmpty } from '@vben/utils';
import { notification } from 'ant-design-vue';
@@ -22,9 +38,6 @@ const AutoComplete = defineAsyncComponent(
() => import('ant-design-vue/es/auto-complete'),
);
const Button = defineAsyncComponent(() => import('ant-design-vue/es/button'));
const Cascader = defineAsyncComponent(
() => import('ant-design-vue/es/cascader'),
);
const Checkbox = defineAsyncComponent(
() => import('ant-design-vue/es/checkbox'),
);
@@ -68,7 +81,14 @@ const TimeRangePicker = defineAsyncComponent(() =>
const TreeSelect = defineAsyncComponent(
() => import('ant-design-vue/es/tree-select'),
);
const Cascader = defineAsyncComponent(
() => import('ant-design-vue/es/cascader'),
);
const Upload = defineAsyncComponent(() => import('ant-design-vue/es/upload'));
const Image = defineAsyncComponent(() => import('ant-design-vue/es/image'));
const PreviewGroup = defineAsyncComponent(() =>
import('ant-design-vue/es/image').then((res) => res.ImagePreviewGroup),
);
const withDefaultPlaceholder = <T extends Component>(
component: T,
@@ -104,12 +124,223 @@ const withDefaultPlaceholder = <T extends Component>(
});
};
const withPreviewUpload = () => {
return defineComponent({
name: Upload.name,
emits: ['change', 'update:modelValue'],
setup: (
props: any,
{ attrs, slots, emit }: { attrs: any; emit: any; slots: any },
) => {
const previewVisible = ref<boolean>(false);
const placeholder = attrs?.placeholder || $t(`ui.placeholder.upload`);
const listType = attrs?.listType || attrs?.['list-type'] || 'text';
const fileList = ref<UploadProps['fileList']>(
attrs?.fileList || attrs?.['file-list'] || [],
);
const handleChange = async (event: UploadChangeParam) => {
fileList.value = event.fileList;
emit('change', event);
emit(
'update:modelValue',
event.fileList?.length ? fileList.value : undefined,
);
};
const handlePreview = async (file: UploadFile) => {
previewVisible.value = true;
await previewImage(file, previewVisible, fileList);
};
const renderUploadButton = (): any => {
const isDisabled = attrs.disabled;
// 如果禁用，不渲染上传按钮
if (isDisabled) {
return null;
}
// 否则渲染默认上传按钮
return isEmpty(slots)
? createDefaultSlotsWithUpload(listType, placeholder)
: slots;
};
// 可以监听到表单API设置的值
watch(
() => attrs.modelValue,
(res) => {
fileList.value = res;
},
);
return () =>
h(
Upload,
{
...props,
...attrs,
fileList: fileList.value,
onChange: handleChange,
onPreview: handlePreview,
},
renderUploadButton(),
);
},
});
};
const createDefaultSlotsWithUpload = (
listType: string,
placeholder: string,
) => {
switch (listType) {
case 'picture-card': {
return {
default: () => placeholder,
};
}
default: {
return {
default: () =>
h(
Button,
{
icon: h(IconifyIcon, {
icon: 'ant-design:upload-outlined',
class: 'mb-1 size-4',
}),
},
() => placeholder,
),
};
}
}
};
const previewImage = async (
file: UploadFile,
visible: Ref<boolean>,
fileList: Ref<UploadProps['fileList']>,
) => {
// 检查是否为图片文件的辅助函数
const isImageFile = (file: UploadFile): boolean => {
const imageExtensions = new Set([
'bmp',
'gif',
'jpeg',
'jpg',
'png',
'webp',
]);
if (file.url) {
const ext = file.url?.split('.').pop()?.toLowerCase();
return ext ? imageExtensions.has(ext) : false;
}
if (!file.type) {
const ext = file.name?.split('.').pop()?.toLowerCase();
return ext ? imageExtensions.has(ext) : false;
}
return file.type.startsWith('image/');
};
// 如果当前文件不是图片，直接打开
if (!isImageFile(file)) {
if (file.url) {
window.open(file.url, '_blank');
} else if (file.preview) {
window.open(file.preview, '_blank');
} else {
console.warn('无法打开文件，没有可用的URL或预览地址');
}
return;
}
// 对于图片文件，继续使用预览组
const [ImageComponent, PreviewGroupComponent] = await Promise.all([
Image,
PreviewGroup,
]);
const getBase64 = (file: File) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.addEventListener('load', () => resolve(reader.result));
reader.addEventListener('error', (error) => reject(error));
});
};
// 从fileList中过滤出所有图片文件
const imageFiles = (unref(fileList) || []).filter((element) =>
isImageFile(element),
);
// 为所有没有预览地址的图片生成预览
for (const imgFile of imageFiles) {
if (!imgFile.url && !imgFile.preview && imgFile.originFileObj) {
imgFile.preview = (await getBase64(imgFile.originFileObj)) as string;
}
}
const container: HTMLElement | null = document.createElement('div');
document.body.append(container);
// 用于追踪组件是否已卸载
let isUnmounted = false;
const PreviewWrapper = {
setup() {
return () => {
if (isUnmounted) return null;
return h(
PreviewGroupComponent,
{
class: 'hidden',
preview: {
visible: visible.value,
// 设置初始显示的图片索引
current: imageFiles.findIndex((f) => f.uid === file.uid),
onVisibleChange: (value: boolean) => {
visible.value = value;
if (!value) {
// 延迟清理，确保动画完成
setTimeout(() => {
if (!isUnmounted && container) {
isUnmounted = true;
render(null, container);
container.remove();
}
}, 300);
}
},
},
},
() =>
// 渲染所有图片文件
imageFiles.map((imgFile) =>
h(ImageComponent, {
key: imgFile.uid,
src: imgFile.url || imgFile.preview,
}),
),
);
};
},
};
render(h(PreviewWrapper), container);
};
// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
export type ComponentType =
| 'ApiCascader'
| 'ApiSelect'
| 'ApiTreeSelect'
| 'AutoComplete'
| 'Cascader'
| 'Checkbox'
| 'CheckboxGroup'
| 'DatePicker'
@@ -143,21 +374,13 @@ async function initComponentAdapter() {
// 如果你的组件体积比较大，可以使用异步加载
// Button: () =>
// import('xxx').then((res) => res.Button),
ApiCascader: withDefaultPlaceholder(
{
...ApiComponent,
name: 'ApiCascader',
},
'select',
{
component: Cascader,
fieldNames: { label: 'label', value: 'value', children: 'children' },
loadingSlot: 'suffixIcon',
modelPropName: 'value',
optionsPropName: 'treeData',
visibleEvent: 'onVisibleChange',
},
),
ApiCascader: withDefaultPlaceholder(ApiComponent, 'select', {
component: Cascader,
fieldNames: { label: 'label', value: 'value', children: 'children' },
loadingSlot: 'suffixIcon',
modelPropName: 'value',
visibleEvent: 'onVisibleChange',
}),
ApiSelect: withDefaultPlaceholder(
{
...ApiComponent,
@@ -187,6 +410,7 @@ async function initComponentAdapter() {
},
),
AutoComplete,
Cascader,
Checkbox,
CheckboxGroup,
DatePicker,
@@ -221,6 +445,7 @@ async function initComponentAdapter() {
TimeRangePicker,
TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
Upload,
PreviewUpload: withPreviewUpload(),
FileUpload,
ImageUpload,
};

5
apps/web-antd/src/adapter/vxe-table.ts
View File

@@ -84,9 +84,10 @@ setupVbenVxeTable({
// 表格配置项可以用 cellRender: { name: 'CellImage' },
vxeUI.renderer.add('CellImage', {
renderTableDefault(_renderOpts, params) {
renderTableDefault(renderOpts, params) {
const { props } = renderOpts;
const { column, row } = params;
return h(Image, { src: row[column.field] });
return h(Image, { src: row[column.field], ...props });
},
});

1
apps/web-antd/src/api/bpm/model/index.ts
View File

@@ -30,6 +30,7 @@ export namespace BpmModelApi {
deploymentTime: number;
suspensionState: number;
formType?: number;
formCustomCreatePath?: string;
formCustomViewPath?: string;
formFields?: string[];
}

57
apps/web-antd/src/components/upload/file-upload.vue
View File

@@ -51,12 +51,12 @@ const { getStringAccept } = useUploadType({
maxSizeRef: maxSize,
});
// 计算当前绑定的值，优先使用 modelValue
/** 计算当前绑定的值，优先使用 modelValue */
const currentValue = computed(() => {
return props.modelValue === undefined ? props.value : props.modelValue;
});
// 判断是否使用 modelValue
/** 判断是否使用 modelValue */
const isUsingModelValue = computed(() => {
return props.modelValue !== undefined;
});
@@ -82,19 +82,21 @@ watch(
} else {
value.push(v);
}
fileList.value = value.map((item, i) => {
if (item && isString(item)) {
return {
uid: `${-i}`,
name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
status: UploadResultStatus.DONE,
url: item,
};
} else if (item && isObject(item)) {
return item;
}
return null;
}) as UploadProps['fileList'];
fileList.value = value
.map((item, i) => {
if (item && isString(item)) {
return {
uid: `${-i}`,
name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
status: UploadResultStatus.DONE,
url: item,
};
} else if (item && isObject(item)) {
return item;
}
return null;
})
.filter(Boolean) as UploadProps['fileList'];
}
if (!isFirstRender.value) {
emit('change', value);
@@ -107,6 +109,7 @@ watch(
},
);
/** 处理文件删除 */
async function handleRemove(file: UploadFile) {
if (fileList.value) {
const index = fileList.value.findIndex((item) => item.uid === file.uid);
@@ -120,17 +123,17 @@ async function handleRemove(file: UploadFile) {
}
}
// 处理文件预览
/** 处理文件预览 */
function handlePreview(file: UploadFile) {
emit('preview', file);
}
// 处理文件数量超限
/** 处理文件数量超限 */
function handleExceed() {
message.error($t('ui.upload.maxNumber', [maxNumber.value]));
}
// 处理上传错误
/** 处理上传错误 */
function handleUploadError(error: any) {
console.error('上传错误:', error);
message.error($t('ui.upload.uploadError'));
@@ -138,6 +141,11 @@ function handleUploadError(error: any) {
uploadNumber.value = Math.max(0, uploadNumber.value - 1);
}
/**
* 上传前校验
* @param file 待上传的文件
* @returns 是否允许上传
*/
async function beforeUpload(file: File) {
const fileContent = await file.text();
emit('returnText', fileContent);
@@ -171,7 +179,8 @@ async function beforeUpload(file: File) {
return true;
}
async function customRequest(info: UploadRequestOption<any>) {
/** 自定义上传请求 */
async function customRequest(info: UploadRequestOption) {
let { api } = props;
if (!api || !isFunction(api)) {
api = useUpload(props.directory).httpRequest;
@@ -196,7 +205,11 @@ async function customRequest(info: UploadRequestOption<any>) {
}
}
// 处理上传成功
/**
* 处理上传成功
* @param res 上传响应结果
* @param file 上传的文件
*/
function handleUploadSuccess(res: any, file: File) {
// 删除临时文件
const index = fileList.value?.findIndex((item) => item.name === file.name);
@@ -228,6 +241,10 @@ function handleUploadSuccess(res: any, file: File) {
}
}
/**
* 获取当前文件列表的值
* @returns 文件 URL 列表或字符串
*/
function getValue() {
const list = (fileList.value || [])
.filter((item) => item?.status === UploadResultStatus.DONE)

58
apps/web-antd/src/components/upload/image-upload.vue
View File

@@ -55,12 +55,12 @@ const { getStringAccept } = useUploadType({
maxSizeRef: maxSize,
});
// 计算当前绑定的值，优先使用 modelValue
/** 计算当前绑定的值，优先使用 modelValue */
const currentValue = computed(() => {
return props.modelValue === undefined ? props.value : props.modelValue;
});
// 判断是否使用 modelValue
/** 判断是否使用 modelValue */
const isUsingModelValue = computed(() => {
return props.modelValue !== undefined;
});
@@ -89,19 +89,21 @@ watch(
} else {
value.push(v);
}
fileList.value = value.map((item, i) => {
if (item && isString(item)) {
return {
uid: `${-i}`,
name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
status: UploadResultStatus.DONE,
url: item,
};
} else if (item && isObject(item)) {
return item;
}
return null;
}) as UploadProps['fileList'];
fileList.value = value
.map((item, i) => {
if (item && isString(item)) {
return {
uid: `${-i}`,
name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
status: UploadResultStatus.DONE,
url: item,
};
} else if (item && isObject(item)) {
return item;
}
return null;
})
.filter(Boolean) as UploadProps['fileList'];
}
if (!isFirstRender.value) {
emit('change', value);
@@ -114,6 +116,7 @@ watch(
},
);
/** 将文件转换为 Base64 格式 */
function getBase64<T extends ArrayBuffer | null | string>(file: File) {
return new Promise<T>((resolve, reject) => {
const reader = new FileReader();
@@ -125,6 +128,7 @@ function getBase64<T extends ArrayBuffer | null | string>(file: File) {
});
}
/** 处理图片预览 */
async function handlePreview(file: UploadFile) {
if (!file.url && !file.preview) {
file.preview = await getBase64<string>(file.originFileObj!);
@@ -138,6 +142,7 @@ async function handlePreview(file: UploadFile) {
);
}
/** 处理文件删除 */
async function handleRemove(file: UploadFile) {
if (fileList.value) {
const index = fileList.value.findIndex((item) => item.uid === file.uid);
@@ -151,11 +156,17 @@ async function handleRemove(file: UploadFile) {
}
}
/** 关闭预览弹窗 */
function handleCancel() {
previewOpen.value = false;
previewTitle.value = '';
}
/**
* 上传前校验
* @param file 待上传的文件
* @returns 是否允许上传
*/
async function beforeUpload(file: File) {
// 检查文件数量限制
if (fileList.value!.length >= props.maxNumber) {
@@ -186,7 +197,8 @@ async function beforeUpload(file: File) {
return true;
}
async function customRequest(info: UploadRequestOption<any>) {
/** 自定义上传请求 */
async function customRequest(info: UploadRequestOption) {
let { api } = props;
if (!api || !isFunction(api)) {
api = useUpload(props.directory).httpRequest;
@@ -211,7 +223,11 @@ async function customRequest(info: UploadRequestOption<any>) {
}
}
// 处理上传成功
/**
* 处理上传成功
* @param res 上传响应结果
* @param file 上传的文件
*/
function handleUploadSuccess(res: any, file: File) {
// 删除临时文件
const index = fileList.value?.findIndex((item) => item.name === file.name);
@@ -243,14 +259,18 @@ function handleUploadSuccess(res: any, file: File) {
}
}
// 处理上传错误
/** 处理上传错误 */
function handleUploadError(error: any) {
console.error('上传错误:', error);
message.error('上传错误！！！');
message.error($t('ui.upload.uploadError'));
// 上传失败时减少计数器
uploadNumber.value = Math.max(0, uploadNumber.value - 1);
}
/**
* 获取当前文件列表的值
* @returns 文件 URL 列表或字符串
*/
function getValue() {
const list = (fileList.value || [])
.filter((item) => item?.status === UploadResultStatus.DONE)

32
apps/web-antd/src/components/upload/input-upload.vue
View File

@@ -6,7 +6,7 @@ import type { FileUploadProps } from './typing';
import { computed } from 'vue';
import { useVModel } from '@vueuse/core';
import { Col, Input, Row, Textarea } from 'ant-design-vue';
import { Input, Textarea } from 'ant-design-vue';
import FileUpload from './file-upload.vue';
@@ -30,6 +30,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
passive: true,
});
/** 处理文件内容返回 */
function handleReturnText(text: string) {
modelValue.value = text;
emits('change', modelValue.value);
@@ -37,6 +38,7 @@ function handleReturnText(text: string) {
emits('update:modelValue', modelValue.value);
}
/** 计算输入框属性 */
const inputProps = computed(() => {
return {
...props.inputProps,
@@ -44,6 +46,7 @@ const inputProps = computed(() => {
};
});
/** 计算文本域属性 */
const textareaProps = computed(() => {
return {
...props.textareaProps,
@@ -51,6 +54,7 @@ const textareaProps = computed(() => {
};
});
/** 计算文件上传属性 */
const fileUploadProps = computed(() => {
return {
...props.fileUploadProps,
@@ -58,17 +62,17 @@ const fileUploadProps = computed(() => {
});
</script>
<template>
<Row>
<Col :span="18">
<Input readonly v-if="inputType === 'input'" v-bind="inputProps" />
<Textarea readonly v-else :row="4" v-bind="textareaProps" />
</Col>
<Col :span="6">
<FileUpload
class="ml-4"
v-bind="fileUploadProps"
@return-text="handleReturnText"
/>
</Col>
</Row>
<div class="w-full">
<Input v-if="inputType === 'input'" readonly v-bind="inputProps">
<template #suffix>
<FileUpload v-bind="fileUploadProps" @return-text="handleReturnText" />
</template>
</Input>
<div v-else class="relative w-full">
<Textarea readonly :rows="4" v-bind="textareaProps" />
<div class="absolute bottom-2 right-2">
<FileUpload v-bind="fileUploadProps" @return-text="handleReturnText" />
</div>
</div>
</div>
</template>

23
apps/web-antd/src/components/upload/typing.ts
View File

@@ -12,28 +12,21 @@ export enum UploadResultStatus {
export type UploadListType = 'picture' | 'picture-card' | 'text';
export interface FileUploadProps {
// 根据后缀，或者其他
accept?: string[];
accept?: string[]; // 根据后缀，或者其他
api?: (
file: File,
onUploadProgress?: AxiosProgressEvent,
) => Promise<AxiosResponse<any>>;
// 上传的目录
directory?: string;
) => Promise<AxiosResponse>;
directory?: string; // 上传的目录
disabled?: boolean;
drag?: boolean; // 是否支持拖拽上传
helpText?: string;
listType?: UploadListType;
// 最大数量的文件，Infinity不限制
maxNumber?: number;
maxNumber?: number; // 最大数量的文件，Infinity不限制
modelValue?: string | string[]; // v-model 支持
// 文件最大多少MB
maxSize?: number;
// 是否支持多选
multiple?: boolean;
// support xxx.xxx.xx
resultField?: string;
// 是否显示下面的描述
showDescription?: boolean;
maxSize?: number; // 文件最大多少MB
multiple?: boolean; // 是否支持多选
resultField?: string; // support xxx.xxx.xx
showDescription?: boolean; // 是否显示下面的描述
value?: string | string[];
}

14
apps/web-antd/src/components/upload/use-upload.ts
View File

@@ -22,6 +22,14 @@ enum UPLOAD_TYPE {
SERVER = 'server',
}
/**
* 上传类型钩子函数
* @param acceptRef 接受的文件类型
* @param helpTextRef 帮助文本
* @param maxNumberRef 最大文件数量
* @param maxSizeRef 最大文件大小
* @returns 文件类型限制和帮助文本的计算属性
*/
export function useUploadType({
acceptRef,
helpTextRef,
@@ -78,7 +86,11 @@ export function useUploadType({
return { getAccept, getStringAccept, getHelpText };
}
// TODO @芋艿：目前保持和 admin-vue3 一致，后续可能重构
/**
* 上传钩子函数
* @param directory 上传目录
* @returns 上传 URL 和自定义上传方法
*/
export function useUpload(directory?: string) {
// 后端上传地址
const uploadUrl = getUploadUrl();

2
apps/web-antd/src/views/_core/profile/modules/user-social.vue
View File

@@ -100,7 +100,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
toolbarConfig: {
enabled: false,
},
} as VxeTableGridOptions<SystemSocialUserApi.SocialUser>,
},
});
/** 解绑账号 */

39
apps/web-antd/src/views/bpm/oa/leave/create.vue
View File

@@ -3,6 +3,7 @@ import type { BpmOALeaveApi } from '#/api/bpm/oa/leave';
import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
import { computed, onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { confirm, Page, useVbenForm } from '@vben/common-ui';
import { BpmCandidateStrategyEnum, BpmNodeIdEnum } from '@vben/constants';
@@ -13,7 +14,7 @@ import { Button, Card, message, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
import { getProcessDefinition } from '#/api/bpm/definition';
import { createLeave, updateLeave } from '#/api/bpm/oa/leave';
import { createLeave, getLeave, updateLeave } from '#/api/bpm/oa/leave';
import { getApprovalDetail as getApprovalDetailApi } from '#/api/bpm/processInstance';
import { $t } from '#/locales';
import { router } from '#/router';
@@ -22,6 +23,7 @@ import ProcessInstanceTimeline from '#/views/bpm/processInstance/detail/modules/
import { useFormSchema } from './data';
const { closeCurrentTab } = useTabs();
const { query } = useRoute();
const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@@ -35,7 +37,7 @@ const processDefinitionId = ref('');
const formData = ref<BpmOALeaveApi.Leave>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['请假'])
? '重新发起请假'
: $t('ui.actionTitle.create', ['请假']);
});
@@ -157,6 +159,34 @@ function selectUserConfirm(id: string, userList: any[]) {
startUserSelectAssignees.value[id] = userList?.map((item: any) => item.id);
}
/** 获取请假数据，用于重新发起时自动填充 */
async function getDetail(id: number) {
try {
formLoading.value = true;
const data = await getLeave(id);
if (!data) {
message.error('重新发起请假失败，原因：请假数据不存在');
return;
}
formData.value = {
...formData.value,
id: data.id,
type: data.type,
reason: data.reason,
startTime: data.startTime,
endTime: data.endTime,
} as BpmOALeaveApi.Leave;
await formApi.setValues({
type: data.type,
reason: data.reason,
startTime: data.startTime,
endTime: data.endTime,
});
} finally {
formLoading.value = false;
}
}
/** 审批相关：预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次, formData.value可改成实际业务中的特定字段 */
watch(
formData.value as object,
@@ -190,6 +220,11 @@ onMounted(async () => {
processDefinitionId.value = processDefinitionDetail.id;
startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks;
// 如果是重新发起，则加载请假数据
if (query.id) {
await getDetail(Number(query.id));
}
await getApprovalDetail();
});
</script>

2
apps/web-antd/src/views/bpm/oa/leave/data.ts
View File

@@ -168,7 +168,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
{
title: '操作',
width: 220,
width: 240,
fixed: 'right',
slots: { default: 'actions' },
},

19
apps/web-antd/src/views/bpm/oa/leave/index.vue
View File

@@ -33,6 +33,16 @@ function handleCreate() {
});
}
/** 重新发起请假 */
function handleReCreate(row: BpmOALeaveApi.Leave) {
router.push({
name: 'OALeaveCreate',
query: {
id: row.id,
},
});
}
/** 取消请假 */
function handleCancel(row: BpmOALeaveApi.Leave) {
prompt({
@@ -161,9 +171,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
type: 'link',
danger: true,
icon: ACTION_ICON.DELETE,
ifShow: row.result === BpmProcessInstanceStatus.RUNNING,
ifShow: row.status === BpmProcessInstanceStatus.RUNNING,
onClick: handleCancel.bind(null, row),
},
{
label: '重新发起',
type: 'link',
icon: ACTION_ICON.ADD,
ifShow: row.status !== BpmProcessInstanceStatus.RUNNING,
onClick: handleReCreate.bind(null, row),
},
]"
/>
</template>

1
apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
View File

@@ -169,6 +169,7 @@ async function initProcessInfo(row: any, formVariables?: any) {
path: row.formCustomCreatePath,
});
// 返回选择流程
// TODO @jason：这里为啥要有个 cancel 事件哈？目前看 vue3 + element-plus 貌似不需要呀；
emit('cancel');
}
}

33
apps/web-antd/src/views/bpm/processInstance/index.vue
View File

@@ -5,7 +5,11 @@ import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
import { h } from 'vue';
import { DocAlert, Page, prompt } from '@vben/common-ui';
import { BpmProcessInstanceStatus, DICT_TYPE } from '@vben/constants';
import {
BpmModelFormType,
BpmProcessInstanceStatus,
DICT_TYPE,
} from '@vben/constants';
import { Button, message, Textarea } from 'ant-design-vue';
@@ -37,23 +41,34 @@ function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
}
/** 重新发起流程 */
async function handleCreate(row: BpmProcessInstanceApi.ProcessInstance) {
// 如果是【业务表单】，不支持重新发起
async function handleCreate(row?: BpmProcessInstanceApi.ProcessInstance) {
if (row?.id) {
const processDefinitionDetail = await getProcessDefinition(
row.processDefinitionId,
);
if (processDefinitionDetail.formType === 20) {
message.error(
'重新发起流程失败，原因：该流程使用业务表单，不支持重新发起',
);
if (processDefinitionDetail?.formType === BpmModelFormType.CUSTOM) {
if (!processDefinitionDetail.formCustomCreatePath) {
message.error('未配置业务表单的提交路由，无法重新发起');
return;
}
await router.push({
path: processDefinitionDetail.formCustomCreatePath,
query: {
id: row.businessKey,
},
});
return;
} else if (processDefinitionDetail?.formType === BpmModelFormType.NORMAL) {
await router.push({
name: 'BpmProcessInstanceCreate',
query: { processInstanceId: row.id },
});
return;
}
}
// 跳转发起流程界面
await router.push({
name: 'BpmProcessInstanceCreate',
query: { processInstanceId: row?.id },
query: row?.id ? { processInstanceId: row.id } : {},
});
}

148
apps/web-antd/src/views/crm/statistics/customer/chartOptions.ts
View File

@@ -1,17 +1,34 @@
import { DICT_TYPE } from '@vben/constants';
import { getDictLabel } from '@vben/hooks';
const getLegend = (extra: Record<string, any> = {}) => ({
top: 10,
...extra,
});
const getGrid = (extra: Record<string, any> = {}) => ({
left: 20,
right: 20,
bottom: 20,
containLabel: true,
...extra,
});
const getTooltip = (extra: Record<string, any> = {}) => ({
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
...extra,
});
export function getChartOptions(activeTabName: any, res: any): any {
switch (activeTabName) {
// 客户转化率分析
case 'conversionStat': {
return {
grid: {
left: 20,
right: 40, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '客户转化率',
@@ -40,12 +57,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '客户转化率分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
yAxis: {
type: 'value',
name: '转化率(%)',
@@ -59,14 +71,13 @@ export function getChartOptions(activeTabName: any, res: any): any {
}
case 'customerSummary': {
return {
grid: {
bottom: '5%',
containLabel: true,
grid: getGrid({
bottom: '8%',
left: '5%',
right: '5%',
top: '5 %',
},
legend: {},
top: 80,
}),
legend: getLegend(),
series: [
{
name: '新增客户数',
@@ -92,12 +103,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '客户总量分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
yAxis: [
{
type: 'value',
@@ -134,13 +140,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
};
});
return {
grid: {
left: 20,
right: 40, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '成交周期(天)',
@@ -166,12 +167,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
yAxis: [
{
type: 'value',
@@ -208,13 +204,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
};
});
return {
grid: {
left: 20,
right: 40, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '成交周期(天)',
@@ -240,12 +231,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
yAxis: [
{
type: 'value',
@@ -277,13 +263,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
const customerDealCycleByDate = res.customerDealCycleByDate;
const customerDealCycleByUser = res.customerDealCycleByUser;
return {
grid: {
left: 20,
right: 40, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '成交周期(天)',
@@ -309,12 +290,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
yAxis: [
{
type: 'value',
@@ -342,15 +318,13 @@ export function getChartOptions(activeTabName: any, res: any): any {
},
};
}
// 客户跟进次数分析
case 'followUpSummary': {
return {
grid: {
left: 20,
grid: getGrid({
right: 30, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
}),
legend: getLegend(),
series: [
{
name: '跟进客户数',
@@ -376,12 +350,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '客户跟进次数分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
yAxis: [
{
type: 'value',
@@ -412,20 +381,21 @@ export function getChartOptions(activeTabName: any, res: any): any {
},
};
}
// 客户跟进方式分析
case 'followUpType': {
return {
title: {
text: '客户跟进方式分析',
left: 'center',
},
legend: {
orient: 'vertical',
legend: getLegend({
left: 'left',
},
tooltip: {
}),
tooltip: getTooltip({
trigger: 'item',
axisPointer: undefined,
formatter: '{b} : {c}% ',
},
}),
toolbox: {
feature: {
saveAsImage: { show: true, name: '客户跟进方式分析' }, // 保存为图片
@@ -458,13 +428,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
}
case 'poolSummary': {
return {
grid: {
left: 20,
right: 40, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '进入公海客户数',
@@ -490,12 +455,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '公海客户分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
yAxis: [
{
type: 'value',

62
apps/web-antd/src/views/crm/statistics/funnel/chartOptions.ts
View File

@@ -1,5 +1,26 @@
import { erpCalculatePercentage } from '@vben/utils';
const getLegend = (extra: Record<string, any> = {}) => ({
top: 10,
...extra,
});
const getGrid = (extra: Record<string, any> = {}) => ({
left: 20,
right: 20,
bottom: 20,
containLabel: true,
...extra,
});
const getTooltip = (extra: Record<string, any> = {}) => ({
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
...extra,
});
export function getChartOptions(
activeTabName: any,
active: boolean,
@@ -9,26 +30,19 @@ export function getChartOptions(
case 'businessInversionRateSummary': {
return {
color: ['#6ca2ff', '#6ac9d7', '#ff7474'],
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
},
},
legend: {
tooltip: getTooltip(),
legend: getLegend({
data: ['赢单转化率', '商机总数', '赢单商机数'],
bottom: '0px',
itemWidth: 14,
},
grid: {
}),
grid: getGrid({
top: '40px',
left: '40px',
right: '40px',
bottom: '40px',
containLabel: true,
borderColor: '#fff',
},
}),
xAxis: [
{
type: 'category',
@@ -117,13 +131,11 @@ export function getChartOptions(
}
case 'businessSummary': {
return {
grid: {
grid: getGrid({
left: 30,
right: 30, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
}),
legend: getLegend(),
series: [
{
name: '新增商机数量',
@@ -149,12 +161,7 @@ export function getChartOptions(
saveAsImage: { show: true, name: '新增商机分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
yAxis: [
{
type: 'value',
@@ -211,10 +218,11 @@ export function getChartOptions(
title: {
text: '销售漏斗',
},
tooltip: {
tooltip: getTooltip({
trigger: 'item',
axisPointer: undefined,
formatter: '{a} <br/>{b}',
},
}),
toolbox: {
feature: {
dataView: { readOnly: false },
@@ -222,9 +230,9 @@ export function getChartOptions(
saveAsImage: {},
},
},
legend: {
legend: getLegend({
data: ['客户', '商机', '赢单'],
},
}),
series: [
{
name: '销售漏斗',

55
apps/web-antd/src/views/crm/statistics/performance/chartOptions.ts
View File

@@ -1,14 +1,30 @@
const getLegend = (extra: Record<string, any> = {}) => ({
top: 10,
...extra,
});
const getGrid = (extra: Record<string, any> = {}) => ({
left: 20,
right: 20,
bottom: 20,
containLabel: true,
...extra,
});
const getTooltip = (extra: Record<string, any> = {}) => ({
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
...extra,
});
export function getChartOptions(activeTabName: any, res: any): any {
switch (activeTabName) {
case 'ContractCountPerformance': {
return {
grid: {
left: 20,
right: 20,
bottom: 20,
containLabel: true,
},
legend: {},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '当月合同数量（个）',
@@ -65,12 +81,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '客户总量分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
yAxis: [
{
type: 'value',
@@ -131,13 +142,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
}
case 'ContractPricePerformance': {
return {
grid: {
left: 20,
right: 20,
bottom: 20,
containLabel: true,
},
legend: {},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '当月合同金额（元）',
@@ -260,13 +266,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
}
case 'ReceivablePricePerformance': {
return {
grid: {
left: 20,
right: 20,
bottom: 20,
containLabel: true,
},
legend: {},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '当月回款金额（元）',

425
apps/web-antd/src/views/crm/statistics/portrait/chartOptions.ts
View File

@@ -13,6 +13,71 @@ function areaReplace(areaName: string) {
.replace('省', '');
}
const getPieTooltip = (extra: Record<string, any> = {}) => ({
trigger: 'item',
...extra,
});
const getPieLegend = (extra: Record<string, any> = {}) => ({
orient: 'vertical',
left: 'left',
...extra,
});
const getPieSeries = (name: string, data: any[]) => ({
name,
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data,
});
const getPiePanel = ({
data,
legendExtra,
seriesName,
title,
tooltipExtra,
}: {
data: any[];
legendExtra?: Record<string, any>;
seriesName: string;
title: string;
tooltipExtra?: Record<string, any>;
}) => ({
title: {
text: title,
left: 'center',
},
tooltip: getPieTooltip(tooltipExtra),
legend: getPieLegend(legendExtra),
toolbox: {
feature: {
saveAsImage: { show: true, name: title },
},
},
series: [getPieSeries(seriesName, data)],
});
export function getChartOptions(activeTabName: any, res: any): any {
switch (activeTabName) {
case 'area': {
@@ -111,326 +176,62 @@ export function getChartOptions(activeTabName: any, res: any): any {
}
case 'industry': {
return {
left: {
title: {
text: '全部客户',
left: 'center',
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
},
toolbox: {
feature: {
saveAsImage: { show: true, name: '全部客户' }, // 保存为图片
},
},
series: [
{
name: '全部客户',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: res.map((r: any) => {
return {
name: getDictLabel(
DICT_TYPE.CRM_CUSTOMER_INDUSTRY,
r.industryId,
),
value: r.customerCount,
};
}),
},
],
},
right: {
title: {
text: '成交客户',
left: 'center',
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
},
toolbox: {
feature: {
saveAsImage: { show: true, name: '成交客户' }, // 保存为图片
},
},
series: [
{
name: '成交客户',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: res.map((r: any) => {
return {
name: getDictLabel(
DICT_TYPE.CRM_CUSTOMER_INDUSTRY,
r.industryId,
),
value: r.dealCount,
};
}),
},
],
},
left: getPiePanel({
title: '全部客户',
seriesName: '全部客户',
data: res.map((r: any) => ({
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, r.industryId),
value: r.customerCount,
})),
}),
right: getPiePanel({
title: '成交客户',
seriesName: '成交客户',
data: res.map((r: any) => ({
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, r.industryId),
value: r.dealCount,
})),
}),
};
}
case 'level': {
return {
left: {
title: {
text: '全部客户',
left: 'center',
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
},
toolbox: {
feature: {
saveAsImage: { show: true, name: '全部客户' }, // 保存为图片
},
},
series: [
{
name: '全部客户',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: res.map((r: any) => {
return {
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level),
value: r.customerCount,
};
}),
},
],
},
right: {
title: {
text: '成交客户',
left: 'center',
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
},
toolbox: {
feature: {
saveAsImage: { show: true, name: '成交客户' }, // 保存为图片
},
},
series: [
{
name: '成交客户',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: res.map((r: any) => {
return {
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level),
value: r.dealCount,
};
}),
},
],
},
left: getPiePanel({
title: '全部客户',
seriesName: '全部客户',
data: res.map((r: any) => ({
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level),
value: r.customerCount,
})),
}),
right: getPiePanel({
title: '成交客户',
seriesName: '成交客户',
data: res.map((r: any) => ({
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level),
value: r.dealCount,
})),
}),
};
}
case 'source': {
return {
left: {
title: {
text: '全部客户',
left: 'center',
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
},
toolbox: {
feature: {
saveAsImage: { show: true, name: '全部客户' }, // 保存为图片
},
},
series: [
{
name: '全部客户',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: res.map((r: any) => {
return {
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
value: r.customerCount,
};
}),
},
],
},
right: {
title: {
text: '成交客户',
left: 'center',
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
},
toolbox: {
feature: {
saveAsImage: { show: true, name: '成交客户' }, // 保存为图片
},
},
series: [
{
name: '成交客户',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: res.map((r: any) => {
return {
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
value: r.dealCount,
};
}),
},
],
},
left: getPiePanel({
title: '全部客户',
seriesName: '全部客户',
data: res.map((r: any) => ({
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
value: r.customerCount,
})),
}),
right: getPiePanel({
title: '成交客户',
seriesName: '成交客户',
data: res.map((r: any) => ({
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
value: r.dealCount,
})),
}),
};
}
default: {

120
apps/web-antd/src/views/crm/statistics/rank/chartOptions.ts
View File

@@ -1,5 +1,25 @@
import { cloneDeep } from '@vben/utils';
const getLegend = (extra: Record<string, any> = {}) => ({
top: 10,
...extra,
});
const getGrid = (extra: Record<string, any> = {}) => ({
left: 20,
right: 20,
bottom: 20,
containLabel: true,
...extra,
});
const getTooltip = () => ({
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
});
export function getChartOptions(activeTabName: any, res: any): any {
switch (activeTabName) {
case 'contactCountRank': {
@@ -8,15 +28,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
dimensions: ['nickname', 'count'],
source: cloneDeep(res).toReversed(),
},
grid: {
left: 20,
right: 20,
bottom: 20,
containLabel: true,
},
legend: {
top: 50,
},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '新增联系人数排行',
@@ -34,12 +47,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '新增联系人数排行' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
xAxis: {
type: 'value',
name: '新增联系人数（个）',
@@ -56,15 +64,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
dimensions: ['nickname', 'count'],
source: cloneDeep(res).toReversed(),
},
grid: {
left: 20,
right: 20,
bottom: 20,
containLabel: true,
},
legend: {
top: 50,
},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '签约合同排行',
@@ -82,12 +83,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '签约合同排行' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
xAxis: {
type: 'value',
name: '签约合同数（个）',
@@ -104,15 +100,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
dimensions: ['nickname', 'count'],
source: cloneDeep(res).toReversed(),
},
grid: {
left: 20,
right: 20,
bottom: 20,
containLabel: true,
},
legend: {
top: 50,
},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '合同金额排行',
@@ -130,12 +119,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '合同金额排行' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
xAxis: {
type: 'value',
name: '合同金额（元）',
@@ -152,15 +136,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
dimensions: ['nickname', 'count'],
source: cloneDeep(res).toReversed(),
},
grid: {
left: 20,
right: 20,
bottom: 20,
containLabel: true,
},
legend: {
top: 50,
},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '新增客户数排行',
@@ -178,12 +155,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '新增客户数排行' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
xAxis: {
type: 'value',
name: '新增客户数（个）',
@@ -226,12 +198,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '跟进次数排行' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
xAxis: {
type: 'value',
name: '跟进次数（次）',
@@ -274,12 +241,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '跟进客户数排行' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
xAxis: {
type: 'value',
name: '跟进客户数（个）',
@@ -322,12 +284,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '产品销量排行' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
xAxis: {
type: 'value',
name: '产品销量',
@@ -370,12 +327,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '回款金额排行' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
xAxis: {
type: 'value',
name: '回款金额（元）',

3
apps/web-antd/src/views/iot/device/device/detail/modules/info.vue
View File

@@ -75,6 +75,7 @@ function handleAuthInfoDialogClose() {
<Card class="h-full">
<template #title>
<div class="flex items-center">
<!-- TODO @haohao：图标尽量使用中立的，这样 ep 版本呢好迁移 -->
<IconifyIcon class="mr-2 text-primary" icon="ep:info-filled" />
<span>设备信息</span>
</div>
@@ -141,6 +142,7 @@ function handleAuthInfoDialogClose() {
<template #title>
<div class="flex items-center justify-between">
<div class="flex items-center">
<!-- TODO @haohao：图标尽量使用中立的，这样 ep 版本呢好迁移 -->
<IconifyIcon class="mr-2 text-primary" icon="ep:location" />
<span>设备位置</span>
</div>
@@ -160,6 +162,7 @@ function handleAuthInfoDialogClose() {
v-else
class="flex h-full w-full items-center justify-center rounded bg-gray-50 text-gray-400"
>
<!-- TODO @haohao：图标尽量使用中立的，这样 ep 版本呢好迁移 -->
<IconifyIcon class="mr-2" icon="ep:warning" />
<span>暂无位置信息</span>
</div>

2
apps/web-antd/src/views/iot/device/device/modules/card-view.vue
View File

@@ -15,8 +15,8 @@ import {
Tooltip,
} from 'ant-design-vue';
import { DictTag } from '#/components/dict-tag';
import { getDevicePage } from '#/api/iot/device/device';
import { DictTag } from '#/components/dict-tag';
interface Props {
products: any[];

2
apps/web-antd/src/views/iot/product/product/modules/card-view.vue
View File

@@ -16,8 +16,8 @@ import {
Tooltip,
} from 'ant-design-vue';
import { DictTag } from '#/components/dict-tag';
import { getProductPage } from '#/api/iot/product/product';
import { DictTag } from '#/components/dict-tag';
interface Props {
categoryList: any[];

1
apps/web-antd/src/views/mall/promotion/discountActivity/data.ts
View File

@@ -73,7 +73,6 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'spuIds',
label: '活动商品',
component: 'Input',
rules: 'required',
formItemClass: 'col-span-2',
},
];

315
apps/web-antd/src/views/mall/promotion/discountActivity/modules/form.vue
View File

@@ -1,30 +1,52 @@
<script lang="ts" setup>
import type { MallSpuApi } from '#/api/mall/product/spu';
import type { MallDiscountActivityApi } from '#/api/mall/promotion/discount/discountActivity';
import type {
PropertyAndValues,
RuleConfig,
SpuProperty,
} from '#/views/mall/product/spu/components';
import { computed, ref } from 'vue';
import { computed, nextTick, ref } from 'vue';
import { useVbenForm, useVbenModal } from '@vben/common-ui';
import {
convertToInteger,
erpCalculatePercentage,
formatToFraction,
yuanToFen,
} from '@vben/utils';
import { message } from 'ant-design-vue';
import { Button, InputNumber, message } from 'ant-design-vue';
import { VxeColumn } from '#/adapter/vxe-table';
import { getSpuDetailList } from '#/api/mall/product/spu';
import {
createDiscountActivity,
getDiscountActivity,
updateDiscountActivity,
} from '#/api/mall/promotion/discount/discountActivity';
import { $t } from '#/locales';
import { SpuShowcase } from '#/views/mall/product/spu/components';
import {
getPropertyList,
SpuAndSkuList,
SpuSkuSelect,
} from '#/views/mall/product/spu/components';
import { useFormSchema } from '../data';
defineOptions({ name: 'DiscountActivityForm' });
const emit = defineEmits(['success']);
const formData = ref<
Partial<MallDiscountActivityApi.DiscountActivity> & {
spuIds?: number[];
}
>({});
/** 折扣类型枚举 */
const PromotionDiscountTypeEnum = {
PRICE: { type: 1 }, // 满减
PERCENT: { type: 2 }, // 折扣
};
// ================= 表单相关 =================
const formData = ref<Partial<MallDiscountActivityApi.DiscountActivity>>({});
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['限时折扣活动'])
@@ -44,27 +66,203 @@ const [Form, formApi] = useVbenForm({
showDefaultActions: false,
});
// ================= 商品选择相关 =================
/** SKU 扩展类型 */
interface SkuExtension extends MallSpuApi.Sku {
productConfig: MallDiscountActivityApi.DiscountProduct;
}
/** SPU 扩展类型 */
interface SpuExtension extends MallSpuApi.Spu {
skus?: SkuExtension[];
}
const spuSelectRef = ref(); // 商品选择组件 Ref
const spuAndSkuListRef = ref(); // SKU 列表组件 Ref
const spuList = ref<SpuExtension[]>([]); // 选择的 SPU 列表
const spuPropertyList = ref<SpuProperty<SpuExtension>[]>([]); // SPU 属性列表
const spuIdList = ref<number[]>([]); // 已选择的 SPU ID 列表
/** SKU 校验规则配置 */
const ruleConfig: RuleConfig[] = [
{
name: 'productConfig.discountPrice',
rule: (arg) => arg > 0,
message: '商品优惠金额不能为 0 ！！！',
},
];
/** 打开商品选择弹窗 */
function openSpuSelect() {
spuSelectRef.value?.open();
}
/** 选择商品后的回调 */
function handleSpuSelected(spuId: number, skuIds?: number[]) {
getSpuDetails(spuId, skuIds);
}
/** 获取 SPU 详情 */
async function getSpuDetails(
spuId: number,
skuIdArr?: number[],
products?: MallDiscountActivityApi.DiscountProduct[],
type?: string,
) {
// 如果已经包含该 SPU 则跳过
if (spuIdList.value.includes(spuId)) {
if (type !== 'load') {
message.error('数据重复选择！');
}
return;
}
spuIdList.value.push(spuId);
const res = (await getSpuDetailList([spuId])) as SpuExtension[];
if (res.length === 0) {
return;
}
const spu = res[0]!;
// 筛选 SKU
const selectSkus =
skuIdArr === undefined
? spu.skus
: spu.skus?.filter((sku) => skuIdArr.includes(sku.id!));
// 为每个 SKU 添加折扣配置
selectSkus?.forEach((sku) => {
let config: MallDiscountActivityApi.DiscountProduct = {
skuId: sku.id!,
spuId: spu.id!,
discountType: 1,
discountPercent: 0,
discountPrice: 0,
};
// 编辑时，使用已有的配置
if (products !== undefined) {
const product = products.find((item) => item.skuId === sku.id);
if (product) {
// 转换为元显示
config = {
...product,
discountPercent: Number(formatToFraction(product.discountPercent)),
discountPrice: Number(formatToFraction(product.discountPrice)),
};
}
}
(sku as SkuExtension).productConfig = config;
});
spu.skus = selectSkus as SkuExtension[];
spuPropertyList.value.push({
spuId: spu.id!,
spuDetail: spu,
propertyList: getPropertyList(spu) as PropertyAndValues[],
});
spuList.value.push(spu);
}
/** 删除 SPU */
function handleDeleteSpu(spuId: number) {
const spuIndex = spuIdList.value.indexOf(spuId);
if (spuIndex !== -1) {
spuIdList.value.splice(spuIndex, 1);
}
const propertyIndex = spuPropertyList.value.findIndex(
(item) => item.spuId === spuId,
);
if (propertyIndex !== -1) {
spuPropertyList.value.splice(propertyIndex, 1);
}
const listIndex = spuList.value.findIndex((item) => item.id === spuId);
if (listIndex !== -1) {
spuList.value.splice(listIndex, 1);
}
}
/** 处理 SKU 优惠金额变动 */
function handleSkuDiscountPriceChange(row: SkuExtension) {
if (row.productConfig.discountPrice <= 0) {
return;
}
// 设置优惠类型：满减
row.productConfig.discountType = PromotionDiscountTypeEnum.PRICE.type;
// 计算折扣百分比
const price = typeof row.price === 'number' ? row.price : Number(row.price);
const percent = erpCalculatePercentage(
price - yuanToFen(row.productConfig.discountPrice),
price,
);
row.productConfig.discountPercent =
typeof percent === 'number' ? percent : Number(percent);
}
/** 处理 SKU 折扣百分比变动 */
function handleSkuDiscountPercentChange(row: SkuExtension) {
if (
row.productConfig.discountPercent <= 0 ||
row.productConfig.discountPercent >= 100
) {
return;
}
// 设置优惠类型：折扣
row.productConfig.discountType = PromotionDiscountTypeEnum.PERCENT.type;
// 计算优惠金额
const price = typeof row.price === 'number' ? row.price : Number(row.price);
row.productConfig.discountPrice = Number(
formatToFraction(price - price * (row.productConfig.discountPercent / 100)),
);
}
/** 重置表单 */
async function resetForm() {
spuList.value = [];
spuPropertyList.value = [];
spuIdList.value = [];
formData.value = {};
await nextTick();
await formApi.resetForm();
}
// ================= 弹窗相关 =================
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as MallDiscountActivityApi.DiscountActivity;
// 确保必要的默认值
if (!data.products) {
data.products = [];
// 校验是否选择了商品
if (spuList.value.length === 0) {
message.warning('请选择活动商品');
return;
}
modalApi.lock();
try {
// 获取折扣商品配置
const products = structuredClone(
spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
) as MallDiscountActivityApi.DiscountProduct[];
// 转换金额为分
products.forEach((item) => {
item.discountPercent = convertToInteger(item.discountPercent);
item.discountPrice = convertToInteger(item.discountPrice);
});
const data = structuredClone(
await formApi.getValues(),
) as MallDiscountActivityApi.DiscountActivity;
data.products = products;
// 提交请求
await (formData.value?.id
? updateDiscountActivity(data)
: createDiscountActivity(data));
// 关闭并提示
await modalApi.close();
emit('success');
message.success($t('ui.actionMessage.operationSuccess'));
@@ -74,19 +272,45 @@ const [Modal, modalApi] = useVbenModal({
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = {};
await resetForm();
return;
}
// 加载数据
const data = modalApi.getData<MallDiscountActivityApi.DiscountActivity>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = await getDiscountActivity(data.id);
// 设置到 values
await formApi.setValues(formData.value);
const activityData = await getDiscountActivity(data.id);
formData.value = activityData;
// 加载商品详情
if (activityData.products && activityData.products.length > 0) {
// 按 spuId 分组
const spuProductsMap = new Map<
number,
MallDiscountActivityApi.DiscountProduct[]
>();
for (const product of activityData.products) {
const spuId = product.spuId;
if (!spuProductsMap.has(spuId)) {
spuProductsMap.set(spuId, []);
}
spuProductsMap.get(spuId)!.push(product);
}
// 加载每个 SPU 的详情
for (const [spuId, products] of spuProductsMap) {
const skuIdArr = products.map((p) => p.skuId);
await getSpuDetails(spuId, skuIdArr, products, 'load');
}
}
// 设置表单值
await formApi.setValues(activityData);
} finally {
modalApi.unlock();
}
@@ -95,12 +319,59 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-3/5" :title="getTitle">
<Modal class="w-[70%]" :title="getTitle">
<Form>
<!-- 自定义插槽：商品选择 -->
<template #spuIds>
<SpuShowcase v-model="formData.spuIds" />
<div class="w-full">
<Button class="mb-4" @click="openSpuSelect">选择商品</Button>
<SpuAndSkuList
ref="spuAndSkuListRef"
:deletable="true"
:rule-config="ruleConfig"
:spu-list="spuList"
:spu-property-list-p="spuPropertyList"
@delete="handleDeleteSpu"
>
<!-- 扩展列：限时折扣活动特有配置 -->
<template #default>
<VxeColumn align="center" min-width="168" title="优惠金额(元)">
<template #default="{ row }">
<InputNumber
v-model:value="row.productConfig.discountPrice"
:max="Number(formatToFraction(row.price))"
:min="0"
:precision="2"
:step="0.1"
class="w-full"
@change="handleSkuDiscountPriceChange(row)"
/>
</template>
</VxeColumn>
<VxeColumn align="center" min-width="168" title="折扣百分比(%)">
<template #default="{ row }">
<InputNumber
v-model:value="row.productConfig.discountPercent"
:max="100"
:min="0"
:precision="2"
:step="0.1"
class="w-full"
@change="handleSkuDiscountPercentChange(row)"
/>
</template>
</VxeColumn>
</template>
</SpuAndSkuList>
</div>
</template>
</Form>
</Modal>
<!-- 商品选择弹窗 -->
<SpuSkuSelect
ref="spuSelectRef"
:is-select-sku="true"
@select="handleSpuSelected"
/>
</template>

7
apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts
View File

@@ -138,6 +138,7 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'x',
placeholder: [
$t('utils.rangePicker.beginTime'),
$t('utils.rangePicker.endTime'),
@@ -217,13 +218,15 @@ export function useFormSchema(): VbenFormSchema[] {
},
rules: 'required',
},
// TODO @puhui999：1）新增时：一直报：“请输入优惠设置”；2）修改老数据，出现报“请求参数类型错误:50.00”；
{
fieldName: 'rules',
label: '优惠设置',
component: 'Input',
formItemClass: 'items-start',
rules: 'required',
rules: z
.array(z.any())
.min(1, { message: '请添加至少一条优惠规则' })
.default([]),
},
{
fieldName: 'productScopeValues', // 隐藏字段：用于自动同步 productScopeValues

20
apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
View File

@@ -8,10 +8,9 @@ import {
PromotionConditionTypeEnum,
PromotionProductScopeEnum,
} from '@vben/constants';
import { convertToInteger, formatToFraction } from '@vben/utils';
import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';
import { useVbenForm } from '#/adapter/form';
import {
@@ -53,6 +52,8 @@ const [Form, formApi] = useVbenForm({
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
// 在验证前同步 formData.rules 到表单中
await formApi.setFieldValue('rules', formData.value.rules || []);
const { valid } = await formApi.validate();
if (!valid) {
return;
@@ -61,18 +62,24 @@ const [Modal, modalApi] = useVbenModal({
// 提交表单
try {
const values = await formApi.getValues();
const data = { ...formData.value, ...values };
// 使用 formData.value 作为基础，确保 rules 来自 formData
const data = { ...values, ...formData.value };
if (data.startAndEndTime && Array.isArray(data.startAndEndTime)) {
data.startTime = data.startAndEndTime[0];
data.endTime = data.startAndEndTime[1];
delete data.startAndEndTime;
}
data.rules?.forEach((item: any) => {
// 深拷贝 rules 避免修改原始数据
const rules = cloneDeep(
data.rules,
) as unknown as MallRewardActivityApi.RewardRule[];
rules.forEach((item: any) => {
item.discountPrice = convertToInteger(item.discountPrice || 0);
if (data.conditionType === PromotionConditionTypeEnum.PRICE.type) {
item.limit = convertToInteger(item.limit || 0);
}
});
data.rules = rules;
await (data.id
? updateRewardActivity(data as MallRewardActivityApi.RewardActivity)
: createRewardActivity(data as MallRewardActivityApi.RewardActivity));
@@ -97,9 +104,10 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock();
try {
const result = await getReward(data.id);
// valueFormat: 'x' 配置下，直接使用时间戳
result.startAndEndTime = [
result.startTime ? dayjs(result.startTime) : undefined,
result.endTime ? dayjs(result.endTime) : undefined,
result.startTime ? String(result.startTime) : undefined,
result.endTime ? String(result.endTime) : undefined,
] as any[];
result.rules?.forEach((item: any) => {
item.discountPrice = formatToFraction(item.discountPrice || 0);

10
apps/web-antd/src/views/mp/material/index.vue
View File

@@ -7,6 +7,7 @@ import { provide, ref } from 'vue';
import { useAccess } from '@vben/access';
import { confirm, DocAlert, Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { $t } from '@vben/locales';
import { Button, message, Tabs } from 'ant-design-vue';
@@ -23,7 +24,6 @@ import {
import { UploadType } from './modules/upload';
import UploadFile from './modules/UploadFile.vue';
import UploadVideo from './modules/UploadVideo.vue';
import {$t} from '@vben/locales';
defineOptions({ name: 'MpMaterial' });
@@ -84,7 +84,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
rowConfig: {
keyField: 'id',
isHover: true,
height: type.value === UploadType.Image ? 220 : 'auto',
},
cellConfig: {
height: type.value === UploadType.Image ? 220 : undefined,
},
toolbarConfig: {
refresh: true,
@@ -101,7 +103,9 @@ async function onTabChange() {
rowConfig: {
keyField: 'id',
isHover: true,
height: type.value === UploadType.Image ? 220 : 'auto',
},
cellConfig: {
height: type.value === UploadType.Image ? 220 : undefined,
},
});
await gridApi.reload();

2
apps/web-antd/src/views/pay/app/modules/channel-form.vue
View File

@@ -43,7 +43,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as PayChannelApi.Channel;
data.config = JSON.stringify(data.config);
data.config = JSON.stringify(data.config || {});
try {
await (data.id ? updateChannel(data) : createChannel(data));
// 关闭并提示

1
apps/web-ele/src/adapter/vxe-table.ts
View File

@@ -91,6 +91,7 @@ setupVbenVxeTable({
},
previewTeleported: true,
});
// return h(ElImage, { src, previewSrcList: [src], ...props });
},
});

1
apps/web-ele/src/api/bpm/model/index.ts
View File

@@ -30,6 +30,7 @@ export namespace BpmModelApi {
deploymentTime: number;
suspensionState: number;
formType?: number;
formCustomCreatePath?: string;
formCustomViewPath?: string;
formFields?: string[];
}

235
apps/web-ele/src/components/cron-tab/cron-tab.vue
View File

@@ -1,6 +1,8 @@
<script lang="ts" setup>
import type { PropType } from 'vue';
import type { CronData, CronValue, ShortcutsType } from './types';
import { computed, onMounted, reactive, ref, watch } from 'vue';
import {
@@ -19,6 +21,8 @@ import {
ElTabs,
} from 'element-plus';
import { CronDataDefault, CronValueDefault } from './types';
defineOptions({ name: 'Crontab' });
const props = defineProps({
@@ -26,237 +30,20 @@ const props = defineProps({
type: String,
default: '* * * * * ?',
},
shortcuts: { type: Array as PropType<shortcutsType[]>, default: () => [] },
shortcuts: {
type: Array as PropType<ShortcutsType[]>,
default: () => [],
},
});
const emit = defineEmits(['update:modelValue']);
// TODO @puhui999：可以参考 apps/web-antd/src/components/cron-tab/cron-tab.vue 简化到 types；ps：可以用 idea 对比两个 ts 或者 vue 文件，看看差异的地方。差异的地方越少越好（容易维护）
interface shortcutsType {
text: string;
value: string;
}
const defaultValue = ref('');
const dialogVisible = ref(false);
const getYear = () => {
const v: number[] = [];
const y = new Date().getFullYear();
for (let i = 0; i < 11; i++) {
v.push(y + i);
}
return v;
};
// TODO @puhui999：可以参考 apps/web-antd/src/components/cron-tab/cron-tab.vue 简化到 types
const cronValue = reactive({
second: {
type: '0',
range: {
start: 1,
end: 2,
},
loop: {
start: 0,
end: 1,
},
appoint: [] as string[],
},
minute: {
type: '0',
range: {
start: 1,
end: 2,
},
loop: {
start: 0,
end: 1,
},
appoint: [] as string[],
},
hour: {
type: '0',
range: {
start: 1,
end: 2,
},
loop: {
start: 0,
end: 1,
},
appoint: [] as string[],
},
day: {
type: '0',
range: {
start: 1,
end: 2,
},
loop: {
start: 1,
end: 1,
},
appoint: [] as string[],
},
month: {
type: '0',
range: {
start: 1,
end: 2,
},
loop: {
start: 1,
end: 1,
},
appoint: [] as string[],
},
week: {
type: '5',
range: {
start: '2',
end: '3',
},
loop: {
start: 0,
end: '2',
},
last: '2',
appoint: [] as string[],
},
year: {
type: '-1',
range: {
start: getYear()[0],
end: getYear()[1],
},
loop: {
start: getYear()[0],
end: 1,
},
appoint: [] as string[],
},
});
const data = reactive({
second: [
'0',
'5',
'15',
'20',
'25',
'30',
'35',
'40',
'45',
'50',
'55',
'59',
],
minute: [
'0',
'5',
'15',
'20',
'25',
'30',
'35',
'40',
'45',
'50',
'55',
'59',
],
hour: [
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
'13',
'14',
'15',
'16',
'17',
'18',
'19',
'20',
'21',
'22',
'23',
],
day: [
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
'13',
'14',
'15',
'16',
'17',
'18',
'19',
'20',
'21',
'22',
'23',
'24',
'25',
'26',
'27',
'28',
'29',
'30',
'31',
],
month: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
week: [
{
value: '1',
label: '周日',
},
{
value: '2',
label: '周一',
},
{
value: '3',
label: '周二',
},
{
value: '4',
label: '周三',
},
{
value: '5',
label: '周四',
},
{
value: '6',
label: '周五',
},
{
value: '7',
label: '周六',
},
],
year: getYear(),
});
const cronValue = reactive<CronValue>(CronValueDefault);
const data = reactive<CronData>(CronDataDefault);
const value_second = computed(() => {
const v = cronValue.second;
switch (v.type) {

266
apps/web-ele/src/components/cron-tab/types.ts Normal file
View File

@@ -0,0 +1,266 @@
export interface ShortcutsType {
text: string;
value: string;
}
export interface CronRange {
start: number | string | undefined;
end: number | string | undefined;
}
export interface CronLoop {
start: number | string | undefined;
end: number | string | undefined;
}
export interface CronItem {
type: string;
range: CronRange;
loop: CronLoop;
appoint: string[];
last?: string;
}
export interface CronValue {
second: CronItem;
minute: CronItem;
hour: CronItem;
day: CronItem;
month: CronItem;
week: CronItem & { last: string };
year: CronItem;
}
export interface WeekOption {
value: string;
label: string;
}
export interface CronData {
second: string[];
minute: string[];
hour: string[];
day: string[];
month: string[];
week: WeekOption[];
year: number[];
}
const getYear = (): number[] => {
const v: number[] = [];
const y = new Date().getFullYear();
for (let i = 0; i < 11; i++) {
v.push(y + i);
}
return v;
};
export const CronValueDefault: CronValue = {
second: {
type: '0',
range: {
start: 1,
end: 2,
},
loop: {
start: 0,
end: 1,
},
appoint: [],
},
minute: {
type: '0',
range: {
start: 1,
end: 2,
},
loop: {
start: 0,
end: 1,
},
appoint: [],
},
hour: {
type: '0',
range: {
start: 1,
end: 2,
},
loop: {
start: 0,
end: 1,
},
appoint: [],
},
day: {
type: '0',
range: {
start: 1,
end: 2,
},
loop: {
start: 1,
end: 1,
},
appoint: [],
},
month: {
type: '0',
range: {
start: 1,
end: 2,
},
loop: {
start: 1,
end: 1,
},
appoint: [],
},
week: {
type: '5',
range: {
start: '2',
end: '3',
},
loop: {
start: 0,
end: '2',
},
last: '2',
appoint: [],
},
year: {
type: '-1',
range: {
start: getYear()[0],
end: getYear()[1],
},
loop: {
start: getYear()[0],
end: 1,
},
appoint: [],
},
};
export const CronDataDefault: CronData = {
second: [
'0',
'5',
'15',
'20',
'25',
'30',
'35',
'40',
'45',
'50',
'55',
'59',
],
minute: [
'0',
'5',
'15',
'20',
'25',
'30',
'35',
'40',
'45',
'50',
'55',
'59',
],
hour: [
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
'13',
'14',
'15',
'16',
'17',
'18',
'19',
'20',
'21',
'22',
'23',
],
day: [
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
'13',
'14',
'15',
'16',
'17',
'18',
'19',
'20',
'21',
'22',
'23',
'24',
'25',
'26',
'27',
'28',
'29',
'30',
'31',
],
month: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
week: [
{
value: '1',
label: '周日',
},
{
value: '2',
label: '周一',
},
{
value: '3',
label: '周二',
},
{
value: '4',
label: '周三',
},
{
value: '5',
label: '周四',
},
{
value: '6',
label: '周五',
},
{
value: '7',
label: '周六',
},
],
year: getYear(),
};

80
apps/web-ele/src/components/cropper/cropper-avatar.vue
View File

@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<CropperAvatarProps>(), {
width: 200,
value: '',
showBtn: true,
btnProps: () => ({}),
btnProps: () => ({}) as any,
btnText: '',
uploadApi: () => Promise.resolve(),
size: 5,
@@ -27,14 +27,10 @@ const props = withDefaults(defineProps<CropperAvatarProps>(), {
const emit = defineEmits(['update:value', 'change']);
const sourceValue = ref(props.value || '');
// TODO @puhui999：这个有办法去掉么？
const prefixCls = 'cropper-avatar';
const [CropperModal, modalApi] = useVbenModal({
connectedComponent: cropperModal,
});
const getClass = computed(() => [prefixCls]);
const getWidth = computed(() => `${`${props.width}`.replace(/px/, '')}px`);
const getIconWidth = computed(
@@ -74,34 +70,41 @@ defineExpose({
</script>
<template>
<!-- TODO @puhui999：html 部分，看看有没办法和 web-antd/src/components/cropper/cropper-avatar.vue 风格更接近 -->
<!-- 头像容器 -->
<div :class="getClass" :style="getStyle">
<div class="inline-block text-center" :style="getStyle">
<!-- 图片包装器 -->
<div
:class="`${prefixCls}-image-wrapper`"
class="group relative cursor-pointer overflow-hidden rounded-full border border-gray-200 bg-white"
:style="getImageWrapperStyle"
@click="openModal"
>
<!-- 遮罩层 -->
<div :class="`${prefixCls}-image-mask`" :style="getImageWrapperStyle">
<div
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"
>
<span
:style="{
...getImageWrapperStyle,
width: `${getIconWidth}`,
height: `${getIconWidth}`,
lineHeight: `${getIconWidth}`,
width: getIconWidth,
height: getIconWidth,
lineHeight: getIconWidth,
}"
class="icon-[ant-design--cloud-upload-outlined] text-[#d6d6d6]"
class="icon-[ant-design--cloud-upload-outlined] text-gray-400"
></span>
</div>
<!-- 头像图片 -->
<img v-if="sourceValue" :src="sourceValue" alt="avatar" />
<img
v-if="sourceValue"
:src="sourceValue"
alt="avatar"
class="h-full w-full object-cover"
/>
</div>
<!-- 上传按钮 -->
<ElButton
v-if="showBtn"
:class="`${prefixCls}-upload-btn`"
class="mx-auto mt-2"
@click="openModal"
v-bind="btnProps"
>
@@ -116,50 +119,3 @@ defineExpose({
/>
</div>
</template>
<style lang="scss" scoped>
/* TODO @puhui999：要类似 web-antd/src/components/cropper/cropper-avatar.vue 减少 scss，通过 tindwind 么？ */
.cropper-avatar {
display: inline-block;
text-align: center;
&-image-wrapper {
overflow: hidden;
cursor: pointer;
background: #fff;
border: 1px solid #eee;
border-radius: 50%;
img {
width: 100%;
}
}
&-image-mask {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: inherit;
height: inherit;
cursor: pointer;
background: rgb(0 0 0 / 40%);
border: inherit;
border-radius: inherit;
opacity: 0;
transition: opacity 0.4s;
::v-deep(svg) {
margin: auto;
}
}
&-image-mask:hover {
opacity: 40;
}
&-upload-btn {
margin: 10px auto;
}
}
</style>

117
apps/web-ele/src/components/cropper/cropper-modal.vue
View File

@@ -36,7 +36,6 @@ const cropper = ref<CropperType>();
let scaleX = 1;
let scaleY = 1;
const prefixCls = 'cropper-am';
const [Modal, modalApi] = useVbenModal({
onConfirm: handleOk,
onOpenChange(isOpen) {
@@ -120,11 +119,34 @@ async function handleOk() {
:title="$t('ui.cropper.modalTitle')"
class="w-[800px]"
>
<div :class="prefixCls">
<div class="flex">
<!-- 左侧区域 -->
<div :class="`${prefixCls}-left`" class="w-full">
<div class="h-[340px] w-[55%]">
<!-- 裁剪器容器 -->
<div :class="`${prefixCls}-cropper`">
<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;
"
>
<CropperImage
v-if="src"
:circled="circled"
@@ -136,7 +158,7 @@ async function handleOk() {
</div>
<!-- 工具栏 -->
<div :class="`${prefixCls}-toolbar`">
<div class="mt-2.5 flex items-center justify-between">
<ElUpload
:before-upload="handleBeforeUpload"
:file-list="[]"
@@ -281,18 +303,23 @@ async function handleOk() {
</div>
<!-- 右侧区域 -->
<div :class="`${prefixCls}-right`">
<div class="h-[340px] w-[45%]">
<!-- 预览区域 -->
<div :class="`${prefixCls}-preview`">
<div
class="mx-auto h-[220px] w-[220px] overflow-hidden rounded-full border border-gray-200"
>
<img
v-if="previewSource"
:alt="$t('ui.cropper.preview')"
:src="previewSource"
class="h-full w-full"
/>
</div>
<!-- 头像组合预览 -->
<template v-if="previewSource">
<div :class="`${prefixCls}-group`">
<div
class="mt-2 flex items-center justify-around border-t border-gray-200 pt-2"
>
<ElAvatar :src="previewSource" size="large" />
<ElAvatar :size="48" :src="previewSource" />
<ElAvatar :size="64" :src="previewSource" />
@@ -303,77 +330,3 @@ async function handleOk() {
</div>
</Modal>
</template>
<style lang="scss">
/* TODO @puhui999：要类似 web-antd/src/components/cropper/cropper-avatar.vue 减少 scss，通过 tindwind 么？ */
.cropper-am {
display: flex;
&-left,
&-right {
height: 340px;
}
&-left {
width: 55%;
}
&-right {
width: 45%;
}
&-cropper {
height: 300px;
background: #eee;
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;
}
&-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
&-preview {
width: 220px;
height: 220px;
margin: 0 auto;
overflow: hidden;
border: 1px solid #eee;
border-radius: 50%;
img {
width: 100%;
height: 100%;
}
}
&-group {
display: flex;
align-items: center;
justify-content: space-around;
padding-top: 8px;
margin-top: 8px;
border-top: 1px solid #eee;
}
}
</style>

6
apps/web-ele/src/components/cropper/cropper.vue
View File

@@ -33,8 +33,6 @@ const imgElRef = ref<ElRef<HTMLImageElement>>();
const cropper = ref<Cropper | null>();
const isReady = ref(false);
// TODO @puhui999：这个有办法去掉么？
const prefixCls = 'cropper-image';
const debounceRealTimeCropped = useDebounceFn(realTimeCropped, 80);
const getImageStyle = computed((): CSSProperties => {
@@ -47,10 +45,9 @@ const getImageStyle = computed((): CSSProperties => {
const getClass = computed(() => {
return [
prefixCls,
attrs.class,
{
[`${prefixCls}--circled`]: props.circled,
'cropper-image--circled': props.circled,
},
];
});
@@ -158,6 +155,7 @@ function getRoundedCanvas() {
:crossorigin="crossorigin"
:src="src"
:style="getImageStyle"
class="h-auto max-w-full"
/>
</div>
</template>

4
apps/web-ele/src/components/form-create/rules/data.ts
View File

@@ -121,7 +121,7 @@ const apiSelectRule = [
field: 'data',
title: '请求参数 JSON 格式',
props: {
autosize: true, // TODO @puhui999：这里时 autoSize 还是 autosize 哈？和 antd 不同
autosize: true,
type: 'textarea',
placeholder: '{"type": 1}',
},
@@ -155,7 +155,7 @@ const apiSelectRule = [
info: `data 为接口返回值,需要写一个匿名函数解析返回值为选择器 options 列表
(data: any)=>{ label: string; value: any }[]`,
props: {
autosize: true, // TODO @puhui999：这里时 autoSize 还是 autosize 哈？和 antd 不同
autosize: true,
rows: { minRows: 2, maxRows: 6 },
type: 'textarea',
placeholder: `

2
apps/web-ele/src/components/form-create/rules/use-dict-select.ts
View File

@@ -39,7 +39,7 @@ export function useDictSelectRule() {
title: label,
info: '',
$required: false,
// TODO @puhui999：vben 版本里，这里有个 modelField: 'value', 需要添加么？
modelField: 'model-value',
};
},
props(_: any, { t }: any) {

553
apps/web-ele/src/components/upload/file-upload.vue
View File

@@ -1,284 +1,383 @@
<script lang="ts" setup>
// TODO @puhui999：这个看看怎么和对应的 antd 【代码风格】，保持一致一些；
import type {
UploadFile,
UploadInstance,
UploadProps,
UploadRawFile,
UploadProgressEvent,
UploadRequestOptions,
UploadUserFile,
} from 'element-plus';
import { ref, watch } from 'vue';
import type { FileUploadProps } from './typing';
import type { AxiosProgressEvent } from '#/api/infra/file';
import { computed, ref, toRefs, watch } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { isString } from '@vben/utils';
import { $t } from '@vben/locales';
import { checkFileType, isFunction, isObject, isString } from '@vben/utils';
import { ElButton, ElLink, ElMessage, ElUpload } from 'element-plus';
import { ElButton, ElMessage, ElUpload } from 'element-plus';
import { useUpload } from './use-upload';
import { UploadResultStatus } from './typing';
import { useUpload, useUploadType } from './use-upload';
defineOptions({ name: 'FileUpload', inheritAttrs: false });
const props = withDefaults(
defineProps<{
autoUpload?: boolean;
directory?: string;
disabled?: boolean;
drag?: boolean;
fileSize?: number;
fileType?: string[];
isShowTip?: boolean;
limit?: number;
modelValue: string | string[];
}>(),
const props = withDefaults(defineProps<FileUploadProps>(), {
value: () => [],
modelValue: undefined,
directory: undefined,
disabled: false,
drag: false,
helpText: '',
maxSize: 2,
maxNumber: 1,
accept: () => [],
multiple: false,
api: undefined,
resultField: '',
showDescription: false,
});
const emit = defineEmits([
'change',
'update:value',
'update:modelValue',
'delete',
'returnText',
'preview',
]);
const { accept, helpText, maxNumber, maxSize } = toRefs(props);
const isInnerOperate = ref<boolean>(false);
const { getStringAccept } = useUploadType({
acceptRef: accept,
helpTextRef: helpText,
maxNumberRef: maxNumber,
maxSizeRef: maxSize,
});
/** 计算当前绑定的值，优先使用 modelValue */
const currentValue = computed(() => {
return props.modelValue === undefined ? props.value : props.modelValue;
});
/** 判断是否使用 modelValue */
const isUsingModelValue = computed(() => {
return props.modelValue !== undefined;
});
const fileList = ref<UploadFile[]>([]);
const isLtMsg = ref<boolean>(true); // 文件大小错误提示
const isActMsg = ref<boolean>(true); // 文件类型错误提示
const isFirstRender = ref<boolean>(true); // 是否第一次渲染
const uploadNumber = ref<number>(0); // 上传文件计数器
const uploadList = ref<any[]>([]); // 临时上传列表
watch(
currentValue,
(v) => {
if (isInnerOperate.value) {
isInnerOperate.value = false;
return;
}
let value: string[] = [];
if (v) {
if (Array.isArray(v)) {
value = v;
} else {
value.push(v);
}
fileList.value = value
.map((item, i) => {
if (item && isString(item)) {
return {
uid: -i,
name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
status: UploadResultStatus.SUCCESS,
url: item,
} as UploadFile;
} else if (item && isObject(item)) {
const file = item as unknown as Record<string, any>;
return {
uid: file.uid ?? -i,
name: file.name ?? '',
status: file.status ?? UploadResultStatus.SUCCESS,
url: file.url,
} as UploadFile;
}
return null;
})
.filter(Boolean) as UploadFile[];
} else {
// 值为空时清空文件列表
fileList.value = [];
}
if (!isFirstRender.value) {
emit('change', value);
isFirstRender.value = false;
}
},
{
fileType: () => ['doc', 'xls', 'ppt', 'txt', 'pdf'], // 文件类型, 例如['png', 'jpg', 'jpeg']
fileSize: 5, // 大小限制(MB)
limit: 5, // 数量限制
autoUpload: true, // 自动上传
drag: false, // 拖拽上传
isShowTip: true, // 是否显示提示
disabled: false, // 是否禁用上传组件 ==> 非必传（默认为 false）
directory: undefined, // 上传目录 ==> 非必传（默认为 undefined）
immediate: true,
deep: true,
},
);
const emit = defineEmits(['update:modelValue']);
/** 处理文件删除 */
function handleRemove(file: UploadFile) {
if (fileList.value) {
const index = fileList.value.findIndex((item) => item.uid === file.uid);
index !== -1 && fileList.value.splice(index, 1);
const value = getValue();
isInnerOperate.value = true;
emit('update:value', value);
emit('update:modelValue', value);
emit('change', value);
emit('delete', file);
}
}
// ========== 上传相关 ==========
const uploadRef = ref<UploadInstance>();
const uploadList = ref<UploadUserFile[]>([]);
const fileList = ref<UploadUserFile[]>([]);
const uploadNumber = ref<number>(0);
/** 处理文件预览 */
function handlePreview(file: UploadFile) {
emit('preview', file);
if (file.url) {
window.open(file.url);
}
}
const { uploadUrl, httpRequest }: any = useUpload(props.directory);
/** 处理文件数量超限 */
function handleExceed() {
ElMessage.error($t('ui.upload.maxNumber', [maxNumber.value]));
}
/** httpRequest 适配 ele */
const httpRequest0 = (options: UploadRequestOptions) => {
return httpRequest(options.file);
};
/** 处理上传错误 */
function handleUploadError(error: any) {
console.error('上传错误:', error);
ElMessage.error($t('ui.upload.uploadError'));
// 上传失败时减少计数器
uploadNumber.value = Math.max(0, uploadNumber.value - 1);
}
// 文件上传之前判断
const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => {
if (fileList.value.length >= props.limit) {
ElMessage.error(`上传文件数量不能超过${props.limit}个!`);
/**
* 上传前校验
* @param file 待上传的文件
* @returns 是否允许上传
*/
/* eslint-disable unicorn/no-nested-ternary */
async function beforeUpload(file: File) {
const fileContent = await file.text();
emit('returnText', fileContent);
// 检查文件数量限制（使用 getValue 获取实际已上传的文件数量）
const currentFiles = getValue();
const currentCount = Array.isArray(currentFiles)
? currentFiles.length
: currentFiles
? 1
: 0;
if (currentCount >= props.maxNumber) {
ElMessage.error($t('ui.upload.maxNumber', [props.maxNumber]));
return false;
}
let fileExtension = '';
// eslint-disable-next-line unicorn/prefer-includes
if (file.name.lastIndexOf('.') > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1);
}
const isImg = props.fileType.some((type: string) => {
// eslint-disable-next-line unicorn/prefer-includes
if (file.type.indexOf(type) > -1) return true;
// eslint-disable-next-line unicorn/prefer-includes
return !!(fileExtension && fileExtension.indexOf(type) > -1);
});
const isLimit = file.size < props.fileSize * 1024 * 1024;
if (!isImg) {
ElMessage.error(`文件格式不正确, 请上传${props.fileType.join('/')}格式!`);
const { maxSize, accept } = props;
const isAct = checkFileType(file, accept);
if (!isAct) {
ElMessage.error($t('ui.upload.acceptUpload', [accept]));
isActMsg.value = false;
// 防止弹出多个错误提示
setTimeout(() => (isActMsg.value = true), 1000);
return false;
}
if (!isLimit) {
ElMessage.error(`上传文件大小不能超过${props.fileSize}MB!`);
const isLt = file.size / 1024 / 1024 > maxSize;
if (isLt) {
ElMessage.error($t('ui.upload.maxSizeMultiple', [maxSize]));
isLtMsg.value = false;
// 防止弹出多个错误提示
setTimeout(() => (isLtMsg.value = true), 1000);
return false;
}
ElMessage.success('正在上传文件，请稍候...');
// 只有在验证通过后才增加计数器
uploadNumber.value++;
return true;
};
}
// 文件上传成功
const handleFileSuccess: UploadProps['onSuccess'] = (url: any): void => {
ElMessage.success('上传成功');
// 删除自身
const index = fileList.value.findIndex((item: any) => item.response === url);
fileList.value.splice(index, 1);
uploadList.value.push({ name: url, url });
if (uploadList.value.length === uploadNumber.value) {
fileList.value.push(...uploadList.value);
/** 自定义上传请求 */
async function customRequest(options: UploadRequestOptions) {
let { api } = props;
if (!api || !isFunction(api)) {
api = useUpload(props.directory).httpRequest;
}
try {
// 上传文件
const progressEvent: AxiosProgressEvent = (e) => {
const percent = Math.trunc((e.loaded / e.total!) * 100);
options.onProgress!({
percent,
total: e.total || 0,
loaded: e.loaded || 0,
lengthComputable: true,
} as unknown as UploadProgressEvent);
};
const res = await api?.(options.file, progressEvent);
// 处理上传成功后的逻辑
handleUploadSuccess(res, options.file as File);
options.onSuccess!(res);
ElMessage.success($t('ui.upload.uploadSuccess'));
} catch (error: any) {
console.error(error);
options.onError!(error);
handleUploadError(error);
}
}
/**
* 处理上传成功
* @param res 上传响应结果
* @param file 上传的文件
*/
function handleUploadSuccess(res: any, file: File) {
// 删除临时文件
const index = fileList.value?.findIndex((item) => item.name === file.name);
if (index !== -1) {
fileList.value?.splice(index!, 1);
}
// 添加到临时上传列表
const fileUrl = res?.url || res?.data || res;
uploadList.value.push({
name: file.name,
url: fileUrl,
status: UploadResultStatus.SUCCESS,
uid: file.name + Date.now(),
});
// 检查是否所有文件都上传完成
if (uploadList.value.length >= uploadNumber.value) {
fileList.value?.push(...uploadList.value);
uploadList.value = [];
uploadNumber.value = 0;
emitUpdateModelValue();
}
};
// 文件数超出提示
const handleExceed: UploadProps['onExceed'] = (): void => {
ElMessage.error(`上传文件数量不能超过${props.limit}个!`);
};
// 上传错误提示
const excelUploadError: UploadProps['onError'] = (): void => {
ElMessage.error('导入数据失败，请您重新上传！');
// 上传失败时减少计数器，避免后续上传被阻塞
uploadNumber.value = Math.max(0, uploadNumber.value - 1);
};
// 删除上传文件
const handleRemove = (file: UploadFile) => {
const index = fileList.value.map((f) => f.name).indexOf(file.name);
if (index !== -1) {
fileList.value.splice(index, 1);
emitUpdateModelValue();
}
};
const handlePreview: UploadProps['onPreview'] = (_) => {
// console.log(uploadFile);
};
// 监听模型绑定值变动
watch(
() => props.modelValue,
(val: string | string[]) => {
if (!val) {
fileList.value = []; // fix：处理掉缓存，表单重置后上传组件的内容并没有重置
return;
}
fileList.value = []; // 保障数据为空
// 情况1：字符串
if (isString(val)) {
fileList.value.push(
...val.split(',').map((url) => ({
// eslint-disable-next-line unicorn/prefer-string-slice
name: url.substring(url.lastIndexOf('/') + 1),
url,
})),
);
return;
}
// 情况2：数组
fileList.value.push(
...(val as string[]).map((url) => ({
// eslint-disable-next-line unicorn/prefer-string-slice
name: url.substring(url.lastIndexOf('/') + 1),
url,
})),
);
},
{ immediate: true, deep: true },
);
// 发送文件链接列表更新
const emitUpdateModelValue = () => {
// 情况1：数组结果
let result: string | string[] = fileList.value.map((file) => file.url!);
// 情况2：逗号分隔的字符串
if (props.limit === 1 || isString(props.modelValue)) {
result = result.join(',');
// 更新值
const value = getValue();
isInnerOperate.value = true;
emit('update:value', value);
emit('update:modelValue', value);
emit('change', value);
}
emit('update:modelValue', result);
};
}
/**
* 获取当前文件列表的值
* @returns 文件 URL 列表或字符串
*/
function getValue() {
const list = (fileList.value || [])
.filter((item) => item?.status === UploadResultStatus.SUCCESS)
.map((item: any) => {
if (item?.response && props?.resultField) {
return item?.response;
}
return item?.url || item?.response?.url || item?.response;
});
// 单个文件的情况，根据输入参数类型决定返回格式
if (props.maxNumber === 1) {
const singleValue = list.length > 0 ? list[0] : '';
// 如果原始值是字符串或 modelValue 是字符串，返回字符串
if (
isString(props.value) ||
(isUsingModelValue.value && isString(props.modelValue))
) {
return singleValue;
}
return singleValue;
}
// 多文件情况，根据输入参数类型决定返回格式
if (isUsingModelValue.value) {
return Array.isArray(props.modelValue) ? list : list.join(',');
}
return Array.isArray(props.value) ? list : list.join(',');
}
</script>
<template>
<div v-if="!disabled" class="upload-file">
<div>
<ElUpload
ref="uploadRef"
v-bind="$attrs"
v-model:file-list="fileList"
:action="uploadUrl"
:auto-upload="autoUpload"
:accept="getStringAccept"
:before-upload="beforeUpload"
:http-request="customRequest"
:disabled="disabled"
:limit="maxNumber"
:multiple="multiple"
:drag="drag"
:http-request="httpRequest0"
:limit="props.limit"
:multiple="props.limit > 1"
:on-error="excelUploadError"
:on-exceed="handleExceed"
:on-preview="handlePreview"
list-type="text"
:on-remove="handleRemove"
:on-success="handleFileSuccess"
:show-file-list="true"
class="upload-file-uploader"
name="file"
:on-preview="handlePreview"
:on-exceed="handleExceed"
>
<ElButton type="primary">
<IconifyIcon icon="ep:upload-filled" />
选取文件
</ElButton>
<template v-if="isShowTip" #tip>
<div style="font-size: 8px">
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
</div>
<div style="font-size: 8px">
格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> 的文件
<template v-if="drag">
<div class="upload-drag-area">
<p class="upload-drag-icon">
<IconifyIcon icon="lucide:cloud-upload" :size="48" />
</p>
<p class="upload-drag-text">点击或拖拽文件到此区域上传</p>
<p class="upload-drag-hint">
支持{{ accept.join('/') }}格式文件，不超过{{ maxSize }}MB
</p>
</div>
</template>
<template #file="row">
<div class="flex items-center">
<span>{{ row.file.name }}</span>
<div class="ml-10px">
<ElLink
:href="row.file.url"
:underline="false"
download
target="_blank"
type="primary"
>
下载
</ElLink>
</div>
<div class="ml-10px">
<ElButton link type="danger" @click="handleRemove(row.file)">
删除
</ElButton>
</div>
</div>
<template v-else>
<ElButton v-if="fileList && fileList.length < maxNumber" type="primary">
<IconifyIcon icon="lucide:cloud-upload" class="mr-1" />
{{ $t('ui.upload.upload') }}
</ElButton>
</template>
</ElUpload>
</div>
<!-- 上传操作禁用时 -->
<div v-if="disabled" class="upload-file">
<div
v-for="(file, index) in fileList"
:key="index"
class="file-list-item flex items-center"
v-if="showDescription && !drag"
class="mt-2 flex flex-wrap items-center text-sm"
>
<span>{{ file.name }}</span>
<div class="ml-10px">
<ElLink
:href="file.url"
:underline="false"
download
target="_blank"
type="primary"
>
下载
</ElLink>
</div>
请上传不超过
<span class="mx-1 font-bold text-primary">{{ maxSize }}MB</span>
的
<span class="mx-1 font-bold text-primary">{{ accept.join('/') }}</span>
格式文件
</div>
</div>
</template>
<style lang="scss" scoped>
.upload-file-uploader {
margin-bottom: 5px;
}
:deep(.upload-file-list .el-upload-list__item) {
position: relative;
margin-bottom: 10px;
line-height: 2;
border: 1px solid #e4e7ed;
}
:deep(.el-upload-list__item-file-name) {
max-width: 250px;
}
:deep(.upload-file-list .ele-upload-list__item-content) {
display: flex;
align-items: center;
justify-content: space-between;
color: inherit;
}
:deep(.ele-upload-list__item-content-action .el-link) {
margin-right: 10px;
}
.file-list-item {
border: 1px dashed var(--el-border-color-darker);
<style scoped>
.upload-drag-area {
padding: 20px;
text-align: center;
background-color: #fafafa;
border-radius: 8px;
transition: border-color 0.3s;
}
.upload-drag-area:hover {
border-color: var(--el-color-primary);
}
.upload-drag-icon {
margin-bottom: 16px;
color: #d9d9d9;
}
.upload-drag-text {
margin-bottom: 8px;
font-size: 16px;
color: #666;
}
.upload-drag-hint {
font-size: 14px;
color: #999;
}
</style>

433
apps/web-ele/src/components/upload/image-upload.vue
View File

@@ -5,13 +5,11 @@ import type {
UploadRequestOptions,
} from 'element-plus';
import type { AxiosResponse } from '@vben/request';
import type { UploadListType } from './typing';
import type { FileUploadProps } from './typing';
import type { AxiosProgressEvent } from '#/api/infra/file';
import { ref, toRefs, watch } from 'vue';
import { computed, ref, toRefs, watch } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { $t } from '@vben/locales';
@@ -23,67 +21,35 @@ import {
isString,
} from '@vben/utils';
import { ElMessage, ElUpload } from 'element-plus';
import { ElDialog, ElMessage, ElUpload } from 'element-plus';
import { UploadResultStatus } from './typing';
import { useUpload, useUploadType } from './use-upload';
defineOptions({ name: 'ImageUpload', inheritAttrs: false });
// TODO @xingyu：这个要不要抽时间看看，upload 组件，和 antd 要不要进一步对齐下；（主要是代码风格。微信沟通~~~）
const props = withDefaults(
defineProps<{
// 根据后缀，或者其他
accept?: string[];
api?: (
file: File,
onUploadProgress?: AxiosProgressEvent,
) => Promise<AxiosResponse<any>>;
// 组件边框圆角
borderradius?: string;
// 上传的目录
directory?: string;
disabled?: boolean;
// 上传框高度
height?: number | string;
helpText?: string;
listType?: UploadListType;
// 最大数量的文件，Infinity不限制
maxNumber?: number;
// 文件最大多少MB
maxSize?: number;
modelValue?: string | string[];
// 是否支持多选
multiple?: boolean;
// support xxx.xxx.xx
resultField?: string;
// 是否显示下面的描述
showDescription?: boolean;
// 上传框宽度
width?: number | string;
}>(),
{
modelValue: () => [],
directory: undefined,
disabled: false,
listType: 'picture-card',
helpText: '',
maxSize: 2,
maxNumber: 1,
accept: () => defaultImageAccepts,
multiple: false,
api: undefined,
resultField: '',
showDescription: true,
width: '',
height: '',
borderradius: '8px',
},
);
const emit = defineEmits(['change', 'update:modelValue', 'delete']);
const { accept, helpText, maxNumber, maxSize, width, height, borderradius } =
toRefs(props);
const props = withDefaults(defineProps<FileUploadProps>(), {
value: () => [],
modelValue: undefined,
directory: undefined,
disabled: false,
listType: 'picture-card',
helpText: '',
maxSize: 2,
maxNumber: 1,
accept: () => defaultImageAccepts,
multiple: false,
api: undefined,
resultField: '',
showDescription: true,
});
const emit = defineEmits([
'change',
'update:value',
'update:modelValue',
'delete',
]);
const { accept, helpText, maxNumber, maxSize } = toRefs(props);
const isInnerOperate = ref<boolean>(false);
const { getStringAccept } = useUploadType({
acceptRef: accept,
@@ -92,13 +58,28 @@ const { getStringAccept } = useUploadType({
maxSizeRef: maxSize,
});
/** 计算当前绑定的值，优先使用 modelValue */
const currentValue = computed(() => {
return props.modelValue === undefined ? props.value : props.modelValue;
});
/** 判断是否使用 modelValue */
const isUsingModelValue = computed(() => {
return props.modelValue !== undefined;
});
const previewOpen = ref<boolean>(false); // 是否展示预览
const previewImage = ref<string>(''); // 预览图片
const previewTitle = ref<string>(''); // 预览标题
const fileList = ref<UploadFile[]>([]);
const isLtMsg = ref<boolean>(true); // 文件大小错误提示
const isActMsg = ref<boolean>(true); // 文件类型错误提示
const isFirstRender = ref<boolean>(true); // 是否第一次渲染
const uploadNumber = ref<number>(0); // 上传文件计数器
const uploadList = ref<any[]>([]); // 临时上传列表
watch(
() => props.modelValue,
currentValue,
async (v) => {
if (isInnerOperate.value) {
isInnerOperate.value = false;
@@ -121,11 +102,11 @@ watch(
url: item,
} as UploadFile;
} else if (item && isObject(item)) {
const file = item as Record<string, any>;
const file = item as unknown as Record<string, any>;
return {
uid: file.uid || -i,
name: file.name || '',
status: UploadResultStatus.SUCCESS,
uid: file.uid ?? -i,
name: file.name ?? '',
status: file.status ?? UploadResultStatus.SUCCESS,
url: file.url,
} as UploadFile;
}
@@ -144,6 +125,7 @@ watch(
},
);
/** 将文件转换为 Base64 格式 */
function getBase64<T extends ArrayBuffer | null | string>(file: File) {
return new Promise<T>((resolve, reject) => {
const reader = new FileReader();
@@ -155,28 +137,52 @@ function getBase64<T extends ArrayBuffer | null | string>(file: File) {
});
}
const handlePreview = async (file: UploadFile) => {
/** 处理图片预览 */
async function handlePreview(file: UploadFile) {
if (!file.url) {
const preview = await getBase64<string>(file.raw!);
window.open(preview || '');
return;
file.url = await getBase64<string>(file.raw!);
}
window.open(file.url);
};
previewImage.value = file.url || '';
previewOpen.value = true;
previewTitle.value =
file.name ||
previewImage.value.slice(
Math.max(0, previewImage.value.lastIndexOf('/') + 1),
);
}
const handleRemove = async (file: UploadFile) => {
/** 处理文件删除 */
async function handleRemove(file: UploadFile) {
if (fileList.value) {
const index = fileList.value.findIndex((item) => item.uid === file.uid);
index !== -1 && fileList.value.splice(index, 1);
const value = getValue();
isInnerOperate.value = true;
emit('update:value', value);
emit('update:modelValue', value);
emit('change', value);
emit('delete', file);
}
};
}
/** 关闭预览弹窗 */
function handleCancel() {
previewOpen.value = false;
previewTitle.value = '';
}
/**
* 上传前校验
* @param file 待上传的文件
* @returns 是否允许上传
*/
async function beforeUpload(file: File) {
// 检查文件数量限制
if (fileList.value!.length >= props.maxNumber) {
ElMessage.error($t('ui.upload.maxNumber', [props.maxNumber]));
return false;
}
const beforeUpload = async (file: File) => {
const { maxSize, accept } = props;
const isAct = isImage(file.name, accept);
if (!isAct) {
@@ -194,9 +200,13 @@ const beforeUpload = async (file: File) => {
setTimeout(() => (isLtMsg.value = true), 1000);
return false;
}
return true;
};
// 只有在验证通过后才增加计数器
uploadNumber.value++;
return true;
}
/** 自定义上传请求 */
async function customRequest(options: UploadRequestOptions) {
let { api } = props;
if (!api || !isFunction(api)) {
@@ -215,33 +225,66 @@ async function customRequest(options: UploadRequestOptions) {
};
const res = await api?.(options.file, progressEvent);
// TODO @xingyu：看看有没更好的实现代码。
// 更新 fileList 中对应文件的 URL 为服务器返回的真实 URL
const uploadedFile = fileList.value.find(
(file) => file.uid === (options.file as any).uid,
);
if (uploadedFile) {
const responseData = res?.data || res;
uploadedFile.url =
props.resultField && responseData[props.resultField]
? responseData[props.resultField]
: responseData.url || responseData;
}
// 处理上传成功后的逻辑
handleUploadSuccess(res, options.file as File);
options.onSuccess!(res);
ElMessage.success($t('ui.upload.uploadSuccess'));
// 更新文件
const value = getValue();
isInnerOperate.value = true;
emit('update:modelValue', value);
emit('change', value);
} catch (error: any) {
console.error(error);
options.onError!(error);
handleUploadError(error);
}
}
/**
* 处理上传成功
* @param res 上传响应结果
* @param file 上传的文件
*/
function handleUploadSuccess(res: any, file: File) {
// 删除临时文件
const index = fileList.value?.findIndex((item) => item.name === file.name);
if (index !== -1) {
fileList.value?.splice(index!, 1);
}
// 添加到临时上传列表
const fileUrl = res?.url || res?.data || res;
uploadList.value.push({
name: file.name,
url: fileUrl,
status: UploadResultStatus.SUCCESS,
uid: file.name + Date.now(),
});
// 检查是否所有文件都上传完成
if (uploadList.value.length >= uploadNumber.value) {
fileList.value?.push(...uploadList.value);
uploadList.value = [];
uploadNumber.value = 0;
// 更新值
const value = getValue();
isInnerOperate.value = true;
emit('update:value', value);
emit('update:modelValue', value);
emit('change', value);
}
}
/** 处理上传错误 */
function handleUploadError(error: any) {
console.error('上传错误:', error);
ElMessage.error($t('ui.upload.uploadError'));
// 上传失败时减少计数器
uploadNumber.value = Math.max(0, uploadNumber.value - 1);
}
/**
* 获取当前文件列表的值
* @returns 文件 URL 列表或字符串
*/
function getValue() {
const list = (fileList.value || [])
.filter((item) => item?.status === UploadResultStatus.SUCCESS)
@@ -249,171 +292,77 @@ function getValue() {
if (item?.response && props?.resultField) {
return item?.response;
}
return item?.response?.url || item?.response;
return item?.url || item?.response?.url || item?.response;
});
// add by 芋艿：【特殊】单个文件的情况，获取首个元素，保证返回的是 String 类型
// 单个文件的情况，根据输入参数类型决定返回格式
if (props.maxNumber === 1) {
return list.length > 0 ? list[0] : '';
const singleValue = list.length > 0 ? list[0] : '';
// 如果原始值是字符串或 modelValue 是字符串，返回字符串
if (
isString(props.value) ||
(isUsingModelValue.value && isString(props.modelValue))
) {
return singleValue;
}
return singleValue;
}
return list;
// 多文件情况，根据输入参数类型决定返回格式
if (isUsingModelValue.value) {
return Array.isArray(props.modelValue) ? list : list.join(',');
}
return Array.isArray(props.value) ? list : list.join(',');
}
</script>
<template>
<div
class="upload-box"
:style="{
width: width || '150px',
height: height || '150px',
borderRadius: borderradius,
}"
>
<template
v-if="
fileList.length > 0 &&
fileList[0] &&
fileList[0].status === UploadResultStatus.SUCCESS
"
<div>
<ElUpload
v-bind="$attrs"
v-model:file-list="fileList"
:accept="getStringAccept"
:before-upload="beforeUpload"
:http-request="customRequest"
:disabled="disabled"
:list-type="listType"
:limit="maxNumber"
:multiple="multiple"
:on-preview="handlePreview"
:on-remove="handleRemove"
:class="{ 'upload-limit-reached': fileList.length >= maxNumber }"
>
<div class="upload-image-wrapper">
<img :src="fileList[0].url" class="upload-image" />
<div class="upload-handle">
<div class="handle-icon" @click="handlePreview(fileList[0]!)">
<IconifyIcon icon="lucide:circle-plus" />
<span>详情</span>
</div>
<div
v-if="!disabled"
class="handle-icon"
@click="handleRemove(fileList[0]!)"
>
<IconifyIcon icon="lucide:trash" />
<span>删除</span>
</div>
</div>
<div class="flex flex-col items-center justify-center">
<IconifyIcon icon="lucide:cloud-upload" :size="24" />
<div class="mt-2">{{ $t('ui.upload.imgUpload') }}</div>
</div>
</template>
<template v-else>
<ElUpload
v-bind="$attrs"
v-model:file-list="fileList"
:accept="getStringAccept"
:before-upload="beforeUpload"
:http-request="customRequest"
:disabled="disabled"
:list-type="listType"
:limit="maxNumber"
:multiple="multiple"
:on-preview="handlePreview"
:on-remove="handleRemove"
class="upload"
:style="{
width: width || '150px',
height: height || '150px',
borderRadius: borderradius,
}"
>
<div class="upload-content flex flex-col items-center justify-center">
<IconifyIcon icon="lucide:plus" />
</div>
</ElUpload>
</template>
<!-- TODO @xingyu：相比 antd 来说，EL 有点丑；貌似是这里展示的位置不太对； -->
<div v-if="showDescription" class="mt-2 text-xs text-gray-500">
{{ getStringAccept }}
</ElUpload>
<div
v-if="showDescription"
class="mt-2 flex flex-wrap items-center text-sm"
>
请上传不超过
<span class="mx-1 font-bold text-primary">{{ maxSize }}MB</span>
的
<span class="mx-1 font-bold text-primary">{{ accept.join('/') }}</span>
格式文件
</div>
<ElDialog v-model="previewOpen" :title="previewTitle" @close="handleCancel">
<img :src="previewImage" alt="" class="w-full" />
</ElDialog>
</div>
</template>
<style lang="scss" scoped>
.upload-box {
position: relative;
<style scoped>
.el-upload--picture-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
background: #fafafa;
border: 1px dashed var(--el-border-color-darker);
transition: border-color 0.2s;
}
.upload {
display: flex;
align-items: center;
justify-content: center;
width: 100% !important;
height: 100% !important;
background: transparent;
border: none !important;
}
.upload-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
cursor: pointer;
}
.upload-image-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
border-radius: inherit;
}
.upload-image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: inherit;
}
.upload-handle {
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
cursor: pointer;
background: rgb(0 0 0 / 50%);
opacity: 0;
transition: opacity 0.2s;
&:hover {
opacity: 1;
}
.handle-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 8px;
font-size: 18px;
color: #fff;
span {
margin-top: 2px;
font-size: 12px;
}
}
}
.upload-image-wrapper:hover .upload-handle {
opacity: 1;
}
/* 达到上传限制时隐藏上传按钮 */
.upload-limit-reached :deep(.el-upload--picture-card) {
display: none;
}
</style>

37
apps/web-ele/src/components/upload/input-upload.vue
View File

@@ -6,7 +6,7 @@ import type { FileUploadProps } from './typing';
import { computed } from 'vue';
import { useVModel } from '@vueuse/core';
import { ElCol, ElInput, ElRow } from 'element-plus';
import { ElInput } from 'element-plus';
import FileUpload from './file-upload.vue';
@@ -30,6 +30,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
passive: true,
});
/** 处理文件内容返回 */
function handleReturnText(text: string) {
modelValue.value = text;
emits('change', modelValue.value);
@@ -37,38 +38,42 @@ function handleReturnText(text: string) {
emits('update:modelValue', modelValue.value);
}
/** 计算输入框属性 */
const inputProps = computed(() => {
return {
...props.inputProps,
value: modelValue.value,
modelValue: modelValue.value,
};
});
/** 计算文本域属性 */
const textareaProps = computed(() => {
return {
...props.textareaProps,
value: modelValue.value,
modelValue: modelValue.value,
};
});
/** 计算文件上传属性 */
const fileUploadProps = computed(() => {
return {
...props.fileUploadProps,
};
});
</script>
<template>
<ElRow>
<ElCol :span="18">
<ElInput v-if="inputType === 'input'" v-bind="inputProps" />
<ElInput v-else :row="4" type="textarea" v-bind="textareaProps" />
</ElCol>
<ElCol :span="6">
<FileUpload
class="ml-4"
v-bind="fileUploadProps"
@return-text="handleReturnText"
/>
</ElCol>
</ElRow>
<div class="w-full">
<ElInput v-if="inputType === 'input'" readonly v-bind="inputProps">
<template #suffix>
<FileUpload v-bind="fileUploadProps" @return-text="handleReturnText" />
</template>
</ElInput>
<div v-else class="relative w-full">
<ElInput readonly :rows="4" type="textarea" v-bind="textareaProps" />
<div class="absolute bottom-0 right-2">
<FileUpload v-bind="fileUploadProps" @return-text="handleReturnText" />
</div>
</div>
</div>
</template>

69
apps/web-ele/src/components/upload/typing.ts
View File

@@ -2,76 +2,31 @@ import type { AxiosResponse } from '@vben/request';
import type { AxiosProgressEvent } from '#/api/infra/file';
export type UploadListType = 'picture' | 'picture-card' | 'text';
export type UploadStatus =
| 'error'
| 'fail'
| 'removed'
| 'success'
| 'uploading';
export enum UploadResultStatus {
DONE = 'done',
ERROR = 'error',
REMOVED = 'removed',
SUCCESS = 'success',
UPLOADING = 'uploading',
}
export interface CustomUploadFile {
uid: number;
name: string;
status: UploadStatus;
url?: string;
response?: any;
percentage?: number;
size?: number;
raw?: File;
}
export function convertToUploadStatus(
status: UploadResultStatus,
): UploadStatus {
switch (status) {
case UploadResultStatus.ERROR: {
return 'fail';
}
case UploadResultStatus.REMOVED: {
return 'removed';
}
case UploadResultStatus.SUCCESS: {
return 'success';
}
case UploadResultStatus.UPLOADING: {
return 'uploading';
}
default: {
return 'success';
}
}
}
export type UploadListType = 'picture' | 'picture-card' | 'text';
export interface FileUploadProps {
// 根据后缀，或者其他
accept?: string[];
accept?: string[]; // 根据后缀，或者其他
api?: (
file: File,
onUploadProgress?: AxiosProgressEvent,
) => Promise<AxiosResponse<any>>;
// 上传的目录
directory?: string;
) => Promise<AxiosResponse>;
directory?: string; // 上传的目录
disabled?: boolean;
drag?: boolean; // 是否支持拖拽上传
helpText?: string;
listType?: UploadListType;
// 最大数量的文件，Infinity不限制
maxNumber?: number;
// 文件最大多少MB
maxSize?: number;
// 是否支持多选
multiple?: boolean;
// support xxx.xxx.xx
resultField?: string;
// 是否显示下面的描述
showDescription?: boolean;
maxNumber?: number; // 最大数量的文件，Infinity 不限制
modelValue?: string | string[]; // v-model 支持
maxSize?: number; // 文件最大多少 MB
multiple?: boolean; // 是否支持多选
resultField?: string; // support xxx.xxx.xx
showDescription?: boolean; // 是否显示下面的描述
value?: string | string[];
}

14
apps/web-ele/src/components/upload/use-upload.ts
View File

@@ -22,6 +22,14 @@ enum UPLOAD_TYPE {
SERVER = 'server',
}
/**
* 上传类型钩子函数
* @param acceptRef 接受的文件类型
* @param helpTextRef 帮助文本
* @param maxNumberRef 最大文件数量
* @param maxSizeRef 最大文件大小
* @returns 文件类型限制和帮助文本的计算属性
*/
export function useUploadType({
acceptRef,
helpTextRef,
@@ -78,7 +86,11 @@ export function useUploadType({
return { getAccept, getStringAccept, getHelpText };
}
// TODO @芋艿：目前保持和 admin-vue3 一致，后续可能重构
/**
* 上传钩子函数
* @param directory 上传目录
* @returns 上传 URL 和自定义上传方法
*/
export function useUpload(directory?: string) {
// 后端上传地址
const uploadUrl = getUploadUrl();

7
apps/web-ele/src/views/_core/profile/modules/base-info.vue
View File

@@ -21,10 +21,13 @@ const emit = defineEmits<{
(e: 'success'): void;
}>();
// TODO @puhui999：展示貌似不太对；应该是左右，不是上下哈
const [Form, formApi] = useVbenForm({
commonConfig: {
labelWidth: 70,
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
schema: [
{

17
apps/web-ele/src/views/_core/profile/modules/profile-user.vue
View File

@@ -25,7 +25,6 @@ const avatar = computed(
() => props.profile?.avatar || preferences.app.defaultAvatar,
);
// TODO @puhui999：头像上传没跑通
async function handelUpload({
file,
filename,
@@ -37,9 +36,9 @@ async function handelUpload({
const { httpRequest } = useUpload();
// 将 Blob 转换为 File
const fileObj = new File([file], filename, { type: file.type });
const avatar = await httpRequest(fileObj);
// 2. 更新用户头像
await updateUserProfile({ avatar });
const res = await httpRequest(fileObj);
// 2. 更新用户头像（httpRequest 返回 { url: string }）
await updateUserProfile({ avatar: res.url });
}
</script>
@@ -57,8 +56,8 @@ async function handelUpload({
</ElTooltip>
</div>
<div class="mt-8">
<ElDescriptions :column="2">
<ElDescriptionsItem>
<ElDescriptions :column="2" border>
<ElDescriptionsItem label="用户账号">
<template #label>
<div class="flex items-center">
<IconifyIcon icon="ant-design:user-outlined" class="mr-1" />
@@ -116,7 +115,11 @@ async function handelUpload({
所属岗位
</div>
</template>
{{ profile.posts.map((post) => post.name).join(',') }}
{{
profile.posts && profile.posts.length > 0
? profile.posts.map((post) => post.name).join(',')
: '-'
}}
</ElDescriptionsItem>
<ElDescriptionsItem>
<template #label>

9
apps/web-ele/src/views/_core/profile/modules/user-social.vue
View File

@@ -100,7 +100,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
toolbarConfig: {
enabled: false,
},
} as VxeTableGridOptions<SystemSocialUserApi.SocialUser>,
},
});
/** 解绑账号 */
@@ -167,13 +167,12 @@ onMounted(() => {
>
<ElCard v-for="item in allBindList" :key="item.type" class="!mb-2">
<div class="flex w-full items-center gap-4">
<!-- TODO @puhui999：图片大小不太对 -->
<ElImage
:src="item.img"
:width="40"
:height="40"
style="width: 40px; height: 40px"
:alt="item.title"
:preview="false"
:preview-disabled="true"
fit="contain"
/>
<div class="flex flex-1 items-center justify-between">
<div class="flex flex-col">

33
apps/web-ele/src/views/bpm/processInstance/index.vue
View File

@@ -5,7 +5,11 @@ import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
import { h } from 'vue';
import { DocAlert, Page, prompt } from '@vben/common-ui';
import { BpmProcessInstanceStatus, DICT_TYPE } from '@vben/constants';
import {
BpmModelFormType,
BpmProcessInstanceStatus,
DICT_TYPE,
} from '@vben/constants';
import { ElButton, ElInput, ElMessage } from 'element-plus';
@@ -37,23 +41,34 @@ function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
}
/** 重新发起流程 */
async function handleCreate(row: BpmProcessInstanceApi.ProcessInstance) {
// 如果是【业务表单】，不支持重新发起
async function handleCreate(row?: BpmProcessInstanceApi.ProcessInstance) {
if (row?.id) {
const processDefinitionDetail = await getProcessDefinition(
row.processDefinitionId,
);
if (processDefinitionDetail.formType === 20) {
ElMessage.error(
'重新发起流程失败，原因：该流程使用业务表单，不支持重新发起',
);
if (processDefinitionDetail?.formType === BpmModelFormType.CUSTOM) {
if (!processDefinitionDetail.formCustomCreatePath) {
ElMessage.error('未配置业务表单的提交路由，无法重新发起');
return;
}
await router.push({
path: processDefinitionDetail.formCustomCreatePath,
query: {
id: row.businessKey,
},
});
return;
} else if (processDefinitionDetail?.formType === BpmModelFormType.NORMAL) {
await router.push({
name: 'BpmProcessInstanceCreate',
query: { processInstanceId: row.id },
});
return;
}
}
// 跳转发起流程界面
await router.push({
name: 'BpmProcessInstanceCreate',
query: { processInstanceId: row?.id },
query: row?.id ? { processInstanceId: row.id } : {},
});
}

148
apps/web-ele/src/views/crm/statistics/customer/chartOptions.ts
View File

@@ -1,17 +1,34 @@
import { DICT_TYPE } from '@vben/constants';
import { getDictLabel } from '@vben/hooks';
const getLegend = (extra: Record<string, any> = {}) => ({
top: 10,
...extra,
});
const getGrid = (extra: Record<string, any> = {}) => ({
left: 20,
right: 20,
bottom: 20,
containLabel: true,
...extra,
});
const getTooltip = (extra: Record<string, any> = {}) => ({
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
...extra,
});
export function getChartOptions(activeTabName: any, res: any): any {
switch (activeTabName) {
// 客户转化率分析
case 'conversionStat': {
return {
grid: {
left: 20,
right: 40, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '客户转化率',
@@ -40,12 +57,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '客户转化率分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
yAxis: {
type: 'value',
name: '转化率(%)',
@@ -59,14 +71,13 @@ export function getChartOptions(activeTabName: any, res: any): any {
}
case 'customerSummary': {
return {
grid: {
bottom: '5%',
containLabel: true,
grid: getGrid({
bottom: '8%',
left: '5%',
right: '5%',
top: '5 %',
},
legend: {},
top: 80,
}),
legend: getLegend(),
series: [
{
name: '新增客户数',
@@ -92,12 +103,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '客户总量分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
yAxis: [
{
type: 'value',
@@ -134,13 +140,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
};
});
return {
grid: {
left: 20,
right: 40, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '成交周期(天)',
@@ -166,12 +167,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
yAxis: [
{
type: 'value',
@@ -208,13 +204,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
};
});
return {
grid: {
left: 20,
right: 40, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '成交周期(天)',
@@ -240,12 +231,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
yAxis: [
{
type: 'value',
@@ -277,13 +263,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
const customerDealCycleByDate = res.customerDealCycleByDate;
const customerDealCycleByUser = res.customerDealCycleByUser;
return {
grid: {
left: 20,
right: 40, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '成交周期(天)',
@@ -309,12 +290,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '成交周期分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
yAxis: [
{
type: 'value',
@@ -342,15 +318,13 @@ export function getChartOptions(activeTabName: any, res: any): any {
},
};
}
// 客户跟进次数分析
case 'followUpSummary': {
return {
grid: {
left: 20,
grid: getGrid({
right: 30, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
}),
legend: getLegend(),
series: [
{
name: '跟进客户数',
@@ -376,12 +350,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '客户跟进次数分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
yAxis: [
{
type: 'value',
@@ -412,20 +381,21 @@ export function getChartOptions(activeTabName: any, res: any): any {
},
};
}
// 客户跟进方式分析
case 'followUpType': {
return {
title: {
text: '客户跟进方式分析',
left: 'center',
},
legend: {
orient: 'vertical',
legend: getLegend({
left: 'left',
},
tooltip: {
}),
tooltip: getTooltip({
trigger: 'item',
axisPointer: undefined,
formatter: '{b} : {c}% ',
},
}),
toolbox: {
feature: {
saveAsImage: { show: true, name: '客户跟进方式分析' }, // 保存为图片
@@ -458,13 +428,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
}
case 'poolSummary': {
return {
grid: {
left: 20,
right: 40, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '进入公海客户数',
@@ -490,12 +455,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '公海客户分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
yAxis: [
{
type: 'value',

62
apps/web-ele/src/views/crm/statistics/funnel/chartOptions.ts
View File

@@ -1,5 +1,26 @@
import { erpCalculatePercentage } from '@vben/utils';
const getLegend = (extra: Record<string, any> = {}) => ({
top: 10,
...extra,
});
const getGrid = (extra: Record<string, any> = {}) => ({
left: 20,
right: 20,
bottom: 20,
containLabel: true,
...extra,
});
const getTooltip = (extra: Record<string, any> = {}) => ({
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
...extra,
});
export function getChartOptions(
activeTabName: any,
active: boolean,
@@ -9,26 +30,19 @@ export function getChartOptions(
case 'businessInversionRateSummary': {
return {
color: ['#6ca2ff', '#6ac9d7', '#ff7474'],
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
},
},
legend: {
tooltip: getTooltip(),
legend: getLegend({
data: ['赢单转化率', '商机总数', '赢单商机数'],
bottom: '0px',
itemWidth: 14,
},
grid: {
}),
grid: getGrid({
top: '40px',
left: '40px',
right: '40px',
bottom: '40px',
containLabel: true,
borderColor: '#fff',
},
}),
xAxis: [
{
type: 'category',
@@ -117,13 +131,11 @@ export function getChartOptions(
}
case 'businessSummary': {
return {
grid: {
grid: getGrid({
left: 30,
right: 30, // 让 X 轴右侧显示完整
bottom: 20,
containLabel: true,
},
legend: {},
}),
legend: getLegend(),
series: [
{
name: '新增商机数量',
@@ -149,12 +161,7 @@ export function getChartOptions(
saveAsImage: { show: true, name: '新增商机分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
yAxis: [
{
type: 'value',
@@ -211,10 +218,11 @@ export function getChartOptions(
title: {
text: '销售漏斗',
},
tooltip: {
tooltip: getTooltip({
trigger: 'item',
axisPointer: undefined,
formatter: '{a} <br/>{b}',
},
}),
toolbox: {
feature: {
dataView: { readOnly: false },
@@ -222,9 +230,9 @@ export function getChartOptions(
saveAsImage: {},
},
},
legend: {
legend: getLegend({
data: ['客户', '商机', '赢单'],
},
}),
series: [
{
name: '销售漏斗',

55
apps/web-ele/src/views/crm/statistics/performance/chartOptions.ts
View File

@@ -1,14 +1,30 @@
const getLegend = (extra: Record<string, any> = {}) => ({
top: 10,
...extra,
});
const getGrid = (extra: Record<string, any> = {}) => ({
left: 20,
right: 20,
bottom: 20,
containLabel: true,
...extra,
});
const getTooltip = (extra: Record<string, any> = {}) => ({
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
...extra,
});
export function getChartOptions(activeTabName: any, res: any): any {
switch (activeTabName) {
case 'ContractCountPerformance': {
return {
grid: {
left: 20,
right: 20,
bottom: 20,
containLabel: true,
},
legend: {},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '当月合同数量（个）',
@@ -65,12 +81,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '客户总量分析' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
yAxis: [
{
type: 'value',
@@ -131,13 +142,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
}
case 'ContractPricePerformance': {
return {
grid: {
left: 20,
right: 20,
bottom: 20,
containLabel: true,
},
legend: {},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '当月合同金额（元）',
@@ -260,13 +266,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
}
case 'ReceivablePricePerformance': {
return {
grid: {
left: 20,
right: 20,
bottom: 20,
containLabel: true,
},
legend: {},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '当月回款金额（元）',

425
apps/web-ele/src/views/crm/statistics/portrait/chartOptions.ts
View File

@@ -13,6 +13,71 @@ function areaReplace(areaName: string) {
.replace('省', '');
}
const getPieTooltip = (extra: Record<string, any> = {}) => ({
trigger: 'item',
...extra,
});
const getPieLegend = (extra: Record<string, any> = {}) => ({
orient: 'vertical',
left: 'left',
...extra,
});
const getPieSeries = (name: string, data: any[]) => ({
name,
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data,
});
const getPiePanel = ({
data,
legendExtra,
seriesName,
title,
tooltipExtra,
}: {
data: any[];
legendExtra?: Record<string, any>;
seriesName: string;
title: string;
tooltipExtra?: Record<string, any>;
}) => ({
title: {
text: title,
left: 'center',
},
tooltip: getPieTooltip(tooltipExtra),
legend: getPieLegend(legendExtra),
toolbox: {
feature: {
saveAsImage: { show: true, name: title },
},
},
series: [getPieSeries(seriesName, data)],
});
export function getChartOptions(activeTabName: any, res: any): any {
switch (activeTabName) {
case 'area': {
@@ -111,326 +176,62 @@ export function getChartOptions(activeTabName: any, res: any): any {
}
case 'industry': {
return {
left: {
title: {
text: '全部客户',
left: 'center',
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
},
toolbox: {
feature: {
saveAsImage: { show: true, name: '全部客户' }, // 保存为图片
},
},
series: [
{
name: '全部客户',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: res.map((r: any) => {
return {
name: getDictLabel(
DICT_TYPE.CRM_CUSTOMER_INDUSTRY,
r.industryId,
),
value: r.customerCount,
};
}),
},
],
},
right: {
title: {
text: '成交客户',
left: 'center',
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
},
toolbox: {
feature: {
saveAsImage: { show: true, name: '成交客户' }, // 保存为图片
},
},
series: [
{
name: '成交客户',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: res.map((r: any) => {
return {
name: getDictLabel(
DICT_TYPE.CRM_CUSTOMER_INDUSTRY,
r.industryId,
),
value: r.dealCount,
};
}),
},
],
},
left: getPiePanel({
title: '全部客户',
seriesName: '全部客户',
data: res.map((r: any) => ({
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, r.industryId),
value: r.customerCount,
})),
}),
right: getPiePanel({
title: '成交客户',
seriesName: '成交客户',
data: res.map((r: any) => ({
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, r.industryId),
value: r.dealCount,
})),
}),
};
}
case 'level': {
return {
left: {
title: {
text: '全部客户',
left: 'center',
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
},
toolbox: {
feature: {
saveAsImage: { show: true, name: '全部客户' }, // 保存为图片
},
},
series: [
{
name: '全部客户',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: res.map((r: any) => {
return {
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level),
value: r.customerCount,
};
}),
},
],
},
right: {
title: {
text: '成交客户',
left: 'center',
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
},
toolbox: {
feature: {
saveAsImage: { show: true, name: '成交客户' }, // 保存为图片
},
},
series: [
{
name: '成交客户',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: res.map((r: any) => {
return {
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level),
value: r.dealCount,
};
}),
},
],
},
left: getPiePanel({
title: '全部客户',
seriesName: '全部客户',
data: res.map((r: any) => ({
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level),
value: r.customerCount,
})),
}),
right: getPiePanel({
title: '成交客户',
seriesName: '成交客户',
data: res.map((r: any) => ({
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_LEVEL, r.level),
value: r.dealCount,
})),
}),
};
}
case 'source': {
return {
left: {
title: {
text: '全部客户',
left: 'center',
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
},
toolbox: {
feature: {
saveAsImage: { show: true, name: '全部客户' }, // 保存为图片
},
},
series: [
{
name: '全部客户',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: res.map((r: any) => {
return {
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
value: r.customerCount,
};
}),
},
],
},
right: {
title: {
text: '成交客户',
left: 'center',
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
},
toolbox: {
feature: {
saveAsImage: { show: true, name: '成交客户' }, // 保存为图片
},
},
series: [
{
name: '成交客户',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: res.map((r: any) => {
return {
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
value: r.dealCount,
};
}),
},
],
},
left: getPiePanel({
title: '全部客户',
seriesName: '全部客户',
data: res.map((r: any) => ({
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
value: r.customerCount,
})),
}),
right: getPiePanel({
title: '成交客户',
seriesName: '成交客户',
data: res.map((r: any) => ({
name: getDictLabel(DICT_TYPE.CRM_CUSTOMER_SOURCE, r.source),
value: r.dealCount,
})),
}),
};
}
default: {

120
apps/web-ele/src/views/crm/statistics/rank/chartOptions.ts
View File

@@ -1,5 +1,25 @@
import { cloneDeep } from '@vben/utils';
const getLegend = (extra: Record<string, any> = {}) => ({
top: 10,
...extra,
});
const getGrid = (extra: Record<string, any> = {}) => ({
left: 20,
right: 20,
bottom: 20,
containLabel: true,
...extra,
});
const getTooltip = () => ({
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
});
export function getChartOptions(activeTabName: any, res: any): any {
switch (activeTabName) {
case 'contactCountRank': {
@@ -8,15 +28,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
dimensions: ['nickname', 'count'],
source: cloneDeep(res).toReversed(),
},
grid: {
left: 20,
right: 20,
bottom: 20,
containLabel: true,
},
legend: {
top: 50,
},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '新增联系人数排行',
@@ -34,12 +47,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '新增联系人数排行' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
xAxis: {
type: 'value',
name: '新增联系人数（个）',
@@ -56,15 +64,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
dimensions: ['nickname', 'count'],
source: cloneDeep(res).toReversed(),
},
grid: {
left: 20,
right: 20,
bottom: 20,
containLabel: true,
},
legend: {
top: 50,
},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '签约合同排行',
@@ -82,12 +83,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '签约合同排行' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
xAxis: {
type: 'value',
name: '签约合同数（个）',
@@ -104,15 +100,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
dimensions: ['nickname', 'count'],
source: cloneDeep(res).toReversed(),
},
grid: {
left: 20,
right: 20,
bottom: 20,
containLabel: true,
},
legend: {
top: 50,
},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '合同金额排行',
@@ -130,12 +119,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '合同金额排行' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
xAxis: {
type: 'value',
name: '合同金额（元）',
@@ -152,15 +136,8 @@ export function getChartOptions(activeTabName: any, res: any): any {
dimensions: ['nickname', 'count'],
source: cloneDeep(res).toReversed(),
},
grid: {
left: 20,
right: 20,
bottom: 20,
containLabel: true,
},
legend: {
top: 50,
},
grid: getGrid(),
legend: getLegend(),
series: [
{
name: '新增客户数排行',
@@ -178,12 +155,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '新增客户数排行' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
xAxis: {
type: 'value',
name: '新增客户数（个）',
@@ -226,12 +198,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '跟进次数排行' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
xAxis: {
type: 'value',
name: '跟进次数（次）',
@@ -274,12 +241,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '跟进客户数排行' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
xAxis: {
type: 'value',
name: '跟进客户数（个）',
@@ -322,12 +284,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '产品销量排行' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
xAxis: {
type: 'value',
name: '产品销量',
@@ -370,12 +327,7 @@ export function getChartOptions(activeTabName: any, res: any): any {
saveAsImage: { show: true, name: '回款金额排行' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
tooltip: getTooltip(),
xAxis: {
type: 'value',
name: '回款金额（元）',

52
apps/web-ele/src/views/mall/product/spu/components/sku-list.vue
View File

@@ -490,16 +490,25 @@ defineExpose({
@checkbox-all="handleSelectionChange"
>
<VxeColumn v-if="isComponent" type="checkbox" width="45" fixed="left" />
<!-- TODO @puhui999：这里的宽度貌似有点问题，图片会寄出来； -->
<VxeColumn align="center" title="图片" max-width="140" fixed="left">
<VxeColumn
align="center"
title="图片"
width="80"
min-width="80"
fixed="left"
>
<template #default="{ row }">
<ElImage
v-if="row.picUrl"
:src="row.picUrl"
class="h-[50px] w-[50px] cursor-pointer"
:preview-src-list="[row.picUrl]"
fit="cover"
/>
<div class="flex items-center justify-center overflow-hidden">
<ElImage
v-if="row.picUrl"
:src="row.picUrl"
class="h-[50px] w-[50px] cursor-pointer"
:preview-src-list="[row.picUrl]"
:preview-teleported="true"
:z-index="3000"
fit="cover"
/>
</div>
</template>
</VxeColumn>
<template v-if="formData?.specType && !isBatch">
@@ -583,15 +592,24 @@ defineExpose({
}"
>
<VxeColumn v-if="isComponent" type="checkbox" width="45" fixed="left" />
<!-- TODO @puhui999：这里的宽度貌似有点问题，图片会寄出来； -->
<VxeColumn align="center" title="图片" max-width="140" fixed="left">
<VxeColumn
align="center"
title="图片"
width="80"
min-width="80"
fixed="left"
>
<template #default="{ row }">
<ElImage
:src="row.picUrl"
class="h-[60px] w-[60px] cursor-pointer"
:preview-src-list="[row.picUrl]"
fit="cover"
/>
<div class="flex items-center justify-center overflow-hidden">
<ElImage
:src="row.picUrl"
class="h-[60px] w-[60px] cursor-pointer"
:preview-src-list="[row.picUrl]"
:preview-teleported="true"
:z-index="3000"
fit="cover"
/>
</div>
</template>
</VxeColumn>
<template v-if="formData?.specType">

3
apps/web-ele/src/views/mall/product/spu/components/spu-and-sku-list.vue
View File

@@ -130,12 +130,13 @@ watch(
<VxeColumn field="id" align="center" title="商品编号" min-width="30" />
<VxeColumn title="商品图" min-width="80">
<template #default="{ row }">
<!-- TODO @puhui999：它的 preview 貌似展示有点奇怪，不像 antd 是全屏的。。。 -->
<ElImage
v-if="row.picUrl"
:src="row.picUrl"
class="h-[30px] w-[30px] cursor-pointer"
:preview-src-list="[row.picUrl]"
:preview-teleported="true"
:z-index="3000"
fit="cover"
/>
</template>

1
apps/web-ele/src/views/mall/product/spu/form/index.vue
View File

@@ -320,7 +320,6 @@ onMounted(async () => {
<ElCard class="h-full w-full" v-loading="formLoading">
<template #header>
<div class="flex items-center justify-between">
<!-- TODO @puhui999：这里有告警，需要修复下。 -->
<ElTabs v-model="activeTabName" @tab-change="handleTabChange">
<ElTabPane label="基础设置" name="info" />
<ElTabPane label="价格库存" name="sku" />

1
apps/web-ele/src/views/mall/promotion/discountActivity/data.ts
View File

@@ -75,7 +75,6 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'spuIds',
label: '活动商品',
component: 'Input',
rules: 'required',
formItemClass: 'col-span-2',
},
];

316
apps/web-ele/src/views/mall/promotion/discountActivity/modules/form.vue
View File

@@ -1,30 +1,52 @@
<script lang="ts" setup>
import type { MallSpuApi } from '#/api/mall/product/spu';
import type { MallDiscountActivityApi } from '#/api/mall/promotion/discount/discountActivity';
import type {
PropertyAndValues,
RuleConfig,
SpuProperty,
} from '#/views/mall/product/spu/components';
import { computed, ref } from 'vue';
import { computed, nextTick, ref } from 'vue';
import { useVbenForm, useVbenModal } from '@vben/common-ui';
import {
convertToInteger,
erpCalculatePercentage,
formatToFraction,
yuanToFen,
} from '@vben/utils';
import { ElMessage } from 'element-plus';
import { ElButton, ElInputNumber, ElMessage } from 'element-plus';
import { VxeColumn } from '#/adapter/vxe-table';
import { getSpuDetailList } from '#/api/mall/product/spu';
import {
createDiscountActivity,
getDiscountActivity,
updateDiscountActivity,
} from '#/api/mall/promotion/discount/discountActivity';
import { $t } from '#/locales';
import { SpuShowcase } from '#/views/mall/product/spu/components';
import {
getPropertyList,
SpuAndSkuList,
SpuSkuSelect,
} from '#/views/mall/product/spu/components';
import { useFormSchema } from '../data';
defineOptions({ name: 'DiscountActivityForm' });
/** 折扣类型枚举 */
const PromotionDiscountTypeEnum = {
PRICE: { type: 1 }, // 满减
PERCENT: { type: 2 }, // 折扣
};
const emit = defineEmits(['success']);
const formData = ref<
Partial<MallDiscountActivityApi.DiscountActivity> & {
spuIds?: number[];
}
>({});
// ================= 表单相关 =================
const formData = ref<Partial<MallDiscountActivityApi.DiscountActivity>>({});
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['限时折扣活动'])
@@ -44,28 +66,203 @@ const [Form, formApi] = useVbenForm({
showDefaultActions: false,
});
// TODO @puhui999：antd 和 ele 里，修改时，商品都没展示。
// ================= 商品选择相关 =================
/** SKU 扩展类型 */
interface SkuExtension extends MallSpuApi.Sku {
productConfig: MallDiscountActivityApi.DiscountProduct;
}
/** SPU 扩展类型 */
interface SpuExtension extends MallSpuApi.Spu {
skus?: SkuExtension[];
}
const spuSelectRef = ref(); // 商品选择组件 Ref
const spuAndSkuListRef = ref(); // SKU 列表组件 Ref
const spuList = ref<SpuExtension[]>([]); // 选择的 SPU 列表
const spuPropertyList = ref<SpuProperty<SpuExtension>[]>([]); // SPU 属性列表
const spuIdList = ref<number[]>([]); // 已选择的 SPU ID 列表
/** SKU 校验规则配置 */
const ruleConfig: RuleConfig[] = [
{
name: 'productConfig.discountPrice',
rule: (arg) => arg > 0,
message: '商品优惠金额不能为 0 ！！！',
},
];
/** 打开商品选择弹窗 */
function openSpuSelect() {
spuSelectRef.value?.open();
}
/** 选择商品后的回调 */
function handleSpuSelected(spuId: number, skuIds?: number[]) {
getSpuDetails(spuId, skuIds);
}
/** 获取 SPU 详情 */
async function getSpuDetails(
spuId: number,
skuIdArr?: number[],
products?: MallDiscountActivityApi.DiscountProduct[],
type?: string,
) {
// 如果已经包含该 SPU 则跳过
if (spuIdList.value.includes(spuId)) {
if (type !== 'load') {
ElMessage.error('数据重复选择！');
}
return;
}
spuIdList.value.push(spuId);
const res = (await getSpuDetailList([spuId])) as SpuExtension[];
if (res.length === 0) {
return;
}
const spu = res[0]!;
// 筛选 SKU
const selectSkus =
skuIdArr === undefined
? spu.skus
: spu.skus?.filter((sku) => skuIdArr.includes(sku.id!));
// 为每个 SKU 添加折扣配置
selectSkus?.forEach((sku) => {
let config: MallDiscountActivityApi.DiscountProduct = {
skuId: sku.id!,
spuId: spu.id!,
discountType: 1,
discountPercent: 0,
discountPrice: 0,
};
// 编辑时，使用已有的配置
if (products !== undefined) {
const product = products.find((item) => item.skuId === sku.id);
if (product) {
// 转换为元显示
config = {
...product,
discountPercent: Number(formatToFraction(product.discountPercent)),
discountPrice: Number(formatToFraction(product.discountPrice)),
};
}
}
(sku as SkuExtension).productConfig = config;
});
spu.skus = selectSkus as SkuExtension[];
spuPropertyList.value.push({
spuId: spu.id!,
spuDetail: spu,
propertyList: getPropertyList(spu) as PropertyAndValues[],
});
spuList.value.push(spu);
}
/** 删除 SPU */
function handleDeleteSpu(spuId: number) {
const spuIndex = spuIdList.value.indexOf(spuId);
if (spuIndex !== -1) {
spuIdList.value.splice(spuIndex, 1);
}
const propertyIndex = spuPropertyList.value.findIndex(
(item) => item.spuId === spuId,
);
if (propertyIndex !== -1) {
spuPropertyList.value.splice(propertyIndex, 1);
}
const listIndex = spuList.value.findIndex((item) => item.id === spuId);
if (listIndex !== -1) {
spuList.value.splice(listIndex, 1);
}
}
/** 处理 SKU 优惠金额变动 */
function handleSkuDiscountPriceChange(row: SkuExtension) {
if (row.productConfig.discountPrice <= 0) {
return;
}
// 设置优惠类型：满减
row.productConfig.discountType = PromotionDiscountTypeEnum.PRICE.type;
// 计算折扣百分比
const price = typeof row.price === 'number' ? row.price : Number(row.price);
const percent = erpCalculatePercentage(
price - yuanToFen(row.productConfig.discountPrice),
price,
);
row.productConfig.discountPercent =
typeof percent === 'number' ? percent : Number(percent);
}
/** 处理 SKU 折扣百分比变动 */
function handleSkuDiscountPercentChange(row: SkuExtension) {
if (
row.productConfig.discountPercent <= 0 ||
row.productConfig.discountPercent >= 100
) {
return;
}
// 设置优惠类型：折扣
row.productConfig.discountType = PromotionDiscountTypeEnum.PERCENT.type;
// 计算优惠金额
const price = typeof row.price === 'number' ? row.price : Number(row.price);
row.productConfig.discountPrice = Number(
formatToFraction(price - price * (row.productConfig.discountPercent / 100)),
);
}
/** 重置表单 */
async function resetForm() {
spuList.value = [];
spuPropertyList.value = [];
spuIdList.value = [];
formData.value = {};
await nextTick();
await formApi.resetForm();
}
// ================= 弹窗相关 =================
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as MallDiscountActivityApi.DiscountActivity;
// 确保必要的默认值
if (!data.products) {
data.products = [];
// 校验是否选择了商品
if (spuList.value.length === 0) {
ElMessage.warning('请选择活动商品');
return;
}
modalApi.lock();
try {
// 获取折扣商品配置
const products = structuredClone(
spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
) as MallDiscountActivityApi.DiscountProduct[];
// 转换金额为分
products.forEach((item) => {
item.discountPercent = convertToInteger(item.discountPercent);
item.discountPrice = convertToInteger(item.discountPrice);
});
const data = structuredClone(
await formApi.getValues(),
) as MallDiscountActivityApi.DiscountActivity;
data.products = products;
// 提交请求
await (formData.value?.id
? updateDiscountActivity(data)
: createDiscountActivity(data));
// 关闭并提示
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
@@ -75,19 +272,45 @@ const [Modal, modalApi] = useVbenModal({
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = {};
await resetForm();
return;
}
// 加载数据
const data = modalApi.getData<MallDiscountActivityApi.DiscountActivity>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = await getDiscountActivity(data.id);
// 设置到 values
await formApi.setValues(formData.value);
const activityData = await getDiscountActivity(data.id);
formData.value = activityData;
// 加载商品详情
if (activityData.products && activityData.products.length > 0) {
// 按 spuId 分组
const spuProductsMap = new Map<
number,
MallDiscountActivityApi.DiscountProduct[]
>();
for (const product of activityData.products) {
const spuId = product.spuId;
if (!spuProductsMap.has(spuId)) {
spuProductsMap.set(spuId, []);
}
spuProductsMap.get(spuId)!.push(product);
}
// 加载每个 SPU 的详情
for (const [spuId, products] of spuProductsMap) {
const skuIdArr = products.map((p) => p.skuId);
await getSpuDetails(spuId, skuIdArr, products, 'load');
}
}
// 设置表单值
await formApi.setValues(activityData);
} finally {
modalApi.unlock();
}
@@ -96,12 +319,59 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-3/5" :title="getTitle">
<Modal class="w-[70%]" :title="getTitle">
<Form>
<!-- 自定义插槽：商品选择 -->
<template #spuIds>
<SpuShowcase v-model="formData.spuIds" />
<div class="w-full">
<ElButton class="mb-4" @click="openSpuSelect">选择商品</ElButton>
<SpuAndSkuList
ref="spuAndSkuListRef"
:deletable="true"
:rule-config="ruleConfig"
:spu-list="spuList"
:spu-property-list-p="spuPropertyList"
@delete="handleDeleteSpu"
>
<!-- 扩展列：限时折扣活动特有配置 -->
<template #default>
<VxeColumn align="center" min-width="168" title="优惠金额(元)">
<template #default="{ row }">
<ElInputNumber
v-model="row.productConfig.discountPrice"
:max="Number(formatToFraction(row.price))"
:min="0"
:precision="2"
:step="0.1"
class="w-full"
@change="handleSkuDiscountPriceChange(row)"
/>
</template>
</VxeColumn>
<VxeColumn align="center" min-width="168" title="折扣百分比(%)">
<template #default="{ row }">
<ElInputNumber
v-model="row.productConfig.discountPercent"
:max="100"
:min="0"
:precision="2"
:step="0.1"
class="w-full"
@change="handleSkuDiscountPercentChange(row)"
/>
</template>
</VxeColumn>
</template>
</SpuAndSkuList>
</div>
</template>
</Form>
</Modal>
<!-- 商品选择弹窗 -->
<SpuSkuSelect
ref="spuSelectRef"
:is-select-sku="true"
@select="handleSpuSelected"
/>
</template>

6
apps/web-ele/src/views/mall/promotion/rewardActivity/data.ts
View File

@@ -138,6 +138,7 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'x',
placeholder: [
$t('utils.rangePicker.beginTime'),
$t('utils.rangePicker.endTime'),
@@ -222,7 +223,10 @@ export function useFormSchema(): VbenFormSchema[] {
label: '优惠设置',
component: 'Input',
formItemClass: 'items-start',
rules: 'required',
rules: z
.array(z.any())
.min(1, { message: '请添加至少一条优惠规则' })
.default([]),
},
{
fieldName: 'productScopeValues', // 隐藏字段：用于自动同步 productScopeValues

24
apps/web-ele/src/views/mall/promotion/rewardActivity/modules/form.vue
View File

@@ -8,7 +8,7 @@ import {
PromotionConditionTypeEnum,
PromotionProductScopeEnum,
} from '@vben/constants';
import { convertToInteger, formatToFraction } from '@vben/utils';
import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
import { ElMessage } from 'element-plus';
@@ -52,6 +52,8 @@ const [Form, formApi] = useVbenForm({
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
// 在验证前同步 formData.rules 到表单中
await formApi.setFieldValue('rules', formData.value.rules || []);
const { valid } = await formApi.validate();
if (!valid) {
return;
@@ -60,18 +62,24 @@ const [Modal, modalApi] = useVbenModal({
// 提交表单
try {
const values = await formApi.getValues();
const data = { ...formData.value, ...values };
// 使用 formData.value 作为基础，确保 rules 来自 formData
const data = { ...values, ...formData.value };
if (data.startAndEndTime && Array.isArray(data.startAndEndTime)) {
data.startTime = data.startAndEndTime[0];
data.endTime = data.startAndEndTime[1];
data.startTime = Number(data.startAndEndTime[0]);
data.endTime = Number(data.startAndEndTime[1]);
delete data.startAndEndTime;
}
data.rules?.forEach((item: any) => {
// 深拷贝 rules 避免修改原始数据
const rules = cloneDeep(
data.rules,
) as unknown as MallRewardActivityApi.RewardRule[];
rules.forEach((item: any) => {
item.discountPrice = convertToInteger(item.discountPrice || 0);
if (data.conditionType === PromotionConditionTypeEnum.PRICE.type) {
item.limit = convertToInteger(item.limit || 0);
}
});
data.rules = rules;
await (data.id
? updateRewardActivity(data as MallRewardActivityApi.RewardActivity)
: createRewardActivity(data as MallRewardActivityApi.RewardActivity));
@@ -96,7 +104,11 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock();
try {
const result = await getReward(data.id);
result.startAndEndTime = [result.startTime, result.endTime] as any[];
// valueFormat: 'x' 配置下，直接使用时间戳字符串
result.startAndEndTime = [
result.startTime ? String(result.startTime) : undefined,
result.endTime ? String(result.endTime) : undefined,
] as any[];
result.rules?.forEach((item: any) => {
item.discountPrice = formatToFraction(item.discountPrice || 0);
if (result.conditionType === PromotionConditionTypeEnum.PRICE.type) {

2
apps/web-ele/src/views/pay/app/modules/channel-form.vue
View File

@@ -43,7 +43,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as PayChannelApi.Channel;
data.config = JSON.stringify(data.config);
data.config = JSON.stringify(data.config || {});
try {
await (data.id ? updateChannel(data) : createChannel(data));
// 关闭并提示

5
apps/web-naive/src/adapter/vxe-table.ts
View File

@@ -66,9 +66,10 @@ setupVbenVxeTable({
// 表格配置项可以用 cellRender: { name: 'CellImage' },
vxeUI.renderer.add('CellImage', {
renderTableDefault(_renderOpts, params) {
renderTableDefault(renderOpts, params) {
const { props } = renderOpts;
const { column, row } = params;
return h(NImage, { src: row[column.field] });
return h(NImage, { src: row[column.field], ...props });
},
});

5
apps/web-tdesign/src/adapter/vxe-table.ts
View File

@@ -72,9 +72,10 @@ setupVbenVxeTable({
// 表格配置项可以用 cellRender: { name: 'CellImage' },
vxeUI.renderer.add('CellImage', {
renderTableDefault(_renderOpts, params) {
renderTableDefault(renderOpts, params) {
const { props } = renderOpts;
const { column, row } = params;
return h(Image, { src: row[column.field] });
return h(Image, { src: row[column.field], ...props });
},
});

4
apps/web-tdesign/src/bootstrap.ts
View File

@@ -5,6 +5,8 @@ import { registerLoadingDirective } from '@vben/common-ui/es/loading';
import { preferences } from '@vben/preferences';
import { initStores } from '@vben/stores';
import '@vben/styles';
// import '@vben/styles/antd';
// 引入组件库的少量全局样式变量
import { useTitle } from '@vueuse/core';
@@ -15,8 +17,6 @@ import { initSetupVbenForm } from './adapter/form';
import App from './app.vue';
import { router } from './router';
// import '@vben/styles/antd';
// 引入组件库的少量全局样式变量
import 'tdesign-vue-next/es/style/index.css';
async function bootstrap(namespace: string) {

5
docs/src/_env/adapter/vxe-table.ts
View File

@@ -40,9 +40,10 @@ if (!import.meta.env.SSR) {
// 表格配置项可以用 cellRender: { name: 'CellImage' },
vxeUI.renderer.add('CellImage', {
renderTableDefault(_renderOpts, params) {
renderTableDefault(renderOpts, params) {
const { props } = renderOpts;
const { column, row } = params;
return h(Image, { src: row[column.field] });
return h(Image, { src: row[column.field], ...props });
},
});

4
docs/src/guide/introduction/thin.md
View File

@@ -24,7 +24,7 @@ apps/web-naive
## 演示代码精简
如果你不需要演示代码，你可以直接删除的`playground`文件夹。
如果你不需要演示代码，你可以直接删除 `playground` 文件夹。
## 文档精简
@@ -88,7 +88,7 @@ pnpm install
- 在应用的 `src/router/routes` 文件中，你可以删除不需要的路由。其中 `core` 文件夹内，如果只需要登录和忘记密码，你可以删除其他路由，如忘记密码、注册等。路由删除后，你可以删除对应的页面文件，在 `src/views/_core` 文件夹中。
- 在应用的 `src/router/routes` 文件中，你可以按需求删除不需要的路由，如`demos`、`vben` 目录等。路由删除后，你可以删除对应的页面文件，在 `src/views` 文件夹中。
- 在应用的 `src/router/routes` 文件中，你可以按需求删除不需要的路由，如`demos`、`vben` 目录等。路由删除后，你可以在 `src/views` 文件夹中删除对应的页面文件。
### 删除不需要的组件

3
packages/@core/base/design/src/css/global.css
View File

@@ -14,8 +14,9 @@
}
html {
@apply text-foreground bg-background font-sans text-[100%];
@apply text-foreground bg-background font-sans;
font-size: var(--font-size-base, 16px);
font-variation-settings: normal;
line-height: 1.15;
text-size-adjust: 100%;

1
packages/@core/base/design/src/design-tokens/default.css
View File

@@ -93,6 +93,7 @@
/* 基本文字大小 */
--font-size-base: 16px;
--menu-font-size: calc(var(--font-size-base) * 0.875);
/* =============component & UI============= */

37
packages/@core/base/shared/src/utils/tree.ts
View File

@@ -208,4 +208,39 @@ function treeToString(tree: any[], nodeId: number | string) {
return str;
}
export { filterTree, handleTree, mapTree, traverseTreeValues, treeToString };
/**
* 对树形结构数据进行递归排序
* @param treeData - 树形数据数组
* @param sortFunction - 排序函数，用于定义排序规则
* @param options - 配置选项，包括子节点属性名
* @returns 排序后的树形数据
*/
function sortTree<T extends Record<string, any>>(
treeData: T[],
sortFunction: (a: T, b: T) => number,
options?: TreeConfigOptions,
): T[] {
const { childProps } = options || {
childProps: 'children',
};
return treeData.toSorted(sortFunction).map((item) => {
const children = item[childProps];
if (children && Array.isArray(children) && children.length > 0) {
return {
...item,
[childProps]: sortTree(children, sortFunction, options),
};
}
return item;
});
}
export {
filterTree,
handleTree,
mapTree,
sortTree,
traverseTreeValues,
treeToString,
};

1
packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
View File

@@ -113,6 +113,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
"colorPrimary": "hsl(212 100% 45%)",
"colorSuccess": "hsl(144 57% 58%)",
"colorWarning": "hsl(42 84% 61%)",
"fontSize": 16,
"mode": "dark",
"radius": "0.5",
"semiDarkHeader": false,

1
packages/@core/preferences/src/config.ts
View File

@@ -116,6 +116,7 @@ const defaultPreferences: Preferences = {
colorWarning: 'hsl(42 84% 61%)',
mode: 'dark',
radius: '0.5',
fontSize: 16,
semiDarkHeader: false,
semiDarkSidebar: false,
},

5
packages/@core/preferences/src/preferences.ts
View File

@@ -141,7 +141,10 @@ class PreferenceManager {
private handleUpdates(updates: DeepPartial<Preferences>) {
const themeUpdates = updates.theme || {};
const appUpdates = updates.app || {};
if (themeUpdates && Object.keys(themeUpdates).length > 0) {
if (
(themeUpdates && Object.keys(themeUpdates).length > 0) ||
Reflect.has(themeUpdates, 'fontSize')
) {
updateCSSVariables(this.state);
}

2
packages/@core/preferences/src/types.ts
View File

@@ -239,6 +239,8 @@ interface ThemePreferences {
colorSuccess: string;
/** 警告色 */
colorWarning: string;
/** 字体大小（单位：px） */
fontSize: number;
/** 当前主题 */
mode: ThemeModeType;
/** 圆角 */

13
packages/@core/preferences/src/update-css-variables.ts
View File

@@ -66,6 +66,19 @@ function updateCSSVariables(preferences: Preferences) {
if (Reflect.has(theme, 'radius')) {
document.documentElement.style.setProperty('--radius', `${radius}rem`);
}
// 更新字体大小
if (Reflect.has(theme, 'fontSize')) {
const fontSize = theme.fontSize;
document.documentElement.style.setProperty(
'--font-size-base',
`${fontSize}px`,
);
document.documentElement.style.setProperty(
'--menu-font-size',
`calc(${fontSize}px * 0.875)`,
);
}
}
/**

17
packages/@core/ui-kit/menu-ui/src/components/menu.vue
View File

@@ -388,7 +388,7 @@ $namespace: vben;
padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
margin: 0 var(--menu-item-margin-x) var(--menu-item-margin-y)
var(--menu-item-margin-x);
font-size: var(--menu-font-size);
font-size: var(--menu-font-size) !important;
color: var(--menu-item-color);
white-space: nowrap;
text-decoration: none;
@@ -433,6 +433,7 @@ $namespace: vben;
max-width: var(--menu-title-width);
overflow: hidden;
text-overflow: ellipsis;
font-size: var(--menu-font-size) !important;
white-space: nowrap;
opacity: 1;
}
@@ -444,7 +445,7 @@ $namespace: vben;
.#{$namespace}-menu__popup-container,
.#{$namespace}-menu {
--menu-title-width: 140px;
--menu-item-icon-size: 16px;
--menu-item-icon-size: var(--font-size-base, 16px);
--menu-item-height: 38px;
--menu-item-padding-y: 21px;
--menu-item-padding-x: 12px;
@@ -458,7 +459,6 @@ $namespace: vben;
--menu-item-collapse-margin-x: 0px;
--menu-item-radius: 0px;
--menu-item-indent: 16px;
--menu-font-size: 14px;
&.is-dark {
--menu-background-color: hsl(var(--menu));
@@ -752,7 +752,7 @@ $namespace: vben;
}
.#{$namespace}-menu__icon {
display: block;
font-size: 20px !important;
font-size: calc(var(--font-size-base, 16px) * 1.25) !important;
transition: all 0.25s ease;
}
@@ -760,7 +760,7 @@ $namespace: vben;
display: inline-flex;
margin-top: 8px;
margin-bottom: 0;
font-size: 12px;
font-size: calc(var(--font-size-base, 16px) * 0.75);
font-weight: 400;
line-height: normal;
transition: all 0.25s ease;
@@ -785,7 +785,7 @@ $namespace: vben;
width: 100%;
height: 100%;
padding: 0 var(--menu-item-padding-x);
font-size: var(--menu-font-size);
font-size: var(--menu-font-size) !important;
line-height: var(--menu-item-height);
}
}
@@ -812,9 +812,14 @@ $namespace: vben;
.#{$namespace}-sub-menu-content {
height: var(--menu-item-height);
font-size: var(--menu-font-size) !important;
@include menu-item;
* {
font-size: inherit !important;
}
&__icon-arrow {
position: absolute;
top: 50%;

6
packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
View File

@@ -102,7 +102,7 @@ $namespace: vben;
}
.#{$namespace}-normal-menu__icon {
font-size: 20px;
font-size: calc(var(--font-size-base, 16px) * 1.25);
}
}
@@ -146,14 +146,14 @@ $namespace: vben;
&__icon {
max-height: 20px;
font-size: 20px;
font-size: calc(var(--font-size-base, 16px) * 1.25);
transition: all 0.25s ease;
}
&__name {
margin-top: 8px;
margin-bottom: 0;
font-size: 12px;
font-size: calc(var(--font-size-base, 16px) * 0.75);
font-weight: 400;
transition: all 0.25s ease;
}

15
packages/effects/common-ui/src/components/api-component/api-component.vue
View File

@@ -36,6 +36,8 @@ interface Props {
childrenField?: string;
/** value字段名 */
valueField?: string;
/** disabled字段名 */
disabledField?: string;
/** 组件接收options数据的属性名 */
optionsPropName?: string;
/** 是否立即调用api */
@@ -75,6 +77,7 @@ defineOptions({ name: 'ApiComponent', inheritAttrs: false });
const props = withDefaults(defineProps<Props>(), {
labelField: 'label',
valueField: 'value',
disabledField: 'disabled',
childrenField: '',
optionsPropName: 'options',
resultField: '',
@@ -108,17 +111,25 @@ const isFirstLoaded = ref(false);
const hasPendingRequest = ref(false);
const getOptions = computed(() => {
const { labelField, valueField, childrenField, numberToString } = props;
const {
labelField,
valueField,
disabledField,
childrenField,
numberToString,
} = props;
const refOptionsData = unref(refOptions);
function transformData(data: OptionsItem[]): OptionsItem[] {
return data.map((item) => {
const value = get(item, valueField);
const disabled = get(item, disabledField);
return {
...objectOmit(item, [labelField, valueField, childrenField]),
...objectOmit(item, [labelField, valueField, disabled, childrenField]),
label: get(item, labelField),
value: numberToString ? `${value}` : value,
disabled: get(item, disabledField),
...(childrenField && item[childrenField]
? { children: transformData(item[childrenField]) }
: {}),

1
packages/effects/layouts/src/widgets/preferences/blocks/index.ts
View File

@@ -15,5 +15,6 @@ export { default as GlobalShortcutKeys } from './shortcut-keys/global.vue';
export { default as SwitchItem } from './switch-item.vue';
export { default as BuiltinTheme } from './theme/builtin.vue';
export { default as ColorMode } from './theme/color-mode.vue';
export { default as FontSize } from './theme/font-size.vue';
export { default as Radius } from './theme/radius.vue';
export { default as Theme } from './theme/theme.vue';

62
packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue Normal file
View File

@@ -0,0 +1,62 @@
<script setup lang="ts">
import { watch } from 'vue';
import { $t } from '@vben/locales';
import {
NumberField,
NumberFieldContent,
NumberFieldDecrement,
NumberFieldIncrement,
NumberFieldInput,
} from '@vben-core/shadcn-ui';
defineOptions({
name: 'PreferenceFontSize',
});
const modelValue = defineModel<number>({
default: 16,
});
const min = 15;
const max = 22;
const step = 1;
// 限制输入值在 min 和 max 之间
watch(
modelValue,
(newValue) => {
if (newValue < min) {
modelValue.value = min;
} else if (newValue > max) {
modelValue.value = max;
}
},
{ immediate: true },
);
</script>
<template>
<div class="flex w-full flex-col gap-4">
<div class="flex items-center gap-2">
<NumberField
v-model="modelValue"
:max="max"
:min="min"
:step="step"
class="w-full"
>
<NumberFieldContent>
<NumberFieldDecrement />
<NumberFieldInput />
<NumberFieldIncrement />
</NumberFieldContent>
</NumberField>
<span class="text-muted-foreground whitespace-nowrap text-xs">px</span>
</div>
<div class="text-muted-foreground text-xs">
{{ $t('preferences.theme.fontSizeTip') }}
</div>
</div>
</template>

5
packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
View File

@@ -43,6 +43,7 @@ import {
ColorMode,
Content,
Copyright,
FontSize,
Footer,
General,
GlobalShortcutKeys,
@@ -85,6 +86,7 @@ const themeColorPrimary = defineModel<string>('themeColorPrimary');
const themeBuiltinType = defineModel<BuiltinThemeType>('themeBuiltinType');
const themeMode = defineModel<ThemeModeType>('themeMode');
const themeRadius = defineModel<string>('themeRadius');
const themeFontSize = defineModel<number>('themeFontSize');
const themeSemiDarkSidebar = defineModel<boolean>('themeSemiDarkSidebar');
const themeSemiDarkHeader = defineModel<boolean>('themeSemiDarkHeader');
@@ -328,6 +330,9 @@ async function handleReset() {
<Block :title="$t('preferences.theme.radius')">
<Radius v-model="themeRadius" />
</Block>
<Block :title="$t('preferences.theme.fontSize')">
<FontSize v-model="themeFontSize" />
</Block>
<Block :title="$t('preferences.other')">
<ColorMode
v-model:app-color-gray-mode="appColorGrayMode"

20
packages/icons/src/svg/load.ts
View File

@@ -13,10 +13,28 @@ function parseSvg(svgData: string): IconifyIconStructure {
const xmlDoc = parser.parseFromString(svgData, 'image/svg+xml');
const svgElement = xmlDoc.documentElement;
// 提取 SVG 根元素的关键样式属性
const getAttrs = (el: Element, attrs: string[]) =>
attrs
.map((attr) =>
el.hasAttribute(attr) ? `${attr}="${el.getAttribute(attr)}"` : '',
)
.filter(Boolean)
.join(' ');
const rootAttrs = getAttrs(svgElement, [
'fill',
'stroke',
'fill-rule',
'stroke-width',
]);
const svgContent = [...svgElement.childNodes]
.filter((node) => node.nodeType === Node.ELEMENT_NODE)
.map((node) => new XMLSerializer().serializeToString(node))
.join('');
// 若根有属性，用一个 g 标签包裹内容并继承属性
const body = rootAttrs ? `<g ${rootAttrs}>${svgContent}</g>` : svgContent;
const viewBoxValue = svgElement.getAttribute('viewBox') || '';
const [left, top, width, height] = viewBoxValue.split(' ').map((val) => {
@@ -25,7 +43,7 @@ function parseSvg(svgData: string): IconifyIconStructure {
});
return {
body: svgContent,
body,
height,
left,
top,

2
packages/locales/src/langs/en-US/preferences.json
View File

@@ -120,6 +120,8 @@
"theme": {
"title": "Theme",
"radius": "Radius",
"fontSize": "Font Size",
"fontSizeTip": "Adjust global font size with real-time preview",
"light": "Light",
"dark": "Dark",
"darkSidebar": "Semi Dark Sidebar",

2
packages/locales/src/langs/zh-CN/preferences.json
View File

@@ -120,6 +120,8 @@
"theme": {
"title": "主题",
"radius": "圆角",
"fontSize": "字体大小",
"fontSizeTip": "调整全局字体大小，实时预览效果",
"light": "浅色",
"dark": "深色",
"darkSidebar": "深色侧边栏",

13
packages/utils/src/helpers/generate-menus.ts
View File

@@ -8,7 +8,12 @@ import type {
RouteRecordStringComponent,
} from '@vben-core/typings';
import { filterTree, isHttpUrl, mapTree } from '@vben-core/shared/utils';
import {
filterTree,
isHttpUrl,
mapTree,
sortTree,
} from '@vben-core/shared/utils';
/**
* 根据 routes 生成菜单列表
@@ -83,7 +88,7 @@ function generateMenus(
});
// 对菜单进行排序，避免order=0时被替换成999的问题
menus = menus.toSorted((a, b) => (a?.order ?? 999) - (b?.order ?? 999));
menus = sortTree(menus, (a, b) => (a?.order ?? 999) - (b?.order ?? 999));
// 过滤掉隐藏的菜单项
return filterTree(menus, (menu) => !!menu.show);
@@ -111,7 +116,7 @@ function convertServerMenuToRouteRecordStringComponent(
hideInMenu: !menu.visible,
icon: menu.icon,
link: menu.path,
orderNo: menu.sort,
order: menu.sort,
title: menu.name,
},
name: menu.name,
@@ -155,7 +160,7 @@ function convertServerMenuToRouteRecordStringComponent(
hideInMenu: !menu.visible,
icon: menu.icon,
keepAlive: menu.keepAlive,
orderNo: menu.sort,
order: menu.sort,
title: menu.name,
},
name: finalName,

65
playground/src/views/_core/profile/base-setting.vue
View File

@@ -1,65 +0,0 @@
<script setup lang="ts">
import type { BasicOption } from '@vben/types';
import type { VbenFormSchema } from '#/adapter/form';
import { computed, onMounted, ref } from 'vue';
import { ProfileBaseSetting } from '@vben/common-ui';
import { getUserInfoApi } from '#/api';
const profileBaseSettingRef = ref();
const MOCK_ROLES_OPTIONS: BasicOption[] = [
{
label: '管理员',
value: 'super',
},
{
label: '用户',
value: 'user',
},
{
label: '测试',
value: 'test',
},
];
const formSchema = computed((): VbenFormSchema[] => {
return [
{
fieldName: 'realName',
component: 'Input',
label: '姓名',
},
{
fieldName: 'username',
component: 'Input',
label: '用户名',
},
{
fieldName: 'roles',
component: 'Select',
componentProps: {
mode: 'tags',
options: MOCK_ROLES_OPTIONS,
},
label: '角色',
},
{
fieldName: 'introduction',
component: 'Textarea',
label: '个人简介',
},
];
});
onMounted(async () => {
const data = await getUserInfoApi();
profileBaseSettingRef.value.getFormApi().setValues(data);
});
</script>
<template>
<ProfileBaseSetting ref="profileBaseSettingRef" :form-schema="formSchema" />
</template>

49
playground/src/views/_core/profile/index.vue
View File

@@ -1,49 +0,0 @@
<script setup lang="ts">
import { ref } from 'vue';
import { Profile } from '@vben/common-ui';
import { useUserStore } from '@vben/stores';
import ProfileBase from './base-setting.vue';
import ProfileNotificationSetting from './notification-setting.vue';
import ProfilePasswordSetting from './password-setting.vue';
import ProfileSecuritySetting from './security-setting.vue';
const userStore = useUserStore();
const tabsValue = ref<string>('basic');
const tabs = ref([
{
label: '基本设置',
value: 'basic',
},
{
label: '安全设置',
value: 'security',
},
{
label: '修改密码',
value: 'password',
},
{
label: '新消息提醒',
value: 'notice',
},
]);
</script>
<template>
<Profile
v-model:model-value="tabsValue"
title="个人中心"
:user-info="userStore.userInfo"
:tabs="tabs"
>
<template #content>
<ProfileBase v-if="tabsValue === 'basic'" />
<ProfileSecuritySetting v-if="tabsValue === 'security'" />
<ProfilePasswordSetting v-if="tabsValue === 'password'" />
<ProfileNotificationSetting v-if="tabsValue === 'notice'" />
</template>
</Profile>
</template>

31
playground/src/views/_core/profile/notification-setting.vue
View File

@@ -1,31 +0,0 @@
<script setup lang="ts">
import { computed } from 'vue';
import { ProfileNotificationSetting } from '@vben/common-ui';
const formSchema = computed(() => {
return [
{
value: true,
fieldName: 'accountPassword',
label: '账户密码',
description: '其他用户的消息将以站内信的形式通知',
},
{
value: true,
fieldName: 'systemMessage',
label: '系统消息',
description: '系统消息将以站内信的形式通知',
},
{
value: true,
fieldName: 'todoTask',
label: '待办任务',
description: '待办任务将以站内信的形式通知',
},
];
});
</script>
<template>
<ProfileNotificationSetting :form-schema="formSchema" />
</template>

66
playground/src/views/_core/profile/password-setting.vue
View File

@@ -1,66 +0,0 @@
<script setup lang="ts">
import type { VbenFormSchema } from '#/adapter/form';
import { computed, ref } from 'vue';
import { ProfilePasswordSetting, z } from '@vben/common-ui';
import { message } from 'ant-design-vue';
const profilePasswordSettingRef = ref();
const formSchema = computed((): VbenFormSchema[] => {
return [
{
fieldName: 'oldPassword',
label: '旧密码',
component: 'VbenInputPassword',
componentProps: {
placeholder: '请输入旧密码',
},
},
{
fieldName: 'newPassword',
label: '新密码',
component: 'VbenInputPassword',
componentProps: {
passwordStrength: true,
placeholder: '请输入新密码',
},
},
{
fieldName: 'confirmPassword',
label: '确认密码',
component: 'VbenInputPassword',
componentProps: {
passwordStrength: true,
placeholder: '请再次输入新密码',
},
dependencies: {
rules(values) {
const { newPassword } = values;
return z
.string({ required_error: '请再次输入新密码' })
.min(1, { message: '请再次输入新密码' })
.refine((value) => value === newPassword, {
message: '两次输入的密码不一致',
});
},
triggerFields: ['newPassword'],
},
},
];
});
function handleSubmit() {
message.success('密码修改成功');
}
</script>
<template>
<ProfilePasswordSetting
ref="profilePasswordSettingRef"
class="w-1/3"
:form-schema="formSchema"
@submit="handleSubmit"
/>
</template>

43
playground/src/views/_core/profile/security-setting.vue
View File

@@ -1,43 +0,0 @@
<script setup lang="ts">
import { computed } from 'vue';
import { ProfileSecuritySetting } from '@vben/common-ui';
const formSchema = computed(() => {
return [
{
value: true,
fieldName: 'accountPassword',
label: '账户密码',
description: '当前密码强度：强',
},
{
value: true,
fieldName: 'securityPhone',
label: '密保手机',
description: '已绑定手机：138****8293',
},
{
value: true,
fieldName: 'securityQuestion',
label: '密保问题',
description: '未设置密保问题，密保问题可有效保护账户安全',
},
{
value: true,
fieldName: 'securityEmail',
label: '备用邮箱',
description: '已绑定邮箱：ant***sign.com',
},
{
value: false,
fieldName: 'securityMfa',
label: 'MFA 设备',
description: '未绑定 MFA 设备，绑定后，可以进行二次确认',
},
];
});
</script>
<template>
<ProfileSecuritySetting :form-schema="formSchema" />
</template>

3878
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff