|
|
@@ -0,0 +1,241 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <!-- 缩略图类型 -->
|
|
|
+ <div v-if="btntype === 'smallimage'" @click="dialogUploadVisible = true" class="small-image-upload-btn">
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ </div>
|
|
|
+ <!-- 图片类型 -->
|
|
|
+ <div v-else-if="btntype === 'image'" @click="dialogUploadVisible = true" class="image-upload-btn" :style="disabled?'pointerEvents: none':'pointerEvents: auto'">
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ </div>
|
|
|
+ <!-- 宽图类型 -->
|
|
|
+ <div v-else-if="btntype === 'limage'" @click="dialogUploadVisible = true" class="image-upload-btn limage-upload-btn">
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ </div>
|
|
|
+ <!-- 图标类型 -->
|
|
|
+ <div v-else-if="btntype === 'icon'" >
|
|
|
+ <el-button icon="el-icon-paperclip" type="text" size="mini" @click="dialogUploadVisible = true" :disabled="status === '已结案' || status === '已失败' || disabled">附件上传</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 按钮类型 -->
|
|
|
+ <el-button v-else :type="status === '已结案' || status === '已失败' || disabled?'':'primary'" size="small" @click="dialogUploadVisible = true" icon="el-icon-upload" :disabled="status === '已结案' || status === '已失败' || disabled">上 传</el-button>
|
|
|
+ <el-dialog title="文件上传" :visible.sync="dialogUploadVisible" width="500px" append-to-body :close-on-click-modal="false" :before-close="clearFiles">
|
|
|
+ <selectMedia v-if = "!hidemediastock" @onShow="onShow" :accept="accept" :bindData="bindData" @onBindSuccess="onBindSuccess"></selectMedia>
|
|
|
+<!-- <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ drag
|
|
|
+ action="#"
|
|
|
+ multiple>
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
|
+ <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
|
|
+ </el-upload>-->
|
|
|
+ <el-upload
|
|
|
+ style="width:100%"
|
|
|
+ ref="my-upload"
|
|
|
+ class="upload-demo"
|
|
|
+ :accept="accept"
|
|
|
+ action="#"
|
|
|
+ :auto-upload="true"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-change="handleChange"
|
|
|
+ drag
|
|
|
+ multiple>
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
|
+ </el-upload>
|
|
|
+ <div class="progress_panel" v-for="file in filelist" :key="file.uid">
|
|
|
+ <img v-if="file.type === 'DOC' || file.type === 'DOCX'" width="30" src="../../../assets/file_icons/word.png"
|
|
|
+ alt="">
|
|
|
+ <img v-else-if="file.type === 'PDF'" width="30" src="../../../assets/file_icons/PDF.png" alt="">
|
|
|
+ <img v-else-if="file.type === 'MP4' || file.type === 'AVI'" width="30" src="../../../assets/file_icons/video.png"
|
|
|
+ alt="">
|
|
|
+ <img v-else-if="file.type === 'XLS' || file.type === 'XLSX'" width="30" src="../../../assets/file_icons/excel.png"
|
|
|
+ alt="">
|
|
|
+ <img v-else-if="file.type === 'PNG' || file.type === 'JPG'|| file.type === 'JPEG'" width="30"
|
|
|
+ src="../../../assets/file_icons/image.png" alt="">
|
|
|
+ <img v-else-if="file.type === 'PPT' || file.type === 'PPTX'" width="30" src="../../../assets/file_icons/PPT.png"
|
|
|
+ alt="">
|
|
|
+ <img v-else width="30" src="../../../assets/file_icons/unknow.png" alt="">
|
|
|
+ <div>
|
|
|
+ <p v-if="file.progress === 100" style="float:right"><span style="color:#67C23A">●</span>上传成功</p>
|
|
|
+ <p>{{file.raw?file.raw.name:'暂无上传文件'}}</p>
|
|
|
+ <el-progress :percentage="file.progress" :show-text="false"></el-progress>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import selectMedia from '@/components/uploadBindMediaStock/index.vue'
|
|
|
+export default {
|
|
|
+ /*
|
|
|
+ folderid:文件夹id; 必填
|
|
|
+ btntype:展示上传按钮的类型;
|
|
|
+ accept:限制上传文件类型;
|
|
|
+ bindData:附件上传成功后对应需要绑定的数据信息,
|
|
|
+ hidemediastock:是否隐藏媒体库选择
|
|
|
+ */
|
|
|
+ props:['folderid','btntype','accept','bindData','hidemediastock','status','disabled'],
|
|
|
+ components:{
|
|
|
+ selectMedia
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ dialogUploadVisible: false,
|
|
|
+ params: {
|
|
|
+ "classname": "system.attachment.huawei.OBS",
|
|
|
+ "method": "getFileName",
|
|
|
+ "content": {
|
|
|
+ "filename": '',
|
|
|
+ "filetype": '',
|
|
|
+ "parentid": ""//归属文件夹ID
|
|
|
+ }
|
|
|
+ },
|
|
|
+ file: {},
|
|
|
+ filelist: [],
|
|
|
+ count:0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleChange (file, filelist) {
|
|
|
+ console.log('22222拖拽')
|
|
|
+ this.filelist = filelist
|
|
|
+ var index = file.raw.name.lastIndexOf(".");
|
|
|
+ var ext = file.name.substr(index + 1);
|
|
|
+ this.params.content.filename = file.raw.name
|
|
|
+ this.params.content.filetype = ext
|
|
|
+ this.getUploadUrl(file, ext)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取华为云上传地址
|
|
|
+ async getUploadUrl (file, ext) {
|
|
|
+ this.params.content.parentid = this.folderid
|
|
|
+ const res = await this.$api.requested(this.params)
|
|
|
+ let url = res.data.uploadurl
|
|
|
+ let obsfilename = res.data.serialfilename
|
|
|
+
|
|
|
+ this.upoladFileToServer(url, file, ext, obsfilename)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 上传到华为云
|
|
|
+ async upoladFileToServer (url, file, ext, obsfilename) {
|
|
|
+ console.log(file)
|
|
|
+ let THIS = this
|
|
|
+ let config = {
|
|
|
+ headers: ext === 'pdf' ? { 'Content-Type': 'application/pdf' } : ext === 'svg'?{ 'Content-Type': 'image/svg+xml' } : { 'Content-Type': 'application/octet-stream' },
|
|
|
+ onUploadProgress: function (progressEvent) {
|
|
|
+ let percent = progressEvent.loaded / progressEvent.total * 100
|
|
|
+ THIS.filelist.forEach(e => {
|
|
|
+ if (e.uid === file.uid) {
|
|
|
+ THIS.$set(e, 'type', ext.toUpperCase());
|
|
|
+ THIS.$set(e, 'progress', percent);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ const res = await this.$upload.hw_upload(url, file.raw, config)
|
|
|
+ this.createFileRecord(obsfilename)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 上传成功以后生成附件记录
|
|
|
+ async createFileRecord (obsfilename,attinfos) {
|
|
|
+ let obj = {
|
|
|
+ "serialfilename": obsfilename
|
|
|
+ }
|
|
|
+ obj = Object.assign({},obj,this.bindData)
|
|
|
+ let param = {
|
|
|
+ "classname": "system.attachment.huawei.OBS",
|
|
|
+ "method": "uploadSuccess",
|
|
|
+ "content":obj
|
|
|
+ }
|
|
|
+ const res = await this.$api.requested(param)
|
|
|
+ this.count++
|
|
|
+ console.log(this.count);
|
|
|
+ if (this.count == this.filelist.length) {
|
|
|
+ this.$emit('onSuccess',res)
|
|
|
+ this.count = 0
|
|
|
+ console.log('触发');
|
|
|
+ }
|
|
|
+ // if (res.code === 1) {
|
|
|
+ // this.$emit('onSuccess',res)
|
|
|
+ // }
|
|
|
+ },
|
|
|
+
|
|
|
+ clearFiles () {
|
|
|
+ this.$refs['my-upload'].clearFiles()
|
|
|
+ this.filelist = []
|
|
|
+ this.dialogUploadVisible = false
|
|
|
+ },
|
|
|
+
|
|
|
+ // 监听打开媒体库的时候关闭上传弹窗
|
|
|
+ onShow () {
|
|
|
+ this.dialogUploadVisible = false
|
|
|
+ },
|
|
|
+ onBindSuccess (res) {
|
|
|
+ this.$emit('onSuccess',res)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.upload-demo > div {
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
+.upload-demo .el-upload-dragger {
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style scoped>
|
|
|
+.progress_panel {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+ margin: 10px 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ transition: linear 0.2s all;
|
|
|
+}
|
|
|
+.progress_panel:hover {
|
|
|
+ box-shadow: 0px 0px 5px #ccc;
|
|
|
+}
|
|
|
+.progress_panel > div {
|
|
|
+ flex: 1;
|
|
|
+ padding: 0 10px;
|
|
|
+}
|
|
|
+.progress_panel > div > p {
|
|
|
+ line-height: 30px;
|
|
|
+}
|
|
|
+.image-upload-btn{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ opacity: 1;
|
|
|
+ border: 1px solid #CCCCCC;
|
|
|
+ color: #CCCCCC;
|
|
|
+ font-size: 4rem;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.small-image-upload-btn{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ opacity: 1;
|
|
|
+ border: 1px solid #CCCCCC;
|
|
|
+ color: #CCCCCC;
|
|
|
+ font-size: 2rem;
|
|
|
+ cursor: pointer;
|
|
|
+ margin:0 auto;
|
|
|
+}
|
|
|
+.limage-upload-btn{
|
|
|
+ width: 384px !important;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
qymljy