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{
        width: 400px !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;
    }
</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 class="form-group">
            <label for="c-product_name" class="control-label col-xs-2 col-sm-2">辅料名称（产品名称）</label>
            <div class="col-xs-2 col-sm-4">
                <select class="form-control select2" id="c-product_name" name="product_name">
                    <option value="">==================>选择<===================</option>
                    {volist name='product' id='vo'}
                    <option value="{$vo.product_code}" data-cpdh="{$vo.jjcp_cpdh}">{$vo.jjcp_cpmc}</option>
                    {/volist}
                </select>
            </div>
            <label class="control-label col-xs-2 col-sm-1">辅料代码</label>
            <div class="col-xs-2 col-sm-4">
                <input type="text" disabled class="form-control" id="c-product_code" name="product_code">
            </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">
                    <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" name="number" id="c-number" data-rule="required"></td>
            </tr>
            <tr class="xiang">
                <td><span>一托盘多少箱（箱*层）</span></td>
                <td style="padding: 5px 0px 0px 5px">
                    <input type="text" id="tray_num" placeholder="" style="width: 100px;" oninput="calculateTotalBoxes()" min="1" step="1"> 箱/层 ×
                    <input type="text" id="box_number"  placeholder="" style="width: 100px;" oninput="calculateTotalBoxes()" min="1" step="1"> 层/托 =
<!--                    <input type="text" id="boxes_per_layer" placeholder="箱数" style="width: 100px;" oninput="calculateTotalBoxes()" min="1" step="1"> 箱 ×-->
<!--                    <input type="text" id="layers_per_tray" placeholder="层数" style="width: 100px;" oninput="calculateTotalBoxes()" min="1" step="1"> 层 =-->
                    <input type="text" id="total_boxes" disabled placeholder="" style="width: 100px;" readonly> 箱/托
                </td>
            </tr>
            <!--            <tr class="xiang">-->
<!--                <td><span>一托盘多少箱(包)</span></td>-->
<!--                <td style="padding: 5px 0px 0px 5px">-->
<!--                    <select name="tray_num" id="tray_num" style="width: 200px;padding: 5px;">-->
<!--                        <option value="1">========>选择<========</option>-->
<!--                        <option value="5">========>5层<========</option>-->
<!--                        <option value="24">========>24箱<========</option>-->
<!--                        <option value="28">========>28箱<========</option>-->
<!--                        <option value="32">========>32箱<========</option>-->
<!--                        <option value="40">========>40箱<========</option>-->
<!--                        <option value="42">========>42箱<========</option>-->
<!--                        <option value="48">========>48箱<========</option>-->
<!--                        <option value="60">========>60箱<========</option>-->
<!--                        <option value="64">========>64箱<========</option>-->
<!--                        <option value="72">========>72箱<========</option>-->
<!--                        <option value="80">========>80箱<========</option>-->
<!--                        <option value="96">========>96箱<========</option>-->
<!--                        <option value="105">========>105箱<========</option>-->
<!--                        <option value="108">========>108箱<========</option>-->
<!--                        <option value="144">========>144箱<========</option>-->
<!--                        <option value="180">========>180箱<========</option>-->
<!--                        <option value="240">========>240箱<========</option>-->
<!--                    </select>-->
<!--                </td>-->
<!--            </tr>-->
<!--            <tr class="xiang">-->
<!--                <td><span>一托盘多少箱（箱*层）</span></td>-->
<!--                <td style="padding: 5px 0px 0px 5px">-->
<!--                    <select name="box_number" id="box_numbers" style="width:200px;padding: 5px">-->
<!--                        <option value="1">========选择=========</option>-->
<!--                        <option value="25">========25========</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>
                <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 class="juan">-->
<!--                <td><span>一托盘多少卷（3位）</span></td>-->
<!--                <td style="padding: 5px 0px 0px 5px"><input type="text" id="c-volume_num" name="volume_num" 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="boxes_per_layer" name="boxes_per_layer" data-rule="required" 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="layers_per_pallet" name="layers_per_pallet" data-rule="required" disabled>
                    <span style="color: red;font-size: 23px;"> *</span>
                </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" data-rule="required"
                           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">-->
<!--                    <input type="text" id="pallet_length" name="pallet_length" style="width:80px;" data-rule="required">-->
<!--                    &nbsp;-->
<!--                    *-->
<!--                    &nbsp;-->
<!--                    <input type="text" id="pallet_width" name="pallet_width" style="width:80px;" data-rule="required">-->
<!--                    <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;" placeholder="" 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;"  placeholder="" 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" 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 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 style="padding: 5px 0px 0px 5px"><input type="text" id="c-jjcp_cpdh" name="jjcp_cpdh" disabled data-rule="required"></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>
                        <button type="button" id="reset_batch" style="margin-left: 10px;">重置批次号</button>
                        <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>
    $(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 时被关闭
        });
    });

    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;
        console.log("totalBoxes".totalBoxes)
        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 : '');
    }

    $('#c-product_name').on('change', function () {
        // 获取选中的产品编码和产品代号
        var selectedOption = $(this).find('option:selected');
        var product_code = selectedOption.val();  // 获取产品编码
        var cpdh = selectedOption.data('cpdh');   // 获取产品代号

        // 设置产品编码和产品代号到对应的输入框
        $('#c-product_code').val(product_code);
        $('#c-jjcp_cpdh').val(cpdh);

        // 发起 AJAX 请求获取产品信息
        $.ajax({
            method: "GET",
            url: 'qcode_add/product',
            data: { product_code: product_code },
            success: function (data) {
                console.log(data)
                // 根据返回的模板值判断单位显示
                // if (data.temple === '07') {
                    $('#danwei').val(1);
                    $('.juan').hide();
                    $('.xiang').show();
                // } else {
                //     $('#danwei').val(2);
                //     $('.xiang').hide();
                //     $('.juan').show();
                // }

                // 设置流水号字段，如果为空则默认设置为 1
                $('#c-big_liushui').val(data.data.flow || 1);
                // 设置批次号字段，如果为空则生成当前年份的默认批次号
                if (data.data.bach === '' || data.data.bach === undefined) {
                    var currentYear = new Date().getFullYear();
                    var newValue = currentYear + '000000';
                    $('#c-batch').removeAttr('disabled').val(newValue);
                } else {
                    $('#c-batch').val(data.data.bach);
                    $('#c-batch').attr('disabled', true);
                }
            },
            error: function () {
                console.log("加载数据失败！");
            }
        });
    });

    $('#c-product_name').select2({
        placeholder: "请选择辅料名称",
        allowClear: true,
        width: 'style',
        dropdownAutoWidth: false,
        language: {
            noResults: function () {
                return "未查询到结果";
            }
        },
        matcher: function(params, data) {
            if ($.trim(params.term) === '') {
                return data;
            }

            if (typeof data.text === 'undefined') {
                return null;
            }

            // 模糊匹配：忽略大小写
            if (data.text.toLowerCase().indexOf(params.term.toLowerCase()) > -1) {
                return data;
            }

            return null;
        }
    });

</script>