<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>差旅费用</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <style>
        body {
            overflow-y: scroll;
        }

        /* 禁止刷新后出现横向滚动条 */
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息(<b>收起-展开</b>)</legend>
            <div id="search-div" style="margin: 5px 10px -10px 0px">
                <form class="layui-form" action="" lay-filter="search-form">
                    <div class="layui-form-item" style="white-space: nowrap; margin-right: -20px;">
                        <div class="layui-inline" style="margin-right: 10px;">
                            <label class="layui-form-label" style="width: 80px;">项目名称</label>
                            <div class="layui-input-inline" style="width: 224px;">
                                <input type="text" id="XMMC" name="XMMC" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" style="margin-right: 10px;">
                            <label class="layui-form-label" style="width: 80px;">ERP编号</label>
                            <div class="layui-input-inline" style="width: 140px;">
                                <input type="text" id="ERPBH" name="ERPBH" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" style="margin-right: 10px;">
                            <label class="layui-form-label" style="width: 80px;">科研费号</label>
                            <div class="layui-input-inline" style="width: 140px;">
                                <input type="text" id="FYSQBH" name="FYSQBH" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" style="margin-right: 10px;">
                            <label class="layui-form-label" style="width: 80px">年份</label>
                            <div class="layui-input-inline" style="width: 140px">
                                <select name="NF" id="NF" lay-filter="status">
                                    <option value="">全部</option>
                                    <option th:each="item:${yearList}" th:text="${item.nf}"
                                            th:value="${item.nf}"></option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item" style="white-space: nowrap; margin-right: -20px; margin-top: 10px;">
                        <div class="layui-inline" style="margin-right: 10px;">
                            <label class="layui-form-label" style="width: 80px;">日期</label>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" name="QSRQ" id="QSRQ" placeholder="开始日期" class="layui-input" readonly>
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" name="JSRQ" id="JSRQ" placeholder="结束日期" class="layui-input" readonly>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 80px">出差地点</label>
                            <div class="layui-input-inline" style="width: 140px">
                                <input type="text" id="CCDD" name="CCDD" class="layui-input" autocomplete="off"/>
                            </div>
                        </div>
                        <div class="layui-inline" style="margin-right: 10px; margin-left: 10px;">
                            <button type="submit" id="btn_search" class="layui-btn" lay-submit lay-filter="data-search-btn">
                                <i class="layui-icon"></i> 搜 索
                            </button>
                        </div>
                        <div class="layui-inline" style="margin-right: 10px;">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-reset-btn">
                                <i class="layui-icon layui-icon-refresh"></i> 重 置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <button class="layui-btn layui-btn-sm" lay-event="export" style="background-color: #2f363c" >
                <i class="layui-icon layui-icon-export" style="font-size: 10px;"></i>批量导出
            </button>
        </script>

        <input type="hidden" id="userId" name="userId" class="layui-input" th:value="${userId}">
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit" th:if="${editRight}">
                <i class="layui-icon layui-icon-edit" style="font-size: 10px;"></i>编辑
            </a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete" th:if="${delRight}">
                <i class="layui-icon layui-icon-delete" style="font-size: 10px;"></i>删除
            </a>
        </script>
    </div>
</div>
<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/lib/coco-message/coco-message.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js}" charset="utf-8"></script>
<script th:src="@{/lib/xm-select-v1.2.2/xm-select.js}" charset="utf-8"></script>
<script th:inline="javascript" type="text/javascript">
    AjaxUtil.ctx = /*[[@{/}]]*/'';
    var updateflag = 0;
    var xmApproval = {};
    layui.use(['form', 'table'], function () {
        var form = layui.form,
            table = layui.table,
            laydate = layui.laydate;
        var userId = $("#userId").val();

        //日期
        laydate.render({
            elem: '#SQRQStart'
        });
        laydate.render({
            elem: '#SQRQEnd'
        });
        laydate.render({
            elem: '#QSRQ'
        });
        laydate.render({
            elem: '#JSRQ'
        });


        var currTable = table.render({
            elem: '#currentTableId',
            url: AjaxUtil.ctx + 'staTravelexpenses/searchData',
            method: 'post',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print'],
            cols: [
                [
                    {type: "checkbox", fixed: 'left'},
                    {type: 'numbers', align: 'center',title: '序号'},
                    {field: 'BM', width: '7%', title: '项目部门'},
                    {field: 'XMMC', width: '15%', title: '项目名称', sort: true},
                    {field: 'KYFH', width: '15%', title: '科研费号'},
                    {field: 'XMLXMC', width: '10%', title: '项目类型'},
                    {field: 'NF', width: '7%', title: '年份'},
                    {field: 'ERPBH', width: '7%', title: 'ERP编号'},
                    {field: 'CCR', width: '7%', title: '出差人'},
                    {field: 'CCDD', width: '7%', title: '出差地点'},
                    {field: 'SQJE', width: '9%', title: '申请费用'},
                    {field: 'BZJE', width: '10%', title: '报账费用（含税）'},
                    {field: 'BHSJE', width: '10%', title: '报账费用（不含税）'},

                    {field: 'SFBYJ', width: '10%', title: '是否备用金'},
                    {field: 'SQSJ', width: '10%', title: '申请时间'},
                    {field: 'XMFZR',width: '10%',title: '项目责任人'},
                    {field: 'ID', width: '0', title: 'id', hide: true}
                ]
            ],
            autoSort: false,
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'grid',
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.rows //解析数据列表
                };
            }
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //起止日期格式判断
            var qsrq = document.getElementById('QSRQ').value;
            var jsrq = document.getElementById('JSRQ').value;
            var sd = new Date(qsrq);
            var ed = new Date(jsrq);
            if (sd > ed) {
                Message.warning("起始日期必须小于结束日期", 1500);
                return;
            }
            // 执行搜索重载
            currTable.reload({
                page: {
                    curr: 1 // 页码从1开始
                },
                where: form.val("search-form")
            });
            return false;
        });

        // 监听重置操作
        form.on('submit(data-reset-btn)', function (data) {
            form.val("search-form", {
                "XMMC": '',
                "CCDD": '',
                'QSRQ': '',
                'JSRQ': '',
                'ERPBH':'',
                'FYSQBH':'',
                'NF':''

            });
            // 执行搜索重载
            currTable.reload({
                page: {
                    curr: 1
                },
                where: form.val("search-form")
            });
            return false;
        });

        // 监听排序事件
        table.on('sort(currentTableFilter)', function (obj) {
            currTable.reload({
                initSort: obj,
                where: {
                    sortName: toLine(obj.field), //排序字段
                    sortOrder: toLine(obj.type) //排序方式
                }
            });
        });
        table.on('toolbar(currentTableFilter)',function (obj){
            var formData = form.val('search-form');
            console.log(formData);
            var formDataString = JSON.stringify(formData);
            if(obj.event === 'export'){
                var formData = form.val('search-form');
                console.log(formData);
                var formDataString = JSON.stringify(formData);
                AjaxUtil.post({
                    url:AjaxUtil.ctx +'staTravelexpenses/getAll/'+formDataString,
                    contentType: "application/json",
                    timeout: 15000, //大批量导出时会出现超时问题
                    success: function(res){
                        console.log(res);
                        table.exportFile('currentTableId',res.data,'xlsx');
                    },
                    error:function (error) {
                        Message.error(error,2000)

                    }
                });
            }
        });
    });


    function setUpdateFlag() {
        updateflag = 1;
    }

    function getXmApproval() {
        return xmApproval;
    }
</script>
</body>
</html>