@huilian/components-tms 3.2.12 → 3.2.13
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-84e29316_0",{source:"\nh3[data-v-84e29316] {\n margin: 40px 0 0;\n}\nul[data-v-84e29316] {\n list-style-type: none;\n padding: 0;\n}\nli[data-v-84e29316] {\n display: inline-block;\n margin: 0 10px;\n}\na[data-v-84e29316] {\n color: #42b983;\n}\n",map:{"version":3,"sources":["/Users/chenlei/HLcode/test/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>\n <div class=\"hello\">\n <h1>{{ msg }}</h1>\n <p>\n For a guide and recipes on how to configure / customize this project,<br>\n check out the\n <a href=\"https://cli.vuejs.org\" target=\"_blank\" rel=\"noopener\">vue-cli documentation</a>.\n </p>\n <h3>Installed CLI Plugins</h3>\n <ul>\n <li><a href=\"https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel\" target=\"_blank\" rel=\"noopener\">babel</a></li>\n <li><a href=\"https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript\" target=\"_blank\" rel=\"noopener\">typescript</a></li>\n <li><a href=\"https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint\" target=\"_blank\" rel=\"noopener\">eslint</a></li>\n </ul>\n <h3>Essential Links</h3>\n <ul>\n <li><a href=\"https://vuejs.org\" target=\"_blank\" rel=\"noopener\">Core Docs</a></li>\n <li><a href=\"https://forum.vuejs.org\" target=\"_blank\" rel=\"noopener\">Forum</a></li>\n <li><a href=\"https://chat.vuejs.org\" target=\"_blank\" rel=\"noopener\">Community Chat</a></li>\n <li><a href=\"https://twitter.com/vuejs\" target=\"_blank\" rel=\"noopener\">Twitter</a></li>\n <li><a href=\"https://news.vuejs.org\" target=\"_blank\" rel=\"noopener\">News</a></li>\n </ul>\n <h3>Ecosystem</h3>\n <ul>\n <li><a href=\"https://router.vuejs.org\" target=\"_blank\" rel=\"noopener\">vue-router</a></li>\n <li><a href=\"https://vuex.vuejs.org\" target=\"_blank\" rel=\"noopener\">vuex</a></li>\n <li><a href=\"https://github.com/vuejs/vue-devtools#vue-devtools\" target=\"_blank\" rel=\"noopener\">vue-devtools</a></li>\n <li><a href=\"https://vue-loader.vuejs.org\" target=\"_blank\" rel=\"noopener\">vue-loader</a></li>\n <li><a href=\"https://github.com/vuejs/awesome-vue\" target=\"_blank\" rel=\"noopener\">awesome-vue</a></li>\n </ul>\n </div>\n</template>\n\n<script>\nexport default {\n name: 'HelloVue',\n props: {\n msg: String,\n },\n};\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped>\nh3 {\n margin: 40px 0 0;\n}\nul {\n list-style-type: none;\n padding: 0;\n}\nli {\n display: inline-block;\n margin: 0 10px;\n}\na {\n color: #42b983;\n}\n</style>"]},media:undefined});};/* scoped */const __vue_scope_id__$i="data-v-84e29316";/* 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>
|
|
@@ -578,7 +578,7 @@ handleUploadForm(file,fileList){if(!file.url){file.url=URL.createObjectURL(file.
|
|
|
578
578
|
handleSuccess(response,file,fileList){var num=0;for(var i=0;i<fileList.length;i++){if(fileList[i].status==="success"){num++;}}if(num===fileList.length){this.formFileList=fileList;this.$emit("update:fileUrl",this.formFileList);this.noneBtnImg=this.formFileList.length>=this.limit;if(this.handleSuccessCallback){this.handleSuccessCallback(response,file,fileList);}}},// 上传失败
|
|
579
579
|
handleError(err,file,fileList){console.log(err);// this.loading.close()
|
|
580
580
|
},dragEnd(){// this.drag = false;
|
|
581
|
-
this.$emit("update:fileUrl",this.formFileList);}}};/* 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-4ec8919d_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":"AAgmBA;EACA,kBAAA;AC/lBA;ADkmBA;EACA,YAAA;EACA,aAAA;EACA,gBAAA;AChmBA;ADomBA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,kBAAA;EACA,UAAA;AClmBA;ADqmBA;EACA,WAAA;EACA,YAAA;ACnmBA;ADqmBA;EACA,WAAA;EACA,YAAA;EACA,wBAAA;ACnmBA;ADwmBA;EACA,aAAA;ACtmBA;;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\n\r\nexport default {\r\n components: { draggable },\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 ];\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 if (\r\n !this.fileType.includes(\r\n \".\" + nameList[nameList.length - 1].toLowerCase()\r\n )\r\n ) {\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 } 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 } else if (\r\n type === \"WORD\" ||\r\n type === \"EXCEL\" ||\r\n type === \"CSV\" ||\r\n type === \"PPT\"\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 } 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 },\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 },\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);};//
|
|
581
|
+
this.$emit("update:fileUrl",this.formFileList);}}};/* 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-72244bbe_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":"AAgmBA;EACA,kBAAA;AC/lBA;ADkmBA;EACA,YAAA;EACA,aAAA;EACA,gBAAA;AChmBA;ADomBA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,kBAAA;EACA,UAAA;AClmBA;ADqmBA;EACA,WAAA;EACA,YAAA;ACnmBA;ADqmBA;EACA,WAAA;EACA,YAAA;EACA,wBAAA;ACnmBA;ADwmBA;EACA,aAAA;ACtmBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"upload_file_box\">\n <div style=\"height: 0; overflow: hidden\">\n <el-image\n ref=\"previewImg\"\n :src=\"dialogImageUrl\"\n :preview-src-list=\"formFileList.map((item) => bgImg(item))\"\n />\n </div>\n\n <el-upload\n :class=\"{ disUoloadSty: noneBtnImg }\"\n :headers=\"headers\"\n :action=\"apiUrl\"\n :list-type=\"listType\"\n :tip=\"tip\"\n :limit=\"limit\"\n :multiple=\"multiple\"\n :data=\"formData\"\n :accept=\"formatFileType()\"\n :disabled=\"fileDisabled\"\n :file-list=\"formFileList\"\n :on-exceed=\"formHandleExceed\"\n :before-upload=\"beforeUploadForm\"\n :on-change=\"handleUploadForm\"\n :on-remove=\"formHandleRemove\"\n :on-success=\"handleSuccess\"\n :on-error=\"handleError\"\n :on-preview=\"handlePreview\"\n :http-request=\"customHttpRequest\"\n >\n <div v-if=\"listType === 'text'\" style=\"text-align: left\">\n <el-button type=\"primary\" :disabled=\"fileDisabled\">{{\n trans(\"点击上传\")\n }}</el-button>\n <div slot=\"tip\" class=\"el-upload__tip\">\n {{\n tip\n ? tip\n : `${trans(\"请选择要上传的附件，最多\")}${limit}${trans(\n \"个\"\n )}，${trans(\"单个附件最大\")}${formMaxSize}M`\n }}\n </div>\n </div>\n <div v-if=\"listType === 'excel'\" style=\"text-align: left\">\n <el-button type=\"primary\">{{ trans(\"点击上传\") }}</el-button>\n <slot name=\"tip\"></slot>\n </div>\n\n <draggable\n slot=\"tip\"\n v-if=\"listType === 'picture-card'\"\n tag=\"ul\"\n v-model=\"formFileList\"\n v-bind=\"dragOptions\"\n @end=\"dragEnd\"\n class=\"el-upload-list el-upload-list--picture-card\"\n :style=\"{ position: 'absolute', left: 0, top: 0 }\"\n >\n <li\n class=\"el-upload-list__item is-success\"\n v-for=\"(file, inex) in formFileList\"\n :key=\"inex\"\n >\n <div class=\"upload_file_operation\">\n <div\n class=\"upload_file_bg\"\n :style=\"`background: url(${bgImg(\n file\n )}) 50% 50% / contain no-repeat;`\"\n />\n <span class=\"el-upload-list__item-actions\">\n <span\n class=\"el-upload-list__item-preview\"\n @click=\"handlePictureCardPreview(file)\"\n >\n <i class=\"el-icon-zoom-in\" />\n </span>\n <span\n class=\"el-upload-list__item-delete\"\n @click=\"handleDownload(file)\"\n >\n <i class=\"el-icon-download\" />\n </span>\n <span\n v-if=\"!fileDisabled\"\n class=\"el-upload-list__item-delete\"\n @click=\"formHandleRemove(file)\"\n >\n <i class=\"el-icon-delete\" />\n </span>\n </span>\n </div>\n </li>\n </draggable>\n\n <i\n slot=\"default\"\n class=\"el-icon-plus\"\n v-if=\"listType === 'picture-card'\"\n />\n <div\n slot=\"file\"\n slot-scope=\"{ file }\"\n class=\"upload_file_operation\"\n v-if=\"listType === 'picture-card'\"\n >\n <div\n class=\"upload_file_bg\"\n :style=\"`background: url(${bgImg(\n file\n )}) no-repeat 50% 50%; background-size: contain;`\"\n />\n <span\n v-if=\"file.status !== 'success'\"\n style=\"opacity: 1\"\n class=\"el-upload-list__item-actions\"\n >\n <i class=\"el-icon-loading\"></i>\n </span>\n </div>\n </el-upload>\n </div>\n</template>\n\n<script>\n// import { attachment } from '@/config/api/publicApi'\nimport draggable from \"vuedraggable\";\nimport { mapGetters } from \"vuex\";\nimport axios from \"axios\";\nimport CSV from \"./fileImages/CSV.png\";\nimport EXCEL from \"./fileImages/EXCEL.png\";\nimport PDF from \"./fileImages/PDF.png\";\nimport PPT from \"./fileImages/PPT.png\";\nimport RAR from \"./fileImages/RAR.png\";\nimport WORD from \"./fileImages/WORD.png\";\nimport ZIP from \"./fileImages/ZIP.png\";\nimport APK from \"./fileImages/APK.png\";\nimport PLIST from \"./fileImages/PLIST.png\";\nimport MP4 from \"./fileImages/MP4.png\";\nimport trans from \"../lang/trans\";\n\nexport default {\n components: { draggable },\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 ];\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 if (\n !this.fileType.includes(\n \".\" + nameList[nameList.length - 1].toLowerCase()\n )\n ) {\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 } else if (type === \"PDF\") {\n window.open(\n \"https://www.hellogil.com/web/contractPreview.html?url=\" +\n url.replace(\"http://\", \"https://\")\n );\n } else if (\n type === \"WORD\" ||\n type === \"EXCEL\" ||\n type === \"CSV\" ||\n type === \"PPT\"\n ) {\n window.open(\n `https://file-preview.hellogil.com/onlinePreview?watermarkTxt=${this.userInfo.userName}${this.userInfo.jobCard}&url=` +\n url.replace(\"http://\", \"https://\")\n );\n } else {\n this.$message({\n message: \"该文件不支持预览!\",\n type: \"warning\",\n });\n }\n },\n handleDownload(file) {\n console.log(file);\n var name;\n let url = file.response ? file.response.data[0].attachmenturl : file.url;\n if (file.name) {\n name = file.name;\n if (!name.indexOf(\".\") > -1) {\n var a = url.split(\"/\");\n var b = a[a.length - 1];\n name = file.name + \".\" + b.split(\".\")[1];\n }\n } else {\n var a = url.split(\"/\");\n name = a[a.length - 1];\n }\n axios({\n method: \"post\",\n url:\n process.env.VUE_APP_BASE_API +\n \"/huilianApi/uploader/downloadZipFiles\",\n data:\n \"fileUrls=\" +\n JSON.stringify([\n {\n imgName: name\n .replace(/\\&/g, \"-\")\n .replace(/\\?/g, \"-\")\n .replace(/\\%/g, \"-\"),\n dataImg: url,\n },\n ]),\n responseType: \"blob\", // 加上这个是重点\n }).then((res) => {\n this.downloadFile(res.data, name);\n });\n },\n downloadFile(data, name) {\n const url = window.URL.createObjectURL(new Blob([data]));\n const link = document.createElement(\"a\");\n link.style.display = \"none\";\n link.href = url;\n link.setAttribute(\"download\", name);\n document.body.appendChild(link);\n link.click();\n URL.revokeObjectURL(link.href);\n document.body.removeChild(link);\n this.$message({\n message: \"下载成功\",\n type: \"success\",\n });\n },\n // 允许上传文件个数验证\n formHandleExceed(files, formFileList) {\n this.$message.warning(`最多上传 ${this.limit} 个文件！`);\n },\n // 上传文件\n handleUploadForm(file, fileList) {\n if (!file.url) {\n file.url = URL.createObjectURL(file.raw);\n }\n },\n // 上传成功\n handleSuccess(response, file, fileList) {\n var num = 0;\n for (var i = 0; i < fileList.length; i++) {\n if (fileList[i].status === \"success\") {\n num++;\n }\n }\n if (num === fileList.length) {\n this.formFileList = fileList;\n this.$emit(\"update:fileUrl\", this.formFileList);\n this.noneBtnImg = this.formFileList.length >= this.limit;\n if (this.handleSuccessCallback) {\n this.handleSuccessCallback(response, file, fileList);\n }\n }\n },\n // 上传失败\n handleError(err, file, fileList) {\n console.log(err);\n // this.loading.close()\n },\n\n dragEnd() {\n // this.drag = false;\n this.$emit(\"update:fileUrl\", this.formFileList);\n },\n },\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);};//
|
|
582
582
|
var script$g={props:{fileUrl:{// 文件数组
|
|
583
583
|
default:()=>{return[];},type:Array},showTitle:{// 是否显示图片名
|
|
584
584
|
default:false,type:Boolean},// isText: { // 是否以文字形式展示
|
|
@@ -590,7 +590,7 @@ default:'block',type:String}},data(){return{formFileList:[],// 显示上传文
|
|
|
590
590
|
dialogImageUrl:''};},computed:{...mapGetters(['userInfo'])},watch:{fileUrl:{deep:true,immediate:true,handler(){this.formFileList=this.fileUrl;}}},methods:{// 缩略图展示
|
|
591
591
|
bgImg(file){let type='';const types={IMG:'',WORD:img$4,EXCEL:img$8,PDF:img$7,CSV:img$9,RAR:img$5,ZIP:img$3,PPT:img$6,PLIST:img$1};if(file.raw){type=this.fileFormat(file.name);}else{type=this.fileFormat(file.url);}if(type==='IMG'){return file.url;}else{return types[type];}},// 文件格式
|
|
592
592
|
fileFormat(name){const images='bmp|jpg|jpeg|png|gif|svg|webp|JPG|JPEG|PNG';const word='doc|docx|DOC|DOCX';const excel='xls|xlsx|XLS|XLSX';const pdf='pdf|PDF';const csv='csv|CSV';const rar='rar|RAR';const zip='zip|ZIP';const ppt='pptx|PPTX';const plist='plist|PLIST';const pattern_images=new RegExp('.('+images+')$');const pattern_word=new RegExp('.('+word+')$');const pattern_excel=new RegExp('.('+excel+')$');const pattern_pdf=new RegExp('.('+pdf+')$');const pattern_csv=new RegExp('.('+csv+')$');const pattern_rar=new RegExp('.('+rar+')$');const pattern_zip=new RegExp('.('+zip+')$');const pattern_ppt=new RegExp('.('+ppt+')$');const pattern_plist=new RegExp('.('+plist+')$');if(name.indexOf('?')>-1){name=name.split('?')[0];}if(pattern_images.test(name)){return'IMG';}else if(pattern_word.test(name)){return'WORD';}else if(pattern_excel.test(name)){return'EXCEL';}else if(pattern_pdf.test(name)){return'PDF';}else if(pattern_csv.test(name)){return'CSV';}else if(pattern_rar.test(name)){return'RAR';}else if(pattern_zip.test(name)){return'ZIP';}else if(pattern_ppt.test(name)){return'PPT';}else if(pattern_plist.test(name)){return'PLIST';}},handlePictureCardPreview(file){let type,url;if(file.raw){type=this.fileFormat(file.name);url=file.response.data[0].attachmenturl;}else{type=this.fileFormat(file.url);url=file.url;}if(type==='IMG'){this.dialogImageUrl=file.url;this.$refs.previewImg.showViewer=true;}else if(type==='PDF'){window.open('https://www.hellogil.com/web/contractPreview.html?url='+url.replace('http://','https://'));}else if(type==='WORD'||type==='EXCEL'||type==='CSV'||type==='PPT'){window.open(`https://file-preview.hellogil.com/onlinePreview?watermarkTxt=${this.userInfo.userName}${this.userInfo.jobCard}&url=`+url.replace('http://','https://'));}else{this.$message({message:'该文件不支持预览!',type:'warning'});}},handlePictureCardPreviewCallback(item){this.handlePictureCardPreview(item);},handleDownload(file){console.log(file);var name;if(file.name){name=file.name;if(!name.indexOf('.')>-1){var a=file.url.split('/');var b=a[a.length-1];name=file.name+'.'+b.split('.')[1];}}else{var a=file.url.split('/');name=a[a.length-1];}axios({method:'post',url:process.env.VUE_APP_BASE_API+'/huilianApi/uploader/downloadZipFiles',data:'fileUrls='+JSON.stringify([{imgName:name.replace(/\&/g,'-').replace(/\?/g,'-').replace(/\%/g,'-'),dataImg:file.url}]),responseType:'blob'// 加上这个是重点
|
|
593
|
-
}).then(res=>{this.downloadFile(res.data,name);});},downloadFile(data,name){const url=window.URL.createObjectURL(new Blob([data]));const link=document.createElement('a');link.style.display='none';link.href=url;link.setAttribute('download',name);document.body.appendChild(link);link.click();URL.revokeObjectURL(link.href);document.body.removeChild(link);this.$message({message:'下载成功',type:'success'});}}};/* script */const __vue_script__$g=script$g;/* template */var __vue_render__$g=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("div",{staticClass:"show_file_box"},[_c("div",{staticStyle:{height:"0",width:"0",overflow:"hidden"}},[_c("el-image",{ref:"previewImg",attrs:{src:_vm.dialogImageUrl,"preview-src-list":_vm.formFileList.map(function(item){return _vm.bgImg(item);})}})],1),_vm._v(" "),_vm.type==="block"?_c("div",{},_vm._l(_vm.fileUrl,function(item,index){return _c("div",{key:index,staticClass:"show_file_operation"},[_c("div",{staticClass:"show_file_bg",style:"background: url("+_vm.bgImg(item)+") no-repeat 50% 50%; background-size: contain;"}),_vm._v(" "),_c("span",{staticClass:"el-show-list__item-actions"},[_c("span",{staticClass:"el-show-list__item-preview",on:{click:function($event){return _vm.handlePictureCardPreview(item);}}},[_c("i",{staticClass:"el-icon-zoom-in"})]),_vm._v(" "),_c("span",{staticClass:"el-show-list__item-delete",on:{click:function($event){return _vm.handleDownload(item);}}},[_c("i",{staticClass:"el-icon-download"})])]),_vm._v(" "),_vm.showTitle?_c("p",{staticClass:"show_file_title"},[_vm._v(_vm._s(item.name))]):_vm._e()]);}),0):_vm._e(),_vm._v(" "),_vm.type==="text"?_c("div",_vm._l(_vm.fileUrl,function(item,index){return _c("a",{key:index,on:{click:function($event){return _vm.handlePictureCardPreview(item);}}},[_vm._v(_vm._s(item.name))]);}),0):_vm._e(),_vm._v(" "),_vm.type==="custom"?_c("div",[_vm._t("content",null,{props:_vm.fileUrl,callback:_vm.handlePictureCardPreviewCallback})],2):_vm._e(),_vm._v(" "),_vm.type==="list"?_c("div",[_c("ul",_vm._l(_vm.fileUrl,function(item,index){return _c("li",{key:index,staticClass:"clearfix",class:index+1<_vm.fileUrl.length?"mb-15":""},[_vm._m(0,true),_vm._v(" "),_c("div",{staticClass:"clearfix fl ml-10 textCss",staticStyle:{width:"calc(100% - 30px)"}},[_c("div",{staticClass:"fl imgName"},[_vm._v("\n "+_vm._s(item.name)+"\n ")]),_vm._v(" "),_c("el-button",{staticClass:"fr",attrs:{icon:"el-icon-download",type:"text"},on:{click:function($event){return _vm.handleDownload(item);}}},[_vm._v("下载")]),_vm._v(" "),_c("el-button",{staticClass:"fr mr-15",attrs:{icon:"el-icon-zoom-in",type:"text"},on:{click:function($event){return _vm.handlePictureCardPreview(item);}}},[_vm._v("预览")])],1)]);}),0)]):_vm._e()]);};var __vue_staticRenderFns__$g=[function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",{staticClass:"fl"},[_c("i",{staticClass:"el-icon-folder-opened"})]);}];__vue_render__$g._withStripped=true;/* style */const __vue_inject_styles__$g=function(inject){if(!inject)return;inject("data-v-516233c0_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, .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":"AAoQA;EACA,cAAA;ACnQA;ADqQA;EACA,WAAA;EACA,cAAA;EACA,WAAA;ACnQA;ADqQA;EAGA,kBAAA;EACA,kBAAA;EACA,kBAAA;EACA,WAAA;EACA,kBAAA;EACA,mBAAA;ACrQA;ADsQA;EACA,YAAA;EACA,aAAA;EACA,yBAAA;ACpQA;ADsQA;EACA,kBAAA;EACA,YAAA;EACA,aAAA;EACA,OAAA;EACA,MAAA;EACA,eAAA;EACA,kBAAA;EACA,WAAA;EACA,UAAA;EACA,eAAA;EACA,oCAAA;EACA,wBAAA;ACpQA;ADqQA;EACA,eAAA;EACA,kBAAA;EACA,cAAA;ACnQA;ADqQA;EACA,gBAAA;EACA,MAAA;EACA,iBAAA;ACnQA;ADuQA;EACA,UAAA;ACrQA;ADwQA;EACA,eAAA;EACA,WAAA;EACA,iBAAA;EACA,kBAAA;ACtQA;AD0QA;EACA,gBAAA;EACA,SAAA;EACA,UAAA;EAEA,WAAA;EACA,gBAAA;EACA,gBAAA;ACzQA;AD2QA;EACA,WAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;ACzQA;AD0QA;EAEA,yBAAA;EACA,gBAAA;EACA,uBAAA;EACA,mBAAA;ACzQA;AD2QA;EACA,cAAA;EACA,UAAA;EACA,eAAA;EACA,iBAAA;ACzQA;AD0QA;EACA,iBAAA;ACxQA;;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 class=\"show_file_operation\" v-for=\"(item, index) in fileUrl\" :key=\"index\">\r\n <div class=\"show_file_bg\" :style=\"`background: url(${bgImg(item)}) no-repeat 50% 50%; background-size: contain;`\" />\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 @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 v-for=\"(item, index) in fileUrl\" :key=\"index\" @click=\"handlePictureCardPreview(item)\">{{ item.name }}</a>\r\n </div>\r\n <div v-if=\"type === 'custom'\">\r\n <slot name=\"content\" :props=\"fileUrl\" :callback=\"handlePictureCardPreviewCallback\">\r\n\r\n </slot>\r\n </div>\r\n <div v-if=\"type === 'list'\">\r\n <ul>\r\n <li class=\"clearfix\" :class=\"index+1 < fileUrl.length ? 'mb-15' : ''\" v-for=\"(item, index) in fileUrl\" :key=\"index\">\r\n <span class=\"fl\">\r\n <i class=\"el-icon-folder-opened\"></i>\r\n </span>\r\n <div class=\"clearfix fl ml-10 textCss\" style=\"width: calc(100% - 30px);\">\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 icon=\"el-icon-download\" type=\"text\" class=\"fr\" @click=\"handleDownload(item)\">下载</el-button>\r\n <el-button icon=\"el-icon-zoom-in\" type=\"text\" class=\"fr mr-15\" @click=\"handlePictureCardPreview(item)\">预览</el-button>\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\n\r\nexport default {\r\n props: {\r\n fileUrl: { // 文件数组\r\n default: ()=>{\r\n return []\r\n },\r\n type: Array\r\n },\r\n showTitle: { // 是否显示图片名\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: { // 展示类型{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([\r\n 'userInfo'\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 }\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 } else if (type === 'PDF') {\r\n window.open('https://www.hellogil.com/web/contractPreview.html?url=' + url.replace('http://', 'https://'))\r\n } else if (type === 'WORD' || type === 'EXCEL' || type === 'CSV' || type === 'PPT') {\r\n window.open(`https://file-preview.hellogil.com/onlinePreview?watermarkTxt=${this.userInfo.userName}${this.userInfo.jobCard}&url=` + url.replace('http://', 'https://'))\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: process.env.VUE_APP_BASE_API + '/huilianApi/uploader/downloadZipFiles',\r\n data: 'fileUrls=' + JSON.stringify([{\r\n imgName: name.replace(/\\&/g, '-').replace(/\\?/g, '-').replace(/\\%/g, '-'),\r\n dataImg: file.url\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,.5);\r\n transition: opacity .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,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, .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
|
|
593
|
+
}).then(res=>{this.downloadFile(res.data,name);});},downloadFile(data,name){const url=window.URL.createObjectURL(new Blob([data]));const link=document.createElement('a');link.style.display='none';link.href=url;link.setAttribute('download',name);document.body.appendChild(link);link.click();URL.revokeObjectURL(link.href);document.body.removeChild(link);this.$message({message:'下载成功',type:'success'});}}};/* script */const __vue_script__$g=script$g;/* template */var __vue_render__$g=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("div",{staticClass:"show_file_box"},[_c("div",{staticStyle:{height:"0",width:"0",overflow:"hidden"}},[_c("el-image",{ref:"previewImg",attrs:{src:_vm.dialogImageUrl,"preview-src-list":_vm.formFileList.map(function(item){return _vm.bgImg(item);})}})],1),_vm._v(" "),_vm.type==="block"?_c("div",{},_vm._l(_vm.fileUrl,function(item,index){return _c("div",{key:index,staticClass:"show_file_operation"},[_c("div",{staticClass:"show_file_bg",style:"background: url("+_vm.bgImg(item)+") no-repeat 50% 50%; background-size: contain;"}),_vm._v(" "),_c("span",{staticClass:"el-show-list__item-actions"},[_c("span",{staticClass:"el-show-list__item-preview",on:{click:function($event){return _vm.handlePictureCardPreview(item);}}},[_c("i",{staticClass:"el-icon-zoom-in"})]),_vm._v(" "),_c("span",{staticClass:"el-show-list__item-delete",on:{click:function($event){return _vm.handleDownload(item);}}},[_c("i",{staticClass:"el-icon-download"})])]),_vm._v(" "),_vm.showTitle?_c("p",{staticClass:"show_file_title"},[_vm._v(_vm._s(item.name))]):_vm._e()]);}),0):_vm._e(),_vm._v(" "),_vm.type==="text"?_c("div",_vm._l(_vm.fileUrl,function(item,index){return _c("a",{key:index,on:{click:function($event){return _vm.handlePictureCardPreview(item);}}},[_vm._v(_vm._s(item.name))]);}),0):_vm._e(),_vm._v(" "),_vm.type==="custom"?_c("div",[_vm._t("content",null,{props:_vm.fileUrl,callback:_vm.handlePictureCardPreviewCallback})],2):_vm._e(),_vm._v(" "),_vm.type==="list"?_c("div",[_c("ul",_vm._l(_vm.fileUrl,function(item,index){return _c("li",{key:index,staticClass:"clearfix",class:index+1<_vm.fileUrl.length?"mb-15":""},[_vm._m(0,true),_vm._v(" "),_c("div",{staticClass:"clearfix fl ml-10 textCss",staticStyle:{width:"calc(100% - 30px)"}},[_c("div",{staticClass:"fl imgName"},[_vm._v("\n "+_vm._s(item.name)+"\n ")]),_vm._v(" "),_c("el-button",{staticClass:"fr",attrs:{icon:"el-icon-download",type:"text"},on:{click:function($event){return _vm.handleDownload(item);}}},[_vm._v("下载")]),_vm._v(" "),_c("el-button",{staticClass:"fr mr-15",attrs:{icon:"el-icon-zoom-in",type:"text"},on:{click:function($event){return _vm.handlePictureCardPreview(item);}}},[_vm._v("预览")])],1)]);}),0)]):_vm._e()]);};var __vue_staticRenderFns__$g=[function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",{staticClass:"fl"},[_c("i",{staticClass:"el-icon-folder-opened"})]);}];__vue_render__$g._withStripped=true;/* style */const __vue_inject_styles__$g=function(inject){if(!inject)return;inject("data-v-45cddb3a_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, .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":"AAoQA;EACA,cAAA;ACnQA;ADqQA;EACA,WAAA;EACA,cAAA;EACA,WAAA;ACnQA;ADqQA;EAGA,kBAAA;EACA,kBAAA;EACA,kBAAA;EACA,WAAA;EACA,kBAAA;EACA,mBAAA;ACrQA;ADsQA;EACA,YAAA;EACA,aAAA;EACA,yBAAA;ACpQA;ADsQA;EACA,kBAAA;EACA,YAAA;EACA,aAAA;EACA,OAAA;EACA,MAAA;EACA,eAAA;EACA,kBAAA;EACA,WAAA;EACA,UAAA;EACA,eAAA;EACA,oCAAA;EACA,wBAAA;ACpQA;ADqQA;EACA,eAAA;EACA,kBAAA;EACA,cAAA;ACnQA;ADqQA;EACA,gBAAA;EACA,MAAA;EACA,iBAAA;ACnQA;ADuQA;EACA,UAAA;ACrQA;ADwQA;EACA,eAAA;EACA,WAAA;EACA,iBAAA;EACA,kBAAA;ACtQA;AD0QA;EACA,gBAAA;EACA,SAAA;EACA,UAAA;EAEA,WAAA;EACA,gBAAA;EACA,gBAAA;ACzQA;AD2QA;EACA,WAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;ACzQA;AD0QA;EAEA,yBAAA;EACA,gBAAA;EACA,uBAAA;EACA,mBAAA;ACzQA;AD2QA;EACA,cAAA;EACA,UAAA;EACA,eAAA;EACA,iBAAA;ACzQA;AD0QA;EACA,iBAAA;ACxQA;;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 class=\"show_file_operation\" v-for=\"(item, index) in fileUrl\" :key=\"index\">\n <div class=\"show_file_bg\" :style=\"`background: url(${bgImg(item)}) no-repeat 50% 50%; background-size: contain;`\" />\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 @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 v-for=\"(item, index) in fileUrl\" :key=\"index\" @click=\"handlePictureCardPreview(item)\">{{ item.name }}</a>\n </div>\n <div v-if=\"type === 'custom'\">\n <slot name=\"content\" :props=\"fileUrl\" :callback=\"handlePictureCardPreviewCallback\">\n\n </slot>\n </div>\n <div v-if=\"type === 'list'\">\n <ul>\n <li class=\"clearfix\" :class=\"index+1 < fileUrl.length ? 'mb-15' : ''\" v-for=\"(item, index) in fileUrl\" :key=\"index\">\n <span class=\"fl\">\n <i class=\"el-icon-folder-opened\"></i>\n </span>\n <div class=\"clearfix fl ml-10 textCss\" style=\"width: calc(100% - 30px);\">\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 icon=\"el-icon-download\" type=\"text\" class=\"fr\" @click=\"handleDownload(item)\">下载</el-button>\n <el-button icon=\"el-icon-zoom-in\" type=\"text\" class=\"fr mr-15\" @click=\"handlePictureCardPreview(item)\">预览</el-button>\n </div>\n </li>\n </ul>\n </div>\n </div>\n</template>\n\n<script>\nimport { mapGetters } from 'vuex'\nimport axios from 'axios'\nimport CSV from '../UploadFile/fileImages/CSV.png'\nimport EXCEL from '../UploadFile/fileImages/EXCEL.png'\nimport PDF from '../UploadFile/fileImages/PDF.png'\nimport PPT from '../UploadFile/fileImages/PPT.png'\nimport RAR from '../UploadFile/fileImages/RAR.png'\nimport WORD from '../UploadFile/fileImages/WORD.png'\nimport ZIP from '../UploadFile/fileImages/ZIP.png'\nimport PLIST from '../UploadFile/fileImages/PLIST.png'\n\nexport default {\n props: {\n fileUrl: { // 文件数组\n default: ()=>{\n return []\n },\n type: Array\n },\n showTitle: { // 是否显示图片名\n default: false,\n type: Boolean\n },\n // isText: { // 是否以文字形式展示\n // default: false,\n // type: Boolean\n // },\n type: { // 展示类型{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([\n 'userInfo'\n ])\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 } else if (type === 'PDF') {\n window.open('https://www.hellogil.com/web/contractPreview.html?url=' + url.replace('http://', 'https://'))\n } else if (type === 'WORD' || type === 'EXCEL' || type === 'CSV' || type === 'PPT') {\n window.open(`https://file-preview.hellogil.com/onlinePreview?watermarkTxt=${this.userInfo.userName}${this.userInfo.jobCard}&url=` + url.replace('http://', 'https://'))\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: process.env.VUE_APP_BASE_API + '/huilianApi/uploader/downloadZipFiles',\n data: 'fileUrls=' + JSON.stringify([{\n imgName: name.replace(/\\&/g, '-').replace(/\\?/g, '-').replace(/\\%/g, '-'),\n dataImg: file.url\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,.5);\n transition: opacity .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,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, .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
|
|
594
594
|
/******/ // The module cache
|
|
595
595
|
/******/var installedModules={};/******/ /******/ // The require function
|
|
596
596
|
/******/function __webpack_require__(moduleId){/******/ /******/ // Check if module is in cache
|
|
@@ -2116,7 +2116,7 @@ module.exports={CSSRuleList:0,CSSStyleDeclaration:0,CSSValueList:0,ClientRectLis
|
|
|
2116
2116
|
*/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);//
|
|
2117
2117
|
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)
|
|
2118
2118
|
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()
|
|
2119
|
-
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);//
|
|
2119
|
+
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);//
|
|
2120
2120
|
//
|
|
2121
2121
|
//
|
|
2122
2122
|
//
|
|
@@ -2124,10 +2124,10 @@ this.inResize=false;this.$nextTick(t=>{this.inResize=true;});}}};/* script */con
|
|
|
2124
2124
|
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);//
|
|
2125
2125
|
var script$d={props:{setFormParams:Function,column:Object,ops:Object,// 请求参数
|
|
2126
2126
|
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类型的值都是,分割的字符串
|
|
2127
|
-
}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-
|
|
2127
|
+
}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-0d553a70_0",{source:".popBtn[data-v-0d553a70] {\n vertical-align: bottom;\n margin-left: 5px;\n}\n.checkbox[data-v-0d553a70] {\n max-height: 150px;\n overflow-y: auto;\n}\n.checkbox .el-checkbox[data-v-0d553a70] {\n display: block;\n}\n\n/*# sourceMappingURL=Check.vue.map */",map:{"version":3,"sources":["/Users/chenlei/HLcode/test/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>\n <span>\n <el-popover placement=\"bottom\" width=\"100%\" trigger=\"click\" v-model=\"visible\" popper-class=\"pointRecord\">\n <div :data-name=\"column.columnPropertyName\">\n <el-select multiple v-model=\"value\" filterable :placeholder=\"trans('请选择')\">\n <el-option v-for=\"item in list\" :label=\"item.label\" :key=\"item.label\" :value=\"item.value\"></el-option>\n </el-select>\n <el-button class=\"popBtn\" size=\"mini\" @click=\"reset\">{{ trans('重置') }}</el-button>\n <el-button class=\"popBtn\" type=\"primary\" size=\"mini\" @click=\"submit\">{{ trans('确定') }}</el-button>\n </div>\n <dp :value=\"value\" slot=\"reference\" />\n </el-popover>\n </span>\n</template>\n<script>\nimport Dp from './dp.vue'\nimport trans from '../../../lang/trans'\n\nexport default {\n props: {\n setFormParams: Function,\n column: Object,\n ops: Object, // 请求参数\n getConfig: Function,\n ruleFn: Function,\n },\n components: { Dp },\n watch: {\n ops: function (newVal, old) {\n const { key } = this.getConfig(this.column);\n const ops = newVal;\n if (ops[key]) {\n this.value = ops[key].split(',') // 约定 基本上check类型的值都是,分割的字符串\n } else {\n this.value = []\n }\n },\n visible: {\n deep: true,\n handler(value){\n if(this.ruleFn && value){\n let { option } = this.getConfig(this.column);\n this.list = option\n }\n }\n }\n },\n data() {\n return {\n trans,\n list: [],\n visible: false,\n value: [],\n }\n },\n mounted() {\n let { option } = this.getConfig(this.column);\n this.list = option\n },\n methods: {\n submit() {\n const { key } = this.getConfig(this.column);\n this.setFormParams({ [key]: this.value.join(',') })\n this.visible = false\n },\n reset() {\n this.value = [];\n }\n }\n}\n</script>\n<style lang=\"scss\" scoped>\n.popBtn {\n vertical-align: bottom;\n margin-left: 5px;\n}\n\n.checkbox {\n max-height: 150px;\n overflow-y: auto;\n\n .el-checkbox {\n display: block;\n }\n}\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-0d553a70";/* 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);//
|
|
2128
2128
|
var script$c={props:{setFormParams:Function,column:Object,ops:Object,// 请求参数
|
|
2129
2129
|
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类型的值都是,分割的字符串
|
|
2130
|
-
}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-
|
|
2130
|
+
}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-90e9dae8_0",{source:".popBtn[data-v-90e9dae8] {\n vertical-align: bottom;\n margin-left: 5px;\n}\n.radiobox[data-v-90e9dae8] {\n max-height: 150px;\n display: block;\n overflow-y: auto;\n}\n.radiobox .el-radio[data-v-90e9dae8] {\n display: block;\n}\n.radiobox .el-radio__input[data-v-90e9dae8] {\n margin-right: 10px;\n}\n\n/*# sourceMappingURL=Radio.vue.map */",map:{"version":3,"sources":["/Users/chenlei/HLcode/test/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>\n <span>\n <el-popover placement=\"bottom\" width=\"100%\" trigger=\"click\" v-model=\"visible\" popper-class=\"pointRecord\">\n <div :data-name=\"column.columnPropertyName\">\n <el-select v-model=\"value\" filterable :placeholder=\"trans('请选择')\">\n <el-option v-for=\"item in list\" :label=\"item.label\" :key=\"item.label\"\n :value=\"item.value\"></el-option>\n </el-select>\n <el-button class=\"popBtn\" size=\"mini\" @click=\"reset\">{{ trans('重置') }}</el-button>\n <el-button class=\"popBtn\" type=\"primary\" size=\"mini\" @click=\"submit\">{{ trans('确定') }}</el-button>\n </div>\n <dp :value=\"value\" slot=\"reference\" />\n </el-popover>\n </span>\n</template>\n<script>\nimport Dp from './dp.vue'\nimport trans from '../../../lang/trans'\n\nexport default {\n props: {\n setFormParams: Function,\n column: Object,\n ops: Object, // 请求参数\n getConfig: Function,\n ruleFn: Function,\n },\n components: { Dp },\n watch: {\n ops: function (newVal, old) {\n const { key } = this.getConfig(this.column);\n const ops = newVal;\n if (ops[key]) {\n this.value = ops[key] || '' // 约定 基本上check类型的值都是,分割的字符串\n } else {\n this.value = ''\n }\n },\n visible: {\n deep: true,\n handler(value){\n if(this.ruleFn && value){\n let { option } = this.getConfig(this.column);\n this.list = option\n }\n }\n }\n },\n data() {\n return {\n trans,\n visible: false,\n value: '',\n list:[]\n }\n },\n mounted() {\n let { option } = this.getConfig(this.column);\n this.list = option\n },\n methods: {\n submit() {\n const { key } = this.getConfig(this.column);\n this.setFormParams({ [key]: this.value })\n this.visible = false\n },\n reset() {\n this.value = '';\n }\n }\n}\n</script>\n<style lang=\"scss\" scoped>\n.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 .el-radio {\n display: block;\n }\n\n .el-radio__input {\n margin-right: 10px;\n }\n}\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-90e9dae8";/* 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);//
|
|
2131
2131
|
var script$b={props:{column:Object,setFormParams:Function,getConfig:Function,config:{type:Object,default:()=>{return{rule:{type:'date'}};}},ops:Object// 请求参数
|
|
2132
2132
|
},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);//
|
|
2133
2133
|
var script$a={props:{column:Object,setFormParams:Function,config:Object,ops:Object,// 请求参数,
|
|
@@ -2185,13 +2185,13 @@ service.interceptors.request.use(config=>{// do something before request is sent
|
|
|
2185
2185
|
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
|
|
2186
2186
|
console.log(error);// for debug
|
|
2187
2187
|
return Promise.reject(error);});// response interceptor
|
|
2188
|
-
service.interceptors.response.use(/**
|
|
2189
|
-
* If you want to get http information such as headers or status
|
|
2190
|
-
* Please return response => response
|
|
2191
|
-
*/ /**
|
|
2192
|
-
* Determine the request status by custom code
|
|
2193
|
-
* Here is just an example
|
|
2194
|
-
* You can also judge the status by HTTP Status Code
|
|
2188
|
+
service.interceptors.response.use(/**
|
|
2189
|
+
* If you want to get http information such as headers or status
|
|
2190
|
+
* Please return response => response
|
|
2191
|
+
*/ /**
|
|
2192
|
+
* Determine the request status by custom code
|
|
2193
|
+
* Here is just an example
|
|
2194
|
+
* You can also judge the status by HTTP Status Code
|
|
2195
2195
|
*/response=>{const res=response.data;// 解密
|
|
2196
2196
|
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({
|
|
2197
2197
|
// message: res.msg,
|
|
@@ -2204,11 +2204,11 @@ let lan={'zh':'zh_CN','en':'en_US','cht':'zh_HK'};let language=window.localStora
|
|
|
2204
2204
|
if(tableConfig&&initType=='api'&&initData&&tableConfig[initData]){// 走字典配置逻辑
|
|
2205
2205
|
option=[];let arr=Object.keys(tableConfig[initData]);option=arr.map(i=>{return{label:tableConfig[initData][i],value:i};});}else{option=configPaperFn(item)||[];// 走老配置，文本栏里写死的数据
|
|
2206
2206
|
}if(!['selectsp','inputsp'].includes(type)){// selectsp inputsp 特殊处理
|
|
2207
|
-
option=ruleCorrespond(option);}return{option,key,columnProperty,columnPropertyName,type,rule,ruleCorrespond,userFn:ruleFn[columnProperty]};};const formatTable={'check':{valueToStr:(val,{option})=>{const str=val.map(i=>{const s=option.find(r=>r.value===i);if(s&&s.label){return s.label;}return val;});return str;},formToValue:val=>{return val.split(',');}},'radio':{valueToStr:(val,{option})=>{const str=option.find(r=>r.value===val);if(str&&str.label){return str.label;}return val;},formToValue:val=>{return val;}},'inputsp':{valueToStr:val=>{return val;},formToValue:val=>{return val;}},'selectsp':{valueToStr:val=>{return val;},formToValue:val=>{return val.split(',');}},'cascader':{valueToStr:val=>{
|
|
2207
|
+
option=ruleCorrespond(option);}return{option,key,columnProperty,columnPropertyName,type,rule,ruleCorrespond,userFn:ruleFn[columnProperty]};};function findNamesByCodes(arr,option,label,value){function findName(nodes,targetCode){for(const node of nodes){if(node[value]===targetCode){return node[label];}if(node.children){const result=findName(node.children,targetCode);if(result)return result;}}return undefined;}return arr.map(code=>findName(option,code));}const formatTable={'check':{valueToStr:(val,{option})=>{const str=val.map(i=>{const s=option.find(r=>r.value===i);if(s&&s.label){return s.label;}return val;});return str;},formToValue:val=>{return val.split(',');}},'radio':{valueToStr:(val,{option})=>{const str=option.find(r=>r.value===val);if(str&&str.label){return str.label;}return val;},formToValue:val=>{return val;}},'inputsp':{valueToStr:val=>{return val;},formToValue:val=>{return val;}},'selectsp':{valueToStr:val=>{return val;},formToValue:val=>{return val.split(',');}},'cascader':{valueToStr:(val,{option,rule})=>{let{componentOriginProps}=rule;let{label,value}=componentOriginProps;let str=findNamesByCodes(val,option,label,value).join(',');return str;},formToValue:val=>{return val.split(',');}},'date':{valueToStr:(val,{rule})=>{const{format}=rule;return`${moment(val).format(format)}`;},formToValue:val=>{return moment(val);}},'dateRange':{valueToStr:(val,{rule})=>{const{format,isAuto0059=false}=rule;let f1=format,f2=format;if(isAuto0059){f1='YYYY-MM-DD 00:00:00';f2='YYYY-MM-DD 23:59:59';}let v1=val[0]?moment(val[0]).format(f1):'';let v2=val[1]?moment(val[1]).format(f2):'';const str=`${v1}${trans('至')}${v2}`;return str;},formToValue:(val,keys)=>{return[val[keys[0]],val[keys[1]]];}},'inputScope':{valueToStr:val=>{const v1=val[0];const v2=val[1];const str=`${v1}${trans('至')}${v2}`;return str;},formToValue:(val,keys)=>{return[val[keys[0]],val[keys[1]]];}}};const formToValue=(formValues,columnsShow,callbackFn,ruleFn)=>{const tagNeedCols={};for(let key in formValues){// 过滤不相关key
|
|
2208
2208
|
const filterKey=['pageSize','skipCount','keywords'];if(!filterKey.includes(key)){// 找到在columns里对照searchKey的rule，方便form转换value
|
|
2209
2209
|
let searchKey='';const haveSearchCol=columnsShow.filter(i=>i.queryConfig);const findRes=haveSearchCol.find(i=>{let ruleType='';const{columnProperty,queryConfig:{type,rule}}=i;searchKey=columnProperty;ruleType=Object.prototype.toString.call(rule);if(ruleType!=='[object Array]'){searchKey=rule.searchKey||columnProperty;}if(type==='date'||type==='inputScope'){return searchKey.includes(key);}// dateRange 数据比较特殊 searchKey = [xxStart,xxEnd]
|
|
2210
2210
|
let searchKeyType=Object.prototype.toString.call(searchKey)=='[object Array]';if(type==='dateRange'&&searchKey.length>2&&searchKeyType){let findIndex=searchKey.findIndex(i=>i.includes(formValues[key]));if(findIndex==3){return true;}}else if(type==='dateRange'){return searchKey.includes(key);}return searchKey===key;});// 找到对应请求key 进行画tag处理
|
|
2211
|
-
if(findRes&&findRes.isQuery){let config=getOptions(findRes,ruleFn);let{type,columnPropertyName}=config;// let { columnPropertyName, columnProperty, queryConfig: { type, rule } } = findRes;
|
|
2211
|
+
if(findRes&&findRes.isQuery){let config=getOptions(findRes,ruleFn);let{type,columnPropertyName,rule}=config;// let { columnPropertyName, columnProperty, queryConfig: { type, rule } } = findRes;
|
|
2212
2212
|
// let ruleType = Object.prototype.toString.call(rule)
|
|
2213
2213
|
// let newRule = ruleType !== '[object Array]' ? rule.option : rule
|
|
2214
2214
|
// if (ruleFn[columnProperty]) {
|
|
@@ -2236,7 +2236,7 @@ formToValue(ops,this.columnsShow,this.colChange,this.ruleFn);const{pageSize,skip
|
|
|
2236
2236
|
// } else {
|
|
2237
2237
|
// this.tags = this.tags.concat([{'name':arrow, value:data.value, str:data.str, key:data.searchKey, type: data.type }])
|
|
2238
2238
|
// }
|
|
2239
|
-
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.keywordsKEY],callback:function($$v){_vm.$set(_vm.searchParams,_vm.keywordsKEY,typeof $$v==="string"?$$v.trim():$$v);},expression:"searchParams[keywordsKEY]"}},[_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'"}],staticClass:"input-with-select",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.keywordsKEY],callback:function($$v){_vm.$set(_vm.searchParams,_vm.keywordsKEY,typeof $$v==="string"?$$v.trim():$$v);},expression:"searchParams[keywordsKEY]"}},[_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-02e977b1_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":";AA4dA;IACA,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 v-if=\"hasSearch\" v-show=\"searchType == 'textarea'\" type=\"textarea\" @keyup.enter.native=\"getList({ skipCount: 1 })\"\r\n :placeholder=\"searchPlaceholder || trans('请输入内容')\" :class=\"{ 'input-with-select': true, textareaSpec:searchType == 'textarea' }\"\r\n v-model.trim=\"searchParams[keywordsKEY]\" \r\n @blur=\"changeType(0)\" :rows=\"10\" ref=\"myTextarea\" >\r\n <el-button slot=\"append\" icon=\"el-icon-search\" @click=\"getList({ skipCount: 1 })\"></el-button>\r\n </el-input>\r\n <el-input v-if=\"hasSearch\" v-show=\"searchType == 'text'\" @keyup.enter.native=\"getList({ skipCount: 1 })\"\r\n :placeholder=\"searchPlaceholder || trans('请输入内容')\" class=\"input-with-select\"\r\n v-model.trim=\"searchParams[keywordsKEY]\" @focus=\"changeType(1)\" >\r\n <el-button slot=\"append\" icon=\"el-icon-search\" @click=\"getList({ skipCount: 1 })\"></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 class=\"icon\" aria-hidden=\"true\" style=\"color:#10C2B0;cursor:pointer;\">\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 v-for=\"tag in tags\" :key=\"tag.name\" closable @close=\"closeTag(tag)\" type=\"info\">\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\">{{ trans('取消全部筛选') }}</el-button>\r\n <el-table ref=\"FormTable\" v-loading=\"listLoading\" :data=\"list\" :row-key=\"rowKey\" border fit\r\n @sort-change=\"$emit('sortChange', $event)\" @selection-change=\"handleSelectionChange\" @header-dragend=\"dragHead\" @select-all=\"handleSelectAll\" @select=\"handleSelect\"\r\n class=\"table\" :key=\"tableKey\">\r\n <el-table-column v-if=\"hasSelection\" type=\"selection\" width=\"50\" :selectable=\"selectable\">\r\n </el-table-column>\r\n <el-table-column v-if=\"hasIndex\" :label=\"trans('序号')\" type=\"index\" width=\"50\">\r\n </el-table-column>\r\n <slot name=\"additional\"></slot>\r\n <el-table-column v-for=\"(item) in colDisplayFn(columnsShow)\" :key=\"item.columnCode\"\r\n :label=\"item.columnPropertyName\" :fixed=\"(item.isFixed == 1) && 'left'\"\r\n :min-width=\"(item.defaultWidth || item.minWidth) + 20\" show-overflow-tooltip\r\n :sortable=\"sortableList[item.columnProperty] || false\" :prop=\"item.columnProperty\" align=\"center\">\r\n <template slot=\"header\" slot-scope=\"{column}\">\r\n\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 v-if=\"item.queryConfig && item.queryConfig.type && item.isQuery\"\r\n v-bind:is=\"item.queryConfig.type\" :config=\"item.queryConfig\" :column=\"item\"\r\n :setFormParams=\"setFormParams\" :ops=\"ops\" :getConfig=\"getConfig\" :ruleFn=\"ruleFn[item.columnProperty]\"></component>\r\n </template>\r\n <template slot-scope=\"{ row }\">\r\n <span v-if=\"$scopedSlots[item.columnProperty]\">\r\n <slot :name=\"item.columnProperty\" :props=\"row\" :queryConfig=\"item.queryConfig\" \r\n :options=\"getConfig(item)\"\r\n :label=\"getLabel(item, row)\"></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 :label=\"trans('操作')\" align=\"center\" :width=\"actionWidth\" class-name=\"small-padding\"\r\n v-if=\"$scopedSlots.actionBtn\" fixed=\"right\">\r\n <template slot-scope=\"{ row }\">\r\n <slot name=\"actionBtn\" :props=\"row\">\r\n\r\n </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 v-show=\"count > 0\" :autoScroll=\"isAutoScroll\" class=\"text-right mt-0 pagi\" :total=\"count\"\r\n :page.sync=\"searchParams.skipCount\" :limit.sync=\"searchParams.pageSize\" @pagination=\"getList\" />\r\n </div>\r\n\r\n <select-col v-if=\"columns.length > 0\" :saveMyTemplateColumns=\"saveMyTemplateColumns\" :templateKey=\"templateKey\"\r\n :getNewCol=\"getNewCol\" :initialColumns=\"columns\" :columnsShow=\"columnsShow\"\r\n :visible.sync=\"dialogFormVisible\"></select-col>\r\n\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 { SelectCol, Check, Date, Inputsp, DateRange, Tips, pageTemplatecs, Radio, InputScope, Selectsp, Cascader } 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: { SelectCol, Check, Date, Inputsp, Pagination, DateRange, Tips, Radio, InputScope, Selectsp, Cascader },\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: 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 }\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 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 countNum: { // 总数\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\r\n },\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\r\n },\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 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(c => c.columnPropertyName == column.label)\r\n let formatWidth = Math.ceil(newWidth)\r\n this.requestFn.pageTemplatecs.saveMyTemplateColumnWidth({ templateKey: this.templateKey, columnCode: findColumn.columnCode, width: formatWidth }).then((response) => {\r\n })\r\n },\r\n changePG(pages) {\r\n this.requestFn.pageTemplatecs.selectUserTemplateColumns({ templateKey: this.templateKey }).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.selectMyTableColumns({ templateKey: this.templateKey }).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 },\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\r\n this.searchParams = searchParams;\r\n\r\n\r\n // 处理数据\r\n let ops = {};\r\n for (var key in searchParams) {\r\n if (searchParams[key] !== '' && searchParams[key] !== null && searchParams[key] !== undefined) {\r\n ops[key] = searchParams[key]\r\n }\r\n }\r\n // 根据参数画tag\r\n formToValue(ops, this.columnsShow, this.colChange, this.ruleFn)\r\n\r\n\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(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 }, err => {\r\n this.listLoading = false\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 },\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({ [key[0]]: '', [key[1]]: '', [key[2]]: '' }, 'remove')\r\n } else {\r\n this.setFormParams({ [key]: '' }, 'remove')\r\n }\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\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(j => j.columnPropertyName === i.columnPropertyName)\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\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-02e977b1_1",{source:".container[data-v-02e977b1] {\n padding: 15px;\n margin: 0px;\n width: 100%;\n background: #fff;\n float: left;\n}\n.input-with-select[data-v-02e977b1] {\n width: 300px;\n}\n.optBox[data-v-02e977b1] {\n margin-bottom: 10px;\n overflow: hidden;\n}\n.leftBtn[data-v-02e977b1] {\n float: left;\n}\n.rightBtn[data-v-02e977b1] {\n float: right;\n}\n.rightBtn .textareaSpec[data-v-02e977b1] {\n position: absolute;\n right: 100px;\n z-index: 1000;\n width: 700px;\n height: 400px;\n}\n.rightBtn .border[data-v-02e977b1] {\n border: 1px solid #dcdfe6;\n}\n.tagBox[data-v-02e977b1] {\n width: calc(100% - 140px);\n float: left;\n overflow: hidden;\n}\n.tagBox > .el-tag[data-v-02e977b1] {\n margin: 4px 10px 0 0;\n max-width: 420px;\n}\n.tagBox > .el-tag[data-v-02e977b1] .el-tag__close {\n vertical-align: super;\n}\n.tagBox .tagItem[data-v-02e977b1] {\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-02e977b1] {\n float: right;\n}\n.table[data-v-02e977b1] {\n width: 100%;\n margin-top: 10px;\n float: left;\n}\n.pagi[data-v-02e977b1] {\n float: right;\n}\n.pagi.pagination-container[data-v-02e977b1] {\n padding: 0px;\n padding-top: 20px;\n}\n.btmBox[data-v-02e977b1] {\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,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.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-02e977b1";/* 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);};/*!
|
|
2239
|
+
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.keywordsKEY],callback:function($$v){_vm.$set(_vm.searchParams,_vm.keywordsKEY,typeof $$v==="string"?$$v.trim():$$v);},expression:"searchParams[keywordsKEY]"}},[_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'"}],staticClass:"input-with-select",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.keywordsKEY],callback:function($$v){_vm.$set(_vm.searchParams,_vm.keywordsKEY,typeof $$v==="string"?$$v.trim():$$v);},expression:"searchParams[keywordsKEY]"}},[_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-2fb8c42d_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":";AA4dA;IACA,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 v-if=\"hasSearch\" v-show=\"searchType == 'textarea'\" type=\"textarea\" @keyup.enter.native=\"getList({ skipCount: 1 })\"\n :placeholder=\"searchPlaceholder || trans('请输入内容')\" :class=\"{ 'input-with-select': true, textareaSpec:searchType == 'textarea' }\"\n v-model.trim=\"searchParams[keywordsKEY]\" \n @blur=\"changeType(0)\" :rows=\"10\" ref=\"myTextarea\" >\n <el-button slot=\"append\" icon=\"el-icon-search\" @click=\"getList({ skipCount: 1 })\"></el-button>\n </el-input>\n <el-input v-if=\"hasSearch\" v-show=\"searchType == 'text'\" @keyup.enter.native=\"getList({ skipCount: 1 })\"\n :placeholder=\"searchPlaceholder || trans('请输入内容')\" class=\"input-with-select\"\n v-model.trim=\"searchParams[keywordsKEY]\" @focus=\"changeType(1)\" >\n <el-button slot=\"append\" icon=\"el-icon-search\" @click=\"getList({ skipCount: 1 })\"></el-button>\n </el-input>\n <el-divider direction=\"vertical\"></el-divider>\n <el-button size=\"mini\" @click=\"actionModal\">\n <svg class=\"icon\" aria-hidden=\"true\" style=\"color:#10C2B0;cursor:pointer;\">\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 v-for=\"tag in tags\" :key=\"tag.name\" closable @close=\"closeTag(tag)\" type=\"info\">\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\">{{ trans('取消全部筛选') }}</el-button>\n <el-table ref=\"FormTable\" v-loading=\"listLoading\" :data=\"list\" :row-key=\"rowKey\" border fit\n @sort-change=\"$emit('sortChange', $event)\" @selection-change=\"handleSelectionChange\" @header-dragend=\"dragHead\" @select-all=\"handleSelectAll\" @select=\"handleSelect\"\n class=\"table\" :key=\"tableKey\">\n <el-table-column v-if=\"hasSelection\" type=\"selection\" width=\"50\" :selectable=\"selectable\">\n </el-table-column>\n <el-table-column v-if=\"hasIndex\" :label=\"trans('序号')\" type=\"index\" width=\"50\">\n </el-table-column>\n <slot name=\"additional\"></slot>\n <el-table-column v-for=\"(item) in colDisplayFn(columnsShow)\" :key=\"item.columnCode\"\n :label=\"item.columnPropertyName\" :fixed=\"(item.isFixed == 1) && 'left'\"\n :min-width=\"(item.defaultWidth || item.minWidth) + 20\" show-overflow-tooltip\n :sortable=\"sortableList[item.columnProperty] || false\" :prop=\"item.columnProperty\" align=\"center\">\n <template slot=\"header\" slot-scope=\"{column}\">\n\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 v-if=\"item.queryConfig && item.queryConfig.type && item.isQuery\"\n v-bind:is=\"item.queryConfig.type\" :config=\"item.queryConfig\" :column=\"item\"\n :setFormParams=\"setFormParams\" :ops=\"ops\" :getConfig=\"getConfig\" :ruleFn=\"ruleFn[item.columnProperty]\"></component>\n </template>\n <template slot-scope=\"{ row }\">\n <span v-if=\"$scopedSlots[item.columnProperty]\">\n <slot :name=\"item.columnProperty\" :props=\"row\" :queryConfig=\"item.queryConfig\" \n :options=\"getConfig(item)\"\n :label=\"getLabel(item, row)\"></slot>\n </span>\n <span v-else>{{ getLabel(item, row) }}</span>\n </template>\n </el-table-column>\n <el-table-column :label=\"trans('操作')\" align=\"center\" :width=\"actionWidth\" class-name=\"small-padding\"\n v-if=\"$scopedSlots.actionBtn\" fixed=\"right\">\n <template slot-scope=\"{ row }\">\n <slot name=\"actionBtn\" :props=\"row\">\n\n </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 v-show=\"count > 0\" :autoScroll=\"isAutoScroll\" class=\"text-right mt-0 pagi\" :total=\"count\"\n :page.sync=\"searchParams.skipCount\" :limit.sync=\"searchParams.pageSize\" @pagination=\"getList\" />\n </div>\n\n <select-col v-if=\"columns.length > 0\" :saveMyTemplateColumns=\"saveMyTemplateColumns\" :templateKey=\"templateKey\"\n :getNewCol=\"getNewCol\" :initialColumns=\"columns\" :columnsShow=\"columnsShow\"\n :visible.sync=\"dialogFormVisible\"></select-col>\n\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 { SelectCol, Check, Date, Inputsp, DateRange, Tips, pageTemplatecs, Radio, InputScope, Selectsp, Cascader } 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: { SelectCol, Check, Date, Inputsp, Pagination, DateRange, Tips, Radio, InputScope, Selectsp, Cascader },\n model: {\n event: 'sortChange'\n },\n data() {\n return {\n trans,\n dialogFormVisible: false,\n formatSwitch,\n list: [],\n saveMyTemplateColumns: 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 }\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 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 countNum: { // 总数\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\n },\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\n },\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 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(c => c.columnPropertyName == column.label)\n let formatWidth = Math.ceil(newWidth)\n this.requestFn.pageTemplatecs.saveMyTemplateColumnWidth({ templateKey: this.templateKey, columnCode: findColumn.columnCode, width: formatWidth }).then((response) => {\n })\n },\n changePG(pages) {\n this.requestFn.pageTemplatecs.selectUserTemplateColumns({ templateKey: this.templateKey }).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.selectMyTableColumns({ templateKey: this.templateKey }).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 },\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\n this.searchParams = searchParams;\n\n\n // 处理数据\n let ops = {};\n for (var key in searchParams) {\n if (searchParams[key] !== '' && searchParams[key] !== null && searchParams[key] !== undefined) {\n ops[key] = searchParams[key]\n }\n }\n // 根据参数画tag\n formToValue(ops, this.columnsShow, this.colChange, this.ruleFn)\n\n\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(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 }, err => {\n this.listLoading = false\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 },\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({ [key[0]]: '', [key[1]]: '', [key[2]]: '' }, 'remove')\n } else {\n this.setFormParams({ [key]: '' }, 'remove')\n }\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\n actionModal() {\n this.dialogFormVisible = true\n this.columns;\n this.columns = this.columns.map((i) => {\n const isSelect = this.columnsShow.find(j => j.columnPropertyName === i.columnPropertyName)\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\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-2fb8c42d_1",{source:".container[data-v-2fb8c42d] {\n padding: 15px;\n margin: 0px;\n width: 100%;\n background: #fff;\n float: left;\n}\n.input-with-select[data-v-2fb8c42d] {\n width: 300px;\n}\n.optBox[data-v-2fb8c42d] {\n margin-bottom: 10px;\n overflow: hidden;\n}\n.leftBtn[data-v-2fb8c42d] {\n float: left;\n}\n.rightBtn[data-v-2fb8c42d] {\n float: right;\n}\n.rightBtn .textareaSpec[data-v-2fb8c42d] {\n position: absolute;\n right: 100px;\n z-index: 1000;\n width: 700px;\n height: 400px;\n}\n.rightBtn .border[data-v-2fb8c42d] {\n border: 1px solid #dcdfe6;\n}\n.tagBox[data-v-2fb8c42d] {\n width: calc(100% - 140px);\n float: left;\n overflow: hidden;\n}\n.tagBox > .el-tag[data-v-2fb8c42d] {\n margin: 4px 10px 0 0;\n max-width: 420px;\n}\n.tagBox > .el-tag[data-v-2fb8c42d] .el-tag__close {\n vertical-align: super;\n}\n.tagBox .tagItem[data-v-2fb8c42d] {\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-2fb8c42d] {\n float: right;\n}\n.table[data-v-2fb8c42d] {\n width: 100%;\n margin-top: 10px;\n float: left;\n}\n.pagi[data-v-2fb8c42d] {\n float: right;\n}\n.pagi.pagination-container[data-v-2fb8c42d] {\n padding: 0px;\n padding-top: 20px;\n}\n.btmBox[data-v-2fb8c42d] {\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,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.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-2fb8c42d";/* 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);};/*!
|
|
2240
2240
|
* html2canvas 1.4.1 <https://html2canvas.hertzen.com>
|
|
2241
2241
|
* Copyright (c) 2022 Niklas von Hertzen <https://hertzen.com>
|
|
2242
2242
|
* Released under MIT License
|
|
@@ -2601,12 +2601,12 @@ let a=document.createElement("a");let clickEvent=document.createEvent("MouseEven
|
|
|
2601
2601
|
//
|
|
2602
2602
|
//
|
|
2603
2603
|
//
|
|
2604
|
-
/**
|
|
2605
|
-
* 导出多个分页
|
|
2606
|
-
* count {Number} 总数
|
|
2607
|
-
* pagingBase {Number} 分页基数
|
|
2608
|
-
* fetchParam {object} 请求参数
|
|
2609
|
-
* getApi {function} 请求接口
|
|
2604
|
+
/**
|
|
2605
|
+
* 导出多个分页
|
|
2606
|
+
* count {Number} 总数
|
|
2607
|
+
* pagingBase {Number} 分页基数
|
|
2608
|
+
* fetchParam {object} 请求参数
|
|
2609
|
+
* getApi {function} 请求接口
|
|
2610
2610
|
*/var script$1={name:"FormTable",components:{},props:{count:{// 总数
|
|
2611
2611
|
default:0,type:Number},pagingBase:{// 分页基数
|
|
2612
2612
|
default:500,type:Number},fetchParam:{// 上传时附带的参数
|
|
@@ -2615,15 +2615,15 @@ const exportItems=[];Array.from({length:numItems},(_,i)=>{exportItems.push({name
|
|
|
2615
2615
|
if(this.count%this.pagingBase>0){exportItems.push({name:`导出${this.pagingBase*numItems+1}-${this.count}`,params:{pageSize:this.pagingBase,skipCount:this.pagingBase*numItems// 修正了原始代码中的逻辑错误
|
|
2616
2616
|
}});}// 一次性赋值给this.exportList，减少数据变化的检测次数
|
|
2617
2617
|
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对象
|
|
2618
|
-
.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-
|
|
2619
|
-
/**
|
|
2620
|
-
* btnText 导入按钮文字，默认导入
|
|
2621
|
-
* btnType 导入按钮样式，默认空
|
|
2622
|
-
* dialogTitle 导入弹窗标题，默认导入数据
|
|
2623
|
-
* tempKey 导入模板key，默认空
|
|
2624
|
-
* fileType 导入文件格式，默认xlsx，支持csv,xlsx,xls
|
|
2625
|
-
* close 导入窗口关闭回调
|
|
2626
|
-
* fileName 下载导入文件名，不需要后缀
|
|
2618
|
+
.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-badbb4c8_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);};//
|
|
2619
|
+
/**
|
|
2620
|
+
* btnText 导入按钮文字，默认导入
|
|
2621
|
+
* btnType 导入按钮样式，默认空
|
|
2622
|
+
* dialogTitle 导入弹窗标题，默认导入数据
|
|
2623
|
+
* tempKey 导入模板key，默认空
|
|
2624
|
+
* fileType 导入文件格式，默认xlsx，支持csv,xlsx,xls
|
|
2625
|
+
* close 导入窗口关闭回调
|
|
2626
|
+
* fileName 下载导入文件名，不需要后缀
|
|
2627
2627
|
*/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对象
|
|
2628
2628
|
.then(blob=>{// 创建一个指向Blob的URL
|
|
2629
2629
|
const url=URL.createObjectURL(blob);// 创建一个临时的<a>标签用于触发下载
|
|
@@ -2643,4 +2643,4 @@ for(let key in this.formData){if(this.formData[key]!==""){formData.append(key,th
|
|
|
2643
2643
|
// fileType: failFileType,
|
|
2644
2644
|
// };
|
|
2645
2645
|
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]);}}// 加密
|
|
2646
|
-
let headers={"Content-Type":"application/x-www-form-urlencoded"};const urlApi="/gateway/huilianApi/errorcs/exportErrorFile";if(window.HLEncryption){headers=window.HLEncryption.setRequestHeaders({url:urlApi,headers:headers});}const response=await fetch(urlApi,{method:"post",headers:headers,body:searchParams.toString()});if(!response.ok){throw new Error(`下载请求失败: ${response.statusText}`);}const blob=await response.blob();const name=response.headers.get("content-disposition").split("filename=")[1];const url=window.URL.createObjectURL(blob);const a=document.createElement("a");a.href=url;a.download=decodeURIComponent(name);document.body.appendChild(a);a.click();document.body.removeChild(a);window.URL.revokeObjectURL(url);}else{this.$message({message:"无文件可下载",type:"warning"});}}}};/* script */const __vue_script__=script;/* template */var __vue_render__=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",{staticClass:"StandardImportComponents"},[_c("el-button",{attrs:{type:_vm.btnType},on:{click:_vm.openDialog}},[_vm._v(_vm._s(_vm.btnText))]),_vm._v(" "),_c("el-dialog",{attrs:{title:_vm.dialogTitle,visible:_vm.dialogVisible,width:"600px","close-on-click-modal":false,"close-on-press-escape":false,"before-close":_vm.handleClose},on:{"update:visible":function($event){_vm.dialogVisible=$event;}}},[_c("div",[_vm._t("content-header")],2),_vm._v(" "),_c("div",{staticStyle:{position:"relative"}},[_c("el-upload",{ref:"importFile",attrs:{action:_vm.importApi,"file-list":_vm.fileList,accept:"."+_vm.fileType,"before-upload":_vm.beforeUploadForm,data:_vm.formData,limit:1,"on-change":_vm.handleChange,"on-remove":_vm.handleRemove,"on-success":_vm.handleSuccess,"on-error":_vm.handleError,"auto-upload":false,"http-request":_vm.customHttpRequest}},[_c("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[_vm._v("选取文件")]),_vm._v(" "),_c("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[_vm._v("\n "+_vm._s(_vm.fileTypeComputer)+"\n ")])],1),_vm._v(" "),_c("div",{staticStyle:{position:"absolute",top:"0",left:"100px"}},[_c("el-button",{attrs:{type:"text"},on:{click:_vm.getTemp}},[_vm._v(" 模板下载 ")])],1),_vm._v(" "),_c("div",{directives:[{name:"show",rawName:"v-show",value:_vm.detailData.successCount||_vm.detailData.failCount,expression:"detailData.successCount || detailData.failCount"}],staticClass:"mt-10",staticStyle:{"font-size":"12px","font-weight":"400",color:"#999999"}},[_vm._v("\n 导入结果（仅展示最后一次上传结果）：\n "),_c("span",{staticStyle:{color:"#333333"}},[_vm._v("\n 成功"+_vm._s(_vm.detailData.successCount||0)+"条，失败"+_vm._s(_vm.detailData.failCount||0)+"条\n ")]),_vm._v("\n \n "),_c("a",{directives:[{name:"show",rawName:"v-show",value:_vm.failFileType&&_vm.detailData.failCount,expression:"failFileType && detailData.failCount"}],staticStyle:{color:"#599ebf"},attrs:{href:"javascript:void(0)"},on:{click:function($event){return _vm.downloadFile(_vm.fileCode,_vm.failFileType);}}},[_vm._v("\n 下载失败信息\n ")])])],1),_vm._v(" "),_c("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[_c("el-button",{on:{click:_vm.handleClose}},[_vm._v(" 取 消 ")]),_vm._v(" "),_c("el-button",{attrs:{type:"primary",loading:_vm.isSubmitLoading},on:{click:_vm.query}},[_vm._v("\n 确 定\n ")])],1)])],1);};var __vue_staticRenderFns__=[];__vue_render__._withStripped=true;/* style */const __vue_inject_styles__=undefined;/* scoped */const __vue_scope_id__=undefined;/* module identifier */const __vue_module_identifier__=undefined;/* functional template */const __vue_is_functional_template__=false;/* style inject */ /* style inject SSR */ /* style inject shadow dom */const __vue_component__=/*#__PURE__*/normalizeComponent({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},__vue_inject_styles__,__vue_script__,__vue_scope_id__,__vue_is_functional_template__,__vue_module_identifier__,false,undefined,undefined,undefined);__vue_component__.install=function(Vue){Vue.component(__vue_component__.name,__vue_component__);};var version="3.2.
|
|
2646
|
+
let headers={"Content-Type":"application/x-www-form-urlencoded"};const urlApi="/gateway/huilianApi/errorcs/exportErrorFile";if(window.HLEncryption){headers=window.HLEncryption.setRequestHeaders({url:urlApi,headers:headers});}const response=await fetch(urlApi,{method:"post",headers:headers,body:searchParams.toString()});if(!response.ok){throw new Error(`下载请求失败: ${response.statusText}`);}const blob=await response.blob();const name=response.headers.get("content-disposition").split("filename=")[1];const url=window.URL.createObjectURL(blob);const a=document.createElement("a");a.href=url;a.download=decodeURIComponent(name);document.body.appendChild(a);a.click();document.body.removeChild(a);window.URL.revokeObjectURL(url);}else{this.$message({message:"无文件可下载",type:"warning"});}}}};/* script */const __vue_script__=script;/* template */var __vue_render__=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("span",{staticClass:"StandardImportComponents"},[_c("el-button",{attrs:{type:_vm.btnType},on:{click:_vm.openDialog}},[_vm._v(_vm._s(_vm.btnText))]),_vm._v(" "),_c("el-dialog",{attrs:{title:_vm.dialogTitle,visible:_vm.dialogVisible,width:"600px","close-on-click-modal":false,"close-on-press-escape":false,"before-close":_vm.handleClose},on:{"update:visible":function($event){_vm.dialogVisible=$event;}}},[_c("div",[_vm._t("content-header")],2),_vm._v(" "),_c("div",{staticStyle:{position:"relative"}},[_c("el-upload",{ref:"importFile",attrs:{action:_vm.importApi,"file-list":_vm.fileList,accept:"."+_vm.fileType,"before-upload":_vm.beforeUploadForm,data:_vm.formData,limit:1,"on-change":_vm.handleChange,"on-remove":_vm.handleRemove,"on-success":_vm.handleSuccess,"on-error":_vm.handleError,"auto-upload":false,"http-request":_vm.customHttpRequest}},[_c("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[_vm._v("选取文件")]),_vm._v(" "),_c("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[_vm._v("\n "+_vm._s(_vm.fileTypeComputer)+"\n ")])],1),_vm._v(" "),_c("div",{staticStyle:{position:"absolute",top:"0",left:"100px"}},[_c("el-button",{attrs:{type:"text"},on:{click:_vm.getTemp}},[_vm._v(" 模板下载 ")])],1),_vm._v(" "),_c("div",{directives:[{name:"show",rawName:"v-show",value:_vm.detailData.successCount||_vm.detailData.failCount,expression:"detailData.successCount || detailData.failCount"}],staticClass:"mt-10",staticStyle:{"font-size":"12px","font-weight":"400",color:"#999999"}},[_vm._v("\n 导入结果（仅展示最后一次上传结果）：\n "),_c("span",{staticStyle:{color:"#333333"}},[_vm._v("\n 成功"+_vm._s(_vm.detailData.successCount||0)+"条，失败"+_vm._s(_vm.detailData.failCount||0)+"条\n ")]),_vm._v("\n \n "),_c("a",{directives:[{name:"show",rawName:"v-show",value:_vm.failFileType&&_vm.detailData.failCount,expression:"failFileType && detailData.failCount"}],staticStyle:{color:"#599ebf"},attrs:{href:"javascript:void(0)"},on:{click:function($event){return _vm.downloadFile(_vm.fileCode,_vm.failFileType);}}},[_vm._v("\n 下载失败信息\n ")])])],1),_vm._v(" "),_c("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[_c("el-button",{on:{click:_vm.handleClose}},[_vm._v(" 取 消 ")]),_vm._v(" "),_c("el-button",{attrs:{type:"primary",loading:_vm.isSubmitLoading},on:{click:_vm.query}},[_vm._v("\n 确 定\n ")])],1)])],1);};var __vue_staticRenderFns__=[];__vue_render__._withStripped=true;/* style */const __vue_inject_styles__=undefined;/* scoped */const __vue_scope_id__=undefined;/* module identifier */const __vue_module_identifier__=undefined;/* functional template */const __vue_is_functional_template__=false;/* style inject */ /* style inject SSR */ /* style inject shadow dom */const __vue_component__=/*#__PURE__*/normalizeComponent({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},__vue_inject_styles__,__vue_script__,__vue_scope_id__,__vue_is_functional_template__,__vue_module_identifier__,false,undefined,undefined,undefined);__vue_component__.install=function(Vue){Vue.component(__vue_component__.name,__vue_component__);};var version="3.2.13";const components=[__vue_component__$j,__vue_component__$i,__vue_component__$h,__vue_component__$g,__vue_component__$3,__vue_component__$2,__vue_component__$1,__vue_component__];const install=function(Vue){components.forEach(component=>{Vue.component(component.name,component);});};if(typeof window!=="undefined"&&window.Vue){install(window.Vue);}var index={version,install};export{__vue_component__$1 as ExportList,__vue_component__$3 as FormTableScheme,__vue_component__$i as HelloVue,__vue_component__$2 as HtmlToImg,__vue_component__$j as MyButton,__vue_component__$g as ShowFile,__vue_component__ as StandardImport,__vue_component__$h as UploadFile,index as default,install};
|
package/package.json
CHANGED
|
@@ -1,59 +1,59 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@huilian/components-tms",
|
|
3
|
-
"version": "3.2.
|
|
4
|
-
"scripts": {
|
|
5
|
-
"dev": "npx rollup -wc rollup.config.dev.js",
|
|
6
|
-
"build": "npx rollup -c rollup.config.js && npm run build:types",
|
|
7
|
-
"build:types": "npx tsc"
|
|
8
|
-
},
|
|
9
|
-
"main": "lib/bundle.cjs.js",
|
|
10
|
-
"jsnext:main": "lib/bundle.esm.js",
|
|
11
|
-
"module": "lib/bundle.esm.js",
|
|
12
|
-
"browser": "lib/bundle.browser.js",
|
|
13
|
-
"dependencies": {
|
|
14
|
-
"core-js": "^3.6.5",
|
|
15
|
-
"html2canvas": "^1.4.1",
|
|
16
|
-
"lodash-es": "^4.17.21",
|
|
17
|
-
"vuedraggable": "^2.24.3"
|
|
18
|
-
},
|
|
19
|
-
"devDependencies": {
|
|
20
|
-
"@rollup/plugin-babel": "^5.3.0",
|
|
21
|
-
"@rollup/plugin-commonjs": "^21.0.1",
|
|
22
|
-
"@rollup/plugin-image": "^2.1.1",
|
|
23
|
-
"@rollup/plugin-json": "^4.1.0",
|
|
24
|
-
"@rollup/plugin-node-resolve": "^13.1.3",
|
|
25
|
-
"@types/jest": "^24.0.19",
|
|
26
|
-
"@types/lodash-es": "^4.17.4",
|
|
27
|
-
"@typescript-eslint/eslint-plugin": "^2.33.0",
|
|
28
|
-
"@typescript-eslint/parser": "^2.33.0",
|
|
29
|
-
"@vue/cli-plugin-babel": "~4.5.0",
|
|
30
|
-
"@vue/cli-plugin-eslint": "~4.5.0",
|
|
31
|
-
"@vue/cli-plugin-typescript": "~4.5.0",
|
|
32
|
-
"@vue/cli-plugin-unit-jest": "^4.5.13",
|
|
33
|
-
"@vue/cli-service": "~4.5.0",
|
|
34
|
-
"@vue/compiler-sfc": "^3.0.0",
|
|
35
|
-
"@vue/eslint-config-typescript": "^5.0.2",
|
|
36
|
-
"@vue/test-utils": "^1.0.3",
|
|
37
|
-
"el-table-draggable": "^1.4.2",
|
|
38
|
-
"eslint": "^6.7.2",
|
|
39
|
-
"eslint-plugin-vue": "^7.0.0-0",
|
|
40
|
-
"husky": "^4.3.8",
|
|
41
|
-
"rimraf": "^3.0.2",
|
|
42
|
-
"rollup": "^2.47.0",
|
|
43
|
-
"rollup-plugin-css-only": "^3.1.0",
|
|
44
|
-
"rollup-plugin-eslint": "^7.0.0",
|
|
45
|
-
"rollup-plugin-livereload": "^2.0.5",
|
|
46
|
-
"rollup-plugin-scss": "^3.0.0",
|
|
47
|
-
"rollup-plugin-serve": "^1.1.0",
|
|
48
|
-
"rollup-plugin-terser": "^7.0.2",
|
|
49
|
-
"rollup-plugin-typescript2": "^0.30.0",
|
|
50
|
-
"rollup-plugin-vue": "^5.1.9",
|
|
51
|
-
"tslib": "^2.2.0",
|
|
52
|
-
"typescript": "^3.9.9",
|
|
53
|
-
"vue": "^2.6.14",
|
|
54
|
-
"vue-template-compiler": "^2.6.14"
|
|
55
|
-
},
|
|
56
|
-
"files": [
|
|
57
|
-
"lib"
|
|
58
|
-
]
|
|
59
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@huilian/components-tms",
|
|
3
|
+
"version": "3.2.13",
|
|
4
|
+
"scripts": {
|
|
5
|
+
"dev": "npx rollup -wc rollup.config.dev.js",
|
|
6
|
+
"build": "npx rollup -c rollup.config.js && npm run build:types",
|
|
7
|
+
"build:types": "npx tsc"
|
|
8
|
+
},
|
|
9
|
+
"main": "lib/bundle.cjs.js",
|
|
10
|
+
"jsnext:main": "lib/bundle.esm.js",
|
|
11
|
+
"module": "lib/bundle.esm.js",
|
|
12
|
+
"browser": "lib/bundle.browser.js",
|
|
13
|
+
"dependencies": {
|
|
14
|
+
"core-js": "^3.6.5",
|
|
15
|
+
"html2canvas": "^1.4.1",
|
|
16
|
+
"lodash-es": "^4.17.21",
|
|
17
|
+
"vuedraggable": "^2.24.3"
|
|
18
|
+
},
|
|
19
|
+
"devDependencies": {
|
|
20
|
+
"@rollup/plugin-babel": "^5.3.0",
|
|
21
|
+
"@rollup/plugin-commonjs": "^21.0.1",
|
|
22
|
+
"@rollup/plugin-image": "^2.1.1",
|
|
23
|
+
"@rollup/plugin-json": "^4.1.0",
|
|
24
|
+
"@rollup/plugin-node-resolve": "^13.1.3",
|
|
25
|
+
"@types/jest": "^24.0.19",
|
|
26
|
+
"@types/lodash-es": "^4.17.4",
|
|
27
|
+
"@typescript-eslint/eslint-plugin": "^2.33.0",
|
|
28
|
+
"@typescript-eslint/parser": "^2.33.0",
|
|
29
|
+
"@vue/cli-plugin-babel": "~4.5.0",
|
|
30
|
+
"@vue/cli-plugin-eslint": "~4.5.0",
|
|
31
|
+
"@vue/cli-plugin-typescript": "~4.5.0",
|
|
32
|
+
"@vue/cli-plugin-unit-jest": "^4.5.13",
|
|
33
|
+
"@vue/cli-service": "~4.5.0",
|
|
34
|
+
"@vue/compiler-sfc": "^3.0.0",
|
|
35
|
+
"@vue/eslint-config-typescript": "^5.0.2",
|
|
36
|
+
"@vue/test-utils": "^1.0.3",
|
|
37
|
+
"el-table-draggable": "^1.4.2",
|
|
38
|
+
"eslint": "^6.7.2",
|
|
39
|
+
"eslint-plugin-vue": "^7.0.0-0",
|
|
40
|
+
"husky": "^4.3.8",
|
|
41
|
+
"rimraf": "^3.0.2",
|
|
42
|
+
"rollup": "^2.47.0",
|
|
43
|
+
"rollup-plugin-css-only": "^3.1.0",
|
|
44
|
+
"rollup-plugin-eslint": "^7.0.0",
|
|
45
|
+
"rollup-plugin-livereload": "^2.0.5",
|
|
46
|
+
"rollup-plugin-scss": "^3.0.0",
|
|
47
|
+
"rollup-plugin-serve": "^1.1.0",
|
|
48
|
+
"rollup-plugin-terser": "^7.0.2",
|
|
49
|
+
"rollup-plugin-typescript2": "^0.30.0",
|
|
50
|
+
"rollup-plugin-vue": "^5.1.9",
|
|
51
|
+
"tslib": "^2.2.0",
|
|
52
|
+
"typescript": "^3.9.9",
|
|
53
|
+
"vue": "^2.6.14",
|
|
54
|
+
"vue-template-compiler": "^2.6.14"
|
|
55
|
+
},
|
|
56
|
+
"files": [
|
|
57
|
+
"lib"
|
|
58
|
+
]
|
|
59
|
+
}
|
package/readme.md
CHANGED
|
@@ -1,135 +1,135 @@
|
|
|
1
|
-
## huilian的npm包项目
|
|
2
|
-
|
|
3
|
-
* lib为产出物
|
|
4
|
-
* components 源码文件目录
|
|
5
|
-
* package.json 里的file 是打包产物输出文件过滤只输出构建后产物路径
|
|
6
|
-
* 这包项目里基本都是后台element为主的 二次包装组件 所以一些依赖是项目本身就有的 这单要注意
|
|
7
|
-
* 参考components里的实际组件UploadFile 开发就行了 hellovue和mybutton是例子
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
```html
|
|
11
|
-
// template-key 代表表头key
|
|
12
|
-
// get-api是业务接口
|
|
13
|
-
// requesFn 是接口请求库 可以自定义
|
|
14
|
-
// scheme 代表组件
|
|
15
|
-
<form-table-scheme ref="scheme" searchPlaceholder= '车牌号/VIN码/车型名称/车辆资产归属' :requestFn="requestFn" :template-key="templateKey" :get-api="getApi" >
|
|
16
|
-
// 左侧的按钮 slot
|
|
17
|
-
<template v-slot:leftBtn>
|
|
18
|
-
<el-button type="primary" @click="dialogVisible = true" >导入</el-button>
|
|
19
|
-
<el-button icon="el-icon-download" @click="exportFile">导出</el-button>
|
|
20
|
-
<el-button icon="el-icon-download" @click="jump">车辆监控</el-button>
|
|
21
|
-
</template>
|
|
22
|
-
// xxxHeader 是？提示的钩子 是以对照的key 比如下面的deviceId + Header关键字来做的
|
|
23
|
-
<template #deviceIdHeader>
|
|
24
|
-
车辆行驶证上车辆识别代码
|
|
25
|
-
</template>
|
|
26
|
-
// 比如要对status 做特殊处理 就可以这样来 props代表列表数据, queryConfig 是列表所代表的配置
|
|
27
|
-
<template #status="{props,queryConfig}">
|
|
28
|
-
<el-tag :type="tagArr[props.status]">
|
|
29
|
-
{{ queryConfig.rule.option.find(i => i.value == props.status ).label }}
|
|
30
|
-
</el-tag>
|
|
31
|
-
</template>
|
|
32
|
-
// 操作拦按钮 props代表列表数据
|
|
33
|
-
<template #actionBtn="{props}">
|
|
34
|
-
<el-button type="text" @click="jumpInfo(props)">合同详情</el-button>
|
|
35
|
-
</template>
|
|
36
|
-
</form-table-scheme>
|
|
37
|
-
<script>
|
|
38
|
-
export default {
|
|
39
|
-
methods: {
|
|
40
|
-
exportFile(){
|
|
41
|
-
//导出 ops是接口请求参数
|
|
42
|
-
const data = this.$refs.scheme.ops
|
|
43
|
-
delete data.pageSize;
|
|
44
|
-
delete data.skipCount;
|
|
45
|
-
download('/areaOperate/billcs/exportBillList',data)
|
|
46
|
-
},
|
|
47
|
-
selectCur(cur) {
|
|
48
|
-
const { value, name } = cur
|
|
49
|
-
// this.$refs.scheme.getList 组件的请求勾子函数
|
|
50
|
-
this.$refs.scheme.getList({ planDueDateFrom: value[0],planDueDateTo:value[1] })
|
|
51
|
-
|
|
52
|
-
}
|
|
53
|
-
},
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
</script>
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
```html
|
|
62
|
-
表格配置
|
|
63
|
-
// dateRange 区间时间
|
|
64
|
-
{
|
|
65
|
-
"name": "申请时间", //非必要
|
|
66
|
-
"format": "YYYY-MM-DD HH:mm:ss", // 必要格式化
|
|
67
|
-
"searchKey": [ // 区间时间会有两个key
|
|
68
|
-
"execTimeStart",
|
|
69
|
-
"execTimeEnd"
|
|
70
|
-
]
|
|
71
|
-
}
|
|
72
|
-
// check 选择框
|
|
73
|
-
{
|
|
74
|
-
"searchKey": "applyStatusList", // 一般情况下是对应的col值 但是有时候查询和col对不上需要手动配置searchKey
|
|
75
|
-
"option": [ // option就是对照数组
|
|
76
|
-
{
|
|
77
|
-
"label": "待审核",
|
|
78
|
-
"value": "TO_AUDIT"
|
|
79
|
-
},
|
|
80
|
-
{
|
|
81
|
-
"label": "已经审核",
|
|
82
|
-
"value": "AUDIT"
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
"label": "驳回",
|
|
86
|
-
"value": "REJECT"
|
|
87
|
-
},
|
|
88
|
-
{
|
|
89
|
-
"label": "撤回",
|
|
90
|
-
"value": "CANCEL"
|
|
91
|
-
},
|
|
92
|
-
{
|
|
93
|
-
"label": "关闭",
|
|
94
|
-
"value": "CLOSE"
|
|
95
|
-
}
|
|
96
|
-
]
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
```
|
|
100
|
-
eventName 回掉函数名称
|
|
101
|
-
|
|
102
|
-
取决于值的具体处理 比如操作拦的 定义了钩子 actionBtn 但是对于别的处理没有太好的办法 只是做了一个约定 根据索引key 来进行操作
|
|
103
|
-
|
|
104
|
-
```html
|
|
105
|
-
<template #actionBtn="{props}">
|
|
106
|
-
<el-button v-if="props.applyStatus === 'TO_AUDIT'" type="text" icon="el-icon-download" @click="cancel(props)">撤回申请</el-button>
|
|
107
|
-
</template>
|
|
108
|
-
// settleType 一般情况下如下可以忽略 因为formatSwitch 方法自动提供了这种check类型的值处理
|
|
109
|
-
<template #settleType="{props,queryConfig}">
|
|
110
|
-
{{ queryConfig.rule.option.find(i => i.value == props.settleType).label }}
|
|
111
|
-
</template>
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
queryConfig 配置约定以下几个是常用的 完全可以自己约定
|
|
115
|
-
|
|
116
|
-
```javascript
|
|
117
|
-
queryConfig:{
|
|
118
|
-
"type": "date", // 组件类型
|
|
119
|
-
"rule": {
|
|
120
|
-
"name": "合同起始日期",
|
|
121
|
-
//数据的处理格式 各种类型不同
|
|
122
|
-
"format": "YYYY-MM-DD HH:mm:ss",
|
|
123
|
-
// 数据的检索key 比如字段叫contractStartDate 但是在列表中需要叫contractStartDateForm
|
|
124
|
-
"searchKey": "contractStartDateFrom",
|
|
125
|
-
// 检索的数据源 比如对应check类型 就是[{label:'状态1',value:'1'}] 的数据渲染项目 不同类型的不一样 比如date类型就不太用的上 这个字段
|
|
126
|
-
"option":[],
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
```
|
|
130
|
-
#本地调试
|
|
131
|
-
1.首先启动项目 npm run dev
|
|
132
|
-
2.再次使用命令 npm link
|
|
133
|
-
3.启动或重启huilianMS
|
|
134
|
-
4.在项目包使用 npm link @huilian/components-tms
|
|
135
|
-
|
|
1
|
+
## huilian的npm包项目
|
|
2
|
+
|
|
3
|
+
* lib为产出物
|
|
4
|
+
* components 源码文件目录
|
|
5
|
+
* package.json 里的file 是打包产物输出文件过滤只输出构建后产物路径
|
|
6
|
+
* 这包项目里基本都是后台element为主的 二次包装组件 所以一些依赖是项目本身就有的 这单要注意
|
|
7
|
+
* 参考components里的实际组件UploadFile 开发就行了 hellovue和mybutton是例子
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
```html
|
|
11
|
+
// template-key 代表表头key
|
|
12
|
+
// get-api是业务接口
|
|
13
|
+
// requesFn 是接口请求库 可以自定义
|
|
14
|
+
// scheme 代表组件
|
|
15
|
+
<form-table-scheme ref="scheme" searchPlaceholder= '车牌号/VIN码/车型名称/车辆资产归属' :requestFn="requestFn" :template-key="templateKey" :get-api="getApi" >
|
|
16
|
+
// 左侧的按钮 slot
|
|
17
|
+
<template v-slot:leftBtn>
|
|
18
|
+
<el-button type="primary" @click="dialogVisible = true" >导入</el-button>
|
|
19
|
+
<el-button icon="el-icon-download" @click="exportFile">导出</el-button>
|
|
20
|
+
<el-button icon="el-icon-download" @click="jump">车辆监控</el-button>
|
|
21
|
+
</template>
|
|
22
|
+
// xxxHeader 是？提示的钩子 是以对照的key 比如下面的deviceId + Header关键字来做的
|
|
23
|
+
<template #deviceIdHeader>
|
|
24
|
+
车辆行驶证上车辆识别代码
|
|
25
|
+
</template>
|
|
26
|
+
// 比如要对status 做特殊处理 就可以这样来 props代表列表数据, queryConfig 是列表所代表的配置
|
|
27
|
+
<template #status="{props,queryConfig}">
|
|
28
|
+
<el-tag :type="tagArr[props.status]">
|
|
29
|
+
{{ queryConfig.rule.option.find(i => i.value == props.status ).label }}
|
|
30
|
+
</el-tag>
|
|
31
|
+
</template>
|
|
32
|
+
// 操作拦按钮 props代表列表数据
|
|
33
|
+
<template #actionBtn="{props}">
|
|
34
|
+
<el-button type="text" @click="jumpInfo(props)">合同详情</el-button>
|
|
35
|
+
</template>
|
|
36
|
+
</form-table-scheme>
|
|
37
|
+
<script>
|
|
38
|
+
export default {
|
|
39
|
+
methods: {
|
|
40
|
+
exportFile(){
|
|
41
|
+
//导出 ops是接口请求参数
|
|
42
|
+
const data = this.$refs.scheme.ops
|
|
43
|
+
delete data.pageSize;
|
|
44
|
+
delete data.skipCount;
|
|
45
|
+
download('/areaOperate/billcs/exportBillList',data)
|
|
46
|
+
},
|
|
47
|
+
selectCur(cur) {
|
|
48
|
+
const { value, name } = cur
|
|
49
|
+
// this.$refs.scheme.getList 组件的请求勾子函数
|
|
50
|
+
this.$refs.scheme.getList({ planDueDateFrom: value[0],planDueDateTo:value[1] })
|
|
51
|
+
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
</script>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
```html
|
|
62
|
+
表格配置
|
|
63
|
+
// dateRange 区间时间
|
|
64
|
+
{
|
|
65
|
+
"name": "申请时间", //非必要
|
|
66
|
+
"format": "YYYY-MM-DD HH:mm:ss", // 必要格式化
|
|
67
|
+
"searchKey": [ // 区间时间会有两个key
|
|
68
|
+
"execTimeStart",
|
|
69
|
+
"execTimeEnd"
|
|
70
|
+
]
|
|
71
|
+
}
|
|
72
|
+
// check 选择框
|
|
73
|
+
{
|
|
74
|
+
"searchKey": "applyStatusList", // 一般情况下是对应的col值 但是有时候查询和col对不上需要手动配置searchKey
|
|
75
|
+
"option": [ // option就是对照数组
|
|
76
|
+
{
|
|
77
|
+
"label": "待审核",
|
|
78
|
+
"value": "TO_AUDIT"
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"label": "已经审核",
|
|
82
|
+
"value": "AUDIT"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"label": "驳回",
|
|
86
|
+
"value": "REJECT"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"label": "撤回",
|
|
90
|
+
"value": "CANCEL"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"label": "关闭",
|
|
94
|
+
"value": "CLOSE"
|
|
95
|
+
}
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
```
|
|
100
|
+
eventName 回掉函数名称
|
|
101
|
+
|
|
102
|
+
取决于值的具体处理 比如操作拦的 定义了钩子 actionBtn 但是对于别的处理没有太好的办法 只是做了一个约定 根据索引key 来进行操作
|
|
103
|
+
|
|
104
|
+
```html
|
|
105
|
+
<template #actionBtn="{props}">
|
|
106
|
+
<el-button v-if="props.applyStatus === 'TO_AUDIT'" type="text" icon="el-icon-download" @click="cancel(props)">撤回申请</el-button>
|
|
107
|
+
</template>
|
|
108
|
+
// settleType 一般情况下如下可以忽略 因为formatSwitch 方法自动提供了这种check类型的值处理
|
|
109
|
+
<template #settleType="{props,queryConfig}">
|
|
110
|
+
{{ queryConfig.rule.option.find(i => i.value == props.settleType).label }}
|
|
111
|
+
</template>
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
queryConfig 配置约定以下几个是常用的 完全可以自己约定
|
|
115
|
+
|
|
116
|
+
```javascript
|
|
117
|
+
queryConfig:{
|
|
118
|
+
"type": "date", // 组件类型
|
|
119
|
+
"rule": {
|
|
120
|
+
"name": "合同起始日期",
|
|
121
|
+
//数据的处理格式 各种类型不同
|
|
122
|
+
"format": "YYYY-MM-DD HH:mm:ss",
|
|
123
|
+
// 数据的检索key 比如字段叫contractStartDate 但是在列表中需要叫contractStartDateForm
|
|
124
|
+
"searchKey": "contractStartDateFrom",
|
|
125
|
+
// 检索的数据源 比如对应check类型 就是[{label:'状态1',value:'1'}] 的数据渲染项目 不同类型的不一样 比如date类型就不太用的上 这个字段
|
|
126
|
+
"option":[],
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
#本地调试
|
|
131
|
+
1.首先启动项目 npm run dev
|
|
132
|
+
2.再次使用命令 npm link
|
|
133
|
+
3.启动或重启huilianMS
|
|
134
|
+
4.在项目包使用 npm link @huilian/components-tms
|
|
135
|
+
|