1
This commit is contained in:
Leo
@@ -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>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user