feat(item): implement item editing functionality

This commit introduces the capability to edit existing items. The `ItemEditModal` has been refactored to support both creation and editing modes.

- The modal UI (title, buttons) and submission logic now adapt based on whether an item is being added or edited.
- A new `editItem` function is added to the `useItemsStore` to handle the update logic.
- Form validation for the item name is enhanced to correctly check for uniqueness during edits.
- The table's row action menu now opens the modal in edit mode, pre-populating the form.
- The `latestId` generation logic is improved for robustness.
- Additionally, this commit adds row selection checkboxes to the items table.
This commit is contained in:
xiaomai
2025-10-14 13:40:49 +08:00
parent 675704e4da
commit 1d2ce32ab9
3 changed files with 145 additions and 34 deletions

View File

@@ -42,9 +42,11 @@ const _useItems = () => {
item.createdAt.getFullYear() === thisYear
).length;
}),
latestId: computed(
() => (items.value?.[items.value.length - 1]?.id ?? 0) + 1
),
latestId: computed(() => {
const arr = items.value ?? [];
if (arr.length === 0) return 1;
return Math.max(...arr.map((i) => i.id)) + 1;
}),
};
const isNameAvailable = (name: string) =>
@@ -54,11 +56,26 @@ const _useItems = () => {
items.value = [...(items.value ?? []), item]; // <-- 替换数组引用
};
const editItem = (item: Item) => {
const index = (items.value ?? []).findIndex((i) => i.id === item.id);
if (index === -1) return; // 未找到则直接返回
// 生成一个新的数组(保持响应式)
const updatedItems = [...(items.value ?? [])];
updatedItems[index] = {
...updatedItems[index],
...item,
updatedAt: new Date(), // 自动更新时间戳
};
items.value = updatedItems; // 替换引用,触发 UI 更新
};
const removeItem = (id: number) => {
items.value = (items.value ?? []).filter((i) => i.id !== id); // <-- 替换数组引用
};
return { items, stats, isNameAvailable, addItem, removeItem };
return { items, stats, isNameAvailable, addItem, editItem, removeItem };
};
export const useItemsStore = createSharedComposable(_useItems);