feat(item): add brand field to items
This commit introduces an optional 'brand' field to the item model, allowing for better organization and differentiation. - The Add/Edit modal now includes a form field to select or create a brand. - The item list on the main page now displays the brand next to the item name. - Name uniqueness validation is now brand-aware. An item name must be unique within the context of its brand. - The `addItem` logic is centralized in the `useItemsStore` to handle ID and timestamp generation.
This commit is contained in:
@@ -4,11 +4,7 @@
|
||||
:title="isEditMode ? '编辑物品' : '新增物品'"
|
||||
:description="isEditMode ? '修改现有物品信息' : '新增一件新的物品'"
|
||||
>
|
||||
<UButton
|
||||
label="新增"
|
||||
icon="lucide:plus"
|
||||
@click="openModal()"
|
||||
/>
|
||||
<UButton label="新增" icon="lucide:plus" @click="openModal()" />
|
||||
|
||||
<template #body>
|
||||
<UForm
|
||||
@@ -18,6 +14,17 @@
|
||||
@submit="onSubmit"
|
||||
class="space-y-4"
|
||||
>
|
||||
<UFormField label="品牌名称" name="brand">
|
||||
<USelectMenu
|
||||
v-model="itemState.brand"
|
||||
:items="utils.allBrands.value"
|
||||
placeholder="请输入物品品牌名(可选)"
|
||||
class="w-full"
|
||||
create-item
|
||||
@create="(brand: string) => utils.allBrands.value.push(brand)"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="标品名称" required name="name">
|
||||
<UInput
|
||||
v-model="itemState.name"
|
||||
@@ -87,10 +94,11 @@ const isEditMode = ref<boolean>(false);
|
||||
const currentId = ref<number | null>(null);
|
||||
|
||||
const toast = useToast();
|
||||
const { stats, isNameAvailable, addItem, editItem, items } = useItemsStore();
|
||||
const { utils, isNameAvailable, addItem, editItem, items } = useItemsStore();
|
||||
|
||||
// 🧩 基础校验(动态 schema)
|
||||
const baseSchema = z.object({
|
||||
brand: z.string().optional(),
|
||||
name: z.string().min(1, "名称不能为空"),
|
||||
imageUrl: z.string().nullable().optional(),
|
||||
description: z.string().nullable().optional(),
|
||||
@@ -102,10 +110,8 @@ const formSchema = computed(() =>
|
||||
baseSchema.refine(
|
||||
(data) =>
|
||||
isEditMode.value
|
||||
? !items.value.some(
|
||||
(i) => i.name === data.name && i.id !== currentId.value
|
||||
)
|
||||
: isNameAvailable(data.name),
|
||||
? isNameAvailable(currentId.value, data.name, data.brand)
|
||||
: isNameAvailable(null, data.name, data.brand),
|
||||
"该名称已被占用,请更换一个"
|
||||
)
|
||||
);
|
||||
@@ -113,6 +119,7 @@ const formSchema = computed(() =>
|
||||
type ItemSchema = z.output<typeof baseSchema>;
|
||||
|
||||
const itemState = reactive<ItemSchema>({
|
||||
brand: undefined,
|
||||
name: "",
|
||||
imageUrl: null,
|
||||
description: null,
|
||||
@@ -125,6 +132,7 @@ const openModal = (item?: Item) => {
|
||||
// 编辑模式
|
||||
isEditMode.value = true;
|
||||
currentId.value = item.id;
|
||||
itemState.brand = item.brand;
|
||||
itemState.name = item.name;
|
||||
itemState.imageUrl = item.imageUrl ?? null;
|
||||
itemState.description = item.description ?? null;
|
||||
@@ -132,6 +140,7 @@ const openModal = (item?: Item) => {
|
||||
} else {
|
||||
// 新增模式
|
||||
isEditMode.value = false;
|
||||
itemState.brand = undefined;
|
||||
currentId.value = null;
|
||||
itemState.name = "";
|
||||
itemState.imageUrl = null;
|
||||
@@ -146,6 +155,7 @@ const onSubmit = async (event: FormSubmitEvent<ItemSchema>) => {
|
||||
// ✅ 编辑模式
|
||||
const updatedItem: Item = {
|
||||
id: currentId.value,
|
||||
brand: event.data.brand,
|
||||
name: event.data.name,
|
||||
imageUrl: event.data.imageUrl,
|
||||
description: event.data.description,
|
||||
@@ -165,13 +175,12 @@ const onSubmit = async (event: FormSubmitEvent<ItemSchema>) => {
|
||||
} else {
|
||||
// ✅ 新增模式
|
||||
const newItem: Item = {
|
||||
id: stats.latestId.value,
|
||||
id: 0, // 由添加函数处理
|
||||
brand: event.data.brand,
|
||||
name: event.data.name,
|
||||
imageUrl: event.data.imageUrl,
|
||||
description: event.data.description,
|
||||
tags: event.data.tags?.split(",").map((tag) => tag.trim()),
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
};
|
||||
|
||||
addItem(newItem);
|
||||
|
||||
Reference in New Issue
Block a user