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-09 16:08:47 +08:00
parent eb771ec4f1
commit 50361dba9a
7 changed files with 503 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
inventory-web/src/views/material/list.vue
View File

@ -124,12 +124,43 @@
<el-table-column v-if="columns.visibilityLevel.visible" prop="visibilityLevel" label="可见等级" min-width="100" align="center">
<template #default="scope">L{{ scope.row.visibilityLevel }}</template>
</el-table-column>
<el-table-column v-if="columns.files.visible" label="资料" min-width="100" align="center">
<template #default="scope">
<el-button v-if="scope.row.generalImage" link type="primary" :icon="Picture" title="查看图片" @click="openLink(scope.row.generalImage)" />
<el-button v-if="scope.row.generalManual" link type="primary" :icon="Document" title="查看说明书" @click="openLink(scope.row.generalManual)" />
<el-table-column v-if="columns.files.visible" label="资料" min-width="140" align="center">
<template #default="{ row }">
<div style="display: flex; gap: 8px; justify-content: center;">
<div v-if="getImagesOnly(row.generalImage).length > 0" class="file-preview-cell">
<el-image
style="width: 32px; height: 32px; border-radius: 4px;"
:src="getImageUrl(getImagesOnly(row.generalImage)[0])"
:preview-src-list="getImagesOnly(row.generalImage).map(u => getImageUrl(u))"
preview-teleported
fit="cover"
/>
<span v-if="getImagesOnly(row.generalImage).length > 1" class="more-badge">+{{getImagesOnly(row.generalImage).length}}</span>
</div>
<el-popover v-if="row.generalManual && row.generalManual.length > 0" placement="top" trigger="hover" width="200">
<template #reference>
<el-button link type="primary" :icon="Document" />
</template>
<div style="display: flex; flex-direction: column; gap: 5px;">
<div v-for="(link, idx) in row.generalManual" :key="idx">
<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
style="width: 100px; height: 100px"
:src="getImageUrl(link)"
:preview-src-list="[getImageUrl(link)]"
fit="cover"
/>
</div>
</div>
</el-popover>
</div>
</template>
</el-table-column>
<el-table-column v-if="columns.isEnabled.visible" prop="isEnabled" label="是否启用" min-width="100" align="center">
<template #default="scope">
<el-switch
@ -165,7 +196,7 @@
<el-dialog
v-model="dialog.visible"
:title="dialog.title"
width="600px"
width="700px"
append-to-body
@close="cancel"
>
@ -227,12 +258,60 @@
<span style="margin-left: 10px; color: #999; font-size: 12px;">(0为最低，9为最高)</span>
</el-form-item>
<el-form-item label="说明书链接" prop="generalManual">
<el-input v-model="form.generalManual" placeholder="请输入说明书URL链接" />
<el-form-item label="产品图" prop="generalImage">
<div class="upload-container">
<el-upload
v-model:file-list="fileListImage"
action="#"
list-type="picture-card"
multiple
:http-request="(opts) => customUpload(opts, 'generalImage')"
:on-preview="handlePreviewPicture"
:on-remove="(file) => handleRemoveImage(file, 'generalImage')"
:before-upload="beforeAvatarUpload"
>
<el-icon><Plus /></el-icon>
</el-upload>
<div class="camera-card" @click="triggerCamera('generalImage')">
<el-icon><Camera /></el-icon><span class="text">拍照</span>
</div>
</div>
<el-input
v-model="imageExternalUrl"
placeholder="如有外部图片链接，请在此输入"
style="margin-top: 8px;"
clearable
>
<template #prefix><el-icon><Link /></el-icon></template>
</el-input>
</el-form-item>
<el-form-item label="产品图链接" prop="generalImage">
<el-input v-model="form.generalImage" placeholder="请输入图片URL链接" />
<el-form-item label="说明书" prop="generalManual">
<div class="upload-container">
<el-upload
v-model:file-list="fileListManual"
action="#"
list-type="picture-card"
multiple
:http-request="(opts) => customUpload(opts, 'generalManual')"
:on-preview="handlePreviewPicture"
:on-remove="(file) => handleRemoveImage(file, 'generalManual')"
:before-upload="beforeAvatarUpload"
>
<el-icon><Plus /></el-icon>
</el-upload>
<div class="camera-card" @click="triggerCamera('generalManual')">
<el-icon><Camera /></el-icon><span class="text">拍照</span>
</div>
</div>
<el-input
v-model="manualExternalUrl"
placeholder="如有外部说明书链接，请在此输入"
style="margin-top: 8px;"
clearable
>
<template #prefix><el-icon><Link /></el-icon></template>
</el-input>
</el-form-item>
<el-form-item label="状态" prop="isEnabled">
@ -251,13 +330,19 @@
</template>
</el-dialog>
<el-dialog v-model="dialogVisibleImage" append-to-body width="50%">
<img style="width: 100%" :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
<input type="file" ref="cameraInputRef" accept="image/*" capture="environment" style="display: none" @change="handleCameraFile"/>
</el-card>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue';
import { Plus, Picture, Document, Refresh, Setting, Rank } from '@element-plus/icons-vue';
import { Plus, Picture, Document, Refresh, Setting, Rank, Camera, Link } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
@ -267,19 +352,20 @@ import {
updateMaterialBase,
delMaterialBase
} from '@/api/material_base';
import { uploadFile, deleteFile } from '@/api/common/upload'; // 假设通用上传接口在此
// --- 类型定义 ---
interface MaterialBaseVO {
id: number;
name: string;
commonName?: string; // ✅ 新增类型定义
commonName?: string;
category: string;
type: string;
spec: string;
unit: string;
visibilityLevel: number;
generalManual?: string;
generalImage?: string;
generalManual: string[]; // 修改为数组
generalImage: string[]; // 修改为数组
isEnabled: number;
statusLoading?: boolean;
}
@ -300,10 +386,21 @@ const tableData = ref<MaterialBaseVO[]>([]);
const submitLoading = ref(false);
const tableSize = ref<'large' | 'default' | 'small'>('large');
// 文件上传相关
const fileListImage = ref<any[]>([]);
const fileListManual = ref<any[]>([]);
const imageExternalUrl = ref('');
const manualExternalUrl = ref('');
const dialogVisibleImage = ref(false);
const dialogImageUrl = ref('');
const cameraInputRef = ref<HTMLInputElement | null>(null);
const currentCameraField = ref<'generalImage' | 'generalManual'>('generalImage');
const columns = reactive({
id: { visible: true },
name: { visible: true },
commonName: { visible: true }, // ✅ 新增列控制
commonName: { visible: true },
category: { visible: true },
type: { visible: true },
spec: { visible: true },
@ -336,14 +433,14 @@ const formRef = ref<FormInstance>();
const initForm = {
id: undefined,
name: '',
commonName: '', // ✅ 初始化新增字段
commonName: '',
category: '',
type: '',
spec: '',
unit: '',
visibilityLevel: 0,
generalManual: '',
generalImage: '',
generalManual: [] as string[], // 初始化为数组
generalImage: [] as string[], // 初始化为数组
isEnabled: 1
};
@ -445,8 +542,27 @@ const handleEdit = (row: MaterialBaseVO) => {
resetForm();
dialog.title = '编辑基础信息';
dialog.visible = true;
nextTick(() => {
// 基础字段赋值
Object.assign(form.value, row);
// 初始化文件列表
const images = row.generalImage || [];
const manuals = row.generalManual || [];
// 分离图片文件和外部链接
const imgFiles = images.filter(u => !isExternalLink(u));
const imgLinks = images.filter(u => isExternalLink(u));
const manualFiles = manuals.filter(u => !isExternalLink(u));
const manualLinks = manuals.filter(u => isExternalLink(u));
fileListImage.value = imgFiles.map(url => ({ name: url.split('/').pop(), url: getImageUrl(url) }));
imageExternalUrl.value = imgLinks.length > 0 ? imgLinks[0] : '';
fileListManual.value = manualFiles.map(url => ({ name: url.split('/').pop(), url: getImageUrl(url) }));
manualExternalUrl.value = manualLinks.length > 0 ? manualLinks[0] : '';
});
};
@ -482,9 +598,35 @@ const submitForm = async () => {
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);
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 payload = {
...form.value,
generalImage: cleanImages,
generalManual: cleanManuals
};
const requestApi = form.value.id ? updateMaterialBase : addMaterialBase;
const actionText = form.value.id ? '修改' : '新增';
await requestApi(form.value);
await requestApi(payload);
ElMessage.success(`${actionText}成功`);
dialog.visible = false;
getList();
@ -504,6 +646,10 @@ const cancel = () => {
const resetForm = () => {
form.value = {...initForm};
fileListImage.value = [];
fileListManual.value = [];
imageExternalUrl.value = '';
manualExternalUrl.value = '';
if (formRef.value) formRef.value.resetFields();
};
@ -536,6 +682,87 @@ const openLink = (url: string) => {
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 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
}
if (rawFile.size / 1024 / 1024 > 10) { ElMessage.error('文件不能超过 10MB'); return false }
return true
}
const customUpload = async (options: any, targetField: 'generalImage' | 'generalManual') => {
const { file, onSuccess, onError } = options
const formData = new FormData()
formData.append('file', file)
try {
const res: any = await uploadFile(formData)
if (res.code === 200) {
const newUrl = res.data.url
form.value[targetField].push(newUrl)
ElMessage.success('上传成功')
onSuccess(res)
} else {
ElMessage.error(res.msg || '上传失败');
onError(new Error(res.msg))
}
} catch (e) {
ElMessage.error('网络错误');
onError(e)
}
}
const handleRemoveImage = async (uploadFile: any, targetField: 'generalImage' | 'generalManual') => {
try {
const urlToRemove = form.value[targetField].find(u => getImageUrl(u) === uploadFile.url) || uploadFile.url
form.value[targetField] = form.value[targetField].filter(u => u !== urlToRemove)
if (!isExternalLink(urlToRemove)) {
const filename = urlToRemove.split('/').pop();
if (filename) await deleteFile(filename)
}
ElMessage.success('已删除')
} catch (e) { console.error(e) }
}
const handlePreviewPicture = (uploadFile: any) => {
dialogImageUrl.value = uploadFile.url!;
dialogVisibleImage.value = true
}
const triggerCamera = (field: 'generalImage' | 'generalManual') => {
currentCameraField.value = field;
if (cameraInputRef.value) cameraInputRef.value.click()
}
const handleCameraFile = async (event: Event) => {
const input = event.target as HTMLInputElement
if (input.files && input.files[0]) {
const file = input.files[0]
if (!beforeAvatarUpload(file)) { input.value = ''; return }
const formData = new FormData(); formData.append('file', file)
const loadingMsg = ElMessage.loading({ message: '照片上传中...', duration: 0 })
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)
if (field === 'generalImage') fileListImage.value.push({ name: newUrl.split('/').pop(), url: getImageUrl(newUrl) })
else fileListManual.value.push({ name: newUrl.split('/').pop(), url: getImageUrl(newUrl) })
ElMessage.success('拍照上传成功')
} else { ElMessage.error(res.msg || '上传失败') }
} catch (e) { ElMessage.error('网络错误，上传失败') } finally { loadingMsg.close(); input.value = '' }
}
}
onMounted(() => {
getList();
});
@ -566,4 +793,17 @@ onMounted(() => {
display: flex;
flex-direction: column;
}
/* 上传相关样式 */
.upload-container { display: flex; flex-wrap: wrap; gap: 8px; }
:deep(.el-upload--picture-card) { width: 100px; height: 100px; line-height: 100px; }
:deep(.el-upload-list--picture-card .el-upload-list__item) { width: 100px; height: 100px; }
.camera-card { width: 100px; height: 100px; background-color: #fbfdff; border: 1px dashed #c0ccda; border-radius: 6px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s; color: #8c939d; }
.camera-card:hover { border-color: #409EFF; color: #409EFF; }
.camera-card .text { font-size: 12px; margin-top: 5px; }
.camera-card .el-icon { font-size: 24px; }
/* 表格缩略图样式 */
.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>

108
inventory-web/src/views/transaction/borrow.vue
View File

@ -13,18 +13,9 @@
</template>
<div class="scan-section">
<div v-if="showCamera" class="camera-wrapper">
<QrScanner @decode="onScanSuccess" />
<div class="scan-overlay">
<el-button type="info" size="small" bg text @click="showCamera = false" icon="Close">
关闭摄像头
</el-button>
</div>
</div>
<div v-else class="camera-placeholder" @click="showCamera = true">
<div class="camera-placeholder" @click="showCamera = true">
<el-icon :size="40" color="#409EFF"><CameraFilled /></el-icon>
<span class="text">点击开启扫码</span>
<span class="text">点击开启全屏扫码</span>
</div>
<div class="input-box">
@ -133,6 +124,23 @@
</div>
</el-card>
<div v-if="showCamera" class="fullscreen-scanner-overlay">
<div class="scanner-header">
<el-button circle icon="Close" @click="showCamera = false" class="close-btn" />
<span class="scanner-title">扫码模式</span>
<div class="scanner-placeholder"></div>
</div>
<div class="scanner-body">
<QrScanner @decode="onScanSuccess" />
</div>
<div class="scanner-footer">
<p>请将条码/二维码放入镜头范围</p>
<p v-if="cartItems.length > 0" class="current-count">已添加: {{ cartItems.length }} 项</p>
</div>
</div>
<el-dialog
v-model="showSignatureDialog"
fullscreen
@ -205,7 +213,6 @@ const form = reactive({
remark: ''
})
// ★ 修改点：增强校验规则
const rules = {
borrower_name: [
{ required: true, message: '请输入借用人姓名', trigger: 'blur' }
@ -215,9 +222,8 @@ const rules = {
]
}
// ★ 新增：禁止选择今天之前的日期
const disabledDate = (time: Date) => {
return time.getTime() < Date.now() - 8.64e7 // 禁止选择昨天及之前
return time.getTime() < Date.now() - 8.64e7
}
// --- 核心扫码逻辑 ---
@ -292,7 +298,10 @@ const handleManualInput = async () => {
}
} finally {
loading.value = false
nextTick(() => { barcodeRef.value?.focus() })
// ★ 核心修改：只有当非全屏模式时，才自动聚焦输入框
if (!showCamera.value) {
nextTick(() => { barcodeRef.value?.focus() })
}
}
}
@ -318,7 +327,6 @@ const submitForm = async () => {
if (!formRef.value) return
if (cartItems.value.length === 0) return ElMessage.warning('请先添加物品')
// ★ 核心修改：等待校验通过后再提交，否则报错会被拦截在前端
await formRef.value.validate(async (valid: boolean) => {
if (!valid) {
ElMessage.error('请填写完整的必填项（姓名、归还日期）')
@ -342,7 +350,7 @@ const submitForm = async () => {
method: 'post',
data: {
items: cartItems.value,
...form, // 此时 form.expected_return_time 已经是 YYYY-MM-DD 格式
...form,
signature_path: signatureUrl
}
})
@ -449,21 +457,73 @@ onUnmounted(() => {
.card-header { display: flex; justify-content: space-between; align-items: center; }
.title-box { font-size: 16px; font-weight: bold; display: flex; align-items: center; gap: 8px; }
/* 扫码区 */
/* 扫码区（卡片内触发器） */
.scan-section { margin-bottom: 20px; }
.camera-wrapper {
height: 25vh; background: #000; border-radius: 12px; overflow: hidden; position: relative; margin-bottom: 10px;
}
.scan-overlay {
position: absolute; bottom: 10px; right: 10px; z-index: 10;
}
.camera-placeholder {
height: 120px; background: #f5f7fa; border: 1px dashed #dcdfe6; border-radius: 8px;
display: flex; flex-direction: column; justify-content: center; align-items: center;
color: #909399; margin-bottom: 10px; cursor: pointer;
transition: all 0.3s;
}
.camera-placeholder:active { background: #e6e8eb; }
.camera-placeholder .text { margin-top: 5px; font-size: 13px; }
/* ★ 全屏扫码层样式 */
.fullscreen-scanner-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000;
z-index: 9999;
display: flex;
flex-direction: column;
}
.scanner-header {
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
background: rgba(0,0,0,0.6);
color: #fff;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
.scanner-title { font-size: 16px; font-weight: bold; }
.close-btn { background: rgba(255,255,255,0.2); border: none; color: #fff; }
.scanner-body {
flex: 1;
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* 强制子组件（QrScanner）填满容器 */
:deep(.qr-scanner-container) {
width: 100% !important;
height: 100% !important;
border-radius: 0 !important;
}
.scanner-footer {
position: absolute;
bottom: 0;
width: 100%;
padding: 20px;
background: rgba(0,0,0,0.6);
color: #fff;
text-align: center;
z-index: 10;
}
.current-count { color: #67c23a; font-weight: bold; margin-top: 5px; font-size: 16px; }
/* 表单与购物车 */
.cart-section { margin-bottom: 20px; }
.form-section { background: #fff; }

103
inventory-web/src/views/transaction/return.vue
View File

@ -13,18 +13,9 @@
</template>
<div class="scan-section">
<div v-if="showCamera" class="camera-wrapper">
<QrScanner @decode="onScanSuccess" />
<div class="scan-overlay">
<el-button type="info" size="small" bg text @click="showCamera = false" icon="Close">
关闭摄像头
</el-button>
</div>
</div>
<div v-else class="camera-placeholder" @click="showCamera = true">
<div class="camera-placeholder" @click="showCamera = true">
<el-icon :size="40" color="#409EFF"><CameraFilled /></el-icon>
<span class="text">点击开启扫码</span>
<span class="text">点击开启全屏扫码</span>
</div>
<div class="input-box">
@ -108,6 +99,23 @@
</div>
</el-card>
<div v-if="showCamera" class="fullscreen-scanner-overlay">
<div class="scanner-header">
<el-button circle icon="Close" @click="showCamera = false" class="close-btn" />
<span class="scanner-title">扫码模式</span>
<div class="scanner-placeholder"></div>
</div>
<div class="scanner-body">
<QrScanner @decode="onScanSuccess" />
</div>
<div class="scanner-footer">
<p>扫描二维码/条形码进行归还</p>
<p v-if="returnList.length > 0" class="current-count">待还: {{ returnList.length }} 项</p>
</div>
</div>
<el-dialog
v-model="showSignatureDialog"
fullscreen
@ -222,7 +230,10 @@ const scanItem = async () => {
ElMessage.error('未找到该物品的未还记录')
} finally {
loading.value = false
nextTick(() => { barcodeRef.value?.focus() })
// ★ 核心修改：仅在非全屏模式聚焦
if (!showCamera.value) {
nextTick(() => { barcodeRef.value?.focus() })
}
}
}
@ -297,7 +308,7 @@ const submitReturn = async () => {
returnList.value = []
signatureFile.value = null
signaturePreviewUrl.value = ''
showCamera.value = false // 关闭摄像头
showCamera.value = false
} catch(e: any) {
ElMessage.error(e.response?.data?.msg || '提交失败')
} finally {
@ -389,21 +400,73 @@ onUnmounted(() => {
.card-header { display: flex; justify-content: space-between; align-items: center; }
.title-box { font-size: 16px; font-weight: bold; display: flex; align-items: center; gap: 8px; }
/* 扫码区 */
/* 扫码区（卡片内触发器） */
.scan-section { margin-bottom: 20px; }
.camera-wrapper {
height: 25vh; background: #000; border-radius: 12px; overflow: hidden; position: relative; margin-bottom: 10px;
}
.scan-overlay {
position: absolute; bottom: 10px; right: 10px; z-index: 10;
}
.camera-placeholder {
height: 120px; background: #f5f7fa; border: 1px dashed #dcdfe6; border-radius: 8px;
display: flex; flex-direction: column; justify-content: center; align-items: center;
color: #909399; margin-bottom: 10px; cursor: pointer;
transition: all 0.3s;
}
.camera-placeholder:active { background: #e6e8eb; }
.camera-placeholder .text { margin-top: 5px; font-size: 13px; }
/* ★ 全屏扫码层样式 */
.fullscreen-scanner-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000;
z-index: 9999;
display: flex;
flex-direction: column;
}
.scanner-header {
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
background: rgba(0,0,0,0.6);
color: #fff;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
.scanner-title { font-size: 16px; font-weight: bold; }
.close-btn { background: rgba(255,255,255,0.2); border: none; color: #fff; }
.scanner-body {
flex: 1;
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* 强制子组件（QrScanner）填满容器 */
:deep(.qr-scanner-container) {
width: 100% !important;
height: 100% !important;
border-radius: 0 !important;
}
.scanner-footer {
position: absolute;
bottom: 0;
width: 100%;
padding: 20px;
background: rgba(0,0,0,0.6);
color: #fff;
text-align: center;
z-index: 10;
}
.current-count { color: #67c23a; font-weight: bold; margin-top: 5px; font-size: 16px; }
/* 表单与购物车 */
.cart-section { margin-bottom: 20px; }
.form-section { background: #fff; }