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"; |
import { createAPI } from "@/utils/httpRequest.js"; |
||||
|
|
||||
export const updateOssRef = data => createAPI(`/sys/oss/updateOssRef`,'post',data) |
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