xg_total_process_master_cloud_h5/pages/psiManagement/wareHouseSummary/WareHouseHistoryPanel.vue

<template>
    <view>
        <view class="panel-mask" :class="{ show: visible }" @tap="close"></view>
        <view class="history-panel" :class="{ show: visible }">
            <view class="panel-header">
                <view class="panel-action" @tap="close">关闭</view>
                <view class="panel-title">{{ tradeName || '库存记录' }}</view>
                <view class="panel-action panel-action-placeholder">关闭</view>
            </view>
            <view class="history-tabs">
                <view class="history-tab" :class="{ active: activeTab === 'wareHouse' }" @tap="activeTab = 'wareHouse'">
                    入库
                </view>
                <view class="history-tab" :class="{ active: activeTab === 'collect' }" @tap="activeTab = 'collect'">
                    领用
                </view>
                <view class="history-tab" :class="{ active: activeTab === 'loss' }" @tap="activeTab = 'loss'">
                    报损
                </view>
            </view>
            <scroll-view scroll-y class="history-list">
                <view v-if="loading" class="panel-state">加载中...</view>
                <view v-else-if="activeHistoryList.length === 0" class="panel-state">暂无记录</view>
                <view v-else class="history-list-inner">
                    <view v-for="(record, index) in activeHistoryList" :key="record.id || index" class="history-card">
                        <template v-if="activeTab === 'wareHouse'">
                            <view class="history-title">{{ record.wareHouseName || record.wareHouseNumber || '-' }}</view>
                            <view class="history-grid">
                                <text>入库编号：{{ record.wareHouseNumber || '-' }}</text>
                                <text>入库数量：{{ record.tradeNumber || '-' }}</text>
                                <text>当前库存：{{ record.currentInventory || '-' }}</text>
                                <text>生产日期：{{ record.produceDate || '-' }}</text>
                                <text>保质期：{{ formatShelfLife(record) }}</text>
                                <text>经办人：{{ record.wareHouseHandledBy || '-' }}</text>
                                <text>入库时间：{{ record.wareHouseDate || '-' }}</text>
                            </view>
                        </template>
                        <template v-else-if="activeTab === 'collect'">
                            <view class="history-title">{{ record.collectNo || record.goodsName || '-' }}</view>
                            <view class="history-grid">
                                <text>领用数量：{{ calcCollectRecordNumber(record) }}</text>
                                <text>当前库存：{{ record.currentInventory || '-' }}</text>
                                <text>经办人：{{ record.collectHandleBy || '-' }}</text>
                                <text>领用时间：{{ record.collectDate || '-' }}</text>
                            </view>
                        </template>
                        <template v-else>
                            <view class="history-title">{{ record.lossNo || record.goodsName || '-' }}</view>
                            <view class="history-grid">
                                <text>报损数量：{{ record.lossNumber || '-' }}</text>
                                <text>经办人：{{ record.handledByName || '-' }}</text>
                                <text>经办部门：{{ record.handledByOfficeName || '-' }}</text>
                                <text>报损时间：{{ record.createTime || '-' }}</text>
                            </view>
                        </template>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import WareHouseService from '@/api/psi/WareHouseService'
import LossService from '@/api/psi/LossService'

export default {
    name: 'WareHouseHistoryPanel',
    data() {
        return {
            visible: false,
            loading: false,
            activeTab: 'wareHouse',
            tradeName: '',
            wareHouseHistoryList: [],
            collectHistoryList: [],
            lossHistoryList: []
        }
    },
    wareHouseService: null,
    lossService: null,
    computed: {
        activeHistoryList() {
            if (this.activeTab === 'wareHouse') {
                return this.wareHouseHistoryList
            }
            if (this.activeTab === 'collect') {
                return this.collectHistoryList
            }
            return this.lossHistoryList
        }
    },
    created() {
        this.wareHouseService = new WareHouseService()
        this.lossService = new LossService()
    },
    methods: {
        async open(row) {
            this.tradeName = (row && row.tradeName) || ''
            this.activeTab = 'wareHouse'
            this.visible = true
            this.loading = true
            try {
                const params = {
                    current: 1,
                    size: 20,
                    tradeName: this.tradeName
                }
                const [wareData, collectData, lossData] = await Promise.all([
                    this.wareHouseService.wareHouseHistoryList(params),
                    this.wareHouseService.collectHistoryList(params),
                    this.lossService.getLossByTradeName({
                        current: 1,
                        size: 20,
                        goodsName: this.tradeName
                    })
                ])
                this.wareHouseHistoryList = (wareData && wareData.records) || []
                this.collectHistoryList = (collectData && collectData.records) || []
                this.lossHistoryList = (lossData && lossData.records) || []
            } finally {
                this.loading = false
            }
        },
        close() {
            this.visible = false
        },
        formatShelfLife(row) {
            if (row.shelfLife && row.shelfLifeUnit) {
                return `${row.shelfLife}${row.shelfLifeUnit}`
            }
            return '-'
        },
        calcCollectRecordNumber(row) {
            if (row.notSurplusStock && row.spec) {
                const value = parseFloat(row.notSurplusStock) / parseFloat(row.spec)
                if (Number.isNaN(value)) {
                    return '-'
                }
                return Number.isInteger(value) ? String(value) : value.toFixed(2)
            }
            return '-'
        }
    }
}
</script>

<style scoped>
.panel-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    z-index: 1000;
}

.panel-mask.show {
    opacity: 1;
    visibility: visible;
}

.history-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 78vh;
    background: #f7f9fc;
    border-radius: 28rpx 28rpx 0 0;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

.history-panel.show {
    transform: translateY(0);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28rpx 32rpx 16rpx;
    background: #fff;
    border-bottom: 1rpx solid #eef2f7;
}

.panel-title {
    max-width: 460rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-action {
    min-width: 80rpx;
    font-size: 28rpx;
    color: #2979ff;
}

.panel-action-placeholder {
    opacity: 0;
}

.history-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12rpx;
    padding: 18rpx 24rpx;
    background: #fff;
}

.history-tab {
    padding: 16rpx 0;
    text-align: center;
    border-radius: 999rpx;
    font-size: 26rpx;
    color: #475569;
    background: #f1f5f9;
}

.history-tab.active {
    color: #fff;
    background: #2979ff;
}

.history-list {
    flex: 1;
    padding: 18rpx 24rpx 32rpx;
}

.history-list-inner {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
}

.panel-state {
    padding-top: 120rpx;
    text-align: center;
    font-size: 28rpx;
    color: #94a3b8;
}

.history-card {
    padding: 22rpx;
    background: #fff;
    border-radius: 18rpx;
    box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.05);
}

.history-title {
    margin-bottom: 12rpx;
    font-size: 28rpx;
    font-weight: 700;
    color: #0f172a;
    word-break: break-all;
}

.history-grid {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
    font-size: 24rpx;
    line-height: 1.5;
    color: #475569;
}
</style>