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>
                <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-cpbm" name="cpbm" 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 style="display: none">
                <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 style="display: none">
                <td><span>发货数</span></td>
                <td style="padding: 5px 0px 0px 5px"><input type="text" disabled class="form-control" placeholder="选择产品信息获取" id="c-total_chu_quantity" name="total_chu_quantity" 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-remaining_quantity" name="remaining_quantity" style="width: 360px;"></td>
            </tr>

            <tr class="xiang">
                <td><span>本次打包数</span></td>
                <td style="padding: 5px 0px 0px 5px"><input type="text" oninput="validateAndCalculate()" 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>
                        <option value="3">张</option>
                    </select>
                </td>
            </tr>

            <tr class="xiang">
                <td><span>每一箱数量</span></td>
                <td style="padding: 5px 0px 0px 5px">
                    <select name="box_number" id="box_number" oninput="calculateTotalBoxes()" style="width:200px;padding: 5px">
                        <option value="1">========选择=========</option>
                        <option value="20">========20========</option>
                        <option value="25">========25========</option>
                        <option value="25">========40========</option>
                        <option value="50">========50========</option>
                        <option value="250">========250========</option>
                        <option value="500">========500========</option>
                        <option value="1000">=======1000========</option>
                        <option value="2000">=======2000========</option>
                        <option value="2500">=======2500========</option>
                        <option value="3000">=======3000========</option>
                        <option value="4000">=======4000========</option>
                        <option value="5000">=======5000========</option>
                        <option value="8000">=======8000========</option>
                        <option value="10000">=======10000========</option>
                        <option value="24000">=======24000========</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="tray_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-box_num" disabled name="box_num" ></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>每托高度（米/m）</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 class="" id="c-manufacture_date" value="{:date('Y-m-d')}" style="width: 180px;" name="manufacture_date" type="date" >
                </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')}">
                </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" disabled>
                        <button type="button" id="reset_liushui" style="margin-left: 10px;">重置流水号</button>
                    </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" ></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) {
        console.log('行数据:', 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'),
            cpbm: $(row).data('cpbm'),
            cpmc: $(row).data('cpmc'),
            sl: $(row).data('sl'),
            total_chu_quantity: $(row).data('total_chu_quantity'),
            remaining_quantity: $(row).data('remaining_quantity')
        };

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

        $('#c-batch').val(rowData['gdbh']);
        $('#c-order_ddbh').val(rowData['order_ddbh']);
        $('#c-cpbm').val(rowData['cpbm']);
        $('#c-cpmc').val(rowData['cpmc']);
        $('#c-sl').val(rowData['sl']);
        $('#c-total_chu_quantity').val(rowData['total_chu_quantity']);

        // 新增这段判断
        if (parseFloat(rowData['remaining_quantity']) >= 0) {
            $('#c-remaining_quantity').val(rowData['remaining_quantity']);
        } else {
            $('#c-remaining_quantity').val('');
        }
    };

    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;
                }

                $('#c-big_liushui').val(1)

                data.forEach(item => {
                const tr = $(`
                        <tr onclick="selectRow(this)"
                            data-order_ddbh="${item.order_ddbh}"
                            data-gdbh="${item.gdbh}"
                            data-cpbm="${item.cpbm}"
                            data-cpmc="${item.cpmc}"
                            data-sl="${item.sl}"
                            data-total_chu_quantity="${item.total_chu_quantity}"
                            data-remaining_quantity="${item.remaining_quantity}">

                            <td>${item.order_ddbh}</td>
                            <td>${item.gdbh}</td>
                            <td>${item.cpbm}</td>
                            <td>${item.cpmc}</td>
                            <td>${item.sl}</td>
                            <td>${item.total_chu_quantity}</td>
                            <td>${item.remaining_quantity}</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 validateAndCalculate() {
        let input = document.getElementById('c-number');
        let remainingInput = document.getElementById('c-remaining_quantity');
        let max = parseInt(remainingInput.value, 10);

        // 判断库存是否为空或非法
        if (!remainingInput.value || isNaN(max)) {
            input.value = '';
            layer.msg('库存数量为空，无法输入！', {icon: 2});
            return;
        }

        // 只允许输入数字（去除字母、负号、小数点等）
        input.value = input.value.replace(/[^\d]/g, '');
        let val = parseInt(input.value, 10);

        // 判断是否超出库存
        if (!isNaN(val) && val > max) {
            layer.msg('输入值不能超过库存数量！', {icon: 0});
            input.value = max;
        }

        // 调用原始计算逻辑
        calculateTotalBoxes();
    }


    //一托盘多少箱
    function calculateTotalBoxes() {
        // 获取用户输入
        const number = parseInt(document.getElementById("c-number").value || 0);         // 本次打包数
        const box_number = parseInt(document.getElementById("box_number").value || 0);   // 每一箱数量（个）
        const tray_num = parseInt(document.getElementById("tray_num").value || 0);       // 每层的箱数（箱/层）
        const tray_layer = parseInt(document.getElementById("tray_number").value || 0);  // 层数（层/托）
        // 计算每托盘能放多少箱
        const boxes_per_tray = tray_num * tray_layer;
        document.getElementById("total_boxes").value = boxes_per_tray; // 自动填充 total_boxes（箱/托）字段
        // 计算总箱数（向上取整）
        // const totalBoxCount = Math.ceil(number / box_number);
        const totalBoxCount = Math.ceil(number / box_number);
        // 计算托盘数（向上取整）
        const trayCount = Math.ceil(totalBoxCount / boxes_per_tray);

        console.log("本次打包数:", number);
        console.log("每箱数量:", box_number);
        console.log("总箱数:", totalBoxCount);
        console.log("每托盘箱数:", boxes_per_tray);
        console.log("本次托盘数:", trayCount);
        if(trayCount == 'Infinity'){
            document.getElementById("c-box_num").value = 0;
        }else{
            document.getElementById("c-box_num").value = trayCount;
            document.getElementById("c-small_num").value = totalBoxCount;
        }
        // 填入最终托盘数（大件数）
        // $('#c-box_num').val(trayCount);
    }

</script>