rtk-wms-uniapp/pages/workbranch/production/IPQC/ipqcCheckout.vue

<template>
	<gui-page :custom-header="true" :is-header-sized="false"
		:header-class="['gui-theme-background-color', isLandscapeScreen?'width: 100vmax;':'']"
		:style="[isLandscapeScreen?'width: 100vmax':'']">
		<template #gHeader>
			<view :style="[isLandscapeScreen?'height:44px;width: 100vmax':'height:44px;']"
				class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<!-- <text style="font-size:44rpx;" class="gui-header-leader-btns gui-color-white font-icons"
					@tap="goBack">&#xe6c5;</text> -->
				<text style="font-size:44rpx;" class="gui-header-leader-btns gui-color-white font-icons"
					@tap="goHome">&#xe6c5;</text>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text :style="[isPad?'font-size: 18px':'font-size: 14px']"
					class="gui-h4 gui-blod gui-flex1 gui-text-center gui-color-white gui-ellipsis gui-primary-text">IPQC检验</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:40px;" />
			</view>
		</template>
		<template #gBody>
			<view class="ipqc-checkout">
				<view class="bind-button">
					<view v-if="!IPQCParams.processNo" class="scan-button"
						:style="[isPad?'font-size: 18px':'font-size: 14px']" @click="handleBindIPQCUser">
						<text class="font-icons" :style="[isPad?'font-size: 18px':'font-size: 14px']">&#xe6a8;</text>
						绑定产线
					</view>
				</view>
				<view v-if="IPQCParams.processNo" class="card-list-flexbox">
					<text class="card-list-title" :style="[isPad?'font-size: 18px':'font-size: 14px']">IPQC检验人信息</text>
					<view class="card-list-item">
						<text>日期</text>
						<text>{{ $parseTime(IPQCParams.createTime) }}</text>
					</view>
					<view class="card-list-item">
						<text>线体</text>
						<text>{{ IPQCParams.location }}</text>
					</view>
					<view class="card-list-item">
						<text>生产料号</text>
						<text>{{ IPQCParams.materialNo }}</text>
					</view>
					<view class="card-list-item">
						<text>IPQC检验员</text>
						<text>{{ IPQCParams.nickName }}</text>
					</view>
					<view class="card-list-item">
						<text>作业员</text>
						<text>{{ IPQCParams.operator }}</text>
					</view>
					<view class="card-list-item">
						<text>QC组长审核</text>
						<text>{{ IPQCParams.auditor }}</text>
					</view>
					<view v-if="IPQCParams.firstInspectionControl === true && IPQCParams.timeSplot === 0"
						class="card-list-item">
						<text>允许生成次数</text>
						<text>{{ IPQCParams.firstInspectionRetrialTimes }}</text>
					</view>
					<view v-if="IPQCParams.firstInspectionControl === true && IPQCParams.timeSplot === 0"
						class="card-list-item">
						<text>已生成次数</text>
						<text>{{ IPQCParams.firstInspectionSubmitTimes }}</text>
					</view>
				</view>
				<view v-if="IPQCParams.processNo" class="scan">
					<view class="scan-card">
						<uni-easyinput ref="easyinput" v-model="userNumber" :input-border="false" :clearable="false"
							type="text" focus placeholder="绑定员工工号" @focus="handleInputFocus" @confirm="confirmUser" />
						<text class="font-icons" @click="handleBindUser">&#xe6b7;</text>
					</view>
				</view>
				<view v-if="IPQCParams.processNo" class="select-group">
					<view class="select-item">
						<text class="store-text">检验时间</text>
						<view class="custom-select">
							<uni-data-select v-model="IPQCParams.timeSplot" :localdata="IPQCTime"
								@change="handleSelectTime" />
						</view>
						<view v-if="IPQCParams.auditStatus !== -1" style="
								width: 75px;
								height: 30px;
								display: flex;
								align-items: center;
								justify-content: center;
								border: 1px solid gray;
								border-radius: 6px;
								font-size: 14px;
								margin-left: 8px;
								color: gray;
							">{{ computedBtnText(timeSelect) }}</view>
						<picker v-else mode="time"
							style="width: 20%;min-width: 85px;height: 40px;display: flex;justify-content: center;align-items: center;"
							:value="timeSelect.time" @change="bindTimeChange($event)">
							<view class="uni-input" style="
								width: 75px;
								height: 30px;
								display: flex;
								align-items: center;
								justify-content: center;
								border: 1px solid #6a6a6a;
								border-radius: 6px;
								font-size: 14px;
							">
								{{ computedBtnText(timeSelect) }}
							</view>
						</picker>
					</view>
				</view>
				<view v-if="IPQCItemList?.length > 0" class="custom-table">
					<uni-table border stripe empty-text="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr class="custom-table-head">
							<uni-th align="center" width="60px">序号</uni-th>
							<uni-th align="center" width="120px">是否检验</uni-th>
							<uni-th align="center" width="240px">{{ IPQCParams.processName }}</uni-th>
							<uni-th align="center" width="140px">巡检频次</uni-th>
							<uni-th align="center" width="140px">检验工具</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item, key) in IPQCItemList" :key="key" @click="handleShowModal(item)">
							<uni-td align="center" width="120px">{{ ++key }}</uni-td>
							<uni-td align="center">
								<view style="display: flex;justify-content: center;align-items: center;">
									<text v-if="item.completed" class="font-icons"
										:style="[isPad?'font-size: 24px':'font-size: 22px', 'color: #2dc252']">&#xe6dd;</text>
									<text v-else class="font-icons"
										:style="[isPad?'font-size: 24px':'font-size: 22px', 'color: #6a6a6a']">&#xe6e0;</text>
									<text v-if="item.voidOrNot * 1 === 1" style="margin-left: 4px;">报废</text>
									<text v-else style="margin-left: 4px;">{{ item.completed? '已检': '未检' }}</text>
								</view>
							</uni-td>
							<uni-td align="center"
								:style="[item.voidOrNot * 1 === 1?'text-decoration: line-through;':'']">{{ item.inspectionName }}</uni-td>
							<uni-td align="center"
								:style="[item.voidOrNot * 1 === 1?'text-decoration: line-through;':'']">{{ item.checkQuantity }}</uni-td>
							<uni-td align="center"
								:style="[item.voidOrNot * 1 === 1?'text-decoration: line-through;':'']">{{ item.tool }}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
			<uni-popup ref="popup" background-color="#fff" :mask-click="false">
				<view class="popup-content">
					<view class="card-list-flexbox-popup">
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">{{ submitIPQCItem.inspectionName }}</text>
						</view>
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">检验方法</text>
							<text class="text-2 gui-color-gray">{{ IPQCParams.processName }}</text>
						</view>
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">检验工具</text>
							<text class="text-2 gui-color-gray">{{ submitIPQCItem.tool }}</text>
						</view>
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">检验频次</text>
							<text class="text-2 gui-color-gray">{{ submitIPQCItem.checkQuantity }}</text>
						</view>
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">检验标准</text>
							<text class="text-2 gui-color-gray">{{ submitIPQCItem.standard }}</text>
						</view>
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">是否合格</text>
							<text class="text-2 gui-color-gray">
								<radio-group style="width: inherit;" @change="radioChange">
									<view
										style="display: grid;grid-template-rows: 1fr; grid-template-columns: 1fr 1fr;">
										<label>
											<view style="display: flex;justify-content: center;align-items: center;">
												<radio value="1"
													:checked="submitIPQCItem.singleResult * 1 === 1?true:false" />
												<view>合格</view>
											</view>
										</label>
										<label>
											<view style="display: flex;justify-content: center;align-items: center;">
												<radio value="0"
													:checked="submitIPQCItem.singleResult * 1 === 0?true:false" />
												<view>不合格</view>
											</view>
										</label>
									</view>
								</radio-group>
							</text>
						</view>

						<view v-if="submitIPQCItem.inspectionModel === 0" class="card-list-item-input">
							<view v-for="(item, key) in submitIPQCItem.actualCreateReqVOS" :key="key"
								style="margin: 4px 0;">
								<textarea v-model="submitIPQCItem.actualCreateReqVOS[key].actual"
									class="text-3 gui-color-gray" inputmode="decimal" placeholder="请输入检验内容"
									style="border-radius: 4px;border: 1px dotted gray;" auto-height maxlength="14" />
								<view v-if="key === submitIPQCItem.actualCreateReqVOS.length - 1" class="operation-icon"
									@click="appendRow(item)">
									<text class="font-icons"
										:style="[isPad?'font-size: 18px':'font-size: 14px']">&#xe664;</text>
								</view>
								<view v-else class="operation-icon-2" @click="deleteRow(item, key)">
									<text class="font-icons"
										:style="[isPad?'font-size: 18px':'font-size: 14px']">&#xe677;</text>
								</view>
							</view>
						</view>
						<view v-if="submitIPQCItem.inspectionModel === 1" class="card-list-item-input">
							<textarea v-model="submitIPQCItem.measuredResults" class="text-3 gui-color-gray"
								inputmode="text" placeholder="请输入检验内容"
								style="border-radius: 4px;border: 1px dotted gray;margin: 2px 4px;" auto-height
								maxlength="14" />
						</view>
						<view v-if="submitIPQCItem.src?.length > 0" class="card-list-item">
							<text class="text-1">上传图片预览：</text>
						</view>
						<view v-if="submitIPQCItem.src?.length > 0" class="card-list-item grid-image"
							style="margin: 12px 0">
							<image v-for="(item, key) in submitIPQCItem.src" :key="key" :src="item" mode="scaleToFill"
								@click="handleRemoveImage(item, key)" />
						</view>
						<view v-if="IPQCParams.auditStatus === -1" class="card-list-item">
							<button class="text-1 btn-mg" type="primary" @click="takePhoto">拍照</button>
						</view>
						<view class="card-list-item" style="margin: 12px 0">
							<button v-if="IPQCParams.auditStatus === -1" class="text-1 btn-mg" type="primary"
								:disabled="reLoading" @click="handleSubmit">提交数据</button>
							<button class="text-1 btn-mg" type="default" @click="$refs['popup'].close()">关闭</button>
						</view>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="popupProcess" background-color="#fff">
				<view class="popup-process-content">
					<view class="list-title" style="margin-bottom: 8px;">
						<span class="font-icons"
							style="font-size: 20px;color: #00a0e9;width: 40px;text-align: center;">&#xe6a3;</span>
						<span>工序列表</span>
					</view>
					<view>
						<view class="grid-box">
							<view v-for="(item, key) in processList" :key="key" class="box"
								@click="handleClickProcessName(item)">{{ item.processName }}</view>
						</view>
					</view>
				</view>
			</uni-popup>
			<gui-right-menus v-if="IPQCParams.version">
				<!-- 扩展按钮 -->
				<template #menus-more>
					<view v-if="IPQCParams.auditStatus === -1" hover-class="gui-tap"
						class="menu-items gui-bg-green gui-flex gui-columns gui-justify-content-center"
						@click="handleShowSubmitApprovalModal">
						<text class="menu-text gui-block gui-text-center gui-color-white">送审</text>
					</view>
					<view v-else hover-class="gui-tap"
						class="menu-items gui-flex gui-columns gui-justify-content-center"
						style="background-color: #717171;">
						<text class="menu-text gui-block gui-text-center gui-color-white">送审</text>
					</view>
				</template>
				<!-- 核心按钮 -->
				<template #menus-primary>
					<view class="menu-items gui-bg-primary gui-flex gui-columns gui-justify-content-center">
						<text class="menu-icon gui-color-white gui-block gui-text-center gui-icons">&#xe614;</text>
						<text class="menu-text gui-color-white gui-block gui-text-center">操作</text>
					</view>
				</template>
			</gui-right-menus>
			<gui-modal ref="modalForm" :custom-class="['gui-bg-white', 'gui-dark-bg-level-3', 'gui-border-radius']"
				title="提示">
				<template #content>
					<view class="gui-padding gui-bg-gray gui-dark-bg-level-2">
						<text class="gui-block gui-text-center gui-text gui-color-gray"
							style="line-height:100rpx; padding:10rpx;">您确定要立即送审吗？</text>
					</view>
				</template>

				<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
				<template #btns>
					<view class="gui-flex gui-row gui-space-between operation-flex">
						<view hover-class="gui-tap" class="modal-btns gui-flex1" @tap="handleCancelApprovalModal">
							<text class="modal-btns gui-color-gray">取消</text>
						</view>
						<view class="line" />
						<view hover-class="gui-tap" class="modal-btns gui-flex1" @tap="handleSubmitApprovalModal">
							<text class="modal-btns gui-primary-color">确认</text>
						</view>
					</view>
				</template>
			</gui-modal>
			<uni-popup ref="errorTip" type="dialog">
				<uni-popup-dialog type="error" cancel-text="关闭" confirm-text="确认" title="提示" :content="errorTipMessage"
					@confirm="handleCloseErrorTipsModal" @close="handleCloseErrorTipsModal" />
			</uni-popup>
		</template>
	</gui-page>
</template>
<script>
	import axios from 'axios'
	import {
		computed,
		defineComponent,
		onMounted,
		ref,
		watch
	} from 'vue'
	export default defineComponent({
		onLoad() {
			// // #ifdef APP-PLUS
			// plus.screen.lockOrientation('default');
			// // #endif
		},
		onUnload() {
			// // #ifdef APP-PLUS
			// plus.screen.lockOrientation('portrait-primary');
			// // #endif
		},
		onResize() {
			if ([90, -90].includes(plus.navigator.getOrientation())) {
				this.isLandscapeScreen = true
			} else {
				this.isLandscapeScreen = false
			}
		},
		setup(options) {
			const popup = ref()
			const popupProcess = ref()
			const modalForm = ref()
			const userNumber = ref()
			const easyinput = ref()
			const errorState = ref(0)
			const errorTip = ref('')
			const errorTipMessage = ref('')
			const isLandscapeScreen = ref(false)
			const parentRow = options?.params ?? {}
			const processList = ref([])
			// 是否禁用提交数据按钮
			const reLoading = ref(false)
			// 绑定的检查人信息
			const IPQCParams = ref({
				operator: '',
				createTime: '',
				location: '',
				materialNo: '',
				nickName: '',
				mesroutingListId: '',
				processNo: '',
				mesHotPressId: '',
				productionCode: '',
				ipqcDate: '',
				timeSplot: 0,
				time: '',
				processName: '',
				auditStatus: null,
				auditor: '',
				version: '',
				materialLots: '',
				erpWorkOrderNo: '',
				firstInspectionControl: '',
				firstInspectionSubmitTimes: '',
				firstInspectionRetrialTimes: '',
				erpProductionWorkOrderDetailId: '',
				wmsIncomingReceiptInspectionId: ''
			})
			const IPQCItemList = ref([])
			// 待巡检项信息
			const submitIPQCItem = ref({
				src: [],
				singleResult: '',
				measuredResults: null,
				id: '',
				inspectionModel: null,
				timeSplot: null,
				actualCreateReqVOS: [{
					id: '',
					actual: 0
				}],
				fileIds: []
			})
			// 检验时间右边的按钮存放的信息
			const timeSelect = ref({
				id: 0,
				text: '首件时间',
				value: 0,
				time: ''
			})
			const IPQCTime = ref([{
					id: 0,
					text: '首件时间',
					value: 0,
					time: ''
				},
				{
					id: 1,
					text: '巡检时间',
					value: 1,
					time: ''
				},
				{
					id: 2,
					text: '巡检时间',
					value: 2,
					time: ''
				},
				{
					id: 3,
					text: '巡检时间',
					value: 3,
					time: ''
				},
				{
					id: 4,
					text: '巡检时间',
					value: 4,
					time: ''
				}, {
					id: 5,
					text: '尾件时间',
					value: 5,
					time: ''
				}
			])
			const computedBtnText = computed(() => {
				return item => {
					const fdIndex = IPQCTime.value.findIndex(opt => opt.id === item.id)
					if (fdIndex !== -1 && IPQCTime.value[fdIndex].time) {
						return IPQCTime.value[fdIndex].time
					}
					return '设置时间'
				}
			})
			onMounted(() => {
				IPQCParams.value.materialNo = JSON.parse(parentRow)?.materialNo
				IPQCParams.value.erpProductionWorkOrderDetailId = JSON.parse(parentRow)?.id
			})
			// 根据时间选择器选择的数据进行填充
			watch([timeSelect.value], ([opt]) => {
				const fdIndex = IPQCTime.value.findIndex(item => item.id === opt.id)
				if (!['', null, undefined, NaN].includes(opt.id)) {
					Object.assign(IPQCTime.value[fdIndex], opt)
				}
				IPQCParams.value.timeSplot = opt?.id
				IPQCParams.value.time = opt?.time
			})
			const goHome = function() {
      			uni.$goHome()
			}
			const goBack = function() {
				uni.$goBack('/pages/workbranch/production/IPQC/ipqcList')
			}

			const appendRow = function(row) {
				submitIPQCItem.value.actualCreateReqVOS.push({
					id: '',
					actual: ''
				})
			}

			const deleteRow = function(row, index) {
				submitIPQCItem.value.actualCreateReqVOS.splice(index, 1)
				// if (row?.id) {
				// 	// 走删除接口
				// } else {
				// 	submitIPQCItem.value.actualCreateReqVOS.splice(index, 1);
				// }
			}

			const confirmUser = function(e) {
				const submitParams = {
					wmsIncomingReceiptInspectionId: IPQCParams.value
						.wmsIncomingReceiptInspectionId,
					timeSplot: IPQCParams.value.timeSplot,
					operator: e
				}
				uni.$reqPost('ipqcBindUserNumber', submitParams)
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							uni.showToast({
								title: '员工绑定成功',
								icon: 'none',
								duration: 2000
							})
							errorState.value = 0;
							setInputFocus()
							getItemList()
						} else {
							// #ifdef APP-PLUS
							plus.device.beep(2)
							// #endif
							errorTipMessage.value = msg
							errorTip.value.open()
							errorState.value = -1
						}
					})
			}

			const handleBindUser = function() {
				// #ifdef APP-PLUS
				const mpaasScanModule = uni.requireNativePlugin('Mpaas-Scan-Module')
				mpaasScanModule.mpaasScan({
						// 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
						'scanType': ['qrCode', 'barCode'],
						// 是否隐藏相册，默认false不隐藏
						'hideAlbum': false
					},
					(ret) => {
						if (ret.resp_code === 1000) {
							const submitParams = {
								wmsIncomingReceiptInspectionId: IPQCParams.value
									.wmsIncomingReceiptInspectionId,
								timeSplot: IPQCParams.value.timeSplot,
								operator: ret.resp_result
							}
							uni.$reqPost('ipqcBindUserNumber', submitParams)
								.then(({
									code,
									data,
									msg
								}) => {
									if (code === 0) {
										uni.showToast({
											title: '员工绑定成功',
											icon: 'none',
											duration: 2000
										})
										errorState.value = 0;
										setInputFocus()
										getItemList()
									} else {
										// #ifdef APP-PLUS
										plus.device.beep(2)
										// #endif
										errorTipMessage.value = msg
										errorTip.value.open()
										errorState.value = -1
									}
								})
						}
					})
				// #endif
				// #ifdef H5
				const submitParams = {
					wmsIncomingReceiptInspectionId: IPQCParams.value
						.wmsIncomingReceiptInspectionId,
					timeSplot: IPQCParams.value.timeSplot,
					operator: 'MTY2OTYwODI3MDg0MTA5ODI0MQ=='
				}
				uni.$reqPost('ipqcBindUserNumber', submitParams)
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							uni.showToast({
								title: '员工绑定成功',
								icon: 'none',
								duration: 2000
							})
							errorState.value = 0;
							setInputFocus()
							getItemList()
						} else {
							// #ifdef APP-PLUS
							plus.device.beep(2)
							// #endif
							errorTipMessage.value = msg
							errorTip.value.open()
							errorState.value = -1
						}
					})
				// #endif
			}

			const getItemList = async function() {
				if (!['', null, undefined, NaN].includes(IPQCParams.value.timeSplot)) {
					const params = JSON.parse(JSON.stringify(IPQCParams.value))
					Reflect.deleteProperty(params, 'createTime')
					Reflect.deleteProperty(params, 'time')
					Reflect.deleteProperty(params, 'nickName')
					Reflect.deleteProperty(params, 'location')
					Reflect.deleteProperty(params, 'id')
					Reflect.deleteProperty(params, 'auditor')
					Reflect.deleteProperty(params, 'auditStatus')
					Reflect.deleteProperty(params, 'wmsIncomingReceiptInspectionId')
					const month = new Date().getMonth() + 1
					const day = new Date().getDate()
					params.ipqcDate = new Date().getFullYear() + '' + (month < 10 ? ('0' + month) :
						month) + '' + (day < 10 ? ('0' + day) : day)
					await uni.$reqPost('getIPQCItemList', params)
						.then(({ code, data, msg }) => {
							IPQCItemList.value = data?.list
							IPQCParams.value.wmsIncomingReceiptInspectionId = data
								?.wmsIncomingReceiptInspectionId
							IPQCParams.value.operator = data
								?.operator
							IPQCParams.value.createTime = data?.createTime
							IPQCParams.value.nickName = data?.inspector
							IPQCParams.value.time = data?.inspectionTime
							IPQCParams.value.auditor = data?.auditor
							IPQCParams.value.auditStatus = data?.auditStatus
							IPQCParams.value.materialLots = data?.materialLots
							IPQCParams.value.version = data?.version
							timeSelect.value.time = data?.inspectionTime
						})
				}
			}

			// 检验时间下拉框选择事件
			const handleSelectTime = function(e) {
				const selectItem = IPQCTime.value.find(item => item.id === e)
				Object.assign(timeSelect.value, selectItem ?? {})
				const month = new Date().getMonth() + 1
				const day = new Date().getDate()
				const params = {
					'timeSplot': e,
					'ipqcDate': new Date().getFullYear() + '' + (
						month < 10 ? ('0' +
							month) :
						month) + '' + (day < 10 ? ('0' + day) : day),
					'productionCode': IPQCParams.value.productionCode,
					'mesHotPressId': IPQCParams.value.mesHotPressId,
					'processNo': IPQCParams.value.processNo,
					'mesRoutingListId': IPQCParams.value.mesRoutingListId,
					'materialNo': IPQCParams.value.materialNo,
					'erpWorkOrderNo': IPQCParams.value.erpWorkOrderNo ?? '',
					'firstInspectionControl': IPQCParams.value.firstInspectionControl,
					'firstInspectionRetrialTimes': IPQCParams.value.firstInspectionRetrialTimes,
					'erpProductionWorkOrderDetailId': IPQCParams.value.erpProductionWorkOrderDetailId
				}
				uni.$reqPost('getListRule', params).then(({
					code,
					data,
					msg
				}) => {
					if (code === 0) {
						getItemList()
					} else {
						// #ifdef APP-PLUS
						plus.device.beep(2)
						// #endif
						errorTipMessage.value = msg
						errorTip.value.open()
						errorState.value = 0
					}
				})
			}

			// 时间选择器选择事件
			const bindTimeChange = async function(e) {
				if (!['', null, undefined, NaN].includes(IPQCParams.value.timeSplot) && IPQCParams.value
					.auditStatus === -1) {
					timeSelect.value.time = e.detail.value
					const params = {
						wmsIncomingReceiptInspectionId: IPQCParams.value
							.wmsIncomingReceiptInspectionId,
						timeSplot: IPQCParams.value.timeSplot,
						inspectionTime: e.detail.value
					}
					try {
						await uni.$reqPost('insertIPQCTimeSplot', params)
					} catch (e) {
						uni.$grace.msg(e)
					}
				}
			}

			// 绑定检验执行人
			const handleBindIPQCUser = function() {
				uni.$reqGet('scanBindProduction', {
						// id: "1668903422169890817"
						id: '1605796881528524802'
					})
					.then(async ({
						data
					}) => {
						await uni.$reqGet('getProductionWorkOrderProcessList', {
								id: IPQCParams.value.erpProductionWorkOrderDetailId
							})
							.then(({
								code,
								data,
								msg
							}) => {
								if (code === 0) {
									processList.value = data
								} else {
									// #ifdef APP-PLUS
									plus.device.beep(2)
									// #endif
									errorTipMessage.value = msg
									errorTip.value.open()
									errorState.value = -1
								}
							})
						if (popupProcess.value?.showPopup === false) {
							popupProcess.value.open('bottom')
						}
					})
			}

			// 选择工序
			const handleClickProcessName = async function(data) {
				IPQCParams.value.id = data?.id
				// IPQCParams.value.location = data?.productionName;
				IPQCParams.value.productionCode = data?.productionCode ?? '1605796881528524802'
				IPQCParams.value.mesRoutingListId = data?.mesRoutingListId ?? ''
				IPQCParams.value.processNo = data?.processNo ?? ''
				IPQCParams.value.processName = data?.processName ?? ''
				IPQCParams.value.mesHotPressId = data?.mesHotPressId ?? ''
				IPQCParams.value.erpWorkOrderNo = data?.erpWorkOrderNo ?? ''
				IPQCParams.value.firstInspectionControl = data?.firstInspectionControl ?? ''
				IPQCParams.value.firstInspectionRetrialTimes = data?.firstInspectionRetrialTimes ?? ''
				const month = new Date().getMonth() + 1
				const day = new Date().getDate()
				const params = {
					'timeSplot': 0,
					'ipqcDate': new Date().getFullYear() + '' + (
						month < 10 ? ('0' +
							month) :
						month) + '' + (day < 10 ? ('0' + day) : day),
					'productionCode': data?.productionCode ?? '1605796881528524802',
					'mesHotPressId': data?.mesHotPressId,
					'processNo': IPQCParams.value.processNo,
					'mesRoutingListId': IPQCParams.value.mesRoutingListId,
					'materialNo': IPQCParams.value.materialNo,
					'erpWorkOrderNo': data?.erpWorkOrderNo ?? '',
					'firstInspectionControl': data?.firstInspectionControl,
					'firstInspectionRetrialTimes': data?.firstInspectionRetrialTimes,
					'erpProductionWorkOrderDetailId': IPQCParams.value.erpProductionWorkOrderDetailId
				}
				await uni.$reqPost('getListRule', params).then(({
					code,
					data,
					msg
				}) => {
					if (code === 0) {
						getItemList()
						Object.assign(IPQCParams.value, data)
					} else {
						// #ifdef APP-PLUS
						plus.device.beep(2)
						// #endif
						errorTipMessage.value = msg
						errorTip.value.open()
						errorState.value = 0
					}
					popupProcess.value.close()
				})
			}

			const scinumToFloat = function(num) {
				// 处理非数字
				if (isNaN(num)) {
					return num
				}
				// 处理不需要转换的数字
				var str = '' + num
				if (!/e/i.test(str)) {
					return num
				}
				return (num).toFixed(18).replace(/\.?0+$/, '')
			}

			// 开始检验
			const handleShowModal = function(opt) {
				if (opt?.voidOrNot * 1 !== 1) {
					Object.assign(submitIPQCItem.value, opt)
					submitIPQCItem.value.id = opt?.id
					submitIPQCItem.value.timeSplot = IPQCParams.value?.timeSplot
					submitIPQCItem.value.inspectionModel = opt?.inspectionModel

					uni.$reqGet('getResult', {
							id: opt?.id
						})
						.then((data) => {
							if (data.actualDOS !== null && Object.prototype.toString.call(data
									.actualDOS) ===
								'[object Array]' && data.actualDOS.length > 0) {
								submitIPQCItem.value.actualCreateReqVOS.length = 0
								data?.actualDOS.forEach(item => {
									const actual = scinumToFloat(item?.actual)
									submitIPQCItem.value.actualCreateReqVOS.push({
										...item,
										actual
									})
								})
							} else {
								submitIPQCItem.value.actualCreateReqVOS = [{
									id: '',
									actual: ''
								}]
							}
							if (data.fileIds !== null) {
								submitIPQCItem.value.fileIds = data?.fileIds ?? []
							}
							submitIPQCItem.value.measuredResults = data?.measuredResults ?? ''
							if (data?.urlList !== null) {
								submitIPQCItem.value.src = data?.urlList
							} else {
								submitIPQCItem.value.src = []
							}
						})

					if (popup.value?.showPopup === false) {
						popup.value.open('bottom')
					}
				}
			}

			const handleSubmit = async function() {
				reLoading.value = true
				const actualCreateReqVOS = []
				if (submitIPQCItem.value.inspectionModel === 0) {
					try {
						submitIPQCItem.value
							.actualCreateReqVOS.forEach(item => {
								if (isNaN(Number(item.actual))) {
									throw new Error('请填写正确的数值！')
								} else {
									actualCreateReqVOS.push({
										id: '',
										...item,
										actual: item.actual
									})
								}
							})
						reLoading.value = false
					} catch (e) {
						uni.$grace.msg(e.message)
						return
					}
				}
				const params = {
					fileIds: submitIPQCItem.value.fileIds,
					actualCreateReqVOS,
					singleResult: submitIPQCItem.value.singleResult,
					measuredResults: submitIPQCItem.value.measuredResults,
					id: submitIPQCItem.value.id,
					materialLots: IPQCParams.value.materialLots,
					inspectionModel: submitIPQCItem.value.inspectionModel,
					timeSplot: submitIPQCItem.value.timeSplot,
					processNo: IPQCParams.value.processNo
				}
				const data = await uni.$reqPut('submitItem', params)
				if (data?.code === 0) {
					reLoading.value = false
					uni.$grace.msg('数据提交成功！')
					popup.value.close()

					// 重新获取检验项数据
					const month = new Date().getMonth() + 1
					const day = new Date().getDate()
					const params = {
						'timeSplot': 0,
						'ipqcDate': new Date().getFullYear() + '' + (
							month < 10 ? ('0' +
								month) :
							month) + '' + (day < 10 ? ('0' + day) : day),
						'productionCode': IPQCParams.value.productionCode,
						'mesHotPressId': IPQCParams.value.mesHotPressId,
						'processNo': IPQCParams.value.processNo,
						'mesRoutingListId': IPQCParams.value.mesRoutingListId,
						'materialNo': IPQCParams.value.materialNo,
						'erpWorkOrderNo': IPQCParams.value.erpWorkOrderNo ?? '',
						'firstInspectionControl': IPQCParams.value.firstInspectionControl,
						'firstInspectionRetrialTimes': IPQCParams.value.firstInspectionRetrialTimes,
						'erpProductionWorkOrderDetailId': IPQCParams.value
							.erpProductionWorkOrderDetailId
					}
					setTimeout(async () => {
						await uni.$reqPost('getListRule', params)
						await getItemList()
					}, 500)
				} else {
					// #ifdef APP-PLUS
					plus.device.beep(2)
					// #endif
					errorTipMessage.value = data?.msg
					errorTip.value.open()
					errorState.value = -1
				}
			}

			// 拍照
			const takePhoto = function() {
				uni.chooseImage({
					count: 6, // count: 6, //默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 从相册选择
					success: function(res) {
						res.tempFilePaths.forEach(async item => {
							// #ifdef APP-PLUS
							// 移动端无法使用FormData类型
							// 使用uniapp官方提供的uploadFile函数替代实现文件上传
							await uni.uploadFile({
								url: uni.$baseUrl +
									'/admin-api/minio/files/uploadFiles',
								name: 'file',
								filePath: item,
								header: {
									'Authorization': 'Bearer ' + uni
										.getStorageSync('token')
								},
								success: function(uploadFileRes) {
									const resultJSON = JSON.parse(
										uploadFileRes.data)
									if (submitIPQCItem.value.fileIds ===
										null) {
										submitIPQCItem.value.fileIds = []
									}
									submitIPQCItem.value.fileIds.push(
										resultJSON.data
										.fileId)
								}
							})
							// #endif
							submitIPQCItem.value.src.push(item)
						})
						res.tempFiles.forEach(async (item) => {
							// #ifdef H5
							const formData = new FormData()
							formData.append('file', item)
							// 上传文件
							const {
								data
							} = await axios({
								url: uni.$baseUrl +
									'/admin-api/minio/files/uploadFiles',
								name: '上传文件',
								method: 'post',
								headers: {
									'Authorization': 'Bearer ' + uni
										.getStorageSync('token'),
									'Content-Type': 'multipart/form-data;'
								},
								data: formData
							})
							if (submitIPQCItem.value.fileIds === null) {
								submitIPQCItem.value.fileIds = []
							}
							submitIPQCItem.value.fileIds.push(data.data.fileId)
							// #endif
						})
					}
				})
			}

			const radioChange = function(item) {
				submitIPQCItem.value.singleResult = item?.detail?.value
			}

			const handleRemoveImage = function(opt, index) {
				submitIPQCItem.value.fileIds.splice(index, 1)
				submitIPQCItem.value.src.splice(index, 1)
			}

			const handleShowSubmitApprovalModal = function() {
				modalForm.value.open()
			}

			const handleCancelApprovalModal = function() {
				modalForm.value.close()
			}

			const handleSubmitApprovalModal = function() {
				const params = {
					version: IPQCParams.value.version,
					materialLots: IPQCParams.value.materialLots,
					processNo: IPQCParams.value.processNo,
					materialNo: IPQCParams.value.materialNo
				}
				uni.$reqPost('submitApproval', params)
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							uni.showToast({
								title: '送审成功！',
								icon: 'none',
								duration: 2000
							})
							setTimeout(() => {
								goBack()
							}, 1000)
						} else {
							// #ifdef APP-PLUS
							plus.device.beep(2)
							// #endif
							errorTipMessage.value = msg
							errorTip.value.open()
							errorState.value = -1
						}
					})
					.finally(() => {
						modalForm.value.close()
					})
			}

			const setInputFocus = function() {
				if (errorState.value === 0) {
					userNumber.value = ''
					easyinput.value.onBlur()
					easyinput.value.onFocus()
				}
			}

			// 关闭错误信息弹窗
			const handleCloseErrorTipsModal = async function() {
				errorTip.value.close()
				await setInputFocus()
			}
			
			// 禁用软键盘
			const handleInputFocus = function() {
				setTimeout(() => {
					uni.hideKeyboard()
				}, 100)
			}

			return {
				goHome,
				popup,
				easyinput,
				errorTip,
				errorState,
				errorTipMessage,
				popupProcess,
				handleInputFocus,
				goBack,
				IPQCTime,
				reLoading,
				modalForm,
				takePhoto,
				timeSelect,
				IPQCItemList,
				processList,
				appendRow,
				deleteRow,
				userNumber,
				isLandscapeScreen,
				IPQCParams,
				radioChange,
				handleBindIPQCUser,
				handleShowModal,
				bindTimeChange,
				handleSelectTime,
				computedBtnText,
				confirmUser,
				handleBindUser,
				handleSubmit,
				submitIPQCItem,
				handleRemoveImage,
				handleClickProcessName,
				handleShowSubmitApprovalModal,
				handleCancelApprovalModal,
				handleSubmitApprovalModal,
				handleCloseErrorTipsModal
			}
		}
	})
</script>

<style lang="scss" scoped>
	.gui-header-leader-btns {
		color: black;
		font-size: 24px !important;
		margin-left: 24rpx;
	}

	.gui-sbody {
		background-color: rgba(234, 239, 242, 1);
	}

	.gui-relative {
		overflow: visible;
		height: 100vh;

		.ipqc-checkout {
			width: 100vw;
			height: calc(100vh - 75px);
			position: absolute;
			top: 95px;
			overflow: hidden;

			.bind-button {
				display: flex;
				justify-content: center;

				.scan-button {
					width: 40vw;
					min-width: 50px;
					height: 35px;
					display: flex;
					justify-content: center;
					align-items: center;
					color: white;
					background-color: rgba(0, 160, 233, 1);
					border-radius: 6px;
					box-shadow: 2px 2px 3px 1px rgba(0, 156, 223, 1.0);
				}
			}
		}
	}

	.card-list-flexbox {
		width: calc(100vw - 24px);
		height: 295px;
		margin: 0 12px;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		overflow-y: scroll;

		.card-list-title {
			width: 100%;
			height: 35px;
			line-height: 35px;
			margin: 0 4px 0 4px;
			border-radius: 4px 4px 0 0;
			text-align: center;
			color: white;
			background-color: rgba(0, 160, 233, 1.0);
		}

		.card-list-item,
		.card-list-item-operation {
			width: 100%;
			height: 35px;
			margin: 0 4px 3rpx 4px;
			border-radius: 4px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;

			uni-text {
				font-size: 14px;
				height: 50rpx;
				text-align: left;
				padding: 0 8px;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.text-1 {
				flex: 1;
				height: 35px;
				justify-content: flex-start;
			}

			.text-2 {
				flex: 3;
				height: 35px;
				justify-content: flex-end;
				margin-right: 4px;
				padding: 2px 6px;
			}

		}

	}

	.popup-content {
		width: 100vw;
		height: 55vh;
		overflow-y: scroll;
	}

	.popup-process-content {
		width: 100vw;
		height: 85vh;
		overflow-y: scroll;

		.list-title {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99999;
			width: 100%;
			display: flex;
			align-items: center;
			height: 45px;
			line-height: 45px;
			font-size: 16px;
			font-weight: bold;
			border-top-left-radius: 16px;
			border-top-right-radius: 16px;
			border-bottom: 1px solid #d4d4d4;
			background-color: white;

			.block {
				width: 6px;
				height: 60%;
				margin: 0 4px;
				background-color: rgb(0, 160, 233);
			}
		}

		.grid-box {
			margin-top: 45px;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;

			.box {
				position: relative;
				height: 40px;
				padding: 10px 6px;
				border: 1px solid rgb(250, 250, 251);
				box-sizing: border-box;
				margin: 12px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 14px;
				font-weight: bold;
				border-radius: 4px;
				color: white;
				box-shadow: 0 3px 6px 0 rgba(121, 118, 118, 0.34);
				background-color: rgb(0, 160, 233);
			}
			
			.box::before {
				content: '';
				position: absolute;
				top: 20px;
				left: 0;
				bottom: 0;
				transform: translate(-50%, -50%);
				width: 12px;
				height: 12px;
				border-radius: 50%;
				z-index: 1;
				background-color: #ffffff;
			}
		}
	}

	.card-list-flexbox-popup {
		width: 100vw;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;

		.card-list-item,
		.card-list-item-input {
			width: 100vw;
			height: 100%;
			min-height: 40px;
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: #fff;

			uni-text {
				font-size: 14px;
				height: 50rpx;
				text-align: left;
				padding: 0 12px;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			uni-image {
				width: calc(100vw / 2 - 4px);
				height: calc(100vw / 3.2 - 2px);
				pointer-events: none;
			}

			uni-image::after {
				content: "×";
				width: 22px;
				height: 22px;
				position: absolute;
				top: 5px;
				right: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: rgba(255, 255, 255, 0.9);
				background-color: rgba(0, 0, 0, 0.5);
				border-radius: 50%;
				font-size: 24px;
				/*给伪元素开启鼠标事件，将事件冒泡到父元素的点击事件中*/
				pointer-events: auto;
			}

			.text-1 {
				flex: 1;
				height: 40px;
				justify-content: flex-start;
			}

			.text-2 {
				flex: 3;
				height: 40px;
				justify-content: flex-end;
				margin-right: 4px;
				padding: 2px 6px;
			}

			.text-3 {
				width: calc(100% - 15%);
				min-height: 35px;
				justify-content: flex-end;
				padding: 2px 6px;
			}

			.text-3::before {}

			.btn-mg {
				margin: 0 5px;
			}
		}

		.card-list-item {
			justify-content: center;
		}

		.card-list-item-input {
			margin: 10px 0 10px 2%;
			display: flex;
			flex-direction: column;

			uni-view {
				width: 100%;
				height: 100%;
				display: flex;

				uni-textarea {
					flex: 8;
				}

				uni-view {
					flex: 1;
				}

				.operation-icon,
				.operation-icon-2 {
					height: auto;

					uni-text {
						width: 22px;
						height: 100%;
						padding: 0 !important;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
						border-top-right-radius: 4px;
						border-bottom-right-radius: 4px;
						color: white;
						background-color: #80b7ff;
					}
				}

				.operation-icon-2 {
					uni-text {
						background-color: #ff5962;
					}
				}

			}
		}

		.grid-image {
			/* 设置容器布局为grid布局 */
			display: grid;
			/* 指定每一行的宽度 每个宽度中间用空格隔开 */
			grid-template-rows: repeat(auto-fill, 1fr);
			/* 指定每一列的宽度 每个宽度中间用空格隔开 */
			grid-template-columns: repeat(2, 1fr);
			padding: 0 4px;
		}

		.card-list-item:nth-of-type(1) {

			.text-1 {
				flex: 9;
				font-weight: bold;
				color: black !important;
			}

			.text-1::before {
				content: "";
				width: 4px;
				height: 20px;
				border-radius: 4px;
				margin-right: 4px;
				background-color: skyblue;
			}

			.text-2 {
				flex: 4;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				color: limegreen !important;
			}
		}

	}

	.custom-table {
		height: calc(100vh - 485px);
		// min-height: 600px;
		overflow-y: scroll;
	}

	.select-group {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;

		.select-item {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin: 5px 0;
			background-color: white;

			.store-text {
				min-width: 60px;
				margin: 0 7px;
				font-size: 14px;
			}
		}
	}

	.uni-list-cell {
		width: 100vw;
		height: 35px;
		margin: 4px 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2px solid #eaeff2;
		background-color: #fff;

		view {
			font-size: 14px;
			height: 50rpx;
			text-align: left;
			padding: 0 8px;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.uni-list-cell-left {
			flex: 1;
			height: 35px;
			justify-content: flex-start;
		}

		.uni-list-cell-db {
			flex: 3;
			height: 35px;
			justify-content: flex-end;
			margin-right: 4px;
			padding: 2px 6px;

			uni-picker {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: center;
			}
		}
	}

	.modal-btns {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.line {
		margin-top: 10rpx;
		height: 80rpx;
		width: 1rpx;
		background-color: #dcdcdc;
	}

	.scan {
		height: 45px;
		width: calc(100% - 24px);
		padding: 0 12px;
		margin-top: 4px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 6px;
		background-color: white;

		.scan-card {
			width: 100%;
			display: grid;
			grid-template-rows: 1fr;
			grid-template-columns: 7fr 2fr;
			align-items: center;

			input {
				height: 35px;
				line-height: 35px;
			}

			text {
				width: 100%;
				text-align: right;
			}
		}
	}
</style>