console 命令行工具 X clear

console

var Main = {
    data () {
        return {
            tableData: [],
            gridOptions: {
                border: true,
                columns: [
                    {type: 'seq', width: 60},
                    {field: 'name',title: 'Name'},
                    {field: 'sex',title: 'Sex'},
                    {field: 'date',title: 'Date'},
                    {field: 'address',title: 'Address'}
                ],
                data: []
            }
        }
    },
    created () {
        var list1 = []
        var list2 = []
        for(var index = 0; index < 3; index++){
            list1.push({
                name: 'test' + index,
                role: 'developer',
                sex: 'Man',
                date: '2019-05-01',
                time: 1556677810888 + index * 500,
                region: 'ShenZhen',
                address: 'address abc' + index
            })
            list2.push({
                name: 'test' + index,
                role: 'developer',
                sex: 'Man',
                date: '2019-05-01',
                time: 1556677810888 + index * 500,
                region: 'ShenZhen',
                address: 'address abc' + index
            })
        }
        this.tableData = list1
        this.gridOptions.data = list2
    }
};

Vue.createApp(Main).use(VXETable).mount('#app')

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>领导日程管理</title>
<style>
body {
    font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 10px;
    background: #f5f5f5;
    font-size: 16px;
}
.container {
    max-width: 100%;
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
    font-size: 20px;
    color: #333;
    text-align: center;
    margin: 10px 0;
}
.form-group {
    margin-bottom: 15px;
}
label {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}
input, select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}
.btn {
    display: inline-block;
    padding: 12px 20px;
    background: #07c160;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    margin: 5px;
    text-align: center;
}
.btn-gray {
    background: #999;
}
.btn-red {
    background: #e74c3c;
}
.schedule-item {
    background: #f8f8f8;
    padding: 12px;
    margin: 10px 0;
    border-radius: 8px;
    border-left: 3px solid #07c160;
    position: relative;
}
.schedule-item h4 {
    margin: 0 0 5px 0;
    color: #333;
    font-size: 16px;
}
.schedule-item p {
    margin: 3px 0;
    color: #666;
    font-size: 14px;
}
.del-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e74c3c;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
}
.tabs {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.tab {
    flex: 1;
    padding: 10px;
    text-align: center;
    color: #666;
    border-bottom: 2px solid transparent;
}
.tab.active {
    color: #07c160;
    border-bottom-color: #07c160;
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 15px;
}
.stat-card {
    background: #07c160;
    color: white;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}
.stat-card h4 {
    margin: 0 0 5px 0;
    font-size: 14px;
}
.stat-card .num {
    font-size: 24px;
    font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
    <h1>领导日程管理系统</h1>
    
    <div class="tabs">
        <div class="tab active" onclick="switchTab('add')">添加日程</div>
        <div class="tab" onclick="switchTab('list')">日程列表</div>
        <div class="tab" onclick="switchTab('stats')">统计导出</div>
    </div>
    
    <!-- 添加日程 -->
    <div id="add" class="tab-content active">
        <form id="scheduleForm">
            <div class="form-group">
                <label>选择领导</label>
                <select id="leader" required>
                    <option value="">请选择</option>
                    <option>欧书记</option>
                    <option>张校长</option>
                    <option>刘书记</option>
                    <option>游校长</option>
                    <option>梁校长</option>
                    <option>黄校长</option>
                    <option>蔚校长</option>
                    <option>徐校长</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>日期</label>
                <input type="date" id="date" required>
            </div>
            
            <div class="form-group">
                <label>时间</label>
                <input type="time" id="time" required>
            </div>
            
            <div class="form-group">
                <label>活动内容</label>
                <textarea id="activity" rows="3" required></textarea>
            </div>
            
            <div class="form-group">
                <label>地点</label>
                <input type="text" id="location">
            </div>
            
            <button type="submit" class="btn">添加日程</button>
            <button type="button" class="btn btn-gray" onclick="clearForm()">清空</button>
        </form>
    </div>
    
    <!-- 日程列表 -->
    <div id="list" class="tab-content">
        <div class="form-group">
            <label>筛选领导</label>
            <select id="filterLeader" onchange="showSchedules()">
                <option value="">全部</option>
                <option>欧书记</option>
                <option>张校长</option>
                <option>刘书记</option>
                <option>游校长</option>
                <option>梁校长</option>
                <option>黄校长</option>
                <option>蔚校长</option>
                <option>徐校长</option>
            </select>
        </div>
        
        <div id="scheduleList"></div>
    </div>
    
    <!-- 统计导出 -->
    <div id="stats" class="tab-content">
        <div id="statsContent"></div>
        
        <div style="margin-top: 20px;">
            <button class="btn" onclick="exportCSV()">导出Excel</button>
            <button class="btn btn-gray" onclick="exportJSON()">导出JSON</button>
            <button class="btn btn-red" onclick="clearAll()">清空数据</button>
        </div>
    </div>
</div>

<script>
// 初始化数据
let schedules = [];
try {
    schedules = JSON.parse(localStorage.getItem('schedules') || '[]');
} catch(e) {
    schedules = [];
}

// 初始化日期
document.getElementById('date').value = new Date().toISOString().split('T')[0];

// 切换标签
function switchTab(tab) {
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
    
    event.target.classList.add('active');
    document.getElementById(tab).classList.add('active');
    
    if(tab === 'list') showSchedules();
    if(tab === 'stats') showStats();
}

// 提交表单
document.getElementById('scheduleForm').onsubmit = function(e) {
    e.preventDefault();
    
    const schedule = {
        id: Date.now(),
        leader: document.getElementById('leader').value,
        date: document.getElementById('date').value,
        time: document.getElementById('time').value,
        activity: document.getElementById('activity').value,
        location: document.getElementById('location').value
    };
    
    schedules.push(schedule);
    localStorage.setItem('schedules', JSON.stringify(schedules));
    
    alert('添加成功！');
    clearForm();
    switchTab('list');
};

// 清空表单
function clearForm() {
    document.getElementById('scheduleForm').reset();
    document.getElementById('date').value = new Date().toISOString().split('T')[0];
}

// 显示日程列表
function showSchedules() {
    const filter = document.getElementById('filterLeader').value;
    let filtered = filter ? schedules.filter(s => s.leader === filter) : schedules;
    
    filtered.sort((a,b) => new Date(b.date + ' ' + b.time) - new Date(a.date + ' ' + a.time));
    
    const html = filtered.map(s => `
        <div class="schedule-item">
            <button class="del-btn" onclick="deleteSchedule(${s.id})">删除</button>
            <h4>${s.leader} - ${s.date} ${s.time}</h4>
            <p>活动：${s.activity}</p>
            ${s.location ? '<p>地点：' + s.location + '</p>' : ''}
        </div>
    `).join('');
    
    document.getElementById('scheduleList').innerHTML = html || '<p style="text-align:center;color:#999;">暂无日程</p>';
}

// 删除日程
function deleteSchedule(id) {
    if(confirm('确定删除？')) {
        schedules = schedules.filter(s => s.id !== id);
        localStorage.setItem('schedules', JSON.stringify(schedules));
        showSchedules();
    }
}

// 显示统计
function showStats() {
    const leaders = ['欧书记','张校长','刘书记','游校长','梁校长','黄校长','蔚校长','徐校长'];
    const stats = {};
    
    leaders.forEach(l => {
        stats[l] = schedules.filter(s => s.leader === l).length;
    });
    
    const html = `
        <h3 style="margin-bottom:10px;">日程统计</h3>
        <p>总计：${schedules.length} 个日程</p>
        <div class="stats-grid">
            ${leaders.map(l => `
                <div class="stat-card">
                    <h4>${l}</h4>
                    <div class="num">${stats[l]}</div>
                </div>
            `).join('')}
        </div>
    `;
    
    document.getElementById('statsContent').innerHTML = html;
}

// 导出CSV
function exportCSV() {
    let csv = '\ufeff领导,日期,时间,活动,地点\n';
    schedules.forEach(s => {
        csv += `"${s.leader}","${s.date}","${s.time}","${s.activity}","${s.location || ''}"\n`;
    });
    
    const blob = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '领导日程_' + new Date().toISOString().split('T')[0] + '.csv';
    link.click();
}

// 导出JSON
function exportJSON() {
    const blob = new Blob([JSON.stringify(schedules, null, 2)], {type: 'application/json'});
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '领导日程_' + new Date().toISOString().split('T')[0] + '.json';
    link.click();
}

// 清空数据
function clearAll() {
    if(confirm('确定清空所有数据？')) {
        schedules = [];
        localStorage.setItem('schedules', JSON.stringify(schedules));
        showSchedules();
        alert('已清空！');
    }
}
</script>
</body>
</html>

@import url("https://unpkg.com/vxe-pc-ui@4.5.33/lib/style.css");
@import url("https://unpkg.com/vxe-table@4.13.15/lib/style.css");