@maketribe/ms-app 3.0.1 → 3.0.4

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

@@ -0,0 +1,93 @@
+import { computed, defineComponent, renderSlot, unref, useSlots } from "vue";
+import { useRouter } from "vue-router";
+import { Components } from "@maketribe/dm";
+import { UserSession } from "../../UserSession";
+import { MSAppClient } from "../../MSAppClient";
+import { RouteType } from "../../constants";
+import { MKConfigProvider } from "@maketribe/dm-ui";
+
+export default defineComponent({
+  name: "MKSystemProvider",
+  setup() {
+    const vueRouter = useRouter();
+
+    const msAppClient = MSAppClient.instance!;
+
+    const ready = computed(() => msAppClient.ready);
+
+    const slots = useSlots();
+
+    function initUserSession(userSession: UserSession) {
+      const tabs = userSession.tabs;
+
+      const router = userSession.router;
+
+      router.beforeRouteChange.on(async ({ routeInfo }) => {
+        const currentTab = tabs.getCurrentTab();
+
+        if (
+          currentTab?.route.type === RouteType.ROUTE &&
+          (await currentTab.beforeSwitchEvent.emitAsync()) === false
+        ) {
+          return false;
+        }
+
+        switch (routeInfo.type) {
+          case RouteType.LINK:
+            let a = document.createElement("a");
+            a.href = routeInfo.path;
+
+            window.open(a.href, "_blank");
+
+            return false;
+          case RouteType.ROUTE:
+            if (routeInfo.name === currentTab?.route.name) {
+              return false;
+            }
+
+            break;
+        }
+      });
+
+      tabs.currentTabChangeEvent.on(({ currentTab }) => {
+        if (!currentTab) {
+          return;
+        }
+
+        try {
+          vueRouter.push(
+            currentTab.realRoute ?? { name: currentTab.route.name }
+          );
+        } catch (e) {
+          console.error(e);
+        }
+      });
+    }
+
+    if (msAppClient.userSession) {
+      initUserSession(msAppClient.userSession);
+    }
+
+    msAppClient.userSessionChangeEvent.on(({ userSession }) => {
+      if (userSession) {
+        initUserSession(userSession);
+      }
+    });
+
+    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/verify-dialog/index.ts

@@ -0,0 +1,5 @@
+import { withInstall } from "@maketribe/utils";
+import VerifyDialog from "./verify-dialog";
+
+export const MKVerifyDialog = withInstall(VerifyDialog);
+export default MKVerifyDialog;

package/src/components/verify-dialog/verify-dialog-option.ts

@@ -0,0 +1,23 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const verifyDialogProps = buildProps({
+  visible: {
+    type: Boolean,
+    required: true,
+  },
+  scene: {
+    type: String,
+    required: true,
+  },
+  width: {
+    type: String,
+    default: "300px",
+  },
+} as const);
+
+export const verifyDialogEmits = {
+  "update:visible": (modelValue: any) => true,
+  verifySuccessful: (modelValue: any) => true,
+};
+export type VerifyDialogProps = ExtractPropTypes<typeof verifyDialogEmits>;

package/src/components/verify-dialog/verify-dialog.tsx

@@ -0,0 +1,113 @@
+import {
+  computed,
+  defineComponent,
+  unref,
+  Fragment,
+  ref,
+  onMounted,
+  watch,
+} from "vue";
+import { useHttpRequest } from "../../composables";
+import { verifyDialogProps, verifyDialogEmits } from "./verify-dialog-option";
+import { ElDialog, ElSlider, ElButton } from "element-plus";
+
+export default defineComponent({
+  name: "MKVerifyDialog",
+  props: verifyDialogProps,
+  emits: verifyDialogEmits,
+  setup(props, { emit }) {
+    const deg = ref(0);
+
+    const httpRequest = useHttpRequest();
+
+    const imageUrl = ref("");
+
+    const imageStyle = computed(() => {
+      return {
+        backgroundImage: `url(${unref(imageUrl)})`,
+        transform: `rotate(-${unref(deg)}deg)`,
+      };
+    });
+
+    const visible = computed({
+      get: () => props.visible,
+      set: (v) => emit("update:visible", v),
+    });
+
+    const getImage = async () => {
+      const params = { scene: props.scene };
+
+      const response = await httpRequest!.get(
+        "/api/open/verification/rotation/image",
+        {
+          params,
+          responseType: "blob",
+        }
+      );
+
+      return response.data ?? null;
+    };
+
+    const verifyConfirm = async () => {
+      emit("verifySuccessful", deg.value.toString());
+    };
+    onMounted(() => {
+      watch(
+        visible,
+        async (visible, _, onCleanup) => {
+          if (visible) {
+            const blob = await getImage();
+
+            const url = URL.createObjectURL(blob);
+            imageUrl.value = url;
+
+            onCleanup(() => {
+              URL.revokeObjectURL(url);
+            });
+          }
+        },
+        { immediate: true }
+      );
+    });
+    return () => {
+      return (
+        <ElDialog
+          model-value={visible.value}
+          modal-class="mk-verify-dialog"
+          width={props.width}
+          showClose={false}
+          appendToBody
+          v-slots={{
+            footer: () => {
+              return (
+                <Fragment>
+                  <ElButton type={"primary"} onClick={verifyConfirm}>
+                    确定
+                  </ElButton>
+                  <ElButton onClick={() => (visible.value = false)}>
+                    取消
+                  </ElButton>
+                </Fragment>
+              );
+            },
+          }}
+        >
+          <div class="mk-verify-dialog__wrapper">
+            <div
+              class="mk-verify-dialog__image"
+              ref="imageEl"
+              style={imageStyle.value}
+            />
+          </div>
+          <ElSlider
+            model-value={deg.value}
+            onUpdate:modelValue={(v) => (deg.value = v as number)}
+            show-tooltip={false}
+            min={0}
+            max={360}
+          />
+        </ElDialog>
+      );
+    };
+  },
+});

package/src/composables/index.ts

@@ -0,0 +1,13 @@
+export * from "./on-tab-before-close";
+export * from "./on-tab-refresh";
+export * from "./on-tab-before-switch";
+export * from "./use-current-tab";
+export * from "./use-http-request";
+export * from "./use-ms-app-client";
+export * from "./use-user-info";
+export * from "./on-tab-before-close";
+export * from "./on-tab-refresh";
+export * from "./use-current-tab";
+export * from "./use-http-request";
+export * from "./use-ms-app-client";
+export * from "./use-user-info";

package/src/composables/on-tab-before-close.ts

@@ -0,0 +1,8 @@
+import { EventCallback } from "@maketribe/utils";
+import { MSAppClient } from "../MSAppClient";
+
+export const onTabBeforeClose = (callback: EventCallback<undefined>) => {
+  MSAppClient.instance!.userSession!.tabs.getCurrentTab()?.beforeCloseEvent.once(
+    callback
+  );
+};

package/src/composables/on-tab-before-switch.ts

@@ -0,0 +1,8 @@
+import { EventCallback } from "@maketribe/utils";
+import { MSAppClient } from "../MSAppClient";
+
+export const onTabBeforeSwitch = (callback: EventCallback<undefined>) => {
+  MSAppClient.instance!.userSession!.tabs.getCurrentTab()?.beforeCloseEvent.on(
+    callback
+  );
+};

package/src/composables/on-tab-refresh.ts

@@ -0,0 +1,8 @@
+import { EventCallback } from "@maketribe/utils";
+import { MSAppClient } from "../MSAppClient";
+
+export const onTabRefresh = (callback: EventCallback<undefined>) => {
+  MSAppClient.instance!.userSession!.tabs.getCurrentTab()?.beforeSwitchEvent.on(
+    callback
+  );
+};

package/src/composables/use-current-tab.ts

@@ -0,0 +1,5 @@
+import { MSAppClient } from "../MSAppClient";
+import type { Tab } from "../tabs";
+
+export const useCurrentTab = (): Tab | null =>
+  MSAppClient.instance!.userSession!.tabs.getCurrentTab() ?? null;

package/src/composables/use-http-request.ts

@@ -0,0 +1,5 @@
+import { HttpRequest } from "@maketribe/request";
+import { MSAppClient } from "../MSAppClient";
+
+export const useHttpRequest = (): HttpRequest =>
+  MSAppClient.instance!.httpRequest;

package/src/composables/use-ms-app-client.ts

@@ -0,0 +1,10 @@
+import { inject } from "vue";
+import { MSAppClient } from "../MSAppClient";
+
+import { MSAPPCLIENT_CONTEXT_KEY } from "../tokens";
+
+export const useMSAppClient = (): MSAppClient | null => {
+  const msAppClientContext = inject(MSAPPCLIENT_CONTEXT_KEY);
+
+  return msAppClientContext?.msAppClient ?? null;
+};

package/src/composables/use-user-info.ts

@@ -0,0 +1,4 @@
+import { MSAppClient } from "../MSAppClient";
+
+export const useUserInfo = () =>
+  MSAppClient.instance?.userSession?.userInfo ?? null;

package/src/constants/index.ts

@@ -0,0 +1,3 @@
+export * from "./token";
+export * from "./route";
+export * from "./menu";

package/src/constants/menu.ts

@@ -0,0 +1,4 @@
+export enum MenuType {
+  Container = 1,
+  Menu = 2,
+}

package/src/constants/route.ts

@@ -0,0 +1,4 @@
+export enum RouteType {
+  ROUTE = "0",
+  LINK = "1",
+}

package/src/constants/token.ts

@@ -0,0 +1,5 @@
+export const AUTHORIZATION_PREFIX = "Bearer";
+export const AUTHORIZATION = "Authorization";
+export const X_AUTHORIZATION = "X-Authorization";
+export const ACCESS_TOKEN_HEADER = "access-token";
+export const X_ACCESS_TOKEN_HEADER = "x-access-token";

package/src/dataview/config/ConfigForm.ts

@@ -0,0 +1,113 @@
+import {
+  Components,
+  DataForm,
+  DataFormOptions,
+  FormColumn,
+  IComponents,
+} from "@maketribe/dm";
+import { defineDataForm } from "../../define-data-form";
+import { ITypeResolver } from "../../resolver/ITypeResolver";
+
+export type Config<T = any> = {
+  id: string;
+  key: string;
+  type: string;
+  value: T;
+};
+
+export type ConfigFormOptions = DataFormOptions & {
+  typeResolver?: ITypeResolver<Config>;
+  configComponent?: IComponents;
+};
+
+export class ConfigForm
+  extends DataForm<Config>
+  implements ITypeResolver<Config>
+{
+  configComponent: IComponents;
+
+  constructor(options: ConfigFormOptions = {}) {
+    super({ name: "ms-cfg", ...options });
+
+    this.configComponent = options.configComponent ?? new Components();
+  }
+
+  protected async initialize() {
+    const defaultType = "string";
+    this.setColumns([
+      new FormColumn({ name: "id", label: "编号" }),
+      new FormColumn({ name: "key", label: "配置键", required: true }),
+      new FormColumn({
+        name: "type",
+        label: "类型",
+        componentInfo: "MKFormDataSelect",
+        defaultValue: defaultType,
+        required: true,
+        componentProps: {
+          options: [
+            { value: "string", label: "字符串" },
+            { value: "int", label: "整数" },
+          ],
+          onChange: () => {
+            this.handleTypeChange(this.data);
+
+            if (this.data) {
+              this.data.value = null;
+            }
+          },
+        },
+      }),
+      new FormColumn({
+        name: "value",
+        label: "配置值",
+        required: true,
+        defaultValue: null,
+        componentInfo: this.resolveType(defaultType),
+      }),
+    ]);
+
+    this.dataChangeEvent.on(({ data }) => {
+      this.handleTypeChange(data);
+    });
+  }
+
+  handleTypeChange(data: Config | null) {
+    if (!data) {
+      return;
+    }
+
+    const valueFormColumn = this.getColumn("value")!;
+    valueFormColumn.componentInfo =
+      this.configComponent.resolveComponent(this.resolveItemType(data!)) ||
+      this.configComponent.resolveComponent("MKFormInput")!;
+  }
+
+  formatItem(item: Config): Config {
+    let value = item.value;
+
+    try {
+      value = JSON.parse(item.value);
+    } catch (e) {}
+
+    return { ...item, value };
+  }
+
+  formatSubmitData(data: any) {
+    return { ...data, value: JSON.stringify(data.value) };
+  }
+
+  resolveType(type: string) {
+    switch (type) {
+      case "int":
+        return "MKFormInputNumber";
+      default:
+        return "MKFormInput";
+    }
+  }
+
+  resolveItemType(config: Config) {
+    return this.resolveType(config.type);
+  }
+}
+
+defineDataForm(ConfigForm);

package/src/dataview/config/ConfigTable.ts

@@ -0,0 +1,68 @@
+import { Where } from "@maketribe/request";
+import {
+  DataTable,
+  DataTableOptions,
+  TableColumn,
+  TableActionColumn,
+} from "@maketribe/dm";
+import { Config } from "./ConfigForm";
+import { R, ResponseConfig } from "@maketribe/request";
+import { defineDataTable } from "../../define-data-table";
+
+export class ConfigTable extends DataTable<Config> {
+  private static _instance: ConfigTable | null = null;
+
+  static get instance(): ConfigTable {
+    if (!ConfigTable._instance) {
+      ConfigTable._instance = new ConfigTable();
+      ConfigTable._instance.dataFilter.setReady();
+    }
+
+    return ConfigTable._instance;
+  }
+
+  constructor(options: DataTableOptions = {}) {
+    super({ name: "ms-cfg", ...options });
+  }
+
+  protected async initialize() {
+    this.setColumns([
+      new TableColumn({ name: "id", label: "编号", visible: false }),
+      new TableColumn({ name: "key", label: "配置键" }),
+      new TableActionColumn(),
+    ]);
+  }
+
+  formatItem(item: Config): Config {
+    let value = item.value;
+
+    try {
+      value = JSON.parse(value);
+    } catch (e) {}
+
+    return { ...item, value };
+  }
+
+  static async loadConfig<T = any>(
+    key: string
+  ): Promise<ResponseConfig<R<Config<T>>>> {
+    const where = new Where();
+
+    where.addCondition("key", "=", key);
+
+    const dataViewRequest = ConfigTable.instance.dataViewRequest;
+    const response = await dataViewRequest.allList({
+      data: { condition: where },
+    });
+
+    return {
+      ...response,
+      data: {
+        ...response.data,
+        data: response.data.data?.[0] ?? null,
+      },
+    };
+  }
+}
+
+defineDataTable(ConfigTable);

package/src/dataview/config/index.ts

@@ -0,0 +1,2 @@
+export * from "./ConfigForm";
+export * from "./ConfigTable";

package/src/dataview/department/DepartmentForm.ts

@@ -0,0 +1,39 @@
+import { DataForm, DataFormOptions, FormColumn } from "@maketribe/dm";
+import { defineDataForm } from "../../define-data-form";
+
+export type Department = {
+  id: string;
+  name: string;
+  pid: string | null;
+};
+
+export class DepartmentForm extends DataForm<Department> {
+  constructor(options: DataFormOptions = {}) {
+    super({ name: "ms-dept", ...options });
+  }
+
+  protected async initialize() {
+    this.setColumns([
+      new FormColumn({ name: "id", label: "编号" }),
+      new FormColumn({ name: "name", label: "名称", required: true }),
+      new FormColumn({ name: "pid", label: "父部门ID", visible: false }),
+    ]);
+  }
+
+  formatSubmitData(data: any) {
+    return {
+      ...data,
+      pid: data.pid || null,
+    };
+  }
+
+  formatItem(item: Department): Department {
+    return {
+      id: item.id,
+      name: item.name || "",
+      pid: item.pid || null,
+    };
+  }
+}
+
+defineDataForm(DepartmentForm);

package/src/dataview/department/DepartmentTable.ts

@@ -0,0 +1,63 @@
+import { DataTableOptions, TableColumn, DataTable } from "@maketribe/dm";
+import { Department } from "./DepartmentForm";
+import { defineDataTable } from "../../define-data-table";
+
+export type DepartmentNode = Department & { children: DepartmentNode[] };
+
+export class DepartmentTable<
+  T extends Department = Department,
+  F extends Department = Department
+> extends DataTable<T, F> {
+  constructor(options: DataTableOptions = {}) {
+    super({
+      pageSize: 0,
+      pageSizes: [],
+      name: "ms-dept",
+      ...options,
+      interfaceURL: {
+        list: "/api/dv/ms-dept/allList",
+        ...options.interfaceURL,
+      },
+    });
+  }
+
+  protected async initialize() {
+    this.setColumns([
+      new TableColumn({ name: "id", label: "编号", visible: false }),
+      new TableColumn({ name: "name", label: "名称" }),
+      new TableColumn({ name: "leader", label: "部门负责人" }),
+    ]);
+  }
+
+  setList(list: F[]): void {
+    const rootDepartments: DepartmentNode[] = [];
+
+    const departments = list as unknown as DepartmentNode[];
+
+    for (const department of departments) {
+      department.children = [];
+
+      if (!department.pid) {
+        rootDepartments.push(department);
+      }
+
+      for (const item of departments) {
+        if (department.id === item.pid) {
+          department.children.push(item);
+        }
+      }
+    }
+
+    super.setList(rootDepartments as unknown as F[]);
+  }
+
+  formatItem(item: T): F {
+    return {
+      id: item.id,
+      name: item.name || "",
+      pid: item.pid || null,
+    } as F;
+  }
+}
+
+defineDataTable(DepartmentTable);

package/src/dataview/department/index.ts

@@ -0,0 +1,2 @@
+export * from "./DepartmentForm";
+export * from "./DepartmentTable";

package/src/dataview/index.ts

@@ -0,0 +1,7 @@
+export * from "./department";
+export * from "./member";
+export * from "./menu";
+export * from "./role";
+export * from "./route";
+export * from "./config";
+export * from "./material";

package/src/dataview/material/MaterialForm.ts

@@ -0,0 +1,47 @@
+import { DataForm, DataFormOptions, FormColumn } from "@maketribe/dm";
+import { defineDataForm } from "../../define-data-form";
+
+export type Material = {
+  id: string;
+  materialGroupId?: string | null;
+  type: string;
+  desc: string;
+  path: string;
+};
+
+export class MaterialForm extends DataForm<Material> {
+  constructor(options: DataFormOptions = {}) {
+    super({ name: "ms-material", ...options });
+  }
+
+  protected async initialize() {
+    this.setColumns([
+      new FormColumn({ name: "id", label: "编号" }),
+      new FormColumn({ name: "type", label: "类型" }),
+      new FormColumn({ name: "desc", label: "描述" }),
+      new FormColumn({ name: "path", label: "路径" }),
+    ]);
+  }
+
+  formatItem(item: Material): Material {
+    return {
+      id: item.id,
+      materialGroupId: item.materialGroupId ?? null,
+      type: item.type || "string",
+      desc: item.desc,
+      path: item.path,
+    };
+  }
+
+  formatSubmitData(data: any) {
+    return {
+      id: data.id,
+      materialGroupId: data.materialGroupId,
+      type: data.type,
+      desc: data.desc,
+      path: data.path,
+    };
+  }
+}
+
+defineDataForm(MaterialForm);