289 lines
23 KiB
HTML
289 lines
23 KiB
HTML
<!-- 堂食管理页 -->
|
||
<style>
|
||
.pdi-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; }
|
||
.pdi-toolbar select { height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; background:#fff; cursor:pointer; transition:var(--g-transition); }
|
||
.pdi-toolbar select:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
||
.pdi-card-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; font-size:14px; font-weight:600; color:#1a1a2e; }
|
||
.pdi-card-hd .right { display:flex; gap:8px; }
|
||
.pdi-area-pills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||
.pdi-area-pill { padding:6px 16px; border-radius:20px; font-size:13px; cursor:pointer; border:1px solid #e5e7eb; background:#fff; color:#4b5563; transition:var(--g-transition); }
|
||
.pdi-area-pill:hover { border-color:var(--primary); color:var(--primary); }
|
||
.pdi-area-pill.active { background:var(--primary); color:#fff; border-color:var(--primary); }
|
||
.pdi-area-info { background:#f8f9fb; border-radius:8px; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; font-size:13px; color:#4b5563; }
|
||
.pdi-area-info .actions { display:flex; gap:8px; }
|
||
.pdi-action-link { color:var(--primary); cursor:pointer; font-size:12px; text-decoration:none; transition:var(--g-transition); }
|
||
.pdi-action-link:hover { text-decoration:underline; }
|
||
.pdi-action-link.danger { color:#ef4444; }
|
||
.pdi-table-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
|
||
.pdi-table-card { background:#fff; border:none; border-radius:10px; padding:16px; box-shadow:var(--g-shadow-sm); transition:var(--g-transition); }
|
||
.pdi-table-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.10); }
|
||
.pdi-table-code { font-size:22px; font-weight:700; color:#1a1a2e; margin-bottom:8px; }
|
||
.pdi-table-cap { font-size:13px; color:#4b5563; display:flex; align-items:center; gap:5px; margin-bottom:8px; }
|
||
.pdi-table-status { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; margin-bottom:8px; }
|
||
.pdi-status-dot { width:7px; height:7px; border-radius:50%; display:inline-block; }
|
||
.pdi-s-free .pdi-status-dot { background:#22c55e; } .pdi-s-free { color:#22c55e; }
|
||
.pdi-s-dining .pdi-status-dot { background:#f59e0b; } .pdi-s-dining { color:#f59e0b; }
|
||
.pdi-s-reserved .pdi-status-dot { background:#1890ff; } .pdi-s-reserved { color:#1890ff; }
|
||
.pdi-s-disabled .pdi-status-dot { background:#9ca3af; } .pdi-s-disabled { color:#9ca3af; }
|
||
.pdi-table-tags { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:10px; min-height:22px; }
|
||
.pdi-table-foot { display:flex; justify-content:flex-end; gap:8px; border-top:1px solid #f3f4f6; padding-top:10px; }
|
||
.pdi-icon-btn { width:28px; height:28px; border-radius:8px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:14px; color:#9ca3af; transition:var(--g-transition); }
|
||
.pdi-icon-btn:hover { border-color:var(--primary); color:var(--primary); }
|
||
.pdi-form-row { display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:13px; color:#1a1a2e; }
|
||
.pdi-form-row label { width:120px; text-align:right; flex-shrink:0; font-weight:500; color:#4b5563; }
|
||
.pdi-form-row input[type=number] { width:120px; height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; transition:var(--g-transition); }
|
||
.pdi-form-row input[type=number]:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
||
.pdi-form-row .hint { font-size:12px; color:#9ca3af; }
|
||
.pdi-form-row .unit { color:#4b5563; }
|
||
.pdi-form-actions { display:flex; gap:8px; margin-left:132px; margin-top:8px; }
|
||
.pdi-tag-input-wrap { display:flex; flex-wrap:wrap; gap:6px; padding:6px 8px; border:1px solid #e5e7eb; border-radius:8px; min-height:36px; align-items:center; transition:var(--g-transition); }
|
||
.pdi-tag-item { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; background:#f0f5ff; color:#597ef7; border-radius:6px; font-size:12px; }
|
||
.pdi-tag-item .remove { cursor:pointer; color:#aaa; font-size:14px; transition:var(--g-transition); }
|
||
.pdi-tag-item .remove:hover { color:#ef4444; }
|
||
.pdi-modal-mask { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:2000; opacity:0; pointer-events:none; transition:var(--g-transition); display:flex; align-items:center; justify-content:center; }
|
||
.pdi-modal-mask.open { opacity:1; pointer-events:auto; }
|
||
.pdi-modal { background:#fff; border-radius:10px; width:480px; display:flex; flex-direction:column; box-shadow:0 8px 30px rgba(0,0,0,0.12); transform:translateY(12px);opacity:0; transition:var(--g-transition); }
|
||
.pdi-modal-mask.open .pdi-modal { transform:translateY(0);opacity:1; }
|
||
.pdi-modal-hd { padding:16px 20px; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; justify-content:space-between; }
|
||
.pdi-modal-hd h3 { font-size:15px; font-weight:600; color:#1a1a2e; margin:0; }
|
||
.pdi-modal-bd { padding:20px; }
|
||
.pdi-modal-ft { padding:12px 20px; border-top:1px solid #e5e7eb; display:flex; justify-content:flex-end; gap:8px; background:#fafbfc; border-radius:0 0 10px 10px; }
|
||
.pdi-preview-box { background:#f8f9fb; border:1px solid #e5e7eb; border-radius:8px; padding:12px; margin-top:12px; }
|
||
.pdi-preview-box .pv-title { font-size:12px; color:#9ca3af; margin-bottom:8px; }
|
||
.pdi-preview-tags { display:flex; flex-wrap:wrap; gap:6px; }
|
||
.pdi-preview-tag { padding:4px 10px; background:#f0f5ff; color:#597ef7; border-radius:6px; font-size:12px; }
|
||
</style>
|
||
|
||
<div class="pdi-page">
|
||
<div class="pdi-toolbar">
|
||
<select>
|
||
<option>老三家外卖(中关村店)</option>
|
||
<option>老三家外卖(望京店)</option>
|
||
<option>老三家外卖(国贸店)</option>
|
||
<option>老三家外卖(西单店)</option>
|
||
<option>老三家外卖(五道口店)</option>
|
||
</select>
|
||
<button class="g-btn" onclick="openCopyStoreModal('复制堂食设置到其他门店')">复制到其他门店</button>
|
||
</div>
|
||
|
||
<div class="g-card" style="padding:20px;margin-bottom:16px;">
|
||
<div class="pdi-card-hd"><span>区域管理</span><div class="right"><button class="g-btn g-btn-primary g-btn-sm" onclick="openDiArea()">+ 添加区域</button></div></div>
|
||
<div class="pdi-area-pills">
|
||
<span class="pdi-area-pill active">大厅 (12桌)</span>
|
||
<span class="pdi-area-pill">包间 (4桌)</span>
|
||
<span class="pdi-area-pill">露台 (6桌)</span>
|
||
</div>
|
||
<div class="pdi-area-info">
|
||
<span>大厅 — 主要用餐区域，共12张桌位，可容纳约48人同时用餐</span>
|
||
<div class="actions"><a class="pdi-action-link" onclick="openDiArea('edit','大厅')">编辑</a><a class="pdi-action-link danger">删除</a></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="g-card" style="padding:20px;margin-bottom:16px;">
|
||
<div class="pdi-card-hd"><span>桌位列表</span><div class="right"><button class="g-btn g-btn-sm" onclick="openDiBatch()">批量生成</button><button class="g-btn g-btn-primary g-btn-sm" onclick="openDiTable()">+ 添加桌位</button></div></div>
|
||
<div class="pdi-table-grid">
|
||
<div class="pdi-table-card">
|
||
<div class="pdi-table-code">A01</div>
|
||
<div class="pdi-table-cap"><i data-lucide="armchair" style="width:14px;height:14px"></i> 4人桌</div>
|
||
<div class="pdi-table-status pdi-s-free"><span class="pdi-status-dot"></span>空闲</div>
|
||
<div class="pdi-table-tags"><span class="g-tag g-tag-gray">靠窗</span></div>
|
||
<div class="pdi-table-foot"><button class="pdi-icon-btn" title="二维码"><i data-lucide="qr-code" style="width:12px;height:12px"></i></button><button class="pdi-icon-btn" title="编辑" onclick="openDiTable('edit',this.closest('.pdi-table-card').querySelector('.pdi-table-code').textContent)"><i data-lucide="pencil" style="width:12px;height:12px"></i></button><a class="g-action g-action-danger" style="font-size:12px;cursor:pointer">删除</a></div>
|
||
</div>
|
||
<div class="pdi-table-card">
|
||
<div class="pdi-table-code">A02</div>
|
||
<div class="pdi-table-cap"><i data-lucide="armchair" style="width:14px;height:14px"></i> 2人桌</div>
|
||
<div class="pdi-table-status pdi-s-dining"><span class="pdi-status-dot"></span>就餐中</div>
|
||
<div class="pdi-table-tags"></div>
|
||
<div class="pdi-table-foot"><button class="pdi-icon-btn" title="二维码"><i data-lucide="qr-code" style="width:12px;height:12px"></i></button><button class="pdi-icon-btn" title="编辑" onclick="openDiTable('edit',this.closest('.pdi-table-card').querySelector('.pdi-table-code').textContent)"><i data-lucide="pencil" style="width:12px;height:12px"></i></button><a class="g-action g-action-danger" style="font-size:12px;cursor:pointer">删除</a></div>
|
||
</div>
|
||
<div class="pdi-table-card">
|
||
<div class="pdi-table-code">A03</div>
|
||
<div class="pdi-table-cap"><i data-lucide="armchair" style="width:14px;height:14px"></i> 6人桌</div>
|
||
<div class="pdi-table-status pdi-s-free"><span class="pdi-status-dot"></span>空闲</div>
|
||
<div class="pdi-table-tags"><span class="g-tag g-tag-gray">VIP</span><span class="g-tag g-tag-gray">靠窗</span></div>
|
||
<div class="pdi-table-foot"><button class="pdi-icon-btn" title="二维码"><i data-lucide="qr-code" style="width:12px;height:12px"></i></button><button class="pdi-icon-btn" title="编辑" onclick="openDiTable('edit',this.closest('.pdi-table-card').querySelector('.pdi-table-code').textContent)"><i data-lucide="pencil" style="width:12px;height:12px"></i></button><a class="g-action g-action-danger" style="font-size:12px;cursor:pointer">删除</a></div>
|
||
</div>
|
||
<div class="pdi-table-card">
|
||
<div class="pdi-table-code">A04</div>
|
||
<div class="pdi-table-cap"><i data-lucide="armchair" style="width:14px;height:14px"></i> 4人桌</div>
|
||
<div class="pdi-table-status pdi-s-reserved"><span class="pdi-status-dot"></span>已预约</div>
|
||
<div class="pdi-table-tags"></div>
|
||
<div class="pdi-table-foot"><button class="pdi-icon-btn" title="二维码"><i data-lucide="qr-code" style="width:12px;height:12px"></i></button><button class="pdi-icon-btn" title="编辑" onclick="openDiTable('edit',this.closest('.pdi-table-card').querySelector('.pdi-table-code').textContent)"><i data-lucide="pencil" style="width:12px;height:12px"></i></button><a class="g-action g-action-danger" style="font-size:12px;cursor:pointer">删除</a></div>
|
||
</div>
|
||
<div class="pdi-table-card">
|
||
<div class="pdi-table-code">A05</div>
|
||
<div class="pdi-table-cap"><i data-lucide="armchair" style="width:14px;height:14px"></i> 8人桌</div>
|
||
<div class="pdi-table-status pdi-s-dining"><span class="pdi-status-dot"></span>就餐中</div>
|
||
<div class="pdi-table-tags"><span class="g-tag g-tag-gray">包厢</span></div>
|
||
<div class="pdi-table-foot"><button class="pdi-icon-btn" title="二维码"><i data-lucide="qr-code" style="width:12px;height:12px"></i></button><button class="pdi-icon-btn" title="编辑" onclick="openDiTable('edit',this.closest('.pdi-table-card').querySelector('.pdi-table-code').textContent)"><i data-lucide="pencil" style="width:12px;height:12px"></i></button><a class="g-action g-action-danger" style="font-size:12px;cursor:pointer">删除</a></div>
|
||
</div>
|
||
<div class="pdi-table-card">
|
||
<div class="pdi-table-code">A06</div>
|
||
<div class="pdi-table-cap"><i data-lucide="armchair" style="width:14px;height:14px"></i> 2人桌</div>
|
||
<div class="pdi-table-status pdi-s-free"><span class="pdi-status-dot"></span>空闲</div>
|
||
<div class="pdi-table-tags"><span class="g-tag g-tag-gray">靠窗</span></div>
|
||
<div class="pdi-table-foot"><button class="pdi-icon-btn" title="二维码"><i data-lucide="qr-code" style="width:12px;height:12px"></i></button><button class="pdi-icon-btn" title="编辑" onclick="openDiTable('edit',this.closest('.pdi-table-card').querySelector('.pdi-table-code').textContent)"><i data-lucide="pencil" style="width:12px;height:12px"></i></button><a class="g-action g-action-danger" style="font-size:12px;cursor:pointer">删除</a></div>
|
||
</div>
|
||
<div class="pdi-table-card" style="opacity:0.5;">
|
||
<div class="pdi-table-code">A07</div>
|
||
<div class="pdi-table-cap"><i data-lucide="armchair" style="width:14px;height:14px"></i> 4人桌</div>
|
||
<div class="pdi-table-status pdi-s-disabled"><span class="pdi-status-dot"></span>停用</div>
|
||
<div class="pdi-table-tags"></div>
|
||
<div class="pdi-table-foot"><button class="pdi-icon-btn" title="二维码"><i data-lucide="qr-code" style="width:12px;height:12px"></i></button><button class="pdi-icon-btn" title="编辑" onclick="openDiTable('edit',this.closest('.pdi-table-card').querySelector('.pdi-table-code').textContent)"><i data-lucide="pencil" style="width:12px;height:12px"></i></button><a class="g-action g-action-danger" style="font-size:12px;cursor:pointer">删除</a></div>
|
||
</div>
|
||
<div class="pdi-table-card">
|
||
<div class="pdi-table-code">A08</div>
|
||
<div class="pdi-table-cap"><i data-lucide="armchair" style="width:14px;height:14px"></i> 4人桌</div>
|
||
<div class="pdi-table-status pdi-s-free"><span class="pdi-status-dot"></span>空闲</div>
|
||
<div class="pdi-table-tags"><span class="g-tag g-tag-gray">VIP</span></div>
|
||
<div class="pdi-table-foot"><button class="pdi-icon-btn" title="二维码"><i data-lucide="qr-code" style="width:12px;height:12px"></i></button><button class="pdi-icon-btn" title="编辑" onclick="openDiTable('edit',this.closest('.pdi-table-card').querySelector('.pdi-table-code').textContent)"><i data-lucide="pencil" style="width:12px;height:12px"></i></button><a class="g-action g-action-danger" style="font-size:12px;cursor:pointer">删除</a></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="g-card" style="padding:20px;margin-bottom:16px;">
|
||
<div class="pdi-card-hd"><span>堂食设置</span></div>
|
||
<div class="pdi-form-row"><label>是否开启堂食</label><button class="g-toggle on" onclick="this.classList.toggle('on')"></button></div>
|
||
<div class="pdi-form-row"><label>默认用餐时长</label><input type="number" value="90"><span class="unit">分钟</span></div>
|
||
<div class="pdi-form-row"><label>超时提醒</label><input type="number" value="10"><span class="unit">分钟</span><span class="hint">超过用餐时长后提醒</span></div>
|
||
<div class="pdi-form-actions"><button class="g-btn g-btn-primary">保存设置</button><button class="g-btn">重置</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="g-drawer-mask" id="diDrawerMask" onclick="closeDiDrawer()"></div>
|
||
|
||
<!-- 添加/编辑区域 -->
|
||
<div class="g-drawer" id="diAreaDrawer" style="width:460px;">
|
||
<div class="g-drawer-hd"><span class="g-drawer-title" id="diAreaTitle">添加区域</span><button class="g-drawer-close" onclick="closeDiDrawer()"><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="diAreaName" placeholder="如：大厅、包间、露台" /></div>
|
||
<div class="g-form-group"><label class="g-form-label">区域描述</label><textarea class="g-textarea" id="diAreaDesc" rows="3" placeholder="可选，如：主要用餐区域，可容纳约48人"></textarea></div>
|
||
<div class="g-form-group"><label class="g-form-label">排序</label><div style="display:flex;align-items:center;gap:6px;"><input type="number" class="g-input" id="diAreaSort" value="1" style="width:80px;" /><span style="font-size:12px;color:#999;">数字越小越靠前</span></div></div>
|
||
</div>
|
||
<div class="g-drawer-ft"><button class="g-btn" onclick="closeDiDrawer()">取消</button><button class="g-btn g-btn-primary" id="diAreaSubmit" onclick="closeDiDrawer()">确认添加</button></div>
|
||
</div>
|
||
|
||
<!-- 添加/编辑桌位 -->
|
||
<div class="g-drawer" id="diTableDrawer" style="width:460px;">
|
||
<div class="g-drawer-hd"><span class="g-drawer-title" id="diTableTitle">添加桌位</span><button class="g-drawer-close" onclick="closeDiDrawer()"><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="diTableCode" placeholder="如：A09" /></div>
|
||
<div class="g-form-group"><label class="g-form-label">所属区域</label><select class="g-select" id="diTableArea"><option>大厅</option><option>包间</option><option>露台</option></select></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="diTableCap"><option>2人桌</option><option selected>4人桌</option><option>6人桌</option><option>8人桌</option><option>10人桌</option><option>12人桌</option></select></div>
|
||
<div class="g-form-group"><label class="g-form-label">状态</label><select class="g-select" id="diTableStatus"><option selected>空闲</option><option>停用</option></select></div>
|
||
</div>
|
||
<div class="g-form-group"><label class="g-form-label">标签</label>
|
||
<div class="pdi-tag-input-wrap" id="diTagWrap">
|
||
<span class="pdi-tag-item">靠窗 <span class="remove" onclick="this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px"></i></span></span>
|
||
<input type="text" id="diTagInput" placeholder="输入后回车添加" style="border:none;outline:none;font-size:12px;flex:1;min-width:80px;" onkeydown="if(event.key==='Enter'){addDiTag();event.preventDefault();}" />
|
||
</div>
|
||
<div class="g-hint">输入标签名后按回车添加，如：靠窗、VIP、包厢</div>
|
||
</div>
|
||
</div>
|
||
<div class="g-drawer-ft"><button class="g-btn" onclick="closeDiDrawer()">取消</button><button class="g-btn g-btn-primary" id="diTableSubmit" onclick="closeDiDrawer()">确认添加</button></div>
|
||
</div>
|
||
|
||
<!-- 批量生成弹窗 -->
|
||
<div class="pdi-modal-mask" id="diBatchMask" onclick="if(event.target===this)closeDiBatch()">
|
||
<div class="pdi-modal">
|
||
<div class="pdi-modal-hd"><h3>批量生成桌位</h3><button class="g-drawer-close" onclick="closeDiBatch()"><i data-lucide="x" style="width:16px;height:16px"></i></button></div>
|
||
<div class="pdi-modal-bd">
|
||
<div class="g-form-group"><label class="g-form-label">所属区域</label><select class="g-select" id="diBatchArea" onchange="updateBatchPreview()"><option>大厅</option><option>包间</option><option>露台</option></select></div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
|
||
<div class="g-form-group"><label class="g-form-label">编号前缀</label><input type="text" class="g-input" id="diBatchPrefix" value="A" oninput="updateBatchPreview()" /></div>
|
||
<div class="g-form-group"><label class="g-form-label">起始编号</label><input type="number" class="g-input" id="diBatchStart" value="9" oninput="updateBatchPreview()" /></div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
|
||
<div class="g-form-group"><label class="g-form-label">生成数量</label><input type="number" class="g-input" id="diBatchCount" value="4" min="1" max="50" oninput="updateBatchPreview()" /></div>
|
||
<div class="g-form-group"><label class="g-form-label">座位数</label><select class="g-select" id="diBatchCap"><option>2人桌</option><option selected>4人桌</option><option>6人桌</option><option>8人桌</option></select></div>
|
||
</div>
|
||
<div class="pdi-preview-box">
|
||
<div class="pv-title">预览：将生成以下桌位</div>
|
||
<div class="pdi-preview-tags" id="diBatchPreview"></div>
|
||
</div>
|
||
</div>
|
||
<div class="pdi-modal-ft"><button class="g-btn" onclick="closeDiBatch()">取消</button><button class="g-btn g-btn-primary" onclick="closeDiBatch()">确认生成</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function openDiArea(mode, name) {
|
||
var t = document.getElementById('diAreaTitle');
|
||
var s = document.getElementById('diAreaSubmit');
|
||
if (mode === 'edit') {
|
||
t.textContent = '编辑区域';
|
||
s.textContent = '保存修改';
|
||
document.getElementById('diAreaName').value = name || '';
|
||
document.getElementById('diAreaDesc').value = '主要用餐区域，可容纳约48人同时用餐';
|
||
document.getElementById('diAreaSort').value = '1';
|
||
} else {
|
||
t.textContent = '添加区域';
|
||
s.textContent = '确认添加';
|
||
document.getElementById('diAreaName').value = '';
|
||
document.getElementById('diAreaDesc').value = '';
|
||
document.getElementById('diAreaSort').value = '1';
|
||
}
|
||
document.getElementById('diDrawerMask').classList.add('open');
|
||
document.getElementById('diAreaDrawer').classList.add('open');
|
||
}
|
||
|
||
function openDiTable(mode, code) {
|
||
var t = document.getElementById('diTableTitle');
|
||
var s = document.getElementById('diTableSubmit');
|
||
if (mode === 'edit') {
|
||
t.textContent = '编辑桌位 - ' + code;
|
||
s.textContent = '保存修改';
|
||
document.getElementById('diTableCode').value = code || '';
|
||
} else {
|
||
t.textContent = '添加桌位';
|
||
s.textContent = '确认添加';
|
||
document.getElementById('diTableCode').value = '';
|
||
}
|
||
document.getElementById('diDrawerMask').classList.add('open');
|
||
document.getElementById('diTableDrawer').classList.add('open');
|
||
}
|
||
|
||
function closeDiDrawer() {
|
||
document.getElementById('diDrawerMask').classList.remove('open');
|
||
document.getElementById('diAreaDrawer').classList.remove('open');
|
||
document.getElementById('diTableDrawer').classList.remove('open');
|
||
}
|
||
|
||
function addDiTag() {
|
||
var inp = document.getElementById('diTagInput');
|
||
var v = inp.value.trim();
|
||
if (!v) return;
|
||
var span = document.createElement('span');
|
||
span.className = 'pdi-tag-item';
|
||
span.innerHTML = v + ' <span class="remove" onclick="this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px"></i></span>';
|
||
document.getElementById('diTagWrap').insertBefore(span, inp);
|
||
inp.value = '';
|
||
}
|
||
|
||
function openDiBatch() {
|
||
document.getElementById('diBatchMask').classList.add('open');
|
||
updateBatchPreview();
|
||
}
|
||
|
||
function closeDiBatch() {
|
||
document.getElementById('diBatchMask').classList.remove('open');
|
||
}
|
||
|
||
function updateBatchPreview() {
|
||
var prefix = document.getElementById('diBatchPrefix').value || 'A';
|
||
var start = parseInt(document.getElementById('diBatchStart').value) || 1;
|
||
var count = Math.min(Math.max(parseInt(document.getElementById('diBatchCount').value) || 1, 1), 50);
|
||
var html = '';
|
||
for (var i = 0; i < count; i++) {
|
||
var num = (start + i).toString().padStart(2, '0');
|
||
html += '<span class="pdi-preview-tag">' + prefix + num + '</span>';
|
||
}
|
||
document.getElementById('diBatchPreview').innerHTML = html;
|
||
}
|
||
|
||
// init icons
|
||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||
</script>
|