<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="decorator" content="base"/>
    <link rel="stylesheet" type="text/css" href="${ctxPlugin}/static/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="${ctxPlugin}/lib/font/iconfont.css"/>
    <style>
        .layui-table-tool-temp {
            padding-right: 0
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-form layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <sfTags:pagePermission authFlag="CKGL_CKDGL_CKDGL_T"
                                       html='<a href="${ctx}/outStockOrder/toOutStockOrderPage">
                    <li class="layui-this">出库单管理</li>
                </a>'/>
                <button type="reset" class="layui-btn f-r mt-10 mr-15 pl-10 pr-10" type="reset" onclick="reset()">
                    <i class="layui-icon">&#xe666;</i>重置
                </button>
                <button class="layui-btn f-r mt-10 mr-15 pl-10 pr-10" id="searchBtn" lay-submit
                        lay-filter="LAY-user-back-search">
                    <i class="layui-icon fs-12">&#xe615;</i>
                    查询
                </button>
            </ul>
        </div>
        <div class="layui-card-body layuiadmin-card-header-auto">
            <form class="layui-form layui-card" action="" id="searchForm">
                <input type="hidden" name="inAscriptionId" value="${inAscriptionId}"/>
                <input type="hidden" name="inStockOnly" value="1"/>
                <div class="layui-form-item">
                    <div class="layui-col-lg2 layui-col-sm3">
                        <label class="layui-form-label">出库单号：</label>
                        <div class="layui-input-block">
                            <input type="text" name="number" class="layui-input" autocomplete="off">
                        </div>
                    </div>

                    <div class="layui-col-lg2 layui-col-sm3">
                        <label class="layui-form-label">使用人：</label>
                        <div class="layui-input-block">
                            <input type="text" name="creator" class="layui-input" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-col-lg2 layui-col-sm3">
                        <label class="layui-form-label">出库仓库：</label>
                        <div class="layui-input-block">
                            <select name="warehouseId" lay-search>
                                <option value="">请选择</option>
                                <c:forEach items="${warehouseList}" var="warehouse">
                                    <option value="${warehouse.columns.id}">${warehouse.columns.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-lg2 layui-col-sm3">
                        <label class="layui-form-label">使用说明：</label>
                        <div class="layui-input-block">
                            <input type="text" name="remarks" class="layui-input" autocomplete="off">
                        </div>
                    </div>



                    <div class="layui-col-lg4 layui-col-sm6">
                        <label class="layui-form-label">出库时间：</label>
                        <div class="layui-input-block">
                            <div class="layui-col-xs5">
                                <input type="text" name="createTimeMin" class="layui-input" id="createTimeMin"
                                       placeholder="开始日期" autocomplete="off">
                            </div>
                            <div class="layui-col-xs2 text-c lh-30">
                                —
                            </div>
                            <div class="layui-col-xs5">
                                <input type="text" name="createTimeMax" class="layui-input" id="createTimeMax"
                                       placeholder="结束日期" autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table class="layui-hide" lay-skin="row" id="test" lay-filter="test"></table>
        </div>
    </div>
</div>


<script type="text/html" id="toolbarDemo">
    <sfTags:pagePermission authFlag='CKGL_CKDGL_CKDGL_ADD_B' html='<button class="layui-btn layui-btn-sm" id="addBtn" lay-event="addOrder"><i
            class="layui-icon layui-icon-add-1"></i>使用出库
    </button>'/>
</script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>

<script>
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'tableExt', 'jquery', 'layer', 'laypage', 'laydate', 'form'], function () {
        $ = layui.$;
        tableExt = layui.tableExt;
        layer = layui.layer;
        laypage = layui.laypage;
        laydate = layui.laydate;
        form = layui.form;
        table = tableExt.getLayTable();

        //编辑

        var detail = '${fns:checkPagePermission(request, 'CKGL_CKDGL_CKDGL_VIEW_B')}';

        //开始日期
        var createTimeMin = laydate.render({
            elem: '#createTimeMin'
            , type: 'date'
            , done: function (value, date) {
                //更新结束日期的最小日期
                createTimeMax.config.min = lay.extend({}, date, {
                    month: date.month - 1
                });
                //自动弹出结束日期的选择器
                createTimeMax.config.elem[0].focus();
            }
        });
        //结束日期
        var createTimeMax = laydate.render({
            elem: '#createTimeMax'
            , type: 'date'
            , done: function (value, date) {
                //更新开始日期的最大日期
                createTimeMin.config.max = lay.extend({}, date, {
                    month: date.month - 1
                });
            }
        });



        tableExt.render({
            elem: '#test'
            , height: 'full-150'
            , id: 'test'
            , defaultToolbar: false
            , url: '${ctx}/outStockOrder/ajaxForOutStockOrderData'
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            , page: true
            , toolbar: "#toolbarDemo"
            , method: "post"
            , limits: [20, 50, 100]
            , limit: 20
            , cols: [[
                {minWidth: 50, title: '序号', align: 'center', type: 'numbers'}


                , {field: 'number', title: '出库单号', minWidth: 180, align: 'center'
                    , templet: function (d) {
                        return '<a href="#" class="layui-table-link" onclick="siteDetail(\''+d.id+'\')">'+d.number+'</a>'
                    }
                }

                , {field: 'warehouse_name', title: '出库仓库', minWidth: 150, align: 'center'}
                , {field: 'creator', title: '使用人', minWidth: 150, align: 'center'}


                , {
                    field: 'id', minWidth: 120, title: '物料清单', align: 'center', exportable: true, rowspan: '2',
                    templet: function (d) {
                        if (detail == '0') {
                            return "<a href=\"#\" class=\"layui-table-link\" onclick=\"materialDetail('" + d.id + "')\">查看</a>";
                        }
                        return "";
                    }
                }
                , {field: 'remarks', title: '使用说明', minWidth: 120, align: 'center'}
                , {field: 'create_time', minWidth: 180, title: '出库时间', align: 'center'}
            ],
            ]
        });






        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'addOrder':
                    layer.open({
                        type: 2,
                        title: '出库',
                        content: '${ctx}/outStockOrder/toAddForm',
                        area: ['80%', '80%'],
                        success: function (layero, index) {
                            childWin = window[layero.find('iframe')[0]['name']];
                        }
                    });
            }
        });


        //监听搜索
        form.on('submit(LAY-user-back-search)', function (data) {
            var field = data.field;
            //执行重载
            table.reload('test', {
                where: field,
                page: {
                    curr: 1
                }
            });
        });

        window.importMaterial = function (materials) {
            childWin.importMaterial(materials);
        };

    });

    function siteDetail(id){
        layer.open({
            title: '查看',
            type: 2,
            area: ['80%', '80%'],
            content: '${ctx}/outStockOrder/toDetailsForm?id=' + id
        })
    }

    function orderDetail(id){
        layer.open({
            title: '详情',
            type: 2,
            area: ['80%', '80%'],
            fixed: false,
            content: '${ctx}/material/order/inStockOrderDetail?id=' + id,
            success: function (layero, index) {
                childWin = window[layero.find('iframe')[0]['name']];
            }
        })
    }



    function materialDetail(id) {
        layer.open({
            type: 2,
            title: "查看",
            resize: false,
            area: ['80%', '70%'],
            content: '${ctx}/outStockOrder/materialDetails?id=' + id
        });
    }

    function reset() {
        layui.form.render();
        $("#searchForm").find("select").val("");
        $("#searchForm").find("input").val("");
    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }
</script>
</body>
</html>

