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

<script setup lang="ts">
import { onMounted } from 'vue'
import { useInventory } from '@/modules/inventory/composables/useInventory'

const { state, loadMovements, 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'
}
onMounted(() => { loadMovements() })
</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>