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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user