|  | @@ -0,0 +1,205 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <div>
 | 
	
		
			
				|  |  | +    <!-- 按钮类型 -->
 | 
	
		
			
				|  |  | +    <el-button type="success" size="small" @click="dialogUploadVisible = true" icon="el-icon-upload">导 入</el-button>
 | 
	
		
			
				|  |  | +    <el-dialog class="import-panel" :visible.sync="dialogUploadVisible" width="500px" append-to-body :close-on-click-modal="false" :show-close="false" :before-close="clearFiles">
 | 
	
		
			
				|  |  | +      <div style="padding:20px">
 | 
	
		
			
				|  |  | +        <el-upload
 | 
	
		
			
				|  |  | +          style="width:100%"
 | 
	
		
			
				|  |  | +          ref="my-upload"
 | 
	
		
			
				|  |  | +          class="upload-demo normal-margin"
 | 
	
		
			
				|  |  | +          accept=".xls,.xlsx"
 | 
	
		
			
				|  |  | +          action="#"
 | 
	
		
			
				|  |  | +          :auto-upload="false"
 | 
	
		
			
				|  |  | +          :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>
 | 
	
		
			
				|  |  | +        <slot name="errorFile"></slot>
 | 
	
		
			
				|  |  | +        <p class="tips">• 为保证数据导入顺利,推荐您下载并使用<a :href="modelurl">《Excel标准模板》</a></p>
 | 
	
		
			
				|  |  | +        <p class="tips">• 文件中数据不能超过5000行</p>
 | 
	
		
			
				|  |  | +        <div class="dialog-footer">
 | 
	
		
			
				|  |  | +          <el-button size="small" @click="dialogUploadVisible = false" class="normal-btn-width">取 消</el-button>
 | 
	
		
			
				|  |  | +          <el-button size="small" type="warning" @click="dialogUploadVisible = false" class="normal-btn-width btn-warning">确 定</el-button>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +      
 | 
	
		
			
				|  |  | +    </el-dialog>
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +  /*
 | 
	
		
			
				|  |  | +    folderid:文件夹id; 必填
 | 
	
		
			
				|  |  | +    btntype:展示上传按钮的类型;
 | 
	
		
			
				|  |  | +    accept:限制上传文件类型;
 | 
	
		
			
				|  |  | +    bindData:附件上传成功后对应需要绑定的数据信息
 | 
	
		
			
				|  |  | +  */
 | 
	
		
			
				|  |  | +  props:["sa_quotedpriceid"],
 | 
	
		
			
				|  |  | +  data () {
 | 
	
		
			
				|  |  | +    return {
 | 
	
		
			
				|  |  | +      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
 | 
	
		
			
				|  |  | +      dialogUploadVisible: false,
 | 
	
		
			
				|  |  | +      params: {
 | 
	
		
			
				|  |  | +        "classname": "system.attachment.huawei.OBS",
 | 
	
		
			
				|  |  | +        "method": "getFileName",
 | 
	
		
			
				|  |  | +        "content": {
 | 
	
		
			
				|  |  | +          "filename": '',
 | 
	
		
			
				|  |  | +          "filetype": '',
 | 
	
		
			
				|  |  | +          "parentid": ""//归属文件夹ID
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      file: {},
 | 
	
		
			
				|  |  | +      filelist: [],
 | 
	
		
			
				|  |  | +      CampaignList:[],
 | 
	
		
			
				|  |  | +      activeName:'first',
 | 
	
		
			
				|  |  | +      modelurl:'',
 | 
	
		
			
				|  |  | +      campaignid:''
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  mounted () {
 | 
	
		
			
				|  |  | +    this.getModelUrl()
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  methods: {
 | 
	
		
			
				|  |  | +    handleChange (file, filelist) {
 | 
	
		
			
				|  |  | +      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)
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    handleClick () {
 | 
	
		
			
				|  |  | +      this.getModelUrl()
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 获取导入模板
 | 
	
		
			
				|  |  | +    async getModelUrl () {
 | 
	
		
			
				|  |  | +      const res = await this.$api.requested({
 | 
	
		
			
				|  |  | +        "id": "20221024141403",
 | 
	
		
			
				|  |  | +        "content":{}
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +      this.modelurl = res.msg
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 获取华为云上传地址
 | 
	
		
			
				|  |  | +    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) {      
 | 
	
		
			
				|  |  | +      let THIS = this
 | 
	
		
			
				|  |  | +      let config = {
 | 
	
		
			
				|  |  | +        headers: ext === 'pdf' ? { 'Content-Type': 'application/pdf' } : { '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) {
 | 
	
		
			
				|  |  | +      let obj = {
 | 
	
		
			
				|  |  | +         "serialfilename": obsfilename
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      obj = Object.assign({},obj)
 | 
	
		
			
				|  |  | +      let param = {
 | 
	
		
			
				|  |  | +        "classname": "system.attachment.huawei.OBS",
 | 
	
		
			
				|  |  | +        "method": "uploadSuccess",
 | 
	
		
			
				|  |  | +        "content":obj
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      const res = await this.$api.requested(param)
 | 
	
		
			
				|  |  | +      this.importData(res.data.attachmentids[0])
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    async importData (id) {
 | 
	
		
			
				|  |  | +      const res = await this.$api.requested({
 | 
	
		
			
				|  |  | +        "id": "20221024141503",
 | 
	
		
			
				|  |  | +        "content": {
 | 
	
		
			
				|  |  | +          "sa_quotedpriceid":this.sa_quotedpriceid,
 | 
	
		
			
				|  |  | +          "attachmentid": id
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +      this.tool.showMessage(res,()=>{
 | 
	
		
			
				|  |  | +        this.$emit('onSuccess')
 | 
	
		
			
				|  |  | +        this.clearFiles()
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    clearFiles () {
 | 
	
		
			
				|  |  | +      this.$refs['my-upload'].clearFiles()
 | 
	
		
			
				|  |  | +      this.filelist = []
 | 
	
		
			
				|  |  | +      this.dialogUploadVisible = false
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +<style>
 | 
	
		
			
				|  |  | +.import-panel .el-dialog__header,.import-panel .el-dialog__body{
 | 
	
		
			
				|  |  | +  padding: 0 !important;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.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;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.tips{
 | 
	
		
			
				|  |  | +  line-height: 30px;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</style>
 | 
	
		
			
				|  |  | +
 |