库存管理界面

src/components/inventory/StockListTable.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <el-table :data="stockList" style="width: 100%" v-loading="loading">
+      <el-table-column prop="raw_material_name" label="原料名称"></el-table-column>
+      <el-table-column prop="stock" label="当前库存 (g)"></el-table-column>
+      <el-table-column prop="last_updated" label="最后更新时间">
+        <template #default="scope">
+          {{ formatRFC3339(scope.row.last_updated) }}
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pagination.page"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pagination.page_size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="pagination.total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, watch } from 'vue';
+import { InventoryApi } from '../../api/inventory';
+import { ElMessage } from 'element-plus';
+import { formatRFC3339 } from '../../utils/format';
+
+export default {
+  name: 'StockListTable',
+  props: {
+    stockFilter: {
+      type: String,
+      default: 'all', // 默认值与父组件保持一致
+    },
+    searchRawMaterialName: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props, { expose }) {
+    const stockList = ref([]);
+    const loading = ref(false);
+    const pagination = ref({
+      page: 1,
+      page_size: 10,
+      total: 0,
+    });
+
+    const fetchStockList = async (filter = props.stockFilter, rawMaterialName = props.searchRawMaterialName) => {
+      loading.value = true;
+      try {
+        const params = {
+          page: pagination.value.page,
+          page_size: pagination.value.page_size,
+        };
+        if (filter === 'in_stock') {
+          params.has_stock = true;
+        }
+        if (rawMaterialName) {
+          params.raw_material_name = rawMaterialName;
+        }
+        const res = await InventoryApi.getCurrentStockList(params);
+        stockList.value = res.data.list;
+        pagination.value.total = res.data.pagination.total;
+      } catch (error) {
+        ElMessage.error('获取库存列表失败');
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    const handleSizeChange = (val) => {
+      pagination.value.page_size = val;
+      fetchStockList();
+    };
+
+    const handleCurrentChange = (val) => {
+      pagination.value.page = val;
+      fetchStockList();
+    };
+
+    onMounted(() => {
+      fetchStockList();
+    });
+
+    watch(() => props.stockFilter, (newFilter) => {
+      pagination.value.page = 1; // 筛选条件变化时重置页码
+      fetchStockList(newFilter, props.searchRawMaterialName);
+    });
+
+    watch(() => props.searchRawMaterialName, (newRawMaterialName) => {
+      pagination.value.page = 1; // 搜索条件变化时重置页码
+      fetchStockList(props.stockFilter, newRawMaterialName);
+    });
+
+    // 暴露 fetchStockList 方法给父组件
+    expose({
+      fetchStockList,
+    });
+
+    return {
+      stockList,
+      loading,
+      pagination,
+      handleSizeChange,
+      handleCurrentChange,
+      formatRFC3339,
+    };
+  },
+};
+</script>

src/layouts/MainLayout.vue

@@ -115,6 +115,12 @@
             </el-icon>
             <template #title>配方管理</template>
           </el-menu-item>
+          <el-menu-item index="/inventory/stock">
+            <el-icon>
+              <Tickets/>
+            </el-icon>
+            <template #title>库存管理</template>
+          </el-menu-item>
 
         </el-sub-menu>
 
@@ -444,7 +450,7 @@ export default {
 
     const activeMenu = computed(() => {
       const path = route.path;
-      if (path.startsWith('/monitor') || path.startsWith('/pms') || path.startsWith('/devices') || path.startsWith('/device-templates') || path.startsWith('/alarms') || path.startsWith('/feed')) {
+      if (path.startsWith('/monitor') || path.startsWith('/pms') || path.startsWith('/devices') || path.startsWith('/device-templates') || path.startsWith('/alarms') || path.startsWith('/feed') || path.startsWith('/inventory')) {
         return path;
       }
       return route.path;

src/views/inventory/StockManagement.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="stock-management-container">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <div class="title-container">
+            <h2 class="page-title">库存管理</h2>
+            <el-button type="text" @click="refreshList" class="refresh-btn" title="刷新库存列表">
+              <el-icon :size="20"><Refresh /></el-icon>
+            </el-button>
+          </div>
+          <div class="filter-controls">
+            <el-input
+              v-model="searchRawMaterialName"
+              placeholder="按原料名称搜索"
+              clearable
+              @keyup.enter="refreshList"
+              style="width: 200px; margin-right: 10px;"
+            ></el-input>
+            <el-select v-model="stockFilter" placeholder="筛选库存" @change="refreshList" style="width: 150px;">
+              <el-option label="所有原料" value="all"></el-option>
+              <el-option label="有库存的原料" value="in_stock"></el-option>
+            </el-select>
+          </div>
+        </div>
+      </template>
+      <stock-list-table
+        ref="stockListTableRef"
+        :stockFilter="stockFilter"
+        :searchRawMaterialName="searchRawMaterialName"
+      ></stock-list-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import { Refresh } from '@element-plus/icons-vue';
+import StockListTable from '../../components/inventory/StockListTable.vue';
+
+export default {
+  name: 'StockManagement',
+  components: {
+    StockListTable,
+    Refresh,
+  },
+  setup() {
+    const stockListTableRef = ref(null);
+    const stockFilter = ref('all'); // 默认显示所有原料
+    const searchRawMaterialName = ref(''); // 搜索原料名称
+
+    const refreshList = () => {
+      if (stockListTableRef.value) {
+        stockListTableRef.value.fetchStockList(stockFilter.value, searchRawMaterialName.value);
+      }
+    };
+
+    return {
+      stockListTableRef,
+      stockFilter,
+      searchRawMaterialName,
+      refreshList,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.stock-management-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 0;
+}
+
+.title-container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.refresh-btn {
+  color: black;
+  background-color: transparent;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+
+.filter-controls {
+  display: flex;
+  align-items: center;
+}
+</style>