someone-oa/pc/common.js

// 通用工具函数库
window.CommonUtils = {
    // 显示消息提示（美化版）
    showMessage: function(message, type = 'success') {
        const messageDiv = document.createElement('div');
        messageDiv.className = 'common-message ' + (type === 'success' ? 'message-success' : 'message-error');
        
        const icon = type === 'success' ? '✓' : '✕';
        messageDiv.innerHTML = `
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 18px; font-weight: bold;">${icon}</span>
                <span>${message}</span>
            </div>
        `;
        
        const bgColor = type === 'success' ? '#67c23a' : '#f56c6c';
        
        messageDiv.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 12px 24px;
            background: ${bgColor};
            color: white;
            border-radius: 4px;
            z-index: 10000;
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
            animation: slideInRight 0.3s;
            font-size: 14px;
            min-width: 200px;
        `;
        document.body.appendChild(messageDiv);
        setTimeout(() => {
            messageDiv.style.animation = 'slideOutRight 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
            setTimeout(() => messageDiv.remove(), 300);
        }, 3000);
        
        // 添加动画样式
        if (!document.getElementById('message-animation-style')) {
            const style = document.createElement('style');
            style.id = 'message-animation-style';
            style.textContent = `
                @keyframes slideInRight {
                    from { transform: translateX(400px); opacity: 0; }
                    to { transform: translateX(0); opacity: 1; }
                }
                @keyframes slideOutRight {
                    from { transform: translateX(0); opacity: 1; }
                    to { transform: translateX(400px); opacity: 0; }
                }
            `;
            document.head.appendChild(style);
        }
    },

    // 创建弹窗
    createModal: function(title, content, onConfirm, onCancel) {
        const modal = document.createElement('div');
        modal.className = 'common-modal';
        modal.innerHTML = `
            <div class="modal-overlay"></div>
            <div class="modal-content">
                <div class="modal-header">
                    <h3>${title}</h3>
                    <span class="modal-close">&times;</span>
                </div>
                <div class="modal-body">
                    ${content}
                </div>
                <div class="modal-footer">
                    ${onCancel ? '<button class="btn btn-default modal-cancel">取消</button>' : ''}
                    <button class="btn btn-primary modal-confirm">确定</button>
                </div>
            </div>
        `;

        // 添加样式
        if (!document.getElementById('common-modal-style')) {
            const style = document.createElement('style');
            style.id = 'common-modal-style';
            style.textContent = `
                .common-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; }
                .modal-overlay { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
                .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
                    background: white; border-radius: 4px; min-width: 500px; max-width: 800px; max-height: 80vh; 
                    overflow-y: auto; box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
                .modal-header { padding: 16px 20px; border-bottom: 1px solid #e6e6e6; display: flex; 
                    justify-content: space-between; align-items: center; }
                .modal-header h3 { margin: 0; font-size: 16px; font-weight: 500; }
                .modal-close { cursor: pointer; font-size: 24px; color: #909399; }
                .modal-close:hover { color: #303133; }
                .modal-body { padding: 20px; max-height: 60vh; overflow-y: auto; }
                .modal-footer { padding: 16px 20px; border-top: 1px solid #e6e6e6; text-align: right; }
                .modal-footer .btn { margin-left: 12px; }
            `;
            document.head.appendChild(style);
        }

        document.body.appendChild(modal);

        // 关闭事件
        const close = () => {
            modal.style.opacity = '0';
            setTimeout(() => modal.remove(), 300);
        };

        modal.querySelector('.modal-close').onclick = close;
        if (onCancel) {
            modal.querySelector('.modal-cancel').onclick = close;
        }
        modal.querySelector('.modal-overlay').onclick = close;
        modal.querySelector('.modal-confirm').onclick = () => {
            if (onConfirm && onConfirm() !== false) {
                close();
            }
        };

        return modal;
    },

    // 文件上传
    uploadFile: function(accept, onSuccess, maxSizeMB = 50) {
        const input = document.createElement('input');
        input.type = 'file';
        if (accept) input.accept = accept;
        input.onchange = (e) => {
            const file = e.target.files[0];
            if (file) {
                if (file.size > maxSizeMB * 1024 * 1024) {
                    this.showMessage(`文件大小不能超过 ${maxSizeMB}MB`, 'error');
                    return;
                }
                if (onSuccess) onSuccess(file);
                this.showMessage('文件上传成功');
            }
        };
        input.click();
    },

    // 文件下载（模拟）
    downloadFile: function(fileName, fileId) {
        // 实际项目中应该从服务器下载
        this.showMessage('文件下载：' + fileName);
        // 这里可以触发实际的下载逻辑
        console.log('下载文件:', fileId, fileName);
    },

    // 文件删除（模拟）
    deleteFile: function(fileId, fileName, onSuccess) {
        this.createModal('确认删除', `确定要删除文件"${fileName}"吗？删除后无法恢复。`, () => {
            if (onSuccess) onSuccess();
            this.showMessage('文件已删除');
            return true;
        });
    },

    // 确认对话框
    confirm: function(message, onConfirm, onCancel) {
        return this.createModal('确认', message, onConfirm, onCancel);
    },

    // 导出Excel（模拟）
    exportExcel: function(fileName, data) {
        this.showMessage('正在导出Excel...');
        setTimeout(() => {
            this.showMessage('Excel导出成功：' + (fileName || 'data.xlsx'));
            console.log('导出数据:', data);
        }, 1000);
    }
};