421 lines
15 KiB
Vue
421 lines
15 KiB
Vue
<template>
|
|
<div>
|
|
<list-layout>
|
|
<!-- 搜索区域 -->
|
|
<template #search>
|
|
<el-form :inline="true" :model="queryParams" label-width="80px">
|
|
<el-form-item label="备注">
|
|
<el-input v-model="queryParams.remark" placeholder="单据备注" clearable size="small" @keyup.enter.native="handleQuery" />
|
|
</el-form-item>
|
|
<el-form-item label="分销标记">
|
|
<el-input v-model="queryParams.distributionMark" placeholder="分销标记" clearable size="small" @keyup.enter.native="handleQuery" />
|
|
</el-form-item>
|
|
<el-form-item label="型号">
|
|
<el-input v-model="queryParams.modelNumber" placeholder="型号" clearable size="small" @keyup.enter.native="handleQuery" />
|
|
</el-form-item>
|
|
<el-form-item label="订单号">
|
|
<el-input v-model="queryParams.orderId" placeholder="订单号" clearable size="small" @keyup.enter.native="handleQuery" />
|
|
</el-form-item>
|
|
<el-form-item label="下单人">
|
|
<el-input v-model="queryParams.buyer" placeholder="下单人" clearable size="small" @keyup.enter.native="handleQuery" />
|
|
</el-form-item>
|
|
<el-form-item label="地址">
|
|
<el-input v-model="queryParams.address" placeholder="收货地址" clearable size="small" @keyup.enter.native="handleQuery" />
|
|
</el-form-item>
|
|
<el-form-item label="状态">
|
|
<el-input v-model="queryParams.status" placeholder="备注/状态" clearable size="small" @keyup.enter.native="handleQuery" />
|
|
</el-form-item>
|
|
<el-form-item label="下单时间">
|
|
<el-date-picker
|
|
v-model="dateRange"
|
|
type="daterange"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
value-format="yyyy-MM-dd"
|
|
size="small"
|
|
range-separator="至"
|
|
@change="handleDateRangeChange"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
|
<el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
|
<el-button type="warning" size="small" icon="el-icon-download" @click="handleExport" v-hasPermi="['system:jdorder:export']">导出</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
|
|
<!-- 表格区域 -->
|
|
<template #table>
|
|
<el-table :data="list" v-loading="loading" border stripe :default-sort="{prop: 'createTime', order: 'descending'}" @sort-change="handleSortChange">
|
|
<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">
|
|
<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>
|
|
</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>
|
|
</el-table-column>
|
|
<el-table-column label="后返金额" prop="rebateAmount" width="120">
|
|
<template slot-scope="scope">{{ toYuan(scope.row.rebateAmount) }}</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">
|
|
<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>
|
|
</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>
|
|
</el-table-column>
|
|
<el-table-column label="操作" fixed="right" width="120">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="mini" style="color: #f56c6c;" @click="handleDelete(scope.row)">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</template>
|
|
|
|
<!-- 分页区域 -->
|
|
<template #pagination>
|
|
<pagination
|
|
v-show="total > 0"
|
|
:total="total"
|
|
:page.sync="queryParams.pageNum"
|
|
:limit.sync="queryParams.pageSize"
|
|
@pagination="getList"
|
|
/>
|
|
</template>
|
|
</list-layout>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { listJDOrders, updateJDOrder, delJDOrder } from '@/api/system/jdorder'
|
|
import ListLayout from '@/components/ListLayout'
|
|
|
|
export default {
|
|
name: 'JDOrderList',
|
|
components: {
|
|
ListLayout
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
list: [],
|
|
total: 0,
|
|
dateRange: [],
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 50,
|
|
remark: undefined,
|
|
distributionMark: undefined,
|
|
modelNumber: undefined,
|
|
link: undefined,
|
|
orderId: undefined,
|
|
buyer: undefined,
|
|
address: undefined,
|
|
status: undefined,
|
|
beginTime: null,
|
|
endTime: null,
|
|
orderBy: 'create_time',
|
|
isAsc: 'desc'
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
// 设置默认日期为今天
|
|
this.setDefaultDateRange()
|
|
this.getListWithFallback()
|
|
},
|
|
methods: {
|
|
/** 设置默认日期范围为今天 */
|
|
setDefaultDateRange() {
|
|
const today = new Date()
|
|
const todayStr = this.formatDate(today)
|
|
this.dateRange = [todayStr, todayStr]
|
|
this.queryParams.beginTime = todayStr
|
|
this.queryParams.endTime = todayStr
|
|
},
|
|
/** 格式化日期为 yyyy-MM-dd 格式 */
|
|
formatDate(date) {
|
|
const year = date.getFullYear()
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
return `${year}-${month}-${day}`
|
|
},
|
|
getList() {
|
|
this.loading = true
|
|
listJDOrders(this.queryParams).then(res => {
|
|
this.list = (res.rows || res.data || [])
|
|
this.total = res.total || 0
|
|
this.loading = false
|
|
}).catch(() => { this.loading = false })
|
|
},
|
|
/** 智能查询列表，如果今天数据为空则查询昨天 */
|
|
async getListWithFallback() {
|
|
this.loading = true
|
|
|
|
try {
|
|
const res = await listJDOrders(this.queryParams)
|
|
this.list = (res.rows || res.data || [])
|
|
this.total = res.total || 0
|
|
|
|
// 如果今天的数据为空，且是默认查询（没有手动选择日期），则尝试查询昨天
|
|
if (this.list.length === 0 && this.isDefaultQuery()) {
|
|
this.$message.info('今天暂无慢单数据，正在查询昨天的数据...')
|
|
|
|
// 获取昨天的日期
|
|
const yesterday = new Date()
|
|
yesterday.setDate(yesterday.getDate() - 1)
|
|
const yesterdayStr = this.formatDate(yesterday)
|
|
|
|
// 更新查询参数为昨天
|
|
this.queryParams.beginTime = yesterdayStr
|
|
this.queryParams.endTime = yesterdayStr
|
|
this.dateRange = [yesterdayStr, yesterdayStr]
|
|
|
|
// 查询昨天的数据
|
|
const yesterdayRes = await listJDOrders(this.queryParams)
|
|
this.list = (yesterdayRes.rows || yesterdayRes.data || [])
|
|
this.total = yesterdayRes.total || 0
|
|
|
|
if (this.list.length > 0) {
|
|
this.$message.success(`已查询到昨天(${yesterdayStr})的慢单数据`)
|
|
} else {
|
|
this.$message.warning('昨天也没有慢单数据')
|
|
}
|
|
}
|
|
|
|
this.loading = false
|
|
} catch (error) {
|
|
this.loading = false
|
|
this.$message.error('查询失败，请稍后重试')
|
|
}
|
|
},
|
|
/** 判断是否为默认查询（今天的数据） */
|
|
isDefaultQuery() {
|
|
const today = new Date()
|
|
const todayStr = this.formatDate(today)
|
|
return this.queryParams.beginTime === todayStr && this.queryParams.endTime === todayStr
|
|
},
|
|
handleQuery() {
|
|
this.queryParams.pageNum = 1
|
|
this.getList()
|
|
},
|
|
resetQuery() {
|
|
this.queryParams = {
|
|
pageNum: 1,
|
|
pageSize: 50,
|
|
remark: undefined,
|
|
distributionMark: undefined,
|
|
modelNumber: undefined,
|
|
link: undefined,
|
|
orderId: undefined,
|
|
buyer: undefined,
|
|
address: undefined,
|
|
status: undefined,
|
|
beginTime: null,
|
|
endTime: null
|
|
}
|
|
// 重置排序为默认降序
|
|
this.queryParams.orderBy = 'create_time'
|
|
this.queryParams.isAsc = 'desc'
|
|
// 重置后重新设置默认日期为今天
|
|
this.setDefaultDateRange()
|
|
this.getListWithFallback()
|
|
},
|
|
/** 日期范围变化处理 */
|
|
handleDateRangeChange(dates) {
|
|
if (dates && dates.length === 2) {
|
|
this.queryParams.beginTime = dates[0]
|
|
this.queryParams.endTime = dates[1]
|
|
} else {
|
|
this.queryParams.beginTime = null
|
|
this.queryParams.endTime = null
|
|
}
|
|
},
|
|
/** 表格排序变化处理 */
|
|
handleSortChange(sortInfo) {
|
|
if (sortInfo && sortInfo.prop === 'createTime') {
|
|
if (sortInfo.order === 'ascending') {
|
|
this.queryParams.orderBy = 'create_time'
|
|
this.queryParams.isAsc = 'asc'
|
|
} else if (sortInfo.order === 'descending') {
|
|
this.queryParams.orderBy = 'create_time'
|
|
this.queryParams.isAsc = 'desc'
|
|
} else {
|
|
// 取消排序，恢复默认
|
|
this.queryParams.orderBy = 'create_time'
|
|
this.queryParams.isAsc = 'desc'
|
|
}
|
|
// 重新查询数据
|
|
this.queryParams.pageNum = 1
|
|
this.getList()
|
|
}
|
|
},
|
|
toYuan(n) {
|
|
if (n == null || n === '') return ''
|
|
const num = Number(n)
|
|
if (Number.isNaN(num)) return n
|
|
return num.toFixed(2)
|
|
},
|
|
/** 导出按钮操作 */
|
|
handleExport() {
|
|
this.download('/system/jdorder/export', this.queryParams, `京东订单数据_${new Date().getTime()}.xlsx`)
|
|
},
|
|
/** 复制到剪贴板 */
|
|
copyToClipboard(text) {
|
|
if (navigator.clipboard && window.isSecureContext) {
|
|
// 使用现代 Clipboard API
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
this.$message.success('已复制到剪贴板')
|
|
}).catch(() => {
|
|
this.fallbackCopyTextToClipboard(text)
|
|
})
|
|
} else {
|
|
// 降级方案
|
|
this.fallbackCopyTextToClipboard(text)
|
|
}
|
|
},
|
|
/** 降级复制方案 */
|
|
fallbackCopyTextToClipboard(text) {
|
|
const textArea = document.createElement('textarea')
|
|
textArea.value = text
|
|
textArea.style.position = 'fixed'
|
|
textArea.style.left = '-999999px'
|
|
textArea.style.top = '-999999px'
|
|
document.body.appendChild(textArea)
|
|
textArea.focus()
|
|
textArea.select()
|
|
|
|
try {
|
|
const successful = document.execCommand('copy')
|
|
if (successful) {
|
|
this.$message.success('已复制到剪贴板')
|
|
} else {
|
|
this.$message.error('复制失败，请手动复制')
|
|
}
|
|
} catch (err) {
|
|
this.$message.error('复制失败，请手动复制')
|
|
}
|
|
|
|
document.body.removeChild(textArea)
|
|
},
|
|
/** 处理统计开关变化 */
|
|
handleCountEnabledChange(row) {
|
|
// 调用后端API更新数据库
|
|
updateJDOrder(row).then(() => {
|
|
this.$message.success(`订单 ${row.remark} 的统计状态已更新为：${row.isCountEnabled ? '参与统计' : '不参与统计'}`)
|
|
}).catch(() => {
|
|
this.$message.error('更新失败，请稍后重试')
|
|
// 恢复原状态
|
|
row.isCountEnabled = row.isCountEnabled ? 0 : 1
|
|
})
|
|
},
|
|
/** 删除单条记录（需输入随机确认码） */
|
|
async handleDelete(row) {
|
|
const code = String(Math.floor(100000 + Math.random() * 900000))
|
|
try {
|
|
await this.$prompt(`请输入确认码以删除该订单：${code}`, '删除确认', {
|
|
confirmButtonText: '删除',
|
|
cancelButtonText: '取消',
|
|
inputPlaceholder: '请输入上方确认码',
|
|
inputValidator: (value) => {
|
|
if (value === code) return true
|
|
return '确认码不匹配，请重新输入'
|
|
},
|
|
inputErrorMessage: '确认码不匹配',
|
|
type: 'warning',
|
|
dangerouslyUseHTMLString: false
|
|
})
|
|
} catch (e) {
|
|
return
|
|
}
|
|
|
|
this.loading = true
|
|
try {
|
|
await delJDOrder(row.id)
|
|
this.$message.success('删除成功')
|
|
this.getList()
|
|
} catch (e) {
|
|
this.$message.error('删除失败，请稍后重试')
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|
|
|
|
|