891 lines
25 KiB
Vue
891 lines
25 KiB
Vue
<template>
|
||
<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
|
||
size="extra-small"
|
||
variant="outline"
|
||
class="color-trigger"
|
||
@click="openColorPicker"
|
||
>
|
||
<div class="content">
|
||
<span class="swatch" :style="{ background: formModel.color }" />
|
||
<span v-text="formModel.color.toLowerCase()" />
|
||
</div>
|
||
</t-button>
|
||
</t-form-item>
|
||
<t-form-item label="名称">
|
||
<t-input
|
||
class="name"
|
||
v-model.trim="formModel.name"
|
||
placeholder="登记事件名称"
|
||
borderless
|
||
/>
|
||
</t-form-item>
|
||
<t-form-item v-if="isGlobalManager" label="门店" :arrow="isCreateMode" @click="openStorePicker">
|
||
<div class="picker-text" v-text="selectedStoreName" />
|
||
</t-form-item>
|
||
<t-form-item label="说明">
|
||
<t-textarea
|
||
class="description"
|
||
v-model.trim="formModel.description"
|
||
placeholder="事件说明"
|
||
borderless
|
||
/>
|
||
</t-form-item>
|
||
<t-form-item label="数值类型" arrow @click="openValueTypePicker">
|
||
<div class="picker-text" v-text="getValueTypeText(formModel.valueType)" />
|
||
</t-form-item>
|
||
<t-form-item v-if="isNumberValueType(formModel.valueType)" label="数值单位" required-mark arrow @click="openValueUnitPicker">
|
||
<div class="picker-text" v-text="getValueUnitText(formModel.valueUnit)" />
|
||
</t-form-item>
|
||
<t-form-item v-if="isNumberValueType(formModel.valueType)" label="登记必填数值" content-align="right">
|
||
<t-switch v-model="formModel.requireValue" />
|
||
</t-form-item>
|
||
<t-form-item label="起始时间" arrow @click="openBeginAtPicker">
|
||
<div class="begin-at">
|
||
<div class="picker-text" v-text="formModel.beginAtText || '不限'" />
|
||
<t-button
|
||
v-if="formModel.beginAtText"
|
||
size="extra-small"
|
||
content="不限"
|
||
@click.stop="clearBeginAt"
|
||
/>
|
||
</div>
|
||
</t-form-item>
|
||
<t-form-item label="终止时间" arrow @click="openEndAtPicker">
|
||
<div class="end-at">
|
||
<div class="picker-text" v-text="formModel.endAtText || '不限'" />
|
||
<t-button
|
||
v-if="formModel.endAtText"
|
||
size="extra-small"
|
||
content="不限"
|
||
@click.stop="clearEndAt"
|
||
/>
|
||
</div>
|
||
</t-form-item>
|
||
<t-form-item label="约束" arrow @click="openLimitPicker">
|
||
<div class="picker-text" v-text="getLimitText(formModel.limitType)" />
|
||
</t-form-item>
|
||
<t-form-item v-if="isValueLimitType(formModel.limitType)" label="约束数值">
|
||
<t-input
|
||
v-model.trim="formModel.limitValueText"
|
||
type="number"
|
||
:placeholder="limitValuePlaceholder"
|
||
borderless
|
||
align="right"
|
||
/>
|
||
</t-form-item>
|
||
<t-form-item label="需要拍照" content-align="right">
|
||
<t-switch v-model="formModel.requirePhoto" />
|
||
</t-form-item>
|
||
<t-form-item label="需要核销" content-align="right">
|
||
<t-switch v-model="formModel.requireVerification" />
|
||
</t-form-item>
|
||
<t-form-item label="状态" arrow @click="openStatusPicker">
|
||
<div class="picker-text" v-text="getStatusText(formModel.status)" />
|
||
</t-form-item>
|
||
<t-form-item label-width="0">
|
||
<div class="status-tips">
|
||
<div class="status">
|
||
<span class="orange">草稿：</span>
|
||
<span class="gray">普通店员角色不可见，不可登记、查询</span>
|
||
</div>
|
||
<div class="status">
|
||
<span class="orange">可登记：</span>
|
||
<span class="gray">正常状态，可登记、可查询</span>
|
||
</div>
|
||
<div class="status">
|
||
<span class="orange">不可登记：</span>
|
||
<span class="gray">登记时不会出现在事件列表，但仍可在登记事件记录列表中可以查找，标记为“不可登记”，所有店员角色可见。店长角色可进入详情和编辑，可恢复为“可登记”</span>
|
||
</div>
|
||
</div>
|
||
</t-form-item>
|
||
</t-form>
|
||
<event-option-editor v-model="optionGroupList" />
|
||
<section class="roles" v-entrance-transition="70">
|
||
<div class="title">
|
||
<span>可登记角色</span>
|
||
<span class="hint">必须至少选择一个角色，上级角色拥有子级角色可登记事件的登记权限</span>
|
||
</div>
|
||
<t-checkbox-group v-model="formModel.roleCodeList" class="group">
|
||
<t-checkbox
|
||
v-for="item in roleOptions"
|
||
:key="item.code"
|
||
:value="item.code"
|
||
class="item"
|
||
borderless
|
||
>
|
||
<span v-text="item.name || item.code" />
|
||
</t-checkbox>
|
||
</t-checkbox-group>
|
||
</section>
|
||
</div>
|
||
<t-popup v-model="colorPickerVisible" placement="bottom" @opened="handleColorPickerOpened">
|
||
<div class="color-popup">
|
||
<div class="header">
|
||
<t-button variant="text" size="small" @click="cancelColorPicker">取消</t-button>
|
||
<span class="title" v-text="'颜色选择'" />
|
||
<t-button theme="primary" variant="text" size="small" @click="confirmColorPicker">确定</t-button>
|
||
</div>
|
||
<t-color-picker
|
||
v-if="colorPickerVisible"
|
||
:key="colorPickerRenderKey"
|
||
v-model="colorDraft"
|
||
format="HEX8"
|
||
type="multiple"
|
||
:swatch-colors="colorSwatchList"
|
||
@palette-bar-change="updateColorDraftFromPalette"
|
||
/>
|
||
</div>
|
||
</t-popup>
|
||
<t-popup v-model="limitPickerVisible" placement="bottom">
|
||
<t-picker
|
||
v-model="limitPickerDraft"
|
||
:columns="limitPickerColumns"
|
||
title="约束"
|
||
@cancel="limitPickerVisible = false"
|
||
@confirm="confirmLimitPicker"
|
||
/>
|
||
</t-popup>
|
||
<t-popup v-model="storePickerVisible" placement="bottom">
|
||
<t-picker
|
||
v-model="storePickerDraft"
|
||
:columns="storePickerColumns"
|
||
title="选择门店"
|
||
@cancel="storePickerVisible = false"
|
||
@confirm="confirmStorePicker"
|
||
/>
|
||
</t-popup>
|
||
<t-popup v-model="statusPickerVisible" placement="bottom">
|
||
<t-picker
|
||
v-model="statusPickerDraft"
|
||
:columns="statusPickerColumns"
|
||
title="状态"
|
||
@cancel="statusPickerVisible = false"
|
||
@confirm="confirmStatusPicker"
|
||
/>
|
||
</t-popup>
|
||
<t-popup v-model="valueTypePickerVisible" placement="bottom">
|
||
<t-picker
|
||
v-model="valueTypePickerDraft"
|
||
:columns="valueTypePickerColumns"
|
||
title="数值类型"
|
||
@cancel="valueTypePickerVisible = false"
|
||
@confirm="confirmValueType"
|
||
/>
|
||
</t-popup>
|
||
<t-popup v-model="valueUnitPickerVisible" placement="bottom">
|
||
<t-picker
|
||
v-model="valueUnitPickerDraft"
|
||
:columns="valueUnitPickerColumns"
|
||
title="数值单位"
|
||
@cancel="valueUnitPickerVisible = false"
|
||
@confirm="confirmValueUnit"
|
||
/>
|
||
</t-popup>
|
||
<t-popup v-model="beginAtPickerVisible" placement="bottom">
|
||
<div class="picker-popup">
|
||
<t-date-time-picker
|
||
v-if="beginAtPickerVisible"
|
||
v-model="beginAtDraftText"
|
||
:start="minimumDateTimeText"
|
||
:mode="['date', 'minute']"
|
||
format="YYYY-MM-DD HH:mm"
|
||
title="起始时间"
|
||
@cancel="beginAtPickerVisible = false"
|
||
@confirm="confirmBeginAt"
|
||
/>
|
||
</div>
|
||
</t-popup>
|
||
<t-popup v-model="endAtPickerVisible" placement="bottom">
|
||
<div class="picker-popup">
|
||
<t-date-time-picker
|
||
v-if="endAtPickerVisible"
|
||
v-model="endAtDraftText"
|
||
:start="endAtMinimumDateTimeText"
|
||
:mode="['date', 'minute']"
|
||
format="YYYY-MM-DD HH:mm"
|
||
title="终止时间"
|
||
@cancel="endAtPickerVisible = false"
|
||
@confirm="confirmEndAt"
|
||
/>
|
||
</div>
|
||
</t-popup>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { Time } from "timi-web";
|
||
import { type ModuleCode, type Role, RoleAPI, useUserStore } from "timi-web-api";
|
||
import type { ColorObject } 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, 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";
|
||
|
||
type PickerValue = string | number;
|
||
|
||
type LimitOption = {
|
||
label: string;
|
||
value: EventLimitType;
|
||
};
|
||
|
||
defineOptions({
|
||
name: "EventEdit"
|
||
});
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
const navBarStore = useNavBarStore();
|
||
const userStore = useUserStore();
|
||
const currentStoreStore = useCurrentStoreStore();
|
||
const routeId = computed(() => String(route.params.id || ""));
|
||
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 pageAccess = computed(() => ({
|
||
value: [permissionCodes.event.read, permissionCodes.user.read, savePermissionCode.value],
|
||
mode: "and" as const
|
||
}));
|
||
|
||
// ---------- 基础表单 ----------
|
||
|
||
const roleOptions = ref<Role[]>([]);
|
||
const isSaving = ref(false);
|
||
const optionGroupList = ref<EventOptionGroup[]>([]);
|
||
const formModel = reactive({
|
||
id: "",
|
||
storeId: "",
|
||
name: "",
|
||
description: "",
|
||
color: "#0f766e",
|
||
valueType: "NONE" as EventValueType,
|
||
valueUnit: null as EventValueUnit | null,
|
||
requireValue: false,
|
||
status: "ACTIVE" as EventStatus,
|
||
requirePhoto: false,
|
||
requireVerification: false,
|
||
limitType: "NONE" as EventLimitType,
|
||
limitValueText: "",
|
||
beginAtText: "",
|
||
endAtText: "",
|
||
roleCodeList: [] as string[]
|
||
});
|
||
|
||
// ---------- 门店选择 ----------
|
||
|
||
const storePickerVisible = ref(false);
|
||
const storePickerDraft = ref<PickerValue[]>([]);
|
||
const storePickerColumns = computed(() => [
|
||
currentStoreStore.storeList
|
||
.map(item => ({
|
||
label: item.name || item.code || "未命名门店",
|
||
value: item.id || ""
|
||
}))
|
||
.filter(item => item.value)
|
||
]);
|
||
const selectedStoreName = computed(() => {
|
||
const store = currentStoreStore.storeList.find(item => item.id === formModel.storeId);
|
||
return store?.name || store?.code || "请选择门店";
|
||
});
|
||
|
||
function openStorePicker(): void {
|
||
if (!isCreateMode.value) {
|
||
return;
|
||
}
|
||
if (!currentStoreStore.storeList.length) {
|
||
Message.warning("暂无可选门店");
|
||
return;
|
||
}
|
||
|
||
storePickerDraft.value = [formModel.storeId];
|
||
storePickerVisible.value = true;
|
||
}
|
||
|
||
function confirmStorePicker(): void {
|
||
const storeId = String(storePickerDraft.value[0] || "");
|
||
if (!storeId) {
|
||
return;
|
||
}
|
||
|
||
formModel.storeId = storeId;
|
||
storePickerVisible.value = false;
|
||
}
|
||
|
||
// ---------- 颜色 ----------
|
||
|
||
const colorPickerVisible = ref(false);
|
||
const colorPickerRenderKey = ref(0);
|
||
const colorDraft = ref("#2f88ff");
|
||
const colorSwatchList = [
|
||
"#2F88FF",
|
||
"#0EA5E9",
|
||
"#10B981",
|
||
"#22C55E",
|
||
"#F59E0B",
|
||
"#F97316",
|
||
"#EF4444",
|
||
"#EC4899",
|
||
"#8B5CF6",
|
||
"#64748B"
|
||
];
|
||
|
||
// ---------- 次数限制 ----------
|
||
|
||
const limitOptions: LimitOption[] = [
|
||
{ label: "不限", value: "NONE" },
|
||
{ label: "上午和下午各自限次", value: "DAILY_HALF_DAY" },
|
||
{ label: "间隔小时内一次", value: "INTERVAL_HOUR" },
|
||
{ label: "每个自然日限次", value: "NATURAL_DAY" },
|
||
{ label: "每个自然月限次", value: "NATURAL_MONTH" },
|
||
{ label: "事件总次数", value: "TOTAL_LIMIT" },
|
||
{ label: "单客户总次数", value: "CUSTOMER_TOTAL_LIMIT" }
|
||
];
|
||
const limitPickerColumns = [limitOptions];
|
||
const limitPickerVisible = ref(false);
|
||
const limitPickerDraft = ref<string[]>([formModel.limitType]);
|
||
|
||
// ---------- 状态 ----------
|
||
|
||
const statusOptions: Array<{ label: string; value: EventStatus }> = [
|
||
{ label: "草稿", value: "DRAFT" },
|
||
{ label: "可登记", value: "ACTIVE" },
|
||
{ label: "不可登记", value: "INACTIVE" }
|
||
];
|
||
const statusPickerColumns = [statusOptions];
|
||
const statusPickerVisible = ref(false);
|
||
const statusPickerDraft = ref<EventStatus[]>([formModel.status]);
|
||
|
||
// ---------- 生效时间 ----------
|
||
|
||
const beginAtPickerVisible = ref(false);
|
||
const endAtPickerVisible = ref(false);
|
||
const beginAtDraftText = ref("");
|
||
const endAtDraftText = ref("");
|
||
const minimumDateTimeText = "1970-01-01 00:00";
|
||
const nowDateTimeText = computed(() => Time.formatDateTime(new Date()));
|
||
const endAtMinimumDateTimeText = computed(() => formModel.beginAtText || minimumDateTimeText);
|
||
const defaultEndAtText = computed(() => {
|
||
const date = new Date();
|
||
date.setDate(date.getDate() + 7);
|
||
return Time.formatDateTime(date);
|
||
});
|
||
const limitValuePlaceholder = computed(() => {
|
||
if (formModel.limitType === "DAILY_HALF_DAY") {
|
||
return "请输入上午和下午各自次数上限";
|
||
}
|
||
if (formModel.limitType === "INTERVAL_HOUR") {
|
||
return "请输入间隔小时数";
|
||
}
|
||
if (formModel.limitType === "NATURAL_DAY") {
|
||
return "请输入每天次数上限";
|
||
}
|
||
if (formModel.limitType === "NATURAL_MONTH") {
|
||
return "请输入每月次数上限";
|
||
}
|
||
if (formModel.limitType === "CUSTOMER_TOTAL_LIMIT") {
|
||
return "请输入单客户总次数上限";
|
||
}
|
||
return "请输入总次数上限";
|
||
});
|
||
// ---------- 颜色 ----------
|
||
|
||
function openColorPicker(): void {
|
||
colorDraft.value = formModel.color;
|
||
colorPickerVisible.value = true;
|
||
}
|
||
|
||
function handleColorPickerOpened(): void {
|
||
colorPickerRenderKey.value += 1;
|
||
}
|
||
|
||
function cancelColorPicker(): void {
|
||
colorPickerVisible.value = false;
|
||
colorDraft.value = formModel.color;
|
||
}
|
||
|
||
function confirmColorPicker(): void {
|
||
formModel.color = colorDraft.value;
|
||
colorPickerVisible.value = false;
|
||
}
|
||
|
||
function updateColorDraftFromPalette(context: { color: ColorObject }): void {
|
||
colorDraft.value = context.color.hex8;
|
||
}
|
||
|
||
// ---------- 选项文案 ----------
|
||
|
||
function getLimitText(value: EventLimitType): string {
|
||
return limitOptions.find(option => option.value === value)?.label || "不限";
|
||
}
|
||
|
||
function getStatusText(value: EventStatus): string {
|
||
return statusOptions.find(option => option.value === value)?.label || "可登记";
|
||
}
|
||
|
||
// ---------- 数值定义 ----------
|
||
|
||
const valueTypeOptions: Array<{ label: string; value: EventValueType }> = [
|
||
{ label: "不携带数值", value: "NONE" },
|
||
{ label: "携带数值", value: "NUMBER" }
|
||
];
|
||
const valueUnitOptions: Array<{ label: string; value: EventValueUnit }> = [
|
||
{ label: "金额（元）", value: "CENT" },
|
||
{ label: "次数", value: "COUNT" }
|
||
];
|
||
const valueTypePickerVisible = ref(false);
|
||
const valueTypePickerDraft = ref<PickerValue[]>([]);
|
||
const valueTypePickerColumns = [valueTypeOptions];
|
||
const valueUnitPickerVisible = ref(false);
|
||
const valueUnitPickerDraft = ref<PickerValue[]>([]);
|
||
const valueUnitPickerColumns = [valueUnitOptions];
|
||
|
||
function isNumberValueType(value: EventValueType): boolean {
|
||
return value === "NUMBER";
|
||
}
|
||
|
||
function getValueTypeText(value: EventValueType): string {
|
||
return valueTypeOptions.find(option => option.value === value)?.label || "不携带数值";
|
||
}
|
||
|
||
function getValueUnitText(value: EventValueUnit | null): string {
|
||
return valueUnitOptions.find(option => option.value === value)?.label || "请选择单位";
|
||
}
|
||
|
||
function openValueTypePicker(): void {
|
||
valueTypePickerDraft.value = [formModel.valueType];
|
||
valueTypePickerVisible.value = true;
|
||
}
|
||
|
||
function confirmValueType(value: Array<string | number>): void {
|
||
const valueType = value[0];
|
||
if (valueType !== "NONE" && valueType !== "NUMBER") {
|
||
return;
|
||
}
|
||
formModel.valueType = valueType;
|
||
if (valueType === "NONE") {
|
||
formModel.valueUnit = null;
|
||
formModel.requireValue = false;
|
||
} else if (!formModel.valueUnit) {
|
||
formModel.valueUnit = "CENT";
|
||
}
|
||
valueTypePickerVisible.value = false;
|
||
}
|
||
|
||
function openValueUnitPicker(): void {
|
||
if (!isNumberValueType(formModel.valueType)) {
|
||
return;
|
||
}
|
||
valueUnitPickerDraft.value = [formModel.valueUnit || "CENT"];
|
||
valueUnitPickerVisible.value = true;
|
||
}
|
||
|
||
function confirmValueUnit(value: Array<string | number>): void {
|
||
const valueUnit = value[0];
|
||
if (valueUnit === "CENT" || valueUnit === "COUNT") {
|
||
formModel.valueUnit = valueUnit;
|
||
}
|
||
valueUnitPickerVisible.value = false;
|
||
}
|
||
|
||
// ---------- 次数限制 ----------
|
||
|
||
function openLimitPicker(): void {
|
||
limitPickerDraft.value = [formModel.limitType];
|
||
limitPickerVisible.value = true;
|
||
}
|
||
|
||
function confirmLimitPicker(value: Array<string | number>): void {
|
||
const limitType = value[0];
|
||
if (typeof limitType === "string") {
|
||
formModel.limitType = limitType as EventLimitType;
|
||
if (isValueLimitType(formModel.limitType) && !formModel.limitValueText) {
|
||
formModel.limitValueText = "1";
|
||
}
|
||
}
|
||
limitPickerVisible.value = false;
|
||
}
|
||
|
||
// ---------- 状态 ----------
|
||
|
||
function openStatusPicker(): void {
|
||
statusPickerDraft.value = [formModel.status];
|
||
statusPickerVisible.value = true;
|
||
}
|
||
|
||
function confirmStatusPicker(value: Array<string | number>): void {
|
||
const status = value[0];
|
||
if (status === "DRAFT" || status === "ACTIVE" || status === "INACTIVE") {
|
||
formModel.status = status;
|
||
}
|
||
statusPickerVisible.value = false;
|
||
}
|
||
|
||
function isValueLimitType(value: EventLimitType): boolean {
|
||
return value !== "NONE";
|
||
}
|
||
|
||
function resolveLimitValue(): number | undefined {
|
||
if (!isValueLimitType(formModel.limitType)) {
|
||
return undefined;
|
||
}
|
||
|
||
const value = Number(formModel.limitValueText);
|
||
return 0 < value ? Math.floor(value) : undefined;
|
||
}
|
||
|
||
function resolveLimitValueText(value?: number): string {
|
||
if (value !== undefined && Number.isFinite(value) && 0 < value) {
|
||
return String(Math.floor(value));
|
||
}
|
||
return isValueLimitType(formModel.limitType) ? "1" : "";
|
||
}
|
||
|
||
// ---------- 表单转换 ----------
|
||
|
||
function resolveTimestamp(valueText: string): number | undefined {
|
||
if (!valueText.trim()) {
|
||
return undefined;
|
||
}
|
||
|
||
const date = new Date(valueText);
|
||
const timestamp = Time.toTimestamp(date);
|
||
return Number.isFinite(timestamp) ? timestamp : undefined;
|
||
}
|
||
|
||
function validateForm(): boolean {
|
||
if (!formModel.storeId) {
|
||
Message.warning("请选择门店");
|
||
return false;
|
||
}
|
||
if (!formModel.name.trim()) {
|
||
Message.warning("请输入登记事件名称");
|
||
return false;
|
||
}
|
||
if (!formModel.roleCodeList.length) {
|
||
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;
|
||
}
|
||
const beginAt = resolveTimestamp(formModel.beginAtText);
|
||
const endAt = resolveTimestamp(formModel.endAtText);
|
||
if (beginAt !== undefined && endAt !== undefined && endAt < beginAt) {
|
||
Message.warning("终止时间不能早于起始时间");
|
||
return false;
|
||
}
|
||
return true;
|
||
}
|
||
|
||
// ---------- 生效时间 ----------
|
||
|
||
function openBeginAtPicker(): void {
|
||
beginAtDraftText.value = formModel.beginAtText || nowDateTimeText.value;
|
||
beginAtPickerVisible.value = true;
|
||
}
|
||
|
||
function openEndAtPicker(): void {
|
||
endAtDraftText.value = formModel.endAtText || defaultEndAtText.value;
|
||
endAtPickerVisible.value = true;
|
||
}
|
||
|
||
function confirmBeginAt(value: string | number): void {
|
||
formModel.beginAtText = String(value);
|
||
beginAtPickerVisible.value = false;
|
||
}
|
||
|
||
function confirmEndAt(value: string | number): void {
|
||
formModel.endAtText = String(value);
|
||
endAtPickerVisible.value = false;
|
||
}
|
||
|
||
function clearBeginAt(): void {
|
||
formModel.beginAtText = "";
|
||
beginAtDraftText.value = "";
|
||
beginAtPickerVisible.value = false;
|
||
}
|
||
|
||
function clearEndAt(): void {
|
||
formModel.endAtText = "";
|
||
endAtDraftText.value = "";
|
||
endAtPickerVisible.value = false;
|
||
}
|
||
|
||
// ---------- 保存 ----------
|
||
|
||
async function saveEventItem(): Promise<void> {
|
||
if (!validateForm()) {
|
||
return;
|
||
}
|
||
isSaving.value = true;
|
||
try {
|
||
const payload: EventItem = {
|
||
id: formModel.id || undefined,
|
||
storeId: formModel.storeId,
|
||
name: formModel.name.trim(),
|
||
description: formModel.description,
|
||
color: formModel.color,
|
||
valueType: formModel.valueType,
|
||
valueUnit: isNumberValueType(formModel.valueType) ? formModel.valueUnit : null,
|
||
requireValue: isNumberValueType(formModel.valueType) && formModel.requireValue,
|
||
status: formModel.status,
|
||
requirePhoto: formModel.requirePhoto,
|
||
requireVerification: formModel.requireVerification,
|
||
limitType: formModel.limitType,
|
||
limitValue: resolveLimitValue(),
|
||
beginAt: resolveTimestamp(formModel.beginAtText),
|
||
endAt: resolveTimestamp(formModel.endAtText),
|
||
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");
|
||
} catch (error) {
|
||
Message.error(getErrorMessage(error, "登记事件保存失败"));
|
||
} finally {
|
||
isSaving.value = false;
|
||
}
|
||
}
|
||
|
||
// ---------- 页面数据 ----------
|
||
|
||
async function prepareStoreScope(): Promise<void> {
|
||
if (isGlobalManager.value) {
|
||
await currentStoreStore.loadStoreList();
|
||
const queryStoreId = String(route.query.storeId || "");
|
||
formModel.storeId = currentStoreStore.storeList.some(item => item.id === queryStoreId)
|
||
? queryStoreId
|
||
: currentStoreStore.currentStoreId;
|
||
return;
|
||
}
|
||
|
||
const store = await currentStoreStore.loadLoginStore();
|
||
formModel.storeId = store?.id || "";
|
||
}
|
||
|
||
async function fillForm(): Promise<void> {
|
||
await prepareStoreScope();
|
||
roleOptions.value = await RoleAPI.manageableList(moduleCode);
|
||
if (isCreateMode.value) {
|
||
return;
|
||
}
|
||
const current = await EventAPI.detail(routeId.value);
|
||
if (current.status === "DELETED") {
|
||
Message.error("已删除登记事件不可编辑");
|
||
await router.replace({ name: "EventDetail", params: { id: routeId.value } });
|
||
return;
|
||
}
|
||
Object.assign(formModel, {
|
||
id: current.id || "",
|
||
storeId: current.storeId || formModel.storeId,
|
||
name: current.name || "",
|
||
description: current.description || "",
|
||
color: current.color || "#2f88ff",
|
||
valueType: current.valueType || "NONE",
|
||
valueUnit: current.valueUnit || null,
|
||
requireValue: current.requireValue ?? false,
|
||
status: current.status === "DRAFT" ? "DRAFT" : current.status === "INACTIVE" ? "INACTIVE" : "ACTIVE",
|
||
requirePhoto: current.requirePhoto ?? false,
|
||
requireVerification: current.requireVerification ?? false,
|
||
limitType: current.limitType || "NONE",
|
||
beginAtText: current.beginAt ? Time.toDateTime(current.beginAt) : "",
|
||
endAtText: current.endAt ? Time.toDateTime(current.endAt) : "",
|
||
roleCodeList: [...(current.roleCodeList || [])]
|
||
});
|
||
optionGroupList.value = normalizeEventOptionGroupList(current.optionGroupList);
|
||
formModel.limitValueText = resolveLimitValueText(current.limitValue);
|
||
colorDraft.value = formModel.color;
|
||
}
|
||
|
||
onMounted(async () => {
|
||
navBarStore.clearRight();
|
||
if (userStore.hasPermissions(savePermissionCode.value)) {
|
||
navBarStore.setRightText("保存", "var(--td-brand-color)", saveEventItem);
|
||
}
|
||
try {
|
||
await fillForm();
|
||
} catch {
|
||
Message.error("登记事件加载失败");
|
||
}
|
||
});
|
||
|
||
onUnmounted(() => navBarStore.clearRight());
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.event-edit {
|
||
gap: 1rem;
|
||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.form {
|
||
|
||
.description {
|
||
width: 100%;
|
||
height: 4rem;
|
||
}
|
||
|
||
.end-at,
|
||
.begin-at {
|
||
--td-button-extra-small-height: 24px;
|
||
|
||
gap: .5rem;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: end;
|
||
}
|
||
|
||
.status-tips {
|
||
display: flex;
|
||
font-size: .875rem;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
.picker-text {
|
||
color: #52607a;
|
||
width: 100%;
|
||
text-align: right;
|
||
}
|
||
|
||
.color-trigger {
|
||
--td-button-extra-small-padding-horizontal: 2px;
|
||
|
||
gap: .75rem;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-right: .875rem;
|
||
justify-content: flex-start;
|
||
|
||
.content {
|
||
gap: .5rem;
|
||
display: flex;
|
||
|
||
.swatch {
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
display: block;
|
||
border-radius: .35rem;
|
||
}
|
||
|
||
span {
|
||
color: #52607a;
|
||
font-size: .875rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.roles {
|
||
gap: .75rem;
|
||
display: flex;
|
||
padding: 1rem;
|
||
flex-direction: column;
|
||
|
||
.title {
|
||
gap: .25rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
span:first-child {
|
||
font-weight: 700;
|
||
}
|
||
|
||
.hint {
|
||
color: #52607a;
|
||
font-size: .8125rem;
|
||
}
|
||
}
|
||
|
||
.group {
|
||
gap: .5rem;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
|
||
.item {
|
||
margin: 0;
|
||
padding: .875rem;
|
||
background: #fff;
|
||
border: 1px solid rgba(148, 163, 184, .22);
|
||
border-radius: .75rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.picker-popup {
|
||
background: var(--td-bg-color-container);
|
||
border-radius: 1.25rem 1.25rem 0 0;
|
||
|
||
.picker-header {
|
||
display: flex;
|
||
padding: .75rem 1rem 0;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.color-popup {
|
||
padding: .75rem 0 1.25rem;
|
||
background: #fff;
|
||
border-radius: 1rem 1rem 0 0;
|
||
|
||
.header {
|
||
display: flex;
|
||
padding: 0 1rem;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
span {
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
|
||
:global(html.theme-dark) {
|
||
.registration-event-edit {
|
||
.color-trigger span,
|
||
.roles .title .hint {
|
||
color: #94a3b8;
|
||
}
|
||
|
||
.color-trigger .swatch {
|
||
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .24);
|
||
}
|
||
|
||
.color-popup {
|
||
background: #0f172a;
|
||
}
|
||
|
||
.roles .group .item {
|
||
color: #e2e8f0;
|
||
background: rgba(15, 23, 42, .72);
|
||
border-color: rgba(148, 163, 184, .16);
|
||
}
|
||
}
|
||
}
|
||
</style>
|