ckgl/pages/colorBlank/chemical.vue

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { formatDate } from '../../utils/date';
	import { showToast } from 'vant';
	import { getAction } from '../../common/http';

	const form = ref({ ybrq: formatDate(new Date()), list: [1, 2, 3, 4, 5], } as any)
	const showPicker = ref(false)
	const show = ref(false)
	const popuList = ref([] as any[])
	const list = ref([] as any[])

	onMounted(() => {
		getAction('/extraOption').then((res : any) => {
			if (res.code === 200) {
				list.value = JSON.parse(res.data.payload)
				console.log(list.value);
			}
		})
	})

	const chooseDate = () => {
		show.value = true
	}
	const onConfirmDate = (val : any) => {
		form.value.ybrq = formatDate(val)
		show.value = false
	}
	const onClickLeft = () => {
		history.back()
	}
	const dataType = ref({} as any)
	//选择框事件
	const choosePic = (type : any) => {
		showPicker.value = true
		dataType.value = type
		popuList.value = type.options.map((l : any) => ({ text: l.name, value: l.default }))
	}
	//选择框确认
	const pickerConfirm = (val : any) => {
		dataType.value.scz = val.selectedOptions[0].text
		dataType.value.pdx = val.selectedOptions[0].value ? '符合' : '不符合'
		showPickerCancel()
	}
	//取消
	const showPickerCancel = () => {
		showPicker.value = false
	}

	const h5ScanCode = ref(false);
	function scanCode() {
		// #ifdef H5
		h5ScanCode.value = true;
		// #endif
		// #ifndef H5
		uni.scanCode({
			success: (res) => {
				uni.showToast({
					icon: "none",
					title: res.result,
				});
			},
			faile: (err : any) => {
				console.log("err", err);
			},
		});
		// #endif
	}

	function handleSuccess(res : any) {
		h5ScanCode.value = false;
		let tag = form.value.list.find((l) => l == res)
		tag ? showToast('已存在该面料编号！') : form.value.list.push(res)
	}
	function handleFail(err : any) {
		uni.showModal({
			title: err.errName,
			content: err.errMsg,
			complete: () => {
				h5ScanCode.value = false;
			},
		});
	}
	function handleClose() {
		h5ScanCode.value = false;
	}
</script>

<template>
	<view class="flex">
		<van-nav-bar title="理化报告" left-text="返回" left-arrow @click-left="onClickLeft" />
		<view class="content">
			<van-cell-group inset>
				<van-field class="bor" label="验布日期" label-width="5em" colon v-model="form.ybrq" readonly
					:rules="[{ required: true, message: '请填写' }]" @click="chooseDate()" />
				<van-field label="面料信息" label-width="5em" colon>
					<template #input>
						<van-button type="primary" @click="scanCode">扫一扫</van-button>
					</template>
				</van-field>
				<view class="grid-container">
					<view class="grid-item" v-for="(item,index) in form.list">
						<p style="width: 80%;">
							{{item}}
						</p>
						<van-icon name="cross" @click="form.list.splice(index,1)"></van-icon>
					</view>
				</view>
				<p class="lin"></p>
				<p style="margin: 10rpx 0;">判断依据：GB 18401-2010B国家放纺织产品基本安全技术规范</p>
				<p class="lin"></p>
				<p>检查结果如下：</p>
				<view class="grid-container1">
					<view class="grid-item1">项目</view>
					<view class="grid-item1">标准值</view>
					<view class="grid-item1">实测值</view>
					<view class="grid-item1">单项判定</view>
				</view>
				<view class="grid-container1" v-for="(item,index) in list" :key="index">
					<view class="grid-item1">{{item.name}}</view>
					<view class="grid-item1">{{item.name1}}</view>
					<view class="grid-item1">
						<van-field class="bor" v-model="item.scz" readonly
							:rules="item.necessary?[{ required: true, message: '请填写' }]:[]" @click="choosePic(item)" />
					</view>
					<view class="grid-item1">
						{{item.pdx}}
					</view>
				</view>
			</van-cell-group>
		</view>
		<van-field class="bor" label="操作人" label-width="4em" colon v-model="form.czr" readonly />
	</view>
	<van-calendar v-model:show="show" @confirm="onConfirmDate" :min-date="new Date(2010, 0, 1)"
		:max-date="new Date(2050, 0, 31)" />
	<!--选择框-->
	<van-popup v-model:show="showPicker" round position="bottom">
		<van-picker show-toolbar :columns="popuList" @confirm="pickerConfirm" @cancel="showPickerCancel"
			ref="pickerRef" />
	</van-popup>
	<cshaptx4869-scancode v-if="h5ScanCode" @success="handleSuccess" @fail="handleFail"
		@close="handleClose"></cshaptx4869-scancode>
</template>

<style lang="scss" scoped>
	.flex {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;

		.van-nav-bar {
			width: 100%;
		}

		.content {
			flex: 1;
			padding: 0 20rpx;
		}

		.grid-container {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			text-align: center;
		}

		.grid-item {
			display: flex;
			align-items: center;
			border: 1rpx solid #81d3f8;
			border-radius: 10rpx;
			margin: 5rpx;
		}

		.grid-container1 {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			text-align: center;
			align-items: center;
		}

		::v-deep .van-field {
			font-size: 16px;
		}

		::v-deep .van-field__label {
			display: flex;
			justify-content: space-between;
		}

		::v-deep .van-button--normal {
			padding: 5px 8px;
			height: 30px;
		}

		::v-deep .van-field__control {
			text-align: center;
			font-size: 16px;
		}

		.bor {
			::v-deep .van-field__control {
				border: 1px solid #d7d7d7;
			}
		}

		.lin {
			border: 1rpx solid #000;
			margin: 10rpx 0;
		}

		.line {
			::v-deep .van-field__control {
				border-bottom: 1px solid #d7d7d7;
			}
		}
	}
</style>