@maketribe/ms-app 3.0.0

package/src/dataview/role/RolePermissionConfigTable.ts

@@ -0,0 +1,471 @@
+import { Group } from "@maketribe/request";
+import { DataTableOptions, WhereFilter } from "@maketribe/dm";
+import {
+  MenuItem,
+  MenuResult,
+  MenuTable,
+  PermissionPointDefine,
+  PermissionPointDefineTable,
+} from "../menu";
+import { Role } from "./RoleForm";
+import { RoleRouteTable } from "./role-route";
+import { RolePermissionPointTable } from "./role-permission-point";
+import { Route, RouteTable } from "../route";
+import { postTraverse } from "@maketribe/utils";
+
+export type RolePermissionPointDefine = PermissionPointDefine & {
+  originalSelected: boolean;
+  selected: boolean;
+};
+
+export type RoleMenuNode = {
+  permissionPoints: RolePermissionPointDefine[];
+  routes: Route[];
+  originalSelected: boolean;
+  selected: boolean;
+  indeterminate: boolean;
+  children: RoleMenuNode[];
+} & MenuItem;
+
+export class RolePermissionConfigTable extends MenuTable<RoleMenuNode> {
+  roleRouteTable: RoleRouteTable;
+  roleRouteConditionGroup: Group;
+
+  rolePermissionPointTable: RolePermissionPointTable;
+  rolePermissionPointConditionGroup: Group;
+
+  permissionPointDefineTable: PermissionPointDefineTable<RolePermissionPointDefine>;
+  routeDefineTable: RouteTable;
+
+  initd: boolean = false;
+  initing: boolean = false;
+
+  rootRoleMenuNodes: RoleMenuNode[] = [];
+
+  currentRoleId: Role["id"] = "";
+
+  constructor(options: Omit<DataTableOptions, "name"> = {}) {
+    super({
+      ...options,
+      interfaceURL: {
+        list: "/api/dv/ms-menu/allList",
+        ...options.interfaceURL,
+      },
+    });
+
+    this.roleRouteTable = new RoleRouteTable();
+    this.roleRouteTable.dataFilter.setReady();
+
+    this.rolePermissionPointTable = new RolePermissionPointTable();
+    this.rolePermissionPointTable.dataFilter.setReady();
+
+    this.roleRouteConditionGroup = new Group();
+    this.rolePermissionPointConditionGroup = new Group();
+
+    (this.roleRouteTable.dataFilter as WhereFilter)
+      .getWhere()
+      .addGroup(this.roleRouteConditionGroup);
+
+    (this.rolePermissionPointTable.dataFilter as WhereFilter)
+      .getWhere()
+      .addGroup(this.rolePermissionPointConditionGroup);
+
+    const permissionPointDefineTable =
+      new (class extends PermissionPointDefineTable<RolePermissionPointDefine> {
+        formatItem(item: PermissionPointDefine): RolePermissionPointDefine {
+          return {
+            ...super.formatItem(item),
+            originalSelected: false,
+            selected: false,
+          };
+        }
+      })({
+        interfaceURL: { list: "/api/dv/ms-permission-point-def/allList" },
+      });
+    permissionPointDefineTable.dataFilter.setReady();
+    this.permissionPointDefineTable = permissionPointDefineTable;
+
+    const routeDefineTable = new RouteTable({
+      interfaceURL: { list: "/api/dv/ms-route/allList" },
+    });
+    routeDefineTable.dataFilter.setReady();
+    this.routeDefineTable = routeDefineTable;
+
+    this.dataFilter.setReady();
+  }
+
+  protected async initialize() {
+    [
+      this.roleRouteTable.getLoadingManager(),
+      this.rolePermissionPointTable.getLoadingManager(),
+      this.permissionPointDefineTable.getLoadingManager(),
+      this.routeDefineTable.getLoadingManager(),
+    ].forEach((loadingManager) => {
+      this.getLoadingManager().addLoadingManager(loadingManager);
+    });
+
+    await this.roleRouteTable.init();
+    await this.rolePermissionPointTable.init();
+
+    await this.permissionPointDefineTable.init();
+    await this.routeDefineTable.init();
+
+    await super.init();
+  }
+
+  formatItem(item: MenuResult): RoleMenuNode {
+    const permissionPointDefines = this.permissionPointDefineTable.getList();
+
+    const routeDefines = this.routeDefineTable.getList();
+
+    return {
+      ...super.formatItem(item),
+      routes: routeDefines.filter(
+        (routeDefine) => routeDefine.menuId === item.id
+      ) as RoleMenuNode["routes"],
+      permissionPoints: permissionPointDefines.filter(
+        (permissionPointDefine) => permissionPointDefine.menuId === item.id
+      ),
+      originalSelected: false,
+      selected: false,
+      indeterminate: false,
+      children: [],
+    };
+  }
+
+  setList(list: RoleMenuNode[]): void {
+    super.setList(list);
+
+    const rootRoleMenuNodes = [];
+
+    for (const roleMenuNode of list) {
+      if (!roleMenuNode.pid) {
+        rootRoleMenuNodes.push(roleMenuNode);
+      }
+
+      for (const item of list) {
+        if (item.pid === roleMenuNode.id) {
+          roleMenuNode.children.push(item);
+        }
+      }
+    }
+
+    this.rootRoleMenuNodes = this.calculateNotEmptyNode(rootRoleMenuNodes);
+  }
+
+  calculateNotEmptyNode(list: RoleMenuNode[]) {
+    const result = list.filter(
+      (item) => item.routes.length || item.children.length
+    );
+
+    let nodes = [...result];
+
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+
+      node.children = node.children.filter(
+        (item) => item.routes.length || item.children.length
+      );
+
+      nodes = nodes.concat(node.children);
+    }
+
+    return result;
+  }
+
+  getRootRoleMenuNodes() {
+    return this.rootRoleMenuNodes;
+  }
+
+  async load(params?: Record<string, any>) {
+    await Promise.all([
+      this.permissionPointDefineTable.load(),
+      this.routeDefineTable.load(),
+    ]);
+
+    const loadResult = await super.load(params);
+
+    if (loadResult.data.code === 200) {
+      this.restoreDefaultSelect();
+    }
+
+    return loadResult;
+  }
+
+  async selectRolePermission(roleId: Role["id"]) {
+    this.currentRoleId = roleId;
+
+    this.roleRouteConditionGroup.clear();
+    this.rolePermissionPointConditionGroup.clear();
+
+    this.roleRouteConditionGroup.addCondition("roleId", "=", roleId);
+    this.rolePermissionPointConditionGroup.addCondition("roleId", "=", roleId);
+
+    const [roleRouteTableResult, rolePermissionPointTableResult] =
+      await Promise.all([
+        this.roleRouteTable.load(),
+        this.rolePermissionPointTable.load(),
+      ]);
+
+    if (roleRouteTableResult.data.code !== 200) {
+      return;
+    }
+
+    if (rolePermissionPointTableResult.data.code !== 200) {
+      return;
+    }
+
+    this.restoreDefaultSelect();
+  }
+
+  clearSelected() {
+    for (const roleMenu of this.getList()) {
+      roleMenu.indeterminate = roleMenu.selected = false;
+    }
+
+    for (const rolePermissionPoint of this.permissionPointDefineTable.getList()) {
+      rolePermissionPoint.selected = false;
+    }
+  }
+
+  protected calcSelect() {
+    postTraverse<RoleMenuNode>(this.getRootRoleMenuNodes(), (roleMenu) => {
+      // 如果自叶级菜单
+      if (roleMenu.children.length === 0) {
+        // 选中的权限点
+        const selectedPermissionPoints = roleMenu.permissionPoints.filter(
+          (permissionPointDefine) => permissionPointDefine.selected
+        );
+
+        // 如果有权限点选择就赋予路由权限
+        roleMenu.selected =
+          roleMenu.permissionPoints.length === 0
+            ? roleMenu.selected
+            : !!selectedPermissionPoints.length || roleMenu.selected;
+        // 如果不是所有权限点都激活就标识是部分选择
+        roleMenu.indeterminate =
+          roleMenu.permissionPoints.length === 0 ||
+          selectedPermissionPoints.length === 0
+            ? false
+            : selectedPermissionPoints.length <
+              roleMenu.permissionPoints.length;
+
+        return;
+      }
+
+      // 选中的子菜单
+      const selectedChildren = roleMenu.children.filter(
+        (item) => item.selected
+      );
+      // 如果有子菜单选中就路由权限
+      roleMenu.selected = !!selectedChildren.length;
+      // 如果不是所有子菜单都激活就标识是部分选择
+      roleMenu.indeterminate =
+        selectedChildren.length === 0
+          ? false
+          : selectedChildren.length < roleMenu.children.length;
+    });
+  }
+
+  restoreDefaultSelect() {
+    this.clearSelected();
+
+    const permissionPointDefineList = this.permissionPointDefineTable.getList();
+    const rolePermissionList = this.rolePermissionPointTable.getList();
+
+    for (const permissionPointDefine of permissionPointDefineList) {
+      permissionPointDefine.originalSelected = permissionPointDefine.selected =
+        false;
+    }
+
+    if (permissionPointDefineList.length) {
+      for (const rolePermission of rolePermissionList) {
+        const permissionPointDefine = permissionPointDefineList.find(
+          (permissionPointDefine) =>
+            permissionPointDefine.id === rolePermission.permissionPointDefId
+        );
+
+        if (permissionPointDefine) {
+          permissionPointDefine.originalSelected =
+            permissionPointDefine.selected = true;
+        }
+      }
+    }
+
+    const menuList = this.getList();
+    const roleRouteList = this.roleRouteTable.getList();
+
+    for (const menu of menuList) {
+      menu.originalSelected = menu.selected = false;
+    }
+
+    if (menuList.length) {
+      for (const roleRoute of roleRouteList) {
+        const menu = menuList.find((menu) =>
+          menu.routes.find(
+            (routeDefine) => routeDefine.id === roleRoute.routeId
+          )
+        );
+
+        if (menu) {
+          menu.originalSelected = menu.selected = true;
+        }
+      }
+    }
+
+    this.calcSelect();
+  }
+
+  toggleRoleMenu(
+    roleMenu: RoleMenuNode,
+    selected: boolean = !roleMenu.selected
+  ) {
+    postTraverse<RoleMenuNode>([roleMenu], (roleMenu) => {
+      // 如果自叶级菜单
+      if (roleMenu.children.length === 0) {
+        for (const permissionPointDefine of roleMenu.permissionPoints) {
+          permissionPointDefine.selected = selected;
+        }
+
+        roleMenu.selected = selected;
+        return;
+      }
+
+      roleMenu.selected = selected;
+    });
+
+    this.calcSelect();
+  }
+
+  toggleRolePermissionPoint(
+    permissionPointDefine: RolePermissionPointDefine,
+    selected: boolean = !permissionPointDefine.selected
+  ) {
+    permissionPointDefine.selected = selected;
+
+    this.calcSelect();
+  }
+
+  async submitPermission() {
+    const permissionPointDefines = this.permissionPointDefineTable.getList();
+    const removePermissionPointDefines = permissionPointDefines.filter(
+      (permissionPointDefine) =>
+        permissionPointDefine.originalSelected &&
+        !permissionPointDefine.selected
+    );
+
+    const addPermissionPointDefine = permissionPointDefines.filter(
+      (permissionPointDefine) =>
+        !permissionPointDefine.originalSelected &&
+        permissionPointDefine.selected
+    );
+
+    const menus = this.getList();
+    const removeRoutes = menus
+      .filter((menu) => menu.originalSelected && !menu.selected)
+      .flatMap((menu) => menu.routes);
+    const addRoutes = menus
+      .filter((menu) => !menu.originalSelected && menu.selected)
+      .flatMap((menu) => menu.routes);
+
+    if (removePermissionPointDefines.length) {
+      const rolePermissionPoints = this.rolePermissionPointTable.getList();
+      const deleteRolePermissionPointResult =
+        await this.rolePermissionPointTable.deleteRecords(
+          removePermissionPointDefines
+            .map(
+              (permissionPointDefine) =>
+                rolePermissionPoints.find(
+                  (rolePermissionPoint) =>
+                    rolePermissionPoint.permissionPointDefId ===
+                    permissionPointDefine.id
+                )!
+            )
+            .filter(Boolean)
+        );
+
+      if (deleteRolePermissionPointResult.data.code !== 200) {
+        return deleteRolePermissionPointResult;
+      }
+    }
+
+    if (removeRoutes.length) {
+      const roleRoutes = this.roleRouteTable.getList();
+      const deleteRoleRouteResult = await this.roleRouteTable.deleteRecords(
+        removeRoutes
+          .map(
+            (route) =>
+              roleRoutes.find((roleRoute) => roleRoute.routeId === route.id)!
+          )
+          .filter(Boolean)
+      );
+
+      if (deleteRoleRouteResult.data.code !== 200) {
+        return deleteRoleRouteResult;
+      }
+    }
+
+    if (addPermissionPointDefine.length) {
+      const addRolePermissionPointResult =
+        await this.rolePermissionPointTable.addRecords(
+          addPermissionPointDefine.map((item) => ({
+            id: "",
+            roleId: this.currentRoleId,
+            permissionPointDefId: item.id,
+          }))
+        );
+
+      if (addRolePermissionPointResult.data.code !== 200) {
+        return addRolePermissionPointResult;
+      }
+    }
+
+    if (addRoutes.length) {
+      const addRoleRouteResult = await this.roleRouteTable.addRecords(
+        addRoutes.map((item) => ({
+          id: "",
+          roleId: this.currentRoleId,
+          routeId: item.id,
+        }))
+      );
+
+      if (addRoleRouteResult.data.code !== 200) {
+        return addRoleRouteResult;
+      }
+    }
+
+    await this.selectRolePermission(this.currentRoleId);
+  }
+
+  /**
+   * 是否发生变更
+   */
+  hasChange() {
+    const permissionPointDefines = this.permissionPointDefineTable.getList();
+    const removePermissionPointDefines = permissionPointDefines.filter(
+      (permissionPointDefine) =>
+        permissionPointDefine.originalSelected &&
+        !permissionPointDefine.selected
+    );
+
+    const addPermissionPointDefine = permissionPointDefines.filter(
+      (permissionPointDefine) =>
+        !permissionPointDefine.originalSelected &&
+        permissionPointDefine.selected
+    );
+
+    const menus = this.getList();
+    const removeRoutes = menus
+      .filter((menu) => menu.originalSelected && !menu.selected)
+      .flatMap((menu) => menu.routes);
+    const addRoutes = menus
+      .filter((menu) => !menu.originalSelected && menu.selected)
+      .flatMap((menu) => menu.routes);
+    return !!(
+      removePermissionPointDefines.length ||
+      removeRoutes.length ||
+      addPermissionPointDefine.length ||
+      addRoutes.length
+    );
+  }
+}

package/src/dataview/role/RoleTable.ts

@@ -0,0 +1,68 @@
+import {
+  DataTable,
+  DataTableOptions,
+  TableColumn,
+  FilterColumn,
+  TableActionColumn,
+  ActionButton,
+  EditButton,
+  DeleteButton,
+  defineDataTable,
+} from "@maketribe/dm";
+import { Role } from "./RoleForm";
+import { Event } from "@maketribe/utils";
+
+export class RoleTable<
+  F extends Role = Role,
+  T extends Role = Role
+> extends DataTable<T, F> {
+  configRolePermissionEvent: Event<{ item: Role }> = new Event();
+
+  constructor(options: DataTableOptions = {}) {
+    super({ name: "ms-role", ...options });
+  }
+
+  protected async initialize() {
+    this.dataFilter.setColumns([
+      new FilterColumn({
+        name: "name",
+        label: "角色名",
+        componentInfo: "MKConditionInput",
+      }),
+      new FilterColumn({
+        name: "desc",
+        label: "角色描述",
+        componentInfo: "MKConditionInput",
+      }),
+    ]);
+
+    this.setColumns([
+      new TableColumn({ name: "id", label: "编号", visible: false }),
+      new TableColumn({ name: "name", label: "角色名" }),
+      new TableColumn({ name: "desc", label: "角色描述" }),
+      new TableActionColumn({
+        width: "160px",
+        buttons: [
+          new ActionButton({
+            label: "权限",
+            handler: (row: Role) => {
+              this.configRolePermissionEvent.emit({ item: row });
+            },
+          }),
+          new EditButton(),
+          new DeleteButton(),
+        ],
+      }),
+    ]);
+  }
+
+  formatItem(item: T): F {
+    return {
+      id: item.id,
+      name: item.name || "",
+      desc: item.desc || "",
+    } as F;
+  }
+}
+
+defineDataTable(RoleTable);

package/src/dataview/role/index.ts

@@ -0,0 +1,5 @@
+export * from "./RoleForm";
+export * from "./RoleTable";
+export * from "./role-permission-point";
+export * from "./role-route";
+export * from "./RolePermissionConfigTable";

package/src/dataview/role/role-permission-point/RolePermissionPointTable.ts

@@ -0,0 +1,27 @@
+import { DataTable, DataTableOptions, TableColumn } from "@maketribe/dm";
+
+export type RolePermissionPoint = {
+  id: string;
+  permissionPointDefId: string;
+  roleId: string;
+};
+
+export class RolePermissionPointTable extends DataTable<RolePermissionPoint> {
+  constructor(options: DataTableOptions = {}) {
+    super({
+      name: "ms-role-permission-point",
+      ...options,
+      interfaceURL: {
+        list: `/api/dv/ms-role-permission-point/allList`,
+      },
+    });
+  }
+
+  protected async initialize() {
+    this.setColumns([
+      new TableColumn({ name: "id", visible: false }),
+      new TableColumn({ name: "roleId" }),
+      new TableColumn({ name: "permissionPointDefId" }),
+    ]);
+  }
+}

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

@@ -0,0 +1 @@
+export * from "./RolePermissionPointTable";

package/src/dataview/role/role-route/RoleRouteTable.ts

@@ -0,0 +1,28 @@
+import { DataTable, DataTableOptions, TableColumn } from "@maketribe/dm";
+
+export type RoleRoute = {
+  id: string;
+  roleId: string;
+  routeId: string;
+};
+
+export class RoleRouteTable extends DataTable<RoleRoute> {
+  constructor(options: DataTableOptions = {}) {
+    super({
+      name: "ms-role-route",
+      ...options,
+
+      interfaceURL: {
+        list: `/api/dv/ms-role-route/allList`,
+      },
+    });
+  }
+
+  protected async initialize() {
+    this.setColumns([
+      new TableColumn({ name: "id", visible: false }),
+      new TableColumn({ name: "roleId" }),
+      new TableColumn({ name: "routeId" }),
+    ]);
+  }
+}

package/src/dataview/role/role-route/index.ts

@@ -0,0 +1 @@
+export * from "./RoleRouteTable";

package/src/dataview/route/RouteForm.ts

@@ -0,0 +1,92 @@
+import {
+  DataForm,
+  DataFormOptions,
+  FormColumn,
+  defineDataForm,
+} from "@maketribe/dm";
+import { RouteType } from "../../constants";
+import { MenuTable } from "../menu/MenuTable";
+
+export type RouteResult = {
+  id: string;
+  name: string;
+  title: string;
+  type: number;
+  menuId: string;
+  iconName: string;
+  path?: string;
+};
+
+export type Route = {
+  id: string;
+  name: string;
+  title: string;
+  type: RouteType;
+  menuId: string;
+  iconName: string;
+  path: string;
+};
+
+export class RouteForm extends DataForm<RouteResult, Route> {
+  constructor(options: DataFormOptions = {}) {
+    super({ name: "ms-route", ...options });
+  }
+
+  protected async initialize() {
+    this.setColumns([
+      new FormColumn({ name: "id", label: "编号" }),
+      new FormColumn({ name: "name", label: "路由名", required: true }),
+      new FormColumn({ name: "title", label: "路由描述", required: true }),
+      new FormColumn({
+        name: "menuId",
+        label: "所属菜单",
+        componentInfo: "MKFormDataTableSelect",
+        required: true,
+        componentProps: {
+          labelFieldName: "title",
+          dataTable: new MenuTable({ pageSize: 10 }),
+        },
+      }),
+      new FormColumn({
+        name: "iconName",
+        label: "图标",
+        componentInfo: "MKFormIconSelect",
+      }),
+      new FormColumn({ name: "path", label: "路径" }),
+      new FormColumn({
+        name: "type",
+        label: "路由类型",
+        defaultValue: "0",
+        componentInfo: "MKFormDataSelect",
+        required: true,
+        componentProps: {
+          options: [
+            { value: "0", label: "站内路由" },
+            { value: "1", label: "站外链接" },
+          ],
+        },
+      }),
+    ]);
+  }
+
+  formatSubmitData(data: any) {
+    return {
+      ...data,
+      iconName: data.iconName || null,
+    };
+  }
+
+  formatItem(item: RouteResult): Route {
+    return {
+      id: item.id,
+      name: item.name || "",
+      title: item.title || "",
+      type: [0, "0"].includes(item.type) ? RouteType.ROUTE : RouteType.LINK,
+      menuId: item.menuId,
+      iconName: item.iconName || "",
+      path: item.path || "",
+    };
+  }
+}
+
+defineDataForm(RouteForm);