未命名 FA6L0Vedit icon

创建者：
用户xxx
Fork(复制)
图库
图片、视频、音频、图标
下载
嵌入
BUG反馈
index.html
style.css
index.js
index.html
            
            <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能委托单生成系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .upload-section {
            border: 1px dashed #ccc;
            padding: 20px;
            margin-bottom: 20px;
            text-align: center;
        }
        .file-list {
            margin-top: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            font-size: 14px;
            border: 1px solid #ddd;
        }
        /* 表格样式 */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 1200px; /* 确保表格足够宽 */
}

/* 表头样式 */
th {
    background-color: #f2f2f2;
    position: sticky;
    top: 0;
    font-weight: normal;
    white-space: nowrap;
}

/* 冻结第一列（委托单编号） */
td:first-child, th:first-child {
    position: sticky;
    left: 0;
    background-color: white;
    z-index: 2;
    box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);
}

/* 冻结最后一列（操作列） */
td:last-child, th:last-child {
    position: sticky;
    right: 0;
    background-color: white;
    z-index: 2;
    box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1);
}

/* 表头冻结的特殊处理 */
th:first-child, th:last-child {
    z-index: 3;
    background-color: #f2f2f2;
}

/* 错误行样式 */
tr.error-row {
    background-color: #ffebee;
}
        #fileInput {
            display: none;
        }
        .file-item {
            margin: 5px 0;
            padding: 5px;
            background-color: #f9f9f9;
            border-radius: 3px;
        }
        .scroll-container {
            max-height: 600px;
            overflow-x: auto;
            overflow-y: auto;
            margin-top: 20px;
            border: 1px solid #ddd;
        }
        .urgent {
            color: #e53935;
            font-weight: bold;
        }
        .status-pending {
            color: #fb8c00;
        }
        .status-review {
            color: #3949ab;
        }
        .status-archived {
            color: #43a047;
        }
        
        /* 更新按钮样式 */
        .btn-upload {
            background-color: #2563EB;
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .btn-generate {
            background-color: #2563EB;
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }
        
        /* 操作按钮样式调整 */
        .btn-view, .btn-edit, .btn-print {
            background-color: transparent !important;
            color: #2563EB !important;
            border: none !important;
            padding: 4px 8px;
            margin: 2px;
            border-radius: 3px;
            cursor: pointer;
        }
        
        .btn-delete {
            background-color: transparent !important;
            color: #DC2626 !important;
            border: none !important;
            padding: 4px 8px;
            margin: 2px;
            border-radius: 3px;
            cursor: pointer;
        }
        
        /* 按钮悬停效果 */
        .btn-view:hover, .btn-edit:hover, .btn-print:hover {
            background-color: #EFF6FF !important;
        }
        
        .btn-delete:hover {
            background-color: #FEE2E2 !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- <>智能委托单生成系统</h1> -->
        
        <div class="upload-section">
            <h3>上传文件和图片</h3>
            <button class="btn-upload" onclick="document.getElementById('fileInput').click()">选择文件</button>
            <input type="file" id="fileInput" multiple onchange="handleFileSelect(event)">
            <div id="fileList" class="file-list"></div>
        </div>
        
        <button class="btn-generate" onclick="generateCommissionList()">智能生成委托单</button>
        
        <div id="commissionList" style="display: none;">
            <h2>检测任务列表</h2>
            <div class="scroll-container">
                <table>
                    <thead>
                        <tr>
                            <th>委托单编号</th>
                            <th>委托类型</th>
                            <th>委托人</th>
                            <th>专业组</th>
                            <th>产品/课题名称</th>
                            <th>样品信息</th>
                            <th>检测项目</th>
                            <th>是否加急</th>
                            <th>要求完成时间</th>
                            <th>状态</th>
                            <th>检测组</th>
                            <th>创建时间</th>
                            <th>创建人</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="commissionTableBody">
                        <!-- 动态生成的内容将在这里显示 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        // 存储上传的文件
        let uploadedFiles = [];
        
        // 处理文件选择
        function handleFileSelect(event) {
            const files = event.target.files;
            const fileListDiv = document.getElementById('fileList');
            fileListDiv.innerHTML = '';
            
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                uploadedFiles.push(file);
                
                const fileItem = document.createElement('div');
                fileItem.className = 'file-item';
                fileItem.textContent = `${file.name} (${formatFileSize(file.size)})`;
                fileListDiv.appendChild(fileItem);
                
                // 如果是图片，显示预览
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.style.maxWidth = '200px';
                        img.style.maxHeight = '200px';
                        img.style.marginTop = '5px';
                        fileItem.appendChild(img);
                    };
                    reader.readAsDataURL(file);
                }
            }
        }
        
        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
        // 生成委托单列表
        function generateCommissionList() {
            if (uploadedFiles.length === 0) {
                alert('请先上传文件！');
                return;
            }
            
            // 模拟从服务器获取的数据（根据用户上传的图片内容）
            const commissionData = [
                {
                    number: 'WT-20250523-002',
                    type: '内部',
                    requester: '管理员',
                    group: '超声检测',
                    project: '缺陷检测',
                    sampleInfo: '(TC420250102012,TC4,3),(TC420250102013,TC4,3)',
                    testItems: '超声波探伤',
                    urgent: '否',
                    deadline: '2026-04-30',
                    status: '待提交',
                    testGroup: '检测技术中心 (302)',
                    createTime: '2025-05-23 11:41:11',
                    creator: '系统',
                    warnings: []
                },
                {
                    number: 'WT-20250522-001',
                    type: '外部',
                    requester: '曹鹏',
                    group: '力学检测专业',
                    project: '718工程',
                    sampleInfo: '(TC420250102012,TC4,3),(TC420250102013,TC4,3)',
                    testItems: '拉伸强度，室温',
                    urgent: '是',
                    deadline: '2025-05-23',
                    status: '待提交',
                    testGroup: '力学性能检测专业',
                    createTime: '2025-05-22 09:20:30',
                    creator: '系统',
                    warnings: ['请填写完整的产品信息']
                },
                {
                    number: 'WT-20250522-001',
                    type: '化学',
                    requester: '',
                    group: '化学成分',
                    project: '',
                    sampleInfo: '液体样品，100ml',
                    testItems: '元素分析',
                    urgent: '否',
                    deadline: '2025-05-22',
                    status: '待提交',
                    testGroup: '',
                    createTime: '2025-05-22 09:20:30',
                    creator: '',
                    warnings: ['请填写委托人信息', '请填写检测组']
                },
                {
                    number: 'WT-20250520-002',
                    type: '力学',
                    requester: '',
                    group: '拉伸性能（室温）',
                    project: '',
                    sampleInfo: '(TC420250102012,TC4,3),(TC420250102013,TC4,3)',
                    testItems: '拉伸试验',
                    urgent: '否',
                    deadline: '2025-05-20',
                    status: '待提交',
                    testGroup: '',
                    createTime: '2025-05-20 16:38:00',
                    creator: '',
                    warnings: ['请填写委托人信息', '请填写产品/课题名称']
                }
            ];
            
            const tableBody = document.getElementById('commissionTableBody');
            tableBody.innerHTML = '';
            
            commissionData.forEach((item, index) => {
                const row = document.createElement('tr');
                if (item.warnings.length > 0) {
                    row.className = 'error-row';
                }
                
                // 处理状态显示
                let statusClass = '';
                if (item.status === '待提交') statusClass = 'status-pending';
                else if (item.status === '待审核') statusClass = 'status-review';
                else if (item.status === '归档') statusClass = 'status-archived';
                
                // 处理加急状态显示
                const urgentDisplay = item.urgent === '是' 
                    ? `<span class="urgent">${item.urgent}</span>` 
                    : item.urgent;
                
                row.innerHTML = `
                    <td>${item.number}</td>
                    <td>${item.type || '-'}</td>
                    <td>${item.requester || '-'}</td>
                    <td>${item.group || '-'}</td>
                    <td>${item.project || '-'}</td>
                    <td>${item.sampleInfo || '-'}</td>
                    <td>${item.testItems || '-'}</td>
                    <td>${urgentDisplay}</td>
                    <td>${item.deadline || '-'}</td>
                    <td class="${statusClass}">${item.status || '-'}</td>
                    <td>${item.testGroup || '-'}</td>
                    <td>${item.createTime}</td>
                    <td>${item.creator || '-'}</td>
                    <td>
                        <button class="btn-view" onclick="viewCommission('${item.number}')">查看</button>
                        <button class="btn-edit" onclick="editCommission('${item.number}')">编辑</button>
                        <button class="btn-delete" onclick="deleteCommission('${item.number}')">删除</button>
                        <button class="btn-print" onclick="printCommission('${item.number}')">打印</button>
                    </td>
                `;
                
                tableBody.appendChild(row);
            });
            
            document.getElementById('commissionList').style.display = 'block';
        }
        
        // 查看委托单
        function viewCommission(number) {
            alert(`正在查看委托单 ${number}`);
            // 实际应用中这里会打开查看详情页面
        }
        
        // 编辑委托单
        function editCommission(number) {
            alert(`正在编辑委托单 ${number}`);
            // 实际应用中这里会打开编辑表单
        }
        
        // 删除委托单
        function deleteCommission(number) {
            if (confirm(`确定要删除委托单 ${number} 吗？`)) {
                alert(`已删除委托单 ${number}`);
                // 实际应用中这里会发送请求到服务器删除数据
                generateCommissionList(); // 刷新列表
            }
        }
        
        // 打印委托单
        function printCommission(number) {
            alert(`正在打印委托单 ${number}`);
            // 实际应用中这里会打开打印预览
        }
    </script>
</body>
</html>
编辑器加载中
预览
控制台