edit

src/app/routes/menu-manager/components/api-auth/auth-drawer/auth-drawer.component.ts

@@ -0,0 +1,134 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { STComponent, STColumn, STRequestOptions } from '@delon/abc/st';
+import { SFComponent, SFSchema, SFDateWidgetSchema } from '@delon/form';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { MenuManagerService } from '../../../services/menu-manager.service';
+
+@Component({
+  selector: 'app-auth-drawer',
+  templateUrl: './auth-drawer.component.html',
+  styleUrls: ['./auth-drawer.component.less']
+})
+export class AuthDrawerComponent implements OnInit {
+  @ViewChild('st', { static: true })
+  st!: STComponent;
+  @ViewChild('sf', { static: false })
+  sf!: SFComponent;
+  @ViewChild('configTypeItemModal', { static: false })
+  configTypeItemModal!: any;
+  columns: STColumn[] = this.initST();
+  searchSchema: SFSchema = this.initSF();
+
+  id = null;
+  appId = '';
+
+  functionInfo: any = {};
+  functions: any[] = [];
+  isDisabled = false;
+
+  constructor(public service: MenuManagerService, private modal: NzModalService) {}
+
+  ngOnInit(): void {
+    this.loadFunctions();
+  }
+
+  beforeReq = (requestOptions: STRequestOptions) => {
+    Object.assign(requestOptions.body, { id: this.id });
+    if (this.sf) {
+      Object.assign(requestOptions.body, {
+        ...this.sf.value
+      });
+    }
+    return requestOptions;
+  };
+
+  loadFunctions() {
+    this.service.request(this.service.$api_get_functions, { appId: this.appId }, 'POST', false).subscribe(res => {
+      if (res) {
+        this.functions = res;
+      }
+    });
+  }
+
+  functionAction(item?: any, isDisabled = false) {
+    if (item) {
+      this.functionInfo = { ...item, buttonId: item.id };
+    } else {
+      this.functionInfo = {};
+    }
+    this.isDisabled = isDisabled;
+    const modal = this.modal.create({
+      nzTitle: item ? '编辑' : '新增',
+      nzContent: this.configTypeItemModal,
+      nzWidth: 800,
+      nzCancelText: '取消',
+      nzOkText: '保存',
+      nzOnOk: () => {
+        this.service.request(this.service.$api_save_menu_function, { ...this.functionInfo, functionId: this.id }).subscribe(res => {
+          if (res) {
+            this.service.msgSrv.success(item ? '编辑成功' : '新增成功');
+            this.st.load(1);
+            modal.destroy();
+          }
+        });
+        return false;
+      }
+    });
+  }
+
+  /**
+   * 重置表单
+   */
+  resetSF() {
+    this.sf.reset();
+  }
+
+  private initSF(): SFSchema {
+    return {
+      properties: {
+        vc2code: {
+          type: 'string',
+          title: '权限名称',
+          ui: {
+            autocomplete: 'off',
+            placeholder: '请输入权限名称'
+          }
+        },
+        vc2c2ode: {
+          type: 'string',
+          title: '权限编号',
+          ui: {
+            autocomplete: 'off',
+            placeholder: '请输入权限编号'
+          }
+        }
+      }
+    };
+  }
+
+  private initST(): STColumn[] {
+    return [
+      { title: '权限名称', index: 'name' },
+      { title: '权限编码', index: 'permissionsCode' },
+      { title: '权限路径', index: 'permissionsUrl' },
+      {
+        title: '操作',
+        width: '150px',
+        className: 'text-center',
+        buttons: [
+          {
+            text: '查看',
+            click: item => this.functionAction(item, true)
+          },
+          {
+            text: '编辑',
+            click: item => this.functionAction(item)
+          },
+          {
+            text: '删除'
+          }
+        ]
+      }
+    ];
+  }
+}