x

frontend/src/modules/inventory/components/MovementsTab.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useInventory } from '@/modules/inventory/composables/useInventory'
+
+const { state, getMovementTypeLabel, getMovementBadgeClass, formatDateTime } = useInventory()
+
+const getMovementTagType = (movementType: string): 'success' | 'danger' | 'warning' | 'info' | '' => {
+  const badgeClass = getMovementBadgeClass(movementType)
+  if (badgeClass === 'badge-success') return 'success'
+  if (badgeClass === 'badge-error') return 'danger'
+  if (badgeClass === 'badge-warning') return 'warning'
+  return 'info'
+}
+</script>
+
+<template>
+  <div class="movements-tab">
+    <el-table :data="state.movements" style="width: 100%" v-loading="state.loading" empty-text="暂无库存变动记录">
+      <el-table-column label="物料">
+        <template #default="{ row }">
+          {{ row.product_name }}{{ row.product_sku ? ' (' + row.product_sku + ')' : '' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="类型" width="140">
+        <template #default="{ row }">
+          <el-tag :type="getMovementTagType(row.movement_type)" size="small">
+            {{ getMovementTypeLabel(row.movement_type) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="quantity" label="数量" width="80" />
+      <el-table-column prop="before_quantity" label="变动前" width="80" />
+      <el-table-column prop="after_quantity" label="变动后" width="80" />
+      <el-table-column label="时间" width="180">
+        <template #default="{ row }">
+          {{ formatDateTime(row.created_at) }}
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<style scoped>
+.movements-tab {
+  padding: 0;
+}
+</style>