refactor(order): 重构订单管理界面以优化显示和交互体验
- 调整订单详情抽屉宽度从65%到70% - 移除订单详情中的顶部操作按钮区域 - 在订单详情中新增买家备注显示字段 - 将商品信息卡片从底部移至收货信息前 - 为表格组件添加缓存键以改善性能 - 合并订单状态标签显示包括支付、发货、开票和订单状态 - 优化表格列宽设置并调整操作列宽度 - 更新表格行双击事件以正确打开编辑窗口 - 注释掉商户管理界面中的组织部门字段显示
This commit is contained in:
@@ -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,146 +152,105 @@
|
||||
<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 @click.stop="openEdit(record)"> <EyeOutlined /> 详情 </a>
|
||||
<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>
|
||||
</template>
|
||||
<!-- 未付款状态的操作 -->
|
||||
<template v-if="!record.payStatus && record.orderStatus === 0">
|
||||
<a @click.stop="handleEditOrder(record)">
|
||||
<EditOutlined /> 修改
|
||||
</a>
|
||||
<a @click.stop="handleCancelOrder(record)">
|
||||
<span class="ele-text-warning"> <CloseOutlined /> 关闭 </span>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<!-- 已付款未发货状态的操作 -->
|
||||
<template
|
||||
v-if="
|
||||
<!-- 已付款未发货状态的操作 -->
|
||||
<template
|
||||
v-if="
|
||||
record.payStatus &&
|
||||
record.deliveryStatus === 10 &&
|
||||
!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>
|
||||
</template>
|
||||
>
|
||||
<a @click.stop="handleDelivery(record)" class="ele-text-primary">
|
||||
<SendOutlined /> 发货
|
||||
</a>
|
||||
<a @click.stop="handleApplyRefund(record)">
|
||||
<UndoOutlined /> 退款
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<!-- 已发货未完成状态的操作 -->
|
||||
<template
|
||||
v-if="
|
||||
<!-- 已发货未完成状态的操作 -->
|
||||
<template
|
||||
v-if="
|
||||
record.payStatus &&
|
||||
record.deliveryStatus === 20 &&
|
||||
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>
|
||||
</template>
|
||||
|
||||
<!-- 退款相关状态的操作 -->
|
||||
<template v-if="isRefundStatus(record.orderStatus)">
|
||||
<template
|
||||
v-if="record.orderStatus === 4 || record.orderStatus === 7"
|
||||
>
|
||||
<a-divider type="vertical" />
|
||||
<a
|
||||
@click.stop="handleApproveRefund(record)"
|
||||
class="ele-text-success"
|
||||
@click.stop="handleConfirmReceive(record)"
|
||||
class="ele-text-primary"
|
||||
>
|
||||
<CheckCircleOutlined /> 同意退款
|
||||
<CheckOutlined /> 确认收货
|
||||
</a>
|
||||
<a-divider type="vertical" />
|
||||
<a
|
||||
@click.stop="handleRejectRefund(record)"
|
||||
class="ele-text-danger"
|
||||
>
|
||||
<CloseCircleOutlined /> 拒绝退款
|
||||
<a @click.stop="handleApplyRefund(record)">
|
||||
<UndoOutlined /> 退款
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<template v-if="record.orderStatus === 5">
|
||||
<a-divider type="vertical" />
|
||||
<a @click.stop="handleRetryRefund(record)">
|
||||
<RedoOutlined /> 重新处理
|
||||
</a>
|
||||
<!-- 退款相关状态的操作 -->
|
||||
<template v-if="isRefundStatus(record.orderStatus)">
|
||||
<template
|
||||
v-if="record.orderStatus === 4 || record.orderStatus === 7"
|
||||
>
|
||||
<a
|
||||
@click.stop="handleApproveRefund(record)"
|
||||
class="ele-text-success"
|
||||
>
|
||||
<CheckCircleOutlined /> 同意退款
|
||||
</a>
|
||||
<a
|
||||
@click.stop="handleRejectRefund(record)"
|
||||
class="ele-text-danger"
|
||||
>
|
||||
<CloseCircleOutlined /> 拒绝退款
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<template v-if="record.orderStatus === 5">
|
||||
<a @click.stop="handleRetryRefund(record)">
|
||||
<RedoOutlined /> 重新处理
|
||||
</a>
|
||||
</template>
|
||||
</template>
|
||||
</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)"
|
||||
>
|
||||
<a class="ele-text-danger" @click.stop>
|
||||
<DeleteOutlined /> 删除
|
||||
</a>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
<!-- 删除操作 - 已完成、已关闭、退款成功的订单可以删除 -->
|
||||
<template v-if="canDeleteOrder(record)">
|
||||
<a-popconfirm
|
||||
title="确定要删除此订单吗？删除后无法恢复。"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger" @click.stop>
|
||||
<DeleteOutlined /> 删除
|
||||
</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