ym.7in6.com/application/admin/view/qcode_add/index.html

<style>
    table tr th,table tr td {border: thin #ddd dashed;padding: 5px }
    .select2-container {
        width: 400px !important;
    }

    .select2-dropdown {
        width: 400px !important;
    }
    .select2-results__options {
        max-height: 200px;   /* 固定高度 */
        overflow-y: auto;    /* 超出时出现滚动条 */
    }
    .select2-container--default .select2-selection--single .select2-selection__clear{
        margin-top: -6px;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered{
        line-height: 35px;
    }
    .select2-container--default .select2-selection--single{
        width: 470px !important;
        height: 35px !important;
        line-height: 38px;
        padding: 4px 10px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    .select2-container--open .select2-dropdown--below{
        margin-top: -13px;
    }
    .selection{
        top: -13px;
    }
    /*table部分*/
    .selected-row {
        /*background-color: yellow !important;*/
        background-color: #ddefeb !important;
    }
    #pagination-wrapper {
        margin-top: 20px;
        font-family: Arial, sans-serif;
        text-align: center;
    }

    #pagination-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        gap: 16px; /* 控制 info 和按钮间距 */
        white-space: nowrap;
        overflow-x: auto; /* 小屏幕自动横向滚动，防止换行 */
    }

    #pagination-info {
        color: #444;
    }

    #pagination-controls {
        display: inline-flex;
        gap: 8px;
        flex-wrap: nowrap;
    }

    #pagination-controls button {
        padding: 6px 12px;
        border: 1px solid #ccc;
        background-color: #f8f8f8;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.2s ease;
    }

    #pagination-controls button:hover:not(:disabled) {
        background-color: #e0e0e0;
    }

    #pagination-controls button:disabled {
        background-color: #f0f0f0;
        cursor: not-allowed;
        color: #aaa;
    }

    #pagination-controls button.active {
        background-color: #007bff;
        color: white;
        font-weight: bold;
        border-color: #007bff;
    }
    #table-container {
        height: 300px; /* 你可以按需调整高度 */
        overflow-y: auto;
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }

    /* 让表头固定，表体滚动（可选进阶） */
    #table thead th {
        position: sticky;
        top: 0;
        background-color: #f5f5f5;
        z-index: 1;
    }
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <fieldset style="width: 1200px;margin:10px 10px 0px 10px ;padding: 10px 10px 0px 10px ;border:solid thin #c0c0c0">
        <legend style="padding: 0px;margin: 0px">生成厂商信息</legend>
        <div class="form-group">
            <label class="control-label col-xs-2 col-sm-1">生产厂商:</label>
            <div class="col-xs-2 col-sm-3">
                <input id="c-company_name" data-rule="required" disabled class="form-control" value="{$row['nickname']}" name="company_name" type="text">
            </div>
            <label class="control-label col-xs-2 col-sm-1">邮政编码:</label>
            <div class="col-xs-2 col-sm-3">
                <input id="c-postcode" data-rule="required" disabled class="form-control" value="{$row['postcode']}" name="postcode" type="text">
            </div>
            <label class="control-label col-xs-2 col-sm-1">电&nbsp;&nbsp;话:</label>
            <div class="col-xs-2 col-sm-3">
                <input id="c-mobile" data-rule="required;mobile" disabled class="form-control" value="{$row['mobile']}" name="mobile" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-2 col-sm-1">地&nbsp;&nbsp;&nbsp;&nbsp;址:</label>
            <div class="col-xs-2 col-sm-7">
                <input id="c-company_address" data-rule="required" disabled class="form-control" value="{$row['company_address']}" name="company_address" type="text">
            </div>
            <label class="control-label col-xs-2 col-sm-1">厂家编码:</label>
            <div class="col-xs-2 col-sm-3">
                <input id="c-printer_code" data-rule="required" disabled class="form-control" value="{$row['printer_code']}" name="company_address" type="text">
            </div>
        </div>
    </fieldset>

    <fieldset style="width: 1200px;margin:10px 10px 0px 10px ;padding: 10px 10px 0px 10px ;border: solid thin #c0c0c0">
        <legend style="padding: 0px;margin: 0px">产品信息</legend>
        <!-- 搜索栏 -->
        <div style="margin-bottom: 10px;">
            <input type="text" id="searchInput"  placeholder="请输入关键字搜索..." style="width: 300px;height: 35px; " />
            <button id="searchBtn"  class="btn btn-primary">搜索</button>
        </div>

        <!-- 表格容器 -->
        <div id="table-container">
        <table id="table" border="1" cellpadding="8" cellspacing="0" style="width: 100%;border-collapse: collapse;">
            <thead>
            <tr>
                <th>销售订单号</th>
                <th>工单编号</th>
                <th>产品名称</th>
                <th>结存数量</th>
            </tr>
            </thead>
            <tbody id="tableBody">

            </tbody>
        </table>
        </div>
        <!-- 分页控件 -->
        <div id="pagination-wrapper">
            <div id="pagination-bar">
                <div id="pagination-info">共 0 条记录，第 1 / 1 页</div>
                <div id="pagination-controls"></div>
            </div>
        </div>
    </fieldset>

    <fieldset style="width: 1200px;margin:10px 10px 0px 10px ;padding: 10px 10px 0px 10px ;border: solid thin #c0c0c0">
        <legend  style="padding: 0px;margin: 0px">托盘参数</legend>
        <table style="width: 100%;border: thin #ddd dashed;">
            <caption style="padding: 0px;margin: 0px">标签序列配置</caption>
            <tr>
                <th style="width: 40%">字段</th>
                <th>值</th>
            </tr>

            <tr>
                <td><span>生产批次号</span></td>
                <td style="padding: 5px 0px 0px 5px"><input type="text" disabled class="form-control" placeholder="选择产品信息获取" id="c-batch" name="batch" style="width: 360px;"></td>
            </tr>
            <tr>
                <td><span>销售订单号</span></td>
                <td style="padding: 5px 0px 0px 5px"><input type="text" disabled class="form-control" placeholder="选择产品信息获取" id="c-order_ddbh" name="order_ddbh" style="width: 360px;"></td>
            </tr>
            <tr>
                <td><span>工单编号</span></td>
                <td style="padding: 5px 0px 0px 5px"><input type="text" disabled class="form-control" placeholder="选择产品信息获取" id="c-gdbh" name="gdbh" style="width: 360px;"></td>
            </tr>
            <tr>
                <td><span>产品名称</span></td>
                <td style="padding: 5px 0px 0px 5px"><input type="text" disabled class="form-control" placeholder="选择产品信息获取" id="c-cpmc" name="cpmc" style="width: 360px;"></td>
            </tr>
            <tr>
                <td><span>结存数量</span></td>
                <td style="padding: 5px 0px 0px 5px"><input type="text" disabled class="form-control" placeholder="选择产品信息获取" id="c-sl" name="sl" style="width: 360px;"></td>
            </tr>
<!--            <tr>-->
<!--                <td><span>产品代号</span></td>-->
<!--                <td style="padding: 5px 0px 0px 5px"><input type="text" disabled class="form-control" id="c-cpdh" name="cpdh" style="width: 360px;"></td>-->
<!--            </tr>-->
            <tr class="xiang">
                <td><span>总数量（张）</span></td>
                <td style="padding: 5px 0px 0px 5px"><input type="text" name="number" id="c-number" data-rule="required"></td>
            </tr>
            <tr>
                <td><span>选择单位</span></td>
                <td style="padding: 5px 0px 0px 5px">
                    <select id="danwei" name="danwei" style="width: 200px;padding: 5px;">
                        <option value="1">张</option>
                        <!--<option value="2">卷</option>-->
                    </select>
                </td>
            </tr>
            <tr class="xiang">
                <td><span>一托盘多少箱（箱*层）</span></td>
                <td style="padding: 5px 0px 0px 5px">
                    <input type="text" id="tray_num"     oninput="calculateTotalBoxes()" style="width: 100px;" min="1" step="1" > 箱/层 ×
                    <input type="text" id="box_number"   oninput="calculateTotalBoxes()" style="width: 100px;"  min="1" step="1" > 层/托 =
                    <input type="text" id="total_boxes"  style="width: 100px;" disabled> 箱/托
                    <span style="color: red;font-size: 23px;"> *</span>
                </td>
            </tr>
            <tr>
                <td><span>每箱数（个或张）</span></td>
                <td style="padding: 5px 0px 0px 5px"><input type="text" id="c-small_num" disabled name="small_num" data-rule="required"></td>
            </tr>
            <tr>
                <td><span>每层箱数</span></td>
                <td style="padding: 5px 0px 0px 5px">
                    <input type="text" id="boxes_per_layer" name="boxes_per_layer" data-rule="required" disabled>
                </td>
            </tr>
            <tr>
                <td><span>每托层数</span></td>
                <td style="padding: 5px 0px 0px 5px">
                    <input type="text" id="layers_per_pallet" name="layers_per_pallet" data-rule="required" disabled>
                </td>
            </tr>
            <tr>
                <td><span>每托高度</span></td>
                <td style="padding: 5px 0px 0px 5px; position: relative;">
                    <input type="text" id="pallet_height" name="pallet_height"
                           style="width: 160px;" placeholder="" autocomplete="off">
                    <ul id="height-suggestions" style=" position: absolute;
                                top: 33px; left: 5px; width: 160px;
                                border: 1px solid #ccc; background: #fff; list-style: none;
                                margin: 0; padding: 0; display: none; z-index: 1000;">
                        <li style="padding: 5px; cursor: pointer;">0.995</li>
                        <li style="padding: 5px; cursor: pointer;">1.05</li>
                        <li style="padding: 5px; cursor: pointer;">1.35</li>
                    </ul>
                    <span style="color: red; font-size: 23px;"> *</span>
                </td>
            </tr>

            <tr>
                <td><span>托盘规格（例如：0.9 * 1.2）</span></td>
                <td style="padding: 5px 0px 0px 5px; position: relative;">
                    <div style="display: inline-block; position: relative;">
                        <input type="text" id="pallet_length" name="pallet_length" style="width:80px;" autocomplete="off">
                        <ul id="length-suggestions" style="
                                position: absolute;
                                top: 28px;
                                left: 0;
                                width: 80px;
                                border: 1px solid #ccc;
                                background: #fff;
                                list-style: none;
                                margin: 0;
                                padding: 0;
                                display: none;
                                z-index: 1000;">
                            <li style="padding: 5px; cursor: pointer;">0.9</li>
                            <li style="padding: 5px; cursor: pointer;">1.0</li>
                            <li style="padding: 5px; cursor: pointer;">1.1</li>
                        </ul>
                    </div>
                    &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    *
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <div style="display: inline-block; position: relative;">
                        <input type="text" id="pallet_width" name="pallet_width" style="width:80px;"   autocomplete="off">
                        <ul id="width-suggestions" style="
                                position: absolute;
                                top: 28px;
                                left: 0;
                                width: 80px;
                                border: 1px solid #ccc;
                                background: #fff;
                                list-style: none;
                                margin: 0;
                                padding: 0;
                                display: none;
                                z-index: 1000;">
                            <li style="padding: 5px; cursor: pointer;">1.1</li>
                            <li style="padding: 5px; cursor: pointer;">1.2</li>
                            <li style="padding: 5px; cursor: pointer;">1.3</li>
                        </ul>
                    </div>
                    <span style="color: red;font-size: 23px;"> *</span>
                </td>
            </tr>
            <tr>
                <td><span>大件（总托数）</span></td>
                <td style="padding: 5px 0px 0px 5px"><input type="text" id="c-box_num" name="box_num" ><span style="color: red;font-size: 23px;"> *</span></td>
            </tr>
            <tr>
                <td><span>生产日期</span></td>
                <td style="padding: 5px 0px 0px 5px">
                    <input class="" id="c-manufacture_date" value="{:date('Y-m-d')}" style="width: 180px;" name="manufacture_date" type="date" >
                    <span style="color: red;font-size: 23px;"> *</span>
                </td>
            </tr>
            <tr>
                <td><span>打码日期</span></td>
                <td style="padding: 5px 0px 0px 5px">
                    <input class="" type="date" id="c-print_date" style="width: 180px"  name="print_date" value="{:date('Y-m-d')}">
                    <span style="color: red;font-size: 23px;"> *</span>
                </td>
            </tr>
<!--            <tr>-->
<!--                <td><span>生产批次号</span></td>-->
<!--                <td>-->
<!--                    <div style="display: flex; align-items: center;">-->
<!--                        <input type="text" name="batch" id="c-batch" data-rule="required" disabled>-->
<!--                        &lt;!&ndash;                        <button type="button" id="reset_batch" style="margin-left: 10px;">重置批次号</button>&ndash;&gt;-->
<!--                        <span style="color: red; font-size: 23px; margin-left: 5px;">*</span>-->
<!--                    </div>-->
<!--                </td>-->
<!--            </tr>-->
            <tr>
                <td><span>大件开始流水号</span></td>
                <td>
                    <div style="display: flex; align-items: center;">
                        <input type="text" name="big_liushui" id="c-big_liushui" data-rule="required" disabled>
                        <button type="button" id="reset_liushui" style="margin-left: 10px;">重置流水号</button>
                        <span style="color: red; font-size: 23px; margin-left: 5px;">*</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td><span>大件重量(单位千克数值)有小数时保留2位小数</span></td>
                <td style="padding: 5px 0px 0px 5px"><input type="text" id="c-big_weight" name="big_weight" data-rule="required"><span style="color: red;font-size: 23px;"> *</span></td>
            </tr>
            <tr>
                <td><span>小件开始流水号</span></td>
                <td style="padding: 5px 0px 0px 5px"><input type="text" id="c-small_start_liushui" name="small_start_liushui" value="1" data-rule="required"><span style="color: red;font-size: 23px;"> *</span></td>
            </tr>
            <tr>
                <td><span>小件重量(单位克 数值)</span></td>
                <td style="padding: 5px 0px 0px 5px"><input type="text" id="c-small_weight" name="small_weight" data-rule="required"><span style="color: red;font-size: 23px;"> *</span></td>
            </tr>
        </table>
    </fieldset>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-5"></label>
        <div class="col-xs-12 col-sm-5"><br>
            <button type="submit" id="submit" class="btn btn-primary btn-embossed">保存</button></div>
    </div>
</form>
<!-- 引入 select2 样式 -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<!-- 引入 jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<!-- 引入 select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(function() {
        const $input = $('#pallet_height');
        const $list = $('#height-suggestions');

        // 显示下拉菜单
        $input.on('focus click', function () {
            $list.show();
        });

        // 点击选项
        $list.on('click', 'li', function () {
            $input.val($(this).text());
            $list.hide();
        });

        // 失焦隐藏
        $input.on('blur', function () {
            setTimeout(() => $list.hide(), 100); // 延迟防止刚点 li 时被关闭
        });
    });

        let currentPage = 1;
        let limit = 10;
        let total = 0;
        let selectedRow = null;

        // 绑定全局选择函数
        window.selectRow = function (row) {
        if (selectedRow) {
        $(selectedRow).removeClass('selected-row');
    }
        $(row).addClass('selected-row');
        selectedRow = row;

        const rowData = {
        gdbh: $(row).data('gdbh'),
        order_ddbh: $(row).data('order_ddbh'),
        // cpdh: $(row).data('cpdh'),
        cpmc: $(row).data('cpmc'),
        sl: $(row).data('sl')
    };

        console.log('选中的行数据:', rowData);

        $('#c-order_ddbh').val(rowData['order_ddbh']);
        $('#c-gdbh').val(rowData['gdbh']);
        // $('#c-cpdh').val(rowData['cpdh']);
        $('#c-cpmc').val(rowData['cpmc']);
        $('#c-sl').val(rowData['sl']);
        $('#c-batch').val(rowData['gdbh']);
    };

        function loadData(page = 1, keyword = '') {
        $.ajax({
            method: "GET",
            url: "/qcode_add/product", // 替换成你的接口路径
            data: {
                page: page,
                limit: limit,
                search: keyword
            },
            dataType: "json",
            success: function (res) {
                const data = res.data || [];
                total = res.total || 0;
                currentPage = res.page || 1;
                limit = res.limit || 10;

                const tbody = $('#tableBody');
                tbody.empty();
                selectedRow = null;

                if (!Array.isArray(data) || data.length === 0) {
                    tbody.append('<tr><td colspan="5">无数据</td></tr>');
                    return;
                }

                data.forEach(item => {
                    const tr = $(`
                        <tr onclick="selectRow(this)"
                            data-order_ddbh="${item.order_ddbh || ''}"
                            data-gdbh="${item.gdbh || ''}"
                            data-cpmc="${item.cpmc || ''}"
                            data-sl="${item.sl || ''}">
                            <td>${item.order_ddbh || ''}</td>
                            <td>${item.gdbh || ''}</td>
                            <td>${item.cpmc || ''}</td>
                            <td>${item.sl || ''}</td>
                        </tr>`);
                    tbody.append(tr);
                });

                renderPagination();
            }
        });
    }

    function renderPagination() {
        const pageCount = Math.ceil(total / limit);
        const info = $('#pagination-info');
        const wrapper = $('#pagination-controls');
        const keyword = $('#searchInput').val().trim();

        wrapper.empty();
        info.text(`共 ${total} 条记录，第 ${currentPage} / ${pageCount} 页`);

        // 上一页按钮
        const prev = $('<button type="button">上一页</button>').prop('disabled', currentPage <= 1);
        prev.on('click', (e) => {
            e.preventDefault();
            e.stopPropagation(); // 防止事件冒泡
            loadData(currentPage - 1, keyword);
        });
        wrapper.append(prev);

        // 页码按钮
        const start = Math.max(1, currentPage - 1);
        const end = Math.min(pageCount, currentPage + 1);
        for (let i = start; i <= end; i++) {
            const btn = $('<button type="button"></button>').text(i);
            if (i === currentPage) btn.addClass('active');
            btn.on('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                loadData(i, keyword);
            });
            wrapper.append(btn);
        }

        // 下一页按钮
        const next = $('<button type="button">下一页</button>').prop('disabled', currentPage >= pageCount);
        next.on('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            loadData(currentPage + 1, keyword);
        });
        wrapper.append(next);
    }


    //搜索按钮
    $('#searchBtn').on('click', function (e) {
        e.preventDefault();
        const keyword = $('#searchInput').val().trim();
        loadData(1, keyword);
    });
    //搜索input框
    $('#searchInput').on('keypress', function (e) {
        if (e.which === 13) {
            const keyword = $('#searchInput').val().trim();
            loadData(1, keyword);
        }
    });

    $(function () {
        loadData(1);
    });

    function allowNumberAndDot(input) {
        input.value = input.value.replace(/[^\d.]/g, '')    // 只保留数字和小数点
        .replace(/^\./g, '')      // 开头不能是小数点
        .replace(/\.{2,}/g, '.')  // 不能连续两个点
        .replace(/(\.\d*)\./g, '$1'); // 只允许一个小数点
    }


    //托盘规格
    $('#pallet_length, #pallet_width').on('input', function() {
        allowNumberAndDot(this);
    });
    // 绑定 pallet_length 的下拉选择
    $('#pallet_length').on('focus input', function () {
        $('#length-suggestions').show();
    });
    $('#length-suggestions li').on('click', function () {
        $('#pallet_length').val($(this).text());
        $('#length-suggestions').hide();
    });
    // 绑定 pallet_width 的下拉选择
    $('#pallet_width').on('focus input', function () {
        $('#width-suggestions').show();
    });
    $('#width-suggestions li').on('click', function () {
        $('#pallet_width').val($(this).text());
        $('#width-suggestions').hide();
    });
    // 点击空白区域时隐藏建议框
    $(document).on('click', function (e) {
        if (!$(e.target).closest('#pallet_length, #length-suggestions').length) {
            $('#length-suggestions').hide();
        }
        if (!$(e.target).closest('#pallet_width, #width-suggestions').length) {
            $('#width-suggestions').hide();
        }
    });

    //一托盘多少箱
    function calculateTotalBoxes() {
        const boxesPerLayer = parseInt(document.getElementById("tray_num").value) || 0;
        const layersPerTray = parseInt(document.getElementById("box_number").value) || 0;
        const totalBoxes = boxesPerLayer * layersPerTray;
        document.getElementById("total_boxes").value = totalBoxes;

        var trayNum1 = $('#tray_num').val();
        console.log('箱：', trayNum1);
        $('#boxes_per_layer').val(trayNum1 ? trayNum1 : '');

        var trayNum2 = $('#box_number').val();
        console.log('层：', trayNum2);
        $('#layers_per_pallet').val(trayNum2 ? trayNum2 : '');

        var trayNum3 = $('#total_boxes').val();
        console.log('总箱数：', trayNum3);
        $('#c-small_num').val(trayNum3 ? trayNum3 : '');
    }

</script>