@maketribe/ms-app 3.0.6 → 3.0.8

package/src/dataview/region/RegionTable.ts

@@ -0,0 +1,64 @@
+import {
+  DataTable,
+  DataTableOptions,
+  FilterColumn,
+  TableActionColumn,
+  TableColumn,
+} from "@maketribe/dm";
+import { defineDataTable } from "../../define-data-table";
+import { RegionLevel } from "../../constants";
+import { Region } from "./RegionForm";
+
+export class RegionTable extends DataTable<Region> {
+  constructor(options: DataTableOptions = {}) {
+    super({ name: "ms-region", ...options });
+  }
+
+  protected async initialize(): Promise<void> {
+    await super.initialize();
+
+    this.dataFilter.setColumns([
+      new FilterColumn({ name: "code", label: "地区编号" }),
+      new FilterColumn({ name: "desc", label: "描述" }),
+      new FilterColumn({ name: "postalCode", label: "邮政编码" }),
+      new FilterColumn({ name: "telAreaCode", label: "电话区号" }),
+    ]);
+
+    this.setColumns([
+      new TableColumn({ name: "code", label: "地区编号", width: "120px" }),
+      new TableColumn({ name: "desc", label: "描述", minWidth: "200px" }),
+      new TableColumn({
+        name: "level",
+        label: "层级",
+        componentInfo: "MKColumnObjectMappingText",
+        componentProps: {
+          mapping: {
+            [RegionLevel.Province]: "省份",
+            [RegionLevel.City]: "城市",
+            [RegionLevel.District]: "地区",
+            [RegionLevel.Town]: "城镇",
+          },
+        },
+        width: "80px",
+      }),
+      new TableColumn({
+        name: "postalCode",
+        label: "邮政编码",
+        width: "100px",
+      }),
+      new TableColumn({
+        name: "telAreaCode",
+        label: "电话区号",
+        width: "100px",
+      }),
+      new TableColumn({ name: "firstchar", label: "首拼", width: "80px" }),
+      new TableColumn({ name: "jianpin", label: "简拼", width: "150px" }),
+      new TableColumn({ name: "pinyin", label: "拼音", width: "220px" }),
+      new TableActionColumn(),
+    ]);
+  }
+}
+
+(window as any).RegionTable = RegionTable;
+
+defineDataTable(RegionTable);

package/src/dataview/region/index.ts

@@ -0,0 +1,2 @@
+export * from "./RegionForm";
+export * from "./RegionTable";

package/src/dataview/role/RoleForm.ts

@@ -13,6 +13,8 @@ export class RoleForm extends DataForm<Role> {
   }
 
   protected async initialize() {
+    await super.initialize();
+
     this.setColumns([
       new FormColumn({ name: "id", label: "编号" }),
       new FormColumn({ name: "name", label: "角色名", required: true }),

package/src/dataview/role/RolePermissionConfigTable.ts

@@ -96,6 +96,8 @@ export class RolePermissionConfigTable extends MenuTable<RoleMenuNode> {
   }
 
   protected async initialize() {
+    await super.initialize();
+
     [
       this.roleRouteTable.getLoadingManager(),
       this.rolePermissionPointTable.getLoadingManager(),
@@ -374,7 +376,7 @@ export class RolePermissionConfigTable extends MenuTable<RoleMenuNode> {
     if (removePermissionPointDefines.length) {
       const rolePermissionPoints = this.rolePermissionPointTable.getList();
       const deleteRolePermissionPointResult =
-        await this.rolePermissionPointTable.deleteRecords(
+        await this.rolePermissionPointTable.batchDelete(
           removePermissionPointDefines
             .map(
               (permissionPointDefine) =>
@@ -394,7 +396,7 @@ export class RolePermissionConfigTable extends MenuTable<RoleMenuNode> {
 
     if (removeRoutes.length) {
       const roleRoutes = this.roleRouteTable.getList();
-      const deleteRoleRouteResult = await this.roleRouteTable.deleteRecords(
+      const deleteRoleRouteResult = await this.roleRouteTable.batchDelete(
         removeRoutes
           .map(
             (route) =>
@@ -410,7 +412,7 @@ export class RolePermissionConfigTable extends MenuTable<RoleMenuNode> {
 
     if (addPermissionPointDefine.length) {
       const addRolePermissionPointResult =
-        await this.rolePermissionPointTable.addRecords(
+        await this.rolePermissionPointTable.batchAdd(
           addPermissionPointDefine.map((item) => ({
             id: "",
             roleId: this.currentRoleId,
@@ -424,7 +426,7 @@ export class RolePermissionConfigTable extends MenuTable<RoleMenuNode> {
     }
 
     if (addRoutes.length) {
-      const addRoleRouteResult = await this.roleRouteTable.addRecords(
+      const addRoleRouteResult = await this.roleRouteTable.batchAdd(
         addRoutes.map((item) => ({
           id: "",
           roleId: this.currentRoleId,

package/src/dataview/role/RoleTable.ts

@@ -23,6 +23,8 @@ export class RoleTable<
   }
 
   protected async initialize() {
+    await super.initialize();
+
     this.dataFilter.setColumns([
       new FilterColumn({
         name: "name",

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

@@ -18,6 +18,8 @@ export class RolePermissionPointTable extends DataTable<RolePermissionPoint> {
   }
 
   protected async initialize() {
+    await super.initialize();
+
     this.setColumns([
       new TableColumn({ name: "id", visible: false }),
       new TableColumn({ name: "roleId" }),

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

@@ -19,6 +19,8 @@ export class RoleRouteTable extends DataTable<RoleRoute> {
   }
 
   protected async initialize() {
+    await super.initialize();
+
     this.setColumns([
       new TableColumn({ name: "id", visible: false }),
       new TableColumn({ name: "roleId" }),

package/src/dataview/route/RouteForm.ts

@@ -29,7 +29,8 @@ export class RouteForm extends DataForm<RouteResult, Route> {
   }
 
   protected async initialize() {
-    (window as any).a = this;
+    await super.initialize();
+
     this.setColumns([
       new FormColumn({ name: "id", label: "编号" }),
       new FormColumn({ name: "name", label: "路由名", required: true }),

package/src/dataview/route/RouteTable.ts

@@ -15,6 +15,8 @@ export class RouteTable extends DataTable<RouteResult, Route> {
   }
 
   protected async initialize() {
+    await super.initialize();
+
     this.dataFilter.setColumns([
       new FilterColumn({
         name: "name",

package/src/define-data-tree.ts

@@ -0,0 +1,12 @@
+import { DataTreeClass, DataModelDefines } from "./core";
+
+export const defineDataTree = <T extends DataTreeClass>(
+  DataTreeClass: T
+): T => {
+  DataModelDefines.instance.registerDataTreeDefine(
+    new DataTreeClass({}).name,
+    DataTreeClass
+  );
+
+  return DataTreeClass;
+};

package/src/index.ts

@@ -16,3 +16,4 @@ export const version = installer.version;
 export * from "./init-application";
 export * from "./define-data-table";
 export * from "./define-data-form";
+export * from "./define-data-tree";

package/src/installer.ts

@@ -9,8 +9,6 @@ import {
   MKDataFormPage,
   MKDataTable,
   MKDataTablePage,
-  MKDataTree,
-  MKDataTreePage,
   MKImageView,
   MKSvgIcon,
   MKVideoView,
@@ -35,8 +33,6 @@ const components: Plugin[] = [
   MKDataFormPage,
   MKDataTable,
   MKDataTablePage,
-  MKDataTree,
-  MKDataTreePage,
   MKImageView,
   MKSvgIcon,
   MKVideoView,

package/src/layouts/components/bar/index.tsx

@@ -0,0 +1,97 @@
+import { computed, defineComponent, unref } from "vue";
+import { MKSvgIcon } from "../../../components";
+import { MSAppClient, MenuNode } from "../../../core";
+import { MenuType } from "../../../constants";
+
+export const MKBar = defineComponent({
+  name: "MKBar",
+  props: {
+    barItem: {
+      type: MenuNode,
+    },
+  },
+  setup(props) {
+    const msAppClient = MSAppClient.instance!;
+    const userSession = msAppClient.userSession!;
+    const menu = userSession.menu;
+    const router = userSession.router;
+
+    const currentBarItem = computed(() => props.barItem);
+
+    const handleBarItemClick = (barItem: MenuNode) => {
+      let target: MenuNode | null = barItem;
+
+      if (barItem.children.length) {
+        target = menu.getFirstLeafMenuNode(barItem.children);
+      }
+
+      if (!target) {
+        return;
+      }
+
+      if (target?.route) {
+        router.changeRoute({ name: target.route.name });
+      }
+    };
+
+    return () => {
+      const barItems = menu.rootMenus
+        .filter((rootMenu) => rootMenu.type !== "3")
+        .map((rootMenu) => (
+          <div
+            class={[
+              "mk-bar__item",
+              rootMenu.children.length ? "has-children" : "",
+              unref(currentBarItem)?.id === rootMenu.id ? "is-active" : "",
+            ]}
+            onClick={() => handleBarItemClick(rootMenu)}
+          >
+            <div class="mk-bar__item-button">
+              <MKSvgIcon iconClass={rootMenu.iconName} />
+            </div>
+            <div class="mk-bar__item-title">{rootMenu.title} </div>
+          </div>
+        ));
+
+      const systemSettingNode = menu.rootMenus.find(
+        (rootMenu) => rootMenu.type === MenuType.SystemSettings
+      );
+
+      const footer = systemSettingNode?.children.length ? (
+        <div class="mk-bar__footer">
+          <div
+            class={[
+              "mk-bar__item",
+              "mk-bar__settings",
+              systemSettingNode.children.length ? "has-children" : "",
+              unref(currentBarItem)?.id === systemSettingNode.id
+                ? "is-active"
+                : "",
+            ]}
+            onClick={() => handleBarItemClick(systemSettingNode)}
+          >
+            <div class="mk-bar__item-button">
+              <MKSvgIcon iconClass={systemSettingNode.iconName} />
+            </div>
+            <div class="mk-bar__item-title">{systemSettingNode.title} </div>
+          </div>
+        </div>
+      ) : null;
+
+      return (
+        <div class="mk-bar">
+          <div class="mk-bar__logo">
+            <div
+              class="mk-logo"
+              style={{ backgroundImage: `url(${msAppClient.logo})` }}
+            />
+          </div>
+
+          <div class="mk-bar__items">{barItems}</div>
+
+          {footer}
+        </div>
+      );
+    };
+  },
+});

package/src/layouts/components/header/index.tsx

@@ -0,0 +1,18 @@
+import { defineComponent } from "vue";
+import { MKHeaderTools } from "./tools";
+
+export const MKHeader = defineComponent({
+  name: "MKHeader",
+  setup() {
+    return () => {
+      return (
+        <div class="mk-header">
+          <div class="mk-header__main"></div>
+          <div class="mk-header__tools">
+            <MKHeaderTools />
+          </div>
+        </div>
+      );
+    };
+  },
+});

package/src/layouts/components/header/tools.tsx

@@ -0,0 +1,55 @@
+import { computed, defineComponent, unref } from "vue";
+import {
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElImage,
+} from "element-plus";
+import { MSAppClient } from "../../../core";
+import { MKSvgIcon } from "../../../components";
+
+export const MKHeaderTools = defineComponent({
+  name: "MKHeaderTools",
+  setup(props) {
+    const msAppClient = MSAppClient.instance!;
+    const userSession = msAppClient.userSession!;
+
+    const userInfo = computed(() => userSession.userInfo!);
+
+    const avatar = computed(() => unref(userInfo).avatar || "/avatar.png");
+
+    return () => {
+      return (
+        <div class="mk-header-tools">
+          <div class="mk-header-tools__item">
+            <ElDropdown
+              class="mk-header-tools__user"
+              trigger="click"
+              v-slots={{
+                default: () => (
+                  <div class="mk-header-tools__user-info">
+                    <ElImage
+                      class="mk-header-tools__avatar"
+                      src={unref(avatar)}
+                    />
+                    <span class="mk-header-tools__nickName">
+                      {unref(userInfo).nickName}
+                    </span>
+                  </div>
+                ),
+                dropdown: () => (
+                  <ElDropdownMenu>
+                    <ElDropdownItem onClick={() => msAppClient.logout()}>
+                      <MKSvgIcon iconClass="SwitchButton" />
+                      退出登录
+                    </ElDropdownItem>
+                  </ElDropdownMenu>
+                ),
+              }}
+            />
+          </div>
+        </div>
+      );
+    };
+  },
+});

package/src/layouts/components/lock/lock.tsx

@@ -0,0 +1,92 @@
+import { defineComponent, ref, unref } from "vue";
+import { useRouter } from "vue-router";
+import { ElButton, ElInput } from "element-plus";
+import { Messager } from "@maketribe/dm";
+import { MSAppClient } from "../../../core";
+import { MKVerifyDialog } from "../../../components";
+
+export default defineComponent({
+  name: "MKLock",
+  setup() {
+    const msAppClient = MSAppClient.instance!;
+
+    const vueRouter = useRouter();
+
+    const locking = ref(msAppClient.userSession!.locking ?? false);
+
+    const password = ref("");
+    const isVisibleVerify = ref(false);
+
+    const handleToLogin = () => {
+      vueRouter.push({ name: "login" });
+    };
+
+    const handleUnlock = () => {
+      isVisibleVerify.value = true;
+    };
+
+    const handleVerifySuccess = async (code: string) => {
+      const userSession = msAppClient.userSession!;
+
+      try {
+        const response = await userSession.unlock(unref(password), code);
+
+        if (response.data.code !== 200) {
+          Messager.instance.error({ message: response.data.msg });
+          return;
+        }
+      } catch (e) {
+        console.error(e);
+
+        Messager.instance.error({ message: "网络异常" });
+      } finally {
+        isVisibleVerify.value = false;
+      }
+    };
+
+    msAppClient.userSession!.lockingChangeEvent.on(({ locking: isLocking }) => {
+      locking.value = isLocking;
+    });
+
+    return () => {
+      if (!unref(locking)) {
+        return null;
+      }
+
+      const verifyDialogVNode = unref(isVisibleVerify) ? (
+        <MKVerifyDialog
+          scene="Login"
+          visible={unref(isVisibleVerify)}
+          onUpdate:visible={(v) => (isVisibleVerify.value = v as boolean)}
+          onConfirm={handleVerifySuccess}
+        />
+      ) : null;
+
+      return (
+        <div class="mk-lock">
+          <div class="mk-lock__overlay mk-overlay"></div>
+
+          <div class="mk-lock-entry">
+            <div class="mk-lock-entry__user-info"></div>
+            <ElInput
+              type="password"
+              placeholder="请输入用户密码"
+              modelValue={unref(password)}
+              onUpdate:modelValue={(v: string) => (password.value = v)}
+            />
+            <div class="mk-lock-entry__footer">
+              <ElButton type="primary" link onClick={handleToLogin}>
+                返回登陆
+              </ElButton>
+              <ElButton type="primary" link onClick={handleUnlock}>
+                进入系统
+              </ElButton>
+            </div>
+          </div>
+
+          {verifyDialogVNode}
+        </div>
+      );
+    };
+  },
+});

package/src/layouts/components/menu/index.tsx

@@ -0,0 +1,60 @@
+import { computed, defineComponent, ref, unref } from "vue";
+import { ElMenu } from "element-plus";
+import { MenuNode, MSAppClient } from "../../../core";
+import MKAsideMenuItem from "./menu-item";
+
+export const MKMenu = defineComponent({
+  name: "MKMenu",
+  props: {
+    barItem: {
+      type: MenuNode,
+    },
+    collapse: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const msAppClient = MSAppClient.instance!;
+    const userSession = msAppClient.userSession!;
+    const menu = userSession.menu;
+    const router = userSession.router;
+
+    const currentMenuNode = ref(menu.getCurrentMenuNode());
+
+    const barItem = computed(() => props.barItem);
+
+    const handleSelect = async (id: string) => {
+      const item = menu.findMenuNodeByID(id);
+
+      if (item?.route) {
+        router.changeRoute({ name: item.route.name });
+      }
+    };
+
+    menu.currentMenuChangeEvent.on(({ currentMenu }) => {
+      currentMenuNode.value = currentMenu;
+    });
+
+    return () => {
+      if (!unref(barItem)?.children.length) {
+        return null;
+      }
+
+      const menuItems = unref(barItem)!.children.map((menu) => (
+        <MKAsideMenuItem class="mk-menu-item" node={menu} key={menu.id} />
+      ));
+
+      return (
+        <div class="mk-menu">
+          <ElMenu
+            defaultActive={unref(currentMenuNode)?.id ?? ""}
+            onSelect={handleSelect}
+          >
+            {menuItems}
+          </ElMenu>
+        </div>
+      );
+    };
+  },
+});

package/src/layouts/components/menu/menu-item.tsx

@@ -0,0 +1,63 @@
+import { Fragment, computed, defineComponent } from "vue";
+import { ElMenuItem, ElSubMenu } from "element-plus";
+import { MKSvgIcon } from "../../../components";
+import { MenuNode } from "../../../core";
+
+const MKAsideMenuItem = defineComponent({
+  name: "MKMenuItem",
+  props: {
+    node: {
+      type: MenuNode,
+      required: true,
+    },
+  },
+  setup(props) {
+    return () => {
+      if (!props.node.children.length) {
+        const icon = props.node.iconName ? (
+          <MKSvgIcon
+            class="mk-menu-item__icon"
+            iconClass={props.node.iconName}
+          />
+        ) : null;
+
+        return (
+          <ElMenuItem index={props.node.id}>
+            {icon}
+            {props.node.title}
+          </ElMenuItem>
+        );
+      }
+
+      const items = props.node.children.map((node) => (
+        <MKAsideMenuItem node={node} key={node.id} />
+      ));
+
+      return (
+        <ElSubMenu
+          index={props.node.id}
+          v-slots={{
+            title: () => {
+              const icon = props.node.iconName ? (
+                <MKSvgIcon
+                  class="mk-menu-item__icon"
+                  iconClass={props.node.iconName}
+                />
+              ) : null;
+              return (
+                <Fragment>
+                  {icon}
+                  {props.node.title}
+                </Fragment>
+              );
+            },
+          }}
+        >
+          {items}
+        </ElSubMenu>
+      );
+    };
+  },
+});
+
+export default MKAsideMenuItem;

package/src/layouts/container/default.tsx

@@ -0,0 +1,84 @@
+import { Ref, defineComponent, ref, unref } from "vue";
+import { RouterView, useRouter } from "vue-router";
+import { ElAside, ElContainer, ElHeader, ElMain } from "element-plus";
+import { MKSystemProvider } from "../../components";
+import { MKBar, MKMenu } from "../components";
+import { MenuNode } from "../../core";
+import { MSAppClient } from "../../core";
+import { MKHeader } from "../components/header";
+import { createDisposable } from "@maketribe/utils";
+
+function includeMenuNode(rootMenuNode: MenuNode, menuNode: MenuNode) {
+  let list = [rootMenuNode];
+
+  for (let i = 0; i < list.length; i++) {
+    const item = list[i];
+
+    if (item.id === menuNode.id) {
+      return true;
+    }
+
+    list = list.concat(item.children);
+  }
+
+  return false;
+}
+
+export const MKLayoutDefault = defineComponent({
+  name: "MKLayoutDefault",
+  setup() {
+    const msAppClient = MSAppClient.instance!;
+    const userSession = msAppClient.userSession!;
+    const menu = userSession.menu;
+    const vueRouter = useRouter();
+
+    const currentBarItem: Ref<MenuNode | null> = ref(null);
+
+    handleCurrentMenuChange();
+    menu.currentMenuChangeEvent.on(handleCurrentMenuChange);
+
+    function handleCurrentMenuChange() {
+      currentBarItem.value = menu.getCurrentMenuNode()
+        ? menu.rootMenus.find((item) =>
+            includeMenuNode(item, menu.getCurrentMenuNode()!)
+          ) ?? null
+        : null;
+    }
+
+    // 用户会话销毁就前往登录页面。
+    userSession.register(
+      createDisposable(() => {
+        vueRouter.push({ name: "login" });
+      })
+    );
+
+    return () => {
+      return (
+        <MKSystemProvider>
+          <ElContainer class="mk-layout-default">
+            <ElAside>
+              <MKBar barItem={unref(currentBarItem) as MenuNode} />
+            </ElAside>
+            <ElMain>
+              <ElContainer class="mk-layout-default__body">
+                <ElHeader class="mk-layout-default__header">
+                  <MKHeader />
+                </ElHeader>
+                <ElMain>
+                  <ElContainer class="mk-layout-default__main">
+                    <ElAside class="mk-layout-default__menu">
+                      <MKMenu barItem={unref(currentBarItem) as MenuNode} />
+                    </ElAside>
+                    <ElMain>
+                      <RouterView />
+                    </ElMain>
+                  </ElContainer>
+                </ElMain>
+              </ElContainer>
+            </ElMain>
+          </ElContainer>
+        </MKSystemProvider>
+      );
+    };
+  },
+});