tz/ERP
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化设置界面布局,修复订单界面时间格式问题

Browse Source
This commit is contained in:
zzh 2025-11-24 10:09:55 +08:00
parent c0b19800a9
commit 80998f16ec
2 changed files with 140 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

228
frontend/js/components/settings.js
View File

@ -2,125 +2,161 @@ Router.register('/settings', async () => {
const me = await API.me().catch(()=>({}));
const users = (me && me.role === 'superadmin') ? await API.adminUsers().catch(()=>({list:[]})) : {list:[]};
const userList = (users.list||[]).map(u=>`<li style="display:flex;justify-content:space-between;align-items:center"><div><span style="margin-right:8px">${u.username}</span><span class="badge">${u.role}</span></div><button class="btn btn-secondary" data-delete-user="${u.username}" style="padding:4px 8px;font-size:12px">删除</button></li>`).join('') || '<li>暂无用户</li>';
const html = `<div class="grid cols-2">
<div class="card">
<div style="font-weight:600;margin-bottom:16px">账户设置</div>
<div style="margin-bottom:16px">
<div style="font-weight:500;margin-bottom:8px">当前用户</div>
<div id="user-card" class="badge">${(me && me.username) ? me.username : '未登录'}</div>
const html = `
<div class="page-container">
<div class="page-header">
<h1>系统设置</h1>
</div>
<!-- 账户设置区域 -->
<div class="card" style="margin-bottom:24px">
<h2 style="font-size:18px;font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid var(--border)">👤 账户设置</h2>
<div style="margin-bottom:24px">
<div style="font-weight:500;margin-bottom:8px;color:var(--text-2)">当前登录用户</div>
<div id="user-card" class="badge" style="font-size:16px;padding:8px 16px">${(me && me.username) ? me.username : '未登录'}</div>
</div>
<div style="margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border)">
<div style="font-weight:500;margin-bottom:12px">头像设置</div>
<div style="display:flex;align-items:center;gap:16px;margin-bottom:12px">
<img id="preview-avatar" src="${(me && me.avatar) ? me.avatar : './assets/user-avatar.svg'}" alt="头像预览" style="width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--border)" />
<div style="flex:1">
<div class="field" style="margin-bottom:8px">
<label>选择头像图片</label>
<input type="file" id="avatar-file" accept="image/*" class="input" style="padding:6px" />
</div>
<div style="font-size:12px;color:var(--text-2)">支持 JPG、PNG、GIF（动图）、WEBP 等图片格式，最大 5MB，建议尺寸 200x200 像素</div>
<div style="padding:20px;background:var(--surface);border-radius:8px;border:1px solid var(--border)">
<div style="font-weight:600;margin-bottom:16px;font-size:16px">头像设置</div>
<div style="display:flex;align-items:flex-start;gap:24px">
<div style="flex-shrink:0">
<img id="preview-avatar" src="${(me && me.avatar) ? me.avatar : './assets/user-avatar.svg'}" alt="头像预览" style="width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,0.1)" />
</div>
<div style="flex:1">
<div class="field" style="margin-bottom:12px">
<label style="font-weight:500">选择头像图片</label>
<input type="file" id="avatar-file" accept="image/*" class="input" style="padding:8px" />
</div>
<div style="font-size:13px;color:var(--text-2);margin-bottom:16px;line-height:1.5">
支持 JPG、PNG、GIF（动图）、WEBP 等图片格式<br/>
最大 5MB，建议尺寸 200x200 像素
</div>
<div class="actions" style="gap:12px">
<button class="btn btn-primary" id="upload-avatar-btn">上传头像</button>
<button class="btn btn-secondary" id="reset-avatar-btn">恢复默认</button>
</div>
</div>
</div>
<div class="actions">
<button class="btn" id="upload-avatar-btn">上传头像</button>
<button class="btn btn-secondary" id="reset-avatar-btn">恢复默认</button>
</div>
</div>
</div>
${(me && me.role === 'superadmin') ? `
<div class="card">
<div style="font-weight:600;margin-bottom:16px">用户管理</div>
<!-- 用户管理区域 -->
<div class="card" style="margin-bottom:24px">
<h2 style="font-size:18px;font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid var(--border)">👥 用户管理</h2>
<div style="margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border)">
<div style="font-weight:500;margin-bottom:12px">添加新用户</div>
<div class="field">
<label>用户名</label>
<input id="new-username" class="input" placeholder="输入用户名" />
<div class="grid cols-2" style="gap:24px;margin-bottom:24px">
<!-- 添加新用户 -->
<div style="padding:20px;background:var(--surface);border-radius:8px;border:1px solid var(--border)">
<div style="font-weight:600;margin-bottom:16px;font-size:15px">➕ 添加新用户</div>
<div class="field">
<label>用户名</label>
<input id="new-username" class="input" placeholder="输入用户名" />
</div>
<div class="field">
<label>密码</label>
<input id="new-password" type="password" class="input" placeholder="输入密码（至少6位）" />
</div>
<div class="field">
<label>角色</label>
<select id="new-role" class="input">
<option value="admin">管理员 (admin)</option>
<option value="superadmin">超级管理员 (superadmin)</option>
</select>
</div>
<div class="actions">
<button id="add-user-btn" class="btn btn-primary" style="width:100%">添加用户</button>
</div>
</div>
<div class="field">
<label>密码</label>
<input id="new-password" type="password" class="input" placeholder="输入密码" />
<!-- 修改用户密码 -->
<div style="padding:20px;background:var(--surface);border-radius:8px;border:1px solid var(--border)">
<div style="font-weight:600;margin-bottom:16px;font-size:15px">🔑 修改用户密码</div>
<div class="field">
<label>选择用户</label>
<select id="reset-user" class="input">${(users.list||[]).map(u=>`<option value="${u.username}">${u.username}</option>`).join('')}</select>
</div>
<div class="field">
<label>新密码</label>
<input id="reset-pass" type="password" class="input" placeholder="输入新密码" />
</div>
<div class="actions">
<button id="change-btn" class="btn btn-primary" style="width:100%">修改密码</button>
</div>
</div>
<div class="field">
<label>角色</label>
<select id="new-role" class="input">
<option value="admin">管理员 (admin)</option>
<option value="superadmin">超级管理员 (superadmin)</option>
</select>
</div>
<div class="actions"><button id="add-user-btn" class="btn">添加用户</button></div>
</div>
<div style="margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border)">
<div style="font-weight:500;margin-bottom:12px">修改用户密码</div>
<div class="field">
<label>选择用户</label>
<select id="reset-user" class="input">${(users.list||[]).map(u=>`<option value="${u.username}">${u.username}</option>`).join('')}</select>
</div>
<div class="field">
<label>新密码</label>
<input id="reset-pass" type="password" class="input" />
</div>
<div class="actions"><button id="change-btn" class="btn">修改密码</button></div>
<!-- 用户列表 -->
<div style="padding:20px;background:var(--surface);border-radius:8px;border:1px solid var(--border)">
<div style="font-weight:600;margin-bottom:12px;font-size:15px">📋 用户列表</div>
<ul class="list">${userList}</ul>
</div>
</div>
<div style="margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border)">
<div style="font-weight:500;margin-bottom:12px">水印设置</div>
<div style="display:flex;align-items:center;gap:12px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:8px">
<label style="flex:1;cursor:pointer;display:flex;align-items:center;gap:8px">
<input type="checkbox" id="watermark-toggle" ${localStorage.getItem('watermarkEnabled') !== 'false' ? 'checked' : ''} style="width:18px;height:18px;cursor:pointer" />
<span style="font-size:14px">启用页面水印（显示用户名和时间戳）</span>
<!-- 系统配置区域 -->
<div class="card" style="margin-bottom:24px">
<h2 style="font-size:18px;font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid var(--border)">⚙️ 系统配置</h2>
<div style="padding:20px;background:var(--surface);border-radius:8px;border:1px solid var(--border)">
<div style="font-weight:600;margin-bottom:12px;font-size:15px">💧 水印设置</div>
<div style="display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg);border:1px solid var(--border);border-radius:6px">
<label style="flex:1;cursor:pointer;display:flex;align-items:center;gap:12px">
<input type="checkbox" id="watermark-toggle" ${localStorage.getItem('watermarkEnabled') !== 'false' ? 'checked' : ''} style="width:20px;height:20px;cursor:pointer" />
<span style="font-size:15px;font-weight:500">启用页面水印（显示用户名和时间戳）</span>
</label>
</div>
<div style="margin-top:8px;font-size:12px;color:var(--text-2)">
水印用于防止数据泄露和责任追溯，建议保持启用状态
<div style="margin-top:12px;font-size:13px;color:var(--text-2);line-height:1.5">
💡 水印用于防止数据泄露和责任追溯，建议保持启用状态
</div>
</div>
</div>
<!-- 数据管理区域 -->
<div class="card" style="margin-bottom:24px">
<h2 style="font-size:18px;font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid var(--border)">📊 数据管理</h2>
<!-- 数据概览 -->
<div style="padding:20px;background:var(--surface);border-radius:8px;border:1px solid var(--border);margin-bottom:20px">
<div style="font-weight:600;margin-bottom:16px;font-size:15px">📈 数据概览</div>
<div class="grid cols-2" style="gap:12px">
<div style="display:flex;flex-direction:column;gap:8px">
<div class="badge" id="overview-stats" style="padding:10px">良/不良统计：加载中</div>
<div class="badge" id="overview-defects" style="padding:10px">不良明细：加载中</div>
<div class="badge" id="overview-mac" style="padding:10px">MAC与批次：加载中</div>
<div class="badge" id="overview-shipments" style="padding:10px">发货记录：加载中</div>
</div>
<div style="display:flex;flex-direction:column;gap:8px">
<div class="badge" id="overview-devices" style="padding:10px">设备状态：加载中</div>
<div class="badge" id="overview-personnel" style="padding:10px">人员信息：加载中</div>
<div class="badge" id="overview-qa" style="padding:10px">质检报告：加载中</div>
<div class="badge" id="overview-production" style="padding:10px">生产时间：加载中</div>
</div>
</div>
</div>
<div style="font-weight:500;margin-bottom:12px">超级管理员工具</div>
<div style="margin-top:12px"></div>
<div class="grid cols-2" style="margin-top:8px">
<div class="card">
<div style="font-weight:600;margin-bottom:8px">清空上传数据</div>
<div class="actions" style="flex-wrap:wrap;gap:6px">
<button class="btn" data-clear="mac">清空MAC与批次</button>
<button class="btn" data-clear="stats">清空良/不良统计</button>
<button class="btn" data-clear="defects">清空不良明细</button>
<button class="btn" data-clear="shipments">清空发货记录</button>
<!-- 数据清空操作 -->
<div class="grid cols-2" style="gap:20px">
<div style="padding:20px;background:var(--surface);border-radius:8px;border:1px solid var(--border)">
<div style="font-weight:600;margin-bottom:12px;font-size:15px;color:var(--danger)">🗑️ 清空上传数据</div>
<div class="actions" style="flex-wrap:wrap;gap:8px">
<button class="btn btn-secondary" data-clear="mac" style="flex:1;min-width:140px">清空MAC与批次</button>
<button class="btn btn-secondary" data-clear="stats" style="flex:1;min-width:140px">清空良/不良统计</button>
<button class="btn btn-secondary" data-clear="defects" style="flex:1;min-width:140px">清空不良明细</button>
<button class="btn btn-secondary" data-clear="shipments" style="flex:1;min-width:140px">清空发货记录</button>
</div>
</div>
<div class="card">
<div style="font-weight:600;margin-bottom:8px">清空扩展采集</div>
<div class="actions" style="flex-wrap:wrap;gap:6px">
<button class="btn" data-clear="devices">清空设备状态</button>
<button class="btn" data-clear="environment">清空环境参数</button>
<button class="btn" data-clear="personnel">清空人员信息</button>
<button class="btn" data-clear="qa">清空质检报告</button>
<button class="btn" data-clear="production">清空生产时间</button>
<div style="padding:20px;background:var(--surface);border-radius:8px;border:1px solid var(--border)">
<div style="font-weight:600;margin-bottom:12px;font-size:15px;color:var(--danger)">🗑️ 清空扩展采集</div>
<div class="actions" style="flex-wrap:wrap;gap:8px">
<button class="btn btn-secondary" data-clear="devices" style="flex:1;min-width:140px">清空设备状态</button>
<button class="btn btn-secondary" data-clear="environment" style="flex:1;min-width:140px">清空环境参数</button>
<button class="btn btn-secondary" data-clear="personnel" style="flex:1;min-width:140px">清空人员信息</button>
<button class="btn btn-secondary" data-clear="qa" style="flex:1;min-width:140px">清空质检报告</button>
<button class="btn btn-secondary" data-clear="production" style="flex:1;min-width:140px">清空生产时间</button>
</div>
</div>
</div>
<div style="margin-top:12px"></div>
<div class="grid cols-2" style="margin-top:8px">
<div class="card">
<div style="font-weight:600;margin-bottom:8px">数据概览</div>
<div class="grid cols-2">
<div>
<div class="badge" id="overview-stats">良/不良统计：加载中</div>
<div class="badge" id="overview-defects">不良明细：加载中</div>
<div class="badge" id="overview-mac">MAC与批次：加载中</div>
</div>
<div>
<div class="badge" id="overview-shipments">发货记录：加载中</div>
<div class="badge" id="overview-devices">设备状态：加载中</div>
<div class="badge" id="overview-personnel">人员信息：加载中</div>
<div class="badge" id="overview-qa">质检报告：加载中</div>
<div class="badge" id="overview-production">生产时间：加载中</div>
</div>
</div>
</div>
</div>
<div style="margin-top:12px"><div style="font-weight:600;margin-bottom:8px">用户列表</div><ul class="list">${userList}</ul></div>
</div>
` : ''}
</div>`;

10
frontend/js/components/work-order.js
View File

@ -288,14 +288,20 @@
const statusText = order.statusText || '已下发';
const isConfirmed = order.status === 'confirmed';
// 格式化日期时间，去掉 T
const formatDateTime = (dateTime) => {
if (!dateTime || dateTime === '-') return '-';
return dateTime.replace('T', ' ');
};
return `
<tr>
<td>${order.factory}</td>
<td>${order.orderNo}</td>
<td>${order.productModel || '-'}</td>
<td>${order.orderQty}</td>
<td>${order.productionStartTime || '-'}</td>
<td>${order.productionEndTime || '-'}</td>
<td>${formatDateTime(order.productionStartTime)}</td>
<td>${formatDateTime(order.productionEndTime)}</td>
<td><span class="status-badge ${statusClass}">${statusText}</span></td>
<td>${order.remark || '-'}</td>
${isSuperAdmin ? `