@femessage/el-data-tree
Version:
base on element-ui, makes crud easily
2 lines (1 loc) • 18.3 kB
JavaScript
var ElDataTree=function(e,t,n){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t,n=n&&n.hasOwnProperty("default")?n.default:n;var a=function(e,t,n,a,r,o,i,l,s,d){"boolean"!=typeof i&&(s=l,l=i,i=!1);var c,u="function"==typeof n?n.options:n;if(e&&e.render&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0,r&&(u.functional=!0)),a&&(u._scopeId=a),o?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,s(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},u._ssrRegister=c):t&&(c=i?function(){t.call(this,d(this.$root.$options.shadowRoot))}:function(e){t.call(this,l(e))}),c)if(u.functional){var f=u.render;u.render=function(e,t){return c.call(t),f(e,t)}}else{var p=u.beforeCreate;u.beforeCreate=p?[].concat(p,c):[c]}return n},r=function(e,t){var n=t._c;return n("svg",{staticClass:"feather feather-chevron-left",attrs:{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}},[n("polyline",{attrs:{points:"15 18 9 12 15 6"}})])};r._withStripped=!0;var o=a({render:r,staticRenderFns:[]},void 0,{},void 0,!0,void 0,void 0,void 0),i={defaultExpandedKeys:[],highlightCurrent:!0,props:{children:"children",label:"name"},nodeKey:"id"},l=/-(\w)/g,s={name:"ElDataTree",components:{ChevronLeftIcon:o},props:{title:{type:String,default:""},hasBorder:{type:Boolean,default:!0},treeAttrs:{type:Object,default:function(){return{}}},url:{type:String,default:""},parentKey:{type:String,default:"parentId"},dataPath:{type:String,default:"payload.content"},showFilter:{type:Boolean,default:!1},checkedKeys:{type:Array,default:function(){return[]}},extraButtons:{type:Array,default:function(){return[]}},extraButtonsType:{type:String,default:"dropdown"},form:{type:Array,default:function(){return[]}},formAttrs:{type:Object,default:function(){return{}}},extraParams:{type:Object,default:function(){return{}}},customQuery:{type:Object,default:function(){return{}}},hasOperation:{type:Boolean,default:!0},hasTitle:{type:Boolean,default:!1},hasHeader:{type:Boolean,default:!1},hasDelete:{type:Boolean,default:!0},hasNew:{type:Boolean,default:!0},hasEdit:{type:Boolean,default:!0},transform:{type:Function},onNew:{type:Function},onEdit:{type:Function},onDelete:{type:Function},beforeConfirm:{type:Function,default:function(){return Promise.resolve()}},newText:{type:String,default:"新增"},editText:{type:String,default:"修改"},deleteText:{type:String,default:"删除"},collapsable:{type:Boolean,default:function(){return n(this,"$elDataTreeOptions.collapsable")||!1}}},data:function(){return{treeData:[],filterText:"",loading:!1,dialogTitle:"",dialogVisible:!1,isNew:!0,isEdit:!1,confirmLoading:!1,row:{},defaultExpandedKeys:[],cacheExpandedKeys:new Set,isCollapsed:!1}},computed:{camelizeTreeAttrs:function(){var e=this.treeAttrs;return Object.keys(e).reduce(function(t,n){return t[n.replace(l,function(e,t){return t?t.toUpperCase():""})]=e[n],t},{})},treeAttributes:function(){return Object.assign({},i,this.camelizeTreeAttrs)}},watch:{url:{handler:function(){this.fetchData()},immediate:!0},filterText:function(e){this.$refs.tree.filter(e)},checkedKeys:function(e){this.updateCheckedKeys(e)},"treeAttributes.defaultExpandedKeys":{handler:function(e){var t=this;e.forEach(function(e){return t.cacheExpandedKeys.add(e)}),this.updateDefaultExpandKeys()},immediate:!0}},methods:{updateDefaultExpandKeys:function(){this.defaultExpandedKeys=t(this.cacheExpandedKeys)},fetchData:function(){var e=this;if(!this.url)return console.warn("ELDataTree: url 为空, 不发送请求"),!1;this.loading=!0,this.$axios.get(this.url,{params:this.customQuery}).then(function(t){var a=n(t,e.dataPath)||[];e.treeData=e.transform&&e.transform(a)||a,e.updateDefaultExpandKeys(),e.updateCheckedKeys(e.checkedKeys),e.$emit("loaded",e.treeData,t)}).catch(function(t){e.$emit("error",t)}).finally(function(){e.loading=!1})},filterNode:function(e,t){return!e||t[this.treeAttributes.props.label].toLowerCase().includes(e.toLowerCase())},getTree:function(){return this.$refs.tree},handleCheckChange:function(){var e=this.$refs.tree.getCheckedNodes(!1,!0),t=this.treeAttributes.nodeKey;this.$emit("update:checkedKeys",e.map(function(e){return e[t]}))},updateCheckedKeys:function(e){var t=this.treeAttributes,n=function e(t,n){return t.reduce(function(t,a){return t.concat(a[n]?e(a[n],n):a)},[])}(this.treeData,t.props.children).filter(function(n){return e.indexOf(n[t.nodeKey])>-1}).map(function(e){return e[t.nodeKey]});this.$refs.tree.setCheckedKeys(n)},handleCommand:function(e,t,n){var a={new:this.onDefaultNew,edit:this.onDefaultEdit,delete:this.onDefaultDelete};if(a[e])a[e](t,n);else{var r=this.extraButtons.find(function(t){return t.text===e});r&&"function"==typeof r.atClick&&r.atClick(t,n)}},onDefaultNew:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.row=e,this.isNew=!0,this.isEdit=!1,this.dialogTitle=this.newText,this.dialogVisible=!0},onDefaultEdit:function(e){var t=this;this.row=e,this.isNew=!1,this.isEdit=!0,this.dialogTitle=this.editText,this.dialogVisible=!0,this.$nextTick(function(){t.$refs.dialogForm.updateForm(e)})},onDefaultDelete:function(e,t){var n=this;this.$confirm("确认删除吗","提示",{type:"warning",beforeClose:function(a,r,o){"confirm"===a?(r.confirmButtonLoading=!0,(n.onDelete&&n.onDelete(e,t)||n.$axios.delete(n.url+"/"+e[n.treeAttributes.nodeKey])).then(function(){o(),n.showMessage(),n.fetchData()}).catch(function(e){n.$emit("error",e)}).finally(function(){r.confirmButtonLoading=!1})):o()}}).catch(function(e){n.$emit("error",e)})},handleNodeExpand:function(e){var t=this.treeAttributes.nodeKey;this.cacheExpandedKeys.add(e[t])},handleNodeCollapse:function(e){var t=this.treeAttributes.nodeKey;this.cacheExpandedKeys.delete(e[t])},cancel:function(){this.dialogVisible=!1},confirm:function(){var e=this;this.$refs.dialogForm.validate(function(t){if(!t)return!1;var n=e.isNew?e.treeAttributes.nodeKey:e.parentKey,a=Object.assign({parentId:e.row[n]},e.$refs.dialogForm.getFormValue(),e.extraParams);e.beforeConfirm(a,e.isNew).then(function(){var t="isNew",n="onNew";if(e.isEdit&&(t="isEdit",n="onEdit"),e[t]&&e[n])return e.confirmLoading=!0,void e[n](a,e.row).then(function(){e.fetchData(),e.showMessage(!0),e.cancel()}).catch(function(t){e.$emit("error",t)}).finally(function(){e.confirmLoading=!1});var r="post",o=e.url;e.isEdit&&(r="put",o+="/".concat(e.row[e.treeAttributes.nodeKey])),e.confirmLoading=!0,e.$axios[r](o,a,{params:e.customQuery}).then(function(){e.showMessage(),e.fetchData(),e.cancel()}).catch(function(t){e.$emit("error",t)}).finally(function(){e.confirmLoading=!1})}).catch(function(){})})},closeDialog:function(){this.isNew=!1,this.isEdit=!1,this.confirmLoading=!1,this.$refs.dialogForm.resetFields()},showMessage:function(){!(arguments.length>0&&void 0!==arguments[0])||arguments[0]?this.$message({type:"success",message:"操作成功"}):this.$message({type:"error",message:"操作失败"})}}},d="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var c=document.head||document.getElementsByTagName("head")[0],u={};var f=function(e){return function(e,t){return function(e,t){var n=d?t.media||"default":e,a=u[n]||(u[n]={ids:new Set,styles:[]});if(!a.ids.has(e)){a.ids.add(e);var r=t.source;if(t.map&&(r+="\n/*# sourceURL="+t.map.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),a.element||(a.element=document.createElement("style"),a.element.type="text/css",t.media&&a.element.setAttribute("media",t.media),c.appendChild(a.element)),"styleSheet"in a.element)a.styles.push(r),a.element.styleSheet.cssText=a.styles.filter(Boolean).join("\n");else{var o=a.ids.size-1,i=document.createTextNode(r),l=a.element.childNodes;l[o]&&a.element.removeChild(l[o]),l.length?a.element.insertBefore(i,l[o]):a.element.appendChild(i)}}}(e,t)}};const p=s;var h=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"el-data-tree",class:{"has-border":e.hasBorder,"is-collapsed":e.isCollapsed},on:{click:function(t){e.isCollapsed=!1}}},[e.collapsable?n("div",{staticClass:"collapse-icon-wrapper"},[n("span",{staticClass:"collapse-icon",on:{click:function(t){t.preventDefault(),t.stopPropagation(),e.isCollapsed=!e.isCollapsed}}},[n("chevron-left-icon")],1)]):e._e(),e._v(" "),n("div",{staticClass:"el-data-tree-main"},[e.hasTitle||e.hasHeader?n("header",{staticClass:"header"},[n("div",{staticClass:"header-left"},[e._t("title",[n("p",{staticClass:"header-title"},[e._v(e._s(e.title))])])],2),e._v(" "),n("div",{staticClass:"header-right"},[n("span",{staticClass:"header-new-btn",on:{click:e.onDefaultNew}},[e._t("header-new-btn",[n("el-button",{attrs:{type:"text",size:"mini"}},[n("i",{staticClass:"el-icon-plus"})])])],2),e._v(" "),n("span",{staticClass:"header-extra-block"},[e._t("header-extra-block")],2)])]):e._e(),e._v(" "),n("section",{staticClass:"body"},[e.showFilter?n("el-input",{attrs:{placeholder:"查询","suffix-icon":"el-icon-search",clearable:""},model:{value:e.filterText,callback:function(t){e.filterText=t},expression:"filterText"}}):e._e(),e._v(" "),n("el-tree",e._g(e._b({directives:[{name:"loading",rawName:"v-loading",value:e.loading,expression:"loading"}],ref:"tree",staticClass:"data-tree",attrs:{data:e.treeData,"filter-node-method":e.filterNode,"default-expanded-keys":e.defaultExpandedKeys},on:{"node-expand":e.handleNodeExpand,"node-collapse":e.handleNodeCollapse,"check-change":e.handleCheckChange},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.node,r=t.data;return n("span",{staticClass:"custom-tree-node"},[n("span",{staticClass:"custom-tree-node-label"},[e._t("node-label",[e._v(e._s(a.label))],{data:r})],2),e._v(" "),e.hasOperation?n("span",{staticClass:"custom-tree-node-btns",on:{click:function(e){return e.stopPropagation()}}},["text"===e.extraButtonsType?[e.hasNew?n("el-button",{attrs:{type:"text"},on:{click:function(t){return e.handleCommand("new",a,r)}}},[e._v(e._s(e.newText))]):e._e(),e._v(" "),e.hasEdit?n("el-button",{attrs:{type:"text"},on:{click:function(t){return e.handleCommand("edit",a,r)}}},[e._v(e._s(e.editText))]):e._e(),e._v(" "),e._l(e.extraButtons.filter(function(e){return!e.show||e.show(r,a)}),function(t,o){return n("el-button",e._b({key:o,attrs:{type:"text"},on:{click:function(n){return e.handleCommand(t.text,a,r)}}},"el-button",t,!1),[e._v(e._s(t.text))])}),e._v(" "),e.hasDelete?n("el-button",{staticClass:"delete-button",attrs:{type:"text"},on:{click:function(t){return e.handleCommand("delete",a,r)}}},[e._v(e._s(e.deleteText))]):e._e()]:n("el-dropdown",{attrs:{trigger:"click"},on:{command:function(t){return e.handleCommand(t,r,a)}}},[n("span",{staticClass:"el-dropdown-link"},[n("i",{staticClass:"el-icon-more"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[e.hasNew?n("el-dropdown-item",{attrs:{command:"new"}},[e._v(e._s(e.newText))]):e._e(),e._v(" "),e.hasEdit?n("el-dropdown-item",{attrs:{command:"edit"}},[e._v(e._s(e.editText))]):e._e(),e._v(" "),e._l(e.extraButtons.filter(function(e){return!e.show||e.show(r,a)}),function(t,a){return n("el-dropdown-item",e._b({key:a,attrs:{command:t.text}},"el-dropdown-item",t,!1),[e._v(e._s(t.text))])}),e._v(" "),e.hasDelete?n("el-dropdown-item",{attrs:{command:"delete"}},[e._v(e._s(e.deleteText))]):e._e()],2)],1)],2):e._e()])}}],null,!0)},"el-tree",e.treeAttributes,!1),e.$listeners))],1)]),e._v(" "),n("el-dialog",{attrs:{title:e.dialogTitle,visible:e.dialogVisible},on:{"update:visible":function(t){e.dialogVisible=t},close:e.closeDialog}},[n("el-form-renderer",e._b({ref:"dialogForm",attrs:{content:e.form}},"el-form-renderer",e.formAttrs,!1),[e._t("form")],2),e._v(" "),n("div",{attrs:{slot:"footer"},slot:"footer"},[n("el-button",{attrs:{size:"small"},on:{click:e.cancel}},[e._v("取 消")]),e._v(" "),n("el-button",{attrs:{type:"primary",loading:e.confirmLoading,size:"small"},on:{click:e.confirm}},[e._v("确 定")])],1)],1)],1)};h._withStripped=!0;var A=a({render:h,staticRenderFns:[]},function(e){e&&(e("data-v-71ccb27d_0",{source:".el-data-tree {\n transition: 0.3s;\n}\n.el-data-tree .el-data-tree-main {\n overflow: hidden;\n}\n.el-data-tree.has-border {\n border-radius: 4px;\n background-color: #fff;\n border: 1px solid #ebeef5;\n}\n.el-data-tree.has-border:hover,\n.el-data-tree.has-border:focus {\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n}\n.el-data-tree .header {\n display: flex;\n align-items: center;\n padding: 18px 20px;\n border-bottom: 1px solid #ebeef5;\n}\n.el-data-tree .header .header-left,\n.el-data-tree .header .header-right {\n flex: 1;\n display: flex;\n align-items: center;\n}\n.el-data-tree .header .header-right {\n justify-content: flex-end;\n}\n.el-data-tree .header .header-title {\n margin: 0;\n color: #303133;\n display: inline-block;\n padding-right: 10px;\n}\n.el-data-tree .header .header-new-btn,\n.el-data-tree .header .header-extra-block {\n margin-left: 10px;\n}\n.el-data-tree .body {\n padding: 20px;\n}\n.el-data-tree .data-tree-title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 18px 20px;\n margin: 0;\n border-bottom: 1px solid #ebeef5;\n box-sizing: border-box;\n}\n.el-data-tree .data-tree-title .el-icon-plus {\n cursor: pointer;\n}\n.el-data-tree .data-tree {\n padding-top: 8px;\n}\n.el-data-tree .custom-tree-node {\n overflow: hidden;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n padding-right: 8px;\n}\n.el-data-tree .custom-tree-node .custom-tree-node-label {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.el-data-tree .custom-tree-node .custom-tree-node-btns .el-button {\n font-family: inherit;\n}\n.el-data-tree .delete-button {\n color: #e24156;\n}\n.el-data-tree .delete-button:hover,\n.el-data-tree .delete-button:focus {\n color: #e24156;\n}\n",map:{version:3,sources:["el-data-tree.vue"],names:[],mappings:"AAAA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,kBAAkB;EAClB,sBAAsB;EACtB,yBAAyB;AAC3B;AACA;;EAEE,2CAA2C;AAC7C;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,kBAAkB;EAClB,gCAAgC;AAClC;AACA;;EAEE,OAAO;EACP,aAAa;EACb,mBAAmB;AACrB;AACA;EACE,yBAAyB;AAC3B;AACA;EACE,SAAS;EACT,cAAc;EACd,qBAAqB;EACrB,mBAAmB;AACrB;AACA;;EAEE,iBAAiB;AACnB;AACA;EACE,aAAa;AACf;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,8BAA8B;EAC9B,kBAAkB;EAClB,SAAS;EACT,gCAAgC;EAChC,sBAAsB;AACxB;AACA;EACE,eAAe;AACjB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;EAChB,OAAO;EACP,aAAa;EACb,mBAAmB;EACnB,8BAA8B;EAC9B,eAAe;EACf,kBAAkB;AACpB;AACA;EACE,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,oBAAoB;AACtB;AACA;EACE,cAAc;AAChB;AACA;;EAEE,cAAc;AAChB",file:"el-data-tree.vue",sourcesContent:[".el-data-tree {\n transition: 0.3s;\n}\n.el-data-tree .el-data-tree-main {\n overflow: hidden;\n}\n.el-data-tree.has-border {\n border-radius: 4px;\n background-color: #fff;\n border: 1px solid #ebeef5;\n}\n.el-data-tree.has-border:hover,\n.el-data-tree.has-border:focus {\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n}\n.el-data-tree .header {\n display: flex;\n align-items: center;\n padding: 18px 20px;\n border-bottom: 1px solid #ebeef5;\n}\n.el-data-tree .header .header-left,\n.el-data-tree .header .header-right {\n flex: 1;\n display: flex;\n align-items: center;\n}\n.el-data-tree .header .header-right {\n justify-content: flex-end;\n}\n.el-data-tree .header .header-title {\n margin: 0;\n color: #303133;\n display: inline-block;\n padding-right: 10px;\n}\n.el-data-tree .header .header-new-btn,\n.el-data-tree .header .header-extra-block {\n margin-left: 10px;\n}\n.el-data-tree .body {\n padding: 20px;\n}\n.el-data-tree .data-tree-title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 18px 20px;\n margin: 0;\n border-bottom: 1px solid #ebeef5;\n box-sizing: border-box;\n}\n.el-data-tree .data-tree-title .el-icon-plus {\n cursor: pointer;\n}\n.el-data-tree .data-tree {\n padding-top: 8px;\n}\n.el-data-tree .custom-tree-node {\n overflow: hidden;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n padding-right: 8px;\n}\n.el-data-tree .custom-tree-node .custom-tree-node-label {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.el-data-tree .custom-tree-node .custom-tree-node-btns .el-button {\n font-family: inherit;\n}\n.el-data-tree .delete-button {\n color: #e24156;\n}\n.el-data-tree .delete-button:hover,\n.el-data-tree .delete-button:focus {\n color: #e24156;\n}\n"]},media:void 0}),e("data-v-71ccb27d_1",{source:".el-data-tree {\n position: relative;\n width: 100%;\n}\n.el-data-tree .el-tree {\n background-color: transparent;\n}\n.el-data-tree .el-data-tree-main {\n transition: 0.3s;\n}\n.el-data-tree.is-collapsed {\n min-width: 20px;\n width: 20px;\n background-color: #ebeef5;\n cursor: pointer;\n}\n.el-data-tree.is-collapsed .collapse-icon {\n transform: rotate(180deg);\n}\n.el-data-tree.is-collapsed .el-data-tree-main .body {\n opacity: 0;\n}\n.el-data-tree:hover .collapse-icon-wrapper .collapse-icon {\n opacity: 1;\n}\n.el-data-tree .collapse-icon-wrapper {\n position: absolute;\n width: 26px;\n height: 26px;\n top: 26px;\n right: -13px;\n}\n.el-data-tree .collapse-icon-wrapper .collapse-icon {\n transition: 0.3s;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n box-shadow: 0 0 4px #999;\n background-color: #fff;\n opacity: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.el-data-tree .collapse-icon-wrapper .collapse-icon svg {\n width: 1rem;\n height: 1rem;\n}\n.el-data-tree .collapse-icon-wrapper .collapse-icon:hover svg {\n opacity: 0.7;\n}\n",map:void 0,media:void 0}))},p,void 0,!1,void 0,f,void 0);A.install=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.prototype.$elDataTreeOptions=t,e.component(A.name,A)};var m=null;return"undefined"!=typeof window?m=window.Vue:"undefined"!=typeof global&&(m=global.Vue),m&&m.use(A),e.default=A,e}({},_toConsumableArray,_get);