feat：【mall 商城】售后退款（100% ele）
This commit is contained in:
YunaiV
@@ -77,21 +77,9 @@ export namespace MallAfterSaleApi {
|
||||
receiveTime?: Date;
|
||||
/** 收货备注 */
|
||||
receiveReason?: string;
|
||||
/** 订单 */
|
||||
order?: MallOrderApi.Order;
|
||||
/** 订单操作日志 */
|
||||
logs?: MallOrderApi.OrderLog[];
|
||||
/** 订单项 */
|
||||
orderItem?: MallOrderApi.OrderItem;
|
||||
/** 用户信息 */
|
||||
user?: {
|
||||
/** 用户头像 */
|
||||
avatar?: string;
|
||||
/** 用户编号 */
|
||||
id?: null | number;
|
||||
/** 用户昵称 */
|
||||
nickname?: string;
|
||||
};
|
||||
order?: MallOrderApi.Order; // 关联订单
|
||||
orderItem?: MallOrderApi.OrderItem; // 关联订单项
|
||||
logs?: any[]; // 关联售后日志
|
||||
}
|
||||
|
||||
/** 拒绝售后请求 */
|
||||
@@ -119,26 +107,26 @@ export function getAfterSale(id: number) {
|
||||
}
|
||||
|
||||
/** 同意售后 */
|
||||
export function agree(id: number) {
|
||||
export function agreeAfterSale(id: number) {
|
||||
return requestClient.put(`/trade/after-sale/agree?id=${id}`);
|
||||
}
|
||||
|
||||
/** 拒绝售后 */
|
||||
export function disagree(data: MallAfterSaleApi.DisagreeRequest) {
|
||||
export function disagreeAfterSale(data: MallAfterSaleApi.DisagreeRequest) {
|
||||
return requestClient.put('/trade/after-sale/disagree', data);
|
||||
}
|
||||
|
||||
/** 确认收货 */
|
||||
export function receive(id: number) {
|
||||
export function receiveAfterSale(id: number) {
|
||||
return requestClient.put(`/trade/after-sale/receive?id=${id}`);
|
||||
}
|
||||
|
||||
/** 拒绝收货 */
|
||||
export function refuse(id: number) {
|
||||
export function refuseAfterSale(id: number) {
|
||||
return requestClient.put(`/trade/after-sale/refuse?id=${id}`);
|
||||
}
|
||||
|
||||
/** 确认退款 */
|
||||
export function refund(id: number) {
|
||||
export function refundAfterSale(id: number) {
|
||||
return requestClient.put(`/trade/after-sale/refund?id=${id}`);
|
||||
}
|
||||
|
||||
@@ -76,7 +76,7 @@ const routes: RouteRecordRaw[] = [
|
||||
activePath: '/mall/trade/after-sale',
|
||||
},
|
||||
component: () =>
|
||||
import('#/views/mall/trade/afterSale/modules/detail.vue'),
|
||||
import('#/views/mall/trade/afterSale/detail/index.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -4,8 +4,33 @@ import type { VxeGridPropTypes } from '#/adapter/vxe-table';
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
import { getDictOptions } from '@vben/hooks';
|
||||
|
||||
import { z } from '#/adapter/form';
|
||||
import { getRangePickerDefaultProps } from '#/utils';
|
||||
|
||||
/** 拒绝售后表单的 schema 配置 */
|
||||
export function useDisagreeFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'id',
|
||||
dependencies: {
|
||||
triggerFields: [''],
|
||||
show: () => false,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Textarea',
|
||||
fieldName: 'reason',
|
||||
label: '拒绝原因',
|
||||
componentProps: {
|
||||
placeholder: '请输入拒绝原因',
|
||||
rows: 4,
|
||||
},
|
||||
rules: z.string().min(2, { message: '拒绝原因不能少于 2 个字符' }),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
@@ -13,16 +38,25 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
fieldName: 'spuName',
|
||||
label: '商品名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入商品名称',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'no',
|
||||
label: '退款编号',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入退款编号',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'orderNo',
|
||||
label: '订单编号',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入订单编号',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'status',
|
||||
@@ -30,14 +64,18 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS, 'number'),
|
||||
placeholder: '请选择售后状态',
|
||||
clearable: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'status',
|
||||
fieldName: 'way',
|
||||
label: '售后方式',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_WAY, 'number'),
|
||||
placeholder: '请选择售后方式',
|
||||
clearable: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -46,6 +84,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_TYPE, 'number'),
|
||||
placeholder: '请选择售后类型',
|
||||
clearable: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -67,55 +107,44 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
|
||||
field: 'no',
|
||||
title: '退款编号',
|
||||
fixed: 'left',
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
field: 'orderNo',
|
||||
title: '订单编号',
|
||||
fixed: 'left',
|
||||
minWidth: 200,
|
||||
slots: { default: 'orderNo' },
|
||||
},
|
||||
{
|
||||
field: 'spuName',
|
||||
title: '商品名称',
|
||||
align: 'left',
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
field: 'picUrl',
|
||||
title: '商品图片',
|
||||
cellRender: {
|
||||
name: 'CellImage',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'properties',
|
||||
title: '商品属性',
|
||||
minWidth: 200,
|
||||
formatter: ({ cellValue }) => {
|
||||
return cellValue && cellValue.length > 0
|
||||
? cellValue
|
||||
.map((item: any) => `${item.propertyName} : ${item.valueName}`)
|
||||
.join('\n')
|
||||
: '-';
|
||||
},
|
||||
field: 'productInfo',
|
||||
title: '商品信息',
|
||||
minWidth: 600,
|
||||
slots: { default: 'productInfo' },
|
||||
},
|
||||
{
|
||||
field: 'refundPrice',
|
||||
title: '订单金额',
|
||||
formatter: 'formatFenToYuanAmount',
|
||||
width: 120,
|
||||
formatter: 'formatAmount2',
|
||||
},
|
||||
{
|
||||
field: 'user.nickname',
|
||||
title: '买家',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '申请时间',
|
||||
width: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
field: 'content',
|
||||
field: 'status',
|
||||
title: '售后状态',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
cellRender: {
|
||||
name: 'CellDictTag',
|
||||
props: {
|
||||
@@ -126,6 +155,8 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
|
||||
{
|
||||
field: 'way',
|
||||
title: '售后方式',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
cellRender: {
|
||||
name: 'CellDictTag',
|
||||
props: {
|
||||
@@ -135,8 +166,9 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 80,
|
||||
width: 160,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
|
||||
224
apps/web-ele/src/views/mall/trade/afterSale/detail/data.ts
Normal file
224
apps/web-ele/src/views/mall/trade/afterSale/detail/data.ts
Normal file
@@ -0,0 +1,224 @@
|
||||
import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
|
||||
import type { DescriptionItemSchema } from '#/components/description';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
import { fenToYuan, formatDate } from '@vben/utils';
|
||||
|
||||
import { ElImage } from 'element-plus';
|
||||
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
|
||||
/** 订单信息 schema */
|
||||
export function useOrderInfoSchema(): DescriptionItemSchema[] {
|
||||
return [
|
||||
{
|
||||
field: 'orderNo',
|
||||
label: '订单号',
|
||||
},
|
||||
{
|
||||
field: 'order.deliveryType',
|
||||
label: '配送方式',
|
||||
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.TRADE_DELIVERY_TYPE,
|
||||
value: data?.order?.deliveryType,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'order.type',
|
||||
label: '订单类型',
|
||||
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.TRADE_ORDER_TYPE,
|
||||
value: data?.order?.type,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'order.receiverName',
|
||||
label: '收货人',
|
||||
},
|
||||
{
|
||||
field: 'order.userRemark',
|
||||
label: '买家留言',
|
||||
},
|
||||
{
|
||||
field: 'order.terminal',
|
||||
label: '订单来源',
|
||||
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.TERMINAL,
|
||||
value: data?.order?.terminal,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'order.receiverMobile',
|
||||
label: '联系电话',
|
||||
},
|
||||
{
|
||||
field: 'order.remark',
|
||||
label: '商家备注',
|
||||
},
|
||||
{
|
||||
field: 'order.payOrderId',
|
||||
label: '支付单号',
|
||||
},
|
||||
{
|
||||
field: 'order.payChannelCode',
|
||||
label: '付款方式',
|
||||
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.PAY_CHANNEL_CODE,
|
||||
value: data?.order?.payChannelCode,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'user.nickname',
|
||||
label: '买家',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 售后信息 schema */
|
||||
export function useAfterSaleInfoSchema(): DescriptionItemSchema[] {
|
||||
return [
|
||||
{
|
||||
field: 'no',
|
||||
label: '退款编号',
|
||||
},
|
||||
{
|
||||
field: 'auditTime',
|
||||
label: '申请时间',
|
||||
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||
formatDate(data?.auditTime) as string,
|
||||
},
|
||||
{
|
||||
field: 'type',
|
||||
label: '售后类型',
|
||||
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.TRADE_AFTER_SALE_TYPE,
|
||||
value: data?.type,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'way',
|
||||
label: '售后方式',
|
||||
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.TRADE_AFTER_SALE_WAY,
|
||||
value: data?.way,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'refundPrice',
|
||||
label: '退款金额',
|
||||
content: (data: MallAfterSaleApi.AfterSale) =>
|
||||
fenToYuan(data?.refundPrice ?? 0),
|
||||
},
|
||||
{
|
||||
field: 'applyReason',
|
||||
label: '退款原因',
|
||||
},
|
||||
{
|
||||
field: 'applyDescription',
|
||||
label: '补充描述',
|
||||
},
|
||||
{
|
||||
field: 'applyPicUrls',
|
||||
label: '凭证图片',
|
||||
content: (data) => {
|
||||
const images = data?.applyPicUrls || [];
|
||||
return h(
|
||||
'div',
|
||||
{ class: 'flex gap-10px' },
|
||||
images.map((url: string, index: number) =>
|
||||
h(ElImage, {
|
||||
key: index,
|
||||
src: url,
|
||||
width: 60,
|
||||
height: 60,
|
||||
}),
|
||||
),
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 退款状态 schema */
|
||||
export function useRefundStatusSchema(): DescriptionItemSchema[] {
|
||||
return [
|
||||
{
|
||||
field: 'status',
|
||||
label: '退款状态',
|
||||
content: (data) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
|
||||
value: data?.status,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'reminder',
|
||||
label: '提醒',
|
||||
content: () =>
|
||||
h('div', { class: 'text-red-500 mb-10px' }, [
|
||||
h('div', '如果未发货，请点击同意退款给买家。'),
|
||||
h('div', '如果实际已发货，请主动与买家联系。'),
|
||||
h('div', '如果订单整体退款后，优惠券和余额会退还给买家.'),
|
||||
]),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 商品信息 columns */
|
||||
export function useProductColumns() {
|
||||
return [
|
||||
{
|
||||
field: 'spuName',
|
||||
title: '商品信息',
|
||||
minWidth: 300,
|
||||
slots: { default: 'spuName' },
|
||||
},
|
||||
{
|
||||
field: 'price',
|
||||
title: '商品原价',
|
||||
minWidth: 150,
|
||||
formatter: 'formatFenToYuanAmount',
|
||||
},
|
||||
{
|
||||
field: 'count',
|
||||
title: '数量',
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
field: 'payPrice',
|
||||
title: '合计',
|
||||
minWidth: 150,
|
||||
formatter: 'formatFenToYuanAmount',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 操作日志 columns */
|
||||
export function useOperateLogSchema() {
|
||||
return [
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '操作时间',
|
||||
width: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
field: 'userType',
|
||||
title: '操作人',
|
||||
width: 100,
|
||||
slots: { default: 'userType' },
|
||||
},
|
||||
{
|
||||
field: 'content',
|
||||
title: '操作内容',
|
||||
},
|
||||
];
|
||||
}
|
||||
316
apps/web-ele/src/views/mall/trade/afterSale/detail/index.vue
Normal file
316
apps/web-ele/src/views/mall/trade/afterSale/detail/index.vue
Normal file
@@ -0,0 +1,316 @@
|
||||
<script setup lang="ts">
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
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 { confirm, Page, useVbenModal } from '@vben/common-ui';
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
import { useTabs } from '@vben/hooks';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { ElCard, ElLoading, ElMessage, ElTag } from 'element-plus';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import {
|
||||
agreeAfterSale,
|
||||
getAfterSale,
|
||||
receiveAfterSale,
|
||||
refundAfterSale,
|
||||
refuseAfterSale,
|
||||
} from '#/api/mall/trade/afterSale';
|
||||
import { useDescription } from '#/components/description';
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
import { TableAction } from '#/components/table-action';
|
||||
|
||||
import DisagreeForm from '../modules/disagree-form.vue';
|
||||
import {
|
||||
useAfterSaleInfoSchema,
|
||||
useOperateLogSchema,
|
||||
useOrderInfoSchema,
|
||||
useProductColumns,
|
||||
useRefundStatusSchema,
|
||||
} from './data';
|
||||
|
||||
defineOptions({ name: 'TradeAfterSaleDetail' });
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const tabs = useTabs();
|
||||
|
||||
const loading = ref(false);
|
||||
const afterSaleId = ref(0);
|
||||
const afterSale = ref<MallAfterSaleApi.AfterSale>({
|
||||
order: {},
|
||||
orderItem: {},
|
||||
logs: [],
|
||||
});
|
||||
|
||||
const [OrderDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '订单信息',
|
||||
border: false,
|
||||
column: 3,
|
||||
direction: 'horizontal',
|
||||
labelWidth: 140,
|
||||
extra: '',
|
||||
},
|
||||
schema: useOrderInfoSchema(),
|
||||
});
|
||||
|
||||
const [AfterSaleDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '售后信息',
|
||||
border: false,
|
||||
column: 3,
|
||||
direction: 'horizontal',
|
||||
labelWidth: 140,
|
||||
extra: '',
|
||||
},
|
||||
schema: useAfterSaleInfoSchema(),
|
||||
});
|
||||
|
||||
const [RefundStatusDescriptions] = useDescription({
|
||||
componentProps: {
|
||||
title: '退款状态',
|
||||
border: false,
|
||||
column: 1,
|
||||
direction: 'horizontal',
|
||||
labelWidth: 140,
|
||||
extra: '',
|
||||
},
|
||||
schema: useRefundStatusSchema(),
|
||||
});
|
||||
|
||||
const [ProductGrid, productGridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
cellConfig: {
|
||||
height: 60,
|
||||
},
|
||||
columns: useProductColumns(),
|
||||
data: [],
|
||||
height: 'auto',
|
||||
border: true,
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<MallOrderApi.OrderItem>,
|
||||
});
|
||||
|
||||
const [OperateLogGrid, operateLogGridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: useOperateLogSchema(),
|
||||
data: [],
|
||||
border: true,
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions,
|
||||
});
|
||||
|
||||
const [DisagreeModal, disagreeModalApi] = useVbenModal({
|
||||
connectedComponent: DisagreeForm,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/** 获得详情 */
|
||||
async function getDetail() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getAfterSale(afterSaleId.value);
|
||||
if (res === null) {
|
||||
ElMessage.error('售后订单不存在');
|
||||
handleBack();
|
||||
return;
|
||||
}
|
||||
afterSale.value = res;
|
||||
productGridApi.setGridOptions({ data: [afterSale.value.orderItem] });
|
||||
operateLogGridApi.setGridOptions({
|
||||
data: afterSale.value.logs || [],
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 同意售后 */
|
||||
async function handleAgree() {
|
||||
await confirm('是否同意售后？');
|
||||
const loadingInstance = ElLoading.service({
|
||||
text: '正在处理中...',
|
||||
});
|
||||
try {
|
||||
await agreeAfterSale(afterSale.value.id!);
|
||||
ElMessage.success($t('ui.actionMessage.operationSuccess'));
|
||||
await getDetail();
|
||||
} finally {
|
||||
loadingInstance.close();
|
||||
}
|
||||
}
|
||||
|
||||
/** 拒绝售后 */
|
||||
function handleDisagree() {
|
||||
disagreeModalApi.setData({ afterSale: afterSale.value }).open();
|
||||
}
|
||||
|
||||
/** 确认收货 */
|
||||
async function handleReceive() {
|
||||
await confirm('是否确认收货？');
|
||||
const loadingInstance = ElLoading.service({
|
||||
text: '正在处理中...',
|
||||
});
|
||||
try {
|
||||
await receiveAfterSale(afterSale.value.id!);
|
||||
ElMessage.success($t('ui.actionMessage.operationSuccess'));
|
||||
await getDetail();
|
||||
} finally {
|
||||
loadingInstance.close();
|
||||
}
|
||||
}
|
||||
|
||||
/** 拒绝收货 */
|
||||
async function handleRefuse() {
|
||||
await confirm('是否拒绝收货？');
|
||||
const loadingInstance = ElLoading.service({
|
||||
text: '正在处理中...',
|
||||
});
|
||||
try {
|
||||
await refuseAfterSale(afterSale.value.id!);
|
||||
ElMessage.success($t('ui.actionMessage.operationSuccess'));
|
||||
await getDetail();
|
||||
} finally {
|
||||
loadingInstance.close();
|
||||
}
|
||||
}
|
||||
|
||||
/** 确认退款 */
|
||||
async function handleRefund() {
|
||||
await confirm('是否确认退款？');
|
||||
const loadingInstance = ElLoading.service({
|
||||
text: '正在处理中...',
|
||||
});
|
||||
try {
|
||||
await refundAfterSale(afterSale.value.id!);
|
||||
ElMessage.success($t('ui.actionMessage.operationSuccess'));
|
||||
await getDetail();
|
||||
} finally {
|
||||
loadingInstance.close();
|
||||
}
|
||||
}
|
||||
|
||||
/** 返回列表页 */
|
||||
function handleBack() {
|
||||
tabs.closeCurrentTab();
|
||||
router.push('/mall/trade/afterSale');
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
afterSaleId.value = Number(route.params.id);
|
||||
getDetail();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height :title="afterSale.no" :loading="loading">
|
||||
<template #extra>
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '返回',
|
||||
type: 'default',
|
||||
icon: 'lucide:arrow-left',
|
||||
onClick: handleBack,
|
||||
},
|
||||
{
|
||||
label: '同意售后',
|
||||
type: 'primary',
|
||||
onClick: handleAgree,
|
||||
ifShow: afterSale.status === 10,
|
||||
},
|
||||
{
|
||||
label: '拒绝售后',
|
||||
type: 'danger',
|
||||
link: true,
|
||||
onClick: handleDisagree,
|
||||
ifShow: afterSale.status === 10,
|
||||
},
|
||||
{
|
||||
label: '确认收货',
|
||||
type: 'primary',
|
||||
onClick: handleReceive,
|
||||
ifShow: afterSale.status === 30,
|
||||
},
|
||||
{
|
||||
label: '拒绝收货',
|
||||
type: 'danger',
|
||||
link: true,
|
||||
onClick: handleRefuse,
|
||||
ifShow: afterSale.status === 30,
|
||||
},
|
||||
{
|
||||
label: '确认退款',
|
||||
type: 'primary',
|
||||
onClick: handleRefund,
|
||||
ifShow: afterSale.status === 40,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 拒绝售后弹窗 -->
|
||||
<DisagreeModal @success="getDetail" />
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<ElCard class="mb-4">
|
||||
<OrderDescriptions :data="afterSale" />
|
||||
</ElCard>
|
||||
<!-- 售后信息 -->
|
||||
<ElCard class="mb-4">
|
||||
<AfterSaleDescriptions :data="afterSale" />
|
||||
</ElCard>
|
||||
<!-- 退款状态 -->
|
||||
<ElCard class="mb-4">
|
||||
<RefundStatusDescriptions :data="afterSale" />
|
||||
</ElCard>
|
||||
<!-- 商品信息 -->
|
||||
<div class="mb-4">
|
||||
<ProductGrid table-title="商品信息">
|
||||
<template #spuName="{ row }">
|
||||
<div class="flex flex-1 flex-col items-start gap-1 text-left">
|
||||
<span class="text-sm">{{ row.spuName }}</span>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<ElTag
|
||||
v-for="property in row.properties"
|
||||
:key="property.propertyId!"
|
||||
size="small"
|
||||
type="info"
|
||||
>
|
||||
{{ property.propertyName }}: {{ property.valueName }}
|
||||
</ElTag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ProductGrid>
|
||||
</div>
|
||||
<!-- 操作日志 -->
|
||||
<div>
|
||||
<OperateLogGrid table-title="售后日志">
|
||||
<template #userType="{ row }">
|
||||
<ElTag v-if="row.userId === 0" type="info">系统</ElTag>
|
||||
<DictTag v-else :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
|
||||
</template>
|
||||
</OperateLogGrid>
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
@@ -9,7 +9,7 @@ import { DocAlert, Page } from '@vben/common-ui';
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
import { getDictOptions } from '@vben/hooks';
|
||||
|
||||
import { ElButton, ElTabs } from 'element-plus';
|
||||
import { ElButton, ElImage, ElTabs, ElTag } from 'element-plus';
|
||||
|
||||
import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getAfterSalePage } from '#/api/mall/trade/afterSale';
|
||||
@@ -18,23 +18,28 @@ import { useGridColumns, useGridFormSchema } from './data';
|
||||
|
||||
const { push } = useRouter();
|
||||
|
||||
const status = ref('0');
|
||||
const statusTabs = ref([
|
||||
{
|
||||
label: '全部',
|
||||
value: '0',
|
||||
},
|
||||
]);
|
||||
const statusTab = ref(statusTabs.value[0]!.value);
|
||||
|
||||
/** 处理退款 */
|
||||
function openAfterSaleDetail(row: MallAfterSaleApi.AfterSale) {
|
||||
function handleOpenAfterSaleDetail(row: MallAfterSaleApi.AfterSale) {
|
||||
push({ name: 'TradeAfterSaleDetail', params: { id: row.id } });
|
||||
}
|
||||
|
||||
// TODO @xingyu：缺详情页
|
||||
/** 查看订单详情 */
|
||||
function openOrderDetail(row: MallAfterSaleApi.AfterSale) {
|
||||
push({ name: 'TradeOrderDetail', params: { id: row.id } });
|
||||
function handleOpenOrderDetail(row: MallAfterSaleApi.AfterSale) {
|
||||
push({ name: 'TradeOrderDetail', params: { id: row.orderId } });
|
||||
}
|
||||
|
||||
/** 切换售后状态 */
|
||||
function handleChangeStatus(key: number | string) {
|
||||
statusTab.value = key.toString();
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
@@ -42,6 +47,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
cellConfig: {
|
||||
height: 60,
|
||||
},
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
@@ -51,7 +59,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
||||
return await getAfterSalePage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
status: status.value === '0' ? undefined : status.value,
|
||||
status:
|
||||
statusTab.value === '0' ? undefined : Number(statusTab.value),
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
@@ -59,6 +68,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
isHover: true,
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
@@ -67,10 +77,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
||||
} as VxeTableGridOptions<MallAfterSaleApi.AfterSale>,
|
||||
});
|
||||
|
||||
function onChangeStatus(key: number | string) {
|
||||
status.value = key.toString();
|
||||
gridApi.query();
|
||||
}
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
for (const dict of getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)) {
|
||||
statusTabs.value.push({
|
||||
@@ -85,25 +92,50 @@ onMounted(() => {
|
||||
<Page auto-content-height>
|
||||
<template #doc>
|
||||
<DocAlert
|
||||
title="【交易】交易订单"
|
||||
url="https://doc.iocoder.cn/mall/trade-order/"
|
||||
title="【交易】售后退款"
|
||||
url="https://doc.iocoder.cn/mall/trade-aftersale/"
|
||||
/>
|
||||
</template>
|
||||
<Grid table-title="退款列表">
|
||||
|
||||
<Grid>
|
||||
<template #top>
|
||||
<ElTabs class="border-none" @change="onChangeStatus">
|
||||
<ElTabs v-model="statusTab" class="-mt-11" @tab-change="handleChangeStatus">
|
||||
<ElTabs.TabPane
|
||||
v-for="tab in statusTabs"
|
||||
:key="tab.value"
|
||||
:tab="tab.label"
|
||||
:label="tab.label"
|
||||
:name="tab.value"
|
||||
/>
|
||||
</ElTabs>
|
||||
</template>
|
||||
<template #orderNo="{ row }">
|
||||
<ElButton type="primary" link @click="openOrderDetail(row)">
|
||||
<ElButton type="primary" link @click="handleOpenOrderDetail(row)">
|
||||
{{ row.orderNo }}
|
||||
</ElButton>
|
||||
</template>
|
||||
<template #productInfo="{ row }">
|
||||
<div class="flex items-start gap-2 text-left">
|
||||
<ElImage
|
||||
v-if="row.picUrl"
|
||||
:src="row.picUrl"
|
||||
style="width: 40px; height: 40px"
|
||||
:preview-src-list="[row.picUrl]"
|
||||
/>
|
||||
<div class="flex flex-1 flex-col gap-1">
|
||||
<span class="text-sm">{{ row.spuName }}</span>
|
||||
<div class="mt-1 flex flex-wrap gap-1">
|
||||
<ElTag
|
||||
v-for="property in row.properties"
|
||||
:key="property.propertyId!"
|
||||
size="small"
|
||||
type="info"
|
||||
>
|
||||
{{ property.propertyName }}: {{ property.valueName }}
|
||||
</ElTag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
@@ -111,7 +143,7 @@ onMounted(() => {
|
||||
label: '处理退款',
|
||||
type: 'primary',
|
||||
link: true,
|
||||
onClick: openAfterSaleDetail.bind(null, row),
|
||||
onClick: handleOpenAfterSaleDetail.bind(null, row),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
@@ -119,3 +151,8 @@ onMounted(() => {
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
<style scoped>
|
||||
:deep(.vxe-toolbar div) {
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,433 +0,0 @@
|
||||
<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 { confirm, ContentWrap, Page } from '@vben/common-ui';
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
import { getDictLabel, getDictObj } from '@vben/hooks';
|
||||
import { $t } from '@vben/locales';
|
||||
import { fenToYuan, formatDate } from '@vben/utils';
|
||||
|
||||
import {
|
||||
ElDescriptions,
|
||||
ElDescriptionsItem,
|
||||
ElImage,
|
||||
ElMessage,
|
||||
ElTimeline,
|
||||
ElTimelineItem,
|
||||
} from 'element-plus';
|
||||
|
||||
import * as AfterSaleApi from '#/api/mall/trade/afterSale/index';
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
|
||||
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 confirm('是否同意售后？');
|
||||
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 confirm('是否确认收货？');
|
||||
await AfterSaleApi.receive(formData.value.id!);
|
||||
// 提示成功
|
||||
ElMessage.success($t('page.common.success'));
|
||||
await getDetail();
|
||||
};
|
||||
|
||||
/** 拒绝收货 */
|
||||
const refuse = async () => {
|
||||
// 二次确认
|
||||
await confirm('是否拒绝收货？');
|
||||
await AfterSaleApi.refuse(formData.value.id!);
|
||||
// 提示成功
|
||||
ElMessage.success($t('page.common.success'));
|
||||
await getDetail();
|
||||
};
|
||||
|
||||
/** 确认退款 */
|
||||
const refund = async () => {
|
||||
// 二次确认
|
||||
await confirm('是否确认退款？');
|
||||
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>
|
||||
@@ -1,20 +1,20 @@
|
||||
<script lang="ts" setup>
|
||||
import type { MallOrderApi } from '#/api/mall/trade/order';
|
||||
<script setup lang="ts">
|
||||
import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
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';
|
||||
import * as AfterSaleApi from '#/api/mall/trade/afterSale/index';
|
||||
|
||||
import { useDisagreeFormSchema } from '../data';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
const formData = ref<MallOrderApi.DeliveryRequest>();
|
||||
const formData = ref<MallAfterSaleApi.AfterSale>();
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
@@ -22,56 +22,10 @@ const [Form, formApi] = useVbenForm({
|
||||
class: 'w-full',
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
labelWidth: 120,
|
||||
labelWidth: 80,
|
||||
},
|
||||
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',
|
||||
},
|
||||
},
|
||||
],
|
||||
schema: useDisagreeFormSchema(),
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
@@ -83,14 +37,10 @@ const [Modal, modalApi] = useVbenModal({
|
||||
}
|
||||
modalApi.lock();
|
||||
// 提交表单
|
||||
const data = (await formApi.getValues()) as MallOrderApi.DeliveryRequest;
|
||||
if (data.expressType === 'none') {
|
||||
// 无需发货的情况
|
||||
data.logisticsId = 0;
|
||||
data.logisticsNo = '';
|
||||
}
|
||||
try {
|
||||
await deliveryOrder(data);
|
||||
const data =
|
||||
(await formApi.getValues()) as MallAfterSaleApi.DisagreeRequest;
|
||||
await AfterSaleApi.disagreeAfterSale(data);
|
||||
// 关闭并提示
|
||||
await modalApi.close();
|
||||
emit('success');
|
||||
@@ -105,16 +55,15 @@ const [Modal, modalApi] = useVbenModal({
|
||||
return;
|
||||
}
|
||||
// 加载数据
|
||||
const data = modalApi.getData<MallOrderApi.Order>();
|
||||
if (!data) {
|
||||
const data = modalApi.getData<{ afterSale: MallAfterSaleApi.AfterSale }>();
|
||||
if (!data?.afterSale) {
|
||||
return;
|
||||
}
|
||||
formData.value = data.afterSale;
|
||||
modalApi.lock();
|
||||
try {
|
||||
if (data.logisticsId === 0) {
|
||||
await formApi.setValues({ expressType: 'none' });
|
||||
}
|
||||
// 设置到 values
|
||||
// 设置表单数据
|
||||
await formApi.setValues(formData.value);
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
@@ -123,7 +72,7 @@ const [Modal, modalApi] = useVbenModal({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal class="w-1/3" title="发货">
|
||||
<Modal title="拒绝售后" class="w-1/3">
|
||||
<Form class="mx-4" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user