aside-tree for role-privileges

src/main/resources/web/admin/bizuser/role-privileges.html

@@ -77,7 +77,7 @@
       <div class="rb-content">
         <aside class="page-aside">
           <div class="rb-scroller">
-            <div class="aside-tree">
+            <div class="page-aside-tree" id="role-tree">
               <div class="ph-item rb">
                 <div class="ph-col-12 p-0">
                   <div class="ph-row">
@@ -86,7 +86,6 @@
                   </div>
                 </div>
               </div>
-              <ul class="list-unstyled"></ul>
             </div>
           </div>
         </aside>
@@ -217,6 +216,7 @@
     <script th:src="@{/assets/js/rb-forms.js}" type="text/babel"></script>
     <script th:src="@{/assets/js/rb-forms.append.js}" type="text/babel"></script>
     <script th:src="@{/assets/js/bizuser/role-view.js}" type="text/babel"></script>
+    <script th:src="@{/assets/js/aside-tree.js}" type="text/babel"></script>
     <script th:src="@{/assets/js/bizuser/role-privileges.js}" type="text/babel"></script>
   </body>
 </html>

src/main/resources/web/assets/css/rb-page.css

@@ -1998,10 +1998,15 @@ th.column-fixed {
 .aside-2tree li span.collapse-icon {
   padding-left: 6px;
   padding-top: 7px;
-  font-size: 1.6rem;
+  font-size: 1.22rem;
+  color: #999;
 }
 
-.aside-2tree li span.collapse-icon:hover {
+.aside-2tree li.active span.collapse-icon {
+  color: #fff;
+}
+
+.aside-2tree li span.collapse-icon:not(.no-child):hover {
   color: #4285f4;
 }
 
@@ -2009,11 +2014,6 @@ th.column-fixed {
   color: rgba(255, 255, 255, 0.8);
 }
 
-.aside-2tree li span.collapse-icon.no-child .zmdi {
-  width: 8px;
-  overflow: hidden;
-}
-
 .aside-2tree li span.collapse-icon.no-child .zmdi::before {
   content: '\f273';
 }

src/main/resources/web/assets/js/aside-tree.js

@@ -51,11 +51,12 @@ class AsideTree extends React.Component {
               this.setState({ expandItems: expandItemsNew })
             }
           }}>
-          <i className={`zmdi ${this.state.expandItems.contains(item.id) ? 'zmdi-chevron-down' : 'zmdi-chevron-right'} `} />
+          <i className={`zmdi ${this.state.expandItems.contains(item.id) ? 'zmdi-minus' : 'zmdi-plus'} `} />
         </span>
         <a
           data-id={item.id}
           className={`text-ellipsis ${item.disabled && 'text-disabled'}`}
+          title={item.disabled ? $L('已禁用') : null}
           onClick={() => {
             this.setState({ activeItem: item.id }, () => {
               typeof this.props.onItemClick === 'function' && this.props.onItemClick(item)

src/main/resources/web/assets/js/bizuser/role-privileges.js

@@ -10,7 +10,9 @@ RbForm.postAfter = function (data) {
   location.href = rb.baseUrl + '/admin/bizuser/role/' + data.id
 }
 
+// 当前编辑
 const roleId = window.__PageConfig.recordId
+
 $(document).ready(function () {
   $('.J_new-role').click(() => RbFormModal.create({ title: $L('新建角色'), entity: 'Role', icon: 'lock' }))
 
@@ -18,6 +20,7 @@ $(document).ready(function () {
     $('.J_save').attr('disabled', false).click(updatePrivileges)
     loadPrivileges()
   }
+
   loadRoles()
 
   // ENTITY
@@ -69,36 +72,52 @@ const clickPriv = function (elements, action) {
   }
 }
 
+let _AsideTree
 const loadRoles = function () {
-  $.get('/admin/bizuser/role-list', function (res) {
-    $('.aside-tree .ph-item').remove()
-    $('.aside-tree ul').empty()
-    $(res.data).each(function () {
-      const _id = this.id
-      const $item = $(
-        `<li><a class="text-truncate ${this.disabled ? 'text-disabled' : ''}" title="${this.disabled ? $L('已禁用') : ''}" href="${
-          rb.baseUrl
-        }/admin/bizuser/role/${_id}">${this.name}</a></li>`
-      ).appendTo('.aside-tree ul')
+  $.get('/admin/bizuser/role-list', (res) => {
+    if (_AsideTree) {
+      ReactDOM.unmountComponentAtNode(document.getElementById('role-tree'))
+      _AsideTree = null
+    }
 
-      const $action = $(
-        '<div class="action"><a class="J_edit"><i class="zmdi zmdi-edit"></i></a><a class="J_del"><i class="zmdi zmdi-delete"></i></a></div>'
-      ).appendTo($item)
-      if (roleId === _id) $item.addClass('active')
-      if (_id === '003-0000000000000001') $action.remove()
-
-      $action.find('a.J_edit').click(() =>
-        RbFormModal.create({
-          title: $L('编辑角色'),
-          entity: 'Role',
-          icon: 'lock',
-          id: _id,
-        })
-      )
-
-      // eslint-disable-next-line no-undef
-      $action.find('a.J_del').click(() => deleteRole(_id))
-    })
+    renderRbcomp(
+      <AsideTree
+        data={res.data}
+        activeItem={roleId}
+        onItemClick={(item) => (location.href = `${rb.baseUrl}/admin/bizuser/role/${item.id}`)}
+        extrasAction={(item) => {
+          return (
+            <React.Fragment>
+              <span
+                className="action"
+                onClick={() => {
+                  RbFormModal.create({
+                    title: $L('编辑角色'),
+                    entity: 'Role',
+                    icon: 'lock',
+                    id: item.id,
+                  })
+                }}>
+                <i className="zmdi zmdi-edit" />
+              </span>
+              <span
+                className="action"
+                onClick={() => {
+                  // eslint-disable-next-line no-undef
+                  deleteRole(item.id)
+                }}>
+                <i className="zmdi zmdi-delete" />
+              </span>
+            </React.Fragment>
+          )
+        }}
+        hideCollapse
+      />,
+      'role-tree',
+      function () {
+        _AsideTree = this
+      }
+    )
   })
 }