mes-app/pages/apply/index.uvue

<template>
	<uni-navbar-lite @rightClick="handleRight" :show-right="showRight" title="物料申请"></uni-navbar-lite>
    <view class="list-page" :class="{ 'has-bottom-bar': showPurchaseBar }">
        <!-- 搜索栏和状态标签 -->
        <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>

            <!-- 状态标签 -->
            <scroll-view class="status-tabs" scroll-x="true">
                <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 === 'PREPARE' }" 
                    @tap="handleStatusChange('PREPARE')"
                >
                    <text class="status-tab-text" :class="{ 'active-text': currentStatus === 'PREPARE' }">待确认</text>
                </view>
                <view 
                    class="status-tab" 
                    :class="{ 'active': currentStatus === 'CONFIRMED' }" 
                    @tap="handleStatusChange('CONFIRMED')"
                >
                    <text class="status-tab-text" :class="{ 'active-text': currentStatus === 'CONFIRMED' }">已确认</text>
                </view>
                <view 
                    class="status-tab" 
                    :class="{ 'active': currentStatus === 'WAITOUT' }" 
                    @tap="handleStatusChange('WAITOUT')"
                >
                    <text class="status-tab-text" :class="{ 'active-text': currentStatus === 'WAITOUT' }">待出库</text>
                </view>
                <view 
                    class="status-tab" 
                    :class="{ 'active': currentStatus === 'FINISHED' }" 
                    @tap="handleStatusChange('FINISHED')"
                >
                    <text class="status-tab-text" :class="{ 'active-text': currentStatus === 'FINISHED' }">已完成</text>
                </view>
            </scroll-view>
        </view>

        <!-- 列表内容 -->
        <common-list 
            :dataList="dataList" 
            :loading="loading" 
            :refreshing="refreshing" 
            :hasMore="hasMore" 
            @refresh="handleRefresh" 
            @loadMore="loadMore"
        >
            <template #default="{ item, index }">
                <view class="list-item" @tap="handleItemClick(item, index)">
                    <view class="item-container">
                        <view class="item-header">
                            <view v-if="showPurchaseBar && canPurchase(item)" class="checkbox-wrapper" @tap.stop="toggleSelect(item)">
                                <view class="checkbox" :class="{ 'checked': isSelected(item) }">
                                    <text v-if="isSelected(item)" class="check-icon">✓</text>
                                </view>
                            </view>
                            <text class="item-title">{{ getApplyCode(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">{{ getCreateTime(item) }}</text>
                                </view>
                                <view class="info-item">
                                    <text class="info-label">申请人</text>
                                    <text class="info-value">{{ getNickName(item) }}</text>
                                </view>
                            </view>
                            <view class="info-row">
                                <view class="info-item">
                                    <text class="info-label">申请数</text>
                                    <text class="info-value warning">{{ getApplyCount(item) }}</text>
                                </view>
                                <view class="info-item">
                                    <text class="info-label">已出库</text>
                                    <text class="info-value primary">{{ getOutCount(item) }}</text>
                                </view>
                            </view>
                            <view class="info-row">
								<view class="info-item">
								    <text class="info-label">待领取</text>
								    <text class="info-value error">{{ getReceiveCount(item) }}</text>
								</view>
                                <view class="info-item">
                                    <text class="info-label">申购状态</text>
                                    <text class="info-value" :class="'purchase-status-' + getPurchaseStatus(item)">{{ getPurchaseStatusText(item) }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </template>
        </common-list>
    </view>
    
    <!-- 底部固定悬浮采购栏 -->
    <view v-if="showPurchaseBar" class="bottom-bar">
        <text class="select-count">已选中 {{ selectedIds.size }} 项</text>
        <view class="purchase-btn" @tap="handlePurchase">
            <text class="purchase-btn-text">批量采购</text>
        </view>
    </view>
</template>

<script setup lang="uts">
    import { ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app';
    import { getPurchaseApplyList, getPendingReceiveApplyCount } from '../../api/apply/index'
    import { getUserInfo } from '../../utils/storage'
    import { checkPermission } from '../../utils/permission'

    let currentUserId: string = ''

    // 列表数据
    const dataList = ref<any[]>([])
    const keyword = ref<string>("")
    let searchTimer: number | null = null
    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)
	const showRight = ref<boolean>(false)
    const pendingReceiveCount = ref<number>(0)
    const selectedIds = ref<Set<string>>(new Set())
    const showPurchaseBar = ref<boolean>(false)

    // 加载待领取数量
    const loadPendingReceiveCount = (): void => {
        if (currentUserId.length === 0) return
        getPendingReceiveApplyCount(currentUserId).then((res: any) => {
            const result = res as UTSJSONObject
            const count = result['data']
            pendingReceiveCount.value = count != null ? parseInt(count.toString()) : 0
        }).catch((e) => {
            console.error('加载待领取数量失败:', e)
        })
    }

    // 获取申请单号
    const getApplyCode = (item: any | null): string => {
        if (item == null) return ''
        const jsonItem = item as UTSJSONObject
        const val = jsonItem['applyCode']
        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 jsonItem = item as UTSJSONObject
        const val = jsonItem['status']
        const status = val != null ? val.toString() : ''
        switch (status) {
            case 'PREPARE': return '草稿'
            case 'CONFIRMED': return '已确认'
            case 'FINISHED': return '已完成'
            case 'CANCEL': return '已取消'
			case 'APPROVED': return '已审批'
			case 'APPROVING': return '审批中'
			case 'WAITOUT': return '待出库'
            default: return status
        }
    }
    
    // 获取申购状态
    const getPurchaseStatus = (item: any | null): string => {
        if (item == null) return ''
        const jsonItem = item as UTSJSONObject
        const val = jsonItem['applyStatus']
        return val != null ? val.toString() : ''
    }
    
    // 获取申购状态文本
    const getPurchaseStatusText = (item: any | null): string => {
        if (item == null) return ''
        const jsonItem = item as UTSJSONObject
        const val = jsonItem['applyStatus']
        const status = val != null ? val.toString() : ''
        switch (status) {
            case '0': return '未申购'
            case '1': return '已申购'
            default: return ''
        }
    }

    // 获取创建时间
    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 getNickName = (item: any | null): string => {
        if (item == null) return ''
        const jsonItem = item as UTSJSONObject
        const val = jsonItem['nickName']
        return val != null ? val.toString() : ''
    }

    // 获取申请数量
    const getApplyCount = (item: any | null): string => {
        if (item == null) return '0'
        const jsonItem = item as UTSJSONObject
        const val = jsonItem['applyQuantity']
        return val != null ? val.toString() : '0'
    }
	
	// 获取已出库数量
	const getOutCount = (item: any | null): string => {
	    if (item == null) return '0'
	    const jsonItem = item as UTSJSONObject
	    const val = jsonItem['outQuantity']
	    return val != null ? val.toString() : '0'
	}
	
	// 获取待领取数量
	const getReceiveCount = (item: any | null): string => {
	    if (item == null) return '0'
	    const jsonItem = item as UTSJSONObject
	    const val = jsonItem['pendingReceiveCount']
	    return val != null ? val.toString() : '0'
	}
	
    // 获取已完成数量
    const getFinishedCount = (item: any | null): string => {
        if (item == null) return '0'
        const jsonItem = item as UTSJSONObject
        const val = jsonItem['finishedCount']
        return val != null ? val.toString() : '0'
    }

    // 获取待审核数量 (status=1)
    const getPendingAuditCount = (item: any | null): string => {
        if (item == null) return '0'
        const jsonItem = item as UTSJSONObject
        const val = jsonItem['pendingAuditCount']
        return val != null ? val.toString() : '0'
    }

    // 获取待领取数量 (status=2 + status=4)
    const getPendingReceiveCount = (item: any | null): string => {
        if (item == null) return '0'
        const jsonItem = item as UTSJSONObject
        const val = jsonItem['pendingReceiveCount']
        return val != null ? val.toString() : '0'
    }

    // 获取待采购数量 (status=3 + status=4)
    const getPendingPurchaseCount = (item: any | null): string => {
        if (item == null) return '0'
        const jsonItem = item as UTSJSONObject
        const val = jsonItem['pendingPurchaseCount']
        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 searchKeyword = keyword.value != null ? keyword.value : ''
            const isPendingReceive = currentStatus.value === 'PENDING_RECEIVE'
            const statusParam = isPendingReceive ? '' : (currentStatus.value != null ? currentStatus.value : '')
            console.log('loadData - statusParam:', statusParam, 'isPendingReceive:', isPendingReceive)
            const result = await getPurchaseApplyList(page.value, pageSize, searchKeyword, statusParam, currentUserId, isPendingReceive)
            console.log('getPurchaseApplyList result:', result)
            const resultObj = result as UTSJSONObject
            const rows = resultObj['rows']
            const total = resultObj['total'] as number
            console.log('rows:', rows, 'total:', total)

            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 handleRefresh = (): void => {
        refreshing.value = true
        loadData(true)
    }

    // 加载更多
    const loadMore = (): void => {
        if (!hasMore.value || loading.value) return
        page.value++
        loadData(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
        loadData(true)
    }

	const handleRight = ():void=>{
		uni.navigateTo({
		    url: `/pages/apply/applyNew?from=index`
		})
	}
	
    // 判断是否可以采购（已确认状态）
    const canPurchase = (item: any | null): boolean => {
        if (item == null) return false
        const jsonItem = item as UTSJSONObject
        const status = jsonItem['status']
        return status != null && status.toString() === 'CONFIRMED'
    }
    
    // 判断是否选中
    const isSelected = (item: any | null): boolean => {
        if (item == null) return false
        const jsonItem = item as UTSJSONObject
        const applyId = jsonItem['applyId']
        return applyId != null && selectedIds.value.has(applyId.toString())
    }
    
    // 切换选中状态
    const toggleSelect = (item: any | null): void => {
        if (item == null) return
        const jsonItem = item as UTSJSONObject
        const applyId = jsonItem['applyId']
        if (applyId == null) return
        const idStr = applyId.toString()
        if (selectedIds.value.has(idStr)) {
            selectedIds.value.delete(idStr)
        } else {
            selectedIds.value.add(idStr)
        }
    }
    
    // 采购按钮点击
    const handlePurchase = (): void => {
        if (selectedIds.value.size === 0) {
            uni.showToast({
                title: '请先选择单据',
                icon: 'none',
                duration: 2000
            })
            return
        }
        
        const hasPurchased = dataList.value.some((item: any) => {
            const jsonItem = item as UTSJSONObject
            const applyId = jsonItem['applyId']
            if (applyId != null && selectedIds.value.has(applyId.toString())) {
                const applyStatus = jsonItem['applyStatus']
                return applyStatus != null && applyStatus.toString() === '1'
            }
            return false
        })
        
        if (hasPurchased) {
            uni.showModal({
                title: '提示',
                content: '选中的单据中存在已申购的单据，继续采购将重复申购，确定继续吗？',
                success: (res) => {
                    if (res.confirm) {
                        const ids = Array.from(selectedIds.value).join(',')
                        uni.navigateTo({
                            url: `/pages/purchase/createByApply?applyIds=${ids}`
                        })
                    }
                }
            })
        } else {
            const ids = Array.from(selectedIds.value).join(',')
            uni.navigateTo({
                url: `/pages/purchase/createByApply?applyIds=${ids}`
            })
        }
    }
    
    // 点击列表项
    const handleItemClick = (item: any | null, index: number): void => {
        if (item == null) return
        const jsonItem = item as UTSJSONObject
        const applyId = jsonItem['applyId']
        uni.navigateTo({
            url: `/pages/apply/applyInfo?id=${applyId}`
        })
    }
	
    // 页面显示时刷新列表
    onShow(() => {
		if(currentUserId.length > 0){
			loadData(true)
			loadPendingReceiveCount()
		}
    })
	
	onMounted(() => {
		const userInfo = getUserInfo()
		if (userInfo != null) {
			const userId = userInfo['userId']
			currentUserId = userId != null ? userId.toString() : ''
			console.log("currentUserId:" + currentUserId)
			// 初始化
			loadData(true)
		}
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const options = currentPage.options
		if (options != null && options.from == 'new') {
			showRight.value = false
		}else{
			showRight.value = true
		}
		showPurchaseBar.value = checkPermission('mes:wm:mergePurchase:add')
	})
</script>

<style lang="scss">
    .list-page {
        flex: 1;
        background-color: #e8f0f9;
    }
    
    .list-page.has-bottom-bar {
        padding-bottom: 140rpx;
    }

    .search-block {
        background-color: #ffffff;
    }

    .pending-receive-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff7e6;
        border-left: 6rpx solid #fa8c16;
        margin: 0 30rpx;
        border-radius: 8rpx;
    }

    .pending-receive-label {
        font-size: 28rpx;
        color: #fa8c16;
        font-weight: bold;
    }

    .pending-receive-count {
        margin-left: 16rpx;
        padding: 4rpx 16rpx;
        background-color: #fa8c16;
        color: #ffffff;
        font-size: 24rpx;
        border-radius: 20rpx;
    }

    .pending-receive-arrow {
        margin-left: auto;
        color: #999999;
        font-size: 28rpx;
    }

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

    .status-tabs {
        display: flex;
        flex-direction: row;
        padding: 0rpx 30rpx 20rpx;
        background-color: #ffffff;
        white-space: nowrap;
        width: 100%;
    }

    .status-tab {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        padding: 16rpx 24rpx;
        text-align: center;
        position: relative;
        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;
            text-align: center;

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

        .tab-badge {
            margin-left: 8rpx;
            min-width: 32rpx;
            height: 32rpx;
            padding: 0 8rpx;
            background-color: #ff3b30;
            border-radius: 16rpx;
            justify-content: center;
            align-items: center;

            .tab-badge-text {
                font-size: 20rpx;
                color: #ffffff;
            }
        }
    }

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

    .bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #ffffff;
        padding: 24rpx 40rpx;
        border-top: 1rpx solid #e5e5e5;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
    }
    
    .select-count {
        font-size: 28rpx;
        color: #666666;
    }
    
    .purchase-btn {
        background-color: #1677ff;
        padding: 20rpx 60rpx;
        border-radius: 16rpx;
    }
    
    .purchase-btn-text {
        color: #ffffff;
        font-size: 30rpx;
        font-weight: bold;
    }
    
    .list-item {
        margin: 10rpx 20rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
    }

    .item-container {
        padding: 30rpx;
    }

    .item-header {
        flex-direction: row;
        align-items: center;
        margin-bottom: 20rpx;
        
        .checkbox-wrapper {
            margin-right: 16rpx;
        }
        
        .checkbox {
            width: 40rpx;
            height: 40rpx;
            border: 2rpx solid #d9d9d9;
            border-radius: 6rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffffff;
            
            &.checked {
                background-color: #1677ff;
                border-color: #1677ff;
            }
        }
        
        .check-icon {
            color: #ffffff;
            font-size: 24rpx;
            font-weight: bold;
        }

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

        .item-status {
            font-size: 26rpx;
            padding: 6rpx 16rpx;
            border-radius: 6rpx;
            
            &.status-PREPARE {
                background-color: #f0f0f0;
                color: #666666;
            }
            &.status-CONFIRMED {
                background-color: #e6f7ff;
                color: #1890ff;
            }
            &.status-FINISHED {
                background-color: #f6ffed;
                color: #52c41a;
            }
            &.status-CANCEL {
                background-color: #fff1f0;
                color: #ff4d4f;
            }
			&.status-APPROVING {
			    background-color: #d1f5f8;
			    color: #ff007f;
			}
			&.status-WAITOUT {
			    color: #fa8c16;
			}
			&.status-APPROVED {
			    background-color: #ebfffd;
			    color: #55ff00;
			}
        }
    }

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

        .info-row {
            flex-direction: row;
            justify-content: space-between;
            margin-bottom: 16rpx;

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

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

                &:last-child {
                    flex: 1;
                    justify-content: flex-end;
                }

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

                .info-value {
                    font-size: 26rpx;
                    color: #333333;
                    flex: 1;
                    
                    &.success {
                        color: #52c41a;
                    }
                    &.warning {
                        color: #faad14;
                    }
					&.error {
					    color: #ff0000;
					}
                    &.primary {
                        color: #007aff;
                    }
                    &.purchase-status-0 {
                        color: #faad14;
                    }
                    &.purchase-status-1 {
                        color: #52c41a;
                    }
                }
            }
        }
    }
</style>