@maketribe/ms-app 3.0.6 → 3.0.8

package/src/components/data-model/data-table/views/tree/tree.tsx

@@ -0,0 +1,133 @@
+import { Fragment, computed, defineComponent, ref, unref } from "vue";
+import { ElButton, ElTree } from "element-plus";
+import type Node from "element-plus/es/components/tree/src/model/node";
+import { DataTreeNode } from "@maketribe/dm";
+import { treeProps } from "./tree-options";
+
+export default defineComponent({
+  name: "MKTree",
+  props: treeProps,
+  setup(props) {
+    const dataTree = computed(() => props.dataTree);
+
+    const treeRef = ref<{
+      filter: InstanceType<typeof ElTree>["filter"];
+      getNode: InstanceType<typeof ElTree>["getNode"];
+    } | null>(null);
+
+    const rootNodes = computed(() => unref(dataTree).rootNodes);
+
+    (window as any).rootNodes = rootNodes;
+
+    const handleAdd = (dataTreeNode?: DataTreeNode) => {
+      unref(dataTree).addRecord(
+        dataTreeNode ? { pid: dataTreeNode.data.id } : {}
+      );
+    };
+
+    const handleEdit = (dataTreeNode: DataTreeNode) => {
+      unref(dataTree).editRecord(dataTreeNode.data);
+    };
+
+    const handleDelete = async (dataTreeNode: DataTreeNode) => {
+      unref(dataTree).deleteRecord(dataTreeNode.data);
+    };
+
+    const handleLoad = async (node: Node, resolve: Function) => {
+      if (node.level === 0) {
+        return;
+      }
+
+      const dataTreeNode = node.data as DataTreeNode;
+
+      await dataTreeNode.load();
+
+      resolve(dataTreeNode.children);
+    };
+
+    const filter = (value: any) => {
+      unref(treeRef)?.filter(value);
+    };
+
+    return {
+      treeRef,
+      innerDataTree: dataTree,
+      rootNodes,
+      handleAdd,
+      handleEdit,
+      handleDelete,
+      handleLoad,
+      filter,
+    };
+  },
+  render() {
+    const {
+      defaultExpandAll,
+      filterNodeMethod,
+      innerDataTree,
+      rootNodes,
+      handleAdd,
+      handleEdit,
+      handleDelete,
+      handleLoad,
+      $slots,
+    } = this;
+
+    return (
+      <ElTree
+        props={{ children: "children", isLeaf: "isLeaf" }}
+        defaultExpandAll={defaultExpandAll}
+        ref="treeRef"
+        class="mk-data-tree"
+        data={rootNodes}
+        filterNodeMethod={filterNodeMethod as any}
+        nodeKey="id"
+        load={handleLoad}
+        v-slots={{
+          default: (scope: any) => {
+            let children = $slots.default?.(scope);
+
+            if (children) {
+              return children;
+            }
+
+            const { data } = scope;
+
+            const label = data.data[innerDataTree.props.label];
+
+            const main = $slots["node-main"]?.(scope) || label;
+
+            const tools = $slots["node-tools"]?.(scope) || (
+              <Fragment>
+                {$slots["node-tools-prefix"]?.(scope)}
+                <ElButton type="primary" link onClick={() => handleAdd(data)}>
+                  添加
+                </ElButton>
+                <ElButton type="primary" link onClick={() => handleEdit(data)}>
+                  编辑
+                </ElButton>
+                <ElButton type="danger" link onClick={() => handleDelete(data)}>
+                  删除
+                </ElButton>
+                {$slots["node-tools-suffix"]?.(scope)}
+              </Fragment>
+            );
+
+            return (
+              <div class="mk-data-tree-node">
+                <div class="mk-data-tree-node_main">{main}</div>
+
+                <div
+                  class="mk-data-tree-node__tools"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {tools}
+                </div>
+              </div>
+            );
+          },
+        }}
+      />
+    );
+  },
+});

package/src/components/data-model/data-table/views/tree-view/index.ts

@@ -0,0 +1,8 @@
+import { withInstall } from "@maketribe/utils";
+import TreeView from "./tree-view";
+
+export const MKTreeView = withInstall(TreeView);
+
+export default MKTreeView;
+
+export * from "./tree-view-options";

package/src/components/data-model/data-table/views/tree-view/tree-view-options.ts

@@ -0,0 +1,16 @@
+import { ExtractPropTypes } from "vue";
+import { DataTree } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+
+export const treeViewProps = buildProps({
+  dataTree: {
+    type: DataTree<any>,
+    required: true,
+  },
+  filterNodeMethod: {
+    type: Function,
+  },
+  defaultExpandAll: { type: Boolean, default: true },
+} as const);
+
+export type TreeViewProps = ExtractPropTypes<typeof treeViewProps>;

package/src/components/data-model/data-table/views/tree-view/tree-view.tsx

@@ -0,0 +1,81 @@
+import { computed, defineComponent, ref, unref, watch } from "vue";
+import { ElButton, ElCard, ElInput } from "element-plus";
+import { Search } from "@element-plus/icons-vue";
+import { MKTree } from "../tree";
+import { treeViewProps } from "./tree-view-options";
+import { I18n } from "@maketribe/locale";
+
+export default defineComponent({
+  name: "MKTreeView",
+  props: treeViewProps,
+  setup(props, { slots }) {
+    const dataTree = computed(() => props.dataTree);
+
+    const treeRef = ref<InstanceType<typeof MKTree>>();
+
+    const searchInputValue = ref("");
+    watch(searchInputValue, (value) => {
+      unref(treeRef)?.filter(value);
+    });
+
+    const filterNodeMethod = (value: string, data: any) => {
+      if (typeof props.filterNodeMethod === "function") {
+        return props.filterNodeMethod(value, data);
+      }
+
+      if (!searchInputValue.value) return true;
+
+      return data.data[unref(dataTree).props.label].includes(
+        searchInputValue.value
+      );
+    };
+
+    const handleAdd = () => {
+      unref(dataTree).addRecord();
+    };
+
+    return () => {
+      const content = slots.default?.({ dataTree: props.dataTree }) || (
+        <MKTree
+          ref={
+            ((component: InstanceType<typeof MKTree>) =>
+              (treeRef.value = component)) as any
+          }
+          dataTree={unref(dataTree)}
+          filterNodeMethod={filterNodeMethod}
+        />
+      );
+
+      return (
+        <ElCard
+          class="mk-data-tree-page"
+          v-slots={{
+            header: () => {
+              return (
+                <div class="header-box">
+                  <div class="header-box-main">
+                    <ElInput
+                      modelValue={unref(searchInputValue)}
+                      clearable={true}
+                      onUpdate:modelValue={(v: string) =>
+                        (searchInputValue.value = v)
+                      }
+                      prefix-icon={Search}
+                    />
+                  </div>
+                  <div class="header-box-tools">
+                    <ElButton onClick={handleAdd} type="primary">
+                      {I18n.instance.translate("mk.dataTreePage.addButton")}
+                    </ElButton>
+                  </div>
+                </div>
+              );
+            },
+          }}
+        >
+          {content}
+        </ElCard>
+      );
+    };
+  },
+});

package/src/components/data-model/data-table-page/data-table-page-options.ts

@@ -3,6 +3,8 @@ import { DataTable } from "@maketribe/dm";
 import { buildProps } from "@maketribe/utils";
 
 export const dataTablePageProps = buildProps({
+  autoLoad: { type: Boolean, default: true },
+  selection: { type: Boolean, default: false },
   dataTable: { type: DataTable<any> },
 } as const);
 

package/src/components/data-model/data-table-page/data-table-page.tsx

@@ -1,4 +1,4 @@
-import { Ref, computed, defineComponent, ref, unref, watch } from "vue";
+import { Ref, computed, defineComponent, unref } from "vue";
 import { DataTable } from "@maketribe/dm";
 import { dataTablePageProps } from "./data-table-page-options";
 import MKDataTable from "../data-table";
@@ -15,6 +15,7 @@ export default defineComponent({
       return (
         <div class="mk-data-table-page" v-loading={unref(loading)}>
           <MKDataTable
+            {...props}
             dataTable={unref(dataTable) as DataTable}
             v-slots={{ ...slots }}
           />

package/src/components/data-model/index.ts

@@ -2,6 +2,4 @@ export * from "./data-form";
 export * from "./data-form-page";
 export * from "./data-table";
 export * from "./data-table-page";
-export * from "./data-tree";
-export * from "./data-tree-page";
 export * from "./data-table-pagination";

package/src/components/image-select/image-select.tsx

@@ -16,9 +16,7 @@ export default defineComponent({
     });
 
     const handleSelectClick = async (e: MouseEvent) => {
-      const response = await MKMaterialSelect({
-        allowMaterialTypeValues: ["1"],
-      });
+      const response = await MKMaterialSelect();
 
       if (response.success) {
         modelValue.value = response.path;

package/src/components/index.ts

@@ -19,7 +19,6 @@ export * from "./system-provider";
 export * from "./material-list";
 export * from "./material-select";
 export * from "./role-permission-config";
-export * from "./menu-permission-table";
 export * from "./image-select";
 export * from "./verify-dialog";
-export * from "./member-table";
+export * from "./json-editor";

package/src/components/json-editor/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from "@maketribe/utils";
+import JsonEditor from "./json-editor";
+
+export const MKJsonEditor = withInstall(JsonEditor);
+
+export default MKJsonEditor;

package/src/components/json-editor/json-editor-options.ts

@@ -0,0 +1,21 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const jsonEditorProps = buildProps({
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+} as const);
+
+export type JsonEditorProps = ExtractPropTypes<typeof jsonEditorProps>;
+
+export const jsonEditorEmits = {
+  "update:model-value": (modelValue: string) => true,
+};
+
+export type jsonEditorEmits = typeof jsonEditorEmits;

package/src/components/json-editor/json-editor.tsx

@@ -0,0 +1,27 @@
+import { computed, defineComponent, unref } from "vue";
+import { Codemirror } from "vue-codemirror";
+import { json } from "@codemirror/lang-json";
+import { jsonEditorEmits, jsonEditorProps } from "./json-editor-options";
+
+export default defineComponent({
+  name: "MKCodeMirror",
+  props: jsonEditorProps,
+  emits: jsonEditorEmits,
+  setup(props, { emit }) {
+    const modelValue = computed({
+      get: () => props.modelValue,
+      set: (v: string) => emit("update:model-value", v),
+    });
+
+    return () => {
+      return (
+        <Codemirror
+          modelValue={unref(modelValue)}
+          onUpdate:modelValue={(v: string) => (modelValue.value = v)}
+          disabled={props.disabled}
+          extensions={[json()]}
+        />
+      );
+    };
+  },
+});

package/src/components/markdown-editor/markdown-editor.tsx

@@ -14,7 +14,6 @@ import {
   markdownEditorProps,
 } from "./markdown-editor-options";
 import { Disposable, createDisposable } from "@maketribe/utils";
-import { WebFileUpload } from "@maketribe/request";
 import { MKMaterialSelect } from "../material-select";
 
 let uid = 0;
@@ -24,9 +23,6 @@ export default defineComponent({
   props: markdownEditorProps,
   emits: markdownEditorEmits,
   setup(props, { emit }) {
-    // TODO 要使用MSAppClient的HttpRequest
-    const webFileUpload = new WebFileUpload();
-
     const markdownEl: Ref<HTMLElement | null> = ref(null);
 
     const _uid = uid++;
@@ -68,9 +64,7 @@ export default defineComponent({
             tip: "素材",
             icon: `<svg><use xlink:href="#icon-image" /></svg>`,
             click: async () => {
-              const response = await MKMaterialSelect({
-                allowMaterialTypeValues: ["1"],
-              });
+              const response = await MKMaterialSelect();
 
               if (!response.success) {
                 return;

package/src/components/material-list/material-group-form-popover.vue

@@ -65,7 +65,7 @@ const handleSaveClick = async () => {
     return;
   }
 
-  props.materialMan.materialGroupTable.load();
+  props.materialMan.materialGroupTree.load();
 
   visible.value = false;
 };

package/src/components/material-list/material-group.vue

@@ -17,43 +17,44 @@
     </div>
     <div class="mk-material-group__main">
       <ElScrollbar height="100%">
-        <MKDataTree
+        <MKDataTable
           :auto-load="false"
-          :data-table="materialGroupTable"
-          :props="{ label: 'desc', children: 'children' }"
+          :data-table="materialGroupTree"
           highlight-current
           @nodeClick="handleNodeClick"
         >
-          <template #node-tools="{ data }">
-            <div class="mk-material-group__tools" @click.stop>
-              <ElTooltip content="添加">
-                <span class="mk-material-group__tools-item">
-                  <MaterialGroupFromPopper
-                    :material-man="materialMan"
-                    :material-group-form="materialGroupForm"
-                  >
-                    <ElIcon @click="handleAddClick(data)"><Plus /></ElIcon>
-                  </MaterialGroupFromPopper>
-                </span>
-              </ElTooltip>
-              <ElTooltip content="编辑">
-                <span class="mk-material-group__tools-item">
-                  <MaterialGroupFromPopper
-                    :material-man="materialMan"
-                    :material-group-form="materialGroupForm"
-                  >
-                    <ElIcon @click="handleEditClick(data)"><Edit /></ElIcon>
-                  </MaterialGroupFromPopper>
-                </span>
-              </ElTooltip>
-              <ElTooltip content="删除">
-                <span class="mk-material-group__tools-item">
-                  <ElIcon @click="handleDeleteClick(data)"><Delete /></ElIcon>
-                </span>
-              </ElTooltip>
-            </div>
-          </template>
-        </MKDataTree>
+          <MKTree :data-tree="materialGroupTree">
+            <template #node-tools="{ data }">
+              <div class="mk-material-group__tools" @click.stop>
+                <ElTooltip content="添加">
+                  <span class="mk-material-group__tools-item">
+                    <MaterialGroupFromPopper
+                      :material-man="materialMan"
+                      :material-group-form="materialGroupForm"
+                    >
+                      <ElIcon @click="handleAddClick(data)"><Plus /></ElIcon>
+                    </MaterialGroupFromPopper>
+                  </span>
+                </ElTooltip>
+                <ElTooltip content="编辑">
+                  <span class="mk-material-group__tools-item">
+                    <MaterialGroupFromPopper
+                      :material-man="materialMan"
+                      :material-group-form="materialGroupForm"
+                    >
+                      <ElIcon @click="handleEditClick(data)"><Edit /></ElIcon>
+                    </MaterialGroupFromPopper>
+                  </span>
+                </ElTooltip>
+                <ElTooltip content="删除">
+                  <span class="mk-material-group__tools-item">
+                    <ElIcon @click="handleDeleteClick(data)"><Delete /></ElIcon>
+                  </span>
+                </ElTooltip>
+              </div>
+            </template>
+          </MKTree>
+        </MKDataTable>
       </ElScrollbar>
     </div>
     <div class="mk-material-group__footer"></div>
@@ -69,7 +70,8 @@ import {
   MaterialGroupNode,
   MaterialGroupForm,
 } from "../../dataview";
-import { MKDataTree } from "../data-model/data-tree";
+import { MKDataTable, MKTree } from "../data-model/data-table";
+
 import { useI18n } from "../../composables";
 import MaterialGroupFromPopper from "./material-group-form-popover.vue";
 
@@ -86,15 +88,13 @@ const materialGroupForm = reactive(
   new MaterialGroupForm()
 ) as MaterialGroupForm;
 
-(window as any).materialGroupForm = materialGroupForm;
-
-const materialGroupTable = computed(() => props.materialMan.materialGroupTable);
+const materialGroupTree = computed(() => props.materialMan.materialGroupTree);
 
-const loading = computed(() => props.materialMan.materialGroupTable.loading);
+const loading = computed(() => props.materialMan.materialGroupTree.loading);
 
 const handleNodeClick = (item: MaterialGroupNode) => {
   if (!item.children.length) {
-    props.materialMan.setCurrentMaterialGroupId(item.id);
+    props.materialMan.setCurrentMaterialGroupId(item);
   }
 };
 
@@ -127,8 +127,9 @@ const handleDeleteClick = async (item: MaterialGroupNode) => {
     return;
   }
 
-  const result =
-    await props.materialMan.materialGroupTable.deleteRecordAfterRefresh(item);
+  const result = await props.materialMan.materialGroupTree.deleteAfterRefresh(
+    item
+  );
 
   if (result.data.code !== 200) {
     ElMessage.error(result.data.msg);

package/src/components/material-select/material-select-api.ts

@@ -32,10 +32,12 @@ async function MaterialSelect(
   options?: MKMaterialSelectOptions,
   appContext?: AppContext
 ) {
+  options?.allowMaterialTypeValues;
   return new Promise((resolve, reject) => {
     showDialog(
       {
         ...options,
+        allowMaterialTypeValues: options?.allowMaterialTypeValues ?? ["1"],
         onMaterialChange: (material: Material) => {
           resolve({ success: true, data: material, path: material.path });
         },

package/src/components/rich-text-editor/rich-text-editor.tsx

@@ -47,9 +47,7 @@ export default defineComponent({
           editor.ui.registry.addButton("material", {
             icon: "image",
             onAction: async () => {
-              const response = await MKMaterialSelect({
-                allowMaterialTypeValues: ["1"],
-              });
+              const response = await MKMaterialSelect();
 
               if (!response.success) {
                 return;

package/src/components/role-permission-config/role-permission-config.tsx

@@ -18,7 +18,6 @@ import {
 import { postTraverse } from "@maketribe/utils";
 import { RoleMenuNode, RolePermissionPointDefine } from "../../dataview";
 import { useI18n } from "../../composables";
-import { MKDataSelect } from "../data-select";
 import {
   rolePermissionConfigEmits,
   rolePermissionConfigProps,

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

@@ -18,6 +18,7 @@ export const verifyDialogProps = buildProps({
 
 export const verifyDialogEmits = {
   "update:visible": (modelValue: any) => true,
-  verifySuccessful: (modelValue: any) => true,
+
+  confirm: (modelValue: any) => true,
 };
 export type VerifyDialogProps = ExtractPropTypes<typeof verifyDialogEmits>;