@maketribe/ms-app 3.0.6 → 3.0.8

package/src/layouts/index.ts

@@ -1,2 +1,6 @@
-export * from "./manager-system";
-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>

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

@@ -0,0 +1,151 @@
+<template>
+  <MKDataTablePage
+    v-if="dataTable"
+    v-show="!isShowDataForm"
+    :data-table="dataTable"
+    selection
+  />
+  <MKDataFormPage
+    v-if="dataForm"
+    v-show="isShowDataForm"
+    :data-form="dataForm"
+  />
+</template>
+
+<script setup lang="ts">
+import { unref, computed, watch, ref, Ref } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import { I18n } from "@maketribe/locale";
+import { DataForm, DataTable, Dialoger, Messager } from "@maketribe/dm";
+import { MKDataTablePage, MKDataFormPage } from "../../../../../../components";
+import { DataModelDefines } from "../../../../../../core";
+
+const props = defineProps({
+  dataTable: { type: DataTable<any> },
+  dataForm: { type: DataForm<any> },
+});
+
+const router = useRouter();
+
+const isShowDataForm = 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(() => {
+        const _dataForm = unref(dataForm);
+
+        if (!_dataForm) {
+          console.warn(`没有对应的 (${dataTable.name}) DataForm 实现`);
+          return;
+        }
+
+        isShowDataForm.value = true;
+
+        _dataForm.addRecord();
+      });
+
+      dataTable.editRecordEvent.on(async ({ item }) => {
+        const _dataForm = unref(dataForm);
+
+        if (!_dataForm) {
+          console.warn(`没有对应的 (${dataTable.name}) DataForm 实现`);
+          return;
+        }
+
+        isShowDataForm.value = true;
+
+        try {
+          const response = await _dataForm.editRecord(item);
+
+          if (response.data.code !== 200) {
+            ElMessage.error(response.data.msg);
+            isShowDataForm.value = false;
+            return;
+          }
+        } catch (e) {
+          console.error(e);
+          isShowDataForm.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 }
+);
+
+watch(
+  dataForm,
+  (dataForm, _, onCleanup) => {
+    if (dataForm) {
+      dataForm.submittedEvent.on(() => {
+        isShowDataForm.value = false;
+
+        unref(dataTable)?.load();
+      });
+
+      dataForm.cancelEvent.on(() => {
+        isShowDataForm.value = false;
+
+        unref(dataTable)?.load();
+      });
+    }
+
+    onCleanup(() => {
+      dataForm?.dispose();
+    });
+  },
+  { immediate: true }
+);
+</script>

package/src/page/index/dv/default/single/table-tree/dialog.vue

@@ -0,0 +1,60 @@
+<template>
+  <MKDataTablePage :data-table="dataTree" selection>
+    <MKTableView :data-table="dataTree">
+      <MKTableTree :data-tree="dataTree" />
+    </MKTableView>
+  </MKDataTablePage>
+</template>
+<script setup lang="ts">
+import { unref, computed, watch, ref, Ref } from "vue";
+import { useRouter } from "vue-router";
+import { DataTree } from "@maketribe/dm";
+import { DataModelDefines } from "../../../../../../core";
+import {
+  MKDataTablePage,
+  MKTableView,
+  MKTableTree,
+} from "../../../../../../components";
+
+const router = useRouter();
+
+const props = defineProps({
+  dataTree: { type: DataTree<any> },
+});
+
+const dataTree: Ref<DataTree | null> = ref(null);
+
+watch(
+  computed(() => [props.dataTree, unref(router.currentRoute).meta.name]),
+  ([_dataTree, name]) => {
+    dataTree.value =
+      (_dataTree as DataTree) ||
+      DataModelDefines.instance.getDataTree(name as string);
+  },
+  { immediate: true }
+);
+
+watch(
+  dataTree,
+  (dataTree, _, onCleanup) => {
+    // if (dataTree) {
+    //   dataTree.addRecordEvent.on(() => {
+    //     router.push({ name: `dv/${unref(dataTree).name}/add` });
+    //   });
+
+    //   dataTree.editRecordEvent.on(({ item }) => {
+    //     router.push({
+    //       name: `dv/${unref(dataTree).name}/edit`,
+    //       params: { id: item[unref(dataTree)?.primaryKey as string] },
+    //     });
+    //   });
+    // }
+
+    onCleanup(() => {
+      // dataTree?.clearSelection();
+      // dataTree?.dispose();
+    });
+  },
+  { immediate: true }
+);
+</script>

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

@@ -0,0 +1,174 @@
+<template>
+  <MKDataTablePage v-if="dataTree" :data-table="dataTree">
+    <MKTreeView :data-tree="dataTree" />
+  </MKDataTablePage>
+  <!-- <MKDataTreePage
+    v-if="dataTree && dataForm"
+    :data-tree="dataTree"
+    :data-form="dataForm"
+    :props="{ label: 'name', children: 'children' }"
+  /> -->
+  <ElDialog appendToBody v-if="dataForm" 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 { computed, unref, Ref, ref, watch } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElDialog, ElButton } from "element-plus";
+import { I18n } from "@maketribe/locale";
+import { DataForm, DataTree, Dialoger, Messager } from "@maketribe/dm";
+import {
+  MKDataTablePage,
+  MKTreeView,
+  MKDataForm,
+  MKForm,
+} from "../../../../../../components";
+import { DataModelDefines } from "../../../../../../core";
+
+const router = useRouter();
+
+const dataTree: Ref<DataTree | null> = ref(null);
+const dataForm: Ref<DataForm | null> = ref(null);
+
+(window as any).dataTree = dataTree;
+
+const isShowDialog = ref(false);
+
+watch(
+  computed(() => unref(router.currentRoute).meta.name as string),
+  (name) => {
+    dataTree.value = DataModelDefines.instance.getDataTree(name);
+    dataForm.value = DataModelDefines.instance.getDataForm(name);
+  },
+  { immediate: true }
+);
+
+watch(
+  dataTree,
+  (dataTree, _, onCleanup) => {
+    if (dataTree) {
+      dataTree.addRecordEvent.on(async ({ item }) => {
+        const _dataForm = unref(dataForm);
+
+        if (!_dataForm) {
+          console.warn(`没有对应的 (${dataTree.name}) DataForm 实现`);
+          return;
+        }
+
+        isShowDialog.value = true;
+
+        const parentKey = unref(dataTree.parentKey);
+
+        _dataForm.addRecord(item ? { [parentKey]: item[parentKey] } : {});
+      });
+
+      dataTree.editRecordEvent.on(async ({ item }) => {
+        const _dataForm = unref(dataForm);
+
+        if (!_dataForm) {
+          console.warn(`没有对应的 (${dataTree.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;
+        }
+      });
+
+      dataTree.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 dataTree.deleteAfterRefresh(
+          item[dataTree.primaryKey]
+        );
+
+        if (response.data.code !== 200) {
+          Messager.instance.error({ message: response.data.msg });
+          return;
+        }
+
+        Messager.instance.success({ message: "删除成功" });
+      });
+    }
+
+    onCleanup(() => {
+      dataTree?.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(dataTree)?.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>

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

@@ -0,0 +1,52 @@
+<template>
+  <MKDataTablePage :data-table="dataTable" selection />
+</template>
+<script setup lang="ts">
+import { unref, computed, watch, ref, Ref } from "vue";
+import { useRouter } from "vue-router";
+import { DataTable } from "@maketribe/dm";
+import { DataModelDefines } from "../../../../core";
+import { MKDataTablePage } from "../../../../components";
+
+const router = useRouter();
+
+const props = defineProps({
+  dataTable: { type: DataTable<any> },
+});
+
+const dataTable: Ref<DataTable | null> = ref(null);
+
+watch(
+  computed(() => [props.dataTable, unref(router.currentRoute).meta.name]),
+  ([_dataTable, name]) => {
+    dataTable.value =
+      (_dataTable as DataTable) ||
+      DataModelDefines.instance.getDataTable(name as string);
+  },
+  { immediate: true }
+);
+
+watch(
+  dataTable,
+  (dataTable, _, onCleanup) => {
+    if (dataTable) {
+      dataTable.addRecordEvent.on(() => {
+        router.push({ name: `dv/${unref(dataTable).name}/add` });
+      });
+
+      dataTable.editRecordEvent.on(({ item }) => {
+        router.push({
+          name: `dv/${unref(dataTable).name}/edit`,
+          params: { id: item[unref(dataTable)?.primaryKey as string] },
+        });
+      });
+    }
+
+    onCleanup(() => {
+      dataTable?.clearSelection();
+      dataTable?.dispose();
+    });
+  },
+  { immediate: true }
+);
+</script>