营销费用管理新增导入功能

src/HDrpManagement/marketingExpenseMag/components/importFile.vue

@@ -0,0 +1,217 @@
+<template>
+  <div>
+    <!-- 按钮类型 -->
+    <el-button type="success" size="small" @click="dialogUploadVisible = true" icon="el-icon-upload">导 入</el-button>
+    <el-dialog title="文件上传" class="import-panel" :visible.sync="dialogUploadVisible" width="500px" append-to-body :close-on-click-modal="false" :show-close="false" :before-close="clearFiles">
+      <div slot="title"></div>
+      <div style="background:#f1f2f3" class="my-tabs" >
+        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+          <!-- <el-tab-pane label="导入经销商线索" name="first"></el-tab-pane> -->
+          <el-tab-pane label="导入业务员线索" name="second"></el-tab-pane>
+        </el-tabs>
+      </div>
+      <div style="padding:20px">
+        <el-upload
+          style="width:100%"
+          ref="my-upload"
+          class="upload-demo normal-margin"
+          :accept="accept"
+          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="cancel" class="normal-btn-width">取 消</el-button>
+          <el-button size="small" type="warning" @click="onSubmit" class="normal-btn-width btn-warning">确 定</el-button>
+        </div>
+      </div>
+
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+  /*
+    folderid:文件夹id; 必填
+    btntype:展示上传按钮的类型;
+    accept:限制上传文件类型;
+    bindData:附件上传成功后对应需要绑定的数据信息
+  */
+  props:['folderid','btntype','accept','bindData'],
+  data () {
+    return {
+      dialogUploadVisible: false,
+      params: {
+        "classname": "system.attachment.huawei.OBS",
+        "method": "getFileName",
+        "content": {
+          "filename": '',
+          "filetype": '',
+          "parentid": ""//归属文件夹ID
+        }
+      },
+      file: {},
+      filelist: [],
+      CampaignList:[],
+      activeName:'last',
+      modelurl:'',
+      campaignid:''
+
+    }
+  },
+  mounted () {
+    this.getModelUrl()
+  },
+  methods: {
+    cancel () {
+      this.dialogUploadVisible = false
+      this.campaignid = ''
+      this.$refs['my-upload'].clearFiles()
+      this.filelist = []
+      this.$emit('cancel')
+    },
+    onSubmit(){
+      this.dialogUploadVisible = false
+      this.campaignid = ''
+      this.$refs['my-upload'].clearFiles()
+      this.filelist = []
+      this.$emit('cancel')
+    },
+    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": "20240715083004",
+        "content": {
+        }
+      })
+      this.modelurl = res.data
+
+    },
+    // 获取华为云上传地址
+    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,this.bindData)
+      let param = {
+        "classname": "system.attachment.huawei.OBS",
+        "method": "uploadSuccess",
+        "content":obj
+      }
+
+      const res = await this.$api.requested(param)
+      this.$emit('onSuccess',res)
+    },
+
+    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>
+

src/HDrpManagement/marketingExpenseMag/index.vue

@@ -13,10 +13,14 @@
         :detailPath="{path:'/marketingExpenseMagDetail'}"
     >
       <template #titleRight>
-        <div>
+        <div class="inline-16">
           <el-button type="primary" size="small" @click="portraitShowFun">营销费用统计</el-button>
         </div>
-
+        <div class="inline-16">
+          <importFile accept=".xlsx" :folderid="folderid" :bindData="{ownertable:'sa_salesfees',ownerid:'',usetype:'default'}" @onSuccess="uploadByExcel" @cancel="onCancel">
+            <a class="error-link" v-if="errorurl" :href="errorurl" slot="errorFile" style="color: red">下载错误数据</a>
+          </importFile>
+        </div>
       </template>
       <template #custom >
         <div class="mt-10 inline-16" >
@@ -62,16 +66,19 @@
 
 <script>
 import salerpriceData from '@/HDrpManagement/salerpriceData/index'
+import importFile from './components/importFile.vue'
 export default {
   name: "index",
-  components:{salerpriceData},
+  components:{salerpriceData,importFile},
   data(){
     return {
       columns:[],
       deplist:[],
       depment:'',
       dateSelect:[],
-      drawer:false
+      drawer:false,
+      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
+      errorurl:null
     }
   },
   methods:{
@@ -154,6 +161,26 @@ export default {
     },
     portraitShowFun(){
       this.drawer = true
+    },
+    async uploadByExcel (data) {
+      const res = await this.$api.requested({
+        "id": "20240715105604",
+        "content": {
+          "attachmentid":data.data.attachmentids[0],
+        }
+      })
+      if (res.data !== '成功') {
+        this.errorurl = res.data
+      } else {
+        this.errorurl = null
+      }
+      this.tool.showMessage(res,()=>{
+        /*this.$emit('onSuccess')*/
+        this.$refs.basicLayout.listData()
+      })
+    },
+    onCancel(){
+      this.errorurl = null
     }
   },
   mounted() {