<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>Excel报表字典数据配置</title>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/buttons.dataTables.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
</head>

<style>
    .self-style {
        margin: 0px;
        position: absolute;
        left: 182px;
        right: 5px;
        top: 3px;
        bottom: 0;
        z-index: 1;
    }

    .btn {
        font-size: 12px;
        padding: 1px 9px;
    !important;
    }

    .myStyle {
        width: 50%;
        float: left;
    }

    .ml10 {
        margin-left: 10px;
    }
</style>
<body style="font-size: 12px; overflow: hidden;">
<%--终端树区域--%>
<%@include file="../../include/excelSettingTree.jsp" %>
<%--右侧内容展示区域--%>
<div class="self-style" id="right">
    <form class="form-inline ml15 header">
        <div class="form-group  mr10  fr" style="margin-bottom: 3px" id="fliteData">
            <%--数据筛选区域--%>
            <div id="search" style="float: right;text-align: right;width: 100%;margin-bottom: 3px;">
                <label style="font-size:6px;">筛选数据:</label>
                <input type="search" style="width: 200px;display: inline;" class="form-control input-sm"
                       placeholder="多条件筛选,空格分开" onkeyup="valueChange(this.value)"/>
            </div>
        </div>
    </form>
    <%--表格展示区域--%>
    <table id="excelList"
           class="table table-striped table-bordered dataTable no-footer"
           cellspacing="0" width="100%" role="grid"
           aria-describedby="example_info">
        <thead>
        <tr role="row">
            <th aria-controls="example"
                aria-label="Position: activate to sort column ascending">配置项缩写
            </th>
            <th aria-controls="example"
                aria-label="Office: activate to sort column ascending">配置项全称
            </th>
            <th aria-controls="example"
                aria-label="Office: activate to sort column ascending">父节点ID
            </th>
            <th aria-controls="example"
                aria-label="Office: activate to sort column ascending">节点GUID
            </th>
            <th>操作</th>
        </tr>
        </thead>
    </table>
</div>
<%-- bootstrap模态框（Modal） --%>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 300px;">
        <div class="modal-content" style="width: 300px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="addModalLabel"></h4>
            </div>
            <div class="modal-body">
                <div>
                    <label style="font-weight:normal;font-size: 15px;">配置项缩写：</label>
                    <input autocomplete="off" id="shortName" maxlength="64"
                           style="outline:none;margin-top: -8px;font-size: 15px;border: 0px;border-bottom: 1px solid #bfbfbf"
                           placeholder="请输入缩写"/>
                </div>
                <div style="margin-top: 5px;">
                    <label style="font-weight:normal;font-size: 15px;">配置项全称：</label>
                    <input autocomplete="off" id="fullName" maxlength="64"
                           style="outline:none;margin-top: -8px;font-size: 15px;border: 0px; border-bottom: 1px solid #bfbfbf"
                           placeholder="请输入全称"/>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" style="font-size: 15px;" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" style="font-size: 15px;" class="btn btn-primary"
                        onclick="commitData()" id="commit"
                        data-dismiss="modal">提交
                </button>
            </div>
        </div>
    </div>
</div>
<%--模态对话框--%>
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 300px;">
        <div class="modal-content" style="width: 300px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="deleteModalLabel">删除配置</h4>
            </div>
            <div class="modal-body">
                <label id="deleteInfo"></label>
            </div>
            <div class="modal-footer">
                <button type="button" style="font-size: 15px;" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" style="font-size: 15px;" class="btn btn-danger" onclick="deleteData()"
                        data-dismiss="modal">删除
                </button>
            </div>
        </div>
    </div>
</div>
<script src="${ctx}/js/plugin/jquery/jquery.dataTables.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.bootstrap.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/plugin/datatables/dataTables.buttons.min.js"></script>
<script src="${ctx}/js/plugin/datatables/buttons.html5.min.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/plugin/xss/xss.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script src="${ctx}/jspJS/report/addExcelData.js"></script>
</body>
</html>