yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

!179 fix: 删除china2相关的地图json 

Merge pull request !179 from 痴货/master
pull/180/MERGE
芋道源码 2025-07-23 05:08:38 +00:00 committed by Gitee
parent 4797791935 df3215fef1
commit 27ad777c2c
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
97 changed files with 4922 additions and 1138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/web-ele/src/adapter/component/index.ts
View File

@ -163,6 +163,7 @@ const withDefaultPlaceholder = <T extends Component>(
// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
export type ComponentType =
| 'ApiCascader'
| 'ApiSelect'
| 'ApiTreeSelect'
| 'Checkbox'
@ -184,7 +185,6 @@ export type ComponentType =
| 'TimePicker'
| 'TreeSelect'
| 'Upload'
| 'ApiCascader'
| BaseFormComponentType;
async function initComponentAdapter() {
@ -212,13 +212,6 @@ async function initComponentAdapter() {
'select',
{
component: ElCascader,
props: {
props: {
label: 'label',
value: 'value',
children: 'children',
},
},
},
),
ApiTreeSelect: withDefaultPlaceholder(
@ -229,7 +222,6 @@ async function initComponentAdapter() {
'select',
{
component: ElTreeSelect,
props: { label: 'label', children: 'children' },
nodeKey: 'value',
loadingSlot: 'loading',
optionsPropName: 'data',

2
apps/web-ele/src/api/mall/product/category.ts
View File

@ -53,6 +53,6 @@ export function getCategoryList(params: any) {
// 获得商品分类列表
export function getCategorySimpleList() {
return requestClient.get<MallCategoryApi.Category[]>(
'/product/category/list-all-simple',
'/product/category/list',
);
}

9
apps/web-ele/src/api/mall/statistics/member.ts
View File

@ -1,6 +1,6 @@
import type { MallDataComparisonResp } from './common';
import { formatDate } from '@vben/utils';
import { formatDate2 } from '@vben/utils';
import { requestClient } from '#/api/request';
@ -84,7 +84,10 @@ export function getMemberAnalyse(params: MallMemberStatisticsApi.AnalyseReq) {
'/statistics/member/analyse',
{
params: {
times: [formatDate(params.times[0]), formatDate(params.times[1])],
times: [
formatDate2(params.times[0] || new Date()),
formatDate2(params.times[1] || new Date()),
],
},
},
);
@ -124,7 +127,7 @@ export function getMemberRegisterCountList(beginTime: Date, endTime: Date) {
'/statistics/member/register-count-list',
{
params: {
times: [formatDate(beginTime), formatDate(endTime)],
times: [formatDate2(beginTime), formatDate2(endTime)],
},
},
);

46
apps/web-ele/src/api/mall/statistics/product.ts
View File

@ -2,6 +2,8 @@ import type { PageParam, PageResult } from '@vben/request';
import type { MallDataComparisonResp } from './common';
import { formatDate2 } from '@vben/utils';
import { requestClient } from '#/api/request';
export namespace MallProductStatisticsApi {
@ -38,26 +40,58 @@ export namespace MallProductStatisticsApi {
/** 浏览转化率 */
browseConvertPercent: number;
}
/** 会员分析 Request */
export interface ProductStatisticsReq {
times: Date[];
}
}
/** 获得商品统计分析 */
export function getProductStatisticsAnalyse(params: PageParam) {
export function getProductStatisticsAnalyse(
params: MallProductStatisticsApi.ProductStatisticsReq,
) {
return requestClient.get<
MallDataComparisonResp<MallProductStatisticsApi.ProductStatistics>
>('/statistics/product/analyse', { params });
>('/statistics/product/analyse', {
params: {
times: [
formatDate2(params.times[0] || new Date()),
formatDate2(params.times[1] || new Date()),
],
},
});
}
/** 获得商品状况明细 */
export function getProductStatisticsList(params: PageParam) {
export function getProductStatisticsList(
params: MallProductStatisticsApi.ProductStatisticsReq,
) {
return requestClient.get<MallProductStatisticsApi.ProductStatistics[]>(
'/statistics/product/list',
{ params },
{
params: {
times: [
formatDate2(params.times[0] || new Date()),
formatDate2(params.times[1] || new Date()),
],
},
},
);
}
/** 导出获得商品状况明细 Excel */
export function exportProductStatisticsExcel(params: PageParam) {
return requestClient.download('/statistics/product/export-excel', { params });
export function exportProductStatisticsExcel(
params: MallProductStatisticsApi.ProductStatisticsReq,
) {
return requestClient.download('/statistics/product/export-excel', {
params: {
times: [
formatDate2(params.times[0] || new Date()),
formatDate2(params.times[1] || new Date()),
],
},
});
}
/** 获得商品排行榜分页 */

15
apps/web-ele/src/api/mall/statistics/trade.ts
View File

@ -1,6 +1,6 @@
import type { MallDataComparisonResp } from './common';
import { formatDate } from '@vben/utils';
import { formatDate2 } from '@vben/utils';
import { requestClient } from '#/api/request';
@ -15,7 +15,7 @@ export namespace MallTradeStatisticsApi {
/** 交易状况 Request */
export interface TradeTrendReq {
times: [Date, Date];
times: Date[];
}
/** 交易状况统计 Response */
@ -64,8 +64,11 @@ export namespace MallTradeStatisticsApi {
/** 时间参数需要格式化, 确保接口能识别 */
const formatDateParam = (params: MallTradeStatisticsApi.TradeTrendReq) => {
return {
times: [formatDate(params.times[0]), formatDate(params.times[1])],
} as MallTradeStatisticsApi.TradeTrendReq;
times: [
formatDate2(params.times[0] || new Date()),
formatDate2(params.times[1] || new Date()),
],
};
};
/** 查询交易统计 */
@ -128,8 +131,8 @@ export function getOrderCountTrendComparison(
>('/statistics/trade/order-count-trend', {
params: {
type,
beginTime: formatDate(beginTime),
endTime: formatDate(endTime),
beginTime: formatDate2(beginTime),
endTime: formatDate2(endTime),
},
});
}

17
apps/web-ele/src/api/mall/trade/afterSale/index.ts
View File

@ -1,5 +1,7 @@
import type { PageParam, PageResult } from '@vben/request';
import type { MallOrderApi } from '#/api/mall/trade/order';
import { requestClient } from '#/api/request';
export namespace MallAfterSaleApi {
@ -75,6 +77,21 @@ export namespace MallAfterSaleApi {
receiveTime?: Date;
/** 收货备注 */
receiveReason?: string;
/** 订单 */
order?: MallOrderApi.Order;
/** 订单操作日志 */
logs?: MallOrderApi.OrderLog[];
/** 订单项 */
orderItem?: MallOrderApi.OrderItem;
/** 用户信息 */
user?: {
/** 用户头像 */
avatar?: string;
/** 用户编号 */
id?: null | number;
/** 用户昵称 */
nickname?: string;
};
}
/** 拒绝售后请求 */

15
apps/web-ele/src/api/mall/trade/order/index.ts
View File

@ -53,6 +53,8 @@ export namespace MallOrderApi {
/** 订单日志 */
export interface OrderLog {
/** 日志编号 */
id: number;
/** 日志内容 */
content?: string;
/** 创建时间 */
@ -108,7 +110,7 @@ export namespace MallOrderApi {
/** 订单调价（总） */
adjustPrice?: null | number;
/** 应付金额（总） */
payPrice?: null | number;
payPrice?: null | number | string;
/** 发货方式 */
deliveryType?: null | number;
/** 自提门店编号 */
@ -226,6 +228,13 @@ export namespace MallOrderApi {
/** 收件人详细地址 */
receiverDetailAddress: string;
}
export interface OrderExpressTrackRespDTO {
/** 发生时间 */
time: Date;
/** 快递状态 */
content: string;
}
}
/** 查询交易订单列表 */
@ -254,7 +263,9 @@ export function getOrder(id: number) {
/** 查询交易订单物流详情 */
export function getExpressTrackList(id: number) {
return requestClient.get(`/trade/order/get-express-track-list?id=${id}`);
return requestClient.get<MallOrderApi.OrderExpressTrackRespDTO[]>(
`/trade/order/get-express-track-list?id=${id}`,
);
}
/** 订单发货 */

57
apps/web-ele/src/locales/langs/zh-CN/page.json
View File

@ -29,5 +29,62 @@
"tenant": {
"placeholder": "请选择租户",
"success": "切换租户成功"
},
"common": {
"inputText": "请输入",
"selectText": "请选择",
"startTimeText": "开始时间",
"endTimeText": "结束时间",
"login": "登录",
"required": "该项为必填项",
"loginOut": "退出系统",
"document": "项目文档",
"profile": "个人中心",
"reminder": "温馨提示",
"loginOutMessage": "是否退出本系统？",
"back": "返回",
"ok": "确定",
"save": "保存",
"cancel": "取消",
"close": "关闭",
"reload": "重新加载",
"success": "成功",
"closeTab": "关闭标签页",
"closeTheLeftTab": "关闭左侧标签页",
"closeTheRightTab": "关闭右侧标签页",
"closeOther": "关闭其他标签页",
"closeAll": "关闭全部标签页",
"prevLabel": "上一步",
"nextLabel": "下一步",
"skipLabel": "跳过",
"doneLabel": "结束",
"menu": "菜单",
"menuDes": "以路由的结构渲染的菜单栏",
"collapse": "展开缩收",
"collapseDes": "展开和缩放菜单栏",
"tagsView": "标签页",
"tagsViewDes": "用于记录路由历史记录",
"tool": "工具",
"toolDes": "用于设置定制系统",
"query": "查询",
"reset": "重置",
"shrink": "收起",
"expand": "展开",
"confirmTitle": "系统提示",
"exportMessage": "是否确认导出数据项？",
"importMessage": "是否确认导入数据项？",
"createSuccess": "新增成功",
"updateSuccess": "修改成功",
"delMessage": "是否删除所选中数据？",
"delDataMessage": "是否删除数据？",
"delNoData": "请选择需要删除的数据",
"delSuccess": "删除成功",
"index": "序号",
"status": "状态",
"createTime": "创建时间",
"updateTime": "更新时间",
"copy": "复制",
"copySuccess": "复制成功",
"copyError": "复制失败"
}
}

62
apps/web-ele/src/router/routes/modules/mall.ts
View File

@ -40,37 +40,37 @@ const routes: RouteRecordRaw[] = [
},
],
},
// {
// path: '/mall/trade',
// name: 'TradeCenter',
// meta: {
// title: '交易中心',
// icon: 'lucide:shopping-cart',
// keepAlive: true,
// hideInMenu: true,
// },
// children: [
// {
// path: String.raw`order/detail/:id(\d+)`,
// name: 'TradeOrderDetail',
// meta: {
// title: '订单详情',
// activeMenu: '/mall/trade/order',
// },
// component: () => import('#/views/mall/trade/order/detail/index.vue'),
// },
// {
// path: String.raw`after-sale/detail/:id(\d+)`,
// name: 'TradeAfterSaleDetail',
// meta: {
// title: '退款详情',
// activeMenu: '/mall/trade/after-sale',
// },
// component: () =>
// import('#/views/mall/trade/afterSale/detail/index.vue'),
// },
// ],
// },
{
path: '/mall/trade',
name: 'TradeCenter',
meta: {
title: '交易中心',
icon: 'lucide:shopping-cart',
keepAlive: true,
hideInMenu: true,
},
children: [
{
path: String.raw`order/detail/:id(\d+)`,
name: 'TradeOrderDetail',
meta: {
title: '订单详情',
activeMenu: '/mall/trade/order',
},
component: () => import('#/views/mall/trade/order/modules/detail.vue'),
},
{
path: String.raw`after-sale/detail/:id(\d+)`,
name: 'TradeAfterSaleDetail',
meta: {
title: '退款详情',
activeMenu: '/mall/trade/after-sale',
},
component: () =>
import('#/views/mall/trade/afterSale/modules/detail.vue'),
},
],
},
];
export default routes;

10
apps/web-ele/src/utils/constants.ts
View File

@ -201,6 +201,16 @@ export const PayOrderStatusEnum = {
};
// ========== MALL - 商品模块 ==========
/**
* 商品 首页 日期类型
*/
export enum TimeRangeTypeEnum {
DAY30 = 1,
MONTH = 30,
WEEK = 7,
YEAR = 365,
}
/**
* 商品 SPU 状态
*/

53
apps/web-ele/src/views/infra/codegen/index.vue
View File

@ -12,7 +12,7 @@ import { useRouter } from 'vue-router';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { isEmpty } from '@vben/utils';
import { ElLoading, ElMessage } from 'element-plus';
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -73,47 +73,38 @@ function onEdit(row: InfraCodegenApi.CodegenTable) {
/** 删除代码生成配置 */
async function onDelete(row: InfraCodegenApi.CodegenTable) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.tableName]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该代码生成配置吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteCodegenTable(row.id);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.tableName]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteCodegenTable(row.id);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.tableName]));
onRefresh();
}
/** 批量删除代码生成配置 */
async function onDeleteBatch() {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该代码生成配置吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteCodegenTableList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteCodegenTableList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
/** 同步数据库 */
async function onSync(row: InfraCodegenApi.CodegenTable) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.updating', [row.tableName]),
fullscreen: true,
await ElMessageBox.confirm('确定要同步该代码生成配置吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await syncCodegenFromDB(row.id);
ElMessage.success($t('ui.actionMessage.updateSuccess', [row.tableName]));
onRefresh();
} finally {
loadingInstance.close();
}
await syncCodegenFromDB(row.id);
ElMessage.success($t('ui.actionMessage.updateSuccess', [row.tableName]));
onRefresh();
}
/** 生成代码 */

38
apps/web-ele/src/views/infra/config/index.vue
View File

@ -10,7 +10,7 @@ import { ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -52,34 +52,26 @@ function onEdit(row: InfraConfigApi.Config) {
/** 删除参数 */
async function onDelete(row: InfraConfigApi.Config) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该参数吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteConfig(row.id as number);
loadingInstance.close();
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteConfig(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 批量删除参数 */
async function onDeleteBatch() {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该参数吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteConfigList(checkedIds.value);
loadingInstance.close();
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteConfigList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

38
apps/web-ele/src/views/infra/dataSourceConfig/index.vue
View File

@ -10,7 +10,7 @@ import { onMounted, ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { isEmpty } from '@vben/utils';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -40,34 +40,26 @@ function onEdit(row: InfraDataSourceConfigApi.DataSourceConfig) {
/** 删除数据源 */
async function onDelete(row: InfraDataSourceConfigApi.DataSourceConfig) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该数据源吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteDataSourceConfig(row.id as number);
loadingInstance.close();
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
await handleLoadData();
} finally {
loadingInstance.close();
}
await deleteDataSourceConfig(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 批量删除数据源 */
async function onDeleteBatch() {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该数据源吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteDataSourceConfigList(checkedIds.value);
loadingInstance.close();
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
await handleLoadData();
} finally {
loadingInstance.close();
}
await deleteDataSourceConfigList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

42
apps/web-ele/src/views/infra/file/index.vue
View File

@ -11,7 +11,7 @@ import { Page, useVbenModal } from '@vben/common-ui';
import { isEmpty, openWindow } from '@vben/utils';
import { useClipboard } from '@vueuse/core';
import { ElButton, ElImage, ElLoading, ElMessage } from 'element-plus';
import { ElButton, ElImage, ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteFile, deleteFileList, getFilePage } from '#/api/infra/file';
@ -60,36 +60,28 @@ function openUrl(url?: string) {
/** 删除文件 */
async function onDelete(row: InfraFileApi.File) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name || row.path]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该文件吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteFile(row.id as number);
loadingInstance.close();
ElMessage.success(
$t('ui.actionMessage.deleteSuccess', [row.name || row.path]),
);
onRefresh();
} finally {
loadingInstance.close();
}
await deleteFile(row.id as number);
ElMessage.success(
$t('ui.actionMessage.deleteSuccess', [row.name || row.path]),
);
onRefresh();
}
/** 批量删除文件 */
async function onDeleteBatch() {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该文件吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteFileList(checkedIds.value);
loadingInstance.close();
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteFileList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

38
apps/web-ele/src/views/infra/fileConfig/index.vue
View File

@ -10,7 +10,7 @@ import { ref } from 'vue';
import { confirm, Page, useVbenModal } from '@vben/common-ui';
import { isEmpty, openWindow } from '@vben/utils';
import { ElLoading, ElMessage } from 'element-plus';
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -86,34 +86,26 @@ async function onTest(row: InfraFileConfigApi.FileConfig) {
/** 删除文件配置 */
async function onDelete(row: InfraFileConfigApi.FileConfig) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该文件配置吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteFileConfig(row.id as number);
loadingInstance.close();
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteFileConfig(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 批量删除文件配置 */
async function onDeleteBatch() {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该文件配置吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteFileConfigList(checkedIds.value);
loadingInstance.close();
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteFileConfigList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

36
apps/web-ele/src/views/infra/job/index.vue
View File

@ -11,7 +11,7 @@ import { useRouter } from 'vue-router';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -105,32 +105,26 @@ function onLog(row?: InfraJobApi.Job) {
/** 删除任务 */
async function onDelete(row: InfraJobApi.Job) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该任务吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteJob(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteJob(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 批量删除任务 */
async function onDeleteBatch() {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该任务吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteJobList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteJobList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

25
apps/web-ele/src/views/mall/home/components/analysis-chart-card.vue Normal file
View File

@ -0,0 +1,25 @@
<script setup lang="ts">
interface Props {
title: string;
}
defineOptions({
name: 'AnalysisChartCard',
});
withDefaults(defineProps<Props>(), {});
</script>
<template>
<el-card>
<template #header>
<div class="my--1.5 flex flex-row items-center justify-between">
<div class="text-xl">{{ title }}</div>
<slot name="header-suffix"></slot>
</div>
</template>
<template #default>
<slot></slot>
</template>
</el-card>
</template>

100
apps/web-ele/src/views/mall/home/components/analysis-overview-icon.vue Normal file
View File

@ -0,0 +1,100 @@
<script setup lang="ts">
import type { AnalysisOverviewIconItem } from './data';
import { computed } from 'vue';
import { CountTo } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
interface Props {
items?: AnalysisOverviewIconItem[];
modelValue?: AnalysisOverviewIconItem[];
columnsNumber?: number;
}
defineOptions({
name: 'AnalysisOverview',
});
const props = withDefaults(defineProps<Props>(), {
items: () => [],
modelValue: () => [],
columnsNumber: 4,
});
const emit = defineEmits(['update:modelValue']);
const itemsData = computed({
get: () => (props.modelValue?.length ? props.modelValue : props.items),
set: (value) => emit('update:modelValue', value),
});
// 计算动态的grid列数类名
const gridColumnsClass = computed(() => {
const colNum = props.columnsNumber;
return {
'lg:grid-cols-1': colNum === 1,
'lg:grid-cols-2': colNum === 2,
'lg:grid-cols-3': colNum === 3,
'lg:grid-cols-4': colNum === 4,
'lg:grid-cols-5': colNum === 5,
'lg:grid-cols-6': colNum === 6,
};
});
</script>
<template>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2" :class="gridColumnsClass">
<template v-for="item in itemsData" :key="item.title">
<div
class="flex flex-row items-center gap-3 rounded bg-[var(--el-bg-color-overlay)] p-4"
>
<div
class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded"
:class="`${item.iconColor} ${item.iconBgColor}`"
>
<IconifyIcon :icon="item.icon" class="text-2xl" />
</div>
<div class="flex flex-col gap-1">
<div class="flex items-center gap-1 text-gray-500">
<span class="text-sm">{{ item.title }}</span>
<el-tooltip
:content="item.tooltip"
placement="top-start"
v-if="item.tooltip"
>
<IconifyIcon
icon="ep:warning"
class="flex items-center text-sm"
/>
</el-tooltip>
</div>
<div class="flex flex-row items-baseline gap-2">
<div class="text-3xl">
<CountTo
:prefix="item.prefix"
:end-val="item.value"
:decimals="item.decimals"
/>
</div>
<span
v-if="item.percent !== undefined"
:class="
Number(item.percent) > 0 ? 'text-red-500' : 'text-green-500'
"
class="flex items-center whitespace-nowrap"
>
<span class="text-sm">{{ Math.abs(Number(item.percent)) }}%</span>
<IconifyIcon
:icon="
Number(item.percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'
"
class="ml-0.5 text-sm"
/>
</span>
</div>
</div>
</div>
</template>
</div>
</template>

174
apps/web-ele/src/views/mall/home/components/analysis-overview.vue Normal file
View File

@ -0,0 +1,174 @@
<script setup lang="ts">
import type { AnalysisOverviewItem } from './data';
import { computed } from 'vue';
import { VbenCountToAnimator } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
interface Props {
items?: AnalysisOverviewItem[];
modelValue?: AnalysisOverviewItem[];
columnsNumber?: number;
}
defineOptions({
name: 'AnalysisOverview',
});
const props = withDefaults(defineProps<Props>(), {
items: () => [],
modelValue: () => [],
columnsNumber: 4,
});
const emit = defineEmits(['update:modelValue']);
const itemsData = computed({
get: () => (props.modelValue?.length ? props.modelValue : props.items),
set: (value) => emit('update:modelValue', value),
});
// 计算动态的grid列数类名
const gridColumnsClass = computed(() => {
const colNum = props.columnsNumber;
return {
'lg:grid-cols-1': colNum === 1,
'lg:grid-cols-2': colNum === 2,
'lg:grid-cols-3': colNum === 3,
'lg:grid-cols-4': colNum === 4,
'lg:grid-cols-5': colNum === 5,
'lg:grid-cols-6': colNum === 6,
};
});
// 计算环比增长率
const calculateGrowthRate = (
currentValue: number,
previousValue: number,
): { isPositive: boolean; rate: number } => {
if (previousValue === 0) {
return { rate: currentValue > 0 ? 100 : 0, isPositive: currentValue >= 0 };
}
const rate = ((currentValue - previousValue) / previousValue) * 100;
return { rate: Math.abs(rate), isPositive: rate >= 0 };
};
// 格式化增长率显示
const formatGrowthRate = (rate: number): string => {
return rate.toFixed(1);
};
</script>
<template>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2" :class="gridColumnsClass">
<template v-for="item in itemsData" :key="item.title">
<el-card :title="item.title" class="w-full">
<template #header>
<div class="text-lg font-semibold">
<div class="flex items-center justify-between">
<div class="flex items-center">
<span>{{ item.title }}</span>
<span v-if="item.tooltip" class="ml-1 inline-block">
<el-tooltip>
<template #default>
<div
class="inline-flex h-4 w-4 translate-y-[-3px] items-center justify-center rounded-full bg-gray-200 text-xs font-bold text-gray-600"
>
!
</div>
</template>
<template #content>
{{ item.tooltip }}
</template>
</el-tooltip>
</span>
</div>
<el-tag>今日</el-tag>
</div>
</div>
</template>
<template #default>
<!-- 左右布局：左边数字，右边图标 -->
<div class="flex items-center justify-between">
<!-- 左侧：数字显示 -->
<div class="flex-1">
<div class="flex items-baseline">
<!-- prefix 前缀 -->
<span
v-if="item.prefix"
class="mr-1 text-3xl font-medium text-gray-600"
>
{{ item.prefix }}
</span>
<!-- 数字动画 -->
<VbenCountToAnimator
:end-val="item.value"
:start-val="1"
class="text-3xl font-bold text-gray-900"
prefix=""
/>
</div>
</div>
<!-- 右侧：环比增长率图标和数值 -->
<div
v-if="item.showGrowthRate && item.totalValue !== undefined"
class="flex items-center space-x-2 rounded-lg bg-gray-50 px-3 py-2"
>
<IconifyIcon
:icon="
calculateGrowthRate(item.value, item.totalValue).isPositive
? 'lucide:trending-up'
: 'lucide:trending-down'
"
class="size-5"
:class="[
calculateGrowthRate(item.value, item.totalValue).isPositive
? 'text-green-500'
: 'text-red-500',
]"
/>
<span
class="text-sm font-semibold"
:class="[
calculateGrowthRate(item.value, item.totalValue).isPositive
? 'text-green-500'
: 'text-red-500',
]"
>
{{
calculateGrowthRate(item.value, item.totalValue).isPositive
? '+'
: '-'
}}{{
formatGrowthRate(
calculateGrowthRate(item.value, item.totalValue).rate,
)
}}%
</span>
</div>
</div>
</template>
<template #footer v-if="item.totalTitle">
<div class="flex items-center justify-between">
<span>{{ item.totalTitle }}</span>
<VbenCountToAnimator
:end-val="item.totalValue"
:start-val="1"
prefix=""
/>
</div>
</template>
</el-card>
</template>
</div>
</template>
<style lang="scss" scoped>
/* 移除 el-card header 的下边框 */
:deep(.el-card__header) {
padding-bottom: 16px;
border-bottom: none !important;
}
</style>

87
apps/web-ele/src/views/mall/home/components/analysis-trade-overview.vue Normal file
View File

@ -0,0 +1,87 @@
<script setup lang="ts">
import type { AnalysisOverviewTradeItem } from './data';
import { computed } from 'vue';
import { CountTo } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
interface Props {
items?: AnalysisOverviewTradeItem[];
modelValue?: AnalysisOverviewTradeItem[];
columnsNumber?: number;
}
defineOptions({
name: 'AnalysisOverview',
});
const props = withDefaults(defineProps<Props>(), {
items: () => [],
modelValue: () => [],
columnsNumber: 4,
});
const emit = defineEmits(['update:modelValue']);
const itemsData = computed({
get: () => (props.modelValue?.length ? props.modelValue : props.items),
set: (value) => emit('update:modelValue', value),
});
// 计算动态的grid列数类名
const gridColumnsClass = computed(() => {
const colNum = props.columnsNumber;
return {
'lg:grid-cols-1': colNum === 1,
'lg:grid-cols-2': colNum === 2,
'lg:grid-cols-3': colNum === 3,
'lg:grid-cols-4': colNum === 4,
'lg:grid-cols-5': colNum === 5,
'lg:grid-cols-6': colNum === 6,
};
});
</script>
<template>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2" :class="gridColumnsClass">
<template v-for="item in itemsData" :key="item.title">
<div class="flex flex-col gap-2 bg-[var(--el-bg-color-overlay)] p-6">
<div class="flex items-center justify-between text-gray-500">
<span>{{ item.title }}</span>
<el-tooltip
:content="item.tooltip"
placement="top-start"
v-if="item.tooltip"
>
<IconifyIcon icon="ep:warning" />
</el-tooltip>
</div>
<div class="mb-4 text-3xl">
<CountTo
:prefix="item.prefix"
:end-val="item.value"
:decimals="item.decimals"
/>
</div>
<div class="flex flex-row gap-1 text-sm">
<span class="text-gray-500">环比</span>
<span
class="flex items-center gap-0.5 whitespace-nowrap"
:class="
Number(item.percent) > 0 ? 'text-red-500' : 'text-green-500'
"
>
<span>{{ Math.abs(Number(item.percent)) }}%</span>
<IconifyIcon
:icon="
Number(item.percent) > 0 ? 'ep:caret-top' : 'ep:caret-bottom'
"
class="flex-shrink-0 !text-sm"
/>
</span>
</div>
</div>
</template>
</div>
</template>

39
apps/web-ele/src/views/mall/home/components/data.ts Normal file
View File

@ -0,0 +1,39 @@
export interface WorkbenchQuickDataShowItem {
name: string;
value: number;
prefix: string;
decimals: number;
routerName: string;
}
export interface AnalysisOverviewItem {
title: string;
totalTitle?: string;
totalValue?: number;
value: number;
prefix?: string;
tooltip?: string;
// 环比增长相关字段
showGrowthRate?: boolean; // 是否显示环比增长率，默认为false
}
export interface AnalysisOverviewIconItem {
icon: string;
title: string;
value: number;
prefix?: string;
iconBgColor: string;
iconColor: string;
tooltip?: string;
decimals?: number;
percent?: number;
}
export interface AnalysisOverviewTradeItem {
title: string;
value: number;
prefix?: string;
decimals?: number;
percent?: number;
tooltip?: string;
}

162
apps/web-ele/src/views/mall/home/components/member-funnel-card.vue Normal file
View File

@ -0,0 +1,162 @@
<script lang="ts" setup>
import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
import { ref } from 'vue';
import { calculateRelativeRate, fenToYuan } from '@vben/utils';
import dayjs from 'dayjs';
import * as MemberStatisticsApi from '#/api/mall/statistics/member';
import AnalysisChartCard from './analysis-chart-card.vue';
import ShortcutDateRangePicker from './shortcut-date-range-picker.vue';
/** 会员概览卡片 */
defineOptions({ name: 'MemberFunnelCard' });
const loading = ref(true); // 加载中
const analyseData = ref<MallMemberStatisticsApi.Analyse>(); // 会员分析数据
/** 查询会员概览数据列表 */
const handleTimeRangeChange = async (
times: [dayjs.ConfigType, dayjs.ConfigType],
) => {
loading.value = true;
// 查询数据
analyseData.value = await MemberStatisticsApi.getMemberAnalyse({
times: [dayjs(times[0]).toDate(), dayjs(times[1]).toDate()],
});
loading.value = false;
};
</script>
<template>
<AnalysisChartCard title="会员概览">
<template #header-suffix>
<!-- 查询条件 -->
<ShortcutDateRangePicker @change="handleTimeRangeChange" />
</template>
<template #default>
<div class="min-w-225 py-1.75" v-loading="loading">
<div class="relative flex h-24">
<div class="<lg:w-35% <xl:w-55% h-full w-3/4 bg-blue-50">
<div class="ml-15 flex h-full flex-col justify-center">
<div class="font-bold">
注册用户数量：{{
analyseData?.comparison?.value?.registerUserCount || 0
}}
</div>
<div class="text-3.5 mt-2">
环比增长率：{{
calculateRelativeRate(
analyseData?.comparison?.value?.registerUserCount,
analyseData?.comparison?.reference?.registerUserCount,
)
}}%
</div>
</div>
</div>
<div
class="trapezoid1 text-3.5 flex h-full flex-col items-center justify-center bg-blue-500 text-white"
>
<span class="text-6 font-bold">{{
analyseData?.visitUserCount || 0
}}</span>
<span>访客</span>
</div>
</div>
<div class="relative flex h-24">
<div class="<lg:w-35% <xl:w-55% flex h-full w-3/4 bg-cyan-50">
<div class="ml-15 flex h-full flex-col justify-center">
<div class="font-bold">
活跃用户数量：{{
analyseData?.comparison?.value?.visitUserCount || 0
}}
</div>
<div class="text-3.5 mt-2">
环比增长率：{{
calculateRelativeRate(
analyseData?.comparison?.value?.visitUserCount,
analyseData?.comparison?.reference?.visitUserCount,
)
}}%
</div>
</div>
</div>
<div
class="trapezoid2 flex flex-col items-center justify-center bg-cyan-500 text-white"
>
<span class="text-6 font-bold">{{
analyseData?.orderUserCount || 0
}}</span>
<span>下单</span>
</div>
</div>
<div class="relative flex h-24">
<div class="<lg:w-35% <xl:w-55% flex w-3/4 bg-slate-50">
<div class="ml-15 flex h-full flex-row gap-x-16">
<div class="flex flex-col justify-center">
<div class="font-bold">
充值用户数量：{{
analyseData?.comparison?.value?.rechargeUserCount || 0
}}
</div>
<div class="text-3.5 mt-2">
环比增长率：{{
calculateRelativeRate(
analyseData?.comparison?.value?.rechargeUserCount,
analyseData?.comparison?.reference?.rechargeUserCount,
)
}}%
</div>
</div>
<div class="flex flex-col justify-center">
<div class="font-bold">
客单价：{{ fenToYuan(analyseData?.atv || 0) }}
</div>
</div>
</div>
</div>
<div
class="trapezoid3 flex flex-col items-center justify-center bg-slate-500 text-white"
>
<span class="text-6 font-bold">{{
analyseData?.payUserCount || 0
}}</span>
<span>成交用户</span>
</div>
</div>
</div>
</template>
</AnalysisChartCard>
</template>
<style lang="scss" scoped>
.trapezoid1 {
z-index: 1;
width: 19.25rem;
margin-top: 0.381rem;
margin-left: -9.625rem;
font-size: 0.875rem;
transform: perspective(5em) rotateX(-11deg);
}
.trapezoid2 {
z-index: 1;
width: 14rem;
height: 6.25rem;
margin-top: 0.425rem;
margin-left: -7rem;
font-size: 0.875rem;
transform: perspective(7em) rotateX(-20deg);
}
.trapezoid3 {
z-index: 1;
width: 9rem;
height: 5.75rem;
margin-top: 0.8125rem;
margin-left: -4.5rem;
font-size: 0.875rem;
transform: perspective(3em) rotateX(-13deg);
}
</style>

101
apps/web-ele/src/views/mall/home/components/member-statistics-card.vue Normal file
View File

@ -0,0 +1,101 @@
<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';
import { onMounted, reactive, ref } from 'vue';
import { AnalysisChartCard } from '@vben/common-ui';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import { formatDate } from '@vben/utils';
import dayjs from 'dayjs';
import * as MemberStatisticsApi from '#/api/mall/statistics/member';
/** 会员用户统计卡片 */
defineOptions({ name: 'MemberStatisticsCard' });
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
const loading = ref(true); // 加载中
/** 折线图配置 */
const lineChartOptions = reactive({
dataset: {
dimensions: ['date', 'count'],
source: [] as any[],
},
grid: {
left: 20,
right: 20,
bottom: 20,
top: 80,
containLabel: true,
},
legend: {
top: 50,
},
series: [{ name: '注册量', type: 'line', smooth: true, areaStyle: {} }],
toolbox: {
feature: {
// 数据区域缩放
dataZoom: {
yAxisIndex: false, // Y轴不缩放
},
brush: {
type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
},
saveAsImage: { show: true, name: '会员统计' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
padding: [5, 10],
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show: false,
},
axisLabel: {
formatter: (date: string) => formatDate(date, 'MM-DD'),
},
},
yAxis: {
axisTick: {
show: false,
},
},
});
const getMemberRegisterCountList = async () => {
loading.value = true;
// 查询最近一月数据
const beginTime = dayjs().subtract(30, 'd').startOf('d');
const endTime = dayjs().endOf('d');
const list = await MemberStatisticsApi.getMemberRegisterCountList(
beginTime.toDate(),
endTime.toDate(),
);
// 更新 Echarts 数据
if (lineChartOptions.dataset && lineChartOptions.dataset.source) {
lineChartOptions.dataset.source = list;
}
loading.value = false;
};
/** 初始化 */
onMounted(async () => {
await getMemberRegisterCountList();
renderEcharts(lineChartOptions as any);
});
</script>
<template>
<AnalysisChartCard title="用户统计">
<!-- 折线图 -->
<EchartsUI ref="chartRef" />
</AnalysisChartCard>
</template>

80
apps/web-ele/src/views/mall/home/components/member-terminal-card.vue Normal file
View File

@ -0,0 +1,80 @@
<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';
import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
import type { DictDataType } from '#/utils/dict';
import { onMounted, reactive, ref } from 'vue';
import { AnalysisChartCard } from '@vben/common-ui';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import * as MemberStatisticsApi from '#/api/mall/statistics/member';
import { DICT_TYPE, getIntDictOptions } from '#/utils/dict';
/** 会员终端卡片 */
defineOptions({ name: 'MemberTerminalCard' });
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
const loading = ref(true); // 加载中
/** 会员终端统计图配置 */
const terminalChartOptions = reactive({
tooltip: {
trigger: 'item' as const,
confine: true,
formatter: '{a} <br/>{b} : {c} ({d}%)',
},
legend: {
orient: 'vertical' as const,
left: 'right' as const,
},
roseType: 'area',
series: [
{
name: '会员终端',
type: 'pie' as const,
label: {
show: false,
},
labelLine: {
show: false,
},
data: [] as { name: string; value: number }[],
},
],
});
/** 按照终端，查询会员统计列表 */
const getMemberTerminalStatisticsList = async () => {
loading.value = true;
const list = await MemberStatisticsApi.getMemberTerminalStatisticsList();
const dictDataList = getIntDictOptions(DICT_TYPE.TERMINAL);
if (terminalChartOptions.series && terminalChartOptions.series.length > 0) {
(terminalChartOptions.series[0] as any).data = dictDataList.map(
(dictData: DictDataType) => {
const userCount = list.find(
(item: MallMemberStatisticsApi.TerminalStatistics) =>
item.terminal === dictData.value,
)?.userCount;
return {
name: dictData.label,
value: userCount || 0,
};
},
);
}
loading.value = false;
};
/** 初始化 */
onMounted(async () => {
await getMemberTerminalStatisticsList();
renderEcharts(terminalChartOptions);
});
</script>
<template>
<AnalysisChartCard title="会员终端">
<EchartsUI ref="chartRef" />
</AnalysisChartCard>
</template>

87
apps/web-ele/src/views/mall/home/components/shortcut-date-range-picker.vue Normal file
View File

@ -0,0 +1,87 @@
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import * as DateUtil from '@vben/utils';
import dayjs from 'dayjs';
/** 快捷日期范围选择组件 */
defineOptions({ name: 'ShortcutDateRangePicker' });
/** 触发事件：时间范围选中 */
const emits = defineEmits<{
(e: 'change', times: [dayjs.ConfigType, dayjs.ConfigType]): void;
}>();
const shortcutDays = ref(7); // 日期快捷天数（单选按钮组）, 默认7天
const times = ref<[string, string]>(['', '']); // 时间范围参数
defineExpose({ times }); // 暴露时间范围参数
/** 日期快捷选择 */
const shortcuts = [
{
text: '昨天',
value: () => DateUtil.getDayRange(new Date(), -1),
},
{
text: '最近7天',
value: () => DateUtil.getLast7Days(),
},
{
text: '本月',
value: () => [dayjs().startOf('M'), dayjs().subtract(1, 'd')],
},
{
text: '最近30天',
value: () => DateUtil.getLast30Days(),
},
{
text: '最近1年',
value: () => DateUtil.getLast1Year(),
},
];
/** 设置时间范围 */
function setTimes() {
const beginDate = dayjs().subtract(shortcutDays.value, 'd');
const yesterday = dayjs().subtract(1, 'd');
times.value = DateUtil.getDateRange(beginDate, yesterday);
}
/** 快捷日期单选按钮选中 */
const handleShortcutDaysChange = async () => {
// 设置时间范围
setTimes();
// 发送时间范围选中事件
await emitDateRangePicker();
};
/** 触发时间范围选中事件 */
const emitDateRangePicker = async () => {
emits('change', times.value);
};
/** 初始化 */
onMounted(() => {
handleShortcutDaysChange();
});
</script>
<template>
<div class="flex flex-row items-center gap-2">
<el-radio-group v-model="shortcutDays" @change="handleShortcutDaysChange">
<el-radio-button :value="1">昨天</el-radio-button>
<el-radio-button :value="7">最近7天</el-radio-button>
<el-radio-button :value="30">最近30天</el-radio-button>
</el-radio-group>
<el-date-picker
v-model="times"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
:shortcuts="shortcuts"
class="!w-240px"
@change="emitDateRangePicker"
/>
<slot></slot>
</div>
</template>

225
apps/web-ele/src/views/mall/home/components/trade-trend-card.vue Normal file
View File

@ -0,0 +1,225 @@
<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';
import { onMounted, reactive, ref } from 'vue';
import { AnalysisChartCard } from '@vben/common-ui';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import { fenToYuan, formatDate } from '@vben/utils';
import dayjs, { Dayjs } from 'dayjs';
import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
import { TimeRangeTypeEnum } from '#/utils/constants';
/** 交易量趋势 */
defineOptions({ name: 'TradeTrendCard' });
const timeRangeType = ref(TimeRangeTypeEnum.DAY30); // 日期快捷选择按钮, 默认30天
const loading = ref(true); // 加载中
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
// 时间范围 Map
const timeRange = new Map()
.set(TimeRangeTypeEnum.DAY30, {
name: '30天',
series: [
{ name: '订单金额', type: 'bar', smooth: true, data: [] },
{ name: '订单数量', type: 'line', smooth: true, data: [] },
],
})
.set(TimeRangeTypeEnum.WEEK, {
name: '周',
series: [
{ name: '上周金额', type: 'bar', smooth: true, data: [] },
{ name: '本周金额', type: 'bar', smooth: true, data: [] },
{ name: '上周数量', type: 'line', smooth: true, data: [] },
{ name: '本周数量', type: 'line', smooth: true, data: [] },
],
})
.set(TimeRangeTypeEnum.MONTH, {
name: '月',
series: [
{ name: '上月金额', type: 'bar', smooth: true, data: [] },
{ name: '本月金额', type: 'bar', smooth: true, data: [] },
{ name: '上月数量', type: 'line', smooth: true, data: [] },
{ name: '本月数量', type: 'line', smooth: true, data: [] },
],
})
.set(TimeRangeTypeEnum.YEAR, {
name: '年',
series: [
{ name: '去年金额', type: 'bar', smooth: true, data: [] },
{ name: '今年金额', type: 'bar', smooth: true, data: [] },
{ name: '去年数量', type: 'line', smooth: true, data: [] },
{ name: '今年数量', type: 'line', smooth: true, data: [] },
],
});
/** 图表配置 */
const eChartOptions = reactive({
grid: {
left: 20,
right: 20,
bottom: 20,
top: 80,
containLabel: true,
},
legend: {
top: 50,
data: [] as string[],
},
series: [] as any[],
toolbox: {
feature: {
// 数据区域缩放
dataZoom: {
yAxisIndex: false, // Y轴不缩放
},
brush: {
type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
},
saveAsImage: { show: true, name: '订单量趋势' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
padding: [5, 10],
},
xAxis: {
type: 'category' as const,
inverse: true,
boundaryGap: false,
axisTick: {
show: false,
},
data: [] as string[],
axisLabel: {
formatter: (date: string) => {
switch (timeRangeType.value) {
case TimeRangeTypeEnum.DAY30: {
return formatDate(date, 'MM-DD');
}
case TimeRangeTypeEnum.MONTH: {
return formatDate(date, 'D');
}
case TimeRangeTypeEnum.WEEK: {
let weekDay = formatDate(date, 'ddd');
if (weekDay === '0') weekDay = '日';
return `周${weekDay}`;
}
case TimeRangeTypeEnum.YEAR: {
return `${formatDate(date, 'M')}月`;
}
default: {
return date;
}
}
},
},
},
yAxis: {
axisTick: {
show: false,
},
},
});
/** 时间范围类型单选按钮选中 */
const handleTimeRangeTypeChange = async () => {
// 设置时间范围
let beginTime: Dayjs;
let endTime: Dayjs;
switch (timeRangeType.value) {
case TimeRangeTypeEnum.MONTH: {
beginTime = dayjs().startOf('month');
endTime = dayjs().endOf('month');
break;
}
case TimeRangeTypeEnum.WEEK: {
beginTime = dayjs().startOf('week');
endTime = dayjs().endOf('week');
break;
}
case TimeRangeTypeEnum.YEAR: {
beginTime = dayjs().startOf('year');
endTime = dayjs().endOf('year');
break;
}
default: {
beginTime = dayjs().subtract(30, 'day').startOf('d');
endTime = dayjs().endOf('d');
break;
}
}
// 发送时间范围选中事件
await getOrderCountTrendComparison(beginTime, endTime);
};
/** 查询订单数量趋势对照数据 */
const getOrderCountTrendComparison = async (
beginTime: dayjs.ConfigType,
endTime: dayjs.ConfigType,
) => {
loading.value = true;
// 查询数据
const list = await TradeStatisticsApi.getOrderCountTrendComparison(
timeRangeType.value,
dayjs(beginTime).toDate(),
dayjs(endTime).toDate(),
);
// 处理数据
const dates: string[] = [];
const series = [...timeRange.get(timeRangeType.value).series];
for (const item of list) {
dates.push(item.value.date);
if (series.length === 2) {
series[0].data.push(fenToYuan(item?.value?.orderPayPrice || 0)); // 当前金额
series[1].data.push(item?.value?.orderPayCount || 0); // 当前数量
} else {
series[0].data.push(fenToYuan(item?.reference?.orderPayPrice || 0)); // 对照金额
series[1].data.push(fenToYuan(item?.value?.orderPayPrice || 0)); // 当前金额
series[2].data.push(item?.reference?.orderPayCount || 0); // 对照数量
series[3].data.push(item?.value?.orderPayCount || 0); // 当前数量
}
}
eChartOptions.xAxis!.data = dates;
eChartOptions.series = series;
// legend在4个切换到2个的时候，还是显示成4个，需要手动配置一下
eChartOptions.legend.data = series.map((item) => item.name);
loading.value = false;
};
/** 初始化 */
onMounted(async () => {
await handleTimeRangeTypeChange();
renderEcharts(eChartOptions as any);
});
</script>
<template>
<AnalysisChartCard title="交易量趋势">
<template #header-suffix>
<div class="flex flex-row items-center justify-between">
<!-- 查询条件 -->
<div class="flex flex-row items-center gap-2">
<el-radio-group
v-model="timeRangeType"
@change="handleTimeRangeTypeChange"
>
<el-radio-button
v-for="[key, value] in timeRange.entries()"
:key="key"
:value="key"
>
{{ value.name }}
</el-radio-button>
</el-radio-group>
</div>
</div>
</template>
<!-- 折线图 -->
<EchartsUI ref="chartRef" />
</AnalysisChartCard>
</template>

72
apps/web-ele/src/views/mall/home/components/workbench-quick-data-show.vue Normal file
View File

@ -0,0 +1,72 @@
<script setup lang="ts">
import type { WorkbenchQuickDataShowItem } from './data';
import { computed } from 'vue';
import { CountTo } from '@vben/common-ui';
interface Props {
items?: WorkbenchQuickDataShowItem[];
modelValue?: WorkbenchQuickDataShowItem[];
title: string;
}
defineOptions({
name: 'WorkbenchQuickDataShow',
});
const props = withDefaults(defineProps<Props>(), {
items: () => [],
modelValue: () => [],
});
const emit = defineEmits(['update:modelValue']);
// 使用计算属性实现双向绑定
const itemsData = computed({
get: () => (props.modelValue?.length ? props.modelValue : props.items),
set: (value) => {
emit('update:modelValue', value);
},
});
</script>
<template>
<el-card>
<template #header>
<!-- <CardTitle class="text-lg " >{{ title }}</CardTitle>-->
<div class="text-lg font-semibold">{{ title }}</div>
</template>
<template #default>
<div class="flex flex-wrap p-0">
<div
v-for="(item, index) in itemsData"
:key="item.name"
:class="{
'border-r-0': index % 4 === 3,
'border-b-0': index < 4,
'pb-4': index > 4,
'rounded-bl-xl': index === itemsData.length - 4,
'rounded-br-xl': index === itemsData.length - 1,
}"
class="flex-col-center group w-1/4 cursor-pointer py-9"
>
<div class="mb-2 flex justify-center">
<CountTo
:prefix="item.prefix || ''"
:end-val="Number(item.value)"
:decimals="item.decimals || 0"
class="text-4xl font-normal"
/>
</div>
<span class="truncate text-base text-gray-500">{{ item.name }}</span>
</div>
</div>
</template>
<!-- <CardContent class="flex flex-wrap p-0">-->
<!-- <template>-->
<!-- -->
<!-- </template>-->
<!-- </CardContent>-->
</el-card>
</template>

237
apps/web-ele/src/views/mall/home/index.vue
View File

@ -1,29 +1,30 @@
<script lang="ts" setup>
import type {
AnalysisOverviewItem,
WorkbenchProjectItem,
WorkbenchQuickNavItem,
} from '@vben/common-ui';
import type { AnalysisOverviewItem } from './components/data';
import type { WorkbenchQuickDataShowItem } from '#/views/mall/home/components/data';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import {
AnalysisOverview,
DocAlert,
Page,
WorkbenchQuickNav,
} from '@vben/common-ui';
import {
SvgBellIcon,
SvgCakeIcon,
SvgCardIcon,
SvgDownloadIcon,
} from '@vben/icons';
import { DocAlert, Page, WorkbenchQuickNav } from '@vben/common-ui';
import { isString, openWindow } from '@vben/utils';
import { getTabsCount } from '#/api/mall/product/spu';
import { getUserCountComparison } from '#/api/mall/statistics/member';
import { getOrderComparison } from '#/api/mall/statistics/trade';
import { getWalletRechargePrice } from '#/api/mall/statistics/pay';
import { getOrderComparison, getOrderCount } from '#/api/mall/statistics/trade';
import AnalysisOverview from './components/analysis-overview.vue';
import MemberFunnelCard from './components/member-funnel-card.vue';
import MemberStatisticsCard from './components/member-statistics-card.vue';
import MemberTerminalCard from './components/member-terminal-card.vue';
import TradeTrendCard from './components/trade-trend-card.vue';
import WorkbenchQuickDataShow from './components/workbench-quick-data-show.vue';
/** 商城首页 */
defineOptions({ name: 'MallHome' });
@ -31,6 +32,18 @@ defineOptions({ name: 'MallHome' });
const loading = ref(true); // 加载中
const orderComparison = ref(); // 交易对照数据
const userComparison = ref(); // 用户对照数据
const data = ref({
orderUndelivered: 0,
orderAfterSaleApply: 0,
orderWaitePickUp: 0,
withdrawAuditing: 0,
productForSale: 0,
productInWarehouse: 0,
productAlertStock: 0,
rechargePrice: 0,
});
const dataShow = ref(false);
/** 查询交易对照卡片数据 */
const getOrder = async () => {
@ -42,43 +55,87 @@ const getUserCount = async () => {
userComparison.value = await getUserCountComparison();
};
/** 查询订单数据 */
const getOrderData = async () => {
const orderCount = await getOrderCount();
if (orderCount.undelivered) {
data.value.orderUndelivered = orderCount.undelivered;
}
if (orderCount.afterSaleApply) {
data.value.orderAfterSaleApply = orderCount.afterSaleApply;
}
if (orderCount.pickUp) {
data.value.orderWaitePickUp = orderCount.pickUp;
}
if (orderCount.auditingWithdraw) {
data.value.withdrawAuditing = orderCount.auditingWithdraw;
}
};
/** 查询商品数据 */
const getProductData = async () => {
// TODO: @芋艿：这个接口的返回值，是不是用命名字段更好些？
const productCount = await getTabsCount();
data.value.productForSale = productCount['0'] || 0;
data.value.productInWarehouse = productCount['1'] || 0;
data.value.productAlertStock = productCount['3'] || 0;
};
/** 查询钱包充值数据 */
const getWalletRechargeData = async () => {
const paySummary = await getWalletRechargePrice();
data.value.rechargePrice = paySummary.rechargePrice;
};
/** 初始化 */
onMounted(async () => {
loading.value = true;
await Promise.all([getOrder(), getUserCount()]);
await Promise.all([
getOrder(),
getUserCount(),
getOrderData(),
getProductData(),
getWalletRechargeData(),
]);
loading.value = false;
dataShow.value = true;
loadDataShow();
loadOverview();
});
const overviewItems: AnalysisOverviewItem[] = [
{
icon: SvgCardIcon,
title: '今日销售额',
totalTitle: '昨日数据',
totalValue: orderComparison.value?.reference?.orderPayPrice || 0,
value: orderComparison.value?.orderPayPrice || 0,
},
{
icon: SvgCakeIcon,
title: '今日用户访问量',
totalTitle: '总访问量',
totalValue: userComparison.value?.reference?.visitUserCount || 0,
value: userComparison.value?.visitUserCount || 0,
},
{
icon: SvgDownloadIcon,
title: '今日订单量',
totalTitle: '总订单量',
totalValue: orderComparison.value?.orderPayCount || 0,
value: orderComparison.value?.reference?.orderPayCount || 0,
},
{
icon: SvgBellIcon,
title: '今日会员注册量',
totalTitle: '总会员注册量',
totalValue: userComparison.value?.registerUserCount || 0,
value: userComparison.value?.reference?.registerUserCount || 0,
},
];
const overviewItems = ref<AnalysisOverviewItem[]>([]);
const loadOverview = () => {
overviewItems.value = [
{
title: '今日销售额',
totalTitle: '昨日数据',
totalValue: orderComparison.value?.reference?.orderPayPrice || 0,
value: orderComparison.value?.orderPayPrice || 0,
showGrowthRate: true,
},
{
title: '今日用户访问量',
totalTitle: '总访问量',
totalValue: userComparison.value?.reference?.visitUserCount || 0,
value: userComparison.value?.visitUserCount || 0,
showGrowthRate: true,
},
{
title: '今日订单量',
totalTitle: '总订单量',
totalValue: orderComparison.value?.orderPayCount || 0,
value: orderComparison.value?.reference?.orderPayCount || 0,
showGrowthRate: true,
},
{
title: '今日会员注册量',
totalTitle: '总会员注册量',
totalValue: userComparison.value?.registerUserCount || 0,
value: userComparison.value?.reference?.registerUserCount || 0,
showGrowthRate: true,
},
];
};
// 同样，这里的 url 也可以使用以 http 开头的外部链接
const quickNavItems: WorkbenchQuickNavItem[] = [
@ -138,6 +195,69 @@ const quickNavItems: WorkbenchQuickNavItem[] = [
},
];
const quickDataShowItems = ref<WorkbenchQuickDataShowItem[]>();
const loadDataShow = () => {
quickDataShowItems.value = [
{
name: '待发货订单',
value: data.value.orderUndelivered,
prefix: '',
decimals: 0,
routerName: 'TradeOrder',
},
{
name: '退款中订单',
value: data.value.orderAfterSaleApply,
prefix: '',
decimals: 0,
routerName: 'TradeAfterSale',
},
{
name: '待核销订单',
value: data.value.orderWaitePickUp,
routerName: 'TradeOrder',
prefix: '',
decimals: 0,
},
{
name: '库存预警',
value: data.value.productAlertStock,
routerName: 'ProductSpu',
prefix: '',
decimals: 0,
},
{
name: '上架商品',
value: data.value.productForSale,
routerName: 'ProductSpu',
prefix: '',
decimals: 0,
},
{
name: '仓库商品',
value: data.value.productInWarehouse,
routerName: 'ProductSpu',
prefix: '',
decimals: 0,
},
{
name: '提现待审核',
value: data.value.withdrawAuditing,
routerName: 'TradeBrokerageWithdraw',
prefix: '',
decimals: 0,
},
{
name: '账户充值',
value: data.value.rechargePrice,
prefix: '￥',
decimals: 2,
routerName: 'PayWalletRecharge',
},
];
};
const router = useRouter();
function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
if (nav.url?.startsWith('http')) {
@ -164,14 +284,35 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
url="https://doc.iocoder.cn/mall/build/"
/>
</template>
<AnalysisOverview :items="overviewItems" />
<div class="mt-5 w-full lg:w-2/5">
<div class="mt-5 w-full md:flex">
<AnalysisOverview
v-model:model-value="overviewItems"
class="mt-5 md:mr-4 md:mt-0 md:w-full"
/>
</div>
<div class="mt-5 w-full md:flex">
<WorkbenchQuickNav
:items="quickNavItems"
class="mt-5 lg:mt-0"
class="mt-5 md:mr-4 md:mt-0 md:w-1/2"
title="快捷导航"
@click="navTo"
/>
<WorkbenchQuickDataShow
v-if="dataShow"
v-model:model-value="quickDataShowItems"
title="运营数据"
class="mt-5 md:mr-4 md:mt-0 md:w-1/2"
/>
</div>
<div class="mb-4 mt-5 w-full md:flex">
<MemberFunnelCard class="mt-5 md:mr-4 md:mt-0 md:w-2/3" />
<MemberTerminalCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" />
</div>
<div class="mb-4 mt-5 w-full md:flex">
<TradeTrendCard class="mt-5 md:mr-4 md:mt-0 md:w-full" />
</div>
<div class="mb-4 mt-5 w-full md:flex">
<MemberStatisticsCard class="mt-5 md:mr-4 md:mt-0 md:w-full" />
</div>
</Page>
</template>

20
apps/web-ele/src/views/mall/product/brand/index.vue
View File

@ -4,7 +4,7 @@ import type { MallBrandApi } from '#/api/mall/product/brand';
import { Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteBrand, getBrandPage } from '#/api/mall/product/brand';
@ -35,17 +35,15 @@ function handleEdit(row: MallBrandApi.Brand) {
/** 删除品牌 */
async function handleDelete(row: MallBrandApi.Brand) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
// 二次确认
await ElMessageBox.confirm('确定删除该品牌吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteBrand(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteBrand(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({

19
apps/web-ele/src/views/mall/product/category/index.vue
View File

@ -7,7 +7,7 @@ import { useRouter } from 'vue-router';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteCategory, getCategoryList } from '#/api/mall/product/category';
@ -52,17 +52,14 @@ const handleViewSpu = (id: number) => {
/** 删除分类 */
async function handleDelete(row: MallCategoryApi.Category) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定删除该分类吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteCategory(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteCategory(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 切换树形展开/收缩状态 */

19
apps/web-ele/src/views/mall/product/property/modules/property-grid.vue
View File

@ -7,7 +7,7 @@ import type { MallPropertyApi } from '#/api/mall/product/property';
import { useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteProperty, getPropertyPage } from '#/api/mall/product/property';
@ -40,17 +40,14 @@ function handleEdit(row: any) {
/** 删除属性 */
async function handleDelete(row: MallPropertyApi.Property) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定删除该属性吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteProperty(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteProperty(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 表格事件 */

19
apps/web-ele/src/views/mall/product/property/modules/value-grid.vue
View File

@ -6,7 +6,7 @@ import { watch } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -47,17 +47,14 @@ function handleEdit(row: MallPropertyApi.PropertyValue) {
/** 删除字典数据 */
async function handleDelete(row: MallPropertyApi.PropertyValue) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定删除该属性值吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deletePropertyValue(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deletePropertyValue(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({

22
apps/web-ele/src/views/mall/product/spu/components/delivery-form.vue
View File

@ -1,14 +1,18 @@
<script lang="ts" setup>
import { watch } from 'vue';
import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import * as ExpressTemplateApi from '#/api/mall/trade/delivery/expressTemplate';
import { watch } from 'vue';
import { ElMessage } from 'element-plus';
import { DICT_TYPE, getIntDictOptions, DeliveryTypeEnum } from '#/utils';
import { DeliveryTypeEnum, DICT_TYPE, getIntDictOptions } from '#/utils';
const props = defineProps<{
propFormData: Object;
}>();
const emit = defineEmits(['update:activeName']);
/** 将传进来的值赋值给 formData */
watch(
() => props.propFormData,
@ -20,7 +24,6 @@ watch(
},
);
const emit = defineEmits(['update:activeName']);
const validate = async () => {
const { valid } = await formApi.validate();
if (!valid) {
@ -29,10 +32,10 @@ const validate = async () => {
try {
// 校验通过更新数据
Object.assign(props.propFormData, formApi.getValues());
} catch (e) {
} catch (error) {
ElMessage.error('【物流设置】不完善，请填写相关信息');
emit('update:activeName', 'delivery');
throw e; // 目的截断之后的校验
throw error; // 目的截断之后的校验
}
};
defineExpose({ validate });
@ -62,11 +65,8 @@ const [Form, formApi] = useVbenForm({
component: 'ApiSelect',
componentProps: {
api: ExpressTemplateApi.getSimpleTemplateList,
props: {
label: 'name',
value: 'id',
children: 'children',
},
labelField: 'name',
valueField: 'id',
},
rules: 'required',
dependencies: {

34
apps/web-ele/src/views/mall/product/spu/components/info-form.vue
View File

@ -1,20 +1,25 @@
<script lang="ts" setup>
import { useVbenForm } from '#/adapter/form';
import { handleTree } from '@vben/utils';
import * as ProductCategoryApi from '#/api/mall/product/category';
import * as ProductBrandApi from '#/api/mall/product/brand';
import { watch } from 'vue';
import { handleTree } from '@vben/utils';
import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import * as ProductBrandApi from '#/api/mall/product/brand';
import * as ProductCategoryApi from '#/api/mall/product/category';
const props = defineProps<{
propFormData: Object;
}>();
const emit = defineEmits(['update:activeName']);
const getCategoryList = async () => {
const data = await ProductCategoryApi.getCategorySimpleList();
return handleTree(data, 'id');
};
const props = defineProps<{
propFormData: Object;
}>();
/** 将传进来的值赋值给 formData */
watch(
() => props.propFormData,
@ -26,7 +31,6 @@ watch(
},
);
const emit = defineEmits(['update:activeName']);
const validate = async () => {
const { valid } = await formApi.validate();
if (!valid) {
@ -35,10 +39,10 @@ const validate = async () => {
try {
// 校验通过更新数据
Object.assign(props.propFormData, formApi.getValues());
} catch (e) {
} catch (error) {
ElMessage.error('【基础设置】不完善，请填写相关信息');
emit('update:activeName', 'info');
throw e; // 目的截断之后的校验
throw error; // 目的截断之后的校验
}
};
defineExpose({ validate });
@ -68,11 +72,9 @@ const [Form, formApi] = useVbenForm({
component: 'ApiCascader',
componentProps: {
api: getCategoryList,
props: {
label: 'name',
value: 'id',
children: 'children',
},
labelField: 'name',
valueField: 'id',
childrenField: 'children',
},
rules: 'required',
},

4
apps/web-ele/src/views/mall/product/spu/data.ts
View File

@ -24,7 +24,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
const res = await getCategoryList({});
return handleTree(res, 'id', 'parentId', 'children');
},
fieldNames: { label: 'name', value: 'id', children: 'children' },
labelField: 'name',
valueField: 'id',
childrenField: 'children',
},
},
{

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

@ -13,7 +13,7 @@ import {
treeToString,
} from '@vben/utils';
import { ElDescriptions, ElLoading, ElMessage, ElTabs } from 'element-plus';
import { ElDescriptions, ElMessage, ElMessageBox, ElTabs } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getCategoryList } from '#/api/mall/product/category';
@ -97,35 +97,31 @@ function handleEdit(row: MallSpuApi.Spu) {
/** 删除商品 */
async function handleDelete(row: MallSpuApi.Spu) {
const hideLoading = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定删除该商品吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteSpu(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
hideLoading.close();
}
await deleteSpu(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 添加到仓库 / 回收站的状态 */
async function handleStatus02Change(row: MallSpuApi.Spu, newStatus: number) {
// 二次确认
const text =
newStatus === ProductSpuStatusEnum.RECYCLE.status
? '加入到回收站'
: '恢复到仓库';
confirm(`确认要"${row.name}"${text}吗？`)
.then(async () => {
await updateStatus({ id: row.id as number, status: newStatus });
ElMessage.success(`${text}成功`);
onRefresh();
})
.catch(() => {
ElMessage.error(`${text}失败`);
});
// 二次确认
await ElMessageBox.confirm(`确认要jian"${row.name}"${text}吗？`, {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await updateStatus({ id: row.id as number, status: newStatus });
ElMessage.success(`${text}成功`);
onRefresh();
}
/** 更新状态 */

102
apps/web-ele/src/views/mall/product/spu/modules/detail.vue
View File

@ -1,29 +1,31 @@
<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
import { floatToFixed2 } from '@vben/utils';
import * as ProductSpuApi from '#/api/mall/product/spu';
import type { MallSpuApi } from '#/api/mall/product/spu';
import * as ProductCategoryApi from '#/api/mall/product/category';
import * as ProductBrandApi from '#/api/mall/product/brand';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Page } from '@vben/common-ui';
import { getIntDictOptions, DICT_TYPE } from '#/utils/dict';
import { IconifyIcon } from '@vben/icons';
import { floatToFixed2 } from '@vben/utils';
import {
ElButton,
ElCard,
ElDescriptions,
ElDescriptionsItem,
ElCarousel,
ElCarouselItem,
ElImage,
ElDivider,
ElButton,
ElTabs,
ElTabPane,
ElTag,
ElBadge,
ElDescriptions,
ElDescriptionsItem,
ElEmpty,
ElImage,
ElTabPane,
ElTabs,
ElTag,
} from 'element-plus';
import { IconifyIcon } from '@vben/icons';
import * as ProductBrandApi from '#/api/mall/product/brand';
import * as ProductCategoryApi from '#/api/mall/product/category';
import * as ProductSpuApi from '#/api/mall/product/spu';
import { DICT_TYPE, getIntDictOptions } from '#/utils/dict';
interface Category {
id: number;
@ -214,18 +216,18 @@ onMounted(async () => {
<ElTag v-if="formData.specType" type="success">多规格</ElTag>
<ElTag v-else type="info">单规格</ElTag>
<ElTag v-if="formData.subCommissionType" type="warning">分销</ElTag>
<ElTag type="danger"
>库存:
<ElTag type="danger">
库存:
{{
formData.skus?.reduce(
(sum, sku) => sum + (sku.stock || 0),
0,
) || 0
}}</ElTag
>
<ElTag type="info"
>分类: {{ getCategoryNameById(formData.categoryId) }}</ElTag
>
}}
</ElTag>
<ElTag type="info">
分类: {{ getCategoryNameById(formData.categoryId) }}
</ElTag>
</div>
</div>
</div>
@ -236,32 +238,31 @@ onMounted(async () => {
<!-- 基本信息 -->
<ElCard shadow="never" header="商品信息" class="h-full">
<ElDescriptions :column="1" border>
<ElDescriptionsItem label="商品名称">{{
formData.name
}}</ElDescriptionsItem>
<ElDescriptionsItem label="商品名称">
{{ formData.name }}
</ElDescriptionsItem>
<ElDescriptionsItem label="商品分类">
<ElTag type="success">{{
getCategoryNameById(formData.categoryId)
}}</ElTag>
<ElTag type="success">
{{ getCategoryNameById(formData.categoryId) }}
</ElTag>
</ElDescriptionsItem>
<ElDescriptionsItem label="商品品牌">
<ElTag type="primary">{{
getBrandNameById(formData.brandId)
}}</ElTag>
<ElTag type="primary">
{{ getBrandNameById(formData.brandId) }}
</ElTag>
</ElDescriptionsItem>
<ElDescriptionsItem label="关键字">
<ElTag type="danger"></ElTag
>{{ formData.keyword || '无' }}</ElDescriptionsItem
>
<ElDescriptionsItem label="赠送积分">{{
formData.giveIntegral
}}</ElDescriptionsItem>
<ElDescriptionsItem label="虚拟销量">{{
formData.virtualSalesCount
}}</ElDescriptionsItem>
<ElDescriptionsItem label="排序">{{
formData.sort
}}</ElDescriptionsItem>
<ElTag type="danger" />{{ formData.keyword || '无' }}
</ElDescriptionsItem>
<ElDescriptionsItem label="赠送积分">
{{ formData.giveIntegral }}
</ElDescriptionsItem>
<ElDescriptionsItem label="虚拟销量">
{{ formData.virtualSalesCount }}
</ElDescriptionsItem>
<ElDescriptionsItem label="排序">
{{ formData.sort }}
</ElDescriptionsItem>
<ElDescriptionsItem label="规格类型">
<ElTag :type="formData.specType ? 'success' : 'info'">
{{ formData.specType ? '多规格' : '单规格' }}
@ -309,9 +310,9 @@ onMounted(async () => {
</span>
</div>
</ElDescriptionsItem>
<ElDescriptionsItem label="运费模板">{{
formData.deliveryTemplateId || '未设置'
}}</ElDescriptionsItem>
<ElDescriptionsItem label="运费模板">
{{ formData.deliveryTemplateId || '未设置' }}
</ElDescriptionsItem>
</ElDescriptions>
</ElCard>
</div>
@ -370,7 +371,7 @@ onMounted(async () => {
>
<ElCard
shadow="hover"
:header="`规格 ${index + 1}${sku.properties && sku.properties.length > 0 ? ' - ' + sku.properties.map((p) => p.valueName).join('/') : ''}`"
:header="`规格 ${index + 1}${sku.properties && sku.properties.length > 0 ? ` - ${sku.properties.map((p) => p.valueName).join('/')}` : ''}`"
>
<div class="flex flex-col gap-4 md:flex-row">
<ElImage
@ -484,14 +485,17 @@ onMounted(async () => {
background-color: #fff;
border-radius: 4px;
}
.product-description :deep(img) {
max-width: 100%;
height: auto;
}
.product-description :deep(table) {
width: 100%;
border-collapse: collapse;
}
.product-description :deep(table td) {
padding: 8px;
border: 1px solid #eee;

19
apps/web-ele/src/views/mall/promotion/article/index.vue
View File

@ -4,7 +4,7 @@ import type { MallArticleApi } from '#/api/mall/promotion/article';
import { Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteArticle, getArticlePage } from '#/api/mall/promotion/article';
@ -35,17 +35,14 @@ function handleEdit(row: MallArticleApi.Article) {
/** 删除品牌 */
async function handleDelete(row: MallArticleApi.Article) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.title]),
fullscreen: true,
await ElMessageBox.confirm('确定删除该文章吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteArticle(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteArticle(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({

19
apps/web-ele/src/views/mall/promotion/banner/index.vue
View File

@ -4,7 +4,7 @@ import type { MallBannerApi } from '#/api/mall/market/banner';
import { Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteBanner, getBannerPage } from '#/api/mall/market/banner';
@ -35,17 +35,14 @@ function handleEdit(row: MallBannerApi.Banner) {
/** 删除Banner */
async function handleDelete(row: MallBannerApi.Banner) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.title]),
fullscreen: true,
await ElMessageBox.confirm('确定删除该Banner吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteBanner(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteBanner(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({

46
apps/web-ele/src/views/mall/promotion/bargain/activity/index.vue
View File

@ -2,9 +2,9 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MallBargainActivityApi } from '#/api/mall/promotion/bargain/bargainActivity';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -41,40 +41,26 @@ function handleEdit(row: MallBargainActivityApi.BargainActivity) {
/** 关闭砍价活动 */
async function handleClose(row: MallBargainActivityApi.BargainActivity) {
try {
await confirm({
content: '确认关闭该砍价活动吗？',
});
} catch {
return;
}
const loadingInstance = ElLoading.service({
text: '确认关闭该砍价活动吗？',
fullscreen: true,
await ElMessageBox.confirm('确定关闭该砍价活动吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await closeBargainActivity(row.id as number);
ElMessage.success('关闭成功');
onRefresh();
} finally {
loadingInstance.close();
}
await closeBargainActivity(row.id as number);
ElMessage.success('关闭成功');
onRefresh();
}
/** 删除砍价活动 */
async function handleDelete(row: MallBargainActivityApi.BargainActivity) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定删除该砍价活动吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteBargainActivity(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteBargainActivity(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({

48
apps/web-ele/src/views/mall/promotion/combination/activity/index.vue
View File

@ -2,9 +2,9 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -43,42 +43,30 @@ function handleEdit(row: MallCombinationActivityApi.CombinationActivity) {
async function handleClose(
row: MallCombinationActivityApi.CombinationActivity,
) {
try {
await confirm({
content: '确认关闭该拼团活动吗？',
});
} catch {
return;
}
const loadingInstance = ElLoading.service({
text: '关闭中...',
fullscreen: true,
await ElMessageBox.confirm('确定关闭该拼团活动吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await closeCombinationActivity(row.id as number);
ElMessage.success('关闭成功');
onRefresh();
} finally {
loadingInstance.close();
}
await closeCombinationActivity(row.id as number);
ElMessage.success('关闭成功');
onRefresh();
}
/** 删除拼团活动 */
async function handleDelete(
row: MallCombinationActivityApi.CombinationActivity,
) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定删除该拼团活动吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteCombinationActivity(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteCombinationActivity(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({

20
apps/web-ele/src/views/mall/promotion/coupon/index.vue
View File

@ -5,9 +5,8 @@ import type { MallCouponApi } from '#/api/mall/promotion/coupon/coupon';
import { ref } from 'vue';
import { DocAlert, Page } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -24,17 +23,14 @@ const statusTabs = ref(getStatusTabs());
/** 删除优惠券 */
async function handleDelete(row: MallCouponApi.Coupon) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定回收该优惠券吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteCoupon(row.id as number);
ElMessage.success('回收成功');
onRefresh();
} finally {
loadingInstance.close();
}
await deleteCoupon(row.id as number);
ElMessage.success('回收成功');
onRefresh();
}
/** 刷新表格 */

48
apps/web-ele/src/views/mall/promotion/discountActivity/index.vue
View File

@ -2,9 +2,9 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MallDiscountActivityApi } from '#/api/mall/promotion/discount/discountActivity';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -41,40 +41,28 @@ function handleEdit(row: MallDiscountActivityApi.DiscountActivity) {
/** 关闭满减活动 */
async function handleClose(row: MallDiscountActivityApi.DiscountActivity) {
try {
await confirm({
content: '确认关闭该限时折扣活动吗？',
});
} catch {
return;
}
const loadingInstance = ElLoading.service({
text: '正在关闭中',
fullscreen: true,
await ElMessageBox.confirm('确定关闭该限时折扣活动吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await closeDiscountActivity(row.id as number);
ElMessage.success('关闭成功');
onRefresh();
} finally {
loadingInstance.close();
}
await closeDiscountActivity(row.id as number);
ElMessage.success('关闭成功');
onRefresh();
}
/** 删除满减活动 */
async function handleDelete(row: MallDiscountActivityApi.DiscountActivity) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定删除该限时折扣活动吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteDiscountActivity(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteDiscountActivity(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({

8
apps/web-ele/src/views/mall/promotion/diy/page/index.vue
View File

@ -6,6 +6,8 @@ import { useRouter } from 'vue-router';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteDiyPage, getDiyPagePage } from '#/api/mall/promotion/diy/page';
import { $t } from '#/locales';
@ -45,7 +47,13 @@ function handleDecorate(row: MallDiyPageApi.DiyPage) {
/** 删除DIY页面 */
async function handleDelete(row: MallDiyPageApi.DiyPage) {
await ElMessageBox.confirm('确定删除该装修页面吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await deleteDiyPage(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}

25
apps/web-ele/src/views/mall/promotion/diy/template/index.vue
View File

@ -4,9 +4,9 @@ import type { MallDiyTemplateApi } from '#/api/mall/promotion/diy/template';
import { useRouter } from 'vue-router';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -51,19 +51,26 @@ function handleDecorate(row: MallDiyTemplateApi.DiyTemplate) {
/** 使用模板 */
async function handleUse(row: MallDiyTemplateApi.DiyTemplate) {
confirm({
content: `是否使用模板"${row.name}"?`,
}).then(async () => {
// 发起删除
await useDiyTemplate(row.id as number);
ElMessage.success('使用成功');
onRefresh();
await ElMessageBox.confirm(`是否使用模板"${row.name}"?`, {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
// 发起删除
await useDiyTemplate(row.id as number);
ElMessage.success('使用成功');
onRefresh();
}
/** 删除DIY模板 */
async function handleDelete(row: MallDiyTemplateApi.DiyTemplate) {
await ElMessageBox.confirm('确定删除该装修模板吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await deleteDiyTemplate(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}

24
apps/web-ele/src/views/mall/promotion/point/activity/index.vue
View File

@ -4,9 +4,9 @@ import type { MallPointActivityApi } from '#/api/mall/promotion/point';
import { computed } from 'vue';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -48,18 +48,24 @@ function handleEdit(row: MallPointActivityApi.PointActivity) {
}
/** 关闭积分活动 */
function handleClose(row: MallPointActivityApi.PointActivity) {
confirm({
content: '确认关闭该积分商城活动吗？',
}).then(async () => {
await closePointActivity(row.id);
ElMessage.success('关闭成功');
onRefresh();
async function handleClose(row: MallPointActivityApi.PointActivity) {
await ElMessageBox.confirm('确认关闭该积分商城活动吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await closePointActivity(row.id);
ElMessage.success('关闭成功');
onRefresh();
}
/** 删除积分活动 */
async function handleDelete(row: MallPointActivityApi.PointActivity) {
await ElMessageBox.confirm('确定删除该积分商城活动吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await deletePointActivity(row.id);
onRefresh();
}

47
apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue
View File

@ -2,9 +2,9 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -41,40 +41,27 @@ function handleEdit(row: MallRewardActivityApi.RewardActivity) {
/** 关闭活动 */
async function handleClose(row: MallRewardActivityApi.RewardActivity) {
try {
await confirm({
content: '确认关闭该满减送活动吗？',
});
} catch {
return;
}
const loadingInstance = ElLoading.service({
text: '正在关闭中',
fullscreen: true,
await ElMessageBox.confirm('确认关闭该满减送活动吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await closeRewardActivity(row.id as number);
ElMessage.success('关闭成功');
onRefresh();
} finally {
loadingInstance.close();
}
await closeRewardActivity(row.id as number);
ElMessage.success('关闭成功');
onRefresh();
}
/** 删除活动 */
async function handleDelete(row: MallRewardActivityApi.RewardActivity) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定删除该满减送活动吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteRewardActivity(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteRewardActivity(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({

36
apps/web-ele/src/views/mall/promotion/seckill/activity/index.vue
View File

@ -7,7 +7,7 @@ import { onMounted } from 'vue';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { ElLoading, ElMessage, ElTag } from 'element-plus';
import { ElMessage, ElMessageBox, ElTag } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -45,32 +45,26 @@ function handleCreate() {
/** 关闭活动 */
async function handleClose(row: MallSeckillActivityApi.SeckillActivity) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.closing', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确认关闭该秒杀活动吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await closeSeckillActivity(row.id as number);
ElMessage.success('关闭成功');
onRefresh();
} finally {
loadingInstance.close();
}
await closeSeckillActivity(row.id as number);
ElMessage.success('关闭成功');
onRefresh();
}
/** 删除活动 */
async function handleDelete(row: MallSeckillActivityApi.SeckillActivity) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定删除该秒杀活动吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteSeckillActivity(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteSeckillActivity(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({

19
apps/web-ele/src/views/mall/promotion/seckill/config/index.vue
View File

@ -4,7 +4,7 @@ import type { MallSeckillConfigApi } from '#/api/mall/promotion/seckill/seckillC
import { confirm, Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -39,17 +39,14 @@ function handleEdit(row: MallSeckillConfigApi.SeckillConfig) {
/** 删除秒杀时段 */
async function handleDelete(row: MallSeckillConfigApi.SeckillConfig) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定删除该秒杀时段吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteSeckillConfig(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteSeckillConfig(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 修改状态 */

137
apps/web-ele/src/views/mall/statistics/member/components/member-region-card.vue Normal file
View File

@ -0,0 +1,137 @@
<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';
import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
import { onMounted, reactive, ref } from 'vue';
import { AnalysisChartCard } from '@vben/common-ui';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import { fenToYuan } from '@vben/utils';
import { ElRow } from 'element-plus';
import * as MemberStatisticsApi from '#/api/mall/statistics/member';
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
const areaStatisticsList = ref<MallMemberStatisticsApi.AreaStatistics[]>([]); // 省份会员统计
const areaChartOptions = reactive({
tooltip: {
trigger: 'item' as const,
formatter: (params: any) => {
return `${params?.data?.areaName || params?.name}<br/>
会员数量：${params?.data?.userCount || 0}<br/>
订单创建数量：${params?.data?.orderCreateUserCount || 0}<br/>
订单支付数量：${params?.data?.orderPayUserCount || 0}<br/>
订单支付金额：${fenToYuan(params?.data?.orderPayPrice || 0)}`;
},
},
visualMap: {
text: ['高', '低'],
realtime: false,
calculable: true,
top: 'middle',
inRange: {
color: ['#fff', '#3b82f6'],
},
min: 0,
max: 0,
},
series: [
{
name: '会员地域分布',
type: 'map' as const,
map: 'china',
roam: false,
selectedMode: false,
data: [] as any[],
},
],
});
/** 按照省份，查询会员统计列表 */
const getMemberAreaStatisticsList = async () => {
areaStatisticsList.value =
await MemberStatisticsApi.getMemberAreaStatisticsList();
let min = 0;
let max = 0;
const mapData = areaStatisticsList.value.map((item) => {
const payUserCount = item?.orderPayUserCount || 0;
min = Math.min(min, payUserCount);
max = Math.max(max, payUserCount);
return { ...item, name: item.areaName, value: payUserCount };
});
// 使用类型断言处理赋值
(areaChartOptions.series[0] as any).data = mapData;
areaChartOptions.visualMap.min = min;
areaChartOptions.visualMap.max = max;
};
// 格式化为元
const fenToYuanFormat = (row: any, column: any, cellValue: any) => {
return fenToYuan(cellValue);
};
onMounted(async () => {
await getMemberAreaStatisticsList();
renderEcharts(areaChartOptions);
});
</script>
<template>
<AnalysisChartCard title="会员地域分布">
<ElRow>
<ElCol :span="12">
<EchartsUI ref="chartRef" />
</ElCol>
<ElCol :span="12">
<el-table :data="areaStatisticsList" :height="300">
<el-table-column
:sort-method="
(obj1: any, obj2: any) =>
obj1.areaName.localeCompare(obj2.areaName, 'zh-CN')
"
align="center"
label="省份"
min-width="80"
prop="areaName"
show-overflow-tooltip
sortable
/>
<el-table-column
align="center"
label="会员数量"
min-width="105"
prop="userCount"
sortable
/>
<el-table-column
align="center"
label="订单创建数量"
min-width="135"
prop="orderCreateUserCount"
sortable
/>
<el-table-column
align="center"
label="订单支付数量"
min-width="135"
prop="orderPayUserCount"
sortable
/>
<el-table-column
:formatter="fenToYuanFormat"
align="center"
label="订单支付金额"
min-width="135"
prop="orderPayPrice"
sortable
/>
</el-table>
</ElCol>
</ElRow>
</AnalysisChartCard>
</template>

72
apps/web-ele/src/views/mall/statistics/member/components/member-sex-card.vue Normal file
View File

@ -0,0 +1,72 @@
<script setup lang="ts">
import type { EchartsUIType } from '@vben/plugins/echarts';
import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
import type { DictDataType } from '#/utils/dict';
import { onMounted, reactive, ref } from 'vue';
import { AnalysisChartCard } from '@vben/common-ui';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import * as MemberStatisticsApi from '#/api/mall/statistics/member';
import { DICT_TYPE, getIntDictOptions } from '#/utils/dict';
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
const sexChartOptions = reactive({
tooltip: {
trigger: 'item' as const,
confine: true,
formatter: '{a} <br/>{b} : {c} ({d}%)',
},
legend: {
orient: 'vertical' as const,
left: 'right',
},
roseType: 'area',
series: [
{
name: '会员性别',
type: 'pie' as const,
label: {
show: false,
},
labelLine: {
show: false,
},
data: [] as any[],
},
],
});
/** 按照性别，查询会员统计列表 */
const getMemberSexStatisticsList = async () => {
const list = await MemberStatisticsApi.getMemberSexStatisticsList();
const dictDataList = getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX);
dictDataList.push({ label: '未知', value: null } as any);
(sexChartOptions.series[0] as any).data = dictDataList.map(
(dictData: DictDataType) => {
const userCount = list.find(
(item: MallMemberStatisticsApi.SexStatistics) =>
item.sex === dictData.value,
)?.userCount;
return {
name: dictData.label,
value: userCount || 0,
};
},
);
};
onMounted(async () => {
await getMemberSexStatisticsList();
renderEcharts(sexChartOptions);
});
</script>
<template>
<AnalysisChartCard title="会员性别分布">
<EchartsUI ref="chartRef" />
</AnalysisChartCard>
</template>

95
apps/web-ele/src/views/mall/statistics/member/index.vue
View File

@ -1,7 +1,64 @@
<script lang="ts" setup>
import { DocAlert, Page } from '@vben/common-ui';
import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member'; // 会员统计数据
import type { AnalysisOverviewIconItem } from '#/views/mall/home/components/data';
import { ElButton } from 'element-plus';
import { onMounted, ref } from 'vue';
import { DocAlert, Page } from '@vben/common-ui';
import { fenToYuan } from '@vben/utils';
import * as MemberStatisticsApi from '#/api/mall/statistics/member'; // 会员统计数据
import AnalysisOverviewIcon from '#/views/mall/home/components/analysis-overview-icon.vue';
import MemberFunnelCard from '#/views/mall/home/components/member-funnel-card.vue';
import MemberTerminalCard from '#/views/mall/home/components/member-terminal-card.vue';
import MemberRegionCard from './components/member-region-card.vue';
import MemberSexCard from './components/member-sex-card.vue';
const summary = ref<MallMemberStatisticsApi.Summary>();
const overviewItems = ref<AnalysisOverviewIconItem[]>([]);
const loadOverview = async () => {
summary.value = await MemberStatisticsApi.getMemberSummary();
overviewItems.value = [
{
icon: 'fa-solid:users', // 自定义立体用户群组图标 - 累计会员数
title: '累计会员数',
value: summary.value?.userCount || 0,
iconBgColor: 'text-blue-500',
iconColor: 'bg-blue-100',
},
{
icon: 'fa-solid:user', // 自定义立体信用卡图标 - 累计充值人数
title: '累计充值人数',
value: summary.value?.rechargeUserCount || 0,
iconBgColor: 'text-purple-500',
iconColor: 'bg-purple-100',
},
{
icon: 'fa-solid:money-check-alt', // 自定义立体钞票图标 - 累计充值金额
title: '累计充值金额',
value: Number(fenToYuan(summary.value?.rechargePrice || 0)),
iconBgColor: 'text-yellow-500',
iconColor: 'bg-yellow-100',
prefix: '￥',
decimals: 2,
},
{
icon: 'fa-solid:yen-sign', // 自定义立体用户添加图标 - 今日会员注册量
title: '累计消费金额',
value: Number(fenToYuan(summary.value?.expensePrice || 0)),
iconBgColor: 'text-green-500',
iconColor: 'bg-green-100',
prefix: '￥',
decimals: 2,
},
];
};
onMounted(async () => {
loadOverview();
});
</script>
<template>
@ -10,25 +67,19 @@ import { ElButton } from 'element-plus';
title="【统计】会员、商品、交易统计"
url="https://doc.iocoder.cn/mall/statistics/"
/>
<ElButton
danger
type="primary"
link
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
>
该功能支持 Vue3 + element-plus 版本！
</ElButton>
<br />
<ElButton
type="primary"
link
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/member/index"
>
可参考
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/member/index
代码，pull request 贡献给我们！
</ElButton>
<div class="mt-5 w-full md:flex">
<AnalysisOverviewIcon
v-model:model-value="overviewItems"
class="mt-5 md:mr-4 md:mt-0 md:w-full"
/>
</div>
<div class="mb-4 mt-5 w-full md:flex">
<MemberFunnelCard class="mt-5 md:mr-4 md:mt-0 md:w-2/3" />
<MemberTerminalCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" />
</div>
<div class="mb-4 mt-5 w-full md:flex">
<MemberRegionCard class="mt-5 md:mr-4 md:mt-0 md:w-2/3" />
<MemberSexCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" />
</div>
</Page>
</template>

153
apps/web-ele/src/views/mall/statistics/product/components/product-rank.vue Normal file
View File

@ -0,0 +1,153 @@
<script lang="ts" setup>
import type { MallProductStatisticsApi } from '#/api/mall/statistics/product';
import { onMounted, reactive, ref } from 'vue';
import { AnalysisChartCard } from '@vben/common-ui';
import { buildSortingField, floatToFixed2 } from '@vben/utils';
import * as ProductStatisticsApi from '#/api/mall/statistics/product';
import ShortcutDateRangePicker from '#/views/mall/home/components/shortcut-date-range-picker.vue';
/** 商品排行 */
defineOptions({ name: 'ProductRank' });
// 格式化：访客-支付转化率
const formatConvertRate = (row: MallProductStatisticsApi.ProductStatistics) => {
return `${row.browseConvertPercent}%`;
};
const handleSortChange = (params: any) => {
queryParams.sortingFields = [buildSortingField(params)];
getSpuList();
};
const handleDateRangeChange = (times: any[]) => {
queryParams.times = times as [];
getSpuList();
};
const shortcutDateRangePicker = ref();
// 查询参数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
times: [],
sortingFields: {},
});
const loading = ref(false); // 列表的加载中
const total = ref(0); // 列表的总页数
const list = ref<MallProductStatisticsApi.ProductStatistics[]>([]); // 列表的数据
/** 查询商品列表 */
const getSpuList = async () => {
loading.value = true;
try {
const data =
await ProductStatisticsApi.getProductStatisticsRankPage(queryParams);
list.value = data.list;
total.value = data.total;
} finally {
loading.value = false;
}
};
// 格式化金额【分转元】
// @ts-ignore
const fenToYuanFormat = (_, __, cellValue: any, ___) => {
return `￥${floatToFixed2(cellValue)}`;
};
/** 初始化 */
onMounted(async () => {
await getSpuList();
});
</script>
<template>
<AnalysisChartCard title="商品排行">
<template #header-suffix>
<ShortcutDateRangePicker
ref="shortcutDateRangePicker"
@change="handleDateRangeChange"
/>
</template>
<!-- 排行列表 -->
<el-table v-loading="loading" :data="list" @sort-change="handleSortChange">
<el-table-column label="商品 ID" prop="spuId" min-width="70" />
<el-table-column label="商品图片" align="center" prop="picUrl" width="80">
<template #default="{ row }">
<el-image
:src="row.picUrl"
:preview-src-list="[row.picUrl]"
class="h-30px w-30px"
preview-teleported
/>
</template>
</el-table-column>
<el-table-column
label="商品名称"
prop="name"
min-width="200"
:show-overflow-tooltip="true"
/>
<el-table-column
label="浏览量"
prop="browseCount"
min-width="90"
sortable="custom"
/>
<el-table-column
label="访客数"
prop="browseUserCount"
min-width="90"
sortable="custom"
/>
<el-table-column
label="加购件数"
prop="cartCount"
min-width="105"
sortable="custom"
/>
<el-table-column
label="下单件数"
prop="orderCount"
min-width="105"
sortable="custom"
/>
<el-table-column
label="支付件数"
prop="orderPayCount"
min-width="105"
sortable="custom"
/>
<el-table-column
label="支付金额"
prop="orderPayPrice"
min-width="105"
sortable="custom"
:formatter="fenToYuanFormat"
/>
<el-table-column
label="收藏数"
prop="favoriteCount"
min-width="90"
sortable="custom"
/>
<el-table-column
label="访客-支付转化率(%)"
prop="browseConvertPercent"
min-width="180"
sortable="custom"
:formatter="formatConvertRate"
/>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getSpuList"
/>
</AnalysisChartCard>
</template>
<style lang="scss" scoped></style>

331
apps/web-ele/src/views/mall/statistics/product/components/product-summary.vue Normal file
View File

@ -0,0 +1,331 @@
<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';
import type { MallDataComparisonResp } from '#/api/mall/statistics/common';
import type { MallProductStatisticsApi } from '#/api/mall/statistics/product';
import type { AnalysisOverviewIconItem } from '#/views/mall/home/components/data';
import { reactive, ref } from 'vue';
import { confirm } from '@vben/common-ui';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import {
calculateRelativeRate,
downloadFileFromBlobPart,
fenToYuan,
formatDate,
isSameDay,
} from '@vben/utils';
import dayjs from 'dayjs';
import * as ProductStatisticsApi from '#/api/mall/statistics/product';
import AnalysisChartCard from '#/views/mall/home/components/analysis-chart-card.vue';
import AnalysisOverviewIcon from '#/views/mall/home/components/analysis-overview-icon.vue';
import ShortcutDateRangePicker from '#/views/mall/home/components/shortcut-date-range-picker.vue';
/** 商品概况 */
defineOptions({ name: 'ProductSummary' });
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
const trendLoading = ref(true); // 商品状态加载中
const exportLoading = ref(false); // 导出的加载中
const trendSummary =
ref<MallDataComparisonResp<MallProductStatisticsApi.ProductStatistics>>(); // 商品状况统计数据
const shortcutDateRangePicker = ref();
/** 折线图配置 */
const lineChartOptions = reactive({
dataset: {
dimensions: [
'time',
'browseCount',
'browseUserCount',
'orderPayPrice',
'afterSaleRefundPrice',
],
source: [] as MallProductStatisticsApi.ProductStatistics[],
},
grid: {
left: 20,
right: 20,
bottom: 20,
top: 80,
containLabel: true,
},
legend: {
top: 50,
},
series: [
{
name: '商品浏览量',
type: 'line',
smooth: true,
itemStyle: { color: '#B37FEB' },
},
{
name: '商品访客数',
type: 'line',
smooth: true,
itemStyle: { color: '#FFAB2B' },
},
{
name: '支付金额',
type: 'bar',
smooth: true,
yAxisIndex: 1,
itemStyle: { color: '#1890FF' },
},
{
name: '退款金额',
type: 'bar',
smooth: true,
yAxisIndex: 1,
itemStyle: { color: '#00C050' },
},
],
toolbox: {
feature: {
// 数据区域缩放
dataZoom: {
yAxisIndex: false, // Y轴不缩放
},
brush: {
type: ['lineX', 'clear'] as const, // 区域缩放按钮、还原按钮
},
saveAsImage: { show: true, name: '商品状况' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
padding: [5, 10],
},
xAxis: {
type: 'category' as const,
boundaryGap: true,
axisTick: {
show: false,
},
},
yAxis: [
{
type: 'value' as const,
name: '金额',
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: '#7F8B9C',
},
splitLine: {
show: true,
lineStyle: {
color: '#F5F7F9',
},
},
},
{
type: 'value' as const,
name: '数量',
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: '#7F8B9C',
},
splitLine: {
show: true,
lineStyle: {
color: '#F5F7F9',
},
},
},
],
});
/** 处理商品状况查询 */
const getProductTrendData = async () => {
trendLoading.value = true;
// 1. 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
const times = shortcutDateRangePicker.value.times;
if (isSameDay(times[0], times[1])) {
// 前天
times[0] = formatDate(dayjs(times[0]).subtract(1, 'd').toDate());
}
// 查询数据
await Promise.all([getProductTrendSummary(), getProductStatisticsList()]);
renderEcharts(lineChartOptions as unknown as echarts.EChartsOption);
loadOverview();
trendLoading.value = false;
};
/** 查询商品状况数据统计 */
const getProductTrendSummary = async () => {
const times = shortcutDateRangePicker.value.times;
trendSummary.value = await ProductStatisticsApi.getProductStatisticsAnalyse({
times,
});
};
/** 查询商品状况数据列表 */
const getProductStatisticsList = async () => {
// 查询数据
const times = shortcutDateRangePicker.value.times;
const list: MallProductStatisticsApi.ProductStatistics[] =
await ProductStatisticsApi.getProductStatisticsList({ times });
// 处理数据
for (const item of list) {
item.orderPayPrice = Number(fenToYuan(item.orderPayPrice));
item.afterSaleRefundPrice = Number(fenToYuan(item.afterSaleRefundPrice));
}
// 更新 Echarts 数据
if (lineChartOptions.dataset && lineChartOptions.dataset.source) {
lineChartOptions.dataset.source = list;
}
};
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await confirm('确定要导出商品状况吗？');
// 发起导出
exportLoading.value = true;
const times = shortcutDateRangePicker.value.times;
const data = await ProductStatisticsApi.exportProductStatisticsExcel({
times,
});
downloadFileFromBlobPart({ fileName: '商品状况.xls', source: data });
} finally {
exportLoading.value = false;
}
};
const overviewItems = ref<AnalysisOverviewIconItem[]>();
const loadOverview = () => {
overviewItems.value = [
{
icon: 'ep:view',
title: '商品浏览量',
value: trendSummary.value?.value?.browseCount || 0,
iconColor: 'bg-blue-100',
iconBgColor: 'text-blue-500',
tooltip:
'在选定条件下，所有商品详情页被访问的次数，一个人在统计时间内访问多次记为多次',
percent: calculateRelativeRate(
trendSummary?.value?.value?.browseCount,
trendSummary.value?.reference?.browseCount,
),
},
{
icon: 'ep:user-filled',
title: '商品访客数',
value: trendSummary.value?.value?.browseUserCount || 0,
iconColor: 'bg-purple-100',
iconBgColor: 'text-purple-500',
tooltip:
'在选定条件下，访问任何商品详情页的人数，一个人在统计时间范围内访问多次只记为一个',
percent: calculateRelativeRate(
trendSummary?.value?.value?.browseUserCount,
trendSummary.value?.reference?.browseUserCount,
),
},
{
icon: 'fa-solid:money-check-alt',
title: '支付件数',
iconColor: 'bg-yellow-100',
iconBgColor: 'text-yellow-500',
value: trendSummary.value?.value?.orderPayCount || 0,
tooltip: '在选定条件下，成功付款订单的商品件数之和',
percent: calculateRelativeRate(
trendSummary?.value?.value?.orderPayCount,
trendSummary.value?.reference?.orderPayCount,
),
},
{
icon: 'ep:warning-filled',
title: '支付金额',
iconColor: 'bg-green-100',
iconBgColor: 'text-green-500',
prefix: '￥',
value: Number(fenToYuan(trendSummary.value?.value?.orderPayPrice || 0)),
tooltip: '在选定条件下，成功付款订单的商品金额之和',
decimals: 2,
percent: calculateRelativeRate(
trendSummary?.value?.value?.orderPayPrice,
trendSummary.value?.reference?.orderPayPrice,
),
},
{
icon: 'fa-solid:wallet',
title: '退款件数',
iconColor: 'bg-cyan-100',
iconBgColor: 'text-cyan-500',
value: trendSummary.value?.value?.afterSaleCount || 0,
tooltip: '在选定条件下，成功退款的商品件数之和',
percent: calculateRelativeRate(
trendSummary?.value?.value?.afterSaleCount,
trendSummary.value?.reference?.afterSaleCount,
),
},
{
icon: 'fa-solid:award',
title: '退款金额',
iconColor: 'bg-yellow-100',
iconBgColor: 'text-yellow-500',
prefix: '￥',
decimals: 2,
value: Number(
fenToYuan(trendSummary.value?.value?.afterSaleRefundPrice || 0),
),
tooltip: '在选定条件下，成功退款的商品金额之和',
percent: calculateRelativeRate(
trendSummary?.value?.value?.afterSaleRefundPrice,
trendSummary.value?.reference?.afterSaleRefundPrice,
),
},
];
};
</script>
<template>
<AnalysisChartCard title="商品概况">
<template #header-suffix>
<!-- 查询条件 -->
<ShortcutDateRangePicker
ref="shortcutDateRangePicker"
@change="getProductTrendData"
>
<el-button
class="ml-4"
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['statistics:product:export']"
>
<Icon icon="ep:download" class="mr-1" />导出
</el-button>
</ShortcutDateRangePicker>
</template>
<!-- 统计值 -->
<AnalysisOverviewIcon
v-model:model-value="overviewItems"
:columns-number="6"
class="mt-5 md:mr-4 md:mt-0 md:w-full"
/>
<!-- 折线图 -->
<el-skeleton :loading="trendLoading" animated>
<EchartsUI ref="chartRef" height="500px" />
</el-skeleton>
</AnalysisChartCard>
</template>
<style lang="scss" scoped></style>

29
apps/web-ele/src/views/mall/statistics/product/index.vue
View File

@ -1,7 +1,8 @@
<script lang="ts" setup>
import { DocAlert, Page } from '@vben/common-ui';
import { ElButton } from 'element-plus';
import ProductRank from './components/product-rank.vue';
import ProductSummary from './components/product-summary.vue';
</script>
<template>
@ -10,25 +11,11 @@ import { ElButton } from 'element-plus';
title="【统计】会员、商品、交易统计"
url="https://doc.iocoder.cn/mall/statistics/"
/>
<ElButton
danger
type="primary"
link
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
>
该功能支持 Vue3 + element-plus 版本！
</ElButton>
<br />
<ElButton
type="primary"
link
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/product/index"
>
可参考
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/product/index
代码，pull request 贡献给我们！
</ElButton>
<div class="mt-5 w-full">
<ProductSummary class="mt-5 md:mr-4 md:mt-0" />
</div>
<div class="mt-5 w-full">
<ProductRank class="mt-5 md:mr-4 md:mt-0" />
</div>
</Page>
</template>

280
apps/web-ele/src/views/mall/statistics/trade/components/trade-transaction-card.vue Normal file
View File

@ -0,0 +1,280 @@
<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';
import type { MallDataComparisonResp } from '#/api/mall/statistics/common';
import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
import type { AnalysisOverviewIconItem } from '#/views/mall/home/components/data';
import { reactive, ref } from 'vue';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import {
calculateRelativeRate,
downloadFileFromBlobPart,
fenToYuan,
formatDate,
isSameDay,
} from '@vben/utils';
import dayjs from 'dayjs';
import { ElMessageBox } from 'element-plus';
import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
import AnalysisChartCard from '#/views/mall/home/components/analysis-chart-card.vue';
import AnalysisOverviewIcon from '#/views/mall/home/components/analysis-overview-icon.vue';
import ShortcutDateRangePicker from '#/views/mall/home/components/shortcut-date-range-picker.vue';
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
const overviewItems = ref<AnalysisOverviewIconItem[]>();
const summary =
ref<MallDataComparisonResp<MallTradeStatisticsApi.TradeTrendSummary>>();
const shortcutDateRangePicker = ref();
const exportLoading = ref(false); // 导出的加载中
const trendLoading = ref(true); // 交易状态加载中
const loadOverview = () => {
overviewItems.value = [
{
icon: 'fa-solid:yen-sign',
title: '营业额',
value: Number(fenToYuan(summary?.value?.value.turnoverPrice || 0)),
tooltip: '商品支付金额、充值金额',
iconColor: 'bg-blue-100',
iconBgColor: 'text-blue-500',
prefix: '￥',
decimals: 2,
percent: calculateRelativeRate(
summary?.value?.value?.turnoverPrice,
summary?.value?.reference?.turnoverPrice,
),
},
{
icon: 'fa-solid:shopping-cart',
title: '商品支付金额',
value: Number(fenToYuan(summary.value?.value?.orderPayPrice || 0)),
tooltip:
'用户购买商品的实际支付金额，包括微信支付、余额支付、支付宝支付、线下支付金额（拼团商品在成团之后计入，线下支付订单在后台确认支付后计入）',
iconColor: 'bg-purple-100',
iconBgColor: 'text-purple-500',
prefix: '￥',
decimals: 2,
percent: calculateRelativeRate(
summary?.value?.value?.orderPayPrice,
summary?.value?.reference?.orderPayPrice,
),
},
{
icon: 'fa-solid:money-check-alt',
title: '充值金额',
value: Number(fenToYuan(summary.value?.value?.rechargePrice || 0)),
tooltip: '用户成功充值的金额',
iconColor: 'bg-yellow-100',
iconBgColor: 'text-yellow-500',
prefix: '￥',
decimals: 2,
percent: calculateRelativeRate(
summary?.value?.value?.rechargePrice,
summary?.value?.reference?.rechargePrice,
),
},
{
icon: 'ep:warning-filled',
title: '支出金额',
value: Number(fenToYuan(summary.value?.value?.expensePrice || 0)),
tooltip: '余额支付金额、支付佣金金额、商品退款金额',
iconColor: 'bg-green-100',
iconBgColor: 'text-green-500',
prefix: '￥',
decimals: 2,
percent: calculateRelativeRate(
summary?.value?.value?.expensePrice,
summary?.value?.reference?.expensePrice,
),
},
{
icon: 'fa-solid:wallet',
title: '余额支付金额',
value: Number(fenToYuan(summary.value?.value?.walletPayPrice || 0)),
tooltip: '余额支付金额、支付佣金金额、商品退款金额',
iconColor: 'bg-cyan-100',
iconBgColor: 'text-cyan-500',
prefix: '￥',
decimals: 2,
percent: calculateRelativeRate(
summary?.value?.value?.walletPayPrice,
summary?.value?.reference?.walletPayPrice,
),
},
{
icon: 'fa-solid:award',
title: '支付佣金金额',
value: Number(
fenToYuan(summary.value?.value?.brokerageSettlementPrice || 0),
),
tooltip: '后台给推广员支付的推广佣金，以实际支付为准',
iconColor: 'bg-yellow-100',
iconBgColor: 'text-yellow-500',
prefix: '￥',
decimals: 2,
percent: calculateRelativeRate(
summary?.value?.value?.brokerageSettlementPrice,
summary?.value?.reference?.brokerageSettlementPrice,
),
},
{
icon: 'fa-solid:times-circle',
title: '商品退款金额',
value: Number(fenToYuan(summary.value?.value?.afterSaleRefundPrice || 0)),
tooltip: '用户成功退款的商品金额',
iconColor: 'bg-blue-100',
iconBgColor: 'text-blue-500',
prefix: '￥',
decimals: 2,
percent: calculateRelativeRate(
summary?.value?.value?.afterSaleRefundPrice,
summary?.value?.reference?.afterSaleRefundPrice,
),
},
];
};
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await ElMessageBox.confirm('确定要导出交易状况吗？');
// 发起导出
exportLoading.value = true;
const times = shortcutDateRangePicker.value.times;
const data = await TradeStatisticsApi.exportTradeStatisticsExcel({ times });
downloadFileFromBlobPart({ fileName: '交易状况.xls', source: data });
} finally {
exportLoading.value = false;
}
};
const getTradeTrendData = async () => {
trendLoading.value = true;
// 1. 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
const times = shortcutDateRangePicker.value.times;
if (isSameDay(times[0], times[1])) {
// 前天
times[0] = formatDate(dayjs(times[0]).subtract(1, 'd').toDate());
}
// 查询数据
await Promise.all([getTradeStatisticsAnalyse(), getTradeStatisticsList()]);
trendLoading.value = false;
loadOverview();
renderEcharts(lineChartOptions as any);
};
/** 查询交易状况数据统计 */
const getTradeStatisticsAnalyse = async () => {
const times = shortcutDateRangePicker.value.times;
summary.value = await TradeStatisticsApi.getTradeStatisticsAnalyse({
times,
});
};
/** 查询交易状况数据列表 */
const getTradeStatisticsList = async () => {
// 查询数据
const times = shortcutDateRangePicker.value.times;
const list = await TradeStatisticsApi.getTradeStatisticsList({ times });
// 处理数据
for (const item of list) {
item.turnoverPrice = Number(fenToYuan(item.turnoverPrice));
item.orderPayPrice = Number(fenToYuan(item.orderPayPrice));
item.rechargePrice = Number(fenToYuan(item.rechargePrice));
item.expensePrice = Number(fenToYuan(item.expensePrice));
}
// 更新 Echarts 数据
if (lineChartOptions.dataset && lineChartOptions.dataset.source) {
lineChartOptions.dataset.source = list;
}
};
/** 折线图配置 */
const lineChartOptions = reactive({
dataset: {
dimensions: [
'date',
'turnoverPrice',
'orderPayPrice',
'rechargePrice',
'expensePrice',
],
source: [] as MallTradeStatisticsApi.TradeTrendSummary[],
},
grid: {
left: 20,
right: 20,
bottom: 20,
top: 80,
containLabel: true,
},
legend: {
top: 50,
},
series: [
{ name: '营业额', type: 'line', smooth: true },
{ name: '商品支付金额', type: 'line', smooth: true },
{ name: '充值金额', type: 'line', smooth: true },
{ name: '支出金额', type: 'line', smooth: true },
],
toolbox: {
feature: {
// 数据区域缩放
dataZoom: {
yAxisIndex: false, // Y轴不缩放
},
brush: {
type: ['lineX', 'clear'] as const, // 区域缩放按钮、还原按钮
},
saveAsImage: { show: true, name: '交易状况' }, // 保存为图片
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
padding: [5, 10],
},
xAxis: {
type: 'category' as const,
boundaryGap: false,
axisTick: {
show: false,
},
},
yAxis: {
axisTick: {
show: false,
},
},
});
</script>
<template>
<AnalysisChartCard title="交易状况">
<template #header-suffix>
<!-- 查询条件 -->
<ShortcutDateRangePicker
ref="shortcutDateRangePicker"
@change="getTradeTrendData"
>
<el-button
class="ml-4"
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['statistics:trade:export']"
>
<Icon icon="ep:download" class="mr-1" />导出
</el-button>
</ShortcutDateRangePicker>
</template>
<AnalysisOverviewIcon v-model:model-value="overviewItems" />
<EchartsUI height="500px" ref="chartRef" />
</AnalysisChartCard>
</template>

103
apps/web-ele/src/views/mall/statistics/trade/index.vue
View File

@ -1,7 +1,76 @@
<script lang="ts" setup>
import { DocAlert, Page } from '@vben/common-ui';
import type { MallDataComparisonResp } from '#/api/mall/statistics/common';
import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
import type { AnalysisOverviewTradeItem } from '#/views/mall/home/components/data';
import { ElButton } from 'element-plus';
import { onMounted, ref } from 'vue';
import { DocAlert, Page } from '@vben/common-ui';
import { calculateRelativeRate, fenToYuan } from '@vben/utils';
import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
import analysisTradeOverview from '#/views/mall/home/components/analysis-trade-overview.vue';
import TradeTransactionCard from './components/trade-transaction-card.vue';
const overviewItems = ref<AnalysisOverviewTradeItem[]>();
const summary =
ref<MallDataComparisonResp<MallTradeStatisticsApi.TradeSummary>>();
const loadOverview = () => {
overviewItems.value = [
{
title: '昨日订单数量',
value: summary.value?.value?.yesterdayOrderCount || 0,
tooltip: '昨日订单数量',
percent: calculateRelativeRate(
summary?.value?.value?.yesterdayOrderCount,
summary.value?.reference?.yesterdayOrderCount,
),
},
{
title: '本月订单数量',
value: summary.value?.value?.monthOrderCount || 0,
tooltip: '本月订单数量',
percent: calculateRelativeRate(
summary?.value?.value?.monthOrderCount,
summary.value?.reference?.monthOrderCount,
),
},
{
title: '昨日支付金额',
value: Number(fenToYuan(summary.value?.value?.yesterdayPayPrice || 0)),
tooltip: '昨日支付金额',
prefix: '￥',
decimals: 2,
percent: calculateRelativeRate(
summary?.value?.value?.yesterdayPayPrice,
summary.value?.reference?.yesterdayPayPrice,
),
},
{
title: '本月支付金额',
value: summary.value?.value?.monthPayPrice || 0,
tooltip: '本月支付金额',
prefix: '￥',
decimals: 2,
percent: calculateRelativeRate(
summary?.value?.value?.monthPayPrice,
summary.value?.reference?.monthPayPrice,
),
},
];
};
/** 查询交易统计 */
const getTradeStatisticsSummary = async () => {
summary.value = await TradeStatisticsApi.getTradeStatisticsSummary();
};
/** 初始化 */
onMounted(async () => {
await getTradeStatisticsSummary();
loadOverview();
});
</script>
<template>
@ -10,25 +79,15 @@ import { ElButton } from 'element-plus';
title="【统计】会员、商品、交易统计"
url="https://doc.iocoder.cn/mall/statistics/"
/>
<ElButton
danger
type="primary"
link
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
>
该功能支持 Vue3 + element-plus 版本！
</ElButton>
<br />
<ElButton
type="primary"
link
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/trade/index"
>
可参考
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/trade/index
代码，pull request 贡献给我们！
</ElButton>
<!-- 统计值 -->
<div class="mb-4 mt-5 w-full md:flex">
<analysisTradeOverview
v-model:model-value="overviewItems"
class="mt-5 md:mr-4 md:mt-0 md:w-full"
/>
</div>
<div class="mb-4 mt-5 w-full md:flex">
<TradeTransactionCard class="mt-5 md:mr-4 md:mt-0 md:w-full" />
</div>
</Page>
</template>

450
apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue Normal file
View File

@ -0,0 +1,450 @@
<script lang="ts" setup>
import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
import type { MallOrderApi } from '#/api/mall/trade/order';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Page } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { fenToYuan, formatDate } from '@vben/utils';
import {
ElDescriptions,
ElDescriptionsItem,
ElImage,
ElMessage,
ElMessageBox,
ElTimeline,
ElTimelineItem,
} from 'element-plus';
import * as AfterSaleApi from '#/api/mall/trade/afterSale/index';
import ContentWrap from '#/components/content-wrap/content-wrap.vue';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE, getDictLabel, getDictObj } from '#/utils/dict';
import UpdateAuditReasonForm from './disagree-form.vue';
defineOptions({ name: 'TradeAfterSaleDetail' });
const { params } = useRoute(); // 查询参数
const { push } = useRouter(); // 路由
const formData = ref<MallAfterSaleApi.AfterSale>({
order: {} as MallOrderApi.Order,
logs: [] as MallOrderApi.OrderLog[],
orderItem: {} as MallOrderApi.OrderItem,
});
const updateAuditReasonFormRef = ref(); // 拒绝售后表单 Ref
/** 获得 userType 颜色 */
const getUserTypeColor = (type: number) => {
const dict = getDictObj(DICT_TYPE.USER_TYPE, type);
switch (dict?.colorType) {
case 'danger': {
return '#F56C6C';
}
case 'info': {
return '#909399';
}
case 'success': {
return '#67C23A';
}
case 'warning': {
return '#E6A23C';
}
}
return '#409EFF';
};
/** 获得详情 */
const getDetail = async () => {
const id = params.id as unknown as number;
if (id) {
const res = await AfterSaleApi.getAfterSale(id);
// 没有表单信息则关闭页面返回
if (res === null) {
ElMessage.error('售后订单不存在');
close();
}
formData.value = res;
}
};
/** 同意售后 */
const agree = async () => {
// 二次确认
await ElMessageBox.confirm('是否同意售后？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await AfterSaleApi.agree(formData.value.id!);
// 提示成功
ElMessage.success($t('page.common.success'));
await getDetail();
};
/** 拒绝售后 */
const disagree = async () => {
updateAuditReasonFormRef.value?.open(formData.value);
};
/** 确认收货 */
const receive = async () => {
// 二次确认
await ElMessageBox.confirm('是否确认收货？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await AfterSaleApi.receive(formData.value.id!);
// 提示成功
ElMessage.success($t('page.common.success'));
await getDetail();
};
/** 拒绝收货 */
const refuse = async () => {
// 二次确认
await ElMessageBox.confirm('是否拒绝收货？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await AfterSaleApi.refuse(formData.value.id!);
// 提示成功
ElMessage.success($t('page.common.success'));
await getDetail();
};
/** 确认退款 */
const refund = async () => {
// 二次确认
await ElMessageBox.confirm('是否确认退款？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await AfterSaleApi.refund(formData.value.id!);
// 提示成功
ElMessage.success($t('page.common.success'));
await getDetail();
};
/** 关闭 tag */
const close = () => {
push({ name: 'TradeAfterSale' });
};
onMounted(async () => {
await getDetail();
});
</script>
<template>
<Page auto-content-height>
<ContentWrap>
<!-- 订单信息 -->
<ElDescriptions title="订单信息">
<ElDescriptionsItem label="订单号: ">
{{ formData.orderNo }}
</ElDescriptionsItem>
<ElDescriptionsItem label="配送方式: ">
<DictTag
:type="DICT_TYPE.TRADE_DELIVERY_TYPE"
:value="formData.order?.deliveryType"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="订单类型: ">
<DictTag
:type="DICT_TYPE.TRADE_ORDER_TYPE"
:value="formData.order?.type"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="收货人: ">
{{ formData.order?.receiverName }}
</ElDescriptionsItem>
<ElDescriptionsItem label="买家留言: ">
{{ formData.order?.userRemark }}
</ElDescriptionsItem>
<ElDescriptionsItem label="订单来源: ">
<DictTag
:type="DICT_TYPE.TERMINAL"
:value="formData.order?.terminal"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="联系电话: ">
{{ formData.order?.receiverMobile }}
</ElDescriptionsItem>
<ElDescriptionsItem label="商家备注: ">
{{ formData.order?.remark }}
</ElDescriptionsItem>
<ElDescriptionsItem label="支付单号: ">
{{ formData.order?.payOrderId }}
</ElDescriptionsItem>
<ElDescriptionsItem label="付款方式: ">
<DictTag
:type="DICT_TYPE.PAY_CHANNEL_CODE"
:value="formData.order?.payChannelCode"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="买家: ">
{{ formData?.user?.nickname }}
</ElDescriptionsItem>
</ElDescriptions>
<!-- 售后信息 -->
<ElDescriptions title="售后信息">
<ElDescriptionsItem label="退款编号: ">
{{ formData.no }}
</ElDescriptionsItem>
<ElDescriptionsItem label="申请时间: ">
{{ formatDate(formData.auditTime) }}
</ElDescriptionsItem>
<ElDescriptionsItem label="售后类型: ">
<DictTag
:type="DICT_TYPE.TRADE_AFTER_SALE_TYPE"
:value="formData.type"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="售后方式: ">
<DictTag
:type="DICT_TYPE.TRADE_AFTER_SALE_WAY"
:value="formData.way"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="退款金额: ">
{{ fenToYuan(formData.refundPrice ?? 0) }}
</ElDescriptionsItem>
<ElDescriptionsItem label="退款原因: ">
{{ formData.applyReason }}
</ElDescriptionsItem>
<ElDescriptionsItem label="补充描述: ">
{{ formData.applyDescription }}
</ElDescriptionsItem>
<ElDescriptionsItem label="凭证图片: ">
<ElImage
v-for="(item, index) in formData.applyPicUrls"
:key="index"
:src="item"
style="width: 60px; height: 60px; margin-right: 10px"
:preview-src-list="formData.applyPicUrls ?? []"
/>
</ElDescriptionsItem>
</ElDescriptions>
<!-- 退款状态 -->
<ElDescriptions :column="1" title="退款状态">
<ElDescriptionsItem label="退款状态: ">
<DictTag
:type="DICT_TYPE.TRADE_AFTER_SALE_STATUS"
:value="formData.status"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label-class-name="no-colon">
<el-button
v-if="formData.status === 10"
type="primary"
@click="agree"
>
同意售后
</el-button>
<el-button
v-if="formData.status === 10"
type="primary"
@click="disagree"
>
拒绝售后
</el-button>
<el-button
v-if="formData.status === 30"
type="primary"
@click="receive"
>
确认收货
</el-button>
<el-button
v-if="formData.status === 30"
type="primary"
@click="refuse"
>
拒绝收货
</el-button>
<el-button
v-if="formData.status === 40"
type="primary"
@click="refund"
>
确认退款
</el-button>
</ElDescriptionsItem>
<ElDescriptionsItem>
<template #label><span style="color: red">提醒: </span></template>
如果未发货，请点击同意退款给买家。<br />
如果实际已发货，请主动与买家联系。<br />
如果订单整体退款后，优惠券和余额会退还给买家.
</ElDescriptionsItem>
</ElDescriptions>
<!-- 商品信息 -->
<ElDescriptions title="商品信息">
<ElDescriptionsItem label-class-name="no-colon">
<el-row :gutter="20">
<el-col :span="15">
<el-table
v-if="formData.orderItem"
:data="[formData.orderItem]"
border
>
<el-table-column label="商品" prop="spuName" width="auto">
<template #default="{ row }">
{{ row.spuName }}
<el-tag
v-for="property in row.properties"
:key="property.propertyId"
class="mr-10px"
>
{{ property.propertyName }}: {{ property.valueName }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="商品原价" prop="price" width="150">
<template #default="{ row }">
{{ fenToYuan(row.price) }} 元
</template>
</el-table-column>
<el-table-column label="数量" prop="count" width="100" />
<el-table-column label="合计" prop="payPrice" width="150">
<template #default="{ row }">
{{ fenToYuan(row.payPrice) }} 元
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="10" />
</el-row>
</ElDescriptionsItem>
</ElDescriptions>
<!-- 操作日志 -->
<ElDescriptions title="售后日志">
<ElDescriptionsItem label-class-name="no-colon">
<ElTimeline>
<ElTimelineItem
v-for="saleLog in formData.logs"
:key="saleLog.id"
:timestamp="formatDate(saleLog.createTime)?.toString()"
placement="top"
>
<div class="el-timeline-right-content">
<span>{{ saleLog.content }}</span>
</div>
<template #dot>
<span
:style="{
backgroundColor: getUserTypeColor(saleLog.userType ?? 0),
}"
class="dot-node-style"
>
{{
getDictLabel(DICT_TYPE.USER_TYPE, saleLog.userType)[0] ||
'系'
}}
</span>
</template>
</ElTimelineItem>
</ElTimeline>
</ElDescriptionsItem>
</ElDescriptions>
</ContentWrap>
<!-- 各种操作的弹窗 -->
<UpdateAuditReasonForm
ref="updateAuditReasonFormRef"
@success="getDetail"
/>
</Page>
</template>
<style lang="scss" scoped>
:deep(.el-descriptions) {
&:not(:nth-child(1)) {
margin-top: 20px;
}
.el-descriptions__title {
display: flex;
align-items: center;
&::before {
display: inline-block;
width: 3px;
height: 20px;
margin-right: 10px;
content: '';
background-color: #409eff;
}
}
.el-descriptions-item__container {
margin: 0 10px;
.no-colon {
margin: 0;
&::after {
content: '';
}
}
}
}
// 时间线样式调整
:deep(.el-timeline) {
margin: 10px 0 0 160px;
.el-timeline-item__wrapper {
position: relative;
top: -20px;
.el-timeline-item__timestamp {
position: absolute !important;
top: 10px;
left: -150px;
}
}
}
/* 单独定义气泡样式，不使用嵌套 */
:deep(.el-timeline-right-content) {
position: relative;
display: flex;
align-items: center;
min-height: 30px;
padding: 10px;
margin-left: 10px;
background-color: #f5f7fa; /* 使用明确的颜色替代变量 */
border-radius: 4px;
}
:deep(.el-timeline-right-content)::before {
position: absolute;
top: 10px;
left: -16px;
content: '';
border-color: transparent #f5f7fa transparent transparent;
border-style: solid;
border-width: 8px;
}
.dot-node-style {
position: absolute;
left: -5px;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-size: 10px;
color: #fff;
border-radius: 50%;
}
</style>

129
apps/web-ele/src/views/mall/trade/afterSale/modules/disagree-form.vue Normal file
View File

@ -0,0 +1,129 @@
<script lang="ts" setup>
import type { MallOrderApi } from '#/api/mall/trade/order';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import { getSimpleDeliveryExpressList } from '#/api/mall/trade/delivery/express';
import { deliveryOrder } from '#/api/mall/trade/order';
import { $t } from '#/locales';
const emit = defineEmits(['success']);
const formData = ref<MallOrderApi.DeliveryRequest>();
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 120,
},
layout: 'horizontal',
schema: [
{
component: 'Input',
fieldName: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
// TODO @xingyu：发货默认选中第一个？
{
fieldName: 'expressType',
label: '发货方式',
component: 'RadioGroup',
componentProps: {
options: [
{ label: '快递', value: 'express' },
{ label: '无需发货', value: 'none' },
],
buttonStyle: 'solid',
optionType: 'button',
},
},
{
fieldName: 'logisticsId',
label: '物流公司',
component: 'ApiSelect',
componentProps: {
api: getSimpleDeliveryExpressList,
labelField: 'name',
valueField: 'id',
},
dependencies: {
triggerFields: ['expressType'],
show: (values) => values.expressType === 'express',
},
},
{
fieldName: 'logisticsNo',
label: '物流单号',
component: 'Input',
dependencies: {
triggerFields: ['expressType'],
show: (values) => values.expressType === 'express',
},
},
],
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as MallOrderApi.DeliveryRequest;
if (data.expressType === 'none') {
// 无需发货的情况
data.logisticsId = 0;
data.logisticsNo = '';
}
try {
await deliveryOrder(data);
// 关闭并提示
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<MallOrderApi.Order>();
if (!data) {
return;
}
modalApi.lock();
try {
if (data.logisticsId === 0) {
await formApi.setValues({ expressType: 'none' });
}
// 设置到 values
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal class="w-1/3" title="发货">
<Form class="mx-4" />
</Modal>
</template>

19
apps/web-ele/src/views/mall/trade/brokerage/user/index.vue
View File

@ -6,7 +6,7 @@ import { useAccess } from '@vben/access';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { ElLoading, ElMessage, ElSwitch } from 'element-plus';
import { ElLoading, ElMessage, ElMessageBox, ElSwitch } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -68,17 +68,14 @@ function openCreateUserForm() {
/** 清除上级推广人 */
async function handleClearBindUser(row: MallBrokerageUserApi.BrokerageUser) {
const loadingInstance = ElLoading.service({
text: `正在清除"${row.nickname}"的上级推广人...`,
fullscreen: true,
await ElMessageBox.confirm(`确定清除"${row.nickname}"的上级推广人吗？`, {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await clearBindUser({ id: row.id as number });
ElMessage.success('清除成功');
onRefresh();
} finally {
loadingInstance.close();
}
await clearBindUser({ id: row.id as number });
ElMessage.success('清除成功');
onRefresh();
}
/** 推广资格：开通/关闭 */

36
apps/web-ele/src/views/mall/trade/brokerage/withdraw/index.vue
View File

@ -4,10 +4,10 @@ import type { MallBrokerageWithdrawApi } from '#/api/mall/trade/brokerage/withdr
import { h } from 'vue';
import { confirm, Page, prompt } from '@vben/common-ui';
import { Page, prompt } from '@vben/common-ui';
import { formatDateTime } from '@vben/utils';
import { ElInput, ElMessage } from 'element-plus';
import { ElInput, ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -35,14 +35,14 @@ function onRefresh() {
/** 审核通过 */
async function handleApprove(row: MallBrokerageWithdrawApi.BrokerageWithdraw) {
try {
await confirm('确定要审核通过吗？');
await approveBrokerageWithdraw(row.id);
ElMessage.success($t('ui.actionMessage.operationSuccess'));
onRefresh();
} catch (error) {
console.error('审核失败:', error);
}
await ElMessageBox.confirm('确定要审核通过吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await approveBrokerageWithdraw(row.id);
ElMessage.success($t('ui.actionMessage.operationSuccess'));
onRefresh();
}
/** 审核驳回 */
@ -73,14 +73,14 @@ function handleReject(row: MallBrokerageWithdrawApi.BrokerageWithdraw) {
async function handleRetryTransfer(
row: MallBrokerageWithdrawApi.BrokerageWithdraw,
) {
try {
await confirm('确定要重新转账吗？');
await approveBrokerageWithdraw(row.id);
ElMessage.success($t('ui.actionMessage.operationSuccess'));
onRefresh();
} catch (error) {
console.error('重新转账失败:', error);
}
await ElMessageBox.confirm('确定要重新转账吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await approveBrokerageWithdraw(row.id);
ElMessage.success($t('ui.actionMessage.operationSuccess'));
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({

18
apps/web-ele/src/views/mall/trade/delivery/express/index.vue
View File

@ -5,7 +5,7 @@ import type { MallDeliveryExpressApi } from '#/api/mall/trade/delivery/express';
import { Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart } from '@vben/utils';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -46,16 +46,14 @@ function handleEdit(row: MallDeliveryExpressApi.DeliveryExpress) {
/** 删除快递公司 */
async function handleDelete(row: MallDeliveryExpressApi.DeliveryExpress) {
const hideLoading = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
await ElMessageBox.confirm($t('ui.actionMessage.deleting', [row.name]), {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteDeliveryExpress(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
hideLoading.close();
}
await deleteDeliveryExpress(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({

18
apps/web-ele/src/views/mall/trade/delivery/expressTemplate/index.vue
View File

@ -4,7 +4,7 @@ import type { MallDeliveryExpressTemplateApi } from '#/api/mall/trade/delivery/e
import { Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -40,16 +40,14 @@ function handleEdit(row: MallDeliveryExpressTemplateApi.ExpressTemplate) {
async function handleDelete(
row: MallDeliveryExpressTemplateApi.ExpressTemplate,
) {
const hideLoading = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
await ElMessageBox.confirm($t('ui.actionMessage.deleting', [row.name]), {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteDeliveryExpressTemplate(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
hideLoading.close();
}
await deleteDeliveryExpressTemplate(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({

6
apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/data.ts
View File

@ -35,10 +35,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'ApiSelect',
componentProps: {
api: getSimpleDeliveryPickUpStoreList,
fieldNames: {
label: 'name',
value: 'id',
},
labelField: 'name',
valueField: 'id',
},
dependencies: {
triggerFields: ['deliveryType'],

7
apps/web-ele/src/views/mall/trade/delivery/pickUpStore/data.ts
View File

@ -51,7 +51,9 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'ApiTreeSelect',
componentProps: {
api: () => getAreaTree(),
fieldNames: { label: 'name', value: 'id', children: 'children' },
labelField: 'name',
valueField: 'id',
childrenField: 'children',
},
},
{
@ -130,7 +132,8 @@ export function useBindFormSchema(): VbenFormSchema[] {
rules: 'required',
componentProps: {
api: () => getSimpleUserList(),
fieldNames: { label: 'nickname', value: 'id' },
labelField: 'nickname',
valueField: 'id',
mode: 'tags',
allowClear: true,
},

18
apps/web-ele/src/views/mall/trade/delivery/pickUpStore/index.vue
View File

@ -4,7 +4,7 @@ import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickU
import { Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -49,16 +49,14 @@ function handleBind(row: MallDeliveryPickUpStoreApi.PickUpStore) {
/** 删除门店 */
async function handleDelete(row: MallDeliveryPickUpStoreApi.PickUpStore) {
const hideLoading = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
await ElMessageBox.confirm('确定要删除该门店吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteDeliveryPickUpStore(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
hideLoading.close();
}
await deleteDeliveryPickUpStore(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({

6
apps/web-ele/src/views/mall/trade/order/modules/delevery-form.vue
View File

@ -54,10 +54,8 @@ const [Form, formApi] = useVbenForm({
component: 'ApiSelect',
componentProps: {
api: getSimpleDeliveryExpressList,
fieldNames: {
label: 'name',
value: 'id',
},
labelField: 'name',
valueField: 'id',
},
dependencies: {
triggerFields: ['expressType'],

561
apps/web-ele/src/views/mall/trade/order/modules/detail.vue Normal file
View File

@ -0,0 +1,561 @@
<script lang="ts" setup>
import type { MallDeliveryExpressApi } from '#/api/mall/trade/delivery/express';
import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';
import type { MallOrderApi } from '#/api/mall/trade/order';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Page, useVbenModal } from '@vben/common-ui';
import { fenToYuan, formatDate } from '@vben/utils';
import {
ElDescriptions,
ElDescriptionsItem,
ElMessage,
ElMessageBox,
ElTimeline,
ElTimelineItem,
} from 'element-plus';
import * as DeliveryExpressApi from '#/api/mall/trade/delivery/express';
import * as DeliveryPickUpStoreApi from '#/api/mall/trade/delivery/pickUpStore';
import * as TradeOrderApi from '#/api/mall/trade/order';
import ContentWrap from '#/components/content-wrap/content-wrap.vue';
import { DictTag } from '#/components/dict-tag';
import { DeliveryTypeEnum, TradeOrderStatusEnum } from '#/utils/constants';
import { DICT_TYPE, getDictLabel, getDictObj } from '#/utils/dict';
import OrderDeliveryForm from './delevery-form.vue';
import OrderUpdateAddressForm from './update-address-form.vue';
import OrderUpdatePriceForm from './update-price-form.vue';
import OrderUpdateRemarkForm from './update-remark-form.vue';
defineOptions({ name: 'TradeOrderDetail' });
// 查询参数
const props = defineProps({
id: {
type: Number,
default: undefined,
}, // 订单ID
showPickUp: {
type: Boolean,
default: true,
}, // 显示核销按钮
});
const [OrderDeliveryFormModal, formModalApi] = useVbenModal({
connectedComponent: OrderDeliveryForm,
destroyOnClose: true,
});
const [OrderUpdateRemarkFormModal, remarkFormModalApi] = useVbenModal({
connectedComponent: OrderUpdateRemarkForm,
destroyOnClose: true,
});
const [OrderUpdateAddressFormModal, addressFormModalApi] = useVbenModal({
connectedComponent: OrderUpdateAddressForm,
destroyOnClose: true,
});
const [OrderUpdatePriceFormModal, priceFormModalApi] = useVbenModal({
connectedComponent: OrderUpdatePriceForm,
destroyOnClose: true,
});
/** 获得 userType 颜色 */
const getUserTypeColor = (type: number) => {
const dict = getDictObj(DICT_TYPE.USER_TYPE, type);
switch (dict?.colorType) {
case 'danger': {
return '#F56C6C';
}
case 'info': {
return '#909399';
}
case 'success': {
return '#67C23A';
}
case 'warning': {
return '#E6A23C';
}
}
return '#409EFF';
};
// 订单详情
const formData = ref<MallOrderApi.Order>({
logs: [],
});
/** 各种操作 */
const remark = () => {
remarkFormModalApi.setData(formData.value).open();
};
const delivery = () => {
formModalApi.setData(formData.value).open();
};
const updateAddress = () => {
addressFormModalApi.setData(formData.value).open();
};
const updatePrice = () => {
priceFormModalApi.setData(formData.value).open();
};
/** 核销 */
const handlePickUp = async () => {
// 二次确认
await ElMessageBox.confirm('确认核销订单吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
// 提交
await TradeOrderApi.pickUpOrder(formData.value.id!);
ElMessage.success('核销成功');
// 刷新列表
await getDetail();
};
/** 获得详情 */
const { params } = useRoute();
const id = (params.id || props.id) as unknown as number;
const getDetail = async () => {
if (id) {
const res = (await TradeOrderApi.getOrder(id)) as MallOrderApi.Order;
// 没有表单信息则关闭页面返回
if (!res) {
ElMessage.error('交易订单不存在');
close();
}
formData.value = res;
}
};
/** 关闭 tag */
const { push } = useRouter(); // 路由
const close = () => {
push({ name: 'TradeOrder' });
};
/** 复制 */
const clipboardSuccess = () => {
ElMessage.success('复制成功');
};
/** 初始化 */
const deliveryExpressList = ref<MallDeliveryExpressApi.SimpleDeliveryExpress[]>(
[],
);
// 物流公司
const expressTrackList = ref<MallOrderApi.OrderExpressTrackRespDTO[]>([]); // 物流详情
const pickUpStore = ref<MallDeliveryPickUpStoreApi.PickUpStore>(
{} as MallDeliveryPickUpStoreApi.PickUpStore,
); // 自提门店
onMounted(async () => {
await getDetail();
// 如果配送方式为快递，则查询物流公司
if (formData.value.deliveryType === DeliveryTypeEnum.EXPRESS.type) {
deliveryExpressList.value =
await DeliveryExpressApi.getSimpleDeliveryExpressList();
if (formData.value.logisticsId) {
expressTrackList.value = await TradeOrderApi.getExpressTrackList(
formData.value.id!,
);
}
} else if (
formData.value.deliveryType === DeliveryTypeEnum.PICK_UP.type &&
formData.value.pickUpStoreId
) {
pickUpStore.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStore(
formData.value.pickUpStoreId,
);
}
});
</script>
<template>
<Page auto-content-height>
<ContentWrap>
<!-- 订单信息 -->
<ElDescriptions title="订单信息">
<ElDescriptionsItem label="订单号: ">
{{ formData.no }}
</ElDescriptionsItem>
<ElDescriptionsItem label="买家: ">
{{ formData?.user?.nickname }}
</ElDescriptionsItem>
<ElDescriptionsItem label="订单类型: ">
<DictTag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="formData.type!" />
</ElDescriptionsItem>
<ElDescriptionsItem label="订单来源: ">
<DictTag :type="DICT_TYPE.TERMINAL" :value="formData.terminal!" />
</ElDescriptionsItem>
<ElDescriptionsItem label="买家留言: ">
{{ formData.userRemark }}
</ElDescriptionsItem>
<ElDescriptionsItem label="商家备注: ">
{{ formData.remark }}
</ElDescriptionsItem>
<ElDescriptionsItem label="支付单号: ">
{{ formData.payOrderId }}
</ElDescriptionsItem>
<ElDescriptionsItem label="付款方式: ">
<DictTag
:type="DICT_TYPE.PAY_CHANNEL_CODE"
:value="formData.payChannelCode!"
/>
</ElDescriptionsItem>
<ElDescriptionsItem v-if="formData.brokerageUser" label="推广用户: ">
{{ formData.brokerageUser?.nickname }}
</ElDescriptionsItem>
</ElDescriptions>
<!-- 订单状态 -->
<ElDescriptions :column="1" title="订单状态">
<ElDescriptionsItem label="订单状态: ">
<DictTag
:type="DICT_TYPE.TRADE_ORDER_STATUS"
:value="formData.status!"
/>
</ElDescriptionsItem>
<ElDescriptionsItem
v-hasPermi="['trade:order:update']"
label-class-name="no-colon"
>
<el-button
v-if="formData.status! === TradeOrderStatusEnum.UNPAID.status"
type="primary"
@click="updatePrice"
>
调整价格
</el-button>
<el-button type="primary" @click="remark">备注</el-button>
<!-- 待发货 -->
<template
v-if="formData.status! === TradeOrderStatusEnum.UNDELIVERED.status"
>
<!-- 快递发货 -->
<el-button
v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type"
type="primary"
@click="delivery"
>
发货
</el-button>
<el-button
v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type"
type="primary"
@click="updateAddress"
>
修改地址
</el-button>
<!-- 到店自提 -->
<el-button
v-if="
formData.deliveryType === DeliveryTypeEnum.PICK_UP.type &&
showPickUp
"
type="primary"
@click="handlePickUp"
>
核销
</el-button>
</template>
</ElDescriptionsItem>
<ElDescriptionsItem>
<template #label>
<span style="color: red">提醒: </span>
</template>
<el-text>
买家付款成功后，货款将直接进入您的商户号（微信、支付宝）<br />
请及时关注你发出的包裹状态，确保可以配送至买家手中 <br />
如果买家表示没收到货或货物有问题，请及时联系买家处理，友好协商
</el-text>
</ElDescriptionsItem>
</ElDescriptions>
<!-- 商品信息 -->
<ElDescriptions title="商品信息">
<ElDescriptionsItem label-class-name="no-colon">
<el-row :gutter="20">
<el-col :span="15">
<el-table :data="formData.items" border>
<el-table-column label="商品" prop="spuName" width="auto">
<template #default="{ row }">
{{ row.spuName }}
<el-tag
v-for="property in row.properties"
:key="property.propertyId"
>
{{ property.propertyName }}: {{ property.valueName }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="商品原价" prop="price" width="150">
<template #default="{ row }">
{{ fenToYuan(row.price) }}元
</template>
</el-table-column>
<el-table-column label="数量" prop="count" width="100" />
<el-table-column label="合计" prop="payPrice" width="150">
<template #default="{ row }">
{{ fenToYuan(row.payPrice) }}元
</template>
</el-table-column>
<el-table-column
label="售后状态"
prop="afterSaleStatus"
width="120"
>
<template #default="{ row }">
<DictTag
:type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
:value="row.afterSaleStatus"
/>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="10" />
</el-row>
</ElDescriptionsItem>
</ElDescriptions>
<ElDescriptions :column="4">
<!-- 第一层 -->
<ElDescriptionsItem label="商品总额: ">
{{ fenToYuan(formData.totalPrice!) }} 元
</ElDescriptionsItem>
<ElDescriptionsItem label="运费金额: ">
{{ fenToYuan(formData.deliveryPrice!) }} 元
</ElDescriptionsItem>
<ElDescriptionsItem label="订单调价: ">
{{ fenToYuan(formData.adjustPrice!) }} 元
</ElDescriptionsItem>
<ElDescriptionsItem
v-for="item in 1"
:key="item"
label-class-name="no-colon"
/>
<!-- 第二层 -->
<ElDescriptionsItem>
<template #label>
<span style="color: red">优惠劵优惠: </span>
</template>
{{ fenToYuan(formData.couponPrice!) }} 元
</ElDescriptionsItem>
<ElDescriptionsItem>
<template #label><span style="color: red">VIP 优惠: </span></template>
{{ fenToYuan(formData.vipPrice!) }} 元
</ElDescriptionsItem>
<ElDescriptionsItem>
<template #label><span style="color: red">活动优惠: </span></template>
{{ fenToYuan(formData.discountPrice!) }} 元
</ElDescriptionsItem>
<ElDescriptionsItem>
<template #label><span style="color: red">积分抵扣: </span></template>
{{ fenToYuan(formData.pointPrice!) }} 元
</ElDescriptionsItem>
<!-- 第三层 -->
<ElDescriptionsItem
v-for="item in 3"
:key="item"
label-class-name="no-colon"
/>
<ElDescriptionsItem label="应付金额: ">
{{ fenToYuan(formData.payPrice!) }} 元
</ElDescriptionsItem>
</ElDescriptions>
<!-- 物流信息 -->
<ElDescriptions :column="4" title="收货信息">
<ElDescriptionsItem label="配送方式: ">
<DictTag
:type="DICT_TYPE.TRADE_DELIVERY_TYPE"
:value="formData.deliveryType!"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="收货人: ">
{{ formData.receiverName }}
</ElDescriptionsItem>
<ElDescriptionsItem label="联系电话: ">
{{ formData.receiverMobile }}
</ElDescriptionsItem>
<!-- 快递配送 -->
<div v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type">
<ElDescriptionsItem
v-if="formData.receiverDetailAddress"
label="收货地址: "
>
{{ formData.receiverAreaName }} {{ formData.receiverDetailAddress }}
<el-link
v-clipboard:copy="
`${formData.receiverAreaName} ${formData.receiverDetailAddress}`
"
v-clipboard:success="clipboardSuccess"
icon="ep:document-copy"
type="primary"
/>
</ElDescriptionsItem>
<ElDescriptionsItem v-if="formData.logisticsId" label="物流公司: ">
{{
deliveryExpressList.find(
(item) => item.id === formData.logisticsId,
)?.name
}}
</ElDescriptionsItem>
<ElDescriptionsItem v-if="formData.logisticsId" label="运单号: ">
{{ formData.logisticsNo }}
</ElDescriptionsItem>
<ElDescriptionsItem v-if="formData.deliveryTime" label="发货时间: ">
{{ formatDate(formData.deliveryTime) }}
</ElDescriptionsItem>
<ElDescriptionsItem
v-for="item in 2"
:key="item"
label-class-name="no-colon"
/>
<ElDescriptionsItem
v-if="expressTrackList.length > 0"
label="物流详情: "
>
<ElTimeline>
<ElTimelineItem
v-for="(express, index) in expressTrackList"
:key="index"
:timestamp="formatDate(express.time)?.toString()"
>
{{ express.content }}
</ElTimelineItem>
</ElTimeline>
</ElDescriptionsItem>
</div>
<!-- 自提门店 -->
<div v-if="formData.deliveryType === DeliveryTypeEnum.PICK_UP.type">
<ElDescriptionsItem v-if="formData.pickUpStoreId" label="自提门店: ">
{{ pickUpStore?.name }}
</ElDescriptionsItem>
</div>
</ElDescriptions>
<!-- 订单日志 -->
<ElDescriptions title="订单操作日志">
<ElDescriptionsItem label-class-name="no-colon">
<ElTimeline>
<ElTimelineItem
v-for="(log, index) in formData.logs"
:key="index"
:timestamp="formatDate(log.createTime!)!.toString()"
placement="top"
>
<div class="el-timeline-right-content">
{{ log.content }}
</div>
<template #dot>
<span
:style="{ backgroundColor: getUserTypeColor(log.userType!) }"
class="dot-node-style"
>
{{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
</span>
</template>
</ElTimelineItem>
</ElTimeline>
</ElDescriptionsItem>
</ElDescriptions>
</ContentWrap>
<!-- 各种操作的弹窗 -->
<OrderDeliveryFormModal @success="getDetail" />
<OrderUpdateRemarkFormModal @success="getDetail" />
<OrderUpdateAddressFormModal @success="getDetail" />
<OrderUpdatePriceFormModal @success="getDetail" />
</Page>
</template>
<style lang="scss" scoped>
:deep(.el-descriptions) {
&:not(:nth-child(1)) {
margin-top: 20px;
}
.el-descriptions__title {
display: flex;
align-items: center;
&::before {
display: inline-block;
width: 3px;
height: 20px;
margin-right: 10px;
content: '';
background-color: #409eff;
}
}
.el-descriptions-item__container {
margin: 0 10px;
.no-colon {
margin: 0;
&::after {
content: '';
}
}
}
}
// 时间线样式调整
:deep(.el-timeline) {
margin: 10px 0 0 160px;
.el-timeline-item__wrapper {
position: relative;
top: -20px;
.el-timeline-item__timestamp {
position: absolute !important;
top: 10px;
left: -150px;
}
}
}
/* 单独定义气泡样式，不使用嵌套 */
:deep(.el-timeline-right-content) {
position: relative;
display: flex;
align-items: center;
min-height: 30px;
padding: 10px;
margin-left: 10px;
background-color: #f5f7fa; /* 使用明确的颜色替代变量 */
border-radius: 4px;
}
:deep(.el-timeline-right-content)::before {
position: absolute;
top: 10px;
left: -16px;
content: '';
border-color: transparent #f5f7fa transparent transparent;
border-style: solid;
border-width: 8px;
}
.dot-node-style {
position: absolute;
left: -5px;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-size: 10px;
color: #fff;
border-radius: 50%;
}
</style>

131
apps/web-ele/src/views/mall/trade/order/modules/update-address-form.vue Normal file
View File

@ -0,0 +1,131 @@
<script lang="ts" setup>
import type { MallOrderApi } from '#/api/mall/trade/order';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import { updateOrderAddress } from '#/api/mall/trade/order';
import { getAreaTree } from '#/api/system/area';
import { $t } from '#/locales';
const emit = defineEmits(['success']);
const formData = ref<MallOrderApi.DeliveryRequest>();
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 120,
},
layout: 'horizontal',
schema: [
{
component: 'Input',
fieldName: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
// TODO @xingyu：发货默认选中第一个？
{
fieldName: 'receiverName',
label: '收件人',
component: 'Input',
componentProps: {
placeholder: '请输入收件人名称',
},
},
{
fieldName: 'receiverMobile',
label: '手机号',
component: 'Input',
componentProps: {
placeholder: '请输入收件人手机号',
},
},
{
fieldName: 'receiverAreaId',
label: '所在地',
component: 'ApiTreeSelect',
componentProps: {
api: () => getAreaTree(),
labelField: 'name',
valueField: 'id',
childrenField: 'children',
placeholder: '请选择收件人所在地',
treeDefaultExpandAll: true,
},
},
{
fieldName: 'receiverDetailAddress',
label: '详细地址',
component: 'Input',
componentProps: {
placeholder: '请输入收件人详细地址',
type: 'textarea',
rows: 3,
},
},
],
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as MallOrderApi.AddressRequest;
try {
await updateOrderAddress(data);
// 关闭并提示
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<MallOrderApi.Order>();
if (!data) {
return;
}
modalApi.lock();
try {
await formApi.setValues({
id: data.id,
receiverName: data.receiverName,
receiverMobile: data.receiverMobile,
receiverAreaId: data.receiverAreaId,
receiverDetailAddress: data.receiverDetailAddress,
});
// 设置到 values
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal class="w-1/3" title="发货">
<Form class="mx-4" />
</Modal>
</template>

134
apps/web-ele/src/views/mall/trade/order/modules/update-price-form.vue Normal file
View File

@ -0,0 +1,134 @@
<script lang="ts" setup>
import type { MallOrderApi } from '#/api/mall/trade/order';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { floatToFixed2 } from '@vben/utils';
import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import { updateOrderPrice } from '#/api/mall/trade/order';
import { $t } from '#/locales';
const emit = defineEmits(['success']);
const formData = ref<MallOrderApi.DeliveryRequest>();
const newPayPrice = ref<string>();
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 120,
},
layout: 'horizontal',
schema: [
{
component: 'Input',
fieldName: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
// TODO @xingyu：发货默认选中第一个？
{
fieldName: 'payPrice',
label: '应付金额(总)',
component: 'Input',
componentProps: {
placeholder: '请输入应付金额(总)',
disabled: true,
formatter: (value: string) => `${floatToFixed2(value)}元`,
},
},
{
fieldName: 'adjustPrice',
label: '订单调价',
component: 'InputNumber',
componentProps: {
class: 'w-100%',
placeholder: '请输入订单调价',
step: 0.1,
precision: 2,
onChange: async (value: number) => {
const { payPrice } = await formApi.getValues();
await formApi.setValues({
newPayPrice: (payPrice + value * 100).toFixed(2),
});
},
},
description: '订单调价。 正数，加价；负数，减价',
},
{
fieldName: 'newPayPrice',
label: '调价后',
component: 'Input',
componentProps: {
disabled: true,
formatter: (value: string) => `${floatToFixed2(value)}元`,
},
},
],
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as MallOrderApi.PriceRequest;
if (data.adjustPrice) {
data.adjustPrice = data.adjustPrice * 100;
}
try {
await updateOrderPrice(data);
// 关闭并提示
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<MallOrderApi.Order>();
if (!data) {
return;
}
modalApi.lock();
try {
newPayPrice.value = data.payPrice?.toString();
data.adjustPrice = data.adjustPrice ? data.adjustPrice / 100 : 0;
await formApi.setValues({
id: data.id,
payPrice: data.payPrice,
adjustPrice: data.adjustPrice,
newPayPrice: newPayPrice.value,
});
// 设置到 values
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal class="w-1/3" title="发货">
<Form class="mx-4" />
</Modal>
</template>

94
apps/web-ele/src/views/mall/trade/order/modules/update-remark-form.vue Normal file
View File

@ -0,0 +1,94 @@
<script lang="ts" setup>
import type { MallOrderApi } from '#/api/mall/trade/order';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import { updateOrderRemark } from '#/api/mall/trade/order';
import { $t } from '#/locales';
const emit = defineEmits(['success']);
const formData = ref<MallOrderApi.DeliveryRequest>();
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 120,
},
layout: 'horizontal',
schema: [
{
component: 'Input',
fieldName: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
// TODO @xingyu：发货默认选中第一个？
{
fieldName: 'remark',
label: '备注',
component: 'Input',
componentProps: {
type: 'textarea',
rows: 3,
},
},
],
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as MallOrderApi.RemarkRequest;
try {
await updateOrderRemark(data);
// 关闭并提示
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<MallOrderApi.Order>();
if (!data) {
return;
}
modalApi.lock();
try {
await formApi.setValues({ id: data.id, remark: data.remark });
// 设置到 values
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal class="w-1/3" title="发货">
<Form class="mx-4" />
</Modal>
</template>

19
apps/web-ele/src/views/member/group/index.vue
View File

@ -4,7 +4,7 @@ import type { MemberGroupApi } from '#/api/member/group';
import { Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteGroup, getGroupPage } from '#/api/member/group';
@ -35,17 +35,14 @@ function handleEdit(row: MemberGroupApi.Group) {
/** 删除分组 */
async function handleDelete(row: MemberGroupApi.Group) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该分组吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteGroup(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteGroup(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({

19
apps/web-ele/src/views/member/level/index.vue
View File

@ -4,7 +4,7 @@ import type { MemberLevelApi } from '#/api/member/level';
import { Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteLevel, getLevelList } from '#/api/member/level';
@ -35,17 +35,14 @@ function handleEdit(row: MemberLevelApi.Level) {
/** 删除等级 */
async function handleDelete(row: MemberLevelApi.Level) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该等级吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteLevel(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteLevel(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({

19
apps/web-ele/src/views/member/tag/index.vue
View File

@ -4,7 +4,7 @@ import type { MemberTagApi } from '#/api/member/tag';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteMemberTag, getMemberTagPage } from '#/api/member/tag';
@ -35,17 +35,14 @@ function handleEdit(row: MemberTagApi.Tag) {
/** 删除会员标签 */
async function handleDelete(row: MemberTagApi.Tag) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该会员标签吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteMemberTag(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteMemberTag(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({

22
apps/web-ele/src/views/member/user/data.ts
View File

@ -86,7 +86,9 @@ export function useFormSchema(): VbenFormSchema[] {
label: '所在地',
componentProps: {
api: () => getAreaTree(),
fieldNames: { label: 'name', value: 'id', children: 'children' },
labelField: 'name',
valueField: 'id',
childrenField: 'children',
},
},
{
@ -95,7 +97,8 @@ export function useFormSchema(): VbenFormSchema[] {
label: '用户标签',
componentProps: {
api: () => getSimpleTagList(),
fieldNames: { label: 'name', value: 'id' },
labelField: 'name',
valueField: 'id',
mode: 'multiple',
},
},
@ -105,7 +108,8 @@ export function useFormSchema(): VbenFormSchema[] {
label: '用户分组',
componentProps: {
api: () => getSimpleGroupList(),
fieldNames: { label: 'name', value: 'id' },
labelField: 'name',
valueField: 'id',
},
},
{
@ -151,7 +155,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'ApiSelect',
componentProps: {
api: () => getSimpleTagList(),
fieldNames: { label: 'name', value: 'id' },
labelField: 'name',
valueField: 'id',
mode: 'multiple',
},
},
@ -161,7 +166,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'ApiSelect',
componentProps: {
api: () => getSimpleLevelList(),
fieldNames: { label: 'name', value: 'id' },
labelField: 'name',
valueField: 'id',
},
},
{
@ -170,7 +176,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'ApiSelect',
componentProps: {
api: () => getSimpleGroupList(),
fieldNames: { label: 'name', value: 'id' },
labelField: 'name',
valueField: 'id',
},
},
];
@ -290,7 +297,8 @@ export function useLeavelFormSchema(): VbenFormSchema[] {
component: 'ApiSelect',
componentProps: {
api: () => getSimpleLevelList(),
fieldNames: { label: 'name', value: 'id' },
labelField: 'name',
valueField: 'id',
},
},
{

19
apps/web-ele/src/views/pay/app/index.vue
View File

@ -4,7 +4,7 @@ import type { PayAppApi } from '#/api/pay/app/index';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { changeAppStatus, deleteApp, getAppPage } from '#/api/pay/app/index';
@ -39,17 +39,14 @@ function handleEdit(row: Required<PayAppApi.App>) {
}
async function handleDelete(row: Required<PayAppApi.App>) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该应用吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteApp(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteApp(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 更新状态 */

19
apps/web-ele/src/views/pay/wallet/rechargePackage/index.vue
View File

@ -3,7 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -37,17 +37,14 @@ function handleEdit(row: any) {
/** 删除套餐 */
async function handleDelete(row: any) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该充值套餐吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deletePackage(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deletePackage(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({

21
apps/web-ele/src/views/system/dept/index.vue
View File

@ -11,7 +11,7 @@ import { onMounted, ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { Plus } from '@vben/icons';
import { ElButton, ElLoading, ElMessage } from 'element-plus';
import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteDept, getDeptList } from '#/api/system/dept';
@ -62,19 +62,14 @@ function onEdit(row: SystemDeptApi.Dept) {
/** 删除部门 */
async function onDelete(row: SystemDeptApi.Dept) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该部门吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteDept(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} catch {
// 异常处理
} finally {
loadingInstance.close();
}
await deleteDept(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 表格操作按钮的回调函数 */

36
apps/web-ele/src/views/system/dict/modules/data-grid.vue
View File

@ -10,7 +10,7 @@ import { ref, watch } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -59,32 +59,26 @@ function onEdit(row: any) {
/** 删除字典数据 */
async function onDelete(row: any) {
const loadingInstance = ElLoading.service({
text: $t('common.processing'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该字典数据吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteDictData(row.id);
ElMessage.success($t('common.operationSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteDictData(row.id);
ElMessage.success($t('common.operationSuccess'));
onRefresh();
}
/** 批量删除字典数据 */
async function onDeleteBatch() {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该字典数据吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteDictDataList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteDictDataList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

36
apps/web-ele/src/views/system/dict/modules/type-grid.vue
View File

@ -10,7 +10,7 @@ import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -54,32 +54,26 @@ function onEdit(row: any) {
/** 删除字典类型 */
async function onDelete(row: SystemDictTypeApi.DictType) {
const loadingInstance = ElLoading.service({
text: $t('common.processing'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该字典类型吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteDictType(row.id as number);
ElMessage.success($t('common.operationSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteDictType(row.id as number);
ElMessage.success($t('common.operationSuccess'));
onRefresh();
}
/** 批量删除字典类型 */
async function onDeleteBatch() {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该字典类型吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteDictTypeList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteDictTypeList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

36
apps/web-ele/src/views/system/mail/account/index.vue
View File

@ -10,7 +10,7 @@ import { ref } from 'vue';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { isEmpty } from '@vben/utils';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -45,32 +45,26 @@ function onEdit(row: SystemMailAccountApi.MailAccount) {
/** 删除邮箱账号 */
async function onDelete(row: SystemMailAccountApi.MailAccount) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.mail]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该邮箱账号吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteMailAccount(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.mail]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteMailAccount(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.mail]));
onRefresh();
}
/** 批量删除邮箱账号 */
async function onDeleteBatch() {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该邮箱账号吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteMailAccountList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteMailAccountList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

36
apps/web-ele/src/views/system/mail/template/index.vue
View File

@ -11,7 +11,7 @@ import { onMounted, ref } from 'vue';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { isEmpty } from '@vben/utils';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getSimpleMailAccountList } from '#/api/system/mail/account';
@ -65,32 +65,26 @@ function onSend(row: SystemMailTemplateApi.MailTemplate) {
/** 删除邮件模板 */
async function onDelete(row: SystemMailTemplateApi.MailTemplate) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该邮件模板吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteMailTemplate(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteMailTemplate(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 批量删除邮件模板 */
async function onDeleteBatch() {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该邮件模板吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteMailTemplateList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteMailTemplateList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

21
apps/web-ele/src/views/system/menu/index.vue
View File

@ -10,7 +10,7 @@ import { ref } from 'vue';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { IconifyIcon, Plus } from '@vben/icons';
import { ElButton, ElLoading, ElMessage } from 'element-plus';
import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteMenu, getMenuList } from '#/api/system/menu';
@ -47,19 +47,14 @@ function onEdit(row: SystemMenuApi.Menu) {
/** 删除菜单 */
async function onDelete(row: SystemMenuApi.Menu) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该菜单吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteMenu(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} catch {
// 异常处理
} finally {
loadingInstance.close();
}
await deleteMenu(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 表格操作按钮的回调函数 */

40
apps/web-ele/src/views/system/notice/index.vue
View File

@ -10,7 +10,7 @@ import { ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { isEmpty } from '@vben/utils';
import { ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -46,36 +46,26 @@ function onEdit(row: SystemNoticeApi.Notice) {
/** 删除公告 */
async function onDelete(row: SystemNoticeApi.Notice) {
const loadingInstance = ElMessage({
message: $t('ui.actionMessage.deleting', [row.title]),
type: 'info',
duration: 0,
await ElMessageBox.confirm('确定要删除该公告吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteNotice(row.id as number);
loadingInstance.close();
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteNotice(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
onRefresh();
}
/** 批量删除公告 */
async function onDeleteBatch() {
const loadingInstance = ElMessage({
message: $t('ui.actionMessage.deleting'),
type: 'info',
duration: 0,
await ElMessageBox.confirm('确定要删除该公告吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteNoticeList(checkedIds.value);
loadingInstance.close();
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteNoticeList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

36
apps/web-ele/src/views/system/oauth2/client/index.vue
View File

@ -10,7 +10,7 @@ import { ref } from 'vue';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { isEmpty } from '@vben/utils';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -45,32 +45,26 @@ function onEdit(row: SystemOAuth2ClientApi.OAuth2Client) {
/** 删除 OAuth2 客户端 */
async function onDelete(row: SystemOAuth2ClientApi.OAuth2Client) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该 OAuth2 客户端吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteOAuth2Client(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteOAuth2Client(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 批量删除 OAuth2 客户端 */
async function onDeleteBatch() {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该 OAuth2 客户端吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteOAuth2ClientList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteOAuth2ClientList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

21
apps/web-ele/src/views/system/oauth2/token/index.vue
View File

@ -7,7 +7,7 @@ import type { SystemOAuth2TokenApi } from '#/api/system/oauth2/token';
import { DocAlert, Page } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -25,19 +25,14 @@ function onRefresh() {
/** 删除 OAuth2 令牌 */
async function onDelete(row: SystemOAuth2TokenApi.OAuth2Token) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', ['令牌']),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该令牌吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteOAuth2Token(row.accessToken);
ElMessage.success($t('ui.actionMessage.operationSuccess'));
onRefresh();
} catch {
// 异常处理
} finally {
loadingInstance.close();
}
await deleteOAuth2Token(row.accessToken);
ElMessage.success($t('ui.actionMessage.operationSuccess'));
onRefresh();
}
/** 表格操作按钮的回调函数 */

2
apps/web-ele/src/views/system/operatelog/data.ts
View File

@ -18,7 +18,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'ApiSelect',
componentProps: {
api: getSimpleUserList,
fieldNames: {
props: {
label: 'nickname',
value: 'id',
},

36
apps/web-ele/src/views/system/post/index.vue
View File

@ -10,7 +10,7 @@ import { ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -52,32 +52,26 @@ function onEdit(row: SystemPostApi.Post) {
/** 删除岗位 */
async function onDelete(row: SystemPostApi.Post) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该岗位吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deletePost(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deletePost(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 批量删除岗位 */
async function onDeleteBatch() {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该岗位吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deletePostList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deletePostList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

36
apps/web-ele/src/views/system/role/index.vue
View File

@ -11,7 +11,7 @@ import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { ElButton, ElLoading, ElMessage } from 'element-plus';
import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -66,32 +66,26 @@ function onCreate() {
/** 删除角色 */
async function onDelete(row: SystemRoleApi.Role) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该角色吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteRole(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteRole(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 批量删除角色 */
async function onDeleteBatch() {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该角色吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteRoleList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteRoleList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

36
apps/web-ele/src/views/system/sms/channel/index.vue
View File

@ -10,7 +10,7 @@ import { ref } from 'vue';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -52,32 +52,26 @@ function onEdit(row: SystemSmsChannelApi.SmsChannel) {
/** 删除短信渠道 */
async function onDelete(row: SystemSmsChannelApi.SmsChannel) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.signature]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该短信渠道吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteSmsChannel(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.signature]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteSmsChannel(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.signature]));
onRefresh();
}
/** 批量删除短信渠道 */
async function onDeleteBatch() {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该短信渠道吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteSmsChannelList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteSmsChannelList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

36
apps/web-ele/src/views/system/sms/template/index.vue
View File

@ -10,7 +10,7 @@ import { ref } from 'vue';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -63,32 +63,26 @@ function onSend(row: SystemSmsTemplateApi.SmsTemplate) {
/** 删除短信模板 */
async function onDelete(row: SystemSmsTemplateApi.SmsTemplate) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该短信模板吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteSmsTemplate(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteSmsTemplate(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 批量删除短信模板 */
async function onDeleteBatch() {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该短信模板吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteSmsTemplateList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteSmsTemplateList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

36
apps/web-ele/src/views/system/social/client/index.vue
View File

@ -10,7 +10,7 @@ import { ref } from 'vue';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { isEmpty } from '@vben/utils';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -45,32 +45,26 @@ function onEdit(row: SystemSocialClientApi.SocialClient) {
/** 删除社交客户端 */
async function onDelete(row: SystemSocialClientApi.SocialClient) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该社交客户端吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteSocialClient(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteSocialClient(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 批量删除社交客户端 */
async function onDeleteBatch() {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该社交客户端吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteSocialClientList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteSocialClientList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

38
apps/web-ele/src/views/system/tenant/index.vue
View File

@ -11,7 +11,7 @@ import { onMounted, ref } from 'vue';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -64,34 +64,26 @@ function onEdit(row: SystemTenantApi.Tenant) {
/** 删除租户 */
async function onDelete(row: SystemTenantApi.Tenant) {
const loading = ElLoading.service({
lock: true,
text: $t('ui.actionMessage.deleting', [row.name]),
background: 'rgba(0, 0, 0, 0.7)',
await ElMessageBox.confirm('确定要删除该租户吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteTenant(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loading.close();
}
await deleteTenant(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 批量删除租户 */
async function onDeleteBatch() {
const loading = ElLoading.service({
lock: true,
text: $t('ui.actionMessage.deleting'),
background: 'rgba(0, 0, 0, 0.7)',
await ElMessageBox.confirm('确定要删除该租户吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteTenantList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loading.close();
}
await deleteTenantList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

40
apps/web-ele/src/views/system/tenantPackage/index.vue
View File

@ -10,7 +10,7 @@ import { ref } from 'vue';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { isEmpty } from '@vben/utils';
import { ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -45,36 +45,26 @@ function onEdit(row: SystemTenantPackageApi.TenantPackage) {
/** 删除租户套餐 */
async function onDelete(row: SystemTenantPackageApi.TenantPackage) {
const loadingInstance = ElMessage({
message: $t('ui.actionMessage.deleting', [row.name]),
type: 'info',
duration: 0,
await ElMessageBox.confirm('确定要删除该租户套餐吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteTenantPackage(row.id as number);
loadingInstance.close();
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteTenantPackage(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
}
/** 批量删除租户套餐 */
async function onDeleteBatch() {
const loadingInstance = ElMessage({
message: $t('ui.actionMessage.deleting'),
type: 'info',
duration: 0,
await ElMessageBox.confirm('确定要删除该租户套餐吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteTenantPackageList(checkedIds.value);
loadingInstance.close();
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteTenantPackageList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

36
apps/web-ele/src/views/system/user/index.vue
View File

@ -8,7 +8,7 @@ import { ref } from 'vue';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { ElLoading, ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -83,32 +83,26 @@ function onEdit(row: SystemUserApi.User) {
/** 删除用户 */
async function onDelete(row: SystemUserApi.User) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.username]),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该用户吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteUser(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.username]));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteUser(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.username]));
onRefresh();
}
/** 批量删除用户 */
async function onDeleteBatch() {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
fullscreen: true,
await ElMessageBox.confirm('确定要删除该用户吗？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await deleteUserList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
await deleteUserList(checkedIds.value);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
}
const checkedIds = ref<number[]>([]);

9
packages/@core/base/shared/src/utils/date.ts
View File

@ -26,6 +26,15 @@ export function formatDateTime(time: Date | number | string | undefined) {
return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
}
export function formatDate2(date: Date, format?: string): string {
// 日期不存在，则返回空
if (!date) {
return '';
}
// 日期存在，则进行格式化
return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : '';
}
export function isDate(value: any): value is Date {
return value instanceof Date;
}

15
packages/@core/base/shared/src/utils/index.ts
View File

@ -22,3 +22,18 @@ export { default as cloneDeep } from 'lodash.clonedeep';
export { default as get } from 'lodash.get';
export { default as isEqual } from 'lodash.isequal';
export { default as set } from 'lodash.set';
/**
* 构建排序字段
* @param prop 字段名称
* @param order 顺序
*/
export const buildSortingField = ({
prop,
order,
}: {
order: 'ascending' | 'descending';
prop: string;
}) => {
return { field: prop, order: order === 'ascending' ? 'asc' : 'desc' };
};