gxwebsoft/mp-10584
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor(order): 重构订单管理界面以优化显示和交互体验

Browse Source 
- 调整订单详情抽屉宽度从65%到70%
- 移除订单详情中的顶部操作按钮区域
- 在订单详情中新增买家备注显示字段
- 将商品信息卡片从底部移至收货信息前
- 为表格组件添加缓存键以改善性能
- 合并订单状态标签显示包括支付、发货、开票和订单状态
- 优化表格列宽设置并调整操作列宽度
- 更新表格行双击事件以正确打开编辑窗口
- 注释掉商户管理界面中的组织部门字段显示
This commit is contained in:
赵忠林
2026-02-10 00:53:41 +08:00
parent d738784730
commit c7fe19f33c
3 changed files with 190 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/shop/shopAdmin/index.vue
View File

@@ -232,12 +232,12 @@
align: 'center', align: 'center',
showSorterTooltip: false showSorterTooltip: false
}, },
{ // {
title: '所属部门', // title: '所属部门',
dataIndex: 'organizationName', // dataIndex: 'organizationName',
key: 'organizationName', // key: 'organizationName',
align: 'center' // align: 'center'
}, // },
{ {
title: '角色', title: '角色',
dataIndex: 'roles', dataIndex: 'roles',

168
src/views/shop/shopOrder/components/orderInfo.vue
View File

@@ -1,7 +1,7 @@
<!-- 用户编辑弹窗 --> <!-- 用户编辑弹窗 -->
<template> <template>
<a-drawer <a-drawer
:width="`65%`" width="70%"
:visible="visible" :visible="visible"
:confirm-loading="loading" :confirm-loading="loading"
:maxable="maxAble" :maxable="maxAble"
@@ -11,110 +11,6 @@
:footer="null" :footer="null"
@ok="save" @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-card title="基本信息" style="margin-bottom: 20px" :bordered="false">
<a-descriptions :column="3"> <a-descriptions :column="3">
<!-- 第一排--> <!-- 第一排-->
@@ -300,6 +196,12 @@
<a-tag v-if="form.isInvoice == 2" color="blue">不能开具</a-tag> <a-tag v-if="form.isInvoice == 2" color="blue">不能开具</a-tag>
</a-descriptions-item> </a-descriptions-item>
<!-- 第六排--> <!-- 第六排-->
<a-descriptions-item
label="买家备注"
:labelStyle="{ width: '90px', color: '#808080' }"
>
{{ form.buyerRemarks }}
</a-descriptions-item>
<!-- <a-descriptions-item--> <!-- <a-descriptions-item-->
<!-- label="结算状态"--> <!-- label="结算状态"-->
<!-- :labelStyle="{ width: '90px', color: '#808080' }"--> <!-- :labelStyle="{ width: '90px', color: '#808080' }"-->
@@ -318,6 +220,32 @@
</a-descriptions> </a-descriptions>
</a-card> </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-card title="收货信息" style="margin-bottom: 20px" :bordered="false">
<a-spin :spinning="loading"> <a-spin :spinning="loading">
<a-descriptions :column="2"> <a-descriptions :column="2">
@@ -449,36 +377,6 @@
</a-spin> </a-spin>
</a-card> </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-card title="商家备注" style="margin-bottom: 20px" :bordered="false">
<a-spin :spinning="loading"> <a-spin :spinning="loading">
{{ form.merchantRemarks || '-' }} {{ form.merchantRemarks || '-' }}

312
src/views/shop/shopOrder/index.vue
View File

@@ -25,6 +25,7 @@
:columns="columns" :columns="columns"
:datasource="datasource" :datasource="datasource"
:customRow="customRow" :customRow="customRow"
cache-key="proShopOrderTable"
:toolbar="false" :toolbar="false"
tool-class="ele-toolbar-form" tool-class="ele-toolbar-form"
class="sys-org-table" class="sys-org-table"
@@ -59,6 +60,69 @@
</div> </div>
</a-space> </a-space>
</template> </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-if="column.key === 'orderGoods'">
<template v-for="(item, index) in record.orderGoods" :key="index"> <template v-for="(item, index) in record.orderGoods" :key="index">
<div class="item py-1"> <div class="item py-1">
@@ -81,22 +145,6 @@
</template> </template>
</template> </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'"> <template v-if="column.key === 'image'">
<a-image :src="record.image" :width="50" /> <a-image :src="record.image" :width="50" />
</template> </template>
@@ -104,146 +152,105 @@
<a-tag v-if="record.sex === 1">男</a-tag> <a-tag v-if="record.sex === 1">男</a-tag>
<a-tag v-if="record.sex === 2">女</a-tag> <a-tag v-if="record.sex === 2">女</a-tag>
</template> </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'"> <template v-if="column.key === 'status'">
<a-tag v-if="record.status === 0" color="green">显示</a-tag> <a-tag v-if="record.status === 0" color="green">显示</a-tag>
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag> <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
</template> </template>
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<!-- 查看详情 - 所有状态都可以查看 --> <a-space>
<a @click.stop="openEdit(record)"> <EyeOutlined /> 详情 </a> <!-- 查看详情 - 所有状态都可以查看 -->
<a @click.stop="openEdit(record)"> <EyeOutlined /> 详情 </a>
<!-- 未付款状态的操作 --> <!-- 未付款状态的操作 -->
<template v-if="!record.payStatus && record.orderStatus === 0"> <template v-if="!record.payStatus && record.orderStatus === 0">
<a-divider type="vertical" /> <a @click.stop="handleEditOrder(record)">
<a @click.stop="handleEditOrder(record)"> <EditOutlined /> 修改
<EditOutlined /> 修改 </a>
</a> <a @click.stop="handleCancelOrder(record)">
<a-divider type="vertical" /> <span class="ele-text-warning"> <CloseOutlined /> 关闭 </span>
<a @click.stop="handleCancelOrder(record)"> </a>
<span class="ele-text-warning"> <CloseOutlined /> 关闭 </span> </template>
</a>
</template>
<!-- 已付款未发货状态的操作 --> <!-- 已付款未发货状态的操作 -->
<template <template
v-if=" v-if="
record.payStatus && record.payStatus &&
record.deliveryStatus === 10 && record.deliveryStatus === 10 &&
!isCancelledStatus(record.orderStatus) !isCancelledStatus(record.orderStatus)
" "
> >
<a-divider type="vertical" /> <a @click.stop="handleDelivery(record)" class="ele-text-primary">
<a @click.stop="handleDelivery(record)" class="ele-text-primary"> <SendOutlined /> 发货
<SendOutlined /> 发货 </a>
</a> <a @click.stop="handleApplyRefund(record)">
<a-divider type="vertical" /> <UndoOutlined /> 退款
<a @click.stop="handleApplyRefund(record)"> </a>
<UndoOutlined /> 退款 </template>
</a>
</template>
<!-- 已发货未完成状态的操作 --> <!-- 已发货未完成状态的操作 -->
<template <template
v-if=" v-if="
record.payStatus && record.payStatus &&
record.deliveryStatus === 20 && record.deliveryStatus === 20 &&
record.orderStatus === 0 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 <a
@click.stop="handleApproveRefund(record)" @click.stop="handleConfirmReceive(record)"
class="ele-text-success" class="ele-text-primary"
> >
<CheckCircleOutlined /> 同意退款 <CheckOutlined /> 确认收货
</a> </a>
<a-divider type="vertical" /> <a @click.stop="handleApplyRefund(record)">
<a <UndoOutlined /> 退款
@click.stop="handleRejectRefund(record)"
class="ele-text-danger"
>
<CloseCircleOutlined /> 拒绝退款
</a> </a>
</template> </template>
<template v-if="record.orderStatus === 5"> <!-- 退款相关状态的操作 -->
<a-divider type="vertical" /> <template v-if="isRefundStatus(record.orderStatus)">
<a @click.stop="handleRetryRefund(record)"> <template
<RedoOutlined /> 重新处理 v-if="record.orderStatus === 4 || record.orderStatus === 7"
</a> >
<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>
<!-- 已完成状态的操作 --> <!-- 已完成状态的操作 -->
<template v-if="record.orderStatus === 1"> <!-- <template v-if="record.orderStatus === 1">-->
<a-divider type="vertical" /> <!-- <a @click.stop="handleApplyRefund(record)">-->
<a @click.stop="handleApplyRefund(record)"> <!-- <UndoOutlined /> 申请退款-->
<UndoOutlined /> 申请退款 <!-- </a>-->
</a> <!-- </template>-->
</template>
<!-- 删除操作 - 已完成、已关闭、退款成功的订单可以删除 --> <!-- 删除操作 - 已完成、已关闭、退款成功的订单可以删除 -->
<template v-if="canDeleteOrder(record)"> <template v-if="canDeleteOrder(record)">
<a-divider type="vertical" /> <a-popconfirm
<a-popconfirm title="确定要删除此订单吗？删除后无法恢复。"
title="确定要删除此订单吗？删除后无法恢复。" @confirm="remove(record)"
@confirm="remove(record)" >
> <a class="ele-text-danger" @click.stop>
<a class="ele-text-danger" @click.stop> <DeleteOutlined /> 删除
<DeleteOutlined /> 删除 </a>
</a> </a-popconfirm>
</a-popconfirm> </template>
</template> </a-space>
</template> </template>
</template> </template>
</ele-pro-table> </ele-pro-table>
@@ -346,8 +353,7 @@
{ {
title: '用户信息', title: '用户信息',
dataIndex: 'userId', dataIndex: 'userId',
key: 'userInfo', key: 'userInfo'
width: 220
}, },
{ {
title: '商品信息', title: '商品信息',
@@ -359,36 +365,20 @@
dataIndex: 'payPrice', dataIndex: 'payPrice',
key: 'payPrice', key: 'payPrice',
align: 'center', align: 'center',
width: 120,
customRender: ({ text }) => '￥' + text customRender: ({ text }) => '￥' + text
}, },
// {
// title: '支付方式',
// dataIndex: 'payType',
// key: 'payType',
// align: 'center',
// width: 120,
// },
{ {
title: '支付方式', 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: '订单状态',
dataIndex: 'orderStatus', dataIndex: 'orderStatus',
key: 'orderStatus', key: 'statusInfo',
align: 'center' align: 'center'
}, },
// { // {
@@ -417,7 +407,7 @@
{ {
title: '操作', title: '操作',
key: 'action', key: 'action',
width: 220, width: 120,
fixed: 'right', fixed: 'right',
align: 'center', align: 'center',
hideInSetting: true hideInSetting: true
@@ -722,11 +712,11 @@
return { return {
// 行点击事件 // 行点击事件
onClick: () => { onClick: () => {
openEdit(record); // openEdit(record);
}, },
// 行双击事件 // 行双击事件
onDblclick: () => { onDblclick: () => {
// openEdit(record); openEdit(record);
} }
}; };
}; };