<h2>库存页面操作列设计</h2>
|
<p class="subtitle">为库存信息和库存明细页面添加MES接口操作按钮</p>
|
|
<div class="section">
|
<h3>1. 库存信息页面 - 托盘级别操作</h3>
|
<p class="subtitle">当前页面显示托盘编号、货位编号等信息，需要添加进站/出站操作</p>
|
|
<div class="mockup">
|
<div class="mockup-header">预览：库存信息表格</div>
|
<div class="mockup-body">
|
<table class="mock-table">
|
<thead>
|
<tr>
|
<th>托盘编号</th>
|
<th>货位编号</th>
|
<th>仓库</th>
|
<th>创建人</th>
|
<th class="op-col">操作</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td>P001</td>
|
<td>A01-01-01</td>
|
<td>一号仓</td>
|
<td>张三</td>
|
<td class="op-col">
|
<button class="mock-button mock-btn-sm">进站</button>
|
<button class="mock-button mock-btn-sm mock-btn-primary">出站</button>
|
</td>
|
</tr>
|
<tr>
|
<td>P002</td>
|
<td>A01-01-02</td>
|
<td>一号仓</td>
|
<td>李四</td>
|
<td class="op-col">
|
<button class="mock-button mock-btn-sm">进站</button>
|
<button class="mock-button mock-btn-sm mock-btn-primary">出站</button>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
|
<div class="section">
|
<h3>2. 库存明细页面 - 电芯级别操作</h3>
|
<p class="subtitle">当前页面显示物料编号、电芯码等信息，需要添加绑定/解绑/NG上报操作</p>
|
|
<div class="mockup">
|
<div class="mockup-header">预览：库存明细表格</div>
|
<div class="mockup-body">
|
<table class="mock-table">
|
<thead>
|
<tr>
|
<th>物料编号</th>
|
<th>物料名称</th>
|
<th>电芯码</th>
|
<th>库存数量</th>
|
<th>状态</th>
|
<th class="op-col">操作</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td>M001</td>
|
<td>三元锂电池</td>
|
<td>SN20240101001</td>
|
<td>100</td>
|
<td><span class="mock-tag mock-tag-success">正常</span></td>
|
<td class="op-col">
|
<button class="mock-button mock-btn-sm mock-btn-primary">绑定</button>
|
<button class="mock-button mock-btn-sm">解绑</button>
|
<button class="mock-button mock-btn-sm mock-btn-danger">NG上报</button>
|
</td>
|
</tr>
|
<tr>
|
<td>M001</td>
|
<td>三元锂电池</td>
|
<td>SN20240101002</td>
|
<td>100</td>
|
<td><span class="mock-tag mock-tag-warning">异常</span></td>
|
<td class="op-col">
|
<button class="mock-button mock-btn-sm mock-btn-primary">绑定</button>
|
<button class="mock-button mock-btn-sm">解绑</button>
|
<button class="mock-button mock-btn-sm mock-btn-danger">NG上报</button>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
|
<div class="section">
|
<h3>按钮操作确认问题</h3>
|
<p class="subtitle">MES接口调用可能失败或需要额外参数</p>
|
|
<div class="options">
|
<div class="option" data-choice="direct" onclick="toggleSelect(this)">
|
<div class="letter">A</div>
|
<div class="content">
|
<h3>直接调用</h3>
|
<p>点击按钮直接调用MES接口，成功/失败后弹出提示</p>
|
<div class="pros-cons">
|
<div class="pros"><h4>优点</h4><ul><li>操作简单快捷</li><li>适合高频操作</li></ul></div>
|
<div class="cons"><h4>缺点</h4><ul><li>无法输入额外参数</li><li>错误后难以重试</li></ul></div>
|
</div>
|
</div>
|
</div>
|
<div class="option" data-choice="dialog" onclick="toggleSelect(this)">
|
<div class="letter">B</div>
|
<div class="content">
|
<h3>弹窗确认</h3>
|
<p>点击后弹出确认对话框，显示参数并可修改，确认后调用</p>
|
<div class="pros-cons">
|
<div class="pros"><h4>优点</h4><ul><li>可预览/修改参数</li><li>防止误操作</li><li>显示详细错误信息</li></ul></div>
|
<div class="cons"><h4>缺点</h4><ul><li>操作步骤多</li><li>影响效率</li></ul></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<style>
|
.mock-table {
|
width: 100%;
|
border-collapse: collapse;
|
font-size: 13px;
|
}
|
.mock-table th, .mock-table td {
|
border: 1px solid #e0e0e0;
|
padding: 10px 12px;
|
text-align: left;
|
}
|
.mock-table th {
|
background: #f5f5f5;
|
font-weight: 600;
|
color: #333;
|
}
|
.mock-table .op-col {
|
width: 180px;
|
text-align: center;
|
}
|
.mock-table tbody tr:nth-child(even) {
|
background: #fafafa;
|
}
|
.mock-btn-sm {
|
padding: 5px 12px;
|
font-size: 12px;
|
margin: 0 3px;
|
}
|
.mock-btn-primary {
|
background: #1f5eff;
|
color: white;
|
border: none;
|
}
|
.mock-btn-danger {
|
background: #f56c6c;
|
color: white;
|
border: none;
|
}
|
.mock-tag {
|
display: inline-block;
|
padding: 3px 8px;
|
border-radius: 4px;
|
font-size: 12px;
|
}
|
.mock-tag-success {
|
background: #e1f5e1;
|
color: #4caf50;
|
}
|
.mock-tag-warning {
|
background: #fff3e0;
|
color: #ff9800;
|
}
|
.pros-cons {
|
display: flex;
|
gap: 16px;
|
margin-top: 12px;
|
}
|
.pros, .cons {
|
flex: 1;
|
font-size: 13px;
|
}
|
.pros h4 {
|
color: #4caf50;
|
margin: 0 0 6px 0;
|
}
|
.cons h4 {
|
color: #f56c6c;
|
margin: 0 0 6px 0;
|
}
|
.pros ul, .cons ul {
|
margin: 0;
|
padding-left: 16px;
|
}
|
.pros li, .cons li {
|
margin-bottom: 4px;
|
}
|
</style>
|
