kx_guo/dy-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: use tables in order sku details

Browse Source
This commit is contained in:
Codex 2026-10-13 10:39:56 +08:00
parent c88182bcd8
commit 24d0fab271
2 changed files with 43 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
static/js/app.js
View File

@ -19824,37 +19824,48 @@ window.showSkuInfoModal = function(el, title) {
html += '<div style="padding:12px 14px;background:#fff;border:1px solid #e8edf3;border-radius:9px"><div style="font-size:12px;color:#8c9bab">订单在途</div><strong style="display:block;margin-top:5px;font-size:18px;color:#13a673">' + transitOrders.length + ' <small style="font-size:12px;font-weight:400;color:#8c9bab">笔</small></strong></div>'; html += '<div style="padding:12px 14px;background:#fff;border:1px solid #e8edf3;border-radius:9px"><div style="font-size:12px;color:#8c9bab">订单在途</div><strong style="display:block;margin-top:5px;font-size:18px;color:#13a673">' + transitOrders.length + ' <small style="font-size:12px;font-weight:400;color:#8c9bab">笔</small></strong></div>';
html += '<div style="padding:12px 14px;background:#fff;border:1px solid #e8edf3;border-radius:9px"><div style="font-size:12px;color:#8c9bab">产品类型</div><strong style="display:block;margin-top:5px;font-size:15px;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">' + escHtml(d.product_type || '-') + '</strong></div>'; html += '<div style="padding:12px 14px;background:#fff;border:1px solid #e8edf3;border-radius:9px"><div style="font-size:12px;color:#8c9bab">产品类型</div><strong style="display:block;margin-top:5px;font-size:15px;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">' + escHtml(d.product_type || '-') + '</strong></div>';
html += '</div>'; html += '</div>';
html += '<section style="background:#fff;border:1px solid #e8edf3;border-radius:10px;padding:15px 16px;margin-bottom:18px"><div style="font-size:14px;font-weight:600;color:#263445;margin-bottom:12px">📋 基础信息</div><div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px">'; html += '<section style="background:#fff;border:1px solid #b8c8db;border-radius:10px;overflow:hidden;margin-bottom:18px"><div style="padding:10px 14px;background:#dcecff;border-bottom:1px solid #9fb6cf;font-size:14px;font-weight:700;color:#234f7d">📋 基础信息</div><div style="overflow-x:auto"><table class="sku-info-basic-table" style="width:100%;min-width:650px;border-collapse:collapse;font-size:13px;table-layout:fixed">';
fields.forEach(function(f) { html += '<thead><tr style="background:#eef6ff;color:#315f8d"><th style="width:15%;padding:9px 10px;border:1px solid #b8c8db;text-align:center">字段</th><th style="width:35%;padding:9px 10px;border:1px solid #b8c8db;text-align:left">内容</th><th style="width:15%;padding:9px 10px;border:1px solid #b8c8db;text-align:center">字段</th><th style="width:35%;padding:9px 10px;border:1px solid #b8c8db;text-align:left">内容</th></tr></thead><tbody>';
var k = f[0], v = f[1] !== undefined && f[1] !== null && f[1] !== '' ? String(f[1]) : '-'; for (var fieldIndex = 0; fieldIndex < fields.length; fieldIndex += 2) {
html += '<div style="display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;align-items:start;padding:9px 0;border-top:1px solid #f0f2f5"><span style="font-size:12px;color:#8c9bab">' + escHtml(k) + '</span><span style="font-size:13px;color:#334155;font-weight:500;word-break:break-all">' + escHtml(v) + '</span></div>'; var leftField = fields[fieldIndex];
}); var rightField = fields[fieldIndex + 1];
html += '</div></section>'; var leftValue = leftField[1] !== undefined && leftField[1] !== null && leftField[1] !== '' ? String(leftField[1]) : '-';
var rowBg = (fieldIndex / 2) % 2 === 0 ? '#ffffff' : '#f8fbff';
html += '<tr style="background:' + rowBg + '"><th style="padding:9px 10px;border:1px solid #b8c8db;background:#edf5fd;color:#526b85;text-align:center;font-weight:600">' + escHtml(leftField[0]) + '</th><td style="padding:9px 11px;border:1px solid #b8c8db;color:#263445;font-weight:500;word-break:break-all">' + escHtml(leftValue) + '</td>';
if (rightField) {
var rightValue = rightField[1] !== undefined && rightField[1] !== null && rightField[1] !== '' ? String(rightField[1]) : '-';
html += '<th style="padding:9px 10px;border:1px solid #b8c8db;background:#edf5fd;color:#526b85;text-align:center;font-weight:600">' + escHtml(rightField[0]) + '</th><td style="padding:9px 11px;border:1px solid #b8c8db;color:#263445;font-weight:500;word-break:break-all">' + escHtml(rightValue) + '</td>';
} else {
html += '<th style="padding:9px 10px;border:1px solid #b8c8db;background:#edf5fd"></th><td style="padding:9px 11px;border:1px solid #b8c8db"></td>';
}
html += '</tr>';
}
html += '</tbody></table></div></section>';
// 订单在途列表 // 订单在途列表
html += '<section style="background:#fff;border:1px solid #e8edf3;border-radius:10px;padding:15px 16px"><div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px"><div style="font-size:14px;font-weight:600;color:#263445">📦 订单在途</div><span style="font-size:12px;color:#8c9bab">共 ' + transitOrders.length + ' 笔</span></div>'; html += '<section style="background:#fff;border:1px solid #b9cdbf;border-radius:10px;overflow:hidden"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#ddf3e4;border-bottom:1px solid #9fc4aa"><div style="font-size:14px;font-weight:700;color:#27633b">📦 订单在途</div><span style="font-size:12px;color:#4d765a">共 ' + transitOrders.length + ' 笔</span></div>';
html += '<div style="overflow-x:auto"><table style="width:100%;border-collapse:separate;border-spacing:0;font-size:12px;min-width:680px">'; html += '<div style="overflow-x:auto"><table class="sku-info-transit-table" style="width:100%;border-collapse:collapse;font-size:12px;min-width:680px">';
html += '<thead><tr style="background:#f0f7ff">'; html += '<thead><tr style="background:#edf8f0;color:#376548">';
html += '<th style="padding:8px 9px;border-top:1px solid #dbeafe;border-bottom:1px solid #dbeafe;text-align:center;white-space:nowrap;color:#526273">下单时间</th>'; html += '<th style="padding:9px;border:1px solid #b9cdbf;text-align:center;white-space:nowrap">下单时间</th>';
html += '<th style="padding:8px 9px;border-top:1px solid #dbeafe;border-bottom:1px solid #dbeafe;text-align:center;white-space:nowrap;color:#526273">编号</th>'; html += '<th style="padding:9px;border:1px solid #b9cdbf;text-align:center;white-space:nowrap">编号</th>';
html += '<th style="padding:8px 9px;border-top:1px solid #dbeafe;border-bottom:1px solid #dbeafe;text-align:left;white-space:nowrap;color:#526273">名称</th>'; html += '<th style="padding:9px;border:1px solid #b9cdbf;text-align:left;white-space:nowrap">名称</th>';
html += '<th style="padding:8px 9px;border-top:1px solid #dbeafe;border-bottom:1px solid #dbeafe;text-align:center;white-space:nowrap;color:#526273">下单数量</th>'; html += '<th style="padding:9px;border:1px solid #b9cdbf;text-align:center;white-space:nowrap">下单数量</th>';
html += '<th style="padding:8px 9px;border-top:1px solid #dbeafe;border-bottom:1px solid #dbeafe;text-align:center;white-space:nowrap;color:#526273">采购跟单</th>'; html += '<th style="padding:9px;border:1px solid #b9cdbf;text-align:center;white-space:nowrap">采购跟单</th>';
html += '<th style="padding:8px 9px;border-top:1px solid #dbeafe;border-bottom:1px solid #dbeafe;text-align:center;white-space:nowrap;color:#526273">采购计划</th>'; html += '<th style="padding:9px;border:1px solid #b9cdbf;text-align:center;white-space:nowrap">采购计划</th>';
html += '</tr></thead><tbody>'; html += '</tr></thead><tbody>';
if (transitOrders.length > 0) { if (transitOrders.length > 0) {
transitOrders.forEach(function(o) { transitOrders.forEach(function(o, transitIndex) {
html += '<tr style="background:#fff">'; html += '<tr style="background:' + (transitIndex % 2 === 0 ? '#ffffff' : '#f6fbf7') + '">';
html += '<td style="padding:8px 9px;border-bottom:1px solid #f0f2f5;text-align:center;white-space:nowrap;color:#526273">' + escHtml(o['下单时间'] || '-') + '</td>'; html += '<td style="padding:9px;border:1px solid #b9cdbf;text-align:center;white-space:nowrap;color:#526273">' + escHtml(o['下单时间'] || '-') + '</td>';
html += '<td style="padding:8px 9px;border-bottom:1px solid #f0f2f5;text-align:center"><code style="font-size:11px;color:#1677ff">' + escHtml(o['编码'] || '') + '</code></td>'; html += '<td style="padding:9px;border:1px solid #b9cdbf;text-align:center"><code style="font-size:11px;color:#1677ff">' + escHtml(o['编码'] || '') + '</code></td>';
html += '<td style="padding:8px 9px;border-bottom:1px solid #f0f2f5;text-align:left;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + escHtml(o['名称'] || '') + '">' + escHtml(o['名称'] || '-') + '</td>'; html += '<td style="padding:9px;border:1px solid #b9cdbf;text-align:left;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + escHtml(o['名称'] || '') + '">' + escHtml(o['名称'] || '-') + '</td>';
html += '<td style="padding:8px 9px;border-bottom:1px solid #f0f2f5;text-align:center;font-weight:600;color:#263445">' + (parseInt(o['下单数量']) || 0).toLocaleString() + '</td>'; html += '<td style="padding:9px;border:1px solid #b9cdbf;text-align:center;font-weight:700;color:#27633b">' + (parseInt(o['下单数量']) || 0).toLocaleString() + '</td>';
html += '<td style="padding:8px 9px;border-bottom:1px solid #f0f2f5;text-align:center">' + escHtml(o['采购跟单'] || '-') + '</td>'; html += '<td style="padding:9px;border:1px solid #b9cdbf;text-align:center">' + escHtml(o['采购跟单'] || '-') + '</td>';
html += '<td style="padding:8px 9px;border-bottom:1px solid #f0f2f5;text-align:center">' + escHtml(o['采购计划'] || '-') + '</td>'; html += '<td style="padding:9px;border:1px solid #b9cdbf;text-align:center">' + escHtml(o['采购计划'] || '-') + '</td>';
html += '</tr>'; html += '</tr>';
}); });
} else { } else {
html += '<tr><td colspan="6" style="padding:24px 8px;border-bottom:1px solid #f0f2f5;text-align:center;color:#aab4c0">暂无在途订单</td></tr>'; html += '<tr><td colspan="6" style="padding:24px 8px;border:1px solid #b9cdbf;text-align:center;color:#8ca397;background:#fbfdfb">暂无在途订单</td></tr>';
} }
html += '</tbody></table></div></section>'; html += '</tbody></table></div></section>';

8
tests/test_packaging_loading_and_sku_modal.py
View File

@ -32,6 +32,14 @@ class PackagingLoadingAndSkuModalTest(unittest.TestCase):
self.assertIn('订单在途', APP_JS) self.assertIn('订单在途', APP_JS)
self.assertIn('grid-template-columns:repeat(2,minmax(0,1fr))', APP_JS) self.assertIn('grid-template-columns:repeat(2,minmax(0,1fr))', APP_JS)
def test_sku_information_sections_use_bordered_tables_with_colored_headers(self):
self.assertIn('class="sku-info-basic-table"', APP_JS)
self.assertIn('class="sku-info-transit-table"', APP_JS)
self.assertIn('border:1px solid #b8c8db', APP_JS)
self.assertIn('border:1px solid #b9cdbf', APP_JS)
self.assertIn('background:#eef6ff', APP_JS)
self.assertIn('background:#edf8f0', APP_JS)
if __name__ == '__main__': if __name__ == '__main__':
unittest.main() unittest.main()