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:
van
2026-04-07 11:05:50 +08:00
parent 3d2bf9902d
commit f685a5e7e4
1 changed files with 422 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,9 @@
<template>
<div>
<div class="jd-order-list-root">
<list-layout>
<!-- 搜索区域 -->
<template #search>
<div class="jd-order-search-panel">
<!-- 移动端：搜索表单部分 -->
<mobile-search-form
:model="queryParams"
@@ -14,7 +15,8 @@
<el-form
:model="queryParams"
:inline="true"
label-width="68px"
class="jd-order-filter-form"
label-width="76px"
label-position="left"
>
<el-form-item label="备注">
@@ -122,30 +124,27 @@
/>
</div>
<!-- 桌面端按钮组 -->
<div class="desktop-action-buttons desktop-only">
<el-button type="success" size="small" icon="el-icon-setting" @click="showAutoWriteConfig = true" title="配置H-TF订单自动写入腾讯文档">腾峰文档配置</el-button>
<el-button type="success" size="small" icon="el-icon-monitor" @click="showPushMonitor = true" title="查看推送监控和历史记录">推送监控</el-button>
<el-button type="warning" size="small" icon="el-icon-user" @click="showTouserConfig = true" title="配置分销标识对应的企业微信接收人">接收人配置</el-button>
<el-button type="primary" size="small" icon="el-icon-refresh-right" @click="handleBatchSyncLogistics" :loading="batchSyncLoading" title="批量同步物流链接到腾讯文档">一键发货到腾峰</el-button>
<el-button type="success" size="small" icon="el-icon-check" @click="handleBatchMarkRebateReceived" :loading="batchMarkLoading" title="批量将赔付金额大于0的订单标记为后返到账（仅执行一次）">批量标记后返到账</el-button>
<el-button type="warning" size="small" icon="el-icon-sort" @click="handleReverseSyncThirdPartyOrderNo" :loading="reverseSyncLoading" title="从腾讯文档第850行开始，通过物流链接反向匹配订单，将腾讯文档的单号列值写入到订单的第三方单号字段">反向同步第三方单号</el-button>
<el-button v-if="!isMobile" type="primary" size="small" icon="el-icon-document-copy" @click="handleBatchCopyExcelText" :disabled="selectedRows.length === 0" title="批量复制选中订单的录单格式（Excel可粘贴）">批量复制录单格式</el-button>
<el-button v-if="!isMobile" type="primary" size="small" icon="el-icon-upload2" @click="rebateImportDialogVisible = true" title="可一次选多个 Excel，提交后由后台依次导入；详情见后返上传记录">导入后返表</el-button>
<el-button v-if="!isMobile" type="info" size="small" icon="el-icon-folder-opened" @click="openRebateUploadRecordDialog" title="查看历史上传的后返表原件并可重新下载">后返上传记录</el-button>
<el-button v-if="!isMobile" type="success" size="small" icon="el-icon-document-copy" @click="handleBatchCopyRebateText" :disabled="selectedRows.length === 0" title="批量复制选中订单的后返录表格式（Excel可粘贴）">批量复制后返录表</el-button>
<el-button v-if="!isMobile" type="info" size="small" icon="el-icon-document-copy" @click="handleBatchCopySichuanCommerceText" :disabled="selectedRows.length === 0" title="批量复制选中订单的四川商贸录表格式（日期 型号 数量 地址 价格 备注 是否安排 物流）">四川商贸录表</el-button>
<el-button v-if="!isMobile" type="warning" size="small" icon="el-icon-refresh" @click="handleBatchRecalcProfit" :disabled="selectedRows.length === 0" title="清除售价/利润手动锁定并按规则重算（依赖型号配置与当前付款、后返）">批量重算利润</el-button>
<!-- 桌面端：克制的工具栏（低饱和 + plain） -->
<div class="desktop-action-buttons desktop-only jd-order-toolbar">
<el-button class="jd-tb-muted" plain size="small" icon="el-icon-setting" @click="showAutoWriteConfig = true" title="配置H-TF订单自动写入腾讯文档">腾峰文档配置</el-button>
<el-button class="jd-tb-muted" plain size="small" icon="el-icon-monitor" @click="showPushMonitor = true" title="查看推送监控和历史记录">推送监控</el-button>
<el-button class="jd-tb-muted" plain size="small" icon="el-icon-user" @click="showTouserConfig = true" title="配置分销标识对应的企业微信接收人">接收人配置</el-button>
<el-button type="primary" plain size="small" icon="el-icon-refresh-right" @click="handleBatchSyncLogistics" :loading="batchSyncLoading" title="批量同步物流链接到腾讯文档">一键发货到腾峰</el-button>
<el-button class="jd-tb-muted" plain size="small" icon="el-icon-check" @click="handleBatchMarkRebateReceived" :loading="batchMarkLoading" title="批量将赔付金额大于0的订单标记为后返到账（仅执行一次）">批量标记后返到账</el-button>
<el-button class="jd-tb-muted" plain size="small" icon="el-icon-sort" @click="handleReverseSyncThirdPartyOrderNo" :loading="reverseSyncLoading" title="从腾讯文档第850行开始，通过物流链接反向匹配订单，将腾讯文档的单号列值写入到订单的第三方单号字段">反向同步第三方单号</el-button>
<el-button v-if="!isMobile" type="primary" plain size="small" icon="el-icon-document-copy" @click="handleBatchCopyExcelText" :disabled="selectedRows.length === 0" title="批量复制选中订单的录单格式（Excel可粘贴）">批量复制录单格式</el-button>
<el-button v-if="!isMobile" type="primary" plain size="small" icon="el-icon-upload2" @click="rebateImportDialogVisible = true" title="可一次选多个 Excel，提交后由后台依次导入；详情见后返上传记录">导入后返表</el-button>
<el-button v-if="!isMobile" class="jd-tb-muted" plain size="small" icon="el-icon-folder-opened" @click="openRebateUploadRecordDialog" title="查看历史上传的后返表原件并可重新下载">后返上传记录</el-button>
<el-button v-if="!isMobile" class="jd-tb-muted" plain size="small" icon="el-icon-document-copy" @click="handleBatchCopyRebateText" :disabled="selectedRows.length === 0" title="批量复制选中订单的后返录表格式（Excel可粘贴）">批量复制后返录表</el-button>
<el-button v-if="!isMobile" class="jd-tb-muted" plain size="small" icon="el-icon-document-copy" @click="handleBatchCopySichuanCommerceText" :disabled="selectedRows.length === 0" title="批量复制选中订单的四川商贸录表格式（日期 型号 数量 地址 价格 备注 是否安排 物流）">四川商贸录表</el-button>
<el-button v-if="!isMobile" class="jd-tb-muted" plain size="small" icon="el-icon-refresh" @click="handleBatchRecalcProfit" :disabled="selectedRows.length === 0" title="清除售价/利润手动锁定并按规则重算（依赖型号配置与当前付款、后返）">批量重算利润</el-button>
</div>
</div>
</template>
<!-- 表格区域 -->
<template #table>
<div v-if="!isMobile" ref="profitSummaryBar" class="profit-summary-bar sticky-summary">
<span class="profit-summary-item">统计范围：<b>{{ profitSummaryLabel }}</b></span>
<span class="profit-summary-item">后返合计：<b>{{ toYuan(profitSummaryRebateTotal) }}</b></span>
<span class="profit-summary-item">利润合计：<b>{{ profitSummaryProfitTotal === '' ? '—' : toYuan(profitSummaryProfitTotal) }}</b></span>
</div>
<div class="jd-order-table-page">
<!-- 移动端卡片列表 -->
<div v-if="isMobile" class="mobile-order-list" v-loading="loading">
<div class="profit-summary-bar mobile-profit-summary">
@@ -395,20 +394,25 @@
<el-empty v-if="!loading && list.length === 0" description="暂无数据" :image-size="100" />
</div>
<!-- 桌面端表格 -->
<el-table v-else
<!-- 桌面端：统计条 + 表格（height 固定表头，滚动条在表体） -->
<div v-else class="jd-order-table-wrap">
<div ref="profitSummaryBar" class="profit-summary-bar sticky-summary">
<span class="profit-summary-item">统计范围：<b>{{ profitSummaryLabel }}</b></span>
<span class="profit-summary-item">后返合计：<b>{{ toYuan(profitSummaryRebateTotal) }}</b></span>
<span class="profit-summary-item">利润合计：<b>{{ profitSummaryProfitTotal === '' ? '—' : toYuan(profitSummaryProfitTotal) }}</b></span>
</div>
<el-table
:data="list"
v-loading="loading"
border
stripe
size="medium"
height="calc(100% - 56px)"
height="100%"
:default-sort="{prop: 'createTime', order: 'descending'}"
@sort-change="handleSortChange"
@selection-change="handleSelectionChange"
style="width: 100%;"
class="order-table">
class="order-table jd-order-el-table">
<!-- 多选列（仅桌面端显示） -->
<el-table-column v-if="!isMobile" type="selection" width="55" fixed="left" align="center"/>
<!-- 核心信息列 -->
@@ -422,7 +426,7 @@
</el-table-column>
<!-- 业务信息列 -->
<el-table-column label="标记" prop="distributionMark" width="70" align="center"/>
<el-table-column label="标记" prop="distributionMark" width="56" align="center"/>
<el-table-column label="型号" prop="modelNumber" width="140"/>
<el-table-column label="地址" prop="address" min-width="220" show-overflow-tooltip class-name="address-cell">
<template slot-scope="scope">
@@ -437,10 +441,10 @@
<el-table-column label="后返金额" prop="rebateAmount" width="90" align="right">
<template slot-scope="scope">{{ toYuan(scope.row.rebateAmount) }}</template>
</el-table-column>
<el-table-column label="售价渠道" prop="sellingPriceType" width="88" align="center">
<el-table-column label="售价渠道" prop="sellingPriceType" width="96" align="center">
<template slot-scope="scope">
<template v-if="scope.row.distributionMark === 'F'">
<el-select v-model="scope.row.sellingPriceType" placeholder="—" size="mini" clearable style="width: 80px;" @change="onOrderSellingPriceTypeChange(scope.row)">
<el-select v-model="scope.row.sellingPriceType" placeholder="—" size="mini" clearable style="width: 88px;" @change="onOrderSellingPriceTypeChange(scope.row)">
<el-option label="直款" value="direct" />
<el-option label="闲鱼" value="xianyu" />
</el-select>
@@ -448,18 +452,18 @@
<span v-else style="color: #c0c4cc;">—</span>
</template>
</el-table-column>
<el-table-column label="售价" prop="sellingPrice" width="100" align="right">
<el-table-column label="售价" prop="sellingPrice" width="128" align="right">
<template slot-scope="scope">
<template v-if="scope.row.distributionMark === 'F'">
<el-input-number v-model="scope.row.sellingPrice" :min="0" :step="1" :precision="2" size="mini" controls-position="right" style="width: 90px;" @change="onOrderSellingPriceChange(scope.row)" />
<el-input-number v-model="scope.row.sellingPrice" :min="0" :step="1" :precision="2" size="mini" controls-position="right" class="jd-order-input-money" @change="onOrderSellingPriceChange(scope.row)" />
</template>
<span v-else>{{ scope.row.sellingPrice != null ? toYuan(scope.row.sellingPrice) : '—' }}</span>
</template>
</el-table-column>
<el-table-column label="利润" prop="profit" width="100" align="right">
<el-table-column label="利润" prop="profit" width="128" align="right">
<template slot-scope="scope">
<template v-if="scope.row.distributionMark === 'F' || scope.row.distributionMark === 'H-TF'">
<el-input-number v-model="scope.row.profit" :step="1" :precision="2" size="mini" controls-position="right" style="width: 90px;" @change="onOrderProfitChange(scope.row)" />
<el-input-number v-model="scope.row.profit" :step="1" :precision="2" size="mini" controls-position="right" class="jd-order-input-money" @change="onOrderProfitChange(scope.row)" />
</template>
<span v-else>{{ scope.row.profit != null ? toYuan(scope.row.profit) : '—' }}</span>
</template>
@@ -510,58 +514,86 @@
<el-table-column label="备注/状态" prop="status" min-width="100" show-overflow-tooltip/>
<el-table-column label="下单人" prop="buyer" width="80"/>
<!-- 退款/到账/价保/专票/评价：合并为一列 -->
<el-table-column label="状态" align="center" min-width="268" class-name="order-status-flags-cell">
<!-- 退款状态：更早版本为单列纵向（标签列表），非六列拆分 -->
<el-table-column label="退款状态" min-width="248" align="left" class-name="refund-status-column">
<template slot-scope="scope">
<div class="order-status-flags">
<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>
<el-tag
:type="scope.row.isPriceProtected === 1 ? 'warning' : 'info'"
size="small"
:title="scope.row.isPriceProtected === 1 && scope.row.priceProtectedDate ? '价保日期：' + parseTime(scope.row.priceProtectedDate) : ''"
@click.native="togglePriceProtected(scope.row)"
style="cursor: pointer;">
{{ scope.row.isPriceProtected === 1 ? '是' : '否' }}
</el-tag>
<el-tag
:type="scope.row.isInvoiceOpened === 1 ? 'success' : 'info'"
size="small"
:title="scope.row.isInvoiceOpened === 1 && scope.row.invoiceOpenedDate ? '开票日期：' + parseTime(scope.row.invoiceOpenedDate) : ''"
@click.native="toggleInvoiceOpened(scope.row)"
style="cursor: pointer;">
{{ scope.row.isInvoiceOpened === 1 ? '是' : '否' }}
</el-tag>
<el-tag
:type="scope.row.isReviewPosted === 1 ? 'success' : 'info'"
size="small"
:title="scope.row.isReviewPosted === 1 && scope.row.reviewPostedDate ? '评价日期：' + parseTime(scope.row.reviewPostedDate) : ''"
@click.native="toggleReviewPosted(scope.row)"
style="cursor: pointer;">
{{ scope.row.isReviewPosted === 1 ? '是' : '否' }}
</el-tag>
<div class="refund-status-stack">
<div class="refund-status-col">
<div class="refund-status-row">
<span class="refund-status-label">是否退款</span>
<el-tag
:type="scope.row.isRefunded === 1 ? 'warning' : 'info'"
size="mini"
effect="plain"
:title="scope.row.isRefunded === 1 && scope.row.refundDate ? '退款日期：' + parseTime(scope.row.refundDate) : ''"
@click.native="toggleRefunded(scope.row)"
class="refund-status-tag">
{{ scope.row.isRefunded === 1 ? '已退款' : '未退款' }}
</el-tag>
</div>
<div class="refund-status-row">
<span class="refund-status-label">退款到账</span>
<el-tag
:type="scope.row.isRefundReceived === 1 ? 'success' : 'info'"
size="mini"
effect="plain"
:title="scope.row.isRefundReceived === 1 && scope.row.refundReceivedDate ? '退款到账日期：' + parseTime(scope.row.refundReceivedDate) : ''"
@click.native="toggleRefundReceived(scope.row)"
class="refund-status-tag">
{{ scope.row.isRefundReceived === 1 ? '已到账' : '未到账' }}
</el-tag>
</div>
<div class="refund-status-row">
<span class="refund-status-label">后返到账</span>
<el-tag
:type="scope.row.isRebateReceived === 1 ? 'success' : 'info'"
size="mini"
effect="plain"
:title="scope.row.isRebateReceived === 1 && scope.row.rebateReceivedDate ? '后返到账日期：' + parseTime(scope.row.rebateReceivedDate) : ''"
@click.native="toggleRebateReceived(scope.row)"
class="refund-status-tag">
{{ scope.row.isRebateReceived === 1 ? '已到账' : '未到账' }}
</el-tag>
</div>
</div>
<div class="refund-status-col">
<div class="refund-status-row">
<span class="refund-status-label">价保</span>
<el-tag
:type="scope.row.isPriceProtected === 1 ? 'warning' : 'info'"
size="mini"
effect="plain"
:title="scope.row.isPriceProtected === 1 && scope.row.priceProtectedDate ? '价保日期：' + parseTime(scope.row.priceProtectedDate) : ''"
@click.native="togglePriceProtected(scope.row)"
class="refund-status-tag">
{{ scope.row.isPriceProtected === 1 ? '已点' : '未点' }}
</el-tag>
</div>
<div class="refund-status-row">
<span class="refund-status-label">专票</span>
<el-tag
:type="scope.row.isInvoiceOpened === 1 ? 'success' : 'info'"
size="mini"
effect="plain"
:title="scope.row.isInvoiceOpened === 1 && scope.row.invoiceOpenedDate ? '开票日期：' + parseTime(scope.row.invoiceOpenedDate) : ''"
@click.native="toggleInvoiceOpened(scope.row)"
class="refund-status-tag">
{{ scope.row.isInvoiceOpened === 1 ? '已开' : '未开' }}
</el-tag>
</div>
<div class="refund-status-row">
<span class="refund-status-label">评价</span>
<el-tag
:type="scope.row.isReviewPosted === 1 ? 'success' : 'info'"
size="mini"
effect="plain"
:title="scope.row.isReviewPosted === 1 && scope.row.reviewPostedDate ? '评价日期：' + parseTime(scope.row.reviewPostedDate) : ''"
@click.native="toggleReviewPosted(scope.row)"
class="refund-status-tag">
{{ scope.row.isReviewPosted === 1 ? '已晒' : '未晒' }}
</el-tag>
</div>
</div>
</div>
</template>
</el-table-column>
@@ -588,7 +620,7 @@
</el-table-column>
<!-- 操作列（统一放在最右侧） -->
<el-table-column label="操作" fixed="right" :width="isMobile ? 60 : 300" align="center" class-name="action-column">
<el-table-column label="操作" fixed="right" :width="isMobile ? 60 : 288" align="center" class-name="action-column">
<template slot-scope="scope">
<!-- 移动端：悬浮操作按钮 -->
<div v-if="isMobile" class="mobile-action-wrapper">
@@ -673,75 +705,21 @@
</el-dropdown>
</div>
<!-- 桌面端：所有按钮直接显示 -->
<div v-else class="desktop-action-buttons-wrapper">
<div class="action-row-all">
<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"
icon="el-icon-document-copy"
@click="copySingleOrderExcelText(scope.row)"
:style="isExcelTextCopied(scope.row.id) ? 'color: #67C23A;' : ''"
:title="isExcelTextCopied(scope.row.id) ? '已复制录单格式（Excel可粘贴）' : '复制录单格式（Excel可粘贴）'">
录单格式
</el-button>
<el-button
type="text"
size="mini"
icon="el-icon-document-copy"
@click="copyRebateRecordText(scope.row)"
title="复制后返录表格式（Excel可粘贴）">
后返录表
</el-button>
<el-button
type="text"
size="mini"
style="color: #67C23A;"
@click="handleFetchLogistics(scope.row)"
:title="scope.row.distributionMark">
获取物流
</el-button>
<!-- 桌面端：分行 + 轻量链接样式，降低杂乱感 -->
<div v-else class="desktop-action-buttons-wrapper jd-action-cell">
<div class="jd-action-row jd-action-row--copy">
<el-button type="text" size="mini" class="jd-act-link" icon="el-icon-copy-document" @click="copyToClipboard(scope.row.orderId)" title="复制订单号">单号</el-button>
<el-button v-if="scope.row.thirdPartyOrderNo" type="text" size="mini" class="jd-act-link" icon="el-icon-copy-document" @click="copyToClipboard(scope.row.thirdPartyOrderNo)" title="复制第三方单号">三方</el-button>
<el-button type="text" size="mini" class="jd-act-link" icon="el-icon-copy-document" @click="copyToClipboard(scope.row.address)" title="复制地址">地址</el-button>
<el-button v-if="scope.row.logisticsLink" type="text" size="mini" class="jd-act-link" icon="el-icon-copy-document" @click="copyToClipboard(scope.row.logisticsLink)" title="复制物流链接">物流</el-button>
<el-button type="text" size="mini" class="jd-act-link" @click="copyReturnInfo(scope.row)" title="复制退货信息">退货</el-button>
</div>
<div class="jd-action-row jd-action-row--doc">
<el-button type="text" size="mini" class="jd-act-link jd-act-link--accent" :class="{ 'jd-act-done': isExcelTextCopied(scope.row.id) }" icon="el-icon-document-copy" @click="copySingleOrderExcelText(scope.row)" :title="isExcelTextCopied(scope.row.id) ? '已复制录单格式' : '复制录单格式'">录单</el-button>
<el-button type="text" size="mini" class="jd-act-link jd-act-link--accent" icon="el-icon-document-copy" @click="copyRebateRecordText(scope.row)" title="复制后返录表">后返</el-button>
<el-button type="text" size="mini" class="jd-act-link jd-act-link--success" @click="handleFetchLogistics(scope.row)" title="获取物流">物流拉取</el-button>
</div>
<div class="jd-action-row jd-action-row--meta">
<el-switch
v-model="scope.row.isCountEnabled"
:active-value="1"
@@ -749,22 +727,15 @@
@change="handleCountEnabledChange(scope.row)"
active-text="统计"
inactive-text=""
size="mini"
style="margin-left: 4px;">
</el-switch>
<el-button
type="text"
size="mini"
style="color: #f56c6c;"
@click="handleDelete(scope.row)"
title="删除订单">
删除
</el-button>
size="mini" />
<el-button type="text" size="mini" class="jd-act-link jd-act-link--danger" @click="handleDelete(scope.row)" title="删除订单">删除</el-button>
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<!-- 分页区域 -->
@@ -779,7 +750,7 @@
/>
</template>
</list-layout>
<!-- 获取物流信息对话框 -->
<el-dialog
title="获取物流信息（调试）"
@@ -2879,53 +2850,163 @@ export default {
<style scoped>
/* 优化标签样式 */
.jd-order-list-root {
--jd-accent: #2563eb;
--jd-accent-hover: #1d4ed8;
--jd-border: #e5e7eb;
--jd-text: #111827;
--jd-muted: #6b7280;
--jd-surface: #ffffff;
--jd-header: #f8fafc;
--jd-row-hover: #f8fafc;
--jd-row-stripe: #fafbfc;
}
/* 搜索区：更疏、更干净 */
.jd-order-list-root ::v-deep .search-section {
background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
border-bottom: 1px solid var(--jd-border);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
padding: 18px 20px 14px;
}
.jd-order-search-panel {
display: flex;
flex-direction: column;
gap: 0;
}
.jd-order-filter-form ::v-deep .el-form-item {
margin-right: 14px;
margin-bottom: 12px;
}
.jd-order-filter-form ::v-deep .el-form-item__label {
color: var(--jd-muted);
font-weight: 500;
font-size: 13px;
}
.jd-order-filter-form ::v-deep .el-input__inner,
.jd-order-filter-form ::v-deep .el-range-input {
border-radius: 6px;
}
/* 桌面工具栏：低饱和、统一圆角 */
.jd-order-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 12px 0 4px;
border-top: 1px solid var(--jd-border);
margin-top: 8px;
}
.jd-order-toolbar ::v-deep .el-button {
border-radius: 6px;
font-weight: 500;
letter-spacing: 0.01em;
}
.jd-order-toolbar ::v-deep .el-button--primary.is-plain {
color: var(--jd-accent);
border-color: #bfdbfe;
background: #eff6ff;
}
.jd-order-toolbar ::v-deep .el-button--primary.is-plain:hover {
color: #fff;
background: var(--jd-accent);
border-color: var(--jd-accent);
}
.jd-order-toolbar ::v-deep .jd-tb-muted.is-plain {
color: var(--jd-muted);
border-color: var(--jd-border);
background: var(--jd-surface);
}
.jd-order-toolbar ::v-deep .jd-tb-muted.is-plain:hover {
color: var(--jd-text);
border-color: #cbd5e1;
background: var(--jd-row-hover);
}
/* 表格滚动条 */
.order-table ::v-deep .el-table__body-wrapper {
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f1f5f9;
}
.order-table ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.order-table ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 5px;
}
.order-table ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 5px;
border: 2px solid #f1f5f9;
}
.order-table ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.order-table ::v-deep .el-tag {
transition: all 0.3s;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
user-select: none;
border-radius: 4px;
}
.order-table ::v-deep .el-tag:hover {
opacity: 0.8;
transform: scale(1.05);
filter: brightness(0.97);
}
.order-table ::v-deep .el-table {
border-radius: 8px;
overflow: hidden;
font-size: 13px;
color: var(--jd-text);
border: 1px solid var(--jd-border);
}
.order-table ::v-deep .el-table--border::after,
.order-table ::v-deep .el-table--group::after,
.order-table ::v-deep .el-table::before {
background-color: var(--jd-border);
}
.order-table ::v-deep .el-table__fixed-right-patch {
background: var(--jd-header);
}
.order-table ::v-deep .el-table__header-wrapper th {
background: var(--jd-header) !important;
color: #374151;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: none;
}
.order-table ::v-deep .el-table th.is-leaf {
border-bottom: 1px solid var(--jd-border);
}
.order-table ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
background: var(--jd-row-stripe) !important;
}
.order-table ::v-deep .el-table__body tr:hover > td {
background-color: var(--jd-row-hover) !important;
}
/* 优化操作按钮布局 */
.order-table ::v-deep .el-table__fixed-right {
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
box-shadow: -4px 0 16px rgba(15, 23, 42, 0.06);
}
/* 表格单元格：略增大上下左右留白，避免拥挤 */
.order-table ::v-deep .el-table td {
padding: 12px 10px;
padding: 9px 0;
border-color: var(--jd-border);
}
.order-table ::v-deep .el-table th {
padding: 12px 10px;
}
/* 合并列：退款/到账/价保等标签换行排列 */
.order-status-flags {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px 10px;
max-width: 100%;
padding: 6px 4px;
line-height: 1.5;
}
.order-status-flags .el-tag {
margin: 0;
}
/* 状态列单元格略加垂直空间 */
.order-table ::v-deep .order-status-flags-cell .cell {
padding-top: 10px;
padding-bottom: 10px;
}
/* 优化地址列显示，防止过长换行 */
.order-table ::v-deep .el-table .address-cell {
max-width: 280px;
overflow: hidden;
@@ -2933,14 +3014,130 @@ export default {
white-space: nowrap;
}
.order-table ::v-deep .el-table thead th {
background-color: #fafafa;
font-weight: 600;
.order-table ::v-deep .el-table th {
padding: 11px 0;
}
/* 优化固定列 */
.order-table ::v-deep .el-table__fixed-left {
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
box-shadow: 4px 0 16px rgba(15, 23, 42, 0.06);
}
/* 退款状态：双列压缩行高 */
.refund-status-stack {
display: flex;
flex-direction: row;
gap: 14px;
align-items: flex-start;
}
.refund-status-col {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.refund-status-row {
display: flex;
align-items: center;
gap: 6px;
}
.refund-status-label {
flex-shrink: 0;
width: 52px;
font-size: 11px;
font-weight: 500;
color: var(--jd-muted);
line-height: 1.2;
}
.refund-status-tag {
cursor: pointer;
flex: 0 1 auto;
max-width: 72px;
min-width: 52px;
padding: 0 6px !important;
height: 22px !important;
line-height: 20px !important;
font-size: 11px !important;
justify-content: center;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 操作列 */
.jd-action-cell {
text-align: left;
padding: 4px 0;
}
.jd-action-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px 4px;
margin-bottom: 4px;
}
.jd-action-row:last-child {
margin-bottom: 0;
}
.order-table ::v-deep .jd-act-link {
margin: 0 !important;
padding: 2px 6px !important;
border-radius: 4px;
color: #64748b !important;
font-size: 12px;
font-weight: 500;
}
.order-table ::v-deep .jd-act-link:hover {
color: var(--jd-text) !important;
background: #f1f5f9 !important;
}
.order-table ::v-deep .jd-act-link--accent {
color: var(--jd-accent) !important;
}
.order-table ::v-deep .jd-act-link--accent:hover {
background: #eff6ff !important;
}
.order-table ::v-deep .jd-act-done {
color: #059669 !important;
}
.order-table ::v-deep .jd-act-link--success {
color: #059669 !important;
}
.order-table ::v-deep .jd-act-link--danger {
color: #dc2626 !important;
}
.order-table ::v-deep .jd-act-link--danger:hover {
background: #fef2f2 !important;
}
.order-table ::v-deep .jd-action-row--meta .el-switch {
margin-right: 6px;
}
.order-table ::v-deep .el-table .jd-order-input-money {
width: 118px !important;
}
/* 桌面端：占满 ListLayout 表格区，内部表格滚动，表头固定 */
.jd-order-table-page {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
}
.jd-order-table-wrap {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.jd-order-el-table {
flex: 1;
min-height: 0;
}
.jd-order-table-wrap .profit-summary-bar {
flex-shrink: 0;
}
/* 移动端卡片列表样式 */
@@ -3290,42 +3487,24 @@ export default {
}
.profit-summary-bar {
margin: 0 0 10px 0;
padding: 8px 12px;
background: #f4f6f9;
border-radius: 4px;
margin: 0 0 12px 0;
padding: 12px 16px;
background: var(--jd-header, #f8fafc);
border: 1px solid var(--jd-border, #e5e7eb);
border-radius: 8px;
font-size: 13px;
color: #606266;
color: var(--jd-muted, #6b7280);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.profit-summary-bar b {
color: var(--jd-text, #111827);
font-weight: 600;
}
.sticky-summary {
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 确保表格有正确的滚动条，横向滚动条始终可见 */
.order-table ::v-deep .el-table__body-wrapper {
overflow-x: scroll !important;
overflow-y: auto;
/* 确保横向滚动条始终显示 */
scrollbar-width: thin;
}
/* 强制横向滚动条始终可见（Webkit浏览器） */
.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;
z-index: 20;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.profit-summary-item {
margin-right: 20px;
@@ -3337,6 +3516,12 @@ export default {
.mobile-profit-summary div + div {
margin-top: 4px;
}
/* 本页：避免外层 .table-section 与表格内部双纵向滚动，横向滚动仍由表体承担 */
.jd-order-list-root ::v-deep .table-section {
overflow-x: auto;
overflow-y: hidden;
}
</style>