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

update style

Browse Source
This commit is contained in:
Timi
2026-08-14 21:52:08 +08:00
parent aa5ab33b77
commit e4d02a714f
1 changed files with 139 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/event/EventRecordList.vue
+139 -111
View File
@@ -26,74 +26,75 @@
</t-dropdown-menu> </t-dropdown-menu>
</div> </div>
</div> </div>
<t-cell-group v-if="isCustomRange" class="time-range" theme="card">
<t-cell
title="开始时间"
:note="dateRange[0] || '-'"
@click="startVisible = true"
/>
<t-cell
title="结束时间"
:note="dateRange[1] || '-'"
@click="endVisible = true"
/>
</t-cell-group>
<div class="summary">
<div v-text="summaryText" />
<div v-text="summaryBehaviorText" />
<div v-text="summaryTotalText" />
<div v-if="summaryNumberValueText" v-text="summaryNumberValueText" />
</div>
<t-pull-down-refresh <t-pull-down-refresh
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@refresh="reloadRecords" @refresh="reloadRecords"
@scrolltolower="loadRecords" @scrolltolower="loadRecords"
> >
<t-cell-group <div class="list-wrapper">
v-if="pageResult.list.length" <t-cell-group class="summary" theme="card">
class="record-list"
theme="card"
>
<t-swipe-cell
v-for="item in pageResult.list"
:key="item.id"
class="item"
>
<t-cell <t-cell
class="cell" title="开始时间"
:title="getRecordEventName(item)" :note="dateRange[0] || '-'"
:description="getRecordCustomerName(item)"
:note="getRecordRegisteredAt(item)"
arrow arrow
hover @click="startVisible = true"
@click="toDetail(item.id || '')" />
<t-cell
title="结束时间"
:note="dateRange[1] || '-'"
arrow
@click="endVisible = true"
/>
<t-cell title="事件" :note="eventFilterLabel" />
<t-cell title="数据量" :note="summaryTotalText" />
<t-cell v-if="summaryNumberValueText" title="数值合计" :note="summaryNumberValueText" />
</t-cell-group>
<t-cell-group
v-if="pageResult.list.length"
class="record-list"
theme="card"
>
<t-swipe-cell
v-for="item in pageResult.list"
:key="item.id"
class="item"
> >
<template #leftIcon> <t-cell
<t-image class="cell"
v-if="getRecordPhotoURL(item)" :title="getRecordEventName(item)"
:src="getRecordPhotoURL(item)" :description="getRecordCustomerName(item)"
:alt="getRecordEventName(item)" :note="getRecordRegisteredAt(item)"
fit="cover" arrow
class="avatar" hover
/> @click="toDetail(item.id || '')"
<div v-else class="avatar fallback" v-text="getRecordCustomerInitial(item)" />
</template>
</t-cell>
<template v-if="canDeleteRecord" #right>
<t-button
class="delete"
theme="danger"
:loading="isDeleting && deletingId === item.id"
@click.stop="confirmRemoveRecord(item)"
> >
删除 <template #leftIcon>
</t-button> <t-image
</template> v-if="getRecordPhotoURL(item)"
</t-swipe-cell> :src="getRecordPhotoURL(item)"
</t-cell-group> :alt="getRecordEventName(item)"
<div v-else class="load-state" v-text="isLoading ? '正在加载登记事件记录' : '暂无登记事件记录'" /> fit="cover"
<div v-if="pageResult.list.length" class="load-state" v-text="loadStateText" /> class="avatar"
/>
<div v-else class="avatar fallback" v-text="getRecordCustomerInitial(item)" />
</template>
</t-cell>
<template v-if="canDeleteRecord" #right>
<t-button
class="delete"
theme="danger"
:loading="isDeleting && deletingId === item.id"
@click.stop="confirmRemoveRecord(item)"
>
删除
</t-button>
</template>
</t-swipe-cell>
</t-cell-group>
<div v-else class="load-state" v-text="isLoading ? '正在加载登记事件记录' : '暂无登记事件记录'" />
<div v-if="pageResult.list.length" class="load-state" v-text="loadStateText" />
</div>
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
<t-button <t-button
@@ -115,7 +116,7 @@
:mode="['date', 'minute']" :mode="['date', 'minute']"
title="开始时间" title="开始时间"
v-model="dateRange[0]" v-model="dateRange[0]"
@confirm="startVisible = false" @confirm="confirmStartTime"
/> />
</t-popup> </t-popup>
<t-popup v-model="endVisible" placement="bottom"> <t-popup v-model="endVisible" placement="bottom">
@@ -125,7 +126,7 @@
format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm"
title="结束时间" title="结束时间"
v-model="dateRange[1]" v-model="dateRange[1]"
@confirm="endVisible = false" @confirm="confirmEndTime"
/> />
</t-popup> </t-popup>
</template> </template>
@@ -177,7 +178,6 @@ let keywordTimer: number | undefined;
let initialized = false; let initialized = false;
const canCreateRecord = computed(() => userStore.hasPermissions(permissionCodes.eventRecord.create)); const canCreateRecord = computed(() => userStore.hasPermissions(permissionCodes.eventRecord.create));
const isCustomRange = computed(() => dateFilterType.value === "custom");
const dateFilterLabel = computed(() => dateOptions.find(item => item.value === dateFilterType.value)?.label || "今天"); const dateFilterLabel = computed(() => dateOptions.find(item => item.value === dateFilterType.value)?.label || "今天");
const actionOptions = computed(() => eventList.value.map(item => ({ const actionOptions = computed(() => eventList.value.map(item => ({
label: item.name || "未命名事件", label: item.name || "未命名事件",
@@ -193,7 +193,6 @@ const eventFilterLabel = computed(() => {
.map(item => item.name || "未命名事件") .map(item => item.name || "未命名事件")
.join("、"); .join("、");
}); });
const summaryBehaviorText = computed(() => `事件：${eventFilterLabel.value}`);
const selectedNumberEvent = computed(() => { const selectedNumberEvent = computed(() => {
if (actionFilter.value.length !== 1) { if (actionFilter.value.length !== 1) {
return undefined; return undefined;
@@ -202,14 +201,6 @@ const selectedNumberEvent = computed(() => {
return event?.valueType === "NUMBER" ? event : undefined; return event?.valueType === "NUMBER" ? event : undefined;
}); });
const canDeleteRecord = computed(() => userStore.hasPermissions(permissionCodes.eventRecord.delete)); const canDeleteRecord = computed(() => userStore.hasPermissions(permissionCodes.eventRecord.delete));
const summaryText = computed(() => {
if (!isCustomRange.value) {
const current = dateOptions.find(item => item.value === dateFilterType.value);
return `范围：${current?.label || "今天"}｜${dateRange.value[0] || "不限"}`;
}
return `范围：${dateRange.value[0] || "-"} ~ ${dateRange.value[1] || "-"}`;
});
watch(keyword, () => { watch(keyword, () => {
if (!initialized) { if (!initialized) {
@@ -265,7 +256,7 @@ const summaryNumberValueText = computed(() => {
if (!selectedNumberEvent.value || pageResult.numberValueTotal === undefined || pageResult.numberValueTotal === null) { if (!selectedNumberEvent.value || pageResult.numberValueTotal === undefined || pageResult.numberValueTotal === null) {
return ""; return "";
} }
return `数值合计：${formatEventNumberValue(selectedNumberEvent.value, pageResult.numberValueTotal)}`; return `${formatEventNumberValue(selectedNumberEvent.value, pageResult.numberValueTotal)}`;
}); });
const loadStateText = computed(() => { const loadStateText = computed(() => {
if (isLoading.value) { if (isLoading.value) {
@@ -345,6 +336,26 @@ async function selectDateFilter(type: DropdownValue): Promise<void> {
} }
} }
async function confirmStartTime(): Promise<void> {
startVisible.value = false;
await confirmCustomRange();
}
async function confirmEndTime(): Promise<void> {
endVisible.value = false;
await confirmCustomRange();
}
async function confirmCustomRange(): Promise<void> {
if (dateFilterType.value === "custom") {
return;
}
dateFilterType.value = "custom";
await replaceFilterQuery();
await reloadRecords();
}
async function exportExcel(): Promise<void> { async function exportExcel(): Promise<void> {
if (isExporting.value) { if (isExporting.value) {
return; return;
@@ -657,52 +668,69 @@ onUnmounted(() => {
} }
} }
.summary { .list-wrapper {
color: #52607a; gap: 1rem;
font-size: .8125rem; display: flex;
text-align: center; flex-direction: column;
}
.record-list { .summary {
overflow: hidden;
.item { :deep(.t-cell__title) {
flex: 0 0 4.5rem;
&:last-child {
:deep(.t-cell:after) {
display: none;
}
} }
.cell { :deep(.t-cell__note) {
padding: .5rem; flex: 1 1 0;
min-width: 0;
:deep(.t-cell__title) { overflow: hidden;
flex: 1 1 0; text-align: right;
min-width: 0; text-overflow: ellipsis;
} white-space: nowrap;
:deep(.t-cell__title-text) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
:deep(.t-cell__note) {
flex: 0 0 auto;
white-space: nowrap;
}
.avatar {
width: 3.5rem;
height: 3.5rem;
}
} }
}
.delete { .record-list {
height: 100%;
padding: 0 1rem; .item {
border-radius: 0;
&:last-child {
:deep(.t-cell:after) {
display: none;
}
}
.cell {
padding: .5rem;
:deep(.t-cell__title) {
flex: 1 1 0;
min-width: 0;
}
:deep(.t-cell__title-text) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
:deep(.t-cell__note) {
flex: 0 0 auto;
white-space: nowrap;
}
.avatar {
width: 3.5rem;
height: 3.5rem;
}
}
.delete {
height: 100%;
padding: 0 1rem;
border-radius: 0;
}
} }
} }
} }