@huilian/components-tms 3.7.11 → 3.7.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/bundle.esm.js +8 -7
- package/package.json +1 -1
package/lib/bundle.esm.js
CHANGED
|
@@ -590,7 +590,7 @@ const urlWithoutParams=url.split("?")[0].toLowerCase();if(!urlWithoutParams.ends
|
|
|
590
590
|
// `https://www.hellogil.com/web/#/officePreview?url=` +
|
|
591
591
|
// encodeURIComponent(url.replace("http://", "https://"))
|
|
592
592
|
// );
|
|
593
|
-
getFileUrl(url.replace("http://","https://")).then(res=>{if(res.result==="success"){window.open(res.data);}else{this.$message({message:"该文件不支持预览!",type:"warning"});}});}else{this.$message({message:"该文件不支持预览!",type:"warning"});}}else{this.$message({message:"该文件不支持预览!",type:"warning"});}},handleDownload(file){console.log(file);var name;let url=file.response?file.response.data[0].attachmenturl:file.url;if(file.name){name=file.name;if(!name.indexOf(".")>-1){var a=url.split("/");var b=a[a.length-1];name=file.name+"."+b.split(".")[1];}}else{var a=url.split("/");name=a[a.length-1];}axios$1({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:url}]),responseType:"blob"// 加上这个是重点
|
|
593
|
+
getFileUrl(url.replace("http://","https://")).then(res=>{if(res.result==="success"){window.open(res.data);}else{this.$message({message:"该文件不支持预览!",type:"warning"});}});}else{this.$message({message:"该文件不支持预览!",type:"warning"});}}else if(type==="MP4"){window.open(`https://www.hellogil.com/web/videoPreview.html?url=`+url.replace("http://","https://"));}else{this.$message({message:"该文件不支持预览!",type:"warning"});}},handleDownload(file){console.log(file);var name;let url=file.response?file.response.data[0].attachmenturl:file.url;if(file.name){name=file.name;if(!name.indexOf(".")>-1){var a=url.split("/");var b=a[a.length-1];name=file.name.split(".")[0]+"."+b.split(".")[1];}}else{var a=url.split("/");name=a[a.length-1];}axios$1({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:url}]),responseType:"blob"// 加上这个是重点
|
|
594
594
|
}).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"});},// 允许上传文件个数验证
|
|
595
595
|
formHandleExceed(files,formFileList){this.$message.warning(`最多上传 ${this.limit} 个文件!`);},// 上传文件
|
|
596
596
|
handleUploadForm(file,fileList){if(!file.url){file.url=URL.createObjectURL(file.raw);}},// 上传成功
|
|
@@ -598,7 +598,7 @@ handleSuccess(response,file,fileList){var num=0;for(var i=0;i<fileList.length;i+
|
|
|
598
598
|
handleError(err,file,fileList){console.log(err);// this.loading.close()
|
|
599
599
|
},dragEnd(){// this.drag = false;
|
|
600
600
|
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);// 禁止页面滑动
|
|
601
|
-
},closeImgViewer(){this.imgViewerVisible=false;const m=e=>{e.preventDefault();};document.body.style.overflow="auto";document.removeEventListener("touchmove",m,true);}}};/* script */const __vue_script__$i=script$i;/* template */var __vue_render__$i=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__$i=[];__vue_render__$i._withStripped=true;/* style */const __vue_inject_styles__$i=function(inject){if(!inject)return;inject("data-v-0d156fcb_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":"AA0rBA;EACA,kBAAA;ACzrBA;AD4rBA;EACA,YAAA;EACA,aAAA;EACA,gBAAA;AC1rBA;AD8rBA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,kBAAA;EACA,UAAA;AC5rBA;AD+rBA;EACA,WAAA;EACA,YAAA;AC7rBA;AD+rBA;EACA,WAAA;EACA,YAAA;EACA,wBAAA;AC7rBA;ADksBA;EACA,aAAA;AChsBA;;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(\n \"请选择要上传的附件,最多\"\n )}${limit}${trans(\"个\")},${trans(\n \"单个附件最大\"\n )}${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\";\nimport { getFileUrl } from \"../public\";\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 handleRemoveCallback: {\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 const fileType = this.fileFormat(file.name.toLowerCase());\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 let apiUrl = this.apiUrl;\n if (fileType === \"MP4\") {\n apiUrl = \"/gateway/huilianApi/uploader/attachment\";\n formData.delete(\"attachmenType\");\n formData.append(\"attachmenType\", \"VIDEO\");\n }\n\n if (window.HLEncryption) {\n headers = window.HLEncryption.setRequestHeaders({\n url: apiUrl,\n headers: headers,\n });\n }\n axios\n .post(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 if (this.handleRemoveCallback) {\n this.handleRemoveCallback(file, formFileList);\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 }\n // else if (type === \"PDF\") {\n // window.open(\n // \"https://www.hellogil.com/web/contractPreview.html?url=\" +\n // url.replace(\"http://\", \"https://\")\n // );\n // }\n else if (\n type === \"WORD\" ||\n type === \"EXCEL\" ||\n type === \"CSV\" ||\n type === \"PPT\" ||\n type === \"PDF\"\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 const urlWithoutParams = url.split(\"?\")[0].toLowerCase();\n if (\n !urlWithoutParams.endsWith(\".doc\") &&\n !urlWithoutParams.endsWith(\".xlx\")\n ) {\n // URL后缀不包含.doc和.xlx时执行的代码\n // window.open(\n // `https://www.hellogil.com/web/#/officePreview?url=` +\n // encodeURIComponent(url.replace(\"http://\", \"https://\"))\n // );\n getFileUrl(url.replace(\"http://\", \"https://\")).then(\n (res) => {\n if (res.result === \"success\") {\n window.open(res.data);\n } else {\n this.$message({\n message: \"该文件不支持预览!\",\n type: \"warning\",\n });\n }\n }\n );\n } else {\n this.$message({\n message: \"该文件不支持预览!\",\n type: \"warning\",\n });\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\n ? file.response.data[0].attachmenturl\n : 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 if (response.result === \"success\") {\n this.$message({\n message: \"上传成功\",\n type: \"success\",\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__$i=undefined;/* module identifier */const __vue_module_identifier__$i=undefined;/* functional template */const __vue_is_functional_template__$i=false;/* style inject SSR */ /* style inject shadow dom */const __vue_component__$i=/*#__PURE__*/normalizeComponent({render:__vue_render__$i,staticRenderFns:__vue_staticRenderFns__$i},__vue_inject_styles__$i,__vue_script__$i,__vue_scope_id__$i,__vue_is_functional_template__$i,__vue_module_identifier__$i,false,createInjector,undefined,undefined);__vue_component__$i.install=function(Vue){Vue.component(__vue_component__$i.name,__vue_component__$i);};//
|
|
601
|
+
},closeImgViewer(){this.imgViewerVisible=false;const m=e=>{e.preventDefault();};document.body.style.overflow="auto";document.removeEventListener("touchmove",m,true);}}};/* script */const __vue_script__$i=script$i;/* template */var __vue_render__$i=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__$i=[];__vue_render__$i._withStripped=true;/* style */const __vue_inject_styles__$i=function(inject){if(!inject)return;inject("data-v-14623bfe_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":"AA+rBA;EACA,kBAAA;AC9rBA;ADisBA;EACA,YAAA;EACA,aAAA;EACA,gBAAA;AC/rBA;ADmsBA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,kBAAA;EACA,UAAA;ACjsBA;ADosBA;EACA,WAAA;EACA,YAAA;AClsBA;ADosBA;EACA,WAAA;EACA,YAAA;EACA,wBAAA;AClsBA;ADusBA;EACA,aAAA;ACrsBA;;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(\n \"请选择要上传的附件,最多\"\n )}${limit}${trans(\"个\")},${trans(\n \"单个附件最大\"\n )}${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\";\nimport { getFileUrl } from \"../public\";\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 handleRemoveCallback: {\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 const fileType = this.fileFormat(file.name.toLowerCase());\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 let apiUrl = this.apiUrl;\n if (fileType === \"MP4\") {\n apiUrl = \"/gateway/huilianApi/uploader/attachment\";\n formData.delete(\"attachmenType\");\n formData.append(\"attachmenType\", \"VIDEO\");\n }\n\n if (window.HLEncryption) {\n headers = window.HLEncryption.setRequestHeaders({\n url: apiUrl,\n headers: headers,\n });\n }\n axios\n .post(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 if (this.handleRemoveCallback) {\n this.handleRemoveCallback(file, formFileList);\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 }\n // else if (type === \"PDF\") {\n // window.open(\n // \"https://www.hellogil.com/web/contractPreview.html?url=\" +\n // url.replace(\"http://\", \"https://\")\n // );\n // }\n else if (\n type === \"WORD\" ||\n type === \"EXCEL\" ||\n type === \"CSV\" ||\n type === \"PPT\" ||\n type === \"PDF\"\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 const urlWithoutParams = url.split(\"?\")[0].toLowerCase();\n if (\n !urlWithoutParams.endsWith(\".doc\") &&\n !urlWithoutParams.endsWith(\".xlx\")\n ) {\n // URL后缀不包含.doc和.xlx时执行的代码\n // window.open(\n // `https://www.hellogil.com/web/#/officePreview?url=` +\n // encodeURIComponent(url.replace(\"http://\", \"https://\"))\n // );\n getFileUrl(url.replace(\"http://\", \"https://\")).then(\n (res) => {\n if (res.result === \"success\") {\n window.open(res.data);\n } else {\n this.$message({\n message: \"该文件不支持预览!\",\n type: \"warning\",\n });\n }\n }\n );\n } else {\n this.$message({\n message: \"该文件不支持预览!\",\n type: \"warning\",\n });\n }\n } else if (type === \"MP4\") {\n window.open(\n `https://www.hellogil.com/web/videoPreview.html?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\n ? file.response.data[0].attachmenturl\n : 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.split(\".\")[0] + \".\" + 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 if (response.result === \"success\") {\n this.$message({\n message: \"上传成功\",\n type: \"success\",\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__$i=undefined;/* module identifier */const __vue_module_identifier__$i=undefined;/* functional template */const __vue_is_functional_template__$i=false;/* style inject SSR */ /* style inject shadow dom */const __vue_component__$i=/*#__PURE__*/normalizeComponent({render:__vue_render__$i,staticRenderFns:__vue_staticRenderFns__$i},__vue_inject_styles__$i,__vue_script__$i,__vue_scope_id__$i,__vue_is_functional_template__$i,__vue_module_identifier__$i,false,createInjector,undefined,undefined);__vue_component__$i.install=function(Vue){Vue.component(__vue_component__$i.name,__vue_component__$i);};//
|
|
602
602
|
var script$h={props:{fileUrl:{// 文件数组
|
|
603
603
|
default:()=>{return[];},type:Array},isShowDownload:{// 是否显示
|
|
604
604
|
default:true,type:Boolean},showTitle:{// 是否显示图片名
|
|
@@ -626,8 +626,8 @@ const urlWithoutParams=url.split("?")[0].toLowerCase();if(!urlWithoutParams.ends
|
|
|
626
626
|
// `https://www.hellogil.com/web/#/officePreview?url=` +
|
|
627
627
|
// encodeURIComponent(url.replace("http://", "https://"))
|
|
628
628
|
// );
|
|
629
|
-
getFileUrl(url.replace("http://","https://")).then(res=>{if(res.result==="success"){window.open(res.data);}else{this.$message({message:"该文件不支持预览!",type:"warning"});}});}else{this.$message({message:"该文件不支持预览!",type:"warning"});}}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$1({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"// 加上这个是重点
|
|
630
|
-
}).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__$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:"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__$h=[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__$h._withStripped=true;/* style */const __vue_inject_styles__$h=function(inject){if(!inject)return;inject("data-v-72ef282a_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":"AAoXA;EACA,cAAA;ACnXA;ADqXA;EACA,WAAA;EACA,cAAA;EACA,WAAA;ACnXA;ADqXA;EAGA,kBAAA;EACA,kBAAA;EACA,kBAAA;EACA,WAAA;EACA,kBAAA;EACA,mBAAA;ACrXA;ADsXA;EACA,YAAA;EACA,aAAA;EACA,yBAAA;ACpXA;ADsXA;EACA,kBAAA;EACA,YAAA;EACA,aAAA;EACA,OAAA;EACA,MAAA;EACA,eAAA;EACA,kBAAA;EACA,WAAA;EACA,UAAA;EACA,eAAA;EACA,oCAAA;EACA,wBAAA;ACpXA;ADqXA;EACA,eAAA;EACA,kBAAA;EACA,cAAA;ACnXA;ADqXA;EACA,gBAAA;EACA,MAAA;EACA,iBAAA;ACnXA;ADuXA;EACA,UAAA;ACrXA;ADwXA;EACA,eAAA;EACA,WAAA;EACA,iBAAA;EACA,kBAAA;ACtXA;AD0XA;;EAEA,gBAAA;EACA,SAAA;EACA,UAAA;EAEA,WAAA;EACA,gBAAA;EACA,gBAAA;ACzXA;AD2XA;EACA,WAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;ACzXA;AD0XA;EAEA,yBAAA;EACA,gBAAA;EACA,uBAAA;EACA,mBAAA;ACzXA;AD2XA;EACA,cAAA;EACA,UAAA;EACA,eAAA;EACA,iBAAA;ACzXA;AD0XA;EACA,iBAAA;ACxXA;;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\n class=\"el-show-list__item-delete\"\n v-show=\"isShowDownload\"\n @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\";\nimport { getFileUrl } from \"../public\";\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 }\n // else if (type === \"PDF\") {\n // window.open(\n // \"https://www.hellogil.com/web/contractPreview.html?url=\" +\n // url.replace(\"http://\", \"https://\")\n // );\n // }\n else if (\n type === \"WORD\" ||\n type === \"EXCEL\" ||\n type === \"CSV\" ||\n type === \"PPT\" ||\n type === \"PDF\"\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 const urlWithoutParams = url.split(\"?\")[0].toLowerCase();\n if (\n !urlWithoutParams.endsWith(\".doc\") &&\n !urlWithoutParams.endsWith(\".xlx\")\n ) {\n // URL后缀不包含.doc和.xlx时执行的代码\n // window.open(\n // `https://www.hellogil.com/web/#/officePreview?url=` +\n // encodeURIComponent(url.replace(\"http://\", \"https://\"))\n // );\n getFileUrl(url.replace(\"http://\", \"https://\")).then((res) => {\n if (res.result === \"success\") {\n window.open(res.data);\n } else {\n this.$message({\n message: \"该文件不支持预览!\",\n type: \"warning\",\n });\n }\n });\n } else {\n this.$message({\n message: \"该文件不支持预览!\",\n type: \"warning\",\n });\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__$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 ElTableDraggable_umd={exports:{}};(function(module,exports){(function webpackUniversalModuleDefinition(root,factory){module.exports=factory();})(typeof self!=='undefined'?self:commonjsGlobal,function(){return(/******/function(modules){// webpackBootstrap
|
|
629
|
+
getFileUrl(url.replace("http://","https://")).then(res=>{if(res.result==="success"){window.open(res.data);}else{this.$message({message:"该文件不支持预览!",type:"warning"});}});}else{this.$message({message:"该文件不支持预览!",type:"warning"});}}else if(type==="MP4"){window.open(`https://www.hellogil.com/web/videoPreview.html?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.split(".")[0]+"."+b.split(".")[1];}}else{var a=file.url.split("/");name=a[a.length-1];}axios$1({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"// 加上这个是重点
|
|
630
|
+
}).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__$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:"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__$h=[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__$h._withStripped=true;/* style */const __vue_inject_styles__$h=function(inject){if(!inject)return;inject("data-v-10c69104_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":"AA2XA;EACA,cAAA;AC1XA;AD4XA;EACA,WAAA;EACA,cAAA;EACA,WAAA;AC1XA;AD4XA;EAGA,kBAAA;EACA,kBAAA;EACA,kBAAA;EACA,WAAA;EACA,kBAAA;EACA,mBAAA;AC5XA;AD6XA;EACA,YAAA;EACA,aAAA;EACA,yBAAA;AC3XA;AD6XA;EACA,kBAAA;EACA,YAAA;EACA,aAAA;EACA,OAAA;EACA,MAAA;EACA,eAAA;EACA,kBAAA;EACA,WAAA;EACA,UAAA;EACA,eAAA;EACA,oCAAA;EACA,wBAAA;AC3XA;AD4XA;EACA,eAAA;EACA,kBAAA;EACA,cAAA;AC1XA;AD4XA;EACA,gBAAA;EACA,MAAA;EACA,iBAAA;AC1XA;AD8XA;EACA,UAAA;AC5XA;AD+XA;EACA,eAAA;EACA,WAAA;EACA,iBAAA;EACA,kBAAA;AC7XA;ADiYA;;EAEA,gBAAA;EACA,SAAA;EACA,UAAA;EAEA,WAAA;EACA,gBAAA;EACA,gBAAA;AChYA;ADkYA;EACA,WAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;AChYA;ADiYA;EAEA,yBAAA;EACA,gBAAA;EACA,uBAAA;EACA,mBAAA;AChYA;ADkYA;EACA,cAAA;EACA,UAAA;EACA,eAAA;EACA,iBAAA;AChYA;ADiYA;EACA,iBAAA;AC/XA;;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\n class=\"el-show-list__item-delete\"\n v-show=\"isShowDownload\"\n @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\";\nimport { getFileUrl } from \"../public\";\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 }\n // else if (type === \"PDF\") {\n // window.open(\n // \"https://www.hellogil.com/web/contractPreview.html?url=\" +\n // url.replace(\"http://\", \"https://\")\n // );\n // }\n else if (\n type === \"WORD\" ||\n type === \"EXCEL\" ||\n type === \"CSV\" ||\n type === \"PPT\" ||\n type === \"PDF\"\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 const urlWithoutParams = url.split(\"?\")[0].toLowerCase();\n if (\n !urlWithoutParams.endsWith(\".doc\") &&\n !urlWithoutParams.endsWith(\".xlx\")\n ) {\n // URL后缀不包含.doc和.xlx时执行的代码\n // window.open(\n // `https://www.hellogil.com/web/#/officePreview?url=` +\n // encodeURIComponent(url.replace(\"http://\", \"https://\"))\n // );\n getFileUrl(url.replace(\"http://\", \"https://\")).then(\n (res) => {\n if (res.result === \"success\") {\n window.open(res.data);\n } else {\n this.$message({\n message: \"该文件不支持预览!\",\n type: \"warning\",\n });\n }\n }\n );\n } else {\n this.$message({\n message: \"该文件不支持预览!\",\n type: \"warning\",\n });\n }\n } else if (type === \"MP4\") {\n window.open(\n `https://www.hellogil.com/web/videoPreview.html?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.split(\".\")[0] + \".\" + 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__$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 ElTableDraggable_umd={exports:{}};(function(module,exports){(function webpackUniversalModuleDefinition(root,factory){module.exports=factory();})(typeof self!=='undefined'?self:commonjsGlobal,function(){return(/******/function(modules){// webpackBootstrap
|
|
631
631
|
/******/ // The module cache
|
|
632
632
|
/******/var installedModules={};/******/ /******/ // The require function
|
|
633
633
|
/******/function __webpack_require__(moduleId){/******/ /******/ // Check if module is in cache
|
|
@@ -2170,7 +2170,8 @@ var script$c={props:{column:Object,setFormParams:Function,getConfig:Function,con
|
|
|
2170
2170
|
var script$b={props:{column:Object,setFormParams:Function,config:Object,ops:Object,// 请求参数,
|
|
2171
2171
|
getConfig:Function},components:{Dp:__vue_component__$f},watch:{ops:function(newVal){const ops=newVal;const{key}=this.getConfig(this.column);// 处理 key 只有一个值的情况
|
|
2172
2172
|
if(key.length===1){const v=ops[key[0]];this.value=v?v:[];this.isHaveValue=!!v;return;}const v1=ops[key[0]],v2=ops[key[1]],v3=ops[key[2]];if(v1&&v2){this.value=[moment(v1),moment(v2)];if(key[2]){if(v3==key[3]){this.isHaveValue=true;}else{this.isHaveValue=false;}}else{this.isHaveValue=true;}}else{this.value=[];this.isHaveValue=false;}}},data(){return{trans,visible:false,pickerType:'datetimerange',pickerOptions:{shortcuts:[{text:trans('最近一周'),onClick(picker){const end=new Date();const start=new Date();start.setTime(start.getTime()-3600*1000*24*7);picker.$emit('pick',[start,end]);}},{text:trans('最近一个月'),onClick(picker){const end=new Date();const start=new Date();start.setTime(start.getTime()-3600*1000*24*30);picker.$emit('pick',[start,end]);}},{text:trans('最近三个月'),onClick(picker){const end=new Date();const start=new Date();start.setTime(start.getTime()-3600*1000*24*90);picker.$emit('pick',[start,end]);}}]},value:[],isHaveValue:false};},methods:{updateVisible(){this.visible=!this.visible;},submit(){const{key,rule}=this.getConfig(this.column);// 当 key 只有一个值时,直接使用 searchkey 赋值,不使用 format
|
|
2173
|
-
if(key.length===1){
|
|
2173
|
+
if(key.length===1){// 如果是数组,用逗号拼接并格式化
|
|
2174
|
+
if(Array.isArray(this.value)&&this.value.length>0){const{format}=rule;const formattedValues=this.value.map(v=>moment(v).format(format));this.setFormParams({[key[0]]:formattedValues.join(',')});}else{this.setFormParams({[key[0]]:moment(this.value).format(format)});}this.visible=false;return;}const{format,isAuto0059=false}=rule;let f1=format,f2=format;if(isAuto0059){f1='YYYY-MM-DD 00:00:00';f2='YYYY-MM-DD 23:59:59';}if(this.value.length>1){const v1=moment(this.value[0]).format(f1);const v2=moment(this.value[1]).format(f2);console.log(key);if(key[2]&&key[3]){const v3=key[3];this.setFormParams({[key[0]]:v1,[key[1]]:v2,[key[2]]:v3});}else{this.setFormParams({[key[0]]:v1,[key[1]]:v2});}}this.visible=false;},reset(){this.value=[];}},mounted(){/**
|
|
2174
2175
|
* 初始化选择器类型,默认 'datetimerange',可通过 rule.type 覆盖
|
|
2175
2176
|
*/const{rule}=this.getConfig(this.column);this.pickerType=rule&&rule.type?rule.type:'datetimerange';}};/* script */const __vue_script__$b=script$b;/* template */var __vue_render__$b=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",[_c("el-popover",{attrs:{placement:"bottom",width:"425",trigger:"manual","popper-class":"pointRecord"},model:{value:_vm.visible,callback:function($$v){_vm.visible=$$v;},expression:"visible"}},[_c("div",{attrs:{"data-name":_vm.column.columnPropertyName}},[_c("el-date-picker",{staticStyle:{"margin-bottom":"10px",width:"100%"},attrs:{type:_vm.pickerType,align:"right","unlink-panels":"","range-separator":_vm.trans("至"),"start-placeholder":_vm.trans("开始日期"),"end-placeholder":_vm.trans("结束日期"),"picker-options":_vm.pickerOptions},model:{value:_vm.value,callback:function($$v){_vm.value=$$v;},expression:"value"}}),_vm._v(" "),_c("el-button",{attrs:{size:"mini"},on:{click:_vm.reset}},[_vm._v(_vm._s(_vm.trans("重置")))]),_vm._v(" "),_c("el-button",{attrs:{type:"primary",size:"mini"},on:{click:_vm.submit}},[_vm._v(_vm._s(_vm.trans("确定")))])],1),_vm._v(" "),_c("dp",{attrs:{slot:"reference",value:_vm.isHaveValue,visible:_vm.visible},on:{"update-visible":_vm.updateVisible},slot:"reference"})],1)],1);};var __vue_staticRenderFns__$b=[];__vue_render__$b._withStripped=true;/* style */const __vue_inject_styles__$b=undefined;/* scoped */const __vue_scope_id__$b=undefined;/* module identifier */const __vue_module_identifier__$b=undefined;/* functional template */const __vue_is_functional_template__$b=false;/* style inject */ /* style inject SSR */ /* style inject shadow dom */const __vue_component__$b=/*#__PURE__*/normalizeComponent({render:__vue_render__$b,staticRenderFns:__vue_staticRenderFns__$b},__vue_inject_styles__$b,__vue_script__$b,__vue_scope_id__$b,__vue_is_functional_template__$b,__vue_module_identifier__$b,false,undefined,undefined,undefined);//
|
|
2176
2177
|
var script$a={props:{setFormParams:Function,column:Object,ops:Object,// 请求参数
|
|
@@ -2266,7 +2267,7 @@ option=ruleCorrespond(option);}return{option,key,columnProperty,columnPropertyNa
|
|
|
2266
2267
|
* 若当前选项列表不可用,回退使用 sessionStorage 缓存(按 columnCode/searchKey 存储)
|
|
2267
2268
|
*/valueToStr:(val,{option=[],key,columnCode})=>{const mapLabel=v=>{// 优先使用当前 option 列表
|
|
2268
2269
|
let find=option.find(r=>r.value===v||r.schemeValue===v);if(find){return find.label!==undefined?find.label:find.schemeLabel;}const label=cache.getLabel(key,columnCode,v);if(label!==undefined){return label;}// 最后保底返回原值
|
|
2269
|
-
return v;};if(Array.isArray(val)){return val.map(v=>mapLabel(v));}return mapLabel(val);},formToValue:val=>{return val.split(',');}},'cascader':{valueToStr:(val,{option,rule})=>{let{componentOriginProps}=rule;let{label,value}=componentOriginProps;let str=findNamesByCodes(val,option,label,value).join(',');return str;},formToValue:val=>{return val.split(',');}},'date':{valueToStr:(val,{rule})=>{const{format}=rule;return`${moment(val).format(format)}`;},formToValue:val=>{return moment(val);}},'dateRange':{valueToStr:(val,{rule})=>{const{format,isAuto0059=false}=rule;let f1=format,f2=format;if(isAuto0059){f1='YYYY-MM-DD 00:00:00';f2='YYYY-MM-DD 23:59:59';}let v1=val[0]?moment(val[0]).format(f1):'';let v2=val[1]?moment(val[1]).format(f2):'';const str=`${v1}${trans('至')}${v2}`;return str;},formToValue:(val,keys)=>{return[val[keys[0]],val[keys[1]]];}},'inputScope':{valueToStr:val=>{const v1=val[0];const v2=val[1];const str=`${v1}${trans('至')}${v2}`;return str;},formToValue:(val,keys)=>{return[val[keys[0]],val[keys[1]]];}}};const formToValue=(formValues,columnsShow,callbackFn,ruleFn)=>{const tagNeedCols={};for(let key in formValues){// 过滤不相关key
|
|
2270
|
+
return v;};if(Array.isArray(val)){return val.map(v=>mapLabel(v));}return mapLabel(val);},formToValue:val=>{return val.split(',');}},'cascader':{valueToStr:(val,{option,rule})=>{let{componentOriginProps}=rule;let{label,value}=componentOriginProps;let str=findNamesByCodes(val,option,label,value).join(',');return str;},formToValue:val=>{return val.split(',');}},'date':{valueToStr:(val,{rule})=>{const{format}=rule;return`${moment(val).format(format)}`;},formToValue:val=>{return moment(val);}},'dateRange':{valueToStr:(val,{rule,key})=>{const{format,isAuto0059=false}=rule;let f1=format,f2=format;if(isAuto0059){f1='YYYY-MM-DD 00:00:00';f2='YYYY-MM-DD 23:59:59';}if(key.length===1){return`${val}`;}let v1=val[0]?moment(val[0]).format(f1):'';let v2=val[1]?moment(val[1]).format(f2):'';const str=`${v1}${trans('至')}${v2}`;return str;},formToValue:(val,keys)=>{return[val[keys[0]],val[keys[1]]];}},'inputScope':{valueToStr:val=>{const v1=val[0];const v2=val[1];const str=`${v1}${trans('至')}${v2}`;return str;},formToValue:(val,keys)=>{return[val[keys[0]],val[keys[1]]];}}};const formToValue=(formValues,columnsShow,callbackFn,ruleFn)=>{const tagNeedCols={};for(let key in formValues){// 过滤不相关key
|
|
2270
2271
|
const filterKey=['pageSize','skipCount','keywords'];if(!filterKey.includes(key)){// 找到在columns里对照searchKey的rule,方便form转换value
|
|
2271
2272
|
let searchKey='';const haveSearchCol=columnsShow.filter(i=>i.queryConfig);const findRes=haveSearchCol.find(i=>{let ruleType='';const{columnProperty,queryConfig:{type,rule}}=i;searchKey=columnProperty;ruleType=Object.prototype.toString.call(rule);if(ruleType!=='[object Array]'){searchKey=rule.searchKey||columnProperty;}if(type==='date'||type==='inputScope'){return searchKey.includes(key);}// dateRange 数据比较特殊 searchKey = [xxStart,xxEnd]
|
|
2272
2273
|
let searchKeyType=Object.prototype.toString.call(searchKey)=='[object Array]';if(type==='dateRange'&&searchKey.length>2&&searchKeyType){let findIndex=searchKey.findIndex(i=>i.includes(formValues[key]));if(findIndex==3){return true;}}else if(type==='dateRange'){return searchKey.includes(key);}return searchKey===key;});// 找到对应请求key 进行画tag处理
|
|
@@ -2768,4 +2769,4 @@ for(let i=0;i<rows;i++){for(let j=0;j<cols;j++){watermarks.push({svg:`
|
|
|
2768
2769
|
<text transform="translate(10,200) rotate(-45)" font-weight="bold" fill="#f5f5f5" style="font-size: 16px;opacity:0.7;">${text}</text>
|
|
2769
2770
|
</svg>
|
|
2770
2771
|
`,// absolutePosition: { x: 0, y: -100 }
|
|
2771
|
-
absolutePosition:{x:j*(pageWidth/(cols-0.5)),y:i*(pageHeight/(rows-0.5))-100}});}}return watermarks;}}};/* 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("div",{attrs:{id:"DataToPdfBox"}},[_c("el-dialog",{attrs:{title:_vm.dialogParams.title,visible:_vm.visible,width:_vm.dialogParams.width,"close-on-click-modal":false,"before-close":_vm.cancel},on:{"update:visible":function($event){_vm.visible=$event;}}},[_vm._t("html"),_vm._v(" "),_c("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[_c("el-button",{attrs:{loading:_vm.isSubmitLoading},on:{click:_vm.submit}},[_vm._v(_vm._s(_vm.dialogParams.buttonText))])],1)],2)],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.7.
|
|
2772
|
+
absolutePosition:{x:j*(pageWidth/(cols-0.5)),y:i*(pageHeight/(rows-0.5))-100}});}}return watermarks;}}};/* 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("div",{attrs:{id:"DataToPdfBox"}},[_c("el-dialog",{attrs:{title:_vm.dialogParams.title,visible:_vm.visible,width:_vm.dialogParams.width,"close-on-click-modal":false,"before-close":_vm.cancel},on:{"update:visible":function($event){_vm.visible=$event;}}},[_vm._t("html"),_vm._v(" "),_c("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[_c("el-button",{attrs:{loading:_vm.isSubmitLoading},on:{click:_vm.submit}},[_vm._v(_vm._s(_vm.dialogParams.buttonText))])],1)],2)],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.7.14";const components=[__vue_component__$k,__vue_component__$j,__vue_component__$i,__vue_component__$h,__vue_component__$4,__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__ as DataToPdf,__vue_component__$2 as ExportList,__vue_component__$4 as FormTableScheme,__vue_component__$j as HelloVue,__vue_component__$3 as HtmlToImg,__vue_component__$k as MyButton,__vue_component__$h as ShowFile,__vue_component__$1 as StandardImport,__vue_component__$i as UploadFile,index as default,install};
|