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
2026-01-05 23:15:23 +08:00
parent 0d03604888
commit 8d2433e432
1 changed files with 203 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -203,9 +203,93 @@
</el-table-column>
<!-- 操作列（统一放在最右侧） -->
<el-table-column label="操作" fixed="right" width="280" align="center">
<el-table-column label="操作" fixed="right" :width="isMobile ? 60 : 280" align="center" class-name="action-column">
<template slot-scope="scope">
<div style="display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;">
<!-- 移动端：悬浮操作按钮 -->
<div v-if="isMobile" class="mobile-action-wrapper">
<el-dropdown
trigger="click"
placement="left"
@command="handleActionCommand"
:popper-class="'mobile-action-dropdown'">
<el-button
type="primary"
size="mini"
icon="el-icon-more"
circle
class="mobile-action-btn">
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
:command="{action: 'copyOrderId', row: scope.row}"
icon="el-icon-copy-document">
复制订单号
</el-dropdown-item>
<el-dropdown-item
v-if="scope.row.thirdPartyOrderNo"
:command="{action: 'copyThirdParty', row: scope.row}"
icon="el-icon-copy-document">
复制第三方单号
</el-dropdown-item>
<el-dropdown-item
:command="{action: 'copyAddress', row: scope.row}"
icon="el-icon-copy-document">
复制地址
</el-dropdown-item>
<el-dropdown-item
v-if="scope.row.logisticsLink"
:command="{action: 'copyLogistics', row: scope.row}"
icon="el-icon-copy-document">
复制物流链接
</el-dropdown-item>
<el-dropdown-item
:command="{action: 'copyReturn', row: scope.row}"
icon="el-icon-document-copy">
退货复制
</el-dropdown-item>
<el-dropdown-item
:command="{action: 'copyExcel', row: scope.row}"
icon="el-icon-document-copy"
:class="{'is-copied': isExcelTextCopied(scope.row.id)}">
{{ isExcelTextCopied(scope.row.id) ? '✓ 录单格式（已复制）' : '录单格式' }}
</el-dropdown-item>
<el-dropdown-item
:command="{action: 'copyRebate', row: scope.row}"
icon="el-icon-document-copy">
后返录表
</el-dropdown-item>
<el-dropdown-item
:command="{action: 'fetchLogistics', row: scope.row}"
icon="el-icon-truck"
style="color: #67C23A;">
获取物流
</el-dropdown-item>
<el-dropdown-item divided>
<div style="display: flex; align-items: center; justify-content: space-between; padding: 0 10px;">
<span>统计</span>
<el-switch
v-model="scope.row.isCountEnabled"
:active-value="1"
:inactive-value="0"
@change="handleCountEnabledChange(scope.row)"
size="mini"
style="margin-left: 10px;">
</el-switch>
</div>
</el-dropdown-item>
<el-dropdown-item
:command="{action: 'delete', row: scope.row}"
icon="el-icon-delete"
divided
style="color: #f56c6c;">
删除
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<!-- 桌面端：正常显示所有按钮 -->
<div v-else style="display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;">
<!-- 复制操作 -->
<el-button
type="text"
@@ -485,6 +569,7 @@
<script>
import { listJDOrders, updateJDOrder, delJDOrder, fetchLogisticsManually, batchMarkRebateReceived, generateExcelText } from '@/api/system/jdorder'
import { fillLogisticsByOrderNo, getTokenStatus, getTencentDocAuthUrl, testUserInfo, getAutoWriteConfig, reverseSyncThirdPartyOrderNo } from '@/api/jarvis/tendoc'
import { mapGetters } from 'vuex'
import ListLayout from '@/components/ListLayout'
import MobileSearchForm from '@/components/MobileSearchForm'
import MobileButtonGroup from '@/components/MobileButtonGroup'
@@ -562,6 +647,18 @@ export default {
}
},
computed: {
...mapGetters(['device']),
isMobile() {
// 只在移动端返回true，桌面端严格返回false
if (this.device === 'mobile') {
return true
}
// 如果device不是mobile，检查窗口宽度（用于响应式）
if (typeof window !== 'undefined' && window.innerWidth < 768) {
return true
}
return false
},
actionButtons() {
return [
{ key: 'export', label: '导出', type: 'warning', icon: 'el-icon-download', handler: () => this.handleExport() },
@@ -600,6 +697,38 @@ export default {
}
},
methods: {
/** 处理移动端操作菜单命令 */
handleActionCommand({ action, row }) {
switch (action) {
case 'copyOrderId':
this.copyToClipboard(row.orderId)
break
case 'copyThirdParty':
this.copyToClipboard(row.thirdPartyOrderNo)
break
case 'copyAddress':
this.copyToClipboard(row.address)
break
case 'copyLogistics':
this.copyToClipboard(row.logisticsLink)
break
case 'copyReturn':
this.copyReturnInfo(row)
break
case 'copyExcel':
this.copySingleOrderExcelText(row)
break
case 'copyRebate':
this.copyRebateRecordText(row)
break
case 'fetchLogistics':
this.handleFetchLogistics(row)
break
case 'delete':
this.handleDelete(row)
break
}
},
/** 快速搜索 */
handleQuickSearch(keyword) {
if (!keyword) {
@@ -1707,6 +1836,78 @@ export default {
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}
/* 移动端操作按钮样式 - 只在移动端生效 */
@media (max-width: 768px) {
.mobile-action-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.mobile-action-btn {
width: 36px;
height: 36px;
padding: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* 移动端下拉菜单样式 */
::v-deep .mobile-action-dropdown {
min-width: 180px;
max-width: 240px;
}
::v-deep .mobile-action-dropdown .el-dropdown-menu__item {
padding: 12px 20px;
font-size: 14px;
line-height: 1.5;
}
::v-deep .mobile-action-dropdown .el-dropdown-menu__item.is-copied {
color: #67C23A;
}
::v-deep .mobile-action-dropdown .el-dropdown-menu__item--divided {
border-top: 1px solid #e4e7ed;
margin-top: 4px;
padding-top: 8px;
}
/* 移动端隐藏操作列标题 */
.order-table ::v-deep .action-column .el-table__column-filter-trigger,
.order-table ::v-deep .action-column .cell {
padding: 8px 4px;
}
.order-table ::v-deep .el-table__fixed-right {
width: 60px !important;
}
.order-table ::v-deep .el-table__fixed-right-patch {
width: 60px !important;
}
}
/* 桌面端确保操作列正常显示 */
@media (min-width: 769px) {
.order-table ::v-deep .action-column {
width: 280px !important;
}
.order-table ::v-deep .el-table__fixed-right {
width: 280px !important;
}
.order-table ::v-deep .el-table__fixed-right-patch {
width: 280px !important;
}
/* 隐藏移动端按钮 */
.mobile-action-wrapper {
display: none !important;
}
}
/* 操作按钮区域 */
.action-buttons-section {
margin-top: 12px;