receiptHeaderHistory.html 13.4 KB
<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 select-table">
            <ul id="myTab" class="nav nav-tabs">
                <li class="active"><a href="#tabHeader" data-toggle="tab">主表</a></li>
                <li><a href="#tabDetail" data-toggle="tab">明细</a></li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="tabHeader">
                    <div class="col-sm-12 select-table">
                        <form id="receiptHeader-form" autocomplete="off">
                            <div class="select-list">
                                <ul>
                                    <li>
                                        <label>入库单编码:</label>
                                        <input name="code" placeholder="请输入入库单编码" type="text"/>
                                    </li>
                                    <li>
                                        <label>上游单号:</label>
                                        <input name="referCode" placeholder="请输入上游单号" type="text"/>
                                    </li>
                                    <li>
                                        <label>入库类型:</label>
                                        <select name="type" th:with="type=${@receiptTypeService.getType()}">
                                            <option value="">所有</option>
                                            <option th:each="e : ${type}" th:text="${e['name']}"
                                                    th:value="${e['code']}">
                                            </option>
                                        </select>
                                    </li>
                                    <li>
                                        <label>头 状 态:</label>
                                        <select name="firstStatus"
                                                th:with="firstStatus=${@dict.getType('receiptHeaderStatus')}">
                                            <option value="">所有</option>
                                            <option th:each="e : ${firstStatus}" th:text="${e['dictLabel']}"
                                                    th:value="${e['dictValue']}">
                                            </option>
                                        </select>
                                    </li>
                                    <li>
                                        <label>尾 状 态:</label>
                                        <select name="lastStatus"
                                                th:with="lastStatus=${@dict.getType('receiptHeaderStatus')}">
                                            <option value="">所有</option>
                                            <option th:each="e : ${lastStatus}" th:text="${e['dictLabel']}"
                                                    th:value="${e['dictValue']}">
                                            </option>
                                        </select>
                                    </li>
                                    <li class="select-time">
                                        <label>创建时间: </label>
                                        <input type="text" class="time-input" id="startTime" placeholder="开始时间"
                                               name="params[createdBegin]"/>
                                        <span>-</span>
                                        <input type="text" class="time-input" id="endTime" placeholder="结束时间"
                                               name="params[createdEnd]"/>
                                    </li>
                                    <li style="float: right; margin-right: 45px">
                                        <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()">
                                            <i class="fa fa-search"></i>&nbsp;搜索
                                        </a>
                                        <a class="btn btn-warning btn-rounded btn-sm"
                                           onclick="$.form.reset('receiptHeader-form')">
                                            <i class="fa fa-refresh"></i>&nbsp;重置
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </form>
                    </div>
                    <div class="col-sm-12 select-table">
                        <table id="bootstrap-table" data-mobile-responsive="true"
                               class="table table-bordered table-hover">
                        </table>
                    </div>
                </div>

                <div class="tab-pane fade" id="tabDetail">
                    <table id="bootstrap-table1" data-mobile-responsive="true"
                           class="table table-bordered table-hover">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    let prefix = ctx + "receipt/receiptHeaderHistory";
    let prefix1 = ctx + "receipt/receiptDetailHistory";
    let editFlag = [[${@permission.hasPermi('receipt:receiptHeader:edit')}]];
    let removeFlag = [[${@permission.hasPermi('receipt:receiptHeader:remove')}]];
    let receiptTypes = [[${@receiptTypeService.getType()}]];
    let receiptHeaderStatus = [[${@dict.getType('receiptHeaderStatus')}]];
    let supplier = [[${@SupplierService.getCode()}]];
    let addFlag = [[${@permission.hasPermi('receipt:receiptHeader:add')}]];
    $(function () {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            modalName: "入库历史",
            search: false,
            sortName: "id",
            sortOrder: "desc",
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'code',
                    title: '入库单编码'
                },
                {
                    field: 'referCode',
                    title: '上游单号'
                },
                {
                    field: 'receiptType',
                    title: '入库类型',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        $.each(receiptTypes, function (index, dict) {
                            if (dict.code == value) {
                                actions.push("<span class='badge badge-info'>" + dict.name + "</span>");
                                return false;
                            }
                        });
                        return actions.join('');
                    }
                },
                {
                    field: 'totalQty',
                    title: '总数量'
                },
                {
                    field: 'totalLines',
                    title: '总行数'
                },
                {
                    field: 'remark',
                    title: '备注',
                    visible: false
                },
                {
                    field: 'firstStatus',
                    title: '头状态',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(receiptHeaderStatus, value);
                    }
                },
                {
                    field: 'lastStatus',
                    title: '尾状态',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(receiptHeaderStatus, value);
                    }
                },
                {
                    field: 'created',
                    title: '创建时间',
                },
                {
                    field: 'createdBy',
                    title: '创建用户',
                },
                {
                    field: 'lastUpdated',
                    title: '最后修改时间',
                    sortable: true,
                    visible: false
                },
                {
                    field: 'lastUpdatedBy',
                    title: '更新用户',
                    visible: false
                }]
        };
        $.table.init(options);
    });

    $("#bootstrap-table1").bootstrapTable({
        // url: detailPrefix + "/list",
        createUrl: prefix1 + "/add",
        updateUrl: prefix1 + "/edit/{id}",
        removeUrl: prefix1 + "/remove",
        sortable: true, //排序
        showRefresh: false, //刷新
        showToggle: false, //视图切换
        clickToSelect: true,
        showColumns: false, //列选择
        showExport: false, //导出
        exportDataType: "all",  //导出类型basic', 'all', 'selected'.当前页、所有数据、选中数据
        modalName: "入库明细",
        sortName: "lastUpdated",
        sortOrder: "desc",
        iconSize: "outline",
        toolbar: "#toolbar1",
        contentType: "application/x-www-form-urlencoded",
        pagination: true,   // 是否显示分页(*)
        pageNumber: 1,                                      // 初始化加载第一页,默认第一页
        pageSize: 50,                                       // 每页的记录行数(*)
        pageList: [10, 25, 50, 100],                             // 可供选择的每页的行数(*)
        onRefresh: function () {
            loadDetail();
        },
        columns: [
            {
                checkbox: true
            },
            {
                field: 'receiptCode',
                title: '入库单编码'
            },
            {
                field: 'materialCode',
                title: '物料编码'
            },
            {
                field: 'materialName',
                title: '物料名称'
            },
            {
                field: 'materialSpec',
                title: '物料规格'
            },
            {
                field: 'materialUnit',
                title: '物料单位'
            },
            /*{
                field: 'auxiliaryUnit',
                title: '辅单位'
            },*/
            {
                field: 'supplierCode',
                title: '供应商',
                visible: true,
                formatter: function (value, row, index) {
                    let actions = [];
                    $.each(supplier, function (index, item) {
                        if (item.code === value) {
                            actions.push("<span class='badge badge-info'>" + item.name + "</span>");
                            return false;
                        }
                    });
                    return actions.join('');
                },
            },
            {
                field: 'batch',
                title: '批次'
            },
            {
                field: 'tracingNo',
                title: '追溯码'
            },
            {
                field: 'totalQty',
                title: '总数量'
            },
            {
                field: 'openQty',
                title: '已收数量'
            },
            {
                field: 'inventorySts',
                title: '库存状态'
            },
            {
                field: 'created',
                title: '创建时间'
            },
            {
                field: 'createdBy',
                title: '创建用户'
            },
            {
                field: 'lastUpdated',
                title: '最后修改时间'
            },
            {
                field: 'lastUpdatedBy',
                title: '更新用户'
            }]
    });

    /* 入库单列表-详细 */
    function detail(id, code) {
        receiptId = id;
        receiptCode = code;
        $("#myTab li").removeClass("active");
        $("#tabHeader").removeClass("in active");
        $("#myTab li:eq(1)").addClass("active");
        $("#tabDetail").addClass("in active");
        loadDetail();
    }

    function loadDetail() {
        $.ajax({
            url: ctx + 'receipt/receiptDetailHistory/list',
            type: "post",
            data: {
                receiptId: receiptId,
            },
            success: function (value) {
                $("#bootstrap-table1").bootstrapTable('load', value.data);
            }
        });
    }

    function createtable(url) {
        $("#tabDetail").children().remove();
        $("#myTab li").removeClass("active");
        var height = $(document).height() - 100 + 'px';
        var str = '<iframe class="huaheng_iframe" name="iframe" width="100%" height="' + height + '" src="' + url + '" frameborder="0" data-id="' + url + '" seamless></iframe>';
        $("#tabDetail").append(str);
        $(".tab-pane").removeClass("in active");
        $("#myTab li:eq(1)").addClass("active");
        $("#tabDetail").addClass("in active");
    }
</script>
</body>
</html>