FE-lab-xcx/pages_safetyEducationExamination/views/approval/index.vue

<!-- 实验室审批列表 -->
<template>
	<view class="safetyEducationExamination-approval">
		<!-- 标签栏 -->
		<view class="tag-scroll">
			<text
				v-for="(tag, index) in statusTags"
				:key="index"
				class="tag tag-gray"
				:class="{ active: activeTagIndex === index }"
				@click="onTagChange(index)"
			>{{ tag.label }}<text v-if="tag.value === 0 && pendingCount > 0" class="tag-badge">{{ pendingCount }}</text></text>
		</view>

		<!-- 列表 -->
		<scroll-view scroll-y class="scroll-content" @scrolltolower="onScrollToLower">
			<view class="panel">
				<view
					v-for="(item, index) in approvalList"
					:key="index"
					class="approval-card"
					:style="item.statusCode != 0 ? 'opacity:0.85;' : ''"
				>
					<view class="row-between mb8">
						<view class="fw500" style="font-size:15px;">{{ item.userName }}</view>
						<text class="approval-status" :class="'approval-status-' + getStatusType(item.statusCode)">
							{{ item.statusCode == 0 ? '待审批' : item.statusCode == 1 ? '已通过' : '已驳回' }}
						</text>
					</view>
					<view class="info-grid">
						<view><text class="text-gray">学工号：</text>{{ item.userAccount }}</view>
						<view><text class="text-gray">类别：</text>{{ item.educationName || '-' }}</view>
						<view><text class="text-gray">所属单位：</text>{{ item.deptName || '-' }}</view>
						<view><text class="text-gray">提交时间：</text>{{ item.submitTime }}</view>
					</view>
					<view class="lab-info-box" :style="item.statusCode == 1 ? 'background:#f6ffed;' : ''">
						<view class="mb4">
							<text class="text-gray">申请实验室：</text>
							<text class="fw500">{{ item.subName }}</text>
						</view>
						<view class="mb4">
							<text class="text-gray">风险等级：</text>
							<text v-if="item.levelName" class="tag tag-risk text-xs">{{ item.levelName }}</text>
							<text class="text-gray" style="margin-left:6px;">安全类别：</text>
							<text class="fw500">{{ item.typeName || '-' }}</text>
						</view>
						<view v-if="item.reason">
							<text class="text-gray">进入原因：</text>{{ item.reason }}
						</view>
					</view>
					<view v-if="item.statusCode == 0" class="btn-row">
						<view class="btn btn-green" @click="handleAudit(item, 1)">通过</view>
						<view class="btn btn-reject" @click="handleAudit(item, 2)">驳回</view>
					</view>
				</view>
				<view v-if="!approvalList[0] && !loading" class="empty-tip">暂无审批数据</view>
				<view v-if="loading" class="loading-tip">加载中...</view>
				<view v-if="noMore && approvalList[0]" class="loading-tip">没有更多了</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/component/public.js'
	import {
		examElLabEduRelationAuditList,
		examElLabEduRelationAudit,
	} from '@/pages_safetyEducationExamination/api/index.js'

	export default {
		data() {
			return {
				statusTags: [
					{ label: '全部', value: null },
					{ label: '待审批', value: 0 },
					{ label: '已通过', value: 1 },
					{ label: '已驳回', value: 2 },
				],
				activeTagIndex: 0,
				approvalList: [],
				loading: false,
				page: 1,
				pageSize: 10,
				total: 0,
				noMore: false,
				pendingCount: 0,
			}
		},
		onShow() {
			this.loadPendingCount();
			this.resetList();
		},
		methods: {
			async loadPendingCount() {
				try {
					const { data } = await examElLabEduRelationAuditList({
						page: 1,
						pageSize: 1,
						statusCode: 0,
					});
					if (data.code === 200) {
						this.pendingCount = data.data.total || 0;
					}
				} catch (e) {
					console.error('获取待审批数量失败', e);
				}
			},
			resetList() {
				this.page = 1;
				this.noMore = false;
				this.approvalList = [];
				this.loadApprovalList();
			},
			async loadApprovalList() {
				if (this.loading || this.noMore) return;
				this.loading = true;
				try {
					const tag = this.statusTags[this.activeTagIndex];
					const { data } = await examElLabEduRelationAuditList({
						page: this.page,
						pageSize: this.pageSize,
						statusCode: tag.value !== null ? tag.value : undefined,
					});
					if (data.code === 200) {
						for(let i=0;i<data.data.records.length;i++){
							data.data.records[i].submitTime = parseTime(data.data.records[i].submitTime, "{y}-{m}-{d}")
						}
						const records = data.data.records || [];
						const newList = this.page === 1 ? records : [...this.approvalList, ...records];
						this.$set(this, 'approvalList', newList);
						this.total = data.data.total;
						if (newList.length >= this.total) {
							this.noMore = true;
						} else {
							this.page++;
						}
					}
				} catch (e) {
					console.error('获取审批列表失败', e);
				} finally {
					this.loading = false;
				}
			},
			onScrollToLower() {
				this.loadApprovalList();
			},
			onTagChange(index) {
				if (this.activeTagIndex !== index) {
					this.activeTagIndex = index;
					this.resetList();
				}
			},
			getStatusType(statusCode) {
				const map = { 0: 'pending', 1: 'pass', 2: 'reject' };
				return map[statusCode] || 'pending';
			},
			handleAudit(item, statusCode) {
				const text = statusCode == 1 ? '通过' : '驳回';
				uni.showModal({
					title: '确认审批',
					content: `确定${text}该学生的实验室绑定申请吗？`,
					success: async (res) => {
						if (res.confirm) {
							await this.submitAudit(item.id, statusCode);
						}
					}
				});
			},
			async submitAudit(id, statusCode) {
				uni.showLoading({ title: '提交中...' });
				try {
					const { data } = await examElLabEduRelationAudit({
						id,
						statusCode,
					});
					uni.hideLoading();
					if (data.code === 200) {
						uni.showToast({
							title: '审批成功',
							icon: 'success',
						});
						this.loadPendingCount();
						this.resetList();
					} else {
						uni.showToast({
							title: data.msg || '审批失败',
							icon: 'none',
						});
					}
				} catch (e) {
					uni.hideLoading();
					console.error('审批失败', e);
					uni.showToast({
						title: '审批失败',
						icon: 'none',
					});
				}
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.safetyEducationExamination-approval {
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: #f0f4fb;
	}

	.tag-scroll {
		background: #fff;
		padding: 20rpx 24rpx 10rpx;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.tag {
		display: inline-block;
		padding: 12rpx 28rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		margin-right: 16rpx;
		background: #eef1f6;
		color: #666;
		position: relative;
	}

	.tag.active {
		background: #1857d4;
		color: #fff;
		font-weight: 600;
	}

	.tag-badge {
		display: inline-block;
		background: #ff4d4f;
		color: #fff;
		font-size: 20rpx;
		border-radius: 20rpx;
		margin-left: 8rpx;
		min-width: 32rpx;
		text-align: center;
	}

	.tag.active .tag-badge {
		background: #fff;
		color: #1857d4;
	}

	.scroll-content {
		flex: 1;
		overflow: hidden;
	}

	.panel {
		padding: 16rpx 0;
	}

	.approval-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 28rpx;
		margin: 0 24rpx 20rpx;
		border: 1px solid #dde3ed;
	}

	.row-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.mb8 {
		margin-bottom: 16rpx;
	}

	.mb4 {
		margin-bottom: 8rpx;
	}

	.fw500 {
		font-weight: 500;
	}

	.text-gray {
		color: #999;
	}

	.approval-status {
		font-size: 22rpx;
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
	}

	.approval-status-pending {
		background: #fff7e6;
		color: #d46b08;
	}

	.approval-status-pass {
		background: #f6ffed;
		color: #389e0d;
	}

	.approval-status-reject {
		background: #fff1f0;
		color: #cf1322;
	}

	.info-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8rpx;
		font-size: 26rpx;
		margin-bottom: 20rpx;
	}

	.lab-info-box {
		background: #f5f5f5;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}

	.tag-risk {
		display: inline-block;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		background: #fff7e6;
		color: #d46b08;
		font-size: 20rpx;
	}

	.text-xs {
		font-size: 20rpx;
	}

	.btn-row {
		display: flex;
		gap: 16rpx;
	}

	.btn {
		flex: 1;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		font-size: 26rpx;
		border-radius: 12rpx;
	}

	.btn-green {
		background: #52c41a;
		color: #fff;
	}

	.btn-reject {
		background: #fff1f0;
		color: #ff4d4f;
		border: 1px solid #ff4d4f;
	}

	.empty-tip {
		text-align: center;
		line-height: 80rpx;
		color: #aaa;
		font-size: 24rpx;
		margin-top: 80rpx;
	}

	.loading-tip {
		text-align: center;
		line-height: 60rpx;
		color: #aaa;
		font-size: 22rpx;
	}
</style>