This commit is contained in:
2026-04-29 18:35:34 +08:00
parent 61fd83b870
commit 98dfa3ac02
12 changed files with 249 additions and 58 deletions
@@ -1,6 +1,6 @@
<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useRoute, useRouter, RouterLink } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useToastStore } from '@/stores/toast'
import { usePageTitle } from '@/composables/usePageTitle'
@@ -16,6 +16,8 @@ import {
IconEdit,
IconTrash,
IconSearch,
IconTool,
IconUser,
} from '@tabler/icons-vue'
usePageTitle('warehouse.container_detail')
@@ -557,6 +559,8 @@ onMounted(async () => {
<th class="px-5 py-3 font-medium">{{ t('warehouse.serial_number') }}</th>
<th class="px-5 py-3 font-medium">{{ t('warehouse.remark') }}</th>
<th class="px-5 py-3 font-medium w-20 text-center">{{ t('warehouse.quantity') }}</th>
<th class="px-5 py-3 font-medium w-24 text-center">{{ t('work_order.work_order_count') }}</th>
<th class="px-5 py-3 font-medium">{{ t('customer.related_customers') }}</th>
<th class="px-5 py-3 font-medium whitespace-nowrap">{{ t('warehouse.created_at') }}</th>
<th class="px-5 py-3 font-medium whitespace-nowrap">{{ t('warehouse.updated_at') }}</th>
<th class="px-5 py-3 font-medium">{{ t('warehouse.created_by') }}</th>
@@ -565,7 +569,7 @@ onMounted(async () => {
</thead>
<tbody>
<tr v-if="loadingItems">
<td colspan="8" class="px-5 py-8 text-center">
<td colspan="10" class="px-5 py-8 text-center">
<svg class="mx-auto h-5 w-5 animate-spin text-gray-400" viewBox="0 0 24 24" fill="none">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
@@ -573,7 +577,7 @@ onMounted(async () => {
</td>
</tr>
<tr v-else-if="items.length === 0">
<td colspan="8" class="px-5 py-8 text-center text-gray-400 dark:text-gray-500">
<td colspan="10" class="px-5 py-8 text-center text-gray-400 dark:text-gray-500">
{{ t('warehouse.no_items') }}
</td>
</tr>
@@ -593,6 +597,29 @@ onMounted(async () => {
<td class="px-5 py-3 text-xs text-gray-500 dark:text-gray-400 max-w-[140px] truncate">{{ item.SerialNumber || '—' }}</td>
<td class="px-5 py-3 text-xs text-gray-500 dark:text-gray-400 max-w-[200px] truncate">{{ item.Remark || '—' }}</td>
<td class="px-5 py-3 text-center text-sm">{{ item.Quantity }}</td>
<td class="px-5 py-3 text-center">
<span v-if="item.WorkOrderCount > 0" class="inline-flex items-center gap-1 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700 dark:bg-orange-900/40 dark:text-orange-400">
<IconTool :size="12" />
{{ item.WorkOrderCount }}
</span>
<span v-else class="text-gray-400"></span>
</td>
<td class="px-5 py-3">
<div v-if="item.Customers && item.Customers.length > 0" class="flex flex-wrap gap-1">
<RouterLink
v-for="customer in item.Customers.slice(0, 3)"
:key="customer.id"
:to="`/customer/${customer.id}`"
class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 hover:bg-blue-200 dark:bg-blue-900/40 dark:text-blue-400 dark:hover:bg-blue-900/60"
@click.stop
>
<IconUser :size="10" />
{{ customer.first_name }} {{ customer.last_name }}
</RouterLink>
<span v-if="item.Customers.length > 3" class="text-xs text-gray-400">+{{ item.Customers.length - 3 }}</span>
</div>
<span v-else class="text-gray-400"></span>
</td>
<td class="px-5 py-3 text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap">{{ fmtTs(item.CreatedAt) }}</td>
<td class="px-5 py-3 text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap">{{ fmtTs(item.UpdatedAt) }}</td>
<td class="px-5 py-3">