diff options
| author | shizhendong <[email protected]> | 2019-10-22 14:24:09 +0800 |
|---|---|---|
| committer | shizhendong <[email protected]> | 2019-10-22 14:24:09 +0800 |
| commit | 6bb78e326a618d7e754a3957f08016caf5004698 (patch) | |
| tree | 6e297b6fccd04e9b86af0a5255535b68097aa27d | |
| parent | 26a9b8d42830db4fcc63ad604534e03f4f34ccb5 (diff) | |
机房机柜整合初版
11 files changed, 1281 insertions, 244 deletions
diff --git a/nezha-admin/src/main/resources/statics/css/nodeRoom.css b/nezha-admin/src/main/resources/statics/css/nodeRoom.css new file mode 100644 index 00000000..743349e9 --- /dev/null +++ b/nezha-admin/src/main/resources/statics/css/nodeRoom.css @@ -0,0 +1,76 @@ +/*按钮的显示与隐藏*/ +.myoption-open { + display: inline-block; +} + +.myoption-close { + display: none; +} + +/*左侧机房*/ +.room { + width: 20%; + height: 500px; + float: left; + margin-right: 50px; + position: relative; + overflow: hidden; +} + +/* 左侧机房的背景高亮*/ +.tr-higHlight { + background-color: #F5F5F5; +} + +.tr-normal { + background-color: #FFFFFF; +} + + +/*右侧行列表*/ +.ranks { + width: 70%; + float: left; + position: relative; +} + +/*行展示*/ +.cols { + position: absolute; + top: 0px; + left: 0px; +} + +/*机柜块*/ +.cab { + height: 100px; + width: 100px; + margin: 20px 10px; + /*background-color: #c4e3f3;*/ + line-height: 105px; + text-align: center; + border: 2px solid #337ab7; + border-radius: 20px; + float: left; + position: relative +} + +/*机柜详情按钮*/ +.cab-detail-option { + width: 20px; + height: 20px; + position: absolute; + line-height: 20px; + right: 10px; + bottom: 5px; +} + +/*机柜修改删除按钮*/ +.cab-but { + float: right; + position: absolute; + bottom: -10px; + right: 0px; +} + + diff --git a/nezha-admin/src/main/resources/templates/js/modules/node/nodeCabinet.js b/nezha-admin/src/main/resources/templates/js/modules/node/nodeCabinet.js index 577b6655..b2c03041 100644 --- a/nezha-admin/src/main/resources/templates/js/modules/node/nodeCabinet.js +++ b/nezha-admin/src/main/resources/templates/js/modules/node/nodeCabinet.js @@ -13,9 +13,9 @@ $(function () { {label: "<@spring.message 'common.remark'/>", name: 'remarks', width: 60, sortable: false} ], viewrecords: true, - height: 385, - rowNum: 10, - rowList: [10, 30, 50], + height: top.$(".content").height()-130, + rowNum: 15, + rowList : [15,30,50], rownumbers: true, rownumWidth: 25, autowidth: true, @@ -34,6 +34,14 @@ $(function () { }, gridComplete: function () { $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"}); // 隐藏grid底部滚动条 + }, + onSelectAll: function(rowids, status) { + if (status) { + toolsBtnHandle(); + } + }, + onSelectRow: function(rowid,status) { + toolsBtnHandle(); } }); }); @@ -121,7 +129,10 @@ var data = { rooms: [], roomRows: [], roomCols: [], - occUbit: null + occUbit: null, + // single multi 控制工具栏单选 多选可点击状态 + single:true, + multi:true }; var vm = new Vue({ @@ -151,6 +162,7 @@ var vm = new Vue({ this.reload(); }, reload: function () { + vm.single = vm.multi = true; vm.showList = true; var page = $("#jqGrid").jqGrid('getGridParam', 'page'); $("#jqGrid").jqGrid('setGridParam', { diff --git a/nezha-admin/src/main/resources/templates/js/modules/node/nodeGroup.js b/nezha-admin/src/main/resources/templates/js/modules/node/nodeGroup.js index 6b6592e2..6ea1fd4b 100644 --- a/nezha-admin/src/main/resources/templates/js/modules/node/nodeGroup.js +++ b/nezha-admin/src/main/resources/templates/js/modules/node/nodeGroup.js @@ -162,12 +162,12 @@ var helpers = window.validators.helpers; var nameCheck = function (value, nodeGroup) { if (helpers.req(value)) { var flag = true; - var params = "?name=" + value + "&pid=" + vm.nodeGroup.parentGroup.id; + var params = "?name=" + value + "&pid=" + vue.nodeGroup.parentGroup.id; if (nodeGroup.id) { params += "&id=" + nodeGroup.id; } if (nodeGroup.parentGroup.id == 0) { // 添加的是根节点 则参数需要传业务ID - params += "&systemId=" + vm.system.id; + params += "&systemId=" + vue.system.id; } $.ajax({ type: "GET", @@ -186,7 +186,7 @@ var nameCheck = function (value, nodeGroup) { } } -var vm = new Vue({ +var vue = new Vue({ el: "#app", data: this.data, validations: { @@ -201,16 +201,16 @@ var vm = new Vue({ }, methods: { getNodeInfos: function (node) { - vue.nodeGroup = node; - vue.query(); + vm.nodeGroup = node; + vm.query(); }, add: function (node, isRoot) { - vm.$v.nodeGroup.$reset(); + vue.$v.nodeGroup.$reset(); if (isRoot) { // 添加根节点组 - vm.showForm = true; + vue.showForm = true; // 获取当前权限 - vm.system = node; - vm.nodeGroup = { + vue.system = node; + vue.nodeGroup = { name: null, id: null, systemId: null, @@ -218,12 +218,12 @@ var vm = new Vue({ remark: null, parentGroup: null }; - vm.nodeGroup.parentGroup = {name: "<@spring.message 'nodegroup.root.group'/>", id: 0}; // 根节点组 + vue.nodeGroup.parentGroup = {name: "<@spring.message 'nodegroup.root.group'/>", id: 0}; // 根节点组 } else { // 获取节点组的业务系统 作为子节点组的业务系统 - vm.getParentSystem(node.systemId); - vm.showForm = true; - vm.nodeGroup = { + vue.getParentSystem(node.systemId); + vue.showForm = true; + vue.nodeGroup = { name: null, id: null, systemId: null, @@ -231,51 +231,51 @@ var vm = new Vue({ remark: null, parentGroup: null }; - vm.nodeGroup.parentGroup = node; + vue.nodeGroup.parentGroup = node; } - vm.count = 1; + vue.count = 1; this.open("<@spring.message 'common.add'/>"); }, update: function (node) { - vm.$v.nodeGroup.$reset(); + vue.$v.nodeGroup.$reset(); $.ajax({ type: "GET", url: baseURL + "nodegroup/detail?id=" + node.id, async: false, // 关闭异步 dataType: "json", success: function (r) { - vm.nodeGroup = r.data; + vue.nodeGroup = r.data; } }); - vm.getParentSystem(node.systemId); - vm.nodeGroup.parentGroup = node.getParentNode() == null ? {name: "<@spring.message 'nodegroup.root.group'/>", id: 0} : node.getParentNode(); + vue.getParentSystem(node.systemId); + vue.nodeGroup.parentGroup = node.getParentNode() == null ? {name: "<@spring.message 'nodegroup.root.group'/>", id: 0} : node.getParentNode(); this.open("<@spring.message 'common.edit'/>"); }, saveOrUpdate: function () { if (!this.validate()) { // 在下方定义的validate方法 return; } - vm.count++; + vue.count++; var url; - if (vm.nodeGroup.id == null) { + if (vue.nodeGroup.id == null) { url = "nodegroup/save"; } else { url = "nodegroup/update"; } - vm.$set(vm.nodeGroup, "pid", vm.nodeGroup.parentGroup.id); - vm.$set(vm.nodeGroup, "systemId", vm.system == null ? null : vm.system.id); - if (vm.nodeGroup.id) { - vm.nodeGroup.pid = vm.nodeGroup.pids = vm.nodeGroup.systemId = null; + vue.$set(vm.nodeGroup, "pid", vue.nodeGroup.parentGroup.id); + vue.$set(vue.nodeGroup, "systemId", vue.system == null ? null : vue.system.id); + if (vue.nodeGroup.id) { + vue.nodeGroup.pid = vue.nodeGroup.pids = vue.nodeGroup.systemId = null; } $.ajax({ - type: vm.nodeGroup.id == null ? "POST" : "PUT", + type: vue.nodeGroup.id == null ? "POST" : "PUT", url: baseURL + url, contentType: "application/json", - data: JSON.stringify(vm.nodeGroup), + data: JSON.stringify(vue.nodeGroup), success: function (r) { if (r.code === 200) { alert("<@spring.message 'common.success'/>", function (index) { - vm.reload(); + vue.reload(); }); } else { alert(r.msg); @@ -296,7 +296,7 @@ var vm = new Vue({ success: function (r) { if (r.code == 200) { alert("<@spring.message 'common.success'/>", function (index) { - vm.reload(); + vue.reload(); location.reload(); }); } else { @@ -313,27 +313,31 @@ var vm = new Vue({ async: false, dataType: "json", success: function (r) { - vm.system = r.data; + vue.system = r.data; } }); }, open: function (title) { layer.open({ - area: ['600px', '400px'], + area: ['50%', '100%'], shade: 0, title: title, type: 1, fixed: false, maxmin: false, + scrollbar: false, + offset: 'r', + closeBtn: 1, + move: false, content: $("#form") // 本页面的元素 }); }, validate: function () { - vm.$v.nodeGroup.$touch(); - return !vm.$v.nodeGroup.$error; + vue.$v.nodeGroup.$touch(); + return !vue.$v.nodeGroup.$error; }, reload: function () { - if (vm.count == 1) { + if (vue.count == 1) { layer.closeAll(); } else { location.reload(); diff --git a/nezha-admin/src/main/resources/templates/js/modules/node/nodeInfo.js b/nezha-admin/src/main/resources/templates/js/modules/node/nodeInfo.js index 9d2e232c..7d22f178 100644 --- a/nezha-admin/src/main/resources/templates/js/modules/node/nodeInfo.js +++ b/nezha-admin/src/main/resources/templates/js/modules/node/nodeInfo.js @@ -47,6 +47,14 @@ $(function () { }, gridComplete: function () { $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"}); // 隐藏grid底部滚动条 + }, + onSelectAll: function(rowids, status) { + if (status) { + toolsBtnHandle(); + } + }, + onSelectRow: function(rowid,status) { + toolsBtnHandle(); } }); @@ -111,10 +119,10 @@ var ipCheck = function (value, nodeInfo) { } // IP 标识 - if (vue.ipFlag) { - vue.oldNodeInfos.splice(0, 1, JSON.parse(JSON.stringify(vue.nodeInfo))); // 记录当前用户输入的内容 + if (vm.ipFlag) { + vm.oldNodeInfos.splice(0, 1, JSON.parse(JSON.stringify(vm.nodeInfo))); // 记录当前用户输入的内容 } else { - vue.oldNodeInfos.splice(1, 1, JSON.parse(JSON.stringify(vue.nodeInfo))); // 记录特殊IP对象数据 + vm.oldNodeInfos.splice(1, 1, JSON.parse(JSON.stringify(vm.nodeInfo))); // 记录特殊IP对象数据 } $.ajax({ @@ -127,148 +135,148 @@ var ipCheck = function (value, nodeInfo) { flag = false; } if (r.data) { // 存在data 则证明此IP存在于其他业务系统 - vue.ipFlag = false; + vm.ipFlag = false; var data = r.data; // 页面挂载对象赋值 - vue.$set(vue.nodeInfo, 'name', data.name); - vue.$set(vue.nodeInfo, 'hostName', data.hostName); - vue.$set(vue.nodeInfo, 'uSize', data.uSize); - vue.$set(vue.nodeInfo, 'userName', data.userName); - vue.$set(vue.nodeInfo, 'snmpPort', data.snmpPort); - vue.$set(vue.nodeInfo, 'snmpCommunity', data.snmpCommunity); - vue.$set(vue.nodeInfo, 'password', data.password); - vue.$set(vue.nodeInfo, 'remark', data.remark); + vm.$set(vm.nodeInfo, 'name', data.name); + vm.$set(vm.nodeInfo, 'hostName', data.hostName); + vm.$set(vm.nodeInfo, 'uSize', data.uSize); + vm.$set(vm.nodeInfo, 'userName', data.userName); + vm.$set(vm.nodeInfo, 'snmpPort', data.snmpPort); + vm.$set(vm.nodeInfo, 'snmpCommunity', data.snmpCommunity); + vm.$set(vm.nodeInfo, 'password', data.password); + vm.$set(vm.nodeInfo, 'remark', data.remark); // 回显state - vue.nodeStates.some(item => { + vm.nodeStates.some(item => { if (item.code == data.state) { - vue.$set(vue.nodeInfo, 'state', item); + vm.$set(vm.nodeInfo, 'state', item); return true; } }); // 回显type - vue.nodeTypes.some(item => { + vm.nodeTypes.some(item => { if (item.code == data.type) { - vue.$set(vue.nodeInfo, 'type', item); + vm.$set(vm.nodeInfo, 'type', item); return true; } }); // 深克隆tag 接下来的方法会影响tag的值 var tag = JSON.parse(JSON.stringify(data.tag)); - vue.getTags(); // 动态获取Tags + vm.getTags(); // 动态获取Tags // 回显tag - vue.nodeTags.some((item, index) => { + vm.nodeTags.some((item, index) => { if (item.code == tag) { - vue.$set(vue.nodeInfo, 'tag', item); + vm.$set(vm.nodeInfo, 'tag', item); return true; } }); // 查询可用位置 - vue.getRooms(data.uuid); + vm.getRooms(data.uuid); // 回显机房 - vue.rooms.some(item => { + vm.rooms.some(item => { if (item.roomName == data.roomName) { - vue.$set(vue.nodeInfo, 'nodeRoom', item); - vue.cabinets = item.cabinets; + vm.$set(vm.nodeInfo, 'nodeRoom', item); + vm.cabinets = item.cabinets; return true; } }); if (data.cabinetId == 0 || data.cabinetId == null) { // 未指定机柜情况 - vue.nodeInfo.cabinetId = vue.nodeInfo.cabinetStart = null; // 赋空值 select placeholder属性 model为null显示 + vm.nodeInfo.cabinetId = vm.nodeInfo.cabinetStart = null; // 赋空值 select placeholder属性 model为null显示 } // 回显机柜 - vue.cabinets.some(item => { + vm.cabinets.some(item => { if (data.cabinetInfo != null && item.id == data.cabinetInfo.id) { - vue.$set(vue.nodeInfo, "cabinetId", item); - vue.starts = item.starts; + vm.$set(vm.nodeInfo, "cabinetId", item); + vm.starts = item.starts; return true; } }); // 回显起始位置 - vue.$set(vue.nodeInfo, 'cabinetStart', data.cabinetStart); + vm.$set(vm.nodeInfo, 'cabinetStart', data.cabinetStart); // 将表单锁定 除却 IP $('form').find('input').not("#ipAddress").prop('readonly', true); - vue.disabledFlag = true; - vue.$v.nodeInfo.$reset(); // 递归清空校验状态 + vm.disabledFlag = true; + vm.$v.nodeInfo.$reset(); // 递归清空校验状态 } else { - vue.ipFlag = true; + vm.ipFlag = true; // 拿到用户输入的表单数据 - var back = vue.oldNodeInfos[0]; + var back = vm.oldNodeInfos[0]; // 给挂载对象回显 为null 则不回显 - vue.$set(vue.nodeInfo, 'name', back.name); - vue.$set(vue.nodeInfo, 'hostName', back.hostName); - vue.$set(vue.nodeInfo, 'uSize', back.uSize); - vue.$set(vue.nodeInfo, 'snmpPort', back.snmpPort); - vue.$set(vue.nodeInfo, 'snmpCommunity', back.snmpCommunity); - vue.$set(vue.nodeInfo, 'userName', back.userName); - vue.$set(vue.nodeInfo, 'password', back.password); - vue.$set(vue.nodeInfo, 'remark', back.remark); + vm.$set(vm.nodeInfo, 'name', back.name); + vm.$set(vm.nodeInfo, 'hostName', back.hostName); + vm.$set(vm.nodeInfo, 'uSize', back.uSize); + vm.$set(vm.nodeInfo, 'snmpPort', back.snmpPort); + vm.$set(vm.nodeInfo, 'snmpCommunity', back.snmpCommunity); + vm.$set(vm.nodeInfo, 'userName', back.userName); + vm.$set(vm.nodeInfo, 'password', back.password); + vm.$set(vm.nodeInfo, 'remark', back.remark); // 从新根据条件查询 下拉框数据 并回显数据 if (back.state != null) { - vue.nodeStates.some(item => { + vm.nodeStates.some(item => { if (item.code == back.state.code) { - vue.$set(vue.nodeInfo, 'state', item); + vm.$set(vm.nodeInfo, 'state', item); return true; } }); } else { - vue.$set(vue.nodeInfo, 'state', null); + vm.$set(vm.nodeInfo, 'state', null); } if (back.type != null) { - vue.nodeTypes.some((item, index) => { + vm.nodeTypes.some((item, index) => { if (item.code == back.type.code) { - vue.$set(vue.nodeInfo, 'type', item); + vm.$set(vm.nodeInfo, 'type', item); return true; } }); } else { - vue.$set(vue.nodeInfo, 'type', null); + vm.$set(vm.nodeInfo, 'type', null); } - vue.getTags(); + vm.getTags(); if (back.tag != null) { - vue.nodeTags.some(item => { + vm.nodeTags.some(item => { if (item.code == back.tag.code) { - vue.$set(vue.nodeInfo, 'tag', item); + vm.$set(vm.nodeInfo, 'tag', item); return true; } }); } else { - vue.$set(vue.nodeInfo, 'tag', null); + vm.$set(vm.nodeInfo, 'tag', null); } // 查询可用位置 if (back.nodeRoom != null) { // 回显机房 - vue.rooms.some(item => { + vm.rooms.some(item => { if (item.roomName == back.nodeRoom.roomName) { - vue.$set(vue.nodeInfo, 'nodeRoom', item); - vue.cabinets = item.cabinets; + vm.$set(vm.nodeInfo, 'nodeRoom', item); + vm.cabinets = item.cabinets; return true; } }); } else { - vue.$set(vue.nodeInfo, 'nodeRoom', null); + vm.$set(vm.nodeInfo, 'nodeRoom', null); } if (back.cabinetId == 0 || back.cabinetId == null) { // 未指定机柜情况 - vue.nodeInfo.cabinetId = vue.nodeInfo.cabinetStart = null; // 赋空值 select placeholder属性 model为null显示 + vm.nodeInfo.cabinetId = vm.nodeInfo.cabinetStart = null; // 赋空值 select placeholder属性 model为null显示 } else { // 回显机柜 - vue.cabinets.some(item => { + vm.cabinets.some(item => { if (item.id == back.cabinetId.id) { - vue.$set(vue.nodeInfo, "cabinetId", item); - vue.starts = item.starts; + vm.$set(vm.nodeInfo, "cabinetId", item); + vm.starts = item.starts; return true; } }); } - vue.$set(vue.nodeInfo, 'cabinetStart', back.cabinetStart); + vm.$set(vm.nodeInfo, 'cabinetStart', back.cabinetStart); // 将表单恢复可写模式 $('form').find('input').prop('readonly', false); - vue.disabledFlag = false; + vm.disabledFlag = false; } } }); @@ -343,11 +351,14 @@ var data = { showIp: true, selectFlag1: false, selectItems1: ["IP", "<@spring.message 'common.name'/>"], - selectedItem1: "IP" + selectedItem1: "IP", + // single multi 控制工具栏单选 多选可点击状态 + single:true, + multi:true }; Vue.config.devtools = true; -var vue = new Vue({ +var vm = new Vue({ el: '#nodeInfoApp', data: this.data, validations: { @@ -383,8 +394,8 @@ var vue = new Vue({ this.reload(); }, reset: function () { - vue.q.name = vue.q.type = vue.q.state = vue.q.ip = vue.q.tag = null; - vue.query(); + vm.q.name = vm.q.type = vm.q.state = vm.q.ip = vm.q.tag = null; + vm.query(); }, getInfo: function (uuid) { $.ajax({ @@ -393,63 +404,63 @@ var vue = new Vue({ async: false, dataType: "json", success: function (r) { - vue.nodeInfo = r.data; + vm.nodeInfo = r.data; } }); // 解决下拉框回显问题 - vue.nodeStates.some((item, index) => { - if (item.code == vue.nodeInfo.state) { - vue.$set(vue.nodeInfo, 'state', item); + vm.nodeStates.some((item, index) => { + if (item.code == vm.nodeInfo.state) { + vm.$set(vm.nodeInfo, 'state', item); return true; } }); - vue.nodeTypes.some((item, index) => { - if (item.code == vue.nodeInfo.type) { - vue.$set(vue.nodeInfo, 'type', item); + vm.nodeTypes.some((item, index) => { + if (item.code == vm.nodeInfo.type) { + vm.$set(vm.nodeInfo, 'type', item); return true; } }); - var tag = JSON.parse(JSON.stringify(vue.nodeInfo.tag)); + var tag = JSON.parse(JSON.stringify(vm.nodeInfo.tag)); this.getTags(); - vue.nodeTags.some((item, index) => { + vm.nodeTags.some((item, index) => { if (item.code == tag) { - vue.$set(vue.nodeInfo, 'tag', item); + vm.$set(vm.nodeInfo, 'tag', item); return true; } }); // 查询可用位置 - vue.getRooms(); + vm.getRooms(); // 回显机房 - vue.rooms.some(item => { - if (item.roomName == vue.nodeInfo.roomName) { - vue.$set(vue.nodeInfo, 'nodeRoom', item); - vue.cabinets = item.cabinets; + vm.rooms.some(item => { + if (item.roomName == vm.nodeInfo.roomName) { + vm.$set(vm.nodeInfo, 'nodeRoom', item); + vm.cabinets = item.cabinets; return true; } }); - if (vue.nodeInfo.cabinetId == 0) { // 未指定机柜情况 - vue.nodeInfo.cabinetId = vue.nodeInfo.cabinetStart = null; // 赋空值 select placeholder属性 model为null显示 + if (vm.nodeInfo.cabinetId == 0) { // 未指定机柜情况 + vm.nodeInfo.cabinetId = vm.nodeInfo.cabinetStart = null; // 赋空值 select placeholder属性 model为null显示 } // 回显机柜 - vue.cabinets.some(item => { - if (vue.nodeInfo.cabinetInfo != null && item.id == vue.nodeInfo.cabinetInfo.id) { - vue.$set(vue.nodeInfo, "cabinetId", item); - vue.starts = item.starts; + vm.cabinets.some(item => { + if (vm.nodeInfo.cabinetInfo != null && item.id == vm.nodeInfo.cabinetInfo.id) { + vm.$set(vm.nodeInfo, "cabinetId", item); + vm.starts = item.starts; return true; } }); }, add: function () { - vue.$v.nodeInfo.$reset(); // 进入新增页面时，将校验的触发状态清空($dirty=true -> false) + vm.$v.nodeInfo.$reset(); // 进入新增页面时，将校验的触发状态清空($dirty=true -> false) // 表单状态可写模式 $('form').find('input').prop('readonly', false); - vue.disabledFlag = false; - vue.showList = false; - vue.title = "<@spring.message 'common.add'/>"; - vue.nodeInfo = { + vm.disabledFlag = false; + vm.showList = false; + vm.title = "<@spring.message 'common.add'/>"; + vm.nodeInfo = { id: null, uuid: null, name: null, @@ -468,22 +479,22 @@ var vue = new Vue({ remark: null, nodeRoom: null }; - vue.nodeInfoDto = null; - vue.cabinets = []; + vm.nodeInfoDto = null; + vm.cabinets = []; // 重新获取可用机柜信息 this.getRooms(); }, update: function () { - vue.$v.nodeInfo.$reset(); // 进入修改页面时，将校验触发状态清空($dirty=true -> false) + vm.$v.nodeInfo.$reset(); // 进入修改页面时，将校验触发状态清空($dirty=true -> false) // 表单状态可写模式 $('form').find('input').prop('readonly', false); - vue.disabledFlag = false; + vm.disabledFlag = false; var uuid = getSelectedRow(); if (uuid == null) { return; } - vue.showList = false; - vue.title = "<@spring.message 'common.edit'/>"; + vm.showList = false; + vm.title = "<@spring.message 'common.edit'/>"; // 查询详情 this.getInfo(uuid); }, @@ -507,7 +518,7 @@ var vue = new Vue({ success: function (r) { if (r.code == 200) { alert("<@spring.message 'common.success'/>", function (index) { - vue.reload(); + vm.reload(); }); } else { alert(r.msg); @@ -544,7 +555,7 @@ var vue = new Vue({ success: function (r) { if (r.code == 200) { alert("<@spring.message 'common.success'/>", function (index) { - vue.reload(); + vm.reload(); }); } else { alert(r.msg); @@ -556,31 +567,31 @@ var vue = new Vue({ } }, saveOrUpdate: function () { - if (!vue.disabledFlag) { // 表单没有锁定 - if (!vue.validate()) { // 校验表单内属性 + if (!vm.disabledFlag) { // 表单没有锁定 + if (!vm.validate()) { // 校验表单内属性 return; } } var url; - if (vue.nodeInfo.uuid == null) { + if (vm.nodeInfo.uuid == null) { url = "node/save"; } else { url = "node/update"; } - vue.nodeInfoDto = JSON.parse(JSON.stringify(vue.nodeInfo)); - vue.$set(vue.nodeInfoDto, 'type', vue.nodeInfo.type.code); - vue.$set(vue.nodeInfoDto, 'tag', vue.nodeInfo.tag == null ? null : vue.nodeInfo.tag.code); - vue.$set(vue.nodeInfoDto, 'state', vue.nodeInfo.state.code); - vue.$set(vue.nodeInfoDto, 'cabinetId', vue.nodeInfo.cabinetId == null ? null : vue.nodeInfo.cabinetId.id); + vm.nodeInfoDto = JSON.parse(JSON.stringify(vm.nodeInfo)); + vm.$set(vm.nodeInfoDto, 'type', vm.nodeInfo.type.code); + vm.$set(vm.nodeInfoDto, 'tag', vm.nodeInfo.tag == null ? null : vm.nodeInfo.tag.code); + vm.$set(vm.nodeInfoDto, 'state', vm.nodeInfo.state.code); + vm.$set(vm.nodeInfoDto, 'cabinetId', vm.nodeInfo.cabinetId == null ? null : vm.nodeInfo.cabinetId.id); $.ajax({ - type: vue.nodeInfo.uuid == null ? "POST" : "PUT", + type: vm.nodeInfo.uuid == null ? "POST" : "PUT", url: baseURL + url, contentType: "application/json", - data: JSON.stringify(vue.nodeInfoDto), + data: JSON.stringify(vm.nodeInfoDto), success: function (r) { if (r.code === 200) { alert("<@spring.message 'common.success'/>", function (index) { - vue.reload(); + vm.reload(); }); } else { alert(r.msg); @@ -589,41 +600,42 @@ var vue = new Vue({ }); }, reload: function () { - vue.showList = true; + vm.single = vm.multi = true; + vm.showList = true; var page = $("#jqGrid").jqGrid('getGridParam', 'page'); $("#jqGrid").jqGrid('setGridParam', { postData: { - "name": vue.q.name, - "ip": vue.q.ip, - "type": vue.q.type == null ? null : vue.q.type.code, - "tag": vue.q.tag == null ? null : vue.q.tag.code, - "state": vue.q.state == null ? null : vue.q.state.code, - "groupId": vue.nodeGroup == null ? null : vue.nodeGroup.id + "name": vm.q.name, + "ip": vm.q.ip, + "type": vm.q.type == null ? null : vm.q.type.code, + "tag": vm.q.tag == null ? null : vm.q.tag.code, + "state": vm.q.state == null ? null : vm.q.state.code, + "groupId": vm.nodeGroup == null ? null : vm.nodeGroup.id }, page: 1 }).trigger("reloadGrid"); }, getTags: function () { // 清空缓存 - vue.nodeInfo.tag = null; - if (vue.nodeInfo.type != null) { + vm.nodeInfo.tag = null; + if (vm.nodeInfo.type != null) { // 字典中tag type属性命名为 nodeTag + server (1) / net (2) - var param = "?type=" + "nodeTag" + vue.nodeInfo.type.code; + var param = "?type=" + "nodeTag" + vm.nodeInfo.type.code; $.ajax({ type: "GET", url: baseURL + "sys/dict/list" + param, async: false, dataType: "json", success: function (r) { - vue.nodeTags = r.page.list; + vm.nodeTags = r.page.list; } }); } - if (vue.nodeInfo.type != null && vue.nodeInfo.type.code == 2) { - vue.$set(vue.nodeInfo, 'snmpPort', vue.nodeInfo.snmpPort == null ? 161 : vue.nodeInfo.snmpPort); - vue.$set(vue.nodeInfo, 'snmpCommunity', vue.nodeInfo.snmpCommunity == null ? "public" : vue.nodeInfo.snmpCommunity); + if (vm.nodeInfo.type != null && vm.nodeInfo.type.code == 2) { + vm.$set(vm.nodeInfo, 'snmpPort', vm.nodeInfo.snmpPort == null ? 161 : vm.nodeInfo.snmpPort); + vm.$set(vm.nodeInfo, 'snmpCommunity', vm.nodeInfo.snmpCommunity == null ? "public" : vm.nodeInfo.snmpCommunity); } else { - vue.nodeInfo.snmpPort = vue.nodeInfo.snmpCommunity = null; + vm.nodeInfo.snmpPort = vm.nodeInfo.snmpCommunity = null; } }, getRooms: function (uuid) { @@ -640,101 +652,101 @@ var vue = new Vue({ async: false, dataType: "json", success: function (r) { - vue.rooms = r.data.list; + vm.rooms = r.data.list; } }); }, getCabinets: function (event) { // 获取机房下机柜列表 - if (vue.nodeInfo.nodeRoom != null && event != null && vue.nodeInfo.nodeRoom.roomId == event.roomId) { // 没有切换机房的情况 + if (vm.nodeInfo.nodeRoom != null && event != null && vm.nodeInfo.nodeRoom.roomId == event.roomId) { // 没有切换机房的情况 return; } - vue.nodeInfo.cabinetId = vue.nodeInfo.cabinetStart = null; - vue.cabinets = vue.starts = []; - if (vue.rooms != null && vue.nodeInfo.nodeRoom != null) { - vue.rooms.some(item => { - if (vue.nodeInfo.nodeRoom.roomName == item.roomName) { - vue.cabinets = item.cabinets; + vm.nodeInfo.cabinetId = vm.nodeInfo.cabinetStart = null; + vm.cabinets = vm.starts = []; + if (vm.rooms != null && vm.nodeInfo.nodeRoom != null) { + vm.rooms.some(item => { + if (vm.nodeInfo.nodeRoom.roomName == item.roomName) { + vm.cabinets = item.cabinets; return true; } }); } }, getStarts: function (event) { // 获取机柜下可用的起始位置 - if (vue.nodeInfo.cabinetId != null && event != null && vue.nodeInfo.cabinetId.id == event.id) { // 没有切换机柜的情况 + if (vm.nodeInfo.cabinetId != null && event != null && vm.nodeInfo.cabinetId.id == event.id) { // 没有切换机柜的情况 return; } - if (vue.nodeInfo.uSize == null || vue.nodeInfo.uSize == "") { + if (vm.nodeInfo.uSize == null || vm.nodeInfo.uSize == "") { return; } - vue.nodeInfo.cabinetStart = null; - vue.starts = []; - vue.cabinets.some(item => { - if (vue.nodeInfo.cabinetId != null && vue.nodeInfo.cabinetId.name == item.name) { - vue.starts = item.starts; + vm.nodeInfo.cabinetStart = null; + vm.starts = []; + vm.cabinets.some(item => { + if (vm.nodeInfo.cabinetId != null && vm.nodeInfo.cabinetId.name == item.name) { + vm.starts = item.starts; return true; } }); }, /*getQueryTag: function () { - vue.queryTags = []; - vue.q.tag = null; - if (vue.q.type != null) { - var param = "?type=" + "nodeTag" + vue.q.type.code; + vm.queryTags = []; + vm.q.tag = null; + if (vm.q.type != null) { + var param = "?type=" + "nodeTag" + vm.q.type.code; $.ajax({ type: "GET", url: baseURL + "sys/dict/list" + param, async: false, dataType: "json", success: function (r) { - vue.queryTags = r.page.list; + vm.queryTags = r.page.list; } }); } },*/ checkUsize: function () { - if (vue.nodeInfo.uSize == null || vue.nodeInfo.uSize == '') { // 节点高度为null + if (vm.nodeInfo.uSize == null || vm.nodeInfo.uSize == '') { // 节点高度为null alert("<@spring.message 'node.pleaseWrite.uSize'/>!"); } }, checkNodeRoom: function () { - if (vue.nodeInfo.uSize == null || vue.nodeInfo.uSize == '') { // 节点高度为null + if (vm.nodeInfo.uSize == null || vm.nodeInfo.uSize == '') { // 节点高度为null alert("<@spring.message 'node.pleaseWrite.uSize'/>!"); return; } - if (vue.nodeInfo.uSize != null && vue.nodeInfo.nodeRoom == null) { + if (vm.nodeInfo.uSize != null && vm.nodeInfo.nodeRoom == null) { alert("<@spring.message 'common.pleaseSelect'/><@spring.message 'node.room.name'/>!"); } }, checkCabStart: function () { - if (vue.nodeInfo.uSize == null || vue.nodeInfo.uSize == '') { // 节点高度为null + if (vm.nodeInfo.uSize == null || vm.nodeInfo.uSize == '') { // 节点高度为null alert("<@spring.message 'node.pleaseWrite.uSize'/>!"); - } else if (vue.nodeInfo.nodeRoom == null) { + } else if (vm.nodeInfo.nodeRoom == null) { alert("<@spring.message 'common.pleaseSelect'/><@spring.message 'node.room.name'/>!"); - } else if (vue.nodeInfo.nodeRoom != null && vue.nodeInfo.cabinetId == null) { + } else if (vm.nodeInfo.nodeRoom != null && vm.nodeInfo.cabinetId == null) { alert("<@spring.message 'common.pleaseSelect'/><@spring.message 'node.cabinet.name'/>!"); - } else if (vue.nodeInfo.nodeRoom != null && vue.nodeInfo.cabinetId != null && vue.starts.length < 1) { + } else if (vm.nodeInfo.nodeRoom != null && vm.nodeInfo.cabinetId != null && vm.starts.length < 1) { // 暂无位置可选 - alert(vue.nodeInfo.cabinetId.name + " <@spring.message 'node.notEnough.position'/>!"); + alert(vm.nodeInfo.cabinetId.name + " <@spring.message 'node.notEnough.position'/>!"); } }, checkNodeType: function () { - if (vue.nodeInfo.type == null) { + if (vm.nodeInfo.type == null) { alert("<@spring.message 'common.pleaseSelect'/><@spring.message 'node.type'/>!"); } }, /*checkQueryTag: function () { - if (vue.q.type == null) { + if (vm.q.type == null) { alert("<@spring.message 'common.pleaseSelect'/><@spring.message 'node.type'/>!"); } },*/ validate: function () { - vue.$v.nodeInfo.$touch(); - return !vue.$v.nodeInfo.$error; + vm.$v.nodeInfo.$touch(); + return !vm.$v.nodeInfo.$error; }, advancedSearch: function () { //高级搜索 this.isAdvancedSearch = !this.isAdvancedSearch; if (!this.isAdvancedSearch) { - vue.q.state = vue.q.tag = null; + vm.q.state = vm.q.tag = null; } }, adSearchDropdown1: function() { @@ -747,13 +759,13 @@ var vue = new Vue({ created: function () { // 从字典中获取节点类型的集合 $.getJSON(baseURL + "sys/dict/all?type=nodeType", function (r) { - vue.nodeTypes = r.data; + vm.nodeTypes = r.data; }); $.getJSON(baseURL + "sys/dict/all?type=onLineState", function (r) { - vue.nodeStates = r.data; + vm.nodeStates = r.data; }); $.getJSON(baseURL + "sys/dict/all?name=nodeTag", function (r) { - vue.queryTags = r.data; + vm.queryTags = r.data; }); }, watch: { @@ -763,25 +775,25 @@ var vue = new Vue({ return; } - if (vue.disabledFlag) { // IP 在其他业务系统存在时 直接返回 不需要处理 表单为禁用状态 + if (vm.disabledFlag) { // IP 在其他业务系统存在时 直接返回 不需要处理 表单为禁用状态 return; } // 2. 没有填写USize 不处理,返回 if (newValue == '' || newValue == null) { - vue.nodeInfo.cabinetId == null ? null : vue.nodeInfo.cabinetId.starts = []; - vue.starts = []; - vue.nodeInfo.cabinetStart = null; - vue.$v.nodeInfo.uSize.$reset(); - vue.$v.nodeInfo.cabinetId.$reset() - vue.$v.nodeInfo.cabinetStart.$reset(); - if (vue.nodeInfo.nodeRoom == null) { // 既没有指定uSize 当前也没有指定room - vue.rooms = []; + vm.nodeInfo.cabinetId == null ? null : vm.nodeInfo.cabinetId.starts = []; + vm.starts = []; + vm.nodeInfo.cabinetStart = null; + vm.$v.nodeInfo.uSize.$reset(); + vm.$v.nodeInfo.cabinetId.$reset() + vm.$v.nodeInfo.cabinetStart.$reset(); + if (vm.nodeInfo.nodeRoom == null) { // 既没有指定uSize 当前也没有指定room + vm.rooms = []; } return; } // 3. 开始处理数据变化 先清空起始位置 - vue.starts = []; + vm.starts = []; // 4.重新发起请求 var params = "?uSize=" + newValue; if (this.nodeInfo.uuid) { @@ -794,15 +806,15 @@ var vue = new Vue({ async: false, dataType: "json", success: function (r) { - vue.rooms = r.data.list; + vm.rooms = r.data.list; } }); // 5.处理变化数据 var cab; - vue.rooms.some(room => { + vm.rooms.some(room => { cab = room.cabinets.find(cabinet => { - if (vue.nodeInfo.cabinetId != null && cabinet.id == vue.nodeInfo.cabinetId.id) { // 如果机柜存在 + if (vm.nodeInfo.cabinetId != null && cabinet.id == vm.nodeInfo.cabinetId.id) { // 如果机柜存在 return cabinet; } }); @@ -812,27 +824,27 @@ var vue = new Vue({ }) // 更新cabs starts - vue.starts = cab == undefined ? [] : cab.starts; - vue.rooms.some(item => { - if (vue.nodeInfo.nodeRoom != null && item.roomId == vue.nodeInfo.nodeRoom.roomId) { - vue.cabinets = item.cabinets; + vm.starts = cab == undefined ? [] : cab.starts; + vm.rooms.some(item => { + if (vm.nodeInfo.nodeRoom != null && item.roomId == vm.nodeInfo.nodeRoom.roomId) { + vm.cabinets = item.cabinets; return true; } }); // 6. 深克隆对象 用作修改时的cabinetStart 回显问题 - var cloneNodeInfo = JSON.parse(JSON.stringify(vue.nodeInfo)); - vue.nodeInfo.cabinetStart = null; + var cloneNodeInfo = JSON.parse(JSON.stringify(vm.nodeInfo)); + vm.nodeInfo.cabinetStart = null; var flag = false; - vue.starts.some(item => { + vm.starts.some(item => { if (item == cloneNodeInfo.cabinetStart) { flag = true; return flag; } }) - if (vue.starts.length > 0 && flag) {// vue.nodeInfo.uuid != null 可加可不加 加上为只在修改上回显 - vue.nodeInfo.cabinetStart = cloneNodeInfo.cabinetStart; + if (vm.starts.length > 0 && flag) {// vm.nodeInfo.uuid != null 可加可不加 加上为只在修改上回显 + vm.nodeInfo.cabinetStart = cloneNodeInfo.cabinetStart; } }, "selectedItem1": function(n, o) { diff --git a/nezha-admin/src/main/resources/templates/js/modules/node/nodeRoom.js b/nezha-admin/src/main/resources/templates/js/modules/node/nodeRoom.js index 26d3b704..53be320e 100644 --- a/nezha-admin/src/main/resources/templates/js/modules/node/nodeRoom.js +++ b/nezha-admin/src/main/resources/templates/js/modules/node/nodeRoom.js @@ -12,9 +12,9 @@ $(function () { {label: "<@spring.message 'common.remark'/>", name: 'remarks', width: 60, sortable: false} ], viewrecords: true, - height: 385, - rowNum: 10, - rowList: [10, 30, 50], + height: top.$(".content").height()-130, + rowNum: 15, + rowList : [15,30,50], rownumbers: true, rownumWidth: 25, autowidth: true, @@ -33,6 +33,14 @@ $(function () { }, gridComplete: function () { $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"}); // 隐藏grid底部滚动条 + }, + onSelectAll: function(rowids, status) { + if (status) { + toolsBtnHandle(); + } + }, + onSelectRow: function(rowid,status) { + toolsBtnHandle(); } }); @@ -141,7 +149,10 @@ var data = { addrList: [], roomDetail: null, // 校验行列可用时接口需要行列必须,解决列为空校验行问题 occRow: null, - occCol: null + occCol: null, + // single multi 控制工具栏单选 多选可点击状态 + single:true, + multi:true }; var vm = new Vue({ @@ -168,6 +179,7 @@ var vm = new Vue({ this.reload(); }, reload: function () { + vm.single = vm.multi = true; vm.showList = true; var page = $("#jqGrid").jqGrid('getGridParam', 'page'); $("#jqGrid").jqGrid('setGridParam', { diff --git a/nezha-admin/src/main/resources/templates/js/modules/node/roomTest.js b/nezha-admin/src/main/resources/templates/js/modules/node/roomTest.js new file mode 100644 index 00000000..afccfc1e --- /dev/null +++ b/nezha-admin/src/main/resources/templates/js/modules/node/roomTest.js @@ -0,0 +1,558 @@ +<script > +// 注册select组件 +Vue.component('multiselect', window.VueMultiselect.default); + +// 引用校验规则 所有校验规则见 https://vuelidate.netlify.com/#sub-v-values +Vue.use(window.vuelidate.default); +var required = window.validators.required; +var numeric = window.validators.numeric; +var minValue = window.validators.minValue; +var integer = window.validators.integer; +var helpers = window.validators.helpers; + +// 自定义规则，;第一个参数是当前字段值，第二个参数是当前校验的整个对象(此处是vm.data.nodeRoom) +var roomNameCheck = function (value, nodeRoom) { + if (helpers.req(value)) { + var flag = true; + var params = "?name=" + value; + if (nodeRoom.id) { + params += "&id=" + nodeRoom.id; + } + $.ajax({ + type: "GET", + url: baseURL + "room/roomNameCheck" + params, + async: false, // 关闭异步，否则会在执行完ajax前就跳到下一段代码 + dataType: "json", + success: function (r) { + if (r.code != 200) { + flag = false; + } + } + }); + return flag; + } else { + return true; + } +} +var roomRowsCheck = function (value, nodeRoom) { + if (nodeRoom.id == null) {// 添加不需校验 + return true; + } + if (helpers.req(value)) { + var flag = true; + var params = "?id=" + nodeRoom.id + "&roomRows=" + value + "&roomCols=" + vm.roomDetail.roomCols; + $.ajax({ + type: "GET", + url: baseURL + "room/roomSizeCheck" + params, + async: false, // 关闭异步，否则会在执行完ajax前就跳到下一段代码 + dataType: "json", + success: function (r) { + if (r.code != 200) { + flag = false; + vm.occRow = r.data; + } + } + }); + return flag; + } else { + return true; + } +} +var roomColsCheck = function (value, nodeRoom) { + if (nodeRoom.id == null) {// 添加不需校验 + return true; + } + if (helpers.req(value)) { + var flag = true; + var params = "?id=" + nodeRoom.id + "&roomRows=" + vm.roomDetail.roomRows + "&roomCols=" + value; + $.ajax({ + type: "GET", + url: baseURL + "room/roomSizeCheck" + params, + async: false, // 关闭异步，否则会在执行完ajax前就跳到下一段代码 + dataType: "json", + success: function (r) { + if (r.code != 200) { + flag = false; + vm.occCol = r.data; + } + } + }); + return flag; + } else { + return true; + } +} +var cabNameCheck = function (value, nodeCabinet) { + var flag = true; + if (nodeCabinet.roomId == null) { + return flag; + } else { + if (helpers.req(value)) { + var params = "?name=" + value + "&roomId=" + nodeCabinet.roomId; + if (nodeCabinet.id != null) { + params += "&id=" + nodeCabinet.id; + } + $.ajax({ + type: "GET", + url: baseURL + "cab/cabNameCheck" + params, + async: false, // 关闭异步 + dataType: "json", + success: function (r) { + if (r.code != 200) { + flag = false; + } + } + }); + return flag; + } else { + return flag; + } + } +} +var cabUbitCheck = function (value, nodeCabinet) { + if (nodeCabinet.id == null) { + return true; + } + if (helpers.req(value)) { + var flag = true; + // 进行校验 + var params = "?id=" + nodeCabinet.id + "&ubit=" + value; + $.ajax({ + type: "GET", + url: baseURL + "cab/cabUbitCheck" + params, + async: false, // 关闭异步 + dataType: "json", + success: function (r) { + if (r.code != 200) { + flag = false; + vm.occUbit = r.data; + } + } + }); + return flag; + } else { + return true; + } +} + + +var data = { + roomList: [], // 机房列表 + addrList: [], // 地区列表 + roomDetail: null, // 校验行列可用时接口需要行列必须,解决列为空校验行问题 + q: { // 查询条件 + name: null, + addr: null + }, + showRoomFrom: true, // 机房表单控制 + showCabFrom: true, // 机柜表单控制 + nodeRoom: { + id: null, + name: null, + roomRows: null, + roomCols: null, + addr: null, + remarks: null + }, + nodeCabinet: { + id: null, + name: null, + roomName: null, + roomId: null, + roomRow: null, + roomCol: null, + ubit: null, + remarks: null + }, + room: null, // 当前机房 + cabs: [], // 当前机房包含机柜集合 + rowList: [], // 行列表数据 + readFlag: null, // 控制表单readonly选项值 + occUbit: null // 机柜校验 前台提示行列信息 +}; + + +var vm = new Vue({ + el: '#roomTestApp', + data: this.data, + validations: { + nodeRoom: { + name: { + required, roomNameCheck + }, + roomRows: { + required, integer, minValue: minValue(1), roomRowsCheck + }, + roomCols: { + required, integer, minValue: minValue(1), roomColsCheck + }, + addr: { + required + } + }, + nodeCabinet: { + name: { + required, cabNameCheck + }, + roomRow: { + required + }, + roomCol: { + required + }, + ubit: { + required, integer, minValue: minValue(1), cabUbitCheck + } + } + }, + methods: { + getRooms: function () { + $.ajax({ + type: "GET", + url: baseURL + "room/list?limit=999", + async: false, + dataType: "json", + success: function (r) { + data.roomList = r.page.list; + } + }); + }, + getRoomAddrs: function () { // 获取机房所属地区列表d + $.getJSON(baseURL + "sys/dict/all?name=addr", function (r) { + data.addrList = r.data; + }); + }, + getRoomInfo: function (roomId) { + $.ajax({ + type: "GET", + url: baseURL + "room/detail?id=" + roomId, + async: false, // 关闭异步 + dataType: "json", + success: function (r) { + vm.nodeRoom = r.data; + } + }); + // 验证时使用 解决空验证问题 + vm.roomDetail = JSON.parse(JSON.stringify(vm.nodeRoom)); + // 处理下拉框回显问题 + vm.addrList.some(item => { + if (item.code == vm.nodeRoom.addr) { + vm.$set(vm.nodeRoom, "addr", item); + return true; + } + }) + }, + getCabInfo: function (cabId) { + $.ajax({ + type: "GET", + url: baseURL + "cab/detail?id=" + cabId, + async: false, // 关闭异步 + dataType: "json", + success: function (r) { + vm.nodeCabinet = r.data; + } + }); + }, + query: function (addr) { + layer.closeAll('page'); + var page = ""; // 临时查询条件 并不存在该条件查询 + if (addr != null) { + vm.q.addr = addr; + } + if (vm.q.addr != null) { + page += "&addr=" + vm.q.addr; + } + + if (vm.q.name != null) { + page += "&name=" + vm.q.name; + } + + $.ajax({ + type: "GET", + url: baseURL + "room/list?limit=999" + page, + async: false, + dataType: "json", + success: function (r) { + vm.roomList = r.page.list; + } + }); + // 查询之后刷新行列表区域 + vm.showRowList(vm.roomList[0]); + }, + reset: function () { + vm.q.name = vm.q.addr = null; + this.getRooms(); + // 刷新行列表 + vm.showRowList(vm.roomList[0]); + }, + addRoom: function () { + layer.closeAll('page'); + vm.$v.nodeRoom.$reset(); // 进入新增页面时，将校验的触发状态清空($dirty=true -> false) + vm.nodeRoom = { + id: null, + name: null, + roomRows: null, + roomCols: null, + addr: null, + remarks: null + } + this.open("添加", "roomForm"); + }, + addCab: function (room) { // 当前机房 + layer.closeAll('page'); + vm.$v.nodeCabinet.$reset(); // 进入添加页面 刷新校验状态 + vm.$set(vm, "readFlag", false); + vm.nodeCabinet = { + id: null, + name: null, + roomName: null, + roomId: null, + roomRow: null, + roomCol: null, + ubit: null, + remarks: null + } + vm.$set(vm.nodeCabinet, "roomId", room.id); + vm.$set(vm.nodeCabinet, "roomName", room.name); + vm.$set(vm.nodeCabinet, "roomRow", room.row); + vm.$set(vm.nodeCabinet, "roomCol", room.col); + this.open("添加", "cabForm"); + }, + updateRoom: function (room) { + vm.$v.nodeRoom.$reset(); //进入新增页面时，将校验触发状态清空($dirty=true -> false) + this.getRoomInfo(room.id); + this.open("修改", "roomForm"); + }, + updateCab: function (cabinet) { + vm.$v.nodeCabinet.$reset(); //进入新增页面时，将校验触发状态清空($dirty=true -> false) + vm.$set(vm, "readFlag", true); + this.getCabInfo(cabinet.id); + this.open("修改", "cabForm"); + }, + delRoom: function (room) { + confirm("确认删除吗?", function () { + var form = new FormData(); + form.append("ids", room.id); + $.ajax({ + type: "DELETE", + url: baseURL + "room/delete", + processData: false, + contentType: false, + mimeType: "multipart/form-data", + data: form, + success: function (r) { + if (r.code == 200) { + alert("成功", function () { + vm.reload(); + vm.showRowList(vm.roomList[0]) + }); + } else { + alert(r.msg); + } + } + }); + }); + }, + delCab: function (cabinet) { + confirm("确认删除吗?", function () { + var form = new FormData(); + form.append("ids", cabinet.id); + $.ajax({ + type: "DELETE", + url: baseURL + "cab/delete", + async: false, // 关闭异步，否则会在执行完ajax前就跳到下一段代码 + processData: false, + contentType: false, + mimeType: "multipart/form-data", + data: form, + success: function (r) { + if (r.code == 200) { + alert("成功", function () { + vm.reload(); + }); + } else { + alert(r.msg); + } + } + }); + // 刷新 + vm.showRowList(data.room); + }); + }, + saveOrUpdateRoom: function () { + if (!vm.validateRoom()) { // 校验机房参数 + return; + } + var url; + if (vm.nodeRoom.id == null) { + url = "room/save"; + } else { + url = "room/update"; + } + vm.$set(vm.nodeRoom, "addr", vm.nodeRoom.addr.code); + $.ajax({ + type: vm.nodeRoom.id == null ? "POST" : "PUT", + url: baseURL + url, + contentType: "application/json", + data: JSON.stringify(vm.nodeRoom), + success: function (r) { + if (r.code === 200) { + alert("成功", function () { + // 刷新当前行列表区域 + vm.showRowList(data.nodeRoom); + vm.reload(); + }); + } else { + alert(r.msg); + } + } + }); + }, + saveOrUpdateCab: function () { + if (!vm.validateCab()) { + return; + } + var url; + if (vm.nodeCabinet.id == null) { + url = "cab/save"; + } else { + url = "cab/update"; + } + $.ajax({ + type: vm.nodeCabinet.id == null ? "POST" : "PUT", + url: baseURL + url, + contentType: "application/json", + async: false, // 关闭异步，否则会在执行完ajax前就跳到下一段代码 + data: JSON.stringify(vm.nodeCabinet), + success: function (r) { + if (r.code === 200) { + alert("<@spring.message 'common.success'/>", function () { + // 刷新当前行列表区域 + vm.showRowList(data.room); + layer.closeAll(); + }); + } else { + alert(r.msg); + } + } + }); + }, + reload: function () { + var tempRoom = JSON.parse(JSON.stringify(vm.room)); + vm.query(null); + layer.closeAll(); + vm.showRowList(tempRoom); + }, + validateRoom: function () { + vm.$v.nodeRoom.$touch(); // 提交时，不论是否已触发校验，都触发一下($dirty=false -> true) + return !vm.$v.nodeRoom.$error; + }, + validateCab: function () { + vm.$v.nodeCabinet.$touch(); // 提交时，不论是否已触发校验，都触发一下($dirty=false -> true) + return !vm.$v.nodeCabinet.$error; + }, + // 展示右侧行列区 + showRowList: function (room) { + data.room = room; // 赋值行列 页面循环 + $.ajax({ + type: "GET", + url: baseURL + "cab/list?roomId=" + room.id, + async: false, // 关闭异步，否则会在执行完ajax前就跳到下一段代码 + dataType: "json", + success: function (r) { + if (r.code === 200) { + data.cabs = r.data.list; + } else { + alert(r.msg); + } + } + }); + // 每次重新初始化 + data.rowList = []; + for (let i = 0; i < data.room.roomRows; i++) { + data.rowList[i] = []; + for (let j = 0; j < data.room.roomCols; j++) { + var flag = false; + data.cabs.forEach(item => { + if (item.roomRow - 1 == i && item.roomCol - 1 == j) { + // var obj = JSON.parse(JSON.stringify(item)); + // vm.$set(data.rowList[i], j, item); + data.rowList[i].splice(j, 0, item); + flag = true; + } + }); + if (!flag) { + // 点击添加机柜的时候 表单需要默认回显当前所属机房名称 行列值 在下方addcab方法中 + //vm.$set(data.rowList[i], j, {name: data.room.name, row: i + 1, col: j + 1}); + data.rowList[i].splice(j, 0, {id: data.room.id, name: data.room.name, row: i + 1, col: j + 1}); + } + } + } + // data.rowList = Object.assign(data.rowList, data.rowList) + console.log(data.rowList) + }, + open: function (title, content) { + layer.open({ + area: ['50%', '100%'], + shade: 0, + title: title, + type: 1, + fixed: false, + maxmin: false, + scrollbar: false, + offset: 'r', + closeBtn: 1, + move: false, + content: $("#" + content) // 本页面的元素 + }); + }, + checkCab: function (cabinet) { + if (cabinet.hasOwnProperty("row")) { + return true; + } + return false; + }, + getCabName: function (cabinet) { + return cabinet.name; + }, + showRoomOption: function (roomId) { + $("#option" + roomId).removeClass("myoption-close").addClass("myoption-open"); + }, + closeRoomOption: function (roomId) { + $("#option" + roomId).removeClass("myoption-open").addClass("myoption-close"); + }, + showCabOption: function (cabId) { + if ($("#cab" + cabId).hasClass("myoption-close")) { + $("#cab" + cabId).removeClass("myoption-close").addClass("myoption-open"); + } else { + $("#cab" + cabId).removeClass("myoption-open").addClass("myoption-close"); + } + } + }, + created: function () { + // 1. 初始化实例查询机房列表 + this.getRooms(); + this.getRoomAddrs(); + // 2.默认展开第一个机房的行列图 + this.showRowList(data.roomList[0]) + }, + mounted: function () { + // 1.默认机房列表第一条高亮 + $("#tr" + data.roomList[0].id).removeClass("tr-normal").addClass("tr-higHlight"); + }, + watch: { + "room": function (newValue, oldValue) { + // 监听点击的机房 改变高亮样式 + if (oldValue != null) { + $("#tr" + oldValue.id).removeClass("tr-higHlight").addClass("tr-normal"); + } + if ($("#tr" + newValue.id).hasClass("tr-higHlight")) { + return; + } else { + $("#tr" + newValue.id).removeClass("tr-normal").addClass("tr-higHlight"); + } + } + }, + computed: {} +}); +</script>
\ No newline at end of file diff --git a/nezha-admin/src/main/resources/templates/modules/node/nodeCabinet.html b/nezha-admin/src/main/resources/templates/modules/node/nodeCabinet.html index 2a8b8225..87b07874 100644 --- a/nezha-admin/src/main/resources/templates/modules/node/nodeCabinet.html +++ b/nezha-admin/src/main/resources/templates/modules/node/nodeCabinet.html @@ -10,19 +10,19 @@ <!-- 列表 查询 --> <div v-show="showList"> - <div class="grid-btn"> + <div class="tools"> <!-- 搜索条件 --> - <div class="form-group col-sm-2"> - <input type="text" class="form-control" v-model="q.cabName" @keyup.enter="query" placeholder="<@spring.message 'node.cabinet.name'/>"> + <div class="form-group"> + <input type="text" class="form-control input-medium" v-model="q.cabName" @keyup.enter="query" placeholder="<@spring.message 'node.cabinet.name'/>"> </div> <!-- 功能按钮 --> <a class="btn btn-default" @click="query" title="<@spring.message 'common.search'/>"><i class="fa fa-search"></i></a> <a class="btn btn-default" @click="reset" title="<@spring.message 'common.reset'/>"><i class="fa fa-refresh"></i></a> <a class="btn btn-primary" @click="add" title="<@spring.message 'common.add'/>"><i class="fa fa-plus"></i></a> - <a class="btn btn-primary" @click="update" title="<@spring.message 'common.edit'/>"><i class="fa fa-pencil-square-o"></i></a> - <a class="btn btn-primary" @click="del" title="<@spring.message 'common.delete'/>"><i class="fa fa-trash-o"></i></a> + <a :disabled="single" class="btn btn-primary" @click="update" title="<@spring.message 'common.edit'/>"><i class="fa fa-pencil-square-o"></i></a> + <a :disabled="multi" class="btn btn-primary" @click="del" title="<@spring.message 'common.delete'/>"><i class="fa fa-trash-o"></i></a> </div> <!-- 列表数据 / 分页 --> diff --git a/nezha-admin/src/main/resources/templates/modules/node/nodeGroup.html b/nezha-admin/src/main/resources/templates/modules/node/nodeGroup.html index d974e150..c2686fa0 100644 --- a/nezha-admin/src/main/resources/templates/modules/node/nodeGroup.html +++ b/nezha-admin/src/main/resources/templates/modules/node/nodeGroup.html @@ -104,10 +104,10 @@ <i class="fa"></i> <@spring.message 'nodegroup.assignNode'/></a> </div> - <div v-show="showList"> + <!--<div v-show="showList"> <div class="grid-btn"> - <!-- 搜索条件 --> + <!– 搜索条件 –> <div class="form-group col-sm-2"> <input type="text" class="form-control" v-model="q.ip" @keyup.enter="query" @@ -120,7 +120,7 @@ placeholder="<@spring.message 'node.type'/>"></multiselect> </div> - <!-- 功能按钮 --> + <!– 功能按钮 –> <a class="btn btn-default" @click="advancedSearch"> <i class="fa" :class="{'fa-angle-double-down': !isAdvancedSearch, 'fa-angle-double-up': isAdvancedSearch}"></i></a> @@ -129,7 +129,7 @@ <a class="btn btn-default" @click="reset" title="<@spring.message 'common.reset'/>"> <i class="fa fa-refresh"></i></a> - <!-- 搜索条件 --> + <!– 搜索条件 –> <div class="grid-btn grid-btn_advanced" v-show="isAdvancedSearch"> <div class="form-group col-sm-2"> <input type="text" class="form-control" @@ -151,6 +151,57 @@ </div> </div> + <!– 列表数据 / 分页 –> + <table id="jqGrid"></table> + <div id="jqGridPager"></div> + + </div>--> + <!-- 列表 查询 --> + <div v-show="showList"> + <div class="tools"> + <!-- 搜索条件 --> + <div class="form-group"> + <div class="ad-search-label" @click="adSearchDropdown1"> + <span>{{selectedItem1}}</span> + <div class="ad-search-dropdown-items" v-show="selectFlag1"> + <div @click="changeAdSearch1(i)" class="ad-search-dropdown-item" v-for="i in selectItems1"> + {{i}} + </div> + </div> + </div> + <input type="text" class="form-control input-medium ad-search-input" v-model="q.ip" @keyup.enter="query" + placeholder="<@spring.message 'node.ipAddress'/>" v-show="showIp"> + <input type="text" class="form-control input-medium ad-search-input" v-model="q.name" @keyup.enter="query" + placeholder="<@spring.message 'common.name'/>" v-show="!showIp"> + </div> + + <div class="form-group"> + <multiselect :options="nodeTypes" label="value" :show-labels="false" + v-model="q.type" class="input-medium" + placeholder="<@spring.message 'node.type'/>"></multiselect> + </div> + + <div class="form-group" v-show="isAdvancedSearch"> + <multiselect v-model="q.tag" :options="queryTags" label="value" :show-labels="false" class="input-medium" + placeholder="<@spring.message 'node.tag'/>"></multiselect> + </div> + + <div class="form-group" v-show="isAdvancedSearch"> + <multiselect v-model="q.state" placeholder="<@spring.message 'common.onLineState'/>" + :show-labels="false" :options="nodeStates" class="input-medium" + label="value"></multiselect> + </div> + + <!-- 功能按钮 --> + <a class="btn btn-default" @click="advancedSearch" title="<@spring.message 'common.advanced.search'/>"> + <i class="fa" :class="{'fa-angle-double-right': !isAdvancedSearch, 'fa-angle-double-left': isAdvancedSearch}"></i> + </a> + <!-- <a class="btn btn-default" @click="reset" title="<@spring.message 'common.reset'/>"> + <i class="fa fa-refresh"></i></a> --> + <a class="btn btn-default btn-search" @click="query" title="<@spring.message 'common.search'/>"> + <i class="fa fa-search"></i></a> + </div> + <!-- 列表数据 / 分页 --> <table id="jqGrid"></table> <div id="jqGridPager"></div> @@ -158,6 +209,9 @@ </div> </div> + + + <!-- 节点组树结构模板 --> <template id="treeTemplate"> <div class="mytree-item"> diff --git a/nezha-admin/src/main/resources/templates/modules/node/nodeInfo.html b/nezha-admin/src/main/resources/templates/modules/node/nodeInfo.html index fce8de77..14ad02b2 100644 --- a/nezha-admin/src/main/resources/templates/modules/node/nodeInfo.html +++ b/nezha-admin/src/main/resources/templates/modules/node/nodeInfo.html @@ -55,13 +55,13 @@ <a class="btn btn-primary" @click="add" title="<@spring.message 'common.add'/>"> <i class="fa fa-plus"></i></a> - <a class="btn btn-primary" @click="update" title="<@spring.message 'common.edit'/>"> + <a :disabled="single" class="btn btn-primary" @click="update" title="<@spring.message 'common.edit'/>"> <i class="fa fa-pencil"></i></a> - <a class="btn btn-primary" @click="del" title="<@spring.message 'common.delete'/>"> + <a :disabled="multi" class="btn btn-primary" @click="del" title="<@spring.message 'common.delete'/>"> <i class="fa fa-trash-o"></i></a> - <a class="btn btn-primary" @click="changeState(1)" title="<@spring.message 'common.onLine'/>"> + <a :disabled="multi" class="btn btn-primary" @click="changeState(1)" title="<@spring.message 'common.onLine'/>"> <i class="fa fa-arrow-up"></i></a> - <a class="btn btn-primary" @click="changeState(2)" title="<@spring.message 'common.offLine'/>"> + <a :disabled="multi" class="btn btn-primary" @click="changeState(2)" title="<@spring.message 'common.offLine'/>"> <i class="fa fa-arrow-down"></i></a> </div> diff --git a/nezha-admin/src/main/resources/templates/modules/node/nodeRoom.html b/nezha-admin/src/main/resources/templates/modules/node/nodeRoom.html index a2460725..2dc54081 100644 --- a/nezha-admin/src/main/resources/templates/modules/node/nodeRoom.html +++ b/nezha-admin/src/main/resources/templates/modules/node/nodeRoom.html @@ -10,17 +10,17 @@ <!-- 列表 查询 --> <div v-show="showList"> - <div class="grid-btn"> + <div class="tools"> <!-- 搜索条件 --> - <div class="form-group col-sm-2"> - <input type="text" class="form-control" v-model="q.name" @keyup.enter="query" + <div class="form-group"> + <input type="text" class="form-control input-medium" v-model="q.name" @keyup.enter="query" placeholder="<@spring.message 'node.room.name'/>"> </div> - <div class="form-group col-sm-2"> + <div class="form-group"> <multiselect :options="addrList" label="value" :show-labels="false" - v-model="q.addr" + v-model="q.addr" class="input-medium" placeholder="<@spring.message 'node.room.addr'/>"></multiselect> </div> @@ -31,9 +31,9 @@ <i class="fa fa-refresh"></i></a> <a class="btn btn-primary" @click="add" title="<@spring.message 'common.add'/>"> <i class="fa fa-plus"></i></a> - <a class="btn btn-primary" @click="update" title="<@spring.message 'common.edit'/>"> + <a :disabled="single" class="btn btn-primary" @click="update" title="<@spring.message 'common.edit'/>"> <i class="fa fa-pencil-square-o"></i></a> - <a class="btn btn-primary" @click="del" title="<@spring.message 'common.delete'/>"> + <a :disabled="multi" class="btn btn-primary" @click="del" title="<@spring.message 'common.delete'/>"> <i class="fa fa-trash-o"></i></a> </div> diff --git a/nezha-admin/src/main/resources/templates/modules/node/roomTest.html b/nezha-admin/src/main/resources/templates/modules/node/roomTest.html new file mode 100644 index 00000000..e0733d12 --- /dev/null +++ b/nezha-admin/src/main/resources/templates/modules/node/roomTest.html @@ -0,0 +1,309 @@ +<!DOCTYPE html> +<#import "/spring.ftl" as spring> +<html> +<head> + <title>roomTest</title> + <#include "/header.html"> +</head> +<body> +<div id="roomTestApp" v-cloak> + + <!-- 搜索条件 --> + <div style="width: 100%;float: left;" class="tools"> + <div class="form-group"> + <div class="btn-group"> + <!-- code 为 astana 1 , almaty 2 --> + <button v-for="item in addrList" :id="'but'+item.code" class="btn btn-default" + @click="query(item.code)" :value="item.value">{{item.value}} + </button> + </div> + </div> + + <div class="form-group"> + <input type="text" class="form-control input-medium" v-model="q.name" @keyup.enter="query(null)" + placeholder="机房名称"> + </div> + + <!-- 功能按钮 --> + <a class="btn btn-default" title="搜索" @click="query(null)"><i class="fa fa-search"></i></a> + <a class="btn btn-default" @click="reset" title="重置"><i class="fa fa-refresh"></i></a> + <a class="btn btn-primary" @click="addRoom" title="添加"><i class="fa fa-plus"></i></a> + </div> + + <!-- 左侧机房列表和右侧行列表区域 --> + <div class="main"> + + <!-- 左侧机房名称列表 --> + <div class="room" id="roomList"> + <div class="content" style="height: 500px;"> + <table class="table table-hover"> + <tr class="tr-normal"> + <td>机房名称</td> + </tr> + <tr class="tr-normal" v-for="item in roomList" :id="'tr'+item.id" @click="showRowList(item)"> + <td @mouseenter="" @mouseleave=""> + <div style="float: left"> + <a href="#" @click="showRowList(item)">{{item.name}}</a> + </div> + <div class="" style="float: right;" :id="'option'+item.id"> + <a class="" href="#" @click="updateRoom(item)"><i class="fa fa-pencil"></i></a> + <a class="" href="#" @click="delRoom(item)"><i class="fa fa-trash-o"></i></a> + </div> + </td> + </tr> + </table> + </div> + </div> + + <!-- 行列表区域 --> + <div class="ranks"> + <!--<div style="background-color: greenyellow;position: absolute;top: 0px;left: 0px;"> + </div>--> + <div class="cols"> + <div v-for="item,index in rowList" style="height: 150px;line-height: 180px;text-align: center;"> + {{index+1}} + </div> + </div> + <div style="overflow:auto hidden;margin-left: 20px"> + <table style="margin-bottom: 15px"> + <tr> + <td v-for="n in rowList[0].length"> + <div> + <div style="width: 80%;text-align: center;"> + {{n}} + </div> + </div> + </td> + </tr> + <tr v-for="item,index in rowList"> + <td v-for="cab in item" :key="item.id"> + <div style="width: 150px;height: 150px;position: relative"> + <div class="cab"> + + <!-- 该位置暂无机柜 展示图标 --> + <div v-if="checkCab(cab)"> + <a href="#" @click="addCab(cab)"> + <i class="fa fa-plus fa-2x" aria-hidden="true"></i></a> + </div> + + <!-- 存在机柜 展示机柜名称 --> + <div v-else> + <b>{{getCabName(cab)}}</b> + <div class="cab-detail-option"> + <a href="#" title="详细操作" @click="showCabOption(cab.id)"> + <i class="fa fa-ellipsis-h" aria-hidden="true"></i></a> + </div> + </div> + </div> + + <!-- 机柜 修改/删除 按钮 --> + <div v-if="!checkCab(cab)" class="myoption-close cab-but" :id="'cab'+cab.id"> + <a class="btn btn-primary" @click="updateCab(cab)"><i + class="fa fa-pencil"></i></a> + <a class="btn btn-primary" @click="delCab(cab)"><i + class="fa fa-trash-o"></i></a> + </div> + </div> + </td> + </tr> + </table> + </div> + </div> +</div> + + <!-- 机房表单 --> + <div v-show="!showRoomFrom" id="roomForm" class="panel panel-default"> + + <form class="form-horizontal"> + <!-- 名称 --> + <div class="form-group"> + <div class="col-sm-2 control-label"><@spring.message 'common.name'/></div> + <div class="col-sm-9"> + <input type="text" class="form-control" + :class="{'form-control--error': $v.nodeRoom.name.$dirty && !$v.nodeRoom.name.required}" + v-model.trim="nodeRoom.name" @blur="$v.nodeRoom.name.$touch" + placeholder="<@spring.message 'common.name'/>"/> + <span class="required-symbol">*</span> + <div class="form-control_error-msg" v-if="$v.nodeRoom.name.$dirty && !$v.nodeRoom.name.required"> + <@spring.message 'validate.common.required'/> + </div> + <div class="form-control_error-msg" + v-if="$v.nodeRoom.name.$dirty && !$v.nodeRoom.name.roomNameCheck"> + <@spring.message 'validate.common.name.repeat'/> + </div> + </div> + </div> + + <!-- 所属地区 --> + <div class="form-group"> + <div class="col-sm-2 control-label"><@spring.message 'node.room.addr'/></div> + <div class="col-sm-9"> + <multiselect :options="addrList" :show-labels="false" label="value" + :class="{'form-control--error': $v.nodeRoom.addr.$dirty && !$v.nodeRoom.addr.required}" + v-model="$v.nodeRoom.addr.$model" + placeholder="<@spring.message 'common.pleaseSelect'/>"></multiselect> + <span class="required-symbol">*</span> + <div class="form-control_error-msg" v-if="$v.nodeRoom.addr.$dirty && !$v.nodeRoom.addr.required"> + <@spring.message 'validate.common.required'/> + </div> + </div> + </div> + + <!-- 机房行数 --> + <div class="form-group"> + <div class="col-sm-2 control-label"><@spring.message 'node.room.roomRows'/></div> + <div class="col-sm-9"> + <input type="text" class="form-control" + :class="{'form-control--error': $v.nodeRoom.roomRows.$dirty && !$v.nodeRoom.roomRows.minValue || !$v.nodeRoom.roomRows.integer}" + v-model="$v.nodeRoom.roomRows.$model" + placeholder="<@spring.message 'node.room.roomRows'/>"/> + <span class="required-symbol">*</span> + <div class="form-control_error-msg" + v-if="$v.nodeRoom.roomRows.$dirty && !$v.nodeRoom.roomRows.minValue || !$v.nodeRoom.roomRows.integer"> + <@spring.message 'validate.common.positiveInteger'/> + </div> + <div class="form-control_error-msg" + v-if="$v.nodeRoom.roomRows.$dirty && !$v.nodeRoom.roomRows.required"> + <@spring.message 'validate.common.required'/> + </div> + <div class="form-control_error-msg" + v-if="$v.nodeRoom.roomRows.$dirty && $v.nodeRoom.roomRows.minValue && $v.nodeRoom.roomRows.integer && !$v.nodeRoom.roomRows.roomRowsCheck"> + <@spring.message 'validate.cabinet.occupied'/>{{occRow}}<@spring.message 'node.room.row'/> + </div> + </div> + </div> + + <!-- 机房列数 --> + <div class="form-group"> + <div class="col-sm-2 control-label"><@spring.message 'node.room.roomCols'/></div> + <div class="col-sm-9"> + <input type="text" class="form-control" + :class="{'form-control--error': $v.nodeRoom.roomCols.$dirty && !$v.nodeRoom.roomCols.minValue || !$v.nodeRoom.roomCols.integer}" + v-model="$v.nodeRoom.roomCols.$model" + placeholder="<@spring.message 'node.room.roomCols'/>"/> + <span class="required-symbol">*</span> + <div class="form-control_error-msg" + v-if="$v.nodeRoom.roomCols.$dirty && !$v.nodeRoom.roomCols.minValue || !$v.nodeRoom.roomCols.integer"> + <@spring.message 'validate.common.positiveInteger'/> + </div> + <div class="form-control_error-msg" + v-if="$v.nodeRoom.roomCols.$dirty && !$v.nodeRoom.roomCols.required"> + <@spring.message 'validate.common.required'/> + </div> + <div class="form-control_error-msg" + v-if="$v.nodeRoom.roomCols.$dirty && $v.nodeRoom.roomCols.minValue && $v.nodeRoom.roomCols.integer && !$v.nodeRoom.roomCols.roomColsCheck"> + <@spring.message 'validate.cabinet.occupied'/>{{occCol}}<@spring.message 'node.room.column'/> + </div> + </div> + </div> + + <!-- 备注 --> + <div class="form-group"> + <div class="col-sm-2 control-label"> <@spring.message 'common.remark'/></div> + <div class="col-sm-9"> + <input type="text" class="form-control" v-model="nodeRoom.remarks" + placeholder="<@spring.message 'common.remark'/>"/> + </div> + </div> + + <!-- 保存 / 返回 --> + <div class="form-group form-group_opbox"> + <div> + <button title="<@spring.message 'common.submit'/>" type="button" class="btn btn-primary" + style="width: 55px" @click="saveOrUpdateRoom"><i class="fa fa-check"></i></button> + <div style="display:inline-block;width:10px;"></div> + <button title="<@spring.message 'common.back'/>" type="button" class="btn btn-warning" + style="width: 55px" @click="reload"><i class="fa fa-reply"></i></button> + </div> + </div> + </form> + </div> + + <!-- 机柜表单 --> + <div v-show="!showCabFrom" id="cabForm" class="panel panel-default"> + + <form class="form-horizontal"> + <!-- 名称 --> + <div class="form-group"> + <div class="col-sm-2 control-label"><@spring.message 'common.name'/></div> + <div class="col-sm-9"> + <input type="text" v-model.trim="nodeCabinet.name" @blur="$v.nodeCabinet.name.$touch" + class="form-control" + :class="{'form-control--error': $v.nodeCabinet.name.$dirty && !$v.nodeCabinet.name.required}" + placeholder="<@spring.message 'common.name'/>"/> + <span class="required-symbol">*</span> + <div class="form-control_error-msg" + v-if="$v.nodeCabinet.name.$dirty && !$v.nodeCabinet.name.required"> + <@spring.message 'validate.common.required'/> + </div> + <div class="form-control_error-msg" + v-if="$v.nodeCabinet.name.$dirty && !$v.nodeCabinet.name.cabNameCheck"> + <@spring.message 'validate.common.name.repeat'/> + </div> + </div> + </div> + + <!--机房名称--> + <div class="form-group"> + <div class="col-sm-2 control-label">机房名称</div> + <div class="col-sm-9"> + <input type="text" v-model.trim="nodeCabinet.roomName" class="form-control" + placeholder="机房名称" readonly="false"/> + <span class="required-symbol">*</span> + </div> + </div> + + <!-- U位 --> + <div class="form-group"> + <div class="col-sm-2 control-label"><@spring.message 'node.cabinet.uSize'/></div> + <div class="col-sm-9"> + <input type="text" v-model="nodeCabinet.ubit" class="form-control" + :class="{'form-control--error': $v.nodeCabinet.ubit.$dirty && !$v.nodeCabinet.ubit.minValue || !$v.nodeCabinet.ubit.integer}" + @blur="$v.nodeCabinet.ubit.$touch" placeholder="<@spring.message 'node.cabinet.uSize'/>"/> + <span class="required-symbol">*</span> + <div class="form-control_error-msg" + v-if="$v.nodeCabinet.ubit.$dirty && !$v.nodeCabinet.ubit.minValue || !$v.nodeCabinet.ubit.integer"> + <@spring.message 'validate.common.positiveInteger'/> + </div> + <div class="form-control_error-msg" + v-if="$v.nodeCabinet.ubit.$dirty && !$v.nodeCabinet.ubit.required"> + <@spring.message 'validate.common.required'/> + </div> + <div class="form-control_error-msg" + v-if="$v.nodeCabinet.ubit.$dirty && $v.nodeCabinet.ubit.required && $v.nodeCabinet.ubit.minValue && !$v.nodeCabinet.ubit.cabUbitCheck"> + <@spring.message 'validate.node.uAlreadyUsed'/> {{occUbit}}U + </div> + </div> + </div> + + <!-- 备注 --> + <div class="form-group"> + <div class="col-sm-2 control-label"> <@spring.message 'common.remark'/></div> + <div class="col-sm-9"> + <input type="text" v-model="nodeCabinet.remarks" class="form-control" + placeholder="<@spring.message 'common.remark'/>"/> + </div> + </div> + </form> + + <!-- 保存 / 返回 --> + <div class="form-group form-group_opbox" style="margin-top: 50px"> + <div> + <button title="<@spring.message 'common.submit'/>" type="button" class="btn btn-primary" + style="width: 55px" @click="saveOrUpdateCab"><i class="fa fa-check"></i></button> + <div style="display:inline-block;width:10px;"></div> + <button title="<@spring.message 'common.back'/>" type="button" class="btn btn-warning" + style="width: 55px" @click="reload"><i class="fa fa-reply"></i></button> + </div> + </div> + </div> + +</div> +</body> +<!--<script src="${request.contextPath}/statics/js/modules/node/roomTest.js"></script>--> +<link rel="stylesheet" href="${request.contextPath}/statics/css/nodeRoom.css"> +<#include "/js/modules/node/roomTest.js"> +<script> + var perfect = new PerfectScrollbar('#roomList'); +</script> +</html>
\ No newline at end of file |