@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ops_vue_js",
|
||||
"version": "1.3.2",
|
||||
"version": "1.3.5",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"engines": {
|
||||
|
||||
@@ -609,7 +609,7 @@ onMounted(async () => {
|
||||
<RouterLink
|
||||
v-for="customer in item.Customers.slice(0, 3)"
|
||||
:key="customer.id"
|
||||
:to="`/customer/${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
|
||||
>
|
||||
|
||||
@@ -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 { usePageTitle } from '@/composables/usePageTitle'
|
||||
@@ -16,6 +16,8 @@ import {
|
||||
IconSearch,
|
||||
IconTrash,
|
||||
IconEdit,
|
||||
IconTool,
|
||||
IconUser,
|
||||
} from '@tabler/icons-vue'
|
||||
|
||||
usePageTitle('warehouse.container_list')
|
||||
@@ -223,7 +225,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mx-auto max-w-6xl px-6 py-6">
|
||||
<div class="mx-auto max-w-7xl px-6 py-6">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="mb-6 grid grid-cols-3 gap-4">
|
||||
@@ -295,6 +297,8 @@ onMounted(() => {
|
||||
<th class="px-6 py-3 font-medium">{{ t('warehouse.remark') }}</th>
|
||||
<th class="px-6 py-3 font-medium w-24 text-center">{{ t('warehouse.child_containers') }}</th>
|
||||
<th class="px-6 py-3 font-medium w-24 text-center">{{ t('warehouse.items') }}</th>
|
||||
<th class="px-6 py-3 font-medium w-24 text-center">{{ t('work_order.work_order_count') }}</th>
|
||||
<th class="px-6 py-3 font-medium">{{ t('customer.related_customers') }}</th>
|
||||
<th class="px-6 py-3 font-medium whitespace-nowrap w-44">{{ t('warehouse.created_at') }}</th>
|
||||
<th class="px-6 py-3 font-medium w-28 text-right">{{ t('warehouse.actions') }}</th>
|
||||
</tr>
|
||||
@@ -302,7 +306,7 @@ onMounted(() => {
|
||||
<tbody>
|
||||
<!-- 加载中 -->
|
||||
<tr v-if="loading">
|
||||
<td colspan="7" class="px-6 py-8 text-center text-gray-400">
|
||||
<td colspan="9" 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" />
|
||||
@@ -312,7 +316,7 @@ onMounted(() => {
|
||||
</tr>
|
||||
<!-- 空状态 -->
|
||||
<tr v-else-if="containers.length === 0">
|
||||
<td colspan="7" class="px-6 py-8 text-center text-gray-400 dark:text-gray-500">
|
||||
<td colspan="9" class="px-6 py-8 text-center text-gray-400 dark:text-gray-500">
|
||||
{{ t('warehouse.no_containers') }}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -348,6 +352,30 @@ onMounted(() => {
|
||||
{{ c.ItemCount }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-3 text-center">
|
||||
<span
|
||||
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" />
|
||||
{{ c.WorkOrderCount }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-3">
|
||||
<div v-if="c.Customers && c.Customers.length > 0" class="flex flex-wrap gap-1">
|
||||
<RouterLink
|
||||
v-for="customer in c.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="c.Customers.length > 3" class="text-xs text-gray-400">+{{ c.Customers.length - 3 }}</span>
|
||||
</div>
|
||||
<span v-else class="text-gray-400">—</span>
|
||||
</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap text-gray-500 dark:text-gray-400">{{ formatDate(c.CreatedAt) }}</td>
|
||||
<td class="px-6 py-3 text-right" @click.stop>
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
|
||||
@@ -30,6 +30,11 @@ const pageSize = ref(10)
|
||||
const currentPage = ref(1)
|
||||
const search = ref('')
|
||||
const loading = ref(false)
|
||||
const stats = reactive({
|
||||
total: 0,
|
||||
inContainer: 0,
|
||||
unstored: 0,
|
||||
})
|
||||
|
||||
// ── 权限判断 ──
|
||||
function canModifyItem(idx) {
|
||||
@@ -90,6 +95,9 @@ function goPage(p) {
|
||||
}
|
||||
}
|
||||
|
||||
const totalPages = computed(() => Math.ceil(totalCount.value / pageSize.value) || 1)
|
||||
const isEn = computed(() => locale.value === 'en')
|
||||
|
||||
const pageNumbers = computed(() => {
|
||||
const total = totalPages.value
|
||||
const cur = currentPage.value
|
||||
@@ -155,7 +163,7 @@ onMounted(fetchItems)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-4 max-w-6xl mx-auto space-y-4">
|
||||
<div class="p-4 max-w-7xl mx-auto space-y-4">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
@@ -246,7 +254,7 @@ onMounted(fetchItems)
|
||||
<RouterLink
|
||||
v-for="customer in item.Customers.slice(0, 3)"
|
||||
:key="customer.id"
|
||||
:to="`/customer/${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
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user