linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

综述: 完善订单管理页面的三级展开功能 

- 增加店铺订单表格，实现结算单位订单→店铺订单→商品订单的三级展开结构
- 添加toggleShopExpand函数处理店铺订单的展开逻辑
- 优化表格嵌套结构和显示效果
This commit is contained in:
linbin 2025-09-24 03:44:31 +08:00
parent a5316bfa7a
commit fe4ec1a7cf
1 changed files with 131 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
商家端web/订单管理/订单管理.html
View File

@ -548,6 +548,28 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<table class="sub-table" style="display: none;">
<thead>
<tr>
<th></th>
<th>序号</th>
<th>店铺订单号</th>
<th>档位</th>
<th>订单状态</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
<td>1</td>
<td>SO202407190001</td>
<td>牛牛蔬菜店</td>
<td><span class="status-tag status-pending">待备货</span></td>
<td></td>
</tr>
</tbody>
</table>
<table class="sub-table" style="display: none;"> <table class="sub-table" style="display: none;">
<thead> <thead>
<tr> <tr>
@ -624,6 +646,28 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<table class="sub-table" style="display: none;">
<thead>
<tr>
<th></th>
<th>序号</th>
<th>店铺订单号</th>
<th>档位</th>
<th>订单状态</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
<td>1</td>
<td>SO202407190002</td>
<td>鲜蔬果园店</td>
<td><span class="status-tag status-pending">待备货</span></td>
<td></td>
</tr>
</tbody>
</table>
<table class="sub-table" style="display: none;"> <table class="sub-table" style="display: none;">
<thead> <thead>
<tr> <tr>
@ -700,6 +744,28 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<table class="sub-table" style="display: none;">
<thead>
<tr>
<th></th>
<th>序号</th>
<th>店铺订单号</th>
<th>档位</th>
<th>订单状态</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
<td>1</td>
<td>SO202407180001</td>
<td>示例店铺</td>
<td><span class="status-tag status-completed">完成</span></td>
<td></td>
</tr>
</tbody>
</table>
<table class="sub-table" style="display: none;"> <table class="sub-table" style="display: none;">
<thead> <thead>
<tr> <tr>
@ -776,6 +842,28 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<table class="sub-table" style="display: none;">
<thead>
<tr>
<th></th>
<th>序号</th>
<th>店铺订单号</th>
<th>档位</th>
<th>订单状态</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
<td>1</td>
<td>SO202407180001</td>
<td>示例店铺</td>
<td><span class="status-tag status-completed">完成</span></td>
<td></td>
</tr>
</tbody>
</table>
<table class="sub-table" style="display: none;"> <table class="sub-table" style="display: none;">
<thead> <thead>
<tr> <tr>
@ -852,6 +940,28 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<table class="sub-table" style="display: none;">
<thead>
<tr>
<th></th>
<th>序号</th>
<th>店铺订单号</th>
<th>档位</th>
<th>订单状态</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
<td>1</td>
<td>SO202407180001</td>
<td>示例店铺</td>
<td><span class="status-tag status-completed">完成</span></td>
<td></td>
</tr>
</tbody>
</table>
<table class="sub-table" style="display: none;"> <table class="sub-table" style="display: none;">
<thead> <thead>
<tr> <tr>
@ -946,7 +1056,7 @@
} }
} }
// 子表格展开功能 // 子表格展开功能（结算单位订单展开店铺订单）
function toggleSubExpand(btn) { function toggleSubExpand(btn) {
const currentRow = btn.closest('tr'); const currentRow = btn.closest('tr');
const tableWrapper = currentRow.closest('.nested-table-wrapper'); const tableWrapper = currentRow.closest('.nested-table-wrapper');
@ -965,6 +1075,26 @@
} }
} }
// 店铺订单展开功能（店铺订单展开商品订单）
function toggleShopExpand(btn) {
const currentRow = btn.closest('tr');
const tableWrapper = currentRow.closest('.nested-table-wrapper');
const tables = tableWrapper.querySelectorAll('.sub-table');
let productTable = tables[tables.length - 1]; // 获取最后一个表格（商品订单表格）
if (productTable) {
const isVisible = productTable.style.display !== 'none';
if (isVisible) {
productTable.style.display = 'none';
btn.innerHTML = '▼';
} else {
productTable.style.display = 'table';
btn.innerHTML = '▲';
}
}
}
// 分页功能 // 分页功能
document.querySelectorAll('.page-item:not(.disabled):not(.active)').forEach(item => { document.querySelectorAll('.page-item:not(.disabled):not(.active)').forEach(item => {
item.addEventListener('click', function() { item.addEventListener('click', function() {