@maketribe/ms-app 3.0.30 → 3.0.31

package/src/components/role-permission-config/role-permission-config.tsx

@@ -0,0 +1,269 @@
+import {
+  Fragment,
+  computed,
+  defineComponent,
+  reactive,
+  unref,
+  watch,
+} from "vue";
+import {
+  ElTable,
+  ElTableColumn,
+  ElCheckbox,
+  ElTooltip,
+  ElCard,
+  ElButton,
+  ElAlert,
+} from "element-plus";
+import { postTraverse } from "@maketribe/utils";
+import { RoleMenuNode, RolePermissionPointDefine } from "../../dataview";
+import { useI18n } from "../../composables";
+import {
+  rolePermissionConfigEmits,
+  rolePermissionConfigProps,
+} from "./role-permission-config-options";
+
+type RowInfo = {
+  roleMenus: RoleMenuNode[];
+  permissionPoints: RolePermissionPointDefine[];
+};
+
+type CellInfo = { row: RowInfo; rowIndex: number; columnIndex: number };
+
+export default defineComponent({
+  name: "MKRolePermissionConfig",
+  props: rolePermissionConfigProps,
+  emits: rolePermissionConfigEmits,
+  setup(props, { emit }) {
+    const i18n = useI18n()!;
+
+    const rolePermissionConfigTable = computed(
+      () => props.rolePermissionConfigTable
+    );
+
+    const loading = computed(() => unref(rolePermissionConfigTable).loading);
+
+    const rootRoleMenuNodes = computed(() =>
+      unref(rolePermissionConfigTable).getRootRoleMenuNodes()
+    );
+
+    const list = computed(() => {
+      const _rootRoleMenuNodes = unref(rootRoleMenuNodes);
+
+      const list: RowInfo[] = [];
+
+      postTraverse<RoleMenuNode>(_rootRoleMenuNodes, (roleMenu, ancestors) => {
+        if (!roleMenu.children.length) {
+          list.push({
+            roleMenus: [...ancestors],
+            permissionPoints: roleMenu.permissionPoints,
+          });
+        }
+      });
+
+      return list;
+    });
+
+    const maxMenuColumns = computed(() => {
+      const _list = unref(list);
+
+      return Math.max(..._list.map((item) => item.roleMenus.length), 0);
+    });
+
+    const handleSpanMethod = ({
+      row,
+      rowIndex,
+      columnIndex,
+    }: CellInfo): [number, number] => {
+      const _maxMenuColumns = unref(maxMenuColumns);
+
+      let columnSpan = 1;
+
+      if (row.roleMenus.length < _maxMenuColumns) {
+        if (row.roleMenus.length - 1 === columnIndex) {
+          columnSpan = _maxMenuColumns - columnIndex;
+        } else if (
+          columnIndex < _maxMenuColumns &&
+          columnIndex >= row.roleMenus.length
+        ) {
+          columnSpan = 0;
+        }
+      }
+
+      let rowSpan = 1;
+
+      const _list = unref(list);
+
+      if (columnIndex < _maxMenuColumns) {
+        const bothExisting: boolean = !!(
+          _list[rowIndex]?.roleMenus?.[columnIndex] &&
+          _list[rowIndex - 1]?.roleMenus?.[columnIndex]
+        );
+
+        if (
+          // 第一行
+          rowIndex === 0 ||
+          // 两条记录都存在，且前一条和当前记录不一致
+          (bothExisting &&
+            _list[rowIndex].roleMenus[columnIndex].id !==
+              _list[rowIndex - 1].roleMenus[columnIndex].id)
+        ) {
+          let count = 1;
+
+          for (let i = rowIndex + 1; i < _list.length; i++) {
+            if (
+              _list[rowIndex].roleMenus[columnIndex]?.id !==
+              _list[i].roleMenus[columnIndex]?.id
+            ) {
+              break;
+            }
+            count++;
+          }
+
+          rowSpan = count;
+        } else if (bothExisting) {
+          // 两条记录都存在切记录一致
+          rowSpan = 0;
+        }
+      }
+
+      return [rowSpan, columnSpan];
+    };
+
+    const saveRolePermission = async () => {
+      props.rolePermissionConfigTable.submitPermission();
+    };
+
+    watch(
+      computed(() => props.rolePermissionConfigTable),
+      async (rolePermissionConfigTable) => {
+        await rolePermissionConfigTable.init();
+        await rolePermissionConfigTable.load();
+      },
+      { immediate: true }
+    );
+
+    return () => {
+      const menuColumnVnodes = new Array(unref(maxMenuColumns))
+        .fill(0)
+        .map((_, i) => {
+          return (
+            <ElTableColumn
+              label={i18n.translate("mk.rolePermissionConfig.tableMenuHeader", {
+                level: i + 1,
+              })}
+              v-slots={{
+                default: ({ row }: { row: RowInfo }) => {
+                  const roleMenu = row.roleMenus[i];
+
+                  if (!roleMenu) {
+                    return null;
+                  }
+
+                  return (
+                    <ElTooltip content={roleMenu.title} placement="top">
+                      <ElCheckbox
+                        class="role-permission-config__menu"
+                        modelValue={roleMenu.selected}
+                        indeterminate={roleMenu.indeterminate}
+                        onUpdate:modelValue={() =>
+                          unref(rolePermissionConfigTable).toggleRoleMenu(
+                            roleMenu
+                          )
+                        }
+                      >
+                        {roleMenu.title}
+                      </ElCheckbox>
+                    </ElTooltip>
+                  );
+                },
+              }}
+            />
+          );
+        });
+
+      return (
+        <ElCard
+          v-slots={{
+            header: () => {
+              return (
+                <div class="header-box">
+                  <div class="header-box-main">
+                    <ElAlert
+                      title={
+                        props.rolePermissionConfigTable.hasChange()
+                          ? `当前【 ${rolePermissionConfigTable.value.currentRoleDesc} 】权限已发生改变，保存后生效！`
+                          : `当前【 ${rolePermissionConfigTable.value.currentRoleDesc} 】权限无任何改变！`
+                      }
+                      showIcon
+                      type={
+                        props.rolePermissionConfigTable.hasChange()
+                          ? "warning"
+                          : "info"
+                      }
+                      closable={false}
+                    />
+                  </div>
+                  <div class="header-box-tools">
+                    <ElButton
+                      onClick={saveRolePermission}
+                      type="primary"
+                      disabled={!props.rolePermissionConfigTable.hasChange()}
+                    >
+                      {i18n.translate("mk.dataForm.saveButton")}
+                    </ElButton>
+                  </div>
+                </div>
+              );
+            },
+          }}
+        >
+          <ElTable
+            class="role-permission-config"
+            data={unref(list)}
+            border
+            spanMethod={handleSpanMethod}
+            v-loading={unref(loading)}
+          >
+            {menuColumnVnodes}
+
+            <ElTableColumn
+              label={i18n.translate(
+                "mk.rolePermissionConfig.tablePermissionPointHeader"
+              )}
+              minWidth="300px"
+              v-slots={{
+                default: ({ row }: { row: RowInfo }) => {
+                  const permissionPointVnodes = row.permissionPoints.map(
+                    (permissionPoint) => {
+                      return (
+                        <ElTooltip
+                          content={permissionPoint.name}
+                          placement="top"
+                        >
+                          <ElCheckbox
+                            class="role-permission-config__permission-point"
+                            modelValue={permissionPoint.selected}
+                            onUpdate:modelValue={() => {
+                              unref(
+                                rolePermissionConfigTable
+                              ).toggleRolePermissionPoint(permissionPoint);
+                            }}
+                          >
+                            {permissionPoint.name}
+                          </ElCheckbox>
+                        </ElTooltip>
+                      );
+                    }
+                  );
+
+                  return <Fragment>{permissionPointVnodes}</Fragment>;
+                },
+              }}
+            />
+          </ElTable>
+        </ElCard>
+      );
+    };
+  },
+});

package/src/components/svg-icon/index.ts

@@ -0,0 +1,5 @@
+import { withInstall } from "@maketribe/utils";
+import SvgIcon from "./svg-icon";
+
+export const MKSvgIcon = withInstall(SvgIcon);
+export default MKSvgIcon;

package/src/components/svg-icon/svg-icon-options.ts

@@ -0,0 +1,21 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const svgIconProps = buildProps({
+  iconClass: {
+    type: String,
+    required: true,
+  },
+  className: {
+    type: String,
+    default: "",
+  },
+});
+
+export type SvgIconProps = ExtractPropTypes<typeof svgIconProps>;
+
+export const svgIconEmits = {
+  click: (e: MouseEvent) => true,
+};
+
+export type SvgIconEmits = typeof svgIconEmits;

package/src/components/svg-icon/svg-icon.tsx

@@ -0,0 +1,48 @@
+import { computed, defineComponent, unref } from "vue";
+import * as icons from "@element-plus/icons-vue";
+import { svgIconEmits, svgIconProps } from "./svg-icon-options";
+import { ElIcon } from "element-plus";
+
+export default defineComponent({
+  name: "MKSvgIcon",
+  props: svgIconProps,
+  emits: svgIconEmits,
+  setup(props, { emit }) {
+    const iconNames = Object.keys(icons);
+
+    const iconName = computed(() => `#icon-${props.iconClass}`);
+    const iconClass = computed(() =>
+      props.className ? `mk-svg-icon ${props.className}` : "mk-svg-icon"
+    );
+
+    const isElIcon = computed(() =>
+      props.iconClass ? unref(iconNames).includes(props.iconClass) : false
+    );
+
+    const handleClick = (e: MouseEvent) => {
+      emit("click", e);
+    };
+
+    return () => {
+      if (unref(isElIcon)) {
+        const Icon = icons[props.iconClass as keyof typeof icons];
+
+        return (
+          <i class={unref(iconClass)} onClick={handleClick}>
+            <ElIcon>
+              <Icon />
+            </ElIcon>
+          </i>
+        );
+      }
+
+      return (
+        <i class={unref(iconClass)} onClick={handleClick}>
+          <svg>
+            <use xlinkHref={unref(iconName)} />
+          </svg>
+        </i>
+      );
+    };
+  },
+});

package/src/components/system-provider/index.ts

@@ -0,0 +1,5 @@
+import { withInstall } from "@maketribe/utils";
+import SystemProvider from "./system-provider";
+
+export const MKSystemProvider = withInstall(SystemProvider);
+export default MKSystemProvider;

package/src/components/system-provider/system-provider.tsx

@@ -0,0 +1,95 @@
+import {
+  computed,
+  defineComponent,
+  renderSlot,
+  unref,
+  useSlots,
+  watch,
+} from "vue";
+import { useRouter } from "vue-router";
+import { Components } from "@maketribe/dm";
+import { MSAppClient } from "../../core";
+import { MKConfigProvider } from "../config-provider";
+
+/**
+ * 路由变动的几种情况，
+ * 1.点击菜单跳转陆游
+ * 2.特定业务逻辑需要跳转路由
+ * 3.返回上一页
+ * 4.刷新页面
+ */
+
+export default defineComponent({
+  name: "MKSystemProvider",
+  setup() {
+    const vueRouter = useRouter();
+
+    const msAppClient = MSAppClient.instance!;
+
+    const ready = computed(() => msAppClient.ready);
+
+    const slots = useSlots();
+
+    watch(
+      computed(() => unref(vueRouter.currentRoute)),
+      (route) => {
+        const userSession = msAppClient.userSession;
+
+        if (!userSession) {
+          return;
+        }
+
+        const router = userSession.router;
+        const menu = userSession.menu;
+        const tabs = userSession.tabs;
+
+        const routeInfo = router.getRouteByName(route.name as string);
+
+        if (!routeInfo) {
+          menu.setCurrentMenuNode(null);
+          tabs.setCurrentTab(null);
+          return;
+        }
+
+        const menuNode = menu.findMenuNodeByID(routeInfo.menuId);
+
+        if (!menuNode) {
+          menu.setCurrentMenuNode(null);
+          tabs.setCurrentTab(null);
+          return;
+        }
+
+        menu.setCurrentMenuNode(menuNode);
+
+        const tab =
+          tabs.findTabByID(route.fullPath) ??
+          tabs.createTab({
+            id: route.fullPath,
+            title: routeInfo.title,
+            affix: !!route.matched?.[route.matched?.length - 1]?.meta?.affix,
+            realRoute: route,
+            route: routeInfo,
+          });
+
+        tabs.switchTab(tab);
+      },
+      { immediate: true }
+    );
+
+    return () => {
+      return (
+        <MKConfigProvider
+          dataTableComponents={msAppClient.dataTableComponents as Components}
+          dataFormComponents={msAppClient.dataFormComponents as Components}
+          dataFilterComponents={msAppClient.dataFilterComponents as Components}
+          whereFilterComponents={
+            msAppClient.whereFilterComponents as Components
+          }
+          i18n={msAppClient.i18n}
+        >
+          {renderSlot(slots, "default")}
+        </MKConfigProvider>
+      );
+    };
+  },
+});

package/src/components/upload-file/context/MaterialUploadContext.ts

@@ -0,0 +1,33 @@
+import { MKMaterialSelect } from "../../material-select";
+import { MaterialType } from "../../../dataview";
+import { UploadContext, UploadResult } from "./UploadContext";
+
+export type MaterialUploadContextOptions = {
+  allowMaterialTypeValues?: MaterialType["value"][];
+};
+
+export class MaterialUploadContext extends UploadContext {
+  allowMaterialTypeValues: MaterialType["value"][];
+
+  constructor(options: MaterialUploadContextOptions = {}) {
+    super();
+
+    this.allowMaterialTypeValues = options.allowMaterialTypeValues || [];
+  }
+
+  setAllowMaterialTypeValues(allowMaterialTypeValues: MaterialType["value"][]) {
+    this.allowMaterialTypeValues = allowMaterialTypeValues;
+  }
+
+  async selectFile(): Promise<UploadResult> {
+    const materialSelectResult = await MKMaterialSelect({
+      allowMaterialTypeValues: this.allowMaterialTypeValues,
+    });
+
+    return {
+      success: true,
+      path: materialSelectResult.path,
+      msg: "",
+    };
+  }
+}

package/src/components/upload-file/context/UploadContext.ts

@@ -0,0 +1,21 @@
+import { InjectionKey } from "vue";
+
+export type UploadResult = {
+  success: boolean;
+  path: string;
+  msg: string;
+};
+
+export interface UploadContextCtx {
+  uploadContext: UploadContext;
+}
+
+export const UploadContextCtxKey = Symbol(
+  "UploadContextCtxKey"
+) as InjectionKey<UploadContextCtx>;
+
+export class UploadContext {
+  selectFile(): Promise<UploadResult> {
+    throw new Error();
+  }
+}

package/src/components/upload-file/context/WebFileUploadContext.ts

@@ -0,0 +1,77 @@
+import { WebFileUpload } from "@maketribe/request";
+import { UploadContext, UploadResult } from "./UploadContext";
+import { MSAppClient } from "../../../core";
+
+export type WebFileUploadContextOptions = {
+  webFileUpload?: WebFileUpload;
+  accept?: string;
+};
+
+export class WebFileUploadContext extends UploadContext {
+  webFileUpload: WebFileUpload;
+  accept: string;
+
+  constructor(options: WebFileUploadContextOptions = {}) {
+    super();
+
+    this.accept = options.accept || "";
+
+    this.webFileUpload =
+      options.webFileUpload ??
+      new WebFileUpload({
+        httpRequest: MSAppClient.instance!.httpRequest,
+      });
+  }
+
+  setAccept(accept: string) {
+    this.accept = accept;
+  }
+
+  setWebFileUpload(webFileUpload: WebFileUpload) {
+    this.webFileUpload = webFileUpload;
+  }
+
+  async selectFile(): Promise<UploadResult> {
+    const input = document.createElement("input");
+
+    input.type = "file";
+
+    if (this.accept) {
+      input.accept = this.accept;
+    }
+
+    Object.assign(input.style, {
+      width: "1px",
+      height: "1px",
+      display: "none",
+    });
+
+    const file: File | null = await new Promise((resolve) => {
+      const handleFileChange = (event: Event) => {
+        const files = input.files;
+
+        input.parentElement?.removeChild(input);
+
+        resolve(files?.length ? files[0] : null);
+      };
+
+      input.addEventListener("change", handleFileChange);
+
+      document.body.append(input);
+
+      input.click();
+    });
+
+    if (!file) {
+      return { success: true, path: "", msg: "" };
+    }
+
+    const response = await this.webFileUpload.upload(file);
+
+    return {
+      success: response.data.code === 200,
+      path: response.data.data.path,
+      msg: response.data.msg,
+    };
+  }
+}

package/src/components/upload-file/context/index.ts

@@ -0,0 +1,7 @@
+export * from "./UploadContext";
+export * from "./WebFileUploadContext";
+export * from "./MaterialUploadContext";
+export * from "./material-upload-context";
+export * from "./material-upload-context-options";
+export * from "./web-file-upload-context";
+export * from "./web-file-upload-context-options";

package/src/components/upload-file/context/material-upload-context-options.ts

@@ -0,0 +1,13 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { MaterialType } from "../../../dataview";
+
+export const materialUploadContextProps = buildProps({
+  allowMaterialTypeValues: {
+    type: Array<MaterialType["value"]>,
+  },
+} as const);
+
+export type MaterialUploadContextProps = ExtractPropTypes<
+  typeof materialUploadContextProps
+>;

package/src/components/upload-file/context/material-upload-context.tsx

@@ -0,0 +1,34 @@
+import { computed, defineComponent, inject, unref, watch } from "vue";
+import { materialUploadContextProps } from "./material-upload-context-options";
+import { MaterialUploadContext } from "./MaterialUploadContext";
+import { UploadContextCtxKey } from "./UploadContext";
+import { withInstall } from "@maketribe/utils";
+
+const _MaterialUploadContext = defineComponent({
+  name: "MKMaterialUploadContext",
+  props: materialUploadContextProps,
+  inheritAttrs: false,
+  setup(props, { slots }) {
+    const allowMaterialTypeValues = computed(
+      () => props.allowMaterialTypeValues
+    );
+
+    const materialUploadContext = new MaterialUploadContext({
+      allowMaterialTypeValues: unref(allowMaterialTypeValues) ?? [],
+    });
+
+    watch(allowMaterialTypeValues, (allowMaterialTypeValues) => {
+      materialUploadContext.setAllowMaterialTypeValues(
+        allowMaterialTypeValues ?? []
+      );
+    });
+
+    inject(UploadContextCtxKey, { uploadContext: materialUploadContext });
+
+    return () => {
+      return slots.default?.();
+    };
+  },
+});
+
+export const MKMaterialUploadContext = withInstall(_MaterialUploadContext);

package/src/components/upload-file/context/web-file-upload-context-options.ts

@@ -0,0 +1,16 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { WebFileUpload } from "@maketribe/request";
+
+export const webFileUploadContextProps = buildProps({
+  accept: {
+    type: String,
+  },
+  webFileUpload: {
+    type: WebFileUpload,
+  },
+} as const);
+
+export type WebFileUploadContextProps = ExtractPropTypes<
+  typeof webFileUploadContextProps
+>;

package/src/components/upload-file/context/web-file-upload-context.tsx

@@ -0,0 +1,37 @@
+import { computed, defineComponent, provide, unref, watch } from "vue";
+import { WebFileUpload } from "@maketribe/request";
+import { webFileUploadContextProps } from "./web-file-upload-context-options";
+import { WebFileUploadContext } from "./WebFileUploadContext";
+import { UploadContextCtxKey } from "./UploadContext";
+import { withInstall } from "@maketribe/utils";
+
+const _WebFileUploadContext = defineComponent({
+  name: "MKWebFileUploadContext",
+  props: webFileUploadContextProps,
+  inheritAttrs: false,
+  setup(props, { slots }) {
+    const accept = computed(() => props.accept);
+    const webFileUpload = computed(() => props.webFileUpload);
+
+    const webFileUploadContext = new WebFileUploadContext();
+
+    watch(
+      computed(() => [unref(accept), unref(webFileUpload)] as any),
+      ([accept, webFileUpload]: [string, WebFileUpload]) => {
+        webFileUploadContext.setAccept(accept ?? "");
+        if (webFileUpload) {
+          webFileUploadContext.setWebFileUpload(webFileUpload);
+        }
+      },
+      { immediate: true }
+    );
+
+    provide(UploadContextCtxKey, { uploadContext: webFileUploadContext });
+
+    return () => {
+      return slots.default?.();
+    };
+  },
+});
+
+export const MKWebFileUploadContext = withInstall(_WebFileUploadContext);