This commit is contained in:
Leo
2026-01-06 01:08:28 +08:00
parent b38633ff49
commit f79535622a

View File

@@ -124,9 +124,9 @@
<!-- 业务信息列 --> <!-- 业务信息列 -->
<el-table-column label="标记" prop="distributionMark" width="100"/> <el-table-column label="标记" prop="distributionMark" width="100"/>
<el-table-column label="型号" prop="modelNumber" width="160"/> <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="address" min-width="280" show-overflow-tooltip class-name="address-cell">
<template slot-scope="scope"> <template slot-scope="scope">
<span style="font-weight: bold;">{{ scope.row.address }}</span> <span style="font-weight: bold; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ scope.row.address }}</span>
</template> </template>
</el-table-column> </el-table-column>
@@ -288,95 +288,107 @@
</el-dropdown> </el-dropdown>
</div> </div>
<!-- 桌面端正常显示所有按钮 --> <!-- 桌面端优化后的按钮布局 -->
<div v-else style="display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;"> <div v-else class="desktop-action-buttons-wrapper">
<!-- 复制操作 --> <!-- 主要操作按钮第一行 -->
<el-button <div class="action-row-primary">
type="text" <el-button
size="mini" type="text"
icon="el-icon-copy-document" size="mini"
@click="copyToClipboard(scope.row.orderId)" icon="el-icon-copy-document"
title="复制订单号"> @click="copyToClipboard(scope.row.orderId)"
订单号 title="复制订单号">
</el-button> 订单号
<el-button </el-button>
v-if="scope.row.thirdPartyOrderNo" <el-button
type="text" v-if="scope.row.thirdPartyOrderNo"
size="mini" type="text"
icon="el-icon-copy-document" size="mini"
@click="copyToClipboard(scope.row.thirdPartyOrderNo)" icon="el-icon-copy-document"
title="复制第三方单号"> @click="copyToClipboard(scope.row.thirdPartyOrderNo)"
第三方 title="复制第三方单号">
</el-button> 第三方
<el-button </el-button>
type="text" <el-button
size="mini" type="text"
icon="el-icon-copy-document" size="mini"
@click="copyToClipboard(scope.row.address)" icon="el-icon-copy-document"
title="复制地址"> @click="copyToClipboard(scope.row.address)"
地址 title="复制地址">
</el-button> 地址
<el-button </el-button>
v-if="scope.row.logisticsLink" <el-button
type="text" v-if="scope.row.logisticsLink"
size="mini" type="text"
icon="el-icon-copy-document" size="mini"
@click="copyToClipboard(scope.row.logisticsLink)" icon="el-icon-copy-document"
title="复制物流链接"> @click="copyToClipboard(scope.row.logisticsLink)"
物流 title="复制物流链接">
</el-button> 物流
<!-- 业务操作 --> </el-button>
<el-button <el-button
type="text" type="text"
size="mini" size="mini"
@click="copyReturnInfo(scope.row)" style="color: #67C23A;"
title="复制退货信息"> @click="handleFetchLogistics(scope.row)"
退货复制 :title="scope.row.distributionMark">
</el-button> 获取物流
<el-button </el-button>
type="text" </div>
size="mini"
icon="el-icon-document-copy" <!-- 次要操作按钮第二行使用下拉菜单 -->
@click="copySingleOrderExcelText(scope.row)" <div class="action-row-secondary">
:style="isExcelTextCopied(scope.row.id) ? 'color: #67C23A;' : ''" <el-dropdown
:title="isExcelTextCopied(scope.row.id) ? '已复制录单格式Excel可粘贴' : '复制录单格式Excel可粘贴'"> trigger="hover"
录单格式 placement="bottom-end"
</el-button> @command="handleActionCommand"
<el-button size="small">
type="text" <el-button
size="mini" type="text"
icon="el-icon-document-copy" size="mini"
@click="copyRebateRecordText(scope.row)" icon="el-icon-more">
title="复制后返录表格式Excel可粘贴"> 更多操作<i class="el-icon-arrow-down el-icon--right"></i>
后返录表 </el-button>
</el-button> <el-dropdown-menu slot="dropdown" class="desktop-action-dropdown">
<el-button <el-dropdown-item
type="text" :command="{action: 'copyReturn', row: scope.row}"
size="mini" icon="el-icon-document-copy">
style="color: #67C23A;" 退货复制
@click="handleFetchLogistics(scope.row)" </el-dropdown-item>
:title="scope.row.distributionMark"> <el-dropdown-item
获取物流 :command="{action: 'copyExcel', row: scope.row}"
</el-button> icon="el-icon-document-copy"
<!-- 统计开关 --> :class="{'is-copied': isExcelTextCopied(scope.row.id)}">
<el-switch {{ isExcelTextCopied(scope.row.id) ? '✓ 录单格式(已复制)' : '录单格式' }}
v-model="scope.row.isCountEnabled" </el-dropdown-item>
:active-value="1" <el-dropdown-item
:inactive-value="0" :command="{action: 'copyRebate', row: scope.row}"
@change="handleCountEnabledChange(scope.row)" icon="el-icon-document-copy">
active-text="统计" 后返录表
inactive-text="" </el-dropdown-item>
style="margin-left: 4px;"> <el-dropdown-item divided>
</el-switch> <div style="display: flex; align-items: center; justify-content: space-between; padding: 0 10px;">
<!-- 删除操作 --> <span>统计</span>
<el-button <el-switch
type="text" v-model="scope.row.isCountEnabled"
size="mini" :active-value="1"
style="color: #f56c6c;" :inactive-value="0"
@click="handleDelete(scope.row)" @change="handleCountEnabledChange(scope.row)"
title="删除订单"> size="mini"
删除 style="margin-left: 10px;">
</el-button> </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> </div>
</template> </template>
</el-table-column> </el-table-column>
@@ -1825,6 +1837,14 @@ export default {
padding: 8px 0; padding: 8px 0;
} }
/* 优化地址列显示,防止过长换行 */
.order-table ::v-deep .el-table .address-cell {
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.order-table ::v-deep .el-table th { .order-table ::v-deep .el-table th {
padding: 10px 0; padding: 10px 0;
background-color: #fafafa; background-color: #fafafa;
@@ -1888,24 +1908,73 @@ export default {
} }
} }
/* 桌面端操作按钮优化布局 */
.desktop-action-buttons-wrapper {
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
min-width: 200px;
}
.desktop-action-buttons-wrapper .action-row-primary {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
align-items: center;
}
.desktop-action-buttons-wrapper .action-row-secondary {
display: flex;
justify-content: center;
align-items: center;
}
.desktop-action-buttons-wrapper .el-button {
padding: 5px 8px;
font-size: 12px;
white-space: nowrap;
}
/* 桌面端下拉菜单样式 */
::v-deep .desktop-action-dropdown {
min-width: 160px;
}
::v-deep .desktop-action-dropdown .el-dropdown-menu__item {
padding: 10px 20px;
font-size: 13px;
}
::v-deep .desktop-action-dropdown .el-dropdown-menu__item.is-copied {
color: #67C23A;
}
/* 桌面端确保操作列正常显示 */ /* 桌面端确保操作列正常显示 */
@media (min-width: 769px) { @media (min-width: 769px) {
.order-table ::v-deep .action-column { .order-table ::v-deep .action-column {
width: 280px !important; width: 220px !important;
} }
.order-table ::v-deep .el-table__fixed-right { .order-table ::v-deep .el-table__fixed-right {
width: 280px !important; width: 220px !important;
} }
.order-table ::v-deep .el-table__fixed-right-patch { .order-table ::v-deep .el-table__fixed-right-patch {
width: 280px !important; width: 220px !important;
} }
/* 隐藏移动端按钮 */ /* 隐藏移动端按钮 */
.mobile-action-wrapper { .mobile-action-wrapper {
display: none !important; display: none !important;
} }
/* 优化表格单元格高度 */
.order-table ::v-deep .action-column .cell {
padding: 8px 4px;
line-height: 1.4;
}
} }
/* 操作按钮区域 */ /* 操作按钮区域 */