@maketribe/ms-app 3.0.1 → 3.0.4

package/src/dataview/material/MaterialMan.ts

@@ -0,0 +1,180 @@
+import { Group, OrderType } 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.materialTable.dataFilter as WhereFilter)
+      .getOrder()
+      .addOrderItem("createDate", OrderType.DESC);
+
+    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();
+  }
+}

package/src/dataview/material/MaterialTable.ts

@@ -0,0 +1,123 @@
+import {
+  Component,
+  DataTable,
+  DataTableOptions,
+  IComponents,
+  TableColumn,
+} from "@maketribe/dm";
+import { Material } from "./MaterialForm";
+import { ConfigTable } from "../config";
+import { defineDataTable } from "../../define-data-table";
+import { ITypeResolver } from "../../resolver/ITypeResolver";
+
+export type MaterialType = {
+  value: string;
+  accept: string;
+  label: string;
+  limit: number;
+};
+
+export type MaterialTableOptions = DataTableOptions & {
+  materialComponents: IComponents;
+};
+
+export class MaterialTable
+  extends DataTable<Material>
+  implements ITypeResolver<Material>
+{
+  materialTypes: MaterialType[] = [];
+
+  materialComponents: IComponents;
+
+  constructor(options: MaterialTableOptions) {
+    super({ name: "ms-material", ...options });
+
+    this.materialComponents = options.materialComponents;
+  }
+
+  getMaterialTypes(): MaterialType[] {
+    return this.materialTypes;
+  }
+
+  async loadMaterialTypes() {
+    const configResponse = await ConfigTable.loadConfig<MaterialType[]>(
+      "ms-material-types"
+    );
+
+    if (configResponse.data.code !== 200 || !configResponse.data.data) {
+      throw new Error();
+    }
+
+    const config = configResponse.data.data;
+
+    this.materialTypes = config.value || [];
+  }
+
+  protected async initialize() {
+    const loadingManager = this.getLoadingManager();
+
+    try {
+      loadingManager.startLoading();
+
+      this.materialTypes = [
+        { value: "1", accept: "image/*", limit: 10, label: "图片" },
+        { value: "2", accept: "video/*", limit: 500, label: "视频" },
+        { value: "4", accept: "*", limit: 100, label: "文档" },
+      ];
+
+      const mapping = this.materialTypes.reduce((result, item) => {
+        result[item.value] = result.label;
+
+        return result;
+      }, {} as Record<any, any>);
+
+      this.setColumns([
+        new TableColumn({ name: "id", label: "编号", visible: false }),
+        new TableColumn({
+          name: "type",
+          label: "类型",
+          componentInfo: "MKColumnObjectMappingText",
+          componentProps: {
+            mapping,
+          },
+        }),
+        new TableColumn({ name: "desc", label: "描述" }),
+        new TableColumn({ name: "path", label: "路径" }),
+      ]);
+    } finally {
+      loadingManager.completeLoading();
+    }
+  }
+  formatItem(item: Material): Material {
+    return {
+      id: item.id,
+      materialGroupId: item.materialGroupId || null,
+      type: item.type || "string",
+      desc: item.desc || "",
+      path: item.path || "",
+    };
+  }
+
+  resolveType(type: string): string {
+    switch (type) {
+      case "1":
+        return "MKImageView";
+      case "2":
+        return "MKVideoView";
+      case "3":
+        return "MKAudioView";
+      default:
+        return "MKDocumentView";
+    }
+  }
+
+  resolveItemType(item: Material): string {
+    return this.resolveType(item.type);
+  }
+
+  resolveMaterialComponent(item: Material): Component | null {
+    return this.materialComponents.resolveComponent(this.resolveItemType(item));
+  }
+}
+
+defineDataTable(MaterialTable);

package/src/dataview/material/index.ts

@@ -0,0 +1,4 @@
+export * from "./material-group";
+export * from "./MaterialForm";
+export * from "./MaterialTable";
+export * from "./MaterialMan";

package/src/dataview/material/material-group/MaterialGroupForm.ts

@@ -0,0 +1,25 @@
+import { DataForm, DataFormOptions, FormColumn } from "@maketribe/dm";
+
+export type MaterialGroup = {
+  id: string;
+  desc: string;
+  parentGroupId: string | null;
+};
+
+export class MaterialGroupForm extends DataForm<MaterialGroup> {
+  constructor(options: DataFormOptions = {}) {
+    super({ name: "ms-material-group", ...options });
+  }
+
+  protected async initialize() {
+    this.setColumns([
+      new FormColumn({ name: "desc", label: "分组名称", required: true }),
+      new FormColumn({
+        name: "parentGroupId",
+        label: "父材质组ID",
+        defaultValue: null,
+        visible: false,
+      }),
+    ]);
+  }
+}

package/src/dataview/material/material-group/MaterialGroupTable.ts

@@ -0,0 +1,55 @@
+import { DataTable, DataTableOptions, TableColumn } from "@maketribe/dm";
+import { MaterialGroup } from "./MaterialGroupForm";
+
+export type MaterialGroupNode = MaterialGroup & {
+  children: MaterialGroupNode[];
+};
+
+export class MaterialGroupTable extends DataTable<
+  MaterialGroup,
+  MaterialGroupNode
+> {
+  constructor(options: Omit<DataTableOptions, "name"> = {}) {
+    super({
+      name: "ms-material-group",
+      ...options,
+      interfaceURL: { list: "/api/dv/ms-material-group/allList" },
+    });
+  }
+
+  protected async initialize() {
+    this.setColumns([
+      new TableColumn({ name: "id", label: "编号", visible: false }),
+      new TableColumn({ name: "desc", label: "描述" }),
+    ]);
+  }
+
+  formatItem(item: MaterialGroup): MaterialGroupNode {
+    return {
+      id: item.id,
+      desc: item.desc,
+      parentGroupId: item.parentGroupId,
+      children: [],
+    };
+  }
+
+  setList(list: MaterialGroup[]): void {
+    const rootMaterialGroups: MaterialGroupNode[] = [];
+
+    const materialGroups = list as MaterialGroupNode[];
+
+    for (const materialGroup of materialGroups) {
+      if (!materialGroup.parentGroupId) {
+        rootMaterialGroups.push(materialGroup);
+      }
+
+      for (const item of materialGroups) {
+        if (materialGroup.id === item.parentGroupId) {
+          materialGroup.children.push(item);
+        }
+      }
+    }
+
+    super.setList(rootMaterialGroups);
+  }
+}

package/src/dataview/material/material-group/index.ts

@@ -0,0 +1,2 @@
+export * from "./MaterialGroupForm";
+export * from "./MaterialGroupTable";

package/src/dataview/member/MemberForm.ts

@@ -0,0 +1,118 @@
+import { DataForm, DataFormOptions, FormColumn } from "@maketribe/dm";
+import { defineDataForm } from "../../define-data-form";
+import { RoleTable } from "../role";
+import { DepartmentTable } from "../department";
+import { WebFileUpload } from "@maketribe/request";
+export type MemberResult = {
+  id: string;
+  name: string;
+  wechatNo: string;
+  nickName: string;
+  email: string;
+  phone: string;
+  account: string;
+  // password: string;
+  avatar: string;
+  roles: any[];
+  depts: any[];
+  valid: number;
+};
+
+export type Member = {
+  id: string;
+  name: string;
+  wechatNo: string;
+  nickName: string;
+  email: string;
+  phone: string;
+  account: string;
+  // password: string;
+  // confirmPassword: string;
+  avatar: string | null;
+  roles: any[];
+  depts: any[];
+  valid: number;
+};
+
+export class MemberForm<
+  T extends MemberResult = MemberResult,
+  F extends Member = Member
+> extends DataForm<T, F> {
+  constructor(options: DataFormOptions = {}) {
+    super({ name: "ms-member", ...options });
+  }
+
+  protected async initialize() {
+    this.setColumns([
+      new FormColumn({ name: "id", label: "编号" }),
+      new FormColumn({ name: "name", label: "姓名", required: true }),
+      new FormColumn({ name: "wechatNo", label: "微信号", defaultValue: null }),
+      new FormColumn({ name: "nickName", label: "昵称", required: true }),
+      new FormColumn({ name: "email", label: "邮箱", required: true }),
+      new FormColumn({ name: "phone", label: "手机号", defaultValue: null }),
+      new FormColumn({ name: "account", label: "账号", required: true }),
+      new FormColumn({
+        name: "avatar",
+        label: "头像",
+        defaultValue: null,
+        componentInfo: "MKFormImageUpload",
+        componentProps: {
+          upload: new WebFileUpload({ httpRequest: this.httpRequest }),
+        },
+      }),
+      new FormColumn({
+        name: "roles",
+        label: "角色",
+        defaultValue: null,
+        componentInfo: "MKFormDataTableSelect",
+        componentProps: {
+          multiple: true,
+          labelFieldName: "name",
+          dataTable: new RoleTable(),
+        },
+      }),
+      new FormColumn({
+        name: "depts",
+        label: "部门",
+        defaultValue: null,
+        componentInfo: "MKFormDataTableSelect",
+        componentProps: {
+          multiple: true,
+          labelFieldName: "name",
+          dataTable: new DepartmentTable(),
+        },
+      }),
+      new FormColumn({ name: "memo", label: "备注" }),
+    ]);
+  }
+
+  formatSubmitData(data: any) {
+    const { roles, depts, ...rest } = data;
+
+    const rolesArr = roles?.map((item: any) => {
+      return { roleId: item };
+    });
+    const deptsArr = depts?.map((item: any) => {
+      return { deptId: item };
+    });
+    return { ...rest, roles: rolesArr, depts: deptsArr };
+  }
+
+  formatItem(item: T): F {
+    return {
+      id: item.id,
+      name: item.name || "",
+      wechatNo: item.wechatNo || "",
+      nickName: item.nickName || "",
+      email: item.email || "",
+      phone: item.phone || "",
+      account: item.account || "",
+      avatar: item.avatar,
+      roles: item.roles?.map((role) => role.roleId),
+      depts: item.depts?.map((department) => department.deptId),
+      valid: item.valid,
+    } as F;
+  }
+}
+
+defineDataForm(MemberForm);