herenshan112
7 months ago
3 changed files with 182 additions and 8 deletions
@ -0,0 +1,145 @@ |
|||
<template> |
|||
<div class="container"> |
|||
<h1 style="padding-left: 60px;">作业票及附件上传</h1> |
|||
<!-- 第一行：ID 输入与查询 --> |
|||
<div class="grid-row" style="--columns: 12; --gap: 20px"> |
|||
<div class="grid-item" style="--span: 6"> |
|||
ID:<el-input v-model="id" placeholder="请输入ID" clearable></el-input> |
|||
</div> |
|||
<div class="grid-item" style="--span: 4"> |
|||
<el-button type="primary" @click="getTicketNumber" :loading="loading">获取作业票编号</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 第二行：显示作业票编号 --> |
|||
<div v-if="ticketNumberFlag" class="grid-row"> |
|||
<div class="grid-item" style="--span: 12"> |
|||
作业票编号： |
|||
{{ ticketNumber }} |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 第三行：选择文件 --> |
|||
<div class="grid-row"> |
|||
<div class="grid-item" style="--span: 12"> |
|||
<el-upload class="upload-demo" :action="downloadUrl" :data="{ |
|||
id: id, |
|||
ticketNumber: ticketNumber, |
|||
zypTypeId: zypTypeId |
|||
}" :disabled="ticketNumber.length == 0" :before-upload="beforeUpload" :on-success="handleSuccess" |
|||
:show-file-list="false"> |
|||
<el-button type="primary" :disabled="ticketNumber.length == 0"> |
|||
{{ fileName || '点击选择PDF文件' }} |
|||
</el-button> |
|||
|
|||
</el-upload> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
|
|||
|
|||
<script setup> |
|||
import { ref, watch } from 'vue'; |
|||
import { ElMessage } from 'element-plus' |
|||
import request from '@/utils/request'; |
|||
|
|||
// 响应式数据 |
|||
const id = ref('') |
|||
const ticketNumberFlag = ref(false) |
|||
const ticketNumber = ref('') |
|||
const uploadDisabled = ref(true) |
|||
const loading = ref(false) |
|||
const fileName = ref('') |
|||
const zypTypeId = ref("") |
|||
|
|||
// 获取作业票编号（模拟接口） |
|||
const fetchTicket = () => { |
|||
console.log(id.value) |
|||
return request({ |
|||
url: '/javasys/dataupload/api/v1/getOTBILLIDById', |
|||
method: 'post', |
|||
data: { |
|||
id: id.value, |
|||
}, |
|||
}); |
|||
} |
|||
const downloadUrl = import.meta.env.VITE_APP_BASE_API + "/javasys/dataupload/api/v1/uploadPDF"; |
|||
|
|||
watch(id, (newValue, oldValue) => { |
|||
console.log('票号变化:', oldValue, '→', newValue); |
|||
ticketNumber.value = '' |
|||
}); |
|||
function getTicketNumber() { |
|||
|
|||
fetchTicket().then(({ code, data }) => { |
|||
if (code == 0) { |
|||
if (data) { |
|||
ticketNumberFlag.value = true |
|||
ticketNumber.value = data.OTBILLID |
|||
zypTypeId.value = data.zypTypeId |
|||
} else { |
|||
alert("id有误,请重新输入") |
|||
} |
|||
} else { |
|||
alert("id有误,请重新输入") |
|||
} |
|||
|
|||
|
|||
}); |
|||
} |
|||
|
|||
|
|||
// 上传前校验 |
|||
const beforeUpload = (file) => { |
|||
if (!ticketNumberFlag.value) { |
|||
ElMessage.warning('请先获取作业票编号') |
|||
return false |
|||
} |
|||
if (file.type !== 'application/pdf') { |
|||
ElMessage.error('仅支持上传PDF文件') |
|||
return false |
|||
} |
|||
return true |
|||
} |
|||
|
|||
// 上传成功处理 |
|||
const handleSuccess = (response, file) => { |
|||
fileName.value = file.name |
|||
ElMessage.success('作业票上传成功') |
|||
uploadDisabled.value = true // 上传后禁用按钮 |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.container { |
|||
display: grid; |
|||
gap: 20px; |
|||
/* 行间距 */ |
|||
padding: 30px; |
|||
} |
|||
|
|||
.grid-row { |
|||
display: grid; |
|||
grid-template-columns: repeat(var(--columns, 12), 1fr); |
|||
gap: var(--gap, 0); |
|||
} |
|||
|
|||
.grid-item { |
|||
grid-column: span var(--span, 12); |
|||
/* 元素对齐方式 */ |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 10px; |
|||
/* 元素内部间距 */ |
|||
} |
|||
|
|||
/* 保持原有样式兼容 */ |
|||
.row { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
/* 如果原有样式依赖可以保留 */ |
|||
</style> |
|||
Loading…
Reference in new issue