@maketribe/ms-app 3.0.1 → 3.0.4

package/src/dataview/member/MemberTable.tsx

@@ -0,0 +1,242 @@
+import {
+  TableColumn,
+  DataTable,
+  DataTableOptions,
+  FilterColumn,
+  TableActionColumn,
+  ActionButton,
+  DeleteButton,
+  EditButton,
+  Messager,
+  Dialoger,
+  FormColumn,
+} from "@maketribe/dm";
+import { Event } from "@maketribe/utils";
+import { defineDataTable } from "../../define-data-table";
+import { Member, MemberForm, MemberResult } from "./MemberForm";
+
+export type MemberTableItem = Omit<Member, "password" | "confirmPassword">;
+
+export class MemberTable extends DataTable<MemberResult, MemberTableItem> {
+  activeMemberForm: MemberForm;
+
+  activeMemberEvent: Event<MemberTableItem> = this.register(new Event());
+
+  constructor(options: DataTableOptions = {}) {
+    super({ name: "ms-member", ...options });
+
+    this.activeMemberForm = new MemberForm();
+  }
+
+  protected async initialize() {
+    await this.initActiveMemberForm();
+
+    this.dataFilter.setColumns([
+      new FilterColumn({
+        name: "name",
+        label: "姓名",
+        componentInfo: "MKConditionInput",
+      }),
+      new FilterColumn({
+        name: "wechatNo",
+        label: "微信号",
+        componentInfo: "MKConditionInput",
+      }),
+      new FilterColumn({
+        name: "nickName",
+        label: "昵称",
+        componentInfo: "MKConditionInput",
+      }),
+      new FilterColumn({
+        name: "email",
+        label: "邮箱",
+        componentInfo: "MKConditionInput",
+      }),
+      new FilterColumn({
+        name: "phone",
+        label: "手机号",
+        componentInfo: "MKConditionInput",
+      }),
+      new FilterColumn({
+        name: "account",
+        label: "账号",
+        componentInfo: "MKConditionInput",
+      }),
+    ]);
+
+    this.setColumns([
+      new TableColumn({
+        name: "id",
+        label: "编号",
+        width: "190px",
+        visible: false,
+      }),
+      new TableColumn({ name: "name", label: "姓名", minWidth: "150px" }),
+      new TableColumn({ name: "nickName", label: "昵称", minWidth: "150px" }),
+      new TableColumn({
+        name: "avatar",
+        label: "头像",
+        componentInfo: "MKColumnImage",
+        width: "80px",
+      }),
+      new TableColumn({ name: "account", label: "账号", minWidth: "150px" }),
+      new TableColumn({ name: "email", label: "邮箱", minWidth: "200px" }),
+      new TableColumn({ name: "phone", label: "手机号", minWidth: "120px" }),
+      new TableColumn({ name: "wechatNo", label: "微信号", minWidth: "140px" }),
+      new TableColumn({
+        name: "valid",
+        label: "微信号",
+        minWidth: "140px",
+        visible: false,
+      }),
+      new TableActionColumn({
+        width: "200px",
+        buttons: [
+          new ActionButton({
+            label: "激活用户",
+            handler: async (row) => {
+              this.activeMemberEvent.emit(row);
+            },
+            predicate: (member: MemberTableItem) => member.valid === 0,
+          }),
+          new ActionButton({
+            label: "重置密码",
+            handler: async (row) => {
+              const isConfirm = await Dialoger.instance.confirm({
+                title: "重置密码",
+                message: "是否重置密码",
+                type: "warning",
+                cancelButtonText: "取消",
+                confirmButtonText: "确定",
+              });
+              if (!isConfirm) {
+                return;
+              }
+              this.loadingManager.startLoading();
+              const result = await this.httpRequest.post(
+                `/api/dv/ms-member/${row.id}/password/reset`
+              );
+              this.loadingManager.completeLoading();
+              if (result.data.code !== 200) {
+                Messager.instance.error({
+                  message: result.data.msg || "重置密码失败",
+                });
+                return;
+              }
+
+              const res = await Dialoger.instance.confirm({
+                title: "重置密码成功",
+                message: (
+                  <p>
+                    <span>你的新密码为{result.data.data}</span>
+                  </p>
+                ),
+                type: "warning",
+                cancelButtonText: "取消",
+                confirmButtonText: "复制",
+              });
+              if (!res) {
+                return;
+              }
+
+              navigator.clipboard.writeText(result.data.data);
+              Messager.instance.success({ message: "复制成功" });
+            },
+            predicate: (member: MemberTableItem) => member.valid === 1,
+          }),
+          new EditButton({
+            predicate: (member: MemberTableItem) => member.valid === 1,
+          }),
+          new DeleteButton(),
+        ],
+      }),
+    ]);
+  }
+
+  protected async initActiveMemberForm() {
+    const activeMemberForm = this.activeMemberForm;
+
+    await activeMemberForm.init();
+
+    activeMemberForm.setColumns([
+      activeMemberForm.getColumn("id")!,
+      new FormColumn({
+        name: "approveResult",
+        label: "是否通过",
+        defaultValue: "0",
+        componentInfo: "MKFormRadioBox",
+        required: true,
+        componentProps: {
+          options: [
+            { label: "通过", value: "1" },
+            { label: "不通过", value: "0" },
+          ],
+        },
+      }),
+      activeMemberForm.getColumn("roles")!,
+      activeMemberForm.getColumn("depts")!,
+      activeMemberForm.getColumn("memo")!,
+    ]);
+  }
+
+  async approveMember() {
+    try {
+      this.activeMemberForm.getLoadingManager().startLoading();
+      const result = await this.activeMemberForm.httpRequest?.post(
+        "/api/dv/ms-member/apply/account/approve",
+        {
+          ...this.activeMemberForm.formatSubmitData(this.activeMemberForm.data),
+        }
+      );
+      this.activeMemberForm.getLoadingManager().completeLoading();
+
+      if (result?.data.code != 200) {
+        Messager.instance.error(result?.data.msg || "请求失败");
+        return;
+      }
+
+      Messager.instance.success({
+        message: "激活通过，密码已发送到邮箱",
+      });
+
+      this.load();
+    } catch (e) {
+      console.error(e);
+      Messager.instance.error({ message: "网络异常" });
+    }
+  }
+
+  formatItem(item: MemberResult): MemberTableItem {
+    let avatar: string | null;
+    try {
+      avatar = item.avatar ? new URL(item.avatar).toString() : null;
+    } catch (e) {
+      avatar = null;
+    }
+
+    return {
+      id: item.id,
+      name: item.name || "",
+      wechatNo: item.wechatNo || "",
+      nickName: item.nickName || "",
+      email: item.email || "",
+      phone: item.phone || "",
+      account: item.account || "",
+      avatar,
+      roles: item.roles?.map((role) => ({
+        id: role.id,
+        name: role.name || "",
+        desc: role.desc || "",
+      })),
+      depts: item.depts?.map((department) => ({
+        id: department.id,
+        name: department.name || "",
+        // memberID: department.memberID || null,
+        pid: department.pid || null,
+      })),
+      valid: item.valid,
+    };
+  }
+}
+
+defineDataTable(MemberTable);

package/src/dataview/member/index.ts

@@ -0,0 +1,2 @@
+export * from "./MemberForm";
+export * from "./MemberTable";

package/src/dataview/member/member-role/MemberRoleTable.ts

@@ -0,0 +1,21 @@
+import { DataFormOptions, DataTable, TableColumn } from "@maketribe/dm";
+
+export type MemberRole = {
+  id: string;
+  memberId: string;
+  roleId: string;
+};
+
+export class MemberRoleTable extends DataTable {
+  constructor(options: DataFormOptions = {}) {
+    super({ name: "ms-member-role", ...options });
+  }
+
+  protected async initialize() {
+    this.setColumns([
+      new TableColumn({ name: "id", label: "编号", visible: false }),
+      new TableColumn({ name: "memberId", label: "成员ID" }),
+      new TableColumn({ name: "roleId", label: "角色ID" }),
+    ]);
+  }
+}

package/src/dataview/menu/MenuForm.ts

@@ -0,0 +1,164 @@
+import {
+  DataForm,
+  DataFormOptions,
+  DataFormType,
+  FormColumn,
+  FormDetailColumn,
+  isWhereFilter,
+} from "@maketribe/dm";
+import { defineDataForm } from "../../define-data-form";
+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;
+  type: number;
+  routes: RouteResult[];
+  permissionPoints: PermissionPointDefine[];
+};
+
+export type MenuItem = {
+  id: string;
+  title: string;
+  iconName: string;
+  pid: string;
+  routeId: string;
+  sort: string;
+  type: number;
+  routes: RouteResult[];
+  permissionPoints: PermissionPointDefine[];
+};
+
+export class MenuForm extends DataForm<MenuResult, MenuItem> {
+  constructor(options: DataFormOptions = {}) {
+    super({ name: "ms-menu", ...options });
+  }
+
+  protected async initialize() {
+    const menuTable = this.register(new MenuTable({ pageSize: 10 }));
+
+    if (isWhereFilter(menuTable.dataFilter)) {
+      menuTable.dataFilter.getDefaultGroup().addCondition("type", "=", 1);
+    }
+
+    this.setColumns([
+      new FormColumn({ name: "id", label: "编号" }),
+      new FormColumn({ name: "title", label: "菜单描述", required: true }),
+      new FormColumn({
+        name: "iconName",
+        label: "图标",
+        componentInfo: "MKFormIconSelect",
+        required: true,
+      }),
+      new FormColumn({
+        name: "type",
+        label: "菜单类型",
+        componentInfo: "MKFormDataSelect",
+        defaultValue: 2,
+        required: true,
+        componentProps: {
+          options: [
+            { value: 1, label: "菜单组" },
+            { value: 2, label: "菜单" },
+          ],
+        },
+      }),
+      new FormColumn({
+        name: "routeId",
+        label: "默认路由",
+        componentInfo: "MKFormDataTableSelect",
+        componentProps: {
+          labelFieldName: "title",
+          dataTable: this.register(new RouteTable({ pageSize: 10 })),
+        },
+      }),
+      new FormColumn({
+        name: "pid",
+        label: "父菜单",
+        componentInfo: "MKFormDataTableSelect",
+        componentProps: {
+          labelFieldName: "title",
+          dataTable: menuTable,
+        },
+      }),
+      new FormColumn({ name: "sort", label: "排序", defaultValue: "0" }),
+      new FormDetailColumn({
+        name: "routes",
+        label: "该菜单所属路由定义",
+        associationFieldName: "menuId",
+        detailForm: this.register(new RouteForm()),
+        detailTable: this.register(new RouteTable()),
+      }),
+      new FormDetailColumn({
+        name: "permissionPoints",
+        label: "该菜单所属权限定义",
+        associationFieldName: "menuId",
+        detailForm: this.register(new PermissionPointDefineForm()),
+        detailTable: this.register(new PermissionPointDefineTable()),
+      }),
+    ]);
+
+    this.register(
+      this.formItemValueChangeEvent.on(({ formItem }) => {
+        if (formItem.name === "type") {
+          this.getColumn("routes")!.visible = this.data?.type !== 1;
+          this.getColumn("permissionPoints")!.visible = this.data?.type !== 1;
+        }
+      })
+    );
+
+    this.register(
+      this.dataChangeEvent.on(({}) => {
+        this.getColumn("routes")!.visible = this.data?.type !== 1;
+        this.getColumn("permissionPoints")!.visible = this.data?.type !== 1;
+      })
+    );
+
+    this.register(
+      this.dataFormTypeChangeEvent.on(({ dataFormType }) => {
+        this.getColumn("type")!.disabled = dataFormType !== DataFormType.ADD;
+      })
+    );
+  }
+
+  formatSubmitData(data: any) {
+    const permissionPoints = data.type === 2 ? data.permissionPoints : [];
+    const routes = data.type === 2 ? data.routes : [];
+
+    return {
+      ...data,
+      iconName: data.iconName || null,
+      pid: data.pid || null,
+      routeId: data.routeId || null,
+      permissionPoints,
+      routes,
+    };
+  }
+
+  formatItem(item: MenuResult): MenuItem {
+    return {
+      id: item.id,
+      title: item.title || "",
+      iconName: item.iconName || "",
+      pid: item.pid || "",
+      routeId: item.routeId,
+      type: item.type,
+      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,
+} from "@maketribe/dm";
+import { defineDataTable } from "../../define-data-table";
+import type { 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";