timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add event remove dialog

Browse Source
This commit is contained in:
Timi
2026-08-31 11:27:01 +08:00
parent 8135350b02
commit fa199e6859
6 changed files with 190 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/customer/CustomerDetail.vue
+1 -1
View File
@@ -128,7 +128,7 @@ import CustomerAPI from "@/api/CustomerAPI";
import PointAPI from "@/api/PointAPI";
import TagAPI from "@/api/TagAPI";
import BodyAreaSelector from "@/components/BodyAreaSelector.vue";
import CustomerRemoveDialog from "@/components/CustomerRemoveDialog.vue";
import CustomerRemoveDialog from "@/pages/customer/component/CustomerRemoveDialog.vue";
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
import PhotoScroller from "@/components/PhotoScroller.vue";
import TagSelector from "@/components/TagSelector.vue";
src/pages/customer/CustomerList.vue
+1 -1
View File
@@ -89,7 +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 CustomerRemoveDialog from "@/pages/customer/component/CustomerRemoveDialog.vue";
import TagSelector from "@/components/TagSelector.vue";
import { useCurrentStoreStore } from "@/store/currentStoreStore";
import { useNavBarStore } from "@/store/navBarStore";
src/pages/customer/component/CustomerRemoveDialog.vue
+151
View File
@@ -0,0 +1,151 @@
<template>
<t-dialog
class="remove-dialog"
v-model:visible="visible"
title="删除客户"
>
<div class="content">
<div class="warning">删除后无法恢复，将同时清除以下关联数据：</div>
<ul class="items">
<li>登记事件记录及其附件，并撤销这些登记产生的积分</li>
<li>客户积分账户、标签和客户附件</li>
<li>解除该客户与其被邀请客户之间的邀请关系，被邀请客户不会被删除</li>
<li>减少该客户原介绍人的邀请客户计数</li>
<li>客户档案本身</li>
</ul>
<div class="hint">
请输入客户姓名
<span class="name red" v-text="customerName" />
以确认删除
</div>
<t-input
class="confirm-input"
v-model.trim="confirmName"
size="small"
borderless
clearable
placeholder="请输入客户姓名"
/>
</div>
<template #cancelBtn>
<t-button
theme="default"
content="取消"
block
@click="close"
/>
</template>
<template #confirmBtn>
<t-button
theme="danger"
content="删除"
block
:loading="loading"
:disabled="!canConfirm || loading"
@click="confirm"
/>
</template>
</t-dialog>
</template>
<script setup lang="ts">
import type { Customer } from "@/types/Customer";
defineOptions({
name: "CustomerRemoveDialog"
});
interface Props {
visible?: boolean;
customer?: Customer;
loading?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
visible: false,
loading: false
});
const emit = defineEmits<{
"update:visible": [visible: boolean];
confirm: [customer: Customer];
}>();
const confirmName = ref("");
const visible = computed({
get: () => props.visible,
set: (value: boolean) => emit("update:visible", value)
});
const customerName = computed(() => props.customer?.name || "");
const canConfirm = computed(() => !!customerName.value && confirmName.value === customerName.value);
watch([() => props.visible, () => props.customer], () => {
confirmName.value = "";
});
function close(): void {
visible.value = false;
}
function confirm(): void {
if (!props.customer?.id || !canConfirm.value || props.loading) {
return;
}
emit("confirm", props.customer);
}
</script>
<style scoped lang="less">
.remove-dialog {
:deep(.t-dialog__footer) {
gap: 1rem;
}
.content {
text-align: left;
.warning {
color: #b42318;
font-weight: 700;
}
.items {
gap: .5rem;
height: 9rem;
margin: .75rem 0 1rem;
display: flex;
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) {
.remove-dialog {
.warning {
color: #fda29b;
}
.confirm-input {
background: rgba(15, 23, 42, .72);
border-color: rgba(148, 163, 184, .16);
}
}
}
</style>
src/pages/event/EventDetail.vue
+21 -19
View File
@@ -98,15 +98,21 @@
/>
</div>
</bottom-popup>
<event-remove-dialog
v-model:visible="removeDialogVisible"
:event="removeTarget"
:loading="isRemoving"
@confirm="removeEvent"
/>
</template>
<script setup lang="ts">
import { DialogPlugin } from "tdesign-mobile-vue";
import { BottomPopup } from "timi-tdesign-mobile";
import { Time, Text } from "timi-web";
import { type ModuleCode, type Role, RoleAPI, useUserStore } from "timi-web-api";
import EventAPI from "@/api/EventAPI";
import EventOptionSelector from "@/components/EventOptionSelector.vue";
import EventRemoveDialog from "@/pages/event/component/EventRemoveDialog.vue";
import { useCurrentStoreStore } from "@/store/currentStoreStore";
import { useNavBarStore } from "@/store/navBarStore";
import type { EventItem, EventLimitType, EventOptionSelectionMap, EventStatus, EventValueType, EventValueUnit } from "@/types/EventItem";
@@ -147,6 +153,8 @@ const event = ref<EventItem>();
const roleOptions = ref<Role[]>([]);
const isLoading = ref(false);
const isRemoving = ref(false);
const removeDialogVisible = ref(false);
const removeTarget = ref<EventItem>();
const optionPopupVisible = ref(false);
const optionSelectionMap = reactive<EventOptionSelectionMap>({});
@@ -263,34 +271,28 @@ function closeOptionPopup(): void {
// ---------- 删除 ----------
async function confirmRemoveEvent(): Promise<void> {
const eventId = String(route.params.id || "");
if (!eventId || !canDeleteEvent.value || isRemoving.value) {
function confirmRemoveEvent(): void {
const currentEvent = event.value;
if (!currentEvent?.id || !canDeleteEvent.value || isRemoving.value) {
return;
}
const eventName = event.value?.name || "未命名事件";
const dialog = DialogPlugin.confirm({
title: "删除登记事件",
content: `确定删除登记事件 ${eventName} 吗？删除后无法恢复。`,
cancelBtn: "取消",
confirmBtn: "删除",
onCancel() {
dialog.destroy();
},
async onConfirm() {
dialog.destroy();
await removeEvent(eventId);
}
});
removeTarget.value = currentEvent;
removeDialogVisible.value = true;
}
async function removeEvent(eventId: string): Promise<void> {
async function removeEvent(eventItem: EventItem): Promise<void> {
const eventId = eventItem.id;
if (!eventId) {
return;
}
if (isRemoving.value) {
return;
}
isRemoving.value = true;
removeDialogVisible.value = false;
removeTarget.value = undefined;
try {
await EventAPI.remove(eventId);
Message.success("登记事件已删除");
src/pages/event/EventList.vue
+16 -17
View File
@@ -71,13 +71,19 @@
</t-pull-down-refresh>
</div>
<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
<event-remove-dialog
v-model:visible="removeDialogVisible"
:event="removeTarget"
:loading="isRemoving"
@confirm="removeEvent"
/>
</template>
<script setup lang="ts">
import { DialogPlugin } from "tdesign-mobile-vue";
import { Message } from "@/utils/message";
import { type Page, type PageResult, type Role, useUserStore } from "timi-web-api";
import EventAPI from "@/api/EventAPI";
import EventRemoveDialog from "@/pages/event/component/EventRemoveDialog.vue";
import ManagedUserAPI from "@/api/ManagedUserAPI";
import { useCurrentStoreStore } from "@/store/currentStoreStore";
import { useNavBarStore } from "@/store/navBarStore";
@@ -132,6 +138,8 @@ const isRefreshing = ref(false);
const isLoading = ref(false);
const isNoMore = ref(false);
const isRemoving = ref(false);
const removeDialogVisible = ref(false);
const removeTarget = ref<EventItem>();
const removingEventId = ref("");
const page = reactive<Page<EventItem>>({
index: 0,
@@ -182,29 +190,20 @@ function openRemoveDialog(eventItem: EventItem): void {
return;
}
const eventName = eventItem.name || "未命名事件";
const dialog = DialogPlugin.confirm({
title: "删除登记事件",
content: `确定删除登记事件 ${eventName} 吗？删除后无法恢复。`,
cancelBtn: "取消",
confirmBtn: "删除",
onCancel() {
dialog.destroy();
},
async onConfirm() {
dialog.destroy();
await removeEvent(eventId);
}
});
removeTarget.value = eventItem;
removeDialogVisible.value = true;
}
async function removeEvent(eventId: string): Promise<void> {
if (isRemoving.value) {
async function removeEvent(eventItem: EventItem): Promise<void> {
const eventId = eventItem.id;
if (!eventId || isRemoving.value) {
return;
}
isRemoving.value = true;
removingEventId.value = eventId;
removeDialogVisible.value = false;
removeTarget.value = undefined;
try {
await EventAPI.remove(eventId);
pageResult.list = pageResult.list.filter(item => item.id !== eventId);
src/pages/event/component/EventRemoveDialog.vue
+151
View File
@@ -0,0 +1,151 @@
<template>
<t-dialog
class="remove-dialog"
v-model:visible="visible"
title="删除登记事件"
>
<div class="content">
<div class="warning">删除后将停止使用该登记事件，请确认以下影响：</div>
<ul class="items">
<li>登记事件会标记为已删除，后续不能再用于新的登记</li>
<li>历史登记记录不会删除，仍可在登记记录中查看</li>
<li>历史登记产生的积分流水不会删除，也不会撤销客户积分</li>
<li>客户档案、客户积分账户和客户附件不会受到影响</li>
<li>删除后无法恢复，请谨慎操作</li>
</ul>
<div class="hint">
请输入登记事件名称
<span class="name red" v-text="eventName" />
以确认删除
</div>
<t-input
class="confirm-input"
v-model.trim="confirmName"
size="small"
borderless
clearable
placeholder="请输入登记事件名称"
/>
</div>
<template #cancelBtn>
<t-button
theme="default"
content="取消"
block
@click="close"
/>
</template>
<template #confirmBtn>
<t-button
theme="danger"
content="删除"
block
:loading="loading"
:disabled="!canConfirm || loading"
@click="confirm"
/>
</template>
</t-dialog>
</template>
<script setup lang="ts">
import type { EventItem } from "@/types/EventItem";
defineOptions({
name: "EventRemoveDialog"
});
interface Props {
visible?: boolean;
event?: EventItem;
loading?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
visible: false,
loading: false
});
const emit = defineEmits<{
"update:visible": [visible: boolean];
confirm: [event: EventItem];
}>();
const confirmName = ref("");
const visible = computed({
get: () => props.visible,
set: (value: boolean) => emit("update:visible", value)
});
const eventName = computed(() => props.event?.name || "");
const canConfirm = computed(() => !!eventName.value && confirmName.value === eventName.value);
watch([() => props.visible, () => props.event], () => {
confirmName.value = "";
});
function close(): void {
visible.value = false;
}
function confirm(): void {
if (!props.event?.id || !canConfirm.value || props.loading) {
return;
}
emit("confirm", props.event);
}
</script>
<style scoped lang="less">
.remove-dialog {
:deep(.t-dialog__footer) {
gap: 1rem;
}
.content {
text-align: left;
.warning {
color: #b42318;
font-weight: 700;
}
.items {
gap: .5rem;
height: 9rem;
margin: .75rem 0 1rem;
display: flex;
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) {
.remove-dialog {
.warning {
color: #fda29b;
}
.confirm-input {
background: rgba(15, 23, 42, .72);
border-color: rgba(148, 163, 184, .16);
}
}
}
</style>