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