ezhizao_dms_h5/pages/queryLotInfo/index.vue

<template>
	<view style="height: 100%;">
		<view class="tab-container">
			<view :class="['tab-item', isActiveId === 1 ? 'active': '']" @click="handleClickTab(1)">批次信息</view>
			<view :class="['tab-item', isActiveId === 2 ? 'active': '']" @click="handleClickTab(2)">领料信息</view>
			<view :class="['tab-item', isActiveId === 3 ? 'active': '']" @click="handleClickTab(3)">历史报工</view>
			<view :class="['tab-item', isActiveId === 4 ? 'active': '']" @click="handleClickTab(4)">检查信息</view>
			<view :class="['tab-item', isActiveId === 5 ? 'active': '']" @click="handleClickTab(5)">分选信息</view>
		</view>
		<scroll-view class="scroll-container" scroll-y scroll-with-animation :scroll-into-view="scrollToId"
			:scroll-top="scrollTop" @scrolltoupper="handleScrollToUpper" @scrolltolower="handleScrollToLower"
			@scroll="handleScroll">
			<!-- 批次信息 -->
			<view id="item1" class="scroll-item">
				<view> <text style="font-size: 32rpx;display: flex;justify-content: center;">批次信息</text>
				</view>
				<view v-if="lotData==null" class="no-date">
					<text>暂无数据</text>
				</view>
				<view v-else>
					<view class="item-info uni-row" style="margin-top: 16rpx;"> <text class="label">批次号:</text>
						<text class="label right" style="font-size: 30rpx;color: black;">{{ lotData['lotCode'] }}</text>
					</view>
					<view class="item-info uni-row"> <text class="label">产品描述:</text>
						<text class="label right ">{{ lotData['productDescription'] }}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">箱号:</text>
						<text class="label right">{{ lotData['carrierName']}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">投产量:</text>
						<text
							class="label right">{{ lotData['prevProcess'] ? lotData['processQualifiedNum'] : lotData['productionQuantity']}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">合格数量:</text>
						<text class="label right">{{ lotData['totalQuantityNum']}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">已完成工序:</text>
						<text
							class="label right">{{ lotData.prevProcess && lotData['prevProcess'] != "" ? lotData['prevProcess'].processAlias : '-'}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">待加工工序:</text>
						<view class="label right uni-row">
							<text
								class="label right">{{ lotData.currentProcess && lotData['currentProcess'] != "" ? lotData['currentProcess'].processAlias : '-'}}</text>
							(<view style="color:  #1684fc;" @click.stop="handleClickProcessList(lotData)">
								&nbsp;工艺列表&nbsp;
							</view>)
						</view>
					</view>
					<view class="item-info uni-row">
						<text class="label">下道工序:</text>
						<text
							class="label right">{{ lotData.nextProcess && lotData['nextProcess'] != "" ? lotData['nextProcess'].processAlias : '-'}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">当前设备:</text>
						<text
							class="label right">{{ lotData['currentEquipmentCode'] && lotData['currentEquipmentCode'] != "" ? lotData['currentEquipmentCode'] : '-'}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">当前操作者:</text>
						<text class="label right">{{ lotData['currentNickName']}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">批次状态:</text>
						<text
							class="label right">{{ lotData['status'] == 1 ?"进行中":lotData['status'] == 3?"周转中":lotData['status'] == 2?"待领取":lotData['status'] == 4?"已送达":lotData['status'] == 5?"已完成":"未开始"}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">所在区域:</text>
						<text class="label right">{{getPlaceText(lotData)}}</text>
					</view>
				</view>
			</view>
			<!-- 领料信息 -->
			<view id="item2" class="scroll-item">
				<view> <text style="font-size: 32rpx;display: flex;justify-content: center;">领料信息</text></view>
				<view v-if="furnaceData==null" class="no-date">
					<text>暂无数据</text>
				</view>
				<view v-else>
					<view class="item-info uni-row" style="margin-top: 16rpx;">
						<text class="label">炉号</text>
						<text id="manufacturer"
							class="label right">{{furnaceData['furnaceNumber'] ? furnaceData['furnaceNumber'] : '-'}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">计划单号</text>
						<text id="manufacturer"
							class="label right">{{ furnaceData['productionPlanNo'] ? furnaceData['productionPlanNo'] : '-'}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">序号</text>
						<text
							class="label right">{{ furnaceData['lineNumber'] ? furnaceData['lineNumber'] : '-'}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">厂家</text>
						<text class="label right">{{ furnaceData['factory'] ? furnaceData['factory'] : '-'}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">牌号</text>
						<text
							class="label right">{{ furnaceData['brandNumber'] ?furnaceData['brandNumber'] : '-' }}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">规格</text>
						<text class="label right">{{ furnaceData['spec'] ?furnaceData['spec'] : '-' }}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">形状</text>
						<text class="label right">{{ furnaceData['shape'] ?furnaceData['shape'] : '-'}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">材料直径</text>
						<text class="label right">{{ furnaceData['diameter'] ? furnaceData['diameter'] : '-' }}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">原料编码</text>
						<text
							class="label right">{{ furnaceData['rawMaterialCode'] ? furnaceData['rawMaterialCode'] : '-' }}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">来料日期</text>
						<text
							class="label right">{{ furnaceData['incomingDate'] ? furnaceData['incomingDate'] : '-' }}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">技术要求1</text>
						<text
							class="label right">{{ furnaceData['firstTechnicalRequirement'] ? furnaceData['firstTechnicalRequirement'] : '-' }}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">技术要求2</text>
						<text
							class="label right">{{ furnaceData['secondTechnicalRequirement'] ?furnaceData['secondTechnicalRequirement'] : '-' }}</text>
					</view>
				</view>
			</view>
			<!-- 历史报工 -->
			<view id="item3" class="scroll-item">
				<view> <text style="font-size: 32rpx;display: flex;justify-content: center;">历史报工</text></view>
				<view v-if="historyData.length == 0" class="no-date">
					<text>暂无数据</text>
				</view>
				<view v-for="(item, index) in historyData" :key="index" class="list-item" id="historyData">
					<view class="item-info uni-row" style="margin-top: 16rpx;"> <text class="label ">工序:</text>
						<text class="label right">{{ item['processAlias'] }}</text>
					</view>
					<view class="item-info uni-row"> <text class="label">投产量:</text>
						<text class="label right ">{{ item['prodNum'] }}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">合格数量:</text>
						<text class="label right">{{ item['qualifiedNum']}}</text>
					</view>
					<view v-for="(info, index) in item.rejectList" :key="index">
						<view class="item-info uni-row">
							<text class="label">废品信息:</text>
							<text class="label right">{{ info['reason']!=""?info['reason']:'-'}}</text>
						</view>
						<view class="item-info uni-row">
							<text class="label">废品数量:</text>
							<text class="label right">{{ info['rejectNum']}}</text>
						</view>
					</view>
					<view class="item-info uni-row">
						<text class="label">设备:</text>
						<text
							class="label right">{{ item['equipmentDetailCode'] ?item['equipmentDetailCode']:'-'}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">操作者:</text>
						<text class="label right">{{ item['nickName']}}</text>
					</view>
					<view v-if="index!=historyData.length-1" class='middle'>
						<view class='segment'></view>
						<view class='segment'></view>
					</view>
				</view>
			</view>
			<!-- 检查信息 -->
			<view id="item4" class="scroll-item">
				<view> <text style="font-size: 32rpx;display: flex;justify-content: center;">检查信息</text></view>
				<view v-if="inspectionData.length == 0" class="no-date">
					<text>暂无数据</text>
				</view>
				<view v-else v-for="(item, index) in inspectionData" :key="index" class="list-item" id="inspectionData">
					<view class="item-info uni-row" style="margin-top: 16rpx;"> <text class="label ">检查类型:</text>
						<text class="label right">{{ getType(item.type) }}</text>
					</view>
					<view class="item-info uni-row" style="margin-top: 16rpx;"> <text class="label ">工序:</text>
						<text class="label right">{{ item['processAlias'] }}</text>
					</view>
					<view class="item-info uni-row"> <text class="label">检查员:</text>
						<text class="label right ">{{ item['reviewerName'] }}</text>
					</view>
					<view v-if="item.processInspectionDetails && item.processInspectionDetails.length>0"
						v-for="(info, index) in item.processInspectionDetails" :key="index">
						<view class="item-info uni-row">
							<text class="label">检测项目:</text>
							<text class="label right">{{ info['checkStandard']}}</text>
						</view>
						<view class="item-info uni-row">
							<text class="label">检测结果:</text>
							<text class="label right">{{ info['checkResult'] !=""?info['checkResult'] :'-'}}</text>
						</view>
						<view v-if="item.type =='outsourcedInspection '" class="item-info uni-row">
							<text class="label">废品数量:</text>
							<text class="label right">{{ info['rejectNum']}}</text>
						</view>
					</view>
					<!-- 拍照上传部分 -->
					<view v-if="item.processInspectionPictureList && item.processInspectionPictureList.length>0"
						class="item-info uni-row">
						<text class="label">拍照上传:</text>
						<text class=" label right">
							<uni-file-picker v-model="item.processInspectionPictureList" :readonly="true"
								return-type="array" :image-styles="imageStyles" file-mediatype="image"
								class="my-files"></uni-file-picker>
						</text>
					</view>

					<view v-for="(data, index) in item.dayworkItemConsults" :key="index">
						<view class="item-info uni-row">
							<text class="label">咨询信息:</text>
							<text class="label right">{{ data['content']}}</text>
						</view>
						<view class="item-info uni-row">
							<text class="label">咨询结果:</text>
							<text class="label right">{{ data['status'] == 0?"未回复":data['result']}}</text>
						</view>
						<view class="item-info uni-row">
							<text class="label">技术人员:</text>
							<text class="label right">{{ data['technicianName']}}</text>
						</view>
					</view>
					<view class="item-info uni-row">
						<text class="label">备注:</text>
						<text class="label right">{{ item['remark'] !="" ?item['remark']:'-'}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">检查结果:</text>
						<text class="label right">{{ item['status'] == 0?"待确认":item['status'] == 1?"合格":"不合格"}}</text>
					</view>
					<view v-if="index!=inspectionData.length -1" class='middle'>
						<view class='segment'></view>
						<view class='segment'></view>
					</view>
				</view>
			</view>
			<!-- 分选信息 -->
			<view id="item5" class="scroll-item">
				<view> <text style="font-size: 32rpx;display: flex;justify-content: center;">分选信息</text></view>
				<view v-if="sortData.length == 0" class="no-date">
					<text>暂无数据</text>
				</view>
				<view v-else v-for="(item, index) in sortData" :key="index" class="list-item" id="sortData">

					<view class="item-info uni-row" style="margin-top: 16rpx;"> <text class="label ">工序:</text>
						<text class="label right">{{ item['processAlias'] }}</text>
					</view>
					<view class="item-info uni-row"> <text class="label">分选人员:</text>
						<text class="label right ">{{ item['nickName'] }}</text>
					</view>
					<view class="item-info uni-row"> <text class="label">分选设备:</text>
						<text class="label right ">{{ item['equipmentDetailCode'] }}</text>
					</view>
					<view v-for="(info, index) in item.rejectList" :key="index">
						<view class="item-info uni-row">
							<text class="label">检测项目:</text>
							<text class="label right">{{ info['checkStandard']}}</text>
						</view>
						<view class="item-info uni-row">
							<text class="label">检测结果:</text>
							<text class="label right">{{ info['reason'] !=""?info['reason'] :'-'}}</text>
						</view>
						<view class="item-info uni-row">
							<text class="label">废品数量:</text>
							<text class="label right">{{ info['rejectNum']}}</text>
						</view>
					</view>
					<view v-for="(data, index) in item.consults" :key="index">
						<view class="item-info uni-row">
							<text class="label">咨询信息:</text>
							<text class="label right">{{ data['content']}}</text>
						</view>
						<view class="item-info uni-row">
							<text class="label">咨询结果:</text>
							<text class="label right">{{ data['status'] == 0?"未回复":data['result']}}</text>
						</view>
						<view class="item-info uni-row">
							<text class="label">技术人员:</text>
							<text class="label right">{{ data['technicianName']}}</text>
						</view>
					</view>
					<view class="item-info uni-row">
						<text class="label">备注:</text>
						<text class="label right">{{ item['remark'] !="" ?item['remark']:'-'}}</text>
					</view>
					<view v-if="index!=sortData.length -1" class='middle'>
						<view class='segment'></view>
						<view class='segment'></view>
					</view>
				</view>
			</view>

		</scroll-view>
		<uni-drawer ref="showRight" mode="right" :mask-click="true" style="height: 100%;">
			<view style="text-align: center; font-size: 48rpx; padding: 48rpx 0 24rpx 0;">工艺列表</view>
			<view style="font-size: 24rpx;text-align: center;color: red; margin-bottom: 16rpx;">
				蓝色工序为当前工序
			</view>
			<scroll-view scroll-y="true" style="height: 83%;" @touchmove.stop>
				<view v-for="(item,index) in curProcessAfte" :key="index"
					style="padding: 8rpx 5% 8rpx 14%; border-top: 1px solid #cccccc">
					<text :style="{ color: showStatusColor(item) }">{{ index + 1 }}.{{item.processAlias}}</text>
				</view>
			</scroll-view>
		</uni-drawer>
		<!-- 	<view class="bottom-btn-container uni-row">
		<button class="bottom-btn" @click="init()">扫码查询</button>
	</view>
	<dialog-selectLot ref="selectLotDialog" @submit="handleDoIt" /> -->

		<view class="bottom-btn-container uni-row">
			<button class="bottom-btn" @click="init()">扫码查询</button>
		</view>
	</view>
	<dialog-selectLot ref="selectLotDialog" @submit="handleDoIt" />
	<QrScanner v-if="showQrCodeReader" @decode="onDecodeHandler" @close="qrReaderClose" />
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import QrScanner from '../vueQrCode/index.vue'
	import {
		onLoad,
		onReady,
		onUnload,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getLotInformation
	} from '@/api/business/dayWork.js'
	import {
		getFurnaceNoInfoByDaywork
	} from '@/api/business/furnaceNoInfo.js'
	import {
		getDayworkCarrierByCarrierCode
	} from '@/api/business/dayworkCarrier.js'
	import {
		getDayworkItemByDayworkId,
		getSortItemByDayworkId
	} from '@/api/business/dayWorkItem.js'
	import {
		getProcessInspectionByDayworkId
	} from '@/api/business/processInspection.js'

	const scrollTop = ref(0)
	// scrollToId 默认值为空
	const scrollToId = ref('')
	const showQrCodeReader = ref(false);
	const selectLotDialog = ref(null)
	const selectedInfo = ref({})
	const curProcessAfte = ref([])
	const lotData = ref(null) //批次信息
	const furnaceData = ref(null) //领料信息
	const historyData = ref([]) //历史报工
	const inspectionData = ref([]) //检查信息
	const sortData = ref([]) //分选信息
	const showRight = ref(null) // 抽屉
	const dayworkId = ref(null)
	const isActiveId = ref(1)
	const urlList = JSON.parse(uni.getStorageSync('baseUrl'))
	const webHost = ref(urlList.baseUrl)
	const imageStyles = {
		width: 50,
		height: 50
	}
	// 查询主对象
	let query = null
	// 定义tab2的【SelectorQuery】对象
	let item2Query = null

	// 定义tab3的【SelectorQuery】对象
	let item3Query = null

	// 定义tab4的【SelectorQuery】对象
	let item4Query = null

	onLoad(() => {
		init();
	})

	function init() {
		showQrCodeReader.value = true;
		// handleScanCode()
	}
	onReady(() => {
		query = uni.createSelectorQuery().in(this)
		// 获取 tab2 的【SelectorQuery】，一定要在页面加载完之后，获取该对象，不要在【滚动】事件中获取，
		// 那会创建很多个【SelectorQuery】，导致效率低下
		item2Query = query.select("#item2").boundingClientRect((data) => {
			if (data.top >= 32 && data.top <= 80) {
				isActiveId.value = 2
			}
		})
		item3Query = query.select("#item3").boundingClientRect((data) => {
			if (data.top >= 32 && data.top <= 80) {
				isActiveId.value = 3
			}
		})
		item4Query = query.select("#item4").boundingClientRect((data) => {
			if (data.top >= 32 && data.top <= 80) {
				isActiveId.value = 4
			}
		})
	})

	//H5扫码器回调
	function onDecodeHandler(data) {
		showQrCodeReader.value = false;
		console.log(data);
		let vehicleObj = {

			carrierCode: data
		};
		if (!vehicleObj.carrierCode || vehicleObj.carrierCode == "") {
			uni.showToast({
				icon: "none",
				title: "请扫载具码",
				duration: 1000
			})
			return;
		}
		getDayworkCarrierByCarrierCode({
			carrierCode: vehicleObj.carrierCode,
		}).then(response => {
			if (response.code == 200) {
				if (response.data.length > 0) {
					if (response.data.length > 1) {
						selectLotDialog.value.open(response.data);
					} else {
						handleDoIt(response.data[0])
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: "该箱未绑定批次,请重新扫码",
						duration: 2000
					})
				}
			}
		})
	}


	//H5扫码器关闭
	function qrReaderClose() {
		showQrCodeReader.value = false;
	}
	//扫码
	// function handleScanCode() {
	// 	//引入原生插件
	// 	const mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
	// 	if (mpaasScanModule) {
	// 		// 调用插件的 mpaasScan 方法
	// 		mpaasScanModule.mpaasScan({
	// 				// 扫码识别类型，参数可多选，qrCode、barCode，
	// 				// 如不设置，默认识别所有扫码类型，可能有些许影响识别效率
	// 				scanType: ["qrCode", "barCode"],
	// 				// 是否隐藏相册，默认false不隐藏
	// 				hideAlbum: false,
	// 			},
	// 			(ret) => {
	// 				console.log(ret);
	// 				let vehicleObj = {
	// 					carrierCode: ret.resp_result
	// 				};
	// 				if (!vehicleObj.carrierCode || vehicleObj.carrierCode == "") {
	// 					uni.showToast({
	// 						icon: "none",
	// 						title: "请扫载具码",
	// 						duration: 1000
	// 					})
	// 					return;
	// 				}
	// 				getDayworkCarrierByCarrierCode({
	// 					carrierCode: vehicleObj.carrierCode,
	// 				}).then(response => {
	// 					if (response.code == 200) {
	// 						if (response.data.length > 0) {
	// 							if (response.data.length > 1) {
	// 								selectLotDialog.value.open(response.data);
	// 							} else {
	// 								handleDoIt(response.data[0])
	// 							}
	// 						} else {
	// 							uni.showToast({
	// 								icon: 'none',
	// 								title: "该箱未绑定批次,请重新扫码",
	// 								duration: 2000
	// 							})
	// 						}
	// 					}
	// 				})
	// 			}
	// 		);
	// 	} else {
	// 		// 测试时用
	// 		getDayworkCarrierByCarrierCode({
	// 			carrierCode: '000762'
	// 		}).then(res => {
	// 			if (res.code == 200) {
	// 				if (res.data.length > 0) {
	// 					if (res.data.length > 1) {
	// 						selectLotDialog.value.open(res.data);
	// 					} else {
	// 						handleDoIt(res.data[0])
	// 					}
	// 				} else {
	// 					uni.showToast({
	// 						icon: 'none',
	// 						title: "该箱未绑定批次,请重新扫码",
	// 						duration: 2000
	// 					})
	// 				}
	// 			}
	// 		})
	// 	}
	// }

	function handleDoIt(data) {
		dayworkId.value = data.value
		getLotInfo()
		getFurnaceInfo()
		getHistoryReport()
		getInspection()
		getSortReport()
	}
	//查询批次信息
	function getLotInfo() {
		getLotInformation({
			id: dayworkId.value,
		}).then(response => {
			if (response.code == 200) {
				lotData.value = response.data
			}
		})
	}
	//查询领料信息
	function getFurnaceInfo() {
		getFurnaceNoInfoByDaywork({
			dayworkId: dayworkId.value
		}).then(response => {
			if (response.code == 200) {
				furnaceData.value = response.data
			}
		})
	}
	//查询历史报工
	function getHistoryReport() {
		getDayworkItemByDayworkId({
			dayworkId: dayworkId.value
		}).then(response => {
			if (response.code == 200) {
				historyData.value = response.data
			}
		})
	}
	//查询检查信息
	function getInspection() {
		getProcessInspectionByDayworkId({
			dayworkId: dayworkId.value
		}).then(response => {
			if (response.code == 200) {
				response.data.forEach(item => {
					if (item.processInspectionPictureList && item.processInspectionPictureList.length >
						0) {
						item.processInspectionPictureList.forEach(i => {
							i.url = webHost.value + i.url
						})
					}
				})
				inspectionData.value = response.data
			}
		})
	}
	//查询分选信息
	function getSortReport() {
		getSortItemByDayworkId({
			dayworkId: dayworkId.value
		}).then(response => {
			if (response.code == 200) {
				sortData.value = response.data
			}
		})
	}

	function handleClickProcessList(item) {
		let curProcessAfterList = [];
		console.log("工序列表", item)

		let nextIndex = 0;
		// for (let i = 0; i < item.processSequence.length; i++) {
		// 	if (item.currentProcess.processStepNumber == item.processSequence[i].processStepNumber) {
		// 		nextIndex = i;
		// 	}
		// }
		// for (let i = 0; i < item.processSequence.length; i++) {
		// 	if (i >= nextIndex) {
		// 		curProcessAfterList.push(item.processSequence[i]);
		// 	}
		// }
		// if (item.status == 3) {
		// 	curProcessAfterList.splice(0, 1)
		// }
		// console.log(curProcessAfterList)
		// curProcessAfte.value = curProcessAfterList;
		curProcessAfte.value = item.processSequence
		showRight.value.open();
	}
	//获得检测类型
	function getType(data) {
		if (data == "outsourcedInspector") {
			return "外协检"
		} else if (data == "patrolInspection") {
			return "巡检"
		} else if (data == "deliveryInspection") {
			return "交检"
		} else if (data == "factoryInspection") {
			return "出厂检"
		} else if (data == "firstArticleInspection") {
			return "首件检"
		} else {
			return "仪器室检"
		}
	}
	const showStatusColor = (item) => {
		// console.log(status)
		console.log(item, 111)
		console.log(lotData.value, 222)
		if (item.processStepNumber == lotData.value.currentProcess.processStepNumber) {
			return '#3482ff'
		}

	}
	// const handleClickTab = (val) => {
	// 	//scrollTop.value = top
	// 	scrollToId.value = 'item' + val
	// 	isActiveId.value = val
	// }
	function handleClickTab(id) {
		isActiveId.value = id;
		const element = document.getElementById(`item${id}`);
		console.log(element)
		if (element) {
			element.scrollIntoView({
				behavior: 'smooth'
			});
		}
	}

	function getPlaceText(item) {
		let place = item.dayworkItemList[item.dayworkItemList.length - 1].place == "" ? item.dayworkItemList[item
				.dayworkItemList.length - 1].turnoverArea == "" ?
			'-' : '默认周转区' : item.dayworkItemList[item
				.dayworkItemList.length - 1].place
		let deptName = item.dayworkItemList[item.dayworkItemList.length - 1].deptName
		return place == "-" ? deptName == "" ? "-" : deptName : deptName + "-" + place
	}
	const handleScrollToUpper = () => {
		isActiveId.value = 1
	}
	const handleScrollToLower = () => {
		isActiveId.value = 5
	}
	const handleScroll = () => {
		// 在滚动时候，把scrollToId的值清空，否则，会有点击tab，页面不滚动的情况，比如：先点击了tab1，然后滚动到最低端，这时候，再点击tab1，将没反应。
		// 原因是：scroll-view 的 【scroll-into-view】属性值未改变时，将不会触发滚动
		scrollToId.value = ''

		// 这里的item2Query……等对象，必须在最外层定义好，滚动的时候，只获取结果，执行回调
		item2Query.exec()
		item3Query.exec()
		item4Query.exec()
	}
</script>

<style lang="scss">
	.tab-container {
		// display: flex;
		// flex-direction: row;
		// height: 32px;
		position: fixed;
		top: 0;
		height: 32px;
		display: flex;
		flex-direction: row;
		margin-top: 40px;
		width: 100%;

		.tab-item {
			display: flex;
			flex-direction: row;
			flex: 1;
			font-size: 14px;
			color: #666;
			align-items: center;
			justify-content: center;
		}
	}

	.scroll-container {
		display: block;
		padding-bottom: 60px;
		height: 80%;
		background-color: #f5f5f5;
		position: fixed;
		top: 72px;
	}

	.tab-item.active {
		color: rgba(25, 137, 250, 1);
		font-weight: 700;
	}

	.scroll-item {
		background-color: #fff;
		padding: 24rpx;
		margin: 0 24rpx;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		border-radius: 8rpx;

		.no-date {
			text-align: center;
			font-size: 12px;
			color: #666;
			padding-top: 16px;
		}

		.title-container {
			justify-content: space-between;
			margin-top: 8rpx;
			margin-bottom: 16rpx;

			.title {
				height: 48rpx;
				align-items: center;

				.label {
					color: #1684fc;
					font-size: 32rpx;
					font-weight: bold;

					&.code {
						color: #000000;
						margin-left: 32rpx;
					}
				}
			}

		}

		.middle {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center
		}

		.segment {
			width: 80%;
			background-color: rgba(213, 213, 213, 1);
			border: 1rpx solid rgba(213, 213, 213, 1);
			margin: 16px 0;
		}

		.item-info {
			margin-bottom: 16rpx;

			.label {
				font-size: 28rpx;
				width: 160rpx;
				color: #808080;

				&.right {
					flex: 1;
					color: #000000;
				}
			}
		}

		.right-info {
			justify-content: flex-end;
			margin-top: 2rpx;

			.label {
				font-size: 28rpx;
				color: #808080;
			}
		}
	}

	.bottom-btn-container {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		height: 50px;
		border-top: 1px solid #999999;
		padding: 16rpx 32rpx;
		align-items: center;
		background-color: #fff;
		justify-content: space-evenly;

		.bottom-btn {
			flex: 1;
			font-size: 28rpx;
			color: #FFFFFF;
			background-color: #1684fc;
		}
	}

	.my-files {
		display: flex;
		justify-content: center;

		:deep(.uni-file-picker__container) {
			flex-direction: row;

		}
	}
</style>