feat(table): 优化表格布局和功能

- 设置表格列宽,优化表格布局
- 添加固定列功能,提高表格滚动体验
- 更新折扣输入格式,支持更精确的数值
- 调整表格样式,提升可读性
master
chenhao 2025-07-04 09:25:00 +08:00
parent 99c496e9a8
commit c8a5ee7930
8 changed files with 82 additions and 12 deletions

View File

@ -17,6 +17,7 @@
<!-- 通用JS -->
<div th:fragment="footer">
<script th:inline="javascript"> var ctx = [[@{/}]]; var lockscreen = [[${session.lockscreen}]]; if(lockscreen){window.top.location=ctx+"lockscreen";} </script>
<a id="scroll-up" href="javascript:;" class="btn btn-sm display"><i class="fa fa-angle-double-up"></i></a>
<script th:src="@{/js/jquery.min.js?v=3.6.3}"></script>
@ -39,6 +40,7 @@
<script th:src="@{/ruoyi/js/common.js?v=4.8.0}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=4.8.0}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js?v=1.22.6}"></script>
</div>
<!--layui库-->
<div th:fragment="layui">

View File

@ -173,7 +173,7 @@
</td>
<td>
<input value="${data.guidanceDiscount || ''}" name="softwareProjectProductInfoList[${length}].guidanceDiscount" readonly type="hidden" class="form-control guidanceDiscount" >
<label style="display: flex;align-items: center"><input style="width: calc(100% - 10px);" value="${data.guidanceDiscountFormat || ''}" readonly required type="number" min="0" max="100" step="0.1" class="form-control guidance-discount-format" required>%
<label style="display: flex;align-items: center"><input style="width: calc(100% - 10px);" value="${data.guidanceDiscountFormat || ''}" readonly required type="number" min="0" max="100" step="0.01" class="form-control guidance-discount-format" required>%
</label>
</td>
<td><input value="${data.discount || ''}" name="softwareProjectProductInfoList[${length}].discount" type="hidden" class="form-control discount" required>

View File

@ -3,6 +3,11 @@
<head>
<th:block th:include="include :: header('发货记录列表')" />
</head>
<style>
.bootstrap-table table {
table-layout: fixed;
}
</style>
<body class="gray-bg">
<div class="container-div">
<div class="row">
@ -92,6 +97,8 @@
removeUrl: prefix + "/remove",
exportUrl: prefix + "/export",
modalName: "发货记录",
fixedColumns: true,
fixedRightNumber: 1,
columns: [{
checkbox: true
},
@ -101,11 +108,13 @@
visible: false
},
{
width: 150,
field: 'orderCode',
title: '合同编号',
},
{
width: 260,
field: 'orderName',
title: '合同名称',
formatter:function (value,row){
@ -113,10 +122,12 @@
},
},
{
width: 100,
field: 'deliveryCode',
title: '发货单号'
},
{
width: 100,
field: 'total',
title: '发货数量',
escape:true,
@ -129,10 +140,12 @@
}
},
{
width: 100,
field: 'deliveryDate',
title: '发货日期'
},
{
width: 100,
field: 'deliveryType',
title: '发货方式',
formatter: function(value, row, index) {
@ -140,6 +153,7 @@
}
},
{
width: 100,
field: 'deliveryStatus',
title: '发货状态',
formatter: function(value, row, index) {
@ -147,10 +161,12 @@
}
},
{
width: 100,
field: 'createByName',
title: '创建人'
},
{
width: 190,
title: '操作',
align: 'center',
formatter: function(value, row, index) {

View File

@ -7,6 +7,9 @@
.select-list li p, .select-list li label:not(.radio-box){
width: 95px;
}
.bootstrap-table table {
table-layout: fixed;
}
</style>
<body class="gray-bg">
<div class="container-div">
@ -79,6 +82,8 @@
removeUrl: prefix + "/remove",
exportUrl: prefix + "/export",
modalName: "合同档案",
fixedColumns: true,
fixedRightNumber:1,
columns: [{
checkbox: true
},
@ -88,26 +93,32 @@
visible: false
},
{
width:150,
field: 'orderCode',
title: '合同编号'
},
{
width:80,
field: 'versionCode',
title: '版本号'
},
{
width:260,
field: 'orderName',
title: '合同名称'
},
{
width:100,
field: 'projectCode',
title: '项目编号'
},
{
width:170,
field: 'customerName',
title: '最终客户名称'
},
{
width:100,
field: 'orderType',
title: '合同类型',
formatter: function(value, row, index) {
@ -115,11 +126,13 @@
}
},
{
width:100,
field: 'orderDate',
title: '合同签定日期'
},
{
field: 'createByName',
width:100,
field: 'createByName',
title: '创建人'
},
// {
@ -127,6 +140,7 @@
// title: '合同状态'
// },
{
width:150,
title: '操作',
align: 'center',
formatter: function(value, row, index) {

View File

@ -92,27 +92,32 @@
visible: false
},
{
width: 100,
field: 'agentCode',
title: '代表处编码'
},
{
width: 100,
field: 'agentName',
title: '代表处名称'
},
{
width: 100,
field: 'province',
title: '所在省'
},
{
width: 100,
field: 'city',
title: '所在市'
},
{
width: 100,
field: 'createAt',
title: '创建时间'
},
{
width: '200',
width: '150',
title: '操作',
align: 'center',
formatter: function(value, row, index) {

View File

@ -9,6 +9,9 @@
}
.bootstrap-table table {
table-layout: fixed;
th,td{
word-wrap: break-word;
}
}
</style>
<body class="gray-bg">
@ -115,17 +118,17 @@
title: '最终客户名称'
},
{
width:100,
width:80,
field: 'customerPostcode',
title: '客户邮编'
},
{
width:100,
width:80,
field: 'province',
title: '所在省'
},
{
width:100,
width:80,
field: 'city',
title: '所在市'
},
@ -152,7 +155,7 @@
{
width:100,
field: 'bgProperty',
title: '所属行业',
title: 'BG',
formatter: (value, row) => {
return $.table.selectDictLabel([[${@dict.getType('bg_type')}]], value);
}

View File

@ -13,6 +13,9 @@
.select-list li p, .select-list li label:not(.radio-box){
width: 80px;
}
.bootstrap-table table {
table-layout: fixed;
}
</style>
<body class="gray-bg">
<div class="container-div">
@ -77,7 +80,7 @@
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: jquery-cxselect-js"/>
<th:block th:include="include :: bootstrap-table-fixed-columns-js" />
<script th:inline="javascript">
var editFlag = [[${@permission.hasPermi('system:partner:edit')}]];
var removeFlag = [[${@permission.hasPermi('system:partner:remove')}]];
@ -92,6 +95,8 @@
removeUrl: prefix + "/remove",
exportUrl: prefix + "/export",
modalName: "代理商管理",
fixedColumns:true,
fixedRightNumber:1,
columns: [{
checkbox: true
},
@ -101,34 +106,42 @@
visible: false
},
{
width:100,
field: 'partnerCode',
title: '代理商编码'
},
{
width: 200,
field: 'partnerName',
title: '代理商名称'
},
{
width:100,
field: 'province',
title: '省'
},
{
width:100,
field: 'city',
title: '市'
},
{
width:100,
field: 'address',
title: '详细地址'
},
{
width:100,
field: 'contactPerson',
title: '联系人'
},
{
width:100,
field: 'contactPhone',
title: '联系电话'
},
{
width:100,
field: 'level',
title: '认证级别',
formatter: function(value, row, index) {
@ -136,10 +149,12 @@
}
},
{
width:100,
field: 'createAt',
title: '创建时间'
},
{
width:150,
title: '操作',
align: 'center',
formatter: function(value, row, index) {

View File

@ -3,6 +3,11 @@
<head>
<th:block th:include="include :: header('产品管理列表')" />
</head>
<style>
.bootstrap-table table {
table-layout: fixed;
}
</style>
<body class="gray-bg">
<div class="container-div">
<div class="row">
@ -49,6 +54,7 @@
</div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-table-fixed-columns-js" />
<script th:inline="javascript">
var editFlag = [[${@permission.hasPermi('system:product:edit')}]];
var removeFlag = [[${@permission.hasPermi('system:product:remove')}]];
@ -62,6 +68,8 @@
removeUrl: prefix + "/remove",
exportUrl: prefix + "/export",
modalName: "产品管理",
fixedColumns:true,
fixedRightNumber:1,
columns: [{
checkbox: true
},
@ -71,37 +79,44 @@
visible: false
},
{
width:100,
field: 'productCode',
title: 'BOM编码'
},
{
field: 'hzCode',
{width:100,
field: 'hzCode',
title: '上架编码'
},
{
width:100,
field: 'productName',
title: '产品名称'
},
{
width:100,
field: 'model',
title: '产品型号'
},
{
field: 'cataloguePrice',
width:100,
field: 'cataloguePrice',
title: '目录单价'
},
{
field: 'guidanceDiscount',
width:100,
field: 'guidanceDiscount',
title: '指导折扣',
formatter: function(value, row, index) {
return value?(value * 100).toFixed(2) + '%' :'-';
}
},
{
width:100,
field: 'createdAt',
title: '创建时间'
},
{
width:150,
title: '操作',
align: 'center',
formatter: function(value, row, index) {