DeXun/erp-next
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(bid/order): 优化订单列表操作列样式

Browse Source 
1.  为操作列添加col-ops类并设置不换行
2.  使用ops-wrap包裹操作按钮，统一间距与排版
3.  调整部分表格列宽适配内容
This commit is contained in:
王文昊
2026-06-17 11:14:51 +08:00
parent c7d4c2b0ad
commit 7a8e4297e0
3 changed files with 42 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ruoyi-ui/src/views/bid/order/history.vue
View File

@@ -58,11 +58,13 @@
<el-tag :type="tagType(s.row)" size="small" effect="dark">{{ tagLabel(s.row) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="210" align="center">
<el-table-column label="操作" class-name="col-ops" align="center">
<template slot-scope="s">
<el-button size="mini" type="text" @click="handleView(s.row)">详情</el-button>
<el-button size="mini" type="text" @click="handleReOrder(s.row)">再次下单</el-button>
<el-button size="mini" type="text" style="color:#e6a23c" @click="handleRecall(s.row)">撤回</el-button>
<span class="ops-wrap">
<el-button size="mini" type="text" @click="handleView(s.row)">详情</el-button>
<el-button size="mini" type="text" @click="handleReOrder(s.row)">再次下单</el-button>
<el-button size="mini" type="text" style="color:#e6a23c" @click="handleRecall(s.row)">撤回</el-button>
</span>
</template>
</el-table-column>
</el-table>
@@ -249,6 +251,8 @@ export default {
.amount { color: #e4393c; font-weight: 700; }
.order-link { color: #e4393c; cursor: pointer; transition: color 0.2s; }
.order-link:hover { color: #e4393c; text-decoration: underline; }
.jd-table ::v-deep .col-ops { white-space: nowrap; }
.ops-wrap { display: inline-flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.diff-early { color: #67c23a; font-weight: 600; }
.diff-ontime { color: #999; font-weight: 600; }

37
ruoyi-ui/src/views/bid/order/pending.vue
View File

@@ -26,29 +26,31 @@
<!-- ═══ 订单表格 ═══ -->
<div class="jd-table-wrap">
<el-table v-loading="loading" :data="list" border stripe size="small" class="jd-table" style="width:100%">
<el-table-column label="发货单号" width="115">
<el-table-column label="发货单号" width="130">
<template slot-scope="s">
<span class="order-link" @click="handleView(s.row)">{{ s.row.doNo }}</span>
</template>
</el-table-column>
<el-table-column label="供应商" prop="supplierName" min-width="120" show-overflow-tooltip />
<el-table-column label="金额" width="85" align="right">
<el-table-column label="供应商" prop="supplierName" min-width="140" show-overflow-tooltip />
<el-table-column label="金额" width="110" align="right">
<template slot-scope="s"><span class="amount">¥{{ s.row.totalAmount }}</span></template>
</el-table-column>
<el-table-column label="交货期" prop="deliveryDate" width="85" align="center" />
<el-table-column label="延期" prop="delayDate" width="80" align="center">
<el-table-column label="交货期" prop="deliveryDate" width="95" align="center" />
<el-table-column label="延期" prop="delayDate" width="90" align="center">
<template slot-scope="s">{{ s.row.delayDate || '-' }}</template>
</el-table-column>
<el-table-column label="逾期" width="80" align="center">
<el-table-column label="逾期" width="95" align="center">
<template slot-scope="s"><span v-html="getUrgentBadge(s.row)" /></template>
</el-table-column>
<el-table-column label="物料" prop="itemCount" width="50" align="center" />
<el-table-column label="操作" width="210" align="center">
<el-table-column label="物料" prop="itemCount" width="60" align="center" />
<el-table-column label="操作" class-name="col-ops" align="center">
<template slot-scope="s">
<el-button size="mini" type="text" @click="handleView(s.row)">详情</el-button>
<el-button size="mini" type="text" @click="handleEdit(s.row)" v-if="s.row.deliveryStatus==='pending'">编辑</el-button>
<el-button size="mini" type="text" style="color:var(--color-success)" @click="handleShip(s.row)" v-if="s.row.deliveryStatus==='pending'">发货确认</el-button>
<el-button size="mini" type="text" style="color:var(--color-danger)" @click="handleDelete(s.row)">删除</el-button>
<span class="ops-wrap">
<el-button size="mini" type="text" @click="handleView(s.row)">详情</el-button>
<el-button size="mini" type="text" @click="handleEdit(s.row)" v-if="s.row.deliveryStatus==='pending'">编辑</el-button>
<el-button size="mini" type="text" style="color:var(--color-success)" @click="handleShip(s.row)" v-if="s.row.deliveryStatus==='pending'">发货确认</el-button>
<el-button size="mini" type="text" style="color:var(--color-danger)" @click="handleDelete(s.row)">删除</el-button>
</span>
</template>
</el-table-column>
</el-table>
@@ -311,4 +313,15 @@ export default {
color: #e4393c;
text-decoration: underline;
}
/* ═══ 操作列 - 自适应填满剩余空间，按钮不换行 ═══ */
.jd-table ::v-deep .col-ops {
white-space: nowrap;
}
.ops-wrap {
display: inline-flex;
align-items: center;
gap: 2px;
flex-wrap: nowrap;
}
</style>

14
ruoyi-ui/src/views/bid/order/transit.vue
View File

@@ -78,12 +78,14 @@
<el-tag :type="transitTagType(s.row)" size="small" effect="dark">{{ transitStatusLabel(s.row) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="230" align="center">
<el-table-column label="操作" class-name="col-ops" align="center">
<template slot-scope="s">
<el-button size="mini" type="text" @click="handleView(s.row)">详情</el-button>
<el-button size="mini" type="text" style="color:#67C23A" @click="handleComplete(s.row)">收货完成</el-button>
<el-button size="mini" type="text" style="color:#e6a23c" @click="handleDelay(s.row)">延期</el-button>
<el-button size="mini" type="text" @click="handleRecall(s.row)">撤回</el-button>
<span class="ops-wrap">
<el-button size="mini" type="text" @click="handleView(s.row)">详情</el-button>
<el-button size="mini" type="text" style="color:#67C23A" @click="handleComplete(s.row)">收货完成</el-button>
<el-button size="mini" type="text" style="color:#e6a23c" @click="handleDelay(s.row)">延期</el-button>
<el-button size="mini" type="text" @click="handleRecall(s.row)">撤回</el-button>
</span>
</template>
</el-table-column>
</el-table>
@@ -294,4 +296,6 @@ export default {
.urgent-soon { color: #e6a23c; font-weight: 700; font-size: 12px; }
.order-link { color: #e4393c; cursor: pointer; transition: color 0.2s; }
.order-link:hover { color: #e4393c; text-decoration: underline; }
.jd-table ::v-deep .col-ops { white-space: nowrap; }
.ops-wrap { display: inline-flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
</style>