fix some bug

Signed-off-by: 吴文峰 <kevin@lmve.net>

frontend/ops_vue_js/src/views/warehouse/WarehouseOverview.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useToastStore } from '@/stores/toast'
 import { useUsersStore } from '@/stores/users'
@@ -18,6 +18,8 @@ import {
   IconTrash,
   IconEdit,
   IconArrowRight,
+  IconTool,
+  IconUser,
 } from '@tabler/icons-vue'
 
 usePageTitle('warehouse.overview')
@@ -338,7 +340,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="mx-auto max-w-6xl px-6 py-6 space-y-4">
+  <div class="mx-auto max-w-7xl px-6 py-6 space-y-4">
 
     <!-- 统计卡片 -->
     <div class="grid grid-cols-3 gap-4">
@@ -532,19 +534,21 @@ onMounted(() => {
         <table class="w-full text-left text-sm text-gray-900 dark:text-white">
           <thead>
             <tr class="border-b border-gray-200 bg-gray-50 text-gray-500 dark:border-dk-muted dark:bg-dk-base dark:text-gray-400">
-              <th class="px-6 py-3 font-medium">{{ t('warehouse.item_name') }}</th>
-              <th class="px-6 py-3 font-medium">{{ t('warehouse.serial_number') }}</th>
-              <th class="px-6 py-3 font-medium">{{ t('warehouse.remark') }}</th>
-              <th class="px-6 py-3 font-medium w-20 text-center">{{ t('warehouse.quantity') }}</th>
-              <th class="px-6 py-3 font-medium">{{ t('warehouse.location') }}</th>
-              <th class="px-6 py-3 font-medium whitespace-nowrap">{{ t('warehouse.created_at') }}</th>
-              <th class="px-6 py-3 font-medium whitespace-nowrap">{{ t('warehouse.updated_at') }}</th>
-              <th class="px-6 py-3 font-medium">{{ t('warehouse.created_by') }}</th>
+              <th class="px-5 py-3 font-medium">{{ t('warehouse.item_name') }}</th>
+              <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>
+              <th class="px-5 py-3 font-medium w-20 text-right">{{ t('warehouse.actions') }}</th>
             </tr>
           </thead>
           <tbody>
             <tr v-if="itemLoading">
-              <td colspan="8" class="px-6 py-8 text-center text-gray-400">
+              <td colspan="10" class="px-6 py-8 text-center text-gray-400">
                 <svg class="mx-auto mb-2 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" />
@@ -553,7 +557,7 @@ onMounted(() => {
               </td>
             </tr>
             <tr v-else-if="items.length === 0">
-              <td colspan="8" class="px-6 py-8 text-center text-gray-400 dark:text-gray-500">
+              <td colspan="10" class="px-6 py-8 text-center text-gray-400 dark:text-gray-500">
                 {{ t('warehouse.no_items') }}
               </td>
             </tr>
@@ -563,22 +567,36 @@ onMounted(() => {
               class="cursor-pointer border-b border-gray-100 transition-colors hover:bg-gray-50 dark:border-dk-muted dark:hover:bg-dk-base"
               @click="goToItemDetail(item)"
             >
-              <td class="px-6 py-3 font-medium max-w-[200px] truncate">{{ item.Name }}</td>
-              <td class="px-6 py-3 max-w-[160px] truncate text-xs text-gray-500 dark:text-gray-400">{{ item.SerialNumber || '—' }}</td>
-              <td class="px-6 py-3 max-w-[200px] truncate text-xs text-gray-500 dark:text-gray-400">{{ item.Remark || '—' }}</td>
-              <td class="px-6 py-3 text-center text-sm">{{ item.Quantity }}</td>
-              <td class="px-6 py-3">
-                <span v-if="item.ContainerBreadcrumb" class="inline-flex items-center gap-1 text-sm text-blue-600">
-                  <IconArrowRight :size="13" />
-                  <span class="max-w-[200px] truncate">{{ item.ContainerBreadcrumb }}</span>
-                </span>
-                <span v-else class="inline-flex items-center gap-1 text-xs text-orange-500">
-                  {{ t('warehouse.unstored_items') }}
+              <td class="px-5 py-3 font-medium max-w-xs truncate">{{ item.Name }}</td>
+              <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-6 py-3 whitespace-nowrap text-xs text-gray-400 dark:text-gray-500">{{ formatDate(item.CreatedAt) }}</td>
-              <td class="px-6 py-3 whitespace-nowrap text-xs text-gray-400 dark:text-gray-500">{{ formatDate(item.UpdatedAt) }}</td>
-              <td class="px-6 py-3">
+              <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/detail/${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">{{ formatDate(item.CreatedAt) }}</td>
+              <td class="px-5 py-3 text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap">{{ formatDate(item.UpdatedAt) }}</td>
+              <td class="px-5 py-3">
                 <div class="flex items-center gap-1.5">
                   <img
                     :src="usersStore.getAvatarUrlFromUserID(item.CreatorID)"
@@ -587,6 +605,14 @@ onMounted(() => {
                   <span class="truncate text-gray-600 dark:text-gray-400">{{ usersStore.getUsernameFromUserID(item.CreatorID) }}</span>
                 </div>
               </td>
+              <td class="px-5 py-3 text-right">
+                <button
+                  class="text-xs text-blue-500 hover:underline"
+                  @click.stop="goToItemDetail(item)"
+                >
+                  {{ t('warehouse.view_items') }}
+                </button>
+              </td>
             </tr>
           </tbody>
         </table>