add event option
This commit is contained in:
Timi
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div v-can="pageAccess" class="registration-event-edit">
|
||||
<div v-can="pageAccess" class="event-edit">
|
||||
<t-form class="form" label-align="left" label-width="7rem" v-entrance-transition>
|
||||
<t-form-item label="颜色">
|
||||
<t-button
|
||||
@@ -86,6 +86,7 @@
|
||||
<div class="picker-text" v-text="getStatusText(formModel.status)" />
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
<event-option-editor v-model="optionGroupList" />
|
||||
<section class="roles" v-entrance-transition="70">
|
||||
<div class="title">
|
||||
<span>可登记角色</span>
|
||||
@@ -103,19 +104,6 @@
|
||||
</t-checkbox>
|
||||
</t-checkbox-group>
|
||||
</section>
|
||||
<div v-if="!isCreateMode && canDeleteEvent" class="bottom-actions">
|
||||
<t-button
|
||||
v-can="deletePermissionCode"
|
||||
class="delete bg-white"
|
||||
theme="danger"
|
||||
variant="outline"
|
||||
:loading="isRemoving"
|
||||
:disabled="isSaving || isRemoving"
|
||||
@click="confirmRemoveEventItem"
|
||||
>
|
||||
删除事件
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
<t-popup v-model="colorPickerVisible" placement="bottom" @opened="handleColorPickerOpened">
|
||||
<div class="color-popup">
|
||||
@@ -214,12 +202,13 @@
|
||||
import { Time } from "timi-web";
|
||||
import { type ModuleCode, type Role, RoleAPI, useUserStore } from "timi-web-api";
|
||||
import type { ColorObject } from "tdesign-mobile-vue";
|
||||
import { DialogPlugin } from "tdesign-mobile-vue";
|
||||
import EventAPI from "@/api/EventAPI";
|
||||
import EventOptionEditor from "@/pages/event/component/EventOptionEditor.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { EventItem, EventLimitType, EventStatus, EventValueType, EventValueUnit } from "@/types/EventItem";
|
||||
import type { EventItem, EventLimitType, EventOptionGroup, EventStatus, EventValueType, EventValueUnit } from "@/types/EventItem";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { normalizeEventOptionGroupList, prepareEventOptionGroupList, validateEventOptionGroupList } from "@/utils/eventOption";
|
||||
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
||||
import { Message } from "@/utils/message";
|
||||
|
||||
@@ -245,8 +234,6 @@ const moduleCode: ModuleCode = "GAO";
|
||||
const isCreateMode = computed(() => !routeId.value);
|
||||
const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
|
||||
const savePermissionCode = computed(() => isCreateMode.value ? permissionCodes.event.create : permissionCodes.event.update);
|
||||
const deletePermissionCode = permissionCodes.event.delete;
|
||||
const canDeleteEvent = computed(() => userStore.hasPermissions(deletePermissionCode));
|
||||
const pageAccess = computed(() => ({
|
||||
value: [permissionCodes.event.read, permissionCodes.user.read, savePermissionCode.value],
|
||||
mode: "and" as const
|
||||
@@ -256,7 +243,7 @@ const pageAccess = computed(() => ({
|
||||
|
||||
const roleOptions = ref<Role[]>([]);
|
||||
const isSaving = ref(false);
|
||||
const isRemoving = ref(false);
|
||||
const optionGroupList = ref<EventOptionGroup[]>([]);
|
||||
const formModel = reactive({
|
||||
id: "",
|
||||
storeId: "",
|
||||
@@ -392,7 +379,6 @@ const limitValuePlaceholder = computed(() => {
|
||||
}
|
||||
return "请输入总次数上限";
|
||||
});
|
||||
|
||||
// ---------- 颜色 ----------
|
||||
|
||||
function openColorPicker(): void {
|
||||
@@ -571,6 +557,11 @@ function validateForm(): boolean {
|
||||
Message.warning("请至少选择一个可登记角色");
|
||||
return false;
|
||||
}
|
||||
const optionError = validateEventOptionGroupList(optionGroupList.value);
|
||||
if (optionError) {
|
||||
Message.warning(optionError);
|
||||
return false;
|
||||
}
|
||||
if (isValueLimitType(formModel.limitType) && !resolveLimitValue()) {
|
||||
Message.warning("请输入有效的约束数值");
|
||||
return false;
|
||||
@@ -642,12 +633,14 @@ async function saveEventItem(): Promise<void> {
|
||||
limitValue: resolveLimitValue(),
|
||||
beginAt: resolveTimestamp(formModel.beginAtText),
|
||||
endAt: resolveTimestamp(formModel.endAtText),
|
||||
roleCodeList: [...formModel.roleCodeList]
|
||||
roleCodeList: [...formModel.roleCodeList],
|
||||
optionGroupList: isCreateMode.value ? prepareEventOptionGroupList(optionGroupList.value) : undefined
|
||||
};
|
||||
if (isCreateMode.value) {
|
||||
await EventAPI.create(payload);
|
||||
} else {
|
||||
await EventAPI.update(payload);
|
||||
await EventAPI.updateOptionGroupList(formModel.id || routeId.value, prepareEventOptionGroupList(optionGroupList.value));
|
||||
}
|
||||
Message.success("登记事件已保存");
|
||||
await router.replace("/management/registration-events");
|
||||
@@ -658,45 +651,6 @@ async function saveEventItem(): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 删除 ----------
|
||||
|
||||
async function confirmRemoveEventItem(): Promise<void> {
|
||||
const id = formModel.id || routeId.value;
|
||||
if (!id || isRemoving.value) {
|
||||
return;
|
||||
}
|
||||
const eventName = formModel.name.trim() || "未命名事件";
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "删除登记事件",
|
||||
content: `确定删除登记事件 ${eventName} 吗？删除后无法恢复。`,
|
||||
cancelBtn: "取消",
|
||||
confirmBtn: "删除",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
async onConfirm() {
|
||||
dialog.destroy();
|
||||
await removeEventItem(id);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function removeEventItem(id: string): Promise<void> {
|
||||
if (isRemoving.value) {
|
||||
return;
|
||||
}
|
||||
isRemoving.value = true;
|
||||
try {
|
||||
await EventAPI.remove(id);
|
||||
Message.success("登记事件已删除");
|
||||
await router.replace("/management/registration-events");
|
||||
} catch {
|
||||
Message.error("登记事件删除失败");
|
||||
} finally {
|
||||
isRemoving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 页面数据 ----------
|
||||
|
||||
async function prepareStoreScope(): Promise<void> {
|
||||
@@ -737,6 +691,7 @@ async function fillForm(): Promise<void> {
|
||||
endAtText: current.endAt ? Time.toDateTime(current.endAt) : "",
|
||||
roleCodeList: [...(current.roleCodeList || [])]
|
||||
});
|
||||
optionGroupList.value = normalizeEventOptionGroupList(current.optionGroupList);
|
||||
formModel.limitValueText = resolveLimitValueText(current.limitValue);
|
||||
colorDraft.value = formModel.color;
|
||||
}
|
||||
@@ -757,11 +712,13 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.registration-event-edit {
|
||||
.event-edit {
|
||||
gap: 1rem;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.form {
|
||||
border-radius: .75rem;
|
||||
|
||||
.description {
|
||||
width: 100%;
|
||||
@@ -849,15 +806,6 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
gap: .75rem;
|
||||
margin: 1rem;
|
||||
display: flex;
|
||||
|
||||
.delete {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picker-popup {
|
||||
|
||||
Reference in New Issue
Block a user