add event beginAt/endAt

This commit is contained in:
Timi
2026-08-03 12:27:20 +08:00
parent cd1b45eb24
commit 4b81694c8c
5 changed files with 179 additions and 23 deletions
+140 -13
View File
@@ -22,13 +22,11 @@
</t-form-item> </t-form-item>
<t-form-item label="状态"> <t-form-item label="状态">
<t-radio-group v-model="formModel.status" class="inline-options" variant="default-filled"> <t-radio-group v-model="formModel.status" class="inline-options" variant="default-filled">
<t-radio :block="false" borderless value="ACTIVE">有效</t-radio> <t-radio :block="false" borderless value="DRAFT">草稿</t-radio>
<t-radio :block="false" borderless value="INACTIVE">无效</t-radio> <t-radio :block="false" borderless value="ACTIVE">可登记</t-radio>
<t-radio :block="false" borderless value="INACTIVE">不可登记</t-radio>
</t-radio-group> </t-radio-group>
</t-form-item> </t-form-item>
<t-form-item label="启用" content-align="right">
<t-switch v-model="formModel.enabled" />
</t-form-item>
<t-form-item label="需要拍照" content-align="right"> <t-form-item label="需要拍照" content-align="right">
<t-switch v-model="formModel.requirePhoto" /> <t-switch v-model="formModel.requirePhoto" />
</t-form-item> </t-form-item>
@@ -51,11 +49,17 @@
<t-form-item v-if="isValueLimitType(formModel.limitType)" label="数值"> <t-form-item v-if="isValueLimitType(formModel.limitType)" label="数值">
<t-input v-model.trim="formModel.limitValueText" type="number" :placeholder="limitValuePlaceholder" borderless /> <t-input v-model.trim="formModel.limitValueText" type="number" :placeholder="limitValuePlaceholder" borderless />
</t-form-item> </t-form-item>
<t-form-item label="起始时间" arrow @click="openBeginAtPicker">
<div class="picker-text" v-text="formModel.beginAtText || '不限'" />
</t-form-item>
<t-form-item label="终止时间" arrow @click="openEndAtPicker">
<div class="picker-text" v-text="formModel.endAtText || '不限'" />
</t-form-item>
</t-form> </t-form>
<section class="roles"> <section class="roles">
<div class="title"> <div class="title">
<span>可登记角色</span> <span>可登记角色</span>
<span class="hint">未选择角色时不限制角色</span> <span class="hint">必须至少选择一个角色,上级角色拥有子级角色可登记事件的登记权限</span>
</div> </div>
<t-checkbox-group v-model="formModel.roleCodeList" class="group"> <t-checkbox-group v-model="formModel.roleCodeList" class="group">
<t-checkbox <t-checkbox
@@ -109,9 +113,46 @@
/> />
</div> </div>
</t-popup> </t-popup>
<t-popup v-model="beginAtPickerVisible" placement="bottom">
<div class="picker-popup">
<div class="picker-header">
<t-button variant="text" size="small" @click="clearBeginAt">清空</t-button>
<span v-text="'起始时间'" />
<t-button variant="text" size="small" @click="beginAtPickerVisible = false">取消</t-button>
</div>
<t-date-time-picker
v-model="beginAtDraftText"
:default-value="beginAtDraftText || nowDateTimeText"
: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">
<div class="picker-header">
<t-button variant="text" size="small" @click="clearEndAt">清空</t-button>
<span v-text="'终止时间'" />
<t-button variant="text" size="small" @click="endAtPickerVisible = false">取消</t-button>
</div>
<t-date-time-picker
v-model="endAtDraftText"
:default-value="endAtDraftText || nowDateTimeText"
:mode="['date', 'minute']"
format="YYYY-MM-DD HH:mm"
title="终止时间"
@cancel="endAtPickerVisible = false"
@confirm="confirmEndAt"
/>
</div>
</t-popup>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Time } from "timi-web";
import { DialogPlugin, Toast } from "tdesign-mobile-vue"; import { DialogPlugin, Toast } from "tdesign-mobile-vue";
import type { Role } from "timi-web"; import type { Role } from "timi-web";
import RegistrationEventAPI from "@/api/RegistrationEventAPI"; import RegistrationEventAPI from "@/api/RegistrationEventAPI";
@@ -143,6 +184,10 @@ const pageAccess = computed(() => ({
const roleOptions = ref<Role[]>([]); const roleOptions = ref<Role[]>([]);
const colorPickerVisible = ref(false); const colorPickerVisible = ref(false);
const colorDraft = ref("#2f88ff"); const colorDraft = ref("#2f88ff");
const beginAtPickerVisible = ref(false);
const endAtPickerVisible = ref(false);
const beginAtDraftText = ref("");
const endAtDraftText = ref("");
const saving = ref(false); const saving = ref(false);
const removing = ref(false); const removing = ref(false);
const colorSwatchList = [ const colorSwatchList = [
@@ -163,7 +208,8 @@ const limitOptions: LimitOption[] = [
{ label: "每天一次", value: "NATURAL_DAY" }, { label: "每天一次", value: "NATURAL_DAY" },
{ label: "间隔小时", value: "INTERVAL_HOUR" }, { label: "间隔小时", value: "INTERVAL_HOUR" },
{ label: "每月一次", value: "NATURAL_MONTH" }, { label: "每月一次", value: "NATURAL_MONTH" },
{ label: "累计次数", value: "TOTAL_LIMIT" } { label: "事件总次数", value: "TOTAL_LIMIT" },
{ label: "单客户总次数", value: "CUSTOMER_TOTAL_LIMIT" }
]; ];
const formModel = reactive({ const formModel = reactive({
id: "", id: "",
@@ -171,14 +217,24 @@ const formModel = reactive({
description: "", description: "",
color: "#2f88ff", color: "#2f88ff",
status: "ACTIVE" as RegistrationEventStatus, status: "ACTIVE" as RegistrationEventStatus,
enabled: true,
requirePhoto: false, requirePhoto: false,
limitType: "NONE" as RegistrationLimitType, limitType: "NONE" as RegistrationLimitType,
limitValueText: "", limitValueText: "",
beginAtText: "",
endAtText: "",
sortText: "0", sortText: "0",
roleCodeList: [] as string[] roleCodeList: [] as string[]
}); });
const limitValuePlaceholder = computed(() => formModel.limitType === "INTERVAL_HOUR" ? "请输入间隔小时数" : "请输入累计上限次数"); const nowDateTimeText = computed(() => Time.formatDateTime(new Date()));
const limitValuePlaceholder = computed(() => {
if (formModel.limitType === "INTERVAL_HOUR") {
return "请输入间隔小时数";
}
if (formModel.limitType === "CUSTOMER_TOTAL_LIMIT") {
return "请输入单客户总次数上限";
}
return "请输入总次数上限";
});
function openColorPicker(): void { function openColorPicker(): void {
colorDraft.value = formModel.color; colorDraft.value = formModel.color;
@@ -196,7 +252,7 @@ function confirmColorPicker(): void {
} }
function isValueLimitType(value: RegistrationLimitType): boolean { function isValueLimitType(value: RegistrationLimitType): boolean {
return value === "INTERVAL_HOUR" || value === "TOTAL_LIMIT"; return value === "INTERVAL_HOUR" || value === "TOTAL_LIMIT" || value === "CUSTOMER_TOTAL_LIMIT";
} }
function resolveLimitValue(): number | undefined { function resolveLimitValue(): number | undefined {
@@ -208,15 +264,35 @@ function resolveLimitValue(): number | undefined {
return 0 < value ? Math.floor(value) : undefined; return 0 < value ? Math.floor(value) : undefined;
} }
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 { function validateForm(): boolean {
if (!formModel.name.trim()) { if (!formModel.name.trim()) {
showToast("请输入登记事件名称", "warning"); showToast("请输入登记事件名称", "warning");
return false; return false;
} }
if (!formModel.roleCodeList.length) {
showToast("请至少选择一个可登记角色", "warning");
return false;
}
if (isValueLimitType(formModel.limitType) && !resolveLimitValue()) { if (isValueLimitType(formModel.limitType) && !resolveLimitValue()) {
showToast("请输入有效的约束数值", "warning"); showToast("请输入有效的约束数值", "warning");
return false; return false;
} }
const beginAt = resolveTimestamp(formModel.beginAtText);
const endAt = resolveTimestamp(formModel.endAtText);
if (beginAt !== undefined && endAt !== undefined && endAt < beginAt) {
showToast("终止时间不能早于起始时间", "warning");
return false;
}
return true; return true;
} }
@@ -227,15 +303,48 @@ function buildPayload(): RegistrationEvent {
description: formModel.description, description: formModel.description,
color: formModel.color, color: formModel.color,
status: formModel.status, status: formModel.status,
enabled: formModel.enabled,
requirePhoto: formModel.requirePhoto, requirePhoto: formModel.requirePhoto,
limitType: formModel.limitType, limitType: formModel.limitType,
limitValue: resolveLimitValue(), limitValue: resolveLimitValue(),
beginAt: resolveTimestamp(formModel.beginAtText),
endAt: resolveTimestamp(formModel.endAtText),
sort: Math.floor(Number(formModel.sortText) || 0), sort: Math.floor(Number(formModel.sortText) || 0),
roleCodeList: [...formModel.roleCodeList] roleCodeList: [...formModel.roleCodeList]
}; };
} }
function openBeginAtPicker(): void {
beginAtDraftText.value = formModel.beginAtText || nowDateTimeText.value;
beginAtPickerVisible.value = true;
}
function openEndAtPicker(): void {
endAtDraftText.value = formModel.endAtText || nowDateTimeText.value;
endAtPickerVisible.value = true;
}
function confirmBeginAt(): void {
formModel.beginAtText = beginAtDraftText.value;
beginAtPickerVisible.value = false;
}
function confirmEndAt(): void {
formModel.endAtText = endAtDraftText.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 saveRegistrationEvent(): Promise<void> { async function saveRegistrationEvent(): Promise<void> {
if (!validateForm()) { if (!validateForm()) {
return; return;
@@ -317,11 +426,12 @@ async function fillForm(): Promise<void> {
name: current.name || "", name: current.name || "",
description: current.description || "", description: current.description || "",
color: current.color || "#2f88ff", color: current.color || "#2f88ff",
status: current.status === "INACTIVE" ? "INACTIVE" : "ACTIVE", status: current.status === "DRAFT" ? "DRAFT" : current.status === "INACTIVE" ? "INACTIVE" : "ACTIVE",
enabled: current.enabled ?? true,
requirePhoto: current.requirePhoto ?? false, requirePhoto: current.requirePhoto ?? false,
limitType: current.limitType || "NONE", limitType: current.limitType || "NONE",
limitValueText: current.limitValue ? String(current.limitValue) : "", limitValueText: current.limitValue ? String(current.limitValue) : "",
beginAtText: current.beginAt ? Time.formatDateTime(new Date(current.beginAt)) : "",
endAtText: current.endAt ? Time.formatDateTime(new Date(current.endAt)) : "",
sortText: String(current.sort ?? 0), sortText: String(current.sort ?? 0),
roleCodeList: [...(current.roleCodeList || [])] roleCodeList: [...(current.roleCodeList || [])]
}); });
@@ -345,6 +455,12 @@ onMounted(async () => {
border-radius: .75rem; border-radius: .75rem;
} }
.picker-text {
color: #52607a;
width: 100%;
text-align: right;
}
.textarea { .textarea {
width: 100%; width: 100%;
} }
@@ -437,6 +553,17 @@ onMounted(async () => {
} }
} }
.picker-popup {
background: var(--td-bg-color-container);
.picker-header {
display: flex;
padding: .75rem 1rem 0;
align-items: center;
justify-content: space-between;
}
}
.color-popup { .color-popup {
padding: .75rem 0 1.25rem; padding: .75rem 0 1.25rem;
background: #fff; background: #fff;
+33 -5
View File
@@ -33,8 +33,10 @@
variant="light-outline" variant="light-outline"
:content="getRoleName(roleCode)" :content="getRoleName(roleCode)"
/> />
<span v-if="!(item.roleCodeList || []).length" class="muted" v-text="'未配置'" />
</div> </div>
<div class="line" v-text="getLimitText(item)" /> <div class="line" v-text="getLimitText(item)" />
<div class="line" v-text="getPeriodText(item)" />
</div> </div>
</template> </template>
</t-cell> </t-cell>
@@ -51,7 +53,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { Toast } from "tdesign-mobile-vue"; import { Toast } from "tdesign-mobile-vue";
import { useUserStore, type Role } from "timi-web"; import { Time, useUserStore, type Role } from "timi-web";
import RegistrationEventAPI from "@/api/RegistrationEventAPI"; import RegistrationEventAPI from "@/api/RegistrationEventAPI";
import GaoUserAPI from "@/api/GaoUserAPI"; import GaoUserAPI from "@/api/GaoUserAPI";
import type { RegistrationEvent, RegistrationLimitType } from "@/types/RegistrationEvent"; import type { RegistrationEvent, RegistrationLimitType } from "@/types/RegistrationEvent";
@@ -89,17 +91,20 @@ function handleRegistrationEventClick(item: RegistrationEvent): void {
} }
function isRegistrationEventActive(item: RegistrationEvent): boolean { function isRegistrationEventActive(item: RegistrationEvent): boolean {
return item.enabled !== false && (item.status || "ACTIVE") === "ACTIVE"; return (item.status || "ACTIVE") === "ACTIVE";
} }
function getStatusText(item: RegistrationEvent): string { function getStatusText(item: RegistrationEvent): string {
if (item.status === "DRAFT") {
return "草稿";
}
if (item.status === "INACTIVE") { if (item.status === "INACTIVE") {
return "无效"; return "不可登记";
} }
if (item.status === "DELETED") { if (item.status === "DELETED") {
return "已删除"; return "已删除";
} }
return item.enabled === false ? "停用" : "有效"; return "可登记";
} }
function getLimitText(item: RegistrationEvent): string { function getLimitText(item: RegistrationEvent): string {
@@ -109,11 +114,30 @@ function getLimitText(item: RegistrationEvent): string {
NATURAL_DAY: "每天一次", NATURAL_DAY: "每天一次",
INTERVAL_HOUR: `每隔 ${item.limitValue || 0} 小时`, INTERVAL_HOUR: `每隔 ${item.limitValue || 0} 小时`,
NATURAL_MONTH: "每月一次", NATURAL_MONTH: "每月一次",
TOTAL_LIMIT: `累计限 ${item.limitValue || 0} 次` TOTAL_LIMIT: `事件总上限 ${item.limitValue || 0} 次`,
CUSTOMER_TOTAL_LIMIT: `单客户总上限 ${item.limitValue || 0} 次`
}; };
return limitTextMap[item.limitType || "NONE"]; return limitTextMap[item.limitType || "NONE"];
} }
function getPeriodText(item: RegistrationEvent): string {
const beginText = formatTime(item.beginAt);
const endText = formatTime(item.endAt);
if (!beginText && !endText) {
return "有效期:不限";
}
return `有效期:${beginText || "不限"} 至 ${endText || "不限"}`;
}
function formatTime(value?: number): string {
if (!value) {
return "";
}
const date = new Date(value);
return Number.isNaN(date.getTime()) ? "" : Time.formatDateTime(date);
}
function getRoleName(code: string): string { function getRoleName(code: string): string {
const role = roleOptions.value.find(item => item.code === code); const role = roleOptions.value.find(item => item.code === code);
return role?.name || code; return role?.name || code;
@@ -170,6 +194,10 @@ onMounted(async () => {
gap: .5rem; gap: .5rem;
display: flex; display: flex;
align-items: center; align-items: center;
.muted {
color: #52607a;
}
} }
} }
} }
+1 -1
View File
@@ -148,7 +148,7 @@ function canRegistrationEvent(action: RegistrationEvent, item: GaoUser): boolean
const userRoleCodeSet = buildEffectiveRoleCodeSet(item, permissionStore.roleList); const userRoleCodeSet = buildEffectiveRoleCodeSet(item, permissionStore.roleList);
const roleCodeList = action.roleCodeList || []; const roleCodeList = action.roleCodeList || [];
if (!roleCodeList.length) { if (!roleCodeList.length) {
return true; return false;
} }
return roleCodeList.some(code => userRoleCodeSet.has(code)); return roleCodeList.some(code => userRoleCodeSet.has(code));
} }
+1 -1
View File
@@ -58,7 +58,7 @@ function canRegistrationEvent(action: RegistrationEvent, item: GaoUser): boolean
const userRoleCodeSet = buildEffectiveRoleCodeSet(item, permissionStore.roleList); const userRoleCodeSet = buildEffectiveRoleCodeSet(item, permissionStore.roleList);
const roleCodeList = action.roleCodeList || []; const roleCodeList = action.roleCodeList || [];
if (!roleCodeList.length) { if (!roleCodeList.length) {
return true; return false;
} }
return roleCodeList.some(code => userRoleCodeSet.has(code)); return roleCodeList.some(code => userRoleCodeSet.has(code));
} }
+4 -3
View File
@@ -1,18 +1,19 @@
import type { Model } from "timi-web"; import type { Model } from "timi-web";
export type RegistrationEventStatus = "ACTIVE" | "INACTIVE" | "DELETED"; export type RegistrationEventStatus = "DRAFT" | "ACTIVE" | "INACTIVE" | "DELETED";
export type RegistrationLimitType = "NONE" | "DAILY_HALF_DAY" | "NATURAL_DAY" | "INTERVAL_HOUR" | "NATURAL_MONTH" | "TOTAL_LIMIT"; export type RegistrationLimitType = "NONE" | "DAILY_HALF_DAY" | "NATURAL_DAY" | "INTERVAL_HOUR" | "NATURAL_MONTH" | "TOTAL_LIMIT" | "CUSTOMER_TOTAL_LIMIT";
export type RegistrationEvent = { export type RegistrationEvent = {
name: string; name: string;
description?: string; description?: string;
color?: string; color?: string;
status?: RegistrationEventStatus; status?: RegistrationEventStatus;
enabled?: boolean;
requirePhoto?: boolean; requirePhoto?: boolean;
limitType?: RegistrationLimitType; limitType?: RegistrationLimitType;
limitValue?: number; limitValue?: number;
beginAt?: number;
endAt?: number;
sort?: number; sort?: number;
roleCodeList?: string[]; roleCodeList?: string[];
} & Model; } & Model;