@maketribe/ms-app 3.0.0

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,2 @@
+export * from "./token";
+export * from "./route";

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,110 @@
+import {
+  Components,
+  DataForm,
+  DataFormOptions,
+  FormColumn,
+  IComponents,
+  defineDataForm,
+} from "@maketribe/dm";
+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 {
+    return {
+      ...item,
+      value: JSON.parse(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,
+  defineDataTable,
+} from "@maketribe/dm";
+import { Config } from "./ConfigForm";
+import { R, ResponseConfig } from "@maketribe/request";
+
+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,43 @@
+import {
+  DataForm,
+  DataFormOptions,
+  FormColumn,
+  defineDataForm,
+} from "@maketribe/dm";
+
+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,67 @@
+import {
+  DataTableOptions,
+  TableColumn,
+  DataTable,
+  defineDataTable,
+} from "@maketribe/dm";
+import { Department } from "./DepartmentForm";
+
+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,51 @@
+import {
+  DataForm,
+  DataFormOptions,
+  FormColumn,
+  defineDataForm,
+} from "@maketribe/dm";
+
+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);

package/src/dataview/material/MaterialMan.ts

@@ -0,0 +1,176 @@
+import { Group } from "@maketribe/request";
+import { IComponents, WhereFilter } from "@maketribe/dm";
+import { MaterialTable, MaterialType } from "./MaterialTable";
+import {
+  MaterialGroup,
+  MaterialGroupNode,
+  MaterialGroupTable,
+} from "./material-group";
+import { UploadError, WebFileUpload, HttpRequest } from "@maketribe/request";
+import { MaterialForm } from "./MaterialForm";
+
+export type MaterialManOptions = {
+  components: IComponents;
+  httpRequest?: HttpRequest;
+};
+
+export class MaterialMan {
+  currentMaterialGroupId: MaterialGroup["id"] | null;
+  currentMaterialTypeId: MaterialType["value"] | null;
+
+  materialTypes: MaterialType[] = [];
+
+  materialGroupTable: MaterialGroupTable;
+  materialTable: MaterialTable;
+  materialForm: MaterialForm;
+
+  protected initing: boolean = false;
+  protected initd: boolean = false;
+
+  upload: WebFileUpload;
+
+  protected materialConditionGroup: Group;
+
+  get currentMaterialType() {
+    return (
+      this.materialTypes.find(
+        (materialType) => materialType.value === this.currentMaterialTypeId
+      ) ?? null
+    );
+  }
+
+  constructor(options: MaterialManOptions) {
+    this.materialGroupTable = new MaterialGroupTable();
+    this.materialTable = new MaterialTable({
+      materialComponents: options.components,
+    });
+    this.materialForm = new MaterialForm();
+
+    this.materialConditionGroup = new Group();
+
+    (this.materialTable.dataFilter as WhereFilter)
+      .getWhere()
+      .addGroup(this.materialConditionGroup);
+
+    this.materialGroupTable.dataFilter.setReady();
+    this.materialTable.dataFilter.setReady();
+
+    this.upload = new WebFileUpload({
+      filters: [
+        (file) => {
+          if (!this.currentMaterialType) {
+            throw new UploadError("不能上传文件，素材类型无效");
+          }
+
+          if (this.currentMaterialType.limit * 1024 * 1024 < file.size) {
+            throw new UploadError("文件太大不能上传");
+          }
+        },
+      ],
+      httpRequest: options.httpRequest,
+    });
+
+    this.currentMaterialGroupId = null;
+    this.currentMaterialTypeId = null;
+  }
+
+  async init() {
+    if (this.initing || this.initd) {
+      return;
+    }
+    this.initing = true;
+
+    this.upload.uploadEvent.on(({ uploadItem }) => {
+      uploadItem.completeEvent.once(async () => {
+        await this.materialForm.addRecord();
+
+        this.materialForm.setData({
+          id: "",
+          materialGroupId: this.currentMaterialGroupId,
+          type: this.currentMaterialTypeId!,
+          desc: uploadItem.payload.name,
+          path: uploadItem.response!.data.data.path,
+        });
+
+        const submitResullt = await this.materialForm.submit();
+
+        if (submitResullt.data.code !== 200) {
+          return;
+        }
+
+        this.materialTable.load();
+      });
+    });
+
+    await this.materialGroupTable.init();
+    await this.materialGroupTable.load();
+
+    await this.materialForm.init();
+
+    const getFirstMaterialGroupNode = (
+      materialGroupNodes: MaterialGroupNode[]
+    ): MaterialGroupNode => {
+      if (materialGroupNodes[0].children.length) {
+        return getFirstMaterialGroupNode(materialGroupNodes[0].children);
+      }
+
+      return materialGroupNodes[0];
+    };
+
+    const materialGroupList = this.materialGroupTable.getList();
+
+    if (!materialGroupList.length) {
+      return;
+    }
+
+    this.currentMaterialGroupId =
+      getFirstMaterialGroupNode(materialGroupList).id;
+
+    await this.materialTable.init();
+
+    this.materialTypes = this.materialTable.getMaterialTypes();
+
+    if (this.materialTypes.length) {
+      this.currentMaterialTypeId = this.materialTypes[0].value;
+    }
+
+    this.attachMaterialTableCondition();
+
+    this.initing = false;
+    this.initd = true;
+  }
+
+  setCurrentMaterialGroupId(materialGoupId: MaterialGroupNode["id"] | null) {
+    this.currentMaterialGroupId = materialGoupId;
+
+    this.attachMaterialTableCondition();
+  }
+
+  setCurrentMaterialTypeId(materialTypeId: MaterialType["value"] | null) {
+    this.currentMaterialTypeId = materialTypeId;
+
+    this.attachMaterialTableCondition();
+  }
+
+  protected attachMaterialTableCondition() {
+    this.materialConditionGroup.clear();
+
+    if (this.currentMaterialGroupId) {
+      this.materialConditionGroup.addCondition(
+        "materialGroupId",
+        "=",
+        this.currentMaterialGroupId
+      );
+    }
+
+    if (this.currentMaterialTypeId) {
+      this.materialConditionGroup.addCondition(
+        "type",
+        "=",
+        this.currentMaterialTypeId
+      );
+    }
+
+    this.materialTable.load();
+  }
+}