@maketribe/ms-app 3.0.12 → 3.0.13

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maketribe/ms-app",
-  "version": "3.0.12",
+  "version": "3.0.13",
   "description": "",
   "main": "dist/cjs",
   "files": [
@@ -20,10 +20,10 @@
     "vue": "^3.3.4",
     "vue-codemirror": "^6.1.1",
     "vue-router": "^4.2.4",
-    "@maketribe/dm": "^3.0.8",
-    "@maketribe/locale": "^1.0.5",
+    "@maketribe/utils": "^1.1.3",
     "@maketribe/request": "^1.1.10",
-    "@maketribe/utils": "^1.1.3"
+    "@maketribe/dm": "^3.0.8",
+    "@maketribe/locale": "^1.0.5"
   },
   "scripts": {
     "build": "npm run clean && npm run build:js && npm run build:type && npm run build:style",

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/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);

package/src/core/tabs/Tabs.ts

@@ -94,7 +94,13 @@ export class Tabs extends Disposable {
 
   switchTab(tab: Tab | null) {
     // TODO 暂时用不到Tab
-    
+
+    // if (
+    //   this.getCurrentTab()?.realRoute?.fullPath === tab?.realRoute?.fullPath
+    // ) {
+    //   return;
+    // }
+
     this.setCurrentTab(tab);
     return;
 

package/src/dataview/member/MemberTable.tsx

@@ -1,3 +1,4 @@
+import { R } from "@maketribe/request";
 import {
   TableColumn,
   DataTable,
@@ -11,23 +12,22 @@ import {
   Dialoger,
   FormColumn,
 } from "@maketribe/dm";
-import { Event } from "@maketribe/utils";
 import { defineDataTable } from "../../define-data-table";
 import { Member, MemberForm, MemberResult } from "./MemberForm";
-import { R } from "@maketribe/request";
-import { MSAppClient } from "../../core";
 
 export type MemberTableItem = Omit<Member, "password" | "confirmPassword">;
 
 export class MemberTable extends DataTable<MemberResult, MemberTableItem> {
   activeMemberForm: MemberForm;
 
-  activeMemberEvent: Event<MemberTableItem> = this.register(new Event());
+  isShowActiveMemberForm: boolean;
 
   constructor(options: DataTableOptions = {}) {
     super({ name: "ms-member", ...options });
 
     this.activeMemberForm = new MemberForm();
+
+    this.isShowActiveMemberForm = false;
   }
 
   protected async initialize() {
@@ -96,19 +96,17 @@ export class MemberTable extends DataTable<MemberResult, MemberTableItem> {
       new TableActionColumn({
         width: "200px",
         buttons: [
-          new ActionButton({
-            label: "test",
-            handler: () => {
-              MSAppClient.instance!.vueRouter.push({
-                name: "dv/ms-role/single/list/dialog",
-                query: { id: "8" },
-              });
-            },
-          }),
           new ActionButton({
             label: "激活用户",
             handler: async (row) => {
-              this.activeMemberEvent.emit(row);
+              const response = await this.activeMemberForm.editRecord(row.id);
+
+              if (response.data.code !== 200) {
+                Messager.instance.error({ message: response.data.msg });
+                return;
+              }
+
+              this.isShowActiveMemberForm = true;
             },
             predicate: (member: MemberTableItem) => member.valid === 0,
           }),

package/src/dataview/role/RoleTable.ts

@@ -7,6 +7,7 @@ import {
   ActionButton,
   EditButton,
   DeleteButton,
+  ClassifySearchItem,
 } from "@maketribe/dm";
 import { defineDataTable } from "../../define-data-table";
 import { Role } from "./RoleForm";

package/src/layouts/components/bar/index.tsx

@@ -14,7 +14,8 @@ export const MKBar = defineComponent({
     const msAppClient = MSAppClient.instance!;
     const userSession = msAppClient.userSession!;
     const menu = userSession.menu;
-    const router = userSession.router;
+    const vueRouter = msAppClient.vueRouter;
+    // const router = userSession.router;
 
     const currentBarItem = computed(() => props.barItem);
 
@@ -30,7 +31,7 @@ export const MKBar = defineComponent({
       }
 
       if (target?.route) {
-        router.changeRoute({ name: target.route.name });
+        vueRouter.push({ name: target.route.name });
       }
     };