refactor(order): 优化订单列表页面布局和样式

-调整表格结构,优化列宽设置
- 移除冗余代码,提高代码可读性- 添加自定义样式,提升页面美观度
This commit is contained in:
mzeros 2024-12-13 16:18:24 +08:00
parent a6216a09e1
commit efbcad2ff5

View File

@ -14,7 +14,6 @@
{include file='order/index_search'} {include file='order/index_search'}
{include file='order/statement'} {include file='order/statement'}
<table id="OrderList" data-target-search="form.form-search"></table> <table id="OrderList" data-target-search="form.form-search"></table>
</div> </div>
{/block} {/block}
@ -153,16 +152,11 @@
// 动态创建 layui.table 表格 // 动态创建 layui.table 表格
$('#OrderList').layTable({ $('#OrderList').layTable({
url: '{:sysuri()}', url: '{:sysuri()}',
toolbar: '#toolbarDemo', toolbar: '#toolbarDemo',
// console: console.log(), // console: console.log(),
where: {set_callback: set_callback}, where: {set_callback: set_callback},
// totalRow: true, // 开启合计行 // totalRow: true, // 开启合计行
even: true, height: 'full', even: true, height: 'full',
sort: {field: 'id', type: 'desc'}, sort: {field: 'id', type: 'desc'},
// className:'layTab', // className:'layTab',
@ -171,12 +165,12 @@
limits: [10, 20, 30, 50, 60, 70, 80, 90, 100, 150, 200, 500], limits: [10, 20, 30, 50, 60, 70, 80, 90, 100, 150, 200, 500],
cols: [[ cols: [[
{checkbox: true, field: 'id', fixed: 'left'}, {checkbox: true, field: 'id', fixed: 'left',width: 60},
// {field: 'index', title: '序号', width: 70, sort: true, align: 'center', fixed: 'left',totalRow: '合计:'}, // {field: 'index', title: '序号', width: 70, sort: true, align: 'center', fixed: 'left',totalRow: '合计:'},
{field: 'index', title: '序号', width: 70, sort: true, align: 'center', fixed: 'left'}, {field: 'index', title: '序号', sort: true, align: 'center', fixed: 'left',width: 60},
{ {
field: 'minfo', title: '商户', minWidth: 100, fixed: 'left', templet: function (d) { field: 'minfo', title: '商户', fixed: 'left', templet: function (d) {
// console.log(d); // console.log(d);
d.d_msg = '<b>{{d.minfo.name}}</b>( <span class="color-desc">{{d.minfo.id}}</span> )'; d.d_msg = '<b>{{d.minfo.name}}</b>( <span class="color-desc">{{d.minfo.id}}</span> )';
if (d.minfo.status === 0) { if (d.minfo.status === 0) {
@ -204,7 +198,7 @@
} }
}, },
{ {
field: 'order', title: '订单号', minWidth: 270, fixed: 'left', templet: function (d) { field: 'order',minWidth:240,title: '订单号',fixed: 'left', templet: function (d) {
d.one = '<span class="layui-badge think-bg-blue"></span>'; d.one = '<span class="layui-badge think-bg-blue"></span>';
d.green = '<span class="layui-badge layui-bg-green"></span>'; d.green = '<span class="layui-badge layui-bg-green"></span>';
d.d_msg = '{{-d.one}}<b>{{d.order_id}}</b>'; d.d_msg = '{{-d.one}}<b>{{d.order_id}}</b>';
@ -220,7 +214,7 @@
} }
}, },
{ {
field: 'account', title: '充值账号', align: 'center', minWidth: 150, templet: function (d) { field: 'account', title: '充值账号', align: 'center', templet: function (d) {
d.d_msg = '<b>{{d.account}}</b>'; d.d_msg = '<b>{{d.account}}</b>';
if (d.product_key === 'dhcz' && d.isp > 0) { if (d.product_key === 'dhcz' && d.isp > 0) {
@ -242,7 +236,7 @@
// {field: 'merchant_order_id', title: '系统订单号', minWidth: 120}, // {field: 'merchant_order_id', title: '系统订单号', minWidth: 120},
// {field: 'account', title: '充值账号',}, // {field: 'account', title: '充值账号',},
{ {
field: 'cash', title: '总面值', align: 'center', minWidth: 120, templet: function (d) { field: 'cash', title: '总面值', align: 'center', templet: function (d) {
if (d.cash === '' || d.cash === null || d.cash === undefined) { if (d.cash === '' || d.cash === null || d.cash === undefined) {
d.cash_num = '-'; d.cash_num = '-';
@ -328,7 +322,6 @@
field: 'merchant_callback_msg', field: 'merchant_callback_msg',
align: 'center', align: 'center',
title: '同步结果', title: '同步结果',
width: 100,
templet: function (d) { templet: function (d) {
switch (d.merchant_callback_msg) { switch (d.merchant_callback_msg) {
case 'success': case 'success':
@ -344,8 +337,8 @@
} }
} }
}, },
{field: 'msg', title: '充值结果', align: 'center', minWidth: 100}, {field: 'msg', title: '充值结果', align: 'center'},
{field: 'right', toolbar: '#toolbar', width: 200, minWidth: 100, title: '操作面板', fixed: 'right'} {field: 'right', toolbar: '#toolbar', width: 200, title: '操作面板', fixed: 'right'}
]], ]],
done: function (index, layero) { done: function (index, layero) {
adjustColumnWidth(); adjustColumnWidth();
@ -361,6 +354,7 @@
$(".layui-table-body tr").each(function (index, val) { $(".layui-table-body tr").each(function (index, val) {
$($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height()); $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
}); });
} }
// , height: 'full-110' // , height: 'full-110'
@ -667,11 +661,23 @@
<style type="text/css"> <style type="text/css">
.layui-table { /*.layTab{*/
/* width:auto;*/
/* ov*/
/*}*/
/*.layui-table-cell{*/
/* width: auto;*/
/*}*/
/*.layui-table-cell.auto-width {*/
/* width: auto !important;*/
/*}*/
.table-diy-class{
border-collapse: collapse;
box-shadow: rgba(0, 0, 0, 0.2) 0 4px 8px;
table-layout: auto; table-layout: auto;
background-color: white;
width: auto;
} }
.color-span { .color-span {
padding: 2px; padding: 2px;
padding-left: 8px; padding-left: 8px;
@ -696,6 +702,7 @@
.color-span-gray { .color-span-gray {
background-color: #666 !important; background-color: #666 !important;
} }
</style> </style>
<script> <script>