<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>缓存管理页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="/resources/favicon.ico">
    <link rel="stylesheet" href="resources/layui/css/layui.css" th:href="@{/resources/layui/css/layui.css}"
          media="all"/>
    <link rel="stylesheet" href="resources/css/public.css" th:href="@{/resources/css/public.css}" media="all"/>
</head>
<body class="childrenBody">
<!--查询条件-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 15px;">
    <legend>缓存管理</legend>
</fieldset>

<!--数据表格-->
<div>
    <table class="layui-hide" id="cacheTable" lay-filter="cacheTable"></table>
    <div id="cacheToolBar" style="display: none">
        <button type="button" lay-event="syncCache" shiro:hasPermission="cache:syncCache" class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius">
            <i class="layui-icon layui-icon-add-1"></i>同步缓存
        </button>
        <button type="button" lay-event="removeAllCache" shiro:hasPermission="cache:removeAllCache" class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius">
            <i class="layui-icon layui-icon-delete"></i>清空缓存
        </button>
    </div>
    <div id="cacheRowBar" style="display: none;">
        <button type="button" lay-event="delete" shiro:hasPermission="cache:delete" class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius"><i
                class="layui-icon layui-icon-delete"></i>删除
        </button>
    </div>
</div>


<script type="text/javascript" src="/resources/layui/layui.js"></script>

<script type="text/javascript">
    layui.use(['jquery', 'form', 'layer', 'table'], function () {
        var $ = layui.jquery; // 引入jQuery模块
        var form = layui.form; // 引入表单模块
        var layer = layui.layer; // 引入弹出层模块
        var table = layui.table; // 引入表格模块

        // 初始化表格，加载数据
        var tableIns = table.render({
            elem: "#cacheTable", // 绑定元素ID
            title: "缓存数据表格", // 表格标题
            url: "/cache/loadAllCache", // 数据接口
            toolbar: "#cacheToolBar", // 工具栏模板选择器
            page: true, // 开启分页
            cols: [ [ // 表头
                {field: 'key', title: '键', align: 'center', width:'100'}, // 定义列：字段名、标题、对齐方式、宽度
                {field: 'value', title: '值', align: 'center', width:'1100'}, // 定义列：字段名、标题、对齐方式、宽度
                {fixed: 'right', title: '操作', toolbar: '#cacheRowBar', align: 'center', width:'100'} // 定义操作列
            ] ]
        });

        // 监听工具条事件
        table.on("toolbar(cacheTable)", function (obj) {
            switch (obj.event) {
                case 'removeAllCache': // 如果点击了清空所有缓存按钮
                    removeAllCache(); // 调用清空所有缓存函数
                    break;
                case 'syncCache': // 如果点击了同步缓存按钮
                    syncCache(); // 调用同步缓存函数
                    break;
            };
        });

        // 监听行工具条事件
        table.on("tool(cacheTable)",function (obj) {
            var data = obj.data; // 获取当前行的数据
            switch (obj.event){
                case 'delete': // 如果点击了删除按钮
                    deleteCache(data); // 调用删除缓存函数，传入当前行数据
                    break;
            };
        });

        // 清除所有缓存的函数
        function removeAllCache() {
            layer.confirm('你确定要清空所有缓存数据吗？',{icon: 3,title:'提示'},function (index) {
                $.post("/cache/removeAllCache",function (res) { // 发送POST请求到服务器端执行清空操作
                    if (res.code==200){ // 如果返回码为200，表示成功
                        tableIns.reload(); // 重新加载表格数据
                    }
                    layer.msg(res.msg); // 显示操作结果消息
                });
            });
        }

        // 同步缓存的函数
        function syncCache() {
            layer.confirm('你确定要同步缓存数据吗？',{icon: 3,title:'提示'},function (index) {
                $.post("/cache/syncCache",function (res) { // 发送POST请求到服务器端执行同步操作
                    if (res.code==200){ // 如果返回码为200，表示成功
                        tableIns.reload(); // 重新加载表格数据
                    }
                    layer.msg(res.msg); // 显示操作结果消息
                });
            });
        }

        // 删除指定缓存的函数
        function deleteCache(data) {
            layer.confirm('你确定要删除【'+data.key+'】这条缓存吗？',{icon: 3,title:'提示'},function (index) {
                $.post("/cache/deleteCache",{key:data.key},function (res) { // 发送POST请求到服务器端执行删除操作，传递要删除的缓存键值
                    if (res.code==200){ // 如果返回码为200，表示成功
                        tableIns.reload({where:""}); // 重新加载表格数据，不附加任何条件
                    }
                    layer.msg(res.msg); // 显示操作结果消息
                });
                layer.close(index); // 关闭确认框
            });
        }
    });

</script>

</body>
</html>