vue-element-plus-admin/assets/Tree-5H_S0uxA.js

import{_ as I,I as x}from"./index-DYXSuqj4.js";import{v as b,r as p,x as T,y as M,M as h,K as y,z as _,P as V,A as O,u as l,S as q,T as z,B as d,Q as H,aI as K,J as A,a3 as S}from"./vue-chunks-COp0tDkU.js";/* empty css                *//* empty css                    */import{af as J,l as k,b as C}from"./element-plus-B-YefleC.js";import{_ as Q}from"./ContentWrap.vue_vue_type_script_setup_true_lang-BquNNVBn.js";/* empty css                *//* empty css                  */const U={key:1},W="300px",j="400px",F=b({__name:"Tree",props:{data:{},treeProps:{},width:{},height:{}},emits:["node-click","node-expand","node-collapse"],setup(N,{emit:f}){var B,$;const a=N,c=f,s=p(null),u=p(!1),m=p(null),n=p({}),e=()=>{u.value=!1,document.removeEventListener("click",e),document.removeEventListener("contextmenu",e)},i=(t,v,g,ne)=>{if(m.value=v,!s.value)return;const E=s.value.getBoundingClientRect(),w=t.target.getBoundingClientRect(),P=w.top-E.top+s.value.scrollTop,R=w.left-E.left+s.value.scrollLeft;n.value={position:"absolute",top:`${P+20}px`,left:`${R+20}px`},u.value=!0,document.addEventListener("click",e),document.addEventListener("contextmenu",e)},o=t=>{c("node-click",t),e()},r=t=>{c("node-expand",t),e()},D=t=>{c("node-collapse",t),e()},L={position:"relative",overflow:"auto",width:(B=a.width)!=null?B:W,height:($=a.height)!=null?$:j};return(t,v)=>(T(),M("div",{class:"tree-container",ref_key:"treeContainer",ref:s,style:L},[h(l(J),O(t.treeProps,{data:t.data,onNodeClick:o,onNodeExpand:r,onNodeCollapse:D,onNodeContextmenu:i}),{default:y(({node:g})=>[t.$slots["render-node"]?_(t.$slots,"render-node",{key:0,node:g},void 0,!0):(T(),M("span",U,V(g.label),1))]),_:3},16,["data"]),q(d("div",{class:"treeMenu",style:H(n.value)},[_(t.$slots,"context-menu",{node:m.value,data:m.value},()=>[v[0]||(v[0]=d("div",{style:{padding:"8px"}},"No menu defined",-1))],!0)],4),[[z,u.value]]),_(t.$slots,"default",{},void 0,!0)],512))}}),G=I(F,[["__scopeId","data-v-edde80e9"]]),X=["onClick"],Y=["onClick"],Z=["onClick"],ee=b({__name:"Tree",setup(N){const{t:f}=K(),a=p([{id:1,name:"北京",children:[{id:5,name:"朝阳",children:[{id:17,name:"双塔",children:[]},{id:18,name:"龙城",children:[]}]},{id:6,name:"丰台",children:[{id:19,name:"新村",children:[]},{id:20,name:"大红门",children:[]},{id:21,name:"长辛店",children:[{id:22,name:"东山坡",children:[]},{id:23,name:"北关",children:[]},{id:24,name:"光明里",children:[]},{id:25,name:"赵辛店",children:[]},{id:26,name:"西峰寺",children:[]}]}]},{id:7,name:"海淀",children:[]},{id:8,name:"房山",children:[]},{id:10,name:"顺义",children:[]}]},{id:2,name:"上海",children:[{id:11,name:"黄埔",children:[]},{id:12,name:"徐汇",children:[]}]},{id:3,name:"广州",children:[{id:13,name:"荔湾",children:[]},{id:14,name:"白云",children:[]},{id:15,name:"越秀",children:[]},{id:16,name:"南沙",children:[]}]}]),c=n=>{},s=n=>{k.prompt("请输入分组名称","添加子分组",{confirmButtonText:"确定",cancelButtonText:"取消",inputPattern:/\S/,inputErrorMessage:"分组名称不能为空"}).then(({value:e})=>{n.children.push({id:n.children.length+1,name:e,children:[]}),C.success("添加成功")})},u=n=>{k.prompt("请输入新的分组名称","修改分组名称",{confirmButtonText:"确定",cancelButtonText:"取消",inputValue:n.name,inputPattern:/\S/,inputErrorMessage:"分组名称不能为空"}).then(({value:e})=>{n.name=e,C.success("修改成功")})},m=n=>{k.confirm(`删除 [${n.name}] 分组、下级子分组 <br>是否继续?`,"提示",{dangerouslyUseHTMLString:!0,confirmButtonText:"确定",cancelButtonText:"取消",type:"warning",center:!0}).then(()=>{const e=n.id,i=o=>{for(let r=0;r<o.length;r++){if(o[r].id===e){o.splice(r,1);return}o[r].children&&i(o[r].children)}};i(a.value),C.success("删除成功")})};return(n,e)=>(T(),A(l(Q),{title:l(f)("treeDemo.treeTitle"),message:l(f)("qrcodeDemo.qrcodeDes")},{default:y(()=>[h(l(G),{data:a.value,"tree-props":{highlightCurrent:!0,nodeKey:"id",props:{children:"children",label:"name"}},width:"300px",height:"400px",onNodeClick:c},{"context-menu":y(({node:i})=>[d("div",{class:"menuItem",onClick:o=>s(i)},[h(l(x),{icon:"ep:plus",style:{color:"#1e9fff"}}),e[0]||(e[0]=d("span",null,"添加子分组",-1))],8,X),d("div",{class:"menuItem",onClick:o=>u(i)},[h(l(x),{icon:"ep:edit-pen",style:{color:"#1e9fff"}}),e[1]||(e[1]=S(" 修改分组名称 "))],8,Y),d("div",{class:"menuItem",onClick:o=>m(i)},[h(l(x),{icon:"ep:delete",style:{color:"#1e9fff"}}),e[2]||(e[2]=S(" 删除分组及子分组 "))],8,Z)]),_:1},8,["data"])]),_:1},8,["title","message"]))}}),ce=I(ee,[["__scopeId","data-v-06c29bb2"]]);export{ce as default};