From a2a9f01e2ce48783a907adfff67aaa3f115bc04f Mon Sep 17 00:00:00 2001
From: Leo <leo@qi-cloud.com>
Date: Sat, 15 Nov 2025 01:02:52 +0800
Subject: [PATCH] 1

---
 src/views/system/jdorder/orderList.vue | 409 ++++++++++++++++---------
 1 file changed, 263 insertions(+), 146 deletions(-)

diff --git a/src/views/system/jdorder/orderList.vue b/src/views/system/jdorder/orderList.vue
index 1f00572..9029202 100644
--- a/src/views/system/jdorder/orderList.vue
+++ b/src/views/system/jdorder/orderList.vue
@@ -59,169 +59,157 @@
 
       <!-- 表格区域 -->
       <template #table>
-        <el-table :data="list" v-loading="loading" border stripe :default-sort="{prop: 'createTime', order: 'descending'}" @sort-change="handleSortChange" style="width: 100%;">
-          <el-table-column label="ID" prop="id" width="80" />
-          <el-table-column label="内部单号" prop="remark" width="160" sortable/>
-
-          <el-table-column label="订单号" prop="orderId" width="200">
+        <el-table 
+          :data="list" 
+          v-loading="loading" 
+          border 
+          stripe 
+          :default-sort="{prop: 'createTime', order: 'descending'}" 
+          @sort-change="handleSortChange" 
+          style="width: 100%;"
+          class="order-table">
+          <!-- 核心信息列 -->
+          <el-table-column label="内部单号" prop="remark" width="140" sortable fixed="left"/>
+          <el-table-column label="订单号" prop="orderId" width="180"/>
+          <el-table-column label="第三方单号" prop="thirdPartyOrderNo" width="150">
             <template slot-scope="scope">
-              <div>
-                <span style="margin-right: 8px;">{{ scope.row.orderId }}</span>
-                <el-button
-                  type="text"
-                  size="mini"
-                  icon="el-icon-copy-document"
-                  @click="copyToClipboard(scope.row.orderId)"
-                  title="复制订单号"
-                >
-                  复制
-                </el-button>
-              </div>
+              <span v-if="scope.row.thirdPartyOrderNo">{{ scope.row.thirdPartyOrderNo }}</span>
+              <span v-else style="color: #999;">-</span>
             </template>
           </el-table-column>
-          <el-table-column label="第三方单号" prop="thirdPartyOrderNo" width="180">
-            <template slot-scope="scope">
-              <div v-if="scope.row.thirdPartyOrderNo">
-                <span style="margin-right: 8px;">{{ scope.row.thirdPartyOrderNo }}</span>
-                <el-button
-                  type="text"
-                  size="mini"
-                  icon="el-icon-copy-document"
-                  @click="copyToClipboard(scope.row.thirdPartyOrderNo)"
-                  title="复制第三方单号"
-                >
-                  复制
-                </el-button>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="标记" prop="distributionMark" width="80"/>
-          <el-table-column label="型号" prop="modelNumber" width="180"/>
-          <el-table-column label="地址" prop="address" min-width="320">
-            <template slot-scope="scope">
-              <div style="display: flex; align-items: center;">
-                <span class="ellipsis" style="flex:1; margin-right: 8px;" :title="scope.row.address">{{ scope.row.address }}</span>
-                <el-button
-                  type="text"
-                  size="mini"
-                  icon="el-icon-copy-document"
-                  @click="copyToClipboard(scope.row.address)"
-                  title="复制地址"
-                >
-                  复制
-                </el-button>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="付款金额" prop="paymentAmount" width="120">
+          
+          <!-- 业务信息列 -->
+          <el-table-column label="标记" prop="distributionMark" width="100"/>
+          <el-table-column label="型号" prop="modelNumber" width="160"/>
+          <el-table-column label="地址" prop="address" min-width="280" show-overflow-tooltip/>
+          
+          <!-- 金额信息列 -->
+          <el-table-column label="付款金额" prop="paymentAmount" width="110" align="right">
             <template slot-scope="scope">{{ toYuan(scope.row.paymentAmount) }}</template>
           </el-table-column>
-          <el-table-column label="后返金额" prop="rebateAmount" width="120">
+          <el-table-column label="后返金额" prop="rebateAmount" width="110" align="right">
             <template slot-scope="scope">{{ toYuan(scope.row.rebateAmount) }}</template>
           </el-table-column>
-          <el-table-column label="京粉实际价格" prop="jingfenActualPrice" width="140">
-            <template slot-scope="scope">{{ toYuan(scope.row.jingfenActualPrice) }}</template>
-          </el-table-column>
-          <el-table-column label="下单人" prop="buyer" width="140"/>
-          <el-table-column label="备注/状态" prop="status" min-width="160"/>
-
-          <el-table-column label="参与统计" prop="isCountEnabled" width="100">
+          <el-table-column label="下单人" prop="buyer" width="100"/>
+          
+          <!-- 退款状态标签列（合并显示） -->
+          <el-table-column label="退款状态" width="180" align="center">
             <template slot-scope="scope">
-              <el-switch
-                v-model="scope.row.isCountEnabled"
-                :active-value="1"
-                :inactive-value="0"
-                @change="handleCountEnabledChange(scope.row)"
-                active-text="是"
-                inactive-text="否">
-              </el-switch>
-            </template>
-          </el-table-column>
-
-          <el-table-column label="物流链接" prop="logisticsLink" width="200">
-            <template slot-scope="scope">
-              <div v-if="scope.row.logisticsLink">
-                <a :href="scope.row.logisticsLink" target="_blank" style="margin-right: 8px;">查看物流</a>
-                <el-button
-                  type="text"
-                  size="mini"
-                  icon="el-icon-copy-document"
-                  @click="copyToClipboard(scope.row.logisticsLink)"
-                  title="复制链接"
-                >
-                  复制
-                </el-button>
+              <div style="display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;">
+                <el-tag 
+                  :type="scope.row.isRefunded === 1 ? 'warning' : 'info'" 
+                  size="small"
+                  :title="scope.row.isRefunded === 1 && scope.row.refundDate ? '退款日期：' + parseTime(scope.row.refundDate) : ''"
+                  @click.native="toggleRefunded(scope.row)"
+                  style="cursor: pointer;">
+                  {{ scope.row.isRefunded === 1 ? '已退款' : '未退款' }}
+                </el-tag>
+                <el-tag 
+                  :type="scope.row.isRefundReceived === 1 ? 'success' : 'info'" 
+                  size="small"
+                  :title="scope.row.isRefundReceived === 1 && scope.row.refundReceivedDate ? '退款到账日期：' + parseTime(scope.row.refundReceivedDate) : ''"
+                  @click.native="toggleRefundReceived(scope.row)"
+                  style="cursor: pointer;">
+                  {{ scope.row.isRefundReceived === 1 ? '退款到账' : '未到账' }}
+                </el-tag>
+                <el-tag 
+                  :type="scope.row.isRebateReceived === 1 ? 'success' : 'info'" 
+                  size="small"
+                  :title="scope.row.isRebateReceived === 1 && scope.row.rebateReceivedDate ? '后返到账日期：' + parseTime(scope.row.rebateReceivedDate) : ''"
+                  @click.native="toggleRebateReceived(scope.row)"
+                  style="cursor: pointer;">
+                  {{ scope.row.isRebateReceived === 1 ? '后返到账' : '未到账' }}
+                </el-tag>
               </div>
             </template>
           </el-table-column>
-          <el-table-column label="赔付金额" prop="proPriceAmount" width="140"/>
-
+          
+          <!-- 时间信息列 -->
           <el-table-column label="创建时间" prop="createTime" width="160" sortable="custom">
             <template slot-scope="scope">{{ parseTime(scope.row.createTime) }}</template>
           </el-table-column>
           <el-table-column label="完成时间" prop="finishTime" width="160">
-            <template slot-scope="scope">{{ parseTime(scope.row.finishTime) }}</template>
+            <template slot-scope="scope">{{ parseTime(scope.row.finishTime) || '-' }}</template>
           </el-table-column>
-          <el-table-column label="是否退款" prop="isRefunded" width="100">
+          
+          <!-- 其他信息列（可折叠） -->
+          <el-table-column label="备注/状态" prop="status" min-width="120" show-overflow-tooltip/>
+          
+          <!-- 操作列（统一放在最右侧） -->
+          <el-table-column label="操作" fixed="right" width="280" align="center">
             <template slot-scope="scope">
-              <el-switch
-                v-model="scope.row.isRefunded"
-                :active-value="1"
-                :inactive-value="0"
-                @change="handleRefundedChange(scope.row)">
-              </el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column label="退款日期" prop="refundDate" width="160">
-            <template slot-scope="scope">{{ parseTime(scope.row.refundDate) }}</template>
-          </el-table-column>
-          <el-table-column label="是否退款到账" prop="isRefundReceived" width="120">
-            <template slot-scope="scope">
-              <el-switch
-                v-model="scope.row.isRefundReceived"
-                :active-value="1"
-                :inactive-value="0"
-                @change="handleRefundReceivedChange(scope.row)">
-              </el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column label="退款到账日期" prop="refundReceivedDate" width="160">
-            <template slot-scope="scope">{{ parseTime(scope.row.refundReceivedDate) }}</template>
-          </el-table-column>
-          <el-table-column label="后返到账" prop="isRebateReceived" width="100">
-            <template slot-scope="scope">
-              <el-switch
-                v-model="scope.row.isRebateReceived"
-                :active-value="1"
-                :inactive-value="0"
-                @change="handleRebateReceivedChange(scope.row)">
-              </el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column label="后返到账日期" prop="rebateReceivedDate" width="160">
-            <template slot-scope="scope">{{ parseTime(scope.row.rebateReceivedDate) }}</template>
-          </el-table-column>
-          <el-table-column label="操作" fixed="right" width="220">
-            <template slot-scope="scope">
-              <el-button
-                type="text"
-                size="mini"
-                @click="copyReturnInfo(scope.row)"
-              >
-                退货复制
-              </el-button>
-              <el-button 
-                type="text" 
-                size="mini" 
-                style="color: #67C23A;" 
-                @click="handleFetchLogistics(scope.row)"
-                :title=scope.row.distributionMark
-              >
-                获取物流
-              </el-button>
-              <el-button type="text" size="mini" style="color: #f56c6c;" @click="handleDelete(scope.row)">
-                删除
-              </el-button>
+              <div style="display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;">
+                <!-- 复制操作 -->
+                <el-button 
+                  type="text" 
+                  size="mini" 
+                  icon="el-icon-copy-document"
+                  @click="copyToClipboard(scope.row.orderId)"
+                  title="复制订单号">
+                  订单号
+                </el-button>
+                <el-button 
+                  v-if="scope.row.thirdPartyOrderNo"
+                  type="text" 
+                  size="mini" 
+                  icon="el-icon-copy-document"
+                  @click="copyToClipboard(scope.row.thirdPartyOrderNo)"
+                  title="复制第三方单号">
+                  第三方
+                </el-button>
+                <el-button 
+                  type="text" 
+                  size="mini" 
+                  icon="el-icon-copy-document"
+                  @click="copyToClipboard(scope.row.address)"
+                  title="复制地址">
+                  地址
+                </el-button>
+                <el-button 
+                  v-if="scope.row.logisticsLink"
+                  type="text" 
+                  size="mini" 
+                  icon="el-icon-copy-document"
+                  @click="copyToClipboard(scope.row.logisticsLink)"
+                  title="复制物流链接">
+                  物流
+                </el-button>
+                <!-- 业务操作 -->
+                <el-button 
+                  type="text" 
+                  size="mini"
+                  @click="copyReturnInfo(scope.row)"
+                  title="复制退货信息">
+                  退货复制
+                </el-button>
+                <el-button 
+                  type="text" 
+                  size="mini" 
+                  style="color: #67C23A;" 
+                  @click="handleFetchLogistics(scope.row)"
+                  :title="scope.row.distributionMark">
+                  获取物流
+                </el-button>
+                <!-- 统计开关 -->
+                <el-switch
+                  v-model="scope.row.isCountEnabled"
+                  :active-value="1"
+                  :inactive-value="0"
+                  @change="handleCountEnabledChange(scope.row)"
+                  active-text="统计"
+                  inactive-text=""
+                  style="margin-left: 4px;">
+                </el-switch>
+                <!-- 删除操作 -->
+                <el-button 
+                  type="text" 
+                  size="mini" 
+                  style="color: #f56c6c;" 
+                  @click="handleDelete(scope.row)"
+                  title="删除订单">
+                  删除
+                </el-button>
+              </div>
             </template>
           </el-table-column>
         </el-table>
@@ -707,6 +695,30 @@ export default {
         row.isCountEnabled = row.isCountEnabled ? 0 : 1
       })
     },
+    /** 切换退款状态（标签点击） */
+    toggleRefunded(row) {
+      const oldValue = row.isRefunded
+      row.isRefunded = row.isRefunded === 1 ? 0 : 1
+      // 如果设置为"是"，自动设置当前日期
+      if (row.isRefunded === 1 && !row.refundDate) {
+        row.refundDate = new Date()
+      }
+      // 如果设置为"否"，清空日期
+      if (row.isRefunded === 0) {
+        row.refundDate = null
+      }
+      // 调用后端API更新数据库
+      updateJDOrder(row).then(() => {
+        this.$message.success(`订单 ${row.remark} 的退款状态已更新`)
+      }).catch(() => {
+        this.$message.error('更新失败，请稍后重试')
+        // 恢复原状态
+        row.isRefunded = oldValue
+        if (row.isRefunded === 0) {
+          row.refundDate = null
+        }
+      })
+    },
     /** 处理是否退款开关变化 */
     handleRefundedChange(row) {
       // 如果设置为"是"，自动设置当前日期
@@ -729,6 +741,30 @@ export default {
         }
       })
     },
+    /** 切换退款到账状态（标签点击） */
+    toggleRefundReceived(row) {
+      const oldValue = row.isRefundReceived
+      row.isRefundReceived = row.isRefundReceived === 1 ? 0 : 1
+      // 如果设置为"是"，自动设置当前日期
+      if (row.isRefundReceived === 1 && !row.refundReceivedDate) {
+        row.refundReceivedDate = new Date()
+      }
+      // 如果设置为"否"，清空日期
+      if (row.isRefundReceived === 0) {
+        row.refundReceivedDate = null
+      }
+      // 调用后端API更新数据库
+      updateJDOrder(row).then(() => {
+        this.$message.success(`订单 ${row.remark} 的退款到账状态已更新`)
+      }).catch(() => {
+        this.$message.error('更新失败，请稍后重试')
+        // 恢复原状态
+        row.isRefundReceived = oldValue
+        if (row.isRefundReceived === 0) {
+          row.refundReceivedDate = null
+        }
+      })
+    },
     /** 处理是否退款到账开关变化 */
     handleRefundReceivedChange(row) {
       // 如果设置为"是"，自动设置当前日期
@@ -751,6 +787,30 @@ export default {
         }
       })
     },
+    /** 切换后返到账状态（标签点击） */
+    toggleRebateReceived(row) {
+      const oldValue = row.isRebateReceived
+      row.isRebateReceived = row.isRebateReceived === 1 ? 0 : 1
+      // 如果设置为"是"，自动设置当前日期
+      if (row.isRebateReceived === 1 && !row.rebateReceivedDate) {
+        row.rebateReceivedDate = new Date()
+      }
+      // 如果设置为"否"，清空日期
+      if (row.isRebateReceived === 0) {
+        row.rebateReceivedDate = null
+      }
+      // 调用后端API更新数据库
+      updateJDOrder(row).then(() => {
+        this.$message.success(`订单 ${row.remark} 的后返到账状态已更新`)
+      }).catch(() => {
+        this.$message.error('更新失败，请稍后重试')
+        // 恢复原状态
+        row.isRebateReceived = oldValue
+        if (row.isRebateReceived === 0) {
+          row.rebateReceivedDate = null
+        }
+      })
+    },
     /** 处理后返到账开关变化 */
     handleRebateReceivedChange(row) {
       // 如果设置为"是"，自动设置当前日期
@@ -1092,6 +1152,63 @@ export default {
 </script>
 
 <style scoped>
+/* 优化表格滚动条 */
+.order-table ::v-deep .el-table__body-wrapper {
+  scrollbar-width: thick; /* Firefox */
+  scrollbar-color: #c1c1c1 #f1f1f1; /* Firefox */
+}
+
+.order-table ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+.order-table ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 6px;
+}
+
+.order-table ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 6px;
+  border: 2px solid #f1f1f1;
+}
+
+.order-table ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 优化标签样式 */
+.order-table ::v-deep .el-tag {
+  transition: all 0.3s;
+  user-select: none;
+}
+
+.order-table ::v-deep .el-tag:hover {
+  opacity: 0.8;
+  transform: scale(1.05);
+}
+
+/* 优化操作按钮布局 */
+.order-table ::v-deep .el-table__fixed-right {
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 优化表格单元格内容 */
+.order-table ::v-deep .el-table td {
+  padding: 8px 0;
+}
+
+.order-table ::v-deep .el-table th {
+  padding: 10px 0;
+  background-color: #fafafa;
+  font-weight: 600;
+}
+
+/* 优化固定列 */
+.order-table ::v-deep .el-table__fixed-left {
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+}
 </style>