ezhizao_dms_app/pages/processInspection/index.vue

<template>
	<view class="page-container uni-column">
		<view class="search-container uni-row">
			<input type="text" v-model="keywords" placeholder="请输入关键字" />
			<view class="btn uni-row" @click="getList">搜索</view>
			<!-- <uni-icons type="scan" size="24" /> -->
		</view>
		<view class="scan-btn uni-row" style="min-height: 80rpx;" @click.stop="handleAddProcessInspection">新增序检</view>
		<view class="daywork-item uni-column" v-for="(item, index) in inspecionList" :key="index"
			@click="handleSelection(item)">
			<view class="lot-code uni-row">
				<text>批次号：{{ item.lotCode }}</text>
				<text :style="selectType(item)">{{ selectText(item) }}</text>
				<uni-icons type="right" size="16" />
			</view>
			<view class="info">
				<view class="info-row uni-row">
					<view class="label">序检箱号：</view>
					<view class="value">{{ item.carrierCode }}</view>
					<view class="label">检察员：</view>
					<view class="value">{{ item.nickName }}</view>
				</view>
				<view class="info-row uni-row">
					<view class="label">检查数量：</view>
					<view class="value">{{ item.examiningNum }}</view>
					<view class="label">不合格数：</view>
					<view class="value">{{ item.rejectNum }}</view>
				</view>
				<view class="info-row uni-row">
					<view class="label">产品描述：</view>
					<view class="value">{{ item.productDescription }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		getProcessInspecionList,
		getLotInfo
	} from '@/api/business/processInspection.js'
	import {
		onLoad,
		onReady,
		onUnload,
		onShow
	} from '@dcloudio/uni-app'
	import {
		store
	} from '@/store/index.js'
	const keywords = ref('')
	const inspecionList = ref([])

	const range = [{
		value: 0,
		text: "待确认",
		type: "color: #fcab53"
	}, {
		value: 1,
		text: "合格",
		type: "color: #55ff7f"
	}, {
		value: 2,
		text: "不合格",
		type: "color: #ff0c2c"
	}]

	const quer = ref({}) //用于查询


	/***************************** 页面生命周期函数 *****************************/
	onShow(() => {
		uni.showLoading({
			title: '加载中'
		});
		console.log("store", store.userInfo);
		quer.value.userId = store.userInfo.userId;
		getProcessInspecionList(quer.value).then(res => {
			console.log("res", res);
			if (res.code == 200) {
				inspecionList.value = res.rows;
				uni.hideLoading();
			}

		});
	})

	/***************************** 定义了一些方法 *****************************/
	function getList() {

		uni.showLoading({
			title: '加载中'
		});
		quer.value.keyword = keywords.value
		getProcessInspecionList(quer.value).then(res => {
			console.log("res", res);
			if (res.code == 200) {
				inspecionList.value = res.rows;
				uni.hideLoading();
			}

		});
	}

	//查看序捡详情
	function handleSelection(item) {
		store.processInspection = item;
		uni.navigateTo({
			url: '/pages/processInspection/form'
		})
	}

	//状态文本
	function selectText(item) {
		for (var i = 0; i < range.length; i++) {
			if (item.status == range[i].value) {
				return range[i].text
			}
		}
	}

	//状态样式
	function selectType(item) {
		for (var i = 0; i < range.length; i++) {
			if (item.status == range[i].value) {
				return range[i].type
			}
		}
	}

	const addProcessInspection = (data) => {
		const info = {
			title: data.title,
			standard: data.standard,
			result: '',
			number: 1
		}
		unfitInfos.value.push(info)
	}

	/***************************** 定义了一些事件 *****************************/
	// 新增序检
	const handleAddProcessInspection = () => {
		uni.navigateTo({
			url: '/pages/processInspection/scan'
		})
	}
	// 添加不合格信息
	const handleShowUnfit = () => {
		uni.navigateTo({
			url: '/pages/processInspection/form'
		})
	}
</script>

<style lang="scss">
	.page-container {
		height: 100%;
		background-color: #ececec;
		font-size: 28rpx;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.search-container {
		border-radius: 12rpx;
		align-items: center;

		input {
			flex: 1;
			background-color: #ffffff;
			height: 64rpx;
			box-sizing: border-box;
			padding: 0 16rpx;
		}

		.btn {
			width: 120rpx;
			height: 64rpx;
			background-color: #1684FC;
			justify-content: center;
			font-size: 24rpx;
			color: #ffffff;
			justify-content: center;
			align-items: center;
		}
	}

	.scan-btn {
		height: 64rpx;
		margin: 32rpx 32rpx 0 32rpx;
		color: #ffffff;
		background-color: #f47c3c;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
	}

	.daywork-item {
		padding: 24rpx;
		background-color: #ffffff;
		margin-top: 24rpx;
		border-radius: 8rpx;

		.lot-code {
			align-items: center;
			justify-content: space-between;
			font-weight: 700;
		}

		.info {
			font-size: 24rpx;
			color: #767676;

			.info-row {
				margin-top: 16rpx;

				.label {
					width: 120rpx;
				}

				.value {
					flex: 1;
				}
			}
		}
	}
</style>