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;
    }
</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 type="text" id="searchBtn" className="btn btn-primary" style="height: 34px">查询</button>
            &nbsp;
            <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: 1200px;margin:10px 10px 0px 10px ;padding: 10px 10px 0px 10px ;border: solid thin #c0c0c0">
        <legend style="padding: 0px;margin: 0px">打托选品列表</legend>
        <div id="table-container1">
            <table id="table1" style="width: 100%;border-collapse: collapse;">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>产品名称</th>
                    <th>应发货数量</th>
                    <th>实际发货数量</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tableBody1">
                </tbody>
                <tfoot id="tableFooter1" style="display: none;">
                <tr className="total-row">
                    <td colSpan="2">合计</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) {
        console.log($(row).data('remaining_quantity'))
        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'),
            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) => sum + (parseFloat(product.remaining_quantity) || 0), 0);
    }

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

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

        selectedProducts.forEach((product, index) => {
            const tr = $(`
                <tr>
                    <td>${index + 1}</td>
                    <td>${product.cpmc}</td>
                    <td>${product.remaining_quantity}</td>
                    <td><input type="text" class="quantity-input" data-index="${index}" value="${product.actual_quantity || product.remaining_quantity || ''}" placeholder="" style="width:100%;"></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());

        // 绑定备注输入事件 - 修正后的实现
        $('.remark-input').off('input').on('input', function () {
            const index = $(this).data('index');
            const remark = $(this).val();
            if (selectedProducts[index]) {
                selectedProducts[index].remark = remark;
            }
        });
    }

    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();
            const keyword = $('#searchInput').val().trim();
            loadData(1, keyword);
        });

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

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

        // 修改sadBtn的点击事件处理
        $('#sadBtn').on('click', function (e) {
            e.preventDefault();

            // 生成一行表格的HTML
            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() {
                        const tbody = $('#productTable tbody');
                        const newRowIndex = tbody.find('tr').length;
                        tbody.append(generateRowHtml(newRowIndex));
                    });

                    // 删除行事件
                    $(layero).on('click', '.remove-row', function() {
                        const row = $(this).closest('tr');
                        if ($('#productTable tbody tr').length > 1) {
                            row.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 $input = $(this);
                            const val = $input.val().trim();

                            if (!val) {
                                layer.tips('此项为必填项', $input, {tips: [1, '#FF5722']});
                                isValid = false;
                                rowValid = false;
                                return false; // 退出当前each循环
                            }

                            rowData[$input.attr('name')] = val;
                        });

                        if (rowValid) {
                            // 设置剩余数量等于入库数量（因为是新增产品）
                            rowData.remaining_quantity = rowData.sl;
                            rowData.total_chu_quantity = 0; // 发货数量初始为0
                            rowData.isNew = true; // 标记为新增产品
                            newProducts.push(rowData);
                        }
                    });

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

                    // 将新产品添加到选品列表
                    newProducts.forEach(product => {
                        // 检查是否已存在相同工单编号的产品
                        const exists = selectedProducts.some(item => item.gdbh === product.gdbh);
                        if (!exists) {
                            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,
                                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;
            }

            // 确保所有输入数据已更新
            $('.quantity-input').each(function() {
                const index = $(this).data('index');
                const value = $(this).val() || $(this).attr('value') || '';
                selectedProducts[index].actual_quantity = value;
            });

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

            // 分离新增产品和已有产品
            const newProducts = selectedProducts.filter(p => p.isNew);
            const existingProducts = 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
                })),
                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
                }))
            };

            // 显示加载中
            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);
                        const errorMsg = xhr.responseJSON?.message || xhr.statusText || '请求失败';
                        layer.msg('新增产品入库失败: ' + errorMsg, {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) {
                    layer.msg('保存成功', {icon: 1});
                    window.location.reload();
                    // 或者跳转到其他页面
                    // Backend.api.addtabs('deliver/apply');
                } else {
                    layer.msg(res.msg || '保存失败', {icon: 2});
                }
            }, function () {
                layer.close(loadingIndex);
                layer.msg('请求失败', {icon: 2});
            });
        }
    });


</script>