修改拍照上传逻辑，避免平板不可以调用照相机
This commit is contained in:
@ -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>
|
||||
Reference in New Issue
Block a user