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

    .selected-row {
        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;
        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: 200px;
        overflow-y: auto;
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }

    #table thead th {
        position: sticky;
        top: 0;
        background-color: #f5f5f5;
        z-index: 1;
    }

    .tray-btn {
        padding: 5px 10px;
        margin-right: 8px;
        border: 1px solid #ccc;
        background-color: white;
        color: #000;
        cursor: pointer;
        border-radius: 4px;
    }

    .tray-btn.active {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }

    .remove-btn {
        color: red;
        cursor: pointer;
        margin-left: 10px;
    }

    #tableBody tr {
        cursor: pointer;
    }

    #tableBody tr:hover {
        background-color: #f0f0f0;
    }

    #tableBody1 tr td {
        padding: 8px;
    }

    .total-row {
        font-weight: bold;
        background-color: #f5f5f5;
    }

    .tray-count-select {
        width: 80px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .layer-height-select {
        width: 80px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .quantity-input.invalid {
        border-color: red;
        background-color: #ffeeee;
    }

    .items-per-box {
        width: 80px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .unit-select {
        width: 80px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
</style>

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <fieldset style="width: 1280px;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:1280px;margin:10px 10px 0;padding:10px;border:solid thin #c0c0c0">
        <legend style="padding:0;margin:0">打托选择列表</legend>
        <div style="margin-bottom:10px">
            <input type="text" id="searchInput" placeholder="请输入关键字搜索..." style="width:300px;height:35px">
            <button type="button" id="searchBtn" className="btn btn-primary" style="height:34px">查询</button>
            <button id="sadBtn" class="btn btn-success">
                <i class="fas fa-plus"></i> 新增产品
            </button>
        </div>

        <div id="table-container">
            <table id="table" 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:1280px;margin:10px 10px 0;padding:10px;border:solid thin #c0c0c0">
        <legend style="padding:0;margin:0">打托选品列表</legend>
        <div id="table-container1">
            <table id="table1" style="width:100%;border-collapse:collapse">
                <thead>
                <tr>
                    <th style="width: 3%">序号</th>
                    <th style="width: 15%">产品名称</th>
                    <th style="width: 7%">可发数量</th>
                    <th style="width: 4%">每箱个数</th>
                    <th style="width: 4%">单位</th>
                    <th style="width: 4%">打托数</th>
                    <th style="width: 4%">层高</th>
                    <th style="width: 9%">实际发货数量</th>
                    <th style="width: 15%">备注</th>
                    <th style="width: 4%">操作</th>
                </tr>
                </thead>
                <tbody id="tableBody1"></tbody>
                <tfoot id="tableFooter1" style="display:none">
                <tr className="total-row">
                    <td colSpan="3">合计</td>
                    <td></td>
                    <td></td>
                    <td id="totalQuantity">0</td>
                    <td colSpan="2"></td>
                </tr>
                </tfoot>
            </table>
        </div>
    </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>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<script>
    let currentPage = 1;
    let limit = 10;
    let total = 0;
    let selectedRow = null;
    let selectedProducts = [];

    window.selectRow = function (row) {
        if (selectedRow) {
            $(selectedRow).removeClass('selected-row');
        }
        $(row).addClass('selected-row');
        selectedRow = row;
    };

    function addToShipment(row) {
        if ($(row).data('remaining_quantity') == 0) {
            layer.msg('库存数量为空！', {icon: 2});
            return;
        }

        const rowData = {
            gdbh: $(row).data('gdbh'),
            order_ddbh: $(row).data('order_ddbh'),
            cpbm: $(row).data('cpbm'),
            cpmc: $(row).data('cpmc'),
            remaining_quantity: $(row).data('remaining_quantity'),
            tray_count: 18,
            layer_height: '1.35',
            items_per_box: '20',  // 默认每箱个数
            unit: '套',          // 默认单位
            remark: ''
        };

        const exists = selectedProducts.some(item => item.gdbh === rowData.gdbh);
        if (exists) {
            layer.msg('该产品已添加到本次配货中！', {icon: 2});
            return;
        }

        selectedProducts.push(rowData);
        renderShipmentTable();
    }

    function removeFromShipment(index) {
        selectedProducts.splice(index, 1);
        renderShipmentTable();
    }

    function calculateTotalQuantity() {
        return selectedProducts.reduce((sum, product) => {
            const quantity = parseFloat(product.actual_quantity);
            return sum + (isNaN(quantity) ? 0 : quantity);
        }, 0);
    }

    function validateQuantityInput(input, maxValue) {
        const value = input.val().trim();
        const numericValue = parseFloat(value);

        if (value !== '' && isNaN(numericValue)) {
            input.addClass('invalid');
            layer.tips('请输入有效数字', input, {tips: [1, '#FF5722']});
            return false;
        }

        if (numericValue > maxValue) {
            input.addClass('invalid');
            layer.tips(`不能超过${maxValue}`, input, {tips: [1, '#FF5722']});
            return false;
        }

        input.removeClass('invalid');
        return true;
    }

    function renderShipmentTable() {
        const tbody = $('#tableBody1');
        tbody.empty();

        if (selectedProducts.length === 0) {
            tbody.append('<tr><td colspan="10" style="text-align:center;">暂无配货数据</td></tr>');
            $('#tableFooter1').hide();
            return;
        }

        selectedProducts.forEach((product, index) => {
            // 初始化时确保 actual_quantity 有值
            if (product.actual_quantity === undefined || product.actual_quantity === '') {
                product.actual_quantity = product.remaining_quantity;
            }

            const tr = $(`
            <tr>
                <td>${index + 1}</td>
                <td>${product.cpmc}</td>
                <td>${product.remaining_quantity}</td>
                <td>
                    <input type="text"
                           class="items-per-box"
                           data-index="${index}"
                           value="${product.items_per_box || '20'}"
                           list="items-per-box-list"
                           style="width:80px">
                    <datalist id="items-per-box-list">
                        <option value="20">
                        <option value="24">
                        <option value="32">
                        <option value="40">
                        <option value="42">
                        <option value="48">
                        <option value="60">
                        <option value="72">
                        <option value="70">
                        <option value="80">
                        <option value="96">
                        <option value="108">
                        <option value="240">
                    </datalist>
                </td>
                <td>
                    <select class="unit-select" data-index="${index}">
                        <option value="套" ${product.unit === '套' ? 'selected' : ''}>套</option>
                        <option value="张" ${product.unit === '张' ? 'selected' : ''}>张</option>
                        <option value="个" ${product.unit === '个' ? 'selected' : ''}>个</option>
                    </select>
                </td>
                <td>
                    <select class="tray-count-select" data-index="${index}">
                        <option value="18" ${product.tray_count == 18 ? 'selected' : ''}>18</option>
                        <option value="24" ${product.tray_count == 24 ? 'selected' : ''}>24</option>
                    </select>
                </td>
                <td>
                    <select class="layer-height-select" data-index="${index}">
                        <option value="1.35" ${product.layer_height == '1.35' ? 'selected' : ''}>1.35</option>
                        <option value="1.05" ${product.layer_height == '1.05' ? 'selected' : ''}>1.05</option>
                    </select>
                </td>
                <td>
                    <input type="text" class="quantity-input" data-index="${index}"
                           value="${product.actual_quantity || ''}"
                           placeholder="" style="width:100%"
                           max="${product.remaining_quantity}">
                </td>
                <td><input type="text" class="remark-input" data-index="${index}" value="${product.remark || ''}" placeholder="请输入备注" style="width:100%"></td>
                <td><span class="remove-btn" onclick="removeFromShipment(${index})">移除</span></td>
            </tr>
        `);
            tbody.append(tr);
        });

        $('#tableFooter1').show();
        $('#totalQuantity').text(calculateTotalQuantity());

        $('.tray-count-select').off('change').on('change', function () {
            const index = $(this).data('index');
            selectedProducts[index].tray_count = $(this).val();
        });

        $('.layer-height-select').off('change').on('change', function () {
            const index = $(this).data('index');
            selectedProducts[index].layer_height = $(this).val();
        });

        $('.items-per-box').off('input').on('input', function () {
            const index = $(this).data('index');
            selectedProducts[index].items_per_box = $(this).val();
        });

        $('.unit-select').off('change').on('change', function () {
            const index = $(this).data('index');
            selectedProducts[index].unit = $(this).val();
        });

        $('.remark-input').off('input').on('input', function () {
            const index = $(this).data('index');
            selectedProducts[index].remark = $(this).val();
        });

        $('.quantity-input').off('input').on('input', function () {
            const index = $(this).data('index');
            const input = $(this);
            const maxValue = parseFloat(selectedProducts[index].remaining_quantity);

            if (!validateQuantityInput(input, maxValue)) return;

            selectedProducts[index].actual_quantity = input.val().trim() === '' ? '' : parseFloat(input.val());
            $('#totalQuantity').text(calculateTotalQuantity());
        });
    }

    function loadData(page = 1, keyword = '') {
        $.ajax({
            method: "GET",
            url: "/qcode_add/product",
            data: {page, 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 (data.length === 0) {
                    tbody.append('<tr><td colspan="7">无数据</td></tr>');
                    return;
                }

                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', () => 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', () => loadData(i, keyword));
            wrapper.append(btn);
        }

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

    $(function () {
        loadData();

        $('#searchBtn').on('click', function (e) {
            e.preventDefault();
            loadData(1, $('#searchInput').val().trim());
        });

        $('#searchInput').on('keypress', function (e) {
            if (e.which === 13) {
                loadData(1, $(this).val().trim());
            }
        });

        $(document).on('click', '#tableBody tr', function () {
            addToShipment(this);
        });

        $('#sadBtn').on('click', function (e) {
            e.preventDefault();
            const generateRowHtml = (index) => `
                <tr data-row="${index}">
                    <td><input type="text" name="order_ddbh" class="form-control" required /></td>
                    <td><input type="text" name="gdbh" class="form-control" required /></td>
                    <td><input type="text" name="cpbm" class="form-control" required /></td>
                    <td><input type="text" name="cpmc" class="form-control" required /></td>
                    <td><input type="number" name="sl" class="form-control" min="1" required /></td>
                    <td>
                        <button type="button" class="btn btn-success btn-xs add-row"><i class="fa fa-plus"></i></button>
                        <button type="button" class="btn btn-danger btn-xs remove-row"><i class="fa fa-minus"></i></button>
                    </td>
                </tr>
            `;

            layer.open({
                type: 1,
                title: '新增入库记录',
                area: ['90%', '70%'],
                shadeClose: true,
                resize: true,
                maxmin: true,
                btn: ['加入选品列表', '取消'],
                content: `
                    <div style="padding:20px 30px">
                        <table class="table table-bordered" id="productTable">
                            <thead>
                                <tr>
                                    <th>销售订单号</th>
                                    <th>工单编号</th>
                                    <th>成品编码</th>
                                    <th>成品名称</th>
                                    <th>入库数</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>${generateRowHtml(0)}</tbody>
                        </table>
                    </div>
                `,
                success: function (layero, index) {
                    $(layero).on('click', '.add-row', function () {
                        $('#productTable tbody').append(generateRowHtml($('#productTable tbody tr').length));
                    });

                    $(layero).on('click', '.remove-row', function () {
                        if ($('#productTable tbody tr').length > 1) {
                            $(this).closest('tr').remove();
                        } else {
                            layer.msg('至少保留一行', {icon: 2});
                        }
                    });
                },
                yes: function (index) {
                    const newProducts = [];
                    let isValid = true;

                    $('#productTable tbody tr').each(function () {
                        const rowData = {};
                        let rowValid = true;

                        $(this).find('[required]').each(function () {
                            const val = $(this).val().trim();
                            if (!val) {
                                layer.tips('此项为必填项', $(this), {tips: [1, '#FF5722']});
                                isValid = rowValid = false;
                                return false;
                            }
                            rowData[$(this).attr('name')] = val;
                        });

                        if (rowValid) {
                            rowData.remaining_quantity = rowData.sl;
                            rowData.total_chu_quantity = 0;
                            rowData.tray_count = 18;
                            rowData.layer_height = '1.35';
                            rowData.items_per_box = '20';
                            rowData.unit = '个';
                            rowData.isNew = true;
                            newProducts.push(rowData);
                        }
                    });

                    if (!isValid || newProducts.length === 0) {
                        if (newProducts.length === 0) layer.msg('请至少填写一行有效数据', {icon: 2});
                        return;
                    }

                    newProducts.forEach(product => {
                        if (!selectedProducts.some(item => item.gdbh === product.gdbh)) {
                            selectedProducts.push({
                                gdbh: product.gdbh,
                                order_ddbh: product.order_ddbh,
                                cpbm: product.cpbm,
                                cpmc: product.cpmc,
                                remaining_quantity: product.remaining_quantity,
                                total_chu_quantity: product.total_chu_quantity,
                                tray_count: product.tray_count,
                                layer_height: product.layer_height,
                                items_per_box: product.items_per_box,
                                unit: product.unit,
                                isNew: true,
                                remark: ''
                            });
                        }
                    });

                    layer.msg(`成功添加 ${newProducts.length} 个产品到选品列表`, {icon: 1});
                    layer.close(index);
                    renderShipmentTable();
                }
            });
        });

        $('#submit').off('click').on('click', function (e) {
            e.preventDefault();

            if (selectedProducts.length === 0) {
                layer.msg('请至少选择一个产品添加到打托选品列表！', {icon: 2});
                return false;
            }

            let allValid = true;
            $('.quantity-input').each(function () {
                const index = $(this).data('index');
                if (!validateQuantityInput($(this), parseFloat(selectedProducts[index].remaining_quantity))) {
                    allValid = false;
                }
            });

            if (!allValid) {
                layer.msg('请检查实际发货数量输入是否正确', {icon: 2});
                return false;
            }

            $('.quantity-input').each(function () {
                const index = $(this).data('index');
                selectedProducts[index].actual_quantity = $(this).val().trim() === '' ? '' : parseFloat($(this).val());
            });

            $('.remark-input').each(function () {
                const index = $(this).data('index');
                selectedProducts[index].remark = $(this).val() || '';
            });

            $('.items-per-box').each(function () {
                const index = $(this).data('index');
                selectedProducts[index].items_per_box = $(this).val() || '20';
            });

            $('.unit-select').each(function () {
                const index = $(this).data('index');
                selectedProducts[index].unit = $(this).val() || '个';
            });

            const newProducts = selectedProducts.filter(p => p.isNew);
            const postData = {
                company_name: $('#c-company_name').val(),
                postcode: $('#c-postcode').val(),
                mobile: $('#c-mobile').val(),
                company_address: $('#c-company_address').val(),
                printer_code: $('#c-printer_code').val(),
                products: selectedProducts.map(p => ({
                    ...p,
                    remark: p.remark || '',
                    actual_quantity: p.actual_quantity || p.remaining_quantity,
                    tray_count: p.tray_count || 18,
                    layer_height: p.layer_height || '1.35',
                    items_per_box: p.items_per_box || '20',
                    unit: p.unit || '套'
                })),
                newProducts: newProducts.map(p => ({
                    order_ddbh: p.order_ddbh,
                    gdbh: p.gdbh,
                    cpbm: p.cpbm,
                    cpmc: p.cpmc,
                    sl: p.remaining_quantity,
                    remark: p.remark || '',
                    actual_quantity: p.actual_quantity || p.remaining_quantity,
                    tray_count: p.tray_count || 18,
                    layer_height: p.layer_height || '1.35',
                    items_per_box: p.items_per_box || '20',
                    unit: p.unit || '个'
                }))
            };

            const loadingIndex = layer.msg('处理中...', {icon: 16, shade: 0.3, time: 0});

            if (newProducts.length > 0) {
                $.ajax({
                    method: "POST",
                    url: "Finishedproduct/finished",
                    contentType: "application/json",
                    data: JSON.stringify({data: postData.newProducts}),
                    success: function (res) {
                        if (res && res.code === 1) {
                            submitMainForm(postData, loadingIndex);
                        } else {
                            layer.close(loadingIndex);
                            layer.msg(res?.msg || '新增产品入库失败', {icon: 2});
                        }
                    },
                    error: function (xhr) {
                        layer.close(loadingIndex);
                        layer.msg('新增产品入库失败: ' + (xhr.responseJSON?.message || xhr.statusText || '请求失败'), {icon: 2});
                    }
                });
            } else {
                submitMainForm(postData, loadingIndex);
            }
        });

        function submitMainForm(postData, loadingIndex) {
            Fast.api.ajax({
                url: 'qcode_add/add_bach',
                type: 'POST',
                data: {row: JSON.stringify(postData)},
            }, function (data, res) {
                layer.close(loadingIndex);
                if (res.code == 1) {
                    window.location.reload();
                    Backend.api.addtabs('/deliver/index');
                    // layer.msg('保存成功', {icon: 1});
                    // window.location.reload();
                } else {
                    layer.msg(res.msg || '保存失败', {icon: 2});
                }
            }, function () {
                layer.close(loadingIndex);
                layer.msg('请求失败', {icon: 2});
            });
        }
    });
</script>