@maketribe/ms-app 3.0.0

package/src/dataview/menu/MenuForm.ts

@@ -0,0 +1,113 @@
+import {
+  DataForm,
+  DataFormOptions,
+  FormColumn,
+  FormDetailColumn,
+  defineDataForm,
+} from "@maketribe/dm";
+import { RouteTable } from "../route/RouteTable";
+import { MenuTable } from "./MenuTable";
+import { RouteForm, RouteResult } from "../route/RouteForm";
+import {
+  PermissionPointDefine,
+  PermissionPointDefineForm,
+  PermissionPointDefineTable,
+} from "./permission-point";
+
+export type MenuResult = {
+  id: string;
+  title: string | null;
+  iconName: string | null;
+  pid: string | null;
+  routeId: string;
+  sort: string;
+  routes: RouteResult[];
+  permissionPoints: PermissionPointDefine[];
+};
+
+export type MenuItem = {
+  id: string;
+  title: string;
+  iconName: string;
+  pid: string;
+  routeId: string;
+  sort: string;
+  routes: RouteResult[];
+  permissionPoints: PermissionPointDefine[];
+};
+
+export class MenuForm extends DataForm<MenuResult, MenuItem> {
+  constructor(options: DataFormOptions = {}) {
+    super({ name: "ms-menu", ...options });
+  }
+
+  protected async initialize() {
+    this.setColumns([
+      new FormColumn({ name: "id", label: "编号" }),
+      new FormColumn({ name: "title", label: "菜单描述" }),
+      new FormColumn({
+        name: "iconName",
+        label: "图标",
+        componentInfo: "MKFormIconSelect",
+        required: true,
+      }),
+      new FormColumn({
+        name: "routeId",
+        label: "默认路由",
+        componentInfo: "MKFormDataTableSelect",
+        componentProps: {
+          labelFieldName: "title",
+          dataTable: new RouteTable({ pageSize: 10 }),
+        },
+      }),
+      new FormColumn({
+        name: "pid",
+        label: "父菜单",
+        componentInfo: "MKFormDataTableSelect",
+        componentProps: {
+          labelFieldName: "title",
+          dataTable: new MenuTable({ pageSize: 10 }),
+        },
+      }),
+      new FormColumn({ name: "sort", label: "排序" }),
+      new FormDetailColumn({
+        name: "routes",
+        label: "该菜单所属路由定义",
+        associationFieldName: "menuId",
+        detailForm: new RouteForm(),
+        detailTable: new RouteTable(),
+      }),
+      new FormDetailColumn({
+        name: "permissionPoints",
+        label: "该菜单所属权限定义",
+        associationFieldName: "menuId",
+        detailForm: new PermissionPointDefineForm(),
+        detailTable: new PermissionPointDefineTable(),
+      }),
+    ]);
+  }
+
+  formatSubmitData(data: any) {
+    return {
+      ...data,
+      iconName: data.iconName || null,
+      pid: data.pid || null,
+      routeId: data.routeId || null,
+    };
+  }
+
+  formatItem(item: MenuResult): MenuItem {
+    return {
+      id: item.id,
+      title: item.title || "",
+      iconName: item.iconName || "",
+      pid: item.pid || "",
+      routeId: item.routeId,
+      sort: item.sort || "0",
+      routes: item.routes || [],
+      permissionPoints: item.permissionPoints || [],
+    };
+  }
+}
+
+defineDataForm(MenuForm);

package/src/dataview/menu/MenuTable.ts

@@ -0,0 +1,37 @@
+import {
+  DataTable,
+  DataTableOptions,
+  TableActionColumn,
+  TableColumn,
+  defineDataTable,
+} from "@maketribe/dm";
+import { MenuItem, MenuResult } from "./MenuForm";
+
+export class MenuTable<T extends MenuItem = MenuItem> extends DataTable<
+  MenuResult,
+  T
+> {
+  constructor(options: Omit<DataTableOptions, "name"> = {}) {
+    super({ name: "ms-menu", ...options });
+  }
+
+  protected async initialize() {
+    this.setColumns([
+      new TableColumn({ name: "id", label: "编号", visible: false }),
+      new TableColumn({ name: "title", label: "菜单描述" }),
+      new TableActionColumn(),
+    ]);
+  }
+
+  formatItem(item: MenuResult): T {
+    return {
+      id: item.id,
+      title: item.title || "",
+      iconName: item.iconName || "",
+      pid: item.pid || "",
+      routeId: item.routeId,
+    } as T;
+  }
+}
+
+defineDataTable(MenuTable);

package/src/dataview/menu/MenuTree.ts

@@ -0,0 +1,143 @@
+import { Group } from "@maketribe/request";
+import { DataTableOptions, TableColumn, WhereFilter } from "@maketribe/dm";
+import {
+  PermissionPointDefine,
+  PermissionPointDefineForm,
+  PermissionPointDefineTable,
+} from "./permission-point";
+import { MenuItem, MenuResult } from "./MenuForm";
+import { MenuTable } from "./MenuTable";
+import { R, ResponseConfig } from "@maketribe/request";
+
+export type MenuNodeItem = MenuItem & { children: MenuNodeItem[] };
+
+export class MenuTree extends MenuTable<MenuNodeItem> {
+  permissionPointDefineTable: PermissionPointDefineTable;
+
+  permissionPointDefineForm: PermissionPointDefineForm;
+
+  permissionPointDefineConditionGroup: Group;
+
+  currentMenuId: MenuNodeItem["id"] = "";
+
+  constructor(options: Omit<DataTableOptions, "name"> = {}) {
+    super({
+      ...options,
+      pageSize: 0,
+      pageSizes: [],
+      interfaceURL: {
+        list: "/api/dv/ms-menu/allList",
+        ...options.interfaceURL,
+      },
+    });
+
+    const menuTree = this;
+
+    this.permissionPointDefineTable =
+      new (class extends PermissionPointDefineTable {
+        protected loadRequest(
+          params: Record<string, any>
+        ): Promise<
+          ResponseConfig<
+            R<PermissionPointDefine[]> & { totalRecCount: string },
+            any
+          >
+        > {
+          if (menuTree.currentMenuId) {
+            // 只有选中菜单的情况下才进行请求
+            return super.loadRequest(params);
+          }
+
+          return Promise.resolve({
+            status: 200,
+            statusText: "OK",
+            headers: {},
+            data: { code: 200, data: [], msg: "", totalRecCount: "0" },
+            config: {},
+            request: null,
+          } as unknown as ResponseConfig<R<PermissionPointDefine[]> & { totalRecCount: string }, any>);
+        }
+      })();
+    this.permissionPointDefineForm = new PermissionPointDefineForm({
+      autoReset: false,
+    });
+
+    this.permissionPointDefineConditionGroup = new Group();
+
+    (this.permissionPointDefineTable.dataFilter as WhereFilter)
+      .getWhere()
+      .addGroup(this.permissionPointDefineConditionGroup);
+  }
+
+  protected async initialize() {
+    await this.permissionPointDefineTable.init();
+    await this.permissionPointDefineForm.init();
+
+    this.setColumns([
+      new TableColumn({ name: "id", label: "编号", visible: false }),
+      new TableColumn({ name: "title", label: "菜单描述" }),
+    ]);
+
+    this.register(
+      this.permissionPointDefineTable.addRecordEvent.on(async () => {
+        await this.permissionPointDefineForm.addRecord();
+
+        this.permissionPointDefineForm.setData({
+          ...this.permissionPointDefineForm.data!,
+          menuId: this.currentMenuId,
+        });
+      })
+    );
+
+    this.register(
+      this.permissionPointDefineTable.editRecordEvent.on(async ({ item }) => {
+        await this.permissionPointDefineForm.editRecord(item);
+      })
+    );
+
+    this.register(
+      this.permissionPointDefineForm.submittedEvent.on(() => {
+        this.permissionPointDefineTable.load();
+      })
+    );
+  }
+
+  setList(list: MenuNodeItem[]): void {
+    let rootMenu: MenuNodeItem[] = [];
+
+    for (const node of list) {
+      if (!node.pid) {
+        rootMenu.push(node);
+      }
+
+      for (const item of list) {
+        if (item.pid === node.id) {
+          node.children.push(item);
+        }
+      }
+    }
+
+    super.setList(rootMenu);
+  }
+
+  formatItem(item: MenuResult): MenuNodeItem {
+    return {
+      ...super.formatItem(item),
+      children: [],
+    };
+  }
+
+  async toPermissionPointDefine(item: MenuNodeItem) {
+    this.permissionPointDefineConditionGroup.clear();
+
+    this.permissionPointDefineConditionGroup.addCondition(
+      "menuId",
+      "=",
+      item.id
+    );
+
+    this.currentMenuId = item.id;
+
+    await this.permissionPointDefineTable.load();
+  }
+}

package/src/dataview/menu/index.ts

@@ -0,0 +1,4 @@
+export * from "./MenuForm";
+export * from "./MenuTable";
+export * from "./MenuTree";
+export * from "./permission-point";

package/src/dataview/menu/permission-point/PermissionPointDefineForm.ts

@@ -0,0 +1,28 @@
+import { DataForm, DataFormOptions, FormColumn } from "@maketribe/dm";
+
+export type PermissionPointDefine = {
+  id: string;
+  menuId: string;
+  key: string;
+  name: string;
+};
+
+export class PermissionPointDefineForm extends DataForm<PermissionPointDefine> {
+  constructor(options: DataFormOptions = {}) {
+    super({ name: "ms-permission-point-def", ...options });
+  }
+
+  protected async initialize() {
+    this.setColumns([
+      new FormColumn({ name: "id", label: "编号" }),
+      new FormColumn({
+        name: "menuId",
+        label: "所属菜单",
+        visible: false,
+        required: true,
+      }),
+      new FormColumn({ name: "key", label: "权限键", required: true }),
+      new FormColumn({ name: "name", label: "权限描述", required: true }),
+    ]);
+  }
+}

package/src/dataview/menu/permission-point/PermissionPointDefineTable.ts

@@ -0,0 +1,30 @@
+import {
+  DataTable,
+  DataTableOptions,
+  FilterColumn,
+  TableActionColumn,
+  TableColumn,
+} from "@maketribe/dm";
+import { PermissionPointDefine } from "./PermissionPointDefineForm";
+
+export class PermissionPointDefineTable<
+  T extends PermissionPointDefine = PermissionPointDefine
+> extends DataTable<PermissionPointDefine, T> {
+  constructor(options: DataTableOptions = {}) {
+    super({ name: "ms-permission-point-def", ...options });
+  }
+
+  protected async initialize() {
+    this.dataFilter.setColumns([
+      new FilterColumn({ name: "key", label: "权限键" }),
+      new FilterColumn({ name: "name", label: "权限描述" }),
+    ]);
+
+    this.setColumns([
+      new TableColumn({ name: "id", label: "编号", visible: false }),
+      new TableColumn({ name: "key", label: "权限键" }),
+      new TableColumn({ name: "name", label: "权限描述" }),
+      new TableActionColumn(),
+    ]);
+  }
+}

package/src/dataview/menu/permission-point/index.ts

@@ -0,0 +1,2 @@
+export * from "./PermissionPointDefineForm";
+export * from "./PermissionPointDefineTable";

package/src/dataview/role/RoleForm.ts

@@ -0,0 +1,36 @@
+import {
+  DataForm,
+  DataFormOptions,
+  FormColumn,
+  defineDataForm,
+} from "@maketribe/dm";
+
+export type Role = {
+  id: string;
+  name: string;
+  desc: string;
+};
+
+export class RoleForm extends DataForm<Role> {
+  constructor(options: DataFormOptions = {}) {
+    super({ name: "ms-role", ...options });
+  }
+
+  protected async initialize() {
+    this.setColumns([
+      new FormColumn({ name: "id", label: "编号" }),
+      new FormColumn({ name: "name", label: "角色名", required: true }),
+      new FormColumn({ name: "desc", label: "角色描述", required: true }),
+    ]);
+  }
+
+  formatItem(item: Role): Role {
+    return {
+      id: item.id,
+      name: item.name || "",
+      desc: item.desc || "",
+    };
+  }
+}
+
+defineDataForm(RoleForm);