商品组管理新增导入功能

src/HDrpManagement/ProductGroupMag/index.vue

@@ -13,6 +13,17 @@
       @onFixedClick="rows"
       @checkboxCallBack="rows"
       @listData="listData">
+      <template #titleRight>
+        <importFile
+            v-if="tool.checkAuth($route.name,'export')"
+            ref="importFile"
+            class="inline-16"
+            :bindData="{ownertable:'sa_itemgroup',ownerid:$route.query.id,usetype:'default'}"
+            :errorUrl="errorUrl"
+            @clearUrl="errorUrl = null"
+            @onSuccess="bindImport"
+        ></importFile>
+      </template>
       <template #custom>
         <div class="mt-10">
           <label class="search__label" >{{$t(`品牌`)}}:</label>
@@ -46,8 +57,10 @@
 </template>
 
 <script>
+import importFile from './modules/importFile.vue'
 export default {
   components:{
+    importFile
   },
   name: "index",
   data() {
@@ -60,7 +73,8 @@ export default {
       selectParam: {
         brandname:'',
         isonsale:''
-      }
+      },
+      errorUrl:null,
     }
   },
   provide() {
@@ -119,7 +133,23 @@ export default {
       console.log("点击")
       console.log(val)
       this.rowData = val
-    }
+    },
+    async bindImport (id) {
+      const res = await this.$api.requested({
+        "id": 2025031713435702,
+        "content": {
+          "attachmentid":id
+        }
+      })
+      if (res.data !== '成功') {
+        this.errorUrl = res.msg
+        res.msg = this.$t('失败')
+      }
+      /*res.msg = '失败'*/
+      this.tool.showMessage(res,() => {
+        this.$refs.basicLayout.listData()
+      })
+    },
   },
   mounted () {
   }

src/HDrpManagement/ProductGroupMag/modules/importFile.vue

@@ -0,0 +1,216 @@
+<template>
+  <div>
+    <!-- 按钮类型 -->
+    <el-button type="success" size="small" @click="onShow(0)" icon="el-icon-upload">{{$t('导 入')}}</el-button>
+    <el-dialog :title="$t('文件上传')" class="import-panel" :visible.sync="dialogUploadVisible" width="500px" append-to-body :close-on-click-modal="false" :show-close="false" @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="$t('导入经销商线索')" name="first"></el-tab-pane> -->
+          <el-tab-pane :label="$t(`导入`)" 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">{{$t('将文件拖到此处，或') + ' '}}<em>{{$t('点击上传')}}</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>{{$t('上传成功')}}</p>
+            <p>{{file.raw?file.raw.name:$t('暂无上传文件')}}</p>
+            <el-progress :percentage="file.progress" :show-text="false"></el-progress>
+          </div>
+        </div>
+        <slot name="errorFile"></slot>
+        <p class="tips">• + {{$t('为保证数据导入顺利，推荐您下载并使用' + ' ')}}<a :href="modelurl">《{{$t('Excel标准模板')}}》</a></p>
+        <p class="tips">• {{$t('文件中数据不能超过5000行')}}</p>
+        <a :href="errorUrl" class="tips" style="color:red" v-if="errorUrl">•{{$t(`下载错误数据`)}}</a>
+        <div class="dialog-footer">
+          <el-button size="small" @click="cancel" class="normal-btn-width">{{$t('取 消')}}</el-button>
+          <el-button size="small" type="warning" @click="dialogUploadVisible = false" class="normal-btn-width btn-warning">{{$t('确 定')}}</el-button>
+        </div>
+      </div>
+
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+  /*
+    folderid:文件夹id; 必填
+    btntype:展示上传按钮的类型;
+    accept:限制上传文件类型;
+    bindData:附件上传成功后对应需要绑定的数据信息
+  */
+  props:['btntype','accept','bindData','errorUrl'],
+  data () {
+    return {
+      dialogUploadVisible: false,
+      params: {
+        "classname": "system.attachment.huawei.OBS",
+        "method": "getFileName",
+        "content": {
+          "filename": '',
+          "filetype": '',
+          "parentid": ""//归属文件夹ID
+        }
+      },
+      file: {},
+      filelist: [],
+      CampaignList:[],
+      activeName:'last',
+      modelurl:'',
+      campaignid:'',
+      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
+    }
+  },
+  mounted () {
+
+    // this.listData()
+  },
+  methods: {
+    onShow () {
+      this.dialogUploadVisible = true
+       this.getModelUrl()
+    },
+    cancel () {
+      this.dialogUploadVisible = false
+      this.campaignid = ''
+      this.$refs['my-upload'].clearFiles()
+      this.filelist = []
+    },
+    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":2025031713242702,
+        "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.data.attachmentids[0])
+    },
+
+    clearFiles () {
+      this.$refs['my-upload'].clearFiles()
+      this.filelist = []
+      this.dialogUploadVisible = false
+      this.$emit('clearUrl')
+    },
+  }
+}
+
+</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>
+