库存管理界面

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>