fix registration event style

2026-08-03 16:19:43 +08:00
parent b30d0d1769
commit e3be14b0cc
3 changed files with 70 additions and 52 deletions
@@ -56,7 +56,13 @@
 				<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 />
+				<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" />
@@ -107,7 +113,7 @@
 			</t-button>
 		</div>
 	</div>
-	<t-popup v-model="colorPickerVisible" placement="bottom">
+	<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>
@@ -115,10 +121,13 @@
 				<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>
@@ -143,8 +152,9 @@
 	<t-popup v-model="beginAtPickerVisible" placement="bottom">
 		<div class="picker-popup">
 			<t-date-time-picker
+				v-if="beginAtPickerVisible"
 				v-model="beginAtDraftText"
-				:default-value="beginAtDraftText || nowDateTimeText"
+				:start="minimumDateTimeText"
 				:mode="['date', 'minute']"
 				format="YYYY-MM-DD HH:mm"
 				title="起始时间"
@@ -156,8 +166,9 @@
 	<t-popup v-model="endAtPickerVisible" placement="bottom">
 		<div class="picker-popup">
 			<t-date-time-picker
+				v-if="endAtPickerVisible"
 				v-model="endAtDraftText"
-				:default-value="endAtDraftText || nowDateTimeText"
+				:start="endAtMinimumDateTimeText"
 				:mode="['date', 'minute']"
 				format="YYYY-MM-DD HH:mm"
 				title="终止时间"
@@ -171,6 +182,7 @@
 <script setup lang="ts">
 import { Time } from "timi-web";
 import { DialogPlugin, Toast } from "tdesign-mobile-vue";
+import type { ColorObject } from "tdesign-mobile-vue";
 import type { Role } from "timi-web";
 import RegistrationEventAPI from "@/api/RegistrationEventAPI";
 import GaoUserAPI from "@/api/GaoUserAPI";
@@ -198,6 +210,7 @@ const pageAccess = computed(() => ({
 }));
 const roleOptions = ref<Role[]>([]);
 const colorPickerVisible = ref(false);
+const colorPickerRenderKey = ref(0);
 const colorDraft = ref("#2f88ff");
 const beginAtPickerVisible = ref(false);
 const endAtPickerVisible = ref(false);
@@ -250,7 +263,14 @@ const limitPickerVisible = ref(false);
 const limitPickerDraft = ref<string[]>([formModel.limitType]);
 const statusPickerVisible = ref(false);
 const statusPickerDraft = ref<RegistrationEventStatus[]>([formModel.status]);
+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 === "INTERVAL_HOUR") {
 		return "请输入间隔小时数";
@@ -266,6 +286,10 @@ function openColorPicker(): void {
 	colorPickerVisible.value = true;
 }

+function handleColorPickerOpened(): void {
+	colorPickerRenderKey.value += 1;
+}
+
 function cancelColorPicker(): void {
 	colorPickerVisible.value = false;
 	colorDraft.value = formModel.color;
@@ -276,6 +300,10 @@ function confirmColorPicker(): void {
 	colorPickerVisible.value = false;
 }

+function updateColorDraftFromPalette(context: { color: ColorObject }): void {
+	colorDraft.value = context.color.hex8;
+}
+
 function getLimitText(value: RegistrationLimitType): string {
 	return limitOptions.find(option => option.value === value)?.label || "不限";
 }
@@ -377,17 +405,17 @@ function openBeginAtPicker(): void {
 }

 function openEndAtPicker(): void {
-	endAtDraftText.value = formModel.endAtText || nowDateTimeText.value;
+	endAtDraftText.value = formModel.endAtText || defaultEndAtText.value;
 	endAtPickerVisible.value = true;
 }

-function confirmBeginAt(): void {
-	formModel.beginAtText = beginAtDraftText.value;
+function confirmBeginAt(value: string | number): void {
+	formModel.beginAtText = String(value);
 	beginAtPickerVisible.value = false;
 }

-function confirmEndAt(): void {
-	formModel.endAtText = endAtDraftText.value;
+function confirmEndAt(value: string | number): void {
+	formModel.endAtText = String(value);
 	endAtPickerVisible.value = false;
 }

@@ -15,9 +15,9 @@
 						<div class="title" v-text="item.name || '未命名事件'" />
 						<t-tag
 							class="status"
-							:theme="isRegistrationEventActive(item) ? 'primary' : 'default'"
+							:theme="getStatusTag(item).theme"
 							variant="outline"
-							:content="getStatusText(item)"
+							:content="getStatusTag(item).text"
 						/>
 						<t-tag v-if="item.requirePhoto" theme="warning" variant="outline">需拍照</t-tag>
 					</div>
@@ -36,7 +36,6 @@
 							<span v-if="!(item.roleCodeList || []).length" class="muted" v-text="'未配置'" />
 						</div>
 						<div class="line" v-text="getLimitText(item)" />
-						<div class="line" v-text="getPeriodText(item)" />
 					</div>
 				</template>
 			</t-cell>
@@ -53,11 +52,11 @@

 <script setup lang="ts">
 import { Toast } from "tdesign-mobile-vue";
-import { Time, useUserStore, type Role } from "timi-web";
+import { useUserStore, type Role } from "timi-web";
 import RegistrationEventAPI from "@/api/RegistrationEventAPI";
 import GaoUserAPI from "@/api/GaoUserAPI";
 import { useNavBarStore } from "@/store/navBarStore";
-import type { RegistrationEvent, RegistrationLimitType } from "@/types/RegistrationEvent";
+import type { RegistrationEvent, RegistrationEventStatus, RegistrationLimitType } from "@/types/RegistrationEvent";
 import { gaoPermissionCodes } from "@/utils/gaoPermission";

 defineOptions({
@@ -72,6 +71,20 @@ const registrationEventList = ref<RegistrationEvent[]>([]);
 const roleOptions = ref<Role[]>([]);
 const canUpdateRegistrationEvent = computed(() => userStore.hasPermissions(gaoPermissionCodes.registrationEvent.update));

+type StatusTag = {
+	text: string;
+	theme: "default" | "primary" | "danger";
+};
+
+const fixedStatusTagMap: Partial<Record<RegistrationEventStatus, StatusTag>> = {
+	DRAFT: { text: "草稿", theme: "default" },
+	INACTIVE: { text: "不可登记", theme: "default" },
+	DELETED: { text: "已删除", theme: "default" }
+};
+const activeStatusTag: StatusTag = { text: "可登记", theme: "primary" };
+const notEffectiveStatusTag: StatusTag = { text: "未生效", theme: "default" };
+const expiredStatusTag: StatusTag = { text: "已过期", theme: "danger" };
+
 function createRegistrationEvent(): void {
 	router.push("/management/registration-events/create");
 }
@@ -96,21 +109,20 @@ function handleRegistrationEventClick(item: RegistrationEvent): void {
 	editRegistrationEvent(item);
 }

-function isRegistrationEventActive(item: RegistrationEvent): boolean {
-	return (item.status || "ACTIVE") === "ACTIVE";
+function getStatusTag(item: RegistrationEvent): StatusTag {
+	const status = item.status || "ACTIVE";
+	const fixedStatusTag = fixedStatusTagMap[status];
+	if (fixedStatusTag) {
+		return fixedStatusTag;
 	}
-
-function getStatusText(item: RegistrationEvent): string {
-	if (item.status === "DRAFT") {
-		return "草稿";
+	const now = Date.now();
+	if (item.beginAt !== undefined && now < item.beginAt) {
+		return notEffectiveStatusTag;
 	}
-	if (item.status === "INACTIVE") {
-		return "不可登记";
+	if (item.endAt !== undefined && item.endAt < now) {
+		return expiredStatusTag;
 	}
-	if (item.status === "DELETED") {
-		return "已删除";
-	}
-	return "可登记";
+	return activeStatusTag;
 }

 function getLimitText(item: RegistrationEvent): string {
@@ -126,24 +138,6 @@ function getLimitText(item: RegistrationEvent): string {
 	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 {
 	const role = roleOptions.value.find(item => item.code === code);
 	return role?.name || code;
@@ -4,9 +4,9 @@
 		<t-cell-group v-if="record" title="登记信息" theme="card">
 			<t-cell title="登记事件" :note="record.registrationEvent?.name || '未知事件'" />
 			<t-cell title="登记时间" :note="formatTime(record.registeredAt)" />
-			<t-cell title="登记人" :note="getOperatorName(record)" />
-			<t-cell title="客户编码" :note="record.customer?.code || record.customerId || '未知'" />
-			<t-cell title="备注" :note="record.remark || '无'" />
+			<t-cell title="登记人" :note="Text.display(record.operator?.nick || record.operator?.name)" />
+			<t-cell title="客户编码" :note="Text.display(record.customer?.code)" />
+			<t-cell title="备注" :note="Text.display(record.remark)" />
 		</t-cell-group>
 		<section v-if="record" class="photo-panel">
 			<photo-scroller
@@ -21,7 +21,7 @@
 </template>

 <script setup lang="ts">
-import { Time, useUserStore } from "timi-web";
+import { Text, Time, useUserStore } from "timi-web";
 import RegistrationEventRecordAPI from "@/api/RegistrationEventRecordAPI";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
 import PhotoScroller from "@/components/PhotoScroller.vue";
@@ -85,10 +85,6 @@ function formatTime(value?: number): string {
 	return Time.formatDateTime(date);
 }

-function getOperatorName(item: RegistrationEventRecord): string {
-	return item.operator?.nick || item.operator?.name || "未知";
-}
-
 watch(() => route.params.id, async () => {
 	await loadRecord();
 }, { immediate: true });