remove in store list

src/pages/store/StoreEdit.vue

@@ -45,69 +45,22 @@
 				@click="confirmRemoveStore"
 			>删除</t-button>
 		</div>
-		<t-dialog
-			class="remove-dialog"
+		<store-remove-dialog
 			v-model:visible="removeDialogVisible"
-			title="删除门店"
-		>
-			<div class="content">
-				<div class="warning">删除后将同步处理以下数据：</div>
-				<ul class="items">
-					<li>删除该门店下的所有客户</li>
-					<li>删除客户的登记记录及相关附件</li>
-					<li>删除积分规则和积分账户</li>
-					<li>删除登记事件及事件角色关联</li>
-					<li>删除门店营业日数据</li>
-					<li>删除门店用户关系</li>
-					<li>删除门店自有标签</li>
-				</ul>
-				<div class="warning">特别说明：</div>
-				<ul class="items">
-					<li>已产生的积分流水不会删除，将保留积分撤销记录</li>
-					<li>关联的系统用户账号不会删除</li>
-					<li>删除后无法恢复，请谨慎操作</li>
-				</ul>
-				<div class="hint">
-					请输入门店名称
-					<span class="name red" v-text="removeStoreName" />
-					以确认删除
-				</div>
-				<t-input
-					class="confirm-input"
-					v-model.trim="removeConfirmName"
-					size="small"
-					borderless
-					clearable
-					placeholder="请输入门店名称"
-				/>
-			</div>
-			<template #cancelBtn>
-				<t-button
-					theme="default"
-					content="取消"
-					block
-					@click="closeRemoveDialog"
-				/>
-			</template>
-			<template #confirmBtn>
-				<t-button
-					theme="danger"
-					content="删除"
-					block
-					:disabled="!canConfirmRemove"
-					@click="removeConfirmedStore"
-				/>
-			</template>
-		</t-dialog>
+			:store="formData"
+			:loading="isRemoving"
+			@confirm="removeConfirmedStore"
+		/>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { useUserStore } from "timi-web-api";
 import StoreAPI from "@/api/StoreAPI";
+import StoreRemoveDialog from "@/components/StoreRemoveDialog.vue";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
-import type { StoreStatus } from "@/types/Store";
+import type { Store, StoreStatus } from "@/types/Store";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 import { Message } from "@/utils/message.ts";
 
@@ -133,7 +86,6 @@ const savePermissionCode = computed(() => isCreateMode.value ? permissionCodes.s
 const isSaving = ref(false);
 const isRemoving = ref(false);
 const removeDialogVisible = ref(false);
-const removeConfirmName = ref("");
 
 const formData = reactive({
 	id: "",
@@ -146,9 +98,6 @@ const formData = reactive({
 	autoClosedDay: true
 });
 
-const removeStoreName = computed(() => formData.name);
-const canConfirmRemove = computed(() => !!removeStoreName.value && removeConfirmName.value === removeStoreName.value);
-
 async function doSave(): Promise<void> {
 	if (!validateForm()) {
 		return;
@@ -215,31 +164,29 @@ async function confirmRemoveStore(): Promise<void> {
 	if (!formData.id || isRemoving.value) {
 		return;
 	}
-	removeConfirmName.value = "";
 	removeDialogVisible.value = true;
 }
 
 function closeRemoveDialog(): void {
 	removeDialogVisible.value = false;
-	removeConfirmName.value = "";
 }
 
-async function removeConfirmedStore(): Promise<void> {
-	if (!formData.id || !canConfirmRemove.value || isRemoving.value) {
+async function removeConfirmedStore(store: Store): Promise<void> {
+	if (!store.id || isRemoving.value) {
 		return;
 	}
 	closeRemoveDialog();
-	await removeStore();
+	await removeStore(store.id);
 }
 
-async function removeStore(): Promise<void> {
+async function removeStore(id: string): Promise<void> {
 	if (isRemoving.value) {
 		return;
 	}
 
 	isRemoving.value = true;
 	try {
-		await StoreAPI.remove(formData.id);
+		await StoreAPI.remove(id);
 		Message.success("门店已删除");
 		await router.replace("/management/stores");
 	} finally {
@@ -277,57 +224,4 @@ async function removeStore(): Promise<void> {
 	}
 }
 
-.remove-dialog {
-
-	:deep(.t-dialog__footer) {
-		gap: 1rem;
-	}
-
-	.content {
-		text-align: left;
-
-		.warning {
-			color: #b42318;
-			font-weight: 700;
-		}
-
-		.items {
-			margin: .25rem 0 1rem;
-			display: flex;
-			max-height: 5rem;
-			overflow-y: auto;
-			line-height: 1.2;
-			padding-left: 1.25rem;
-			flex-direction: column;
-		}
-
-		.name {
-			font-weight: 700;
-		}
-
-		.confirm-input {
-			--td-input-vertical-padding: 10px;
-
-			border: 1px solid var(--td-component-border);
-			margin-top: .5rem;
-			border-radius: .75rem;
-		}
-	}
-}
-
-:global(html.theme-dark) {
-	.store-edit {
-		.remove-dialog {
-
-			.warning {
-				color: #fda29b;
-			}
-
-			.confirm-input {
-				background: rgba(15, 23, 42, .72);
-				border-color: rgba(148, 163, 184, .16);
-			}
-		}
-	}
-}
 </style>