feat(table): 优化表格布局和功能
- 设置表格列宽,优化表格布局 - 添加固定列功能,提高表格滚动体验 - 更新折扣输入格式,支持更精确的数值 - 调整表格样式,提升可读性master
parent
99c496e9a8
commit
c8a5ee7930
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in New Issue