<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>NAS</title>
<link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div id="header"></div>
<div class="layui-body" style="left: 200px;">
<div id="side"></div>
<blockquote class="layui-elem-quote"><span id="ip">当前状态:</span></blockquote>
<div style="margin-left: 10px;">
<button type="button" id='add' class="layui-btn layui-btn-normal">新增</button>
<div style="width: 30%; margin-top: 10px; display: none;" id="adddata">
<form class="layui-form" action="">
<input type="text" name="title" id="title" required lay-verify="required" placeholder="请输入标题"
autocomplete="off" class="layui-input">
<input type="text" name="url" id="url" required lay-verify="required" placeholder="请输入URL"
autocomplete="off" class="layui-input" style="margin-top: 10px;">
<input type="number" name="port" id="port" required lay-verify="required" placeholder="请输入端口"
autocomplete="off" class="layui-input" style="margin-top: 10px;">
<div class="layui-form-item">
<button class="layui-btn" lay-submit lay-filter="formDemo"
style="margin-top: 10px;">立即提交
</button>
<button type="reset" class="layui-btn layui-btn-primary"
style="margin-top: 10px;">重置
</button>
</div>
</form>
</div>
<table id="address" lay-filter="listTools"></table>
</div>
<div id="footer"></div>
</div>
</div>
<script src="/layui/layui.js"></script>
<script src="/js/jquery-3.2.1.js"></script>
<script type="text/html" id="listTools">
<a class="layui-btn layui-btn-xs" lay-event="set">设置</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
$('#header').load("/html/header.html");
$('#footer').load("/html/footer.html");
$.get("/login/check.do", function (data) {
let json = JSON.parse(data);
if (json.code !== 0) {
window.location.href = "/"
}
})
let editModel = 'edit';
let dataId = -1;
layui.use(['layer', 'form', 'element', 'table'], function () {
var layer = layui.layer
, form = layui.form
, table = layui.table;
table.render({
elem: "#address"
, url: '/auth/nas/address/list.do'
, page: true
, cols: [[
{field: "id", title: "id", width: 80, sort: true, fixed: 'left'}
, {field: 'title', title: '标题', width: 80}
, {field: 'url', title: 'url', width: 400}
, {field: 'port', title: '端口', width: 80}
, {field: "right", width: 200, toolbar: '#listTools'}
]]
});
table.on('tool(listTools)', function (obj) {
let data = obj.data;
if (obj.event === 'set') {
$.post('/auth/nas/address/set.do', {id: data.id}, function (deta) {
let json = JSON.parse(deta);
layer.msg(json.msg)
setTimeout(function () {
table.reload('address')
}, 2000)
});
} else if (obj.event === 'edit') {
editModel = 'update';
dataId = data.id;
$('#title').val(data.title)
$('#url').val(data.url)
$('#port').val(data.port)
$('#adddata').css('display', '')
} else {
layer.open({
title: "删除提示"
, content: "确认删除？"
, btn: ['确认', '取消']
, yes: function (index, layero) {
$.post('/auth/nas/address/remove.do', {id: data.id}, function () {
table.reload('address')
});
layer.close(index)
},
btn2: function (index, layero) {
layer.close(index)
}
})
}
});
form.on('submit(formDemo)', function (data) {
//layer.msg(JSON.stringify(data.field));
$('#adddata').css("display", 'none')
let url = '/auth/nas/address/add.do'
if (editModel === 'update') {
url = '/auth/nas/address/update.do'
}
$.post(url, {
title: data.field.title,
url: data.field.url,
port: data.field.port,
id: dataId
}, function (data) {
let json = JSON.parse(data);
layer.msg(json.msg)
table.reload('address')
});
return false;
});
});
$.ajax({cache: false})
$.get("/auth/nas/address/get.do", function (data) {
let json = JSON.parse(data);
if (json.code !== 0) {
$('#ip').html(json.msg);
} else {
$('#ip').html(json.msg);
}
})
$('#add').click(function () {
editModel = 'edit'
$('#adddata').css("display", '')
})
</script>
<style>
#icon {
float: right;
}
.body {
bottom: 0;
}
</style>
</body>
</html>