shj-app/scanpages/hj/daily_audit.vue

<template>
	<view class="page-list">
		<!-- 头部过滤区域 -->
		<view class="filter-header">
			<!-- 焊工编号 + 焊接日期 + 单位工程 -->
			<view class="filter-grid">
				<view class="filter-item">
					<view class="filter-btn" @click="handleShowUnitWorkSelect">
						<text class="filter-btn__text" :class="{ 'filter-btn__text--placeholder': !selectedUnitWork }">
							{{ selectedUnitWork?.BaseInfoName || '单位工程' }}
						</text>
						<u-icon name="arrow-down" :size="18" color="#999" />
					</view>
				</view>
				<view class="filter-item">
					<picker class="filter-picker" style="width: 100%" mode="date" :value="weldingDate"
						@change="onDateChange">
						<view class="filter-btn">
							<text class="filter-btn__text" :class="{ 'filter-btn__text--placeholder': !weldingDate }">
								{{ weldingDate || '焊接日期' }}
							</text>
							<u-icon v-if="weldingDate" name="close" :size="20" color="#999" @click.stop="onDateClear" />
							<u-icon v-else name="calendar" :size="24" color="#999" />
						</view>
					</picker>
				</view>
				<view class="filter-item">
					<u-search v-model="pipelineCode" placeholder="请输入管线编号" :show-action="false" shape="square"
						height="70" bg-color="#f5f6f8" @change="handleSearch" />
				</view>
				<view class="filter-item">
					<view class="filter-btn">
						<input class="welder-input" v-model="welderCode" placeholder="焊工编号" confirm-type="search"
							@confirm="handleSearch" @blur="handleSearch" />
					</view>
				</view>
			</view>
		</view>

		<!-- 列表内容 -->
		<scroll-view class="list-scroll" scroll-y refresher-enabled="true" :refresher-triggered="refreshing"
			@refresherrefresh="handleRefresh" @scrolltolower="loadMore">
			<view class="list-wrap">
				<view v-for="(item, index) in listData" :key="item.TempDetailId || index" class="card-item audit-card"
					@click="handleItemClick(item)">
					<!-- 勾选框 -->
					<view v-if="canEdit" class="check-circle" :class="{ 'check-circle--checked': isSelected(item) }"
						@click.stop="toggleSelect(item)">
						<u-icon v-if="isSelected(item)" name="checkmark" :size="24" color="#fff" />
					</view>
					<view class="audit-card__content">
						<view class="card-header">
							<text class="card-code">{{ item.WeldJointCode || '--' }}</text>
							<text class="card-tag" :class="item.AuditState == 1 ? 'status-2' : 'status-1'">
								{{ item.AuditStateText || '待审核' }}
							</text>
						</view>
						<view class="card-body">
							<view class="card-row">
								<text class="row-label">管线编号</text>
								<text class="row-value">{{ item.PipelineCode || '--' }}</text>
							</view>
							<view class="card-row">
								<text class="row-label">焊接日期</text>
								<text class="row-value">{{ fmtDate(item.WeldingDate) }}</text>
							</view>
							<view class="card-row">
								<text class="row-label">焊工</text>
								<text class="row-value">{{ formatWelders(item) }}</text>
							</view>
							<view class="card-row">
								<text class="row-label">焊接方法</text>
								<text class="row-value">{{ item.WeldingMethodCode || '--' }}</text>
							</view>
							<view class="card-row">
								<text class="row-label">提交人</text>
								<text class="row-value">{{ item.SubmitPersonName || '--' }}</text>
							</view>
							<view class="card-row">
								<text class="row-label">提交时间</text>
								<text class="row-value">{{ fmtDateTime(item.SubmitDate) }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 空状态 -->
				<u-empty v-if="!loading && listData.length === 0" mode="list" text="暂无待审核日报"></u-empty>
				<view v-if="loading && listData.length > 0" class="loading-more">
					<u-loading mode="circle" size="32"></u-loading>
					<text>加载中...</text>
				</view>
				<view v-if="!loading && !hasMore && listData.length > 0" class="no-more">
					<text>— 没有更多了 —</text>
				</view>
			</view>
		</scroll-view>

		<view v-if="canEdit" class="audit-bar">
			<view class="audit-bar__all" @click="handleToggleAll">
				<view class="check-circle" :class="{ 'check-circle--checked': isAllSelected }">
					<u-icon v-if="isAllSelected" name="checkmark" :size="24" color="#fff" />
				</view>
				<text class="audit-bar__all-text">全选</text>
			</view>
			<text class="audit-bar__count">已选 {{ selectedIds.length }} 项</text>
			<view class="audit-bar__btns">
				<u-button size="mini" type="error" :disabled="submitting || selectedIds.length === 0"
					:loading="submitting" @click="handleBatchDelete">删除</u-button>
				<u-button size="mini" type="primary" :disabled="submitting || selectedIds.length === 0"
					:loading="submitting" @click="handleTeamAudit">班组审核</u-button>
				<u-button size="mini" type="primary" :disabled="submitting || selectedIds.length === 0"
					:loading="submitting" @click="handleProfessionalAudit">专工审核</u-button>
			</view>
		</view>

		<!-- 单位工程选择弹窗 -->
		<nbd-select v-model="showUnitWorkSelect" :show-search="true" title="请选择单位工程" :list="unitWorkList"
			label-key="BaseInfoName" value-key="BaseInfoId" v-model:model="selectedUnitWork"
			@confirm="handleUnitWorkConfirm" />
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		storeToRefs
	} from 'pinia'
	import {
		useUserStore,
		useMenuStore
	} from '@/store'
	import {
		reqProjectWorkArea
	} from '@/api/base.js'
	import {
		reqPendingWeldingDailyList,
		reqTeamAuditWeldingDaily,
		reqAuditWeldingDaily,
		reqDeleteWeldingDaily
	} from '@/api/hj.js'

	const userStore = useUserStore()
	const menuStore = useMenuStore()
	const {
		userInfo,
		currentProject
	} = storeToRefs(userStore)
	const canEdit = computed(() => menuStore.canEditFunc('dailyAudit'))
	const submitting = ref(false)

	const uniqIds = (ids) => [...new Set((ids || []).filter(Boolean))]

	// ===== 筛选条件 =====
	const pipelineCode = ref('')
	const welderCode = ref('')
	const weldingDate = ref('')

	const onDateChange = (e) => {
		weldingDate.value = e.detail.value
		resetAndLoad()
	}

	const onDateClear = () => {
		weldingDate.value = ''
		resetAndLoad()
	}

	// ===== 单位工程选择 =====
	const showUnitWorkSelect = ref(false)
	const selectedUnitWork = ref(null)
	const unitWorkList = ref([])

	const handleShowUnitWorkSelect = () => {
		reqProjectWorkArea(currentProject.value.ProjectId).then(res => {
			unitWorkList.value = [{
				BaseInfoId: '',
				BaseInfoName: '全部'
			}, ...(res.data || [])]
			showUnitWorkSelect.value = true
		})
	}

	const handleUnitWorkConfirm = (item) => {
		selectedUnitWork.value = item?.BaseInfoId ? item : null
		showUnitWorkSelect.value = false
		resetAndLoad()
	}

	// ===== 列表数据 =====
	const listData = ref([])
	const loading = ref(false)
	const refreshing = ref(false)
	const hasMore = ref(true)
	const currentPage = ref(1)
	const pageSize = 20

	const fetchData = async (isRefresh = false) => {
		if (loading.value || (!isRefresh && !hasMore.value)) return
		loading.value = true
		if (isRefresh) refreshing.value = true
		try {
			const res = await reqPendingWeldingDailyList({
				projectId: currentProject.value?.ProjectId,
				unitWorkId: selectedUnitWork.value?.BaseInfoId || '',
				weldingDate: weldingDate.value || '',
				pipelineCode: pipelineCode.value || '',
				welderCode: welderCode.value || '',
				pageIndex: currentPage.value,
				pageSize
			})
			const pageData = res.data?.list || res.data?.getDataList || (Array.isArray(res.data) ? res.data : [])
			if (isRefresh) {
				listData.value = pageData
				selectedIds.value = []
			} else {
				listData.value = [...listData.value, ...pageData]
			}
			const totalCount = Number(res.data?.totalCount ?? res.data?.pageCount ?? 0)
			if (totalCount > 0) {
				hasMore.value = listData.value.length < totalCount
			} else {
				hasMore.value = pageData.length >= pageSize
			}
		} catch (error) {
			console.error('加载待审核日报失败:', error)
			if (!isRefresh && currentPage.value > 1) currentPage.value--
		} finally {
			loading.value = false
			refreshing.value = false
		}
	}

	const resetAndLoad = () => {
		currentPage.value = 1
		hasMore.value = true
		listData.value = []
		fetchData(true)
	}

	const handleRefresh = () => {
		resetAndLoad()
	}

	const handleSearch = () => {
		resetAndLoad()
	}

	const loadMore = () => {
		if (!loading.value && hasMore.value) {
			currentPage.value++
			fetchData(false)
		}
	}

	// ===== 勾选 =====
	const selectedIds = ref([])

	const isSelected = (item) => selectedIds.value.includes(item.TempDetailId)

	const toggleSelect = (item) => {
		const id = item.TempDetailId
		const idx = selectedIds.value.indexOf(id)
		if (idx > -1) {
			selectedIds.value.splice(idx, 1)
		} else {
			selectedIds.value.push(id)
		}
	}

	const isAllSelected = computed(() =>
		listData.value.length > 0 && selectedIds.value.length === listData.value.length
	)

	const handleToggleAll = () => {
		if (isAllSelected.value) {
			selectedIds.value = []
		} else {
			selectedIds.value = uniqIds(listData.value.map(item => item.TempDetailId))
		}
	}

	const getSelectedIds = () => {
		const ids = uniqIds(selectedIds.value)
		if (!ids.length) {
			uni.showToast({
				title: '请先选择要操作的日报',
				icon: 'none'
			})
			return []
		}
		return ids
	}

	const runBatch = ({
		title,
		request
	}) => {
		if (submitting.value) return
		const ids = getSelectedIds()
		if (!ids.length) return
		uni.showModal({
			title: '信息提示',
			content: `确定${title}选中的 ${ids.length} 条日报吗？`,
			success: async ({
				confirm
			}) => {
				if (!confirm) return
				submitting.value = true
				try {
					await request(ids)
				} catch (err) {
					submitting.value = false
					return
				}
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
				submitting.value = false
				resetAndLoad()
			}
		})
	}

	const handleTeamAudit = () => {
		runBatch({
			title: '班组审核',
			request: (ids) => reqTeamAuditWeldingDaily({
				TempDetailIds: ids,
				AuditMan: userInfo.value?.PersonId
			})
		})
	}

	const handleProfessionalAudit = () => {
		runBatch({
			title: '专工审核',
			request: (ids) => reqAuditWeldingDaily({
				TempDetailIds: ids,
				AuditMan: userInfo.value?.PersonId
			})
		})
	}

	const handleBatchDelete = () => {
		runBatch({
			title: '删除',
			request: (ids) => reqDeleteWeldingDaily({
				TempDetailIds: ids
			})
		})
	}

	// ===== 跳转详情 =====
	const handleItemClick = (item) => {
		uni.navigateTo({
			url: `/scanpages/hj/daily_audit_detail?id=${item.TempDetailId}`
		})
	}

	// ===== 工具 =====
	const fmtDate = (val) => {
		if (!val) return '--'
		return String(val).slice(0, 10)
	}

	const fmtDateTime = (val) => {
		if (!val) return '--'
		return String(val).slice(0, 16).replace('T', ' ')
	}

	// 焊工展示：盖面/打底
	const formatWelders = (item) => {
		const cover = item.CoverWelderCode || ''
		const backing = item.BackingWelderCode || ''
		if (cover && backing && cover !== backing) return `${cover}/${backing}`
		return cover || backing || '--'
	}

	// ===== 生命周期 =====
	onShow(() => {
		resetAndLoad()
	})
</script>

<style lang="scss" scoped>
	$primary: $app-primary;

	.page-list {
		height: calc(100vh - var(--window-top, 0px));
		overflow: hidden;
	}

	.filter-header {
		.filter-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 12rpx;
		}

		.filter-item {
			min-width: 0;
			width: 100%;
			height: 70rpx;
			display: flex;
			align-items: center;
		}

		.filter-picker {
			flex: 1 1 0;
			width: 100%;
			min-width: 0;
			height: 70rpx;
			display: block;
			box-sizing: border-box;
		}

		.filter-btn {
			width: 100%;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #f5f6f8;
			border-radius: 12rpx;
			padding: 0 16rpx;
			box-sizing: border-box;

			&__text {
				flex: 1;
				min-width: 0;
				font-size: 26rpx;
				line-height: 70rpx;
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				&--placeholder {
					color: #999;
				}
			}
		}

		.welder-input {
			width: 100%;
			height: 100%;
			font-size: 28rpx;
			color: #333;
		}

		:deep(.u-search) {
			width: 100%;
			height: 100%;
		}

		:deep(.u-content) {
			height: 70rpx !important;
			border-radius: 12rpx !important;
			box-sizing: border-box;
		}
	}

	.check-circle {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 2rpx solid #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		background: #fff;

		&--checked {
			background: $primary;
			border-color: $primary;
		}
	}

	.audit-card {
		display: flex;
		align-items: flex-start;
		gap: 20rpx;

		.check-circle {
			margin-top: 8rpx;
		}

		&__content {
			flex: 1;
			min-width: 0;
		}
	}

	.list-scroll {
		flex: 1;
		min-height: 0;
		padding-bottom: 0;
	}

	.list-wrap {
		padding-bottom: 24rpx;
	}

	.audit-bar {
		flex-shrink: 0;
		position: relative;
		z-index: 20;
		background: #ffffff;
		padding: 16rpx 24rpx;
		padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 12rpx;
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);

		&__all {
			display: flex;
			align-items: center;
			gap: 10rpx;
		}

		&__all-text {
			font-size: 28rpx;
			color: #333;
		}

		&__count {
			flex: 1;
			font-size: 26rpx;
			color: #999;
		}

		&__btns {
			display: flex;
			flex: 1 0 100%;
			gap: 12rpx;

			:deep(.u-btn) {
				flex: 1;
				min-width: 0;
				height: 64rpx;
				font-size: 24rpx;
				border-radius: 8rpx;
				margin: 0;
				padding: 0 8rpx;
			}
		}
	}
</style>