remove in customer list

src/pages/customer/CustomerList.vue

@@ -38,20 +38,34 @@
 			@scrolltolower="fetch"
 		>
 			<t-cell-group class="items" theme="card">
+				<t-swipe-cell
+					v-entrance-transition="index * 30"
+					v-for="(item, index) in pageResult.list"
+					:key="item.id || item.code || index"
+					class="item"
+				>
 					<customer-cell
-						v-entrance-transition="index * 30"
-						v-for="(item, index) in pageResult.list"
-						:key="item.id || item.code || index"
-						class="item"
+						class="cell"
 						:customer="item"
 						arrow
-						@click="router.push(`/management/customers/${item.id}`)"
+						@click="toDetail(item)"
 					>
 						<template #description>
 							<telephone-link :value="item.telephone" />
 						</template>
 					</customer-cell>
-			</t-cell-group>
+					<template v-if="canDeleteCustomer" #right>
+						<t-button
+							class="delete"
+							theme="danger"
+							:loading="isRemoving && removingCustomerId === item.id"
+							@click.stop="openRemoveDialog(item)"
+						>
+							删除
+						</t-button>
+					</template>
+				</t-swipe-cell>
+				</t-cell-group>
 			<div v-if="!pageResult.list.length" class="load-state" v-text="isLoading ? '正在加载客户' : '暂无客户数据'" />
 			<div v-if="pageResult.list.length" class="load-state" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
 		</t-pull-down-refresh>
@@ -60,6 +74,12 @@
 			v-model:visible="tagSelectorVisible"
 			@change="handleTagFilterChanged"
 		/>
+		<customer-remove-dialog
+			v-model:visible="removeDialogVisible"
+			:customer="removeTarget"
+			:loading="isRemoving"
+			@confirm="removeCustomer"
+		/>
 	</div>
 	<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
 </template>
@@ -69,6 +89,7 @@ import { Message } from "@/utils/message";
 import { Time, Toolkit, WebToolkit } from "timi-web";
 import { type Page, type PageResult, useUserStore } from "timi-web-api";
 import CustomerAPI from "@/api/CustomerAPI";
+import CustomerRemoveDialog from "@/components/CustomerRemoveDialog.vue";
 import TagSelector from "@/components/TagSelector.vue";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
@@ -87,9 +108,14 @@ const currentStoreStore = useCurrentStoreStore();
 const navBarStore = useNavBarStore();
 const isRefreshing = ref(false);
 const isExporting = ref(false);
+const isRemoving = ref(false);
+const removeDialogVisible = ref(false);
+const removeTarget = ref<Customer>();
+const removingCustomerId = ref("");
 const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
 const canReadTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.read));
 const canCreateCustomer = computed(() => userStore.hasPermissions(permissionCodes.customer.create));
+const canDeleteCustomer = computed(() => userStore.hasPermissions(permissionCodes.customer.delete));
 const canExportCustomer = computed(() => userStore.hasPermissions(permissionCodes.customer.export));
 const canShowActionMenu = computed(() => canCreateCustomer.value || canExportCustomer.value);
 
@@ -217,6 +243,44 @@ async function toCreate(): Promise<void> {
 	});
 }
 
+async function toDetail(customer: Customer): Promise<void> {
+	if (!customer.id) {
+		return;
+	}
+	await router.push(`/management/customers/${customer.id}`);
+}
+
+// ---------- 删除客户 ----------
+
+function openRemoveDialog(customer: Customer): void {
+	if (!customer.id || isRemoving.value) {
+		return;
+	}
+	removeTarget.value = customer;
+	removeDialogVisible.value = true;
+}
+
+async function removeCustomer(customer: Customer): Promise<void> {
+	const customerId = customer.id;
+	if (!customerId || isRemoving.value) {
+		return;
+	}
+
+	isRemoving.value = true;
+	removingCustomerId.value = customerId;
+	removeDialogVisible.value = false;
+	removeTarget.value = undefined;
+	try {
+		await CustomerAPI.remove(customerId);
+		pageResult.list = pageResult.list.filter(item => item.id !== customerId);
+		pageResult.total = Math.max(0, pageResult.total - 1);
+		Message.success("客户已删除");
+	} finally {
+		isRemoving.value = false;
+		removingCustomerId.value = "";
+	}
+}
+
 // ---------- 导出 ----------
 
 async function doExport(): Promise<void> {
@@ -282,11 +346,10 @@ async function doExport(): Promise<void> {
 	.list-wrapper {
 		padding: 1rem 0;
 
-		.items {
-
-			.item {
-				padding: 10px;
-			}
+		.delete {
+			height: 100%;
+			padding: 0 1rem;
+			border-radius: 0;
 		}
 	}