refactor(order): 重构订单管理界面以优化显示和交互体验
- 调整订单详情抽屉宽度从65%到70% - 移除订单详情中的顶部操作按钮区域 - 在订单详情中新增买家备注显示字段 - 将商品信息卡片从底部移至收货信息前 - 为表格组件添加缓存键以改善性能 - 合并订单状态标签显示包括支付、发货、开票和订单状态 - 优化表格列宽设置并调整操作列宽度 - 更新表格行双击事件以正确打开编辑窗口 - 注释掉商户管理界面中的组织部门字段显示
This commit is contained in:
@@ -232,12 +232,12 @@
|
||||
align: 'center',
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '所属部门',
|
||||
dataIndex: 'organizationName',
|
||||
key: 'organizationName',
|
||||
align: 'center'
|
||||
},
|
||||
// {
|
||||
// title: '所属部门',
|
||||
// dataIndex: 'organizationName',
|
||||
// key: 'organizationName',
|
||||
// align: 'center'
|
||||
// },
|
||||
{
|
||||
title: '角色',
|
||||
dataIndex: 'roles',
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<a-drawer
|
||||
:width="`65%`"
|
||||
width="70%"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:maxable="maxAble"
|
||||
@@ -11,110 +11,6 @@
|
||||
:footer="null"
|
||||
@ok="save"
|
||||
>
|
||||
<template #extra>
|
||||
<a-space>
|
||||
<!-- 未付款状态的操作 -->
|
||||
<template v-if="!form.payStatus">
|
||||
<!-- 取消订单：未完成且未付款 -->
|
||||
<a-button
|
||||
v-if="form.orderStatus === 0"
|
||||
@click="handleCancelOrder"
|
||||
danger
|
||||
:loading="loading"
|
||||
>
|
||||
取消订单
|
||||
</a-button>
|
||||
|
||||
<!-- 修改订单：未完成且未付款 -->
|
||||
<a-button
|
||||
v-if="form.orderStatus === 0"
|
||||
@click="handleEditOrder"
|
||||
:loading="loading"
|
||||
>
|
||||
修改订单
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<!-- 已付款状态的操作 -->
|
||||
<template v-if="form.payStatus">
|
||||
<!-- 发货按钮：已付款且未发货且未取消 -->
|
||||
<a-button
|
||||
v-if="
|
||||
form.deliveryStatus === 10 && !isCancelledStatus(form.orderStatus)
|
||||
"
|
||||
type="primary"
|
||||
@click="handleDelivery"
|
||||
:loading="loading"
|
||||
>
|
||||
发货
|
||||
</a-button>
|
||||
|
||||
<!-- 确认收货：已发货且未完成 -->
|
||||
<a-button
|
||||
v-if="form.deliveryStatus === 20 && form.orderStatus === 0"
|
||||
type="primary"
|
||||
@click="handleConfirmReceive"
|
||||
:loading="loading"
|
||||
>
|
||||
确认收货
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<!-- 退款相关操作 -->
|
||||
<template v-if="isRefundStatus(form.orderStatus)">
|
||||
<!-- 同意退款：退款申请中或客户端申请退款 -->
|
||||
<a-button
|
||||
v-if="form.orderStatus === 4 || form.orderStatus === 7"
|
||||
type="primary"
|
||||
@click="handleApproveRefund"
|
||||
:loading="loading"
|
||||
>
|
||||
同意退款
|
||||
</a-button>
|
||||
|
||||
<!-- 拒绝退款：退款申请中或客户端申请退款 -->
|
||||
<a-button
|
||||
v-if="form.orderStatus === 4 || form.orderStatus === 7"
|
||||
danger
|
||||
@click="handleRejectRefund"
|
||||
:loading="loading"
|
||||
>
|
||||
拒绝退款
|
||||
</a-button>
|
||||
|
||||
<!-- 重新处理：退款被拒绝 -->
|
||||
<a-button
|
||||
v-if="form.orderStatus === 5"
|
||||
@click="handleRetryRefund"
|
||||
:loading="loading"
|
||||
>
|
||||
重新处理
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<!-- 申请退款：已完成或已发货的订单 -->
|
||||
<a-button
|
||||
v-if="canApplyRefund(form)"
|
||||
@click="handleApplyRefund"
|
||||
:loading="loading"
|
||||
>
|
||||
申请退款
|
||||
</a-button>
|
||||
|
||||
<!-- 删除订单：已完成、已取消、退款成功 -->
|
||||
<a-button
|
||||
v-if="canDeleteOrder(form)"
|
||||
@click="handleDeleteOrder"
|
||||
danger
|
||||
:loading="loading"
|
||||
>
|
||||
删除订单
|
||||
</a-button>
|
||||
|
||||
<!-- 关闭按钮 -->
|
||||
<a-button @click="updateVisible(false)"> 关闭 </a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<a-card title="基本信息" style="margin-bottom: 20px" :bordered="false">
|
||||
<a-descriptions :column="3">
|
||||
<!-- 第一排-->
|
||||
@@ -300,6 +196,12 @@
|
||||
<a-tag v-if="form.isInvoice == 2" color="blue">不能开具</a-tag>
|
||||
</a-descriptions-item>
|
||||
<!-- 第六排-->
|
||||
<a-descriptions-item
|
||||
label="买家备注"
|
||||
:labelStyle="{ width: '90px', color: '#808080' }"
|
||||
>
|
||||
{{ form.buyerRemarks }}
|
||||
</a-descriptions-item>
|
||||
<!-- <a-descriptions-item-->
|
||||
<!-- label="结算状态"-->
|
||||
<!-- :labelStyle="{ width: '90px', color: '#808080' }"-->
|
||||
@@ -318,6 +220,32 @@
|
||||
</a-descriptions>
|
||||
</a-card>
|
||||
|
||||
<a-card title="商品信息" style="margin-bottom: 20px" :bordered="false">
|
||||
<a-spin :spinning="loading">
|
||||
<a-table
|
||||
:data-source="orderGoods"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'goodsName'">
|
||||
<div style="display: flex; align-items: center; gap: 12px">
|
||||
<a-avatar
|
||||
:src="record.image || record.goodsImage"
|
||||
shape="square"
|
||||
:size="50"
|
||||
style="flex-shrink: 0"
|
||||
/>
|
||||
<span style="flex: 1">{{
|
||||
record.goodsName || '未知商品'
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
|
||||
<a-card title="收货信息" style="margin-bottom: 20px" :bordered="false">
|
||||
<a-spin :spinning="loading">
|
||||
<a-descriptions :column="2">
|
||||
@@ -449,36 +377,6 @@
|
||||
</a-spin>
|
||||
</a-card>
|
||||
|
||||
<a-card title="商品信息" style="margin-bottom: 20px" :bordered="false">
|
||||
<a-spin :spinning="loading">
|
||||
<a-table
|
||||
:data-source="orderGoods"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'goodsName'">
|
||||
<div style="display: flex; align-items: center; gap: 12px">
|
||||
<a-avatar
|
||||
:src="record.image || record.goodsImage"
|
||||
shape="square"
|
||||
:size="50"
|
||||
style="flex-shrink: 0"
|
||||
/>
|
||||
<span style="flex: 1">{{
|
||||
record.goodsName || '未知商品'
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
<a-card title="买家留言" style="margin-bottom: 20px" :bordered="false">
|
||||
<a-spin :spinning="loading">
|
||||
{{ form.buyerRemarks || '-' }}
|
||||
</a-spin>
|
||||
</a-card>
|
||||
<a-card title="商家备注" style="margin-bottom: 20px" :bordered="false">
|
||||
<a-spin :spinning="loading">
|
||||
{{ form.merchantRemarks || '-' }}
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
cache-key="proShopOrderTable"
|
||||
:toolbar="false"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
@@ -59,6 +60,69 @@
|
||||
</div>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-if="column.key === 'statusInfo'">
|
||||
<div class="py-1">
|
||||
<a-space :size="6" wrap>
|
||||
<!-- 支付状态 -->
|
||||
<a-tag
|
||||
v-if="record.payStatus == 1"
|
||||
color="green"
|
||||
@click.stop="updatePayStatus(record)"
|
||||
class="cursor-pointer"
|
||||
>已付款</a-tag
|
||||
>
|
||||
<a-tag
|
||||
v-else-if="record.payStatus == 0 || record.payStatus == null"
|
||||
@click.stop="updatePayStatus(record)"
|
||||
class="cursor-pointer"
|
||||
>未付款</a-tag
|
||||
>
|
||||
<a-tag
|
||||
v-else-if="record.payStatus == 3"
|
||||
color="orange"
|
||||
@click.stop="updatePayStatus(record)"
|
||||
class="cursor-pointer"
|
||||
>占场中</a-tag
|
||||
>
|
||||
|
||||
<!-- 发货状态 -->
|
||||
<a-tag v-if="record.deliveryStatus == 10">未发货</a-tag>
|
||||
<a-tag v-if="record.deliveryStatus == 20" color="green"
|
||||
>已发货</a-tag
|
||||
>
|
||||
<a-tag v-if="record.deliveryStatus == 30" color="blue"
|
||||
>部分发货</a-tag
|
||||
>
|
||||
|
||||
<!-- 开票状态 -->
|
||||
<!-- <a-tag v-if="record.isInvoice == 0">未开具</a-tag>-->
|
||||
<a-tag v-if="record.isInvoice == 1" color="green">已开具</a-tag>
|
||||
<a-tag v-if="record.isInvoice == 2" color="blue">不能开具</a-tag>
|
||||
|
||||
<!-- 订单状态 -->
|
||||
<a-tag v-if="record.orderStatus === 0">未完成</a-tag>
|
||||
<a-tag v-if="record.orderStatus === 1" color="green"
|
||||
>已完成</a-tag
|
||||
>
|
||||
<a-tag v-if="record.orderStatus === 2">已关闭</a-tag>
|
||||
<a-tag v-if="record.orderStatus === 3" color="red"
|
||||
>关闭中</a-tag
|
||||
>
|
||||
<a-tag v-if="record.orderStatus === 4" color="red"
|
||||
>退款申请中</a-tag
|
||||
>
|
||||
<a-tag v-if="record.orderStatus === 5" color="red"
|
||||
>退款被拒绝</a-tag
|
||||
>
|
||||
<a-tag v-if="record.orderStatus === 6" color="orange"
|
||||
>已退款</a-tag
|
||||
>
|
||||
<a-tag v-if="record.orderStatus === 7" color="pink"
|
||||
>客户端申请退款</a-tag
|
||||
>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'orderGoods'">
|
||||
<template v-for="(item, index) in record.orderGoods" :key="index">
|
||||
<div class="item py-1">
|
||||
@@ -81,22 +145,6 @@
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="column.key === 'payStatus'">
|
||||
<a-tag
|
||||
v-if="record.payStatus"
|
||||
color="green"
|
||||
@click.stop="updatePayStatus(record)"
|
||||
class="cursor-pointer"
|
||||
>已付款
|
||||
</a-tag>
|
||||
<a-tag
|
||||
v-if="!record.payStatus"
|
||||
@click.stop="updatePayStatus(record)"
|
||||
class="cursor-pointer"
|
||||
>未付款
|
||||
</a-tag>
|
||||
<a-tag v-if="record.payStatus == 3">未付款,占场中</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :width="50" />
|
||||
</template>
|
||||
@@ -104,53 +152,20 @@
|
||||
<a-tag v-if="record.sex === 1">男</a-tag>
|
||||
<a-tag v-if="record.sex === 2">女</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'deliveryStatus'">
|
||||
<a-tag v-if="record.deliveryStatus == 10">未发货</a-tag>
|
||||
<a-tag v-if="record.deliveryStatus == 20" color="green"
|
||||
>已发货</a-tag
|
||||
>
|
||||
<a-tag v-if="record.deliveryStatus == 30" color="blue"
|
||||
>部分发货</a-tag
|
||||
>
|
||||
</template>
|
||||
<template v-if="column.key === 'orderStatus'">
|
||||
<a-tag v-if="record.orderStatus === 0">未完成</a-tag>
|
||||
<a-tag v-if="record.orderStatus === 1" color="green">已完成</a-tag>
|
||||
<a-tag v-if="record.orderStatus === 2">已关闭</a-tag>
|
||||
<a-tag v-if="record.orderStatus === 3" color="red">关闭中</a-tag>
|
||||
<a-tag v-if="record.orderStatus === 4" color="red"
|
||||
>退款申请中</a-tag
|
||||
>
|
||||
<a-tag v-if="record.orderStatus === 5" color="red"
|
||||
>退款被拒绝</a-tag
|
||||
>
|
||||
<a-tag v-if="record.orderStatus === 6" color="orange"
|
||||
>退款成功</a-tag
|
||||
>
|
||||
<a-tag v-if="record.orderStatus === 7" color="pink"
|
||||
>客户端申请退款</a-tag
|
||||
>
|
||||
</template>
|
||||
<template v-if="column.key === 'isInvoice'">
|
||||
<a-tag v-if="record.isInvoice == 0">未开具</a-tag>
|
||||
<a-tag v-if="record.isInvoice == 1" color="green">已开具</a-tag>
|
||||
<a-tag v-if="record.isInvoice == 2" color="blue">不能开具</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<!-- 查看详情 - 所有状态都可以查看 -->
|
||||
<a @click.stop="openEdit(record)"> <EyeOutlined /> 详情 </a>
|
||||
|
||||
<!-- 未付款状态的操作 -->
|
||||
<template v-if="!record.payStatus && record.orderStatus === 0">
|
||||
<a-divider type="vertical" />
|
||||
<a @click.stop="handleEditOrder(record)">
|
||||
<EditOutlined /> 修改
|
||||
</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click.stop="handleCancelOrder(record)">
|
||||
<span class="ele-text-warning"> <CloseOutlined /> 关闭 </span>
|
||||
</a>
|
||||
@@ -164,11 +179,9 @@
|
||||
!isCancelledStatus(record.orderStatus)
|
||||
"
|
||||
>
|
||||
<a-divider type="vertical" />
|
||||
<a @click.stop="handleDelivery(record)" class="ele-text-primary">
|
||||
<SendOutlined /> 发货
|
||||
</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click.stop="handleApplyRefund(record)">
|
||||
<UndoOutlined /> 退款
|
||||
</a>
|
||||
@@ -182,14 +195,12 @@
|
||||
record.orderStatus === 0
|
||||
"
|
||||
>
|
||||
<a-divider type="vertical" />
|
||||
<a
|
||||
@click.stop="handleConfirmReceive(record)"
|
||||
class="ele-text-primary"
|
||||
>
|
||||
<CheckOutlined /> 确认收货
|
||||
</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click.stop="handleApplyRefund(record)">
|
||||
<UndoOutlined /> 退款
|
||||
</a>
|
||||
@@ -200,14 +211,12 @@
|
||||
<template
|
||||
v-if="record.orderStatus === 4 || record.orderStatus === 7"
|
||||
>
|
||||
<a-divider type="vertical" />
|
||||
<a
|
||||
@click.stop="handleApproveRefund(record)"
|
||||
class="ele-text-success"
|
||||
>
|
||||
<CheckCircleOutlined /> 同意退款
|
||||
</a>
|
||||
<a-divider type="vertical" />
|
||||
<a
|
||||
@click.stop="handleRejectRefund(record)"
|
||||
class="ele-text-danger"
|
||||
@@ -217,7 +226,6 @@
|
||||
</template>
|
||||
|
||||
<template v-if="record.orderStatus === 5">
|
||||
<a-divider type="vertical" />
|
||||
<a @click.stop="handleRetryRefund(record)">
|
||||
<RedoOutlined /> 重新处理
|
||||
</a>
|
||||
@@ -225,16 +233,14 @@
|
||||
</template>
|
||||
|
||||
<!-- 已完成状态的操作 -->
|
||||
<template v-if="record.orderStatus === 1">
|
||||
<a-divider type="vertical" />
|
||||
<a @click.stop="handleApplyRefund(record)">
|
||||
<UndoOutlined /> 申请退款
|
||||
</a>
|
||||
</template>
|
||||
<!-- <template v-if="record.orderStatus === 1">-->
|
||||
<!-- <a @click.stop="handleApplyRefund(record)">-->
|
||||
<!-- <UndoOutlined /> 申请退款-->
|
||||
<!-- </a>-->
|
||||
<!-- </template>-->
|
||||
|
||||
<!-- 删除操作 - 已完成、已关闭、退款成功的订单可以删除 -->
|
||||
<template v-if="canDeleteOrder(record)">
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
title="确定要删除此订单吗？删除后无法恢复。"
|
||||
@confirm="remove(record)"
|
||||
@@ -244,6 +250,7 @@
|
||||
</a>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
@@ -346,8 +353,7 @@
|
||||
{
|
||||
title: '用户信息',
|
||||
dataIndex: 'userId',
|
||||
key: 'userInfo',
|
||||
width: 220
|
||||
key: 'userInfo'
|
||||
},
|
||||
{
|
||||
title: '商品信息',
|
||||
@@ -359,36 +365,20 @@
|
||||
dataIndex: 'payPrice',
|
||||
key: 'payPrice',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
customRender: ({ text }) => '￥' + text
|
||||
},
|
||||
// {
|
||||
// title: '支付方式',
|
||||
// dataIndex: 'payType',
|
||||
// key: 'payType',
|
||||
// align: 'center',
|
||||
// width: 120,
|
||||
// },
|
||||
{
|
||||
title: '支付方式',
|
||||
dataIndex: 'payType',
|
||||
key: 'payType',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '支付状态',
|
||||
dataIndex: 'payStatus',
|
||||
key: 'payStatus',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '发货状态',
|
||||
dataIndex: 'deliveryStatus',
|
||||
key: 'deliveryStatus',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '开票状态',
|
||||
dataIndex: 'isInvoice',
|
||||
key: 'isInvoice',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '订单状态',
|
||||
title: '状态',
|
||||
dataIndex: 'orderStatus',
|
||||
key: 'orderStatus',
|
||||
key: 'statusInfo',
|
||||
align: 'center'
|
||||
},
|
||||
// {
|
||||
@@ -417,7 +407,7 @@
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 220,
|
||||
width: 120,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
@@ -722,11 +712,11 @@
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
openEdit(record);
|
||||
// openEdit(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
// openEdit(record);
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user