gxt_app/pages/order/index.uvue

<template>
	<uni-navbar-lite :showLeft=false title="工单"></uni-navbar-lite>
    <view class="list-page">
        <!-- 搜索栏 -->
        <view class="search-bar">
            <view class="search-box">
                <image class="search-icon" src="/static/images/workbench/list/1.png" mode="aspectFit"></image>
                <input class="search-input" type="text" placeholder="搜索工单编号、风机编号" v-model="keyword" @confirm="handleSearch" @blur="handleSearch" />
                <text v-if="keyword.length > 0" class="clear-icon" @click="clearSearch">✕</text>
            </view>
        </view>

		<view class="status-bar">
			<view class="status-box">
				<text class="status-txt" :class="{'stauts-sel': currentStatus === ''}" @click="switchStatus('')">全部</text>
				<text class="status-txt" :class="{'stauts-sel': currentStatus === 'assigned'}" @click="switchStatus('assigned')">待接单</text>
				<text class="status-txt" :class="{'stauts-sel': currentStatus === 'to_finish'}" @click="switchStatus('to_finish')">待结单</text>
				<text class="status-txt" :class="{'stauts-sel': currentStatus === 'to_approve'}" @click="switchStatus('to_approve')">待审批</text>
				<text class="status-txt" :class="{'stauts-sel': currentStatus === 'completed'}" @click="switchStatus('completed')">已完成</text>
			</view>
		</view>
        <!-- 列表内容 -->
        <common-list
            :dataList="dataList"
            :loading="loading"
            :refreshing="refreshing"
            :hasMore="hasMore"
            @refresh="handleRefresh"
            @loadMore="loadMore"
            @itemClick="handleItemClick"
        >
            <template #default="{ item, index }">
                <view class="list-item">
                    <view class="item-container">
                        <view class="item-header">
                            <!-- <image class="location-icon" src="/static/images/workbench/list/2.png" mode="aspectFit"></image>
                            <text class="item-title">{{ getOrderType(item) }}</text>
                            <text class="detail-link">类型 ›</text> -->
							<text class="item-title">{{ getWorkOrderProjectNo(item) }}-{{ getPcsDeviceName(item) }}{{ getOrderType(item) }}</text>
							<text class="info-value">{{ getWorkOrderStatus(item) }}</text>
                        </view>
						<!-- <view class="flex justify-between items-center"> -->
						<view class="info-card">
						<!-- <view class="info-item"> -->
							<view class="info-item">
								<text class="info-label">{{ getDisplayTime(item) }}</text>
								<button
									v-if="currentStatus === 'assigned'"
									class="info-value btn-primary"
									@click.stop="acceptOrder(item)">
									接单
								</button>
								<button
									v-else-if="currentStatus === 'to_approve'"
									class="info-value btn-primary"
									@click="approveOrder(item)">
									审批
								</button>
							</view>
							<!-- <view class="info-value">
								<button
									v-if="currentStatus === 'assigned'"
									class="btn-primary"
									@click="acceptOrder(item)">
									接单
								</button>
								<button
									v-else-if="currentStatus === 'to_approve'"
									class="btn-primary"
									@click="approveOrder(item)">
									审批
								</button>
							</view> -->
						</view>
						<!-- </view> -->
						<!-- </view> -->

                        <!-- <view class="item-info">
                            <view class="info-row">
                                <view class="info-item">
                                    <text class="info-label">工单状态</text>
                                    <text class="info-value">{{ getWorkOrderStatus(item) }}</text>
                                </view>
								<view class="info-item">
								    <text class="info-label">场站</text>
								    <text class="info-value">{{ getPcsStationName(item) }}</text>
								</view>
							</view>
                            <view class="info-row">
                                <view class="info-item">
                                    <text class="info-label">设备名</text>
                                    <text class="info-value">{{ getPcsDeviceName(item) }}</text>
                                </view>
                                <view class="info-item">
                                    <text class="info-label">派单时间</text>
                                    <text class="info-value">{{ getAssignTime(item) }}</text>
                                </view>
                            </view>
                        </view> -->
                    </view>
                </view>
            </template>
        </common-list>
		<custom-tabbar :current="1" />
    </view>
</template>

<script setup lang="uts">
import { ref, onBeforeUnmount, onMounted } from 'vue'
import type { acceptOrderInfo } from '../../types/order'
import type { SysDictData, DictDataResponse } from '../../types/dict'
import { getOrderList } from '../../api/order/list'
import { getDictDataByType } from '../../api/dict/index'

    // 列表数据
    const dataList = ref<acceptOrderInfo[]>([])
    let keyword = ref<string>("")
    const page = ref<number>(1)
    const pageSize: number = 10
    const hasMore = ref<boolean>(true)
    const loading = ref<boolean>(false)
    const refreshing = ref<boolean>(false)
    const total = ref<number>(0)
	let currentStatus = ref<string>('') // 添加状态管理
    const statusDictList = ref<SysDictData[]>([]) // 工单状态字典列表

	// 添加字典加载状态
	const dictLoaded = ref<boolean>(false)

	// 获取工单状态字典列表
	const loadStatusDictList = async (): Promise<void> => {
	    try {
	        const result = await getDictDataByType('gxt_work_order_status')
	        const resultObj = result as UTSJSONObject

	        if (resultObj['code'] == 200) {
	            const data = resultObj['data'] as any[]
	            const dictData: SysDictData[] = []

	            if (data.length > 0) {
	                for (let i = 0; i < data.length; i++) {
	                    const item = data[i] as UTSJSONObject
	                    // 只提取需要的字段
	                    const dictItem: SysDictData = {
							dictValue: item['dictValue'] as string | null,
							dictLabel: item['dictLabel'] as string | null,
							dictCode: null,
							dictSort: null,
							dictType: null,
							cssClass: null,
							listClass: null,
							isDefault: null,
							status: null,
							default: null,
							createTime: null,
							remark: null
						}
	                    dictData.push(dictItem)
	                }
	            }

	            statusDictList.value = dictData
	            dictLoaded.value = true
	        }
	    } catch (e: any) {
	        console.error('获取工单状态字典失败:', e.message)
	        dictLoaded.value = true
	    }
	}

    // 加载列表数据
    const loadData = async (isRefresh: boolean | null): Promise<void> => {
        if (loading.value) {
            // 如果正在加载，直接重置刷新状态
            refreshing.value = false
            return
        }

        try {
            loading.value = true

            // 处理默认值
            const shouldRefresh = isRefresh != null ? isRefresh : false

            if (shouldRefresh) {
                page.value = 1
            }
			console.log("searchKeyword===" + keyword.value)
            // 调用 API，传递关键字参数
            const searchKeyword = keyword.value.length > 0 ? keyword.value : null

            const result = await getOrderList(page.value, pageSize, searchKeyword, currentStatus.value)

            // 提取响应数据
            const resultObj = result as UTSJSONObject
            const code = resultObj['code'] as number
            const responseData = resultObj['rows'] as any[]
            const responseTotal = resultObj['total'] as number

            if (code == 200) {
                // 将 any[] 转换为 acceptOrderInfo[]
                const newData: acceptOrderInfo[] = []
                for (let i = 0; i < responseData.length; i++) {
                    const item = responseData[i] as UTSJSONObject
                    const orderItem: acceptOrderInfo = {
						orderType: item['orderType'] as Number,
                        id: item['id'] as Number,
						teamLeaderId: item['teamLeaderId'] != null ? (item['teamLeaderId'] as Number) : 0,
						acceptUserId: item['acceptUserId'] != null ? (item['acceptUserId'] as Number) : 0,
                        teamLeaderName: item['teamLeaderName'] as string | null,
                        acceptUserName: item['acceptUserName'] as string | null,
                        acceptTime: item['acceptTime'] as string | null,
                        assignTime: item['assignTime'] as string | null,
                        assignUserName: item['assignUserName'] as string | null,
                        status: (item['status']==null)?0:item['status'] as Number,
                        workOrderProjectNo: item['workOrderProjectNo'] as string | null,
                        workOrderStatus: item['workOrderStatus'] as string | null,
                        gxtCenterId: item['gxtCenterId'] as Number | 0,
                        gxtCenter: item['gxtCenter'] as string | null,
                        pcsStationId: item['pcsStationId'] as Number | 0,
                        pcsStationName: item['pcsStationName'] as string | null,
                        pcsDeviceId: item['pcsDeviceId'] as Number | 0,
                        pcsDeviceName: item['pcsDeviceName'] as string | null,
                        brand: item['brand'] as string | null,
                        model: item['model'] as string | null,
                        createTime: item['createTime'] as string | null
                    }
                    newData.push(orderItem)
                }

                // 不再在前端过滤，直接使用API返回的数据
                if (shouldRefresh) {
                    dataList.value = newData
                } else {
                    dataList.value = [...dataList.value, ...newData]
                }

                total.value = responseTotal
                hasMore.value = dataList.value.length < responseTotal
            } else {
                const msg = resultObj['msg'] as string | null
                uni.showToast({
                    title: msg ?? '加载失败',
                    icon: 'none'
                })
            }

        } catch (e: any) {
            uni.showToast({
                title: e.message ?? '加载失败',
                icon: 'none'
            })
        } finally {
            loading.value = false
            // #ifdef WEB
            // Web 平台立即重置
            refreshing.value = false
            // #endif
            // #ifndef WEB
            // App 平台延迟重置刷新状态，确保 UI 更新
            setTimeout(() => {
                refreshing.value = false
            }, 100)
            // #endif
        }

        // #ifdef WEB
        // Web 平台额外确保重置
        refreshing.value = false
        // #endif
    }



    // 辅助函数：从 any 类型提取属性
    const getOrderType = (item: any | null): string => {
        if (item == null) return ''
        const orderInfoItem = item as acceptOrderInfo
        return orderInfoItem.orderType == 1?"维修工单":"维保工单";
    }

    const getWorkOrderProjectNo = (item: any | null): string | null => {
        if (item == null) return ''
        const orderInfoItem = item as acceptOrderInfo
        return orderInfoItem.workOrderProjectNo
    }

    const getPcsStationName = (item: any | null): string | null=> {
        if (item == null) return ''
        const orderInfoItem = item as acceptOrderInfo
        return orderInfoItem.pcsStationName
    }

    const getPcsDeviceName = (item: any | null): string | null=> {
        if (item == null) return ''
        const orderInfoItem = item as acceptOrderInfo
        return orderInfoItem.pcsDeviceName
    }

    const getAssignTime = (item: any | null): string|null => {
        if (item == null) return null
        const orderInfoItem = item as acceptOrderInfo
        return orderInfoItem.assignTime
    }

	const getAcceptTime = (item: any | null): string|null => {
	    if (item == null) return null
	    const orderInfoItem = item as acceptOrderInfo
	    return orderInfoItem.acceptTime
	}

	const getCreateTime = (item: any | null): string|null => {
	    if (item == null) return null
	    const orderInfoItem = item as acceptOrderInfo
	    return orderInfoItem.createTime
	}


	// 根据状态显示不同的时间
	const getDisplayTime = (item: any | null): string|null => {
		if (item == null) return null
		const orderInfoItem = item as acceptOrderInfo

		// 如果是"待接单"状态，显示派单时间
		if (currentStatus.value === 'assigned') {
			return getAssignTime(item)
		} else if(currentStatus.value === 'to_finish') {
			return getAcceptTime(item)
		}

		// 默认显示创建时间
		return getCreateTime(item)
	}



	const getWorkOrderStatus = (item: any | null): string | null => {
	    if (item == null) return ''
	    const orderInfoItem = item as acceptOrderInfo
	    const rawStatus = orderInfoItem.workOrderStatus

	    if (rawStatus==null) return ''

		// 如果字典尚未加载，返回原始值
		    if (!dictLoaded.value) {
		        return rawStatus
		    }

	    // 查找字典中对应的标签
	    const dictItem = statusDictList.value.find(dict => dict.dictValue == rawStatus)
	    return dictItem!=null ? dictItem.dictLabel : rawStatus
	}

    // 切换状态
    const switchStatus = (status: string): void => {
        currentStatus.value = status
        page.value = 1
        loadData(true)
    }

    // 下拉刷新
    const handleRefresh = async (): Promise<void> => {
        refreshing.value = true
        await loadData(true as boolean | null)

    }

    // 加载更多
    const loadMore = (): void => {
        if (!hasMore.value || loading.value) {
            return
        }
        page.value++
        loadData(false as boolean | null)
    }

    // 搜索
    const handleSearch = (): void => {
        page.value = 1
		console.log("======搜索=====" + keyword.value)
        loadData(true as boolean | null)
    }

	const handleSearchOnBlur = (): void => {
		handleSearch()
	}


    // 点击列表项
    const handleItemClick = (item: any | null, index: number): void => {
        if (item == null) return
        const orderItem = item as acceptOrderInfo
		if(currentStatus.value === '' || currentStatus.value === 'to_finish' || currentStatus.value === 'completed') {
			// 传递orderType参数以便详情页决定调用哪个API
			uni.navigateTo({
			    url: `/pages/order/detail/index?id=${orderItem.id}&orderType=${orderItem.orderType}`
			})
		// } else if(currentStatus.value === 'assigned') {
		// 	// 跳转到接单页面
		// 	uni.navigateTo({
		// 	    url: `/pages/order/detail/acceptIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
		// 	})
		}

    }

    // 接单操作
    const acceptOrder = (item: any | null): void => {
        if (item == null) return
        const orderItem = item as acceptOrderInfo
        console.log('接单操作:', orderItem.id)
        // 跳转到接单页面
        uni.navigateTo({
            url: `/pages/order/detail/acceptIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
        })
    }

    // 审批操作
    const approveOrder = (item: any | null): void => {
        if (item == null) return
        const orderItem = item as acceptOrderInfo
        console.log('审批操作:', orderItem.id)
        // 这里可以添加实际的审批逻辑
        uni.showToast({
            title: '审批成功',
            icon: 'success'
        })
    }

    // 查看工单详情
    const showWorkOrderDetail = (item: any | null): void => {
        if (item == null) return
        const orderItem = item as acceptOrderInfo
        uni.navigateTo({
            url: `/pages/workbench/detail/index?id=${orderItem.id}`
        })
    }

    // 清空搜索
    const clearSearch = (): void => {
        keyword.value = ""
        page.value = 1
        loadData(true)
    }

	// 初始化
	onMounted(() => {
	    loadStatusDictList()
	    loadData(true as boolean | null)

		// 监听接单成功的事件，刷新列表
		uni.$on('refreshOrderList', () => {
			page.value = 1
			loadData(true)
		})
	})

    // 组件卸载前清理事件监听
    onBeforeUnmount(() => {
        refreshing.value = false
        loading.value = false

		// 移除事件监听
		uni.$off('refreshOrderList',{})
    })


</script>

<style lang="scss">
    .list-page {
        flex: 1;
        background-color: #e8f0f9;
    }

    .search-bar {
        padding: 20rpx 30rpx;
        background-color: #d7eafe;
    }

    .search-box {
        flex-direction: row;
        align-items: center;
        height: 72rpx;
        padding: 0 24rpx;
        background-color: #f5f5f5;
        border-radius: 36rpx;

        .search-icon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 12rpx;
        }

        .search-input {
            flex: 1;
            font-size: 28rpx;
            color: #333333;
        }

        .clear-icon {
            margin-left: 12rpx;
            font-size: 28rpx;
            color: #999999;
        }
    }

	.status-bar{
		padding-bottom: 10px;
		padding-left:30rpx;
		background-color: #d7eafe;
	}

	.status-box {
		flex-direction: row;
		align-items: center;
		height: 72rpx;
		flex: 1;

		.status-txt{
			padding: 8px 12px;
			text-align: center;
			margin-right: 12rpx;
			border-radius: 36rpx;
			background-color: #fff;
			font-size: 28rpx;
			// cursor: pointer;
		}

		.stauts-sel{
			background-color: #007AFF;
			color: #fff;
		}
	}


    .list-item {
        margin: 24rpx 30rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
    }

    .item-container {
        padding: 30rpx;
    }

    .item-header {
        flex-direction: row;
        align-items: center;
        margin-bottom: 16rpx;

        .location-icon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 8rpx;
        }

        .item-title {
            flex: 1;
            font-size: 32rpx;
            color: #333333;
            font-weight: bold;
        }

        .detail-link {
            font-size: 28rpx;
            color: #999999;
        }
    }

    .item-address {
        font-size: 26rpx;
        color: #999999;
        margin-bottom: 20rpx;
        line-height: 40rpx;
    }

    .item-info {
        padding: 20rpx;
        background-color: #f8f9fa;
        border-radius: 8rpx;

        .info-row {
            flex-direction: row;
            margin-bottom: 16rpx;

            &:last-child {
                margin-bottom: 0;
            }

            .info-item {
                flex: 1;
                flex-direction: row;
                align-items: center;

                .info-label {
                    font-size: 26rpx;
                    color: #666666;
                    margin-right: 8rpx;
                    white-space: nowrap;
                }

                .info-value {
                    flex: 1;
                    font-size: 26rpx;
                    color: #333333;
                }
            }
        }
    }
	.btn-primary {
		font-size: 14px;
	    background-color: #165DFF;
	    color: #ffffff;
	    // font-weight: 100;
	    // padding-top: 0.1rem;
	    // padding-bottom: 0.1rem;
	    // padding-left: 1rem;
	    // padding-right: 1rem;
	}
</style>