@maketribe/ms-app 3.0.1 → 3.0.4

package/src/layouts/manager-system/components/menu/menu.tsx

@@ -0,0 +1,112 @@
+import { Fragment, Ref, computed, defineComponent, ref, unref } from "vue";
+import { ElButton, ElMenu, ElMenuItem, ElSubMenu } from "element-plus";
+import { MKSvgIcon } from "@maketribe/dm-ui";
+import { MSAppClient } from "../../../../MSAppClient";
+import { MenuNode } from "../../../../menu";
+import MKLogo from "./logo";
+
+const MKMenuItem = defineComponent({
+  name: "MKMenuItem",
+  props: {
+    menuItem: { type: MenuNode, required: true },
+  },
+  setup(props) {
+    return () => {
+      const menuItem = props.menuItem;
+
+      if (menuItem.children.length) {
+        const childrenMenuItems = menuItem.children.map((childMenuItem) => (
+          <MKMenuItem menuItem={childMenuItem} key={childMenuItem.id} />
+        ));
+
+        return (
+          <ElSubMenu
+            index={menuItem.id}
+            popperClass="mk-menu__popper"
+            v-slots={{
+              title: () => (
+                <Fragment>
+                  <MKSvgIcon iconClass={menuItem.iconName} />
+                  <span>{menuItem.title}</span>
+                </Fragment>
+              ),
+            }}
+          >
+            {childrenMenuItems}
+          </ElSubMenu>
+        );
+      }
+
+      return (
+        <ElMenuItem index={menuItem.id}>
+          <MKSvgIcon iconClass={menuItem.iconName} />
+          <span>{menuItem.title}</span>
+        </ElMenuItem>
+      );
+    };
+  },
+});
+
+export default defineComponent({
+  name: "MKMenu",
+  setup() {
+    const userSession = MSAppClient.instance!.userSession!;
+
+    const menu = userSession.menu;
+    const router = userSession.router;
+
+    const currentMenuID: Ref<string> = ref(menu.getCurrentMenuNode()?.id ?? "");
+
+    const isCollapsed = computed(() => menu.isCollapsed);
+
+    menu.currentMenuChangeEvent.on(({ currentMenu }) => {
+      if (currentMenu) {
+        currentMenuID.value = currentMenu.id;
+      }
+    });
+
+    const handleSelect = (id: string) => {
+      const menuNode = menu.findMenuNodeByID(id);
+
+      if (menuNode?.route) {
+        router.changeRoute(menuNode.route);
+      }
+    };
+
+    const handleCollapse = () => {
+      menu.isCollapsed = !menu.isCollapsed;
+    };
+
+    return () => {
+      const menuItems = menu.rootMenus.map((menuItem) => (
+        <MKMenuItem menuItem={menuItem} key={menuItem.id} />
+      ));
+
+      const asideFold = unref(isCollapsed) ? (
+        <MKSvgIcon iconClass="Expand" />
+      ) : (
+        <MKSvgIcon iconClass="Fold" />
+      );
+
+      return (
+        <div class={["mk-menu", unref(isCollapsed) ? "mk-menu--collapse" : ""]}>
+          <MKLogo />
+          <ElMenu
+            collapse={unref(isCollapsed)}
+            collapseTransition={false}
+            defaultActive={unref(currentMenuID)}
+            onSelect={handleSelect}
+            uniqueOpened
+          >
+            {menuItems}
+          </ElMenu>
+          <div class="mk-menu__footer">
+            <ElButton text onClick={handleCollapse}>
+              {asideFold}
+            </ElButton>
+          </div>
+        </div>
+      );
+    };
+  },
+});

package/src/layouts/manager-system/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from "@maketribe/utils";
+import ManagerSystem from "./manager-system";
+
+export const MKManagerSystem = withInstall(ManagerSystem);
+
+export default MKManagerSystem;

package/src/layouts/manager-system/manager-system.tsx

@@ -0,0 +1,101 @@
+import { computed, defineComponent, onMounted, unref } from "vue";
+import { createDisposable } from "@maketribe/utils";
+import { MKSystemProvider } from "../../components";
+import MKMenu from "./components/menu";
+import MKHeader from "./components/header";
+import { MSAppClient } from "../../MSAppClient";
+import MKLock from "../common/lock";
+
+export default defineComponent({
+  name: "MKManagerSystem",
+  setup(props, { slots }) {
+    const userSession = MSAppClient.instance!.userSession!;
+
+    const isVisible = computed(() => userSession.menu.isVisible);
+
+    onMounted(() => {
+      let oldInnerWidth: number = window.innerWidth;
+
+      const handleResize = () => {
+        const innerWidth = window.innerWidth;
+
+        if (oldInnerWidth > 1000 && innerWidth <= 1000) {
+          userSession.menu.isVisible = false;
+          userSession.menu.isCollapsed = false;
+        } else if (oldInnerWidth <= 1000 && innerWidth > 1000) {
+          userSession.menu.isVisible = true;
+
+          if (!userSession.menu.isCollapsed) {
+            userSession.menu.isCollapsed = true;
+          }
+        } else if (oldInnerWidth > 1200 && innerWidth <= 1200) {
+          if (!userSession.menu.isCollapsed) {
+            userSession.menu.isCollapsed = true;
+          }
+        } else if (oldInnerWidth <= 1200 && innerWidth > 1200) {
+          if (userSession.menu.isCollapsed) {
+            userSession.menu.isCollapsed = false;
+          }
+        }
+
+        oldInnerWidth = innerWidth;
+      };
+
+      if (oldInnerWidth <= 1000) {
+        userSession.menu.isVisible = false;
+        userSession.menu.isCollapsed = false;
+      } else if (oldInnerWidth <= 1200) {
+        userSession.menu.isVisible = true;
+        userSession.menu.isCollapsed = true;
+      } else {
+        userSession.menu.isVisible = true;
+        userSession.menu.isCollapsed = false;
+      }
+
+      window.addEventListener("resize", handleResize);
+
+      userSession.register(
+        createDisposable(() => {
+          window.removeEventListener("resize", handleResize);
+        })
+      );
+    });
+
+    const handleMaskClick = () => {
+      userSession.menu.isVisible = false;
+    };
+
+    return () => {
+      const mask = unref(isVisible) ? (
+        <div
+          class="mk-manager-system__mask mk-overlay"
+          onClick={handleMaskClick}
+        />
+      ) : null;
+
+      return (
+        <MKSystemProvider>
+          <div
+            class={[
+              "mk-manager-system",
+              `mk-manager-system__bar--${
+                unref(isVisible) ? "visible" : "hidden"
+              }`,
+            ]}
+          >
+            {mask}
+            <div class="mk-manager-system__aside">
+              <MKMenu />
+            </div>
+            <div class="mk-manager-system__main">
+              <MKHeader class="mk-manager-system__header" />
+              <div class="mk-manager-system__content">{slots.default?.()}</div>
+            </div>
+
+            <MKLock />
+          </div>
+        </MKSystemProvider>
+      );
+    };
+  },
+});

package/src/menu/Menu.ts

@@ -0,0 +1,142 @@
+import { Disposable, Event } from "@maketribe/utils";
+import { PermissionPointManager } from "../PermissionPointManager";
+import { Router } from "../Router";
+import { MenuResult } from "../dataview";
+import { MenuNode } from "./MenuNode";
+
+export class Menu extends Disposable {
+  rootMenus: MenuNode[] = [];
+
+  _currentMenu: MenuNode | null = null;
+
+  isCollapsed: boolean = false;
+
+  isVisible: boolean = true;
+
+  permissionPointManager: PermissionPointManager;
+
+  router: Router;
+
+  currentMenuChangeEvent: Event<{ currentMenu: MenuNode | null }> =
+    this.register(new Event());
+
+  constructor(permissionPointManager: PermissionPointManager, router: Router) {
+    super();
+    this.permissionPointManager = permissionPointManager;
+    this.router = router;
+  }
+
+  setMenus(menus: MenuResult[]) {
+    const menuNodes = menus
+      .sort((menu1, menu2) => {
+        const sort1 = parseInt(menu1.sort) || 0;
+        const sort2 = parseInt(menu2.sort) || 0;
+
+        return sort2 - sort1;
+      })
+      .map((menuInfo) => {
+        const route = this.router.getRouteByID(menuInfo.routeId);
+
+        const permissionPoints =
+          this.permissionPointManager.getPermissionPointsByMenuID(menuInfo.id);
+
+        return new MenuNode({
+          id: menuInfo.id,
+          route,
+          iconName: menuInfo.iconName || "",
+          title: menuInfo.title || "",
+          permissionPoints,
+          children: [],
+        });
+      });
+
+    const rootMenuNodes: MenuNode[] = [];
+
+    for (let i = 0, len = menuNodes.length; i < len; i++) {
+      const menuNodeInfo = menus[i];
+      const menuNode = menuNodes[i];
+
+      menuNode.iconName = menuNode.iconName || "default-menu";
+
+      if (!menuNodeInfo.pid) {
+        rootMenuNodes.push(menuNode);
+      }
+
+      for (const route of this.router.getRoutesByMenuID(menuNode.id)) {
+        route.iconName = route.iconName || menuNode.iconName;
+      }
+
+      for (let j = 0; j < len; j++) {
+        const menuNodeInfoInner = menus[j];
+        const menuNodeInner = menuNodes[j];
+
+        if (menuNodeInfoInner.pid === menuNodeInfo.id) {
+          menuNode.children.push(menuNodeInner);
+          menuNodeInner.parent = menuNode;
+        }
+      }
+    }
+
+    this.rootMenus = rootMenuNodes;
+  }
+
+  findMenuNodeByID(id: MenuNode["id"]): MenuNode | null {
+    if (!id) {
+      return null;
+    }
+
+    let list = this.rootMenus.slice();
+
+    for (let i = 0; i < list.length; i++) {
+      const node = list[i];
+
+      if (node.id === id) {
+        return node;
+      }
+
+      list = list.concat(node.children);
+    }
+
+    return null;
+  }
+
+  async setCurrentMenuNode(node: MenuNode | null) {
+    this._currentMenu = node;
+
+    this.currentMenuChangeEvent.emit({ currentMenu: node });
+
+    return true;
+  }
+
+  getCurrentMenuNode() {
+    return this._currentMenu;
+  }
+
+  getFirstLeafMenuNode(menus: MenuNode[] = this.rootMenus) {
+    function _getFirstLeafMenuNode(menus: MenuNode[]): MenuNode | null {
+      if (!menus.length) {
+        return null;
+      }
+
+      return _getFirstLeafMenuNode(menus[0].children) || menus[0];
+    }
+
+    return _getFirstLeafMenuNode(menus);
+  }
+
+  getMenuNodeByID(id: string): MenuNode | null {
+    let nodes = this.rootMenus.slice();
+
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+
+      if (node.id === id) {
+        return node;
+      }
+
+      nodes = nodes.concat(node.children);
+    }
+
+    return null;
+  }
+}

package/src/menu/MenuNode.ts

@@ -0,0 +1,49 @@
+import { PermissionPoint } from "../PermissionPointManager";
+import { Route } from "../dataview";
+
+interface MenuNodeOptions {
+  id: string;
+  route?: Route | null;
+  iconName: string;
+  title: string;
+  permissionPoints: PermissionPoint[];
+  children: MenuNode[];
+  parent?: MenuNode | null;
+}
+
+export class MenuNode {
+  id: string;
+
+  iconName: string;
+  title: string;
+  permissionPoints: PermissionPoint[];
+  route: Route | null;
+  children: MenuNode[];
+  parent: MenuNode | null;
+
+  constructor(options: MenuNodeOptions) {
+    const { id, children, route, iconName, title, permissionPoints } = options;
+
+    this.id = id;
+    this.route = route ?? null;
+    this.iconName = iconName;
+    this.title = title;
+    this.children = children;
+    this.parent = options.parent ?? null;
+    this.permissionPoints = permissionPoints;
+  }
+
+  getMenuNodePath(): MenuNode[] {
+    const path: MenuNode[] = [];
+
+    let menuNode: MenuNode | null = this;
+
+    while (menuNode) {
+      path.unshift(menuNode);
+
+      menuNode = menuNode.parent;
+    }
+
+    return path;
+  }
+}

package/src/menu/index.ts

@@ -0,0 +1,2 @@
+export * from "./Menu";
+export * from "./MenuNode";

package/src/page/index/404.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>404</div>
+</template>

package/src/page/index/dv/default/add.vue

@@ -0,0 +1,50 @@
+<template>
+  <MKDataFormPage
+    :data-form="dataForm"
+    @submitted="handleCancel"
+    @cancel="handleCancel"
+    @error="handleError"
+  />
+</template>
+
+<script setup lang="ts">
+import { unref, computed, watch, Ref, reactive } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import { DataForm } from "@maketribe/dm";
+import { DataModelDefines } from "../../../../DataModelDefines";
+import { useCurrentTab } from "../../../../composables/use-current-tab";
+
+const router = useRouter();
+
+const dataForm: Ref<DataForm | null> = computed(() => {
+  const dataForm = DataModelDefines.instance.getDataForm(
+    unref(router.currentRoute).meta.name as string
+  );
+
+  return dataForm ? (reactive(dataForm) as DataForm) : null;
+});
+
+const currentTab = useCurrentTab();
+
+const handleError = (response: any) => {
+  ElMessage.error({ message: response.data.msg || "网络异常" });
+};
+
+const handleCancel = async () => {
+  await router.push({ name: `${unref(router.currentRoute).meta.name}/list` });
+  currentTab!.close();
+};
+
+watch(
+  dataForm,
+  (dataForm) => {
+    if (!dataForm) {
+      return;
+    }
+
+    unref(dataForm)?.addRecord();
+  },
+  { immediate: true }
+);
+</script>

package/src/page/index/dv/default/edit.vue

@@ -0,0 +1,56 @@
+<template>
+  <MKDataFormPage
+    :data-form="dataForm"
+    @submitted="handleCancel"
+    @cancel="handleCancel"
+    @error="handleError"
+  />
+</template>
+
+<script setup lang="ts">
+import { unref, computed, watch, Ref, reactive } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import { DataForm } from "@maketribe/dm";
+import { DataModelDefines } from "../../../../DataModelDefines";
+import { useCurrentTab } from "../../../../composables/use-current-tab";
+
+const router = useRouter();
+
+const id = computed(() => unref(router.currentRoute).params.id as string);
+
+const dataForm: Ref<DataForm | null> = computed(() => {
+  const dataForm = DataModelDefines.instance.getDataForm(
+    unref(router.currentRoute).meta.name as string
+  );
+
+  return dataForm ? (reactive(dataForm) as DataForm) : null;
+});
+
+const currentTab = useCurrentTab();
+
+const handleError = (response: any) => {
+  ElMessage.error({ message: response.data.msg || "网络异常" });
+};
+
+const handleCancel = async () => {
+  await router.push({ name: `${unref(router.currentRoute).meta.name}/list` });
+  currentTab!.close();
+};
+
+watch(
+  dataForm,
+  (dataForm) => {
+    if (!dataForm) {
+      return;
+    }
+
+    if (!unref(id)) {
+      return;
+    }
+
+    unref(dataForm)?.editRecord(unref(id));
+  },
+  { immediate: true }
+);
+</script>

package/src/page/index/dv/default/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <MKDataTablePage :data-table="dataTable" selection />
+</template>
+<script setup lang="ts">
+import { unref, computed, reactive, watch } from "vue";
+import { useRouter } from "vue-router";
+import { Disposable } from "@maketribe/utils";
+import { DataTable } from "@maketribe/dm";
+import { MKDataTablePage } from "@maketribe/dm-ui";
+import { DataModelDefines } from "../../../../DataModelDefines";
+
+const router = useRouter();
+
+const props = defineProps({
+  dataTable: { type: DataTable<any> },
+});
+
+const dataTable = computed(() => {
+  const dataTable =
+    props.dataTable ||
+    DataModelDefines.instance.getDataTable(
+      unref(router.currentRoute).meta.name as string
+    );
+
+  return dataTable ? (reactive(dataTable) as DataTable) : null;
+});
+
+watch(
+  dataTable,
+  (dataTable, _, onCleanup) => {
+    if (dataTable) {
+      dataTable.addRecordEvent.on(() => {
+        router.push({ name: `${unref(dataTable).name}/add` });
+      });
+
+      dataTable.editRecordEvent.on(({ item }) => {
+        router.push({
+          name: `${unref(dataTable).name}/edit`,
+          params: { id: item[unref(dataTable)?.primaryKey as string] },
+        });
+      });
+    }
+
+    onCleanup(() => {
+      dataTable?.clearSelection();
+      dataTable?.dispose();
+    });
+  },
+  { immediate: true }
+);
+</script>

package/src/page/index/dv/default/tree.vue

@@ -0,0 +1,32 @@
+<template>
+  <MKDataTreePage
+    :data-table="dataTable"
+    :data-form="dataForm"
+    :props="{ label: 'name', children: 'children' }"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, unref } from "vue";
+import { useRouter } from "vue-router";
+import { DataForm, DataTable } from "@maketribe/dm";
+import { DataModelDefines } from "../../../../DataModelDefines";
+
+const router = useRouter();
+
+const dataTable = computed(() => {
+  const dataTable = DataModelDefines.instance.getDataTable(
+    unref(router.currentRoute).meta.name as string
+  );
+
+  return dataTable ? (reactive(dataTable) as DataTable) : null;
+});
+
+const dataForm = computed(() => {
+  const dataForm = DataModelDefines.instance.getDataForm(
+    unref(router.currentRoute).meta.name as string
+  );
+
+  return dataForm ? (reactive(dataForm) as DataForm) : null;
+});
+</script>

package/src/page/index/dv/ms-member/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <DefaultListPage :data-table="memberTable" />
+
+  <ElDialog v-model="isShowActiveMemberForm" class="dialogClass">
+    <MKDataForm :data-form="activeMemberForm" />
+    <template #footer>
+      <ElButton @click="handleActiveMemberConfirm" type="primary">
+        确定
+      </ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } from "vue";
+import { ElButton, ElDialog } from "element-plus";
+import { DataModelDefines } from "../../../../DataModelDefines";
+import DefaultListPage from "../default/index.vue";
+import { MemberTable } from "../../../../dataview";
+
+const isShowActiveMemberForm = ref(false);
+
+const memberTable = reactive(
+  DataModelDefines.instance.getDataTable("ms-member")!
+) as MemberTable;
+const activeMemberForm = computed(() => memberTable.activeMemberForm);
+
+memberTable.activeMemberEvent.on(async (member) => {
+  memberTable.activeMemberForm.getLoadingManager().startLoading();
+  await memberTable.activeMemberForm.editRecord(member.id);
+  memberTable.activeMemberForm.getLoadingManager().completeLoading();
+  isShowActiveMemberForm.value = true;
+});
+
+const handleActiveMemberConfirm = async () => {
+  memberTable.approveMember();
+};
+</script>

package/src/page/index/dv/ms-role/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <DefaultListPage :data-table="roleTable" />
+
+  <ElDialog v-model="isShowDialog" appendToBody width="80%">
+    <MKRolePermissionConfig
+      :rolePermissionConfigTable="rolePermissionConfigTable"
+    />
+  </ElDialog>
+</template>
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import DefaultListPage from "../default/index.vue";
+import { RoleTable, RolePermissionConfigTable } from "../../../../dataview";
+import { MKRolePermissionConfig } from "../../../../components";
+
+const roleTable = reactive(new RoleTable()) as RoleTable;
+const rolePermissionConfigTable = reactive(
+  new RolePermissionConfigTable()
+) as RolePermissionConfigTable;
+
+const isShowDialog = ref(false);
+
+roleTable.configRolePermissionEvent.on(({ item }) => {
+  rolePermissionConfigTable.selectRolePermission(item.id);
+
+  isShowDialog.value = true;
+});
+</script>

package/src/page/index/material/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <MKMaterialList :material-man="materialMan" />
+</template>
+<script setup lang="ts">
+import { reactive } from "vue";
+import { MaterialMan } from "../../../dataview";
+import { MKMaterialList } from "../../../components";
+import { MaterialComponents } from "../../../MaterialComponents";
+
+const materialMan = reactive(
+  new MaterialMan({ components: new MaterialComponents() })
+) as MaterialMan;
+</script>