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

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; }