add fiilter for travel location list
This commit is contained in:
@ -42,6 +42,27 @@
|
|||||||
|
|
||||||
.header {
|
.header {
|
||||||
padding: 16rpx 32rpx;
|
padding: 16rpx 32rpx;
|
||||||
|
|
||||||
|
.left-actions {
|
||||||
|
gap: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.type-picker {
|
||||||
|
|
||||||
|
.picker-button {
|
||||||
|
gap: 8rpx;
|
||||||
|
color: var(--theme-wx);
|
||||||
|
border: 1px solid var(--theme-wx);
|
||||||
|
display: flex;
|
||||||
|
padding: 14rpx 24rpx 14rpx 32rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
background: var(--theme-bg-card);
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.location {
|
.location {
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
import Time from "../../../utils/Time";
|
import Time from "../../../utils/Time";
|
||||||
import { TravelApi } from "../../../api/TravelApi";
|
import { TravelApi } from "../../../api/TravelApi";
|
||||||
import { TravelLocationApi } from "../../../api/TravelLocationApi";
|
import { TravelLocationApi } from "../../../api/TravelLocationApi";
|
||||||
import { Travel, TravelStatusLabel, TravelStatusIcon, TransportationTypeLabel, TravelLocation, TravelLocationTypeLabel, TravelLocationTypeIcon, TransportationTypeIcon } from "../../../types/Travel";
|
import { Travel, TravelStatusLabel, TravelStatusIcon, TransportationTypeLabel, TravelLocation, TravelLocationTypeLabel, TravelLocationTypeIcon, TransportationTypeIcon, TravelLocationType } from "../../../types/Travel";
|
||||||
|
|
||||||
interface TravelDetailData {
|
interface TravelDetailData {
|
||||||
/** 出行详情 */
|
/** 出行详情 */
|
||||||
@ -28,6 +28,10 @@ interface TravelDetailData {
|
|||||||
locationTypeLabels: typeof TravelLocationTypeLabel;
|
locationTypeLabels: typeof TravelLocationTypeLabel;
|
||||||
/** 地点类型图标映射 */
|
/** 地点类型图标映射 */
|
||||||
locationTypeIcons: typeof TravelLocationTypeIcon;
|
locationTypeIcons: typeof TravelLocationTypeIcon;
|
||||||
|
/** 地点类型选项 */
|
||||||
|
locationTypes: string[];
|
||||||
|
/** 选中的地点类型索引 */
|
||||||
|
selectedLocationTypeIndex: number;
|
||||||
/** 删除对话框可见性 */
|
/** 删除对话框可见性 */
|
||||||
deleteDialogVisible: boolean;
|
deleteDialogVisible: boolean;
|
||||||
/** 删除确认文本 */
|
/** 删除确认文本 */
|
||||||
@ -47,6 +51,8 @@ Page({
|
|||||||
transportIcons: TransportationTypeIcon,
|
transportIcons: TransportationTypeIcon,
|
||||||
locationTypeLabels: TravelLocationTypeLabel,
|
locationTypeLabels: TravelLocationTypeLabel,
|
||||||
locationTypeIcons: TravelLocationTypeIcon,
|
locationTypeIcons: TravelLocationTypeIcon,
|
||||||
|
locationTypes: ["全部", ...Object.values(TravelLocationTypeLabel)],
|
||||||
|
selectedLocationTypeIndex: 0,
|
||||||
deleteDialogVisible: false,
|
deleteDialogVisible: false,
|
||||||
deleteConfirmText: ""
|
deleteConfirmText: ""
|
||||||
},
|
},
|
||||||
@ -109,12 +115,29 @@ Page({
|
|||||||
this.setData({ isLoadingLocations: true });
|
this.setData({ isLoadingLocations: true });
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
const { selectedLocationTypeIndex, locationTypes } = this.data;
|
||||||
|
|
||||||
|
// 构建查询条件
|
||||||
|
const equalsExample: { [key: string]: number | string } = {
|
||||||
|
travelId: Number(travelId)
|
||||||
|
};
|
||||||
|
|
||||||
|
// 添加类型过滤(索引 0 表示"全部")
|
||||||
|
if (0 < selectedLocationTypeIndex) {
|
||||||
|
const selectedTypeLabel = locationTypes[selectedLocationTypeIndex];
|
||||||
|
const selectedType = Object.keys(TravelLocationTypeLabel).find(
|
||||||
|
key => TravelLocationTypeLabel[key as TravelLocationType] === selectedTypeLabel
|
||||||
|
) as TravelLocationType | undefined;
|
||||||
|
|
||||||
|
if (selectedType) {
|
||||||
|
equalsExample.type = selectedType;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const result = await TravelLocationApi.getList({
|
const result = await TravelLocationApi.getList({
|
||||||
index: 0,
|
index: 0,
|
||||||
size: 100,
|
size: 999,
|
||||||
equalsExample: {
|
equalsExample
|
||||||
travelId: Number(travelId)
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
this.setData({ locations: result.list });
|
this.setData({ locations: result.list });
|
||||||
@ -125,6 +148,14 @@ Page({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/** 地点类型改变 */
|
||||||
|
onLocationTypeChange(e: WechatMiniprogram.PickerChange) {
|
||||||
|
const index = Number(e.detail.value);
|
||||||
|
this.setData({ selectedLocationTypeIndex: index });
|
||||||
|
// 重新从接口获取过滤后的数据
|
||||||
|
this.fetchLocations(this.data.travelId);
|
||||||
|
},
|
||||||
|
|
||||||
/** 编辑出行 */
|
/** 编辑出行 */
|
||||||
toEdit() {
|
toEdit() {
|
||||||
const { travel } = this.data;
|
const { travel } = this.data;
|
||||||
|
|||||||
@ -52,7 +52,15 @@
|
|||||||
<t-cell-group class="section locations">
|
<t-cell-group class="section locations">
|
||||||
<view slot="title" class="title">地点列表</view>
|
<view slot="title" class="title">地点列表</view>
|
||||||
<t-cell class="header">
|
<t-cell class="header">
|
||||||
<t-button slot="left-icon" theme="primary" icon="map" size="small" bind:tap="toMap">地图浏览</t-button>
|
<view slot="left-icon" class="left-actions">
|
||||||
|
<t-button theme="primary" icon="map" size="small" bind:tap="toMap">地图浏览</t-button>
|
||||||
|
<picker class="type-picker" mode="selector" range="{{locationTypes}}" value="{{selectedLocationTypeIndex}}" bind:change="onLocationTypeChange">
|
||||||
|
<view class="picker-button">
|
||||||
|
<text>{{locationTypes[selectedLocationTypeIndex]}}</text>
|
||||||
|
<t-icon class="icon" name="chevron-down" size="16px" />
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
<t-icon slot="right-icon" name="add" size="20px" color="var(--theme-wx)" bind:tap="toAddLocation" />
|
<t-icon slot="right-icon" name="add" size="20px" color="var(--theme-wx)" bind:tap="toAddLocation" />
|
||||||
</t-cell>
|
</t-cell>
|
||||||
<t-cell wx:if="{{isLoadingLocations}}" class="loading">
|
<t-cell wx:if="{{isLoadingLocations}}" class="loading">
|
||||||
|
|||||||
Reference in New Issue
Block a user