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

2026-02-10 09:27:52 +08:00
parent d4b23790a1
commit a0ed92319c
5 changed files with 267 additions and 150 deletions
--- a/inventory-web/src/views/material/list.vue
+++ b/inventory-web/src/views/material/list.vue
@ -148,12 +148,14 @@
                    <el-link v-if="isExternalLink(link)" :href="link" target="_blank" type="primary" :underline="false">
                      说明书 {{idx+1}} <el-icon><Link /></el-icon>
                    </el-link>
-                    <el-image v-else
+                    <el-image v-else-if="isImageFile(link)"
                              style="width: 100px; height: 100px"
                              :src="getImageUrl(link)"
                              :preview-src-list="[getImageUrl(link)]"
                              fit="cover"
+                              preview-teleported
                    />
+                    <el-link v-else :href="getImageUrl(link)" target="_blank" type="info">PDF 文件 {{idx+1}}</el-link>
                  </div>
                </div>
              </el-popover>
@ -333,15 +335,13 @@
      <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>
-
-
    </el-card>
  </div>
 </template>
@ -349,7 +349,8 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, nextTick } from 'vue';
 import { Plus, Picture, Document, Refresh, Setting, Rank, Camera, Link } from '@element-plus/icons-vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
+// 修复：引入 ElLoading
+import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
 import type { FormInstance, FormRules } from 'element-plus';

 import {
@ -358,7 +359,7 @@ import {
  updateMaterialBase,
  delMaterialBase
 } from '@/api/material_base';
-import { uploadFile, deleteFile } from '@/api/common/upload'; // 假设通用上传接口在此
+import { uploadFile, deleteFile } from '@/api/common/upload';
 import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue';

 // --- 类型定义 ---
@ -371,8 +372,8 @@ interface MaterialBaseVO {
  spec: string;
  unit: string;
  visibilityLevel: number;
-  generalManual: string[]; // 修改为数组
-  generalImage: string[];  // 修改为数组
+  generalManual: string[];
+  generalImage: string[];
  isEnabled: number;
  statusLoading?: boolean;
 }
@ -404,7 +405,6 @@ const cameraDialogVisible = ref(false);
 const cameraRef = ref<InstanceType<typeof WebRtcCamera> | null>(null);
 const currentCameraField = ref<'generalImage' | 'generalManual'>('generalImage');

-
 const columns = reactive({
  id: { visible: true },
  name: { visible: true },
@ -447,8 +447,8 @@ const initForm = {
  spec: '',
  unit: '',
  visibilityLevel: 0,
-  generalManual: [] as string[], // 初始化为数组
-  generalImage: [] as string[],  // 初始化为数组
+  generalManual: [] as string[],
+  generalImage: [] as string[],
  isEnabled: 1
 };

@ -552,8 +552,8 @@ const handleEdit = (row: MaterialBaseVO) => {
  dialog.visible = true;

  nextTick(() => {
-    // 基础字段赋值
-    Object.assign(form.value, row);
+    // 基础字段赋值 - 深拷贝防止引用
+    Object.assign(form.value, JSON.parse(JSON.stringify(row)));

    // 初始化文件列表
    const images = row.generalImage || [];
@ -577,13 +577,13 @@ const handleEdit = (row: MaterialBaseVO) => {
 const checkDuplicate = async (name: string, spec: string): Promise<boolean> => {
  try {
    const nameRes: any = await listMaterialBase({ pageNum: 1, pageSize: 100, keyword: name });
-    if (nameRes.data?.items?.some((item: MaterialBaseVO) => item.name === name)) {
-      ElMessage.error(`添加失败：已存在名称为 "${name}" 的基础信息！`);
+    if (nameRes.data?.items?.some((item: MaterialBaseVO) => item.name === name && item.id !== form.value.id)) {
+      ElMessage.error(`已存在名称为 "${name}" 的基础信息！`);
      return true;
    }
    const specRes: any = await listMaterialBase({ pageNum: 1, pageSize: 100, keyword: spec });
-    if (specRes.data?.items?.some((item: MaterialBaseVO) => item.spec === spec)) {
-      ElMessage.error(`添加失败：已存在规格/编号为 "${spec}" 的基础信息！`);
+    if (specRes.data?.items?.some((item: MaterialBaseVO) => item.spec === spec && item.id !== form.value.id)) {
+      ElMessage.error(`已存在规格/编号为 "${spec}" 的基础信息！`);
      return true;
    }
  } catch (e) {
@ -599,36 +599,25 @@ const submitForm = async () => {
    if (valid) {
      submitLoading.value = true;
      try {
-        if (!form.value.id) {
-          const isDuplicate = await checkDuplicate(form.value.name, form.value.spec);
-          if (isDuplicate) {
-            submitLoading.value = false;
-            return;
-          }
+        // 重复校验
+        const isDuplicate = await checkDuplicate(form.value.name, form.value.spec);
+        if (isDuplicate) {
+          submitLoading.value = false;
+          return;
        }

-        // 整理文件数据
-        const finalImageList = [...form.value.generalImage];
-        // 如果输入了外部链接且不在列表中，则加入
-        if (imageExternalUrl.value && !finalImageList.includes(imageExternalUrl.value)) {
-          finalImageList.push(imageExternalUrl.value);
-        }
-        // 过滤：只保留上传的(已经在customUpload处理) 和 外部链接
-        const cleanImages = finalImageList.filter(item => !isExternalLink(item)); // 这里的逻辑需要修正，应基于form.value.generalImage已经包含的内容
-        if (imageExternalUrl.value) cleanImages.push(imageExternalUrl.value);
+        // 整理文件数据：本地上传的路径已经在 form.value 中
+        // 我们需要重新合并：已有的非外链 + 新的输入框外链
+        const finalImageList = form.value.generalImage.filter(item => !isExternalLink(item));
+        if (imageExternalUrl.value) finalImageList.push(imageExternalUrl.value);

-
-        const finalManualList = [...form.value.generalManual];
-        if (manualExternalUrl.value && !finalManualList.includes(manualExternalUrl.value)) {
-          finalManualList.push(manualExternalUrl.value);
-        }
-        const cleanManuals = finalManualList.filter(item => !isExternalLink(item));
-        if (manualExternalUrl.value) cleanManuals.push(manualExternalUrl.value);
+        const finalManualList = form.value.generalManual.filter(item => !isExternalLink(item));
+        if (manualExternalUrl.value) finalManualList.push(manualExternalUrl.value);

        const payload = {
          ...form.value,
-          generalImage: cleanImages,
-          generalManual: cleanManuals
+          generalImage: finalImageList,
+          generalManual: finalManualList
        };

        const requestApi = form.value.id ? updateMaterialBase : addMaterialBase;
@ -638,8 +627,8 @@ const submitForm = async () => {
        ElMessage.success(`${actionText}成功`);
        dialog.visible = false;
        getList();
-      } catch (error) {
-        console.error(error);
+      } catch (error: any) {
+        ElMessage.error(error.msg || '保存失败');
      } finally {
        submitLoading.value = false;
      }
@ -653,7 +642,7 @@ const cancel = () => {
 };

 const resetForm = () => {
-  form.value = {...initForm};
+  form.value = JSON.parse(JSON.stringify(initForm));
  fileListImage.value = [];
  fileListManual.value = [];
  imageExternalUrl.value = '';
@ -685,26 +674,24 @@ const handleDelete = (row: MaterialBaseVO) => {
  }).catch(() => {});
 };

-const openLink = (url: string) => {
-  if (!url) return;
-  window.open(url, '_blank');
-}
-
 // --- 文件上传辅助函数 ---

 const getImageUrl = (url: string) => { return !url ? '' : (url.startsWith('http') ? url : url) }
 const isExternalLink = (str: string) => { return str && (str.startsWith('http://') || str.startsWith('https://')) && !str.includes('/api/v1/common/files') }
 const getImagesOnly = (list: string[]) => { return !list ? [] : list.filter(item => !isExternalLink(item)) }
+const isImageFile = (url: string) => { return /\.(jpg|jpeg|png|gif|webp)$/i.test(url) }

 const beforeAvatarUpload = (rawFile: any) => {
-  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'application/pdf') {
-    // 允许PDF用于说明书
-    if (rawFile.type === 'application/pdf') return true;
-    ElMessage.error('支持 JPG/PNG/PDF');
-    return false
+  const isTypeValid = ['image/jpeg', 'image/png', 'application/pdf'].includes(rawFile.type);
+  if (!isTypeValid) {
+    ElMessage.error('仅支持 JPG/PNG/PDF');
+    return false;
  }
-  if (rawFile.size / 1024 / 1024 > 10) { ElMessage.error('文件不能超过 10MB'); return false }
-  return true
+  if (rawFile.size / 1024 / 1024 > 10) {
+    ElMessage.error('文件不能超过 10MB');
+    return false;
+  }
+  return true;
 }

 const customUpload = async (options: any, targetField: 'generalImage' | 'generalManual') => {
@ -736,7 +723,7 @@ const handleRemoveImage = async (uploadFile: any, targetField: 'generalImage' |
      const filename = urlToRemove.split('/').pop();
      if (filename) await deleteFile(filename)
    }
-    ElMessage.success('已删除')
+    ElMessage.success('已从列表移除')
  } catch (e) { console.error(e) }
 }

@ -751,37 +738,40 @@ const triggerCamera = (field: 'generalImage' | 'generalManual') => {
 }

 const handleCameraConfirm = async (file: File) => {
+  console.log('✅ 父组件收到照片:', file.name)
  if (!beforeAvatarUpload(file)) {
    cameraDialogVisible.value = false;
    return;
  }
  const formData = new FormData();
  formData.append('file', file);
-  const loadingMsg = ElMessage.loading({ message: '照片上传中...', duration: 0 });
-  let success = false;
+
+  // 修复点：使用 ElLoading
+  const loadingInstance = ElLoading.service({ text: '照片上传中...', background: 'rgba(0, 0, 0, 0.7)' });
+
  try {
    const res: any = await uploadFile(formData);
    if (res.code === 200) {
      const newUrl = res.data.url;
      const field = currentCameraField.value;
      form.value[field].push(newUrl);
+
+      const fileObj = { name: newUrl.split('/').pop(), url: getImageUrl(newUrl) };
      if (field === 'generalImage') {
-        fileListImage.value.push({ name: newUrl.split('/').pop(), url: getImageUrl(newUrl) });
-      } else if (field === 'generalManual') {
-        fileListManual.value.push({ name: newUrl.split('/').pop(), url: getImageUrl(newUrl) });
+        fileListImage.value.push(fileObj);
+      } else {
+        fileListManual.value.push(fileObj);
      }
+
      ElMessage.success('拍照上传成功');
-      success = true;
+      cameraDialogVisible.value = false;
    } else {
      ElMessage.error(res.msg || '上传失败');
    }
  } catch (e) {
-    ElMessage.error('网络错误，上传失败');
+    ElMessage.error('上传过程中发生异常');
  } finally {
-    loadingMsg.close();
-    if (success) {
-      cameraDialogVisible.value = false;
-    }
+    loadingInstance.close();
  }
 };

@ -828,4 +818,4 @@ onMounted(() => {
 /* 表格缩略图样式 */
 .file-preview-cell { display: flex; align-items: center; justify-content: center; position: relative; }
 .more-badge { position: absolute; top: -5px; right: -5px; background: #909399; color: #fff; border-radius: 10px; padding: 0 4px; font-size: 10px; transform: scale(0.9); }
-</style>
+</style>
--- a/inventory-web/src/views/stock/inbound/buy.vue
+++ b/inventory-web/src/views/stock/inbound/buy.vue
@ -376,11 +376,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>

@ -402,7 +402,8 @@
 <script setup lang="ts">
 import {ref, reactive, onMounted, watch} from 'vue'
 import {Plus, Setting, Refresh, Search, Lock, Box, House, InfoFilled, Link, Printer, Camera, Delete, Picture} from '@element-plus/icons-vue'
-import {ElMessage, ElMessageBox} from 'element-plus'
+// 修改：引入 ElLoading
+import {ElMessage, ElMessageBox, ElLoading} from 'element-plus'
 import dayjs from 'dayjs'
 import {
  getBuyList,
@ -790,40 +791,59 @@ const triggerCamera = (field: 'arrival_photo' | 'inspection_report') => {
  currentCameraField.value = field;
  cameraDialogVisible.value = true;
 }
+
+// ----------------------------------------------------
+// 【修复核心】：处理拍照上传
+// ----------------------------------------------------
 const handleCameraConfirm = async (file: File) => {
+  console.log('✅ 父组件收到照片:', file.name, file.size)
+
  if (!beforeAvatarUpload(file)) {
-    cameraDialogVisible.value = false;
-    return;
+    return
  }
-  const formData = new FormData();
-  formData.append('file', file);
-  const loadingMsg = ElMessage.loading({ message: '照片上传中...', duration: 0 });
-  let success = false;
+
+  // 修复点：使用 ElLoading.service 替代报错的 ElMessage.loading
+  const loadingInstance = ElLoading.service({
+    lock: true,
+    text: '照片上传中，请稍候...',
+    background: 'rgba(0, 0, 0, 0.7)',
+  })
+
  try {
-    const res: any = await uploadFile(formData);
+    const formData = new FormData()
+    formData.append('file', file)
+
+    console.log('🚀 开始上传...')
+    const res: any = await uploadFile(formData)
+    console.log('📡 上传结果:', res)
+
    if (res.code === 200) {
-      const newUrl = res.data.url;
-      const field = currentCameraField.value;
-      form[field].push(newUrl);
+      const newUrl = res.data.url
+      const field = currentCameraField.value // 'arrival_photo' 或 'inspection_report'
+
+      // 更新表单数据
+      form[field].push(newUrl)
+
+      // 更新文件展示列表
      if (field === 'arrival_photo') {
-        arrivalFileList.value.push({ name: newUrl.split('/').pop(), url: getImageUrl(newUrl) });
+        arrivalFileList.value.push({ name: newUrl.split('/').pop(), url: getImageUrl(newUrl) })
      } else if (field === 'inspection_report') {
-        reportFileList.value.push({ name: newUrl.split('/').pop(), url: getImageUrl(newUrl) });
+        reportFileList.value.push({ name: newUrl.split('/').pop(), url: getImageUrl(newUrl) })
      }
-      ElMessage.success('拍照上传成功');
-      success = true;
+
+      ElMessage.success('拍照上传成功')
+      cameraDialogVisible.value = false // 成功才关闭弹窗
    } else {
-      ElMessage.error(res.msg || '上传失败');
+      ElMessage.error(res.msg || '上传失败')
    }
-  } catch (e) {
-    ElMessage.error('网络错误，上传失败');
+  } catch (e: any) {
+    console.error('上传异常:', e)
+    ElMessage.error('网络错误，上传失败')
  } finally {
-    loadingMsg.close();
-    if (success) {
-      cameraDialogVisible.value = false;
-    }
+    loadingInstance.close() // 关闭加载状态
  }
-};
+}
+
 const handleDelete = async (row: any) => { try { await deleteBuyInbound(row.id); ElMessage.success('删除成功'); fetchData() } catch (e) { ElMessage.error('删除失败') } }
 const handlePrint = async (row: any) => {
  printVisible.value = true; printLoading.value = true; previewUrl.value = ''
@ -843,7 +863,6 @@ onMounted(() => fetchData())
 </script>

 <style scoped>
-/* 样式部分保持不变，直接复用原有代码 */
 .buy-module { background: #f5f7fa; padding: 20px; min-height: 100vh; }
 .header-tools { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; background: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); }
 .left-tools { display: flex; gap: 10px; align-items: center; flex: 1; }
@ -898,4 +917,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>
--- a/inventory-web/src/views/stock/inbound/product.vue
+++ b/inventory-web/src/views/stock/inbound/product.vue
@ -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>
--- a/inventory-web/src/views/stock/inbound/semi.vue
+++ b/inventory-web/src/views/stock/inbound/semi.vue
@ -136,10 +136,7 @@
          <template #default="scope" v-else-if="['detail_link'].includes(col.prop)">
            <el-link v-if="scope.row[col.prop]" type="primary" :href="scope.row[col.prop]" target="_blank"
                     :underline="false">
-              <el-icon>
-                <Link/>
-              </el-icon>
-              查看
+              <el-icon><Link/></el-icon> 查看
            </el-link>
          </template>

@ -152,10 +149,7 @@
      <el-table-column label="操作" width="220" fixed="right" align="center">
        <template #default="{ row }">
          <el-button link type="warning" size="default" @click="handlePrint(row)">
-            <el-icon>
-              <Printer/>
-            </el-icon>
-            打印
+            <el-icon><Printer/></el-icon> 打印
          </el-button>
          <el-button link type="primary" size="default" @click="handleUpdate(row)">编辑</el-button>
          <el-popconfirm title="确定删除该条记录吗？不可恢复。" @confirm="handleDelete(row)" width="220">
@ -410,11 +404,11 @@
    </el-dialog>

    <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>
    <el-dialog v-model="printVisible" title="标签打印预览" width="400px" destroy-on-close append-to-body>
@ -435,7 +429,7 @@
 <script setup lang="ts">
 import {ref, reactive, onMounted, watch} from 'vue'
 import {Plus, Setting, Refresh, Search, Lock, Box, House, InfoFilled, Link, Printer, Camera, Picture} from '@element-plus/icons-vue'
-import {ElMessage} from 'element-plus'
+import {ElMessage, ElLoading} from 'element-plus'
 import dayjs from 'dayjs'
 import {
  getSemiList,
@ -753,7 +747,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);
@ -879,4 +876,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>