Browse Source
feat(inspection): 添加附件管理功能
feat(inspection): 添加附件管理功能
- 新增附件管理标签页组件 inspectionRequestAttachmentTab - 实现附件上传、下载、删除功能 - 集成到检验请求详情页面 - 添加文件列表展示和操作界面 - 支持多文件批量上传 - 实现文件预览和删除确认功能master
2 changed files with 280 additions and 1 deletions
-
266src/views/modules/inspection/com_inspectionRequestAttachmentTab.vue
-
15src/views/modules/inspection/inspectionRequestList.vue
@ -0,0 +1,266 @@ |
|||
<template> |
|||
<div class="customer-css"> |
|||
<!-- 操作按钮 --> |
|||
<el-form :inline="true" style="margin-bottom: 10px;"> |
|||
<el-button type="primary" icon="el-icon-upload" @click="handleUpload" :disabled="!searchData.requestNo">上传附件</el-button> |
|||
</el-form> |
|||
|
|||
<!-- 附件文件列表表格 --> |
|||
<el-table |
|||
:data="fileList" |
|||
:height="tableHeight" |
|||
border |
|||
v-loading="loading" |
|||
style="width: 100%;"> |
|||
<el-table-column |
|||
type="index" |
|||
label="序号" |
|||
width="80" |
|||
align="center" /> |
|||
<el-table-column |
|||
prop="fileName" |
|||
label="附件名称" |
|||
min-width="250" |
|||
show-overflow-tooltip /> |
|||
<el-table-column |
|||
prop="createdBy" |
|||
label="创建人" |
|||
width="120" |
|||
align="center" /> |
|||
<el-table-column |
|||
prop="createDate" |
|||
label="创建时间" |
|||
width="160" |
|||
align="center" /> |
|||
<el-table-column |
|||
label="操作" |
|||
width="150" |
|||
align="center" |
|||
fixed="right"> |
|||
<template slot-scope="scope"> |
|||
<el-link type="primary" @click="handleDownload(scope.row)">查看 |</el-link> |
|||
<el-link type="danger" @click="handleRemove(scope.row)">删除</el-link> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<!-- 上传附件弹窗 --> |
|||
<el-dialog title="上传附件" :visible.sync="ossVisible" width="450px" append-to-body :close-on-click-modal="false"> |
|||
<el-form ref="form" :model="ossForm" label-width="80px" label-position="top"> |
|||
<el-form-item label=" " class="auto"> |
|||
<el-upload |
|||
drag |
|||
:file-list="uploadFileList" |
|||
action="#" |
|||
ref="upload" |
|||
:on-remove="onRemoveFile" |
|||
:on-change="onChangeFile" |
|||
multiple |
|||
:auto-upload="false"> |
|||
<i class="el-icon-upload"></i> |
|||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> |
|||
</el-upload> |
|||
</el-form-item> |
|||
</el-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" :loading="uploadLoading" @click="submitData">确定</el-button> |
|||
<el-button @click="ossVisible = false">取消</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { queryOssFilePlus, removeOss, previewOssFileById } from '@/api/oss/oss' |
|||
import { ossUploadNoSaveOSSForYJY } from '@/api/oss/oss' |
|||
|
|||
export default { |
|||
name: 'InspectionRequestAttachmentTab', |
|||
|
|||
props: { |
|||
detailData: { |
|||
type: Object, |
|||
default: () => ({}) |
|||
}, |
|||
tableHeight: { |
|||
type: Number, |
|||
default: 400 |
|||
} |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
fileList: [], |
|||
loading: false, |
|||
searchData: { |
|||
requestNo: '', |
|||
site: '' |
|||
}, |
|||
ossVisible: false, |
|||
uploadLoading: false, |
|||
uploadFileList: [], |
|||
ossForm: { |
|||
remark: '' |
|||
} |
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
// 监听 detailData 变化,触发查询 |
|||
detailData: { |
|||
handler(newVal) { |
|||
if (newVal && newVal.requestNo) { |
|||
this.searchData.requestNo = newVal.requestNo |
|||
this.searchData.site = newVal.site || '' |
|||
this.searchTable() |
|||
} else { |
|||
this.fileList = [] |
|||
} |
|||
}, |
|||
deep: true, |
|||
immediate: true |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
// 查询附件列表 |
|||
searchTable() { |
|||
if (!this.searchData.requestNo) { |
|||
this.fileList = [] |
|||
return |
|||
} |
|||
|
|||
console.log('当前 searchData:', this.searchData) |
|||
this.loading = true |
|||
let params = { |
|||
orderRef1: this.searchData.site, |
|||
orderRef2: this.searchData.requestNo, |
|||
orderRef3: '', |
|||
orderReftype: 'InspectionRequestAttachment' |
|||
} |
|||
console.log('查询附件参数:', params) |
|||
|
|||
queryOssFilePlus(params).then(({ data }) => { |
|||
console.log('查询附件返回:', data) |
|||
if (data && data.code === 0) { |
|||
this.fileList = data.rows || [] |
|||
console.log('附件列表:', this.fileList) |
|||
} else { |
|||
this.fileList = [] |
|||
} |
|||
this.loading = false |
|||
}).catch((error) => { |
|||
console.error('查询附件失败:', error) |
|||
this.loading = false |
|||
}) |
|||
}, |
|||
|
|||
// 打开上传弹窗 |
|||
handleUpload() { |
|||
this.$nextTick(() => { |
|||
if (this.$refs.upload) { |
|||
this.$refs.upload.clearFiles() |
|||
} |
|||
}) |
|||
this.uploadFileList = [] |
|||
this.ossForm.remark = '' |
|||
this.ossVisible = true |
|||
}, |
|||
|
|||
// 移除文件 |
|||
onRemoveFile(file, fileList) { |
|||
this.uploadFileList = fileList |
|||
}, |
|||
|
|||
// 文件选择变化 |
|||
onChangeFile(file, fileList) { |
|||
this.uploadFileList = fileList |
|||
}, |
|||
|
|||
// 提交上传 |
|||
submitData() { |
|||
if (this.uploadFileList.length === 0) { |
|||
this.$message.error('请选择文件') |
|||
return |
|||
} |
|||
|
|||
this.uploadLoading = true |
|||
|
|||
let formData = new FormData() |
|||
for (let i = 0; i < this.uploadFileList.length; i++) { |
|||
formData.append('file', this.uploadFileList[i].raw) |
|||
} |
|||
formData.append('orderRef1', this.searchData.site) |
|||
formData.append('orderRef2', this.searchData.requestNo) |
|||
formData.append('orderRef3', '') |
|||
formData.append('createdBy', this.$store.state.user.name) |
|||
formData.append('fileRemark', this.ossForm.remark || '') |
|||
formData.append('orderReftype', 'InspectionRequestAttachment') |
|||
|
|||
ossUploadNoSaveOSSForYJY(formData).then(({ data }) => { |
|||
if (data && data.code === 0) { |
|||
this.$message.success('上传成功') |
|||
this.searchTable() |
|||
this.ossVisible = false |
|||
} else { |
|||
this.$message.warning(data.msg || '上传失败') |
|||
} |
|||
this.uploadLoading = false |
|||
}).catch((error) => { |
|||
this.$message.error('上传失败') |
|||
this.uploadLoading = false |
|||
}) |
|||
}, |
|||
|
|||
// 下载文件 |
|||
handleDownload(row) { |
|||
let params = { |
|||
id: row.id |
|||
} |
|||
previewOssFileById(params).then((response) => { |
|||
const blob = new Blob([response.data], { type: response.headers['content-type'] }) |
|||
const link = document.createElement('a') |
|||
link.href = URL.createObjectURL(blob) |
|||
link.setAttribute('download', row.fileName) |
|||
link.target = '_blank' |
|||
link.click() |
|||
URL.revokeObjectURL(link.href) |
|||
}) |
|||
}, |
|||
|
|||
// 删除文件 |
|||
handleRemove(row) { |
|||
this.$confirm('确定要删除该附件吗?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
let ids = [row.id] |
|||
removeOss(ids).then(({ data }) => { |
|||
if (data && data.code === 0) { |
|||
this.$message.success('删除成功') |
|||
this.searchTable() |
|||
} else { |
|||
this.$message.warning(data.msg || '删除失败') |
|||
} |
|||
}).catch((error) => { |
|||
this.$message.error('删除失败') |
|||
}) |
|||
}).catch(() => {}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.customer-css { |
|||
padding: 0; |
|||
margin: 0; |
|||
background: #fff; |
|||
} |
|||
|
|||
.auto /deep/ .el-form-item__content { |
|||
height: auto; |
|||
line-height: 1.5; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue