实现所有监控展示

src/views/monitor/RawMaterialStockLogsView.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="raw-material-stock-logs-view">
+    <GenericMonitorList
+      :fetchData="fetchRawMaterialStockLogs"
+      :columnsConfig="rawMaterialStockLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getRawMaterialStockLogs } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchRawMaterialStockLogs = async (params) => {
+  return await getRawMaterialStockLogs(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const rawMaterialStockLogColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '原料ID',
+    dataIndex: 'raw_material_id',
+    key: 'raw_material_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '来源类型',
+    dataIndex: 'source_type',
+    key: 'source_type',
+    filterType: 'select',
+    filterOptions: [
+      { text: '采购入库', value: '采购入库' },
+      { text: '饲喂出库', value: '饲喂出库' },
+      { text: '变质出库', value: '变质出库' },
+      { text: '售卖出库', value: '售卖出库' },
+      { text: '杂用领取', value: '杂用领取' },
+      { text: '手动盘点', value: '手动盘点' },
+    ],
+    minWidth: 130,
+  },
+  {
+    title: '来源ID',
+    dataIndex: 'source_id',
+    key: 'source_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '变更数量',
+    dataIndex: 'change_amount',
+    key: 'change_amount',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '发生时间',
+    dataIndex: 'happened_at',
+    key: 'happened_at',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remarks',
+    key: 'remarks',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>