407 lines
28 KiB
HTML
407 lines
28 KiB
HTML
<!-- 员工排班页 -->
|
|
<style>
|
|
.ps-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:12px 16px; background:#fff; }
|
|
.ps-filters { display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
|
|
.ps-staff-info { display:flex; align-items:center; gap:10px; }
|
|
.ps-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:500; flex-shrink:0; }
|
|
.ps-staff-name { font-weight:500; color:#1a1a2e; }
|
|
.ps-staff-phone { color:#4b5563; font-size:12px; margin-top:2px; }
|
|
.ps-status { display:flex; align-items:center; gap:6px; }
|
|
.ps-dot { width:6px; height:6px; border-radius:50%; }
|
|
.ps-dot-green { background:#22c55e; }
|
|
.ps-dot-orange { background:#f59e0b; }
|
|
.ps-dot-grey { background:#9ca3af; }
|
|
.ps-perm-pill { display:inline-block; padding:1px 6px; background:#f0f5ff; color:#2f54eb; border-radius:6px; font-size:11px; margin:1px 2px; font-weight:600; }
|
|
.ps-actions a { color:var(--primary); text-decoration:none; margin-right:12px; font-size:13px; cursor:pointer; transition:var(--g-transition); }
|
|
.ps-actions a:hover { text-decoration:underline; }
|
|
.ps-actions a.ps-danger { color:#ef4444; }
|
|
.ps-pagination { display:flex; justify-content:flex-end; align-items:center; margin-top:16px; gap:4px; }
|
|
.ps-page-btn { min-width:32px; height:34px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:13px; color:#1a1a2e; transition:var(--g-transition); }
|
|
.ps-page-btn.active { border-color:var(--primary); color:var(--primary); }
|
|
.ps-page-btn:hover { border-color:var(--primary); color:var(--primary); }
|
|
.ps-page-info { color:#4b5563; font-size:13px; margin-right:12px; }
|
|
.ps-schedule { width:100%; border-collapse:collapse; }
|
|
.ps-schedule th,.ps-schedule td { padding:10px 8px; text-align:center; border-bottom:1px solid #f3f4f6; font-size:13px; }
|
|
.ps-schedule th { background:#f8f9fb; font-weight:600; color:#6b7280; }
|
|
.ps-schedule td.ps-shift-morning { background:#e6f7ff; color:#096dd9; }
|
|
.ps-schedule td.ps-shift-evening { background:#fff7e6; color:#d46b08; }
|
|
.ps-schedule td.ps-shift-full { background:#f6ffed; color:#389e0d; }
|
|
.ps-schedule td.ps-shift-off { background:#f8f9fb; color:#9ca3af; }
|
|
.ps-schedule .ps-sched-name { text-align:left; font-weight:500; padding-left:12px; white-space:nowrap; color:#1a1a2e; }
|
|
.ps-schedule .ps-sched-role { font-size:11px; color:#4b5563; font-weight:normal; }
|
|
.ps-shift-label { font-size:11px; display:block; color:inherit; opacity:0.7; }
|
|
.ps-perm-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
|
|
.ps-perm-check { display:flex; align-items:center; gap:6px; font-size:13px; color:#1a1a2e; cursor:pointer; padding:6px 10px; border:1px solid #e5e7eb; border-radius:8px; transition:var(--g-transition); }
|
|
.ps-perm-check:hover { border-color:var(--primary); }
|
|
.ps-perm-check input { accent-color:var(--primary); cursor:pointer; }
|
|
.ps-perm-check.all { grid-column:1/-1; background:#f0f5ff; border-color:#d6e4ff; }
|
|
|
|
/* Schedule drawer */
|
|
.ps-sched-row { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid #f3f4f6; }
|
|
.ps-sched-row:last-child { border-bottom:none; }
|
|
.ps-sched-day { width:40px; font-weight:600; color:#1a1a2e; flex-shrink:0; }
|
|
.ps-shift-pills { display:flex; gap:6px; flex-shrink:0; }
|
|
.ps-shift-pill { padding:4px 10px; border-radius:6px; font-size:12px; cursor:pointer; border:1px solid #e5e7eb; background:#fff; color:#4b5563; transition:var(--g-transition); }
|
|
.ps-shift-pill:hover { border-color:var(--primary); color:var(--primary); }
|
|
.ps-shift-pill.active { color:#fff; border-color:transparent; }
|
|
.ps-shift-pill.s-morning.active { background:#1890ff; }
|
|
.ps-shift-pill.s-evening.active { background:#fa8c16; }
|
|
.ps-shift-pill.s-full.active { background:#22c55e; }
|
|
.ps-shift-pill.s-off.active { background:#9ca3af; }
|
|
.ps-sched-times { display:flex; align-items:center; gap:4px; font-size:12px; color:#4b5563; }
|
|
.ps-sched-times input[type=time] { height:34px; border:1px solid #e5e7eb; border-radius:8px; font-size:12px; padding:0 4px; outline:none; transition:var(--g-transition); }
|
|
.ps-sched-times input[type=time]:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
|
|
|
/* Week editor */
|
|
.ps-week-table { width:100%; border-collapse:collapse; }
|
|
.ps-week-table th { background:#f8f9fb; padding:8px 6px; text-align:center; font-weight:600; color:#6b7280; border:1px solid #f3f4f6; font-size:12px; }
|
|
.ps-week-table td { border:1px solid #f3f4f6; padding:0; text-align:center; height:52px; }
|
|
.ps-week-table .ps-wk-name { text-align:left; padding:8px 10px; font-weight:500; font-size:13px; white-space:nowrap; background:#fff; color:#1a1a2e; }
|
|
.ps-wk-cell { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:var(--g-transition); user-select:none; font-size:12px; gap:2px; }
|
|
.ps-wk-cell:hover { filter:brightness(0.95); }
|
|
.ps-wk-cell .wk-time { font-size:11px; opacity:0.8; }
|
|
.ps-wk-cell[data-shift=morning] { background:#e6f7ff; color:#096dd9; }
|
|
.ps-wk-cell[data-shift=evening] { background:#fff7e6; color:#d46b08; }
|
|
.ps-wk-cell[data-shift=full] { background:#f6ffed; color:#389e0d; }
|
|
.ps-wk-cell[data-shift=off] { background:#f8f9fb; color:#9ca3af; }
|
|
.ps-week-legend { display:flex; gap:16px; margin-bottom:14px; font-size:12px; color:#4b5563; }
|
|
.ps-week-legend span { display:flex; align-items:center; gap:4px; }
|
|
.ps-week-legend i { width:12px; height:12px; border-radius:2px; display:inline-block; }
|
|
.ps-week-legend .lg-m { background:#e6f7ff; border:1px solid #91d5ff; }
|
|
.ps-week-legend .lg-e { background:#fff7e6; border:1px solid #ffd591; }
|
|
.ps-week-legend .lg-f { background:#f6ffed; border:1px solid #b7eb8f; }
|
|
.ps-week-legend .lg-o { background:#f8f9fb; border:1px solid #e5e7eb; }
|
|
|
|
/* Shift template */
|
|
.ps-tpl-row { display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid #f3f4f6; }
|
|
.ps-tpl-row:last-child { border-bottom:none; }
|
|
.ps-tpl-dot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
|
|
.ps-tpl-dot.m { background:#1890ff; }
|
|
.ps-tpl-dot.e { background:#fa8c16; }
|
|
.ps-tpl-dot.f { background:#22c55e; }
|
|
.ps-tpl-name { width:50px; font-weight:500; font-size:13px; color:#1a1a2e; }
|
|
.ps-tpl-times { display:flex; align-items:center; gap:6px; }
|
|
.ps-tpl-times input[type=time] { height:34px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; padding:0 8px; outline:none; width:110px; transition:var(--g-transition); }
|
|
.ps-tpl-times input[type=time]:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
|
.ps-tpl-times .sep { color:#9ca3af; }
|
|
</style>
|
|
|
|
<div class="ps-page">
|
|
<div class="ps-toolbar">
|
|
<select class="g-select">
|
|
<option>老三家外卖(总店)</option>
|
|
<option>老三家外卖(朝阳店)</option>
|
|
<option>老三家外卖(海淀店)</option>
|
|
<option>老三家外卖(丰台店)</option>
|
|
<option>老三家外卖(通州店)</option>
|
|
</select>
|
|
<button class="g-btn" onclick="openCopyStoreModal('复制员工排班到其他门店')">复制到其他门店</button>
|
|
</div>
|
|
|
|
<div class="g-card">
|
|
<div class="g-card-hd"><span class="g-card-title">员工列表</span><button class="g-btn g-btn-primary" onclick="openStaffDrawer()">+ 添加员工</button></div>
|
|
<div class="ps-filters">
|
|
<input class="g-input" placeholder="搜索姓名/手机号" />
|
|
<select class="g-select"><option>全部角色</option><option>店长</option><option>收银员</option><option>配送员</option><option>厨师</option></select>
|
|
<select class="g-select"><option>全部状态</option><option>在职</option><option>休假</option><option>离职</option></select>
|
|
</div>
|
|
<table class="g-table"><thead><tr><th>员工信息</th><th>角色</th><th>邮箱</th><th>状态</th><th>权限</th><th>入职时间</th><th>操作</th></tr></thead>
|
|
<tbody><tr>
|
|
<td><div class="ps-staff-info"><div class="ps-avatar" style="background:#f56a00">张</div><div><div class="ps-staff-name">张伟</div><div class="ps-staff-phone">138****8001</div></div></div></td>
|
|
<td><span class="g-tag g-tag-red">店长</span></td>
|
|
<td>zhangwei@example.com</td>
|
|
<td><span class="ps-status"><span class="ps-dot ps-dot-green"></span>在职</span></td>
|
|
<td><span class='ps-perm-pill'>全部权限</span></td>
|
|
<td>2024-01-15</td>
|
|
<td class="ps-actions"><a onclick="openStaffDrawer('edit','张伟')">编辑</a><a onclick="openSchedDrawer('张伟','店长')">排班</a><a class="ps-danger">删除</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td><div class="ps-staff-info"><div class="ps-avatar" style="background:#7265e6">李</div><div><div class="ps-staff-name">李娜</div><div class="ps-staff-phone">138****8002</div></div></div></td>
|
|
<td><span class="g-tag g-tag-blue">收银员</span></td>
|
|
<td>lina@example.com</td>
|
|
<td><span class="ps-status"><span class="ps-dot ps-dot-green"></span>在职</span></td>
|
|
<td><span class='ps-perm-pill'>收银</span><span class='ps-perm-pill'>退款</span></td>
|
|
<td>2024-03-20</td>
|
|
<td class="ps-actions"><a onclick="openStaffDrawer('edit','李娜')">编辑</a><a onclick="openSchedDrawer('李娜','收银员')">排班</a><a class="ps-danger">删除</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td><div class="ps-staff-info"><div class="ps-avatar" style="background:#52c41a">王</div><div><div class="ps-staff-name">王磊</div><div class="ps-staff-phone">138****8003</div></div></div></td>
|
|
<td><span class="g-tag g-tag-green">配送员</span></td>
|
|
<td><span style='color:#999'>-</span></td>
|
|
<td><span class="ps-status"><span class="ps-dot ps-dot-green"></span>在职</span></td>
|
|
<td><span class='ps-perm-pill'>配送管理</span></td>
|
|
<td>2024-06-01</td>
|
|
<td class="ps-actions"><a onclick="openStaffDrawer('edit','王磊')">编辑</a><a onclick="openSchedDrawer('王磊','配送员')">排班</a><a class="ps-danger">删除</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td><div class="ps-staff-info"><div class="ps-avatar" style="background:#fa8c16">赵</div><div><div class="ps-staff-name">赵敏</div><div class="ps-staff-phone">138****8004</div></div></div></td>
|
|
<td><span class="g-tag g-tag-orange">厨师</span></td>
|
|
<td><span style='color:#999'>-</span></td>
|
|
<td><span class="ps-status"><span class="ps-dot ps-dot-green"></span>在职</span></td>
|
|
<td><span class='ps-perm-pill'>订单查看</span></td>
|
|
<td>2024-08-10</td>
|
|
<td class="ps-actions"><a onclick="openStaffDrawer('edit','赵敏')">编辑</a><a onclick="openSchedDrawer('赵敏','厨师')">排班</a><a class="ps-danger">删除</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td><div class="ps-staff-info"><div class="ps-avatar" style="background:#1890ff">刘</div><div><div class="ps-staff-name">刘洋</div><div class="ps-staff-phone">138****8005</div></div></div></td>
|
|
<td><span class="g-tag g-tag-green">配送员</span></td>
|
|
<td>liuyang@example.com</td>
|
|
<td><span class="ps-status"><span class="ps-dot ps-dot-orange"></span>休假</span></td>
|
|
<td><span class='ps-perm-pill'>配送管理</span></td>
|
|
<td>2025-01-05</td>
|
|
<td class="ps-actions"><a onclick="openStaffDrawer('edit','刘洋')">编辑</a><a onclick="openSchedDrawer('刘洋','配送员')">排班</a><a class="ps-danger">删除</a></td>
|
|
</tr>
|
|
<tr style="opacity:0.5">
|
|
<td><div class="ps-staff-info"><div class="ps-avatar" style="background:#bbb">陈</div><div><div class="ps-staff-name">陈静</div><div class="ps-staff-phone">138****8006</div></div></div></td>
|
|
<td><span class="g-tag g-tag-blue">收银员</span></td>
|
|
<td><span style='color:#999'>-</span></td>
|
|
<td><span class="ps-status"><span class="ps-dot ps-dot-grey"></span>离职</span></td>
|
|
<td><span style='color:#999'>-</span></td>
|
|
<td>2024-11-20</td>
|
|
<td class="ps-actions"><a onclick="openStaffDrawer('edit','陈静')">编辑</a><a style="opacity:0.4;pointer-events:none;cursor:not-allowed">排班</a><a class="ps-danger">删除</a></td>
|
|
</tr>
|
|
</tbody></table>
|
|
<div class="ps-pagination"><span class="ps-page-info">共 6 条</span><button class="ps-page-btn"><</button><button class="ps-page-btn active">1</button><button class="ps-page-btn">></button></div>
|
|
</div>
|
|
|
|
<div class="g-card">
|
|
<div class="g-card-hd"><span class="g-card-title">班次模板</span></div>
|
|
<div class="ps-tpl-row">
|
|
<span class="ps-tpl-dot m"></span><span class="ps-tpl-name">早班</span>
|
|
<div class="ps-tpl-times"><input type="time" id="psTplMs" value="09:00" onchange="syncShiftTpl()"><span class="sep">~</span><input type="time" id="psTplMe" value="14:00" onchange="syncShiftTpl()"></div>
|
|
</div>
|
|
<div class="ps-tpl-row">
|
|
<span class="ps-tpl-dot e"></span><span class="ps-tpl-name">晚班</span>
|
|
<div class="ps-tpl-times"><input type="time" id="psTplEs" value="14:00" onchange="syncShiftTpl()"><span class="sep">~</span><input type="time" id="psTplEe" value="21:00" onchange="syncShiftTpl()"></div>
|
|
</div>
|
|
<div class="ps-tpl-row">
|
|
<span class="ps-tpl-dot f"></span><span class="ps-tpl-name">全天</span>
|
|
<div class="ps-tpl-times"><input type="time" id="psTplFs" value="09:00" onchange="syncShiftTpl()"><span class="sep">~</span><input type="time" id="psTplFe" value="21:00" onchange="syncShiftTpl()"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="g-card"><button class="g-btn" onclick="openWeekEditor()">编辑排班</button></div>
|
|
<table class="ps-schedule"><thead><tr><th style="text-align:left;padding-left:12px">员工</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th><th>周日</th></tr></thead>
|
|
<tbody><tr><td class="ps-sched-name">张伟 <span class="ps-sched-role">店长</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-morning">09:00-14:00<span class="ps-shift-label">早班</span></td><td class="ps-shift-off">休</td></tr>
|
|
<tr><td class="ps-sched-name">李娜 <span class="ps-sched-role">收银员</span></td><td class="ps-shift-morning">09:00-14:00<span class="ps-shift-label">早班</span></td><td class="ps-shift-morning">09:00-14:00<span class="ps-shift-label">早班</span></td><td class="ps-shift-off">休</td><td class="ps-shift-morning">09:00-14:00<span class="ps-shift-label">早班</span></td><td class="ps-shift-evening">14:00-21:00<span class="ps-shift-label">晚班</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td></tr>
|
|
<tr><td class="ps-sched-name">王磊 <span class="ps-sched-role">配送员</span></td><td class="ps-shift-morning">09:00-14:00<span class="ps-shift-label">早班</span></td><td class="ps-shift-evening">14:00-21:00<span class="ps-shift-label">晚班</span></td><td class="ps-shift-morning">09:00-14:00<span class="ps-shift-label">早班</span></td><td class="ps-shift-evening">14:00-21:00<span class="ps-shift-label">晚班</span></td><td class="ps-shift-morning">09:00-14:00<span class="ps-shift-label">早班</span></td><td class="ps-shift-evening">14:00-21:00<span class="ps-shift-label">晚班</span></td><td class="ps-shift-off">休</td></tr>
|
|
<tr><td class="ps-sched-name">赵敏 <span class="ps-sched-role">厨师</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-evening">14:00-21:00<span class="ps-shift-label">晚班</span></td><td class="ps-shift-off">休</td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-full">09:00-21:00<span class="ps-shift-label">全天</span></td><td class="ps-shift-morning">09:00-14:00<span class="ps-shift-label">早班</span></td></tr>
|
|
<tr><td class="ps-sched-name">刘洋 <span class="ps-sched-role">配送员</span></td><td class="ps-shift-off">休</td><td class="ps-shift-off">休</td><td class="ps-shift-off">休</td><td class="ps-shift-off">休</td><td class="ps-shift-off">休</td><td class="ps-shift-off">休</td><td class="ps-shift-off">休</td></tr>
|
|
</tbody></table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="g-drawer-mask" id="psDrawerMask" onclick="closeStaffDrawer()"></div>
|
|
|
|
<!-- 添加/编辑员工 -->
|
|
<div class="g-drawer" id="psStaffDrawer">
|
|
<div class="g-drawer-hd"><span class="g-drawer-title" id="psStaffTitle">添加员工</span><button class="g-drawer-close" onclick="closeStaffDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button></div>
|
|
<div class="g-drawer-bd">
|
|
<div class="g-form-group"><label class="g-form-label required">姓名</label><input type="text" class="g-input" id="psStaffName" placeholder="请输入员工姓名" /></div>
|
|
<div class="g-form-group"><label class="g-form-label required">手机号</label><input type="text" class="g-input" id="psStaffPhone" placeholder="请输入手机号" /></div>
|
|
<div class="g-form-group"><label class="g-form-label">邮箱</label><input type="text" class="g-input" id="psStaffEmail" placeholder="可选" /><div class="g-hint">用于接收系统通知</div></div>
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
|
|
<div class="g-form-group"><label class="g-form-label required">角色</label><select class="g-select" id="psStaffRole"><option>店长</option><option>收银员</option><option>配送员</option><option>厨师</option></select></div>
|
|
<div class="g-form-group"><label class="g-form-label">状态</label><select class="g-select" id="psStaffStatus"><option>在职</option><option>休假</option><option>离职</option></select></div>
|
|
</div>
|
|
<div class="g-form-group"><label class="g-form-label">权限</label>
|
|
<div class="ps-perm-grid">
|
|
<label class="ps-perm-check all"><input type="checkbox" id="psPermAll" onchange="toggleAllPerms(this)"> 全部权限</label>
|
|
<label class="ps-perm-check"><input type="checkbox" class="ps-perm-cb"> 收银</label>
|
|
<label class="ps-perm-check"><input type="checkbox" class="ps-perm-cb"> 退款</label>
|
|
<label class="ps-perm-check"><input type="checkbox" class="ps-perm-cb"> 配送管理</label>
|
|
<label class="ps-perm-check"><input type="checkbox" class="ps-perm-cb"> 订单查看</label>
|
|
<label class="ps-perm-check"><input type="checkbox" class="ps-perm-cb"> 库存管理</label>
|
|
<label class="ps-perm-check"><input type="checkbox" class="ps-perm-cb"> 数据统计</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="g-drawer-ft"><button class="g-btn" onclick="closeStaffDrawer()">取消</button><button class="g-btn g-btn-primary" id="psStaffSubmit" onclick="closeStaffDrawer()">确认添加</button></div>
|
|
</div>
|
|
|
|
<!-- 编辑排班 (个人) -->
|
|
<div class="g-drawer" id="psSchedDrawer" style="width:560px;">
|
|
<div class="g-drawer-hd"><span class="g-drawer-title" id="psSchedTitle">编辑排班 - 张伟</span><button class="g-drawer-close" onclick="closeStaffDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button></div>
|
|
<div class="g-drawer-bd">
|
|
<div style="background:#f0f5ff;border-radius:6px;padding:10px 14px;margin-bottom:16px;font-size:12px;color:#597ef7;">点击班次类型自动填充时间，也可手动修改。选择"休息"则该日不排班。</div>
|
|
<div id="psSchedRows"></div>
|
|
</div>
|
|
<div class="g-drawer-ft"><button class="g-btn" onclick="closeStaffDrawer()">取消</button><button class="g-btn g-btn-primary" onclick="closeStaffDrawer()">保存排班</button></div>
|
|
</div>
|
|
|
|
<!-- 编辑排班表 (全员周视图) -->
|
|
<div class="g-drawer" id="psWeekDrawer" style="width:640px;">
|
|
<div class="g-drawer-hd"><span class="g-drawer-title">编辑本周排班表</span><button class="g-drawer-close" onclick="closeStaffDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button></div>
|
|
<div class="g-drawer-bd">
|
|
<div class="ps-week-legend" id="psWeekLegend">
|
|
<span><i class="lg-m"></i><span class="lg-m-t">早班 09:00-14:00</span></span>
|
|
<span><i class="lg-e"></i><span class="lg-e-t">晚班 14:00-21:00</span></span>
|
|
<span><i class="lg-f"></i><span class="lg-f-t">全天 09:00-21:00</span></span>
|
|
<span><i class="lg-o"></i>休息</span>
|
|
<span style="margin-left:auto;color:#999;font-size:11px;">点击单元格切换班次</span>
|
|
</div>
|
|
<table class="ps-week-table">
|
|
<thead><tr><th style="text-align:left;padding-left:10px;width:90px;">员工</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th><th>周日</th></tr></thead>
|
|
<tbody id="psWeekBody"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="g-drawer-ft"><button class="g-btn" onclick="closeStaffDrawer()">取消</button><button class="g-btn g-btn-primary" onclick="closeStaffDrawer()">保存排班</button></div>
|
|
</div>
|
|
|
|
<script>
|
|
var _dayNames = ['周一','周二','周三','周四','周五','周六','周日'];
|
|
var _defaultShifts = {
|
|
morning: ['09:00','14:00'],
|
|
evening: ['14:00','21:00'],
|
|
full: ['09:00','21:00'],
|
|
off: ['','']
|
|
};
|
|
var _shiftCycle = ['morning','evening','full','off'];
|
|
var _shiftLabels = {morning:'早班',evening:'晚班',full:'全天',off:'休息'};
|
|
|
|
function getShiftTimes() {
|
|
return {
|
|
morning: (document.getElementById('psTplMs').value||'09:00').slice(0,5) + '-' + (document.getElementById('psTplMe').value||'14:00').slice(0,5),
|
|
evening: (document.getElementById('psTplEs').value||'14:00').slice(0,5) + '-' + (document.getElementById('psTplEe').value||'21:00').slice(0,5),
|
|
full: (document.getElementById('psTplFs').value||'09:00').slice(0,5) + '-' + (document.getElementById('psTplFe').value||'21:00').slice(0,5),
|
|
off: ''
|
|
};
|
|
}
|
|
|
|
function syncShiftTpl() {
|
|
_defaultShifts.morning = [document.getElementById('psTplMs').value, document.getElementById('psTplMe').value];
|
|
_defaultShifts.evening = [document.getElementById('psTplEs').value, document.getElementById('psTplEe').value];
|
|
_defaultShifts.full = [document.getElementById('psTplFs').value, document.getElementById('psTplFe').value];
|
|
var t = getShiftTimes();
|
|
var lg = document.getElementById('psWeekLegend');
|
|
if (lg) {
|
|
lg.querySelector('.lg-m-t').textContent = '早班 ' + t.morning;
|
|
lg.querySelector('.lg-e-t').textContent = '晚班 ' + t.evening;
|
|
lg.querySelector('.lg-f-t').textContent = '全天 ' + t.full;
|
|
}
|
|
}
|
|
|
|
function openStaffDrawer(mode, name) {
|
|
var t = document.getElementById('psStaffTitle');
|
|
var s = document.getElementById('psStaffSubmit');
|
|
if (mode === 'edit') {
|
|
t.textContent = '编辑员工 - ' + name;
|
|
s.textContent = '保存修改';
|
|
document.getElementById('psStaffName').value = name || '';
|
|
document.getElementById('psStaffPhone').value = '138****8001';
|
|
document.getElementById('psStaffEmail').value = '';
|
|
} else {
|
|
t.textContent = '添加员工';
|
|
s.textContent = '确认添加';
|
|
document.getElementById('psStaffName').value = '';
|
|
document.getElementById('psStaffPhone').value = '';
|
|
document.getElementById('psStaffEmail').value = '';
|
|
document.querySelectorAll('.ps-perm-cb').forEach(function(c){c.checked=false;});
|
|
document.getElementById('psPermAll').checked = false;
|
|
}
|
|
document.getElementById('psDrawerMask').classList.add('open');
|
|
document.getElementById('psStaffDrawer').classList.add('open');
|
|
}
|
|
|
|
function openSchedDrawer(name, role) {
|
|
document.getElementById('psSchedTitle').textContent = '编辑排班 - ' + name + ' (' + role + ')';
|
|
var container = document.getElementById('psSchedRows');
|
|
var html = '';
|
|
for (var i = 0; i < 7; i++) {
|
|
var d = _dayNames[i];
|
|
var def = (i < 5) ? 'full' : (i === 5 ? 'morning' : 'off');
|
|
var st = _defaultShifts[def][0];
|
|
var et = _defaultShifts[def][1];
|
|
var hide = def === 'off' ? 'style="visibility:hidden"' : '';
|
|
html += '<div class="ps-sched-row">';
|
|
html += '<span class="ps-sched-day">' + d + '</span>';
|
|
html += '<div class="ps-shift-pills">';
|
|
['morning','evening','full','off'].forEach(function(typ){
|
|
var lb = {morning:'早班',evening:'晚班',full:'全天',off:'休息'}[typ];
|
|
var ac = (typ === def) ? ' active' : '';
|
|
html += '<span class="ps-shift-pill s-' + typ + ac + '" onclick="pickShift(this,\'' + typ + '\',' + i + ')">' + lb + '</span>';
|
|
});
|
|
html += '</div>';
|
|
html += '<div class="ps-sched-times" id="psTime' + i + '" ' + hide + '>';
|
|
html += '<input type="time" value="' + st + '" style="width:100px" /> <span>~</span> <input type="time" value="' + et + '" style="width:100px" />';
|
|
html += '</div></div>';
|
|
}
|
|
container.innerHTML = html;
|
|
document.getElementById('psDrawerMask').classList.add('open');
|
|
document.getElementById('psSchedDrawer').classList.add('open');
|
|
}
|
|
|
|
function closeStaffDrawer() {
|
|
document.getElementById('psDrawerMask').classList.remove('open');
|
|
document.getElementById('psStaffDrawer').classList.remove('open');
|
|
document.getElementById('psSchedDrawer').classList.remove('open');
|
|
document.getElementById('psWeekDrawer').classList.remove('open');
|
|
}
|
|
|
|
function pickShift(el, typ, dayIdx) {
|
|
var pills = el.parentElement.querySelectorAll('.ps-shift-pill');
|
|
pills.forEach(function(p){ p.classList.remove('active'); });
|
|
el.classList.add('active');
|
|
var timeDiv = document.getElementById('psTime' + dayIdx);
|
|
if (typ === 'off') {
|
|
timeDiv.style.visibility = 'hidden';
|
|
} else {
|
|
timeDiv.style.visibility = 'visible';
|
|
var inputs = timeDiv.querySelectorAll('input[type=time]');
|
|
inputs[0].value = _defaultShifts[typ][0];
|
|
inputs[1].value = _defaultShifts[typ][1];
|
|
}
|
|
}
|
|
|
|
function toggleAllPerms(el) {
|
|
var checked = el.checked;
|
|
document.querySelectorAll('.ps-perm-cb').forEach(function(c){ c.checked = checked; });
|
|
}
|
|
|
|
var _weekData = [
|
|
{name:'张伟',role:'店长',shifts:['full','full','full','full','full','morning','off']},
|
|
{name:'李娜',role:'收银员',shifts:['morning','morning','off','morning','evening','full','full']},
|
|
{name:'王磊',role:'配送员',shifts:['morning','evening','morning','evening','morning','evening','off']},
|
|
{name:'赵敏',role:'厨师',shifts:['full','full','evening','off','full','full','morning']},
|
|
{name:'刘洋',role:'配送员',shifts:['off','off','off','off','off','off','off']}
|
|
];
|
|
|
|
function openWeekEditor() {
|
|
syncShiftTpl();
|
|
var t = getShiftTimes();
|
|
var body = document.getElementById('psWeekBody');
|
|
var html = '';
|
|
for (var r = 0; r < _weekData.length; r++) {
|
|
var s = _weekData[r];
|
|
html += '<tr><td class="ps-wk-name">' + s.name + '<br><span style="font-size:11px;color:#999;font-weight:normal">' + s.role + '</span></td>';
|
|
for (var d = 0; d < 7; d++) {
|
|
var sh = s.shifts[d];
|
|
var tm = t[sh];
|
|
html += '<td><div class="ps-wk-cell" data-shift="' + sh + '" data-r="' + r + '" data-d="' + d + '" onclick="cycleShift(this)">';
|
|
html += '<span>' + _shiftLabels[sh] + '</span>';
|
|
if (tm) html += '<span class="wk-time">' + tm + '</span>';
|
|
html += '</div></td>';
|
|
}
|
|
html += '</tr>';
|
|
}
|
|
body.innerHTML = html;
|
|
document.getElementById('psDrawerMask').classList.add('open');
|
|
document.getElementById('psWeekDrawer').classList.add('open');
|
|
}
|
|
|
|
function cycleShift(el) {
|
|
var cur = el.getAttribute('data-shift');
|
|
var r = parseInt(el.getAttribute('data-r'));
|
|
var d = parseInt(el.getAttribute('data-d'));
|
|
var idx = (_shiftCycle.indexOf(cur) + 1) % _shiftCycle.length;
|
|
var next = _shiftCycle[idx];
|
|
el.setAttribute('data-shift', next);
|
|
var t = getShiftTimes();
|
|
var tm = t[next];
|
|
el.innerHTML = '<span>' + _shiftLabels[next] + '</span>' + (tm ? '<span class="wk-time">' + tm + '</span>' : '');
|
|
_weekData[r].shifts[d] = next;
|
|
}
|
|
|
|
if (typeof lucide !== 'undefined') lucide.createIcons();
|
|
</script>
|