@maketribe/ms-app 3.0.7 → 3.0.8

package/src/dataview/region/RegionForm.ts

@@ -0,0 +1,52 @@
+import { DataForm, DataFormOptions, FormColumn } from "@maketribe/dm";
+import { defineDataForm } from "../../define-data-form";
+import { RegionLevel } from "../../constants";
+
+export type Region = {
+  id: string;
+  code: string;
+  desc: string;
+  level: number;
+  postalCode: string;
+  firstchar: string;
+  jianpin: string;
+  pinyin: string;
+};
+
+export class RegionForm extends DataForm<Region> {
+  constructor(options: DataFormOptions = {}) {
+    super({ name: "ms-region", ...options });
+  }
+
+  protected async initialize(): Promise<void> {
+    await super.initialize();
+
+    this.setColumns([
+      new FormColumn({ name: "id", label: "编号" }),
+      new FormColumn({ name: "code", label: "地区编号" }),
+      new FormColumn({ name: "desc", label: "描述" }),
+      new FormColumn({
+        name: "level",
+        label: "层级",
+        componentInfo: "MKFormDataSelect",
+        componentProps: {
+          options: [
+            { value: RegionLevel.Province, label: "省份" },
+            { value: RegionLevel.City, label: "城市" },
+            { value: RegionLevel.District, label: "地区" },
+            { value: RegionLevel.Town, label: "城镇" },
+          ],
+        },
+      }),
+      new FormColumn({ name: "postalCode", label: "邮政编码" }),
+      new FormColumn({ name: "telAreaCode", label: "电话区号" }),
+      new FormColumn({ name: "lat", label: "纬度" }),
+      new FormColumn({ name: "lng", label: "经度" }),
+      new FormColumn({ name: "firstchar", label: "首拼" }),
+      new FormColumn({ name: "jianpin", label: "简拼" }),
+      new FormColumn({ name: "pinyin", label: "拼音" }),
+    ]);
+  }
+}
+
+defineDataForm(RegionForm);

package/src/dataview/region/RegionTable.ts

@@ -0,0 +1,64 @@
+import {
+  DataTable,
+  DataTableOptions,
+  FilterColumn,
+  TableActionColumn,
+  TableColumn,
+} from "@maketribe/dm";
+import { defineDataTable } from "../../define-data-table";
+import { RegionLevel } from "../../constants";
+import { Region } from "./RegionForm";
+
+export class RegionTable extends DataTable<Region> {
+  constructor(options: DataTableOptions = {}) {
+    super({ name: "ms-region", ...options });
+  }
+
+  protected async initialize(): Promise<void> {
+    await super.initialize();
+
+    this.dataFilter.setColumns([
+      new FilterColumn({ name: "code", label: "地区编号" }),
+      new FilterColumn({ name: "desc", label: "描述" }),
+      new FilterColumn({ name: "postalCode", label: "邮政编码" }),
+      new FilterColumn({ name: "telAreaCode", label: "电话区号" }),
+    ]);
+
+    this.setColumns([
+      new TableColumn({ name: "code", label: "地区编号", width: "120px" }),
+      new TableColumn({ name: "desc", label: "描述", minWidth: "200px" }),
+      new TableColumn({
+        name: "level",
+        label: "层级",
+        componentInfo: "MKColumnObjectMappingText",
+        componentProps: {
+          mapping: {
+            [RegionLevel.Province]: "省份",
+            [RegionLevel.City]: "城市",
+            [RegionLevel.District]: "地区",
+            [RegionLevel.Town]: "城镇",
+          },
+        },
+        width: "80px",
+      }),
+      new TableColumn({
+        name: "postalCode",
+        label: "邮政编码",
+        width: "100px",
+      }),
+      new TableColumn({
+        name: "telAreaCode",
+        label: "电话区号",
+        width: "100px",
+      }),
+      new TableColumn({ name: "firstchar", label: "首拼", width: "80px" }),
+      new TableColumn({ name: "jianpin", label: "简拼", width: "150px" }),
+      new TableColumn({ name: "pinyin", label: "拼音", width: "220px" }),
+      new TableActionColumn(),
+    ]);
+  }
+}
+
+(window as any).RegionTable = RegionTable;
+
+defineDataTable(RegionTable);

package/src/dataview/region/index.ts

@@ -0,0 +1,2 @@
+export * from "./RegionForm";
+export * from "./RegionTable";

package/src/dataview/role/RoleForm.ts

@@ -13,7 +13,8 @@ export class RoleForm extends DataForm<Role> {
   }
 
   protected async initialize() {
-    (window as any).roleForm = this;
+    await super.initialize();
+
     this.setColumns([
       new FormColumn({ name: "id", label: "编号" }),
       new FormColumn({ name: "name", label: "角色名", required: true }),

package/src/dataview/role/RolePermissionConfigTable.ts

@@ -96,6 +96,8 @@ export class RolePermissionConfigTable extends MenuTable<RoleMenuNode> {
   }
 
   protected async initialize() {
+    await super.initialize();
+
     [
       this.roleRouteTable.getLoadingManager(),
       this.rolePermissionPointTable.getLoadingManager(),
@@ -374,7 +376,7 @@ export class RolePermissionConfigTable extends MenuTable<RoleMenuNode> {
     if (removePermissionPointDefines.length) {
       const rolePermissionPoints = this.rolePermissionPointTable.getList();
       const deleteRolePermissionPointResult =
-        await this.rolePermissionPointTable.deleteRecords(
+        await this.rolePermissionPointTable.batchDelete(
           removePermissionPointDefines
             .map(
               (permissionPointDefine) =>
@@ -394,7 +396,7 @@ export class RolePermissionConfigTable extends MenuTable<RoleMenuNode> {
 
     if (removeRoutes.length) {
       const roleRoutes = this.roleRouteTable.getList();
-      const deleteRoleRouteResult = await this.roleRouteTable.deleteRecords(
+      const deleteRoleRouteResult = await this.roleRouteTable.batchDelete(
         removeRoutes
           .map(
             (route) =>
@@ -410,7 +412,7 @@ export class RolePermissionConfigTable extends MenuTable<RoleMenuNode> {
 
     if (addPermissionPointDefine.length) {
       const addRolePermissionPointResult =
-        await this.rolePermissionPointTable.addRecords(
+        await this.rolePermissionPointTable.batchAdd(
           addPermissionPointDefine.map((item) => ({
             id: "",
             roleId: this.currentRoleId,
@@ -424,7 +426,7 @@ export class RolePermissionConfigTable extends MenuTable<RoleMenuNode> {
     }
 
     if (addRoutes.length) {
-      const addRoleRouteResult = await this.roleRouteTable.addRecords(
+      const addRoleRouteResult = await this.roleRouteTable.batchAdd(
         addRoutes.map((item) => ({
           id: "",
           roleId: this.currentRoleId,

package/src/dataview/role/RoleTable.ts

@@ -23,6 +23,8 @@ export class RoleTable<
   }
 
   protected async initialize() {
+    await super.initialize();
+
     this.dataFilter.setColumns([
       new FilterColumn({
         name: "name",

package/src/dataview/role/role-permission-point/RolePermissionPointTable.ts

@@ -18,6 +18,8 @@ export class RolePermissionPointTable extends DataTable<RolePermissionPoint> {
   }
 
   protected async initialize() {
+    await super.initialize();
+
     this.setColumns([
       new TableColumn({ name: "id", visible: false }),
       new TableColumn({ name: "roleId" }),

package/src/dataview/role/role-route/RoleRouteTable.ts

@@ -19,6 +19,8 @@ export class RoleRouteTable extends DataTable<RoleRoute> {
   }
 
   protected async initialize() {
+    await super.initialize();
+
     this.setColumns([
       new TableColumn({ name: "id", visible: false }),
       new TableColumn({ name: "roleId" }),

package/src/dataview/route/RouteForm.ts

@@ -29,6 +29,8 @@ export class RouteForm extends DataForm<RouteResult, Route> {
   }
 
   protected async initialize() {
+    await super.initialize();
+
     this.setColumns([
       new FormColumn({ name: "id", label: "编号" }),
       new FormColumn({ name: "name", label: "路由名", required: true }),

package/src/dataview/route/RouteTable.ts

@@ -15,6 +15,8 @@ export class RouteTable extends DataTable<RouteResult, Route> {
   }
 
   protected async initialize() {
+    await super.initialize();
+
     this.dataFilter.setColumns([
       new FilterColumn({
         name: "name",

package/src/define-data-tree.ts

@@ -0,0 +1,12 @@
+import { DataTreeClass, DataModelDefines } from "./core";
+
+export const defineDataTree = <T extends DataTreeClass>(
+  DataTreeClass: T
+): T => {
+  DataModelDefines.instance.registerDataTreeDefine(
+    new DataTreeClass({}).name,
+    DataTreeClass
+  );
+
+  return DataTreeClass;
+};

package/src/index.ts

@@ -16,3 +16,4 @@ export const version = installer.version;
 export * from "./init-application";
 export * from "./define-data-table";
 export * from "./define-data-form";
+export * from "./define-data-tree";

package/src/installer.ts

@@ -9,8 +9,6 @@ import {
   MKDataFormPage,
   MKDataTable,
   MKDataTablePage,
-  MKDataTree,
-  MKDataTreePage,
   MKImageView,
   MKSvgIcon,
   MKVideoView,
@@ -35,8 +33,6 @@ const components: Plugin[] = [
   MKDataFormPage,
   MKDataTable,
   MKDataTablePage,
-  MKDataTree,
-  MKDataTreePage,
   MKImageView,
   MKSvgIcon,
   MKVideoView,

package/src/layouts/{default/components → components}/bar/index.tsx

@@ -1,7 +1,7 @@
 import { computed, defineComponent, unref } from "vue";
-import { MKSvgIcon } from "../../../../components";
-import { MSAppClient, MenuNode } from "../../../../core";
-import { MenuType } from "../../../../constants";
+import { MKSvgIcon } from "../../../components";
+import { MSAppClient, MenuNode } from "../../../core";
+import { MenuType } from "../../../constants";
 
 export const MKBar = defineComponent({
   name: "MKBar",

package/src/layouts/{default/components → components}/header/tools.tsx

@@ -5,8 +5,8 @@ import {
   ElDropdownMenu,
   ElImage,
 } from "element-plus";
-import { MSAppClient } from "../../../../core";
-import { MKSvgIcon } from "../../../../components";
+import { MSAppClient } from "../../../core";
+import { MKSvgIcon } from "../../../components";
 
 export const MKHeaderTools = defineComponent({
   name: "MKHeaderTools",

package/src/layouts/{default/components → components}/menu/index.tsx

@@ -1,6 +1,6 @@
 import { computed, defineComponent, ref, unref } from "vue";
 import { ElMenu } from "element-plus";
-import { MenuNode, MSAppClient } from "../../../../core";
+import { MenuNode, MSAppClient } from "../../../core";
 import MKAsideMenuItem from "./menu-item";
 
 export const MKMenu = defineComponent({

package/src/layouts/{default/components → components}/menu/menu-item.tsx

@@ -1,7 +1,7 @@
 import { Fragment, computed, defineComponent } from "vue";
 import { ElMenuItem, ElSubMenu } from "element-plus";
-import { MKSvgIcon } from "../../../../components";
-import { MenuNode } from "../../../../core";
+import { MKSvgIcon } from "../../../components";
+import { MenuNode } from "../../../core";
 
 const MKAsideMenuItem = defineComponent({
   name: "MKMenuItem",

package/src/layouts/{default/index.tsx → container/default.tsx}

@@ -2,10 +2,10 @@ import { Ref, defineComponent, ref, unref } from "vue";
 import { RouterView, useRouter } from "vue-router";
 import { ElAside, ElContainer, ElHeader, ElMain } from "element-plus";
 import { MKSystemProvider } from "../../components";
-import { MKBar, MKMenu } from "./components";
+import { MKBar, MKMenu } from "../components";
 import { MenuNode } from "../../core";
 import { MSAppClient } from "../../core";
-import { MKHeader } from "./components/header";
+import { MKHeader } from "../components/header";
 import { createDisposable } from "@maketribe/utils";
 
 function includeMenuNode(rootMenuNode: MenuNode, menuNode: MenuNode) {

package/src/layouts/index.ts

@@ -1 +1,6 @@
-export * from "./default";
+import { withInstall } from "@maketribe/utils";
+import Layout from "./layout";
+
+export const MKLayout = withInstall(Layout);
+
+export default MKLayout;

package/src/layouts/layout.tsx

@@ -0,0 +1,11 @@
+import { defineComponent } from "vue";
+import { MKLayoutDefault } from "./container/default";
+
+export default defineComponent({
+  name: "MKLayout",
+  setup() {
+    return () => {
+      return <MKLayoutDefault />;
+    };
+  },
+});

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

@@ -32,7 +32,7 @@ const handleError = (response: any) => {
 };
 
 const handleCancel = async () => {
-  await router.push({ name: `${unref(router.currentRoute).meta.name}/list` });
+  await router.push({ name: `dv/${unref(router.currentRoute).meta.name}/list` });
   currentTab!.close();
 };
 

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

@@ -34,7 +34,7 @@ const handleError = (response: any) => {
 };
 
 const handleCancel = async () => {
-  await router.push({ name: `${unref(router.currentRoute).meta.name}/list` });
+  await router.push({ name: `dv/${unref(router.currentRoute).meta.name}/list` });
   currentTab!.close();
 };
 

package/src/page/index/dv/default/single/list/dialog.vue

@@ -0,0 +1,177 @@
+<template>
+  <MKDataTablePage v-if="dataTable" :data-table="dataTable" selection />
+
+  <ElDialog v-if="dataForm" appendToBody v-model="isShowDialog">
+    <MKDataForm v-loading="dataForm.loading" :dataForm="dataForm">
+      <MKForm :dataForm="dataForm" />
+    </MKDataForm>
+
+    <template #footer>
+      <ElButton
+        type="primary"
+        :loading="dataForm.loading"
+        @click="handleSubmit"
+      >
+        {{ I18n.instance.translate("mk.dataForm.saveButton") }}
+      </ElButton>
+      <ElButton @click="handleCancel">
+        {{ I18n.instance.translate("mk.dataForm.cancelButton") }}
+      </ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<script setup lang="ts">
+import { unref, computed, watch, ref, Ref, nextTick } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElDialog, ElButton } from "element-plus";
+import { I18n } from "@maketribe/locale";
+import { DataForm, DataTable, Dialoger, Messager } from "@maketribe/dm";
+import {
+  MKDataTablePage,
+  MKDataForm,
+  MKForm,
+} from "../../../../../../components";
+import { DataModelDefines } from "../../../../../../core";
+
+const props = defineProps({
+  dataTable: { type: DataTable<any> },
+  dataForm: { type: DataForm<any> },
+});
+
+const router = useRouter();
+
+const isShowDialog = ref(false);
+
+const dataTable: Ref<DataTable | null> = ref(null);
+const dataForm: Ref<DataForm | null> = ref(null);
+
+watch(
+  computed(
+    () =>
+      [
+        props.dataTable,
+        props.dataForm,
+        unref(router.currentRoute).meta.name,
+      ] as [DataTable, DataForm, string]
+  ),
+  ([_dataTable, _dataForm, name]) => {
+    dataTable.value =
+      _dataTable || DataModelDefines.instance.getDataTable(name);
+    dataForm.value = _dataForm || DataModelDefines.instance.getDataForm(name);
+  },
+  { immediate: true }
+);
+
+watch(
+  dataTable,
+  (dataTable, _, onCleanup) => {
+    if (dataTable) {
+      dataTable.addRecordEvent.on(async () => {
+        const _dataForm = unref(dataForm);
+
+        if (!_dataForm) {
+          console.warn(`没有对应的 (${dataTable.name}) DataForm 实现`);
+          return;
+        }
+
+        isShowDialog.value = true;
+
+        _dataForm.addRecord();
+      });
+
+      dataTable.editRecordEvent.on(async ({ item }) => {
+        const _dataForm = unref(dataForm);
+
+        if (!_dataForm) {
+          console.warn(`没有对应的 (${dataTable.name}) DataForm 实现`);
+          return;
+        }
+
+        isShowDialog.value = true;
+
+        try {
+          const response = await _dataForm.editRecord(item);
+
+          if (response.data.code !== 200) {
+            ElMessage.error(response.data.msg);
+            isShowDialog.value = false;
+            return;
+          }
+        } catch (e) {
+          console.error(e);
+          isShowDialog.value = false;
+        }
+      });
+
+      dataTable.deleteRecordEvent.on(async ({ item }) => {
+        const i18n = I18n.instance;
+
+        const isConfirm = await Dialoger.instance.confirm({
+          title: i18n.translate("mk.dataTablePage.deleteTitle"),
+          message: i18n.translate("mk.dataTablePage.deleteMessage"),
+          type: "warning",
+        });
+
+        if (!isConfirm) {
+          return;
+        }
+
+        const response = await dataTable.deleteAfterRefresh(
+          item[dataTable.primaryKey]
+        );
+
+        if (response.data.code !== 200) {
+          Messager.instance.error({ message: response.data.msg });
+          return;
+        }
+
+        Messager.instance.success({ message: "删除成功" });
+      });
+    }
+
+    onCleanup(() => {
+      dataTable?.clearSelection();
+      dataTable?.dispose();
+    });
+  },
+  { immediate: true }
+);
+
+const handleSubmit = async () => {
+  try {
+    const _dataForm = unref(dataForm);
+
+    if (!_dataForm) {
+      return;
+    }
+
+    if (!(await _dataForm.validate())) {
+      return;
+    }
+
+    const response = await _dataForm.submit();
+
+    if (response.data.code !== 200) {
+      ElMessage.error({ message: response.data.msg });
+      return;
+    }
+
+    unref(dataTable)?.load();
+    ElMessage.success({
+      message: I18n.instance.translate("mk.message.saveSuccess"),
+    });
+
+    isShowDialog.value = false;
+  } catch (e) {
+    ElMessage.error({
+      message: I18n.instance.translate("mk.message.saveError"),
+    });
+  }
+};
+
+const handleCancel = () => {
+  unref(dataForm)?.cancel();
+  isShowDialog.value = false;
+};
+</script>