edit

src/app/routes/menu-manager/components/index/index.component.html

@@ -28,8 +28,8 @@
 <nz-card class="content-box">
 
   <nz-tabset [nzTabBarExtraContent]="extraTemplate">
-    <nz-tab nzTitle="货主菜单" (nzClick)="changeMemu('1')"></nz-tab>
-    <nz-tab nzTitle="运营后台菜单" (nzClick)="changeMemu('2')"></nz-tab>
+    <nz-tab nzTitle="货主菜单" (nzClick)="changeMemu(0)"></nz-tab>
+    <nz-tab nzTitle="运营后台菜单" (nzClick)="changeMemu(1)"></nz-tab>
   </nz-tabset>
   <ng-template #extraTemplate>
     <div class="d-flex align-items-center">
@@ -39,12 +39,52 @@
     </div>
   </ng-template>
 
-  <st #st [data]="service.$api_get_all" [columns]="columns" [expand]="expand" expandRowByClick
+  <!-- <st #st [data]="service.$api_get_all" [columns]="columns" [expand]="expand" expandRowByClick
     [req]="{ method: 'POST',  reName: { pi: 'pageIndex', ps: 'pageSize' },params:{appId:selectedPlatform?.appId} }"
     [res]="{ reName: { list: 'data' } }" [page]="{ show: false }" [loading]="service.http.loading"
     [scroll]="{ y: '370px' }" (change)="stChange($event)">
     <ng-template #expand let-item let-index="index" let-column="column">
       {{ item.description }}
     </ng-template>
-  </st>
+  </st> -->
+  <nz-table #expandTable [nzData]="listOfMapData" nzTableLayout="fixed" nzBordered>
+    <thead>
+      <tr>
+        <th>菜单名称</th>
+        <th>路由地址</th>
+        <th>菜单图标</th>
+        <th>菜单排序</th>
+        <th class="text-center">操作</th>
+      </tr>
+    </thead>
+    <tbody>
+      <ng-container *ngFor="let data of expandTable.data">
+        <ng-container *ngFor="let item of mapOfExpandedData[data.key]">
+          <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
+            <td [nzIndentSize]="item.level! * 20" [nzShowExpand]="!!item.children" [(nzExpand)]="item.expand"
+              (nzExpandChange)="collapse(mapOfExpandedData[data.key], item, $event)">
+              {{ item.text }}
+            </td>
+            <td>{{ item.link }}</td>
+            <td>
+              <i nz-icon [nzType]="item.iconType"></i>
+            </td>
+            <td>{{ item.sorted }}</td>
+            <td class="text-center">
+              <a>查看</a>
+              <nz-divider nzType="vertical"></nz-divider>
+              <a>编辑</a>
+              <nz-divider nzType="vertical"></nz-divider>
+              <a>删除</a>
+              <ng-container *ngIf="item.level!==3">
+                <nz-divider nzType="vertical"></nz-divider>
+                <a>新增子项</a>
+              </ng-container>
+
+            </td>
+          </tr>
+        </ng-container>
+      </ng-container>
+    </tbody>
+  </nz-table>
 </nz-card>

src/app/routes/menu-manager/components/index/index.component.ts

@@ -3,6 +3,7 @@ import { STComponent, STColumn, STRequestOptions, STChange } from '@delon/abc/st
 import { SFComponent, SFSchema } from '@delon/form';
 import { Menu } from '@delon/theme';
 import { EAEnvironmentService } from '@shared';
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { SettingRoleEditComponent } from 'src/app/routes/sys-setting/components/role-management/edit/edit.component';
 import { MenuManagerService } from './../../services/menu-manager.service';
@@ -39,32 +40,10 @@ export class MenuManagerComponentsIndexComponent implements OnInit {
     }
   };
 
-  columns: STColumn[] = [
-    { title: '角色名称', index: 'roleName' },
-    { title: '角色描述', index: 'roleDescription' },
-    { title: '创建人手机号', index: 'telephone' },
-    {
-      title: '创建时间',
-      index: 'createTime',
-      className: 'text-left',
-      type: 'date'
-    },
-    {
-      title: '操作',
-      buttons: [
-        {
-          text: '编辑',
-          click: item => this.roleAction(item)
-        },
-        {
-          text: '删除',
-          click: item => this.deleteAction(item)
-        }
-      ]
-    }
-  ];
-
   selectedRows: any[] = [];
+
+  mapOfExpandedData: { [key: string]: any[] } = {};
+  listOfMapData: any[] = [];
   constructor(private envSrv: EAEnvironmentService, public service: MenuManagerService, private modal: NzModalService) {
     this.initData();
   }
@@ -77,6 +56,19 @@ export class MenuManagerComponentsIndexComponent implements OnInit {
       { name: '运营后台', appId: this.envSrv.env.appId, enName: 'tms-obc-web' }
     ];
     this.selectedPlatform = this.platforms[0];
+    this.loadMemu(this.selectedPlatform.appId);
+  }
+
+  loadMemu(appId: string) {
+    this.service.request(this.service.$api_get_all, { appId }, 'POST', false).subscribe(res => {
+      if (res) {
+        this.listOfMapData = res;
+        this.listOfMapData.forEach(item => {
+          this.mapOfExpandedData[item.key] = this.convertTreeToList(item);
+        });
+        console.log(this.listOfMapData, this.mapOfExpandedData);
+      }
+    });
   }
 
   platformChange(e: { name: string; appId: string }) {
@@ -167,24 +159,11 @@ export class MenuManagerComponentsIndexComponent implements OnInit {
     this.service.request(this.service.$api_del_many, ids).subscribe(res => {});
   }
 
-  beforeReq = (requestOptions: STRequestOptions) => {
-    if (this.sf) {
-      Object.assign(requestOptions.body, { ...this.sf.value });
-    }
-    Object.assign(requestOptions.body, { appId: this.selectedPlatform.appId });
-    return requestOptions;
-  };
-
-  stChange(e: STChange): void {
-    switch (e.type) {
-      case 'sort':
-        this.selectedRows = e.checkbox!;
-        break;
-    }
+  changeMemu(key: number) {
+    this.selectedPlatform = this.platforms[key];
+    this.loadMemu(this.selectedPlatform.appId);
   }
 
-  changeMemu(key: string) {}
-
   roleAction(item?: any) {
     const modal = this.modal.create({
       nzContent: SettingRoleEditComponent,
@@ -219,4 +198,64 @@ export class MenuManagerComponentsIndexComponent implements OnInit {
   resetSF() {
     this.sf.reset();
   }
+
+  collapse(array: TreeNodeInterface[], data: TreeNodeInterface, $event: boolean): void {
+    if (!$event) {
+      if (data.children) {
+        data.children.forEach(d => {
+          const target = array.find(a => a.key === d.key)!;
+          target.expand = false;
+          this.collapse(array, target, false);
+        });
+      } else {
+        return;
+      }
+    }
+  }
+
+  convertTreeToList(root: TreeNodeInterface): TreeNodeInterface[] {
+    const stack: TreeNodeInterface[] = [];
+    const array: TreeNodeInterface[] = [];
+    const hashMap = {};
+    stack.push({ ...root, level: 0, expand: true });
+
+    while (stack.length !== 0) {
+      const node = stack.pop()!;
+      this.visitNode(node, hashMap, array);
+      if (node.children) {
+        for (let i = node.children.length - 1; i >= 0; i--) {
+          stack.push({ ...node.children[i], level: node.level! + 1, expand: false, parent: node, iconType: this.formatIcon(node.children[i].icon) });
+        }
+      }
+    }
+
+    return array;
+  }
+
+  visitNode(node: TreeNodeInterface, hashMap: { [key: string]: boolean }, array: TreeNodeInterface[]): void {
+    if (!hashMap[node.key]) {
+      hashMap[node.key] = true;
+      array.push(node);
+    }
+  }
+
+  private formatIcon(icon: any) {
+    let value = icon;
+    // compatible `anticon anticon-user`
+    if (~icon.indexOf(`anticon-`)) {
+      value = value.split('-').slice(1).join('-');
+    }
+    return value;
+  }
+}
+export interface TreeNodeInterface {
+  key: string;
+  name: string;
+  age?: number;
+  level?: number;
+  expand?: boolean;
+  address?: string;
+  children?: TreeNodeInterface[];
+  parent?: TreeNodeInterface;
+  [key: string]: any;
 }