@huilian/components-tms 3.3.4 → 3.3.5

package/lib/bundle.esm.js

@@ -582,7 +582,8 @@ handleError(err,file,fileList){console.log(err);// this.loading.close()
 this.$emit("update:fileUrl",this.formFileList);},showImgViewer(){this.imgViewerVisible=true;const m=e=>{e.preventDefault();};document.body.style.overflow="hidden";document.addEventListener("touchmove",m,false);// 禁止页面滑动
 },closeImgViewer(){this.imgViewerVisible=false;const m=e=>{e.preventDefault();};document.body.style.overflow="auto";document.removeEventListener("touchmove",m,true);}}};/* script */const __vue_script__$h=script$h;/* template */var __vue_render__$h=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("div",{staticClass:"upload_file_box"},[_c("div",{staticStyle:{height:"0",overflow:"hidden"}},[_c("el-image",{ref:"previewImg",attrs:{src:_vm.dialogImageUrl,"preview-src-list":_vm.formFileList.map(function(item){return _vm.bgImg(item);})}})],1),_vm._v(" "),_c("el-upload",{class:{disUoloadSty:_vm.noneBtnImg},attrs:{headers:_vm.headers,action:_vm.apiUrl,"list-type":_vm.listType,tip:_vm.tip,limit:_vm.limit,multiple:_vm.multiple,data:_vm.formData,accept:_vm.formatFileType(),disabled:_vm.fileDisabled,"file-list":_vm.formFileList,"on-exceed":_vm.formHandleExceed,"before-upload":_vm.beforeUploadForm,"on-change":_vm.handleUploadForm,"on-remove":_vm.formHandleRemove,"on-success":_vm.handleSuccess,"on-error":_vm.handleError,"on-preview":_vm.handlePreview,"http-request":_vm.customHttpRequest},scopedSlots:_vm._u([{key:"file",fn:function(ref){var file=ref.file;return _vm.listType==="picture-card"?_c("div",{staticClass:"upload_file_operation"},[_c("div",{staticClass:"upload_file_bg",style:"background: url("+_vm.bgImg(file)+") no-repeat 50% 50%; background-size: contain;"}),_vm._v(" "),file.status!=="success"?_c("span",{staticClass:"el-upload-list__item-actions",staticStyle:{opacity:"1"}},[_c("i",{staticClass:"el-icon-loading"})]):_vm._e()]):_vm._e();}}],null,true)},[_vm.listType==="text"?_c("div",{staticStyle:{"text-align":"left"}},[_c("el-button",{attrs:{type:"primary",disabled:_vm.fileDisabled}},[_vm._v(_vm._s(_vm.trans("点击上传")))]),_vm._v(" "),_c("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[_vm._v("\n        "+_vm._s(_vm.tip?_vm.tip:""+_vm.trans("请选择要上传的附件，最多")+_vm.limit+_vm.trans("个")+"，"+_vm.trans("单个附件最大")+_vm.formMaxSize+"M")+"\n      ")])],1):_vm._e(),_vm._v(" "),_vm.listType==="excel"?_c("div",{staticStyle:{"text-align":"left"}},[_c("el-button",{attrs:{type:"primary"}},[_vm._v(_vm._s(_vm.trans("点击上传")))]),_vm._v(" "),_vm._t("tip")],2):_vm._e(),_vm._v(" "),_vm.listType==="picture-card"?_c("draggable",_vm._b({staticClass:"el-upload-list el-upload-list--picture-card",style:{position:"absolute",left:0,top:0},attrs:{slot:"tip",tag:"ul"},on:{end:_vm.dragEnd},slot:"tip",model:{value:_vm.formFileList,callback:function($$v){_vm.formFileList=$$v;},expression:"formFileList"}},"draggable",_vm.dragOptions,false),_vm._l(_vm.formFileList,function(file,inex){return _c("li",{key:inex,staticClass:"el-upload-list__item is-success"},[_c("div",{staticClass:"upload_file_operation"},[_c("div",{staticClass:"upload_file_bg",style:"background: url("+_vm.bgImg(file)+") 50% 50% / contain no-repeat;"}),_vm._v(" "),_c("span",{staticClass:"el-upload-list__item-actions"},[_c("span",{staticClass:"el-upload-list__item-preview",on:{click:function($event){return _vm.handlePictureCardPreview(file);}}},[_c("i",{staticClass:"el-icon-zoom-in"})]),_vm._v(" "),_c("span",{staticClass:"el-upload-list__item-delete",on:{click:function($event){return _vm.handleDownload(file);}}},[_c("i",{staticClass:"el-icon-download"})]),_vm._v(" "),!_vm.fileDisabled?_c("span",{staticClass:"el-upload-list__item-delete",on:{click:function($event){return _vm.formHandleRemove(file);}}},[_c("i",{staticClass:"el-icon-delete"})]):_vm._e()])])]);}),0):_vm._e(),_vm._v(" "),_vm.listType==="picture-card"?_c("i",{staticClass:"el-icon-plus",attrs:{slot:"default"},slot:"default"}):_vm._e()],1)],1);};var __vue_staticRenderFns__$h=[];__vue_render__$h._withStripped=true;/* style */const __vue_inject_styles__$h=function(inject){if(!inject)return;inject("data-v-1f050f4c_0",{source:".upload_file_box {\n  position: relative;\n}\n.upload_file_box .el-upload-list--picture-card .el-upload-list__item {\n  width: 104px;\n  height: 104px;\n  transition: none;\n}\n.upload_file_box .el-upload--picture-card {\n  width: 104px;\n  height: 104px;\n  line-height: 104px;\n  position: relative;\n  z-index: 1;\n}\n.upload_file_box .upload_file_operation {\n  width: 100%;\n  height: 100%;\n}\n.upload_file_box .upload_file_operation .upload_file_bg {\n  width: 100%;\n  height: 100%;\n  background-size: contain;\n}\n.upload_file_box .disUoloadSty .el-upload--picture-card {\n  display: none;\n}\n\n/*# sourceMappingURL=index.vue.map */",map:{"version":3,"sources":["/Users/chenlei/HLcode/test/components/UploadFile/index.vue","index.vue"],"names":[],"mappings":"AAmoBA;EACA,kBAAA;ACloBA;ADqoBA;EACA,YAAA;EACA,aAAA;EACA,gBAAA;ACnoBA;ADuoBA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,kBAAA;EACA,UAAA;ACroBA;ADwoBA;EACA,WAAA;EACA,YAAA;ACtoBA;ADwoBA;EACA,WAAA;EACA,YAAA;EACA,wBAAA;ACtoBA;AD2oBA;EACA,aAAA;ACzoBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"upload_file_box\">\n    <div style=\"height: 0; overflow: hidden\">\n      <el-image\n        ref=\"previewImg\"\n        :src=\"dialogImageUrl\"\n        :preview-src-list=\"formFileList.map((item) => bgImg(item))\"\n      />\n    </div>\n\n    <el-upload\n      :class=\"{ disUoloadSty: noneBtnImg }\"\n      :headers=\"headers\"\n      :action=\"apiUrl\"\n      :list-type=\"listType\"\n      :tip=\"tip\"\n      :limit=\"limit\"\n      :multiple=\"multiple\"\n      :data=\"formData\"\n      :accept=\"formatFileType()\"\n      :disabled=\"fileDisabled\"\n      :file-list=\"formFileList\"\n      :on-exceed=\"formHandleExceed\"\n      :before-upload=\"beforeUploadForm\"\n      :on-change=\"handleUploadForm\"\n      :on-remove=\"formHandleRemove\"\n      :on-success=\"handleSuccess\"\n      :on-error=\"handleError\"\n      :on-preview=\"handlePreview\"\n      :http-request=\"customHttpRequest\"\n    >\n      <div v-if=\"listType === 'text'\" style=\"text-align: left\">\n        <el-button type=\"primary\" :disabled=\"fileDisabled\">{{\n          trans(\"点击上传\")\n        }}</el-button>\n        <div slot=\"tip\" class=\"el-upload__tip\">\n          {{\n            tip\n              ? tip\n              : `${trans(\"请选择要上传的附件，最多\")}${limit}${trans(\n                  \"个\"\n                )}，${trans(\"单个附件最大\")}${formMaxSize}M`\n          }}\n        </div>\n      </div>\n      <div v-if=\"listType === 'excel'\" style=\"text-align: left\">\n        <el-button type=\"primary\">{{ trans(\"点击上传\") }}</el-button>\n        <slot name=\"tip\"></slot>\n      </div>\n\n      <draggable\n        slot=\"tip\"\n        v-if=\"listType === 'picture-card'\"\n        tag=\"ul\"\n        v-model=\"formFileList\"\n        v-bind=\"dragOptions\"\n        @end=\"dragEnd\"\n        class=\"el-upload-list el-upload-list--picture-card\"\n        :style=\"{ position: 'absolute', left: 0, top: 0 }\"\n      >\n        <li\n          class=\"el-upload-list__item is-success\"\n          v-for=\"(file, inex) in formFileList\"\n          :key=\"inex\"\n        >\n          <div class=\"upload_file_operation\">\n            <div\n              class=\"upload_file_bg\"\n              :style=\"`background: url(${bgImg(\n                file\n              )}) 50% 50% / contain no-repeat;`\"\n            />\n            <span class=\"el-upload-list__item-actions\">\n              <span\n                class=\"el-upload-list__item-preview\"\n                @click=\"handlePictureCardPreview(file)\"\n              >\n                <i class=\"el-icon-zoom-in\" />\n              </span>\n              <span\n                class=\"el-upload-list__item-delete\"\n                @click=\"handleDownload(file)\"\n              >\n                <i class=\"el-icon-download\" />\n              </span>\n              <span\n                v-if=\"!fileDisabled\"\n                class=\"el-upload-list__item-delete\"\n                @click=\"formHandleRemove(file)\"\n              >\n                <i class=\"el-icon-delete\" />\n              </span>\n            </span>\n          </div>\n        </li>\n      </draggable>\n\n      <i\n        slot=\"default\"\n        class=\"el-icon-plus\"\n        v-if=\"listType === 'picture-card'\"\n      />\n      <div\n        slot=\"file\"\n        slot-scope=\"{ file }\"\n        class=\"upload_file_operation\"\n        v-if=\"listType === 'picture-card'\"\n      >\n        <div\n          class=\"upload_file_bg\"\n          :style=\"`background: url(${bgImg(\n            file\n          )}) no-repeat 50% 50%; background-size: contain;`\"\n        />\n        <span\n          v-if=\"file.status !== 'success'\"\n          style=\"opacity: 1\"\n          class=\"el-upload-list__item-actions\"\n        >\n          <i class=\"el-icon-loading\"></i>\n        </span>\n      </div>\n    </el-upload>\n  </div>\n</template>\n\n<script>\n// import { attachment } from '@/config/api/publicApi'\nimport draggable from \"vuedraggable\";\nimport { mapGetters } from \"vuex\";\nimport axios from \"axios\";\nimport CSV from \"./fileImages/CSV.png\";\nimport EXCEL from \"./fileImages/EXCEL.png\";\nimport PDF from \"./fileImages/PDF.png\";\nimport PPT from \"./fileImages/PPT.png\";\nimport RAR from \"./fileImages/RAR.png\";\nimport WORD from \"./fileImages/WORD.png\";\nimport ZIP from \"./fileImages/ZIP.png\";\nimport APK from \"./fileImages/APK.png\";\nimport PLIST from \"./fileImages/PLIST.png\";\nimport MP4 from \"./fileImages/MP4.png\";\nimport trans from \"../lang/trans\";\n\nexport default {\n  components: {\n    draggable,\n  },\n  props: {\n    limit: {\n      // 限制文件个数\n      default: 1,\n      type: Number,\n    },\n    multiple: {\n      // 上传多个文件\n      default: false,\n      type: Boolean,\n    },\n    formMaxSize: {\n      // 限制文件大小\n      default: 10, //  M\n      type: Number,\n    },\n    formMaxWH: {\n      // 限制图片尺寸 单位px { width: 100, height: 100 }\n      default: () => {\n        return {};\n      },\n      type: Object,\n    },\n    fileUrl: {\n      // 文件数组\n      default: () => {\n        return [];\n      },\n      type: Array,\n    },\n    tip: {\n      // 上传文件说明\n      default: \"\",\n      type: String,\n    },\n    formData: {\n      // 上传时附带的额外参数\n      default: () => {\n        return {\n          attachmenType: \"VOUCHER\",\n        };\n      },\n      type: Object,\n    },\n    handleSuccessCallback: {\n      type: Function,\n    },\n    fileType: {\n      // 限制选择文件类型\n      // default: '.pptx,.csv,.zip,.rar,image/*,application/msexcel,application/msword,application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.wordprocessingml.document, text/plain',\n      default: () => {\n        return [\n          \".pptx\",\n          \".csv\",\n          \".zip\",\n          \".rar\",\n          \".jpg\",\n          \".jpeg\",\n          \".png\",\n          \".doc\",\n          \".docx\",\n          \".pdf\",\n          \".xls\",\n          \".xlsx\",\n          \".mp4\",\n          \".pdf\",\n        ];\n      },\n      type: Array,\n    },\n    fileDisabled: {\n      default: false,\n      type: Boolean,\n    },\n    apiUrl: {\n      default: \"/gateway/huilianApi/uploader/attachment\",\n      type: String,\n    },\n    listType: {\n      default: \"picture-card\",\n      type: String,\n    },\n  },\n  data() {\n    return {\n      formFileList: [], // 显示上传文件\n      dialogImageUrl: \"\",\n      loading: \"\",\n      noneBtnImg: false,\n      drag: false,\n      trans,\n      headers: {},\n    };\n  },\n  computed: {\n    ...mapGetters([\"userInfo\"]),\n    dragOptions() {\n      return {\n        animation: 100,\n        group: \"description\",\n        disabled: false,\n        ghostClass: \"ghost\",\n      };\n    },\n  },\n  watch: {\n    fileUrl: {\n      deep: true,\n      immediate: true,\n      handler() {\n        this.formFileList = this.fileUrl;\n        if (this.fileDisabled) {\n          this.noneBtnImg = true;\n        }\n        if (this.fileUrl.length >= this.limit) {\n          this.noneBtnImg = true;\n        } else {\n          this.noneBtnImg = false;\n        }\n      },\n    },\n  },\n  mounted() {\n    // if (window.HLEncryption) {\n    //   this.headers = window.HLEncryption.setRequestHeaders({\n    //     url: this.apiUrl,\n    //     headers: {},\n    //   });\n    // }\n  },\n  methods: {\n    customHttpRequest({ file, onSuccess, onError }) {\n      // 动态生成headers\n      let headers = {\n        \"Content-Type\": \"multipart/form-data\", // 通常不需要手动设置，但为了完整性还是加上\n      };\n\n      if (window.HLEncryption) {\n        headers = window.HLEncryption.setRequestHeaders({\n          url: this.apiUrl,\n          headers: headers,\n        });\n      }\n\n      const formData = new FormData();\n      formData.append(\"file\", file); // 添加文件到FormData中\n      // 使用axios或fetch发送请求，这里使用axios为例\n      for (let key in this.formData) {\n        formData.append(key, this.formData[key]);\n      }\n      axios\n        .post(this.apiUrl, formData, { headers })\n        .then((response) => {\n          onSuccess(response.data, response); // 调用onSuccess回调\n        })\n        .catch((error) => {\n          onError(error); // 调用onError回调\n        });\n    },\n    // 处理格式\n    formatFileType() {\n      let arr = [];\n      this.fileType.map((item) => {\n        arr.push(item);\n        arr.push(item.toUpperCase());\n      });\n      return arr.join(\",\");\n    },\n    // 缩略图展示\n    bgImg(file) {\n      let type = \"\";\n      const types = {\n        IMG: \"\",\n        WORD: WORD,\n        EXCEL: EXCEL,\n        PDF: PDF,\n        CSV: CSV,\n        RAR: RAR,\n        ZIP: ZIP,\n        PPT: PPT,\n        APK: APK,\n        PLIST: PLIST,\n        MP4: MP4,\n      };\n\n      if (file.raw) {\n        type = this.fileFormat(file.name.toLowerCase());\n      } else {\n        type = this.fileFormat(file.url.toLowerCase());\n      }\n\n      if (type === \"IMG\") {\n        return file.url;\n      } else {\n        return types[type];\n      }\n    },\n    // 文件格式\n    fileFormat(name) {\n      const images = \"bmp|jpg|jpeg|png|gif|svg|webp|JPG|JPEG|PNG\";\n      const word = \"doc|docx|DOC|DOCX\";\n      const excel = \"xls|xlsx|XLS|XLSX\";\n      const pdf = \"pdf|PDF\";\n      const csv = \"csv|CSV\";\n      const rar = \"rar|RAR\";\n      const zip = \"zip|ZIP\";\n      const ppt = \"pptx|PPTX\";\n      const apk = \"apk|APK\";\n      const plist = \"plist|PLIST\";\n      const mp4 = \"mp4|MP4\";\n\n      const pattern_images = new RegExp(\".(\" + images + \")$\");\n      const pattern_word = new RegExp(\".(\" + word + \")$\");\n      const pattern_excel = new RegExp(\".(\" + excel + \")$\");\n      const pattern_pdf = new RegExp(\".(\" + pdf + \")$\");\n      const pattern_csv = new RegExp(\".(\" + csv + \")$\");\n      const pattern_rar = new RegExp(\".(\" + rar + \")$\");\n      const pattern_zip = new RegExp(\".(\" + zip + \")$\");\n      const pattern_ppt = new RegExp(\".(\" + ppt + \")$\");\n      const pattern_apk = new RegExp(\".(\" + apk + \")$\");\n      const pattern_plist = new RegExp(\".(\" + plist + \")$\");\n      const pattern_mp4 = new RegExp(\".(\" + mp4 + \")$\");\n\n      if (name.indexOf(\"?\") > -1) {\n        name = name.split(\"?\")[0];\n      }\n\n      if (pattern_images.test(name)) {\n        return \"IMG\";\n      } else if (pattern_word.test(name)) {\n        return \"WORD\";\n      } else if (pattern_excel.test(name)) {\n        return \"EXCEL\";\n      } else if (pattern_pdf.test(name)) {\n        return \"PDF\";\n      } else if (pattern_csv.test(name)) {\n        return \"CSV\";\n      } else if (pattern_rar.test(name)) {\n        return \"RAR\";\n      } else if (pattern_zip.test(name)) {\n        return \"ZIP\";\n      } else if (pattern_ppt.test(name)) {\n        return \"PPT\";\n      } else if (pattern_apk.test(name)) {\n        return \"APK\";\n      } else if (pattern_plist.test(name)) {\n        return \"PLIST\";\n      } else if (pattern_mp4.test(name)) {\n        return \"MP4\";\n      }\n    },\n    // 开始上传前验证\n    beforeUploadForm(file) {\n      // 验证文件大小\n      if (file.size / 1024 / 1024 > this.formMaxSize) {\n        setTimeout(() => {\n          this.$message({\n            message: `上传文件 “${file.name}” 大小不能超过${this.formMaxSize}M!`,\n            type: \"warning\",\n          });\n        }, 1);\n        return false;\n      }\n\n      // 验证尺寸是否符合\n      if (this.formMaxWH.width) {\n        const isSize = this.validImage(file).then(\n          (data) => {\n            return file;\n          },\n          (data) => {\n            this.$message.error(data.msg);\n            return Promise.reject();\n          }\n        );\n        return isSize;\n      }\n\n      // 中文乱码处理\n      // if (file.raw) {\n      //   let reader = new FileReader(); // 读取文件内容\n      //   reader.readAsText(file.raw, \"gb2312\"); // 防止中文乱码问题，不加reader.onload方法都不会触发\n      //   reader.onload = function(e) {\n      //     this.contentHtml = e.target.result; // txt文本内容，接下来就可以对其进行校验处理了\n      //   };\n      // }\n\n      // 验证文件类型\n      const nameList = file.name.split(\".\");\n      const allowTypes = this.fileType.map((type) => type.toLowerCase());\n      const ext = \".\" + nameList[nameList.length - 1].toLowerCase();\n      if (!allowTypes.includes(ext)) {\n        setTimeout(() => {\n          this.$message({\n            message: `请上传${this.fileType.join(\"、\")}的文件!`,\n            type: \"warning\",\n          });\n        }, 1);\n        return false;\n      }\n    },\n    // 校验图片宽高\n    validImage(file) {\n      const _this = this;\n      return new Promise(function (resolve, reject) {\n        const width = parseInt(_this.formMaxWH.width, 10);\n        const height = parseInt(_this.formMaxWH.height, 10);\n        let _URL = window.URL || window.webkitURL;\n        let img = new Image();\n        img.onload = function () {\n          if (img.width !== width || img.height !== height) {\n            return reject({\n              type: false,\n              msg: `请上传${width}px * ${height}px的图片`,\n            });\n          }\n          return resolve({\n            type: true,\n          });\n        };\n        img.src = _URL.createObjectURL(file);\n      });\n    },\n    formHandleRemove(file, formFileList) {\n      if (file.status !== \"ready\") {\n        this.formFileList.splice(this.formFileList.indexOf(file), 1);\n        this.noneBtnImg = this.formFileList.length >= this.limit;\n      }\n    },\n    handlePreview(file) {\n      if (this.listType === \"text\") {\n        this.handlePictureCardPreview(file);\n      }\n    },\n    handlePictureCardPreview(file) {\n      let type, url;\n      if (file.raw) {\n        type = this.fileFormat(file.name.toLowerCase());\n        url = file.response.data[0].attachmenturl;\n      } else {\n        type = this.fileFormat(file.url.toLowerCase());\n        url = file.url;\n      }\n\n      if (type === \"IMG\") {\n        this.dialogImageUrl = file.url;\n        this.$refs.previewImg.showViewer = true;\n\n        const m = (e) => {\n          e.preventDefault();\n        };\n        document.body.style.overflow = \"hidden\";\n        document.addEventListener(\"touchmove\", m, false); // 禁止页面滑动\n\n        this.$nextTick(() => {\n          document\n            .querySelector(\".el-image-viewer__close\")\n            .addEventListener(\"click\", () => {\n              const m = (e) => {\n                e.preventDefault();\n              };\n              document.body.style.overflow = \"auto\";\n              document.removeEventListener(\"touchmove\", m, true);\n            });\n        });\n      } else if (type === \"PDF\") {\n        window.open(\n          \"https://www.hellogil.com/web/contractPreview.html?url=\" +\n            url.replace(\"http://\", \"https://\")\n        );\n      } else if (\n        type === \"WORD\" ||\n        type === \"EXCEL\" ||\n        type === \"CSV\" ||\n        type === \"PPT\"\n      ) {\n        window.open(\n          `https://file-preview.hellogil.com/onlinePreview?watermarkTxt=${this.userInfo.userName}${this.userInfo.jobCard}&url=` +\n            url.replace(\"http://\", \"https://\")\n        );\n      } else {\n        this.$message({\n          message: \"该文件不支持预览!\",\n          type: \"warning\",\n        });\n      }\n    },\n    handleDownload(file) {\n      console.log(file);\n      var name;\n      let url = file.response ? file.response.data[0].attachmenturl : file.url;\n      if (file.name) {\n        name = file.name;\n        if (!name.indexOf(\".\") > -1) {\n          var a = url.split(\"/\");\n          var b = a[a.length - 1];\n          name = file.name + \".\" + b.split(\".\")[1];\n        }\n      } else {\n        var a = url.split(\"/\");\n        name = a[a.length - 1];\n      }\n      axios({\n        method: \"post\",\n        url:\n          process.env.VUE_APP_BASE_API +\n          \"/huilianApi/uploader/downloadZipFiles\",\n        data:\n          \"fileUrls=\" +\n          JSON.stringify([\n            {\n              imgName: name\n                .replace(/\\&/g, \"-\")\n                .replace(/\\?/g, \"-\")\n                .replace(/\\%/g, \"-\"),\n              dataImg: url,\n            },\n          ]),\n        responseType: \"blob\", // 加上这个是重点\n      }).then((res) => {\n        this.downloadFile(res.data, name);\n      });\n    },\n    downloadFile(data, name) {\n      const url = window.URL.createObjectURL(new Blob([data]));\n      const link = document.createElement(\"a\");\n      link.style.display = \"none\";\n      link.href = url;\n      link.setAttribute(\"download\", name);\n      document.body.appendChild(link);\n      link.click();\n      URL.revokeObjectURL(link.href);\n      document.body.removeChild(link);\n      this.$message({\n        message: \"下载成功\",\n        type: \"success\",\n      });\n    },\n    // 允许上传文件个数验证\n    formHandleExceed(files, formFileList) {\n      this.$message.warning(`最多上传 ${this.limit} 个文件！`);\n    },\n    // 上传文件\n    handleUploadForm(file, fileList) {\n      if (!file.url) {\n        file.url = URL.createObjectURL(file.raw);\n      }\n    },\n    // 上传成功\n    handleSuccess(response, file, fileList) {\n      var num = 0;\n      for (var i = 0; i < fileList.length; i++) {\n        if (fileList[i].status === \"success\") {\n          num++;\n        }\n      }\n      if (num === fileList.length) {\n        this.formFileList = fileList;\n        this.$emit(\"update:fileUrl\", this.formFileList);\n        this.noneBtnImg = this.formFileList.length >= this.limit;\n        if (this.handleSuccessCallback) {\n          this.handleSuccessCallback(response, file, fileList);\n        }\n      }\n    },\n    // 上传失败\n    handleError(err, file, fileList) {\n      console.log(err);\n      // this.loading.close()\n    },\n\n    dragEnd() {\n      // this.drag = false;\n      this.$emit(\"update:fileUrl\", this.formFileList);\n    },\n    showImgViewer() {\n      this.imgViewerVisible = true;\n      const m = (e) => {\n        e.preventDefault();\n      };\n      document.body.style.overflow = \"hidden\";\n      document.addEventListener(\"touchmove\", m, false); // 禁止页面滑动\n    },\n    closeImgViewer() {\n      this.imgViewerVisible = false;\n      const m = (e) => {\n        e.preventDefault();\n      };\n      document.body.style.overflow = \"auto\";\n      document.removeEventListener(\"touchmove\", m, true);\n    },\n  },\n};\n</script>\n\n<style lang=\"scss\">\n.upload_file_box {\n  position: relative;\n\n  .el-upload-list--picture-card {\n    .el-upload-list__item {\n      width: 104px;\n      height: 104px;\n      transition: none;\n    }\n  }\n\n  .el-upload--picture-card {\n    width: 104px;\n    height: 104px;\n    line-height: 104px;\n    position: relative;\n    z-index: 1;\n  }\n\n  .upload_file_operation {\n    width: 100%;\n    height: 100%;\n\n    .upload_file_bg {\n      width: 100%;\n      height: 100%;\n      background-size: contain;\n    }\n  }\n\n  .disUoloadSty {\n    .el-upload--picture-card {\n      display: none;\n    }\n  }\n}\n</style>\n",".upload_file_box {\n  position: relative;\n}\n.upload_file_box .el-upload-list--picture-card .el-upload-list__item {\n  width: 104px;\n  height: 104px;\n  transition: none;\n}\n.upload_file_box .el-upload--picture-card {\n  width: 104px;\n  height: 104px;\n  line-height: 104px;\n  position: relative;\n  z-index: 1;\n}\n.upload_file_box .upload_file_operation {\n  width: 100%;\n  height: 100%;\n}\n.upload_file_box .upload_file_operation .upload_file_bg {\n  width: 100%;\n  height: 100%;\n  background-size: contain;\n}\n.upload_file_box .disUoloadSty .el-upload--picture-card {\n  display: none;\n}\n\n/*# sourceMappingURL=index.vue.map */"]},media:undefined});};/* scoped */const __vue_scope_id__$h=undefined;/* module identifier */const __vue_module_identifier__$h=undefined;/* functional template */const __vue_is_functional_template__$h=false;/* style inject SSR */ /* style inject shadow dom */const __vue_component__$h=/*#__PURE__*/normalizeComponent({render:__vue_render__$h,staticRenderFns:__vue_staticRenderFns__$h},__vue_inject_styles__$h,__vue_script__$h,__vue_scope_id__$h,__vue_is_functional_template__$h,__vue_module_identifier__$h,false,createInjector,undefined,undefined);__vue_component__$h.install=function(Vue){Vue.component(__vue_component__$h.name,__vue_component__$h);};//
 var script$g={props:{fileUrl:{// 文件数组
-default:()=>{return[];},type:Array},showTitle:{// 是否显示图片名
+default:()=>{return[];},type:Array},isShowDownload:{// 是否显示
+default:true,type:Boolean},showTitle:{// 是否显示图片名
 default:false,type:Boolean},// isText: { // 是否以文字形式展示
 //     default: false,
 //     type: Boolean
@@ -593,7 +594,7 @@ dialogImageUrl:""};},computed:{...mapGetters(["userInfo"])},watch:{fileUrl:{deep
 bgImg(file){let type="";const types={IMG:"",WORD:img$4,EXCEL:img$8,PDF:img$7,CSV:img$9,RAR:img$5,ZIP:img$3,PPT:img$6,PLIST:img$1};if(file.raw){type=this.fileFormat(file.name);}else{type=this.fileFormat(file.url);}if(type==="IMG"){return file.url;}else{return types[type];}},// 文件格式
 fileFormat(name){const images="bmp|jpg|jpeg|png|gif|svg|webp|JPG|JPEG|PNG";const word="doc|docx|DOC|DOCX";const excel="xls|xlsx|XLS|XLSX";const pdf="pdf|PDF";const csv="csv|CSV";const rar="rar|RAR";const zip="zip|ZIP";const ppt="pptx|PPTX";const plist="plist|PLIST";const pattern_images=new RegExp(".("+images+")$");const pattern_word=new RegExp(".("+word+")$");const pattern_excel=new RegExp(".("+excel+")$");const pattern_pdf=new RegExp(".("+pdf+")$");const pattern_csv=new RegExp(".("+csv+")$");const pattern_rar=new RegExp(".("+rar+")$");const pattern_zip=new RegExp(".("+zip+")$");const pattern_ppt=new RegExp(".("+ppt+")$");const pattern_plist=new RegExp(".("+plist+")$");if(name.indexOf("?")>-1){name=name.split("?")[0];}if(pattern_images.test(name)){return"IMG";}else if(pattern_word.test(name)){return"WORD";}else if(pattern_excel.test(name)){return"EXCEL";}else if(pattern_pdf.test(name)){return"PDF";}else if(pattern_csv.test(name)){return"CSV";}else if(pattern_rar.test(name)){return"RAR";}else if(pattern_zip.test(name)){return"ZIP";}else if(pattern_ppt.test(name)){return"PPT";}else if(pattern_plist.test(name)){return"PLIST";}},handlePictureCardPreview(file){let type,url;if(file.raw){type=this.fileFormat(file.name);url=file.response.data[0].attachmenturl;}else{type=this.fileFormat(file.url);url=file.url;}if(type==="IMG"){this.dialogImageUrl=file.url;this.$refs.previewImg.showViewer=true;const m=e=>{e.preventDefault();};document.body.style.overflow="hidden";document.addEventListener("touchmove",m,false);// 禁止页面滑动
 this.$nextTick(()=>{document.querySelector(".el-image-viewer__close").addEventListener("click",()=>{const m=e=>{e.preventDefault();};document.body.style.overflow="auto";document.removeEventListener("touchmove",m,true);});});}else if(type==="PDF"){window.open("https://www.hellogil.com/web/contractPreview.html?url="+url.replace("http://","https://"));}else if(type==="WORD"||type==="EXCEL"||type==="CSV"||type==="PPT"){window.open(`https://file-preview.hellogil.com/onlinePreview?watermarkTxt=${this.userInfo.userName}${this.userInfo.jobCard}&url=`+url.replace("http://","https://"));}else{this.$message({message:"该文件不支持预览!",type:"warning"});}},handlePictureCardPreviewCallback(item){this.handlePictureCardPreview(item);},handleDownload(file){console.log(file);var name;if(file.name){name=file.name;if(!name.indexOf(".")>-1){var a=file.url.split("/");var b=a[a.length-1];name=file.name+"."+b.split(".")[1];}}else{var a=file.url.split("/");name=a[a.length-1];}axios({method:"post",url:process.env.VUE_APP_BASE_API+"/huilianApi/uploader/downloadZipFiles",data:"fileUrls="+JSON.stringify([{imgName:name.replace(/\&/g,"-").replace(/\?/g,"-").replace(/\%/g,"-"),dataImg:file.url}]),responseType:"blob"// 加上这个是重点
-}).then(res=>{this.downloadFile(res.data,name);});},downloadFile(data,name){const url=window.URL.createObjectURL(new Blob([data]));const link=document.createElement("a");link.style.display="none";link.href=url;link.setAttribute("download",name);document.body.appendChild(link);link.click();URL.revokeObjectURL(link.href);document.body.removeChild(link);this.$message({message:"下载成功",type:"success"});}}};/* script */const __vue_script__$g=script$g;/* template */var __vue_render__$g=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("div",{staticClass:"show_file_box"},[_c("div",{staticStyle:{height:"0",width:"0",overflow:"hidden"}},[_c("el-image",{ref:"previewImg",attrs:{src:_vm.dialogImageUrl,"preview-src-list":_vm.formFileList.map(function(item){return _vm.bgImg(item);})}})],1),_vm._v(" "),_vm.type==="block"?_c("div",{},_vm._l(_vm.fileUrl,function(item,index){return _c("div",{key:index,staticClass:"show_file_operation"},[_c("div",{staticClass:"show_file_bg",style:"background: url("+_vm.bgImg(item)+") no-repeat 50% 50%; background-size: contain;"}),_vm._v(" "),_c("span",{staticClass:"el-show-list__item-actions"},[_c("span",{staticClass:"el-show-list__item-preview",on:{click:function($event){return _vm.handlePictureCardPreview(item);}}},[_c("i",{staticClass:"el-icon-zoom-in"})]),_vm._v(" "),_c("span",{staticClass:"el-show-list__item-delete",on:{click:function($event){return _vm.handleDownload(item);}}},[_c("i",{staticClass:"el-icon-download"})])]),_vm._v(" "),_vm.showTitle?_c("p",{staticClass:"show_file_title"},[_vm._v(_vm._s(item.name))]):_vm._e()]);}),0):_vm._e(),_vm._v(" "),_vm.type==="text"?_c("div",_vm._l(_vm.fileUrl,function(item,index){return _c("a",{key:index,on:{click:function($event){return _vm.handlePictureCardPreview(item);}}},[_vm._v(_vm._s(item.name))]);}),0):_vm._e(),_vm._v(" "),_vm.type==="custom"?_c("div",[_vm._t("content",null,{props:_vm.fileUrl,callback:_vm.handlePictureCardPreviewCallback})],2):_vm._e(),_vm._v(" "),_vm.type==="list"?_c("div",[_c("ul",_vm._l(_vm.fileUrl,function(item,index){return _c("li",{key:index,staticClass:"clearfix",class:index+1<_vm.fileUrl.length?"mb-15":""},[_vm._m(0,true),_vm._v(" "),_c("div",{staticClass:"clearfix fl ml-10 textCss",staticStyle:{width:"calc(100% - 30px)"}},[_c("div",{staticClass:"fl imgName"},[_vm._v("\n            "+_vm._s(item.name)+"\n          ")]),_vm._v(" "),_c("el-button",{staticClass:"fr",attrs:{icon:"el-icon-download",type:"text"},on:{click:function($event){return _vm.handleDownload(item);}}},[_vm._v("下载")]),_vm._v(" "),_c("el-button",{staticClass:"fr mr-15",attrs:{icon:"el-icon-zoom-in",type:"text"},on:{click:function($event){return _vm.handlePictureCardPreview(item);}}},[_vm._v("预览")])],1)]);}),0)]):_vm._e()]);};var __vue_staticRenderFns__$g=[function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",{staticClass:"fl"},[_c("i",{staticClass:"el-icon-folder-opened"})]);}];__vue_render__$g._withStripped=true;/* style */const __vue_inject_styles__$g=function(inject){if(!inject)return;inject("data-v-76fa21bf_0",{source:".show_file_box a {\n  color: #10c2b0;\n}\n.show_file_box::after {\n  content: \"\";\n  display: block;\n  clear: both;\n}\n.show_file_box .show_file_operation {\n  border-radius: 4px;\n  position: relative;\n  line-height: 104px;\n  float: left;\n  margin-right: 10px;\n  margin-bottom: 10px;\n}\n.show_file_box .show_file_operation .show_file_bg {\n  width: 104px;\n  height: 104px;\n  border: 1px solid #c0ccda;\n}\n.show_file_box .show_file_operation .el-show-list__item-actions {\n  position: absolute;\n  width: 104px;\n  height: 104px;\n  left: 0;\n  top: 0;\n  cursor: default;\n  text-align: center;\n  color: #fff;\n  opacity: 0;\n  font-size: 20px;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: opacity 0.3s;\n}\n.show_file_box .show_file_operation .el-show-list__item-actions span {\n  cursor: pointer;\n  font-size: inherit;\n  color: inherit;\n}\n.show_file_box .show_file_operation .el-show-list__item-actions .el-show-list__item-delete {\n  position: static;\n  top: 0;\n  margin-left: 20px;\n}\n.show_file_box .show_file_operation:hover .el-show-list__item-actions {\n  opacity: 1;\n}\n.show_file_box .show_file_operation .show_file_title {\n  font-size: 12px;\n  color: #999;\n  line-height: 12px;\n  text-align: center;\n}\n.show_file_box ul,\n.show_file_box li {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  max-width: 500px;\n  min-width: 250px;\n}\n.show_file_box li {\n  width: 100%;\n  color: #409eff;\n  font-size: 13px;\n  line-height: 22px;\n}\n.show_file_box li .imgName {\n  width: calc(100% - 140px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.show_file_box li .el-button {\n  color: #409eff;\n  padding: 0;\n  font-size: 13px;\n  line-height: 20px;\n}\n.show_file_box li .el-button i {\n  font-weight: bold;\n}\n\n/*# sourceMappingURL=index.vue.map */",map:{"version":3,"sources":["/Users/chenlei/HLcode/test/components/ShowFile/index.vue","index.vue"],"names":[],"mappings":"AA4UA;EACA,cAAA;AC3UA;AD6UA;EACA,WAAA;EACA,cAAA;EACA,WAAA;AC3UA;AD6UA;EAGA,kBAAA;EACA,kBAAA;EACA,kBAAA;EACA,WAAA;EACA,kBAAA;EACA,mBAAA;AC7UA;AD8UA;EACA,YAAA;EACA,aAAA;EACA,yBAAA;AC5UA;AD8UA;EACA,kBAAA;EACA,YAAA;EACA,aAAA;EACA,OAAA;EACA,MAAA;EACA,eAAA;EACA,kBAAA;EACA,WAAA;EACA,UAAA;EACA,eAAA;EACA,oCAAA;EACA,wBAAA;AC5UA;AD6UA;EACA,eAAA;EACA,kBAAA;EACA,cAAA;AC3UA;AD6UA;EACA,gBAAA;EACA,MAAA;EACA,iBAAA;AC3UA;AD+UA;EACA,UAAA;AC7UA;ADgVA;EACA,eAAA;EACA,WAAA;EACA,iBAAA;EACA,kBAAA;AC9UA;ADkVA;;EAEA,gBAAA;EACA,SAAA;EACA,UAAA;EAEA,WAAA;EACA,gBAAA;EACA,gBAAA;ACjVA;ADmVA;EACA,WAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;ACjVA;ADkVA;EAEA,yBAAA;EACA,gBAAA;EACA,uBAAA;EACA,mBAAA;ACjVA;ADmVA;EACA,cAAA;EACA,UAAA;EACA,eAAA;EACA,iBAAA;ACjVA;ADkVA;EACA,iBAAA;AChVA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"show_file_box\">\n    <div style=\"height: 0; width: 0; overflow: hidden\">\n      <el-image\n        ref=\"previewImg\"\n        :src=\"dialogImageUrl\"\n        :preview-src-list=\"formFileList.map((item) => bgImg(item))\"\n      />\n    </div>\n    <div class=\"\" v-if=\"type === 'block'\">\n      <div\n        class=\"show_file_operation\"\n        v-for=\"(item, index) in fileUrl\"\n        :key=\"index\"\n      >\n        <div\n          class=\"show_file_bg\"\n          :style=\"`background: url(${bgImg(\n            item\n          )}) no-repeat 50% 50%; background-size: contain;`\"\n        />\n        <span class=\"el-show-list__item-actions\">\n          <span\n            class=\"el-show-list__item-preview\"\n            @click=\"handlePictureCardPreview(item)\"\n          >\n            <i class=\"el-icon-zoom-in\" />\n          </span>\n          <span class=\"el-show-list__item-delete\" @click=\"handleDownload(item)\">\n            <i class=\"el-icon-download\" />\n          </span>\n        </span>\n        <p v-if=\"showTitle\" class=\"show_file_title\">{{ item.name }}</p>\n      </div>\n    </div>\n    <div v-if=\"type === 'text'\">\n      <a\n        v-for=\"(item, index) in fileUrl\"\n        :key=\"index\"\n        @click=\"handlePictureCardPreview(item)\"\n        >{{ item.name }}</a\n      >\n    </div>\n    <div v-if=\"type === 'custom'\">\n      <slot\n        name=\"content\"\n        :props=\"fileUrl\"\n        :callback=\"handlePictureCardPreviewCallback\"\n      >\n      </slot>\n    </div>\n    <div v-if=\"type === 'list'\">\n      <ul>\n        <li\n          class=\"clearfix\"\n          :class=\"index + 1 < fileUrl.length ? 'mb-15' : ''\"\n          v-for=\"(item, index) in fileUrl\"\n          :key=\"index\"\n        >\n          <span class=\"fl\">\n            <i class=\"el-icon-folder-opened\"></i>\n          </span>\n          <div\n            class=\"clearfix fl ml-10 textCss\"\n            style=\"width: calc(100% - 30px)\"\n          >\n            <div class=\"fl imgName\">\n              {{ item.name }}\n            </div>\n            <!-- <i class=\"el-icon-download\" class=\"fr ml-10\"  @click=\"handleDownload(item)\">下载</i>\n            <i class=\"el-icon-zoom-in\" class=\"fr\">预览</i> -->\n            <el-button\n              icon=\"el-icon-download\"\n              type=\"text\"\n              class=\"fr\"\n              @click=\"handleDownload(item)\"\n              >下载</el-button\n            >\n            <el-button\n              icon=\"el-icon-zoom-in\"\n              type=\"text\"\n              class=\"fr mr-15\"\n              @click=\"handlePictureCardPreview(item)\"\n              >预览</el-button\n            >\n          </div>\n        </li>\n      </ul>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { mapGetters } from \"vuex\";\nimport axios from \"axios\";\nimport CSV from \"../UploadFile/fileImages/CSV.png\";\nimport EXCEL from \"../UploadFile/fileImages/EXCEL.png\";\nimport PDF from \"../UploadFile/fileImages/PDF.png\";\nimport PPT from \"../UploadFile/fileImages/PPT.png\";\nimport RAR from \"../UploadFile/fileImages/RAR.png\";\nimport WORD from \"../UploadFile/fileImages/WORD.png\";\nimport ZIP from \"../UploadFile/fileImages/ZIP.png\";\nimport PLIST from \"../UploadFile/fileImages/PLIST.png\";\n\nexport default {\n  props: {\n    fileUrl: {\n      // 文件数组\n      default: () => {\n        return [];\n      },\n      type: Array,\n    },\n    showTitle: {\n      // 是否显示图片名\n      default: false,\n      type: Boolean,\n    },\n    // isText: { // 是否以文字形式展示\n    //     default: false,\n    //     type: Boolean\n    // },\n    type: {\n      // 展示类型{block: 块，text: 文字，list: 列,custom:自定义}\n      default: \"block\",\n      type: String,\n    },\n  },\n  data() {\n    return {\n      formFileList: [], // 显示上传文件\n      dialogImageUrl: \"\",\n    };\n  },\n  computed: {\n    ...mapGetters([\"userInfo\"]),\n  },\n  watch: {\n    fileUrl: {\n      deep: true,\n      immediate: true,\n      handler() {\n        this.formFileList = this.fileUrl;\n      },\n    },\n  },\n  methods: {\n    // 缩略图展示\n    bgImg(file) {\n      let type = \"\";\n      const types = {\n        IMG: \"\",\n        WORD: WORD,\n        EXCEL: EXCEL,\n        PDF: PDF,\n        CSV: CSV,\n        RAR: RAR,\n        ZIP: ZIP,\n        PPT: PPT,\n        PLIST: PLIST,\n      };\n\n      if (file.raw) {\n        type = this.fileFormat(file.name);\n      } else {\n        type = this.fileFormat(file.url);\n      }\n\n      if (type === \"IMG\") {\n        return file.url;\n      } else {\n        return types[type];\n      }\n    },\n    // 文件格式\n    fileFormat(name) {\n      const images = \"bmp|jpg|jpeg|png|gif|svg|webp|JPG|JPEG|PNG\";\n      const word = \"doc|docx|DOC|DOCX\";\n      const excel = \"xls|xlsx|XLS|XLSX\";\n      const pdf = \"pdf|PDF\";\n      const csv = \"csv|CSV\";\n      const rar = \"rar|RAR\";\n      const zip = \"zip|ZIP\";\n      const ppt = \"pptx|PPTX\";\n      const plist = \"plist|PLIST\";\n\n      const pattern_images = new RegExp(\".(\" + images + \")$\");\n      const pattern_word = new RegExp(\".(\" + word + \")$\");\n      const pattern_excel = new RegExp(\".(\" + excel + \")$\");\n      const pattern_pdf = new RegExp(\".(\" + pdf + \")$\");\n      const pattern_csv = new RegExp(\".(\" + csv + \")$\");\n      const pattern_rar = new RegExp(\".(\" + rar + \")$\");\n      const pattern_zip = new RegExp(\".(\" + zip + \")$\");\n      const pattern_ppt = new RegExp(\".(\" + ppt + \")$\");\n      const pattern_plist = new RegExp(\".(\" + plist + \")$\");\n\n      if (name.indexOf(\"?\") > -1) {\n        name = name.split(\"?\")[0];\n      }\n\n      if (pattern_images.test(name)) {\n        return \"IMG\";\n      } else if (pattern_word.test(name)) {\n        return \"WORD\";\n      } else if (pattern_excel.test(name)) {\n        return \"EXCEL\";\n      } else if (pattern_pdf.test(name)) {\n        return \"PDF\";\n      } else if (pattern_csv.test(name)) {\n        return \"CSV\";\n      } else if (pattern_rar.test(name)) {\n        return \"RAR\";\n      } else if (pattern_zip.test(name)) {\n        return \"ZIP\";\n      } else if (pattern_ppt.test(name)) {\n        return \"PPT\";\n      } else if (pattern_plist.test(name)) {\n        return \"PLIST\";\n      }\n    },\n\n    handlePictureCardPreview(file) {\n      let type, url;\n      if (file.raw) {\n        type = this.fileFormat(file.name);\n        url = file.response.data[0].attachmenturl;\n      } else {\n        type = this.fileFormat(file.url);\n        url = file.url;\n      }\n\n      if (type === \"IMG\") {\n        this.dialogImageUrl = file.url;\n        this.$refs.previewImg.showViewer = true;\n        const m = (e) => {\n          e.preventDefault();\n        };\n        document.body.style.overflow = \"hidden\";\n        document.addEventListener(\"touchmove\", m, false); // 禁止页面滑动\n\n        this.$nextTick(() => {\n          document\n            .querySelector(\".el-image-viewer__close\")\n            .addEventListener(\"click\", () => {\n              const m = (e) => {\n                e.preventDefault();\n              };\n              document.body.style.overflow = \"auto\";\n              document.removeEventListener(\"touchmove\", m, true);\n            });\n        });\n      } else if (type === \"PDF\") {\n        window.open(\n          \"https://www.hellogil.com/web/contractPreview.html?url=\" +\n            url.replace(\"http://\", \"https://\")\n        );\n      } else if (\n        type === \"WORD\" ||\n        type === \"EXCEL\" ||\n        type === \"CSV\" ||\n        type === \"PPT\"\n      ) {\n        window.open(\n          `https://file-preview.hellogil.com/onlinePreview?watermarkTxt=${this.userInfo.userName}${this.userInfo.jobCard}&url=` +\n            url.replace(\"http://\", \"https://\")\n        );\n      } else {\n        this.$message({\n          message: \"该文件不支持预览!\",\n          type: \"warning\",\n        });\n      }\n    },\n    handlePictureCardPreviewCallback(item) {\n      this.handlePictureCardPreview(item);\n    },\n    handleDownload(file) {\n      console.log(file);\n      var name;\n      if (file.name) {\n        name = file.name;\n        if (!name.indexOf(\".\") > -1) {\n          var a = file.url.split(\"/\");\n          var b = a[a.length - 1];\n          name = file.name + \".\" + b.split(\".\")[1];\n        }\n      } else {\n        var a = file.url.split(\"/\");\n        name = a[a.length - 1];\n      }\n      axios({\n        method: \"post\",\n        url:\n          process.env.VUE_APP_BASE_API +\n          \"/huilianApi/uploader/downloadZipFiles\",\n        data:\n          \"fileUrls=\" +\n          JSON.stringify([\n            {\n              imgName: name\n                .replace(/\\&/g, \"-\")\n                .replace(/\\?/g, \"-\")\n                .replace(/\\%/g, \"-\"),\n              dataImg: file.url,\n            },\n          ]),\n        responseType: \"blob\", // 加上这个是重点\n      }).then((res) => {\n        this.downloadFile(res.data, name);\n      });\n    },\n    downloadFile(data, name) {\n      const url = window.URL.createObjectURL(new Blob([data]));\n      const link = document.createElement(\"a\");\n      link.style.display = \"none\";\n      link.href = url;\n      link.setAttribute(\"download\", name);\n      document.body.appendChild(link);\n      link.click();\n      URL.revokeObjectURL(link.href);\n      document.body.removeChild(link);\n      this.$message({\n        message: \"下载成功\",\n        type: \"success\",\n      });\n    },\n  },\n};\n</script>\n\n<style lang=\"scss\">\n.show_file_box {\n  a {\n    color: #10c2b0;\n  }\n  &::after {\n    content: \"\";\n    display: block;\n    clear: both;\n  }\n  .show_file_operation {\n    // width: 104px;\n    // height: 104px;\n    border-radius: 4px;\n    position: relative;\n    line-height: 104px;\n    float: left;\n    margin-right: 10px;\n    margin-bottom: 10px;\n    .show_file_bg {\n      width: 104px;\n      height: 104px;\n      border: 1px solid #c0ccda;\n    }\n    .el-show-list__item-actions {\n      position: absolute;\n      width: 104px;\n      height: 104px;\n      left: 0;\n      top: 0;\n      cursor: default;\n      text-align: center;\n      color: #fff;\n      opacity: 0;\n      font-size: 20px;\n      background-color: rgba(0, 0, 0, 0.5);\n      transition: opacity 0.3s;\n      span {\n        cursor: pointer;\n        font-size: inherit;\n        color: inherit;\n      }\n      .el-show-list__item-delete {\n        position: static;\n        top: 0;\n        margin-left: 20px;\n      }\n    }\n    &:hover {\n      .el-show-list__item-actions {\n        opacity: 1;\n      }\n    }\n    .show_file_title {\n      font-size: 12px;\n      color: #999;\n      line-height: 12px;\n      text-align: center;\n    }\n  }\n\n  ul,\n  li {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    // width: 500px;\n    width: 100%;\n    max-width: 500px;\n    min-width: 250px;\n  }\n  li {\n    width: 100%;\n    color: #409eff;\n    font-size: 13px;\n    line-height: 22px;\n    .imgName {\n      // width: 350px;\n      width: calc(100% - 140px);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .el-button {\n      color: #409eff;\n      padding: 0;\n      font-size: 13px;\n      line-height: 20px;\n      i {\n        font-weight: bold;\n      }\n    }\n  }\n}\n</style>\n",".show_file_box a {\n  color: #10c2b0;\n}\n.show_file_box::after {\n  content: \"\";\n  display: block;\n  clear: both;\n}\n.show_file_box .show_file_operation {\n  border-radius: 4px;\n  position: relative;\n  line-height: 104px;\n  float: left;\n  margin-right: 10px;\n  margin-bottom: 10px;\n}\n.show_file_box .show_file_operation .show_file_bg {\n  width: 104px;\n  height: 104px;\n  border: 1px solid #c0ccda;\n}\n.show_file_box .show_file_operation .el-show-list__item-actions {\n  position: absolute;\n  width: 104px;\n  height: 104px;\n  left: 0;\n  top: 0;\n  cursor: default;\n  text-align: center;\n  color: #fff;\n  opacity: 0;\n  font-size: 20px;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: opacity 0.3s;\n}\n.show_file_box .show_file_operation .el-show-list__item-actions span {\n  cursor: pointer;\n  font-size: inherit;\n  color: inherit;\n}\n.show_file_box .show_file_operation .el-show-list__item-actions .el-show-list__item-delete {\n  position: static;\n  top: 0;\n  margin-left: 20px;\n}\n.show_file_box .show_file_operation:hover .el-show-list__item-actions {\n  opacity: 1;\n}\n.show_file_box .show_file_operation .show_file_title {\n  font-size: 12px;\n  color: #999;\n  line-height: 12px;\n  text-align: center;\n}\n.show_file_box ul,\n.show_file_box li {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  max-width: 500px;\n  min-width: 250px;\n}\n.show_file_box li {\n  width: 100%;\n  color: #409eff;\n  font-size: 13px;\n  line-height: 22px;\n}\n.show_file_box li .imgName {\n  width: calc(100% - 140px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.show_file_box li .el-button {\n  color: #409eff;\n  padding: 0;\n  font-size: 13px;\n  line-height: 20px;\n}\n.show_file_box li .el-button i {\n  font-weight: bold;\n}\n\n/*# sourceMappingURL=index.vue.map */"]},media:undefined});};/* scoped */const __vue_scope_id__$g=undefined;/* module identifier */const __vue_module_identifier__$g=undefined;/* functional template */const __vue_is_functional_template__$g=false;/* style inject SSR */ /* style inject shadow dom */const __vue_component__$g=/*#__PURE__*/normalizeComponent({render:__vue_render__$g,staticRenderFns:__vue_staticRenderFns__$g},__vue_inject_styles__$g,__vue_script__$g,__vue_scope_id__$g,__vue_is_functional_template__$g,__vue_module_identifier__$g,false,createInjector,undefined,undefined);__vue_component__$g.install=function(Vue){Vue.component(__vue_component__$g.name,__vue_component__$g);};var ElTableDraggable_umd={exports:{}};(function(module,exports){(function webpackUniversalModuleDefinition(root,factory){module.exports=factory();})(typeof self!=='undefined'?self:commonjsGlobal,function(){return(/******/function(modules){// webpackBootstrap
+}).then(res=>{this.downloadFile(res.data,name);});},downloadFile(data,name){const url=window.URL.createObjectURL(new Blob([data]));const link=document.createElement("a");link.style.display="none";link.href=url;link.setAttribute("download",name);document.body.appendChild(link);link.click();URL.revokeObjectURL(link.href);document.body.removeChild(link);this.$message({message:"下载成功",type:"success"});}}};/* script */const __vue_script__$g=script$g;/* template */var __vue_render__$g=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("div",{staticClass:"show_file_box"},[_c("div",{staticStyle:{height:"0",width:"0",overflow:"hidden"}},[_c("el-image",{ref:"previewImg",attrs:{src:_vm.dialogImageUrl,"preview-src-list":_vm.formFileList.map(function(item){return _vm.bgImg(item);})}})],1),_vm._v(" "),_vm.type==="block"?_c("div",{},_vm._l(_vm.fileUrl,function(item,index){return _c("div",{key:index,staticClass:"show_file_operation"},[_c("div",{staticClass:"show_file_bg",style:"background: url("+_vm.bgImg(item)+") no-repeat 50% 50%; background-size: contain;"}),_vm._v(" "),_c("span",{staticClass:"el-show-list__item-actions"},[_c("span",{staticClass:"el-show-list__item-preview",on:{click:function($event){return _vm.handlePictureCardPreview(item);}}},[_c("i",{staticClass:"el-icon-zoom-in"})]),_vm._v(" "),_c("span",{directives:[{name:"show",rawName:"v-show",value:_vm.isShowDownload,expression:"isShowDownload"}],staticClass:"el-show-list__item-delete",on:{click:function($event){return _vm.handleDownload(item);}}},[_c("i",{staticClass:"el-icon-download"})])]),_vm._v(" "),_vm.showTitle?_c("p",{staticClass:"show_file_title"},[_vm._v(_vm._s(item.name))]):_vm._e()]);}),0):_vm._e(),_vm._v(" "),_vm.type==="text"?_c("div",_vm._l(_vm.fileUrl,function(item,index){return _c("a",{key:index,on:{click:function($event){return _vm.handlePictureCardPreview(item);}}},[_vm._v(_vm._s(item.name))]);}),0):_vm._e(),_vm._v(" "),_vm.type==="custom"?_c("div",[_vm._t("content",null,{props:_vm.fileUrl,callback:_vm.handlePictureCardPreviewCallback})],2):_vm._e(),_vm._v(" "),_vm.type==="list"?_c("div",[_c("ul",_vm._l(_vm.fileUrl,function(item,index){return _c("li",{key:index,staticClass:"clearfix",class:index+1<_vm.fileUrl.length?"mb-15":""},[_vm._m(0,true),_vm._v(" "),_c("div",{staticClass:"clearfix fl ml-10 textCss",staticStyle:{width:"calc(100% - 30px)"}},[_c("div",{staticClass:"fl imgName"},[_vm._v("\n            "+_vm._s(item.name)+"\n          ")]),_vm._v(" "),_c("el-button",{directives:[{name:"show",rawName:"v-show",value:_vm.isShowDownload,expression:"isShowDownload"}],staticClass:"fr",attrs:{icon:"el-icon-download",type:"text"},on:{click:function($event){return _vm.handleDownload(item);}}},[_vm._v("下载")]),_vm._v(" "),_c("el-button",{staticClass:"fr mr-15",attrs:{icon:"el-icon-zoom-in",type:"text"},on:{click:function($event){return _vm.handlePictureCardPreview(item);}}},[_vm._v("预览")])],1)]);}),0)]):_vm._e()]);};var __vue_staticRenderFns__$g=[function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",{staticClass:"fl"},[_c("i",{staticClass:"el-icon-folder-opened"})]);}];__vue_render__$g._withStripped=true;/* style */const __vue_inject_styles__$g=function(inject){if(!inject)return;inject("data-v-1233b6e8_0",{source:".show_file_box a {\n  color: #10c2b0;\n}\n.show_file_box::after {\n  content: \"\";\n  display: block;\n  clear: both;\n}\n.show_file_box .show_file_operation {\n  border-radius: 4px;\n  position: relative;\n  line-height: 104px;\n  float: left;\n  margin-right: 10px;\n  margin-bottom: 10px;\n}\n.show_file_box .show_file_operation .show_file_bg {\n  width: 104px;\n  height: 104px;\n  border: 1px solid #c0ccda;\n}\n.show_file_box .show_file_operation .el-show-list__item-actions {\n  position: absolute;\n  width: 104px;\n  height: 104px;\n  left: 0;\n  top: 0;\n  cursor: default;\n  text-align: center;\n  color: #fff;\n  opacity: 0;\n  font-size: 20px;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: opacity 0.3s;\n}\n.show_file_box .show_file_operation .el-show-list__item-actions span {\n  cursor: pointer;\n  font-size: inherit;\n  color: inherit;\n}\n.show_file_box .show_file_operation .el-show-list__item-actions .el-show-list__item-delete {\n  position: static;\n  top: 0;\n  margin-left: 20px;\n}\n.show_file_box .show_file_operation:hover .el-show-list__item-actions {\n  opacity: 1;\n}\n.show_file_box .show_file_operation .show_file_title {\n  font-size: 12px;\n  color: #999;\n  line-height: 12px;\n  text-align: center;\n}\n.show_file_box ul,\n.show_file_box li {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  max-width: 500px;\n  min-width: 250px;\n}\n.show_file_box li {\n  width: 100%;\n  color: #409eff;\n  font-size: 13px;\n  line-height: 22px;\n}\n.show_file_box li .imgName {\n  width: calc(100% - 140px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.show_file_box li .el-button {\n  color: #409eff;\n  padding: 0;\n  font-size: 13px;\n  line-height: 20px;\n}\n.show_file_box li .el-button i {\n  font-weight: bold;\n}\n\n/*# sourceMappingURL=index.vue.map */",map:{"version":3,"sources":["/Users/chenlei/HLcode/test/components/ShowFile/index.vue","index.vue"],"names":[],"mappings":"AAmVA;EACA,cAAA;AClVA;ADoVA;EACA,WAAA;EACA,cAAA;EACA,WAAA;AClVA;ADoVA;EAGA,kBAAA;EACA,kBAAA;EACA,kBAAA;EACA,WAAA;EACA,kBAAA;EACA,mBAAA;ACpVA;ADqVA;EACA,YAAA;EACA,aAAA;EACA,yBAAA;ACnVA;ADqVA;EACA,kBAAA;EACA,YAAA;EACA,aAAA;EACA,OAAA;EACA,MAAA;EACA,eAAA;EACA,kBAAA;EACA,WAAA;EACA,UAAA;EACA,eAAA;EACA,oCAAA;EACA,wBAAA;ACnVA;ADoVA;EACA,eAAA;EACA,kBAAA;EACA,cAAA;AClVA;ADoVA;EACA,gBAAA;EACA,MAAA;EACA,iBAAA;AClVA;ADsVA;EACA,UAAA;ACpVA;ADuVA;EACA,eAAA;EACA,WAAA;EACA,iBAAA;EACA,kBAAA;ACrVA;ADyVA;;EAEA,gBAAA;EACA,SAAA;EACA,UAAA;EAEA,WAAA;EACA,gBAAA;EACA,gBAAA;ACxVA;AD0VA;EACA,WAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;ACxVA;ADyVA;EAEA,yBAAA;EACA,gBAAA;EACA,uBAAA;EACA,mBAAA;ACxVA;AD0VA;EACA,cAAA;EACA,UAAA;EACA,eAAA;EACA,iBAAA;ACxVA;ADyVA;EACA,iBAAA;ACvVA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"show_file_box\">\n    <div style=\"height: 0; width: 0; overflow: hidden\">\n      <el-image\n        ref=\"previewImg\"\n        :src=\"dialogImageUrl\"\n        :preview-src-list=\"formFileList.map((item) => bgImg(item))\"\n      />\n    </div>\n    <div class=\"\" v-if=\"type === 'block'\">\n      <div\n        class=\"show_file_operation\"\n        v-for=\"(item, index) in fileUrl\"\n        :key=\"index\"\n      >\n        <div\n          class=\"show_file_bg\"\n          :style=\"`background: url(${bgImg(\n            item\n          )}) no-repeat 50% 50%; background-size: contain;`\"\n        />\n        <span class=\"el-show-list__item-actions\">\n          <span\n            class=\"el-show-list__item-preview\"\n            @click=\"handlePictureCardPreview(item)\"\n          >\n            <i class=\"el-icon-zoom-in\" />\n          </span>\n          <span class=\"el-show-list__item-delete\" v-show=\"isShowDownload\" @click=\"handleDownload(item)\">\n            \n            <i class=\"el-icon-download\" />\n          </span>\n        </span>\n        <p v-if=\"showTitle\" class=\"show_file_title\">{{ item.name }}</p>\n      </div>\n    </div>\n    <div v-if=\"type === 'text'\">\n      <a\n        v-for=\"(item, index) in fileUrl\"\n        :key=\"index\"\n        @click=\"handlePictureCardPreview(item)\"\n        >{{ item.name }}</a\n      >\n    </div>\n    <div v-if=\"type === 'custom'\">\n      <slot\n        name=\"content\"\n        :props=\"fileUrl\"\n        :callback=\"handlePictureCardPreviewCallback\"\n      >\n      </slot>\n    </div>\n    <div v-if=\"type === 'list'\">\n      <ul>\n        <li\n          class=\"clearfix\"\n          :class=\"index + 1 < fileUrl.length ? 'mb-15' : ''\"\n          v-for=\"(item, index) in fileUrl\"\n          :key=\"index\"\n        >\n          <span class=\"fl\">\n            <i class=\"el-icon-folder-opened\"></i>\n          </span>\n          <div\n            class=\"clearfix fl ml-10 textCss\"\n            style=\"width: calc(100% - 30px)\"\n          >\n            <div class=\"fl imgName\">\n              {{ item.name }}\n            </div>\n            <!-- <i class=\"el-icon-download\" class=\"fr ml-10\"  @click=\"handleDownload(item)\">下载</i>\n            <i class=\"el-icon-zoom-in\" class=\"fr\">预览</i> -->\n            <el-button\n              icon=\"el-icon-download\"\n              type=\"text\"\n              class=\"fr\"\n              v-show=\"isShowDownload\"\n              @click=\"handleDownload(item)\"\n              >下载</el-button\n            >\n            <el-button\n              icon=\"el-icon-zoom-in\"\n              type=\"text\"\n              class=\"fr mr-15\"\n              @click=\"handlePictureCardPreview(item)\"\n              >预览</el-button\n            >\n          </div>\n        </li>\n      </ul>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { mapGetters } from \"vuex\";\nimport axios from \"axios\";\nimport CSV from \"../UploadFile/fileImages/CSV.png\";\nimport EXCEL from \"../UploadFile/fileImages/EXCEL.png\";\nimport PDF from \"../UploadFile/fileImages/PDF.png\";\nimport PPT from \"../UploadFile/fileImages/PPT.png\";\nimport RAR from \"../UploadFile/fileImages/RAR.png\";\nimport WORD from \"../UploadFile/fileImages/WORD.png\";\nimport ZIP from \"../UploadFile/fileImages/ZIP.png\";\nimport PLIST from \"../UploadFile/fileImages/PLIST.png\";\n\nexport default {\n  props: {\n    fileUrl: {\n      // 文件数组\n      default: () => {\n        return [];\n      },\n      type: Array,\n    },\n    isShowDownload: {\n      // 是否显示\n      default: true,\n      type: Boolean,\n    },\n    showTitle: {\n      // 是否显示图片名\n      default: false,\n      type: Boolean,\n    },\n    // isText: { // 是否以文字形式展示\n    //     default: false,\n    //     type: Boolean\n    // },\n    type: {\n      // 展示类型{block: 块，text: 文字，list: 列,custom:自定义}\n      default: \"block\",\n      type: String,\n    },\n  },\n  data() {\n    return {\n      formFileList: [], // 显示上传文件\n      dialogImageUrl: \"\",\n    };\n  },\n  computed: {\n    ...mapGetters([\"userInfo\"]),\n  },\n  watch: {\n    fileUrl: {\n      deep: true,\n      immediate: true,\n      handler() {\n        this.formFileList = this.fileUrl;\n      },\n    },\n  },\n  methods: {\n    // 缩略图展示\n    bgImg(file) {\n      let type = \"\";\n      const types = {\n        IMG: \"\",\n        WORD: WORD,\n        EXCEL: EXCEL,\n        PDF: PDF,\n        CSV: CSV,\n        RAR: RAR,\n        ZIP: ZIP,\n        PPT: PPT,\n        PLIST: PLIST,\n      };\n\n      if (file.raw) {\n        type = this.fileFormat(file.name);\n      } else {\n        type = this.fileFormat(file.url);\n      }\n\n      if (type === \"IMG\") {\n        return file.url;\n      } else {\n        return types[type];\n      }\n    },\n    // 文件格式\n    fileFormat(name) {\n      const images = \"bmp|jpg|jpeg|png|gif|svg|webp|JPG|JPEG|PNG\";\n      const word = \"doc|docx|DOC|DOCX\";\n      const excel = \"xls|xlsx|XLS|XLSX\";\n      const pdf = \"pdf|PDF\";\n      const csv = \"csv|CSV\";\n      const rar = \"rar|RAR\";\n      const zip = \"zip|ZIP\";\n      const ppt = \"pptx|PPTX\";\n      const plist = \"plist|PLIST\";\n\n      const pattern_images = new RegExp(\".(\" + images + \")$\");\n      const pattern_word = new RegExp(\".(\" + word + \")$\");\n      const pattern_excel = new RegExp(\".(\" + excel + \")$\");\n      const pattern_pdf = new RegExp(\".(\" + pdf + \")$\");\n      const pattern_csv = new RegExp(\".(\" + csv + \")$\");\n      const pattern_rar = new RegExp(\".(\" + rar + \")$\");\n      const pattern_zip = new RegExp(\".(\" + zip + \")$\");\n      const pattern_ppt = new RegExp(\".(\" + ppt + \")$\");\n      const pattern_plist = new RegExp(\".(\" + plist + \")$\");\n\n      if (name.indexOf(\"?\") > -1) {\n        name = name.split(\"?\")[0];\n      }\n\n      if (pattern_images.test(name)) {\n        return \"IMG\";\n      } else if (pattern_word.test(name)) {\n        return \"WORD\";\n      } else if (pattern_excel.test(name)) {\n        return \"EXCEL\";\n      } else if (pattern_pdf.test(name)) {\n        return \"PDF\";\n      } else if (pattern_csv.test(name)) {\n        return \"CSV\";\n      } else if (pattern_rar.test(name)) {\n        return \"RAR\";\n      } else if (pattern_zip.test(name)) {\n        return \"ZIP\";\n      } else if (pattern_ppt.test(name)) {\n        return \"PPT\";\n      } else if (pattern_plist.test(name)) {\n        return \"PLIST\";\n      }\n    },\n\n    handlePictureCardPreview(file) {\n      let type, url;\n      if (file.raw) {\n        type = this.fileFormat(file.name);\n        url = file.response.data[0].attachmenturl;\n      } else {\n        type = this.fileFormat(file.url);\n        url = file.url;\n      }\n\n      if (type === \"IMG\") {\n        this.dialogImageUrl = file.url;\n        this.$refs.previewImg.showViewer = true;\n        const m = (e) => {\n          e.preventDefault();\n        };\n        document.body.style.overflow = \"hidden\";\n        document.addEventListener(\"touchmove\", m, false); // 禁止页面滑动\n\n        this.$nextTick(() => {\n          document\n            .querySelector(\".el-image-viewer__close\")\n            .addEventListener(\"click\", () => {\n              const m = (e) => {\n                e.preventDefault();\n              };\n              document.body.style.overflow = \"auto\";\n              document.removeEventListener(\"touchmove\", m, true);\n            });\n        });\n      } else if (type === \"PDF\") {\n        window.open(\n          \"https://www.hellogil.com/web/contractPreview.html?url=\" +\n            url.replace(\"http://\", \"https://\")\n        );\n      } else if (\n        type === \"WORD\" ||\n        type === \"EXCEL\" ||\n        type === \"CSV\" ||\n        type === \"PPT\"\n      ) {\n        window.open(\n          `https://file-preview.hellogil.com/onlinePreview?watermarkTxt=${this.userInfo.userName}${this.userInfo.jobCard}&url=` +\n            url.replace(\"http://\", \"https://\")\n        );\n      } else {\n        this.$message({\n          message: \"该文件不支持预览!\",\n          type: \"warning\",\n        });\n      }\n    },\n    handlePictureCardPreviewCallback(item) {\n      this.handlePictureCardPreview(item);\n    },\n    handleDownload(file) {\n      console.log(file);\n      var name;\n      if (file.name) {\n        name = file.name;\n        if (!name.indexOf(\".\") > -1) {\n          var a = file.url.split(\"/\");\n          var b = a[a.length - 1];\n          name = file.name + \".\" + b.split(\".\")[1];\n        }\n      } else {\n        var a = file.url.split(\"/\");\n        name = a[a.length - 1];\n      }\n      axios({\n        method: \"post\",\n        url:\n          process.env.VUE_APP_BASE_API +\n          \"/huilianApi/uploader/downloadZipFiles\",\n        data:\n          \"fileUrls=\" +\n          JSON.stringify([\n            {\n              imgName: name\n                .replace(/\\&/g, \"-\")\n                .replace(/\\?/g, \"-\")\n                .replace(/\\%/g, \"-\"),\n              dataImg: file.url,\n            },\n          ]),\n        responseType: \"blob\", // 加上这个是重点\n      }).then((res) => {\n        this.downloadFile(res.data, name);\n      });\n    },\n    downloadFile(data, name) {\n      const url = window.URL.createObjectURL(new Blob([data]));\n      const link = document.createElement(\"a\");\n      link.style.display = \"none\";\n      link.href = url;\n      link.setAttribute(\"download\", name);\n      document.body.appendChild(link);\n      link.click();\n      URL.revokeObjectURL(link.href);\n      document.body.removeChild(link);\n      this.$message({\n        message: \"下载成功\",\n        type: \"success\",\n      });\n    },\n  },\n};\n</script>\n\n<style lang=\"scss\">\n.show_file_box {\n  a {\n    color: #10c2b0;\n  }\n  &::after {\n    content: \"\";\n    display: block;\n    clear: both;\n  }\n  .show_file_operation {\n    // width: 104px;\n    // height: 104px;\n    border-radius: 4px;\n    position: relative;\n    line-height: 104px;\n    float: left;\n    margin-right: 10px;\n    margin-bottom: 10px;\n    .show_file_bg {\n      width: 104px;\n      height: 104px;\n      border: 1px solid #c0ccda;\n    }\n    .el-show-list__item-actions {\n      position: absolute;\n      width: 104px;\n      height: 104px;\n      left: 0;\n      top: 0;\n      cursor: default;\n      text-align: center;\n      color: #fff;\n      opacity: 0;\n      font-size: 20px;\n      background-color: rgba(0, 0, 0, 0.5);\n      transition: opacity 0.3s;\n      span {\n        cursor: pointer;\n        font-size: inherit;\n        color: inherit;\n      }\n      .el-show-list__item-delete {\n        position: static;\n        top: 0;\n        margin-left: 20px;\n      }\n    }\n    &:hover {\n      .el-show-list__item-actions {\n        opacity: 1;\n      }\n    }\n    .show_file_title {\n      font-size: 12px;\n      color: #999;\n      line-height: 12px;\n      text-align: center;\n    }\n  }\n\n  ul,\n  li {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    // width: 500px;\n    width: 100%;\n    max-width: 500px;\n    min-width: 250px;\n  }\n  li {\n    width: 100%;\n    color: #409eff;\n    font-size: 13px;\n    line-height: 22px;\n    .imgName {\n      // width: 350px;\n      width: calc(100% - 140px);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .el-button {\n      color: #409eff;\n      padding: 0;\n      font-size: 13px;\n      line-height: 20px;\n      i {\n        font-weight: bold;\n      }\n    }\n  }\n}\n</style>\n",".show_file_box a {\n  color: #10c2b0;\n}\n.show_file_box::after {\n  content: \"\";\n  display: block;\n  clear: both;\n}\n.show_file_box .show_file_operation {\n  border-radius: 4px;\n  position: relative;\n  line-height: 104px;\n  float: left;\n  margin-right: 10px;\n  margin-bottom: 10px;\n}\n.show_file_box .show_file_operation .show_file_bg {\n  width: 104px;\n  height: 104px;\n  border: 1px solid #c0ccda;\n}\n.show_file_box .show_file_operation .el-show-list__item-actions {\n  position: absolute;\n  width: 104px;\n  height: 104px;\n  left: 0;\n  top: 0;\n  cursor: default;\n  text-align: center;\n  color: #fff;\n  opacity: 0;\n  font-size: 20px;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: opacity 0.3s;\n}\n.show_file_box .show_file_operation .el-show-list__item-actions span {\n  cursor: pointer;\n  font-size: inherit;\n  color: inherit;\n}\n.show_file_box .show_file_operation .el-show-list__item-actions .el-show-list__item-delete {\n  position: static;\n  top: 0;\n  margin-left: 20px;\n}\n.show_file_box .show_file_operation:hover .el-show-list__item-actions {\n  opacity: 1;\n}\n.show_file_box .show_file_operation .show_file_title {\n  font-size: 12px;\n  color: #999;\n  line-height: 12px;\n  text-align: center;\n}\n.show_file_box ul,\n.show_file_box li {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  max-width: 500px;\n  min-width: 250px;\n}\n.show_file_box li {\n  width: 100%;\n  color: #409eff;\n  font-size: 13px;\n  line-height: 22px;\n}\n.show_file_box li .imgName {\n  width: calc(100% - 140px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.show_file_box li .el-button {\n  color: #409eff;\n  padding: 0;\n  font-size: 13px;\n  line-height: 20px;\n}\n.show_file_box li .el-button i {\n  font-weight: bold;\n}\n\n/*# sourceMappingURL=index.vue.map */"]},media:undefined});};/* scoped */const __vue_scope_id__$g=undefined;/* module identifier */const __vue_module_identifier__$g=undefined;/* functional template */const __vue_is_functional_template__$g=false;/* style inject SSR */ /* style inject shadow dom */const __vue_component__$g=/*#__PURE__*/normalizeComponent({render:__vue_render__$g,staticRenderFns:__vue_staticRenderFns__$g},__vue_inject_styles__$g,__vue_script__$g,__vue_scope_id__$g,__vue_is_functional_template__$g,__vue_module_identifier__$g,false,createInjector,undefined,undefined);__vue_component__$g.install=function(Vue){Vue.component(__vue_component__$g.name,__vue_component__$g);};var ElTableDraggable_umd={exports:{}};(function(module,exports){(function webpackUniversalModuleDefinition(root,factory){module.exports=factory();})(typeof self!=='undefined'?self:commonjsGlobal,function(){return(/******/function(modules){// webpackBootstrap
 /******/ // The module cache
 /******/var installedModules={};/******/ /******/ // The require function
 /******/function __webpack_require__(moduleId){/******/ /******/ // Check if module is in cache
@@ -2653,4 +2654,4 @@ for(let key in this.formData){if(this.formData[key]!==""){formData.append(key,th
 //   fileType: failFileType,
 // };
 const searchParams=new URLSearchParams();searchParams.append("fileCode",fileCode);searchParams.append("fileType",failFileType);for(let key in this.errorParams){if(this.errorParams[key]||this.errorParams[key]==0){searchParams.append(key,this.errorParams[key]);}}// 加密
-let headers={"Content-Type":"application/x-www-form-urlencoded"};const urlApi="/gateway/huilianApi/errorcs/exportErrorFile";if(window.HLEncryption){headers=window.HLEncryption.setRequestHeaders({url:urlApi,headers:headers});}const response=await fetch(urlApi,{method:"post",headers:headers,body:searchParams.toString()});if(!response.ok){throw new Error(`下载请求失败: ${response.statusText}`);}const blob=await response.blob();const name=response.headers.get("content-disposition").split("filename=")[1];const url=window.URL.createObjectURL(blob);const a=document.createElement("a");a.href=url;a.download=decodeURIComponent(name);document.body.appendChild(a);a.click();document.body.removeChild(a);window.URL.revokeObjectURL(url);}else{this.$message({message:"无文件可下载",type:"warning"});}}}};/* script */const __vue_script__=script;/* template */var __vue_render__=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",{staticClass:"StandardImportComponents"},[_c("el-button",{attrs:{type:_vm.btnType},on:{click:_vm.openDialog}},[_vm._v(_vm._s(_vm.btnText))]),_vm._v(" "),_c("el-dialog",{attrs:{title:_vm.dialogTitle,visible:_vm.dialogVisible,width:"600px","close-on-click-modal":false,"close-on-press-escape":false,"before-close":_vm.handleClose},on:{"update:visible":function($event){_vm.dialogVisible=$event;}}},[_c("div",[_vm._t("content-header")],2),_vm._v(" "),_c("div",{staticStyle:{position:"relative"}},[_c("el-upload",{ref:"importFile",attrs:{action:_vm.importApi,"file-list":_vm.fileList,accept:"."+_vm.fileType,"before-upload":_vm.beforeUploadForm,data:_vm.formData,limit:1,"on-change":_vm.handleChange,"on-remove":_vm.handleRemove,"on-success":_vm.handleSuccess,"on-error":_vm.handleError,"auto-upload":false,"http-request":_vm.customHttpRequest}},[_c("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[_vm._v("选取文件")]),_vm._v(" "),_c("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[_vm._v("\n          "+_vm._s(_vm.fileTypeComputer)+"\n        ")])],1),_vm._v(" "),_c("div",{staticStyle:{position:"absolute",top:"0",left:"100px"}},[_c("el-button",{attrs:{type:"text"},on:{click:_vm.getTemp}},[_vm._v(" 模板下载 ")])],1),_vm._v(" "),_c("div",{directives:[{name:"show",rawName:"v-show",value:_vm.detailData.successCount||_vm.detailData.failCount,expression:"detailData.successCount || detailData.failCount"}],staticClass:"mt-10",staticStyle:{"font-size":"12px","font-weight":"400",color:"#999999"}},[_vm._v("\n        导入结果（仅展示最后一次上传结果）：\n        "),_c("span",{staticStyle:{color:"#333333"}},[_vm._v("\n          成功"+_vm._s(_vm.detailData.successCount||0)+"条，失败"+_vm._s(_vm.detailData.failCount||0)+"条\n        ")]),_vm._v("\n         \n        "),_c("a",{directives:[{name:"show",rawName:"v-show",value:_vm.failFileType&&_vm.detailData.failCount,expression:"failFileType && detailData.failCount"}],staticStyle:{color:"#599ebf"},attrs:{href:"javascript:void(0)"},on:{click:function($event){return _vm.downloadFile(_vm.fileCode,_vm.failFileType);}}},[_vm._v("\n          下载失败信息\n        ")])])],1),_vm._v(" "),_c("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[_c("el-button",{on:{click:_vm.handleClose}},[_vm._v(" 取 消 ")]),_vm._v(" "),_c("el-button",{attrs:{type:"primary",loading:_vm.isSubmitLoading},on:{click:_vm.query}},[_vm._v("\n        确 定\n      ")])],1)])],1);};var __vue_staticRenderFns__=[];__vue_render__._withStripped=true;/* style */const __vue_inject_styles__=undefined;/* scoped */const __vue_scope_id__=undefined;/* module identifier */const __vue_module_identifier__=undefined;/* functional template */const __vue_is_functional_template__=false;/* style inject */ /* style inject SSR */ /* style inject shadow dom */const __vue_component__=/*#__PURE__*/normalizeComponent({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},__vue_inject_styles__,__vue_script__,__vue_scope_id__,__vue_is_functional_template__,__vue_module_identifier__,false,undefined,undefined,undefined);__vue_component__.install=function(Vue){Vue.component(__vue_component__.name,__vue_component__);};var version="3.3.4";const components=[__vue_component__$j,__vue_component__$i,__vue_component__$h,__vue_component__$g,__vue_component__$3,__vue_component__$2,__vue_component__$1,__vue_component__];const install=function(Vue){components.forEach(component=>{Vue.component(component.name,component);});};if(typeof window!=="undefined"&&window.Vue){install(window.Vue);}var index={version,install};export{__vue_component__$1 as ExportList,__vue_component__$3 as FormTableScheme,__vue_component__$i as HelloVue,__vue_component__$2 as HtmlToImg,__vue_component__$j as MyButton,__vue_component__$g as ShowFile,__vue_component__ as StandardImport,__vue_component__$h as UploadFile,index as default,install};
+let headers={"Content-Type":"application/x-www-form-urlencoded"};const urlApi="/gateway/huilianApi/errorcs/exportErrorFile";if(window.HLEncryption){headers=window.HLEncryption.setRequestHeaders({url:urlApi,headers:headers});}const response=await fetch(urlApi,{method:"post",headers:headers,body:searchParams.toString()});if(!response.ok){throw new Error(`下载请求失败: ${response.statusText}`);}const blob=await response.blob();const name=response.headers.get("content-disposition").split("filename=")[1];const url=window.URL.createObjectURL(blob);const a=document.createElement("a");a.href=url;a.download=decodeURIComponent(name);document.body.appendChild(a);a.click();document.body.removeChild(a);window.URL.revokeObjectURL(url);}else{this.$message({message:"无文件可下载",type:"warning"});}}}};/* script */const __vue_script__=script;/* template */var __vue_render__=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",{staticClass:"StandardImportComponents"},[_c("el-button",{attrs:{type:_vm.btnType},on:{click:_vm.openDialog}},[_vm._v(_vm._s(_vm.btnText))]),_vm._v(" "),_c("el-dialog",{attrs:{title:_vm.dialogTitle,visible:_vm.dialogVisible,width:"600px","close-on-click-modal":false,"close-on-press-escape":false,"before-close":_vm.handleClose},on:{"update:visible":function($event){_vm.dialogVisible=$event;}}},[_c("div",[_vm._t("content-header")],2),_vm._v(" "),_c("div",{staticStyle:{position:"relative"}},[_c("el-upload",{ref:"importFile",attrs:{action:_vm.importApi,"file-list":_vm.fileList,accept:"."+_vm.fileType,"before-upload":_vm.beforeUploadForm,data:_vm.formData,limit:1,"on-change":_vm.handleChange,"on-remove":_vm.handleRemove,"on-success":_vm.handleSuccess,"on-error":_vm.handleError,"auto-upload":false,"http-request":_vm.customHttpRequest}},[_c("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[_vm._v("选取文件")]),_vm._v(" "),_c("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[_vm._v("\n          "+_vm._s(_vm.fileTypeComputer)+"\n        ")])],1),_vm._v(" "),_c("div",{staticStyle:{position:"absolute",top:"0",left:"100px"}},[_c("el-button",{attrs:{type:"text"},on:{click:_vm.getTemp}},[_vm._v(" 模板下载 ")])],1),_vm._v(" "),_c("div",{directives:[{name:"show",rawName:"v-show",value:_vm.detailData.successCount||_vm.detailData.failCount,expression:"detailData.successCount || detailData.failCount"}],staticClass:"mt-10",staticStyle:{"font-size":"12px","font-weight":"400",color:"#999999"}},[_vm._v("\n        导入结果（仅展示最后一次上传结果）：\n        "),_c("span",{staticStyle:{color:"#333333"}},[_vm._v("\n          成功"+_vm._s(_vm.detailData.successCount||0)+"条，失败"+_vm._s(_vm.detailData.failCount||0)+"条\n        ")]),_vm._v("\n         \n        "),_c("a",{directives:[{name:"show",rawName:"v-show",value:_vm.failFileType&&_vm.detailData.failCount,expression:"failFileType && detailData.failCount"}],staticStyle:{color:"#599ebf"},attrs:{href:"javascript:void(0)"},on:{click:function($event){return _vm.downloadFile(_vm.fileCode,_vm.failFileType);}}},[_vm._v("\n          下载失败信息\n        ")])])],1),_vm._v(" "),_c("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[_c("el-button",{on:{click:_vm.handleClose}},[_vm._v(" 取 消 ")]),_vm._v(" "),_c("el-button",{attrs:{type:"primary",loading:_vm.isSubmitLoading},on:{click:_vm.query}},[_vm._v("\n        确 定\n      ")])],1)])],1);};var __vue_staticRenderFns__=[];__vue_render__._withStripped=true;/* style */const __vue_inject_styles__=undefined;/* scoped */const __vue_scope_id__=undefined;/* module identifier */const __vue_module_identifier__=undefined;/* functional template */const __vue_is_functional_template__=false;/* style inject */ /* style inject SSR */ /* style inject shadow dom */const __vue_component__=/*#__PURE__*/normalizeComponent({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},__vue_inject_styles__,__vue_script__,__vue_scope_id__,__vue_is_functional_template__,__vue_module_identifier__,false,undefined,undefined,undefined);__vue_component__.install=function(Vue){Vue.component(__vue_component__.name,__vue_component__);};var version="3.3.5";const components=[__vue_component__$j,__vue_component__$i,__vue_component__$h,__vue_component__$g,__vue_component__$3,__vue_component__$2,__vue_component__$1,__vue_component__];const install=function(Vue){components.forEach(component=>{Vue.component(component.name,component);});};if(typeof window!=="undefined"&&window.Vue){install(window.Vue);}var index={version,install};export{__vue_component__$1 as ExportList,__vue_component__$3 as FormTableScheme,__vue_component__$i as HelloVue,__vue_component__$2 as HtmlToImg,__vue_component__$j as MyButton,__vue_component__$g as ShowFile,__vue_component__ as StandardImport,__vue_component__$h as UploadFile,index as default,install};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huilian/components-tms",
-  "version": "3.3.4",
+  "version": "3.3.5",
   "scripts": {
     "dev": "npx rollup -wc rollup.config.dev.js",
     "build": "npx rollup -c rollup.config.js && npm run build:types",