gxt_app/pages/order/pendingOrder.uvue

<template>
	<uni-navbar-lite :showLeft=true 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>

        <!-- 列表内容 -->
        <common-list
            :dataList="dataList"
            :loading="loading"
            :refreshing="refreshing"
            :hasMore="hasMore"
            @refresh="handleRefresh"
            @loadMore="loadMore"
            @itemClick="handleView"
        >
            <template #default="{ item, index }">
                <view class="list-item">
                    <view class="item-container">
						<view class="item-header">
							<text class="item-title">{{ getWorkOrderProjectNo(item) }}-{{ (item as acceptOrderInfoExtend).pcsStationName }}{{ getPcsDeviceName(item) }}{{ getOrderType(item) }}</text>
							<text class="status-tag" :class="getStatusClass(item)">{{ getWorkOrderStatus(item) }}</text>
						</view>
						<view class="info-row">
							<view class="info-label">
								<text class="text-gray">{{ getDisplayTime(item) }}</text>
							</view>
						</view>
						<view class="btn-group">
							<view
								v-if="getOrderStatus(item) == 'assigned' && canHandleOrder(item,'accept')"
								class="btn-primary info-value"
								@click.stop="handleItemClick(item,'')"
								>
								<text class="btn-text">接单</text>
							</view>
							<view
								v-if="(getOrderStatus(item) == 'assigned' || getOrderStatus(item) == 'to_finish') 
								&& canHandleOrder(item,'shutdown') && (item as acceptOrderInfoExtend).pauseTime == null"
								class="btn-primary info-value"
								@click.stop="handleItemClick(item,'shutdown')"
								>
								<text class="btn-text">停机</text>
							</view>
							<view
								v-if="getOrderStatus(item) == 'to_approve' && canHandleOrder(item,'')"
								class="btn-primary info-value"
								@click.stop="handleItemClick(item,'')"
								>
								<text class="btn-text">审批</text>
							</view>
							<view
								v-if="getOrderStatus(item) == 'suspended' && canHandleOrder(item,'')"
								class="btn-primary info-value"
								@click.stop="handleItemClick(item,'')"
								>
								<text class="btn-text">恢复</text>
							</view>
							<view
								v-if="getOrderStatus(item) == 'return' && canHandleOrder(item,'acceptReturn')"
								class="btn-primary info-value"
								@click.stop="handleItemClick(item,'acceptReturn')"
								>
								<text class="btn-text">退回</text>
							</view>
							<view
								v-if="getOrderStatus(item) == 'assigned' && canHandleOrder(item,'acceptReturn')"
								class="btn-primary info-value"
								@click.stop="handleItemClick(item,'acceptReturn')"
								>
								<text class="btn-text">退回</text>
							</view>
							<!-- <view
								v-if="getOrderStatus(item) == 'to_finish' && canHandleOrder(item, 'return')"
								class="btn-primary info-value"
								@click.stop="handleItemClick(item, 'return')"
								>
								<text class="btn-text">退回</text>
							</view> -->
							<view
								v-if="getOrderStatus(item) == 'to_finish' && canHandleOrder(item, 'suspend')"
								class="btn-primary info-value"
								@click.stop="handleItemClick(item, 'suspend')"
								>
								<text class="btn-text">挂起</text>
							</view>
							<view
								v-if="getOrderStatus(item) == 'to_finish' && canHandleOrder(item, 'finalize')"
								class="btn-primary info-value"
								@click.stop="handleItemClick(item, 'finalize')"
								>
								<text class="btn-text">复启</text>
							</view>
						</view>
                    </view>
                </view>
            </template>
        </common-list>
    </view>
</template>

<script setup lang="uts">
import { ref, onBeforeUnmount, onMounted } from 'vue'
import type { SysDictData } from '../../types/dict'
import { pendingList } from '../../api/order/list'
import { getDictDataByType } from '../../api/dict/index'
import {checkPermi, getUserInfo} from '../../utils/storage'

type acceptOrderInfoExtend = {
  orderType: Number
  id: Number
  teamLeaderId: Number
  acceptUserId: Number
  teamLeaderName: string | null
  acceptUserName: string | null
  acceptTime: string | null
  assignTime: string | null
  assignUserName: string | null
  status: Number
  workOrderProjectNo: string | null
  workOrderStatus: string | null
  gxtCenterId: Number
  gxtCenter: string | null
  pcsStationId: Number
  pcsStationName: string | null
  pcsDeviceId: Number
  pcsDeviceName: string | null
  brand: string | null
  model: string | null
  createTime: string | null
  suspendReason: string | null
  rejectionReason: string | null
  updateTime: string | null
  workEndTime: string | null
  orderEntryType: string | null
  pauseTime: string | null
}

	const userId = ref<string>("")
	const roles = ref<string>('')

    // 列表数据
    const dataList = ref<acceptOrderInfoExtend[]>([])
    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)
    const statusDictList = ref<SysDictData[]>([]) // 工单状态字典列表

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

	// 添加防重复请求的标志位
	const isSearching = ref<boolean>(false)
	// 添加防重复刷新的标志
	const isRefreshing = ref<boolean>(false)
	// 添加刷新时间戳，用于防抖
	const lastRefreshTime = ref<number>(0)

	const getOrderStatus = (item: any | null): string => {
		if (item == null) return ''
		const orderItem = item as acceptOrderInfoExtend
		return orderItem.workOrderStatus ?? ''
	}

	// 方法：判断当前工单是否显示操作按钮（基于 orderType）
	const canHandleOrder = (item: any | null, buttonType: string | ''): boolean => {
	  if (item == null) return false
	  let permit: string[] = []
	  const orderItem = item as acceptOrderInfoExtend
	  if(orderItem.workOrderStatus == 'assigned') {
			if(buttonType != '' && buttonType == "acceptReturn" && orderItem.orderType == 1) {
				// 接单退回
				permit = ['gxt:repairOrder:acceptReturn']
			} else if(buttonType != '' && buttonType == "accept") {
				// 接单
				permit = orderItem.orderType == 2 ? ['gxt:maintenance:order:accept'] : ['gxt:repairOrder:accept']
			}  else if(buttonType != '' && buttonType == "shutdown" && orderItem.orderType == 2) {
				permit = ['gxt:maintenance:order:shutdown']
			} 
	  } else if(orderItem.workOrderStatus == 'to_finish') {
	  		if(buttonType != '' && buttonType == "suspend" && (orderItem.teamLeaderId == parseInt(userId.value) || roles.value.includes("管理员"))) {
	  			// 挂起
	  			permit = orderItem.orderType == 2 ? ['gxt:maintenance:order:suspend'] : ['gxt:repairOrder:suspend']
	  		} else if(buttonType != '' && buttonType == "return" && orderItem.orderType == 1 && (orderItem.teamLeaderId == parseInt(userId.value) || roles.value.includes("管理员"))) {
	  			// 退回
	  			permit = orderItem.orderType == 2 ? ['gxt:maintenance:order:return'] : ['gxt:repairOrder:return']
	  		} else if(buttonType != '' && buttonType == "finalize" && orderItem.orderType == 1 && (orderItem.teamLeaderId == parseInt(userId.value) || roles.value.includes("管理员"))) {
	  			// 复启
	  			permit = orderItem.orderType == 2 ? ['gxt:maintenance:order:finalize'] : ['gxt:repairOrder:finalize']
	  		} else if(buttonType != '' && buttonType == "shutdown" && orderItem.orderType == 2) {
			    permit = ['gxt:maintenance:order:shutdown']
			}
	  } else if(orderItem.workOrderStatus == 'to_approve') {
	  	// 审批
	  	permit = orderItem.orderType == 2 ? ['gxt:maintenance:order:approve'] : ['gxt:repairOrder:approve']
	  } else if(orderItem.workOrderStatus == 'suspended' && (orderItem.teamLeaderId == parseInt(userId.value) || roles.value.includes("管理员"))) {
	  	// 恢复
	  	permit = orderItem.orderType == 2 ? ['gxt:maintenance:order:resume'] : ['gxt:repairOrder:resume']
	  } else if(orderItem.workOrderStatus == 'return') {
	  	// 接单退回
	  	permit = ['gxt:repairOrder:acceptReturn']
	  }
	   else {
	  		  return false
	  }
	  // const orderType = (item as acceptOrderInfoExtend).orderType
	  return checkPermi(permit)
	}

	// 获取工单状态字典列表
	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, disablePullDown: boolean | null): Promise<void> => {
        // 防止重复请求的核心机制
        if (loading.value) {
            // 确保刷新状态最终被重置，防止卡死
            if (isRefresh != true) {
                refreshing.value = false;
            }
            return
        }

        const shouldRefresh = isRefresh != null ? isRefresh : false
        const disablePull = disablePullDown != null ? disablePullDown : false

        loading.value = true
        let refreshTimeout: number | null = null;

        if (shouldRefresh && !disablePull) {
            page.value = 1
            refreshing.value = true

            // 添加超时机制，确保刷新动画不会一直显示
            refreshTimeout = setTimeout(() => {
                if (refreshing.value) {
                    refreshing.value = false;
                    isRefreshing.value = false;
                    console.log("刷新超时，强制结束刷新状态");
                    uni.showToast({
                        title: '刷新超时',
                        icon: 'none'
                    });
                }
            }, 10000); // 10秒超时
        } else if (shouldRefresh && disablePull) {
            // 状态切换时，重置页码但不触发动画
            page.value = 1
            // 即使禁用下拉刷新，也要确保刷新状态最终被重置
            refreshing.value = false
        } else {
            // 对于加载更多操作，不需要显示下拉刷新状态
            refreshing.value = false;
        }

        try {
            // 处理默认值
            const searchKeyword = keyword.value.length > 0 ? keyword.value : null

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

            // 提取响应数据
            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[] 转换为 acceptOrderInfoExtend[]
                const newData: acceptOrderInfoExtend[] = []
                for (let i = 0; i < responseData.length; i++) {
                    const item = responseData[i] as UTSJSONObject
                    const orderItem: acceptOrderInfoExtend = {
						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,
						suspendReason: item['suspendReason'] as string | null,
						rejectionReason: item['rejectionReason'] as string | null,
						updateTime: item['updateTime'] as string | null,  // 新增字段
						workEndTime: item['workEndTime'] as string | null,  // 新增字段
						pauseTime: item['pauseTime'] as string | null
                    }
                    newData.push(orderItem)
                }

                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
            // 清除超时定时器
            if (refreshTimeout != null) {
                clearTimeout(refreshTimeout);
            }
            // 确保刷新状态能结束
            if (shouldRefresh) {
                refreshing.value = false;
                // 使用setTimeout确保状态彻底重置
                setTimeout(() => {
                    isRefreshing.value = false;
                    refreshing.value = false; // 再次确保刷新状态被重置
                }, 50);
            }
        }
    }

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

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

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

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

		// 如果是"待接单"状态，显示派单时间
		if (orderInfoItem.workOrderStatus == 'assigned') {
			return '下发时间：' + orderInfoItem.assignTime
		} else if(orderInfoItem.workOrderStatus == 'to_finish') {
			if(orderInfoItem.workEndTime != null) {
				return '结束时间：' + orderInfoItem.workEndTime
			}
			return '接单时间：' + orderInfoItem.acceptTime
		} else if(orderInfoItem.workOrderStatus == 'to_approve') {
			return '申请挂起时间：' + orderInfoItem.updateTime
		} else if(orderInfoItem.workOrderStatus == 'suspended') {
			return '审批通过时间：' + orderInfoItem.updateTime
		} else if(orderInfoItem.workOrderStatus == 'return' || orderInfoItem.workOrderStatus == 'accept_return') {
			return '退回时间：' + orderInfoItem.updateTime
		} else if(orderInfoItem.workOrderStatus == 'completed') {
			return '结单时间：' + orderInfoItem.updateTime
		}

		// 默认显示创建时间
		return '创建时间：' + orderInfoItem.createTime
	}


	const getWorkOrderStatus = (item: any | null): string | null => {
	    if (item == null) return ''
	    const orderInfoItem = item as acceptOrderInfoExtend
	    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 getStatusClass = (item: any | null): string => {
		if (item == null) return ''
		const orderInfoItem = item as acceptOrderInfoExtend
		const rawStatus = orderInfoItem.workOrderStatus
		if (rawStatus==null) return ''
		// const status = rawStatus
		// 返回对应的状态类名
		return `status-${rawStatus}`
	}

    // 下拉刷新
    const handleRefresh = async (): Promise<void> => {
        console.log("handleRefresh被触发")
        console.log("loading.value===",loading.value)
        console.log("isRefreshing.value===",isRefreshing.value)

        // 防抖处理，避免频繁触发
        const now = Date.now();
        if (now - lastRefreshTime.value < 1000) {
            console.log("刷新操作过于频繁，忽略本次触发");
            refreshing.value = false;
            return;
        }
        lastRefreshTime.value = now;

        // 添加防重复调用检查
        if (loading.value || isRefreshing.value) {
            // 如果已经在加载或正在刷新，直接重置刷新状态
            refreshing.value = false;
            return;
        }

        console.log("loading.value1===",loading.value)
        console.log("isRefreshing.value1===",isRefreshing.value)
        // 设置刷新标志
        isRefreshing.value = true;
        refreshing.value = true; // 确保刷新状态被设置

        // 添加超时机制，确保刷新动画不会一直显示
        const refreshTimeout = setTimeout(() => {
            if (refreshing.value || isRefreshing.value) {
                refreshing.value = false;
                isRefreshing.value = false;
                console.log("刷新操作超时，重置刷新状态");
                uni.showToast({
                    title: '刷新超时',
                    icon: 'none'
                });
            }
        }, 10000);

        try {
            await loadData(true, false); // 使用默认的下拉刷新行为
        } catch (error) {
            console.error('刷新失败:', error);
            refreshing.value = false;
            isRefreshing.value = false;
        } finally {
            clearTimeout(refreshTimeout);
            // 确保刷新状态最终被重置
            refreshing.value = false;
            isRefreshing.value = false;
        }

        // 额外的保险机制，确保在一定时间后重置刷新标志
        setTimeout(() => {
            refreshing.value = false;
            isRefreshing.value = false;
        }, 200) // 延迟重置，确保状态完全更新
    }

    // 加载更多
    const loadMore = (): void => {
        if (!hasMore.value || loading.value) {
            return
        }
        page.value++
        loadData(false, false) // 加载更多时不涉及下拉刷新动画
    }

    // 搜索
    const handleSearch = (): void => {
        // 添加防重复调用检查
        if (loading.value) {
            return;
        }

        // 添加防重复请求检查
        if (isSearching.value) {
            return
        }

        isSearching.value = true
        page.value = 1
        loadData(true, true) // 状态切换时禁用下拉刷新动画

        // 延迟重置标志位，确保请求发送后才允许下一次搜索
        setTimeout(() => {
            isSearching.value = false
        }, 100)
    }

	// 点击列表查看
	const handleView = (item: any | null): void => {
	    if (item == null) return
	    const orderItem = item as acceptOrderInfoExtend
		uni.navigateTo({
			url: `/pages/order/detail/index?id=${orderItem.id}&orderType=${orderItem.orderType}`
		})

	}

    // 点击列表项
    const handleItemClick = (item: any | null, buttonType: string | ''): void => {
        if (item == null) return
        const orderItem = item as acceptOrderInfoExtend
		if(orderItem.workOrderStatus == 'assigned') {
			if(buttonType != '' && buttonType == "acceptReturn") {
				// 跳转到退回页面
				uni.navigateTo({
					url: `/pages/order/detail/returnIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
				})
			} else if(buttonType != '' && buttonType == "shutdown") {
				// 跳转到停机页面
				uni.navigateTo({
					url: `/pages/order/detail/shutdownIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
				})
			} else {
				// 跳转到接单页面
				uni.navigateTo({
				    url: `/pages/order/detail/acceptIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
				})
			}
		} else if(orderItem.workOrderStatus == 'to_finish') {
			if(buttonType != '' && buttonType == "suspend") {
				// 跳转到待结单页面
				uni.navigateTo({
					url: `/pages/order/detail/suspendIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
				})
			} else if(buttonType != '' && buttonType == "return") {
				// 跳转到退回页面
				uni.navigateTo({
					url: `/pages/order/detail/returnIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
				})
			} else if(buttonType != '' && buttonType == "finalize") {
				// 跳转到复启页面
				uni.navigateTo({
					url: `/pages/order/detail/resetIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
				})
			} else if(buttonType != '' && buttonType == "shutdown") {
				// 跳转到停机页面
				uni.navigateTo({
					url: `/pages/order/detail/shutdownIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
				})
			}
		} else if(orderItem.workOrderStatus == 'to_approve') {
			// 跳转到待审批页面
			uni.navigateTo({
			    url: `/pages/order/detail/approveIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
			})
		} else if(orderItem.workOrderStatus == 'suspended') {
			// 跳转到恢复页面
			uni.navigateTo({
			    url: `/pages/order/detail/resumeIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
			})
		} else if(orderItem.workOrderStatus == 'return') {
			// 跳转到退回页面
			uni.navigateTo({
			    url: `/pages/order/detail/returnIndex?id=${orderItem.id}&orderType=${orderItem.orderType}`
			})
		} else {
			uni.navigateTo({
				url: `/pages/order/detail/index?id=${orderItem.id}&orderType=${orderItem.orderType}`
			})
		}

    }

    // 清空搜索
    const clearSearch = (): void => {
        // 添加防重复调用检查
        if (loading.value) {
            return;
        }

        // 添加防重复请求检查
        if (isSearching.value) {
            return
        }

        isSearching.value = true
        keyword.value = ""
        page.value = 1
        loadData(true, true) // 状态切换时禁用下拉刷新动画

        // 延迟重置标志位，确保请求发送后才允许下一次搜索
        setTimeout(() => {
            isSearching.value = false
        }, 100)
    }

	// 初始化
	onMounted(() => {
		const userInfo = getUserInfo()
		if (userInfo != null) {
			const userIdStr = userInfo['userId'].toString()
			userId.value = userIdStr
			roles.value = userInfo['roleNames'].toString()
		}
	    loadStatusDictList()
	    loadData(true, false)
		// 监听接单成功的事件，刷新列表
		uni.$on('refreshOrderList', () => {
			page.value = 1
			loadData(true, false)
		})
	})

    // 组件卸载前清理事件监听
    onBeforeUnmount(() => {
        // 确保所有状态都被重置
        refreshing.value = false
        loading.value = false
        isRefreshing.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;
        }
    }

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

    .item-container {
        padding: 30rpx;
    }

	.item-header {
	  flex-direction: row;
	  align-items: flex-start;
	  margin-bottom: 16rpx;
	  justify-content: space-between;
	  min-height: 55rpx;

	  .item-title {
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		flex-wrap: wrap;
		flex: 0 1 75%;
		min-width: 0;
	  }

	  .info-value {
		font-size: 28rpx;
		color: #999999;
		margin-left: auto;
		flex: 0 0 auto;
		white-space: nowrap;
	  }
	}
	.info-row {
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;

	  .info-label {
		font-size: 26rpx;
		color: #666;
	  }

	  .info-value {
		font-size: 26rpx;
	  }
	}
	.text-gray{
	  font-size: 26rpx;
	  color: #666;
	}

	.status-tag {
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		white-space: nowrap;
		// margin-left: 20rpx;
		border: 1rpx solid;
	}

	/* 待接单 */
	.status-assigned {
		background-color: #ebf5ff;
		color: #409eff;
		border-color: #d8ebff;
	}


	/* 待结单 */
	.status-to_finish {
		background-color: #fff7e6;
		color: #fa8c16;
		border-color: #ffd591;
	}

	/* 待审批 */
	.status-to_approve {
		background-color: #fff7e6;
		color: #fa8c16;
		border-color: #ffd591;
	}

	/* 已挂起 */
	.status-suspended {
		background-color: #fff2f0;
		color: #ff4d4f;
		border-color: #ffccc7;
	}

	/* 已完成 */
	.status-completed {
		background-color: #f0f9eb;
		color: #5cb87a;
		border-color: #c2e7b0;
	}

	/* 待下发 */
	.status-to_issue {
		background-color: #f4f4f5;
		color: #909399;
		border-color: #e9e9eb;
	}

	/* 已归档 */
	.status-archived {
		background-color: #f0f9eb;
		color: #5cb87a;
		border-color: #c2e7b0;
	}

	/* 退回 */
	.status-return {
		background-color: #fff2f0;
		color: #ff4d4f;
		border-color: #ffccc7;
	}

	/* 退回 */
	.status-accept_return {
		background-color: #fff2f0;
		color: #ff4d4f;
		border-color: #ffccc7;
	}

	.btn-primary {
		z-index: 999;
		border-radius: 10rpx;
		font-size: 24rpx;
		// white-space: nowrap;
		margin-left: 20rpx;
		background-color: #165DFF;
		line-height: 45rpx;
		color: #ffffff;
		.btn-text{
			color: #ffffff;
			font-size: 24rpx;
			padding: 5px 15px;
		}
	}
	.btn-group {
	  flex-direction: row;
	  align-items: center;
	  justify-content: flex-end;
	  margin-top: 20rpx;
	}
// /* 超时 */
// .status-overdue {
// 	background-color: #fff2f0;
// 	color: #ff4d4f;
// 	border-color: #ffccc7;
// }
</style>