Browse Source

feat(inspection): 添加附件管理功能

- 新增附件管理标签页组件 inspectionRequestAttachmentTab
- 实现附件上传、下载、删除功能
- 集成到检验请求详情页面
- 添加文件列表展示和操作界面
- 支持多文件批量上传
- 实现文件预览和删除确认功能
master
qiankanghui 2 days ago
parent
commit
f87840447c
  1. 266
      src/views/modules/inspection/com_inspectionRequestAttachmentTab.vue
  2. 15
      src/views/modules/inspection/inspectionRequestList.vue

266
src/views/modules/inspection/com_inspectionRequestAttachmentTab.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>

15
src/views/modules/inspection/inspectionRequestList.vue

@ -151,6 +151,10 @@
<el-tab-pane label="验货结果" name="result">
<inspection-result-tab ref="resultTab" :detail-data="currentRow" :table-height="detailHeight" />
</el-tab-pane>
<!-- 附件管理 -->
<el-tab-pane label="附件管理" name="attachment">
<inspection-request-attachment-tab ref="attachmentTab" :detail-data="currentRow" :table-height="detailHeight" />
</el-tab-pane>
</el-tabs>
<!-- 新增弹窗 -->
@ -356,6 +360,7 @@ import ComInspectionRequestDetail from './com_inspectionRequestDetail.vue'
import ComInspectionRequestDetailTab from './com_inspectionRequestDetailTab.vue'
import ComInspectionRequestPoDetailTab from './com_inspectionRequestPoDetailTab.vue'
import ComInspectionResultTab from './com_inspectionResultTab.vue'
import ComInspectionRequestAttachmentTab from './com_inspectionRequestAttachmentTab.vue'
export default {
components: {
@ -363,7 +368,8 @@ export default {
InspectionRequestDetail: ComInspectionRequestDetail,
InspectionRequestDetailTab: ComInspectionRequestDetailTab,
InspectionRequestPoDetailTab: ComInspectionRequestPoDetailTab,
InspectionResultTab: ComInspectionResultTab
InspectionResultTab: ComInspectionResultTab,
InspectionRequestAttachmentTab: ComInspectionRequestAttachmentTab
},
data () {
return {
@ -770,6 +776,13 @@ export default {
this.$refs.resultTab.loadDetailList()
}
})
} else if (tab.name === 'attachment') {
// - watch
this.$nextTick(() => {
if (this.$refs.attachmentTab) {
this.$refs.attachmentTab.loadAttachmentTypeList()
}
})
}
},

Loading…
Cancel
Save