实现第二个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);
}
},
//
添加双击行的回调函数
onDblClickRow: 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 : zOnClick
};
$.tree.init(options);
function zOnClick(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>
本文展示了如何使用JavaScript来禁用和启用HTML输入标签的按钮，通过修改DOM属性实现按钮状态的切换。
扫一扫
到【灌水乐园】发言
3684
