<!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="top: 100px;overflow:auto; ">
<!-- <div id="side"></div> -->
<blockquote class="layui-elem-quote"><span id="ip">密码管理器</span></blockquote>
<button type="button" id="addType" class="layui-btn layui-btn-normal">新增分类</button>
<div class="layui-tab" lay-filter="type" lay-allowclose="true">
<ul class="layui-tab-title">
</ul>
<div class="layui-tab-content">
</div>
</div>
<iframe src="../../randompassword/index.html" style="width: 100%; height: 120%; " frameborder="0"
scrolling="no"></iframe>
<div id="footer"></div>
</div>
<script src="/layui/layui.js"></script>
<script src="/js/jquery-3.2.1.js"></script>
<script type="text/html" id="topTools">
<a class="layui-btn layui-btn-xs" lay-event="addAddress">新增账号</a>
</script>
<script type="text/html" id="listTools">
<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");
$('#side').load("/html/body/nas/side.html");
let tabid = -1;
layui.use(['layer', 'form', 'element', 'table'], function () {
let layer = layui.layer
, form = layui.form
, table = layui.table
, element = layui.element;
$.get("/tools/password/type/get/list.do", function (data) {
let json = JSON.parse(data);
if (json.code === 0) {
for (let index = 0; index < json.data.length; index++) {
const ret = json.data[index];
element.tabAdd('type', {
title: ret.title
, content: '<table id="passwordlist' + ret.id + '" lay-filter="listTools"></table>'
, id: ret.id
})
}
element.tabChange('type', '1');
}
});
form.render()
element.on('tab(type)', function (data) {
tabid = $(this).attr('lay-id')
table.render({
elem: "#passwordlist" + tabid
, url: '/tools/password/get/list.do?type=' + tabid
, toolbar: '#topTools'
, page: true
, cols: [[
{ field: "id", title: "id", width: 80, sort: true, fixed: 'left' }
, { field: 'title', title: '标题', width: 200 }
, { field: 'username', title: '账号', width: 200 }
, { field: 'password', title: '密码', width: 200 }
, { field: 'url', title: '网址', width: 400, templet: '<div><a href="{{d.url}}" target="_blank">{{d.url}}</a></div>' }
, { field: 'info', title: '备注', width: 200 }
, { field: "right", width: 200, toolbar: '#listTools' }
]]
,done:function (res,curr,count) {
form.render();
}
});
})
element.on('tabDelete(type)', function (data) {
let name = $(data.elem.prevObject.prevObject[0]).text().replace("ဆ", "")
let id = $(data.elem.prevObject.prevObject[0]).attr('lay-id')
layer.open({
title: "警告"
, content: "确认删除 " + name
, btn: ['确认', '取消']
, yes: function (index) {
$.post('/tools/password/type/set/remove.do', { id: id }, function (data) {
let json = JSON.parse(data);
layer.msg(json.msg);
})
layer.close(index)
}
, btn2: function (index) {
layer.close(index)
}
})
});
table.on('rowDouble(listTools)', function (data) {
$.get('/tools/password/get/password.do?id=' + data.data.id, function (udata) {
let json = JSON.parse(udata);
data.data.password = json.data;
data.update(data.data)
})
})
table.on('tool(listTools)', function (obj) {
if (obj.event === 'edit') {
$.get('/tools/password/get/password.do?id=' + obj.data.id, function (udata) {
let json = JSON.parse(udata);
layer.open({
title: "添加账号",
type: 1,
content: $('#adduser'),
btn: ['提交', '关闭'],
yes: function (index) {
$.post('/tools/password/set/update.do', {
title: $('#title').val()
, username: $('#username').val(), password: $('#password').val()
, url: $('#url').val(), info: $('#info').val()
, type: tabid
, id: obj.data.id
}, function (data) {
let json = JSON.parse(data);
layer.msg(json.msg)
table.reload('passwordlist' + obj.data.id)
$('#title').val('')
$('#username').val('')
$('#password').val('')
$('#url').val('')
$('#info').val('')
layer.close(index)
})
},
btn2: function (index) {
layer.msg(tabid)
layer.close(index)
},
success: function (layero, index) {
$('#title').val(obj.data.title)
$('#username').val(obj.data.username)
$('#password').val(json.data)
$('#url').val(obj.data.url)
$('#info').val(obj.data.info)
}
})
})
} else if (obj.event === 'del') {
layer.open({
title: "警告！"
, content: "删除操作无法回滚，是否确认删除:" + obj.data.title
, btn: ['确认', '取消']
, yes: function (index) {
$.post('/tools/password/set/remove.do', { id: obj.data.id }, function (data) {
let json = JSON.parse(data);
layer.msg(json.msg)
})
},
btn2: function (index) {
layer.close(index);
}
})
}
})
table.on('toolbar(listTools)', function (obj) {
if (obj.event === 'addAddress') {
layer.open({
title: "添加账号",
type: 1,
content: $('#adduser'),
btn: ['提交', '关闭'],
yes: function (index) {
$.post('/tools/password/set/add.do', {
title: $('#title').val()
, username: $('#username').val(), password: $('#password').val()
, url: $('#url').val(), info: $('#info').val()
, type: tabid
}, function (data) {
let json = JSON.parse(data);
layer.msg(json.msg)
table.reload('passwordlist' + tabid)
$('#title').val('')
$('#username').val('')
$('#password').val('')
$('#url').val('')
$('#info').val('')
layer.close(index)
})
},
btn2: function (index) {
layer.msg(tabid)
layer.close(index)
}
})
}
})
$('#addType').click(function () {
layer.prompt({
title: '新增分类'
}, function (value, index, elem) {
$.post('/tools/password/type/set/add.do', { type: value }, function (data) {
window.location.reload()
})
layer.close(index)
})
})
});
</script>
<div style="display: none; margin: 20px;" id="adduser">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-block">
<input type="text" id="title" required lay-verify="required" placeholder="请输入标题"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-block">
<input type="text" id="username" required lay-verify="required" placeholder="请输入账号"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="text" id="password" required lay-verify="required" placeholder="请输入密码"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">网址</label>
<div class="layui-input-block">
<input type="text" id="url" required lay-verify="required" placeholder="请输入网址URL"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注信息</label>
<div class="layui-input-block">
<textarea type="text" id="info" name="" required lay-verify="required" class="layui-textarea"
placeholder="请输入备注信息"></textarea>
</div>
</div>
</form>
</div>
</div>
</body>
<style>
#icon {
float: right;
}
</style>
</html>