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

- 调整订单详情抽屉宽度从65%到70%
- 移除订单详情中的顶部操作按钮区域
- 在订单详情中新增买家备注显示字段
- 将商品信息卡片从底部移至收货信息前
- 为表格组件添加缓存键以改善性能
- 合并订单状态标签显示包括支付、发货、开票和订单状态
- 优化表格列宽设置并调整操作列宽度
- 更新表格行双击事件以正确打开编辑窗口
- 注释掉商户管理界面中的组织部门字段显示

src/views/shop/shopAdmin/index.vue

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

src/views/shop/shopOrder/components/orderInfo.vue

@@ -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 || '-' }}

src/views/shop/shopOrder/index.vue

@@ -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">
+              <!--            <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)">
-              <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',
+      key: 'userInfo'
-      width: 220
     },
     {
       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: '支付方式',
+      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',
-      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);
       }
     };
   };