CC/ruoyi-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
Leo
2025-11-15 01:02:52 +08:00
parent c3f342dfba
commit a2a9f01e2c
1 changed files with 263 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

409
src/views/system/jdorder/orderList.vue
View File

@@ -59,169 +59,157 @@
<!-- 表格区域 --> <!-- 表格区域 -->
<template #table> <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
<el-table-column label="ID" prop="id" width="80" /> :data="list"
<el-table-column label="内部单号" prop="remark" width="160" sortable/> v-loading="loading"
border
<el-table-column label="订单号" prop="orderId" width="200"> 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"> <template slot-scope="scope">
<div> <span v-if="scope.row.thirdPartyOrderNo">{{ scope.row.thirdPartyOrderNo }}</span>
<span style="margin-right: 8px;">{{ scope.row.orderId }}</span> <span v-else style="color: #999;">-</span>
<el-button
type="text"
size="mini"
icon="el-icon-copy-document"
@click="copyToClipboard(scope.row.orderId)"
title="复制订单号"
>
复制
</el-button>
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="第三方单号" prop="thirdPartyOrderNo" width="180">
<template slot-scope="scope"> <!-- 业务信息列 -->
<div v-if="scope.row.thirdPartyOrderNo"> <el-table-column label="标记" prop="distributionMark" width="100"/>
<span style="margin-right: 8px;">{{ scope.row.thirdPartyOrderNo }}</span> <el-table-column label="型号" prop="modelNumber" width="160"/>
<el-button <el-table-column label="地址" prop="address" min-width="280" show-overflow-tooltip/>
type="text"
size="mini" <!-- 金额信息列 -->
icon="el-icon-copy-document" <el-table-column label="付款金额" prop="paymentAmount" width="110" align="right">
@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">
<template slot-scope="scope">{{ toYuan(scope.row.paymentAmount) }}</template> <template slot-scope="scope">{{ toYuan(scope.row.paymentAmount) }}</template>
</el-table-column> </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> <template slot-scope="scope">{{ toYuan(scope.row.rebateAmount) }}</template>
</el-table-column> </el-table-column>
<el-table-column label="京粉实际价格" prop="jingfenActualPrice" width="140"> <el-table-column label="下单人" prop="buyer" width="100"/>
<template slot-scope="scope">{{ toYuan(scope.row.jingfenActualPrice) }}</template>
</el-table-column> <!-- 退款状态标签列（合并显示） -->
<el-table-column label="下单人" prop="buyer" width="140"/> <el-table-column label="退款状态" width="180" align="center">
<el-table-column label="备注/状态" prop="status" min-width="160"/>
<el-table-column label="参与统计" prop="isCountEnabled" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <div style="display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;">
v-model="scope.row.isCountEnabled" <el-tag
:active-value="1" :type="scope.row.isRefunded === 1 ? 'warning' : 'info'"
:inactive-value="0" size="small"
@change="handleCountEnabledChange(scope.row)" :title="scope.row.isRefunded === 1 && scope.row.refundDate ? '退款日期：' + parseTime(scope.row.refundDate) : ''"
active-text="是" @click.native="toggleRefunded(scope.row)"
inactive-text="否"> style="cursor: pointer;">
</el-switch> {{ scope.row.isRefunded === 1 ? '已退款' : '未退款' }}
</template> </el-tag>
</el-table-column> <el-tag
:type="scope.row.isRefundReceived === 1 ? 'success' : 'info'"
<el-table-column label="物流链接" prop="logisticsLink" width="200"> size="small"
<template slot-scope="scope"> :title="scope.row.isRefundReceived === 1 && scope.row.refundReceivedDate ? '退款到账日期：' + parseTime(scope.row.refundReceivedDate) : ''"
<div v-if="scope.row.logisticsLink"> @click.native="toggleRefundReceived(scope.row)"
<a :href="scope.row.logisticsLink" target="_blank" style="margin-right: 8px;">查看物流</a> style="cursor: pointer;">
<el-button {{ scope.row.isRefundReceived === 1 ? '退款到账' : '未到账' }}
type="text" </el-tag>
size="mini" <el-tag
icon="el-icon-copy-document" :type="scope.row.isRebateReceived === 1 ? 'success' : 'info'"
@click="copyToClipboard(scope.row.logisticsLink)" size="small"
title="复制链接" :title="scope.row.isRebateReceived === 1 && scope.row.rebateReceivedDate ? '后返到账日期：' + parseTime(scope.row.rebateReceivedDate) : ''"
> @click.native="toggleRebateReceived(scope.row)"
复制 style="cursor: pointer;">
</el-button> {{ scope.row.isRebateReceived === 1 ? '后返到账' : '未到账' }}
</el-tag>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="赔付金额" prop="proPriceAmount" width="140"/>
<!-- 时间信息列 -->
<el-table-column label="创建时间" prop="createTime" width="160" sortable="custom"> <el-table-column label="创建时间" prop="createTime" width="160" sortable="custom">
<template slot-scope="scope">{{ parseTime(scope.row.createTime) }}</template> <template slot-scope="scope">{{ parseTime(scope.row.createTime) }}</template>
</el-table-column> </el-table-column>
<el-table-column label="完成时间" prop="finishTime" width="160"> <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>
<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"> <template slot-scope="scope">
<el-switch <div style="display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;">
v-model="scope.row.isRefunded" <!-- 复制操作 -->
:active-value="1" <el-button
:inactive-value="0" type="text"
@change="handleRefundedChange(scope.row)"> size="mini"
</el-switch> icon="el-icon-copy-document"
</template> @click="copyToClipboard(scope.row.orderId)"
</el-table-column> title="复制订单号">
<el-table-column label="退款日期" prop="refundDate" width="160"> 订单号
<template slot-scope="scope">{{ parseTime(scope.row.refundDate) }}</template> </el-button>
</el-table-column> <el-button
<el-table-column label="是否退款到账" prop="isRefundReceived" width="120"> v-if="scope.row.thirdPartyOrderNo"
<template slot-scope="scope"> type="text"
<el-switch size="mini"
v-model="scope.row.isRefundReceived" icon="el-icon-copy-document"
:active-value="1" @click="copyToClipboard(scope.row.thirdPartyOrderNo)"
:inactive-value="0" title="复制第三方单号">
@change="handleRefundReceivedChange(scope.row)"> 第三方
</el-switch> </el-button>
</template> <el-button
</el-table-column> type="text"
<el-table-column label="退款到账日期" prop="refundReceivedDate" width="160"> size="mini"
<template slot-scope="scope">{{ parseTime(scope.row.refundReceivedDate) }}</template> icon="el-icon-copy-document"
</el-table-column> @click="copyToClipboard(scope.row.address)"
<el-table-column label="后返到账" prop="isRebateReceived" width="100"> title="复制地址">
<template slot-scope="scope"> 地址
<el-switch </el-button>
v-model="scope.row.isRebateReceived" <el-button
:active-value="1" v-if="scope.row.logisticsLink"
:inactive-value="0" type="text"
@change="handleRebateReceivedChange(scope.row)"> size="mini"
</el-switch> icon="el-icon-copy-document"
</template> @click="copyToClipboard(scope.row.logisticsLink)"
</el-table-column> title="复制物流链接">
<el-table-column label="后返到账日期" prop="rebateReceivedDate" width="160"> 物流
<template slot-scope="scope">{{ parseTime(scope.row.rebateReceivedDate) }}</template> </el-button>
</el-table-column> <!-- 业务操作 -->
<el-table-column label="操作" fixed="right" width="220"> <el-button
<template slot-scope="scope"> type="text"
<el-button size="mini"
type="text" @click="copyReturnInfo(scope.row)"
size="mini" title="复制退货信息">
@click="copyReturnInfo(scope.row)" 退货复制
> </el-button>
退货复制 <el-button
</el-button> type="text"
<el-button size="mini"
type="text" style="color: #67C23A;"
size="mini" @click="handleFetchLogistics(scope.row)"
style="color: #67C23A;" :title="scope.row.distributionMark">
@click="handleFetchLogistics(scope.row)" 获取物流
:title=scope.row.distributionMark </el-button>
> <!-- 统计开关 -->
获取物流 <el-switch
</el-button> v-model="scope.row.isCountEnabled"
<el-button type="text" size="mini" style="color: #f56c6c;" @click="handleDelete(scope.row)"> :active-value="1"
删除 :inactive-value="0"
</el-button> @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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@@ -707,6 +695,30 @@ export default {
row.isCountEnabled = row.isCountEnabled ? 0 : 1 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) { 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) { 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) { handleRebateReceivedChange(row) {
// 如果设置为"是"，自动设置当前日期 // 如果设置为"是"，自动设置当前日期
@@ -1092,6 +1152,63 @@ export default {
</script> </script>
<style scoped> <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> </style>