HGSRM/WMS-BS/NFine.Web/Areas/DHAY/Views/FullProcessTraceability/FullProcessTraceability.cshtml

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Index.cshtml";
}
<script src="~/Content/js/datepicker/WdatePicker.js"></script>

<style>
    /* 搜索区域样式 */
    .search {
        display: flex;
        align-items: center;
        margin-top: 10px;
    }

    /* 选项卡样式 - 核心修复：文字显示不全 + 尺寸调整 */
    .tab-container {
        position: absolute;
        top: 50px; /* 垂直位置可调整 */
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 2px;
    }

        .tab-container input[type="radio"] {
            display: none;
        }

        .tab-container label {
            /* 关键修复：保证文字完整显示 */
            min-width: 120px; /* 增大最小宽度（根据文字长度调整，如“成品信息”需至少120px） */
            padding: 6px 16px; /* 增加内边距，让文字更舒展（上下6px，左右16px） */
            height: 32px; /* 按钮总高度（包含内边距） */
            box-sizing: border-box;
            white-space: nowrap; /* 强制文字不换行 */
            overflow: visible; /* 确保文字不被隐藏 */
            /* 其他样式 */
            background-color: #f1f1f1;
            color: #333;
            border: 1px solid #ccc;
            border-bottom: none;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
            font-size: 14px;
            text-align: center;
            line-height:24px;
        }

        .tab-container input[type="radio"]:checked + label {
            background-color: #007BFF;
            color: white;
            border-color: #007BFF;
            z-index: 1;
        }

    /* 选项卡内容样式 */
    .tab-content {
        position: absolute;
        top: 100px; /* 根据布局调整 */
        left: 15px;
        right: 15px;
        bottom: 15px;
        border: 1px solid #ccc;
        background-color: #fff;
        padding: 0;
        display: none;
    }

    #tab1:checked ~ #tab-content1,
    #tab2:checked ~ #tab-content2 {
        display: block;
    }

    /* 表格样式 */
    .ui-jqgrid {
        width: 100% !important;
    }

        .ui-jqgrid .ui-jqgrid-bdiv {
            overflow-x: hidden !important;
        }
</style>

<script>
    var grid1Data = null;
    var grid2Data = null;

    $(function () {
        // 选项卡切换事件
        $('input[name="tabs"]').change(function () {
            $('.tab-content').hide();
            $('#' + $(this).attr('data-target')).show();
            resizeGrid();
        });

        // 默认选中第一个选项卡
        $('#tab1').prop('checked', true).trigger('change');

        // 窗口resize监听
        $(window).resize(function () {
            resizeGrid();
        });
    });

    function Seach() {
        var Code = $("#txt_Code").val();
        if (Code === '') {
            $.modalMsg("请输入单据号后查询！", "warning");
            return;
        }
        loadGridList();
        loadGridList2();
    }

    function loadGridList() {
        document.getElementById("tab-content1").innerHTML = ' <table id="gridList"></table>  ';//重置grid
        $("#gridList").dataGrid({
            url: "/DHAY/FullProcessTraceability/GetGridJson? " + Math.random(),
            postData: { queryJson: JSON.stringify({ Code: $("#txt_Code").val() }) },
            height: $(window).height() - 200,
            width: "100%",
            colModel: [
                { label: "主键", name: "ID", hidden: true, key: true },
                { label: '工单号', name: 'MOCode', width: 120, align: 'left' },
                { label: '料号', name: 'InvCode', width: 150, align: 'left' },
                { label: '料品名称', name: 'InvName', width: 80, align: 'left' },
                { label: '规格', name: 'InvStd', width: 80, align: 'left' },
                { label: '批号', name: 'BatchCode', width: 80, align: 'left' },
                { label: '入库日期', name: 'RKMtime', width: 80, align: 'left' },
                { label: '入库数量', name: 'RKQTY', width: 80, align: 'left' },
                { label: '发货日期', name: 'CKMtime', width: 80, align: 'left' },
                { label: '发货数量', name: 'CKQTY', width: 80, align: 'left' },
            ],
            shrinkToFit: true,
            autowidth: true,
            rowNum: 10000,
            autoScroll: true,
            sortname: 'MOCode',
            sortorder: "desc",
            viewrecords: true,
            multiselect: false,
            gridComplete: function () {
                resizeGrid();
            }
        });
    }

    function loadGridList2() {
        document.getElementById("tab-content2").innerHTML = ' <table id="gridList2"></table> ';//重置grid
        $("#gridList2").dataGrid({
            url: "/DHAY/FullProcessTraceability/GetGridJson2? " + Math.random(),
            postData: { queryJson: JSON.stringify({ Code: $("#txt_Code").val() }) },
            height: $(window).height() - 200,
            width: "100%",
            colModel: [
                { label: "主键", name: "ID", hidden: true, key: true },
                { label: '工单号', name: 'Level', hidden: true },
                { label: '料品名称', name: 'sort', hidden: true },
                { label: '序号', name: 'sortseq', width: 150, align: 'left' },
                { label: '料号', name: 'invcode', width: 100, align: 'left' },
                { label: '料品名称', name: 'InvName', width: 100, align: 'left' },
                { label: '规格', name: 'InvStd', width: 100, align: 'left' },
                { label: '批号', name: 'BatchCode', width: 100, align: 'left' },
              //  { label: '供应商批号', name: 'EATTRIBUTE3', width: 100, align: 'left' },
                { label: '领料数量', name: 'llqty', width: 100, align: 'left' },
              //  { label: '领料日期', name: 'MTIME', width: 100, align: 'left' },
                { label: '入库数量', name: 'RKQTY', width: 100, align: 'left' },
             //   { label: '入库日期', name: 'InDate', width: 100, align: 'left' },
                { label: '工单号', name: 'mocode', width: 100, align: 'left' },
                { label: '采购订单号', name: 'PODocNo', width: 100, align: 'left' },
                { label: '杂收单号', name: 'InCode', width: 100, align: 'left' },
            ],
            shrinkToFit: true,
            autowidth: true,
            rowNum: 10000,
            autoScroll: true,
            sortname: 'sort',
            sortorder: "asc",
            viewrecords: true,
            multiselect: false,
            gridComplete: function () {
                resizeGrid();
            }
        });
    }

    function resizeGrid() {
        var $activeTab = $('.tab-content:visible');
        var $grid = $activeTab.find('table');
        if ($grid.length) {
            $grid.jqGrid('setGridWidth', $activeTab.width());
        }
    }
</script>

<div class="topPanel" style="height:100px; position: relative;">
    <div class="toolbar">
        <div class="btn-group">
            <!-- 工具栏按钮（若有） -->
        </div>
    </div>
    <div class="search">
        <table>
            <tr>
                <td style="text-align:right;">
                    <label class="lglabel" for="txt_Code">&nbsp;&nbsp;&nbsp;单据号</label>：
                </td>
                <td>
                    <div class="input-group">
                        <input id="txt_Code" type="text" class="form-control" style="width: 100px;">
                    </div>
                </td>
                <td>
                    <span class="input-group-btn">
                        <button id="btn_search" type="button" class="btn btn-primary" onclick="Seach()">
                            <i class="fa fa-search"></i>
                        </button>
                    </span>
                </td>
            </tr>
        </table>
    </div>

    <!-- 选项卡容器（居中 + 文字完整） -->
    <div class="tab-container">
        <input type="radio" id="tab1" name="tabs" checked data-target="tab-content1">
        <label for="tab1">成品信息</label>
        <input type="radio" id="tab2" name="tabs" data-target="tab-content2">
        <label for="tab2">领料信息</label>
    </div>
</div>

<div class="tab-content" id="tab-content1" >
    <table id="gridList"></table>
</div>

<div class="tab-content" id="tab-content2">
    <table id="gridList2"></table>
</div>