yangk
/
AssetManagement
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(asset): 优化盘点结果页面样式和响应式布局

Browse Source 
- 添加完整的CSS样式定义，包括页面高度、滚动条和表单布局
- 重构应盘明细表格为固定头部可滚动表格，提升大数据量显示体验
- 实现盘盈录入表单的网格布局，支持响应式断点适配
- 调整资产编码单元格样式，支持长文本换行显示
- 优化模态框尺寸计算逻辑，根据视口大小动态调整宽高
- 简化盘点确认提示信息，提升用户体验
main
yangk 2 days ago
parent 9b63b8c51b
commit d587e1a8b1
2 changed files with 152 additions and 40 deletions
Show Stats Download Patch File Download Diff File

178
ruoyi-asset/src/main/resources/templates/asset/task/result.html
Unescape Escape View File

@ -2,12 +2,122 @@
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:include="include :: header('录入盘点结果')" />
<style>
html,
body {
height: 100%;
}
body.white-bg {
overflow: hidden;
}
.inventory-result-page {
height: 100%;
overflow-y: auto;
padding: 12px 16px 10px;
}
.inventory-result-page .form-group {
margin-bottom: 8px;
}
.inventory-result-page .form-header {
margin: 10px 0 8px;
padding-bottom: 8px;
}
.task-summary {
margin-bottom: 4px;
}
.task-summary .form-control-static {
min-height: 24px;
padding-top: 5px;
padding-bottom: 5px;
}
.inventory-table-wrap {
width: 100%;
overflow: auto;
border: 1px solid #e7eaec;
background: #fff;
}
.expected-table-wrap {
max-height: 285px;
}
.surplus-table-wrap {
max-height: 210px;
margin-top: 8px;
}
.inventory-result-page .table {
margin-bottom: 0;
}
.inventory-result-page .table > thead > tr > th {
position: sticky;
top: 0;
z-index: 2;
white-space: nowrap;
background: #f3f6fb;
}
.inventory-result-page .table > tbody > tr > td {
vertical-align: middle;
}
.expected-result-table {
min-width: 1280px;
}
.surplus-result-table {
min-width: 1480px;
}
.asset-code-cell {
word-break: break-word;
line-height: 1.35;
}
.surplus-entry-form {
margin: 0;
}
.surplus-entry-grid {
display: grid;
grid-template-columns: minmax(128px, 0.8fr) repeat(3, minmax(135px, 1fr)) repeat(2, minmax(150px, 1fr));
gap: 8px;
}
.surplus-entry-actions {
display: grid;
grid-template-columns: 1fr 180px;
gap: 8px;
margin-top: 8px;
}
@media (max-width: 1100px) {
.surplus-entry-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.surplus-entry-grid,
.surplus-entry-actions {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-task-result" th:object="${amsInventoryTask}">
<div class="inventory-result-page">
<form class="form-horizontal" id="form-task-result" th:object="${amsInventoryTask}">
<input name="taskId" th:field="*{taskId}" type="hidden">
<div class="row">
<div class="row task-summary">
<div class="col-sm-4">
<div class="form-group">
<label class="col-sm-4 control-label">任务号：</label>
@ -29,8 +139,8 @@
</div>
<h4 class="form-header h4">应盘明细结果</h4>
<div class="col-sm-12 select-table table-striped">
<table class="table table-bordered table-hover">
<div class="inventory-table-wrap expected-table-wrap table-striped">
<table class="table table-bordered table-hover expected-result-table">
<thead>
<tr>
<th style="width: 110px;">资产编码</th>
@ -45,7 +155,7 @@
</thead>
<tbody>
<tr th:each="item, stat : *{amsInventoryTaskItemList}">
<td>
<td class="asset-code-cell">
<input type="hidden" th:name="|amsInventoryTaskItemList[${stat.index}].itemId|" th:value="${item.itemId}">
<span th:text="${item.assetCode}"></span>
</td>
@ -88,42 +198,36 @@
</form>
<h4 class="form-header h4">盘盈明细</h4>
<form class="form-horizontal m" id="form-surplus-add"
<form class="form-horizontal surplus-entry-form" id="form-surplus-add"
th:if="${amsInventoryTask.taskStatus == 'ISSUED' or amsInventoryTask.taskStatus == 'INVENTORYING'}">
<input name="taskId" th:value="${amsInventoryTask.taskId}" type="hidden">
<div class="row">
<div class="col-sm-2">
<select class="form-control" name="identifyMethod" required>
<option value="EPC">EPC识别</option>
<option value="ASSET_CODE">资产编码</option>
<option value="MANUAL">手工记录</option>
</select>
</div>
<div class="col-sm-2"><input class="form-control" name="epcCode" maxlength="128" placeholder="EPC编码"></div>
<div class="col-sm-2"><input class="form-control" name="assetCode" maxlength="64" placeholder="资产编码"></div>
<div class="col-sm-2"><input class="form-control" name="assetName" maxlength="100" placeholder="资产名称"></div>
<div class="col-sm-2">
<select class="form-control" name="inventoryWarehouseId" required>
<option value="">盘点仓库</option>
<option th:each="warehouse : ${warehouseList}" th:value="${warehouse.warehouseId}"
th:text="${warehouse.warehouseCode + ' - ' + warehouse.warehouseName}"></option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control" name="inventoryLocationId" required>
<option value="">盘点位置</option>
<option th:each="location : ${locationList}" th:value="${location.locationId}"
th:text="${location.locationCode + ' - ' + location.locationName}"></option>
</select>
</div>
<div class="surplus-entry-grid">
<select class="form-control" name="identifyMethod" required>
<option value="EPC">EPC识别</option>
<option value="ASSET_CODE">资产编码</option>
<option value="MANUAL">手工记录</option>
</select>
<input class="form-control" name="epcCode" maxlength="128" placeholder="EPC编码">
<input class="form-control" name="assetCode" maxlength="64" placeholder="资产编码">
<input class="form-control" name="assetName" maxlength="100" placeholder="资产名称">
<select class="form-control" name="inventoryWarehouseId" required>
<option value="">盘点仓库</option>
<option th:each="warehouse : ${warehouseList}" th:value="${warehouse.warehouseId}"
th:text="${warehouse.warehouseCode + ' - ' + warehouse.warehouseName}"></option>
</select>
<select class="form-control" name="inventoryLocationId" required>
<option value="">盘点位置</option>
<option th:each="location : ${locationList}" th:value="${location.locationId}"
th:text="${location.locationCode + ' - ' + location.locationName}"></option>
</select>
</div>
<div class="row m-t-sm">
<div class="col-sm-10"><input class="form-control" name="remark" maxlength="500" placeholder="备注"></div>
<div class="col-sm-2"><a class="btn btn-primary btn-block" onclick="addSurplus()">新增盘盈</a></div>
<div class="surplus-entry-actions">
<input class="form-control" name="remark" maxlength="500" placeholder="备注">
<a class="btn btn-primary btn-block" onclick="addSurplus()">新增盘盈</a>
</div>
</form>
<div class="col-sm-12 select-table table-striped">
<table class="table table-bordered table-hover">
<div class="inventory-table-wrap surplus-table-wrap table-striped">
<table class="table table-bordered table-hover surplus-result-table">
<thead>
<tr>
<th>类型</th>

14
ruoyi-asset/src/main/resources/templates/asset/task/task.html
Unescape Escape View File

@ -187,16 +187,24 @@
}
function openResult(taskId) {
var viewportWidth = $(top.window).width();
var viewportHeight = $(top.window).height();
var modalWidth = Math.min(1200, Math.max(860, viewportWidth - 120));
var modalHeight = Math.min(720, Math.max(460, viewportHeight - 96));
$.modal.openOptions({
title: "录入盘点结果",
url: prefix + "/result/" + taskId,
width: "1200",
height: "720"
width: modalWidth,
height: modalHeight,
callBack: function(index, layero) {
var iframeWindow = layero.find("iframe")[0].contentWindow;
iframeWindow.submitHandler(index, layero);
}
});
}
function confirmTask(taskId) {
$.modal.confirm("确认后只完成盘点任务，不会自动调整资产台账，也不会写资产履历，是否继续？", function() {
$.modal.confirm("确认完成盘点任务，是否继续？", function() {
$.operate.post(prefix + "/confirm/" + taskId, {});
});
}

Write Preview
Loading…
Cancel
Save