|
|
@@ -0,0 +1,205 @@
|
|
|
+<template>
|
|
|
+ <div class="file">
|
|
|
+ <!-- <div class="flex-align-center flex-between pionter" v-for="(img,index) in fileLinkList" :key="img.index">
|
|
|
+ <div class="flex-align-center">
|
|
|
+ <img width="30" :src="img.type.split('/')[0] === 'image'?img.url:require('@/assets/file_icons/file.svg')" class="inline-16" alt="">
|
|
|
+ <div class="file__link inline-16">
|
|
|
+ <p>{{img.name}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <i style="color:red;" class="el-icon-delete" @click="handleRemove(index)"></i>
|
|
|
+ </div> -->
|
|
|
+ <!-- <file-item
|
|
|
+ :auto="true"
|
|
|
+ :isDownLoad="true"
|
|
|
+ :isDelete='true'
|
|
|
+ :fileData="fileLinkList"
|
|
|
+ @deleteFile="handleRemove">
|
|
|
+ </file-item>-->
|
|
|
+ <el-upload
|
|
|
+ action="#"
|
|
|
+ :on-change="onChange"
|
|
|
+ :show-file-list="false"
|
|
|
+ :auto-upload="false"
|
|
|
+ multiple>
|
|
|
+ <el-button size="small" type="text" v-loading.fullscreen.lock="fullscreenLoading" :disabled="disabled">
|
|
|
+ <svg t="1727070968047" class="icon" viewBox="0 0 1055 1024" style="vertical-align: middle" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13346" width="14" height="14"><path d="M1012.809143 684.982857a42.861714 42.861714 0 0 0-41.837714 41.837714 154.916571 154.916571 0 0 1-139.629715 167.424h-577.828571a154.331429 154.331429 0 0 1-139.264-167.424 42.861714 42.861714 0 0 0-41.837714-41.837714 42.861714 42.861714 0 0 0-41.837715 41.837714 238.299429 238.299429 0 0 0 223.305143 251.245715h577.828572a238.299429 238.299429 0 0 0 223.232-251.245715 42.861714 42.861714 0 0 0-42.130286-41.837714z" fill="#999999" p-id="13347"></path><path d="M569.051429 57.270857a47.250286 47.250286 0 0 0-61.293715 0L348.745143 216.356571a41.472 41.472 0 0 0 58.514286 58.514286l86.601142-86.528V662.674286a41.837714 41.837714 0 1 0 83.602286 0V188.342857l86.528 86.528a41.472 41.472 0 1 0 58.514286-58.514286z" fill="#999999" p-id="13348"></path></svg>
|
|
|
+ <span style="font-size: 14px;color: #333;margin-left: 5px;vertical-align: middle">上传附件</span></el-button>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import FileItem from '@/SManagement/orderclue/components/file/index3'
|
|
|
+export default {
|
|
|
+ components: {FileItem},
|
|
|
+ props:['folderid','type','accept','id','disabled'],
|
|
|
+ name: 'uploadNew',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ imageUrl:'',
|
|
|
+ fullscreenLoading:false,
|
|
|
+ fileList:[],
|
|
|
+ fileLinkList:[],
|
|
|
+ bindData:{},
|
|
|
+ params: {
|
|
|
+ "classname": "system.attachment.huawei.OBS",
|
|
|
+ "method": "getFileName",
|
|
|
+ "content": {
|
|
|
+ "filename": '',
|
|
|
+ "filetype": '',
|
|
|
+ "parentid": ""//归属文件夹ID
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fileLength:0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onChange (file,filelist) {
|
|
|
+
|
|
|
+ this.fileList.push(file)
|
|
|
+ console.log(this.fileList);
|
|
|
+
|
|
|
+ this.beforeUpload(file.raw)
|
|
|
+ },
|
|
|
+ beforeUpload (file) {
|
|
|
+ var that = this
|
|
|
+
|
|
|
+ var fileReader = new FileReader();
|
|
|
+
|
|
|
+ fileReader.readAsDataURL(file);
|
|
|
+
|
|
|
+ fileReader.onload = function(e) {
|
|
|
+
|
|
|
+ var result = e.target.result;
|
|
|
+
|
|
|
+ let postfix = file.name.substr(file.name.lastIndexOf('.') + 1)
|
|
|
+
|
|
|
+ that.fileLinkList.push(that.fileType.fileList([{document:file.name,url:result,type:file.type,name:file.name,postfix:postfix}])[0])
|
|
|
+ console.log(that.fileLinkList);
|
|
|
+ that.toUpload()
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleRemove (index) {
|
|
|
+ this.fileList = this.fileList.filter((e,idx)=>{
|
|
|
+ if (idx !== index) {
|
|
|
+ return e
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(this.fileList);
|
|
|
+
|
|
|
+ this.fileLinkList = this.fileLinkList.filter((e,idx)=>{
|
|
|
+ if (idx !== index) {
|
|
|
+ return e
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toUpload (callback) {
|
|
|
+ this.fullscreenLoading = true
|
|
|
+ if (this.fileList.length == 0) callback()
|
|
|
+ this.fileList.forEach(file=>{
|
|
|
+ let index = file.name.lastIndexOf(".");
|
|
|
+ let ext = file.name.substr(index + 1);
|
|
|
+ this.params.content.filename = file.name
|
|
|
+ this.params.content.filetype = ext
|
|
|
+ this.getUploadUrl(file, ext,callback)
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取华为云上传地址
|
|
|
+ async getUploadUrl (file, ext,callback) {
|
|
|
+ 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,callback)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 上传到华为云
|
|
|
+ async upoladFileToServer (url, file, ext, obsfilename,callback) {
|
|
|
+ let THIS = this
|
|
|
+ let config = {
|
|
|
+ headers: ext === 'pdf' ? { 'Content-Type': 'application/pdf' } : ext === 'svg'?{ 'Content-Type': 'image/svg+xml' } : { 'Content-Type': 'application/octet-stream' },
|
|
|
+ }
|
|
|
+ let res = await this.$upload.hw_upload(url, file.raw, config)
|
|
|
+ this.createFileRecord(obsfilename,callback)
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ // 上传成功以后生成附件记录
|
|
|
+ async createFileRecord (obsfilename,callback) {
|
|
|
+ let obj = {
|
|
|
+ "serialfilename": obsfilename
|
|
|
+ }
|
|
|
+ this.bindData = {
|
|
|
+ "ownertable": 'sat_ordercluefollowuplog',
|
|
|
+ "ownerid": this.id,
|
|
|
+ "usetype": 'default',
|
|
|
+ }
|
|
|
+ obj = Object.assign({},obj,this.bindData)
|
|
|
+ let param = {
|
|
|
+ "classname": "system.attachment.huawei.OBS",
|
|
|
+ "method": "uploadSuccess",
|
|
|
+ "content":obj
|
|
|
+ }
|
|
|
+ const res = await this.$api.requested(param)
|
|
|
+ if (res.code === 1) {
|
|
|
+ this.fullscreenLoading = false
|
|
|
+ this.$emit('onSuccess',res)
|
|
|
+
|
|
|
+ this.fileList = []
|
|
|
+ this.fileLinkList = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.upload_image__panel{
|
|
|
+ position: relative;
|
|
|
+ height:148px;
|
|
|
+ width: 148px;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom:10px;
|
|
|
+ border: 1px solid #c0ccda;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.upload_image__panel img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.upload_image__panel_mod{
|
|
|
+ position: absolute;
|
|
|
+ top:0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ color:#fff;
|
|
|
+ background: rgba(0,0,0,.8);
|
|
|
+ opacity: 0;
|
|
|
+ transition: .3s linear;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.upload_image__panel:hover .upload_image__panel_mod{
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+.pionter{
|
|
|
+ margin:6px 0;
|
|
|
+ padding: 20px 10px;
|
|
|
+ transition: .2s linear;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+.pionter:hover{
|
|
|
+ box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
|
|
|
+}
|
|
|
+</style>
|