@maketribe/ms-app 3.0.11 → 3.0.13

package/dist/style/src/components/data-filter-popover.scss

@@ -2,8 +2,8 @@
   &__footer {
     display: flex;
     justify-content: space-between;
-    border-top: var(--ps-border);
-    padding-top: var(--ps-spacing-middle);
-    margin-top: var(--ps-spacing-large);
+    border-top: var(--mk-border);
+    padding-top: var(--mk-spacing-middle);
+    margin-top: var(--mk-spacing-large);
   }
 }

package/dist/style/src/components/data-filter.scss

@@ -13,7 +13,6 @@
       padding: 0 10px;
       color: var(--el-input-text-color, var(--el-text-color-regular));
       font-size: 14px;
-      box-sizing: border-box;
       text-align: right;
       &::after{
         content: " :";

package/dist/style/src/index.scss

@@ -2,3 +2,12 @@
 @use "./components/index.scss" as *;
 @use "./layouts" as *;
 @use "./page/index.scss" as *;
+
+:root {
+  --mk-spacing-small: 5px;
+  --mk-spacing-middle: 10px;
+  --mk-spacing-large: 15px;
+
+  --mk-border-color: #cccccc;
+  --mk-border: 1px solid var(--mk-border-color);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maketribe/ms-app",
-  "version": "3.0.11",
+  "version": "3.0.13",
   "description": "",
   "main": "dist/cjs",
   "files": [
@@ -20,9 +20,9 @@
     "vue": "^3.3.4",
     "vue-codemirror": "^6.1.1",
     "vue-router": "^4.2.4",
-    "@maketribe/dm": "^3.0.7",
-    "@maketribe/utils": "^1.1.2",
-    "@maketribe/request": "^1.1.8",
+    "@maketribe/utils": "^1.1.3",
+    "@maketribe/request": "^1.1.10",
+    "@maketribe/dm": "^3.0.8",
     "@maketribe/locale": "^1.0.5"
   },
   "scripts": {

package/src/components/data-model/data-filter-form/composables/use-condition.ts

@@ -39,22 +39,25 @@ export function useDataFilterCondition(options: DataFilterConditionOptions) {
 
   const currentOperator = computed(() => dataFilterItem.currentOperator);
 
-  watch(
-    currentOperator,
-    () => {
-      const defaultValue = options.defaultValue;
-
-      if (unref(isBetween)) {
-        dataFilterItem.column.defaultValue = [defaultValue, defaultValue];
-        value.value = [defaultValue, defaultValue];
-        return;
-      }
-
-      dataFilterItem.column.defaultValue = defaultValue;
-      value.value = defaultValue;
-    },
-    { immediate: true }
-  );
+  const calcDefaultValue = () => {
+    const defaultValue = options.defaultValue;
+
+    if (unref(isBetween)) {
+      return [defaultValue, defaultValue];
+    }
+
+    return defaultValue;
+  };
+
+  watch(currentOperator, () => {
+    const defaultValue = calcDefaultValue();
+
+    dataFilterItem.column.defaultValue = defaultValue;
+    value.value = defaultValue;
+  });
+
+  dataFilterItem.column.defaultValue = calcDefaultValue();
+  value.value = dataFilterItem.getValue() || calcDefaultValue();
 
   return {
     isBetween,

package/src/components/data-model/data-filter-form/data-filter-form-item/data-filter-form-item.tsx

@@ -164,13 +164,16 @@ export default defineComponent({
         </ElSelect>
       ) : null;
 
-      const labelWidth = computed(()=>100);
+      const labelWidth = computed(() => dataFilterContext.labelWidth);
 
       return (
         <div class="mk-data-filter-form-item">
-          <div class="mk-data-filter-form-item__label" style={
-            {width:labelWidth.value+"px"}
-          }>{_filterColumn.label}</div>
+          <div
+            class="mk-data-filter-form-item__label"
+            style={{ width: labelWidth.value + "px" }}
+          >
+            {_filterColumn.label}
+          </div>
           {/* {operatorSelect} */}
           <div class="mk-data-filter-form-item__content">{children}</div>
         </div>

package/src/components/data-model/data-filter-form/data-filter-form-options.ts

@@ -1,10 +1,11 @@
 import { ExtractPropTypes } from "vue";
-import { DataFilter } from "@maketribe/dm";
+import { DataFilter, DataTable } from "@maketribe/dm";
 import { buildProps } from "@maketribe/utils";
 import dataFilterForm from "./data-filter-form";
 
 export const dataFilterFormProps = buildProps({
-  dataFilter: { type: DataFilter, required: true },
+  // dataFilter: { type: DataFilter, required: true },
+  dataTable: { type: DataTable, required: true },
 } as const);
 
 export type DataFilterFormProps = ExtractPropTypes<typeof dataFilterFormProps>;

package/src/components/data-model/data-filter-form/data-filter-form.tsx

@@ -1,10 +1,14 @@
 import {
+  Fragment,
+  Suspense,
   computed,
   defineComponent,
-  onMounted,
+  getCurrentInstance,
   provide,
   reactive,
   unref,
+  watch,
+  withCtx,
 } from "vue";
 import { dataFilterFormProps } from "./data-filter-form-options";
 import { MKDataFilterFormItem } from "./data-filter-form-item";
@@ -14,7 +18,8 @@ export default defineComponent({
   name: "MKDataFilterForm",
   props: dataFilterFormProps,
   setup(props, { slots }) {
-    const dataFilter = computed(() => props.dataFilter);
+    const dataTable = computed(() => props.dataTable);
+    const dataFilter = computed(() => unref(dataTable).dataFilter);
 
     const columns = computed(() =>
       unref(dataFilter)
@@ -22,13 +27,47 @@ export default defineComponent({
         .filter((column) => column.visible)
     );
 
-    provide(DATA_FILTER_CONTEXT, reactive({ dataFilter }));
+    const labelWidth = computed(() => {
+      const maxWordCount = Math.max(
+        ...unref(columns).map((column) => column.label.length)
+      );
 
-    onMounted(() => {
-      unref(dataFilter).setReady();
+      return maxWordCount * 14 + 10;
     });
 
+    provide(DATA_FILTER_CONTEXT, reactive({ dataFilter, labelWidth }));
+
+    const instance = getCurrentInstance();
+
+    const handleResolve = () => {
+      withCtx(() => {
+        watch(
+          dataFilter,
+          (dataFilter) => {
+            dataFilter.setReady();
+          },
+          { immediate: true }
+        );
+      }, instance)();
+    };
+
+    watch(
+      dataTable,
+      (dataTable) => {
+        dataTable.initdEvent.once(() => {
+          if (!dataTable.dataFilter.getColumns().length) {
+            dataTable.dataFilter.setReady();
+          }
+        });
+      },
+      { immediate: true }
+    );
+
     return () => {
+      if (!unref(columns).length) {
+        return null;
+      }
+
       let children: any = slots.default?.();
 
       if (!children) {
@@ -52,7 +91,13 @@ export default defineComponent({
         return null;
       }
 
-      return <div class="mk-data-filter-form">{children}</div>;
+      return (
+        <div class="mk-data-filter-form">
+          <Suspense onResolve={handleResolve}>
+            <Fragment>{children}</Fragment>
+          </Suspense>
+        </div>
+      );
     };
   },
 });

package/src/components/data-model/data-filter-form/token.ts

@@ -4,6 +4,7 @@ import { OperatorOption } from "./operator-options";
 
 export interface DataFilterContext {
   dataFilter: DataFilter;
+  labelWidth: number;
 }
 
 export interface DataFilterItemContext {

package/src/components/data-model/data-filter-popover/data-filter-popover.tsx

@@ -8,10 +8,11 @@ export default defineComponent({
   name: "MKDataFilterPopover",
   props: dataFilterPopoverProps,
   setup(props, { slots }) {
-    const dataFilter = computed(() => props.dataTable.dataFilter);
+    const dataTable = computed(() => props.dataTable);
+    const dataFilter = computed(() => unref(dataTable).dataFilter);
 
     const handleSearch = () => {
-      props.dataTable.load();
+      unref(dataTable).load();
     };
 
     const handleReset = () => {
@@ -32,7 +33,7 @@ export default defineComponent({
               return (
                 <div class="mk-data-filter-popover">
                   <div class="mk-data-filter-popover__body">
-                    <MKDataFilterForm dataFilter={unref(dataFilter)} />
+                    <MKDataFilterForm dataTable={unref(dataTable)} />
                   </div>
                   <div class="mk-data-filter-popover__footer">
                     <ElButton onClick={handleReset}>重置</ElButton>

package/src/components/data-model/data-form/data-form.tsx

@@ -72,7 +72,9 @@ export default defineComponent({
             event: dataForm[key as keyof DataForm]! as Event,
           }));
 
-        for (const item of events) {
+        for (const item of events.filter(
+          (event) => event.eventName in dataFormEmits
+        )) {
           disposable.register(
             // @ts-ignore
             item.event.on((event: any) => {

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

@@ -2,6 +2,7 @@ import { DataTable, TableColumn } from "@maketribe/dm";
 import {
   computed,
   defineComponent,
+  nextTick,
   provide,
   reactive,
   unref,
@@ -42,7 +43,10 @@ export default defineComponent({
     watch(
       dataTable,
       async (dataTable) => {
-        dataTable.dataFilter.setReady();
+        // nextTick(() => {
+        //   dataTable.dataFilter.setReady();
+        // });
+
         if (props.autoLoad) {
           dataTable.load();
         }

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

@@ -1,4 +1,4 @@
-import { Fragment, computed, defineComponent, unref } from "vue";
+import { Fragment, VNode, computed, defineComponent, unref } from "vue";
 import { ElButton, ElCard } from "element-plus";
 
 import { MKButton } from "../../../../button";
@@ -45,44 +45,52 @@ export default defineComponent({
                 classifySearch = <MKTableClassifySearch />;
               }
 
-              const tools = !_dataTable.getSelection().length ? (
-                <Fragment>
-                  <div class="header-box-main"></div>
-                  <div class="header-box-tools">
-                    <MKDataFilterPopover dataTable={_dataTable}>
-                      <ElButton>
-                        <MKSvgIcon iconClass="Filter" />
-                      </ElButton>
-                    </MKDataFilterPopover>
+              let tools: VNode;
 
-                    {buttons}
-                  </div>
-                </Fragment>
-              ) : (
-                <div class="mk-table-view__selection-tip">
-                  <div class="mk-table-view__selection-tip-left">
-                    <span>
-                      已选中
-                      <span class="selection-count">
-                        {_dataTable.getSelection().length}
+              if (!_dataTable.getSelection().length) {
+                tools = (
+                  <Fragment>
+                    <div class="header-box-main"></div>
+                    <div class="header-box-tools">
+                      <MKDataFilterPopover dataTable={_dataTable}>
+                        <ElButton>
+                          <MKSvgIcon iconClass="Filter" />
+                        </ElButton>
+                      </MKDataFilterPopover>
+                      {buttons}
+                    </div>
+                  </Fragment>
+                );
+              } else {
+                tools = (
+                  <div class="mk-table-view__selection-tip">
+                    <div class="mk-table-view__selection-tip-left">
+                      <span>
+                        已选中
+                        <span class="selection-count">
+                          {_dataTable.getSelection().length}
+                        </span>
+                        项
                       </span>
-                      项
-                    </span>
-                  </div>
-                  <div class="mk-table-view__selection-tip-right">
-                    {_dataTable.batchActionButtonTools.map((button) => (
-                      <MKButton
+                    </div>
+                    <div class="mk-table-view__selection-tip-right">
+                      {_dataTable.batchActionButtonTools.map((button) => (
+                        <MKButton
+                          link
+                          button={button}
+                          onClick={() => button.handler()}
+                        />
+                      ))}
+                      <ElButton
                         link
-                        button={button}
-                        onClick={() => button.handler()}
-                      />
-                    ))}
-                    <ElButton link onClick={() => _dataTable.clearSelection()}>
-                      取消选择
-                    </ElButton>
+                        onClick={() => _dataTable.clearSelection()}
+                      >
+                        取消选择
+                      </ElButton>
+                    </div>
                   </div>
-                </div>
-              );
+                );
+              }
 
               return (
                 <Fragment>

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

@@ -12,7 +12,9 @@
     </template>
 
     <div>
-      <MKDataForm :data-form="materialGroupForm" v-loading="loading" />
+      <MKDataForm :data-form="materialGroupForm" v-loading="loading">
+        <MKForm :data-form="materialGroupForm" />
+      </MKDataForm>
       <div
         style="
           display: flex;
@@ -36,7 +38,7 @@
 <script setup lang="ts">
 import { Ref, computed, ref, unref } from "vue";
 import { ElMessage } from "element-plus";
-import { MKDataForm } from "../data-model/data-form";
+import { MKDataForm, MKForm } from "../data-model/data-form";
 import { MaterialGroupForm, MaterialMan } from "../../dataview/material";
 
 const props = defineProps({

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

@@ -21,9 +21,8 @@
           :auto-load="false"
           :data-table="materialGroupTree"
           highlight-current
-          @nodeClick="handleNodeClick"
         >
-          <MKTree :data-tree="materialGroupTree">
+          <MKTree :data-tree="materialGroupTree" @nodeClick="handleNodeClick">
             <template #node-tools="{ data }">
               <div class="mk-material-group__tools" @click.stop>
                 <ElTooltip content="添加">
@@ -32,7 +31,9 @@
                       :material-man="materialMan"
                       :material-group-form="materialGroupForm"
                     >
-                      <ElIcon @click="handleAddClick(data)"><Plus /></ElIcon>
+                      <ElIcon @click="handleAddClick(data.data)">
+                        <Plus />
+                      </ElIcon>
                     </MaterialGroupFromPopper>
                   </span>
                 </ElTooltip>
@@ -42,13 +43,17 @@
                       :material-man="materialMan"
                       :material-group-form="materialGroupForm"
                     >
-                      <ElIcon @click="handleEditClick(data)"><Edit /></ElIcon>
+                      <ElIcon @click="handleEditClick(data.data)">
+                        <Edit />
+                      </ElIcon>
                     </MaterialGroupFromPopper>
                   </span>
                 </ElTooltip>
                 <ElTooltip content="删除">
                   <span class="mk-material-group__tools-item">
-                    <ElIcon @click="handleDeleteClick(data)"><Delete /></ElIcon>
+                    <ElIcon @click="handleDeleteClick(data.data)">
+                      <Delete />
+                    </ElIcon>
                   </span>
                 </ElTooltip>
               </div>
@@ -74,6 +79,7 @@ import { MKDataTable, MKTree } from "../data-model/data-table";
 
 import { useI18n } from "../../composables";
 import MaterialGroupFromPopper from "./material-group-form-popover.vue";
+import { DataTreeNode } from "@maketribe/dm";
 
 const props = defineProps({
   materialMan: {
@@ -92,9 +98,9 @@ const materialGroupTree = computed(() => props.materialMan.materialGroupTree);
 
 const loading = computed(() => props.materialMan.materialGroupTree.loading);
 
-const handleNodeClick = (item: MaterialGroupNode) => {
+const handleNodeClick = (item: DataTreeNode<MaterialGroupNode>) => {
   if (!item.children.length) {
-    props.materialMan.setCurrentMaterialGroupId(item);
+    props.materialMan.setCurrentMaterialGroup(item.data);
   }
 };
 

package/src/components/system-provider/system-provider.tsx

@@ -1,10 +1,24 @@
-import { computed, defineComponent, renderSlot, unref, useSlots } from "vue";
+import {
+  computed,
+  defineComponent,
+  renderSlot,
+  unref,
+  useSlots,
+  watch,
+} from "vue";
 import { useRouter } from "vue-router";
 import { Components } from "@maketribe/dm";
-import { UserSession, MSAppClient } from "../../core";
-import { RouteType } from "../../constants";
+import { MSAppClient } from "../../core";
 import { MKConfigProvider } from "../config-provider";
 
+/**
+ * 路由变动的几种情况，
+ * 1.点击菜单跳转陆游
+ * 2.特定业务逻辑需要跳转路由
+ * 3.返回上一页
+ * 4.刷新页面
+ */
+
 export default defineComponent({
   name: "MKSystemProvider",
   setup() {
@@ -16,62 +30,51 @@ export default defineComponent({
 
     const slots = useSlots();
 
-    function initUserSession(userSession: UserSession) {
-      const tabs = userSession.tabs;
-
-      const router = userSession.router;
+    watch(
+      computed(() => unref(vueRouter.currentRoute)),
+      (route) => {
+        const userSession = msAppClient.userSession;
 
-      router.beforeRouteChange.on(async ({ routeInfo }) => {
-        const currentTab = tabs.getCurrentTab();
-
-        if (
-          currentTab?.route.type === RouteType.ROUTE &&
-          (await currentTab.beforeSwitchEvent.emitAsync()) === false
-        ) {
-          return false;
+        if (!userSession) {
+          return;
         }
 
-        switch (routeInfo.type) {
-          case RouteType.LINK:
-            let a = document.createElement("a");
-            a.href = routeInfo.path;
+        const router = userSession.router;
+        const menu = userSession.menu;
+        const tabs = userSession.tabs;
 
-            window.open(a.href, "_blank");
+        const routeInfo = router.getRouteByName(route.name as string);
 
-            return false;
-          case RouteType.ROUTE:
-            if (routeInfo.name === currentTab?.route.name) {
-              return false;
-            }
-
-            break;
+        if (!routeInfo) {
+          menu.setCurrentMenuNode(null);
+          tabs.setCurrentTab(null);
+          return;
         }
-      });
 
-      tabs.currentTabChangeEvent.on(({ currentTab }) => {
-        if (!currentTab) {
+        const menuNode = menu.findMenuNodeByID(routeInfo.menuId);
+
+        if (!menuNode) {
+          menu.setCurrentMenuNode(null);
+          tabs.setCurrentTab(null);
           return;
         }
 
-        try {
-          vueRouter.push(
-            currentTab.realRoute ?? { name: currentTab.route.name }
-          );
-        } catch (e) {
-          console.error(e);
-        }
-      });
-    }
-
-    if (msAppClient.userSession) {
-      initUserSession(msAppClient.userSession);
-    }
-
-    msAppClient.userSessionChangeEvent.on(({ userSession }) => {
-      if (userSession) {
-        initUserSession(userSession);
-      }
-    });
+        menu.setCurrentMenuNode(menuNode);
+
+        const tab =
+          tabs.findTabByID(route.fullPath) ??
+          tabs.createTab({
+            id: route.fullPath,
+            title: routeInfo.title,
+            affix: !!route.matched?.[route.matched?.length - 1]?.meta?.affix,
+            realRoute: route,
+            route: routeInfo,
+          });
+
+        tabs.switchTab(tab);
+      },
+      { immediate: true }
+    );
 
     return () => {
       return (

package/src/core/Router.ts

@@ -9,16 +9,6 @@ export class Router extends Disposable {
 
   routes: Route[] = [];
 
-  currentRoute: any | null = null;
-
-  beforeRouteChange: Event<{ routeInfo: Route; route: any }> = this.register(
-    new Event()
-  );
-
-  routeChange: Event<{ routeInfo: Route; route: any }> = this.register(
-    new Event()
-  );
-
   constructor(userSession: UserSession) {
     super();
 
@@ -157,28 +147,4 @@ export class Router extends Disposable {
   getRoutesByMenuID(menuId: Route["menuId"]): Route[] {
     return this.routes.filter((route) => route.menuId === menuId);
   }
-
-  async changeRoute(route: any) {
-    if (!route) {
-      return true;
-    }
-
-    const routeInfo = this.getRouteByName(route.name);
-
-    if (!routeInfo) {
-      return true;
-    }
-
-    if (
-      (await this.beforeRouteChange.emitAsync({ route, routeInfo })) !== false
-    ) {
-      this.currentRoute = route;
-
-      this.routeChange.emit({ route, routeInfo });
-
-      return true;
-    }
-
-    return false;
-  }
 }

package/src/core/UserSession.ts

@@ -166,24 +166,6 @@ export class UserSession extends Disposable {
       this.beforeInitRouterEvent.emit();
       this.router.init();
 
-      this.router.routeChange.on(({ route, routeInfo }) => {
-        const menuNode = this.menu.findMenuNodeByID(routeInfo.menuId);
-
-        this.menu.setCurrentMenuNode(menuNode);
-
-        const tab =
-          this.tabs.findTabByID(routeInfo.name) ??
-          this.tabs.createTab({
-            id: routeInfo.name,
-            title: routeInfo.title,
-            affix: route.matched?.[route.matched?.length - 1]?.meta?.affix,
-            realRoute: route,
-            route: routeInfo,
-          });
-
-        this.tabs.switchTab(tab);
-      });
-
       return response;
     } catch (e) {
       httpRequest.getInterceptors().request.eject(beforeRequestInterceptorID);