初始化

frontend/packages/assets/style/zTree/img/checkbox.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1636687785706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3069" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M738.901 810.667l-453.803 0c-39.595 0-71.765-32.171-71.765-71.765l0-453.845c0-39.595 32.171-71.765 71.765-71.765l453.803 0c39.595 0 71.765 32.171 71.765 71.765l0 453.845c0 39.595-32.171 71.765-71.765 71.765zM285.099 256c-16.043 0-29.099 13.099-29.099 29.099l0 453.845c0 16 13.056 29.099 29.099 29.099l453.803 0c16 0 29.099-13.099 29.099-29.099l0-453.845c0-16-13.099-29.099-29.099-29.099l-453.803 0z" p-id="3070"></path></svg>

frontend/packages/assets/style/zTree/img/checked.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1637737334227" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2282" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M922.816 130.944a50.048 50.048 0 0 1 78.656 61.76L451.264 893.056a49.984 49.984 0 0 1-71.872 7.104L29.312 600A49.984 49.984 0 1 1 94.4 524.032l310.464 266.112 517.952-659.2z" p-id="2283" fill="#ffffff"></path></svg>

frontend/packages/assets/style/zTree/img/document.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1634978347232" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19011" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M236.864 64C176.736 64 128 114.144 128 176v672c0 61.856 48.736 112 108.864 112h544.32C841.28 960 896 909.856 896 848V261.12L709.856 64H236.864zM672 128l160 160H698.144A26.144 26.144 0 0 1 672 261.856V128z m106.656 768H245.344C215.904 896 192 871.424 192 841.152V182.848C192 152.576 215.872 128 245.344 128h373.312v164.576c0 30.304 23.904 54.848 53.344 54.848h160v493.728C832 871.424 808.128 896 778.656 896z m-227.36-480H280.704c-14.528-1.696-25.28-15.456-24.576-31.36-1.408-16.352 9.568-30.912 24.576-32.64h270.592c15.04 1.728 25.984 16.288 24.576 32.64 0.736 15.904-10.048 29.664-24.576 31.36z m192.32 160H280.384C266.176 572.928 256 559.552 256 544s10.176-28.928 24.352-32H743.68c14.176 3.072 24.352 16.448 24.352 32s-10.176 28.928-24.352 32z m0 160H280.384C266.176 732.928 256 719.552 256 704s10.176-28.928 24.352-32H743.68c14.176 3.072 24.352 16.448 24.352 32s-10.176 28.928-24.352 32z" fill="#999999" p-id="19012"></path></svg>

frontend/packages/assets/style/zTree/img/down.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1634977302301" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13209" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 768l448-512H64z" p-id="13210" fill="#999999"></path></svg>

frontend/packages/assets/style/zTree/img/false_part_check.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1637737894768" class="icon" viewBox="0 0 8197 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2979" xmlns:xlink="http://www.w3.org/1999/xlink" width="1600.9765625" height="200"><defs><style type="text/css"></style></defs><path d="M569.142355 3.172991h7123.599408a511.98852 511.98852 0 0 1 0 1017.657058H569.143355a511.98852 511.98852 0 1 1 0-1017.657058z" p-id="2980" fill="#ffffff"></path></svg>

frontend/packages/assets/style/zTree/img/file.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1634975166702" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2460" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M153.856 154.112H153.6a51.2 51.2 0 0 0-51.2 51.2V819.2a51.2 51.2 0 0 0 51.2 51.2h716.8a51.2 51.2 0 0 0 51.2-51.2V307.4048a51.2 51.2 0 0 0-51.4048-50.9952l-336.6912 1.3312a102.4 102.4 0 0 1-72.8064-30.0032L403.1488 170.1888a51.2 51.2 0 0 0-35.9424-15.0016l-213.3504-1.024z m0.256-51.2l213.4016 1.0752a102.4 102.4 0 0 1 71.8848 30.0032l57.4976 57.5488a51.2 51.2 0 0 0 36.4544 15.0016l336.64-1.3312A102.4 102.4 0 0 1 972.8 307.2v512a102.4 102.4 0 0 1-102.4 102.4H153.6a102.4 102.4 0 0 1-102.4-102.4V205.312a102.4 102.4 0 0 1 102.4-102.4h0.512z" fill="#999999" p-id="2461"></path></svg>

frontend/packages/assets/style/zTree/img/openedFile.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1634976604478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2732" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1003.153333 404.96a52.933333 52.933333 0 0 0-42.38-20.96H896V266.666667a53.393333 53.393333 0 0 0-53.333333-53.333334H461.253333a10.573333 10.573333 0 0 1-7.54-3.126666L344.46 100.953333A52.986667 52.986667 0 0 0 306.746667 85.333333H53.333333a53.393333 53.393333 0 0 0-53.333333 53.333334v704a53.393333 53.393333 0 0 0 53.333333 53.333333h796.893334a53.453333 53.453333 0 0 0 51.453333-39.333333l110.546667-405.333334a52.953333 52.953333 0 0 0-9.073334-46.373333zM53.333333 128h253.413334a10.573333 10.573333 0 0 1 7.54 3.126667l109.253333 109.253333A52.986667 52.986667 0 0 0 461.253333 256H842.666667a10.666667 10.666667 0 0 1 10.666666 10.666667v117.333333H173.773333a53.453333 53.453333 0 0 0-51.453333 39.333333L42.666667 715.366667V138.666667a10.666667 10.666667 0 0 1 10.666666-10.666667z m917.726667 312.14l-110.546667 405.333333a10.666667 10.666667 0 0 1-10.286666 7.86H63.226667a10.666667 10.666667 0 0 1-10.286667-13.473333l110.546667-405.333333A10.666667 10.666667 0 0 1 173.773333 426.666667h787a10.666667 10.666667 0 0 1 10.286667 13.473333z" fill="#999999" p-id="2733"></path></svg>

frontend/packages/assets/style/zTree/img/right.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1634977254719" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10984" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M202.785 67.418l615.588 421.827-615.588 421.827z" p-id="10985" fill="#999999"></path></svg>

frontend/packages/assets/style/zTree/metroStyle.css

@@ -0,0 +1,109 @@
+
+.ztree * {padding:0; margin:0 ; font-size:12px;}
+.ztree {margin:0; padding:5px; color:#36474f;}
+.ztree li{overflow: hidden; position: relative; display:block;padding:0; margin:0; list-style:none; line-height:12px; text-align:left; white-space:nowrap; outline:0}
+/* .ztree li:hover{cursor: pointer;} */
+/* .ztree li:hover{ background-color:  rgba(0, 0, 0, 0.025)} */
+.ztree li ul{  margin:0; padding:0 0 0 18px;height: auto;}
+.ztree li ul:hover {cursor: pointer;}
+.ztree li ul.line{ background:url(./img/line_conn.png) 0 0 repeat-y;}
+
+.ztree li a {display:inline-block;width:100%; overflow:hidden; text-overflow: ellipsis;padding:5px 45px 5px 8px; margin:0; cursor:pointer;color:#36474f; background-color: transparent; text-decoration:none; vertical-align:top;}
+.ztree li a:hover {text-decoration:none;cursor: pointer;}
+/* .ztree li a.curSelectedNode {padding-top:0px; background-color:#e5e5e5; color:black; height:21px; opacity:0.8;} */
+.ztree li a.curSelectedNode_Edit {padding-top:0px; background-color:#e5e5e5; color:black; height:21px; }
+.ztree li a.tmpTargetNode_inner {padding-top:0px; background-color:#aaa; color:white; height:21px; border:1px #666 solid;
+  opacity:0.8; filter:alpha(opacity=80)}
+.ztree li a input.rename {height:12px; width:80px; padding:0; margin:0;
+  font-size:12px; border:1px #585956 solid; *border:0px}
+.ztree li span {line-height:21px; margin-right:2px;}
+.ztree li span.button {line-height:0; margin:0; padding: 0; width:21px; height:21px; display: inline-block; vertical-align:middle;
+  border:0 none; cursor: pointer;outline:none;
+  background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
+  background-image:url("./img/metro.png"); *background-image:url("./img/metro.gif")}
+
+.ztree li span.button.chk {width:13px; height:20px; margin:0 3px; cursor: auto}
+.ztree li span.button.chk.checkbox_false_full {background-image: url('./img/checkbox.svg');background-size: 0;background-position: -3px 0px;}
+.ztree li span.button.chk.checkbox_false_full_focus {background-image: url('./img/checkbox.svg');background-size: 0;background-position: -3px 0px;}
+.ztree li span.button.chk.checkbox_false_part {background-image: url('./img/false_part_check.svg');background-size: 0;background-position: -1px -1px;}
+.ztree li span.button.chk.checkbox_false_part_focus {background-image: url('./img/false_part_check.svg');background-size: 0;background-position: -1px -1px;}
+.ztree li span.button.chk.checkbox_false_disable {background-position: -5px -89px;}
+.ztree li span.button.chk.checkbox_true_full {background-image: url('./img/checked.svg');background-size: 8px 12px;background-position: 1px -1px;}
+.ztree li span.button.chk.checkbox_true_full_focus {background-image: url('./img/checked.svg');background-size: 8px 12px;background-position: 1px -1px;}
+.ztree li span.button.chk.checkbox_true_part {background-image: url('./img/checked.svg');background-size: 8px 13px;background-position: 1px -1px;}
+.ztree li span.button.chk.checkbox_true_part_focus {background-image: url('./img/checked.svg');background-size: 8px 13px;background-position: 1px -1px;}
+.ztree li span.button.chk.checkbox_true_disable {background-position: -26px -89px;}
+.ztree li span.button.chk.radio_false_full {background-position: -47px -5px;}
+.ztree li span.button.chk.radio_false_full_focus {background-position: -47px -26px;}
+.ztree li span.button.chk.radio_false_part {background-position: -47px -47px;}
+.ztree li span.button.chk.radio_false_part_focus {background-position: -47px -68px;}
+.ztree li span.button.chk.radio_false_disable {background-position: -47px -89px;}
+.ztree li span.button.chk.radio_true_full {background-position: -68px -5px;}
+.ztree li span.button.chk.radio_true_full_focus {background-position: -68px -26px;}
+.ztree li span.button.chk.radio_true_part {background-position: -68px -47px;}
+.ztree li span.button.chk.radio_true_part_focus {background-position: -68px -68px;}
+.ztree li span.button.chk.radio_true_disable {background-position: -68px -89px;}
+
+
+.ztree li span.button.switch {width:21px; height:34px}
+.ztree li span.button.root_open{background-image: url('./img/down.svg');background-size: 8px 8px;background-position-y: center;background-position-x: center;}
+.ztree li span.button.root_close{background-image: url('./img/right.svg');background-size: 8px 8px; background-position: 7px 12px;}
+.ztree li span.button.roots_open{background-image: url('./img/down.svg');background-size: 8px 8px;background-position-x: 5px;background-position-y:5px}
+.ztree li span.button.roots_close{background-position: -126px 0;}
+.ztree li span.button.center_open{background-image: url('./img/down.svg');background-size: 20px 32px;background-position-y: 12px;background-position-x: 5px;}
+.ztree li span.button.center_close{background-position: -126px -21px;}
+.ztree li span.button.bottom_open{background-image: url('./img/down.svg');background-size: 8px 8px; background-position-y: 12px;background-position-x: 7px;}
+.ztree li span.button.bottom_close{background-image: url('./img/right.svg');background-size: 8px 8px; background-position-y: 13px;background-position-x: 7px;}
+.ztree li span.button.noline_open{background-position: -105px -84px;}
+.ztree li span.button.noline_close{background-position: -126px -84px;}
+.ztree li span.button.root_docu{ background:none;}
+.ztree li span.button.roots_docu{background-position: -84px 5px;}
+.ztree li span.button.center_docu{background-position: -84px -17px;}
+.ztree li span.button.bottom_docu{background-position: -84px -39px;}
+.ztree li span.button.noline_docu{ background:none;}
+/* .ztree li span.button.noline_docu::after{border: 1px solid #e8e8e8;width:10px;height: 20px;position: fi;}
+.ztree li span.button.noline_docu::after{content:''} */
+
+
+.ztree li span.button.switch {width:21px; height:34px}
+.ztree li span.button.root_open{background-image: url('./img/down.svg');background-size: 8px 8px; background-position-y: center;background-position-x: center;}
+.ztree li span.button.root_close{background-image: url('./img/right.svg');background-size: 8px 8px; background-position: 7px 12px;}
+.ztree li span.button.roots_open{background-image: url('./img/down.svg');background-size: 8px 8px; background-position-y: 12px;background-position-x: 6px;}
+.ztree li span.button.roots_close{background-image: url('./img/right.svg');background-size: 8px 8px; background-position: 7px 12px;}
+.ztree li span.button.center_open{background-image: url('./img/down.svg');background-size: 8px 8px;background-position-y: 12px;background-position-x: 6px;}
+.ztree li span.button.center_close{background-image: url('./img/right.svg');background-size: 8px 8px;background-position:7px 12px;}
+.ztree li span.button.bottom_open{background-image: url('./img/down.svg');background-size: 8px 8px; background-position-y: 12px;background-position-x: 7px;}
+.ztree li span.button.bottom_close{background-image: url('./img/right.svg');background-size: 8px 8px; background-position-y: 13px;background-position-x: 7px;}
+.ztree li span.button.noline_open{background-position: -105px -84px;}
+.ztree li span.button.noline_close{background-position: -126px -84px;}
+.ztree li span.button.root_docu{ background:none;}
+.ztree li span.button.roots_docu{background-position: -84px 5px;}
+.ztree li span.button.center_docu{background-position: -84px -17px;}
+.ztree li span.button.bottom_docu{background-position: -84px -39px;}
+.ztree li span.button.noline_docu{ background:none;}
+
+.ztree li span.button.ico_open{background-image: url('./img/openedFile.svg');background-size: 14px 14px;background-position-y:2px;}
+.ztree li span.button.ico_close{background-image: url('./img/file.svg');background-size: 14px 14px;background-position-y:2px}
+.ztree li span.button.ico_docu{background-image: url('./img/document.svg');background-size: 14px 14px;background-position-y: 2px;}
+.ztree li span.button.edit {margin-left:2px; margin-right: -1px; background-position: -189px -21px; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.edit:hover {
+  background-position: -168px -21px;
+}
+.ztree li span.button.remove {margin-left:2px; margin-right: -1px; background-position: -189px -42px; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.remove:hover {
+  background-position: -168px -42px;
+}
+.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position: -189px 0; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.add:hover {
+  background-position: -168px 0;
+}
+.ztree li span.button.ico_loading{margin-right:2px; background:url(./img/loading.gif) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
+
+ul.tmpTargetzTree {background-color:#FFE6B0; opacity:0.8; filter:alpha(opacity=80)}
+
+span.tmpzTreeMove_arrow {width:16px; height:21px; display: inline-block; padding:0; margin:2px 0 0 1px; border:0 none; position:absolute;
+    background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
+    background-position:-168px -84px; background-image:url("./img/metro.png"); *background-image:url("./img/metro.gif")}
+
+ul.ztree.zTreeDragUL {margin:0; padding:0; position:absolute; width:auto; height:auto;overflow:hidden; background-color:#cfcfcf; border:1px #00B83F dotted; opacity:0.8; filter:alpha(opacity=80)}
+.ztreeMask {z-index:10000; background-color:#cfcfcf; opacity:0.0; filter:alpha(opacity=0); position:absolute}

frontend/packages/assets/style/zTree/treePackUp.scss

@@ -0,0 +1,141 @@
+.pack-up-box {
+  margin: 0 -16px;
+  height: 100%;
+  position: absolute;
+  background-color: #f6f7fb;
+  display: flex;
+}
+
+.pack-up-button {
+  position: absolute;
+  margin: 0 -16px;
+  height: none;
+  min-height: calc(100vh - 40px);
+  line-height: calc(100vh - 40px);
+  background-color: #f6f7fb;
+  display: flex;
+
+  a {
+    display: block;
+    height: 100px;
+    line-height: 100px;
+    padding: 50px 0 50px 0;
+    display: flex;
+    top: 45%;
+    // align-self: center;
+    justify-content: center;
+    background-color: #f1f1f1;
+    border-top-right-radius: 25px;
+    border-bottom-right-radius: 25px;
+
+    i {
+      align-self: center;
+
+      color: #c6c6db;
+    }
+
+    span {
+      align-self: center;
+    }
+
+    &:hover {
+      background-color: var(--bs-el-color-primary);
+    }
+  }
+}
+
+.visible-pack-up {
+  position: absolute !important;
+  right: 7px;
+  display: flex;
+  height: 40px !important;
+  line-height: 40px !important;
+  position: absolute !important;
+  cursor: col-resize !important;
+  background-color: var(--bs-background-2) !important;
+  opacity: 0.8;
+
+  span {
+    opacity: 0.7;
+    font-size: 16px;
+    color: #ffffff;
+    align-self: center;
+    white-space: nowrap;
+    display: block;
+    margin-right: 4px;
+  }
+
+  &:hover {
+    cursor: col-resize;
+  }
+}
+
+.visible-tree {
+  width: 25%;
+  float: left;
+}
+
+.hidden-tree {
+  opacity: 0;
+  width: 0%;
+  height: 0;
+}
+
+.table-portion {
+  float: left;
+  width: 75%;
+}
+
+.table-overall {
+  width: 100%;
+  height: 100%;
+}
+
+.resize {
+  cursor: col-resize;
+  float: left;
+  user-select: none;
+  width: 15px;
+  z-index: 1;
+  width: 16px;
+  display: flex;
+  align-items: center;
+  height: auto;
+  background-color: var(--bs-el-background-1);
+  height: 100%;
+
+  a {
+    position: unset !important;
+    display: block;
+    height: 100px;
+    line-height: 0px;
+    border-top-right-radius: 25px;
+    border-bottom-right-radius: 25px;
+    background-color: var(--bs-background-2);
+
+    i {
+      line-height: 100px;
+      color: #c6c6db;
+    }
+
+    &:hover {
+      background-color: var(--bs-el-color-primary);
+    }
+  }
+}
+
+.left-box {
+  width: 25%;
+  height: auto;
+  overflow: hidden;
+
+  .inner-container {
+    height: 100% !important;
+  }
+}
+
+.right-box {
+  width: 75%;
+  margin-left: 16px;
+  // position: relative;
+}

frontend/packages/assets/style/zTree/zTree.scss

@@ -0,0 +1,214 @@
+
+.tree-box {
+  // background-color: ;
+  padding: 0 18px 10px 0;
+}
+
+.input-with-select {
+  margin-bottom: 10px;
+}
+
+.br {
+  display: none;
+}
+
+.loading {
+  display: contents;
+
+  .el-loading-text {
+    display: list-item;
+    white-space: nowrap;
+  }
+}
+
+.ztree {
+  height: calc(100vh - 290px);
+  li a.curSelectedNode {
+    color: var(--bs-el-color-primary);
+    text-decoration: none;
+  }
+
+  .scroll {
+    height: 100%;
+    width: 100%;
+    .el-scrollbar__wrap {
+      margin-bottom: 0 !important;
+      // padding-bottom: 15px;
+      overflow-x: hidden !important;
+      overflow-y: auto;
+    }
+  }
+}
+
+.triangle {
+  cursor: pointer;
+  position: absolute;
+  z-index: 4;
+  display: block;
+  width: 12px;
+  height: 12px;
+  background: transparent;
+  border-style: solid;
+  transform: rotate(45deg);
+}
+
+.ztreeNodeMenu {
+  z-index: 5;
+  cursor: pointer;
+  background-color:#ffffff;
+  ul {
+    border-radius: 5px;
+    outline: none;
+    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+        background-color:#ffffff;
+  }
+
+  li {
+    padding: 5px 10px 5px 10px;
+
+    span {
+      color:#36474f;
+      font-size: 12px;
+    }
+    &:hover{
+        //background-color: $color;
+        cursor: pointer;
+        //border-bottom: $color;
+    }
+  }
+
+
+  .node-bottom-menu {
+    z-index: 4;
+    padding-top: 10px;
+    ul{
+      padding: 10px 0 5px 0;
+
+    }
+    .triangle {
+      top: 4px;
+      background-color:#ffffff;
+      border-color: transparent ;
+      box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
+    }
+    cursor: pointer;
+    .triangle {
+      z-index: 5;
+      left: 50%;
+      transform: translateX(-50%) rotate(45deg);
+    }
+  }
+  .node-top-menu {
+    z-index: 4;
+    padding-bottom: 10px;
+    ul{
+      padding: 5px 0 10px 0;
+    }
+    .triangle {
+      bottom: 4px;
+      background-color:#ffffff;
+      border-color: transparent transparent transparent transparent;
+    }
+
+    cursor: pointer;
+    .triangle {
+      z-index: 5;
+      left: 50%;
+      transform: translateX(-50%) rotate(45deg);
+    }
+  }
+}
+
+.treeAddNode{
+  z-index: 3;
+  margin-right: 6px;
+  width: 10px;
+  right: 0;
+  top: 5px;
+  right: 10px;
+  font-size: 18px;
+  padding:0 8px;
+  font-weight: bold;
+  position: absolute;
+  cursor: pointer;
+}
+
+
+.ztree li span.button.chk.checkbox_false_full {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  margin-bottom: 2px;
+  border: 1px solid #999999 !important;
+  background-image: none;
+}
+
+.ztree li span.button.chk.checkbox_false_full_focus {
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  margin-bottom: 2px;
+  border-radius: 2px;
+
+  border: 1px solid #999999;
+  background-image: none;
+}
+
+.ztree li span.button.chk.checkbox_true_full {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  margin-bottom: 3px;
+  border: 1px solid var(--bs-el-color-primary);
+  background-color: var(--bs-el-color-primary);
+}
+
+.ztree li span.button.chk.checkbox_true_full_focus {
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  border-radius: 2px;
+  margin-bottom: 3px;
+  border: 1px solid var(--bs-el-color-primary);
+  padding: 1px;
+  background-color: var(--bs-el-color-primary);
+}
+
+.ztree li span.button.chk.checkbox_true_part {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  margin-bottom: 3px;
+  border: 1px solid var(--bs-el-color-primary);
+  padding: 1px;
+  background-color: var(--bs-el-color-primary);
+}
+
+.ztree li span.button.chk.checkbox_true_part_focus {
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  border-radius: 2px;
+  margin-bottom: 3px;
+  border: 1px solid var(--bs-el-color-primary);
+  padding: 1px;
+  background-color: var(--bs-el-color-primary);
+}
+
+.ztree li span.button.chk.checkbox_false_part {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  margin-bottom: 3px;
+  border: 1px solid #999999;
+}
+
+.ztree li span.button.chk.checkbox_false_part_focus {
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  border-radius: 2px;
+  margin-bottom: 3px;
+  border: 1px solid #999999;
+}

frontend/packages/assets/style/zTree/zTreeSelect.scss

@@ -0,0 +1,57 @@
+.noData {
+  height: 32px;
+  line-height: 32px;
+}
+
+.ztree-filter-container {
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 16px 16px 0px;
+
+  .el-input {
+    min-width: 100px !important;
+    margin-right: 10px;
+  }
+  // .el-button{
+  //   display: inline-flex !important;
+  // }
+}
+
+.loading {
+  display: contents;
+
+  .el-loading-text {
+    display: list-item;
+    white-space: nowrap
+  }
+}
+
+.br {
+  display: none;
+}
+
+::v-deep .el-input__icon {
+  line-height: 30px;
+}
+
+.scrollInSelect {
+  height: calc(100vh - 480px);
+
+  ::v-deep .el-scrollbar__wrap {
+    margin-bottom: 0 !important;
+    overflow-x: auto;
+  }
+
+  .ztree {
+    height: 100%;
+    padding: 0;
+    ::v-deep li a.curSelectedNode {
+      color: var(--bs-el-color-primary);
+      text-decoration: none;
+    }
+  }
+
+  .empty {
+    margin-top: 30px;
+  }
+}