up
This commit is contained in:
@@ -0,0 +1,68 @@
|
||||
import { api } from './index'
|
||||
|
||||
export const warehouseApi = {
|
||||
/** 获取容器列表 */
|
||||
getContainers(params = {}) {
|
||||
return api.post('/warehouse/list_container', params)
|
||||
},
|
||||
|
||||
/** 获取容器详情（含图片） */
|
||||
getContainer(id) {
|
||||
return api.post('/warehouse/get_container', { id })
|
||||
},
|
||||
|
||||
/** 新增容器 */
|
||||
addContainer(data) {
|
||||
return api.post('/warehouse/add_container', data)
|
||||
},
|
||||
|
||||
/** 编辑容器 */
|
||||
updateContainer(data) {
|
||||
return api.post('/warehouse/update_container', data)
|
||||
},
|
||||
|
||||
/** 删除容器 */
|
||||
deleteContainer(id) {
|
||||
return api.post('/warehouse/delete_container', { id })
|
||||
},
|
||||
|
||||
/** 获取仓库统计 */
|
||||
getCount() {
|
||||
return api.post('/warehouse/count', {})
|
||||
},
|
||||
|
||||
/** 获取物品列表 */
|
||||
getItems(params = {}) {
|
||||
return api.post('/warehouse/list_item', params)
|
||||
},
|
||||
|
||||
/** 新增物品 */
|
||||
addItem(data) {
|
||||
return api.post('/warehouse/add_item', data)
|
||||
},
|
||||
|
||||
/** 获取物品详情 */
|
||||
getItem(id) {
|
||||
return api.post('/warehouse/get_item', { id })
|
||||
},
|
||||
|
||||
/** 编辑物品 */
|
||||
updateItem(data) {
|
||||
return api.post('/warehouse/update_item', data)
|
||||
},
|
||||
|
||||
/** 删除物品 */
|
||||
deleteItem(id) {
|
||||
return api.post('/warehouse/delete_item', { id })
|
||||
},
|
||||
|
||||
/** 移动物品 */
|
||||
moveItem(data) {
|
||||
return api.post('/warehouse/move_item', data)
|
||||
},
|
||||
|
||||
/** 获取容器列表（用于移动目标选择） */
|
||||
getContainers(params = {}) {
|
||||
return api.post('/warehouse/list_container', params)
|
||||
},
|
||||
}
|
||||
@@ -51,7 +51,8 @@ const navItems = computed(() => [
|
||||
{ label: t("appname.schedule"), to: "/schedule" },
|
||||
{ label: t("appname.purchase"), to: "/purchase" },
|
||||
{ label: t("appname.work_order"), to: "/work_order" },
|
||||
// { label: t("appname.warehouse"), to: "/warehouse" },
|
||||
{ label: t("appname.warehouse"), to: "/warehouse/container" },
|
||||
{ label: t("appname.warehouse_items"), to: "/warehouse/item" },
|
||||
]);
|
||||
</script>
|
||||
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
"schedule": "Schedule",
|
||||
"purchase": "Purchase",
|
||||
"warehouse": "Warehouse",
|
||||
"warehouse_items": "Items Overview",
|
||||
"work_order": "Work Order"
|
||||
},
|
||||
"tagadder": {
|
||||
@@ -151,6 +152,64 @@
|
||||
"submit": "Submit",
|
||||
"save_changes": "Save Changes"
|
||||
},
|
||||
"warehouse": {
|
||||
"container_list": "Container List",
|
||||
"container_detail": "Container Detail",
|
||||
"item_list": "Item List",
|
||||
"add_container": "Add Container",
|
||||
"edit_container": "Edit Container",
|
||||
"container_name": "Container Name",
|
||||
"title_placeholder": "Enter container name",
|
||||
"remark": "Remark",
|
||||
"remark_placeholder": "Enter remark (optional)",
|
||||
"created_at": "Created At",
|
||||
"created_by": "Created By",
|
||||
"child_containers": "Sub-Containers",
|
||||
"items": "Items",
|
||||
"actions": "Actions",
|
||||
"view_items": "View",
|
||||
"edit": "Edit",
|
||||
"delete": "Delete",
|
||||
"search_placeholder": "Search",
|
||||
"no_containers": "No containers found",
|
||||
"no_items": "No items found",
|
||||
"container_count": "Containers",
|
||||
"item_count": "Items",
|
||||
"unstored_items": "Unstored",
|
||||
"title_required": "Container name is required",
|
||||
"delete_confirm_title": "Delete Container",
|
||||
"delete_confirm_msg": "Are you sure you want to delete \"{name}\"? This cannot be undone.",
|
||||
"cannot_delete_nonempty": "Cannot delete a container that has items or sub-containers",
|
||||
"confirm_delete": "Are you sure you want to delete this container? This action cannot be undone.",
|
||||
"add_item": "Add Item",
|
||||
"edit_item": "Edit Item",
|
||||
"item_name": "Item Name",
|
||||
"item_name_placeholder": "Enter item name",
|
||||
"serial_number": "Serial Number",
|
||||
"serial_number_placeholder": "Enter serial number (optional)",
|
||||
"quantity": "Quantity",
|
||||
"item_name_required": "Item name is required",
|
||||
"back_to_list": "Back to List",
|
||||
"root": "Warehouse",
|
||||
"item_detail": "Item Detail",
|
||||
"edit_item": "Edit Item",
|
||||
"move_item": "Move Item",
|
||||
"move_history": "Move History",
|
||||
"work_orders": "Work Orders",
|
||||
"no_move_history": "No move history",
|
||||
"no_work_orders": "No related work orders",
|
||||
"current_location": "Current Location",
|
||||
"target_container": "Target Container",
|
||||
"search_container": "Search container...",
|
||||
"confirm_move": "Confirm Move",
|
||||
"move_remark_placeholder": "Move remark (optional)",
|
||||
"location": "Location",
|
||||
"delete_item_title": "Delete Item",
|
||||
"delete_item_msg": "Are you sure you want to delete item \"{name}\"? This action cannot be undone.",
|
||||
"items_in_containers": "Stored",
|
||||
"total_items": "{count} items",
|
||||
"search_item_placeholder": "Search by name or serial number"
|
||||
},
|
||||
"purchase_addorder": {
|
||||
"add_order": "Add Order",
|
||||
"edit_order": "Edit Order",
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
"schedule": "日程",
|
||||
"purchase": "采购",
|
||||
"warehouse": "仓库",
|
||||
"warehouse_items": "物品总览",
|
||||
"work_order": "工单"
|
||||
},
|
||||
"tagadder": {
|
||||
@@ -151,6 +152,64 @@
|
||||
"submit": "提交",
|
||||
"save_changes": "保存修改"
|
||||
},
|
||||
"warehouse": {
|
||||
"container_list": "容器列表",
|
||||
"container_detail": "容器详情",
|
||||
"item_list": "物品列表",
|
||||
"add_container": "新增容器",
|
||||
"edit_container": "编辑容器",
|
||||
"container_name": "容器名称",
|
||||
"title_placeholder": "输入容器名称",
|
||||
"remark": "备注",
|
||||
"remark_placeholder": "输入备注（可选）",
|
||||
"created_at": "创建日期",
|
||||
"created_by": "创建人",
|
||||
"child_containers": "子容器",
|
||||
"items": "物品",
|
||||
"actions": "操作",
|
||||
"view_items": "查看",
|
||||
"edit": "编辑",
|
||||
"delete": "删除",
|
||||
"search_placeholder": "搜索",
|
||||
"no_containers": "暂无容器",
|
||||
"no_items": "暂无物品",
|
||||
"container_count": "容器数",
|
||||
"item_count": "物品数",
|
||||
"unstored_items": "未入库",
|
||||
"title_required": "容器名称不能为空",
|
||||
"delete_confirm_title": "删除容器",
|
||||
"delete_confirm_msg": "确定要删除容器「{name}」吗？此操作不可撤销。",
|
||||
"cannot_delete_nonempty": "容器内含有物品或子容器，无法删除",
|
||||
"confirm_delete": "确定要删除此容器吗？此操作不可撤销。",
|
||||
"add_item": "新增物品",
|
||||
"edit_item": "编辑物品",
|
||||
"item_name": "物品名称",
|
||||
"item_name_placeholder": "输入物品名称",
|
||||
"serial_number": "序列号",
|
||||
"serial_number_placeholder": "输入序列号（可选）",
|
||||
"quantity": "数量",
|
||||
"item_name_required": "物品名称不能为空",
|
||||
"back_to_list": "返回列表",
|
||||
"root": "仓库",
|
||||
"item_detail": "物品详情",
|
||||
"edit_item": "编辑物品",
|
||||
"move_item": "移动物品",
|
||||
"move_history": "移动历史",
|
||||
"work_orders": "关联工单",
|
||||
"no_move_history": "暂无移动记录",
|
||||
"no_work_orders": "暂无关联工单",
|
||||
"current_location": "当前位置",
|
||||
"target_container": "目标容器",
|
||||
"search_container": "搜索容器...",
|
||||
"confirm_move": "确认移动",
|
||||
"move_remark_placeholder": "输入移动备注（可选）",
|
||||
"location": "位置",
|
||||
"delete_item_title": "删除物品",
|
||||
"delete_item_msg": "确定要删除物品「{name}」吗？此操作不可撤销。",
|
||||
"items_in_containers": "已入库",
|
||||
"total_items": "共 {count} 条",
|
||||
"search_item_placeholder": "搜索物品名称或序列号"
|
||||
},
|
||||
"purchase_addorder": {
|
||||
"add_order": "添加订单",
|
||||
"edit_order": "编辑订单",
|
||||
|
||||
@@ -75,9 +75,29 @@ const router = createRouter({
|
||||
component: () => import('@/views/work_order/ShowWorkOrder.vue'),
|
||||
},
|
||||
{
|
||||
path: 'warehouse',
|
||||
path: 'warehouse/container',
|
||||
name: 'warehouse',
|
||||
component: () => import('@/views/WarehouseView.vue'),
|
||||
component: () => import('@/views/warehouse/WarehouseContainerList.vue'),
|
||||
},
|
||||
{
|
||||
path: 'warehouse/container/:id',
|
||||
name: 'warehouse-container-detail',
|
||||
component: () => import('@/views/warehouse/WarehouseContainerDetail.vue'),
|
||||
},
|
||||
{
|
||||
path: 'warehouse/container/:id/add-item',
|
||||
name: 'warehouse-add-item',
|
||||
component: () => import('@/views/warehouse/WarehouseAddItem.vue'),
|
||||
},
|
||||
{
|
||||
path: 'warehouse/item',
|
||||
name: 'warehouse-item-list',
|
||||
component: () => import('@/views/warehouse/WarehouseItemList.vue'),
|
||||
},
|
||||
{
|
||||
path: 'warehouse/item/:id',
|
||||
name: 'warehouse-item-detail',
|
||||
component: () => import('@/views/warehouse/WarehouseItemDetail.vue'),
|
||||
},
|
||||
{
|
||||
path: 'admin',
|
||||
@@ -140,7 +160,7 @@ router.beforeEach((to) => {
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 不需要登录的页面
|
||||
const publicPages = ['/', '/login', '/register', '/forgot_password', '/schedule','/warehouse', '/404']
|
||||
const publicPages = ['/', '/login', '/register', '/forgot_password', '/schedule', '/warehouse/container', '/warehouse/item', '/404']
|
||||
if (publicPages.includes(to.path)) return true
|
||||
|
||||
// 未登录 → 跳转登录
|
||||
|
||||
@@ -0,0 +1,206 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import { usePageTitle } from '@/composables/usePageTitle'
|
||||
import { warehouseApi } from '@/api/warehouse'
|
||||
import useDropzone from '@/components/useDropzone.vue'
|
||||
|
||||
usePageTitle('warehouse.add_item')
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToastStore()
|
||||
|
||||
const containerId = ref(parseInt(route.params.id))
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
serial_number: '',
|
||||
remark: '',
|
||||
quantity: 1,
|
||||
})
|
||||
|
||||
const submitting = ref(false)
|
||||
const loadingContainer = ref(true)
|
||||
const containerName = ref('')
|
||||
|
||||
const dropzoneRef = ref(null)
|
||||
|
||||
function getPhotoHashes() {
|
||||
return dropzoneRef.value?.return_files().map((f) => f.hash) ?? []
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const { errCode, data } = await warehouseApi.getContainer(containerId.value)
|
||||
if (errCode === 0 && data?.container) {
|
||||
containerName.value = data.container.Title
|
||||
}
|
||||
} catch {
|
||||
// 找不到容器时仍允许提交
|
||||
} finally {
|
||||
loadingContainer.value = false
|
||||
}
|
||||
})
|
||||
|
||||
async function submit() {
|
||||
if (!form.name.trim()) {
|
||||
toast.error(t('warehouse.item_name_required'))
|
||||
return
|
||||
}
|
||||
|
||||
// 等待图片上传完成
|
||||
await new Promise((r) => setTimeout(r, 200))
|
||||
const hashes = getPhotoHashes()
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
const { errCode } = await warehouseApi.addItem({
|
||||
container_id: containerId.value,
|
||||
name: form.name.trim(),
|
||||
serial_number: form.serial_number.trim(),
|
||||
remark: form.remark.trim(),
|
||||
quantity: form.quantity > 0 ? form.quantity : 1,
|
||||
photos: hashes,
|
||||
})
|
||||
if (errCode === 0) {
|
||||
toast.success(t('message.save_success'))
|
||||
router.push(`/warehouse/container/${containerId.value}`)
|
||||
} else {
|
||||
toast.error(t('message.server_error'))
|
||||
}
|
||||
} catch {
|
||||
toast.error(t('message.server_error'))
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-4 max-w-2xl mx-auto space-y-4">
|
||||
|
||||
<!-- 面包屑 -->
|
||||
<div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
<RouterLink to="/warehouse/container" class="text-blue-500 hover:underline">
|
||||
{{ t('warehouse.container_list') }}
|
||||
</RouterLink>
|
||||
<span>/</span>
|
||||
<RouterLink
|
||||
v-if="containerName"
|
||||
:to="`/warehouse/container/${containerId}`"
|
||||
class="text-blue-500 hover:underline"
|
||||
>
|
||||
{{ containerName }}
|
||||
</RouterLink>
|
||||
<svg v-if="loadingContainer" class="h-3.5 w-3.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" />
|
||||
</svg>
|
||||
<span v-else>/</span>
|
||||
<span class="text-gray-700 dark:text-gray-200">{{ t('warehouse.add_item') }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 表单卡片 -->
|
||||
<div class="rounded-xl border border-gray-200 bg-white px-5 py-5 shadow dark:border-dk-muted dark:bg-dk-card">
|
||||
<h2 class="mb-5 text-base font-semibold text-gray-900 dark:text-white">
|
||||
{{ t('warehouse.add_item') }}
|
||||
<span v-if="containerName" class="ml-2 text-sm font-normal text-gray-500">
|
||||
→ {{ containerName }}
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
|
||||
<!-- 物品名称 -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('warehouse.item_name') }} *
|
||||
</label>
|
||||
<input
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
:placeholder="t('warehouse.item_name_placeholder')"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
@keyup.enter="submit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 序列号 -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('warehouse.serial_number') }}
|
||||
</label>
|
||||
<input
|
||||
v-model="form.serial_number"
|
||||
type="text"
|
||||
:placeholder="t('warehouse.serial_number_placeholder')"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 数量 -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('warehouse.quantity') }}
|
||||
</label>
|
||||
<input
|
||||
v-model.number="form.quantity"
|
||||
type="number"
|
||||
min="1"
|
||||
class="w-28 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 备注 -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('warehouse.remark') }}
|
||||
</label>
|
||||
<textarea
|
||||
v-model="form.remark"
|
||||
:placeholder="t('warehouse.remark_placeholder')"
|
||||
rows="3"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- 图片上传 -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('purchase_addorder.upload_photos') }}
|
||||
</label>
|
||||
<useDropzone
|
||||
ref="dropzoneRef"
|
||||
uploadURL="/api/files/upload/image"
|
||||
:max-files="9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="mt-6 flex justify-end gap-2">
|
||||
<button
|
||||
class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white hover:bg-gray-50 dark:hover:bg-dk-muted"
|
||||
@click="router.push(`/warehouse/container/${containerId}`)"
|
||||
>
|
||||
{{ t('message.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
|
||||
:disabled="submitting"
|
||||
@click="submit"
|
||||
>
|
||||
<svg v-if="submitting" class="h-4 w-4 animate-spin" 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" />
|
||||
</svg>
|
||||
{{ t('message.save') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,723 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import { usePageTitle } from '@/composables/usePageTitle'
|
||||
import { useUsersStore } from '@/stores/users'
|
||||
import { warehouseApi } from '@/api/warehouse'
|
||||
import ConfirmDialog from '@/components/ConfirmDialog.vue'
|
||||
import {
|
||||
IconChevronLeft,
|
||||
IconChevronRight,
|
||||
IconFolder,
|
||||
IconPackage,
|
||||
IconPlus,
|
||||
IconEdit,
|
||||
IconTrash,
|
||||
IconSearch,
|
||||
} from '@tabler/icons-vue'
|
||||
|
||||
usePageTitle('warehouse.container_detail')
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToastStore()
|
||||
const usersStore = useUsersStore()
|
||||
|
||||
const containerId = computed(() => parseInt(route.params.id))
|
||||
|
||||
// ── 容器详情 ──
|
||||
const container = ref(null)
|
||||
const photos = ref([])
|
||||
const loadingDetail = ref(true)
|
||||
const notFound = ref(false)
|
||||
|
||||
// ── 子容器列表 ──
|
||||
const subContainers = ref([])
|
||||
const subTotal = ref(0)
|
||||
const subPage = ref(1)
|
||||
const subPageSize = ref(10)
|
||||
const subSearch = ref('')
|
||||
const loadingSub = ref(false)
|
||||
|
||||
const subTotalPages = computed(() => Math.ceil(subTotal.value / subPageSize.value) || 1)
|
||||
|
||||
function subPageRange() {
|
||||
const total = subTotalPages.value
|
||||
const cur = subPage.value
|
||||
let start = Math.max(1, cur - 2)
|
||||
let end = Math.min(cur + 4, total)
|
||||
if (end - start < 4) start = Math.max(1, end - 4)
|
||||
return Array.from({ length: end - start + 1 }, (_, i) => start + i)
|
||||
}
|
||||
|
||||
// ── 物品列表 ──
|
||||
const items = ref([])
|
||||
const itemTotal = ref(0)
|
||||
const itemPage = ref(1)
|
||||
const itemPageSize = ref(10)
|
||||
const itemSearch = ref('')
|
||||
const loadingItems = ref(false)
|
||||
|
||||
const itemTotalPages = computed(() => Math.ceil(itemTotal.value / itemPageSize.value) || 1)
|
||||
|
||||
function itemPageRange() {
|
||||
const total = itemTotalPages.value
|
||||
const cur = itemPage.value
|
||||
let start = Math.max(1, cur - 2)
|
||||
let end = Math.min(cur + 4, total)
|
||||
if (end - start < 4) start = Math.max(1, end - 4)
|
||||
return Array.from({ length: end - start + 1 }, (_, i) => start + i)
|
||||
}
|
||||
|
||||
// ── Tab ──
|
||||
const activeTab = ref('sub_containers')
|
||||
|
||||
// ── 新增子容器弹窗 ──
|
||||
const showAddSub = ref(false)
|
||||
const addSubForm = reactive({ title: '', remark: '' })
|
||||
const submittingSub = ref(false)
|
||||
|
||||
// ── 编辑容器弹窗 ──
|
||||
const showEdit = ref(false)
|
||||
const editForm = reactive({ title: '', remark: '' })
|
||||
const submittingEdit = ref(false)
|
||||
|
||||
// ── 删除确认 ──
|
||||
const showDeleteConfirm = ref(false)
|
||||
const deletingName = ref('')
|
||||
const deleting = ref(false)
|
||||
|
||||
// ── 时间格式化 ──
|
||||
function fmtTs(ts) {
|
||||
if (!ts) return '—'
|
||||
const d = new Date(parseInt(ts) * 1000)
|
||||
return d.toLocaleString()
|
||||
}
|
||||
|
||||
// ── 拉取容器详情 ──
|
||||
async function fetchContainer() {
|
||||
loadingDetail.value = true
|
||||
notFound.value = false
|
||||
try {
|
||||
const { errCode, data } = await warehouseApi.getContainer(containerId.value)
|
||||
if (errCode === 0 && data) {
|
||||
container.value = data.container
|
||||
photos.value = data.photos ?? []
|
||||
} else {
|
||||
notFound.value = true
|
||||
}
|
||||
} catch {
|
||||
notFound.value = true
|
||||
} finally {
|
||||
loadingDetail.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── 拉取子容器 ──
|
||||
async function fetchSubContainers() {
|
||||
loadingSub.value = true
|
||||
try {
|
||||
const { errCode, data } = await warehouseApi.getContainers({
|
||||
search: subSearch.value,
|
||||
parent_id: containerId.value,
|
||||
entries: subPageSize.value,
|
||||
page: subPage.value,
|
||||
})
|
||||
if (errCode === 0) {
|
||||
subContainers.value = data.containers ?? []
|
||||
subTotal.value = data.all_count ?? 0
|
||||
}
|
||||
} catch {
|
||||
// 拦截器已处理
|
||||
} finally {
|
||||
loadingSub.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── 拉取物品 ──
|
||||
async function fetchItems() {
|
||||
loadingItems.value = true
|
||||
try {
|
||||
const { errCode, data } = await warehouseApi.getItems({
|
||||
search: itemSearch.value,
|
||||
container_id: containerId.value,
|
||||
entries: itemPageSize.value,
|
||||
page: itemPage.value,
|
||||
})
|
||||
if (errCode === 0) {
|
||||
items.value = data.items ?? []
|
||||
itemTotal.value = data.all_count ?? 0
|
||||
}
|
||||
} catch {
|
||||
// 拦截器已处理
|
||||
} finally {
|
||||
loadingItems.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── 切 tab 时加载对应数据 ──
|
||||
watch(activeTab, (tab) => {
|
||||
if (tab === 'sub_containers') fetchSubContainers()
|
||||
else fetchItems()
|
||||
})
|
||||
|
||||
// ── 新增子容器 ──
|
||||
async function submitAddSub() {
|
||||
if (!addSubForm.title.trim()) {
|
||||
toast.error(t('warehouse.title_required'))
|
||||
return
|
||||
}
|
||||
submittingSub.value = true
|
||||
try {
|
||||
const { errCode } = await warehouseApi.addContainer({
|
||||
parent_id: containerId.value,
|
||||
title: addSubForm.title.trim(),
|
||||
remark: addSubForm.remark.trim(),
|
||||
})
|
||||
if (errCode === 0) {
|
||||
toast.success(t('message.save_success'))
|
||||
showAddSub.value = false
|
||||
Object.assign(addSubForm, { title: '', remark: '' })
|
||||
fetchSubContainers()
|
||||
fetchContainer()
|
||||
} else {
|
||||
toast.error(t('message.server_error'))
|
||||
}
|
||||
} catch {
|
||||
toast.error(t('message.server_error'))
|
||||
} finally {
|
||||
submittingSub.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── 编辑容器 ──
|
||||
function openEdit() {
|
||||
editForm.title = container.value?.Title ?? ''
|
||||
editForm.remark = container.value?.Remark ?? ''
|
||||
showEdit.value = true
|
||||
}
|
||||
|
||||
async function submitEdit() {
|
||||
if (!editForm.title.trim()) {
|
||||
toast.error(t('warehouse.title_required'))
|
||||
return
|
||||
}
|
||||
submittingEdit.value = true
|
||||
try {
|
||||
const { errCode } = await warehouseApi.updateContainer({
|
||||
id: containerId.value,
|
||||
title: editForm.title.trim(),
|
||||
remark: editForm.remark.trim(),
|
||||
})
|
||||
if (errCode === 0) {
|
||||
toast.success(t('message.save_success'))
|
||||
showEdit.value = false
|
||||
fetchContainer()
|
||||
} else {
|
||||
toast.error(t('message.server_error'))
|
||||
}
|
||||
} catch {
|
||||
toast.error(t('message.server_error'))
|
||||
} finally {
|
||||
submittingEdit.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── 删除容器 ──
|
||||
function confirmDelete() {
|
||||
deletingName.value = container.value?.Title ?? ''
|
||||
showDeleteConfirm.value = true
|
||||
}
|
||||
|
||||
async function doDelete() {
|
||||
deleting.value = true
|
||||
try {
|
||||
const { errCode } = await warehouseApi.deleteContainer(containerId.value)
|
||||
if (errCode === 0) {
|
||||
toast.success(t('message.delete_ok'))
|
||||
showDeleteConfirm.value = false
|
||||
if (container.value.ParentID) {
|
||||
router.push(`/warehouse/container/${container.value.ParentID}`)
|
||||
} else {
|
||||
router.push('/warehouse/container')
|
||||
}
|
||||
} else {
|
||||
toast.error(t('message.server_error'))
|
||||
}
|
||||
} catch {
|
||||
toast.error(t('message.server_error'))
|
||||
} finally {
|
||||
deleting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── 初始化 ──
|
||||
onMounted(async () => {
|
||||
await fetchContainer()
|
||||
if (activeTab.value === 'sub_containers') {
|
||||
fetchSubContainers()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-4 max-w-5xl mx-auto space-y-4">
|
||||
|
||||
<!-- 加载 -->
|
||||
<div v-if="loadingDetail" class="flex justify-center py-16">
|
||||
<svg class="h-6 w-6 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" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 未找到 -->
|
||||
<div v-else-if="notFound" class="flex flex-col items-center justify-center py-16 text-gray-400">
|
||||
<p>{{ t('message.not_found') }}</p>
|
||||
<button
|
||||
class="mt-2 text-sm text-blue-500 hover:underline"
|
||||
@click="router.push('/warehouse/container')"
|
||||
>
|
||||
{{ t('warehouse.back_to_list') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<template v-else-if="container">
|
||||
|
||||
<!-- 面包屑 + 操作栏 -->
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<RouterLink to="/warehouse/container" class="text-blue-500 hover:underline">
|
||||
{{ t('warehouse.container_list') }}
|
||||
</RouterLink>
|
||||
<span class="text-gray-400">/</span>
|
||||
<span class="font-medium text-gray-900 dark:text-white">{{ container.Title }}</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-dk-muted dark:bg-dk-base dark:text-white dark:hover:bg-dk-muted"
|
||||
@click="openEdit"
|
||||
>
|
||||
<IconEdit :size="14" />
|
||||
{{ t('warehouse.edit') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="container.ChildCount === 0 && container.ItemCount === 0"
|
||||
class="inline-flex items-center gap-1.5 rounded-lg border border-red-300 bg-white px-3 py-1.5 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:border-red-900 dark:bg-dk-base dark:text-red-400 dark:hover:bg-red-900/20"
|
||||
@click="confirmDelete"
|
||||
>
|
||||
<IconTrash :size="14" />
|
||||
{{ t('warehouse.delete') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 容器信息卡片 -->
|
||||
<div class="rounded-xl border border-gray-200 bg-white px-5 py-4 shadow dark:border-dk-muted dark:bg-dk-card">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<IconFolder class="text-blue-500 flex-shrink-0" :size="20" />
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ container.Title }}</h2>
|
||||
</div>
|
||||
|
||||
<!-- 图片 -->
|
||||
<div v-if="photos.length" class="flex gap-2 flex-wrap mb-3">
|
||||
<a
|
||||
v-for="photo in photos"
|
||||
:key="photo.ID"
|
||||
:href="`/api/files/get/${photo.Sha256}`"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
:src="`/api/files/get/${photo.Sha256}`"
|
||||
class="w-16 h-16 object-cover rounded border border-gray-200 dark:border-dk-muted"
|
||||
:alt="photo.Name"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 备注 -->
|
||||
<p
|
||||
v-if="container.Remark"
|
||||
class="text-sm text-gray-500 dark:text-gray-400 whitespace-pre-wrap mb-3"
|
||||
>
|
||||
{{ container.Remark }}
|
||||
</p>
|
||||
|
||||
<!-- 元信息 -->
|
||||
<div class="flex flex-wrap gap-x-6 gap-y-1 text-xs text-gray-400 dark:text-gray-500">
|
||||
<span>{{ t('warehouse.created_by') }}: {{ usersStore.getUsernameFromUserID(container.CreatorID) }}</span>
|
||||
<span>{{ t('warehouse.created_at') }}: {{ fmtTs(container.CreatedAt) }}</span>
|
||||
<span>{{ t('warehouse.child_containers') }}: {{ container.ChildCount }}</span>
|
||||
<span>{{ t('warehouse.items') }}: {{ container.ItemCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 切换 -->
|
||||
<div class="flex gap-1 rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-dk-muted dark:bg-dk-base w-fit">
|
||||
<button
|
||||
class="px-4 py-1.5 text-sm rounded-md font-medium transition-colors"
|
||||
:class="activeTab === 'sub_containers'
|
||||
? 'bg-white text-gray-900 shadow-sm dark:bg-dk-card dark:text-white'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
|
||||
@click="activeTab = 'sub_containers'"
|
||||
>
|
||||
{{ t('warehouse.child_containers') }} ({{ container.ChildCount }})
|
||||
</button>
|
||||
<button
|
||||
class="px-4 py-1.5 text-sm rounded-md font-medium transition-colors"
|
||||
:class="activeTab === 'items'
|
||||
? 'bg-white text-gray-900 shadow-sm dark:bg-dk-card dark:text-white'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
|
||||
@click="activeTab = 'items'"
|
||||
>
|
||||
{{ t('warehouse.items') }} ({{ container.ItemCount }})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 子容器列表 -->
|
||||
<div v-if="activeTab === 'sub_containers'" class="rounded-xl border border-gray-200 bg-white shadow dark:border-dk-muted dark:bg-dk-card">
|
||||
<!-- 工具栏 -->
|
||||
<div class="flex items-center gap-2 px-5 py-3 border-b border-gray-100 dark:border-dk-muted">
|
||||
<div class="relative flex-1 max-w-xs">
|
||||
<IconSearch class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" :size="15" />
|
||||
<input
|
||||
v-model="subSearch"
|
||||
type="text"
|
||||
:placeholder="t('warehouse.search_placeholder')"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white py-1.5 pl-9 pr-3 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
@keyup.enter="subPage = 1; fetchSubContainers()"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700"
|
||||
@click="showAddSub = true"
|
||||
>
|
||||
<IconPlus :size="15" />
|
||||
{{ t('warehouse.add_container') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="overflow-x-auto">
|
||||
<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-5 py-3 font-medium">{{ t('warehouse.container_name') }}</th>
|
||||
<th class="px-5 py-3 font-medium w-24 text-center">{{ t('warehouse.child_containers') }}</th>
|
||||
<th class="px-5 py-3 font-medium w-24 text-center">{{ t('warehouse.items') }}</th>
|
||||
<th class="px-5 py-3 font-medium whitespace-nowrap">{{ t('warehouse.created_at') }}</th>
|
||||
<th class="px-5 py-3 font-medium w-24 text-right">{{ t('warehouse.actions') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="loadingSub">
|
||||
<td colspan="5" 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" />
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-else-if="subContainers.length === 0">
|
||||
<td colspan="5" class="px-5 py-8 text-center text-gray-400 dark:text-gray-500">
|
||||
{{ t('warehouse.no_containers') }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-else
|
||||
v-for="c in subContainers"
|
||||
:key="c.ID"
|
||||
class="border-b border-gray-100 cursor-pointer transition-colors hover:bg-gray-50 dark:border-dk-muted dark:hover:bg-dk-base"
|
||||
@click="router.push(`/warehouse/container/${c.ID}`)"
|
||||
>
|
||||
<td class="px-5 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<IconFolder class="text-blue-500 flex-shrink-0" :size="16" />
|
||||
<span class="font-medium max-w-xs truncate">{{ c.Title }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-3 text-center">
|
||||
<span class="inline-flex items-center gap-1 rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-400">
|
||||
{{ c.ChildCount }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-5 py-3 text-center">
|
||||
<span class="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/40 dark:text-green-400">
|
||||
{{ c.ItemCount }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-5 py-3 text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap">{{ fmtTs(c.CreatedAt) }}</td>
|
||||
<td class="px-5 py-3 text-right">
|
||||
<button
|
||||
class="text-xs text-blue-500 hover:underline"
|
||||
@click.stop="router.push(`/warehouse/container/${c.ID}`)"
|
||||
>
|
||||
{{ t('warehouse.view_items') }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div v-if="subTotalPages > 1" class="flex items-center justify-center gap-1 px-5 py-3 border-t border-gray-100 dark:border-dk-muted">
|
||||
<button
|
||||
class="flex items-center justify-center w-7 h-7 rounded text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:bg-dk-muted"
|
||||
:disabled="subPage <= 1"
|
||||
@click="subPage--; fetchSubContainers()"
|
||||
>
|
||||
<IconChevronLeft :size="15" />
|
||||
</button>
|
||||
<button
|
||||
v-for="p in subPageRange()"
|
||||
:key="p"
|
||||
class="flex items-center justify-center w-7 h-7 rounded text-sm"
|
||||
:class="p === subPage
|
||||
? 'bg-blue-600 text-white font-medium'
|
||||
: 'text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-dk-muted'"
|
||||
@click="subPage = p; fetchSubContainers()"
|
||||
>
|
||||
{{ p }}
|
||||
</button>
|
||||
<button
|
||||
class="flex items-center justify-center w-7 h-7 rounded text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:bg-dk-muted"
|
||||
:disabled="subPage >= subTotalPages"
|
||||
@click="subPage++; fetchSubContainers()"
|
||||
>
|
||||
<IconChevronRight :size="15" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 物品列表 -->
|
||||
<div v-if="activeTab === 'items'" class="rounded-xl border border-gray-200 bg-white shadow dark:border-dk-muted dark:bg-dk-card">
|
||||
<!-- 工具栏 -->
|
||||
<div class="flex items-center gap-2 px-5 py-3 border-b border-gray-100 dark:border-dk-muted">
|
||||
<div class="relative flex-1 max-w-xs">
|
||||
<IconSearch class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" :size="15" />
|
||||
<input
|
||||
v-model="itemSearch"
|
||||
type="text"
|
||||
:placeholder="t('warehouse.search_placeholder')"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white py-1.5 pl-9 pr-3 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
@keyup.enter="itemPage = 1; fetchItems()"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700"
|
||||
@click="router.push(`/warehouse/container/${containerId}/add-item`)"
|
||||
>
|
||||
<IconPlus :size="15" />
|
||||
{{ t('warehouse.add_item') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="overflow-x-auto">
|
||||
<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-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 w-20 text-center">{{ t('warehouse.quantity') }}</th>
|
||||
<th class="px-5 py-3 font-medium whitespace-nowrap">{{ t('warehouse.created_at') }}</th>
|
||||
<th class="px-5 py-3 font-medium w-20 text-right">{{ t('warehouse.actions') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="loadingItems">
|
||||
<td colspan="5" 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" />
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-else-if="items.length === 0">
|
||||
<td colspan="5" class="px-5 py-8 text-center text-gray-400 dark:text-gray-500">
|
||||
{{ t('warehouse.no_items') }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-else
|
||||
v-for="item in items"
|
||||
:key="item.ID"
|
||||
class="border-b border-gray-100 cursor-pointer transition-colors hover:bg-gray-50 dark:border-dk-muted dark:hover:bg-dk-base"
|
||||
@click="router.push(`/warehouse/item/${item.ID}`)"
|
||||
>
|
||||
<td class="px-5 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<IconPackage class="text-green-500 flex-shrink-0" :size="16" />
|
||||
<span class="font-medium max-w-xs truncate">{{ item.Name }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-5 py-3 text-xs text-gray-500 dark:text-gray-400 max-w-[140px] truncate">{{ item.serial_number || '—' }}</td>
|
||||
<td class="px-5 py-3 text-center text-sm">{{ item.Quantity }}</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-right">
|
||||
<button
|
||||
class="text-xs text-blue-500 hover:underline"
|
||||
@click.stop="router.push(`/warehouse/item/${item.ID}`)"
|
||||
>
|
||||
{{ t('warehouse.view_items') }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div v-if="itemTotalPages > 1" class="flex items-center justify-center gap-1 px-5 py-3 border-t border-gray-100 dark:border-dk-muted">
|
||||
<button
|
||||
class="flex items-center justify-center w-7 h-7 rounded text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:bg-dk-muted"
|
||||
:disabled="itemPage <= 1"
|
||||
@click="itemPage--; fetchItems()"
|
||||
>
|
||||
<IconChevronLeft :size="15" />
|
||||
</button>
|
||||
<button
|
||||
v-for="p in itemPageRange()"
|
||||
:key="p"
|
||||
class="flex items-center justify-center w-7 h-7 rounded text-sm"
|
||||
:class="p === itemPage
|
||||
? 'bg-blue-600 text-white font-medium'
|
||||
: 'text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-dk-muted'"
|
||||
@click="itemPage = p; fetchItems()"
|
||||
>
|
||||
{{ p }}
|
||||
</button>
|
||||
<button
|
||||
class="flex items-center justify-center w-7 h-7 rounded text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:bg-dk-muted"
|
||||
:disabled="itemPage >= itemTotalPages"
|
||||
@click="itemPage++; fetchItems()"
|
||||
>
|
||||
<IconChevronRight :size="15" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 新增子容器弹窗 -->
|
||||
<Transition name="fade">
|
||||
<div
|
||||
v-if="showAddSub"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
|
||||
@click.self="showAddSub = false"
|
||||
>
|
||||
<div class="w-full max-w-md rounded-xl border border-gray-200 bg-white p-5 shadow-xl dark:border-dk-muted dark:bg-dk-card">
|
||||
<h3 class="mb-4 text-base font-semibold text-gray-900 dark:text-white">{{ t('warehouse.add_container') }}</h3>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.container_name') }} *</label>
|
||||
<input
|
||||
v-model="addSubForm.title"
|
||||
type="text"
|
||||
:placeholder="t('warehouse.title_placeholder')"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
@keyup.enter="submitAddSub"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.remark') }}</label>
|
||||
<textarea
|
||||
v-model="addSubForm.remark"
|
||||
:placeholder="t('warehouse.remark_placeholder')"
|
||||
rows="3"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-end gap-2">
|
||||
<button
|
||||
class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white hover:bg-gray-50 dark:hover:bg-dk-muted"
|
||||
@click="showAddSub = false"
|
||||
>
|
||||
{{ t('message.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
|
||||
:disabled="submittingSub"
|
||||
@click="submitAddSub"
|
||||
>
|
||||
<svg v-if="submittingSub" class="h-4 w-4 animate-spin" 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" />
|
||||
</svg>
|
||||
{{ t('message.save') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<!-- 编辑容器弹窗 -->
|
||||
<Transition name="fade">
|
||||
<div
|
||||
v-if="showEdit"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
|
||||
@click.self="showEdit = false"
|
||||
>
|
||||
<div class="w-full max-w-md rounded-xl border border-gray-200 bg-white p-5 shadow-xl dark:border-dk-muted dark:bg-dk-card">
|
||||
<h3 class="mb-4 text-base font-semibold text-gray-900 dark:text-white">{{ t('warehouse.edit_container') }}</h3>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.container_name') }} *</label>
|
||||
<input
|
||||
v-model="editForm.title"
|
||||
type="text"
|
||||
:placeholder="t('warehouse.title_placeholder')"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
@keyup.enter="submitEdit"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.remark') }}</label>
|
||||
<textarea
|
||||
v-model="editForm.remark"
|
||||
:placeholder="t('warehouse.remark_placeholder')"
|
||||
rows="3"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-end gap-2">
|
||||
<button
|
||||
class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white hover:bg-gray-50 dark:hover:bg-dk-muted"
|
||||
@click="showEdit = false"
|
||||
>
|
||||
{{ t('message.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
|
||||
:disabled="submittingEdit"
|
||||
@click="submitEdit"
|
||||
>
|
||||
<svg v-if="submittingEdit" class="h-4 w-4 animate-spin" 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" />
|
||||
</svg>
|
||||
{{ t('message.save') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<!-- 删除确认 -->
|
||||
<ConfirmDialog
|
||||
v-model="showDeleteConfirm"
|
||||
:title="t('warehouse.delete_confirm_title')"
|
||||
:message="t('warehouse.delete_confirm_msg', { name: deletingName })"
|
||||
:confirm-text="t('warehouse.delete')"
|
||||
:cancel-text="t('message.cancel')"
|
||||
danger
|
||||
:confirm-loading="deleting"
|
||||
@confirm="doDelete"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,498 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import { usePageTitle } from '@/composables/usePageTitle'
|
||||
import { warehouseApi } from '@/api/warehouse'
|
||||
import ConfirmDialog from '@/components/ConfirmDialog.vue'
|
||||
import {
|
||||
IconPlus,
|
||||
IconChevronLeft,
|
||||
IconChevronRight,
|
||||
IconFolder,
|
||||
IconFolders,
|
||||
IconPackage,
|
||||
IconSearch,
|
||||
IconTrash,
|
||||
IconEdit,
|
||||
} from '@tabler/icons-vue'
|
||||
|
||||
usePageTitle('warehouse.container_list')
|
||||
const { t, locale } = useI18n()
|
||||
const router = useRouter()
|
||||
const toast = useToastStore()
|
||||
|
||||
// ── 状态 ──
|
||||
const containers = ref([])
|
||||
const totalCount = ref(0)
|
||||
const pageSize = ref(10)
|
||||
const currentPage = ref(1)
|
||||
const loading = ref(false)
|
||||
const search = ref('')
|
||||
|
||||
// 新增/编辑弹窗
|
||||
const showForm = ref(false)
|
||||
const formTitle = ref('')
|
||||
const editingId = ref(null)
|
||||
const form = reactive({
|
||||
title: '',
|
||||
remark: '',
|
||||
photos: [],
|
||||
})
|
||||
const submitting = ref(false)
|
||||
|
||||
// 删除确认
|
||||
const showDeleteConfirm = ref(false)
|
||||
const deletingId = ref(null)
|
||||
const deletingName = ref('')
|
||||
|
||||
// 统计
|
||||
const stats = reactive({ container_total: 0, item_total: 0, unstored_items: 0 })
|
||||
|
||||
// ── 分页 ──
|
||||
const totalPages = computed(() => Math.ceil(totalCount.value / pageSize.value) || 1)
|
||||
|
||||
const pageRange = computed(() => {
|
||||
const total = totalPages.value
|
||||
const cur = currentPage.value
|
||||
let start = Math.max(1, cur - 2)
|
||||
let end = Math.min(cur + 4, total)
|
||||
if (end - start < 4) start = Math.max(1, end - 4)
|
||||
return Array.from({ length: end - start + 1 }, (_, i) => start + i)
|
||||
})
|
||||
|
||||
// ── 拉取列表 ──
|
||||
async function fetchContainers() {
|
||||
loading.value = true
|
||||
try {
|
||||
const { errCode, data } = await warehouseApi.getContainers({
|
||||
search: search.value,
|
||||
entries: pageSize.value,
|
||||
page: currentPage.value,
|
||||
})
|
||||
if (errCode === 0) {
|
||||
containers.value = data.containers ?? []
|
||||
totalCount.value = data.all_count ?? 0
|
||||
} else {
|
||||
toast.error(t('message.server_error'))
|
||||
}
|
||||
} catch {
|
||||
// 拦截器已处理
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── 拉取统计 ──
|
||||
async function fetchStats() {
|
||||
try {
|
||||
const { errCode, data } = await warehouseApi.getCount()
|
||||
if (errCode === 0) {
|
||||
stats.container_total = data.container_total ?? 0
|
||||
stats.item_total = data.item_total ?? 0
|
||||
stats.unstored_items = data.unstored_items ?? 0
|
||||
}
|
||||
} catch {
|
||||
// 静默
|
||||
}
|
||||
}
|
||||
|
||||
// ── 翻页 ──
|
||||
function goToPage(page) {
|
||||
if (page < 1 || page > totalPages.value) return
|
||||
currentPage.value = page
|
||||
fetchContainers()
|
||||
}
|
||||
|
||||
function handlePageSizeInput(e) {
|
||||
let val = parseInt(e.target.value) || 10
|
||||
if (val > 300) val = 300
|
||||
if (val < 1) val = 1
|
||||
pageSize.value = val
|
||||
currentPage.value = 1
|
||||
fetchContainers()
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
currentPage.value = 1
|
||||
fetchContainers()
|
||||
}
|
||||
|
||||
// ── 跳转到子容器 ──
|
||||
function jumpToContainer(id) {
|
||||
router.push(`/warehouse/container/${id}`)
|
||||
}
|
||||
|
||||
// ── 打开新增 ──
|
||||
function openAdd() {
|
||||
formTitle.value = t('warehouse.add_container')
|
||||
editingId.value = null
|
||||
form.title = ''
|
||||
form.remark = ''
|
||||
form.photos = []
|
||||
showForm.value = true
|
||||
}
|
||||
|
||||
// ── 打开编辑 ──
|
||||
async function openEdit(id, e) {
|
||||
e.stopPropagation()
|
||||
try {
|
||||
const { errCode, data } = await warehouseApi.getContainer(id)
|
||||
if (errCode === 0) {
|
||||
formTitle.value = t('warehouse.edit_container')
|
||||
editingId.value = id
|
||||
form.title = data.container.title ?? ''
|
||||
form.remark = data.container.remark ?? ''
|
||||
form.photos = (data.photos ?? []).map((p) => p.sha256 ?? '')
|
||||
showForm.value = true
|
||||
} else {
|
||||
toast.error(t('message.server_error'))
|
||||
}
|
||||
} catch {
|
||||
// 拦截器已处理
|
||||
}
|
||||
}
|
||||
|
||||
// ── 提交表单 ──
|
||||
async function submitForm() {
|
||||
if (!form.title.trim()) {
|
||||
toast.warning(t('warehouse.title_required'))
|
||||
return
|
||||
}
|
||||
submitting.value = true
|
||||
try {
|
||||
const payload = { title: form.title.trim(), remark: form.remark, photos: form.photos }
|
||||
const { errCode } = editingId.value
|
||||
? await warehouseApi.updateContainer({ id: editingId.value, ...payload })
|
||||
: await warehouseApi.addContainer(payload)
|
||||
if (errCode === 0) {
|
||||
showForm.value = false
|
||||
toast.success(t('message.save_success'))
|
||||
fetchContainers()
|
||||
fetchStats()
|
||||
} else {
|
||||
toast.error(t('message.server_error'))
|
||||
}
|
||||
} catch {
|
||||
// 拦截器已处理
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── 删除确认 ──
|
||||
function confirmDelete(id, title, e) {
|
||||
e.stopPropagation()
|
||||
deletingId.value = id
|
||||
deletingName.value = title
|
||||
showDeleteConfirm.value = true
|
||||
}
|
||||
|
||||
async function doDelete() {
|
||||
try {
|
||||
const { errCode } = await warehouseApi.deleteContainer(deletingId.value)
|
||||
if (errCode === 0) {
|
||||
toast.success(t('message.delete_ok'))
|
||||
showDeleteConfirm.value = false
|
||||
fetchContainers()
|
||||
fetchStats()
|
||||
} else {
|
||||
toast.error(t('message.server_error'))
|
||||
}
|
||||
} catch {
|
||||
// 拦截器已处理
|
||||
}
|
||||
}
|
||||
|
||||
// ── 格式化时间 ──
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return ''
|
||||
const ts = parseInt(dateStr) * 1000
|
||||
if (isNaN(ts)) return ''
|
||||
return new Intl.DateTimeFormat(locale.value, {
|
||||
year: 'numeric', month: '2-digit', day: '2-digit',
|
||||
hour: '2-digit', minute: '2-digit', hour12: false,
|
||||
}).format(new Date(ts))
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchContainers()
|
||||
fetchStats()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mx-auto max-w-6xl px-6 py-6">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="mb-6 grid grid-cols-3 gap-4">
|
||||
<div class="rounded-xl border border-gray-200 bg-white px-5 py-4 shadow dark:border-dk-muted dark:bg-dk-card">
|
||||
<div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
|
||||
<IconFolders :size="18" />
|
||||
<span class="text-sm">{{ t('warehouse.container_count') }}</span>
|
||||
</div>
|
||||
<div class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">{{ stats.container_total }}</div>
|
||||
</div>
|
||||
<div class="rounded-xl border border-gray-200 bg-white px-5 py-4 shadow dark:border-dk-muted dark:bg-dk-card">
|
||||
<div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
|
||||
<IconPackage :size="18" />
|
||||
<span class="text-sm">{{ t('warehouse.item_count') }}</span>
|
||||
</div>
|
||||
<div class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">{{ stats.item_total }}</div>
|
||||
</div>
|
||||
<div class="rounded-xl border border-gray-200 bg-white px-5 py-4 shadow dark:border-dk-muted dark:bg-dk-card">
|
||||
<div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
|
||||
<IconPackage :size="18" />
|
||||
<span class="text-sm">{{ t('warehouse.unstored_items') }}</span>
|
||||
</div>
|
||||
<div class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">{{ stats.unstored_items }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主列表卡片 -->
|
||||
<div class="rounded-xl border border-gray-200 bg-white shadow-lg dark:border-dk-muted dark:bg-dk-card">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between border-b border-gray-100 px-6 py-4 dark:border-dk-muted">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('warehouse.container_list') }}</h3>
|
||||
<button
|
||||
@click="openAdd"
|
||||
class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700"
|
||||
>
|
||||
<IconPlus :size="16" />
|
||||
{{ t('warehouse.add_container') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<div class="flex items-center gap-3 border-b border-gray-100 px-6 py-3 dark:border-dk-muted">
|
||||
<div class="relative flex-1 max-w-xs">
|
||||
<IconSearch class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" :size="16" />
|
||||
<input
|
||||
v-model="search"
|
||||
type="text"
|
||||
:placeholder="t('warehouse.search_placeholder')"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white py-1.5 pl-9 pr-3 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
@click="handleSearch"
|
||||
class="rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white hover:bg-gray-50 dark:hover:bg-dk-muted"
|
||||
>
|
||||
{{ t('purchase.search') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left text-sm text-gray-900">
|
||||
<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 w-16">ID</th>
|
||||
<th class="px-6 py-3 font-medium">{{ t('warehouse.container_name') }}</th>
|
||||
<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 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>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- 加载中 -->
|
||||
<tr v-if="loading">
|
||||
<td colspan="7" 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" />
|
||||
</svg>
|
||||
{{ t('message.loading') }}
|
||||
</td>
|
||||
</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">
|
||||
{{ t('warehouse.no_containers') }}
|
||||
</td>
|
||||
</tr>
|
||||
<!-- 列表 -->
|
||||
<tr
|
||||
v-else
|
||||
v-for="c in containers"
|
||||
:key="c.ID"
|
||||
class="border-b border-gray-100 cursor-pointer transition-colors hover:bg-gray-50 dark:border-dk-muted dark:hover:bg-dk-base"
|
||||
@click="jumpToContainer(c.ID)"
|
||||
>
|
||||
<td class="px-6 py-3 text-gray-500 dark:text-gray-400">{{ c.ID }}</td>
|
||||
<td class="px-6 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<IconFolder class="text-blue-500 flex-shrink-0" :size="18" />
|
||||
<span class="font-medium text-gray-900 dark:text-white max-w-xs truncate">{{ c.Title }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-3 text-gray-500 dark:text-gray-400 max-w-xs truncate">{{ c.Remark || '—' }}</td>
|
||||
<td class="px-6 py-3 text-center">
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-400"
|
||||
>
|
||||
<IconFolders :size="12" />
|
||||
{{ c.ChildCount }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-3 text-center">
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/40 dark:text-green-400"
|
||||
>
|
||||
<IconPackage :size="12" />
|
||||
{{ c.ItemCount }}
|
||||
</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">
|
||||
<button
|
||||
v-if="c.ChildCount === 0 && c.ItemCount === 0"
|
||||
class="rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-red-500 dark:hover:bg-dk-muted"
|
||||
:title="t('warehouse.delete')"
|
||||
@click="confirmDelete(c.ID, c.Title, $event)"
|
||||
>
|
||||
<IconTrash :size="15" />
|
||||
</button>
|
||||
<button
|
||||
class="rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-blue-500 dark:hover:bg-dk-muted"
|
||||
:title="t('warehouse.edit')"
|
||||
@click="openEdit(c.ID, $event)"
|
||||
>
|
||||
<IconEdit :size="15" />
|
||||
</button>
|
||||
<button
|
||||
class="rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-blue-500 dark:hover:bg-dk-muted"
|
||||
:title="t('warehouse.view_items')"
|
||||
@click="jumpToContainer(c.ID)"
|
||||
>
|
||||
<IconChevronRight :size="15" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="flex flex-col items-center gap-3 border-t border-gray-100 px-6 py-4 sm:flex-row sm:justify-between dark:border-dk-muted">
|
||||
<div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>共 {{ totalCount }} 条</span>
|
||||
<span>每页</span>
|
||||
<input
|
||||
type="number"
|
||||
:value="pageSize"
|
||||
min="1"
|
||||
max="300"
|
||||
class="w-14 rounded border border-gray-300 px-1.5 py-0.5 text-center text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
@change="handlePageSizeInput"
|
||||
/>
|
||||
<span>条</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<button
|
||||
@click="goToPage(1)"
|
||||
:disabled="currentPage === 1"
|
||||
class="rounded p-1.5 text-gray-500 hover:bg-gray-100 disabled:opacity-30 dark:hover:bg-dk-muted"
|
||||
>
|
||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 17l-5-5 5-5M18 17l-5-5 5-5"/></svg>
|
||||
</button>
|
||||
<button
|
||||
@click="goToPage(currentPage - 1)"
|
||||
:disabled="currentPage === 1"
|
||||
class="rounded p-1.5 text-gray-500 hover:bg-gray-100 disabled:opacity-30 dark:hover:bg-dk-muted"
|
||||
>
|
||||
<IconChevronLeft :size="16" />
|
||||
</button>
|
||||
<button
|
||||
v-for="p in pageRange"
|
||||
:key="p"
|
||||
@click="goToPage(p)"
|
||||
:class="['rounded px-2.5 py-1 text-sm', p === currentPage ? 'bg-blue-600 text-white' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-dk-muted']"
|
||||
>{{ p }}</button>
|
||||
<button
|
||||
@click="goToPage(currentPage + 1)"
|
||||
:disabled="currentPage === totalPages"
|
||||
class="rounded p-1.5 text-gray-500 hover:bg-gray-100 disabled:opacity-30 dark:hover:bg-dk-muted"
|
||||
>
|
||||
<IconChevronRight :size="16" />
|
||||
</button>
|
||||
<button
|
||||
@click="goToPage(totalPages)"
|
||||
:disabled="currentPage === totalPages"
|
||||
class="rounded p-1.5 text-gray-500 hover:bg-gray-100 disabled:opacity-30 dark:hover:bg-dk-muted"
|
||||
>
|
||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 17l5-5-5-5M6 17l5-5-5-5"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="showForm"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4"
|
||||
@click.self="showForm = false"
|
||||
>
|
||||
<div class="w-full max-w-lg rounded-xl bg-white p-6 shadow-xl dark:bg-dk-card">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">{{ formTitle }}</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('warehouse.container_name') }} <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="form.title"
|
||||
type="text"
|
||||
:placeholder="t('warehouse.title_placeholder')"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.remark') }}</label>
|
||||
<textarea
|
||||
v-model="form.remark"
|
||||
rows="3"
|
||||
:placeholder="t('warehouse.remark_placeholder')"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white resize-none"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 flex justify-end gap-2">
|
||||
<button
|
||||
@click="showForm = false"
|
||||
class="rounded-lg border border-gray-300 px-4 py-2 text-sm dark:border-dk-muted dark:text-white hover:bg-gray-50 dark:hover:bg-dk-muted"
|
||||
>
|
||||
{{ t('message.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
@click="submitForm"
|
||||
:disabled="submitting"
|
||||
class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-60"
|
||||
>
|
||||
{{ submitting ? t('message.submitting') : t('message.submit') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
<!-- 删除确认 -->
|
||||
<ConfirmDialog
|
||||
v-model="showDeleteConfirm"
|
||||
:title="t('warehouse.delete_confirm_title')"
|
||||
:message="t('warehouse.delete_confirm_msg', { name: deletingName })"
|
||||
:confirm-text="t('warehouse.delete')"
|
||||
:cancel-text="t('message.cancel')"
|
||||
danger
|
||||
@confirm="doDelete"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,656 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import { usePageTitle } from '@/composables/usePageTitle'
|
||||
import { useUsersStore } from '@/stores/users'
|
||||
import { warehouseApi } from '@/api/warehouse'
|
||||
import ConfirmDialog from '@/components/ConfirmDialog.vue'
|
||||
import {
|
||||
IconPackage,
|
||||
IconEdit,
|
||||
IconTrash,
|
||||
IconArrowRight,
|
||||
IconSearch,
|
||||
} from '@tabler/icons-vue'
|
||||
|
||||
usePageTitle('warehouse.item_detail')
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToastStore()
|
||||
const usersStore = useUsersStore()
|
||||
|
||||
const itemId = computed(() => parseInt(route.params.id))
|
||||
|
||||
// ── 物品详情 ──
|
||||
const item = ref(null)
|
||||
const photos = ref([])
|
||||
const commits = ref([])
|
||||
const workOrders = ref([])
|
||||
const loadingDetail = ref(true)
|
||||
const notFound = ref(false)
|
||||
|
||||
// ── 容器名缓存 ──
|
||||
const containerNames = reactive({})
|
||||
|
||||
// ── Tab ──
|
||||
const activeTab = ref('history')
|
||||
|
||||
// ── 编辑弹窗 ──
|
||||
const showEdit = ref(false)
|
||||
const editForm = reactive({
|
||||
name: '',
|
||||
serial_number: '',
|
||||
remark: '',
|
||||
quantity: 1,
|
||||
})
|
||||
const submittingEdit = ref(false)
|
||||
|
||||
// ── 移动弹窗 ──
|
||||
const showMove = ref(false)
|
||||
const moveTarget = ref(null)
|
||||
const moveRemark = ref('')
|
||||
const submittingMove = ref(false)
|
||||
|
||||
// 移动目标下拉
|
||||
const targetContainers = ref([])
|
||||
const targetSearch = ref('')
|
||||
const targetLoading = ref(false)
|
||||
const showTargetDropdown = ref(false)
|
||||
|
||||
// ── 删除确认 ──
|
||||
const showDeleteConfirm = ref(false)
|
||||
|
||||
// ── 工单状态颜色 ──
|
||||
const statusColorMap = {
|
||||
pending: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-400',
|
||||
checked: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400',
|
||||
parts_ordered: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400',
|
||||
repaired: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400',
|
||||
returned: 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
|
||||
unrepairable: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400',
|
||||
}
|
||||
|
||||
function getStatusClass(status) {
|
||||
return statusColorMap[status] || 'bg-gray-100 text-gray-600'
|
||||
}
|
||||
|
||||
function getStatusLabel(status) {
|
||||
return t(`work_order.status_${status}`) || status
|
||||
}
|
||||
|
||||
// ── 时间格式化 ──
|
||||
function fmtTs(ts) {
|
||||
if (!ts) return '—'
|
||||
const d = new Date(parseInt(ts) * 1000)
|
||||
return d.toLocaleString()
|
||||
}
|
||||
|
||||
// ── 拉取物品详情 ──
|
||||
async function fetchItem() {
|
||||
loadingDetail.value = true
|
||||
notFound.value = false
|
||||
try {
|
||||
const { errCode, data } = await warehouseApi.getItem(itemId.value)
|
||||
if (errCode === 0 && data) {
|
||||
item.value = data.item
|
||||
photos.value = data.photos ?? []
|
||||
commits.value = data.commits ?? []
|
||||
workOrders.value = data.work_orders ?? []
|
||||
loadContainerNames()
|
||||
} else {
|
||||
notFound.value = true
|
||||
}
|
||||
} catch {
|
||||
notFound.value = true
|
||||
} finally {
|
||||
loadingDetail.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── 加载容器名 ──
|
||||
async function loadContainerNames() {
|
||||
const ids = new Set()
|
||||
for (const c of commits.value) {
|
||||
if (c.OldContainer) ids.add(c.OldContainer)
|
||||
if (c.NewContainer) ids.add(c.NewContainer)
|
||||
}
|
||||
if (item.value?.ContainerID) ids.add(item.value.ContainerID)
|
||||
if (ids.size === 0) return
|
||||
|
||||
try {
|
||||
const allContainers = []
|
||||
let page = 1
|
||||
let hasMore = true
|
||||
while (hasMore) {
|
||||
const { errCode, data } = await warehouseApi.getContainers({ entries: 300, page })
|
||||
if (errCode === 0) {
|
||||
allContainers.push(...(data.containers ?? []))
|
||||
hasMore = (data.containers ?? []).length === 300
|
||||
page++
|
||||
} else {
|
||||
break
|
||||
}
|
||||
}
|
||||
for (const c of allContainers) {
|
||||
if (ids.has(c.ID)) {
|
||||
containerNames[c.ID] = c.Title
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
// ── 获取容器显示名 ──
|
||||
function getContainerName(id) {
|
||||
if (!id) return t('warehouse.unstored')
|
||||
return containerNames[id] || `#${id}`
|
||||
}
|
||||
|
||||
// ── 编辑 ──
|
||||
function openEdit() {
|
||||
editForm.name = item.value?.Name ?? ''
|
||||
editForm.serial_number = item.value?.SerialNumber ?? ''
|
||||
editForm.remark = item.value?.Remark ?? ''
|
||||
editForm.quantity = item.value?.Quantity ?? 1
|
||||
showEdit.value = true
|
||||
}
|
||||
|
||||
async function submitEdit() {
|
||||
if (!editForm.name.trim()) {
|
||||
toast.error(t('warehouse.item_name_required'))
|
||||
return
|
||||
}
|
||||
submittingEdit.value = true
|
||||
try {
|
||||
const { errCode } = await warehouseApi.updateItem({
|
||||
id: itemId.value,
|
||||
name: editForm.name.trim(),
|
||||
serial_number: editForm.serial_number.trim(),
|
||||
remark: editForm.remark.trim(),
|
||||
quantity: editForm.quantity > 0 ? editForm.quantity : 1,
|
||||
})
|
||||
if (errCode === 0) {
|
||||
toast.success(t('message.save_success'))
|
||||
showEdit.value = false
|
||||
fetchItem()
|
||||
} else {
|
||||
toast.error(t('message.server_error'))
|
||||
}
|
||||
} catch {
|
||||
toast.error(t('message.server_error'))
|
||||
} finally {
|
||||
submittingEdit.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── 移动 ──
|
||||
async function openMove() {
|
||||
moveTarget.value = item.value?.ContainerID ?? null
|
||||
moveRemark.value = ''
|
||||
targetSearch.value = ''
|
||||
targetContainers.value = []
|
||||
showTargetDropdown.value = false
|
||||
showMove.value = true
|
||||
}
|
||||
|
||||
async function loadTargetContainers(search = '') {
|
||||
targetLoading.value = true
|
||||
try {
|
||||
const { errCode, data } = await warehouseApi.getContainers({
|
||||
search,
|
||||
entries: 50,
|
||||
page: 1,
|
||||
})
|
||||
if (errCode === 0) {
|
||||
targetContainers.value = (data.containers ?? []).filter(
|
||||
(c) => c.ID !== itemId.value && c.ID !== item.value?.ContainerID
|
||||
)
|
||||
}
|
||||
} catch {
|
||||
targetContainers.value = []
|
||||
} finally {
|
||||
targetLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function selectTarget(id, title) {
|
||||
moveTarget.value = id
|
||||
targetSearch.value = title
|
||||
showTargetDropdown.value = false
|
||||
}
|
||||
|
||||
async function submitMove() {
|
||||
if (moveTarget.value === item.value?.ContainerID) {
|
||||
showMove.value = false
|
||||
return
|
||||
}
|
||||
submittingMove.value = true
|
||||
try {
|
||||
const { errCode } = await warehouseApi.moveItem({
|
||||
item_id: itemId.value,
|
||||
new_container: moveTarget.value,
|
||||
remark: moveRemark.value.trim(),
|
||||
})
|
||||
if (errCode === 0) {
|
||||
toast.success(t('message.save_success'))
|
||||
showMove.value = false
|
||||
fetchItem()
|
||||
} else {
|
||||
toast.error(t('message.server_error'))
|
||||
}
|
||||
} catch {
|
||||
toast.error(t('message.server_error'))
|
||||
} finally {
|
||||
submittingMove.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── 删除 ──
|
||||
async function doDelete() {
|
||||
try {
|
||||
const { errCode } = await warehouseApi.deleteItem(itemId.value)
|
||||
if (errCode === 0) {
|
||||
toast.success(t('message.delete_ok'))
|
||||
showDeleteConfirm.value = false
|
||||
const cid = item.value?.ContainerID
|
||||
if (cid) {
|
||||
router.push(`/warehouse/container/${cid}`)
|
||||
} else {
|
||||
router.push('/warehouse/item')
|
||||
}
|
||||
} else {
|
||||
toast.error(t('message.server_error'))
|
||||
}
|
||||
} catch {
|
||||
toast.error(t('message.server_error'))
|
||||
}
|
||||
}
|
||||
|
||||
// ── 初始化 ──
|
||||
onMounted(() => {
|
||||
fetchItem()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-4 max-w-5xl mx-auto space-y-4">
|
||||
|
||||
<!-- 加载 -->
|
||||
<div v-if="loadingDetail" class="flex justify-center py-16">
|
||||
<svg class="h-6 w-6 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" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 未找到 -->
|
||||
<div v-else-if="notFound" class="flex flex-col items-center justify-center py-16 text-gray-400">
|
||||
<p>{{ t('message.not_found') }}</p>
|
||||
<button class="mt-2 text-sm text-blue-500 hover:underline" @click="router.push('/warehouse/item')">
|
||||
{{ t('warehouse.back_to_list') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<template v-else-if="item">
|
||||
|
||||
<!-- 面包屑 + 操作栏 -->
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<RouterLink to="/warehouse/item" class="text-blue-500 hover:underline">
|
||||
{{ t('warehouse.item_list') }}
|
||||
</RouterLink>
|
||||
<span class="text-gray-400">/</span>
|
||||
<span class="font-medium text-gray-900 dark:text-white">{{ item.Name }}</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-dk-muted dark:bg-dk-base dark:text-white dark:hover:bg-dk-muted"
|
||||
@click="openMove"
|
||||
>
|
||||
<IconArrowRight :size="14" />
|
||||
{{ t('warehouse.move_item') }}
|
||||
</button>
|
||||
<button
|
||||
class="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-dk-muted dark:bg-dk-base dark:text-white dark:hover:bg-dk-muted"
|
||||
@click="openEdit"
|
||||
>
|
||||
<IconEdit :size="14" />
|
||||
{{ t('warehouse.edit') }}
|
||||
</button>
|
||||
<button
|
||||
class="inline-flex items-center gap-1.5 rounded-lg border border-red-300 bg-white px-3 py-1.5 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:border-red-900 dark:bg-dk-base dark:text-red-400 dark:hover:bg-red-900/20"
|
||||
@click="showDeleteConfirm = true"
|
||||
>
|
||||
<IconTrash :size="14" />
|
||||
{{ t('warehouse.delete') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 物品信息卡 -->
|
||||
<div class="rounded-xl border border-gray-200 bg-white px-5 py-4 shadow dark:border-dk-muted dark:bg-dk-card">
|
||||
<div class="flex items-start gap-4 mb-3">
|
||||
<div class="flex-shrink-0 mt-1">
|
||||
<IconPackage :size="32" class="text-blue-500" />
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ item.Name }}</h2>
|
||||
<div class="flex flex-wrap gap-x-6 gap-y-1 mt-1 text-sm text-gray-500">
|
||||
<span v-if="item.SerialNumber">{{ t('warehouse.serial_number') }}: {{ item.SerialNumber }}</span>
|
||||
<span>{{ t('warehouse.quantity') }}: {{ item.Quantity }}</span>
|
||||
<span>{{ t('warehouse.location') }}:
|
||||
<RouterLink
|
||||
v-if="item.ContainerID"
|
||||
:to="`/warehouse/container/${item.ContainerID}`"
|
||||
class="text-blue-500 hover:underline ml-1"
|
||||
>
|
||||
{{ containerNames[item.ContainerID] || `#${item.ContainerID}` }}
|
||||
</RouterLink>
|
||||
<span v-else class="text-orange-500 ml-1">{{ t('warehouse.unstored') }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片 -->
|
||||
<div v-if="photos.length" class="flex gap-2 flex-wrap mb-3">
|
||||
<a
|
||||
v-for="photo in photos"
|
||||
:key="photo.ID"
|
||||
:href="`/api/files/get/${photo.Sha256}`"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
:src="`/api/files/get/${photo.Sha256}`"
|
||||
class="w-16 h-16 object-cover rounded border border-gray-200 dark:border-dk-muted"
|
||||
:alt="photo.Name"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 备注 -->
|
||||
<p
|
||||
v-if="item.Remark"
|
||||
class="text-sm text-gray-500 dark:text-gray-400 whitespace-pre-wrap mb-3"
|
||||
>
|
||||
{{ item.Remark }}
|
||||
</p>
|
||||
|
||||
<!-- 元信息 -->
|
||||
<div class="flex flex-wrap gap-x-6 gap-y-1 text-xs text-gray-400 dark:text-gray-500">
|
||||
<span>{{ t('warehouse.created_by') }}: {{ usersStore.getUsernameFromUserID(item.CreatorID) }}</span>
|
||||
<span>{{ t('warehouse.created_at') }}: {{ fmtTs(item.CreatedAt) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 切换 -->
|
||||
<div class="flex gap-1 rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-dk-muted dark:bg-dk-base w-fit">
|
||||
<button
|
||||
class="px-4 py-1.5 text-sm rounded-md font-medium transition-colors"
|
||||
:class="activeTab === 'history'
|
||||
? 'bg-white text-gray-900 shadow-sm dark:bg-dk-card dark:text-white'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
|
||||
@click="activeTab = 'history'"
|
||||
>
|
||||
{{ t('warehouse.move_history') }} ({{ commits.length }})
|
||||
</button>
|
||||
<button
|
||||
class="px-4 py-1.5 text-sm rounded-md font-medium transition-colors"
|
||||
:class="activeTab === 'work_orders'
|
||||
? 'bg-white text-gray-900 shadow-sm dark:bg-dk-card dark:text-white'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
|
||||
@click="activeTab = 'work_orders'"
|
||||
>
|
||||
{{ t('warehouse.work_orders') }} ({{ workOrders.length }})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 移动历史 -->
|
||||
<div v-if="activeTab === 'history'">
|
||||
<div v-if="commits.length === 0" class="rounded-xl border border-gray-200 bg-white px-5 py-8 text-center text-sm text-gray-400 dark:border-dk-muted dark:bg-dk-card">
|
||||
{{ t('warehouse.no_move_history') }}
|
||||
</div>
|
||||
<div v-else class="space-y-2">
|
||||
<div
|
||||
v-for="commit in commits"
|
||||
:key="commit.ID"
|
||||
class="rounded-xl border border-gray-200 bg-white px-4 py-3 flex items-center gap-3 dark:border-dk-muted dark:bg-dk-card"
|
||||
>
|
||||
<!-- 操作人头像 -->
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-400">
|
||||
{{ usersStore.getUsernameFromUserID(commit.UserID)?.slice(0, 1) || '?' }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 路径 -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 flex-wrap text-xs text-gray-400">
|
||||
<span>{{ usersStore.getUsernameFromUserID(commit.UserID) }}</span>
|
||||
<span>{{ fmtTs(commit.CreatedAt) }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 mt-0.5 flex-wrap text-sm font-medium text-gray-700 dark:text-gray-200">
|
||||
<span>{{ getContainerName(commit.OldContainer) }}</span>
|
||||
<IconArrowRight :size="13" class="text-blue-500 flex-shrink-0" />
|
||||
<span>{{ getContainerName(commit.NewContainer) }}</span>
|
||||
</div>
|
||||
<p v-if="commit.Remark" class="text-xs text-gray-400 mt-0.5">{{ commit.Remark }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关联工单 -->
|
||||
<div v-if="activeTab === 'work_orders'">
|
||||
<div v-if="workOrders.length === 0" class="rounded-xl border border-gray-200 bg-white px-5 py-8 text-center text-sm text-gray-400 dark:border-dk-muted dark:bg-dk-card">
|
||||
{{ t('warehouse.no_work_orders') }}
|
||||
</div>
|
||||
<div v-else class="space-y-2">
|
||||
<RouterLink
|
||||
v-for="wo in workOrders"
|
||||
:key="wo.id"
|
||||
:to="`/work_order/show/${wo.id}`"
|
||||
class="rounded-xl border border-gray-200 bg-white px-4 py-3 flex items-center justify-between gap-3 hover:shadow transition-shadow dark:border-dk-muted dark:bg-dk-card dark:hover:shadow-none"
|
||||
>
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<IconPackage :size="16" class="text-blue-500 flex-shrink-0" />
|
||||
<span class="font-medium text-sm text-gray-900 truncate dark:text-white">{{ wo.title }}</span>
|
||||
</div>
|
||||
<span
|
||||
class="flex-shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium"
|
||||
:class="getStatusClass(wo.status)"
|
||||
>
|
||||
{{ getStatusLabel(wo.status) }}
|
||||
</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<Transition name="fade">
|
||||
<div
|
||||
v-if="showEdit"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
|
||||
@click.self="showEdit = false"
|
||||
>
|
||||
<div class="w-full max-w-md rounded-xl border border-gray-200 bg-white p-5 shadow-xl dark:border-dk-muted dark:bg-dk-card">
|
||||
<h3 class="mb-4 text-base font-semibold text-gray-900 dark:text-white">{{ t('warehouse.edit_item') }}</h3>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.item_name') }} *</label>
|
||||
<input
|
||||
v-model="editForm.name"
|
||||
type="text"
|
||||
:placeholder="t('warehouse.item_name_placeholder')"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
@keyup.enter="submitEdit"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.serial_number') }}</label>
|
||||
<input
|
||||
v-model="editForm.serial_number"
|
||||
type="text"
|
||||
:placeholder="t('warehouse.serial_number_placeholder')"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.quantity') }}</label>
|
||||
<input
|
||||
v-model.number="editForm.quantity"
|
||||
type="number"
|
||||
min="1"
|
||||
class="w-28 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.remark') }}</label>
|
||||
<textarea
|
||||
v-model="editForm.remark"
|
||||
:placeholder="t('warehouse.remark_placeholder')"
|
||||
rows="3"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-end gap-2">
|
||||
<button
|
||||
class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white hover:bg-gray-50 dark:hover:bg-dk-muted"
|
||||
@click="showEdit = false"
|
||||
>
|
||||
{{ t('message.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
|
||||
:disabled="submittingEdit"
|
||||
@click="submitEdit"
|
||||
>
|
||||
<svg v-if="submittingEdit" class="h-4 w-4 animate-spin" 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" />
|
||||
</svg>
|
||||
{{ t('message.save') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<!-- 移动弹窗 -->
|
||||
<Transition name="fade">
|
||||
<div
|
||||
v-if="showMove"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
|
||||
@click.self="showMove = false"
|
||||
>
|
||||
<div class="w-full max-w-md rounded-xl border border-gray-200 bg-white p-5 shadow-xl dark:border-dk-muted dark:bg-dk-card">
|
||||
<h3 class="mb-4 text-base font-semibold text-gray-900 dark:text-white">{{ t('warehouse.move_item') }}</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="text-sm text-gray-500">
|
||||
{{ t('warehouse.current_location') }}:
|
||||
<span class="font-medium text-gray-700 dark:text-gray-300">
|
||||
<RouterLink
|
||||
v-if="item?.ContainerID"
|
||||
:to="`/warehouse/container/${item.ContainerID}`"
|
||||
class="text-blue-500 hover:underline"
|
||||
>
|
||||
{{ containerNames[item.ContainerID] || `#${item.ContainerID}` }}
|
||||
</RouterLink>
|
||||
<span v-else class="text-orange-500">{{ t('warehouse.unstored') }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.target_container') }}</label>
|
||||
<div class="relative">
|
||||
<IconSearch class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" :size="15" />
|
||||
<input
|
||||
v-model="targetSearch"
|
||||
type="text"
|
||||
:placeholder="t('warehouse.search_container')"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white py-2 pl-9 pr-3 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
@focus="loadTargetContainers(''); showTargetDropdown = true"
|
||||
@input="loadTargetContainers(targetSearch); showTargetDropdown = true"
|
||||
/>
|
||||
<div
|
||||
v-if="showTargetDropdown && (targetContainers.length > 0 || targetLoading)"
|
||||
class="absolute z-10 mt-1 w-full rounded-lg border border-gray-200 bg-white shadow-lg dark:border-dk-muted dark:bg-dk-card max-h-60 overflow-y-auto"
|
||||
>
|
||||
<div v-if="targetLoading" class="px-3 py-2 text-xs text-gray-400">
|
||||
<svg class="inline h-3.5 w-3.5 animate-spin mr-1" 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" />
|
||||
</svg>
|
||||
{{ t('message.loading') }}
|
||||
</div>
|
||||
<button
|
||||
class="flex w-full items-center gap-2 px-3 py-2 text-sm text-left text-orange-500 hover:bg-gray-50 dark:text-orange-400 dark:hover:bg-dk-muted"
|
||||
@click="selectTarget(null, t('warehouse.unstored')); showTargetDropdown = false"
|
||||
>
|
||||
{{ t('warehouse.unstored') }}
|
||||
</button>
|
||||
<button
|
||||
v-for="c in targetContainers"
|
||||
:key="c.ID"
|
||||
class="flex w-full items-center gap-2 px-3 py-2 text-sm text-left hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-dk-muted"
|
||||
@click="selectTarget(c.ID, c.Title); showTargetDropdown = false"
|
||||
>
|
||||
<IconPackage :size="13" class="text-blue-500 flex-shrink-0" />
|
||||
{{ c.Title }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1 text-xs">
|
||||
<span v-if="moveTarget === null" class="text-orange-500">→ {{ t('warehouse.unstored') }}</span>
|
||||
<span v-else-if="moveTarget" class="text-blue-500">→ {{ containerNames[moveTarget] || `#${moveTarget}` }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('warehouse.remark') }}</label>
|
||||
<textarea
|
||||
v-model="moveRemark"
|
||||
:placeholder="t('warehouse.move_remark_placeholder')"
|
||||
rows="2"
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-end gap-2">
|
||||
<button
|
||||
class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white hover:bg-gray-50 dark:hover:bg-dk-muted"
|
||||
@click="showMove = false"
|
||||
>
|
||||
{{ t('message.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
|
||||
:disabled="submittingMove"
|
||||
@click="submitMove"
|
||||
>
|
||||
<svg v-if="submittingMove" class="h-4 w-4 animate-spin" 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" />
|
||||
</svg>
|
||||
{{ t('warehouse.confirm_move') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<!-- 删除确认 -->
|
||||
<ConfirmDialog
|
||||
v-model="showDeleteConfirm"
|
||||
:title="t('warehouse.delete_item_title')"
|
||||
:message="t('warehouse.delete_item_msg', { name: item?.Name })"
|
||||
danger
|
||||
@confirm="doDelete"
|
||||
/>
|
||||
|
||||
</template>
|
||||
@@ -0,0 +1,353 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import { usePageTitle } from '@/composables/usePageTitle'
|
||||
import { warehouseApi } from '@/api/warehouse'
|
||||
import ConfirmDialog from '@/components/ConfirmDialog.vue'
|
||||
import {
|
||||
IconChevronLeft,
|
||||
IconChevronRight,
|
||||
IconPackage,
|
||||
IconSearch,
|
||||
IconTrash,
|
||||
IconArrowRight,
|
||||
} from '@tabler/icons-vue'
|
||||
|
||||
usePageTitle('warehouse.item_list')
|
||||
const { t, locale } = useI18n()
|
||||
const router = useRouter()
|
||||
const toast = useToastStore()
|
||||
|
||||
// ── 状态 ──
|
||||
const items = ref([])
|
||||
const totalCount = ref(0)
|
||||
const pageSize = ref(10)
|
||||
const currentPage = ref(1)
|
||||
const search = ref('')
|
||||
const loading = ref(false)
|
||||
|
||||
// 容器名映射表
|
||||
const containerMap = ref({})
|
||||
const allContainerCount = ref(0)
|
||||
|
||||
const isEn = computed(() => locale.value === 'en')
|
||||
|
||||
// ── 统计数据 ──
|
||||
const stats = reactive({
|
||||
total: 0,
|
||||
inContainer: 0,
|
||||
unstored: 0,
|
||||
})
|
||||
|
||||
// ── 分页信息 ──
|
||||
const totalPages = computed(() => Math.ceil(totalCount.value / pageSize.value) || 1)
|
||||
|
||||
function getContainerTitle(cid) {
|
||||
if (cid == null) return `<span class="text-gray-400">${t('warehouse.unstored_items')}</span>`
|
||||
return containerMap.value[cid] || `#${cid}`
|
||||
}
|
||||
|
||||
// ── 获取容器名映射 ──
|
||||
async function fetchContainerMap() {
|
||||
try {
|
||||
const { errCode, data } = await warehouseApi.getContainers({ entries: 500, page: 1 })
|
||||
if (errCode === 0 && data) {
|
||||
allContainerCount.value = data.all_count || 0
|
||||
const map = {}
|
||||
for (const c of (data.containers || [])) {
|
||||
map[c.id] = c.title
|
||||
}
|
||||
for (const c of (data.containers || [])) {
|
||||
if (c.child_count > 0) {
|
||||
await fetchChildContainers(c.id, map)
|
||||
}
|
||||
}
|
||||
containerMap.value = map
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchChildContainers(parentId, map) {
|
||||
try {
|
||||
const { errCode, data } = await warehouseApi.getContainers({ entries: 500, page: 1, parent_id: parentId })
|
||||
if (errCode === 0 && data) {
|
||||
for (const c of (data.containers || [])) {
|
||||
map[c.id] = c.title
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
// ── 获取物品列表 ──
|
||||
async function fetchItems() {
|
||||
loading.value = true
|
||||
try {
|
||||
const { errCode, data } = await warehouseApi.getItems({
|
||||
search: search.value.trim(),
|
||||
entries: pageSize.value,
|
||||
page: currentPage.value,
|
||||
})
|
||||
if (errCode === 0 && data) {
|
||||
items.value = data.items || []
|
||||
totalCount.value = data.all_count || 0
|
||||
stats.total = data.all_count || 0
|
||||
stats.inContainer = items.value.filter(i => i.container_id != null).length
|
||||
stats.unstored = items.value.filter(i => i.container_id == null).length
|
||||
}
|
||||
} catch {
|
||||
toast.error(t('message.server_error'))
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── 搜索 ──
|
||||
let searchTimer = null
|
||||
function onSearchInput() {
|
||||
clearTimeout(searchTimer)
|
||||
searchTimer = setTimeout(() => {
|
||||
currentPage.value = 1
|
||||
fetchItems()
|
||||
}, 400)
|
||||
}
|
||||
|
||||
// ── 分页 ──
|
||||
function prevPage() {
|
||||
if (currentPage.value > 1) {
|
||||
currentPage.value--
|
||||
fetchItems()
|
||||
}
|
||||
}
|
||||
function nextPage() {
|
||||
if (currentPage.value < totalPages.value) {
|
||||
currentPage.value++
|
||||
fetchItems()
|
||||
}
|
||||
}
|
||||
function goPage(p) {
|
||||
if (p >= 1 && p <= totalPages.value && p !== currentPage.value) {
|
||||
currentPage.value = p
|
||||
fetchItems()
|
||||
}
|
||||
}
|
||||
|
||||
const pageNumbers = computed(() => {
|
||||
const total = totalPages.value
|
||||
const cur = currentPage.value
|
||||
if (total <= 5) return Array.from({ length: total }, (_, i) => i + 1)
|
||||
const pages = []
|
||||
if (cur <= 3) {
|
||||
pages.push(1, 2, 3, 4, '...', total)
|
||||
} else if (cur >= total - 2) {
|
||||
pages.push(1, '...', total - 3, total - 2, total - 1, total)
|
||||
} else {
|
||||
pages.push(1, '...', cur - 1, cur, cur + 1, '...', total)
|
||||
}
|
||||
return pages
|
||||
})
|
||||
|
||||
// ── 跳转物品详情 ──
|
||||
function goToDetail(item) {
|
||||
router.push(`/warehouse/item/${item.id}`)
|
||||
}
|
||||
|
||||
// ── 删除 ──
|
||||
const deleteTarget = ref(null)
|
||||
const confirmDelete = ref(false)
|
||||
const deletingItem = ref(false)
|
||||
|
||||
function askDelete(item) {
|
||||
deleteTarget.value = item
|
||||
confirmDelete.value = true
|
||||
}
|
||||
|
||||
async function doDeleteItem() {
|
||||
if (!deleteTarget.value) return
|
||||
deletingItem.value = true
|
||||
try {
|
||||
const { errCode } = await warehouseApi.deleteItem(deleteTarget.value.id)
|
||||
if (errCode === 0) {
|
||||
toast.success(t('message.delete_success'))
|
||||
confirmDelete.value = false
|
||||
deleteTarget.value = null
|
||||
fetchItems()
|
||||
} else {
|
||||
toast.error(t('message.server_error'))
|
||||
}
|
||||
} catch {
|
||||
toast.error(t('message.server_error'))
|
||||
} finally {
|
||||
deletingItem.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── 工具函数 ──
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return '—'
|
||||
try {
|
||||
const d = new Date(dateStr)
|
||||
return d.toLocaleDateString(isEn.value ? 'en-US' : 'zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })
|
||||
} catch {
|
||||
return dateStr
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchContainerMap().then(fetchItems)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-4 max-w-6xl mx-auto space-y-4">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div class="rounded-xl border border-gray-200 bg-white px-5 py-4 shadow dark:border-dk-muted dark:bg-dk-card">
|
||||
<div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
|
||||
<IconPackage :size="18" />
|
||||
<span class="text-sm">{{ t('warehouse.item_count') }}</span>
|
||||
</div>
|
||||
<div class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">{{ stats.total }}</div>
|
||||
</div>
|
||||
<div class="rounded-xl border border-gray-200 bg-white px-5 py-4 shadow dark:border-dk-muted dark:bg-dk-card">
|
||||
<div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
|
||||
<IconArrowRight :size="18" />
|
||||
<span class="text-sm">{{ t('warehouse.items_in_containers') }}</span>
|
||||
</div>
|
||||
<div class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">{{ stats.inContainer }}</div>
|
||||
</div>
|
||||
<div class="rounded-xl border border-gray-200 bg-white px-5 py-4 shadow dark:border-dk-muted dark:bg-dk-card">
|
||||
<div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
|
||||
<IconPackage :size="18" />
|
||||
<span class="text-sm">{{ t('warehouse.unstored_items') }}</span>
|
||||
</div>
|
||||
<div class="mt-1 text-2xl font-bold text-orange-600 dark:text-orange-400">{{ stats.unstored }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<div class="rounded-xl border border-gray-200 bg-white px-4 py-3 flex items-center gap-3 dark:border-dk-muted dark:bg-dk-card">
|
||||
<IconSearch :size="18" class="text-gray-400 flex-shrink-0" />
|
||||
<input
|
||||
v-model="search"
|
||||
class="flex-1 bg-transparent outline-none text-sm text-gray-900 dark:text-white"
|
||||
:placeholder="t('warehouse.search_item_placeholder')"
|
||||
@input="onSearchInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 表格卡片 -->
|
||||
<div class="rounded-xl border border-gray-200 bg-white shadow dark:border-dk-muted dark:bg-dk-card">
|
||||
<!-- 加载 -->
|
||||
<div v-if="loading" class="flex justify-center py-12">
|
||||
<svg class="h-6 w-6 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" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else-if="items.length === 0" class="flex flex-col items-center justify-center py-16 text-gray-400">
|
||||
<IconPackage :size="40" class="mb-3 opacity-30" />
|
||||
<span class="text-sm">{{ t('warehouse.no_items') }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div v-else class="overflow-x-auto">
|
||||
<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-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 w-20 text-center">{{ t('warehouse.quantity') }}</th>
|
||||
<th class="px-5 py-3 font-medium">{{ t('warehouse.location') }}</th>
|
||||
<th class="px-5 py-3 font-medium whitespace-nowrap">{{ t('warehouse.created_at') }}</th>
|
||||
<th class="px-5 py-3 font-medium w-16 text-right">{{ t('warehouse.actions') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
class="border-b border-gray-100 cursor-pointer transition-colors hover:bg-gray-50 dark:border-dk-muted dark:hover:bg-dk-base"
|
||||
@click="goToDetail(item)"
|
||||
>
|
||||
<td class="px-5 py-3 font-medium max-w-[200px] truncate">{{ item.name }}</td>
|
||||
<td class="px-5 py-3 text-xs text-gray-500 dark:text-gray-400 max-w-[160px] truncate">{{ item.serial_number || '—' }}</td>
|
||||
<td class="px-5 py-3 text-center text-sm">{{ item.quantity }}</td>
|
||||
<td class="px-5 py-3">
|
||||
<span v-if="item.container_id != null" class="inline-flex items-center gap-1 text-blue-600 text-sm">
|
||||
<IconArrowRight :size="13" />
|
||||
<span class="truncate max-w-[140px]">{{ getContainerTitle(item.container_id) }}</span>
|
||||
</span>
|
||||
<span v-else class="inline-flex items-center gap-1 text-xs text-orange-500">
|
||||
{{ t('warehouse.unstored_items') }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-5 py-3 text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap">{{ formatDate(item.created_at) }}</td>
|
||||
<td class="px-5 py-3 text-right" @click.stop>
|
||||
<button
|
||||
class="inline-flex items-center justify-center w-7 h-7 rounded text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20"
|
||||
@click="askDelete(item)"
|
||||
>
|
||||
<IconTrash :size="14" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div v-if="totalPages > 1" class="flex items-center justify-between px-5 py-3 border-t border-gray-100 dark:border-dk-muted">
|
||||
<div class="text-xs text-gray-400 dark:text-gray-500">
|
||||
{{ t('warehouse.total_items', { count: totalCount }) }}
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<button
|
||||
class="flex items-center justify-center w-7 h-7 rounded text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:bg-dk-muted"
|
||||
:disabled="currentPage === 1"
|
||||
@click="prevPage"
|
||||
>
|
||||
<IconChevronLeft :size="15" />
|
||||
</button>
|
||||
<template v-for="p in pageNumbers" :key="p">
|
||||
<span v-if="p === '...'" class="px-1 text-gray-400 text-sm">…</span>
|
||||
<button
|
||||
v-else
|
||||
class="flex items-center justify-center w-7 h-7 rounded text-sm"
|
||||
:class="p === currentPage
|
||||
? 'bg-blue-600 text-white font-medium'
|
||||
: 'text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-dk-muted'"
|
||||
@click="goPage(p)"
|
||||
>
|
||||
{{ p }}
|
||||
</button>
|
||||
</template>
|
||||
<button
|
||||
class="flex items-center justify-center w-7 h-7 rounded text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:bg-dk-muted"
|
||||
:disabled="currentPage === totalPages"
|
||||
@click="nextPage"
|
||||
>
|
||||
<IconChevronRight :size="15" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 删除确认 -->
|
||||
<ConfirmDialog
|
||||
v-model="confirmDelete"
|
||||
:title="t('warehouse.delete_item_title')"
|
||||
:message="t('warehouse.delete_item_msg', { name: deleteTarget?.name })"
|
||||
:confirm-loading="deletingItem"
|
||||
@confirm="doDeleteItem"
|
||||
/>
|
||||
</template>
|
||||
Reference in New Issue
Block a user