<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
#toolbar1{
display: inline-block;
/*position: absolute;
margin: 10px auto;*/
line-height: 34px;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc
}
.isShow{
display: none;
}
</style>
<body class="gray-bg">
<div class="container-div">
<div class="row">
<div class="col-sm-12 select-info">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#tabHeader" data-toggle="tab">主表</a></li>
<li><a href="#tabDetail" data-toggle="tab">明细</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tabHeader">
<div class="col-sm-12 select-info">
<form id="receiptHeader-form">
<div class="select-list">
<ul>
<li>
表名：<input type="text" name="tableCode"/>
</li>
<li>
表描述：<input type="text" name="tableFuncation" id="tableFuncation"/>
</li>
<li>
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('receiptHeader-form')"><i class="fa fa-refresh"></i> 重置</a>
</li>
</ul>
</div>
</form>
</div>
<div class="btn-group hidden-xs" id="toolbar" role="group">
<a class="btn btn-outline btn-info btn-rounded" onclick="initialization()" shiro:hasPermission="system:table:add">初始化</a>
<a class="btn btn-outline btn-success btn-rounded" onclick="$.operate.add()" shiro:hasPermission="system:table:add">
<i class="fa fa-plus"></i> 新增
</a>
<a class="btn btn-outline btn-danger btn-rounded" onclick="$.operate.batRemove()" shiro:hasPermission="system:table:remove">
<i class="fa fa-trash-o"></i> 删除
</a>
</div>
<table id="bootstrap-table" data-mobile-responsive="true" class="table table-bordered table-hover"></table>
</div>
<div class="tab-pane fade" id="tabDetail">
<div class="col-sm-12 select-info">
<form id = "receiptDetail" >
<div class="select-list">
<ul>
<li>
字段名：<input type="text" name="fieldCode" id="fieldCode"/>
</li>
<li>
字段描述：<input type="text" name="fieldFuncation" id="fieldFuncation"/>
</li>
<li>
<a class="btn btn-primary btn-rounded btn-sm" onclick="loadDetail()"><i class="fa fa-search"></i> 搜索</a>
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('receiptDetail')"><i class="fa fa-refresh"></i> 重置</a>
</li>
</ul>
</div>
</form>
</div>
<div class="btn-group hidden-xs" id="toolbar1" role="group" style="position:relative;">
<a class="btn btn-outline btn-danger btn-rounded" onclick="batRemove()" shiro:hasPermission="system:table:remove">
<i class="fa fa-trash-o"></i> 删除
</a>
</div>
<table id="bootstrap-table1" data-mobile-responsive="true" class="table table-bordered table-hover"></table>
</div>
</div>
</div>
</div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
let editFlag = [[${@permission.hasPermi('system:table:edit')}]];
let removeFlag = [[${@permission.hasPermi('system:table:remove')}]];
let addFlag= [[${@permission.hasPermi('system:table:add')}]];
let prefix = ctx + "system/tableInfo";
let detailPrefix = ctx + "system/tableFieldInfo";
let detailCreateUrl = detailPrefix+"/add/";
let detailUpdateUrl = detailPrefix + "/edit/";
let detailRemoveUrl = detailPrefix+"/remove";
let headId = '';
$(function() {
var options = {
url: prefix + "/list",
createUrl: prefix + "/add",
updateUrl: prefix + "/edit/{id}",
removeUrl: prefix + "/remove",
modalName: "表",
sidePagination:"server",
search: false,
pageSize: 50,
columns: [{
checkbox: true
},
{
field : 'id',
title : '入库单id',
sortable: true,
visible: false
},
{
field : 'warehouseCode',
title : '仓库编码',
sortable:true
},
{
field : 'tableCode',
title : '表名',
sortable:true
},
{
field : 'tableName',
title : '表中文名'
},
{
field : 'tableFuncation',
title : '功能说明',
},
{
field : 'created',
title : '创建时间',
sortable:true,
visible: false
},
{
field : 'createdBy',
title : '创建人',
sortable:true,
visible: false
},
{
field : 'lastUpdated',
title : '最后修改时间',
visible:false,
sortable:true
},
{
field : 'lastUpdatedBy',
title : '更新用户',
visible:false,
},
{
title: '操作',
align: 'center',
formatter: function(value, row, index) {
let actions = [];
actions.push('<a class="btn btn-info btn-xs ' + addFlag + '" href="#" onclick="add(\'' + row.id + '\')"><i class="fa fa-plus"></i>添加字段</a> ');
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-trash-o"></i>删除</a>');
return actions.join('');
}
}]
};
$.table.init(options);
});
$("#bootstrap-table1").bootstrapTable({
// url: detailPrefix + "/list",
createUrl: detailPrefix + "/add",
updateUrl: detailPrefix + "/edit/{id}",
removeUrl: detailPrefix + "/remove",
// search: true, //搜索
sortable: true, //排序
showRefresh: true, //刷新
showToggle:true, //视图切换
clickToSelect: true,
showColumns:true, //列选择
showExport: true, //导出
exportDataType: "all", //导出类型basic', 'all', 'selected'.当前页、所有数据、选中数据
modalName: "入库明细",
sortName: "lastUpdated",
sortOrder: "desc",
iconSize: "outline",
toolbar: "#toolbar1",
contentType: "application/x-www-form-urlencoded",
pagination: true, // 是否显示分页（*）
pageNumber: 1, // 初始化加载第一页，默认第一页
pageSize: 50, // 每页的记录行数（*）
pageList: [10, 25, 50, 100], // 可供选择的每页的行数（*）
onRefresh: function(){
loadDetail();
},
columns: [{
checkbox: true
},
{
field : 'id',
title : 'id',
visible: false
},
{
field : 'headId',
title : 'sys_table_info的主键标识',
visible: false
},
{
field : 'fieldCode',
title : '字段名称',
sortable: true
},
{
field : 'filedName',
title : '字段中文名',
sortable: true
},
{
field : 'filedFuncation',
title : '字段设计说明'
},
{
field : 'created',
title : '创建时间',
sortable: true
},
{
field : 'createdBy',
title : '创建用户',
visible:false
},
{
field : 'lastUpdated',
title : '最后修改时间',
sortable: true
},
{
field : 'lastUpdatedBy',
title : '更新用户' ,
visible:false
},
{
title: '操作',
align: 'center',
events:'operateEvents',
formatter: function(value, row, index) {
var actions = [];
actions.push('<a id="table_edit" class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="remove(\'' + row.id + '\')"><i class="fa fa-trash-o"></i>删除</a>');
return actions.join('');
}
}]
});
/* 入库单列表-详细 */
function detail(id, code) {
headId = id;
receiptCode = code;
$("#myTab li").removeClass("active");
$("#tabHeader").removeClass("in active");
$("#myTab li:eq(1)").addClass("active");
$("#tabDetail").addClass("in active");
// $("#tabBase").addClass("in active");
loadDetail();
}
/* 入库单列表-详细 */
function loadDetail() {
let fieldCode = $("#fieldCode").val();
let fieldFuncation = $("#fieldFuncation").val();
$.ajax({
url: detailPrefix+'/list',
type:"post",
data:{
headId: headId,
fieldCode: fieldCode,
fieldFuncation: fieldFuncation
},
success:function (value) {
$("#bootstrap-table1").bootstrapTable('load',value.data);
}
});
}
/* 点击明细面板 */
$("#myTab li:eq(1)").click(function () {
detail(headId, "");
});
/* 点击主表面板 */
$("#myTab li:eq(0)").click(function () {
$.ajax({
url: prefix + "/list",
type:"post",
success:function (value) {
$("#bootstrap-table").bootstrapTable('refresh', value.data);
}
})
});
function add(id) {
$.modal.open("添加表字段信息", detailCreateUrl+id);
}
function edit(id) {
$.modal.open("添加表字段信息", detailUpdateUrl+id);
}
function initialization() {
$.modal.loading("正在处理中，请稍后...");
let config = {
url: prefix+"/init",
type: 'get',
success: function(result) {
$.operate.ajaxSuccess(result);
}
};
$.ajax(config)
}
</script>
</body>
</html>