duxingchen/KCGL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改拍照上传逻辑，避免平板不可以调用照相机

Browse Source
This commit is contained in:
dxc
2026-02-10 09:27:52 +08:00
parent d4b23790a1
commit a0ed92319c
5 changed files with 267 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
inventory-web/src/views/stock/inbound/product.vue
View File

@ -321,11 +321,11 @@
<el-dialog v-model="dialogVisibleImage" append-to-body width="50%">
<img style="width: 100%" :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
<el-dialog v-model="cameraDialogVisible" title="拍照上传" width="500px" append-to-body destroy-on-close>
<el-dialog v-model="cameraDialogVisible" title="拍照上传" width="500px" append-to-body destroy-on-close :close-on-click-modal="false">
<WebRtcCamera
ref="cameraRef"
@confirm="handleCameraConfirm"
@cancel="cameraDialogVisible = false"
ref="cameraRef"
@photo-submit="handleCameraConfirm"
@cancel="cameraDialogVisible = false"
/>
</el-dialog>
@ -353,7 +353,8 @@
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { Plus, Setting, Refresh, Search, Box, House, Link, InfoFilled, Printer, Camera, Picture } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
// 修复：引入 ElLoading
import { ElMessage, ElLoading } from 'element-plus'
import dayjs from 'dayjs'
import { getProductList, createProductInbound, updateProductInbound, deleteProductInbound, searchMaterialBase } from '@/api/inbound/product'
import { uploadFile, deleteFile } from '@/api/inbound/buy'
@ -566,6 +567,8 @@ const handleRemoveImage = async (uploadFile: any, targetField: 'product_photo' |
ElMessage.success('已删除')
} catch (e) { console.error(e) }
}
const handlePreviewPicture = (uploadFile: any) => { dialogImageUrl.value = uploadFile.url!; dialogVisibleImage.value = true }
const triggerCamera = (field: any) => {
currentCameraField.value = field;
cameraDialogVisible.value = true;
@ -577,7 +580,10 @@ const handleCameraConfirm = async (file: File) => {
}
const formData = new FormData();
formData.append('file', file);
const loadingMsg = ElMessage.loading({ message: '上传中...', duration: 0 });
// 修复点：使用 ElLoading
const loadingMsg = ElLoading.service({ text: '照片上传中...', background: 'rgba(0, 0, 0, 0.7)' });
let success = false;
try {
const res: any = await uploadFile(formData);
@ -598,7 +604,7 @@ const handleCameraConfirm = async (file: File) => {
ElMessage.error(res.msg || '上传失败');
}
} catch (e) {
ElMessage.error('网络错误');
ElMessage.error('网络错误，上传失败');
} finally {
loadingMsg.close();
if (success) {
@ -606,7 +612,6 @@ const handleCameraConfirm = async (file: File) => {
}
}
};
const handlePreviewPicture = (uploadFile: any) => { dialogImageUrl.value = uploadFile.url!; dialogVisibleImage.value = true }
const submitForm = async () => {
await formRef.value.validate(async (valid: boolean) => {
@ -695,4 +700,4 @@ onMounted(() => fetchData())
.camera-card:hover { border-color: #409EFF; color: #409EFF; }
.camera-card .text { font-size: 12px; margin-top: 5px; }
.camera-card .el-icon { font-size: 24px; }
</style>
</style>