6 changed files with 697 additions and 55 deletions
-
9src/api/oss/oss.js
-
302src/views/modules/oss/ossComponents.vue
-
179src/views/modules/project/projectInfo/projectInfo.vue
-
99src/views/modules/quotation/requestForQuote.vue
-
154src/views/modules/quotation/sellForQuotation.vue
-
9src/views/modules/test/file/testFile.vue
@ -0,0 +1,302 @@ |
|||||
|
<script> |
||||
|
import {ossUpload, previewOssFileById, queryOss, removeOss} from "../../../api/oss/oss"; |
||||
|
|
||||
|
export default { |
||||
|
name: "ossComponents", |
||||
|
props:{ |
||||
|
orderRef1:{ |
||||
|
type:String, |
||||
|
required:true |
||||
|
}, |
||||
|
orderRef2:{ |
||||
|
type:String, |
||||
|
required:true |
||||
|
}, |
||||
|
orderRef3:{ |
||||
|
type:String, |
||||
|
default:'' |
||||
|
}, |
||||
|
columns:{ |
||||
|
type:Array, |
||||
|
required:true |
||||
|
}, |
||||
|
height:{ |
||||
|
type:[String,Number], |
||||
|
default:'35vh' |
||||
|
}, |
||||
|
title:{ |
||||
|
type:String, |
||||
|
default:'附件列表' |
||||
|
}, |
||||
|
label:{ |
||||
|
type:String, |
||||
|
default:'单号' |
||||
|
}, |
||||
|
}, |
||||
|
data(){ |
||||
|
return{ |
||||
|
dataList:[], |
||||
|
queryLoading:false, |
||||
|
uploadLoading:false, |
||||
|
selectionDataList:[], |
||||
|
ossVisible:false, |
||||
|
ossForm:{ |
||||
|
orderRef2:'', |
||||
|
remark:'' |
||||
|
}, |
||||
|
fileList:[], |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
handleSelectionChange(val){ |
||||
|
this.selectionDataList = val |
||||
|
}, |
||||
|
handleQuery(){ |
||||
|
let params = { |
||||
|
...this.params, |
||||
|
} |
||||
|
this.queryLoading = true; |
||||
|
queryOss(params).then(({data})=>{ |
||||
|
if (data && data.code === 0){ |
||||
|
this.dataList = data.rows; |
||||
|
}else { |
||||
|
this.$message.warning(data.msg); |
||||
|
} |
||||
|
this.queryLoading = false; |
||||
|
}).catch((error)=>{ |
||||
|
this.$message.error(error); |
||||
|
this.queryLoading = false; |
||||
|
}) |
||||
|
}, |
||||
|
handleUpload(){ |
||||
|
this.$nextTick(()=>{ |
||||
|
if (this.$refs.upload){ |
||||
|
this.$refs.upload.clearFiles(); |
||||
|
} |
||||
|
}) |
||||
|
this.fileList = []; |
||||
|
this.ossForm.remark = ''; |
||||
|
this.ossVisible = true |
||||
|
}, |
||||
|
onRemoveFile(file, fileList){ |
||||
|
this.fileList = fileList |
||||
|
}, |
||||
|
onChangeFile(file, fileList){ |
||||
|
this.fileList = fileList |
||||
|
}, |
||||
|
handleUploadFiles(){ |
||||
|
if (this.fileList.length === 0){ |
||||
|
this.$message.error('请选择文件'); |
||||
|
return; |
||||
|
} |
||||
|
let formData = new FormData(); |
||||
|
for (let i = 0; i < this.fileList.length; i++) { |
||||
|
formData.append('file', this.fileList[i].raw); |
||||
|
} |
||||
|
formData.append('orderRef1', this.orderRef1); |
||||
|
formData.append('orderRef2', this.ossForm.orderRef2); |
||||
|
formData.append('orderRef3', this.orderRef3); |
||||
|
formData.append('createBy', this.$store.state.user.name); |
||||
|
formData.append('fileRemark', this.ossForm.remark); |
||||
|
this.uploadLoading = true; |
||||
|
ossUpload(formData).then(({data})=>{ |
||||
|
if (data && data.code === 0){ |
||||
|
this.$message.success(data.msg); |
||||
|
this.handleQuery(); |
||||
|
this.ossVisible = false; |
||||
|
}else { |
||||
|
this.$message.warning(data.msg); |
||||
|
} |
||||
|
this.uploadLoading = false; |
||||
|
}).catch((error)=>{ |
||||
|
this.$message.error(error); |
||||
|
this.uploadLoading = false; |
||||
|
}) |
||||
|
}, |
||||
|
handleRemove(row){ |
||||
|
this.$confirm('确认删除吗？', '提示').then(() => { |
||||
|
let ids = [row.id] |
||||
|
removeOss(ids).then(({data})=>{ |
||||
|
if (data && data.code === 0){ |
||||
|
this.$message.success(data.msg); |
||||
|
this.handleQuery(); |
||||
|
}else { |
||||
|
this.$message.warning(data.msg); |
||||
|
} |
||||
|
}).catch((error)=>{ |
||||
|
this.$message.error(error); |
||||
|
}) |
||||
|
}).catch(()=>{ |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
previewFile(row){ |
||||
|
// 预览文件 |
||||
|
let type = ''; |
||||
|
let image = ['jpg', 'jpeg', 'png', 'gif', 'bmp']; |
||||
|
if (image.includes(row.fileType.toLowerCase())){ |
||||
|
type = 'image/' + row.fileType; |
||||
|
} |
||||
|
let video = ['mp4', 'avi', 'mov', 'wmv', 'flv']; |
||||
|
if (video.includes(row.fileType.toLowerCase())){ |
||||
|
type = 'video/' + row.fileType; |
||||
|
} |
||||
|
|
||||
|
let txt = ['txt']; |
||||
|
if (txt.includes(row.fileType.toLowerCase())){ |
||||
|
type = 'text/plain;charset=utf-8'; |
||||
|
} |
||||
|
let office = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx']; |
||||
|
if (office.includes(row.fileType.toLowerCase())){ |
||||
|
this.$message.warning(`该文件格式暂不支持预览`) |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
let pdf = ['pdf']; |
||||
|
if (pdf.includes(row.fileType.toLowerCase())){ |
||||
|
type = 'application/pdf'; |
||||
|
} |
||||
|
|
||||
|
if (type === ''){ |
||||
|
this.$message.warning(`该文件格式暂不支持预览`) |
||||
|
return; |
||||
|
} |
||||
|
let params = { |
||||
|
id:row.id, |
||||
|
} |
||||
|
previewOssFileById(params).then(({data}) => { |
||||
|
const blob = new Blob([data], { type: type }); |
||||
|
// 创建URL来生成预览 |
||||
|
const fileURL = URL.createObjectURL(blob); |
||||
|
// 在新标签页中打开文件预览 |
||||
|
const newTab = window.open(fileURL, '_blank'); |
||||
|
}); |
||||
|
}, |
||||
|
handleDownload(){ |
||||
|
if (this.selectionDataList.length === 0){ |
||||
|
this.$message.warning('请选择要下载的附件'); |
||||
|
return; |
||||
|
} |
||||
|
for (let i = 0; i < this.selectionDataList.length; i++) { |
||||
|
let params = { |
||||
|
id:this.selectionDataList[i].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', this.selectionDataList[i].fileName); |
||||
|
link.target = '_blank'; // 打开新窗口预览 |
||||
|
link.click(); |
||||
|
URL.revokeObjectURL(link.href); |
||||
|
this.$refs.table.clearSelection(); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed:{ |
||||
|
params:{ |
||||
|
get(){ |
||||
|
return{ |
||||
|
orderRef1:this.orderRef1, |
||||
|
orderRef2:this.orderRef2, |
||||
|
orderRef3:this.orderRef3, |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
watch:{ |
||||
|
params:{ |
||||
|
handler(){ |
||||
|
this.ossForm.orderRef2 = this.orderRef2; |
||||
|
this.dataList = []; |
||||
|
this.handleQuery(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div> |
||||
|
<el-button type="primary" @click="handleUpload">上传附件</el-button> |
||||
|
<el-button type="primary" @click="handleDownload">下载</el-button> |
||||
|
<el-table |
||||
|
:height="height" |
||||
|
:data="dataList" |
||||
|
ref="table" |
||||
|
v-loading="queryLoading" |
||||
|
border |
||||
|
@selection-change="handleSelectionChange" |
||||
|
style="width: 100%;margin-top: 5px"> |
||||
|
<el-table-column type="selection" label="序号" align="center"/> |
||||
|
<el-table-column |
||||
|
v-for="(item,index) in columns" :key="index" |
||||
|
:sortable="item.columnSortable" |
||||
|
:prop="item.columnProp" |
||||
|
:header-align="item.headerAlign" |
||||
|
:show-overflow-tooltip="item.showOverflowTooltip" |
||||
|
:align="item.align" |
||||
|
:fixed="item.fixed===''?false:item.fixed" |
||||
|
:min-width="item.columnWidth" |
||||
|
:label="item.columnLabel"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="!item.columnHidden">{{scope.row[item.columnProp]}}</span> |
||||
|
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
fixed="right" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
width="120" |
||||
|
label="操作"> |
||||
|
<template slot-scope="{row,$index}"> |
||||
|
<el-link style="cursor:pointer;" @click="handleRemove(row)">删除</el-link> |
||||
|
<el-link style="cursor:pointer;" @click="previewFile(row)">预览</el-link> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<el-dialog :title="title" :visible.sync="ossVisible" v-drag width="500px" append-to-body :close-on-click-modal="false"> |
||||
|
<el-form ref="form" :model="ossForm" label-width="80px" label-position="top"> |
||||
|
<el-row :gutter="10"> |
||||
|
<el-col :span="8"> |
||||
|
<el-form-item :label="label"> |
||||
|
<el-input v-model="ossForm.orderRef2" readonly></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="24"> |
||||
|
<el-form-item label=" " class="auto"> |
||||
|
<el-upload drag :file-list="fileList" |
||||
|
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-col> |
||||
|
<el-col :span="24"> |
||||
|
<el-form-item label="备注" class="auto"> |
||||
|
<el-input type="textarea" v-model="ossForm.remark" resize="none" :autosize="{minRows: 3, maxRows: 3}"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" :loading="uploadLoading" @click="handleUploadFiles">确定</el-button> |
||||
|
<el-button @click="ossVisible = false">关闭</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.auto /deep/ .el-form-item__content{ |
||||
|
height: auto; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue