feat(web-admin): add remaining-stock pills on QC material list.

Filter batches via stockStatus capsules before stock-in; default to available stock.

Co-authored-by: Cursor <cursoragent@cursor.com>

web-admin/src/views/quality-inspection/qc-material/index.vue

@@ -52,6 +52,26 @@
           <div class="list-toolbar-selected">
             已选 <span class="sel-num">{{ selectedRows.length }}</span> 项
           </div>
+          <div
+            class="panel-pill-tabs panel-pill-tabs--toolbar list-toolbar-stock-pills"
+            role="tablist"
+            aria-label="库存状态"
+          >
+            <div class="panel-pill-tabs__track">
+              <button
+                v-for="opt in STOCK_STATUS_PILLS"
+                :key="opt.value"
+                type="button"
+                role="tab"
+                class="panel-pill-tabs__btn"
+                :class="{ 'is-active': stockStatusFilter === opt.value }"
+                :aria-selected="stockStatusFilter === opt.value"
+                @click="handleStockStatusChange(opt.value)"
+              >
+                {{ opt.label }}
+              </button>
+            </div>
+          </div>
           <el-button class="btn-main" type="primary" @click="handleOpenStockIn">
             <el-icon><Upload /></el-icon>
             入库
@@ -1267,6 +1287,23 @@
     { name: 'stockCheck', label: '库存盘点' }
   ] as const
 
+  const STOCK_STATUS_PILLS = [
+    { value: 'all', label: '全部' },
+    { value: 'available', label: '未用完' },
+    { value: 'exhausted', label: '已用完' }
+  ] as const
+
+  type StockStatusFilter = (typeof STOCK_STATUS_PILLS)[number]['value']
+
+  const stockStatusFilter = ref<StockStatusFilter>('available')
+
+  function handleStockStatusChange(value: StockStatusFilter) {
+    if (stockStatusFilter.value === value) return
+    stockStatusFilter.value = value
+    pagination.page = 1
+    loadData()
+  }
+
   const activeTab = ref('list')
   const usageTabMounted = ref(false)
   const stockCheckTabMounted = ref(false)
@@ -1712,7 +1749,8 @@
         page,
         pageSize,
         keyword: searchForm.keyword || undefined,
-        status: searchForm.status || undefined
+        status: searchForm.status || undefined,
+        stockStatus: stockStatusFilter.value
       })
     )
     return all.map(mapQcMaterialExportRow)
@@ -1789,7 +1827,8 @@
         page: pagination.page,
         pageSize: pagination.pageSize,
         keyword: searchForm.keyword || undefined,
-        status: searchForm.status || undefined
+        status: searchForm.status || undefined,
+        stockStatus: stockStatusFilter.value
       })
       tableData.value = res.list || []
       pagination.total = res.total ?? 0
@@ -1806,6 +1845,7 @@
   function handleReset() {
     searchForm.keyword = ''
     searchForm.status = ''
+    stockStatusFilter.value = 'available'
     pagination.page = 1
     loadData()
   }
@@ -2444,6 +2484,17 @@
 </script>
 
 <style scoped lang="scss">
+  .list-toolbar-stock-pills.panel-pill-tabs--toolbar {
+    margin: 0 8px 0 0;
+    justify-content: flex-start;
+
+    .panel-pill-tabs__btn {
+      min-width: 64px;
+      padding: 6px 12px;
+      font-size: 12px;
+    }
+  }
+
   .table-op-btns {
     display: flex;
     flex-wrap: wrap;