yuejiayang
1 year ago
12 changed files with 1164 additions and 61 deletions
-
22package-lock.json
-
6package.json
-
2src/api/auth/auth.js
-
2src/api/inquiry/inquiryDetail.js
-
17src/api/oss/oss.js
-
1src/router/index.js
-
48src/views/common/previewFile.vue
-
77src/views/modules/auth/authGroup.vue
-
91src/views/modules/auth/authRule.vue
-
74src/views/modules/inquiry/inquiryApplication.vue
-
525src/views/modules/inquiry/inquiryDetail.vue
-
360src/views/modules/oss/ossComponents.vue
@ -1,3 +1,20 @@ |
|||
import { createAPI } from "@/utils/httpRequest.js"; |
|||
|
|||
export const updateOssRef = data => createAPI(`/sys/oss/updateOssRef`,'post',data) |
|||
|
|||
|
|||
/** |
|||
* 文件上传 |
|||
* @param data |
|||
* @returns {*} |
|||
*/ |
|||
export const uploadFile = data => createAPI(`/base/uploadFile`,'post',data) |
|||
|
|||
|
|||
export const ossUpload = (data) => createAPI(`/oss/upload`,'post',data) |
|||
|
|||
export const queryOss = (data) => createAPI(`/oss`,'post',data) |
|||
|
|||
export const removeOss = (data) => createAPI(`/oss/remove`,'post',data) |
|||
|
|||
export const previewOssFileById = (data) => createAPI(`/oss/${data.id}`,'post',777) |
|||
@ -0,0 +1,48 @@ |
|||
<script> |
|||
import VueOfficeExcel from '@vue-office/excel' |
|||
|
|||
//引入VueOfficeDocx组件 |
|||
import VueOfficeDocx from '@vue-office/docx' |
|||
import '@vue-office/docx/lib/index.css' |
|||
//引入相关样式 |
|||
import '@vue-office/excel/lib/index.css' |
|||
export default { |
|||
name: "previewFile", |
|||
components:{ |
|||
VueOfficeExcel,VueOfficeDocx |
|||
}, |
|||
data() { |
|||
return { |
|||
src: "", |
|||
type: "", |
|||
loading: true |
|||
} |
|||
}, |
|||
created() { |
|||
if (this.$route.query.src){ |
|||
this.src = this.$route.query.src; |
|||
this.type = this.$route.query.type; |
|||
}else { |
|||
this.$message.error('错误路径') |
|||
this.$router.back(); |
|||
} |
|||
}, |
|||
methods:{ |
|||
rendered(){ |
|||
this.loading = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div v-loading="loading"> |
|||
<vue-office-excel v-if="type === 'xls'" :options="{xls:true}" :src="src" @rendered="rendered" style="height: 100vh"/> |
|||
<vue-office-excel v-if="type === 'xlsx'" :src="src" @rendered="rendered" style="height: 100vh"/> |
|||
<vue-office-docx v-if="type === 'docx'" :src="src" @rendered="rendered" style="height: 100vh"/> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,360 @@ |
|||
<script> |
|||
import {ossUpload, previewOssFileById, queryOss, removeOss} from "../../../api/oss/oss"; |
|||
|
|||
export default { |
|||
name: "ossComponents", |
|||
props:{ |
|||
orderRef1:{ |
|||
type:String, |
|||
default:'' |
|||
}, |
|||
orderRef2:{ |
|||
type:[Number,String], |
|||
default:'' |
|||
}, |
|||
orderRef3:{ |
|||
type:String, |
|||
default:'' |
|||
}, |
|||
rfqNo:{ |
|||
type:String, |
|||
default:'' |
|||
}, |
|||
partNo:{ |
|||
type:String, |
|||
default:'' |
|||
}, |
|||
partDesc:{ |
|||
type:String, |
|||
default:'' |
|||
}, |
|||
columns:{ |
|||
type:Array, |
|||
required:true |
|||
}, |
|||
height:{ |
|||
type:[String,Number], |
|||
default:'35vh' |
|||
}, |
|||
title:{ |
|||
type:String, |
|||
default:'附件信息' |
|||
}, |
|||
label:{ |
|||
type:String, |
|||
default:'单号' |
|||
}, |
|||
disabled:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
}, |
|||
data(){ |
|||
return{ |
|||
dataList:[], |
|||
queryLoading:false, |
|||
uploadLoading:false, |
|||
selectionDataList:[], |
|||
ossVisible:false, |
|||
ossForm:{ |
|||
orderRef2:'', |
|||
orderRef3:'', |
|||
rfqNo:'', |
|||
partNo:'', |
|||
partDesc:'', |
|||
remark:'' |
|||
}, |
|||
fileList:[], |
|||
} |
|||
}, |
|||
methods:{ |
|||
handleSelectionChange(val){ |
|||
this.selectionDataList = val |
|||
}, |
|||
handleQuery(){ |
|||
if (!this.params.orderRef1 && !this.params.orderRef2){ |
|||
return; |
|||
} |
|||
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('createdBy', 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){ |
|||
console.log(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', 'ppt', 'pptx']; |
|||
if (office.includes(row.fileType.toLowerCase())){ |
|||
this.$message.warning(`该文件格式暂不支持预览`) |
|||
return |
|||
} |
|||
|
|||
let excel = ['xlsx','xls']; |
|||
if (excel.includes(row.fileType.toLowerCase())){ |
|||
type = row.fileType.toLowerCase(); |
|||
} |
|||
let word = ['docx']; |
|||
if (word.includes(row.fileType.toLowerCase())){ |
|||
type = 'docx' |
|||
} |
|||
let pdf = ['pdf']; |
|||
if (pdf.includes(row.fileType.toLowerCase())){ |
|||
type = 'application/pdf;charset-UTF-8'; |
|||
} |
|||
|
|||
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); |
|||
if (type === 'xls' || type === 'docx' || type === 'xlsx'){ |
|||
const { href } = this.$router.resolve({ |
|||
name: 'pre', |
|||
query:{ |
|||
src: fileURL, |
|||
type:type |
|||
} |
|||
}) |
|||
window.open(href, '_blank') |
|||
}else { |
|||
// 在新标签页中打开文件预览 |
|||
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.ossForm.orderRef3 = this.orderRef3; |
|||
this.ossForm.rfqNo = this.rfqNo; |
|||
this.ossForm.partNo = this.partNo; |
|||
this.ossForm.partDesc = this.partDesc; |
|||
this.dataList = []; |
|||
this.handleQuery(); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<el-button type="primary" v-if="this.orderRef1 && this.orderRef2 && !disabled" @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;" v-if="!disabled" @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="400px" 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="询价单号"> |
|||
<el-input v-model="ossForm.rfqNo" readonly></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="产品编码"> |
|||
<el-input v-model="ossForm.partNo" readonly></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="产品描述"> |
|||
<el-input v-model="ossForm.partDesc" readonly></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<slot></slot> |
|||
<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