| | |
| | | v-model="formData.fcheckResu" |
| | | type="text" |
| | | class="result-input" |
| | | placeholder="没有最大值和最小值时填写0(未通过检验)或1(通过检验)" |
| | | placeholder="无上下限时填写OK(合格)或NG(不合格)" |
| | | placeholder-class="placeholder" /> |
| | | <button v-if="(tableData.length < formData.levelNum)" |
| | | style="margin: 0px;background-color: #3498db;color:#ffffff ;" class="btn primary-btn" |
| | |
| | | </button> |
| | | </view> |
| | | |
| | | <!-- 图片预览 --> |
| | | <view v-if="isShowImg" class="section"> |
| | | <!-- 图片预览 - 支持多图片 --> |
| | | <view v-if="imageList && imageList.length > 0" class="section"> |
| | | <view class="section-header"> |
| | | <view class="section-title">相关图片</view> |
| | | <view class="section-actions"> |
| | | <button class="delete-image-btn" @click="deleteImage">删除图片</button> |
| | | </view> |
| | | <view class="section-title">相关图片 ({{ imageList.length }}张)</view> |
| | | </view> |
| | | <view class="section-body"> |
| | | <view class="image-preview" @click="previewImage"> |
| | | <image :src="base64Image" mode="aspectFit" class="preview-image"/> |
| | | <view class="image-list"> |
| | | <view v-for="(img, index) in imageList" :key="img.id" class="image-item"> |
| | | <view class="image-preview" @click="previewMultiImage(index)"> |
| | | <image :src="'data:image/jpeg;base64,' + img.base64Data" mode="aspectFill" class="preview-image"/> |
| | | </view> |
| | | <view class="image-actions"> |
| | | <button class="delete-image-btn" @click="deleteSingleImage(img)"> |
| | | <text class="delete-icon">🗑️</text> |
| | | <text>删除</text> |
| | | </button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | </view> |
| | | </view> |
| | | <view class="td"> |
| | | <view class="result-badge" :class="item.fcheckResu === '1' ? 'OK' : 'NG'"> |
| | | <view class="result-badge" :class="(item.fcheckResu === 'OK' || item.fcheckResu === '1' || item.fcheckResu == 1) ? 'OK' : 'NG'"> |
| | | {{ item.fcheckResu }} |
| | | </view> |
| | | </view> |
| | |
| | | tableData: [], |
| | | isShowImg: false, |
| | | base64Image: "", |
| | | imageList: [], // 多图片列表 |
| | | remarks: "", |
| | | remarksPopup: false, |
| | | fcheckResu: null, |
| | |
| | | |
| | | // 判断是否已上传图片 |
| | | hasImage() { |
| | | return this.formData.imageData && this.formData.imageData.length > 0; |
| | | return this.imageList && this.imageList.length > 0; |
| | | }, |
| | | |
| | | // 判断是否已填写不良描述 |
| | |
| | | }, |
| | | |
| | | editResult(fcheckResu) { |
| | | if (fcheckResu == '1') { |
| | | // 1 或 OK 都表示合格 |
| | | if (fcheckResu == '1' || fcheckResu == 'OK' || fcheckResu == 1) { |
| | | return "改为不合格"; |
| | | } else { |
| | | return "改为合格"; |
| | |
| | | } else { |
| | | |
| | | if (!this.formData.fcheckResu) { |
| | | this.formData.fcheckResu = 1 |
| | | this.formData.fcheckResu = 'OK'; // 默认合格 |
| | | } |
| | | |
| | | if (this.formData.fcheckResu == 0 || this.formData.fcheckResu == 1) { |
| | | this.formData.isPass = this.formData.fcheckResu |
| | | // 统一使用 OK/NG |
| | | const upperValue = String(this.formData.fcheckResu).toUpperCase(); |
| | | if (upperValue === 'OK' || upperValue === 'NG') { |
| | | this.formData.fcheckResu = upperValue; // 统一转为大写 |
| | | if (upperValue === 'NG') { |
| | | fstand = "×"; |
| | | } |
| | | } else { |
| | | this.$showMessage("无标准值时,检验结果只能为0或1!"); |
| | | this.$showMessage("无上下限时,检验结果只能为OK或NG!"); |
| | | return; |
| | | } |
| | | count = count - this.tableData.length; |
| | | } |
| | | |
| | | // 验证不合格检验项目必须上传图片并填写不良描述 |
| | | if (fstand === "×" || this.formData.fcheckResu == 0) { |
| | | if (fstand === "×" || this.formData.fcheckResu === 'NG') { |
| | | // 检查是否已上传图片 |
| | | if (!this.formData.imageData || this.formData.imageData.length === 0) { |
| | | if (!this.imageList || this.imageList.length === 0) { |
| | | this.$showMessage("检验项目不合格,必须上传图片!"); |
| | | return; |
| | | } |
| | |
| | | |
| | | this.tableData = res.data.tbBillList.itemXj02s; |
| | | |
| | | // 处理图片显示状态 |
| | | if (this.formData.imageData && this.formData.imageData.length > 0) { |
| | | // 处理多图片列表 |
| | | if (this.formData.imageList && this.formData.imageList.length > 0) { |
| | | this.imageList = this.formData.imageList; |
| | | this.isShowImg = true; |
| | | if (this.imageList.length > 0) { |
| | | this.base64Image = 'data:image/jpeg;base64,' + this.imageList[0].base64Data; |
| | | } |
| | | } else if (this.formData.imageData && this.formData.imageData.length > 0) { |
| | | // 向后兼容:如果没有imageList但有imageData |
| | | this.imageList = [{ |
| | | id: 0, |
| | | base64Data: this.formData.imageData, |
| | | fileName: '', |
| | | createDate: null, |
| | | createBy: '' |
| | | }]; |
| | | this.isShowImg = true; |
| | | this.base64Image = 'data:image/jpeg;base64,' + this.formData.imageData; |
| | | } else { |
| | | // 如果没有图片数据,隐藏图片显示区域 |
| | | this.imageList = []; |
| | | this.isShowImg = false; |
| | | this.base64Image = ''; |
| | | } |
| | |
| | | } else { |
| | | |
| | | if (!this.editData.fcheckResu) { |
| | | this.editData.fcheckResu = 1 |
| | | this.editData.fcheckResu = 'OK'; // 默认合格 |
| | | } |
| | | |
| | | if (this.editData.fcheckResu == 0 || this.editData.fcheckResu == 1) { |
| | | if (this.editData.fcheckResu == 0) { |
| | | // 统一使用 OK/NG |
| | | const upperValue = String(this.editData.fcheckResu).toUpperCase(); |
| | | if (upperValue === 'OK' || upperValue === 'NG') { |
| | | this.editData.fcheckResu = upperValue; // 统一转为大写 |
| | | if (upperValue === 'NG') { |
| | | fstand = "×"; |
| | | } |
| | | } else { |
| | | this.$showMessage("无标准值时,检验结果只能为0或1!"); |
| | | this.$showMessage("无上下限时,检验结果只能为OK或NG!"); |
| | | return; |
| | | } |
| | | } |
| | | |
| | | // 验证不合格检验项目必须上传图片并填写不良描述 |
| | | if (fstand === "×" || this.editData.fcheckResu == 0) { |
| | | if (fstand === "×" || this.editData.fcheckResu === 'NG') { |
| | | // 检查是否已上传图片 |
| | | if (!this.formData.imageData || this.formData.imageData.length === 0) { |
| | | if (!this.imageList || this.imageList.length === 0) { |
| | | this.$showMessage("检验项目不合格,必须上传图片!"); |
| | | return; |
| | | } |
| | |
| | | numberEdit(item) { |
| | | |
| | | let fstand = "√"; |
| | | let fcheckResu = 1; |
| | | let fcheckResu = 'OK'; // 合格用OK |
| | | |
| | | if (item.fcheckResu == '1') { |
| | | // 判断当前是否为合格状态(OK 或 1 都表示合格) |
| | | if (item.fcheckResu == '1' || item.fcheckResu == 'OK' || item.fcheckResu == 1) { |
| | | fstand = "×"; |
| | | fcheckResu = 0; |
| | | fcheckResu = 'NG'; // 不合格用NG |
| | | } |
| | | |
| | | // 验证不合格检验项目必须上传图片并填写不良描述 |
| | | if (fstand === "×" || fcheckResu == 0) { |
| | | if (fstand === "×" || fcheckResu == 'NG') { |
| | | // 检查是否已上传图片 |
| | | if (!this.formData.imageData || this.formData.imageData.length === 0) { |
| | | if (!this.imageList || this.imageList.length === 0) { |
| | | this.$showMessage("检验项目不合格,必须上传图片!"); |
| | | return; |
| | | } |
| | |
| | | }); |
| | | }, |
| | | |
| | | // 根据选择的来源选择图片 |
| | | // 根据选择的来源选择图片(支持多选) |
| | | chooseImageWithSource(sourceType) { |
| | | // 计算还可以上传多少张图片 |
| | | const currentCount = this.imageList ? this.imageList.length : 0; |
| | | const maxCount = 9; |
| | | const remainCount = maxCount - currentCount; |
| | | |
| | | if (remainCount <= 0) { |
| | | uni.showToast({ |
| | | title: '最多只能上传' + maxCount + '张图片', |
| | | icon: 'none' |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | uni.chooseImage({ |
| | | count: 1, // 最多选择1张图片 |
| | | sizeType: ['compressed', 'original'], // 提供压缩和原图选项 |
| | | sourceType: sourceType, // 根据用户选择设置来源 |
| | | count: sourceType.includes('camera') ? 1 : remainCount, // 拍照只能一张,相册可多选 |
| | | sizeType: ['compressed', 'original'], |
| | | sourceType: sourceType, |
| | | success: (res) => { |
| | | const tempFilePath = res.tempFilePaths[0]; |
| | | const tempFilePaths = res.tempFilePaths; |
| | | |
| | | // 如果是拍照,显示预览确认 |
| | | if (sourceType.includes('camera')) { |
| | | this.showImagePreview(tempFilePath); |
| | | this.showImagePreview(tempFilePaths[0]); |
| | | } else { |
| | | this.uploadImageToServer(tempFilePath); |
| | | // 多图片批量上传 |
| | | this.uploadMultipleImages(tempFilePaths); |
| | | } |
| | | }, |
| | | fail: (error) => { |
| | |
| | | } |
| | | uni.showToast({ |
| | | title: errorMessage, |
| | | icon: 'none' |
| | | }); |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // 批量上传图片 |
| | | uploadMultipleImages(tempFilePaths) { |
| | | if (!tempFilePaths || tempFilePaths.length === 0) { |
| | | return; |
| | | } |
| | | |
| | | uni.showLoading({ |
| | | title: '上传中... (0/' + tempFilePaths.length + ')' |
| | | }); |
| | | |
| | | const uploadUrl = this.$store.state.serverInfo.serverAPI + "/RKJ/UploadImageToPicture"; |
| | | let successCount = 0; |
| | | let failCount = 0; |
| | | const total = tempFilePaths.length; |
| | | |
| | | const uploadPromises = tempFilePaths.map((filePath, index) => { |
| | | return new Promise((resolve) => { |
| | | uni.uploadFile({ |
| | | url: uploadUrl, |
| | | filePath: filePath, |
| | | name: 'file', |
| | | formData: { |
| | | id: this.id, |
| | | gid: this.gid, |
| | | billNo: this.billNo, |
| | | createBy: this.$loginInfo.account |
| | | }, |
| | | success: (uploadRes) => { |
| | | try { |
| | | const result = JSON.parse(uploadRes.data); |
| | | if (result.status === 0) { |
| | | successCount++; |
| | | } else { |
| | | failCount++; |
| | | } |
| | | } catch (error) { |
| | | failCount++; |
| | | } |
| | | uni.showLoading({ |
| | | title: '上传中... (' + (successCount + failCount) + '/' + total + ')' |
| | | }); |
| | | resolve(); |
| | | }, |
| | | fail: () => { |
| | | failCount++; |
| | | uni.showLoading({ |
| | | title: '上传中... (' + (successCount + failCount) + '/' + total + ')' |
| | | }); |
| | | resolve(); |
| | | } |
| | | }); |
| | | }); |
| | | }); |
| | | |
| | | Promise.all(uploadPromises).then(() => { |
| | | uni.hideLoading(); |
| | | if (successCount > 0) { |
| | | uni.showToast({ |
| | | title: '成功上传' + successCount + '张图片', |
| | | icon: 'success' |
| | | }); |
| | | this.refreshResult(); |
| | | } else { |
| | | uni.showToast({ |
| | | title: '图片上传失败', |
| | | icon: 'none' |
| | | }); |
| | | } |
| | |
| | | }); |
| | | }, |
| | | |
| | | // 预览多图片 |
| | | previewMultiImage(index) { |
| | | const urls = this.imageList.map(img => 'data:image/jpeg;base64,' + img.base64Data); |
| | | uni.previewImage({ |
| | | urls: urls, |
| | | current: index |
| | | }); |
| | | }, |
| | | |
| | | // 删除单张图片 |
| | | deleteSingleImage(img) { |
| | | uni.showModal({ |
| | | title: '确认删除', |
| | | content: '确定要删除这张图片吗?', |
| | | confirmText: '删除', |
| | | cancelText: '取消', |
| | | confirmColor: '#e74c3c', |
| | | success: (res) => { |
| | | if (res.confirm) { |
| | | this.deleteImageFromServer(img.id); |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // 从服务器删除图片 |
| | | deleteImageFromServer() { |
| | | deleteImageFromServer(imageId = null) { |
| | | uni.showLoading({ |
| | | title: '删除中...' |
| | | }); |
| | | |
| | | const data = { id: this.id }; |
| | | if (imageId !== null && imageId !== undefined && imageId !== 0) { |
| | | data.imageId = imageId; |
| | | } |
| | | |
| | | this.$post({ |
| | | url: "/RKJ/DeleteImageFromPicture", |
| | | data: { |
| | | id: this.id // 当前检验项目ID |
| | | } |
| | | data: data |
| | | }).then(res => { |
| | | uni.hideLoading(); |
| | | if (res.status === 0) { |
| | |
| | | } |
| | | } |
| | | |
| | | /* 多图片列表样式 */ |
| | | .image-list { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 16px; |
| | | } |
| | | |
| | | .image-item { |
| | | width: 150px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | |
| | | .image-preview { |
| | | width: 150px; |
| | | height: 150px; |
| | | border: 1px solid $border-color; |
| | | border-radius: 8px; |
| | | overflow: hidden; |
| | | cursor: pointer; |
| | | |
| | | .preview-image { |
| | | width: 100%; |
| | | height: 100%; |
| | | object-fit: cover; |
| | | } |
| | | } |
| | | |
| | | .image-actions { |
| | | margin-top: 8px; |
| | | |
| | | .delete-image-btn { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 4px; |
| | | padding: 6px 12px; |
| | | background-color: $danger-color; |
| | | color: #fff; |
| | | border: none; |
| | | border-radius: 4px; |
| | | font-size: 12px; |
| | | cursor: pointer; |
| | | |
| | | .delete-icon { |
| | | font-size: 14px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .info-grid { |
| | | display: grid; |
| | | grid-template-columns: repeat(3, 1fr); |