liuhairui
/
ym.7in6.com


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>入库明细列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: "微软雅黑", sans-serif;
            padding: 20px;
            background: #f9f9f9;
        }

        h2 {
            margin-bottom: 20px;
            color: #333;
        }

        .search-container {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            align-items: center;
            flex-wrap: wrap;
        }

        #searchInput {
            padding: 8px 12px;
            width: 300px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 4px;
            flex: 1;
            min-width: 200px;
        }

        .btn {
            padding: 8px 16px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all 0.3s;
        }

        .btn-primary {
            background-color: #18bc9c;
            color: #fff;
            border-color: #18bc9c;
        }

        .btn-primary:hover {
            background-color: #15a589;
            border-color: #149078;
        }

        .btn-success {
            background-color: #5cb85c;
            color: #fff;
            border-color: #4cae4c;
        }

        .btn-success:hover {
            background-color: #4cae4c;
            border-color: #398439;
        }

        .scroll-table-wrapper {
            max-height: 500px;
            overflow-y: auto;
            border: 1px solid #ddd;
            background: white;
            margin-bottom: 15px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

        th, td {
            border: 1px solid #ddd;
            text-align: center;
            font-size: 14px;
            padding: 8px;
            word-break: break-word;
        }

        thead th {
            background: #f0f0f0;
            position: sticky;
            top: 0;
            z-index: 2;
            font-weight: bold;
        }

        tbody tr:hover {
            background: #f5f5f5;
        }

        tr.selected {
            background-color: #ddefeb !important;
        }

        #pagination-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 20px;
            font-size: 14px;
            gap: 10px;
        }

        #pagination-controls {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 5px;
        }

        #pagination-controls button {
            padding: 6px 12px;
            cursor: pointer;
            border: 1px solid #ddd;
            background: white;
            border-radius: 4px;
            transition: all 0.3s;
        }

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

        #pagination-controls button.active {
            background: #18bc9c;
            color: white;
            border-color: #18bc9c;
        }

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

        #pageSize {
            margin: 0 5px;
            padding: 5px;
            border-radius: 4px;
            border: 1px solid #ddd;
        }

        .ellipsis {
            padding: 6px 10px;
            color: #999;
        }

        .rotating {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .no-data {
            text-align: center;
            padding: 20px;
            color: #999;
            font-style: italic;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .search-container {
                flex-direction: column;
                align-items: stretch;
            }

            #searchInput {
                width: 100%;
            }

            #pagination-wrapper {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>
</head>
<body>

<h2>入库明细列表</h2>
<div class="search-container">
    <button class="btn btn-primary btn-refresh" title="刷新">
        <i class="fas fa-sync-alt"></i> 刷新
    </button>
    <input type="text" id="searchInput" placeholder="搜索产品名称、产品代号、工单编号..." />
    <button id="addBtn" class="btn btn-success">
        <i class="fas fa-plus"></i> 新增入库产品
    </button>
</div>

<div class="scroll-table-wrapper">
    <table id="productTable">
        <thead>
        <tr>
            <th style="width: 15%">销售订单号</th>
            <th style="width: 10%">工单编号</th>
            <th style="width: 10%">产品代号</th>
            <th style="width: 30%">产品名称</th>
            <th style="width: 10%">数量</th>
            <th style="width: 10%">入库日期</th>
        </tr>
        </thead>
        <tbody id="tableBody">
        <!-- JS 动态渲染数据 -->
        </tbody>
    </table>
</div>

<div id="pagination-wrapper">
    <div id="pagination-info">共 0 条记录，第 1 / 1 页</div>
    <div id="pagination-controls">
        每页显示：
        <select id="pageSize">
            <option value="10">10</option>
            <option value="20" selected>20</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select> 条
    </div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/layer/dist/layer.js"></script>
<script>
    $(function() {
        // 初始化变量
        let currentPage = 1;
        let searchKey = '';
        let pageSize = parseInt($('#pageSize').val());

        // 加载数据函数
        function loadData(page = 1, search = '') {
            pageSize = parseInt($('#pageSize').val());

            // 显示加载中
            const loadingIndex = layer.load(1, {
                shade: [0.1,'#fff']
            });

            $.ajax({
                method: "GET",
                url: "Finishedproduct/index",
                data: {
                    page: page,
                    search: search,
                    limit: pageSize
                },
                dataType: "json",
                success: function(res) {
                    layer.close(loadingIndex);

                    console.log('API响应数据:', res); // 调试用

                    // 确保res是对象且包含所需数据
                    if (!res || typeof res !== 'object') {
                        console.error('返回数据格式不正确:', res);
                        showNoData();
                        return;
                    }

                    const tbody = $('#tableBody');
                    tbody.empty();
                    $('#checkAll').prop('checked', false);

                    // 检查数据是否存在且是数组
                    if (Array.isArray(res.data) && res.data.length > 0) {
                        renderTableData(res.data);
                    } else if (Array.isArray(res) && res.length > 0) {
                        // 如果返回的是数组本身而不是包含data属性的对象
                        renderTableData(res);
                        res = {
                            data: res,
                            total: res.length,
                            page: page,
                            limit: pageSize
                        };
                    } else {
                        showNoData();
                    }

                    // 更新分页信息
                    const total = res.total || res.data?.length || 0;
                    renderPaginationInfo(total, page, pageSize);
                    renderPagination(total, page, pageSize);
                },
                error: function(xhr, status, error) {
                    layer.close(loadingIndex);
                    console.error("加载数据失败:", error, "状态:", status);
                    showNoData();
                    layer.msg('加载数据失败: ' + (xhr.responseJSON?.message || error), {icon: 2});
                }
            });
        }

        // 渲染表格数据
        function renderTableData(data) {
            const tbody = $('#tableBody');
            data.forEach(row => {
                tbody.append(`
                    <tr>
                        <td>${row.订单编号 || '-'}</td>
                        <td>${row.jjcp_gdbh || '-'}</td>
                        <td>${row.jjcp_cpdh || '-'}</td>
                        <td>${row.jjcp_cpmc || '-'}</td>
                        <td>${row.jjcp_sl || '0'}</td>
                        <td>${row.Sys_rq}</td>
                    </tr>
                `);
            });
        }

        // 显示无数据提示
        function showNoData() {
            $('#tableBody').html(`
                <tr>
                    <td colspan="7" class="no-data">
                        <i class="fas fa-info-circle"></i> 暂无数据
                    </td>
                </tr>
            `);
            $('#pagination-info').text('共 0 条记录，第 1 / 1 页');
            $('#pagination-controls').find('button, .ellipsis').not('#pageSize').remove();
        }

        // 渲染分页信息
        function renderPaginationInfo(total, page, limit) {
            const totalPages = Math.ceil(total / limit) || 1;
            $('#pagination-info').text(`共 ${total} 条记录，第 ${page} / ${totalPages} 页`);
        }

        // 渲染分页控件
        function renderPagination(total, current, limit) {
            const totalPages = Math.ceil(total / limit) || 1;
            current = parseInt(current);
            const container = $('#pagination-controls');
            container.find('button, .ellipsis').not('#pageSize').remove();

            // 添加分页按钮
            const addButton = (text, pageNum, isActive = false, isDisabled = false) => {
                const btn = $('<button>')
                    .text(text)
                    .prop('disabled', isDisabled)
                    .toggleClass('active', isActive)
                    .click(() => {
                        if (!isDisabled && pageNum !== current) {
                            currentPage = pageNum;
                            loadData(currentPage, searchKey);
                        }
                    });
                container.append(btn);
            };

            // 添加上一页按钮
            addButton('上一页', current - 1, false, current === 1);

            // 计算分页显示逻辑
            const pages = [];
            if (totalPages <= 5) {
                for (let i = 1; i <= totalPages; i++) pages.push(i);
            } else {
                if (current <= 3) {
                    pages.push(1, 2, 3, 4, 5);
                    if (totalPages > 5) pages.push('...', totalPages);
                } else if (current >= totalPages - 2) {
                    pages.push(1, '...');
                    for (let i = totalPages - 4; i <= totalPages; i++) pages.push(i);
                } else {
                    pages.push(1, '...', current - 1, current, current + 1, '...', totalPages);
                }
            }

            // 渲染页码按钮
            let prev = null;
            pages.forEach(p => {
                if (p === '...') {
                    if (prev !== '...') {
                        container.append('<span class="ellipsis">...</span>');
                        prev = '...';
                    }
                } else {
                    addButton(p, p, p === current);
                    prev = p;
                }
            });

            // 添加下一页按钮
            addButton('下一页', current + 1, false, current === totalPages);
        }

        // 行点击切换勾选 + 高亮
        $(document).on('click', '#productTable tbody tr', function(e) {
            if (!$(e.target).is('input, a, button')) {
                const checkbox = $(this).find('.row-check');
                checkbox.prop('checked', !checkbox.prop('checked'));
                $(this).toggleClass('selected');
            }
        });

        // 勾选框勾选联动行背景
        $(document).on('change', '.row-check', function() {
            $(this).closest('tr').toggleClass('selected', $(this).is(':checked'));
        });

        // 全选/取消全选
        $('#checkAll').on('change', function() {
            const checked = $(this).is(':checked');
            $('.row-check').prop('checked', checked);
            $('#productTable tbody tr').toggleClass('selected', checked);
        });

        // 搜索功能
        $('#searchInput').on('input', function() {
            searchKey = $(this).val().trim();
            currentPage = 1;
            loadData(currentPage, searchKey);
        });

        // 每页显示数量变化
        $('#pageSize').on('change', function() {
            currentPage = 1;
            loadData(currentPage, searchKey);
        });

        // 刷新按钮
        $(document).on('click', '.btn-refresh', function() {
            const $icon = $(this).find('i');
            $icon.addClass('rotating');

            currentPage = 1;
            $('#searchInput').val('');
            searchKey = '';
            loadData(currentPage);

            setTimeout(() => {
                $icon.removeClass('rotating');
            }, 1000);
        });

        // 新增入库产品
        $('#addBtn').on('click', function() {
            layer.open({
                type: 1,
                title: '新增入库记录',
                area: ['600px', 'auto'],
                shadeClose: true,
                resize: true,
                maxmin: true,
                btn: ['确认入库', '取消'],
                content: `
                    <form id="addForm" style="padding: 20px 30px;" class="form-horizontal">
                        <div class="form-group">
                            <label>销售订单号</label>
                            <input type="text" name="订单编号" class="form-control" required />
                        </div>
                        <div class="form-group">
                            <label>工单编号</label>
                            <input type="text" name="jjcp_gdbh" class="form-control" required />
                        </div>
                        <div class="form-group">
                            <label>产品代号</label>
                            <input type="text" name="jjcp_cpdh" class="form-control" required />
                        </div>
                        <div class="form-group">
                            <label>产品名称</label>
                            <input type="text" name="jjcp_cpmc" class="form-control" required />
                        </div>
                        <div class="form-group">
                            <label>数量</label>
                            <input type="number" name="jjcp_sl" class="form-control" min="1" required />
                        </div>
                    </form>
                `,
                yes: function(index) {
                    const formData = {};
                    let isValid = true;

                    $('#addForm').find('[required]').each(function() {
                        const $input = $(this);
                        const val = $input.val().trim();

                        if (!val) {
                            layer.tips('此项为必填项', $input, {tips: [1, '#FF5722']});
                            isValid = false;
                            return false;
                        }

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

                    if (!isValid) return;

                    // 添加系统日期
                    formData.Sys_rq = new Date().toLocaleDateString();

                    $.ajax({
                        method: "POST",
                        url: "Finishedproduct/finished",
                        contentType: "application/json",
                        data: JSON.stringify({ data: [formData] }),
                        success: function(res) {
                            if (res && res.code === 1) {
                                layer.msg('入库成功', {icon: 1});
                                layer.close(index);
                                loadData();
                            } else {
                                layer.msg(res?.msg || '入库失败', {icon: 2});
                            }
                        },
                        error: function(xhr) {
                            const errorMsg = xhr.responseJSON?.message || xhr.statusText || '请求失败';
                            layer.msg('入库失败: ' + errorMsg, {icon: 2});
                        }
                    });
                }
            });
        });

        // 初始加载数据 - 使用setTimeout确保所有资源加载完成
        setTimeout(() => {
            loadData();
        }, 100);
    });
</script>

</body>
</html>