update store delete

src/pages/store/StoreEdit.vue

@@ -36,30 +36,77 @@
 				</template>
 			</t-cell>
 		</t-cell-group>
-		<div class="actions">
+		<div v-if="!isCreateMode && !isStoreManagerScope" class="actions">
 			<t-button
-				v-if="!isCreateMode && !isStoreManagerScope"
 				v-can="permissionCodes.store.delete"
 				class="action"
 				theme="danger"
 				:loading="isRemoving"
 				@click="confirmRemoveStore"
 			>删除</t-button>
-			<t-button
-				class="action"
-				theme="primary"
-				:loading="isSaving"
-				@click="doSave"
-			>保存</t-button>
 		</div>
+		<t-dialog
+			class="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>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { DialogPlugin } from "tdesign-mobile-vue";
 import { useUserStore } from "timi-web";
 import StoreAPI from "@/api/StoreAPI";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
+import { useNavBarStore } from "@/store/navBarStore";
 import type { StoreStatus } from "@/types/Store";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 import { Message } from "@/utils/message.ts";
@@ -70,6 +117,7 @@ defineOptions({
 
 const route = useRoute();
 const router = useRouter();
+const navBarStore = useNavBarStore();
 const userStore = useUserStore();
 const currentStoreStore = useCurrentStoreStore();
 const routeId = computed(() => String(route.params.id || ""));
@@ -84,6 +132,9 @@ 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: "",
 	code: "",
@@ -95,6 +146,9 @@ 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;
@@ -139,6 +193,9 @@ function validateForm(): boolean {
 }
 
 onMounted(async () => {
+	if (userStore.hasPermissions(savePermissionCode.value)) {
+		navBarStore.setRightText("保存", "var(--td-brand-color)", doSave);
+	}
 	try {
 		if (!routeId.value) {
 			return;
@@ -150,25 +207,29 @@ onMounted(async () => {
 	}
 });
 
+onUnmounted(() => navBarStore.clearRight());
+
 // ---------- 删除 ----------
 
 async function confirmRemoveStore(): Promise<void> {
-	if (!formData.id) {
+	if (!formData.id || isRemoving.value) {
 		return;
 	}
-	const dialog = DialogPlugin.confirm({
-		title: "删除门店",
-		content: `确定删除 ${formData.name} 吗？删除后无法恢复。`,
-		cancelBtn: "取消",
-		confirmBtn: "删除",
-		onCancel() {
-			dialog.destroy();
-		},
-		async onConfirm() {
-			dialog.destroy();
-			await removeStore();
-		}
-	});
+	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) {
+		return;
+	}
+	closeRemoveDialog();
+	await removeStore();
 }
 
 async function removeStore(): Promise<void> {
@@ -190,7 +251,7 @@ async function removeStore(): Promise<void> {
 <style scoped lang="less">
 .store-edit {
 	gap: 1rem;
-	padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
+	padding: calc(var(--app-nav-height) + 1rem) 0 calc(1rem + env(safe-area-inset-bottom, 0)) 0;
 	display: flex;
 	flex-direction: column;
 
@@ -207,16 +268,66 @@ async function removeStore(): Promise<void> {
 	}
 
 	.actions {
-		gap: .75rem;
-		left: 1rem;
-		right: 1rem;
-		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
+		margin: 0 1rem;
 		display: flex;
-		position: fixed;
 
 		.action {
 			flex: 1;
 		}
 	}
 }
+
+.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>