@huilian/components-tms 3.4.1 → 3.4.2
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 +32 -32
- package/package.json +59 -59
- package/readme.md +135 -135
package/lib/bundle.esm.js
CHANGED
|
@@ -54,7 +54,7 @@ const existing=options.beforeCreate;options.beforeCreate=existing?[].concat(exis
|
|
|
54
54
|
var script$i={name:'HelloVue',props:{msg:String}};const isOldIE=typeof navigator!=='undefined'&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function createInjector(context){return(id,style)=>addStyle(id,style);}let HEAD;const styles={};function addStyle(id,css){const group=isOldIE?css.media||'default':id;const style=styles[group]||(styles[group]={ids:new Set(),styles:[]});if(!style.ids.has(id)){style.ids.add(id);let code=css.source;if(css.map){// https://developer.chrome.com/devtools/docs/javascript-debugging
|
|
55
55
|
// this makes source maps inside style tags work properly in Chrome
|
|
56
56
|
code+='\n/*# sourceURL='+css.map.sources[0]+' */';// http://stackoverflow.com/a/26603875
|
|
57
|
-
code+='\n/*# sourceMappingURL=data:application/json;base64,'+btoa(unescape(encodeURIComponent(JSON.stringify(css.map))))+' */';}if(!style.element){style.element=document.createElement('style');style.element.type='text/css';if(css.media)style.element.setAttribute('media',css.media);if(HEAD===undefined){HEAD=document.head||document.getElementsByTagName('head')[0];}HEAD.appendChild(style.element);}if('styleSheet'in style.element){style.styles.push(code);style.element.styleSheet.cssText=style.styles.filter(Boolean).join('\n');}else{const index=style.ids.size-1;const textNode=document.createTextNode(code);const nodes=style.element.childNodes;if(nodes[index])style.element.removeChild(nodes[index]);if(nodes.length)style.element.insertBefore(textNode,nodes[index]);else style.element.appendChild(textNode);}}}/* 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:"hello"},[_c("h1",[_vm._v(_vm._s(_vm.msg))]),_vm._v(" "),_vm._m(0),_vm._v(" "),_c("h3",[_vm._v("Installed CLI Plugins")]),_vm._v(" "),_vm._m(1),_vm._v(" "),_c("h3",[_vm._v("Essential Links")]),_vm._v(" "),_vm._m(2),_vm._v(" "),_c("h3",[_vm._v("Ecosystem")]),_vm._v(" "),_vm._m(3)]);};var __vue_staticRenderFns__$i=[function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("p",[_vm._v("\n For a guide and recipes on how to configure / customize this project,"),_c("br"),_vm._v("\n check out the\n "),_c("a",{attrs:{href:"https://cli.vuejs.org",target:"_blank",rel:"noopener"}},[_vm._v("vue-cli documentation")]),_vm._v(".\n ")]);},function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("ul",[_c("li",[_c("a",{attrs:{href:"https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel",target:"_blank",rel:"noopener"}},[_vm._v("babel")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript",target:"_blank",rel:"noopener"}},[_vm._v("typescript")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint",target:"_blank",rel:"noopener"}},[_vm._v("eslint")])])]);},function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("ul",[_c("li",[_c("a",{attrs:{href:"https://vuejs.org",target:"_blank",rel:"noopener"}},[_vm._v("Core Docs")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://forum.vuejs.org",target:"_blank",rel:"noopener"}},[_vm._v("Forum")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://chat.vuejs.org",target:"_blank",rel:"noopener"}},[_vm._v("Community Chat")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://twitter.com/vuejs",target:"_blank",rel:"noopener"}},[_vm._v("Twitter")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://news.vuejs.org",target:"_blank",rel:"noopener"}},[_vm._v("News")])])]);},function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("ul",[_c("li",[_c("a",{attrs:{href:"https://router.vuejs.org",target:"_blank",rel:"noopener"}},[_vm._v("vue-router")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://vuex.vuejs.org",target:"_blank",rel:"noopener"}},[_vm._v("vuex")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://github.com/vuejs/vue-devtools#vue-devtools",target:"_blank",rel:"noopener"}},[_vm._v("vue-devtools")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://vue-loader.vuejs.org",target:"_blank",rel:"noopener"}},[_vm._v("vue-loader")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://github.com/vuejs/awesome-vue",target:"_blank",rel:"noopener"}},[_vm._v("awesome-vue")])])]);}];__vue_render__$i._withStripped=true;/* style */const __vue_inject_styles__$i=function(inject){if(!inject)return;inject("data-v-
|
|
57
|
+
code+='\n/*# sourceMappingURL=data:application/json;base64,'+btoa(unescape(encodeURIComponent(JSON.stringify(css.map))))+' */';}if(!style.element){style.element=document.createElement('style');style.element.type='text/css';if(css.media)style.element.setAttribute('media',css.media);if(HEAD===undefined){HEAD=document.head||document.getElementsByTagName('head')[0];}HEAD.appendChild(style.element);}if('styleSheet'in style.element){style.styles.push(code);style.element.styleSheet.cssText=style.styles.filter(Boolean).join('\n');}else{const index=style.ids.size-1;const textNode=document.createTextNode(code);const nodes=style.element.childNodes;if(nodes[index])style.element.removeChild(nodes[index]);if(nodes.length)style.element.insertBefore(textNode,nodes[index]);else style.element.appendChild(textNode);}}}/* 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:"hello"},[_c("h1",[_vm._v(_vm._s(_vm.msg))]),_vm._v(" "),_vm._m(0),_vm._v(" "),_c("h3",[_vm._v("Installed CLI Plugins")]),_vm._v(" "),_vm._m(1),_vm._v(" "),_c("h3",[_vm._v("Essential Links")]),_vm._v(" "),_vm._m(2),_vm._v(" "),_c("h3",[_vm._v("Ecosystem")]),_vm._v(" "),_vm._m(3)]);};var __vue_staticRenderFns__$i=[function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("p",[_vm._v("\n For a guide and recipes on how to configure / customize this project,"),_c("br"),_vm._v("\n check out the\n "),_c("a",{attrs:{href:"https://cli.vuejs.org",target:"_blank",rel:"noopener"}},[_vm._v("vue-cli documentation")]),_vm._v(".\n ")]);},function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("ul",[_c("li",[_c("a",{attrs:{href:"https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel",target:"_blank",rel:"noopener"}},[_vm._v("babel")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript",target:"_blank",rel:"noopener"}},[_vm._v("typescript")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint",target:"_blank",rel:"noopener"}},[_vm._v("eslint")])])]);},function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("ul",[_c("li",[_c("a",{attrs:{href:"https://vuejs.org",target:"_blank",rel:"noopener"}},[_vm._v("Core Docs")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://forum.vuejs.org",target:"_blank",rel:"noopener"}},[_vm._v("Forum")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://chat.vuejs.org",target:"_blank",rel:"noopener"}},[_vm._v("Community Chat")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://twitter.com/vuejs",target:"_blank",rel:"noopener"}},[_vm._v("Twitter")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://news.vuejs.org",target:"_blank",rel:"noopener"}},[_vm._v("News")])])]);},function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("ul",[_c("li",[_c("a",{attrs:{href:"https://router.vuejs.org",target:"_blank",rel:"noopener"}},[_vm._v("vue-router")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://vuex.vuejs.org",target:"_blank",rel:"noopener"}},[_vm._v("vuex")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://github.com/vuejs/vue-devtools#vue-devtools",target:"_blank",rel:"noopener"}},[_vm._v("vue-devtools")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://vue-loader.vuejs.org",target:"_blank",rel:"noopener"}},[_vm._v("vue-loader")])]),_vm._v(" "),_c("li",[_c("a",{attrs:{href:"https://github.com/vuejs/awesome-vue",target:"_blank",rel:"noopener"}},[_vm._v("awesome-vue")])])]);}];__vue_render__$i._withStripped=true;/* style */const __vue_inject_styles__$i=function(inject){if(!inject)return;inject("data-v-1bc6b04d_0",{source:"\nh3[data-v-1bc6b04d] {\r\n margin: 40px 0 0;\n}\nul[data-v-1bc6b04d] {\r\n list-style-type: none;\r\n padding: 0;\n}\nli[data-v-1bc6b04d] {\r\n display: inline-block;\r\n margin: 0 10px;\n}\na[data-v-1bc6b04d] {\r\n color: #42b983;\n}\r\n",map:{"version":3,"sources":["D:\\项目\\npm\\components\\hellovue\\index.vue"],"names":[],"mappings":";AA4CA;EACA,gBAAA;AACA;AACA;EACA,qBAAA;EACA,UAAA;AACA;AACA;EACA,qBAAA;EACA,cAAA;AACA;AACA;EACA,cAAA;AACA","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"hello\">\r\n <h1>{{ msg }}</h1>\r\n <p>\r\n For a guide and recipes on how to configure / customize this project,<br>\r\n check out the\r\n <a href=\"https://cli.vuejs.org\" target=\"_blank\" rel=\"noopener\">vue-cli documentation</a>.\r\n </p>\r\n <h3>Installed CLI Plugins</h3>\r\n <ul>\r\n <li><a href=\"https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel\" target=\"_blank\" rel=\"noopener\">babel</a></li>\r\n <li><a href=\"https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript\" target=\"_blank\" rel=\"noopener\">typescript</a></li>\r\n <li><a href=\"https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint\" target=\"_blank\" rel=\"noopener\">eslint</a></li>\r\n </ul>\r\n <h3>Essential Links</h3>\r\n <ul>\r\n <li><a href=\"https://vuejs.org\" target=\"_blank\" rel=\"noopener\">Core Docs</a></li>\r\n <li><a href=\"https://forum.vuejs.org\" target=\"_blank\" rel=\"noopener\">Forum</a></li>\r\n <li><a href=\"https://chat.vuejs.org\" target=\"_blank\" rel=\"noopener\">Community Chat</a></li>\r\n <li><a href=\"https://twitter.com/vuejs\" target=\"_blank\" rel=\"noopener\">Twitter</a></li>\r\n <li><a href=\"https://news.vuejs.org\" target=\"_blank\" rel=\"noopener\">News</a></li>\r\n </ul>\r\n <h3>Ecosystem</h3>\r\n <ul>\r\n <li><a href=\"https://router.vuejs.org\" target=\"_blank\" rel=\"noopener\">vue-router</a></li>\r\n <li><a href=\"https://vuex.vuejs.org\" target=\"_blank\" rel=\"noopener\">vuex</a></li>\r\n <li><a href=\"https://github.com/vuejs/vue-devtools#vue-devtools\" target=\"_blank\" rel=\"noopener\">vue-devtools</a></li>\r\n <li><a href=\"https://vue-loader.vuejs.org\" target=\"_blank\" rel=\"noopener\">vue-loader</a></li>\r\n <li><a href=\"https://github.com/vuejs/awesome-vue\" target=\"_blank\" rel=\"noopener\">awesome-vue</a></li>\r\n </ul>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n name: 'HelloVue',\r\n props: {\r\n msg: String,\r\n },\r\n};\r\n</script>\r\n\r\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\r\n<style scoped>\r\nh3 {\r\n margin: 40px 0 0;\r\n}\r\nul {\r\n list-style-type: none;\r\n padding: 0;\r\n}\r\nli {\r\n display: inline-block;\r\n margin: 0 10px;\r\n}\r\na {\r\n color: #42b983;\r\n}\r\n</style>"]},media:undefined});};/* scoped */const __vue_scope_id__$i="data-v-1bc6b04d";/* 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);};var commonjsGlobal=typeof globalThis!=='undefined'?globalThis:typeof window!=='undefined'?window:typeof global!=='undefined'?global:typeof self!=='undefined'?self:{};function getDefaultExportFromCjs(x){return x&&x.__esModule&&Object.prototype.hasOwnProperty.call(x,'default')?x['default']:x;}function getAugmentedNamespace(n){if(n.__esModule)return n;var a=Object.defineProperty({},'__esModule',{value:true});Object.keys(n).forEach(function(k){var d=Object.getOwnPropertyDescriptor(n,k);Object.defineProperty(a,k,d.get?d:{enumerable:true,get:function(){return n[k];}});});return a;}var vuedraggable_umd={exports:{}};/**!
|
|
58
58
|
* Sortable 1.10.2
|
|
59
59
|
* @author RubaXa <trash@rubaxa.org>
|
|
60
60
|
* @author owenm <owen23355@gmail.com>
|
|
@@ -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__$h=script$h;/* template */var __vue_render__$h=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("div",{staticClass:"upload_file_box"},[_c("div",{staticStyle:{height:"0",overflow:"hidden"}},[_c("el-image",{ref:"previewImg",attrs:{src:_vm.dialogImageUrl,"preview-src-list":_vm.formFileList.map(function(item){return _vm.bgImg(item);})}})],1),_vm._v(" "),_c("el-upload",{class:{disUoloadSty:_vm.noneBtnImg},attrs:{headers:_vm.headers,action:_vm.apiUrl,"list-type":_vm.listType,tip:_vm.tip,limit:_vm.limit,multiple:_vm.multiple,data:_vm.formData,accept:_vm.formatFileType(),disabled:_vm.fileDisabled,"file-list":_vm.formFileList,"on-exceed":_vm.formHandleExceed,"before-upload":_vm.beforeUploadForm,"on-change":_vm.handleUploadForm,"on-remove":_vm.formHandleRemove,"on-success":_vm.handleSuccess,"on-error":_vm.handleError,"on-preview":_vm.handlePreview,"http-request":_vm.customHttpRequest},scopedSlots:_vm._u([{key:"file",fn:function(ref){var file=ref.file;return _vm.listType==="picture-card"?_c("div",{staticClass:"upload_file_operation"},[_c("div",{staticClass:"upload_file_bg",style:"background: url("+_vm.bgImg(file)+") no-repeat 50% 50%; background-size: contain;"}),_vm._v(" "),file.status!=="success"?_c("span",{staticClass:"el-upload-list__item-actions",staticStyle:{opacity:"1"}},[_c("i",{staticClass:"el-icon-loading"})]):_vm._e()]):_vm._e();}}],null,true)},[_vm.listType==="text"?_c("div",{staticStyle:{"text-align":"left"}},[_c("el-button",{attrs:{type:"primary",disabled:_vm.fileDisabled}},[_vm._v(_vm._s(_vm.trans("点击上传")))]),_vm._v(" "),_c("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[_vm._v("\n "+_vm._s(_vm.tip?_vm.tip:""+_vm.trans("请选择要上传的附件，最多")+_vm.limit+_vm.trans("个")+"，"+_vm.trans("单个附件最大")+_vm.formMaxSize+"M")+"\n ")])],1):_vm._e(),_vm._v(" "),_vm.listType==="excel"?_c("div",{staticStyle:{"text-align":"left"}},[_c("el-button",{attrs:{type:"primary"}},[_vm._v(_vm._s(_vm.trans("点击上传")))]),_vm._v(" "),_vm._t("tip")],2):_vm._e(),_vm._v(" "),_vm.listType==="picture-card"?_c("draggable",_vm._b({staticClass:"el-upload-list el-upload-list--picture-card",style:{position:"absolute",left:0,top:0},attrs:{slot:"tip",tag:"ul"},on:{end:_vm.dragEnd},slot:"tip",model:{value:_vm.formFileList,callback:function($$v){_vm.formFileList=$$v;},expression:"formFileList"}},"draggable",_vm.dragOptions,false),_vm._l(_vm.formFileList,function(file,inex){return _c("li",{key:inex,staticClass:"el-upload-list__item is-success"},[_c("div",{staticClass:"upload_file_operation"},[_c("div",{staticClass:"upload_file_bg",style:"background: url("+_vm.bgImg(file)+") 50% 50% / contain no-repeat;"}),_vm._v(" "),_c("span",{staticClass:"el-upload-list__item-actions"},[_c("span",{staticClass:"el-upload-list__item-preview",on:{click:function($event){return _vm.handlePictureCardPreview(file);}}},[_c("i",{staticClass:"el-icon-zoom-in"})]),_vm._v(" "),_c("span",{staticClass:"el-upload-list__item-delete",on:{click:function($event){return _vm.handleDownload(file);}}},[_c("i",{staticClass:"el-icon-download"})]),_vm._v(" "),!_vm.fileDisabled?_c("span",{staticClass:"el-upload-list__item-delete",on:{click:function($event){return _vm.formHandleRemove(file);}}},[_c("i",{staticClass:"el-icon-delete"})]):_vm._e()])])]);}),0):_vm._e(),_vm._v(" "),_vm.listType==="picture-card"?_c("i",{staticClass:"el-icon-plus",attrs:{slot:"default"},slot:"default"}):_vm._e()],1)],1);};var __vue_staticRenderFns__$h=[];__vue_render__$h._withStripped=true;/* style */const __vue_inject_styles__$h=function(inject){if(!inject)return;inject("data-v-0cdbb288_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":"AAqqBA;EACA,kBAAA;ACpqBA;ADuqBA;EACA,YAAA;EACA,aAAA;EACA,gBAAA;ACrqBA;ADyqBA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,kBAAA;EACA,UAAA;ACvqBA;AD0qBA;EACA,WAAA;EACA,YAAA;ACxqBA;AD0qBA;EACA,WAAA;EACA,YAAA;EACA,wBAAA;ACxqBA;AD6qBA;EACA,aAAA;AC3qBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"upload_file_box\">\n <div style=\"height: 0; overflow: hidden\">\n <el-image\n ref=\"previewImg\"\n :src=\"dialogImageUrl\"\n :preview-src-list=\"formFileList.map((item) => bgImg(item))\"\n />\n </div>\n\n <el-upload\n :class=\"{ disUoloadSty: noneBtnImg }\"\n :headers=\"headers\"\n :action=\"apiUrl\"\n :list-type=\"listType\"\n :tip=\"tip\"\n :limit=\"limit\"\n :multiple=\"multiple\"\n :data=\"formData\"\n :accept=\"formatFileType()\"\n :disabled=\"fileDisabled\"\n :file-list=\"formFileList\"\n :on-exceed=\"formHandleExceed\"\n :before-upload=\"beforeUploadForm\"\n :on-change=\"handleUploadForm\"\n :on-remove=\"formHandleRemove\"\n :on-success=\"handleSuccess\"\n :on-error=\"handleError\"\n :on-preview=\"handlePreview\"\n :http-request=\"customHttpRequest\"\n >\n <div v-if=\"listType === 'text'\" style=\"text-align: left\">\n <el-button type=\"primary\" :disabled=\"fileDisabled\">{{\n trans(\"点击上传\")\n }}</el-button>\n <div slot=\"tip\" class=\"el-upload__tip\">\n {{\n tip\n ? tip\n : `${trans(\"请选择要上传的附件，最多\")}${limit}${trans(\n \"个\"\n )}，${trans(\"单个附件最大\")}${formMaxSize}M`\n }}\n </div>\n </div>\n <div v-if=\"listType === 'excel'\" style=\"text-align: left\">\n <el-button type=\"primary\">{{ trans(\"点击上传\") }}</el-button>\n <slot name=\"tip\"></slot>\n </div>\n\n <draggable\n slot=\"tip\"\n v-if=\"listType === 'picture-card'\"\n tag=\"ul\"\n v-model=\"formFileList\"\n v-bind=\"dragOptions\"\n @end=\"dragEnd\"\n class=\"el-upload-list el-upload-list--picture-card\"\n :style=\"{ position: 'absolute', left: 0, top: 0 }\"\n >\n <li\n class=\"el-upload-list__item is-success\"\n v-for=\"(file, inex) in formFileList\"\n :key=\"inex\"\n >\n <div class=\"upload_file_operation\">\n <div\n class=\"upload_file_bg\"\n :style=\"`background: url(${bgImg(\n file\n )}) 50% 50% / contain no-repeat;`\"\n />\n <span class=\"el-upload-list__item-actions\">\n <span\n class=\"el-upload-list__item-preview\"\n @click=\"handlePictureCardPreview(file)\"\n >\n <i class=\"el-icon-zoom-in\" />\n </span>\n <span\n class=\"el-upload-list__item-delete\"\n @click=\"handleDownload(file)\"\n >\n <i class=\"el-icon-download\" />\n </span>\n <span\n v-if=\"!fileDisabled\"\n class=\"el-upload-list__item-delete\"\n @click=\"formHandleRemove(file)\"\n >\n <i class=\"el-icon-delete\" />\n </span>\n </span>\n </div>\n </li>\n </draggable>\n\n <i\n slot=\"default\"\n class=\"el-icon-plus\"\n v-if=\"listType === 'picture-card'\"\n />\n <div\n slot=\"file\"\n slot-scope=\"{ file }\"\n class=\"upload_file_operation\"\n v-if=\"listType === 'picture-card'\"\n >\n <div\n class=\"upload_file_bg\"\n :style=\"`background: url(${bgImg(\n file\n )}) no-repeat 50% 50%; background-size: contain;`\"\n />\n <span\n v-if=\"file.status !== 'success'\"\n style=\"opacity: 1\"\n class=\"el-upload-list__item-actions\"\n >\n <i class=\"el-icon-loading\"></i>\n </span>\n </div>\n </el-upload>\n </div>\n</template>\n\n<script>\n// import { attachment } from '@/config/api/publicApi'\nimport draggable from \"vuedraggable\";\nimport { mapGetters } from \"vuex\";\nimport axios from \"axios\";\nimport CSV from \"./fileImages/CSV.png\";\nimport EXCEL from \"./fileImages/EXCEL.png\";\nimport PDF from \"./fileImages/PDF.png\";\nimport PPT from \"./fileImages/PPT.png\";\nimport RAR from \"./fileImages/RAR.png\";\nimport WORD from \"./fileImages/WORD.png\";\nimport ZIP from \"./fileImages/ZIP.png\";\nimport APK from \"./fileImages/APK.png\";\nimport PLIST from \"./fileImages/PLIST.png\";\nimport MP4 from \"./fileImages/MP4.png\";\nimport trans from \"../lang/trans\";\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 fileType: {\n // 限制选择文件类型\n // default: '.pptx,.csv,.zip,.rar,image/*,application/msexcel,application/msword,application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.wordprocessingml.document, text/plain',\n default: () => {\n return [\n \".pptx\",\n \".csv\",\n \".zip\",\n \".rar\",\n \".jpg\",\n \".jpeg\",\n \".png\",\n \".doc\",\n \".docx\",\n \".pdf\",\n \".xls\",\n \".xlsx\",\n \".mp4\",\n \".pdf\",\n ];\n },\n type: Array,\n },\n fileDisabled: {\n default: false,\n type: Boolean,\n },\n apiUrl: {\n default: \"/gateway/huilianApi/uploader/attachment\",\n type: String,\n },\n listType: {\n default: \"picture-card\",\n type: String,\n },\n },\n data() {\n return {\n formFileList: [], // 显示上传文件\n dialogImageUrl: \"\",\n loading: \"\",\n noneBtnImg: false,\n drag: false,\n trans,\n headers: {},\n };\n },\n computed: {\n ...mapGetters([\"userInfo\"]),\n dragOptions() {\n return {\n animation: 100,\n group: \"description\",\n disabled: false,\n ghostClass: \"ghost\",\n };\n },\n },\n watch: {\n fileUrl: {\n deep: true,\n immediate: true,\n handler() {\n this.formFileList = this.fileUrl;\n if (this.fileDisabled) {\n this.noneBtnImg = true;\n }\n if (this.fileUrl.length >= this.limit) {\n this.noneBtnImg = true;\n } else {\n this.noneBtnImg = false;\n }\n },\n },\n },\n mounted() {\n // if (window.HLEncryption) {\n // this.headers = window.HLEncryption.setRequestHeaders({\n // url: this.apiUrl,\n // headers: {},\n // });\n // }\n },\n methods: {\n customHttpRequest({ file, onSuccess, onError }) {\n // 动态生成headers\n let headers = {\n \"Content-Type\": \"multipart/form-data\", // 通常不需要手动设置，但为了完整性还是加上\n };\n\n if (window.HLEncryption) {\n headers = window.HLEncryption.setRequestHeaders({\n url: this.apiUrl,\n headers: headers,\n });\n }\n\n const formData = new FormData();\n formData.append(\"file\", file); // 添加文件到FormData中\n // 使用axios或fetch发送请求，这里使用axios为例\n for (let key in this.formData) {\n formData.append(key, this.formData[key]);\n }\n axios\n .post(this.apiUrl, formData, { headers })\n .then((response) => {\n onSuccess(response.data, response); // 调用onSuccess回调\n })\n .catch((error) => {\n onError(error); // 调用onError回调\n });\n },\n // 处理格式\n formatFileType() {\n let arr = [];\n this.fileType.map((item) => {\n arr.push(item);\n arr.push(item.toUpperCase());\n });\n return arr.join(\",\");\n },\n // 缩略图展示\n bgImg(file) {\n let type = \"\";\n const types = {\n IMG: \"\",\n WORD: WORD,\n EXCEL: EXCEL,\n PDF: PDF,\n CSV: CSV,\n RAR: RAR,\n ZIP: ZIP,\n PPT: PPT,\n APK: APK,\n PLIST: PLIST,\n MP4: MP4,\n };\n\n if (file.raw) {\n type = this.fileFormat(file.name.toLowerCase());\n } else {\n type = this.fileFormat(file.url.toLowerCase());\n }\n\n if (type === \"IMG\") {\n return file.url;\n } else {\n return types[type];\n }\n },\n // 文件格式\n fileFormat(name) {\n const images = \"bmp|jpg|jpeg|png|gif|svg|webp|JPG|JPEG|PNG\";\n const word = \"doc|docx|DOC|DOCX\";\n const excel = \"xls|xlsx|XLS|XLSX\";\n const pdf = \"pdf|PDF\";\n const csv = \"csv|CSV\";\n const rar = \"rar|RAR\";\n const zip = \"zip|ZIP\";\n const ppt = \"pptx|PPTX\";\n const apk = \"apk|APK\";\n const plist = \"plist|PLIST\";\n const mp4 = \"mp4|MP4\";\n\n const pattern_images = new RegExp(\".(\" + images + \")$\");\n const pattern_word = new RegExp(\".(\" + word + \")$\");\n const pattern_excel = new RegExp(\".(\" + excel + \")$\");\n const pattern_pdf = new RegExp(\".(\" + pdf + \")$\");\n const pattern_csv = new RegExp(\".(\" + csv + \")$\");\n const pattern_rar = new RegExp(\".(\" + rar + \")$\");\n const pattern_zip = new RegExp(\".(\" + zip + \")$\");\n const pattern_ppt = new RegExp(\".(\" + ppt + \")$\");\n const pattern_apk = new RegExp(\".(\" + apk + \")$\");\n const pattern_plist = new RegExp(\".(\" + plist + \")$\");\n const pattern_mp4 = new RegExp(\".(\" + mp4 + \")$\");\n\n if (name.indexOf(\"?\") > -1) {\n name = name.split(\"?\")[0];\n }\n\n if (pattern_images.test(name)) {\n return \"IMG\";\n } else if (pattern_word.test(name)) {\n return \"WORD\";\n } else if (pattern_excel.test(name)) {\n return \"EXCEL\";\n } else if (pattern_pdf.test(name)) {\n return \"PDF\";\n } else if (pattern_csv.test(name)) {\n return \"CSV\";\n } else if (pattern_rar.test(name)) {\n return \"RAR\";\n } else if (pattern_zip.test(name)) {\n return \"ZIP\";\n } else if (pattern_ppt.test(name)) {\n return \"PPT\";\n } else if (pattern_apk.test(name)) {\n return \"APK\";\n } else if (pattern_plist.test(name)) {\n return \"PLIST\";\n } else if (pattern_mp4.test(name)) {\n return \"MP4\";\n }\n },\n // 开始上传前验证\n beforeUploadForm(file) {\n // 验证文件大小\n if (file.size / 1024 / 1024 > this.formMaxSize) {\n setTimeout(() => {\n this.$message({\n message: `上传文件 “${file.name}” 大小不能超过${this.formMaxSize}M!`,\n type: \"warning\",\n });\n }, 1);\n return false;\n }\n\n // 验证尺寸是否符合\n if (this.formMaxWH.width) {\n const isSize = this.validImage(file).then(\n (data) => {\n return file;\n },\n (data) => {\n this.$message.error(data.msg);\n return Promise.reject();\n }\n );\n return isSize;\n }\n\n // 中文乱码处理\n // if (file.raw) {\n // let reader = new FileReader(); // 读取文件内容\n // reader.readAsText(file.raw, \"gb2312\"); // 防止中文乱码问题，不加reader.onload方法都不会触发\n // reader.onload = function(e) {\n // this.contentHtml = e.target.result; // txt文本内容，接下来就可以对其进行校验处理了\n // };\n // }\n\n // 验证文件类型\n const nameList = file.name.split(\".\");\n const allowTypes = this.fileType.map((type) => type.toLowerCase());\n const ext = \".\" + nameList[nameList.length - 1].toLowerCase();\n if (!allowTypes.includes(ext)) {\n setTimeout(() => {\n this.$message({\n message: `请上传${this.fileType.join(\"、\")}的文件!`,\n type: \"warning\",\n });\n }, 1);\n return false;\n }\n },\n // 校验图片宽高\n validImage(file) {\n const _this = this;\n return new Promise(function (resolve, reject) {\n const width = parseInt(_this.formMaxWH.width, 10);\n const height = parseInt(_this.formMaxWH.height, 10);\n let _URL = window.URL || window.webkitURL;\n let img = new Image();\n img.onload = function () {\n if (img.width !== width || img.height !== height) {\n return reject({\n type: false,\n msg: `请上传${width}px * ${height}px的图片`,\n });\n }\n return resolve({\n type: true,\n });\n };\n img.src = _URL.createObjectURL(file);\n });\n },\n formHandleRemove(file, formFileList) {\n if (file.status !== \"ready\") {\n this.formFileList.splice(this.formFileList.indexOf(file), 1);\n this.noneBtnImg = this.formFileList.length >= this.limit;\n }\n },\n handlePreview(file) {\n if (this.listType === \"text\") {\n this.handlePictureCardPreview(file);\n }\n },\n handlePictureCardPreview(file) {\n let type, url;\n if (file.raw) {\n type = this.fileFormat(file.name.toLowerCase());\n url = file.response.data[0].attachmenturl;\n } else {\n type = this.fileFormat(file.url.toLowerCase());\n url = file.url;\n }\n\n if (type === \"IMG\") {\n this.dialogImageUrl = file.url;\n this.$refs.previewImg.showViewer = true;\n\n const m = (e) => {\n e.preventDefault();\n };\n document.body.style.overflow = \"hidden\";\n document.addEventListener(\"touchmove\", m, false); // 禁止页面滑动\n\n this.$nextTick(() => {\n document\n .querySelector(\".el-image-viewer__close\")\n .addEventListener(\"click\", () => {\n const m = (e) => {\n e.preventDefault();\n };\n document.body.style.overflow = \"auto\";\n document.removeEventListener(\"touchmove\", m, true);\n });\n });\n }\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 handleDownload(file) {\n console.log(file);\n var name;\n let url = file.response ? file.response.data[0].attachmenturl : file.url;\n if (file.name) {\n name = file.name;\n if (!name.indexOf(\".\") > -1) {\n var a = url.split(\"/\");\n var b = a[a.length - 1];\n name = file.name + \".\" + b.split(\".\")[1];\n }\n } else {\n var a = url.split(\"/\");\n name = a[a.length - 1];\n }\n axios({\n method: \"post\",\n url:\n process.env.VUE_APP_BASE_API +\n \"/huilianApi/uploader/downloadZipFiles\",\n data:\n \"fileUrls=\" +\n JSON.stringify([\n {\n imgName: name\n .replace(/\\&/g, \"-\")\n .replace(/\\?/g, \"-\")\n .replace(/\\%/g, \"-\"),\n dataImg: url,\n },\n ]),\n responseType: \"blob\", // 加上这个是重点\n }).then((res) => {\n this.downloadFile(res.data, name);\n });\n },\n downloadFile(data, name) {\n const url = window.URL.createObjectURL(new Blob([data]));\n const link = document.createElement(\"a\");\n link.style.display = \"none\";\n link.href = url;\n link.setAttribute(\"download\", name);\n document.body.appendChild(link);\n link.click();\n URL.revokeObjectURL(link.href);\n document.body.removeChild(link);\n this.$message({\n message: \"下载成功\",\n type: \"success\",\n });\n },\n // 允许上传文件个数验证\n formHandleExceed(files, formFileList) {\n this.$message.warning(`最多上传 ${this.limit} 个文件！`);\n },\n // 上传文件\n handleUploadForm(file, fileList) {\n if (!file.url) {\n file.url = URL.createObjectURL(file.raw);\n }\n },\n // 上传成功\n handleSuccess(response, file, fileList) {\n var num = 0;\n for (var i = 0; i < fileList.length; i++) {\n if (fileList[i].status === \"success\") {\n num++;\n }\n }\n if (num === fileList.length) {\n this.formFileList = fileList;\n this.$emit(\"update:fileUrl\", this.formFileList);\n this.noneBtnImg = this.formFileList.length >= this.limit;\n if (this.handleSuccessCallback) {\n this.handleSuccessCallback(response, file, fileList);\n }\n }\n this.$message({\n message: \"上传成功\",\n type: \"success\",\n });\n },\n // 上传失败\n handleError(err, file, fileList) {\n console.log(err);\n // this.loading.close()\n },\n\n dragEnd() {\n // this.drag = false;\n this.$emit(\"update:fileUrl\", this.formFileList);\n },\n showImgViewer() {\n this.imgViewerVisible = true;\n const m = (e) => {\n e.preventDefault();\n };\n document.body.style.overflow = \"hidden\";\n document.addEventListener(\"touchmove\", m, false); // 禁止页面滑动\n },\n closeImgViewer() {\n this.imgViewerVisible = false;\n const m = (e) => {\n e.preventDefault();\n };\n document.body.style.overflow = \"auto\";\n document.removeEventListener(\"touchmove\", m, true);\n },\n },\n};\n</script>\n\n<style lang=\"scss\">\n.upload_file_box {\n position: relative;\n\n .el-upload-list--picture-card {\n .el-upload-list__item {\n width: 104px;\n height: 104px;\n transition: none;\n }\n }\n\n .el-upload--picture-card {\n width: 104px;\n height: 104px;\n line-height: 104px;\n position: relative;\n z-index: 1;\n }\n\n .upload_file_operation {\n width: 100%;\n height: 100%;\n\n .upload_file_bg {\n width: 100%;\n height: 100%;\n background-size: contain;\n }\n }\n\n .disUoloadSty {\n .el-upload--picture-card {\n display: none;\n }\n }\n}\n</style>\n",".upload_file_box {\n position: relative;\n}\n.upload_file_box .el-upload-list--picture-card .el-upload-list__item {\n width: 104px;\n height: 104px;\n transition: none;\n}\n.upload_file_box .el-upload--picture-card {\n width: 104px;\n height: 104px;\n line-height: 104px;\n position: relative;\n z-index: 1;\n}\n.upload_file_box .upload_file_operation {\n width: 100%;\n height: 100%;\n}\n.upload_file_box .upload_file_operation .upload_file_bg {\n width: 100%;\n height: 100%;\n background-size: contain;\n}\n.upload_file_box .disUoloadSty .el-upload--picture-card {\n display: none;\n}\n\n/*# sourceMappingURL=index.vue.map */"]},media:undefined});};/* scoped */const __vue_scope_id__$h=undefined;/* module identifier */const __vue_module_identifier__$h=undefined;/* functional template */const __vue_is_functional_template__$h=false;/* style inject SSR */ /* style inject shadow dom */const __vue_component__$h=/*#__PURE__*/normalizeComponent({render:__vue_render__$h,staticRenderFns:__vue_staticRenderFns__$h},__vue_inject_styles__$h,__vue_script__$h,__vue_scope_id__$h,__vue_is_functional_template__$h,__vue_module_identifier__$h,false,createInjector,undefined,undefined);__vue_component__$h.install=function(Vue){Vue.component(__vue_component__$h.name,__vue_component__$h);};//
|
|
601
|
+
},closeImgViewer(){this.imgViewerVisible=false;const m=e=>{e.preventDefault();};document.body.style.overflow="auto";document.removeEventListener("touchmove",m,true);}}};/* script */const __vue_script__$h=script$h;/* template */var __vue_render__$h=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("div",{staticClass:"upload_file_box"},[_c("div",{staticStyle:{height:"0",overflow:"hidden"}},[_c("el-image",{ref:"previewImg",attrs:{src:_vm.dialogImageUrl,"preview-src-list":_vm.formFileList.map(function(item){return _vm.bgImg(item);})}})],1),_vm._v(" "),_c("el-upload",{class:{disUoloadSty:_vm.noneBtnImg},attrs:{headers:_vm.headers,action:_vm.apiUrl,"list-type":_vm.listType,tip:_vm.tip,limit:_vm.limit,multiple:_vm.multiple,data:_vm.formData,accept:_vm.formatFileType(),disabled:_vm.fileDisabled,"file-list":_vm.formFileList,"on-exceed":_vm.formHandleExceed,"before-upload":_vm.beforeUploadForm,"on-change":_vm.handleUploadForm,"on-remove":_vm.formHandleRemove,"on-success":_vm.handleSuccess,"on-error":_vm.handleError,"on-preview":_vm.handlePreview,"http-request":_vm.customHttpRequest},scopedSlots:_vm._u([{key:"file",fn:function(ref){var file=ref.file;return _vm.listType==="picture-card"?_c("div",{staticClass:"upload_file_operation"},[_c("div",{staticClass:"upload_file_bg",style:"background: url("+_vm.bgImg(file)+") no-repeat 50% 50%; background-size: contain;"}),_vm._v(" "),file.status!=="success"?_c("span",{staticClass:"el-upload-list__item-actions",staticStyle:{opacity:"1"}},[_c("i",{staticClass:"el-icon-loading"})]):_vm._e()]):_vm._e();}}],null,true)},[_vm.listType==="text"?_c("div",{staticStyle:{"text-align":"left"}},[_c("el-button",{attrs:{type:"primary",disabled:_vm.fileDisabled}},[_vm._v(_vm._s(_vm.trans("点击上传")))]),_vm._v(" "),_c("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[_vm._v("\n "+_vm._s(_vm.tip?_vm.tip:""+_vm.trans("请选择要上传的附件，最多")+_vm.limit+_vm.trans("个")+"，"+_vm.trans("单个附件最大")+_vm.formMaxSize+"M")+"\n ")])],1):_vm._e(),_vm._v(" "),_vm.listType==="excel"?_c("div",{staticStyle:{"text-align":"left"}},[_c("el-button",{attrs:{type:"primary"}},[_vm._v(_vm._s(_vm.trans("点击上传")))]),_vm._v(" "),_vm._t("tip")],2):_vm._e(),_vm._v(" "),_vm.listType==="picture-card"?_c("draggable",_vm._b({staticClass:"el-upload-list el-upload-list--picture-card",style:{position:"absolute",left:0,top:0},attrs:{slot:"tip",tag:"ul"},on:{end:_vm.dragEnd},slot:"tip",model:{value:_vm.formFileList,callback:function($$v){_vm.formFileList=$$v;},expression:"formFileList"}},"draggable",_vm.dragOptions,false),_vm._l(_vm.formFileList,function(file,inex){return _c("li",{key:inex,staticClass:"el-upload-list__item is-success"},[_c("div",{staticClass:"upload_file_operation"},[_c("div",{staticClass:"upload_file_bg",style:"background: url("+_vm.bgImg(file)+") 50% 50% / contain no-repeat;"}),_vm._v(" "),_c("span",{staticClass:"el-upload-list__item-actions"},[_c("span",{staticClass:"el-upload-list__item-preview",on:{click:function($event){return _vm.handlePictureCardPreview(file);}}},[_c("i",{staticClass:"el-icon-zoom-in"})]),_vm._v(" "),_c("span",{staticClass:"el-upload-list__item-delete",on:{click:function($event){return _vm.handleDownload(file);}}},[_c("i",{staticClass:"el-icon-download"})]),_vm._v(" "),!_vm.fileDisabled?_c("span",{staticClass:"el-upload-list__item-delete",on:{click:function($event){return _vm.formHandleRemove(file);}}},[_c("i",{staticClass:"el-icon-delete"})]):_vm._e()])])]);}),0):_vm._e(),_vm._v(" "),_vm.listType==="picture-card"?_c("i",{staticClass:"el-icon-plus",attrs:{slot:"default"},slot:"default"}):_vm._e()],1)],1);};var __vue_staticRenderFns__$h=[];__vue_render__$h._withStripped=true;/* style */const __vue_inject_styles__$h=function(inject){if(!inject)return;inject("data-v-d9eb56e0_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":["D:\\项目\\npm\\components\\UploadFile\\index.vue","index.vue"],"names":[],"mappings":"AAqqBA;EACA,kBAAA;ACpqBA;ADuqBA;EACA,YAAA;EACA,aAAA;EACA,gBAAA;ACrqBA;ADyqBA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,kBAAA;EACA,UAAA;ACvqBA;AD0qBA;EACA,WAAA;EACA,YAAA;ACxqBA;AD0qBA;EACA,WAAA;EACA,YAAA;EACA,wBAAA;ACxqBA;AD6qBA;EACA,aAAA;AC3qBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"upload_file_box\">\r\n <div style=\"height: 0; overflow: hidden\">\r\n <el-image\r\n ref=\"previewImg\"\r\n :src=\"dialogImageUrl\"\r\n :preview-src-list=\"formFileList.map((item) => bgImg(item))\"\r\n />\r\n </div>\r\n\r\n <el-upload\r\n :class=\"{ disUoloadSty: noneBtnImg }\"\r\n :headers=\"headers\"\r\n :action=\"apiUrl\"\r\n :list-type=\"listType\"\r\n :tip=\"tip\"\r\n :limit=\"limit\"\r\n :multiple=\"multiple\"\r\n :data=\"formData\"\r\n :accept=\"formatFileType()\"\r\n :disabled=\"fileDisabled\"\r\n :file-list=\"formFileList\"\r\n :on-exceed=\"formHandleExceed\"\r\n :before-upload=\"beforeUploadForm\"\r\n :on-change=\"handleUploadForm\"\r\n :on-remove=\"formHandleRemove\"\r\n :on-success=\"handleSuccess\"\r\n :on-error=\"handleError\"\r\n :on-preview=\"handlePreview\"\r\n :http-request=\"customHttpRequest\"\r\n >\r\n <div v-if=\"listType === 'text'\" style=\"text-align: left\">\r\n <el-button type=\"primary\" :disabled=\"fileDisabled\">{{\r\n trans(\"点击上传\")\r\n }}</el-button>\r\n <div slot=\"tip\" class=\"el-upload__tip\">\r\n {{\r\n tip\r\n ? tip\r\n : `${trans(\"请选择要上传的附件，最多\")}${limit}${trans(\r\n \"个\"\r\n )}，${trans(\"单个附件最大\")}${formMaxSize}M`\r\n }}\r\n </div>\r\n </div>\r\n <div v-if=\"listType === 'excel'\" style=\"text-align: left\">\r\n <el-button type=\"primary\">{{ trans(\"点击上传\") }}</el-button>\r\n <slot name=\"tip\"></slot>\r\n </div>\r\n\r\n <draggable\r\n slot=\"tip\"\r\n v-if=\"listType === 'picture-card'\"\r\n tag=\"ul\"\r\n v-model=\"formFileList\"\r\n v-bind=\"dragOptions\"\r\n @end=\"dragEnd\"\r\n class=\"el-upload-list el-upload-list--picture-card\"\r\n :style=\"{ position: 'absolute', left: 0, top: 0 }\"\r\n >\r\n <li\r\n class=\"el-upload-list__item is-success\"\r\n v-for=\"(file, inex) in formFileList\"\r\n :key=\"inex\"\r\n >\r\n <div class=\"upload_file_operation\">\r\n <div\r\n class=\"upload_file_bg\"\r\n :style=\"`background: url(${bgImg(\r\n file\r\n )}) 50% 50% / contain no-repeat;`\"\r\n />\r\n <span class=\"el-upload-list__item-actions\">\r\n <span\r\n class=\"el-upload-list__item-preview\"\r\n @click=\"handlePictureCardPreview(file)\"\r\n >\r\n <i class=\"el-icon-zoom-in\" />\r\n </span>\r\n <span\r\n class=\"el-upload-list__item-delete\"\r\n @click=\"handleDownload(file)\"\r\n >\r\n <i class=\"el-icon-download\" />\r\n </span>\r\n <span\r\n v-if=\"!fileDisabled\"\r\n class=\"el-upload-list__item-delete\"\r\n @click=\"formHandleRemove(file)\"\r\n >\r\n <i class=\"el-icon-delete\" />\r\n </span>\r\n </span>\r\n </div>\r\n </li>\r\n </draggable>\r\n\r\n <i\r\n slot=\"default\"\r\n class=\"el-icon-plus\"\r\n v-if=\"listType === 'picture-card'\"\r\n />\r\n <div\r\n slot=\"file\"\r\n slot-scope=\"{ file }\"\r\n class=\"upload_file_operation\"\r\n v-if=\"listType === 'picture-card'\"\r\n >\r\n <div\r\n class=\"upload_file_bg\"\r\n :style=\"`background: url(${bgImg(\r\n file\r\n )}) no-repeat 50% 50%; background-size: contain;`\"\r\n />\r\n <span\r\n v-if=\"file.status !== 'success'\"\r\n style=\"opacity: 1\"\r\n class=\"el-upload-list__item-actions\"\r\n >\r\n <i class=\"el-icon-loading\"></i>\r\n </span>\r\n </div>\r\n </el-upload>\r\n </div>\r\n</template>\r\n\r\n<script>\r\n// import { attachment } from '@/config/api/publicApi'\r\nimport draggable from \"vuedraggable\";\r\nimport { mapGetters } from \"vuex\";\r\nimport axios from \"axios\";\r\nimport CSV from \"./fileImages/CSV.png\";\r\nimport EXCEL from \"./fileImages/EXCEL.png\";\r\nimport PDF from \"./fileImages/PDF.png\";\r\nimport PPT from \"./fileImages/PPT.png\";\r\nimport RAR from \"./fileImages/RAR.png\";\r\nimport WORD from \"./fileImages/WORD.png\";\r\nimport ZIP from \"./fileImages/ZIP.png\";\r\nimport APK from \"./fileImages/APK.png\";\r\nimport PLIST from \"./fileImages/PLIST.png\";\r\nimport MP4 from \"./fileImages/MP4.png\";\r\nimport trans from \"../lang/trans\";\r\nimport { getFileUrl } from \"../public\";\r\n\r\nexport default {\r\n components: {\r\n draggable,\r\n },\r\n props: {\r\n limit: {\r\n // 限制文件个数\r\n default: 1,\r\n type: Number,\r\n },\r\n multiple: {\r\n // 上传多个文件\r\n default: false,\r\n type: Boolean,\r\n },\r\n formMaxSize: {\r\n // 限制文件大小\r\n default: 10, // M\r\n type: Number,\r\n },\r\n formMaxWH: {\r\n // 限制图片尺寸 单位px { width: 100, height: 100 }\r\n default: () => {\r\n return {};\r\n },\r\n type: Object,\r\n },\r\n fileUrl: {\r\n // 文件数组\r\n default: () => {\r\n return [];\r\n },\r\n type: Array,\r\n },\r\n tip: {\r\n // 上传文件说明\r\n default: \"\",\r\n type: String,\r\n },\r\n formData: {\r\n // 上传时附带的额外参数\r\n default: () => {\r\n return {\r\n attachmenType: \"VOUCHER\",\r\n };\r\n },\r\n type: Object,\r\n },\r\n handleSuccessCallback: {\r\n type: Function,\r\n },\r\n fileType: {\r\n // 限制选择文件类型\r\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',\r\n default: () => {\r\n return [\r\n \".pptx\",\r\n \".csv\",\r\n \".zip\",\r\n \".rar\",\r\n \".jpg\",\r\n \".jpeg\",\r\n \".png\",\r\n \".doc\",\r\n \".docx\",\r\n \".pdf\",\r\n \".xls\",\r\n \".xlsx\",\r\n \".mp4\",\r\n \".pdf\",\r\n ];\r\n },\r\n type: Array,\r\n },\r\n fileDisabled: {\r\n default: false,\r\n type: Boolean,\r\n },\r\n apiUrl: {\r\n default: \"/gateway/huilianApi/uploader/attachment\",\r\n type: String,\r\n },\r\n listType: {\r\n default: \"picture-card\",\r\n type: String,\r\n },\r\n },\r\n data() {\r\n return {\r\n formFileList: [], // 显示上传文件\r\n dialogImageUrl: \"\",\r\n loading: \"\",\r\n noneBtnImg: false,\r\n drag: false,\r\n trans,\r\n headers: {},\r\n };\r\n },\r\n computed: {\r\n ...mapGetters([\"userInfo\"]),\r\n dragOptions() {\r\n return {\r\n animation: 100,\r\n group: \"description\",\r\n disabled: false,\r\n ghostClass: \"ghost\",\r\n };\r\n },\r\n },\r\n watch: {\r\n fileUrl: {\r\n deep: true,\r\n immediate: true,\r\n handler() {\r\n this.formFileList = this.fileUrl;\r\n if (this.fileDisabled) {\r\n this.noneBtnImg = true;\r\n }\r\n if (this.fileUrl.length >= this.limit) {\r\n this.noneBtnImg = true;\r\n } else {\r\n this.noneBtnImg = false;\r\n }\r\n },\r\n },\r\n },\r\n mounted() {\r\n // if (window.HLEncryption) {\r\n // this.headers = window.HLEncryption.setRequestHeaders({\r\n // url: this.apiUrl,\r\n // headers: {},\r\n // });\r\n // }\r\n },\r\n methods: {\r\n customHttpRequest({ file, onSuccess, onError }) {\r\n // 动态生成headers\r\n let headers = {\r\n \"Content-Type\": \"multipart/form-data\", // 通常不需要手动设置，但为了完整性还是加上\r\n };\r\n\r\n if (window.HLEncryption) {\r\n headers = window.HLEncryption.setRequestHeaders({\r\n url: this.apiUrl,\r\n headers: headers,\r\n });\r\n }\r\n\r\n const formData = new FormData();\r\n formData.append(\"file\", file); // 添加文件到FormData中\r\n // 使用axios或fetch发送请求，这里使用axios为例\r\n for (let key in this.formData) {\r\n formData.append(key, this.formData[key]);\r\n }\r\n axios\r\n .post(this.apiUrl, formData, { headers })\r\n .then((response) => {\r\n onSuccess(response.data, response); // 调用onSuccess回调\r\n })\r\n .catch((error) => {\r\n onError(error); // 调用onError回调\r\n });\r\n },\r\n // 处理格式\r\n formatFileType() {\r\n let arr = [];\r\n this.fileType.map((item) => {\r\n arr.push(item);\r\n arr.push(item.toUpperCase());\r\n });\r\n return arr.join(\",\");\r\n },\r\n // 缩略图展示\r\n bgImg(file) {\r\n let type = \"\";\r\n const types = {\r\n IMG: \"\",\r\n WORD: WORD,\r\n EXCEL: EXCEL,\r\n PDF: PDF,\r\n CSV: CSV,\r\n RAR: RAR,\r\n ZIP: ZIP,\r\n PPT: PPT,\r\n APK: APK,\r\n PLIST: PLIST,\r\n MP4: MP4,\r\n };\r\n\r\n if (file.raw) {\r\n type = this.fileFormat(file.name.toLowerCase());\r\n } else {\r\n type = this.fileFormat(file.url.toLowerCase());\r\n }\r\n\r\n if (type === \"IMG\") {\r\n return file.url;\r\n } else {\r\n return types[type];\r\n }\r\n },\r\n // 文件格式\r\n fileFormat(name) {\r\n const images = \"bmp|jpg|jpeg|png|gif|svg|webp|JPG|JPEG|PNG\";\r\n const word = \"doc|docx|DOC|DOCX\";\r\n const excel = \"xls|xlsx|XLS|XLSX\";\r\n const pdf = \"pdf|PDF\";\r\n const csv = \"csv|CSV\";\r\n const rar = \"rar|RAR\";\r\n const zip = \"zip|ZIP\";\r\n const ppt = \"pptx|PPTX\";\r\n const apk = \"apk|APK\";\r\n const plist = \"plist|PLIST\";\r\n const mp4 = \"mp4|MP4\";\r\n\r\n const pattern_images = new RegExp(\".(\" + images + \")$\");\r\n const pattern_word = new RegExp(\".(\" + word + \")$\");\r\n const pattern_excel = new RegExp(\".(\" + excel + \")$\");\r\n const pattern_pdf = new RegExp(\".(\" + pdf + \")$\");\r\n const pattern_csv = new RegExp(\".(\" + csv + \")$\");\r\n const pattern_rar = new RegExp(\".(\" + rar + \")$\");\r\n const pattern_zip = new RegExp(\".(\" + zip + \")$\");\r\n const pattern_ppt = new RegExp(\".(\" + ppt + \")$\");\r\n const pattern_apk = new RegExp(\".(\" + apk + \")$\");\r\n const pattern_plist = new RegExp(\".(\" + plist + \")$\");\r\n const pattern_mp4 = new RegExp(\".(\" + mp4 + \")$\");\r\n\r\n if (name.indexOf(\"?\") > -1) {\r\n name = name.split(\"?\")[0];\r\n }\r\n\r\n if (pattern_images.test(name)) {\r\n return \"IMG\";\r\n } else if (pattern_word.test(name)) {\r\n return \"WORD\";\r\n } else if (pattern_excel.test(name)) {\r\n return \"EXCEL\";\r\n } else if (pattern_pdf.test(name)) {\r\n return \"PDF\";\r\n } else if (pattern_csv.test(name)) {\r\n return \"CSV\";\r\n } else if (pattern_rar.test(name)) {\r\n return \"RAR\";\r\n } else if (pattern_zip.test(name)) {\r\n return \"ZIP\";\r\n } else if (pattern_ppt.test(name)) {\r\n return \"PPT\";\r\n } else if (pattern_apk.test(name)) {\r\n return \"APK\";\r\n } else if (pattern_plist.test(name)) {\r\n return \"PLIST\";\r\n } else if (pattern_mp4.test(name)) {\r\n return \"MP4\";\r\n }\r\n },\r\n // 开始上传前验证\r\n beforeUploadForm(file) {\r\n // 验证文件大小\r\n if (file.size / 1024 / 1024 > this.formMaxSize) {\r\n setTimeout(() => {\r\n this.$message({\r\n message: `上传文件 “${file.name}” 大小不能超过${this.formMaxSize}M!`,\r\n type: \"warning\",\r\n });\r\n }, 1);\r\n return false;\r\n }\r\n\r\n // 验证尺寸是否符合\r\n if (this.formMaxWH.width) {\r\n const isSize = this.validImage(file).then(\r\n (data) => {\r\n return file;\r\n },\r\n (data) => {\r\n this.$message.error(data.msg);\r\n return Promise.reject();\r\n }\r\n );\r\n return isSize;\r\n }\r\n\r\n // 中文乱码处理\r\n // if (file.raw) {\r\n // let reader = new FileReader(); // 读取文件内容\r\n // reader.readAsText(file.raw, \"gb2312\"); // 防止中文乱码问题，不加reader.onload方法都不会触发\r\n // reader.onload = function(e) {\r\n // this.contentHtml = e.target.result; // txt文本内容，接下来就可以对其进行校验处理了\r\n // };\r\n // }\r\n\r\n // 验证文件类型\r\n const nameList = file.name.split(\".\");\r\n const allowTypes = this.fileType.map((type) => type.toLowerCase());\r\n const ext = \".\" + nameList[nameList.length - 1].toLowerCase();\r\n if (!allowTypes.includes(ext)) {\r\n setTimeout(() => {\r\n this.$message({\r\n message: `请上传${this.fileType.join(\"、\")}的文件!`,\r\n type: \"warning\",\r\n });\r\n }, 1);\r\n return false;\r\n }\r\n },\r\n // 校验图片宽高\r\n validImage(file) {\r\n const _this = this;\r\n return new Promise(function (resolve, reject) {\r\n const width = parseInt(_this.formMaxWH.width, 10);\r\n const height = parseInt(_this.formMaxWH.height, 10);\r\n let _URL = window.URL || window.webkitURL;\r\n let img = new Image();\r\n img.onload = function () {\r\n if (img.width !== width || img.height !== height) {\r\n return reject({\r\n type: false,\r\n msg: `请上传${width}px * ${height}px的图片`,\r\n });\r\n }\r\n return resolve({\r\n type: true,\r\n });\r\n };\r\n img.src = _URL.createObjectURL(file);\r\n });\r\n },\r\n formHandleRemove(file, formFileList) {\r\n if (file.status !== \"ready\") {\r\n this.formFileList.splice(this.formFileList.indexOf(file), 1);\r\n this.noneBtnImg = this.formFileList.length >= this.limit;\r\n }\r\n },\r\n handlePreview(file) {\r\n if (this.listType === \"text\") {\r\n this.handlePictureCardPreview(file);\r\n }\r\n },\r\n handlePictureCardPreview(file) {\r\n let type, url;\r\n if (file.raw) {\r\n type = this.fileFormat(file.name.toLowerCase());\r\n url = file.response.data[0].attachmenturl;\r\n } else {\r\n type = this.fileFormat(file.url.toLowerCase());\r\n url = file.url;\r\n }\r\n\r\n if (type === \"IMG\") {\r\n this.dialogImageUrl = file.url;\r\n this.$refs.previewImg.showViewer = true;\r\n\r\n const m = (e) => {\r\n e.preventDefault();\r\n };\r\n document.body.style.overflow = \"hidden\";\r\n document.addEventListener(\"touchmove\", m, false); // 禁止页面滑动\r\n\r\n this.$nextTick(() => {\r\n document\r\n .querySelector(\".el-image-viewer__close\")\r\n .addEventListener(\"click\", () => {\r\n const m = (e) => {\r\n e.preventDefault();\r\n };\r\n document.body.style.overflow = \"auto\";\r\n document.removeEventListener(\"touchmove\", m, true);\r\n });\r\n });\r\n }\r\n // else if (type === \"PDF\") {\r\n // window.open(\r\n // \"https://www.hellogil.com/web/contractPreview.html?url=\" +\r\n // url.replace(\"http://\", \"https://\")\r\n // );\r\n // }\r\n else if (\r\n type === \"WORD\" ||\r\n type === \"EXCEL\" ||\r\n type === \"CSV\" ||\r\n type === \"PPT\" ||\r\n type === \"PDF\"\r\n ) {\r\n // window.open(\r\n // `https://file-preview.hellogil.com/onlinePreview?watermarkTxt=${this.userInfo.userName}${this.userInfo.jobCard}&url=` +\r\n // url.replace(\"http://\", \"https://\")\r\n // );\r\n const urlWithoutParams = url.split(\"?\")[0].toLowerCase();\r\n if (\r\n !urlWithoutParams.endsWith(\".doc\") &&\r\n !urlWithoutParams.endsWith(\".xlx\")\r\n ) {\r\n // URL后缀不包含.doc和.xlx时执行的代码\r\n // window.open(\r\n // `https://www.hellogil.com/web/#/officePreview?url=` +\r\n // encodeURIComponent(url.replace(\"http://\", \"https://\"))\r\n // );\r\n getFileUrl(url.replace(\"http://\", \"https://\")).then((res) => {\r\n if (res.result === \"success\") {\r\n window.open(res.data);\r\n } else {\r\n this.$message({\r\n message: \"该文件不支持预览!\",\r\n type: \"warning\",\r\n });\r\n }\r\n });\r\n } else {\r\n this.$message({\r\n message: \"该文件不支持预览!\",\r\n type: \"warning\",\r\n });\r\n }\r\n } else {\r\n this.$message({\r\n message: \"该文件不支持预览!\",\r\n type: \"warning\",\r\n });\r\n }\r\n },\r\n handleDownload(file) {\r\n console.log(file);\r\n var name;\r\n let url = file.response ? file.response.data[0].attachmenturl : file.url;\r\n if (file.name) {\r\n name = file.name;\r\n if (!name.indexOf(\".\") > -1) {\r\n var a = url.split(\"/\");\r\n var b = a[a.length - 1];\r\n name = file.name + \".\" + b.split(\".\")[1];\r\n }\r\n } else {\r\n var a = url.split(\"/\");\r\n name = a[a.length - 1];\r\n }\r\n axios({\r\n method: \"post\",\r\n url:\r\n process.env.VUE_APP_BASE_API +\r\n \"/huilianApi/uploader/downloadZipFiles\",\r\n data:\r\n \"fileUrls=\" +\r\n JSON.stringify([\r\n {\r\n imgName: name\r\n .replace(/\\&/g, \"-\")\r\n .replace(/\\?/g, \"-\")\r\n .replace(/\\%/g, \"-\"),\r\n dataImg: url,\r\n },\r\n ]),\r\n responseType: \"blob\", // 加上这个是重点\r\n }).then((res) => {\r\n this.downloadFile(res.data, name);\r\n });\r\n },\r\n downloadFile(data, name) {\r\n const url = window.URL.createObjectURL(new Blob([data]));\r\n const link = document.createElement(\"a\");\r\n link.style.display = \"none\";\r\n link.href = url;\r\n link.setAttribute(\"download\", name);\r\n document.body.appendChild(link);\r\n link.click();\r\n URL.revokeObjectURL(link.href);\r\n document.body.removeChild(link);\r\n this.$message({\r\n message: \"下载成功\",\r\n type: \"success\",\r\n });\r\n },\r\n // 允许上传文件个数验证\r\n formHandleExceed(files, formFileList) {\r\n this.$message.warning(`最多上传 ${this.limit} 个文件！`);\r\n },\r\n // 上传文件\r\n handleUploadForm(file, fileList) {\r\n if (!file.url) {\r\n file.url = URL.createObjectURL(file.raw);\r\n }\r\n },\r\n // 上传成功\r\n handleSuccess(response, file, fileList) {\r\n var num = 0;\r\n for (var i = 0; i < fileList.length; i++) {\r\n if (fileList[i].status === \"success\") {\r\n num++;\r\n }\r\n }\r\n if (num === fileList.length) {\r\n this.formFileList = fileList;\r\n this.$emit(\"update:fileUrl\", this.formFileList);\r\n this.noneBtnImg = this.formFileList.length >= this.limit;\r\n if (this.handleSuccessCallback) {\r\n this.handleSuccessCallback(response, file, fileList);\r\n }\r\n }\r\n this.$message({\r\n message: \"上传成功\",\r\n type: \"success\",\r\n });\r\n },\r\n // 上传失败\r\n handleError(err, file, fileList) {\r\n console.log(err);\r\n // this.loading.close()\r\n },\r\n\r\n dragEnd() {\r\n // this.drag = false;\r\n this.$emit(\"update:fileUrl\", this.formFileList);\r\n },\r\n showImgViewer() {\r\n this.imgViewerVisible = true;\r\n const m = (e) => {\r\n e.preventDefault();\r\n };\r\n document.body.style.overflow = \"hidden\";\r\n document.addEventListener(\"touchmove\", m, false); // 禁止页面滑动\r\n },\r\n closeImgViewer() {\r\n this.imgViewerVisible = false;\r\n const m = (e) => {\r\n e.preventDefault();\r\n };\r\n document.body.style.overflow = \"auto\";\r\n document.removeEventListener(\"touchmove\", m, true);\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n.upload_file_box {\r\n position: relative;\r\n\r\n .el-upload-list--picture-card {\r\n .el-upload-list__item {\r\n width: 104px;\r\n height: 104px;\r\n transition: none;\r\n }\r\n }\r\n\r\n .el-upload--picture-card {\r\n width: 104px;\r\n height: 104px;\r\n line-height: 104px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .upload_file_operation {\r\n width: 100%;\r\n height: 100%;\r\n\r\n .upload_file_bg {\r\n width: 100%;\r\n height: 100%;\r\n background-size: contain;\r\n }\r\n }\r\n\r\n .disUoloadSty {\r\n .el-upload--picture-card {\r\n display: none;\r\n }\r\n }\r\n}\r\n</style>\r\n",".upload_file_box {\n position: relative;\n}\n.upload_file_box .el-upload-list--picture-card .el-upload-list__item {\n width: 104px;\n height: 104px;\n transition: none;\n}\n.upload_file_box .el-upload--picture-card {\n width: 104px;\n height: 104px;\n line-height: 104px;\n position: relative;\n z-index: 1;\n}\n.upload_file_box .upload_file_operation {\n width: 100%;\n height: 100%;\n}\n.upload_file_box .upload_file_operation .upload_file_bg {\n width: 100%;\n height: 100%;\n background-size: contain;\n}\n.upload_file_box .disUoloadSty .el-upload--picture-card {\n display: none;\n}\n\n/*# sourceMappingURL=index.vue.map */"]},media:undefined});};/* scoped */const __vue_scope_id__$h=undefined;/* module identifier */const __vue_module_identifier__$h=undefined;/* functional template */const __vue_is_functional_template__$h=false;/* style inject SSR */ /* style inject shadow dom */const __vue_component__$h=/*#__PURE__*/normalizeComponent({render:__vue_render__$h,staticRenderFns:__vue_staticRenderFns__$h},__vue_inject_styles__$h,__vue_script__$h,__vue_scope_id__$h,__vue_is_functional_template__$h,__vue_module_identifier__$h,false,createInjector,undefined,undefined);__vue_component__$h.install=function(Vue){Vue.component(__vue_component__$h.name,__vue_component__$h);};//
|
|
602
602
|
var script$g={props:{fileUrl:{// 文件数组
|
|
603
603
|
default:()=>{return[];},type:Array},isShowDownload:{// 是否显示
|
|
604
604
|
default:true,type:Boolean},showTitle:{// 是否显示图片名
|
|
@@ -627,7 +627,7 @@ const urlWithoutParams=url.split("?")[0].toLowerCase();if(!urlWithoutParams.ends
|
|
|
627
627
|
// encodeURIComponent(url.replace("http://", "https://"))
|
|
628
628
|
// );
|
|
629
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__$g=script$g;/* template */var __vue_render__$g=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("div",{staticClass:"show_file_box"},[_c("div",{staticStyle:{height:"0",width:"0",overflow:"hidden"}},[_c("el-image",{ref:"previewImg",attrs:{src:_vm.dialogImageUrl,"preview-src-list":_vm.formFileList.map(function(item){return _vm.bgImg(item);})}})],1),_vm._v(" "),_vm.type==="block"?_c("div",{},_vm._l(_vm.fileUrl,function(item,index){return _c("div",{key:index,staticClass:"show_file_operation"},[_c("div",{staticClass:"show_file_bg",style:"background: url("+_vm.bgImg(item)+") no-repeat 50% 50%; background-size: contain;"}),_vm._v(" "),_c("span",{staticClass:"el-show-list__item-actions"},[_c("span",{staticClass:"el-show-list__item-preview",on:{click:function($event){return _vm.handlePictureCardPreview(item);}}},[_c("i",{staticClass:"el-icon-zoom-in"})]),_vm._v(" "),_c("span",{directives:[{name:"show",rawName:"v-show",value:_vm.isShowDownload,expression:"isShowDownload"}],staticClass:"el-show-list__item-delete",on:{click:function($event){return _vm.handleDownload(item);}}},[_c("i",{staticClass:"el-icon-download"})])]),_vm._v(" "),_vm.showTitle?_c("p",{staticClass:"show_file_title"},[_vm._v(_vm._s(item.name))]):_vm._e()]);}),0):_vm._e(),_vm._v(" "),_vm.type==="text"?_c("div",_vm._l(_vm.fileUrl,function(item,index){return _c("a",{key:index,on:{click:function($event){return _vm.handlePictureCardPreview(item);}}},[_vm._v(_vm._s(item.name))]);}),0):_vm._e(),_vm._v(" "),_vm.type==="custom"?_c("div",[_vm._t("content",null,{props:_vm.fileUrl,callback:_vm.handlePictureCardPreviewCallback})],2):_vm._e(),_vm._v(" "),_vm.type==="list"?_c("div",[_c("ul",_vm._l(_vm.fileUrl,function(item,index){return _c("li",{key:index,staticClass:"clearfix",class:index+1<_vm.fileUrl.length?"mb-15":""},[_vm._m(0,true),_vm._v(" "),_c("div",{staticClass:"clearfix fl ml-10 textCss",staticStyle:{width:"calc(100% - 30px)"}},[_c("div",{staticClass:"fl imgName"},[_vm._v("\n "+_vm._s(item.name)+"\n ")]),_vm._v(" "),_c("el-button",{directives:[{name:"show",rawName:"v-show",value:_vm.isShowDownload,expression:"isShowDownload"}],staticClass:"fr",attrs:{icon:"el-icon-download",type:"text"},on:{click:function($event){return _vm.handleDownload(item);}}},[_vm._v("下载")]),_vm._v(" "),_c("el-button",{staticClass:"fr mr-15",attrs:{icon:"el-icon-zoom-in",type:"text"},on:{click:function($event){return _vm.handlePictureCardPreview(item);}}},[_vm._v("预览")])],1)]);}),0)]):_vm._e()]);};var __vue_staticRenderFns__$g=[function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",{staticClass:"fl"},[_c("i",{staticClass:"el-icon-folder-opened"})]);}];__vue_render__$g._withStripped=true;/* style */const __vue_inject_styles__$g=function(inject){if(!inject)return;inject("data-v-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__$g=undefined;/* module identifier */const __vue_module_identifier__$g=undefined;/* functional template */const __vue_is_functional_template__$g=false;/* style inject SSR */ /* style inject shadow dom */const __vue_component__$g=/*#__PURE__*/normalizeComponent({render:__vue_render__$g,staticRenderFns:__vue_staticRenderFns__$g},__vue_inject_styles__$g,__vue_script__$g,__vue_scope_id__$g,__vue_is_functional_template__$g,__vue_module_identifier__$g,false,createInjector,undefined,undefined);__vue_component__$g.install=function(Vue){Vue.component(__vue_component__$g.name,__vue_component__$g);};var ElTableDraggable_umd={exports:{}};(function(module,exports){(function webpackUniversalModuleDefinition(root,factory){module.exports=factory();})(typeof self!=='undefined'?self:commonjsGlobal,function(){return(/******/function(modules){// webpackBootstrap
|
|
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__$g=script$g;/* template */var __vue_render__$g=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("div",{staticClass:"show_file_box"},[_c("div",{staticStyle:{height:"0",width:"0",overflow:"hidden"}},[_c("el-image",{ref:"previewImg",attrs:{src:_vm.dialogImageUrl,"preview-src-list":_vm.formFileList.map(function(item){return _vm.bgImg(item);})}})],1),_vm._v(" "),_vm.type==="block"?_c("div",{},_vm._l(_vm.fileUrl,function(item,index){return _c("div",{key:index,staticClass:"show_file_operation"},[_c("div",{staticClass:"show_file_bg",style:"background: url("+_vm.bgImg(item)+") no-repeat 50% 50%; background-size: contain;"}),_vm._v(" "),_c("span",{staticClass:"el-show-list__item-actions"},[_c("span",{staticClass:"el-show-list__item-preview",on:{click:function($event){return _vm.handlePictureCardPreview(item);}}},[_c("i",{staticClass:"el-icon-zoom-in"})]),_vm._v(" "),_c("span",{directives:[{name:"show",rawName:"v-show",value:_vm.isShowDownload,expression:"isShowDownload"}],staticClass:"el-show-list__item-delete",on:{click:function($event){return _vm.handleDownload(item);}}},[_c("i",{staticClass:"el-icon-download"})])]),_vm._v(" "),_vm.showTitle?_c("p",{staticClass:"show_file_title"},[_vm._v(_vm._s(item.name))]):_vm._e()]);}),0):_vm._e(),_vm._v(" "),_vm.type==="text"?_c("div",_vm._l(_vm.fileUrl,function(item,index){return _c("a",{key:index,on:{click:function($event){return _vm.handlePictureCardPreview(item);}}},[_vm._v(_vm._s(item.name))]);}),0):_vm._e(),_vm._v(" "),_vm.type==="custom"?_c("div",[_vm._t("content",null,{props:_vm.fileUrl,callback:_vm.handlePictureCardPreviewCallback})],2):_vm._e(),_vm._v(" "),_vm.type==="list"?_c("div",[_c("ul",_vm._l(_vm.fileUrl,function(item,index){return _c("li",{key:index,staticClass:"clearfix",class:index+1<_vm.fileUrl.length?"mb-15":""},[_vm._m(0,true),_vm._v(" "),_c("div",{staticClass:"clearfix fl ml-10 textCss",staticStyle:{width:"calc(100% - 30px)"}},[_c("div",{staticClass:"fl imgName"},[_vm._v("\n "+_vm._s(item.name)+"\n ")]),_vm._v(" "),_c("el-button",{directives:[{name:"show",rawName:"v-show",value:_vm.isShowDownload,expression:"isShowDownload"}],staticClass:"fr",attrs:{icon:"el-icon-download",type:"text"},on:{click:function($event){return _vm.handleDownload(item);}}},[_vm._v("下载")]),_vm._v(" "),_c("el-button",{staticClass:"fr mr-15",attrs:{icon:"el-icon-zoom-in",type:"text"},on:{click:function($event){return _vm.handlePictureCardPreview(item);}}},[_vm._v("预览")])],1)]);}),0)]):_vm._e()]);};var __vue_staticRenderFns__$g=[function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",{staticClass:"fl"},[_c("i",{staticClass:"el-icon-folder-opened"})]);}];__vue_render__$g._withStripped=true;/* style */const __vue_inject_styles__$g=function(inject){if(!inject)return;inject("data-v-f0cea3f2_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":["D:\\项目\\npm\\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>\r\n <div class=\"show_file_box\">\r\n <div style=\"height: 0; width: 0; overflow: hidden\">\r\n <el-image\r\n ref=\"previewImg\"\r\n :src=\"dialogImageUrl\"\r\n :preview-src-list=\"formFileList.map((item) => bgImg(item))\"\r\n />\r\n </div>\r\n <div class=\"\" v-if=\"type === 'block'\">\r\n <div\r\n class=\"show_file_operation\"\r\n v-for=\"(item, index) in fileUrl\"\r\n :key=\"index\"\r\n >\r\n <div\r\n class=\"show_file_bg\"\r\n :style=\"`background: url(${bgImg(\r\n item\r\n )}) no-repeat 50% 50%; background-size: contain;`\"\r\n />\r\n <span class=\"el-show-list__item-actions\">\r\n <span\r\n class=\"el-show-list__item-preview\"\r\n @click=\"handlePictureCardPreview(item)\"\r\n >\r\n <i class=\"el-icon-zoom-in\" />\r\n </span>\r\n <span\r\n class=\"el-show-list__item-delete\"\r\n v-show=\"isShowDownload\"\r\n @click=\"handleDownload(item)\"\r\n >\r\n <i class=\"el-icon-download\" />\r\n </span>\r\n </span>\r\n <p v-if=\"showTitle\" class=\"show_file_title\">{{ item.name }}</p>\r\n </div>\r\n </div>\r\n <div v-if=\"type === 'text'\">\r\n <a\r\n v-for=\"(item, index) in fileUrl\"\r\n :key=\"index\"\r\n @click=\"handlePictureCardPreview(item)\"\r\n >{{ item.name }}</a\r\n >\r\n </div>\r\n <div v-if=\"type === 'custom'\">\r\n <slot\r\n name=\"content\"\r\n :props=\"fileUrl\"\r\n :callback=\"handlePictureCardPreviewCallback\"\r\n >\r\n </slot>\r\n </div>\r\n <div v-if=\"type === 'list'\">\r\n <ul>\r\n <li\r\n class=\"clearfix\"\r\n :class=\"index + 1 < fileUrl.length ? 'mb-15' : ''\"\r\n v-for=\"(item, index) in fileUrl\"\r\n :key=\"index\"\r\n >\r\n <span class=\"fl\">\r\n <i class=\"el-icon-folder-opened\"></i>\r\n </span>\r\n <div\r\n class=\"clearfix fl ml-10 textCss\"\r\n style=\"width: calc(100% - 30px)\"\r\n >\r\n <div class=\"fl imgName\">\r\n {{ item.name }}\r\n </div>\r\n <!-- <i class=\"el-icon-download\" class=\"fr ml-10\" @click=\"handleDownload(item)\">下载</i>\r\n <i class=\"el-icon-zoom-in\" class=\"fr\">预览</i> -->\r\n <el-button\r\n icon=\"el-icon-download\"\r\n type=\"text\"\r\n class=\"fr\"\r\n v-show=\"isShowDownload\"\r\n @click=\"handleDownload(item)\"\r\n >下载</el-button\r\n >\r\n <el-button\r\n icon=\"el-icon-zoom-in\"\r\n type=\"text\"\r\n class=\"fr mr-15\"\r\n @click=\"handlePictureCardPreview(item)\"\r\n >预览</el-button\r\n >\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { mapGetters } from \"vuex\";\r\nimport axios from \"axios\";\r\nimport CSV from \"../UploadFile/fileImages/CSV.png\";\r\nimport EXCEL from \"../UploadFile/fileImages/EXCEL.png\";\r\nimport PDF from \"../UploadFile/fileImages/PDF.png\";\r\nimport PPT from \"../UploadFile/fileImages/PPT.png\";\r\nimport RAR from \"../UploadFile/fileImages/RAR.png\";\r\nimport WORD from \"../UploadFile/fileImages/WORD.png\";\r\nimport ZIP from \"../UploadFile/fileImages/ZIP.png\";\r\nimport PLIST from \"../UploadFile/fileImages/PLIST.png\";\r\nimport { getFileUrl } from \"../public\";\r\n\r\nexport default {\r\n props: {\r\n fileUrl: {\r\n // 文件数组\r\n default: () => {\r\n return [];\r\n },\r\n type: Array,\r\n },\r\n isShowDownload: {\r\n // 是否显示\r\n default: true,\r\n type: Boolean,\r\n },\r\n showTitle: {\r\n // 是否显示图片名\r\n default: false,\r\n type: Boolean,\r\n },\r\n // isText: { // 是否以文字形式展示\r\n // default: false,\r\n // type: Boolean\r\n // },\r\n type: {\r\n // 展示类型{block: 块，text: 文字，list: 列,custom:自定义}\r\n default: \"block\",\r\n type: String,\r\n },\r\n },\r\n data() {\r\n return {\r\n formFileList: [], // 显示上传文件\r\n dialogImageUrl: \"\",\r\n };\r\n },\r\n computed: {\r\n ...mapGetters([\"userInfo\"]),\r\n },\r\n watch: {\r\n fileUrl: {\r\n deep: true,\r\n immediate: true,\r\n handler() {\r\n this.formFileList = this.fileUrl;\r\n },\r\n },\r\n },\r\n methods: {\r\n // 缩略图展示\r\n bgImg(file) {\r\n let type = \"\";\r\n const types = {\r\n IMG: \"\",\r\n WORD: WORD,\r\n EXCEL: EXCEL,\r\n PDF: PDF,\r\n CSV: CSV,\r\n RAR: RAR,\r\n ZIP: ZIP,\r\n PPT: PPT,\r\n PLIST: PLIST,\r\n };\r\n\r\n if (file.raw) {\r\n type = this.fileFormat(file.name);\r\n } else {\r\n type = this.fileFormat(file.url);\r\n }\r\n\r\n if (type === \"IMG\") {\r\n return file.url;\r\n } else {\r\n return types[type];\r\n }\r\n },\r\n // 文件格式\r\n fileFormat(name) {\r\n const images = \"bmp|jpg|jpeg|png|gif|svg|webp|JPG|JPEG|PNG\";\r\n const word = \"doc|docx|DOC|DOCX\";\r\n const excel = \"xls|xlsx|XLS|XLSX\";\r\n const pdf = \"pdf|PDF\";\r\n const csv = \"csv|CSV\";\r\n const rar = \"rar|RAR\";\r\n const zip = \"zip|ZIP\";\r\n const ppt = \"pptx|PPTX\";\r\n const plist = \"plist|PLIST\";\r\n\r\n const pattern_images = new RegExp(\".(\" + images + \")$\");\r\n const pattern_word = new RegExp(\".(\" + word + \")$\");\r\n const pattern_excel = new RegExp(\".(\" + excel + \")$\");\r\n const pattern_pdf = new RegExp(\".(\" + pdf + \")$\");\r\n const pattern_csv = new RegExp(\".(\" + csv + \")$\");\r\n const pattern_rar = new RegExp(\".(\" + rar + \")$\");\r\n const pattern_zip = new RegExp(\".(\" + zip + \")$\");\r\n const pattern_ppt = new RegExp(\".(\" + ppt + \")$\");\r\n const pattern_plist = new RegExp(\".(\" + plist + \")$\");\r\n\r\n if (name.indexOf(\"?\") > -1) {\r\n name = name.split(\"?\")[0];\r\n }\r\n\r\n if (pattern_images.test(name)) {\r\n return \"IMG\";\r\n } else if (pattern_word.test(name)) {\r\n return \"WORD\";\r\n } else if (pattern_excel.test(name)) {\r\n return \"EXCEL\";\r\n } else if (pattern_pdf.test(name)) {\r\n return \"PDF\";\r\n } else if (pattern_csv.test(name)) {\r\n return \"CSV\";\r\n } else if (pattern_rar.test(name)) {\r\n return \"RAR\";\r\n } else if (pattern_zip.test(name)) {\r\n return \"ZIP\";\r\n } else if (pattern_ppt.test(name)) {\r\n return \"PPT\";\r\n } else if (pattern_plist.test(name)) {\r\n return \"PLIST\";\r\n }\r\n },\r\n\r\n handlePictureCardPreview(file) {\r\n let type, url;\r\n if (file.raw) {\r\n type = this.fileFormat(file.name);\r\n url = file.response.data[0].attachmenturl;\r\n } else {\r\n type = this.fileFormat(file.url);\r\n url = file.url;\r\n }\r\n\r\n if (type === \"IMG\") {\r\n this.dialogImageUrl = file.url;\r\n this.$refs.previewImg.showViewer = true;\r\n const m = (e) => {\r\n e.preventDefault();\r\n };\r\n document.body.style.overflow = \"hidden\";\r\n document.addEventListener(\"touchmove\", m, false); // 禁止页面滑动\r\n\r\n this.$nextTick(() => {\r\n document\r\n .querySelector(\".el-image-viewer__close\")\r\n .addEventListener(\"click\", () => {\r\n const m = (e) => {\r\n e.preventDefault();\r\n };\r\n document.body.style.overflow = \"auto\";\r\n document.removeEventListener(\"touchmove\", m, true);\r\n });\r\n });\r\n }\r\n // else if (type === \"PDF\") {\r\n // window.open(\r\n // \"https://www.hellogil.com/web/contractPreview.html?url=\" +\r\n // url.replace(\"http://\", \"https://\")\r\n // );\r\n // }\r\n else if (\r\n type === \"WORD\" ||\r\n type === \"EXCEL\" ||\r\n type === \"CSV\" ||\r\n type === \"PPT\" ||\r\n type === \"PDF\"\r\n ) {\r\n // window.open(\r\n // `https://file-preview.hellogil.com/onlinePreview?watermarkTxt=${this.userInfo.userName}${this.userInfo.jobCard}&url=` +\r\n // url.replace(\"http://\", \"https://\")\r\n // );\r\n const urlWithoutParams = url.split(\"?\")[0].toLowerCase();\r\n if (\r\n !urlWithoutParams.endsWith(\".doc\") &&\r\n !urlWithoutParams.endsWith(\".xlx\")\r\n ) {\r\n // URL后缀不包含.doc和.xlx时执行的代码\r\n // window.open(\r\n // `https://www.hellogil.com/web/#/officePreview?url=` +\r\n // encodeURIComponent(url.replace(\"http://\", \"https://\"))\r\n // );\r\n getFileUrl(url.replace(\"http://\", \"https://\")).then((res) => {\r\n if (res.result === \"success\") {\r\n window.open(res.data);\r\n } else {\r\n this.$message({\r\n message: \"该文件不支持预览!\",\r\n type: \"warning\",\r\n });\r\n }\r\n });\r\n } else {\r\n this.$message({\r\n message: \"该文件不支持预览!\",\r\n type: \"warning\",\r\n });\r\n }\r\n } else {\r\n this.$message({\r\n message: \"该文件不支持预览!\",\r\n type: \"warning\",\r\n });\r\n }\r\n },\r\n handlePictureCardPreviewCallback(item) {\r\n this.handlePictureCardPreview(item);\r\n },\r\n handleDownload(file) {\r\n console.log(file);\r\n var name;\r\n if (file.name) {\r\n name = file.name;\r\n if (!name.indexOf(\".\") > -1) {\r\n var a = file.url.split(\"/\");\r\n var b = a[a.length - 1];\r\n name = file.name + \".\" + b.split(\".\")[1];\r\n }\r\n } else {\r\n var a = file.url.split(\"/\");\r\n name = a[a.length - 1];\r\n }\r\n axios({\r\n method: \"post\",\r\n url:\r\n process.env.VUE_APP_BASE_API +\r\n \"/huilianApi/uploader/downloadZipFiles\",\r\n data:\r\n \"fileUrls=\" +\r\n JSON.stringify([\r\n {\r\n imgName: name\r\n .replace(/\\&/g, \"-\")\r\n .replace(/\\?/g, \"-\")\r\n .replace(/\\%/g, \"-\"),\r\n dataImg: file.url,\r\n },\r\n ]),\r\n responseType: \"blob\", // 加上这个是重点\r\n }).then((res) => {\r\n this.downloadFile(res.data, name);\r\n });\r\n },\r\n downloadFile(data, name) {\r\n const url = window.URL.createObjectURL(new Blob([data]));\r\n const link = document.createElement(\"a\");\r\n link.style.display = \"none\";\r\n link.href = url;\r\n link.setAttribute(\"download\", name);\r\n document.body.appendChild(link);\r\n link.click();\r\n URL.revokeObjectURL(link.href);\r\n document.body.removeChild(link);\r\n this.$message({\r\n message: \"下载成功\",\r\n type: \"success\",\r\n });\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n.show_file_box {\r\n a {\r\n color: #10c2b0;\r\n }\r\n &::after {\r\n content: \"\";\r\n display: block;\r\n clear: both;\r\n }\r\n .show_file_operation {\r\n // width: 104px;\r\n // height: 104px;\r\n border-radius: 4px;\r\n position: relative;\r\n line-height: 104px;\r\n float: left;\r\n margin-right: 10px;\r\n margin-bottom: 10px;\r\n .show_file_bg {\r\n width: 104px;\r\n height: 104px;\r\n border: 1px solid #c0ccda;\r\n }\r\n .el-show-list__item-actions {\r\n position: absolute;\r\n width: 104px;\r\n height: 104px;\r\n left: 0;\r\n top: 0;\r\n cursor: default;\r\n text-align: center;\r\n color: #fff;\r\n opacity: 0;\r\n font-size: 20px;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n transition: opacity 0.3s;\r\n span {\r\n cursor: pointer;\r\n font-size: inherit;\r\n color: inherit;\r\n }\r\n .el-show-list__item-delete {\r\n position: static;\r\n top: 0;\r\n margin-left: 20px;\r\n }\r\n }\r\n &:hover {\r\n .el-show-list__item-actions {\r\n opacity: 1;\r\n }\r\n }\r\n .show_file_title {\r\n font-size: 12px;\r\n color: #999;\r\n line-height: 12px;\r\n text-align: center;\r\n }\r\n }\r\n\r\n ul,\r\n li {\r\n list-style: none;\r\n margin: 0;\r\n padding: 0;\r\n // width: 500px;\r\n width: 100%;\r\n max-width: 500px;\r\n min-width: 250px;\r\n }\r\n li {\r\n width: 100%;\r\n color: #409eff;\r\n font-size: 13px;\r\n line-height: 22px;\r\n .imgName {\r\n // width: 350px;\r\n width: calc(100% - 140px);\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n .el-button {\r\n color: #409eff;\r\n padding: 0;\r\n font-size: 13px;\r\n line-height: 20px;\r\n i {\r\n font-weight: bold;\r\n }\r\n }\r\n }\r\n}\r\n</style>\r\n",".show_file_box a {\n color: #10c2b0;\n}\n.show_file_box::after {\n content: \"\";\n display: block;\n clear: both;\n}\n.show_file_box .show_file_operation {\n border-radius: 4px;\n position: relative;\n line-height: 104px;\n float: left;\n margin-right: 10px;\n margin-bottom: 10px;\n}\n.show_file_box .show_file_operation .show_file_bg {\n width: 104px;\n height: 104px;\n border: 1px solid #c0ccda;\n}\n.show_file_box .show_file_operation .el-show-list__item-actions {\n position: absolute;\n width: 104px;\n height: 104px;\n left: 0;\n top: 0;\n cursor: default;\n text-align: center;\n color: #fff;\n opacity: 0;\n font-size: 20px;\n background-color: rgba(0, 0, 0, 0.5);\n transition: opacity 0.3s;\n}\n.show_file_box .show_file_operation .el-show-list__item-actions span {\n cursor: pointer;\n font-size: inherit;\n color: inherit;\n}\n.show_file_box .show_file_operation .el-show-list__item-actions .el-show-list__item-delete {\n position: static;\n top: 0;\n margin-left: 20px;\n}\n.show_file_box .show_file_operation:hover .el-show-list__item-actions {\n opacity: 1;\n}\n.show_file_box .show_file_operation .show_file_title {\n font-size: 12px;\n color: #999;\n line-height: 12px;\n text-align: center;\n}\n.show_file_box ul,\n.show_file_box li {\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n max-width: 500px;\n min-width: 250px;\n}\n.show_file_box li {\n width: 100%;\n color: #409eff;\n font-size: 13px;\n line-height: 22px;\n}\n.show_file_box li .imgName {\n width: calc(100% - 140px);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.show_file_box li .el-button {\n color: #409eff;\n padding: 0;\n font-size: 13px;\n line-height: 20px;\n}\n.show_file_box li .el-button i {\n font-weight: bold;\n}\n\n/*# sourceMappingURL=index.vue.map */"]},media:undefined});};/* scoped */const __vue_scope_id__$g=undefined;/* module identifier */const __vue_module_identifier__$g=undefined;/* functional template */const __vue_is_functional_template__$g=false;/* style inject SSR */ /* style inject shadow dom */const __vue_component__$g=/*#__PURE__*/normalizeComponent({render:__vue_render__$g,staticRenderFns:__vue_staticRenderFns__$g},__vue_inject_styles__$g,__vue_script__$g,__vue_scope_id__$g,__vue_is_functional_template__$g,__vue_module_identifier__$g,false,createInjector,undefined,undefined);__vue_component__$g.install=function(Vue){Vue.component(__vue_component__$g.name,__vue_component__$g);};var ElTableDraggable_umd={exports:{}};(function(module,exports){(function webpackUniversalModuleDefinition(root,factory){module.exports=factory();})(typeof self!=='undefined'?self:commonjsGlobal,function(){return(/******/function(modules){// webpackBootstrap
|
|
631
631
|
/******/ // The module cache
|
|
632
632
|
/******/var installedModules={};/******/ /******/ // The require function
|
|
633
633
|
/******/function __webpack_require__(moduleId){/******/ /******/ // Check if module is in cache
|
|
@@ -2153,7 +2153,7 @@ module.exports={CSSRuleList:0,CSSStyleDeclaration:0,CSSValueList:0,ClientRectLis
|
|
|
2153
2153
|
*/function isSymbol(value){return typeof value=='symbol'||isObjectLike(value)&&baseGetTag(value)==symbolTag;}module.exports=isSymbol;/***/}/******/})["default"]);});})(ElTableDraggable_umd);var ElTableDraggable=/*@__PURE__*/getDefaultExportFromCjs(ElTableDraggable_umd.exports);//
|
|
2154
2154
|
var script$f={name:"SelectCol",components:{ElTableDraggable},props:{initialColumns:Array,columnsShow:Array,visible:Boolean,getNewCol:Function,saveMyTemplateColumns:Function,templateKey:String},data(){return{inResize:true,trans,columns:this.initialColumns,dataHiddenList:[],dataSelectList:[],multipleSelection:[],tableCol:[{label:trans("列表项名"),prop:"columnPropertyName"}],tableSelectCol:[{label:trans("列表项名"),prop:"columnPropertyName"}]};},mounted(){this.filterCol();},watch:{visible(val){this.visible=val;this.filterCol();}},methods:{filterCol(){this.dataSelectList=this.columnsShow;// this.dataHiddenList = this.columns.filter(i => !i.show)
|
|
2155
2155
|
this.dataHiddenList=this.columns.map(i=>{const isSelect=this.columnsShow.find(j=>j.columnPropertyName===i.columnPropertyName);if(!isSelect){return i;}}).filter(i=>i);},cancel(){this.$emit('update:visible',false);},submit(){const select=this.dataSelectList;const hidden=this.dataHiddenList;const newCols=select.concat(hidden);const columns=select.map(i=>{return{columnCode:i.columnCode,isFixed:i.isFixed};});this.saveMyTemplateColumns({templateKey:this.templateKey,columns:columns}).then(response=>{if(response.result==='success'){this.getNewCol(select,newCols);this.cancel();}else{this.$message.error(response.msg);}});},change(newList){this.dataSelectList=newList.map((i,index)=>{i.index=index;return i;});this.columns=this.dataSelectList.concat(this.dataHiddenList);},fixed(key,arrow){const selectIndex=this.dataSelectList.findIndex(i=>i.columnProperty===key);const select=this.dataSelectList[selectIndex];select.isFixed=arrow;this.$set(this.dataSelectList,selectIndex,select);},deleteItem(key){const index=this.dataSelectList.findIndex(i=>i.columnProperty===key);const delItem=this.dataSelectList[index];this.dataHiddenList=[...this.dataHiddenList,{...delItem}];this.$delete(this.dataSelectList,index);},handleSelectionChange(val){this.multipleSelection=val;},selectRow(){this.dataSelectList=this.dataSelectList.concat(this.multipleSelection);this.dataSelectList=this.dataSelectList.map((i,index)=>{i.index=index;return i;});this.dataHiddenList=this.dataHiddenList.filter(i=>!this.multipleSelection.find(s=>s.columnProperty===i.columnProperty));this.columns=this.dataSelectList.concat(this.dataHiddenList);// this.filterCol()
|
|
2156
|
-
this.inResize=false;this.$nextTick(t=>{this.inResize=true;});}}};/* script */const __vue_script__$f=script$f;/* template */var __vue_render__$f=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("el-dialog",{attrs:{title:_vm.trans("列表配置"),width:"880px",visible:_vm.visible,"before-close":_vm.cancel},on:{"update:visible":function($event){_vm.visible=$event;}}},[_c("div",[_c("el-row",{attrs:{gutter:10}},[_c("el-col",{attrs:{span:11}},[_c("div",{staticClass:"tableHeader"},[_vm._v(_vm._s(_vm.trans("可添加列表项"))+"："+_vm._s(_vm.dataHiddenList.length))]),_vm._v(" "),_c("el-table",{staticStyle:{width:"394px"},attrs:{data:_vm.dataHiddenList,border:""},on:{"selection-change":_vm.handleSelectionChange}},[_c("el-table-column",{attrs:{type:"selection",width:"55"}}),_vm._v(" "),_vm._l(_vm.tableCol,function(item){return _c("el-table-column",{key:item.key,attrs:{label:item.label,prop:item.prop,width:item.width}});})],2)],1),_vm._v(" "),_c("el-col",{staticStyle:{"padding-top":"25%"},attrs:{span:2}},[_c("el-button",{attrs:{icon:"el-icon-caret-right",circle:""},on:{click:_vm.selectRow}})],1),_vm._v(" "),_vm.inResize?_c("el-col",{attrs:{span:11}},[_c("div",{staticClass:"tableHeader"},[_vm._v(_vm._s(_vm.trans("已选列表项"))+"："+_vm._s(_vm.dataSelectList.length))]),_vm._v(" "),_c("ElTableDraggable",{attrs:{handle:".web20_yidong"},on:{input:_vm.change}},[_c("el-table",{staticStyle:{width:"100%"},attrs:{data:_vm.dataSelectList,"row-key":"columnProperty",border:""}},[_c("el-table-column",{attrs:{type:"index",label:_vm.trans("排序"),width:"50"}}),_vm._v(" "),_vm._l(_vm.tableSelectCol,function(item,index){return _c("el-table-column",{key:item.key,attrs:{label:item.label,prop:item.prop,index:index,width:item.width}});}),_vm._v(" "),_c("el-table-column",{attrs:{label:_vm.trans("操作"),width:"100"},scopedSlots:_vm._u([{key:"default",fn:function(ref){var row=ref.row;return[_c("svg",{staticClass:"icon web20_yidong",staticStyle:{"margin-right":"5px"},attrs:{"aria-hidden":"true"}},[_c("use",{attrs:{"xlink:href":"#fontFamily-a-web20_yidong"}})]),_vm._v(" "),_c("i",{staticClass:"el-icon-delete",staticStyle:{"margin-right":"5px"},on:{click:function($event){return _vm.deleteItem(row.columnProperty);}}}),_vm._v(" "),row.isFixed==1?_c("svg",{staticClass:"icon",staticStyle:{color:"#008000","margin-right":"5px"},attrs:{"aria-hidden":"true"},on:{click:function($event){return _vm.fixed(row.columnProperty,0);}}},[_c("use",{attrs:{"xlink:href":"#fontFamily-a-web20_guding"}})]):_vm._e(),_vm._v(" "),row.isFixed==0?_c("span",[_c("el-popover",{attrs:{placement:"bottom",width:"400",trigger:"click"}},[_c("div",[_c("el-button",{on:{click:function($event){return _vm.fixed(row.columnProperty,1);}}},[_vm._v(_vm._s(_vm.trans("固定在左边")))])],1),_vm._v(" "),_c("svg",{staticClass:"icon",staticStyle:{"margin-right":"5px"},attrs:{slot:"reference","aria-hidden":"true"},slot:"reference"},[_c("use",{attrs:{"xlink:href":"#fontFamily-a-web20_feiguding"}})])])],1):_vm._e()];}}],null,false,769329392)})],2)],1)],1):_vm._e()],1)],1),_vm._v(" "),_c("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[_c("el-button",{on:{click:_vm.cancel}},[_vm._v(_vm._s(_vm.trans("取消")))]),_vm._v(" "),_c("el-button",{attrs:{type:"primary"},on:{click:_vm.submit}},[_vm._v(_vm._s(_vm.trans("确定")))])],1)]);};var __vue_staticRenderFns__$f=[];__vue_render__$f._withStripped=true;/* style */const __vue_inject_styles__$f=function(inject){if(!inject)return;inject("data-v-ccd68636_0",{source:"\n.tableHeader[data-v-ccd68636] {\n width: 100%;\n border-radius: 8px 8px 0 0;\n border: 1px solid #E4E7EF;\n height: 40px;\n line-height: 40px;\n text-indent: 10px;\n border-bottom: none;\n}\n",map:{"version":3,"sources":["/Users/chenlei/HLcode/test/components/FormTableScheme/component/SelectCol/index.vue"],"names":[],"mappings":";AAiLA;IACA,WAAA;IACA,0BAAA;IACA,yBAAA;IACA,YAAA;IACA,iBAAA;IACA,iBAAA;IACA,mBAAA;AACA","file":"index.vue","sourcesContent":["<template>\n <el-dialog :title=\"trans('列表配置')\" width=\"880px\" :visible.sync=\"visible\" :before-close=\"cancel\">\n <div>\n <el-row :gutter=\"10\">\n <el-col :span=\"11\">\n <div class=\"tableHeader\">{{ trans('可添加列表项') }}：{{ dataHiddenList.length }}</div>\n <el-table :data=\"dataHiddenList\" style=\"width: 394px\" border @selection-change=\"handleSelectionChange\">\n <el-table-column type=\"selection\" width=\"55\"> </el-table-column>\n <el-table-column :label=\"item.label\" :prop=\"item.prop\" v-for=\"item in tableCol\" :key=\"item.key\"\n :width=\"item.width\"></el-table-column>\n </el-table>\n </el-col>\n <el-col :span=\"2\" style=\"padding-top:25%\">\n <el-button icon=\"el-icon-caret-right\" circle @click=\"selectRow\"></el-button></el-col>\n <el-col :span=\"11\" v-if=\"inResize\">\n <div class=\"tableHeader\">{{ trans('已选列表项') }}：{{ dataSelectList.length }}</div>\n <ElTableDraggable handle=\".web20_yidong\" @input=\"change\">\n <el-table :data=\"dataSelectList\" row-key=\"columnProperty\" style=\"width: 100%\" border>\n <el-table-column type=\"index\" :label=\"trans('排序')\" width=\"50\">\n </el-table-column>\n <el-table-column :label=\"item.label\" :prop=\"item.prop\" v-for=\"(item, index) in tableSelectCol\"\n :key=\"item.key\" :index=\"index\" :width=\"item.width\"></el-table-column>\n <el-table-column :label=\"trans('操作')\" width=\"100\">\n <template slot-scope=\"{ row }\">\n <svg class=\"icon web20_yidong\" aria-hidden=\"true\" style=\"margin-right:5px;\">\n <use xlink:href=\"#fontFamily-a-web20_yidong\"></use>\n </svg>\n <i style=\"margin-right:5px;\" class=\"el-icon-delete\"\n @click=\"deleteItem(row.columnProperty)\"></i>\n <svg v-if=\"row.isFixed == 1\" class=\"icon\" style=\"color:#008000;margin-right:5px;\"\n aria-hidden=\"true\" @click=\"fixed(row.columnProperty, 0)\">\n <use xlink:href=\"#fontFamily-a-web20_guding\"></use>\n </svg>\n <span v-if=\"row.isFixed == 0\">\n <el-popover placement=\"bottom\" width=\"400\" trigger=\"click\">\n <div>\n <el-button @click=\"fixed(row.columnProperty, 1)\">{{ trans('固定在左边')\n }}</el-button>\n <!-- <el-button @click=\"fixed(row.columnProperty, 'right')\">固定在右边</el-button> -->\n </div>\n <svg class=\"icon\" aria-hidden=\"true\" slot=\"reference\" style=\"margin-right:5px;\">\n <use xlink:href=\"#fontFamily-a-web20_feiguding\"></use>\n </svg>\n </el-popover>\n </span>\n\n </template>\n </el-table-column>\n\n </el-table>\n </ElTableDraggable>\n\n </el-col>\n </el-row>\n </div>\n <div slot=\"footer\" class=\"dialog-footer\">\n <el-button @click=\"cancel\">{{ trans('取消') }}</el-button>\n <el-button type=\"primary\" @click=\"submit\">{{ trans('确定') }}</el-button>\n </div>\n </el-dialog>\n</template>\n\n<script>\nimport ElTableDraggable from 'el-table-draggable'\nimport trans from '../../../lang/trans'\n\nexport default {\n name: \"SelectCol\",\n components: {\n ElTableDraggable,\n },\n props: {\n initialColumns: Array,\n columnsShow: Array,\n visible: Boolean,\n getNewCol: Function,\n saveMyTemplateColumns: Function,\n templateKey: String,\n },\n data() {\n return {\n inResize: true,\n trans,\n columns: this.initialColumns,\n dataHiddenList: [],\n dataSelectList: [],\n multipleSelection: [],\n tableCol: [\n { label: trans(\"列表项名\"), prop: \"columnPropertyName\" },\n ],\n tableSelectCol: [\n { label: trans(\"列表项名\"), prop: \"columnPropertyName\", },\n ],\n };\n },\n mounted() {\n this.filterCol()\n },\n watch: {\n visible(val) {\n this.visible = val;\n this.filterCol()\n },\n },\n methods: {\n filterCol() {\n this.dataSelectList = this.columnsShow\n // this.dataHiddenList = this.columns.filter(i => !i.show)\n this.dataHiddenList = (this.columns.map((i) => {\n const isSelect = this.columnsShow.find(j => j.columnPropertyName === i.columnPropertyName)\n if (!isSelect) {\n return i\n }\n })).filter(i => i)\n },\n cancel() {\n this.$emit('update:visible', false);\n },\n submit() {\n const select = this.dataSelectList;\n const hidden = this.dataHiddenList;\n const newCols = select.concat(hidden)\n const columns = select.map(i => {\n return { columnCode: i.columnCode, isFixed: i.isFixed }\n })\n this.saveMyTemplateColumns({ templateKey: this.templateKey, columns: columns }).then((response) => {\n if (response.result === 'success') {\n this.getNewCol(select, newCols)\n this.cancel();\n } else {\n this.$message.error(\n response.msg\n )\n }\n })\n\n },\n change(newList) {\n this.dataSelectList = newList.map((i, index) => {\n i.index = index;\n return i\n })\n this.columns = this.dataSelectList.concat(this.dataHiddenList)\n },\n fixed(key, arrow) {\n const selectIndex = this.dataSelectList.findIndex(i => i.columnProperty === key)\n const select = this.dataSelectList[selectIndex]\n select.isFixed = arrow\n this.$set(this.dataSelectList, selectIndex, select)\n },\n deleteItem(key) {\n const index = this.dataSelectList.findIndex(i => i.columnProperty === key)\n const delItem = this.dataSelectList[index]\n this.dataHiddenList = [...this.dataHiddenList, { ...delItem }]\n this.$delete(this.dataSelectList, index)\n },\n handleSelectionChange(val) {\n this.multipleSelection = val;\n },\n selectRow() {\n this.dataSelectList = this.dataSelectList.concat(this.multipleSelection)\n this.dataSelectList = this.dataSelectList.map((i, index) => {\n i.index = index\n return i\n })\n this.dataHiddenList = this.dataHiddenList.filter(i => !this.multipleSelection.find(s => s.columnProperty === i.columnProperty))\n this.columns = this.dataSelectList.concat(this.dataHiddenList)\n // this.filterCol()\n this.inResize = false;\n this.$nextTick(t => {\n this.inResize = true;\n })\n },\n },\n};\n</script>\n<style scoped>\n.tableHeader {\n width: 100%;\n border-radius: 8px 8px 0 0;\n border: 1px solid #E4E7EF;\n height: 40px;\n line-height: 40px;\n text-indent: 10px;\n border-bottom: none;\n}\n</style>"]},media:undefined});};/* scoped */const __vue_scope_id__$f="data-v-ccd68636";/* module identifier */const __vue_module_identifier__$f=undefined;/* functional template */const __vue_is_functional_template__$f=false;/* style inject SSR */ /* style inject shadow dom */const __vue_component__$f=/*#__PURE__*/normalizeComponent({render:__vue_render__$f,staticRenderFns:__vue_staticRenderFns__$f},__vue_inject_styles__$f,__vue_script__$f,__vue_scope_id__$f,__vue_is_functional_template__$f,__vue_module_identifier__$f,false,createInjector,undefined,undefined);//
|
|
2156
|
+
this.inResize=false;this.$nextTick(t=>{this.inResize=true;});}}};/* script */const __vue_script__$f=script$f;/* template */var __vue_render__$f=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("el-dialog",{attrs:{title:_vm.trans("列表配置"),width:"880px",visible:_vm.visible,"before-close":_vm.cancel},on:{"update:visible":function($event){_vm.visible=$event;}}},[_c("div",[_c("el-row",{attrs:{gutter:10}},[_c("el-col",{attrs:{span:11}},[_c("div",{staticClass:"tableHeader"},[_vm._v(_vm._s(_vm.trans("可添加列表项"))+"："+_vm._s(_vm.dataHiddenList.length))]),_vm._v(" "),_c("el-table",{staticStyle:{width:"394px"},attrs:{data:_vm.dataHiddenList,border:""},on:{"selection-change":_vm.handleSelectionChange}},[_c("el-table-column",{attrs:{type:"selection",width:"55"}}),_vm._v(" "),_vm._l(_vm.tableCol,function(item){return _c("el-table-column",{key:item.key,attrs:{label:item.label,prop:item.prop,width:item.width}});})],2)],1),_vm._v(" "),_c("el-col",{staticStyle:{"padding-top":"25%"},attrs:{span:2}},[_c("el-button",{attrs:{icon:"el-icon-caret-right",circle:""},on:{click:_vm.selectRow}})],1),_vm._v(" "),_vm.inResize?_c("el-col",{attrs:{span:11}},[_c("div",{staticClass:"tableHeader"},[_vm._v(_vm._s(_vm.trans("已选列表项"))+"："+_vm._s(_vm.dataSelectList.length))]),_vm._v(" "),_c("ElTableDraggable",{attrs:{handle:".web20_yidong"},on:{input:_vm.change}},[_c("el-table",{staticStyle:{width:"100%"},attrs:{data:_vm.dataSelectList,"row-key":"columnProperty",border:""}},[_c("el-table-column",{attrs:{type:"index",label:_vm.trans("排序"),width:"50"}}),_vm._v(" "),_vm._l(_vm.tableSelectCol,function(item,index){return _c("el-table-column",{key:item.key,attrs:{label:item.label,prop:item.prop,index:index,width:item.width}});}),_vm._v(" "),_c("el-table-column",{attrs:{label:_vm.trans("操作"),width:"100"},scopedSlots:_vm._u([{key:"default",fn:function(ref){var row=ref.row;return[_c("svg",{staticClass:"icon web20_yidong",staticStyle:{"margin-right":"5px"},attrs:{"aria-hidden":"true"}},[_c("use",{attrs:{"xlink:href":"#fontFamily-a-web20_yidong"}})]),_vm._v(" "),_c("i",{staticClass:"el-icon-delete",staticStyle:{"margin-right":"5px"},on:{click:function($event){return _vm.deleteItem(row.columnProperty);}}}),_vm._v(" "),row.isFixed==1?_c("svg",{staticClass:"icon",staticStyle:{color:"#008000","margin-right":"5px"},attrs:{"aria-hidden":"true"},on:{click:function($event){return _vm.fixed(row.columnProperty,0);}}},[_c("use",{attrs:{"xlink:href":"#fontFamily-a-web20_guding"}})]):_vm._e(),_vm._v(" "),row.isFixed==0?_c("span",[_c("el-popover",{attrs:{placement:"bottom",width:"400",trigger:"click"}},[_c("div",[_c("el-button",{on:{click:function($event){return _vm.fixed(row.columnProperty,1);}}},[_vm._v(_vm._s(_vm.trans("固定在左边")))])],1),_vm._v(" "),_c("svg",{staticClass:"icon",staticStyle:{"margin-right":"5px"},attrs:{slot:"reference","aria-hidden":"true"},slot:"reference"},[_c("use",{attrs:{"xlink:href":"#fontFamily-a-web20_feiguding"}})])])],1):_vm._e()];}}],null,false,769329392)})],2)],1)],1):_vm._e()],1)],1),_vm._v(" "),_c("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[_c("el-button",{on:{click:_vm.cancel}},[_vm._v(_vm._s(_vm.trans("取消")))]),_vm._v(" "),_c("el-button",{attrs:{type:"primary"},on:{click:_vm.submit}},[_vm._v(_vm._s(_vm.trans("确定")))])],1)]);};var __vue_staticRenderFns__$f=[];__vue_render__$f._withStripped=true;/* style */const __vue_inject_styles__$f=function(inject){if(!inject)return;inject("data-v-b5c63fe6_0",{source:"\n.tableHeader[data-v-b5c63fe6] {\r\n width: 100%;\r\n border-radius: 8px 8px 0 0;\r\n border: 1px solid #E4E7EF;\r\n height: 40px;\r\n line-height: 40px;\r\n text-indent: 10px;\r\n border-bottom: none;\n}\r\n",map:{"version":3,"sources":["D:\\项目\\npm\\components\\FormTableScheme\\component\\SelectCol\\index.vue"],"names":[],"mappings":";AAiLA;IACA,WAAA;IACA,0BAAA;IACA,yBAAA;IACA,YAAA;IACA,iBAAA;IACA,iBAAA;IACA,mBAAA;AACA","file":"index.vue","sourcesContent":["<template>\r\n <el-dialog :title=\"trans('列表配置')\" width=\"880px\" :visible.sync=\"visible\" :before-close=\"cancel\">\r\n <div>\r\n <el-row :gutter=\"10\">\r\n <el-col :span=\"11\">\r\n <div class=\"tableHeader\">{{ trans('可添加列表项') }}：{{ dataHiddenList.length }}</div>\r\n <el-table :data=\"dataHiddenList\" style=\"width: 394px\" border @selection-change=\"handleSelectionChange\">\r\n <el-table-column type=\"selection\" width=\"55\"> </el-table-column>\r\n <el-table-column :label=\"item.label\" :prop=\"item.prop\" v-for=\"item in tableCol\" :key=\"item.key\"\r\n :width=\"item.width\"></el-table-column>\r\n </el-table>\r\n </el-col>\r\n <el-col :span=\"2\" style=\"padding-top:25%\">\r\n <el-button icon=\"el-icon-caret-right\" circle @click=\"selectRow\"></el-button></el-col>\r\n <el-col :span=\"11\" v-if=\"inResize\">\r\n <div class=\"tableHeader\">{{ trans('已选列表项') }}：{{ dataSelectList.length }}</div>\r\n <ElTableDraggable handle=\".web20_yidong\" @input=\"change\">\r\n <el-table :data=\"dataSelectList\" row-key=\"columnProperty\" style=\"width: 100%\" border>\r\n <el-table-column type=\"index\" :label=\"trans('排序')\" width=\"50\">\r\n </el-table-column>\r\n <el-table-column :label=\"item.label\" :prop=\"item.prop\" v-for=\"(item, index) in tableSelectCol\"\r\n :key=\"item.key\" :index=\"index\" :width=\"item.width\"></el-table-column>\r\n <el-table-column :label=\"trans('操作')\" width=\"100\">\r\n <template slot-scope=\"{ row }\">\r\n <svg class=\"icon web20_yidong\" aria-hidden=\"true\" style=\"margin-right:5px;\">\r\n <use xlink:href=\"#fontFamily-a-web20_yidong\"></use>\r\n </svg>\r\n <i style=\"margin-right:5px;\" class=\"el-icon-delete\"\r\n @click=\"deleteItem(row.columnProperty)\"></i>\r\n <svg v-if=\"row.isFixed == 1\" class=\"icon\" style=\"color:#008000;margin-right:5px;\"\r\n aria-hidden=\"true\" @click=\"fixed(row.columnProperty, 0)\">\r\n <use xlink:href=\"#fontFamily-a-web20_guding\"></use>\r\n </svg>\r\n <span v-if=\"row.isFixed == 0\">\r\n <el-popover placement=\"bottom\" width=\"400\" trigger=\"click\">\r\n <div>\r\n <el-button @click=\"fixed(row.columnProperty, 1)\">{{ trans('固定在左边')\r\n }}</el-button>\r\n <!-- <el-button @click=\"fixed(row.columnProperty, 'right')\">固定在右边</el-button> -->\r\n </div>\r\n <svg class=\"icon\" aria-hidden=\"true\" slot=\"reference\" style=\"margin-right:5px;\">\r\n <use xlink:href=\"#fontFamily-a-web20_feiguding\"></use>\r\n </svg>\r\n </el-popover>\r\n </span>\r\n\r\n </template>\r\n </el-table-column>\r\n\r\n </el-table>\r\n </ElTableDraggable>\r\n\r\n </el-col>\r\n </el-row>\r\n </div>\r\n <div slot=\"footer\" class=\"dialog-footer\">\r\n <el-button @click=\"cancel\">{{ trans('取消') }}</el-button>\r\n <el-button type=\"primary\" @click=\"submit\">{{ trans('确定') }}</el-button>\r\n </div>\r\n </el-dialog>\r\n</template>\r\n\r\n<script>\r\nimport ElTableDraggable from 'el-table-draggable'\r\nimport trans from '../../../lang/trans'\r\n\r\nexport default {\r\n name: \"SelectCol\",\r\n components: {\r\n ElTableDraggable,\r\n },\r\n props: {\r\n initialColumns: Array,\r\n columnsShow: Array,\r\n visible: Boolean,\r\n getNewCol: Function,\r\n saveMyTemplateColumns: Function,\r\n templateKey: String,\r\n },\r\n data() {\r\n return {\r\n inResize: true,\r\n trans,\r\n columns: this.initialColumns,\r\n dataHiddenList: [],\r\n dataSelectList: [],\r\n multipleSelection: [],\r\n tableCol: [\r\n { label: trans(\"列表项名\"), prop: \"columnPropertyName\" },\r\n ],\r\n tableSelectCol: [\r\n { label: trans(\"列表项名\"), prop: \"columnPropertyName\", },\r\n ],\r\n };\r\n },\r\n mounted() {\r\n this.filterCol()\r\n },\r\n watch: {\r\n visible(val) {\r\n this.visible = val;\r\n this.filterCol()\r\n },\r\n },\r\n methods: {\r\n filterCol() {\r\n this.dataSelectList = this.columnsShow\r\n // this.dataHiddenList = this.columns.filter(i => !i.show)\r\n this.dataHiddenList = (this.columns.map((i) => {\r\n const isSelect = this.columnsShow.find(j => j.columnPropertyName === i.columnPropertyName)\r\n if (!isSelect) {\r\n return i\r\n }\r\n })).filter(i => i)\r\n },\r\n cancel() {\r\n this.$emit('update:visible', false);\r\n },\r\n submit() {\r\n const select = this.dataSelectList;\r\n const hidden = this.dataHiddenList;\r\n const newCols = select.concat(hidden)\r\n const columns = select.map(i => {\r\n return { columnCode: i.columnCode, isFixed: i.isFixed }\r\n })\r\n this.saveMyTemplateColumns({ templateKey: this.templateKey, columns: columns }).then((response) => {\r\n if (response.result === 'success') {\r\n this.getNewCol(select, newCols)\r\n this.cancel();\r\n } else {\r\n this.$message.error(\r\n response.msg\r\n )\r\n }\r\n })\r\n\r\n },\r\n change(newList) {\r\n this.dataSelectList = newList.map((i, index) => {\r\n i.index = index;\r\n return i\r\n })\r\n this.columns = this.dataSelectList.concat(this.dataHiddenList)\r\n },\r\n fixed(key, arrow) {\r\n const selectIndex = this.dataSelectList.findIndex(i => i.columnProperty === key)\r\n const select = this.dataSelectList[selectIndex]\r\n select.isFixed = arrow\r\n this.$set(this.dataSelectList, selectIndex, select)\r\n },\r\n deleteItem(key) {\r\n const index = this.dataSelectList.findIndex(i => i.columnProperty === key)\r\n const delItem = this.dataSelectList[index]\r\n this.dataHiddenList = [...this.dataHiddenList, { ...delItem }]\r\n this.$delete(this.dataSelectList, index)\r\n },\r\n handleSelectionChange(val) {\r\n this.multipleSelection = val;\r\n },\r\n selectRow() {\r\n this.dataSelectList = this.dataSelectList.concat(this.multipleSelection)\r\n this.dataSelectList = this.dataSelectList.map((i, index) => {\r\n i.index = index\r\n return i\r\n })\r\n this.dataHiddenList = this.dataHiddenList.filter(i => !this.multipleSelection.find(s => s.columnProperty === i.columnProperty))\r\n this.columns = this.dataSelectList.concat(this.dataHiddenList)\r\n // this.filterCol()\r\n this.inResize = false;\r\n this.$nextTick(t => {\r\n this.inResize = true;\r\n })\r\n },\r\n },\r\n};\r\n</script>\r\n<style scoped>\r\n.tableHeader {\r\n width: 100%;\r\n border-radius: 8px 8px 0 0;\r\n border: 1px solid #E4E7EF;\r\n height: 40px;\r\n line-height: 40px;\r\n text-indent: 10px;\r\n border-bottom: none;\r\n}\r\n</style>"]},media:undefined});};/* scoped */const __vue_scope_id__$f="data-v-b5c63fe6";/* module identifier */const __vue_module_identifier__$f=undefined;/* functional template */const __vue_is_functional_template__$f=false;/* style inject SSR */ /* style inject shadow dom */const __vue_component__$f=/*#__PURE__*/normalizeComponent({render:__vue_render__$f,staticRenderFns:__vue_staticRenderFns__$f},__vue_inject_styles__$f,__vue_script__$f,__vue_scope_id__$f,__vue_is_functional_template__$f,__vue_module_identifier__$f,false,createInjector,undefined,undefined);//
|
|
2157
2157
|
//
|
|
2158
2158
|
//
|
|
2159
2159
|
//
|
|
@@ -2161,10 +2161,10 @@ this.inResize=false;this.$nextTick(t=>{this.inResize=true;});}}};/* script */con
|
|
|
2161
2161
|
var script$e={name:'dp',props:{value:String|Array|Object|Boolean,visible:{type:Boolean,default:false}},methods:{updateMsg(newVal){this.$emit('update-visible',newVal);}},computed:{computeStyle(){const type=Object.prototype.toString.call(this.value);let res=true;switch(type){case'[object Array]':this.value[0]==this.value[1];const errValues=[null,undefined,''];res=this.value.length==0||errValues.includes(this.value[0])&&errValues.includes(this.value[1]);break;case'[object Object]':res=Object.keys(this.value).length==0;break;case'[object String]':res=this.value.length==0;break;case'[object Number]':res=false;break;case'[object Boolean]':res=!this.value;break;}return{color:!res?'#333d4f':'#333d4f'};}}};/* script */const __vue_script__$e=script$e;/* template */var __vue_render__$e=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("svg",{staticClass:"icon",style:_vm.computeStyle,attrs:{"aria-hidden":"true"},on:{click:_vm.updateMsg}},[_c("use",{attrs:{"xlink:href":"#fontFamily-a-web20_liebiaoshaixuan"}})]);};var __vue_staticRenderFns__$e=[];__vue_render__$e._withStripped=true;/* style */const __vue_inject_styles__$e=undefined;/* scoped */const __vue_scope_id__$e=undefined;/* module identifier */const __vue_module_identifier__$e=undefined;/* functional template */const __vue_is_functional_template__$e=false;/* style inject */ /* style inject SSR */ /* style inject shadow dom */const __vue_component__$e=/*#__PURE__*/normalizeComponent({render:__vue_render__$e,staticRenderFns:__vue_staticRenderFns__$e},__vue_inject_styles__$e,__vue_script__$e,__vue_scope_id__$e,__vue_is_functional_template__$e,__vue_module_identifier__$e,false,undefined,undefined,undefined);//
|
|
2162
2162
|
var script$d={props:{setFormParams:Function,column:Object,ops:Object,// 请求参数
|
|
2163
2163
|
getConfig:Function,ruleFn:Function},components:{Dp:__vue_component__$e},watch:{ops:function(newVal,old){const{key}=this.getConfig(this.column);const ops=newVal;if(ops[key]){this.value=ops[key].split(',');// 约定 基本上check类型的值都是,分割的字符串
|
|
2164
|
-
}else{this.value=[];}},visible:{deep:true,handler(value){if(this.ruleFn&&value){let{option}=this.getConfig(this.column);this.list=option;}}}},data(){return{trans,list:[],visible:false,value:[]};},mounted(){let{option}=this.getConfig(this.column);this.list=option;},methods:{submit(){const{key}=this.getConfig(this.column);this.setFormParams({[key]:this.value.join(',')});this.visible=false;},reset(){this.value=[];}}};/* script */const __vue_script__$d=script$d;/* template */var __vue_render__$d=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",[_c("el-popover",{attrs:{placement:"bottom",width:"100%",trigger:"click","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-select",{attrs:{multiple:"",filterable:"",placeholder:_vm.trans("请选择")},model:{value:_vm.value,callback:function($$v){_vm.value=$$v;},expression:"value"}},_vm._l(_vm.list,function(item){return _c("el-option",{key:item.label,attrs:{label:item.label,value:item.value}});}),1),_vm._v(" "),_c("el-button",{staticClass:"popBtn",attrs:{size:"mini"},on:{click:_vm.reset}},[_vm._v(_vm._s(_vm.trans("重置")))]),_vm._v(" "),_c("el-button",{staticClass:"popBtn",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.value},slot:"reference"})],1)],1);};var __vue_staticRenderFns__$d=[];__vue_render__$d._withStripped=true;/* style */const __vue_inject_styles__$d=function(inject){if(!inject)return;inject("data-v-
|
|
2164
|
+
}else{this.value=[];}},visible:{deep:true,handler(value){if(this.ruleFn&&value){let{option}=this.getConfig(this.column);this.list=option;}}}},data(){return{trans,list:[],visible:false,value:[]};},mounted(){let{option}=this.getConfig(this.column);this.list=option;},methods:{submit(){const{key}=this.getConfig(this.column);this.setFormParams({[key]:this.value.join(',')});this.visible=false;},reset(){this.value=[];}}};/* script */const __vue_script__$d=script$d;/* template */var __vue_render__$d=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",[_c("el-popover",{attrs:{placement:"bottom",width:"100%",trigger:"click","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-select",{attrs:{multiple:"",filterable:"",placeholder:_vm.trans("请选择")},model:{value:_vm.value,callback:function($$v){_vm.value=$$v;},expression:"value"}},_vm._l(_vm.list,function(item){return _c("el-option",{key:item.label,attrs:{label:item.label,value:item.value}});}),1),_vm._v(" "),_c("el-button",{staticClass:"popBtn",attrs:{size:"mini"},on:{click:_vm.reset}},[_vm._v(_vm._s(_vm.trans("重置")))]),_vm._v(" "),_c("el-button",{staticClass:"popBtn",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.value},slot:"reference"})],1)],1);};var __vue_staticRenderFns__$d=[];__vue_render__$d._withStripped=true;/* style */const __vue_inject_styles__$d=function(inject){if(!inject)return;inject("data-v-c2830496_0",{source:".popBtn[data-v-c2830496] {\n vertical-align: bottom;\n margin-left: 5px;\n}\n.checkbox[data-v-c2830496] {\n max-height: 150px;\n overflow-y: auto;\n}\n.checkbox .el-checkbox[data-v-c2830496] {\n display: block;\n}\n\n/*# sourceMappingURL=Check.vue.map */",map:{"version":3,"sources":["D:\\项目\\npm\\components\\FormTableScheme\\component\\ColHeader\\Check.vue","Check.vue"],"names":[],"mappings":"AAwEA;EACA,sBAAA;EACA,gBAAA;ACvEA;AD0EA;EACA,iBAAA;EACA,gBAAA;ACvEA;ADyEA;EACA,cAAA;ACvEA;;AAEA,oCAAoC","file":"Check.vue","sourcesContent":["<template>\r\n <span>\r\n <el-popover placement=\"bottom\" width=\"100%\" trigger=\"click\" v-model=\"visible\" popper-class=\"pointRecord\">\r\n <div :data-name=\"column.columnPropertyName\">\r\n <el-select multiple v-model=\"value\" filterable :placeholder=\"trans('请选择')\">\r\n <el-option v-for=\"item in list\" :label=\"item.label\" :key=\"item.label\" :value=\"item.value\"></el-option>\r\n </el-select>\r\n <el-button class=\"popBtn\" size=\"mini\" @click=\"reset\">{{ trans('重置') }}</el-button>\r\n <el-button class=\"popBtn\" type=\"primary\" size=\"mini\" @click=\"submit\">{{ trans('确定') }}</el-button>\r\n </div>\r\n <dp :value=\"value\" slot=\"reference\" />\r\n </el-popover>\r\n </span>\r\n</template>\r\n<script>\r\nimport Dp from './dp.vue'\r\nimport trans from '../../../lang/trans'\r\n\r\nexport default {\r\n props: {\r\n setFormParams: Function,\r\n column: Object,\r\n ops: Object, // 请求参数\r\n getConfig: Function,\r\n ruleFn: Function,\r\n },\r\n components: { Dp },\r\n watch: {\r\n ops: function (newVal, old) {\r\n const { key } = this.getConfig(this.column);\r\n const ops = newVal;\r\n if (ops[key]) {\r\n this.value = ops[key].split(',') // 约定 基本上check类型的值都是,分割的字符串\r\n } else {\r\n this.value = []\r\n }\r\n },\r\n visible: {\r\n deep: true,\r\n handler(value){\r\n if(this.ruleFn && value){\r\n let { option } = this.getConfig(this.column);\r\n this.list = option\r\n }\r\n }\r\n }\r\n },\r\n data() {\r\n return {\r\n trans,\r\n list: [],\r\n visible: false,\r\n value: [],\r\n }\r\n },\r\n mounted() {\r\n let { option } = this.getConfig(this.column);\r\n this.list = option\r\n },\r\n methods: {\r\n submit() {\r\n const { key } = this.getConfig(this.column);\r\n this.setFormParams({ [key]: this.value.join(',') })\r\n this.visible = false\r\n },\r\n reset() {\r\n this.value = [];\r\n }\r\n }\r\n}\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.popBtn {\r\n vertical-align: bottom;\r\n margin-left: 5px;\r\n}\r\n\r\n.checkbox {\r\n max-height: 150px;\r\n overflow-y: auto;\r\n\r\n .el-checkbox {\r\n display: block;\r\n }\r\n}\r\n</style>",".popBtn {\n vertical-align: bottom;\n margin-left: 5px;\n}\n\n.checkbox {\n max-height: 150px;\n overflow-y: auto;\n}\n.checkbox .el-checkbox {\n display: block;\n}\n\n/*# sourceMappingURL=Check.vue.map */"]},media:undefined});};/* scoped */const __vue_scope_id__$d="data-v-c2830496";/* module identifier */const __vue_module_identifier__$d=undefined;/* functional template */const __vue_is_functional_template__$d=false;/* style inject SSR */ /* style inject shadow dom */const __vue_component__$d=/*#__PURE__*/normalizeComponent({render:__vue_render__$d,staticRenderFns:__vue_staticRenderFns__$d},__vue_inject_styles__$d,__vue_script__$d,__vue_scope_id__$d,__vue_is_functional_template__$d,__vue_module_identifier__$d,false,createInjector,undefined,undefined);//
|
|
2165
2165
|
var script$c={props:{setFormParams:Function,column:Object,ops:Object,// 请求参数
|
|
2166
2166
|
getConfig:Function,ruleFn:Function},components:{Dp:__vue_component__$e},watch:{ops:function(newVal,old){const{key}=this.getConfig(this.column);const ops=newVal;if(ops[key]){this.value=ops[key]||'';// 约定 基本上check类型的值都是,分割的字符串
|
|
2167
|
-
}else{this.value='';}},visible:{deep:true,handler(value){if(this.ruleFn&&value){let{option}=this.getConfig(this.column);this.list=option;}}}},data(){return{trans,visible:false,value:'',list:[]};},mounted(){let{option}=this.getConfig(this.column);this.list=option;},methods:{submit(){const{key}=this.getConfig(this.column);this.setFormParams({[key]:this.value});this.visible=false;},reset(){this.value='';}}};/* script */const __vue_script__$c=script$c;/* template */var __vue_render__$c=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",[_c("el-popover",{attrs:{placement:"bottom",width:"100%",trigger:"click","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-select",{attrs:{filterable:"",placeholder:_vm.trans("请选择")},model:{value:_vm.value,callback:function($$v){_vm.value=$$v;},expression:"value"}},_vm._l(_vm.list,function(item){return _c("el-option",{key:item.label,attrs:{label:item.label,value:item.value}});}),1),_vm._v(" "),_c("el-button",{staticClass:"popBtn",attrs:{size:"mini"},on:{click:_vm.reset}},[_vm._v(_vm._s(_vm.trans("重置")))]),_vm._v(" "),_c("el-button",{staticClass:"popBtn",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.value},slot:"reference"})],1)],1);};var __vue_staticRenderFns__$c=[];__vue_render__$c._withStripped=true;/* style */const __vue_inject_styles__$c=function(inject){if(!inject)return;inject("data-v-
|
|
2167
|
+
}else{this.value='';}},visible:{deep:true,handler(value){if(this.ruleFn&&value){let{option}=this.getConfig(this.column);this.list=option;}}}},data(){return{trans,visible:false,value:'',list:[]};},mounted(){let{option}=this.getConfig(this.column);this.list=option;},methods:{submit(){const{key}=this.getConfig(this.column);this.setFormParams({[key]:this.value});this.visible=false;},reset(){this.value='';}}};/* script */const __vue_script__$c=script$c;/* template */var __vue_render__$c=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",[_c("el-popover",{attrs:{placement:"bottom",width:"100%",trigger:"click","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-select",{attrs:{filterable:"",placeholder:_vm.trans("请选择")},model:{value:_vm.value,callback:function($$v){_vm.value=$$v;},expression:"value"}},_vm._l(_vm.list,function(item){return _c("el-option",{key:item.label,attrs:{label:item.label,value:item.value}});}),1),_vm._v(" "),_c("el-button",{staticClass:"popBtn",attrs:{size:"mini"},on:{click:_vm.reset}},[_vm._v(_vm._s(_vm.trans("重置")))]),_vm._v(" "),_c("el-button",{staticClass:"popBtn",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.value},slot:"reference"})],1)],1);};var __vue_staticRenderFns__$c=[];__vue_render__$c._withStripped=true;/* style */const __vue_inject_styles__$c=function(inject){if(!inject)return;inject("data-v-a2fcb6ba_0",{source:".popBtn[data-v-a2fcb6ba] {\n vertical-align: bottom;\n margin-left: 5px;\n}\n.radiobox[data-v-a2fcb6ba] {\n max-height: 150px;\n display: block;\n overflow-y: auto;\n}\n.radiobox .el-radio[data-v-a2fcb6ba] {\n display: block;\n}\n.radiobox .el-radio__input[data-v-a2fcb6ba] {\n margin-right: 10px;\n}\n\n/*# sourceMappingURL=Radio.vue.map */",map:{"version":3,"sources":["D:\\项目\\npm\\components\\FormTableScheme\\component\\ColHeader\\Radio.vue","Radio.vue"],"names":[],"mappings":"AAyEA;EACA,sBAAA;EACA,gBAAA;ACxEA;AD2EA;EACA,iBAAA;EACA,cAAA;EACA,gBAAA;ACxEA;AD0EA;EACA,cAAA;ACxEA;AD2EA;EACA,kBAAA;ACzEA;;AAEA,oCAAoC","file":"Radio.vue","sourcesContent":["<template>\r\n <span>\r\n <el-popover placement=\"bottom\" width=\"100%\" trigger=\"click\" v-model=\"visible\" popper-class=\"pointRecord\">\r\n <div :data-name=\"column.columnPropertyName\">\r\n <el-select v-model=\"value\" filterable :placeholder=\"trans('请选择')\">\r\n <el-option v-for=\"item in list\" :label=\"item.label\" :key=\"item.label\"\r\n :value=\"item.value\"></el-option>\r\n </el-select>\r\n <el-button class=\"popBtn\" size=\"mini\" @click=\"reset\">{{ trans('重置') }}</el-button>\r\n <el-button class=\"popBtn\" type=\"primary\" size=\"mini\" @click=\"submit\">{{ trans('确定') }}</el-button>\r\n </div>\r\n <dp :value=\"value\" slot=\"reference\" />\r\n </el-popover>\r\n </span>\r\n</template>\r\n<script>\r\nimport Dp from './dp.vue'\r\nimport trans from '../../../lang/trans'\r\n\r\nexport default {\r\n props: {\r\n setFormParams: Function,\r\n column: Object,\r\n ops: Object, // 请求参数\r\n getConfig: Function,\r\n ruleFn: Function,\r\n },\r\n components: { Dp },\r\n watch: {\r\n ops: function (newVal, old) {\r\n const { key } = this.getConfig(this.column);\r\n const ops = newVal;\r\n if (ops[key]) {\r\n this.value = ops[key] || '' // 约定 基本上check类型的值都是,分割的字符串\r\n } else {\r\n this.value = ''\r\n }\r\n },\r\n visible: {\r\n deep: true,\r\n handler(value){\r\n if(this.ruleFn && value){\r\n let { option } = this.getConfig(this.column);\r\n this.list = option\r\n }\r\n }\r\n }\r\n },\r\n data() {\r\n return {\r\n trans,\r\n visible: false,\r\n value: '',\r\n list:[]\r\n }\r\n },\r\n mounted() {\r\n let { option } = this.getConfig(this.column);\r\n this.list = option\r\n },\r\n methods: {\r\n submit() {\r\n const { key } = this.getConfig(this.column);\r\n this.setFormParams({ [key]: this.value })\r\n this.visible = false\r\n },\r\n reset() {\r\n this.value = '';\r\n }\r\n }\r\n}\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.popBtn {\r\n vertical-align: bottom;\r\n margin-left: 5px;\r\n}\r\n\r\n.radiobox {\r\n max-height: 150px;\r\n display: block;\r\n overflow-y: auto;\r\n\r\n .el-radio {\r\n display: block;\r\n }\r\n\r\n .el-radio__input {\r\n margin-right: 10px;\r\n }\r\n}\r\n</style>",".popBtn {\n vertical-align: bottom;\n margin-left: 5px;\n}\n\n.radiobox {\n max-height: 150px;\n display: block;\n overflow-y: auto;\n}\n.radiobox .el-radio {\n display: block;\n}\n.radiobox .el-radio__input {\n margin-right: 10px;\n}\n\n/*# sourceMappingURL=Radio.vue.map */"]},media:undefined});};/* scoped */const __vue_scope_id__$c="data-v-a2fcb6ba";/* module identifier */const __vue_module_identifier__$c=undefined;/* functional template */const __vue_is_functional_template__$c=false;/* style inject SSR */ /* style inject shadow dom */const __vue_component__$c=/*#__PURE__*/normalizeComponent({render:__vue_render__$c,staticRenderFns:__vue_staticRenderFns__$c},__vue_inject_styles__$c,__vue_script__$c,__vue_scope_id__$c,__vue_is_functional_template__$c,__vue_module_identifier__$c,false,createInjector,undefined,undefined);//
|
|
2168
2168
|
var script$b={props:{column:Object,setFormParams:Function,getConfig:Function,config:{type:Object,default:()=>{return{rule:{type:'date'}};}},ops:Object// 请求参数
|
|
2169
2169
|
},components:{Dp:__vue_component__$e},watch:{ops:function(newVal){const{key}=this.getConfig(this.column);const ops=newVal;if(ops[key]){this.value=moment(ops[key]);}else{this.value='';}}},data(){return{trans,visible:false,value:''};},methods:{submit(){const{rule,key}=this.getConfig(this.column);const{format}=rule;if(this.value){const str=`${moment(this.value).format(format)}`;this.setFormParams({[key]:str});this.visible=false;}},reset(){this.value='';}}};/* 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:"400",trigger:"click","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"},attrs:{type:_vm.config.rule.type,align:"right","unlink-panels":"","range-separator":_vm.trans("至"),"start-placeholder":_vm.trans("开始日期"),"end-placeholder":_vm.trans("结束日期")},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.value},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);//
|
|
2170
2170
|
var script$a={props:{column:Object,setFormParams:Function,config:Object,ops:Object,// 请求参数,
|
|
@@ -2194,7 +2194,7 @@ getConfig:Function},components:{Dp:__vue_component__$e},watch:{ops:function(newV
|
|
|
2194
2194
|
}else{this.value=[];}}},mounted(){let{key,ruleCorrespond,rule}=this.getConfig(this.column);this.key=key;if(rule.limit){this.limit=rule.limit;}this.ruleCorrespond=ruleCorrespond;},data(){return{trans,visible:false,limit:50,asyncList:[],value:'',ruleCorrespond:'',key:''};},methods:{fnClick(res){this.ruleCorrespond(res);},submit(){const key=this.key;this.setFormParams({[key]:this.value.join(',')});this.visible=false;},reset(){this.value=[];}}};/* script */const __vue_script__$5=script$5;/* template */var __vue_render__$5=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",[_c("el-popover",{attrs:{placement:"bottom",width:"100%",trigger:"click","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-select",{staticStyle:{width:"100%","margin-bottom":"10px"},attrs:{filterable:"",clearable:"",remote:"",multiple:"","multiple-limit":_vm.limit,"reserve-keyword":"",placeholder:_vm.trans("请选择"),"remote-method":_vm.fnClick},on:{focus:function($event){return _vm.fnClick("");}},model:{value:_vm.value,callback:function($$v){_vm.value=$$v;},expression:"value"}},_vm._l(_vm.asyncList,function(item){return _c("el-option",{key:""+item.schemeKey,attrs:{label:""+item.schemeLabel,value:item.schemeValue}});}),1),_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.value},slot:"reference"})],1)],1);};var __vue_staticRenderFns__$5=[];__vue_render__$5._withStripped=true;/* style */const __vue_inject_styles__$5=undefined;/* scoped */const __vue_scope_id__$5=undefined;/* module identifier */const __vue_module_identifier__$5=undefined;/* functional template */const __vue_is_functional_template__$5=false;/* style inject */ /* style inject SSR */ /* style inject shadow dom */const __vue_component__$5=/*#__PURE__*/normalizeComponent({render:__vue_render__$5,staticRenderFns:__vue_staticRenderFns__$5},__vue_inject_styles__$5,__vue_script__$5,__vue_scope_id__$5,__vue_is_functional_template__$5,__vue_module_identifier__$5,false,undefined,undefined,undefined);//
|
|
2195
2195
|
var script$4={name:"cascader",props:{config:Object,setFormParams:Function,column:Object,ops:Object,// 请求参数
|
|
2196
2196
|
getConfig:Function},components:{Dp:__vue_component__$e},watch:{ops:function(newVal,old){const key=this.key;const ops=newVal;if(ops[key]){this.value=ops[key].split(",");// 约定 基本上check类型的值都是、分割的字符串
|
|
2197
|
-
}else{this.value=[];}},visible:{deep:true,handler(value){if(this.ruleFn&&value){let{option}=this.getConfig(this.column);this.list=option;}}}},mounted(){let{key,option,rule}=this.getConfig(this.column);this.option=option;this.key=key;this.componentOriginProps={...this.componentOriginProps,...rule.componentOriginProps};if(rule.configProps){this.configProps={...this.configProps,...rule.configProps};}},data(){return{trans,visible:false,limit:50,option:[],value:"",ruleCorrespond:"",key:"",multiple:false,componentOriginProps:{label:"a",value:"b",multiple:true,expandTrigger:"hover"},configProps:{filterable:true}};},methods:{fnClick(res){this.ruleCorrespond(res);},submit(){const key=this.key;this.setFormParams({[key]:this.value.join(",")});this.visible=false;},reset(){this.value=[];}}};/* script */const __vue_script__$4=script$4;/* template */var __vue_render__$4=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",[_c("el-popover",{attrs:{placement:"bottom",width:"100%",trigger:"click","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-cascader",_vm._b({staticStyle:{width:"300px"},attrs:{clearable:"",placeholder:_vm.trans("请选择"),options:_vm.option,props:_vm.componentOriginProps},model:{value:_vm.value,callback:function($$v){_vm.value=$$v;},expression:"value"}},"el-cascader",_vm.configProps,false)),_vm._v(" "),_c("el-button",{staticClass:"popBtn",attrs:{size:"mini"},on:{click:_vm.reset}},[_vm._v(_vm._s(_vm.trans("重置")))]),_vm._v(" "),_c("el-button",{staticClass:"popBtn",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.value},slot:"reference"})],1)],1);};var __vue_staticRenderFns__$4=[];__vue_render__$4._withStripped=true;/* style */const __vue_inject_styles__$4=function(inject){if(!inject)return;inject("data-v-
|
|
2197
|
+
}else{this.value=[];}},visible:{deep:true,handler(value){if(this.ruleFn&&value){let{option}=this.getConfig(this.column);this.list=option;}}}},mounted(){let{key,option,rule}=this.getConfig(this.column);this.option=option;this.key=key;this.componentOriginProps={...this.componentOriginProps,...rule.componentOriginProps};if(rule.configProps){this.configProps={...this.configProps,...rule.configProps};}},data(){return{trans,visible:false,limit:50,option:[],value:"",ruleCorrespond:"",key:"",multiple:false,componentOriginProps:{label:"a",value:"b",multiple:true,expandTrigger:"hover"},configProps:{filterable:true}};},methods:{fnClick(res){this.ruleCorrespond(res);},submit(){const key=this.key;this.setFormParams({[key]:this.value.join(",")});this.visible=false;},reset(){this.value=[];}}};/* script */const __vue_script__$4=script$4;/* template */var __vue_render__$4=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",[_c("el-popover",{attrs:{placement:"bottom",width:"100%",trigger:"click","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-cascader",_vm._b({staticStyle:{width:"300px"},attrs:{clearable:"",placeholder:_vm.trans("请选择"),options:_vm.option,props:_vm.componentOriginProps},model:{value:_vm.value,callback:function($$v){_vm.value=$$v;},expression:"value"}},"el-cascader",_vm.configProps,false)),_vm._v(" "),_c("el-button",{staticClass:"popBtn",attrs:{size:"mini"},on:{click:_vm.reset}},[_vm._v(_vm._s(_vm.trans("重置")))]),_vm._v(" "),_c("el-button",{staticClass:"popBtn",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.value},slot:"reference"})],1)],1);};var __vue_staticRenderFns__$4=[];__vue_render__$4._withStripped=true;/* style */const __vue_inject_styles__$4=function(inject){if(!inject)return;inject("data-v-2c3851ff_0",{source:".popBtn[data-v-2c3851ff] {\n vertical-align: bottom;\n margin-left: 5px;\n}\n\n/*# sourceMappingURL=Cascader.vue.map */",map:{"version":3,"sources":["D:\\项目\\npm\\components\\FormTableScheme\\component\\ColHeader\\Cascader.vue","Cascader.vue"],"names":[],"mappings":"AAqHA;EACA,sBAAA;EACA,gBAAA;ACpHA;;AAEA,uCAAuC","file":"Cascader.vue","sourcesContent":["<template>\r\n <span>\r\n <el-popover\r\n placement=\"bottom\"\r\n width=\"100%\"\r\n trigger=\"click\"\r\n v-model=\"visible\"\r\n popper-class=\"pointRecord\"\r\n >\r\n <div :data-name=\"column.columnPropertyName\">\r\n <el-cascader\r\n style=\"width: 300px\"\r\n v-model=\"value\"\r\n clearable\r\n :placeholder=\"trans('请选择')\"\r\n :options=\"option\"\r\n :props=\"componentOriginProps\"\r\n v-bind=\"configProps\"\r\n >\r\n </el-cascader>\r\n <el-button class=\"popBtn\" size=\"mini\" @click=\"reset\">{{\r\n trans(\"重置\")\r\n }}</el-button>\r\n <el-button class=\"popBtn\" type=\"primary\" size=\"mini\" @click=\"submit\">{{\r\n trans(\"确定\")\r\n }}</el-button>\r\n </div>\r\n <dp :value=\"value\" slot=\"reference\" />\r\n </el-popover>\r\n </span>\r\n</template>\r\n<script>\r\nimport Dp from \"./dp.vue\";\r\nimport trans from \"../../../lang/trans\";\r\n\r\nexport default {\r\n name: \"cascader\",\r\n props: {\r\n config: Object,\r\n setFormParams: Function,\r\n column: Object,\r\n ops: Object, // 请求参数\r\n getConfig: Function,\r\n },\r\n components: { Dp },\r\n watch: {\r\n ops: function (newVal, old) {\r\n const key = this.key;\r\n const ops = newVal;\r\n if (ops[key]) {\r\n this.value = ops[key].split(\",\"); // 约定 基本上check类型的值都是、分割的字符串\r\n } else {\r\n this.value = [];\r\n }\r\n },\r\n visible: {\r\n deep: true,\r\n handler(value) {\r\n if (this.ruleFn && value) {\r\n let { option } = this.getConfig(this.column);\r\n this.list = option;\r\n }\r\n },\r\n },\r\n },\r\n mounted() {\r\n let { key, option, rule } = this.getConfig(this.column);\r\n this.option = option;\r\n this.key = key;\r\n this.componentOriginProps = {\r\n ...this.componentOriginProps,\r\n ...rule.componentOriginProps,\r\n };\r\n if (rule.configProps) {\r\n this.configProps = {\r\n ...this.configProps,\r\n ...rule.configProps,\r\n };\r\n }\r\n },\r\n data() {\r\n return {\r\n trans,\r\n visible: false,\r\n limit: 50,\r\n option: [],\r\n value: \"\",\r\n ruleCorrespond: \"\",\r\n key: \"\",\r\n multiple: false,\r\n componentOriginProps: {\r\n label: \"a\",\r\n value: \"b\",\r\n multiple: true,\r\n expandTrigger: \"hover\",\r\n },\r\n configProps: {\r\n filterable: true,\r\n },\r\n };\r\n },\r\n methods: {\r\n fnClick(res) {\r\n this.ruleCorrespond(res);\r\n },\r\n submit() {\r\n const key = this.key;\r\n this.setFormParams({ [key]: this.value.join(\",\") });\r\n this.visible = false;\r\n },\r\n reset() {\r\n this.value = [];\r\n },\r\n },\r\n};\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.popBtn {\r\n vertical-align: bottom;\r\n margin-left: 5px;\r\n}\r\n</style>",".popBtn {\n vertical-align: bottom;\n margin-left: 5px;\n}\n\n/*# sourceMappingURL=Cascader.vue.map */"]},media:undefined});};/* scoped */const __vue_scope_id__$4="data-v-2c3851ff";/* module identifier */const __vue_module_identifier__$4=undefined;/* functional template */const __vue_is_functional_template__$4=false;/* style inject SSR */ /* style inject shadow dom */const __vue_component__$4=/*#__PURE__*/normalizeComponent({render:__vue_render__$4,staticRenderFns:__vue_staticRenderFns__$4},__vue_inject_styles__$4,__vue_script__$4,__vue_scope_id__$4,__vue_is_functional_template__$4,__vue_module_identifier__$4,false,createInjector,undefined,undefined);var has$1=Object.prototype.hasOwnProperty;var hexTable=function(){var array=[];for(var i=0;i<256;++i){array.push('%'+((i<16?'0':'')+i.toString(16)).toUpperCase());}return array;}();var compactQueue=function compactQueue(queue){var obj;while(queue.length){var item=queue.pop();obj=item.obj[item.prop];if(Array.isArray(obj)){var compacted=[];for(var j=0;j<obj.length;++j){if(typeof obj[j]!=='undefined'){compacted.push(obj[j]);}}item.obj[item.prop]=compacted;}}return obj;};var arrayToObject=function arrayToObject(source,options){var obj=options&&options.plainObjects?Object.create(null):{};for(var i=0;i<source.length;++i){if(typeof source[i]!=='undefined'){obj[i]=source[i];}}return obj;};var merge=function merge(target,source,options){if(!source){return target;}if(typeof source!=='object'){if(Array.isArray(target)){target.push(source);}else if(target&&typeof target==='object'){if(options&&(options.plainObjects||options.allowPrototypes)||!has$1.call(Object.prototype,source)){target[source]=true;}}else{return[target,source];}return target;}if(!target||typeof target!=='object'){return[target].concat(source);}var mergeTarget=target;if(Array.isArray(target)&&!Array.isArray(source)){mergeTarget=arrayToObject(target,options);}if(Array.isArray(target)&&Array.isArray(source)){source.forEach(function(item,i){if(has$1.call(target,i)){var targetItem=target[i];if(targetItem&&typeof targetItem==='object'&&item&&typeof item==='object'){target[i]=merge(targetItem,item,options);}else{target.push(item);}}else{target[i]=item;}});return target;}return Object.keys(source).reduce(function(acc,key){var value=source[key];if(has$1.call(acc,key)){acc[key]=merge(acc[key],value,options);}else{acc[key]=value;}return acc;},mergeTarget);};var assign=function assignSingleSource(target,source){return Object.keys(source).reduce(function(acc,key){acc[key]=source[key];return acc;},target);};var decode$2=function(str){try{return decodeURIComponent(str.replace(/\+/g,' '));}catch(e){return str;}};var encode=function encode(str){// This code was originally written by Brian White (mscdex) for the io.js core querystring library.
|
|
2198
2198
|
// It has been adapted here for stricter adherence to RFC 3986
|
|
2199
2199
|
if(str.length===0){return str;}var string=typeof str==='string'?str:String(str);var out='';for(var i=0;i<string.length;++i){var c=string.charCodeAt(i);if(c===0x2D// -
|
|
2200
2200
|
||c===0x2E// .
|
|
@@ -2222,13 +2222,13 @@ service.interceptors.request.use(config=>{// do something before request is sent
|
|
|
2222
2222
|
if(window.HLEncryption){config.headers=window.HLEncryption.setRequestHeaders({url:(config.url.indexOf('/gateway')>-1?'':config.baseURL)+config.url,headers:config.headers});}return config;},error=>{// do something with request error
|
|
2223
2223
|
console.log(error);// for debug
|
|
2224
2224
|
return Promise.reject(error);});// response interceptor
|
|
2225
|
-
service.interceptors.response.use(/**
|
|
2226
|
-
* If you want to get http information such as headers or status
|
|
2227
|
-
* Please return response => response
|
|
2228
|
-
*/ /**
|
|
2229
|
-
* Determine the request status by custom code
|
|
2230
|
-
* Here is just an example
|
|
2231
|
-
* You can also judge the status by HTTP Status Code
|
|
2225
|
+
service.interceptors.response.use(/**
|
|
2226
|
+
* If you want to get http information such as headers or status
|
|
2227
|
+
* Please return response => response
|
|
2228
|
+
*/ /**
|
|
2229
|
+
* Determine the request status by custom code
|
|
2230
|
+
* Here is just an example
|
|
2231
|
+
* You can also judge the status by HTTP Status Code
|
|
2232
2232
|
*/response=>{const res=response.data;// 解密
|
|
2233
2233
|
if(window.HLEncryption){res.data=window.HLEncryption.decryptResponse(response.headers,res);}if(res.code==-1||res.code==-2){console.log(res.msg);return Promise.reject(new Error(res.msg||'Error'));}else{// Message({
|
|
2234
2234
|
// message: res.msg,
|
|
@@ -2266,7 +2266,7 @@ if(this.selectKey){// 如果默认keywordsKEY有值且不是当前选中的key
|
|
|
2266
2266
|
if(ops[this.keywordsKEY]&&this.selectKey!==this.keywordsKEY){ops[this.selectKey]=ops[this.keywordsKEY];delete ops[this.keywordsKEY];}// 删除其他在selectKeyList中的key值（除了当前选中的）
|
|
2267
2267
|
allSelectKeys.forEach(key=>{if(key!==this.selectKey&&ops[key]){delete ops[key];}});}}else if(this.selectKey&&this.selectKey!==this.keywordsKEY&&ops[this.keywordsKEY]){// 兼容原有逻辑
|
|
2268
2268
|
ops[this.selectKey]=ops[this.keywordsKEY];delete ops[this.keywordsKEY];}// 根据参数画tag
|
|
2269
|
-
formToValue(ops,this.columnsShow,this.colChange,this.ruleFn);const{pageSize,skipCount}=ops;this.listLoading=true;this.hooks(ops);this.getApi({...ops,pageSize:pageSize,skipCount:(skipCount-1)*pageSize,reqTypeSign:"config_table"}).then(response=>{if(response.result==="success"){if(this.formatData){this.list=this.formatData(response.data);}else{this.list=response.data||[];}this.ops=ops;this.count=response.count;}else{this.$message.error(response.msg);}this.$emit("update:countNum",this.count);this.listLoading=false;this.tableKey=Math.random();},err=>{this.listLoading=false;});},handleSelectionChange(val){let formatVal=val;if(this.selectType==="single"){formatVal=[val.pop()];let other=val;if(other&&other.length>0){other.forEach(row=>{this.$refs.FormTable.toggleRowSelection(row,false);});this.$refs.FormTable.toggleRowSelection(formatVal[0],true);}}this.selectcheck(formatVal);this.multipleSelection=formatVal;this.$emit("selectcheck",formatVal);},getNewCol(show,all){this.columnsShow=show;this.columns=all;this.tableKey=Math.random();// table不刷新 强制key
|
|
2269
|
+
formToValue(ops,this.columnsShow,this.colChange,this.ruleFn);const{pageSize,skipCount}=ops;this.listLoading=true;this.hooks(ops);this.getApi({...ops,pageSize:pageSize,skipCount:(skipCount-1)*pageSize,reqTypeSign:"config_table"}).then(response=>{if(response.result==="success"){if(this.formatData){this.list=this.formatData(response.data);}else{this.list=response.data||[];}this.ops=ops;this.count=response.count;}else{this.$message.error(response.msg);}this.$emit("update:countNum",this.count);this.listLoading=false;this.tableKey=Math.random();this.$refs.FormTable.doLayout();},err=>{this.listLoading=false;});},handleSelectionChange(val){let formatVal=val;if(this.selectType==="single"){formatVal=[val.pop()];let other=val;if(other&&other.length>0){other.forEach(row=>{this.$refs.FormTable.toggleRowSelection(row,false);});this.$refs.FormTable.toggleRowSelection(formatVal[0],true);}}this.selectcheck(formatVal);this.multipleSelection=formatVal;this.$emit("selectcheck",formatVal);},getNewCol(show,all){this.columnsShow=show;this.columns=all;this.tableKey=Math.random();// table不刷新 强制key
|
|
2270
2270
|
},closeTag(tag){const index=this.tags.findIndex(i=>i.name===tag.name);const delItem=this.tags.splice(index,1)[0];const{key,type}=delItem;if(type==="dateRange"||type==="inputScope"){this.setFormParams({[key[0]]:"",[key[1]]:"",[key[2]]:""},"remove");}else{this.setFormParams({[key]:""},"remove");}},handleSelectAll(val){this.$emit("selectAll",Array.from(val));},handleSelect(selection,row){this.$emit("select",{selection,row});},closeAllTag(){const delKeys={};this.tags.forEach(i=>{const{key,type}=i;if(type==="dateRange"||type==="inputScope"){delKeys[key[0]]="";delKeys[key[1]]="";}else{delKeys[key]="";}});this.tags=[];this.setFormParams({...delKeys},"remove");},colChange(objTags){// const selectIndex =this.tags.findIndex(i => i.name === arrow)
|
|
2271
2271
|
// if(selectIndex >= 0){
|
|
2272
2272
|
// let select = this.tags[selectIndex]
|
|
@@ -2280,7 +2280,7 @@ formToValue(ops,this.columnsShow,this.colChange,this.ruleFn);const{pageSize,skip
|
|
|
2280
2280
|
// } else {
|
|
2281
2281
|
// this.tags = this.tags.concat([{'name':arrow, value:data.value, str:data.str, key:data.searchKey, type: data.type }])
|
|
2282
2282
|
// }
|
|
2283
|
-
const arr=[];for(let key in objTags){arr.push(objTags[key]);}this.tags=[].concat(arr);},actionModal(){this.dialogFormVisible=true;this.columns;this.columns=this.columns.map(i=>{const isSelect=this.columnsShow.find(j=>j.columnPropertyName===i.columnPropertyName);i.show=!!isSelect;return i;});}}};/* script */const __vue_script__$3=script$3;/* template */var __vue_render__$3=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("div",{staticClass:"container"},[_c("div",{staticClass:"optBox"},[_c("div",{staticClass:"leftBtn"},[_vm._t("leftBtn")],2),_vm._v(" "),_c("div",{staticClass:"rightBtn"},[_vm.hasSearch?_c("el-input",{directives:[{name:"show",rawName:"v-show",value:_vm.searchType=="textarea",expression:"searchType == 'textarea'"}],ref:"myTextarea",class:{"input-with-select":true,textareaSpec:_vm.searchType=="textarea"},attrs:{type:"textarea",placeholder:_vm.searchPlaceholder||_vm.trans("请输入内容"),rows:10},on:{blur:function($event){return _vm.changeType(0);}},nativeOn:{keyup:function($event){if(!$event.type.indexOf("key")&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){return null;}return _vm.getList({skipCount:1});}},model:{value:_vm.searchParams[_vm.getCurrentKeywordsKey()],callback:function($$v){_vm.$set(_vm.searchParams,_vm.getCurrentKeywordsKey(),typeof $$v==="string"?$$v.trim():$$v);},expression:"searchParams[getCurrentKeywordsKey()]"}},[_c("el-button",{attrs:{slot:"append",icon:"el-icon-search"},on:{click:function($event){return _vm.getList({skipCount:1});}},slot:"append"})],1):_vm._e(),_vm._v(" "),_vm.hasSearch?_c("el-input",{directives:[{name:"show",rawName:"v-show",value:_vm.searchType=="text",expression:"searchType == 'text'"}],class:{"input-with-select":true,width400:_vm.selectKeyList.length>0},attrs:{placeholder:_vm.searchPlaceholder||_vm.trans("请输入内容")},on:{focus:function($event){return _vm.changeType(1);}},nativeOn:{keyup:function($event){if(!$event.type.indexOf("key")&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){return null;}return _vm.getList({skipCount:1});}},model:{value:_vm.searchParams[_vm.getCurrentKeywordsKey()],callback:function($$v){_vm.$set(_vm.searchParams,_vm.getCurrentKeywordsKey(),typeof $$v==="string"?$$v.trim():$$v);},expression:"searchParams[getCurrentKeywordsKey()]"}},[_vm.selectKeyList.length>0?_c("el-select",{staticStyle:{width:"120px"},attrs:{slot:"prepend",placeholder:"请选择"},on:{change:_vm.handleSelectKeyChange},slot:"prepend",model:{value:_vm.selectKey,callback:function($$v){_vm.selectKey=$$v;},expression:"selectKey"}},_vm._l(_vm.selectKeyList,function(item){return _c("el-option",{key:item.value,attrs:{label:item.label,value:item.value}});}),1):_vm._e(),_vm._v(" "),_c("el-button",{attrs:{slot:"append",icon:"el-icon-search"},on:{click:function($event){return _vm.getList({skipCount:1});}},slot:"append"})],1):_vm._e(),_vm._v(" "),_c("el-divider",{attrs:{direction:"vertical"}}),_vm._v(" "),_c("el-button",{attrs:{size:"mini"},on:{click:_vm.actionModal}},[_c("svg",{staticClass:"icon",staticStyle:{color:"#10c2b0",cursor:"pointer"},attrs:{"aria-hidden":"true"}},[_c("use",{attrs:{"xlink:href":"#fontFamily-a-web20_shaixuanpeizhi"}})])])],1)]),_vm._v(" "),_c("div",{staticClass:"tagBox"},_vm._l(_vm.tags,function(tag){return _c("el-tag",{key:tag.name,attrs:{closable:"",type:"info"},on:{close:function($event){return _vm.closeTag(tag);}}},[_c("div",{staticClass:"tagItem"},[_vm._v(_vm._s(tag.name+":"+tag.str))])]);}),1),_vm._v(" "),_vm.tags.length>1?_c("el-button",{staticClass:"clearAll",on:{click:_vm.closeAllTag}},[_vm._v(_vm._s(_vm.trans("取消全部筛选")))]):_vm._e(),_vm._v(" "),_c("el-table",{directives:[{name:"loading",rawName:"v-loading",value:_vm.listLoading,expression:"listLoading"}],key:_vm.tableKey,ref:"FormTable",staticClass:"table",attrs:{data:_vm.list,"row-key":_vm.rowKey,border:"",fit:""},on:{"sort-change":function($event){return _vm.$emit("sortChange",$event);},"selection-change":_vm.handleSelectionChange,"header-dragend":_vm.dragHead,"select-all":_vm.handleSelectAll,select:_vm.handleSelect}},[_vm.hasSelection?_c("el-table-column",{attrs:{type:"selection",width:"50",selectable:_vm.selectable}}):_vm._e(),_vm._v(" "),_vm.hasIndex?_c("el-table-column",{attrs:{label:_vm.trans("序号"),type:"index",width:"50"}}):_vm._e(),_vm._v(" "),_vm._t("additional"),_vm._v(" "),_vm._l(_vm.colDisplayFn(_vm.columnsShow),function(item){return _c("el-table-column",{key:item.columnCode,attrs:{label:item.columnPropertyName,fixed:item.isFixed==1&&"left","min-width":(item.defaultWidth||item.minWidth)+20,"show-overflow-tooltip":"",sortable:_vm.sortableList[item.columnProperty]||false,prop:item.columnProperty,align:"center"},scopedSlots:_vm._u([{key:"header",fn:function(ref){var column=ref.column;return[_c("span",[_vm._v(_vm._s(column.label))]),_vm._v(" "),_vm.$scopedSlots[item.columnProperty+"Header"]?_c("span",[_c("tips",[_vm._t(item.columnProperty+"Header")],2)],1):_vm._e(),_vm._v(" "),item.queryConfig&&item.queryConfig.type&&item.isQuery?_c(item.queryConfig.type,{tag:"component",attrs:{config:item.queryConfig,column:item,setFormParams:_vm.setFormParams,ops:_vm.ops,getConfig:_vm.getConfig,ruleFn:_vm.ruleFn[item.columnProperty]}}):_vm._e()];}},{key:"default",fn:function(ref){var row=ref.row;return[_vm.$scopedSlots[item.columnProperty]?_c("span",[_vm._t(item.columnProperty,null,{props:row,queryConfig:item.queryConfig,options:_vm.getConfig(item),label:_vm.getLabel(item,row)})],2):_c("span",[_vm._v(_vm._s(_vm.getLabel(item,row)))])];}}],null,true)});}),_vm._v(" "),_vm.$scopedSlots.actionBtn?_c("el-table-column",{attrs:{label:_vm.trans("操作"),align:"center",width:_vm.actionWidth,"class-name":"small-padding",fixed:"right"},scopedSlots:_vm._u([{key:"default",fn:function(ref){var row=ref.row;return[_vm._t("actionBtn",null,{props:row})];}}],null,true)}):_vm._e()],2),_vm._v(" "),_c("div",{staticClass:"btmBox"},[_c("div",{staticClass:"btmLeft"},[_vm._t("btmLeft")],2),_vm._v(" "),_c("pagination",{directives:[{name:"show",rawName:"v-show",value:_vm.count>0,expression:"count > 0"}],staticClass:"text-right mt-0 pagi",attrs:{autoScroll:_vm.isAutoScroll,total:_vm.count,page:_vm.searchParams.skipCount,limit:_vm.searchParams.pageSize},on:{"update:page":function($event){return _vm.$set(_vm.searchParams,"skipCount",$event);},"update:limit":function($event){return _vm.$set(_vm.searchParams,"pageSize",$event);},pagination:_vm.getList}})],1),_vm._v(" "),_vm.columns.length>0?_c("select-col",{attrs:{saveMyTemplateColumns:_vm.saveMyTemplateColumns,templateKey:_vm.templateKey,getNewCol:_vm.getNewCol,initialColumns:_vm.columns,columnsShow:_vm.columnsShow,visible:_vm.dialogFormVisible},on:{"update:visible":function($event){_vm.dialogFormVisible=$event;}}}):_vm._e()],1);};var __vue_staticRenderFns__$3=[];__vue_render__$3._withStripped=true;/* style */const __vue_inject_styles__$3=function(inject){if(!inject)return;inject("data-v-ee0231a6_0",{source:"\n.el-table__empty-block {\n background: #fbfbfb;\n}\n",map:{"version":3,"sources":["/Users/chenlei/HLcode/test/components/FormTableScheme/index.vue"],"names":[],"mappings":";AAiqBA;EACA,mBAAA;AACA","file":"index.vue","sourcesContent":["<template>\n <div class=\"container\">\n <div class=\"optBox\">\n <div class=\"leftBtn\">\n <slot name=\"leftBtn\"></slot>\n </div>\n <div class=\"rightBtn\">\n <el-input\n v-if=\"hasSearch\"\n v-show=\"searchType == 'textarea'\"\n type=\"textarea\"\n @keyup.enter.native=\"getList({ skipCount: 1 })\"\n :placeholder=\"searchPlaceholder || trans('请输入内容')\"\n :class=\"{\n 'input-with-select': true,\n textareaSpec: searchType == 'textarea',\n }\"\n v-model.trim=\"searchParams[getCurrentKeywordsKey()]\"\n @blur=\"changeType(0)\"\n :rows=\"10\"\n ref=\"myTextarea\"\n >\n <el-button\n slot=\"append\"\n icon=\"el-icon-search\"\n @click=\"getList({ skipCount: 1 })\"\n ></el-button>\n </el-input>\n <el-input\n v-if=\"hasSearch\"\n v-show=\"searchType == 'text'\"\n @keyup.enter.native=\"getList({ skipCount: 1 })\"\n :placeholder=\"searchPlaceholder || trans('请输入内容')\"\n :class=\"{\n 'input-with-select': true,\n width400: selectKeyList.length > 0,\n }\"\n v-model.trim=\"searchParams[getCurrentKeywordsKey()]\"\n @focus=\"changeType(1)\"\n >\n <el-select\n v-model=\"selectKey\"\n slot=\"prepend\"\n placeholder=\"请选择\"\n v-if=\"selectKeyList.length > 0\"\n style=\"width: 120px\"\n @change=\"handleSelectKeyChange\"\n >\n <el-option\n v-for=\"item in selectKeyList\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\"\n ></el-option>\n </el-select>\n <el-button\n slot=\"append\"\n icon=\"el-icon-search\"\n @click=\"getList({ skipCount: 1 })\"\n ></el-button>\n </el-input>\n <el-divider direction=\"vertical\"></el-divider>\n <el-button size=\"mini\" @click=\"actionModal\">\n <svg\n class=\"icon\"\n aria-hidden=\"true\"\n style=\"color: #10c2b0; cursor: pointer\"\n >\n <use xlink:href=\"#fontFamily-a-web20_shaixuanpeizhi\"></use>\n </svg>\n </el-button>\n </div>\n </div>\n\n <div class=\"tagBox\">\n <el-tag\n v-for=\"tag in tags\"\n :key=\"tag.name\"\n closable\n @close=\"closeTag(tag)\"\n type=\"info\"\n >\n <div class=\"tagItem\">{{ `${tag.name}:${tag.str}` }}</div>\n </el-tag>\n </div>\n <el-button class=\"clearAll\" v-if=\"tags.length > 1\" @click=\"closeAllTag\">{{\n trans(\"取消全部筛选\")\n }}</el-button>\n <el-table\n ref=\"FormTable\"\n v-loading=\"listLoading\"\n :data=\"list\"\n :row-key=\"rowKey\"\n border\n fit\n @sort-change=\"$emit('sortChange', $event)\"\n @selection-change=\"handleSelectionChange\"\n @header-dragend=\"dragHead\"\n @select-all=\"handleSelectAll\"\n @select=\"handleSelect\"\n class=\"table\"\n :key=\"tableKey\"\n >\n <el-table-column\n v-if=\"hasSelection\"\n type=\"selection\"\n width=\"50\"\n :selectable=\"selectable\"\n >\n </el-table-column>\n <el-table-column\n v-if=\"hasIndex\"\n :label=\"trans('序号')\"\n type=\"index\"\n width=\"50\"\n >\n </el-table-column>\n <slot name=\"additional\"></slot>\n <el-table-column\n v-for=\"item in colDisplayFn(columnsShow)\"\n :key=\"item.columnCode\"\n :label=\"item.columnPropertyName\"\n :fixed=\"item.isFixed == 1 && 'left'\"\n :min-width=\"(item.defaultWidth || item.minWidth) + 20\"\n show-overflow-tooltip\n :sortable=\"sortableList[item.columnProperty] || false\"\n :prop=\"item.columnProperty\"\n align=\"center\"\n >\n <template slot=\"header\" slot-scope=\"{ column }\">\n <span>{{ column.label }}</span>\n <span v-if=\"$scopedSlots[`${item.columnProperty}Header`]\">\n <tips>\n <slot :name=\"`${item.columnProperty}Header`\"></slot>\n </tips>\n </span>\n <component\n v-if=\"item.queryConfig && item.queryConfig.type && item.isQuery\"\n v-bind:is=\"item.queryConfig.type\"\n :config=\"item.queryConfig\"\n :column=\"item\"\n :setFormParams=\"setFormParams\"\n :ops=\"ops\"\n :getConfig=\"getConfig\"\n :ruleFn=\"ruleFn[item.columnProperty]\"\n ></component>\n </template>\n <template slot-scope=\"{ row }\">\n <span v-if=\"$scopedSlots[item.columnProperty]\">\n <slot\n :name=\"item.columnProperty\"\n :props=\"row\"\n :queryConfig=\"item.queryConfig\"\n :options=\"getConfig(item)\"\n :label=\"getLabel(item, row)\"\n ></slot>\n </span>\n <span v-else>{{ getLabel(item, row) }}</span>\n </template>\n </el-table-column>\n <el-table-column\n :label=\"trans('操作')\"\n align=\"center\"\n :width=\"actionWidth\"\n class-name=\"small-padding\"\n v-if=\"$scopedSlots.actionBtn\"\n fixed=\"right\"\n >\n <template slot-scope=\"{ row }\">\n <slot name=\"actionBtn\" :props=\"row\"> </slot>\n </template>\n </el-table-column>\n </el-table>\n <div class=\"btmBox\">\n <div class=\"btmLeft\">\n <slot name=\"btmLeft\"></slot>\n </div>\n <pagination\n v-show=\"count > 0\"\n :autoScroll=\"isAutoScroll\"\n class=\"text-right mt-0 pagi\"\n :total=\"count\"\n :page.sync=\"searchParams.skipCount\"\n :limit.sync=\"searchParams.pageSize\"\n @pagination=\"getList\"\n />\n </div>\n\n <select-col\n v-if=\"columns.length > 0\"\n :saveMyTemplateColumns=\"saveMyTemplateColumns\"\n :templateKey=\"templateKey\"\n :getNewCol=\"getNewCol\"\n :initialColumns=\"columns\"\n :columnsShow=\"columnsShow\"\n :visible.sync=\"dialogFormVisible\"\n ></select-col>\n </div>\n</template>\n<script>\n/**\n * 表格\n * fetchParam {object} 请求参数\n * countNum {number} 数据总数 用法:countNum.sync=\"count\"\n * getApi {function} 请求接口\n * formatData {function} 返回参数格式化\n * sortChange {function} 排序事件函数\n * setHeight {string || number} 表格高度\n * selectcheck {function} 选择监听\n * selectable { function } checkbox 筛选禁用\n */\n\nimport {\n SelectCol,\n Check,\n Date,\n Inputsp,\n DateRange,\n Tips,\n pageTemplatecs,\n Radio,\n InputScope,\n Selectsp,\n Cascader,\n} from \"./component/index\";\nimport Pagination from \"@/components/Pagination\";\nimport formatSwitch from \"./format\";\nimport formToValue from \"./component/ColHeader/dataFormat\";\nimport trans from \"../lang/trans\";\nimport getOptions from \"./component/utils\";\nexport default {\n name: \"FormTableScheme\",\n components: {\n SelectCol,\n Check,\n Date,\n Inputsp,\n Pagination,\n DateRange,\n Tips,\n Radio,\n InputScope,\n Selectsp,\n Cascader,\n },\n model: {\n event: \"sortChange\",\n },\n data() {\n return {\n trans,\n dialogFormVisible: false,\n formatSwitch,\n list: [],\n saveMyTemplateColumns:\n this.requestFn.pageTemplatecs.saveMyTemplateColumns,\n columns: [],\n columnsShow: [],\n checkList: [\"复选框 A\"],\n tags: [],\n count: this.countNum,\n keywords: this.keywords,\n searchParams: {\n ...this.fetchParam,\n [this.keywordsKEY]: \"\",\n pageSize: 20,\n skipCount: 1,\n },\n listLoading: false,\n ops: {},\n multipleSelection: [],\n tableKey: \"first\",\n searchType: \"text\",\n selectKey: (this.selectKeyList[0] && this.selectKeyList[0].value) || \"\",\n };\n },\n watch: {\n fetchParam: {\n deep: true,\n immediate: true,\n handler() {\n this.searchParams = {\n ...this.searchParams,\n ...this.fetchParam,\n };\n },\n },\n },\n props: {\n bigSearch: {\n default: false,\n type: Boolean,\n },\n fetchParam: {\n // 上传时附带的参数\n default: () => {\n return {};\n },\n type: Object,\n },\n hasSearch: {\n default: true,\n type: Boolean,\n },\n rowKey: {\n default: \"columnProperty\",\n type: String,\n },\n selectKeyList: {\n default: () => {\n return [];\n },\n type: Array,\n },\n countNum: {\n // 总数\n default: 0,\n type: Number,\n },\n formatData: Function,\n isAutoScroll: {\n default: true,\n type: Boolean,\n },\n setHeight: {\n default: \"\",\n type: String,\n },\n getApi: Function,\n hooks: {\n default: () => {},\n type: Function,\n },\n columnsApi: Function,\n requestFn: {\n default: () => {\n return pageTemplatecs;\n },\n type: Object,\n },\n templateKey: String,\n selectcheck: Function,\n selectType: String,\n hasSelection: Boolean,\n hasIndex: {\n type: Boolean,\n default: false,\n },\n selectable: Function,\n searchPlaceholder: String,\n actionWidth: {\n type: String,\n default: \"100\",\n },\n keywordsKEY: {\n type: String,\n default: \"keywords\",\n },\n ruleFn: {\n type: Object,\n default: function () {\n return {};\n },\n },\n colDisplayFn: {\n type: Function,\n default: function (col) {\n return col;\n },\n },\n sortableList: {\n type: Object,\n default: function () {\n return {};\n },\n },\n isInitQuest: {\n type: Boolean,\n default: true,\n },\n },\n setup() {},\n created() {\n // document.addEventListener('keyup', this.enter)\n },\n destroyed() {\n // document.removeEventListener('keyup', this.enter)\n },\n mounted() {\n this.changePG();\n },\n activated() {\n this.$refs.FormTable.doLayout();\n },\n methods: {\n getCurrentKeywordsKey() {\n return this.selectKey || this.keywordsKEY;\n },\n handleSelectKeyChange(newKey) {\n // 如果之前有值，需要将值转移到新的字段\n if (this.searchParams[this.keywordsKEY] && newKey !== this.keywordsKEY) {\n this.searchParams[newKey] = this.searchParams[this.keywordsKEY];\n this.searchParams[this.keywordsKEY] = \"\";\n }\n },\n getConfig(item) {\n return getOptions(item, this.ruleFn);\n },\n getLabel(item, row) {\n let config = getOptions(item, this.ruleFn);\n return this.formatSwitch(config, row);\n },\n changeType(type) {\n if (!this.bigSearch) return;\n this.searchType = type == 1 ? \"textarea\" : \"text\";\n if (type == 1) {\n this.$nextTick(() => {\n this.$refs.myTextarea.focus();\n });\n }\n },\n dragHead(newWidth, oldWidth, column, event) {\n const findColumn = this.columnsShow.find(\n (c) => c.columnPropertyName == column.label\n );\n let formatWidth = Math.ceil(newWidth);\n this.requestFn.pageTemplatecs\n .saveMyTemplateColumnWidth({\n templateKey: this.templateKey,\n columnCode: findColumn.columnCode,\n width: formatWidth,\n })\n .then((response) => {});\n },\n changePG(pages) {\n this.requestFn.pageTemplatecs\n .selectUserTemplateColumns({ templateKey: this.templateKey })\n .then((response) => {\n if (response.result === \"success\") {\n this.columns = response.data.map((i) => {\n if (i.queryConfig) {\n i.queryConfig = JSON.parse(i.queryConfig);\n }\n return i;\n });\n }\n });\n this.requestFn.pageTemplatecs\n .selectMyTableColumns({ templateKey: this.templateKey })\n .then((response) => {\n if (response.result === \"success\") {\n this.columnsShow = response.data.map((i) => {\n if (i.queryConfig) {\n i.queryConfig = JSON.parse(i.queryConfig);\n }\n return i;\n });\n this.$nextTick(() => {\n if (this.isInitQuest) {\n this.getList();\n }\n });\n }\n });\n },\n setFormParams(obj, type = \"add\") {\n if (type == \"add\") {\n this.searchParams = {\n ...this.searchParams,\n ...obj,\n };\n } else {\n for (let key in obj) {\n delete this.searchParams[key];\n }\n }\n\n this.$nextTick(() => {\n this.getList({\n skipCount: 1,\n });\n });\n },\n enter(e) {\n if (e.key === \"Enter\" || e.keyCode === 13) {\n console.log(\"enter\");\n }\n },\n getList(params, isClearParams = false) {\n let searchParams;\n if (isClearParams) {\n searchParams = {\n ...params,\n pageSize: this.searchParams.pageSize,\n skipCount: 1,\n };\n } else {\n searchParams = {\n ...this.searchParams,\n ...params,\n };\n }\n\n this.searchParams = searchParams;\n\n // 处理数据\n let ops = {};\n for (var key in searchParams) {\n if (\n searchParams[key] !== \"\" &&\n searchParams[key] !== null &&\n searchParams[key] !== undefined\n ) {\n ops[key] = searchParams[key];\n }\n }\n\n // 确保使用正确的关键词字段，并删除其他在selectKeyList中的key值\n if (this.selectKeyList && this.selectKeyList.length > 0) {\n // 获取所有selectKeyList中的key值\n const allSelectKeys = this.selectKeyList.map((item) => item.value);\n\n // 如果当前有选中的selectKey，确保使用它\n if (this.selectKey) {\n // 如果默认keywordsKEY有值且不是当前选中的key，将值转移到当前选中的key\n if (ops[this.keywordsKEY] && this.selectKey !== this.keywordsKEY) {\n ops[this.selectKey] = ops[this.keywordsKEY];\n delete ops[this.keywordsKEY];\n }\n\n // 删除其他在selectKeyList中的key值（除了当前选中的）\n allSelectKeys.forEach((key) => {\n if (key !== this.selectKey && ops[key]) {\n delete ops[key];\n }\n });\n }\n } else if (\n this.selectKey &&\n this.selectKey !== this.keywordsKEY &&\n ops[this.keywordsKEY]\n ) {\n // 兼容原有逻辑\n ops[this.selectKey] = ops[this.keywordsKEY];\n delete ops[this.keywordsKEY];\n }\n\n // 根据参数画tag\n formToValue(ops, this.columnsShow, this.colChange, this.ruleFn);\n\n const { pageSize, skipCount } = ops;\n\n this.listLoading = true;\n this.hooks(ops);\n this.getApi({\n ...ops,\n pageSize: pageSize,\n skipCount: (skipCount - 1) * pageSize,\n reqTypeSign: \"config_table\",\n }).then(\n (response) => {\n if (response.result === \"success\") {\n if (this.formatData) {\n this.list = this.formatData(response.data);\n } else {\n this.list = response.data || [];\n }\n this.ops = ops;\n this.count = response.count;\n } else {\n this.$message.error(response.msg);\n }\n this.$emit(\"update:countNum\", this.count);\n this.listLoading = false;\n this.tableKey = Math.random();\n },\n (err) => {\n this.listLoading = false;\n }\n );\n },\n handleSelectionChange(val) {\n let formatVal = val;\n if (this.selectType === \"single\") {\n formatVal = [val.pop()];\n let other = val;\n if (other && other.length > 0) {\n other.forEach((row) => {\n this.$refs.FormTable.toggleRowSelection(row, false);\n });\n this.$refs.FormTable.toggleRowSelection(formatVal[0], true);\n }\n }\n this.selectcheck(formatVal);\n this.multipleSelection = formatVal;\n this.$emit(\"selectcheck\", formatVal);\n },\n getNewCol(show, all) {\n this.columnsShow = show;\n this.columns = all;\n this.tableKey = Math.random(); // table不刷新 强制key\n },\n closeTag(tag) {\n const index = this.tags.findIndex((i) => i.name === tag.name);\n const delItem = this.tags.splice(index, 1)[0];\n const { key, type } = delItem;\n if (type === \"dateRange\" || type === \"inputScope\") {\n this.setFormParams(\n { [key[0]]: \"\", [key[1]]: \"\", [key[2]]: \"\" },\n \"remove\"\n );\n } else {\n this.setFormParams({ [key]: \"\" }, \"remove\");\n }\n },\n handleSelectAll(val) {\n this.$emit(\"selectAll\", Array.from(val));\n },\n handleSelect(selection, row) {\n this.$emit(\"select\", { selection, row });\n },\n closeAllTag() {\n const delKeys = {};\n this.tags.forEach((i) => {\n const { key, type } = i;\n if (type === \"dateRange\" || type === \"inputScope\") {\n delKeys[key[0]] = \"\";\n delKeys[key[1]] = \"\";\n } else {\n delKeys[key] = \"\";\n }\n });\n this.tags = [];\n this.setFormParams({ ...delKeys }, \"remove\");\n },\n colChange(objTags) {\n // const selectIndex =this.tags.findIndex(i => i.name === arrow)\n // if(selectIndex >= 0){\n // let select = this.tags[selectIndex]\n // if(data.value.length > 0){\n // select.value = data.value\n // select.str = data.str\n // this.$set(this.tags, selectIndex, select)\n // } else {\n // this.tags.splice(selectIndex,1)\n // }\n\n // } else {\n // this.tags = this.tags.concat([{'name':arrow, value:data.value, str:data.str, key:data.searchKey, type: data.type }])\n // }\n const arr = [];\n for (let key in objTags) {\n arr.push(objTags[key]);\n }\n\n this.tags = [].concat(arr);\n },\n\n actionModal() {\n this.dialogFormVisible = true;\n this.columns;\n this.columns = this.columns.map((i) => {\n const isSelect = this.columnsShow.find(\n (j) => j.columnPropertyName === i.columnPropertyName\n );\n i.show = !!isSelect;\n return i;\n });\n },\n },\n};\n</script>\n<style>\n.el-table__empty-block {\n background: #fbfbfb;\n}\n</style>\n<style lang=\"less\" scoped>\n.container {\n padding: 15px;\n margin: 0px;\n width: 100%;\n background: #fff;\n float: left;\n}\n\n.input-with-select {\n width: 300px;\n}\n.width400 {\n width: 400px;\n}\n.optBox {\n margin-bottom: 10px;\n overflow: hidden;\n}\n\n.leftBtn {\n float: left;\n}\n\n.rightBtn {\n float: right;\n .textareaSpec {\n position: absolute;\n right: 100px;\n z-index: 1000;\n width: 700px;\n height: 400px;\n // transition: all 1s ease-out;\n }\n .border {\n border: 1px solid rgb(220, 223, 230);\n }\n}\n\n.tagBox {\n width: calc(100% - 140px);\n float: left;\n overflow: hidden;\n > .el-tag {\n margin: 4px 10px 0 0;\n max-width: 420px;\n /deep/.el-tag__close {\n vertical-align: super;\n }\n }\n .tagItem {\n max-width: 397px;\n display: inline-block;\n white-space: nowrap; /* 防止文本换行 */\n overflow: hidden; /* 隐藏超出的内容 */\n text-overflow: ellipsis; /* 将超出的内容显示为省略号 */\n }\n}\n\n.clearAll {\n float: right;\n}\n\n.table {\n width: 100%;\n margin-top: 10px;\n float: left;\n // overflow-x: visible;\n // overflow-y: visible;\n // /deep/ .el-table__header-wrapper{\n // position: sticky;\n // top:84px;\n // z-index:5;\n // }\n // /deep/ .el-table__fixed-header-wrapper{\n // z-index:5;\n // }\n}\n\n.pagi {\n float: right;\n}\n\n.pagi.pagination-container {\n padding: 0px;\n padding-top: 20px;\n}\n\n.btmBox {\n width: 100%;\n float: left;\n display: flex;\n justify-content: space-between;\n}\n</style>"]},media:undefined}),inject("data-v-ee0231a6_1",{source:".container[data-v-ee0231a6] {\n padding: 15px;\n margin: 0px;\n width: 100%;\n background: #fff;\n float: left;\n}\n.input-with-select[data-v-ee0231a6] {\n width: 300px;\n}\n.width400[data-v-ee0231a6] {\n width: 400px;\n}\n.optBox[data-v-ee0231a6] {\n margin-bottom: 10px;\n overflow: hidden;\n}\n.leftBtn[data-v-ee0231a6] {\n float: left;\n}\n.rightBtn[data-v-ee0231a6] {\n float: right;\n}\n.rightBtn .textareaSpec[data-v-ee0231a6] {\n position: absolute;\n right: 100px;\n z-index: 1000;\n width: 700px;\n height: 400px;\n}\n.rightBtn .border[data-v-ee0231a6] {\n border: 1px solid #dcdfe6;\n}\n.tagBox[data-v-ee0231a6] {\n width: calc(100% - 140px);\n float: left;\n overflow: hidden;\n}\n.tagBox > .el-tag[data-v-ee0231a6] {\n margin: 4px 10px 0 0;\n max-width: 420px;\n}\n.tagBox > .el-tag[data-v-ee0231a6] .el-tag__close {\n vertical-align: super;\n}\n.tagBox .tagItem[data-v-ee0231a6] {\n max-width: 397px;\n display: inline-block;\n white-space: nowrap;\n /* 防止文本换行 */\n overflow: hidden;\n /* 隐藏超出的内容 */\n text-overflow: ellipsis;\n /* 将超出的内容显示为省略号 */\n}\n.clearAll[data-v-ee0231a6] {\n float: right;\n}\n.table[data-v-ee0231a6] {\n width: 100%;\n margin-top: 10px;\n float: left;\n}\n.pagi[data-v-ee0231a6] {\n float: right;\n}\n.pagi.pagination-container[data-v-ee0231a6] {\n padding: 0px;\n padding-top: 20px;\n}\n.btmBox[data-v-ee0231a6] {\n width: 100%;\n float: left;\n display: flex;\n justify-content: space-between;\n}\n",map:{"version":3,"sources":["index.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,WAAW;EACX,WAAW;EACX,gBAAgB;EAChB,WAAW;AACb;AACA;EACE,YAAY;AACd;AACA;EACE,YAAY;AACd;AACA;EACE,mBAAmB;EACnB,gBAAgB;AAClB;AACA;EACE,WAAW;AACb;AACA;EACE,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,YAAY;EACZ,aAAa;EACb,YAAY;EACZ,aAAa;AACf;AACA;EACE,yBAAyB;AAC3B;AACA;EACE,yBAAyB;EACzB,WAAW;EACX,gBAAgB;AAClB;AACA;EACE,oBAAoB;EACpB,gBAAgB;AAClB;AACA;EACE,qBAAqB;AACvB;AACA;EACE,gBAAgB;EAChB,qBAAqB;EACrB,mBAAmB;EACnB,WAAW;EACX,gBAAgB;EAChB,YAAY;EACZ,uBAAuB;EACvB,iBAAiB;AACnB;AACA;EACE,YAAY;AACd;AACA;EACE,WAAW;EACX,gBAAgB;EAChB,WAAW;AACb;AACA;EACE,YAAY;AACd;AACA;EACE,YAAY;EACZ,iBAAiB;AACnB;AACA;EACE,WAAW;EACX,WAAW;EACX,aAAa;EACb,8BAA8B;AAChC","file":"index.vue","sourcesContent":[".container {\n padding: 15px;\n margin: 0px;\n width: 100%;\n background: #fff;\n float: left;\n}\n.input-with-select {\n width: 300px;\n}\n.width400 {\n width: 400px;\n}\n.optBox {\n margin-bottom: 10px;\n overflow: hidden;\n}\n.leftBtn {\n float: left;\n}\n.rightBtn {\n float: right;\n}\n.rightBtn .textareaSpec {\n position: absolute;\n right: 100px;\n z-index: 1000;\n width: 700px;\n height: 400px;\n}\n.rightBtn .border {\n border: 1px solid #dcdfe6;\n}\n.tagBox {\n width: calc(100% - 140px);\n float: left;\n overflow: hidden;\n}\n.tagBox > .el-tag {\n margin: 4px 10px 0 0;\n max-width: 420px;\n}\n.tagBox > .el-tag /deep/ .el-tag__close {\n vertical-align: super;\n}\n.tagBox .tagItem {\n max-width: 397px;\n display: inline-block;\n white-space: nowrap;\n /* 防止文本换行 */\n overflow: hidden;\n /* 隐藏超出的内容 */\n text-overflow: ellipsis;\n /* 将超出的内容显示为省略号 */\n}\n.clearAll {\n float: right;\n}\n.table {\n width: 100%;\n margin-top: 10px;\n float: left;\n}\n.pagi {\n float: right;\n}\n.pagi.pagination-container {\n padding: 0px;\n padding-top: 20px;\n}\n.btmBox {\n width: 100%;\n float: left;\n display: flex;\n justify-content: space-between;\n}\n"]},media:undefined});};/* scoped */const __vue_scope_id__$3="data-v-ee0231a6";/* module identifier */const __vue_module_identifier__$3=undefined;/* functional template */const __vue_is_functional_template__$3=false;/* style inject SSR */ /* style inject shadow dom */const __vue_component__$3=/*#__PURE__*/normalizeComponent({render:__vue_render__$3,staticRenderFns:__vue_staticRenderFns__$3},__vue_inject_styles__$3,__vue_script__$3,__vue_scope_id__$3,__vue_is_functional_template__$3,__vue_module_identifier__$3,false,createInjector,undefined,undefined);__vue_component__$3.install=function(Vue){Vue.component(__vue_component__$3.name,__vue_component__$3);};/*!
|
|
2283
|
+
const arr=[];for(let key in objTags){arr.push(objTags[key]);}this.tags=[].concat(arr);},actionModal(){this.dialogFormVisible=true;this.columns;this.columns=this.columns.map(i=>{const isSelect=this.columnsShow.find(j=>j.columnPropertyName===i.columnPropertyName);i.show=!!isSelect;return i;});}}};/* script */const __vue_script__$3=script$3;/* template */var __vue_render__$3=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("div",{staticClass:"container"},[_c("div",{staticClass:"optBox"},[_c("div",{staticClass:"leftBtn"},[_vm._t("leftBtn")],2),_vm._v(" "),_c("div",{staticClass:"rightBtn"},[_vm.hasSearch?_c("el-input",{directives:[{name:"show",rawName:"v-show",value:_vm.searchType=="textarea",expression:"searchType == 'textarea'"}],ref:"myTextarea",class:{"input-with-select":true,textareaSpec:_vm.searchType=="textarea"},attrs:{type:"textarea",placeholder:_vm.searchPlaceholder||_vm.trans("请输入内容"),rows:10},on:{blur:function($event){return _vm.changeType(0);}},nativeOn:{keyup:function($event){if(!$event.type.indexOf("key")&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){return null;}return _vm.getList({skipCount:1});}},model:{value:_vm.searchParams[_vm.getCurrentKeywordsKey()],callback:function($$v){_vm.$set(_vm.searchParams,_vm.getCurrentKeywordsKey(),typeof $$v==="string"?$$v.trim():$$v);},expression:"searchParams[getCurrentKeywordsKey()]"}},[_c("el-button",{attrs:{slot:"append",icon:"el-icon-search"},on:{click:function($event){return _vm.getList({skipCount:1});}},slot:"append"})],1):_vm._e(),_vm._v(" "),_vm.hasSearch?_c("el-input",{directives:[{name:"show",rawName:"v-show",value:_vm.searchType=="text",expression:"searchType == 'text'"}],class:{"input-with-select":true,width400:_vm.selectKeyList.length>0},attrs:{placeholder:_vm.searchPlaceholder||_vm.trans("请输入内容")},on:{focus:function($event){return _vm.changeType(1);}},nativeOn:{keyup:function($event){if(!$event.type.indexOf("key")&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){return null;}return _vm.getList({skipCount:1});}},model:{value:_vm.searchParams[_vm.getCurrentKeywordsKey()],callback:function($$v){_vm.$set(_vm.searchParams,_vm.getCurrentKeywordsKey(),typeof $$v==="string"?$$v.trim():$$v);},expression:"searchParams[getCurrentKeywordsKey()]"}},[_vm.selectKeyList.length>0?_c("el-select",{staticStyle:{width:"120px"},attrs:{slot:"prepend",placeholder:"请选择"},on:{change:_vm.handleSelectKeyChange},slot:"prepend",model:{value:_vm.selectKey,callback:function($$v){_vm.selectKey=$$v;},expression:"selectKey"}},_vm._l(_vm.selectKeyList,function(item){return _c("el-option",{key:item.value,attrs:{label:item.label,value:item.value}});}),1):_vm._e(),_vm._v(" "),_c("el-button",{attrs:{slot:"append",icon:"el-icon-search"},on:{click:function($event){return _vm.getList({skipCount:1});}},slot:"append"})],1):_vm._e(),_vm._v(" "),_c("el-divider",{attrs:{direction:"vertical"}}),_vm._v(" "),_c("el-button",{attrs:{size:"mini"},on:{click:_vm.actionModal}},[_c("svg",{staticClass:"icon",staticStyle:{color:"#10c2b0",cursor:"pointer"},attrs:{"aria-hidden":"true"}},[_c("use",{attrs:{"xlink:href":"#fontFamily-a-web20_shaixuanpeizhi"}})])])],1)]),_vm._v(" "),_c("div",{staticClass:"tagBox"},_vm._l(_vm.tags,function(tag){return _c("el-tag",{key:tag.name,attrs:{closable:"",type:"info"},on:{close:function($event){return _vm.closeTag(tag);}}},[_c("div",{staticClass:"tagItem"},[_vm._v(_vm._s(tag.name+":"+tag.str))])]);}),1),_vm._v(" "),_vm.tags.length>1?_c("el-button",{staticClass:"clearAll",on:{click:_vm.closeAllTag}},[_vm._v(_vm._s(_vm.trans("取消全部筛选")))]):_vm._e(),_vm._v(" "),_c("el-table",{directives:[{name:"loading",rawName:"v-loading",value:_vm.listLoading,expression:"listLoading"}],key:_vm.tableKey,ref:"FormTable",staticClass:"table",attrs:{data:_vm.list,"row-key":_vm.rowKey,border:"",fit:""},on:{"sort-change":function($event){return _vm.$emit("sortChange",$event);},"selection-change":_vm.handleSelectionChange,"header-dragend":_vm.dragHead,"select-all":_vm.handleSelectAll,select:_vm.handleSelect}},[_vm.hasSelection?_c("el-table-column",{attrs:{type:"selection",width:"50",selectable:_vm.selectable}}):_vm._e(),_vm._v(" "),_vm.hasIndex?_c("el-table-column",{attrs:{label:_vm.trans("序号"),type:"index",width:"50"}}):_vm._e(),_vm._v(" "),_vm._t("additional"),_vm._v(" "),_vm._l(_vm.colDisplayFn(_vm.columnsShow),function(item){return _c("el-table-column",{key:item.columnCode,attrs:{label:item.columnPropertyName,fixed:item.isFixed==1&&"left","min-width":(item.defaultWidth||item.minWidth)+20,"show-overflow-tooltip":"",sortable:_vm.sortableList[item.columnProperty]||false,prop:item.columnProperty,align:"center"},scopedSlots:_vm._u([{key:"header",fn:function(ref){var column=ref.column;return[_c("span",[_vm._v(_vm._s(column.label))]),_vm._v(" "),_vm.$scopedSlots[item.columnProperty+"Header"]?_c("span",[_c("tips",[_vm._t(item.columnProperty+"Header")],2)],1):_vm._e(),_vm._v(" "),item.queryConfig&&item.queryConfig.type&&item.isQuery?_c(item.queryConfig.type,{tag:"component",attrs:{config:item.queryConfig,column:item,setFormParams:_vm.setFormParams,ops:_vm.ops,getConfig:_vm.getConfig,ruleFn:_vm.ruleFn[item.columnProperty]}}):_vm._e()];}},{key:"default",fn:function(ref){var row=ref.row;return[_vm.$scopedSlots[item.columnProperty]?_c("span",[_vm._t(item.columnProperty,null,{props:row,queryConfig:item.queryConfig,options:_vm.getConfig(item),label:_vm.getLabel(item,row)})],2):_c("span",[_vm._v(_vm._s(_vm.getLabel(item,row)))])];}}],null,true)});}),_vm._v(" "),_vm.$scopedSlots.actionBtn?_c("el-table-column",{attrs:{label:_vm.trans("操作"),align:"center",width:_vm.actionWidth,"class-name":"small-padding",fixed:"right"},scopedSlots:_vm._u([{key:"default",fn:function(ref){var row=ref.row;return[_vm._t("actionBtn",null,{props:row})];}}],null,true)}):_vm._e()],2),_vm._v(" "),_c("div",{staticClass:"btmBox"},[_c("div",{staticClass:"btmLeft"},[_vm._t("btmLeft")],2),_vm._v(" "),_c("pagination",{directives:[{name:"show",rawName:"v-show",value:_vm.count>0,expression:"count > 0"}],staticClass:"text-right mt-0 pagi",attrs:{autoScroll:_vm.isAutoScroll,total:_vm.count,page:_vm.searchParams.skipCount,limit:_vm.searchParams.pageSize},on:{"update:page":function($event){return _vm.$set(_vm.searchParams,"skipCount",$event);},"update:limit":function($event){return _vm.$set(_vm.searchParams,"pageSize",$event);},pagination:_vm.getList}})],1),_vm._v(" "),_vm.columns.length>0?_c("select-col",{attrs:{saveMyTemplateColumns:_vm.saveMyTemplateColumns,templateKey:_vm.templateKey,getNewCol:_vm.getNewCol,initialColumns:_vm.columns,columnsShow:_vm.columnsShow,visible:_vm.dialogFormVisible},on:{"update:visible":function($event){_vm.dialogFormVisible=$event;}}}):_vm._e()],1);};var __vue_staticRenderFns__$3=[];__vue_render__$3._withStripped=true;/* style */const __vue_inject_styles__$3=function(inject){if(!inject)return;inject("data-v-ab2f0bc0_0",{source:"\n.el-table__empty-block {\r\n background: #fbfbfb;\n}\r\n",map:{"version":3,"sources":["D:\\项目\\npm\\components\\FormTableScheme\\index.vue"],"names":[],"mappings":";AAkqBA;EACA,mBAAA;AACA","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"container\">\r\n <div class=\"optBox\">\r\n <div class=\"leftBtn\">\r\n <slot name=\"leftBtn\"></slot>\r\n </div>\r\n <div class=\"rightBtn\">\r\n <el-input\r\n v-if=\"hasSearch\"\r\n v-show=\"searchType == 'textarea'\"\r\n type=\"textarea\"\r\n @keyup.enter.native=\"getList({ skipCount: 1 })\"\r\n :placeholder=\"searchPlaceholder || trans('请输入内容')\"\r\n :class=\"{\r\n 'input-with-select': true,\r\n textareaSpec: searchType == 'textarea',\r\n }\"\r\n v-model.trim=\"searchParams[getCurrentKeywordsKey()]\"\r\n @blur=\"changeType(0)\"\r\n :rows=\"10\"\r\n ref=\"myTextarea\"\r\n >\r\n <el-button\r\n slot=\"append\"\r\n icon=\"el-icon-search\"\r\n @click=\"getList({ skipCount: 1 })\"\r\n ></el-button>\r\n </el-input>\r\n <el-input\r\n v-if=\"hasSearch\"\r\n v-show=\"searchType == 'text'\"\r\n @keyup.enter.native=\"getList({ skipCount: 1 })\"\r\n :placeholder=\"searchPlaceholder || trans('请输入内容')\"\r\n :class=\"{\r\n 'input-with-select': true,\r\n width400: selectKeyList.length > 0,\r\n }\"\r\n v-model.trim=\"searchParams[getCurrentKeywordsKey()]\"\r\n @focus=\"changeType(1)\"\r\n >\r\n <el-select\r\n v-model=\"selectKey\"\r\n slot=\"prepend\"\r\n placeholder=\"请选择\"\r\n v-if=\"selectKeyList.length > 0\"\r\n style=\"width: 120px\"\r\n @change=\"handleSelectKeyChange\"\r\n >\r\n <el-option\r\n v-for=\"item in selectKeyList\"\r\n :key=\"item.value\"\r\n :label=\"item.label\"\r\n :value=\"item.value\"\r\n ></el-option>\r\n </el-select>\r\n <el-button\r\n slot=\"append\"\r\n icon=\"el-icon-search\"\r\n @click=\"getList({ skipCount: 1 })\"\r\n ></el-button>\r\n </el-input>\r\n <el-divider direction=\"vertical\"></el-divider>\r\n <el-button size=\"mini\" @click=\"actionModal\">\r\n <svg\r\n class=\"icon\"\r\n aria-hidden=\"true\"\r\n style=\"color: #10c2b0; cursor: pointer\"\r\n >\r\n <use xlink:href=\"#fontFamily-a-web20_shaixuanpeizhi\"></use>\r\n </svg>\r\n </el-button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tagBox\">\r\n <el-tag\r\n v-for=\"tag in tags\"\r\n :key=\"tag.name\"\r\n closable\r\n @close=\"closeTag(tag)\"\r\n type=\"info\"\r\n >\r\n <div class=\"tagItem\">{{ `${tag.name}:${tag.str}` }}</div>\r\n </el-tag>\r\n </div>\r\n <el-button class=\"clearAll\" v-if=\"tags.length > 1\" @click=\"closeAllTag\">{{\r\n trans(\"取消全部筛选\")\r\n }}</el-button>\r\n <el-table\r\n ref=\"FormTable\"\r\n v-loading=\"listLoading\"\r\n :data=\"list\"\r\n :row-key=\"rowKey\"\r\n border\r\n fit\r\n @sort-change=\"$emit('sortChange', $event)\"\r\n @selection-change=\"handleSelectionChange\"\r\n @header-dragend=\"dragHead\"\r\n @select-all=\"handleSelectAll\"\r\n @select=\"handleSelect\"\r\n class=\"table\"\r\n :key=\"tableKey\"\r\n >\r\n <el-table-column\r\n v-if=\"hasSelection\"\r\n type=\"selection\"\r\n width=\"50\"\r\n :selectable=\"selectable\"\r\n >\r\n </el-table-column>\r\n <el-table-column\r\n v-if=\"hasIndex\"\r\n :label=\"trans('序号')\"\r\n type=\"index\"\r\n width=\"50\"\r\n >\r\n </el-table-column>\r\n <slot name=\"additional\"></slot>\r\n <el-table-column\r\n v-for=\"item in colDisplayFn(columnsShow)\"\r\n :key=\"item.columnCode\"\r\n :label=\"item.columnPropertyName\"\r\n :fixed=\"item.isFixed == 1 && 'left'\"\r\n :min-width=\"(item.defaultWidth || item.minWidth) + 20\"\r\n show-overflow-tooltip\r\n :sortable=\"sortableList[item.columnProperty] || false\"\r\n :prop=\"item.columnProperty\"\r\n align=\"center\"\r\n >\r\n <template slot=\"header\" slot-scope=\"{ column }\">\r\n <span>{{ column.label }}</span>\r\n <span v-if=\"$scopedSlots[`${item.columnProperty}Header`]\">\r\n <tips>\r\n <slot :name=\"`${item.columnProperty}Header`\"></slot>\r\n </tips>\r\n </span>\r\n <component\r\n v-if=\"item.queryConfig && item.queryConfig.type && item.isQuery\"\r\n v-bind:is=\"item.queryConfig.type\"\r\n :config=\"item.queryConfig\"\r\n :column=\"item\"\r\n :setFormParams=\"setFormParams\"\r\n :ops=\"ops\"\r\n :getConfig=\"getConfig\"\r\n :ruleFn=\"ruleFn[item.columnProperty]\"\r\n ></component>\r\n </template>\r\n <template slot-scope=\"{ row }\">\r\n <span v-if=\"$scopedSlots[item.columnProperty]\">\r\n <slot\r\n :name=\"item.columnProperty\"\r\n :props=\"row\"\r\n :queryConfig=\"item.queryConfig\"\r\n :options=\"getConfig(item)\"\r\n :label=\"getLabel(item, row)\"\r\n ></slot>\r\n </span>\r\n <span v-else>{{ getLabel(item, row) }}</span>\r\n </template>\r\n </el-table-column>\r\n <el-table-column\r\n :label=\"trans('操作')\"\r\n align=\"center\"\r\n :width=\"actionWidth\"\r\n class-name=\"small-padding\"\r\n v-if=\"$scopedSlots.actionBtn\"\r\n fixed=\"right\"\r\n >\r\n <template slot-scope=\"{ row }\">\r\n <slot name=\"actionBtn\" :props=\"row\"> </slot>\r\n </template>\r\n </el-table-column>\r\n </el-table>\r\n <div class=\"btmBox\">\r\n <div class=\"btmLeft\">\r\n <slot name=\"btmLeft\"></slot>\r\n </div>\r\n <pagination\r\n v-show=\"count > 0\"\r\n :autoScroll=\"isAutoScroll\"\r\n class=\"text-right mt-0 pagi\"\r\n :total=\"count\"\r\n :page.sync=\"searchParams.skipCount\"\r\n :limit.sync=\"searchParams.pageSize\"\r\n @pagination=\"getList\"\r\n />\r\n </div>\r\n\r\n <select-col\r\n v-if=\"columns.length > 0\"\r\n :saveMyTemplateColumns=\"saveMyTemplateColumns\"\r\n :templateKey=\"templateKey\"\r\n :getNewCol=\"getNewCol\"\r\n :initialColumns=\"columns\"\r\n :columnsShow=\"columnsShow\"\r\n :visible.sync=\"dialogFormVisible\"\r\n ></select-col>\r\n </div>\r\n</template>\r\n<script>\r\n/**\r\n * 表格\r\n * fetchParam {object} 请求参数\r\n * countNum {number} 数据总数 用法:countNum.sync=\"count\"\r\n * getApi {function} 请求接口\r\n * formatData {function} 返回参数格式化\r\n * sortChange {function} 排序事件函数\r\n * setHeight {string || number} 表格高度\r\n * selectcheck {function} 选择监听\r\n * selectable { function } checkbox 筛选禁用\r\n */\r\n\r\nimport {\r\n SelectCol,\r\n Check,\r\n Date,\r\n Inputsp,\r\n DateRange,\r\n Tips,\r\n pageTemplatecs,\r\n Radio,\r\n InputScope,\r\n Selectsp,\r\n Cascader,\r\n} from \"./component/index\";\r\nimport Pagination from \"@/components/Pagination\";\r\nimport formatSwitch from \"./format\";\r\nimport formToValue from \"./component/ColHeader/dataFormat\";\r\nimport trans from \"../lang/trans\";\r\nimport getOptions from \"./component/utils\";\r\nexport default {\r\n name: \"FormTableScheme\",\r\n components: {\r\n SelectCol,\r\n Check,\r\n Date,\r\n Inputsp,\r\n Pagination,\r\n DateRange,\r\n Tips,\r\n Radio,\r\n InputScope,\r\n Selectsp,\r\n Cascader,\r\n },\r\n model: {\r\n event: \"sortChange\",\r\n },\r\n data() {\r\n return {\r\n trans,\r\n dialogFormVisible: false,\r\n formatSwitch,\r\n list: [],\r\n saveMyTemplateColumns:\r\n this.requestFn.pageTemplatecs.saveMyTemplateColumns,\r\n columns: [],\r\n columnsShow: [],\r\n checkList: [\"复选框 A\"],\r\n tags: [],\r\n count: this.countNum,\r\n keywords: this.keywords,\r\n searchParams: {\r\n ...this.fetchParam,\r\n [this.keywordsKEY]: \"\",\r\n pageSize: 20,\r\n skipCount: 1,\r\n },\r\n listLoading: false,\r\n ops: {},\r\n multipleSelection: [],\r\n tableKey: \"first\",\r\n searchType: \"text\",\r\n selectKey: (this.selectKeyList[0] && this.selectKeyList[0].value) || \"\",\r\n };\r\n },\r\n watch: {\r\n fetchParam: {\r\n deep: true,\r\n immediate: true,\r\n handler() {\r\n this.searchParams = {\r\n ...this.searchParams,\r\n ...this.fetchParam,\r\n };\r\n },\r\n },\r\n },\r\n props: {\r\n bigSearch: {\r\n default: false,\r\n type: Boolean,\r\n },\r\n fetchParam: {\r\n // 上传时附带的参数\r\n default: () => {\r\n return {};\r\n },\r\n type: Object,\r\n },\r\n hasSearch: {\r\n default: true,\r\n type: Boolean,\r\n },\r\n rowKey: {\r\n default: \"columnProperty\",\r\n type: String,\r\n },\r\n selectKeyList: {\r\n default: () => {\r\n return [];\r\n },\r\n type: Array,\r\n },\r\n countNum: {\r\n // 总数\r\n default: 0,\r\n type: Number,\r\n },\r\n formatData: Function,\r\n isAutoScroll: {\r\n default: true,\r\n type: Boolean,\r\n },\r\n setHeight: {\r\n default: \"\",\r\n type: String,\r\n },\r\n getApi: Function,\r\n hooks: {\r\n default: () => {},\r\n type: Function,\r\n },\r\n columnsApi: Function,\r\n requestFn: {\r\n default: () => {\r\n return pageTemplatecs;\r\n },\r\n type: Object,\r\n },\r\n templateKey: String,\r\n selectcheck: Function,\r\n selectType: String,\r\n hasSelection: Boolean,\r\n hasIndex: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n selectable: Function,\r\n searchPlaceholder: String,\r\n actionWidth: {\r\n type: String,\r\n default: \"100\",\r\n },\r\n keywordsKEY: {\r\n type: String,\r\n default: \"keywords\",\r\n },\r\n ruleFn: {\r\n type: Object,\r\n default: function () {\r\n return {};\r\n },\r\n },\r\n colDisplayFn: {\r\n type: Function,\r\n default: function (col) {\r\n return col;\r\n },\r\n },\r\n sortableList: {\r\n type: Object,\r\n default: function () {\r\n return {};\r\n },\r\n },\r\n isInitQuest: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n },\r\n setup() {},\r\n created() {\r\n // document.addEventListener('keyup', this.enter)\r\n },\r\n destroyed() {\r\n // document.removeEventListener('keyup', this.enter)\r\n },\r\n mounted() {\r\n this.changePG();\r\n },\r\n activated() {\r\n this.$refs.FormTable.doLayout();\r\n },\r\n methods: {\r\n getCurrentKeywordsKey() {\r\n return this.selectKey || this.keywordsKEY;\r\n },\r\n handleSelectKeyChange(newKey) {\r\n // 如果之前有值，需要将值转移到新的字段\r\n if (this.searchParams[this.keywordsKEY] && newKey !== this.keywordsKEY) {\r\n this.searchParams[newKey] = this.searchParams[this.keywordsKEY];\r\n this.searchParams[this.keywordsKEY] = \"\";\r\n }\r\n },\r\n getConfig(item) {\r\n return getOptions(item, this.ruleFn);\r\n },\r\n getLabel(item, row) {\r\n let config = getOptions(item, this.ruleFn);\r\n return this.formatSwitch(config, row);\r\n },\r\n changeType(type) {\r\n if (!this.bigSearch) return;\r\n this.searchType = type == 1 ? \"textarea\" : \"text\";\r\n if (type == 1) {\r\n this.$nextTick(() => {\r\n this.$refs.myTextarea.focus();\r\n });\r\n }\r\n },\r\n dragHead(newWidth, oldWidth, column, event) {\r\n const findColumn = this.columnsShow.find(\r\n (c) => c.columnPropertyName == column.label\r\n );\r\n let formatWidth = Math.ceil(newWidth);\r\n this.requestFn.pageTemplatecs\r\n .saveMyTemplateColumnWidth({\r\n templateKey: this.templateKey,\r\n columnCode: findColumn.columnCode,\r\n width: formatWidth,\r\n })\r\n .then((response) => {});\r\n },\r\n changePG(pages) {\r\n this.requestFn.pageTemplatecs\r\n .selectUserTemplateColumns({ templateKey: this.templateKey })\r\n .then((response) => {\r\n if (response.result === \"success\") {\r\n this.columns = response.data.map((i) => {\r\n if (i.queryConfig) {\r\n i.queryConfig = JSON.parse(i.queryConfig);\r\n }\r\n return i;\r\n });\r\n }\r\n });\r\n this.requestFn.pageTemplatecs\r\n .selectMyTableColumns({ templateKey: this.templateKey })\r\n .then((response) => {\r\n if (response.result === \"success\") {\r\n this.columnsShow = response.data.map((i) => {\r\n if (i.queryConfig) {\r\n i.queryConfig = JSON.parse(i.queryConfig);\r\n }\r\n return i;\r\n });\r\n this.$nextTick(() => {\r\n if (this.isInitQuest) {\r\n this.getList();\r\n }\r\n });\r\n }\r\n });\r\n },\r\n setFormParams(obj, type = \"add\") {\r\n if (type == \"add\") {\r\n this.searchParams = {\r\n ...this.searchParams,\r\n ...obj,\r\n };\r\n } else {\r\n for (let key in obj) {\r\n delete this.searchParams[key];\r\n }\r\n }\r\n\r\n this.$nextTick(() => {\r\n this.getList({\r\n skipCount: 1,\r\n });\r\n });\r\n },\r\n enter(e) {\r\n if (e.key === \"Enter\" || e.keyCode === 13) {\r\n console.log(\"enter\");\r\n }\r\n },\r\n getList(params, isClearParams = false) {\r\n let searchParams;\r\n if (isClearParams) {\r\n searchParams = {\r\n ...params,\r\n pageSize: this.searchParams.pageSize,\r\n skipCount: 1,\r\n };\r\n } else {\r\n searchParams = {\r\n ...this.searchParams,\r\n ...params,\r\n };\r\n }\r\n\r\n this.searchParams = searchParams;\r\n\r\n // 处理数据\r\n let ops = {};\r\n for (var key in searchParams) {\r\n if (\r\n searchParams[key] !== \"\" &&\r\n searchParams[key] !== null &&\r\n searchParams[key] !== undefined\r\n ) {\r\n ops[key] = searchParams[key];\r\n }\r\n }\r\n\r\n // 确保使用正确的关键词字段，并删除其他在selectKeyList中的key值\r\n if (this.selectKeyList && this.selectKeyList.length > 0) {\r\n // 获取所有selectKeyList中的key值\r\n const allSelectKeys = this.selectKeyList.map((item) => item.value);\r\n\r\n // 如果当前有选中的selectKey，确保使用它\r\n if (this.selectKey) {\r\n // 如果默认keywordsKEY有值且不是当前选中的key，将值转移到当前选中的key\r\n if (ops[this.keywordsKEY] && this.selectKey !== this.keywordsKEY) {\r\n ops[this.selectKey] = ops[this.keywordsKEY];\r\n delete ops[this.keywordsKEY];\r\n }\r\n\r\n // 删除其他在selectKeyList中的key值（除了当前选中的）\r\n allSelectKeys.forEach((key) => {\r\n if (key !== this.selectKey && ops[key]) {\r\n delete ops[key];\r\n }\r\n });\r\n }\r\n } else if (\r\n this.selectKey &&\r\n this.selectKey !== this.keywordsKEY &&\r\n ops[this.keywordsKEY]\r\n ) {\r\n // 兼容原有逻辑\r\n ops[this.selectKey] = ops[this.keywordsKEY];\r\n delete ops[this.keywordsKEY];\r\n }\r\n\r\n // 根据参数画tag\r\n formToValue(ops, this.columnsShow, this.colChange, this.ruleFn);\r\n\r\n const { pageSize, skipCount } = ops;\r\n\r\n this.listLoading = true;\r\n this.hooks(ops);\r\n this.getApi({\r\n ...ops,\r\n pageSize: pageSize,\r\n skipCount: (skipCount - 1) * pageSize,\r\n reqTypeSign: \"config_table\",\r\n }).then(\r\n (response) => {\r\n if (response.result === \"success\") {\r\n if (this.formatData) {\r\n this.list = this.formatData(response.data);\r\n } else {\r\n this.list = response.data || [];\r\n }\r\n this.ops = ops;\r\n this.count = response.count;\r\n } else {\r\n this.$message.error(response.msg);\r\n }\r\n this.$emit(\"update:countNum\", this.count);\r\n this.listLoading = false;\r\n this.tableKey = Math.random();\r\n this.$refs.FormTable.doLayout();\r\n },\r\n (err) => {\r\n this.listLoading = false;\r\n }\r\n );\r\n },\r\n handleSelectionChange(val) {\r\n let formatVal = val;\r\n if (this.selectType === \"single\") {\r\n formatVal = [val.pop()];\r\n let other = val;\r\n if (other && other.length > 0) {\r\n other.forEach((row) => {\r\n this.$refs.FormTable.toggleRowSelection(row, false);\r\n });\r\n this.$refs.FormTable.toggleRowSelection(formatVal[0], true);\r\n }\r\n }\r\n this.selectcheck(formatVal);\r\n this.multipleSelection = formatVal;\r\n this.$emit(\"selectcheck\", formatVal);\r\n },\r\n getNewCol(show, all) {\r\n this.columnsShow = show;\r\n this.columns = all;\r\n this.tableKey = Math.random(); // table不刷新 强制key\r\n },\r\n closeTag(tag) {\r\n const index = this.tags.findIndex((i) => i.name === tag.name);\r\n const delItem = this.tags.splice(index, 1)[0];\r\n const { key, type } = delItem;\r\n if (type === \"dateRange\" || type === \"inputScope\") {\r\n this.setFormParams(\r\n { [key[0]]: \"\", [key[1]]: \"\", [key[2]]: \"\" },\r\n \"remove\"\r\n );\r\n } else {\r\n this.setFormParams({ [key]: \"\" }, \"remove\");\r\n }\r\n },\r\n handleSelectAll(val) {\r\n this.$emit(\"selectAll\", Array.from(val));\r\n },\r\n handleSelect(selection, row) {\r\n this.$emit(\"select\", { selection, row });\r\n },\r\n closeAllTag() {\r\n const delKeys = {};\r\n this.tags.forEach((i) => {\r\n const { key, type } = i;\r\n if (type === \"dateRange\" || type === \"inputScope\") {\r\n delKeys[key[0]] = \"\";\r\n delKeys[key[1]] = \"\";\r\n } else {\r\n delKeys[key] = \"\";\r\n }\r\n });\r\n this.tags = [];\r\n this.setFormParams({ ...delKeys }, \"remove\");\r\n },\r\n colChange(objTags) {\r\n // const selectIndex =this.tags.findIndex(i => i.name === arrow)\r\n // if(selectIndex >= 0){\r\n // let select = this.tags[selectIndex]\r\n // if(data.value.length > 0){\r\n // select.value = data.value\r\n // select.str = data.str\r\n // this.$set(this.tags, selectIndex, select)\r\n // } else {\r\n // this.tags.splice(selectIndex,1)\r\n // }\r\n\r\n // } else {\r\n // this.tags = this.tags.concat([{'name':arrow, value:data.value, str:data.str, key:data.searchKey, type: data.type }])\r\n // }\r\n const arr = [];\r\n for (let key in objTags) {\r\n arr.push(objTags[key]);\r\n }\r\n\r\n this.tags = [].concat(arr);\r\n },\r\n\r\n actionModal() {\r\n this.dialogFormVisible = true;\r\n this.columns;\r\n this.columns = this.columns.map((i) => {\r\n const isSelect = this.columnsShow.find(\r\n (j) => j.columnPropertyName === i.columnPropertyName\r\n );\r\n i.show = !!isSelect;\r\n return i;\r\n });\r\n },\r\n },\r\n};\r\n</script>\r\n<style>\r\n.el-table__empty-block {\r\n background: #fbfbfb;\r\n}\r\n</style>\r\n<style lang=\"less\" scoped>\r\n.container {\r\n padding: 15px;\r\n margin: 0px;\r\n width: 100%;\r\n background: #fff;\r\n float: left;\r\n}\r\n\r\n.input-with-select {\r\n width: 300px;\r\n}\r\n.width400 {\r\n width: 400px;\r\n}\r\n.optBox {\r\n margin-bottom: 10px;\r\n overflow: hidden;\r\n}\r\n\r\n.leftBtn {\r\n float: left;\r\n}\r\n\r\n.rightBtn {\r\n float: right;\r\n .textareaSpec {\r\n position: absolute;\r\n right: 100px;\r\n z-index: 1000;\r\n width: 700px;\r\n height: 400px;\r\n // transition: all 1s ease-out;\r\n }\r\n .border {\r\n border: 1px solid rgb(220, 223, 230);\r\n }\r\n}\r\n\r\n.tagBox {\r\n width: calc(100% - 140px);\r\n float: left;\r\n overflow: hidden;\r\n > .el-tag {\r\n margin: 4px 10px 0 0;\r\n max-width: 420px;\r\n /deep/.el-tag__close {\r\n vertical-align: super;\r\n }\r\n }\r\n .tagItem {\r\n max-width: 397px;\r\n display: inline-block;\r\n white-space: nowrap; /* 防止文本换行 */\r\n overflow: hidden; /* 隐藏超出的内容 */\r\n text-overflow: ellipsis; /* 将超出的内容显示为省略号 */\r\n }\r\n}\r\n\r\n.clearAll {\r\n float: right;\r\n}\r\n\r\n.table {\r\n width: 100%;\r\n margin-top: 10px;\r\n float: left;\r\n // overflow-x: visible;\r\n // overflow-y: visible;\r\n // /deep/ .el-table__header-wrapper{\r\n // position: sticky;\r\n // top:84px;\r\n // z-index:5;\r\n // }\r\n // /deep/ .el-table__fixed-header-wrapper{\r\n // z-index:5;\r\n // }\r\n}\r\n\r\n.pagi {\r\n float: right;\r\n}\r\n\r\n.pagi.pagination-container {\r\n padding: 0px;\r\n padding-top: 20px;\r\n}\r\n\r\n.btmBox {\r\n width: 100%;\r\n float: left;\r\n display: flex;\r\n justify-content: space-between;\r\n}\r\n</style>"]},media:undefined}),inject("data-v-ab2f0bc0_1",{source:".container[data-v-ab2f0bc0] {\n padding: 15px;\n margin: 0px;\n width: 100%;\n background: #fff;\n float: left;\n}\n.input-with-select[data-v-ab2f0bc0] {\n width: 300px;\n}\n.width400[data-v-ab2f0bc0] {\n width: 400px;\n}\n.optBox[data-v-ab2f0bc0] {\n margin-bottom: 10px;\n overflow: hidden;\n}\n.leftBtn[data-v-ab2f0bc0] {\n float: left;\n}\n.rightBtn[data-v-ab2f0bc0] {\n float: right;\n}\n.rightBtn .textareaSpec[data-v-ab2f0bc0] {\n position: absolute;\n right: 100px;\n z-index: 1000;\n width: 700px;\n height: 400px;\n}\n.rightBtn .border[data-v-ab2f0bc0] {\n border: 1px solid #dcdfe6;\n}\n.tagBox[data-v-ab2f0bc0] {\n width: calc(100% - 140px);\n float: left;\n overflow: hidden;\n}\n.tagBox > .el-tag[data-v-ab2f0bc0] {\n margin: 4px 10px 0 0;\n max-width: 420px;\n}\n.tagBox > .el-tag[data-v-ab2f0bc0] .el-tag__close {\n vertical-align: super;\n}\n.tagBox .tagItem[data-v-ab2f0bc0] {\n max-width: 397px;\n display: inline-block;\n white-space: nowrap;\n /* 防止文本换行 */\n overflow: hidden;\n /* 隐藏超出的内容 */\n text-overflow: ellipsis;\n /* 将超出的内容显示为省略号 */\n}\n.clearAll[data-v-ab2f0bc0] {\n float: right;\n}\n.table[data-v-ab2f0bc0] {\n width: 100%;\n margin-top: 10px;\n float: left;\n}\n.pagi[data-v-ab2f0bc0] {\n float: right;\n}\n.pagi.pagination-container[data-v-ab2f0bc0] {\n padding: 0px;\n padding-top: 20px;\n}\n.btmBox[data-v-ab2f0bc0] {\n width: 100%;\n float: left;\n display: flex;\n justify-content: space-between;\n}\n",map:{"version":3,"sources":["index.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,WAAW;EACX,WAAW;EACX,gBAAgB;EAChB,WAAW;AACb;AACA;EACE,YAAY;AACd;AACA;EACE,YAAY;AACd;AACA;EACE,mBAAmB;EACnB,gBAAgB;AAClB;AACA;EACE,WAAW;AACb;AACA;EACE,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,YAAY;EACZ,aAAa;EACb,YAAY;EACZ,aAAa;AACf;AACA;EACE,yBAAyB;AAC3B;AACA;EACE,yBAAyB;EACzB,WAAW;EACX,gBAAgB;AAClB;AACA;EACE,oBAAoB;EACpB,gBAAgB;AAClB;AACA;EACE,qBAAqB;AACvB;AACA;EACE,gBAAgB;EAChB,qBAAqB;EACrB,mBAAmB;EACnB,WAAW;EACX,gBAAgB;EAChB,YAAY;EACZ,uBAAuB;EACvB,iBAAiB;AACnB;AACA;EACE,YAAY;AACd;AACA;EACE,WAAW;EACX,gBAAgB;EAChB,WAAW;AACb;AACA;EACE,YAAY;AACd;AACA;EACE,YAAY;EACZ,iBAAiB;AACnB;AACA;EACE,WAAW;EACX,WAAW;EACX,aAAa;EACb,8BAA8B;AAChC","file":"index.vue","sourcesContent":[".container {\n padding: 15px;\n margin: 0px;\n width: 100%;\n background: #fff;\n float: left;\n}\n.input-with-select {\n width: 300px;\n}\n.width400 {\n width: 400px;\n}\n.optBox {\n margin-bottom: 10px;\n overflow: hidden;\n}\n.leftBtn {\n float: left;\n}\n.rightBtn {\n float: right;\n}\n.rightBtn .textareaSpec {\n position: absolute;\n right: 100px;\n z-index: 1000;\n width: 700px;\n height: 400px;\n}\n.rightBtn .border {\n border: 1px solid #dcdfe6;\n}\n.tagBox {\n width: calc(100% - 140px);\n float: left;\n overflow: hidden;\n}\n.tagBox > .el-tag {\n margin: 4px 10px 0 0;\n max-width: 420px;\n}\n.tagBox > .el-tag /deep/ .el-tag__close {\n vertical-align: super;\n}\n.tagBox .tagItem {\n max-width: 397px;\n display: inline-block;\n white-space: nowrap;\n /* 防止文本换行 */\n overflow: hidden;\n /* 隐藏超出的内容 */\n text-overflow: ellipsis;\n /* 将超出的内容显示为省略号 */\n}\n.clearAll {\n float: right;\n}\n.table {\n width: 100%;\n margin-top: 10px;\n float: left;\n}\n.pagi {\n float: right;\n}\n.pagi.pagination-container {\n padding: 0px;\n padding-top: 20px;\n}\n.btmBox {\n width: 100%;\n float: left;\n display: flex;\n justify-content: space-between;\n}\n"]},media:undefined});};/* scoped */const __vue_scope_id__$3="data-v-ab2f0bc0";/* module identifier */const __vue_module_identifier__$3=undefined;/* functional template */const __vue_is_functional_template__$3=false;/* style inject SSR */ /* style inject shadow dom */const __vue_component__$3=/*#__PURE__*/normalizeComponent({render:__vue_render__$3,staticRenderFns:__vue_staticRenderFns__$3},__vue_inject_styles__$3,__vue_script__$3,__vue_scope_id__$3,__vue_is_functional_template__$3,__vue_module_identifier__$3,false,createInjector,undefined,undefined);__vue_component__$3.install=function(Vue){Vue.component(__vue_component__$3.name,__vue_component__$3);};/*!
|
|
2284
2284
|
* html2canvas 1.4.1 <https://html2canvas.hertzen.com>
|
|
2285
2285
|
* Copyright (c) 2022 Niklas von Hertzen <https://hertzen.com>
|
|
2286
2286
|
* Released under MIT License
|
|
@@ -2645,12 +2645,12 @@ let a=document.createElement("a");let clickEvent=document.createEvent("MouseEven
|
|
|
2645
2645
|
//
|
|
2646
2646
|
//
|
|
2647
2647
|
//
|
|
2648
|
-
/**
|
|
2649
|
-
* 导出多个分页
|
|
2650
|
-
* count {Number} 总数
|
|
2651
|
-
* pagingBase {Number} 分页基数
|
|
2652
|
-
* fetchParam {object} 请求参数
|
|
2653
|
-
* getApi {function} 请求接口
|
|
2648
|
+
/**
|
|
2649
|
+
* 导出多个分页
|
|
2650
|
+
* count {Number} 总数
|
|
2651
|
+
* pagingBase {Number} 分页基数
|
|
2652
|
+
* fetchParam {object} 请求参数
|
|
2653
|
+
* getApi {function} 请求接口
|
|
2654
2654
|
*/var script$1={name:"FormTable",components:{},props:{count:{// 总数
|
|
2655
2655
|
default:0,type:Number},pagingBase:{// 分页基数
|
|
2656
2656
|
default:500,type:Number},fetchParam:{// 上传时附带的参数
|
|
@@ -2659,15 +2659,15 @@ const exportItems=[];Array.from({length:numItems},(_,i)=>{exportItems.push({name
|
|
|
2659
2659
|
if(this.count%this.pagingBase>0){exportItems.push({name:`导出${this.pagingBase*numItems+1}-${this.count}`,params:{pageSize:this.pagingBase,skipCount:this.pagingBase*numItems// 修正了原始代码中的逻辑错误
|
|
2660
2660
|
}});}// 一次性赋值给this.exportList，减少数据变化的检测次数
|
|
2661
2661
|
this.exportList=exportItems;}}},mounted(){},methods:{handleDownload(ops){let obj={};if(this.getParam){obj=this.getParam();delete obj.pageSize;delete obj.skipCount;}delete this.fetchParam.pageSize;delete this.fetchParam.skipCount;const param=Object.assign(obj,this.fetchParam,ops);if(this.getApi){this.getApi(param,this.pagingBase).then(res=>{if(res.result=="success"){this.$notify({title:"成功",message:res.msg,type:"success"});}else{this.$message.error(res.msg);}},err=>{this.$message.error(err.msg);});}else{const params=new URLSearchParams();for(let key in param){if(param[key]||param[key]===0){params.append(key,param[key]);}}let headers={"Content-Type":"application/x-www-form-urlencoded"};const url=`/gateway/huilianApi/export/genericExport`;if(window.HLEncryption){headers=window.HLEncryption.setRequestHeaders({url:url,headers:headers});}fetch(url,{method:"POST",headers,body:params.toString()}).then(response=>response.json())// 将响应转换为二进制格式的Blob对象
|
|
2662
|
-
.then(res=>{if(res.result=="success"){this.$notify({title:"成功",message:res.msg,type:"success"});}else{this.$message.error(res.msg);}}).catch(error=>{this.$message.error("下载失败");console.error("下载失败:",error);});}}}};/* script */const __vue_script__$1=script$1;/* template */var __vue_render__$1=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("el-dropdown",{attrs:{trigger:"click"},on:{command:_vm.handleDownload}},[_c("el-button",[_vm._v("\n 导出"),_c("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),_vm._v(" "),_c("el-dropdown-menu",{staticStyle:{"max-height":"300px","overflow-y":"auto"},attrs:{slot:"dropdown"},slot:"dropdown"},_vm._l(_vm.exportList,function(item,index){return _c("el-dropdown-item",{key:"exportList"+index,attrs:{command:item.params}},[_vm._v("\n "+_vm._s(item.name)+"\n ")]);}),1)],1);};var __vue_staticRenderFns__$1=[];__vue_render__$1._withStripped=true;/* style */const __vue_inject_styles__$1=function(inject){if(!inject)return;inject("data-v-
|
|
2663
|
-
/**
|
|
2664
|
-
* btnText 导入按钮文字，默认导入
|
|
2665
|
-
* btnType 导入按钮样式，默认空
|
|
2666
|
-
* dialogTitle 导入弹窗标题，默认导入数据
|
|
2667
|
-
* tempKey 导入模板key，默认空
|
|
2668
|
-
* fileType 导入文件格式，默认xlsx，支持csv,xlsx,xls
|
|
2669
|
-
* close 导入窗口关闭回调
|
|
2670
|
-
* fileName 下载导入文件名，不需要后缀
|
|
2662
|
+
.then(res=>{if(res.result=="success"){this.$notify({title:"成功",message:res.msg,type:"success"});}else{this.$message.error(res.msg);}}).catch(error=>{this.$message.error("下载失败");console.error("下载失败:",error);});}}}};/* script */const __vue_script__$1=script$1;/* template */var __vue_render__$1=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("el-dropdown",{attrs:{trigger:"click"},on:{command:_vm.handleDownload}},[_c("el-button",[_vm._v("\n 导出"),_c("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),_vm._v(" "),_c("el-dropdown-menu",{staticStyle:{"max-height":"300px","overflow-y":"auto"},attrs:{slot:"dropdown"},slot:"dropdown"},_vm._l(_vm.exportList,function(item,index){return _c("el-dropdown-item",{key:"exportList"+index,attrs:{command:item.params}},[_vm._v("\n "+_vm._s(item.name)+"\n ")]);}),1)],1);};var __vue_staticRenderFns__$1=[];__vue_render__$1._withStripped=true;/* style */const __vue_inject_styles__$1=function(inject){if(!inject)return;inject("data-v-3a3675e4_0",{source:"\n\n/*# sourceMappingURL=index.vue.map */",map:{"version":3,"sources":["index.vue"],"names":[],"mappings":";;AAEA,oCAAoC","file":"index.vue"},media:undefined});};/* scoped */const __vue_scope_id__$1=undefined;/* module identifier */const __vue_module_identifier__$1=undefined;/* functional template */const __vue_is_functional_template__$1=false;/* style inject SSR */ /* style inject shadow dom */const __vue_component__$1=/*#__PURE__*/normalizeComponent({render:__vue_render__$1,staticRenderFns:__vue_staticRenderFns__$1},__vue_inject_styles__$1,__vue_script__$1,__vue_scope_id__$1,__vue_is_functional_template__$1,__vue_module_identifier__$1,false,createInjector,undefined,undefined);__vue_component__$1.install=function(Vue){Vue.component(__vue_component__$1.name,__vue_component__$1);};//
|
|
2663
|
+
/**
|
|
2664
|
+
* btnText 导入按钮文字，默认导入
|
|
2665
|
+
* btnType 导入按钮样式，默认空
|
|
2666
|
+
* dialogTitle 导入弹窗标题，默认导入数据
|
|
2667
|
+
* tempKey 导入模板key，默认空
|
|
2668
|
+
* fileType 导入文件格式，默认xlsx，支持csv,xlsx,xls
|
|
2669
|
+
* close 导入窗口关闭回调
|
|
2670
|
+
* fileName 下载导入文件名，不需要后缀
|
|
2671
2671
|
*/var script={name:"StandardImportComponents",components:{},props:{btnText:{default:"导入",type:String},btnType:{default:"",type:String},dialogTitle:{default:"导入数据",type:String},tempKey:{default:"",type:String},fileType:{default:"xlsx",type:String},close:{default:()=>{},type:Function},fileName:{default:"导入模板",type:String},failFileType:{default:"",type:String},extendParams:{default:"",type:String},onSuccessCallback:{default:()=>{},type:Function},errorParams:{default:()=>({}),type:Object}},data(){return{importApi:"/gateway/huilianApi/importcs/standardImport",dialogVisible:false,formData:{tempKey:this.tempKey,fileType:this.fileType,extendParams:this.extendParams},fileList:[],detailData:{},isSubmitLoading:false,fileCode:""};},mounted(){},computed:{fileTypeComputer(){if(this.fileType==="xlsx"){return"请上传 .xlsx 或 .xls 为后缀的文件";}else{return`请上传 .${this.fileType} 为后缀的文件`;}}},methods:{getTemp(){const params=new URLSearchParams();params.append("tempKey",this.tempKey);params.append("fileType",this.fileType);let headers={"Content-Type":"application/x-www-form-urlencoded"};const url=`/gateway/huilianApi/importcs/queryImportTemp`;if(window.HLEncryption){headers=window.HLEncryption.setRequestHeaders({url:url,headers:headers});}fetch(url,{method:"POST",headers,body:params.toString()}).then(response=>response.blob())// 将响应转换为二进制格式的Blob对象
|
|
2672
2672
|
.then(blob=>{// 创建一个指向Blob的URL
|
|
2673
2673
|
const url=URL.createObjectURL(blob);// 创建一个临时的<a>标签用于触发下载
|
|
@@ -2687,4 +2687,4 @@ for(let key in this.formData){if(this.formData[key]!==""){formData.append(key,th
|
|
|
2687
2687
|
// fileType: failFileType,
|
|
2688
2688
|
// };
|
|
2689
2689
|
const searchParams=new URLSearchParams();searchParams.append("fileCode",fileCode);searchParams.append("fileType",failFileType);for(let key in this.errorParams){if(this.errorParams[key]||this.errorParams[key]==0){searchParams.append(key,this.errorParams[key]);}}// 加密
|
|
2690
|
-
let headers={"Content-Type":"application/x-www-form-urlencoded"};const urlApi="/gateway/huilianApi/errorcs/exportErrorFile";if(window.HLEncryption){headers=window.HLEncryption.setRequestHeaders({url:urlApi,headers:headers});}const response=await fetch(urlApi,{method:"post",headers:headers,body:searchParams.toString()});if(!response.ok){throw new Error(`下载请求失败: ${response.statusText}`);}const blob=await response.blob();const name=response.headers.get("content-disposition").split("filename=")[1];const url=window.URL.createObjectURL(blob);const a=document.createElement("a");a.href=url;a.download=decodeURIComponent(name);document.body.appendChild(a);a.click();document.body.removeChild(a);window.URL.revokeObjectURL(url);}else{this.$message({message:"无文件可下载",type:"warning"});}}}};/* script */const __vue_script__=script;/* template */var __vue_render__=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",{staticClass:"StandardImportComponents"},[_c("el-button",{attrs:{type:_vm.btnType},on:{click:_vm.openDialog}},[_vm._v(_vm._s(_vm.btnText))]),_vm._v(" "),_c("el-dialog",{attrs:{title:_vm.dialogTitle,visible:_vm.dialogVisible,width:"600px","close-on-click-modal":false,"close-on-press-escape":false,"before-close":_vm.handleClose,"append-to-body":""},on:{"update:visible":function($event){_vm.dialogVisible=$event;}}},[_c("div",[_vm._t("content-header")],2),_vm._v(" "),_c("div",{staticStyle:{position:"relative"}},[_c("el-upload",{ref:"importFile",attrs:{action:_vm.importApi,"file-list":_vm.fileList,accept:"."+_vm.fileType,"before-upload":_vm.beforeUploadForm,data:_vm.formData,limit:1,"on-change":_vm.handleChange,"on-remove":_vm.handleRemove,"on-success":_vm.handleSuccess,"on-error":_vm.handleError,"auto-upload":false,"http-request":_vm.customHttpRequest}},[_c("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[_vm._v("选取文件")]),_vm._v(" "),_c("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[_vm._v("\n "+_vm._s(_vm.fileTypeComputer)+"\n ")])],1),_vm._v(" "),_c("div",{staticStyle:{position:"absolute",top:"0",left:"100px"}},[_c("el-button",{attrs:{type:"text"},on:{click:_vm.getTemp}},[_vm._v(" 模板下载 ")])],1),_vm._v(" "),_c("div",{directives:[{name:"show",rawName:"v-show",value:_vm.detailData.successCount||_vm.detailData.failCount,expression:"detailData.successCount || detailData.failCount"}],staticClass:"mt-10",staticStyle:{"font-size":"12px","font-weight":"400",color:"#999999"}},[_vm._v("\n 导入结果（仅展示最后一次上传结果）：\n "),_c("span",{staticStyle:{color:"#333333"}},[_vm._v("\n 成功"+_vm._s(_vm.detailData.successCount||0)+"条，失败"+_vm._s(_vm.detailData.failCount||0)+"条\n ")]),_vm._v("\n \n "),_c("a",{directives:[{name:"show",rawName:"v-show",value:_vm.failFileType&&_vm.detailData.failCount,expression:"failFileType && detailData.failCount"}],staticStyle:{color:"#599ebf"},attrs:{href:"javascript:void(0)"},on:{click:function($event){return _vm.downloadFile(_vm.fileCode,_vm.failFileType);}}},[_vm._v("\n 下载失败信息\n ")])])],1),_vm._v(" "),_c("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[_c("el-button",{on:{click:_vm.handleClose}},[_vm._v(" 取 消 ")]),_vm._v(" "),_c("el-button",{attrs:{type:"primary",loading:_vm.isSubmitLoading},on:{click:_vm.query}},[_vm._v("\n 确 定\n ")])],1)])],1);};var __vue_staticRenderFns__=[];__vue_render__._withStripped=true;/* style */const __vue_inject_styles__=undefined;/* scoped */const __vue_scope_id__=undefined;/* module identifier */const __vue_module_identifier__=undefined;/* functional template */const __vue_is_functional_template__=false;/* style inject */ /* style inject SSR */ /* style inject shadow dom */const __vue_component__=/*#__PURE__*/normalizeComponent({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},__vue_inject_styles__,__vue_script__,__vue_scope_id__,__vue_is_functional_template__,__vue_module_identifier__,false,undefined,undefined,undefined);__vue_component__.install=function(Vue){Vue.component(__vue_component__.name,__vue_component__);};var version="3.4.
|
|
2690
|
+
let headers={"Content-Type":"application/x-www-form-urlencoded"};const urlApi="/gateway/huilianApi/errorcs/exportErrorFile";if(window.HLEncryption){headers=window.HLEncryption.setRequestHeaders({url:urlApi,headers:headers});}const response=await fetch(urlApi,{method:"post",headers:headers,body:searchParams.toString()});if(!response.ok){throw new Error(`下载请求失败: ${response.statusText}`);}const blob=await response.blob();const name=response.headers.get("content-disposition").split("filename=")[1];const url=window.URL.createObjectURL(blob);const a=document.createElement("a");a.href=url;a.download=decodeURIComponent(name);document.body.appendChild(a);a.click();document.body.removeChild(a);window.URL.revokeObjectURL(url);}else{this.$message({message:"无文件可下载",type:"warning"});}}}};/* script */const __vue_script__=script;/* template */var __vue_render__=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",{staticClass:"StandardImportComponents",staticStyle:{display:"inline-block"}},[_c("el-button",{attrs:{type:_vm.btnType},on:{click:_vm.openDialog}},[_vm._v(_vm._s(_vm.btnText))]),_vm._v(" "),_c("el-dialog",{attrs:{title:_vm.dialogTitle,visible:_vm.dialogVisible,width:"600px","close-on-click-modal":false,"close-on-press-escape":false,"before-close":_vm.handleClose,"append-to-body":""},on:{"update:visible":function($event){_vm.dialogVisible=$event;}}},[_c("div",[_vm._t("content-header")],2),_vm._v(" "),_c("div",{staticStyle:{position:"relative"}},[_c("el-upload",{ref:"importFile",attrs:{action:_vm.importApi,"file-list":_vm.fileList,accept:"."+_vm.fileType,"before-upload":_vm.beforeUploadForm,data:_vm.formData,limit:1,"on-change":_vm.handleChange,"on-remove":_vm.handleRemove,"on-success":_vm.handleSuccess,"on-error":_vm.handleError,"auto-upload":false,"http-request":_vm.customHttpRequest}},[_c("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[_vm._v("选取文件")]),_vm._v(" "),_c("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[_vm._v("\n "+_vm._s(_vm.fileTypeComputer)+"\n ")])],1),_vm._v(" "),_c("div",{staticStyle:{position:"absolute",top:"0",left:"100px"}},[_c("el-button",{attrs:{type:"text"},on:{click:_vm.getTemp}},[_vm._v(" 模板下载 ")])],1),_vm._v(" "),_c("div",{directives:[{name:"show",rawName:"v-show",value:_vm.detailData.successCount||_vm.detailData.failCount,expression:"detailData.successCount || detailData.failCount"}],staticClass:"mt-10",staticStyle:{"font-size":"12px","font-weight":"400",color:"#999999"}},[_vm._v("\n 导入结果（仅展示最后一次上传结果）：\n "),_c("span",{staticStyle:{color:"#333333"}},[_vm._v("\n 成功"+_vm._s(_vm.detailData.successCount||0)+"条，失败"+_vm._s(_vm.detailData.failCount||0)+"条\n ")]),_vm._v("\n \n "),_c("a",{directives:[{name:"show",rawName:"v-show",value:_vm.failFileType&&_vm.detailData.failCount,expression:"failFileType && detailData.failCount"}],staticStyle:{color:"#599ebf"},attrs:{href:"javascript:void(0)"},on:{click:function($event){return _vm.downloadFile(_vm.fileCode,_vm.failFileType);}}},[_vm._v("\n 下载失败信息\n ")])])],1),_vm._v(" "),_c("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[_c("el-button",{on:{click:_vm.handleClose}},[_vm._v(" 取 消 ")]),_vm._v(" "),_c("el-button",{attrs:{type:"primary",loading:_vm.isSubmitLoading},on:{click:_vm.query}},[_vm._v("\n 确 定\n ")])],1)])],1);};var __vue_staticRenderFns__=[];__vue_render__._withStripped=true;/* style */const __vue_inject_styles__=undefined;/* scoped */const __vue_scope_id__=undefined;/* module identifier */const __vue_module_identifier__=undefined;/* functional template */const __vue_is_functional_template__=false;/* style inject */ /* style inject SSR */ /* style inject shadow dom */const __vue_component__=/*#__PURE__*/normalizeComponent({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},__vue_inject_styles__,__vue_script__,__vue_scope_id__,__vue_is_functional_template__,__vue_module_identifier__,false,undefined,undefined,undefined);__vue_component__.install=function(Vue){Vue.component(__vue_component__.name,__vue_component__);};var version="3.4.2";const components=[__vue_component__$j,__vue_component__$i,__vue_component__$h,__vue_component__$g,__vue_component__$3,__vue_component__$2,__vue_component__$1,__vue_component__];const install=function(Vue){components.forEach(component=>{Vue.component(component.name,component);});};if(typeof window!=="undefined"&&window.Vue){install(window.Vue);}var index={version,install};export{__vue_component__$1 as ExportList,__vue_component__$3 as FormTableScheme,__vue_component__$i as HelloVue,__vue_component__$2 as HtmlToImg,__vue_component__$j as MyButton,__vue_component__$g as ShowFile,__vue_component__ as StandardImport,__vue_component__$h as UploadFile,index as default,install};
|