实现第二个tab页根据devid查询设备信息
<!DOCTYPE html>
<html lang="zh" xmlns
:th="http
://www
.thymeleaf
.org" xmlns
:shiro="http
://www
.pollix
.at/thymeleaf/shiro">
<head>
<th
:block th
:include="include
:: header
('设备台帐管理列表'
)" />
<th
:block th
:include="include
:: layout-latest-css" />
<th
:block th
:include="include
:: ztree-css" />
</head>
<body class="gray-bg">
<div class="ui-layout-west">
<div class="box box-main">
<div class="box-header">
<div class="box-title">
<i class="fa icon-grid"></i> 组织机构
</div>
<div class="box-tools pull-right">
<a type="button" class="btn btn-box-tool" href="#"
onclick="dept
()" title="管理部门"><i class="fa fa-edit"></i></a>
<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display
:none;"><i class="fa fa-chevron-up"></i></button>
<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i class="fa fa-refresh"></i></button>
</div>
</div>
<div class="ui-layout-content">
<div id="tree" class="ztree"></div>
</div>
</div>
</div>
<div class="ui-layout-center">
<div class="container-div">
<div class="row">
<!-- 页签开始 -->
<div class="ibox-content">
<!-- <form id="formId">
<input type="hidden" id="parentId" name="parentId">
</form> -->
<ul class="nav nav-tabs">
<!-- { text
: "设备列表", name
: "devlist", alias
:"devlist",visible
:true},
{ text
: "设备信息", name
: "devinfo" ,alias
:"devinfo",visible
:true},
{ text
: "扩展属性", name
: "devext" ,alias
:"devext",visible
:true},
{ text
: "物料清单", name
: "devbom" ,alias
:"devbom",visible
:true},
{ text
:"文档清单", name
:"devdoc",alias
:"devdoc",visible
:true},
{ text
: "检修记录", name
: "overhaulrecord" ,alias
:"overhaulrecord",visible
:true},
{ text
: "养护计量", name
: "curingmeasure" ,alias
:"curingmeasure",visible
:true},
{ text
: "安装历史", name
: "installationhistory" ,alias
:"installationhistory",visible
:true} -->
<li class="active"><a data-toggle="tab" aria-expanded="true"
onclick="queryDevlist
()">设备列表</a></li>
<li><a data-toggle="tab" aria-expanded="false"
onclick="devinfo
()">设备信息</a></li>
<li><a data-toggle="tab" aria-expanded="false"
onclick="devext
()">扩展属性</a></li>
<li><a data-toggle="tab" aria-expanded="false"
onclick="devbom
()">物料清单</a></li>
<li><a data-toggle="tab" aria-expanded="false"
onclick="devdoc
()">文档清单</a></li>
<li><a data-toggle="tab" aria-expanded="false"
onclick="overhaulrecord
()">检修记录</a></li>
<li><a data-toggle="tab" aria-expanded="false"
onclick="curingmeasure
()">养护计量</a></li>
<li><a data-toggle="tab" aria-expanded="false"
onclick="installationhistory
()">安装历史</a></li>
<!-- <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 第一个选项卡</a>
</li>
<li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">第二个选项卡</a>
</li> -->
</ul>
</div>
<!-- 页签结束 -->
<div class="col-sm-12 search-collapse">
<form id="devledger-form">
<input type="hidden" id="deptId" name="deptId">
<input type="hidden" id="devSiteId" name="devSiteId">
<div class="select-list">
<ul>
<li>
<label>设备名称：</label>
<input type="text" name="devName"/>
</li>
<li>
<label>固定资产编码：</label>
<input type="text" name="assetCode"/>
</li>
<li>
<label>生产厂家：</label>
<input type="text" name="factory"/>
</li>
<!-- <li>
设备状态：<select name="status" th
:with="type=
${@dict
.getType
('sys_normal_disable'
)}">
<option value="">所有</option>
<option th
:each="dict
: ${type}" th
:text="
${dict
.dictLabel}" th
:value="
${dict
.dictValue}"></option>
</select>
</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
()"><i class="fa fa-refresh"></i> 重置</a>
</li>
</ul>
</div>
</form>
</div>
<div class="btn-group-sm" id="toolbar" role="group">
<a class="btn btn-success"
onclick="
$.operate
.add
()" shiro
:hasPermission="system
:devledger
:add">
<i class="fa fa-plus"></i> 新建
</a>
<!-- <a class="btn btn-primary single disabled"
onclick="
$.operate
.edit
()" shiro
:hasPermission="system
:devledger
:edit">
<i class="fa fa-edit"></i> 修改
</a> -->
<a class="btn btn-danger multiple disabled"
onclick="
$.operate
.removeAll
()" shiro
:hasPermission="system
:devledger
:remove">
<i class="fa fa-remove"></i> 删除
</a>
<a class="btn btn-warning"
onclick="
$.table
.exportExcel
()" shiro
:hasPermission="system
:devledger
:export">
<i class="fa fa-download"></i> 导出
</a>
</div>
<div class="col-sm-12 select-table table-striped" style="overflow-y
: auto;height
: 250px;">
<table id="bootstrap-table"></table>
</div>
</div>
</div>
</div>
<th
:block th
:include="include
:: footer" />
<th
:block th
:include="include
:: layout-latest-js" />
<th
:block th
:include="include
:: ztree-js" />
<script th
:inline="
javascript">
//var editFlag = [[
${@permission
.hasPermi
('system
:devledger
:edit'
)}]];
//var removeFlag = [[
${@permission
.hasPermi
('system
:devledger
:remove'
)}]];
var prefix = ctx + "system/devledger";
var selectedDeviceId = "";
//判断当前元素的宽度，动态决定侧边栏是否隐藏
$(function
() {
var panehHidden = false;
if
($(this
).width
() < 769
) {
panehHidden = true;
}
$('body'
).layout
({ initClosed
: panehHidden, west__size
: 185 }
);
queryDevlist
();
queryLocationTree
();
}
);
//不同页签的按钮设定
var ButtonManager = {
templates
: {
devlist
: `
<a class="btn btn-success"
onclick="
$.operate
.add
()" shiro
:hasPermission="system
:location
:add">
<i class="fa fa-plus"></i> 新建
</a>
<a class="btn btn-danger multiple disabled"
onclick="
$.operate
.removeAll
()" shiro
:hasPermission="system
:location
:remove">
<i class="fa fa-remove"></i> 删除
</a>
<a class="btn btn-warning"
onclick="
$.table
.exportExcel
()" shiro
:hasPermission="system
:location
:export">
<i class="fa fa-download"></i> 导出
</a>
`,
devinfo
: `
<a class="btn btn-success"
onclick="
$.operate
.save
()" shiro
:hasPermission="system
:base
:save">
<i class="fa fa-plus"></i> 保存
</a>
<a class="btn btn-primary single disabled"
onclick="
$.operate
.printnum
()" shiro
:hasPermission="system
:base
:printnum">
<i class="fa fa-edit"></i> 打印条形码
</a>
<a class="btn btn-danger multiple disabled"
onclick="
$.operate
.printform
()" shiro
:hasPermission="system
:base
:printform">
<i class="fa fa-remove"></i> 打印台账
</a>
<a class="btn btn-warning"
onclick="
$.operate
.renewal
()" shiro
:hasPermission="system
:base
:renewal">
<i class="fa fa-download"></i> 设备续保
</a>
`,
devext
: `
<a class="btn btn-warning"
onclick="
$.operate
.save
()" shiro
:hasPermission="system
:base
:save">
<i class="fa fa-download"></i> 保存
</a>
`,
devbom
: `//此页签中包含设备物料清单、设备配套耗材、设备配套文档三个功能增删改查
<a class="btn btn-warning"
onclick="
$.operate
.save
()" shiro
:hasPermission="system
:base
:save">
<i class="fa fa-download"></i> 保存
</a>
`
},
change
: function
(buttonType
) {
if
(this
.templates[buttonType]
) {
$('#toolbar'
).html
(this
.templates[buttonType]
);
return true;
}
return false;
},
// 切换到设备列表按钮
toDevlist
: function
() {
return this
.change
('devlist'
);
},
// 切换到设备信息按钮
toDevinfo
: function
() {
return this
.change
('devinfo'
);
},
// 切换到扩展属性按钮
toDevext
: function
() {
return this
.change
('devext'
);
},
// 切换到物料清单按钮
toDevbom
: function
() {
return this
.change
('devbom'
);
},
// 切换到文档清单按钮
toDevdoc
: function
() {
return this
.change
('devdoc'
);
},
// 切换到检修记录按钮
toOverhaulrecord
: function
() {
return this
.change
('overhaulrecord'
);
},
// 切换到养护计量按钮
toCuringmeasure
: function
() {
return this
.change
('curingmeasure'
);
},
// 切换到安装历史按钮
toInstallationhistory
: function
() {
return this
.change
('installationhistory'
);
}
};
//查询设备列表
function queryDevlist
() {
var options = {
url
: prefix + "/list",
createUrl
: prefix + "/add",
/* updateUrl
: prefix + "/edit/{id}", */
removeUrl
: prefix + "/remove",
exportUrl
: prefix + "/export",
/* sortName
: "createTime",
sortOrder
: "desc", */
modalName
: "设备台帐管理",
columns
: [{
checkbox
: true
},
{
field
: 'devCode',
title
: '设备编码'
},
{
field
: 'devName',
title
: '设备名称'
/* title
: '设备名称',
sortable
: true */
},
{
field
: 'devTypeId',
title
: '设备类型'//设备类型ID
},
{
field
: 'devSpecksId',
title
: '设备型号'
},
{
field
: 'factory',
title
: '生产厂家'
},
{
field
: 'assetCode',
title
: '固定资产编码'
},
{
field
: 'devStatus',
title
: '设备状态',
align
: 'center',
formatter
: function
(value, row, index
) {
return statusTools
(row
);
}
},
{
field
: 'wzCode',
title
: '物资编码',
visible
: false // 隐藏该列
},
{
field
: 'snCode',
title
: 'SN编码',
visible
: false // 隐藏该列
},
{
title
: '操作',
align
: 'center',
visible
: false, // 隐藏该列
formatter
: function
(value, row, index
) {
var actions = [];
actions
.push
('<a class="btn btn-success btn-xs ' + editFlag + '" href="
javascript:void
(0
)"
onclick="
$.operate
.edit
(\'' + row
.devId + '\'
)"><i class="fa fa-edit"></i>编辑</a> '
);
actions
.push
('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="
javascript:void
(0
)"
onclick="
$.operate
.remove
(\'' + row
.devId + '\'
)"><i class="fa fa-remove"></i>删除</a>'
);
return actions
.join
(''
);
}
}
],
onLoadSuccess
: function
(data
) {
// 表格数据加载成功后执行
if
(data && data
.row
.length > 0
) {
// 获取第一行数据
var firstRow = data
.row[0];
selectedDeviceId = firstRow
.devId;
console
.log
("第一行设备ID
:", selectedDeviceId
);
}
},
// 添加双击行的回调函数
onDbl
ClickRow
: function
(row,
$element
) {
// 这里编写跳转至第二个 tab 页的逻辑
// 假设使用
jQuery 来切换 tab 页，第二个 tab 的 id 为 tab2
$('#tab2'
).tab
('show'
);
}
};
$.table
.init
(options
);
}
function devinfo
() {
// 跳转到设备信息页面并传递参数
window
.location
.href = 'add
.html?devId=' + selectedDeviceId;
}
function devext
(){
/* prefix = ctx + "system/base"; */
debugger;
var options2 = {
/* id
:'bootstrap-table',
url
: prefix + "/list",
createUrl
: prefix + "/add",
updateUrl
: prefix + "/edit/{id}",
removeUrl
: prefix + "/remove",
exportUrl
: prefix + "/export",
modalName
: "设备基础信息", */
url
: prefix + "/devext",
createUrl
: prefix + "/add",
/* updateUrl
: prefix + "/edit/{id}", */
removeUrl
: prefix + "/remove",
exportUrl
: prefix + "/export",
/* sortName
: "createTime",
sortOrder
: "desc", */
modalName
: "设备信息",
columns
: [{
checkbox
: true
},
/* {
field
: 'devId',
title
: '设备ID',
visible
: false
}, */
{
field
: 'devCode',
title
: '设备编码'
},
{
field
: 'devName',
title
: '设备名称'
},
{
field
: 'professionName',
title
: '专业名称'
},
{
field
: 'devSpecksId',
title
: '设备型号'
},
{
field
: 'measurementFlag',
title
: '计量标志'
},
{
field
: 'maintenanceFlag',
title
: '养护标志'
},
{
field
: 'devStatus',
title
: '设备状态'
},
{
field
: 'statuDate',
title
: '当前状态日期'
},
{
field
: 'userDevFlag',
title
: '是否用户设备'
},
{
field
: 'factory',
title
: '生产厂家'
},
{
field
: 'zclb',
title
: '管理分类'
}
,
{
title
: '操作',
align
: 'center',
formatter
: function
(value, row, index
) {
var actions = [];
actions
.push
('<a class="btn btn-success btn-xs ' + editFlag + '" href="
javascript:void
(0
)"
onclick="
$.operate
.edit
(\'' + row
.devId + '\'
)"><i class="fa fa-edit"></i>编辑</a> '
);
actions
.push
('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="
javascript:void
(0
)"
onclick="
$.operate
.remove
(\'' + row
.devId + '\'
)"><i class="fa fa-remove"></i>删除</a>'
);
return actions
.join
(''
);
}
}
]
};
debugger;
reinitializeTable
(options2
);
//
$.table
.init
(options2
);
ButtonManager
.toEquit
(); // 切换回新增按钮
$.table
.search
();
}
//查询树形结构
function queryLocationTree
()
{
var url = ctx + "system/devledger/treeData";
var options = {
url
: url,
expandLevel
: 2,
onClick : z
OnClick
};
$.tree
.init
(options
);
function z
OnClick(event, treeId, treeNode
) {
$("#devSiteId"
).val
(treeNode
.id
);
//
$("#devSiteId"
).val
(treeNode
.pId
);
//
$("#title"
).val
(treeNode
.pId
);
$.table
.search
();
}
}
//树形结构的展开折叠刷新
$('#btnExpand'
).click(function
() {
$._tree
.expandAll
(true
);
$(this
).hide
();
$('#btnCollapse'
).show
();
}
);
$('#btnCollapse'
).click(function
() {
$._tree
.expandAll
(false
);
$(this
).hide
();
$('#btnExpand'
).show
();
}
);
$('#btnRefresh'
).click(function
() {
queryLocationTree
();
}
);
/* 树形结构-部门 */
function dept
() {
var url = ctx + "system/type";
$.modal
.openTab
("部门管理", url
);
}
/* 设备状态显示 */
function statusTools
(row
) {
if
(row
.devStatus == "active"
) {
return '在用';
//return '<i class=\"fa fa-toggle-off text-info fa-2x\"
onclick="enable
(\'' + row
.userId + '\'
)"></i> ';
} else if
(row
.devStatus == "tobeinstall"
) {
return '待安装';
//return '<i class=\"fa fa-toggle-off text-info fa-2x\"
onclick="enable
(\'' + row
.userId + '\'
)"></i> ';
} else if
(row
.devStatus == "inactive"
) {
return '停用';
//return '<i class=\"fa fa-toggle-off text-info fa-2x\"
onclick="enable
(\'' + row
.userId + '\'
)"></i> ';
}else if
(row
.devStatus == "discard"
) {
return '报废';
//return '<i class=\"fa fa-toggle-off text-info fa-2x\"
onclick="enable
(\'' + row
.userId + '\'
)"></i> ';
}
}
</script>
</body>
</html>
博客主要探讨了onclick和$().click的区别，指出onclick是JavaScript的方法，而$().click是jQuery的方法。
扫一扫
873
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
