vue实现可修改数据多门店排班签到管理系统html代码-html代码-BFW代码库

vue实现可修改数据多门店排班签到管理系统html代码

代码语言：html

代码描述：vue实现可修改数据多门店排班签到管理系统html代码，可添加管理员工数据，班次管理、签到、门店管理、考勤数据汇总。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能排班系统 Pro (可配置版)</title>
    
    <!-- Tailwind CSS -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
    <!-- Vue 3 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.3.5.18.js"></script>
    <!-- Phosphor Icons -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/phosphor-icons@1.4.2.css">
    <style>
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
        
        .drag-source { cursor: grab; user-select: none; }
        .drag-source:active { cursor: grabbing; }
        
        .drop-zone-active {
            background-color: #eff6ff;
            border: 2px dashed #3b82f6;
        }

        /* 动画类 */
        .fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease; }
        .fade-enter-from, .fade-leave-to { opacity: 0; }

        [v-cloak] { display: none; }
    </style>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4f46e5',
                        secondary: '#10b981',
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-100 text-gray-800 font-sans h-screen flex flex-col overflow-hidden">

<div id="app" v-cloak class="h-full flex flex-col">

    <!-- 1. 顶部导航栏 -->
    <header class="bg-white border-b border-gray-200 px-4 md:px-6 py-3 flex justify-between items-center shadow-sm z-20 shrink-0">
        <div class="flex items-center gap-3">
            <div class="bg-primary text-white p-2 rounded-lg shadow-lg shadow-indigo-200">
                <i class="ph ph-calendar-check text-2xl"></i>
            </div>
            <div>
                <h1 class="text-xl font-bold text-gray-900 leading-tight">排班大师 <span class="text-primary text-xs bg-indigo-50 px-2 py-0.5 rounded-full border border-indigo-100">Pro</span></h1>
                <p class="text-xs text-gray-500 hidden md:block">全功能动态排班管理系统</p>
            </div>
        </div>

        <div class="flex items-center gap-3">
            <!-- 视图切换：排班表 vs 管理后台 -->
            <button @click="currentView = currentView === 'scheduler' ? 'settings' : 'scheduler'" 
                    class="flex items-center gap-2 px-4 py-2 rounded-lg transition-all border"
                    :class="currentView === 'settings' ? 'bg-gray-800 text-white border-gray-800' : 'bg-white text-gray-700 hover:bg-gray-50 border-gray-200'">
                <i :class="currentView === 'scheduler' ? 'ph ph-gear' : 'ph ph-arrow-u-up-left'"></i>
                <span class="hidden md:inline">{{ currentView === 'scheduler' ? '系统管理' : '返回排班' }}</span>
            </button>
            
            <!-- 数据统计按钮 (仅在排班视图显示) -->
            <button v-if="currentView === 'scheduler'" @click="showStats = true" class="bg-primary hover:bg-indigo-700 text-white px-4 py-2 rounded-lg shadow transition flex items-center gap-2">
                <i class="ph ph-chart-bar"></i>
                <span class="hidden md:inline">统计</span>
            </button>
        </div>
    </header>

    <!-- 视图 1: 排班主界面 -->
    <div v-if="currentView === 'scheduler'" class="flex.........完整代码请登录后点击上方下载按钮下载查看