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

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { SFComponent, SFSchema, SFUISchema } from '@delon/form';
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
import { SettingMenuComponent } from 'src/app/routes/sys-setting/components/role-management/menu/menu.component';
import { MenuManagerService } from '../../../services/menu-manager.service';

@Component({
  selector: 'app-menu-modal',
  templateUrl: './menu-modal.component.html',
  styleUrls: ['./menu-modal.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MenuModalComponent implements OnInit {
  @ViewChild('sf', { static: false })
  sf!: SFComponent;
  formData: any;
  schema!: SFSchema;
  ui!: SFUISchema;
  isDisabled = false;

  params = {};

  constructor(public service: MenuManagerService, private modal: NzModalRef, private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
    if (this.formData.id) {
      this.loadMenu();
    } else {
      this.initSF();
    }
  }

  initSF(data?: any) {
    this.schema = {
      properties: {
        title: {
          title: '菜单名称',
          type: 'string',
          default: this.formData.text,
          maxLength: 20,
          ui: {
            widget: this.isDisabled ? 'text' : 'string',
            placeholder: '请输入菜单名称'
          }
        },
        keyCode: {
          title: '菜单编码',
          type: 'string',
          default: this.formData.keyCode,
          ui: {
            widget: this.isDisabled ? 'text' : 'string',
            placeholder: '请输入菜单编码'
          }
        },
        isLeaf: {
          title: '是否叶子节点',
          type: 'boolean',
          default: this.formData.isLeaf || true,
          enum: [true, false],
          readOnly: this.isDisabled,
          ui: {
            widget: 'radio'
          }
        },
        hide: {
          title: '是否隐藏',
          type: 'boolean',
          default: this.formData.hide || false,
          enum: [true, false],
          readOnly: this.isDisabled,
          ui: {
            widget: 'radio'
          }
        },
        reuse: {
          title: '是否缓存页面',
          type: 'boolean',
          default: this.formData.reuse || false,
          enum: [true, false],
          readOnly: this.isDisabled,
          ui: {
            widget: 'radio'
          }
        },
        link: {
          title: '菜单路由',
          type: 'string',
          default: this.formData.link,
          ui: {
            widget: this.isDisabled ? 'text' : 'string',
            placeholder: '请输入菜单路由'
          }
        },
        icon: {
          title: '菜单图标',
          type: 'string',
          default: this.formData.icon,
          ui: {
            widget: this.isDisabled ? 'text' : 'string',
            placeholder: '请输入菜单图标'
          }
        },
        sortId: {
          title: '排序',
          type: 'number',
          default: this.formData.sortId,
          ui: {
            widget: this.isDisabled ? 'text' : 'number'
          }
        }
      },
      required: ['title']
    };
    this.ui = {
      '*': {
        spanLabelFixed: 120,
        grid: { span: 12 }
      }
    };
    this.cdr.detectChanges();
  }

  loadMenu() {
    this.service.request(this.service.$api_get_menu_by_id, { id: this.formData.id }).subscribe(res => {
      if (res) {
        this.formData = res;
        this.initSF(this.formData);
      }
    });
  }

  close() {
    this.modal.destroy();
  }

  sure() {
    if (!this.sf.valid) {
      this.service.msgSrv.warning('表单验证错误');
      return;
    }
    const params = {
      ...this.sf?.value,
      ...this.params,
      i18n: null,
      // i18n: this.sf?.value.keyCode,
      menuType: 0,
      reuse: 0,
      shortcut: 0,
      hideInBreadcrumb: 0,
      functionType: 0,
      sortId: this.sf?.value.sortId?.toString() || null,
      text: this.sf?.value.title
    };
    this.service.request(this.service.$api_add_one, params).subscribe(res => {
      if (res) {
        this.service.msgSrv.success(this.formData.id ? '修改菜单成功' : '新增菜单成功');
        this.modal.destroy(true);
      }
    });
  }
}