mes-app/pages/out/index.uvue

<template>
	<uni-navbar-lite :show-right=false title="出库单"></uni-navbar-lite>
	<view class="list-page">
		<!-- 搜索栏 -->
		<view class="search-block">
			<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" @input="handleSearch" />
					<view v-if="keyword.length > 0" class="clear-btn" @tap="clearKeyword">
						<text class="clear-btn-text">×</text>
					</view>
					<view class="search-btn" @tap="handleSearch">
						<text class="search-btn-text">搜索</text>
					</view>
				</view>
			</view>
			<!-- 状态标签 -->
			<view class="status-tabs">
				<view 
					class="status-tab" 
					:class="{ 'active': currentStatus === '' }" 
					@tap="handleStatusChange('')"
				>
					<text class="status-tab-text" :class="{ 'active-text': currentStatus === '' }">全部</text>
				</view>
				<view 
					class="status-tab" 
					:class="{ 'active': currentStatus === 'PENDING' }" 
					@tap="handleStatusChange('PENDING')"
				>
					<text class="status-tab-text" :class="{ 'active-text': currentStatus === 'PENDING' }">待签收</text>
				</view>
			</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">
							<text class="item-title">{{ getSalseCode(item) }}</text>
							<text class="item-status" :class="'status-' + getStatus(item)">{{ getStatusText(item) }}</text>
						</view>
						<view class="item-info">
							<view class="info-row">
								<view class="info-item">
									<text class="info-label">创建人</text>
									<text class="info-value">{{ getCreateBy(item) }}</text>
								</view>
								<view class="info-item">
									<text class="info-label">领用人</text>
									<text class="info-value">{{ getReceiverUser(item) }}</text>
								</view>
							</view>
							<view class="info-row">
								<view class="info-item">
									<text class="info-label">创建时间</text>
									<text class="info-value">{{ getCreateTime(item) }}</text>
								</view>
							</view>
							<view class="info-row stat-row">
								<view class="info-item" v-if="getStatus(item) == 'FINISHED'">
									<text class="info-label stat-label">已签收</text>
									<text class="info-value success stat-value">{{ getSignedCount(item) }}</text>
								</view>
								<view class="info-item" v-if="getStatus(item) == 'FINISHED'">
									<text class="info-label stat-label">待签收</text>
									<text class="info-value warning stat-value">{{ getUnsignedCount(item) }}</text>
								</view>
								<view class="info-item" v-if="getStatus(item) == 'CONFIRMED'">
									<text class="info-label stat-label">待出库</text>
									<text class="info-value warning stat-value">{{ getTotalCount(item) }}</text>
								</view>
							</view>
							<view v-if="item != null && getStatus(item) == 'FINISHED' && getUnsignedCount(item) != '0'" class="sign-all-btn-wrap">
								<text class="sign-all-btn" @click.stop="handleSignAll(item)">一键签收</text>
							</view>
						</view>
					</view>
				</view>
			</template>
		</common-list>
		<custom-tabbar :current="3" />
	</view>
</template>

<script setup lang="uts">
    import { ref, onShow, onMounted } from 'vue'
    import { getProductSalseList, signReceiveAll } from '../../api/out/index'
    import { getUserInfo } from '../../utils/storage'

    let searchTimer: number | null = null

    // 列表数据
    const dataList = ref<any[]>([])
    const keyword = ref<string>("")
    const currentStatus = 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)
    
    // 当前用户ID
    let currentUserId: string = ''

    // 获取出库单号
    const getSalseCode = (item: any | null): string => {
        if (item == null) return ''
        const jsonItem = item as UTSJSONObject
        const val = jsonItem['salseCode']
        return val != null ? val.toString() : ''
    }

    // 获取状态
    const getStatus = (item: any | null): string => {
        if (item == null) return ''
        const jsonItem = item as UTSJSONObject
        const val = jsonItem['status']
        return val != null ? val.toString() : ''
    }

    // 获取状态文本
    const getStatusText = (item: any | null): string => {
        if (item == null) return ''
        const status = getStatus(item)
        switch (status) {
            case 'PREPARE': return '待确认'
            case 'CONFIRMED': return '待出库'
            case 'EXECUTING': return '执行中'
            case 'FINISHED': return '已完成'
            case 'CANCEL': return '已取消'
            default: return status
        }
    }

    // 获取创建人
    const getCreateBy = (item: any | null): string => {
        if (item == null) return ''
        const jsonItem = item as UTSJSONObject
        const val = jsonItem['createNickName']
        return val != null ? val.toString() : ''
    }

    // 获取领用人
    const getReceiverUser = (item: any | null): string => {
        if (item == null) return ''
        const jsonItem = item as UTSJSONObject
        const val = jsonItem['receiverUser']
        return val != null ? val.toString() : ''
    }

    // 获取创建时间
    const getCreateTime = (item: any | null): string => {
        if (item == null) return ''
        const jsonItem = item as UTSJSONObject
        const val = jsonItem['createTime']
        return val != null ? val.toString() : ''
    }

    // 获取已签收数量
    const getSignedCount = (item: any | null): string => {
        if (item == null) return '0'
        const jsonItem = item as UTSJSONObject
        const val = jsonItem['signedCount']
        return val != null ? val.toString() : '0'
    }

    // 获取未签收数量
    const getUnsignedCount = (item: any | null): string => {
        if (item == null) return '0'
        const jsonItem = item as UTSJSONObject
        const val = jsonItem['unsignedCount']
        return val != null ? val.toString() : '0'
    }

    // 获取总数（待出库数量）
    const getTotalCount = (item: any | null): string => {
        if (item == null) return '0'
        const jsonItem = item as UTSJSONObject
        const val = jsonItem['totalCount']
        return val != null ? val.toString() : '0'
    }
	
	// 加载列表数据
	const loadData = async (isRefresh: boolean): Promise<void> => {
	    if (loading.value) return
	
	    try {
	        loading.value = true
	
	        if (isRefresh) {
	            page.value = 1
	        }
	
	        const signStatus = currentStatus.value === 'PENDING' ? 'PENDING' : ''
	        const result = await getProductSalseList(page.value, pageSize, keyword.value, currentUserId, signStatus)
	        const resultObj = result as UTSJSONObject
	        const rows = resultObj['rows']
	        const total = resultObj['total'] as number
	
	        if (rows != null) {
	            const newData = rows as any[]
	            if (isRefresh) {
	                dataList.value = newData
	            } else {
	                dataList.value = [...dataList.value, ...newData]
	            }
	            hasMore.value = dataList.value.length < total
	        } else {
	            if (isRefresh) {
	                dataList.value = []
	            }
	            hasMore.value = false
	        }
	
	    } catch (e) {
	        console.error('加载失败:', e)
	    } finally {
	        loading.value = false
	        refreshing.value = false
	    }
	}

    // 搜索
    const handleSearch = (): void => {
		const timer = searchTimer
		if (timer != null) {
			clearTimeout(timer)
		}
		searchTimer = setTimeout(() => {
			loadData(true)
		}, 300)
    }

    // 清空搜索关键字
    const clearKeyword = (): void => {
        keyword.value = ''
        loadData(true)
    }

    // 切换状态标签
    const handleStatusChange = (status: string): void => {
        currentStatus.value = status
        page.value = 1
        loadData(true)
    }
	
    // 下拉刷新
    const handleRefresh = (): void => {
        refreshing.value = true
        loadData(true)
    }

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

    // 点击列表项
    const handleItemClick = (item: any): void => {
        const jsonItem = item as UTSJSONObject
        const salseId = jsonItem['salseId']
        uni.navigateTo({
            url: `/pages/out/detail?id=${salseId}`
        })
    }

    // 一键签收
    const handleSignAll = (item: any | null): void => {
        if (item == null) return
        const jsonItem = item as UTSJSONObject
        const salseId = jsonItem['salseId']
        if (salseId == null) {
            uni.showToast({ title: '数据错误', icon: 'none' })
            return
        }
        const idStr = salseId.toString()
        uni.showModal({
            title: '提示',
            content: '确认一键签收所有物料？',
            success: (res) => {
                if (res.confirm) {
                    signReceiveAll(idStr).then(() => {
                        uni.showToast({ title: '签收成功', icon: 'success' })
                        loadData(true)
                    }).catch((e) => {
						const error = e as UTSError
                        const errMsg = error?.message ?? '签收失败'
                        uni.showToast({ title: errMsg, icon: 'none' })
                    })
                }
            }
        })
    }

    // 初始化
    onMounted(() => {
        const userInfo = getUserInfo()
        if (userInfo != null) {
            const userId = userInfo['userId']
            currentUserId = userId != null ? userId.toString() : ''
        }
        loadData(true)
    })

    // 页面显示时刷新列表
    onShow(() => {
        loadData(true)
    })
</script>

<style lang="scss">
	.page-container {
	    flex: 1;
	    background-color: #f5f8fe;
	    padding-top: env(safe-area-inset-top);
		background-color: #e8f0f9;
		padding: 20rpx 10rpx 20rpx 10rpx;
	}
    .list-page {
        flex: 1;
        background-color: #e8f0f9;
    }

    .search-block {
        background-color: #ffffff;
		border-radius: 15rpx;
    }

    .search-bar {
        padding: 20rpx 30rpx;
    }

    .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;
        }

        .search-btn {
            padding: 10rpx 20rpx;
            background-color: #007aff;
            border-radius: 8rpx;
            margin-left: 10rpx;
        }

        .search-btn-text {
            color: #ffffff;
            font-size: 24rpx;
        }

        .clear-btn {
            width: 36rpx;
            height: 36rpx;
            border-radius: 18rpx;
            background-color: #cccccc;
            align-items: center;
            justify-content: center;
            margin-left: 10rpx;
        }

        .clear-btn-text {
            color: #ffffff;
            font-size: 24rpx;
            font-weight: bold;
        }
    }

    .status-tabs {
        display: flex;
        flex-direction: row;
        padding: 0rpx 30rpx 20rpx;
        background-color: #ffffff;
    }

    .status-tab {
        flex: 1;
        padding: 16rpx 0;
        text-align: center;
        margin-right: 16rpx;
        border-radius: 8rpx;
        background-color: #f5f5f5;
        justify-content: center;
        align-items: center;

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

        &.active {
            background-color: #007aff;
        }

        .status-tab-text {
            font-size: 26rpx;
            color: #666666;

            &.active-text {
                color: #ffffff;
                font-weight: bold;
            }
        }
    }

    .list-item {
        margin: 8rpx 10rpx;
        background-color: #ffffff;
        border-radius: 12rpx;
    }

    .item-container {
        padding: 20rpx;
    }

    .item-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12rpx;

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

        .item-status {
            font-size: 24rpx;
            padding: 8rpx 16rpx;
            border-radius: 8rpx;
            
            &.status-PREPARE {
                background-color: #fff7e6;
                color: #fa8c16;
            }
            &.status-CONFIRMED {
                background-color: #e6f7ff;
                color: #1890ff;
            }
            &.status-EXECUTING {
                background-color: #f9f0ff;
                color: #722ed1;
            }
            &.status-FINISHED {
                background-color: #f6ffed;
                color: #52c41a;
            }
            &.status-CANCEL {
                background-color: #fff1f0;
                color: #ff4d4f;
            }
        }
    }

    .item-info {
        .info-row {
            flex-direction: row;
            margin-bottom: 5rpx;
            
            &:last-child {
                margin-bottom: 0;
            }
        }

        .stat-row {
            padding: 6rpx 0;
        }

        .stat-label {
            font-size: 28rpx;
            color: #333333;
            font-weight: 600;
        }

        .stat-value {
            font-size: 28rpx;
            font-weight: 600;
        }

        .info-item {
            flex: 1;
            flex-direction: row;
        }

        .sign-all-btn-wrap {
            margin-top: 5rpx;
            align-items: flex-end;
        }

        .sign-all-btn {
            padding: 12rpx 32rpx;
            background-color: #007aff;
            color: #ffffff;
            font-size: 24rpx;
            border-radius: 8rpx;
            text-align: center;
        }

        .info-label {
            font-size: 24rpx;
            color: #999999;
            margin-right: 8rpx;
        }

        .info-value {
            font-size: 24rpx;
            color: #333333;
            
            &.success {
                color: #52c41a;
            }
            &.warning {
                color: #fa8c16;
            }
        }
    }
</style>