Inventory-Management-System/templates/dashboard.html

{% extends "base.html" %}
{% block title %}库存看板{% endblock %}
{% block content %}
<div class="stats">
  <div class="stat"><div class="num">{{ rows|length }}</div><div class="lbl">物料种类</div></div>
  <div class="stat warn"><div class="num">{{ low }}</div><div class="lbl">低于安全库存</div></div>
  <div class="stat danger"><div class="num">{{ negative }}</div><div class="lbl">库存为负(缺料)</div></div>
</div>

<div class="tabs">
  <button class="tab active" type="button" onclick="showTab('mat', this)">📦 库存预警</button>
  {% if can_bom %}<button class="tab" type="button" onclick="showTab('bom', this)">🔧 BOM 物料齐套</button>{% endif %}
</div>

<!-- 标签一: 全部物料库存 -->
<div id="tab-mat">
  <table class="tbl">
    <thead>
      <tr><th>物料编号</th><th>型号 / 规格</th><th>单位</th><th>在库</th><th>安全库存</th><th>状态</th></tr>
    </thead>
    <tbody>
      {% for r in rows %}
      <tr class="row-{{ r.status }}">
        <td>{{ r.m.part_number }}</td>
        <td>{{ r.m.manufacturer or '-' }}</td>
        <td>{{ r.m.unit }}</td>
        <td class="num">{{ '%.2f'|format(r.stock) }}</td>
        <td class="num">{{ '%.2f'|format(r.m.safety_stock or 0) }}</td>
        <td>
          {% if r.status=='danger' %}<span class="badge danger">缺料</span>
          {% elif r.status=='warn' %}<span class="badge warn">偏低</span>
          {% else %}<span class="badge ok">正常</span>{% endif %}
        </td>
      </tr>
      {% else %}
      <tr><td colspan="6" class="muted">暂无物料, 请先到"物料"页面添加</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% if can_bom %}
<!-- 标签二: BOM 物料齐套看板 -->
<div id="tab-bom" style="display:none">
  {% if bom_board %}
  <div class="bom-filter">
    <label for="bomSelect">选择 BOM</label>
    <select id="bomSelect" onchange="filterBom()">
      <option value="all">全部 BOM（总览）</option>
      {% for bb in bom_board %}
      <option value="{{ bb.b.id }}">{{ bb.b.code }}{% if bb.b.name %} · {{ bb.b.name }}{% endif %}</option>
      {% endfor %}
    </select>
    <span class="muted" id="bomCount"></span>
  </div>
  {% for bb in bom_board %}
  <div class="card" data-bid="{{ bb.b.id }}" style="margin-bottom:16px">
    <div class="card-head">
      <strong>{{ bb.b.code }}</strong>
      <span class="muted">{{ bb.b.name or '' }}</span>
      {% if bb.status=='danger' %}<span class="badge danger">缺料</span>
      {% elif bb.status=='warn' %}<span class="badge warn">部分偏低</span>
      {% else %}<span class="badge ok">齐套</span>{% endif %}
    </div>
    <table class="tbl" style="box-shadow:none; margin:0">
      <thead>
        <tr><th>物料编号</th><th>型号 / 规格</th><th>单位</th><th>单套用量</th><th>当前在库</th><th>状态</th></tr>
      </thead>
      <tbody>
        {% for it in bb.parts %}
        <tr class="row-{{ it.status }}">
          <td><a href="{{ url_for('material_detail', mid=it.m.id) }}">{{ it.m.part_number }}</a></td>
          <td>{{ it.m.manufacturer or '-' }}</td>
          <td>{{ it.m.unit }}</td>
          <td class="num">{{ '%.4g'|format(it.qty) }}</td>
          <td class="num">{{ '%.2f'|format(it.stock) }}</td>
          <td>
            {% if it.status=='danger' %}<span class="badge danger">缺料</span>
            {% elif it.status=='warn' %}<span class="badge warn">偏低</span>
            {% else %}<span class="badge ok">正常</span>{% endif %}
          </td>
        </tr>
        {% else %}
        <tr><td colspan="6" class="muted">该 BOM 暂无组成物料</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endfor %}
  {% else %}
  <p class="muted">暂无 BOM，请先到 BOM 页面导入或新建。</p>
  {% endif %}
</div>
{% endif %}

<script>
function showTab(id, btn){
  document.getElementById('tab-mat').style.display = id==='mat' ? 'block' : 'none';
  document.getElementById('tab-bom').style.display = id==='bom' ? 'block' : 'none';
  document.querySelectorAll('.tabs .tab').forEach(b=>b.classList.remove('active'));
  btn.classList.add('active');
  if(id==='bom') filterBom();
}
function filterBom(){
  var sel = document.getElementById('bomSelect');
  if(!sel) return;
  var v = sel.value;
  var cards = document.querySelectorAll('#tab-bom [data-bid]');
  cards.forEach(function(c){
    c.style.display = (v==='all' || c.getAttribute('data-bid')===v) ? 'block' : 'none';
  });
  var cnt = document.getElementById('bomCount');
  if(cnt) cnt.textContent = (v==='all') ? ('共 ' + cards.length + ' 棵 BOM') : ('已选 1 / ' + cards.length + ' 棵');
}
filterBom();
</script>
{% endblock %}