feat(templates): 领用申请页面增加申请人信息显示和用户选择优化

- 在新增和编辑页面添加申请人和申请部门信息显示
- 引入 select2 组件实现领用人下拉框模糊搜索功能
- 设置默认领用部门和领用用户配置
- 优化表格中用户选择器的初始化逻辑
- 添加 select2 样式和脚本引用支持
main
yangk 2 weeks ago
parent 248dc64a6b
commit 42c5bfa275

@ -2,6 +2,7 @@
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:include="include :: header('新增领用申请')" />
<th:block th:include="include :: select2-css" />
<style type="text/css">
table label.error { position: inherit; }
select + label.error { z-index: 1; right: 40px; }
@ -11,6 +12,24 @@
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-receive-add">
<h4 class="form-header h4">基本信息</h4>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label">申请人:</label>
<div class="col-sm-8">
<input th:value="${applicantName}" class="form-control" type="text" readonly>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label">申请部门:</label>
<div class="col-sm-8">
<input th:value="${applyDeptName}" class="form-control" type="text" readonly>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
@ -38,10 +57,13 @@
</form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<script th:inline="javascript">
var prefix = ctx + "asset/receive";
var deptList = [[${deptList}]];
var userList = [[${userList}]];
var defaultReceiveDeptId = [[${defaultReceiveDeptId}]];
var defaultReceiveUserId = [[${defaultReceiveUserId}]];
$("#form-receive-add").validate({ focusCleanup: true });
@ -68,6 +90,14 @@
showToggle: false,
showColumns: false,
sidePagination: "client",
onPostBody: function() {
// 表格数据渲染完成后,将领用人下拉框初始化为 select2 模糊搜索框
if ($.fn.select2) {
$(".select-user").select2({
width: "100%"
});
}
},
columns: [{
checkbox: true
},
@ -163,8 +193,8 @@
beforeLocationId: asset.locationId,
beforeLocationCode: asset.locationCode,
beforeLocationName: asset.locationName,
receiveDeptId: "",
receiveUserId: "",
receiveDeptId: defaultReceiveDeptId,
receiveUserId: defaultReceiveUserId,
remark: ""
};
}
@ -232,7 +262,8 @@
}
function buildUserSelect(value, row, index) {
var select = $("<select>").addClass("form-control").attr({
// 加上 select-user 样式类,以便在 onPostBody 回调中初始化为 select2 模糊搜索框
var select = $("<select>").addClass("form-control select-user").attr({
name: "amsReceiveOrderItemList[" + index + "].receiveUserId",
required: true
});

@ -2,6 +2,7 @@
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:include="include :: header('修改领用申请')" />
<th:block th:include="include :: select2-css" />
<style type="text/css">
table label.error { position: inherit; }
select + label.error { z-index: 1; right: 40px; }
@ -59,12 +60,15 @@
</form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<script th:inline="javascript">
var prefix = ctx + "asset/receive";
var orderId = [[${amsReceiveOrder.orderId}]];
var detailData = [[${amsReceiveOrder.amsReceiveOrderItemList}]];
var deptList = [[${deptList}]];
var userList = [[${userList}]];
var defaultReceiveDeptId = [[${defaultReceiveDeptId}]];
var defaultReceiveUserId = [[${defaultReceiveUserId}]];
$("#form-receive-edit").validate({ focusCleanup: true });
@ -91,6 +95,14 @@
showToggle: false,
showColumns: false,
sidePagination: "client",
onPostBody: function() {
// 表格数据渲染完成后,将领用人下拉框初始化为 select2 模糊搜索框
if ($.fn.select2) {
$(".select-user").select2({
width: "100%"
});
}
},
columns: [{
checkbox: true
},
@ -186,8 +198,8 @@
beforeLocationId: asset.locationId,
beforeLocationCode: asset.locationCode,
beforeLocationName: asset.locationName,
receiveDeptId: "",
receiveUserId: "",
receiveDeptId: defaultReceiveDeptId,
receiveUserId: defaultReceiveUserId,
remark: ""
};
}
@ -255,7 +267,8 @@
}
function buildUserSelect(value, row, index) {
var select = $("<select>").addClass("form-control").attr({
// 加上 select-user 样式类,以便在 onPostBody 回调中初始化为 select2 模糊搜索框
var select = $("<select>").addClass("form-control select-user").attr({
name: "amsReceiveOrderItemList[" + index + "].receiveUserId",
required: true
});

Loading…
Cancel
Save