update style
This commit is contained in:
Timi
+139
-111
@@ -26,74 +26,75 @@
|
||||
</t-dropdown-menu>
|
||||
</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
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="reloadRecords"
|
||||
@scrolltolower="loadRecords"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<div class="list-wrapper">
|
||||
<t-cell-group class="summary" theme="card">
|
||||
<t-cell
|
||||
class="cell"
|
||||
:title="getRecordEventName(item)"
|
||||
:description="getRecordCustomerName(item)"
|
||||
:note="getRecordRegisteredAt(item)"
|
||||
title="开始时间"
|
||||
:note="dateRange[0] || '-'"
|
||||
arrow
|
||||
hover
|
||||
@click="toDetail(item.id || '')"
|
||||
@click="startVisible = true"
|
||||
/>
|
||||
<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-image
|
||||
v-if="getRecordPhotoURL(item)"
|
||||
:src="getRecordPhotoURL(item)"
|
||||
:alt="getRecordEventName(item)"
|
||||
fit="cover"
|
||||
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-cell
|
||||
class="cell"
|
||||
:title="getRecordEventName(item)"
|
||||
:description="getRecordCustomerName(item)"
|
||||
:note="getRecordRegisteredAt(item)"
|
||||
arrow
|
||||
hover
|
||||
@click="toDetail(item.id || '')"
|
||||
>
|
||||
删除
|
||||
</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" />
|
||||
<template #leftIcon>
|
||||
<t-image
|
||||
v-if="getRecordPhotoURL(item)"
|
||||
:src="getRecordPhotoURL(item)"
|
||||
:alt="getRecordEventName(item)"
|
||||
fit="cover"
|
||||
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>
|
||||
</div>
|
||||
<t-button
|
||||
@@ -115,7 +116,7 @@
|
||||
:mode="['date', 'minute']"
|
||||
title="开始时间"
|
||||
v-model="dateRange[0]"
|
||||
@confirm="startVisible = false"
|
||||
@confirm="confirmStartTime"
|
||||
/>
|
||||
</t-popup>
|
||||
<t-popup v-model="endVisible" placement="bottom">
|
||||
@@ -125,7 +126,7 @@
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
title="结束时间"
|
||||
v-model="dateRange[1]"
|
||||
@confirm="endVisible = false"
|
||||
@confirm="confirmEndTime"
|
||||
/>
|
||||
</t-popup>
|
||||
</template>
|
||||
@@ -177,7 +178,6 @@ let keywordTimer: number | undefined;
|
||||
let initialized = false;
|
||||
|
||||
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 actionOptions = computed(() => eventList.value.map(item => ({
|
||||
label: item.name || "未命名事件",
|
||||
@@ -193,7 +193,6 @@ const eventFilterLabel = computed(() => {
|
||||
.map(item => item.name || "未命名事件")
|
||||
.join("、");
|
||||
});
|
||||
const summaryBehaviorText = computed(() => `事件：${eventFilterLabel.value}`);
|
||||
const selectedNumberEvent = computed(() => {
|
||||
if (actionFilter.value.length !== 1) {
|
||||
return undefined;
|
||||
@@ -202,14 +201,6 @@ const selectedNumberEvent = computed(() => {
|
||||
return event?.valueType === "NUMBER" ? event : undefined;
|
||||
});
|
||||
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, () => {
|
||||
if (!initialized) {
|
||||
@@ -265,7 +256,7 @@ const summaryNumberValueText = computed(() => {
|
||||
if (!selectedNumberEvent.value || pageResult.numberValueTotal === undefined || pageResult.numberValueTotal === null) {
|
||||
return "";
|
||||
}
|
||||
return `数值合计：${formatEventNumberValue(selectedNumberEvent.value, pageResult.numberValueTotal)}`;
|
||||
return `${formatEventNumberValue(selectedNumberEvent.value, pageResult.numberValueTotal)}`;
|
||||
});
|
||||
const loadStateText = computed(() => {
|
||||
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> {
|
||||
if (isExporting.value) {
|
||||
return;
|
||||
@@ -657,52 +668,69 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.summary {
|
||||
color: #52607a;
|
||||
font-size: .8125rem;
|
||||
text-align: center;
|
||||
}
|
||||
.list-wrapper {
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.record-list {
|
||||
.summary {
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
|
||||
&:last-child {
|
||||
|
||||
:deep(.t-cell:after) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.t-cell__title) {
|
||||
flex: 0 0 4.5rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
:deep(.t-cell__note) {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.delete {
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
border-radius: 0;
|
||||
.record-list {
|
||||
|
||||
.item {
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user