@maketribe/ms-app 3.0.13 → 3.0.15

package/package.json

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

package/src/components/column-components/column-date/column-date-options.ts

@@ -0,0 +1,12 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { columnTextProps } from "../column-text";
+
+export const dateTypes = ["date", "year", "month", "datetime"] as const;
+
+export const columnDateProps = buildProps({
+  ...columnTextProps,
+  type: { default: "date", values: dateTypes },
+});
+
+export type ColumnDateProps = ExtractPropTypes<typeof columnDateProps>;

package/src/components/column-components/column-date/column-date.tsx

@@ -0,0 +1,47 @@
+import { isFunction } from "lodash-es";
+import { computed, defineComponent, unref } from "vue";
+import { dayjs } from "element-plus";
+
+import { useColumn } from "../../data-model/data-table/composables";
+import { MKColumnText } from "../column-text";
+import { columnDateProps } from "./column-date-options";
+
+export default defineComponent({
+  name: "MKColumnDate",
+  props: columnDateProps,
+  setup(props) {
+    const columnTextProps = computed(() => {
+      const { type, ...columnTextProps } = props;
+      return columnTextProps;
+    });
+
+    const type = computed(() => props.type);
+
+    const formatValue = (value: string) => {
+      const dayInstance = dayjs(value ?? null);
+
+      if (!dayInstance.isValid()) {
+        return;
+      }
+
+      switch (unref(type)) {
+        case "datetime":
+          return dayInstance.format("YYYY-MM-DD HH:mm:ss");
+        case "date":
+          return dayInstance.format("YYYY-MM-DD");
+        case "month":
+          return dayInstance.format("YYYY-MM");
+        case "year":
+          return dayInstance.format("YYYY");
+        default:
+          return props.formatValue(value);
+      }
+    };
+
+    return () => {
+      return (
+        <MKColumnText {...unref(columnTextProps)} formatValue={formatValue} />
+      );
+    };
+  },
+});

package/src/components/column-components/column-date/index.ts

@@ -0,0 +1,6 @@
+import ColumnDate from "./column-date";
+
+export const MKColumnDate = ColumnDate;
+export default MKColumnDate;
+
+export * from "./column-date-options";

package/src/components/column-components/column-switch/column-switch-options.ts

@@ -0,0 +1,16 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { columnProps } from "../../data-model/data-table/composables";
+
+export const columnSwitchProps = buildProps({
+  ...columnProps,
+  disabled: { type: Boolean, default: true },
+} as const);
+
+export type ColumnSwitchProps = ExtractPropTypes<typeof columnSwitchProps>;
+
+export const columnSwitchEmits = {
+  change: (value: boolean, row: any) => true,
+};
+
+export type ColumnSwitchEmits = typeof columnSwitchEmits;

package/src/components/column-components/column-switch/column-switch.tsx

@@ -0,0 +1,32 @@
+import { computed, defineComponent, unref } from "vue";
+import { ElSwitch } from "element-plus";
+
+import { useColumn } from "../../data-model/data-table/composables";
+import { columnSwitchEmits, columnSwitchProps } from "./column-switch-options";
+
+export default defineComponent({
+  name: "MKColumnSwitch",
+  props: columnSwitchProps,
+  emits: columnSwitchEmits,
+  setup(props, { emit }) {
+    const { value } = useColumn(props);
+
+    const disabled = computed(() => props.disabled);
+
+    const handleChange = (value: boolean) => {
+      emit("change", value, props.row);
+    };
+
+    return () => {
+      return (
+        <div class="mk-column-switch">
+          <ElSwitch
+            disabled={unref(disabled)}
+            modelValue={unref(value)}
+            onChange={handleChange as any}
+          />
+        </div>
+      );
+    };
+  },
+});

package/src/components/column-components/column-switch/index.ts

@@ -0,0 +1,6 @@
+import ColumnSwitch from "./column-switch";
+
+export const MKColumnSwitch = ColumnSwitch;
+export default MKColumnSwitch;
+
+export * from "./column-switch-options";

package/src/components/column-components/column-tag/column-tag-options.ts

@@ -0,0 +1,42 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { columnProps } from "../../data-model/data-table/composables";
+
+export const columnTagProps = buildProps({
+  ...columnProps,
+  type: {
+    default: "",
+    values: ["", "success", "warning", "info", "danger"],
+  },
+  effect: {
+    default: "light",
+    values: ["light", "dark"],
+  },
+  color: {
+    type: String,
+    default: "",
+  },
+  hit: {
+    type: Boolean,
+    default: false,
+  },
+  round: {
+    type: Boolean,
+    default: false,
+  },
+  width: {
+    type: String,
+    default: ""
+  },
+  options: {
+    type: Array<{
+      label: string;
+      value: any;
+      color: string;
+      type: "" | "success" | "warning" | "info" | "danger";
+    }>,
+    default: () => [],
+  },
+} as const);
+
+export type ColumnTagProps = ExtractPropTypes<typeof columnTagProps>;

package/src/components/column-components/column-tag/column-tag.tsx

@@ -0,0 +1,59 @@
+import { computed, defineComponent, unref } from "vue";
+import { ElTag } from "element-plus";
+
+import { useColumn } from "../../data-model/data-table/composables";
+import { columnTagProps } from "./column-tag-options";
+
+export default defineComponent({
+  name: "MKColumnTag",
+  props: columnTagProps,
+  setup(props) {
+    const { value } = useColumn(props);
+
+    const options = computed(() => props.options);
+
+    const tagStyle = computed(() => ({ width: props.width }));
+
+    const currentOption = computed(() =>
+      unref(options).find((option) => option.value === unref(value))
+    );
+
+    return () => {
+      const _currentOption = unref(currentOption);
+
+      let content;
+
+      if (!_currentOption) {
+        content = (
+          <ElTag
+            style={unref(tagStyle)}
+            disableTransitions
+            type={props.type}
+            effect={props.effect}
+            hit={props.hit}
+            color={props.color}
+            round={props.round}
+          >
+            {unref(value)}
+          </ElTag>
+        );
+      } else {
+        content = (
+          <ElTag
+            style={unref(tagStyle)}
+            disableTransitions
+            type={_currentOption.type}
+            effect={props.effect}
+            hit={props.hit}
+            color={_currentOption.color}
+            round={props.round}
+          >
+            {_currentOption.label || _currentOption.value}
+          </ElTag>
+        );
+      }
+
+      return <div class="mk-column-tag">{content}</div>;
+    };
+  },
+});

package/src/components/column-components/column-tag/index.ts

@@ -0,0 +1,6 @@
+import ColumnTag from "./column-tag";
+
+export const MKColumnTag = ColumnTag;
+export default MKColumnTag;
+
+export * from "./column-tag-options";

package/src/components/column-components/index.ts

@@ -4,3 +4,6 @@ export * from "./column-text";
 export * from "./column-object-mapping-text";
 export * from "./column-select";
 export * from "./column-json";
+export * from "./column-date";
+export * from "./column-switch";
+export * from "./column-tag";

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

@@ -89,7 +89,7 @@ export default defineComponent({
       return (
         <div class="mk-classify-search-item">
           {title}
-          {tags}
+          <div class="mk-classify-search-item__conditions">{tags}</div>
         </div>
       );
     };

package/src/components/form-components/form-date-picker/form-date-picker.tsx

@@ -17,9 +17,11 @@ export default defineComponent({
     );
 
     const valueFormat = computed(() => {
+      if (props.valueFormat) {
+        return props.valueFormat;
+      }
+
       switch (unref(type)) {
-        case "date":
-          return "YYYY-MM-DD";
         case "datetime":
           return "YYYY-MM-DD HH:mm:ss";
         case "month":
@@ -27,13 +29,14 @@ export default defineComponent({
         case "year":
           return "YYYY";
         default:
-          return props.valueFormat;
+          return "YYYY-MM-DD";
       }
     });
 
     return () => {
       return (
         <ElDatePicker
+          class="mk-form-date-picker"
           type={unref(type)}
           valueFormat={unref(valueFormat)}
           disabled={unref(disabled)}

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

@@ -1,7 +1,9 @@
+import { defineAsyncComponent } from "vue";
 import { withInstall } from "@maketribe/utils";
-import MarkdownEditor from "./markdown-editor";
 
-export const MKMarkdownEditor = withInstall(MarkdownEditor);
+const _MarkdownEditor = defineAsyncComponent(() => import("./markdown-editor"));
+
+export const MKMarkdownEditor = withInstall(_MarkdownEditor);
 
 export default MKMarkdownEditor;
 

package/src/components/rich-text-editor/index.ts

@@ -1,6 +1,10 @@
+import { defineAsyncComponent } from "vue";
 import { withInstall } from "@maketribe/utils";
-import RichTextEditor from "./rich-text-editor";
 
-export const MKRichTextEditor = withInstall(RichTextEditor);
+const _RichTextEditor = defineAsyncComponent(
+  () => import("./rich-text-editor")
+);
+
+export const MKRichTextEditor = withInstall(_RichTextEditor);
 
 export * from "./rich-text-editor-options";

package/src/core/component/DataTableComponents.ts

@@ -55,5 +55,29 @@ export class DataTableComponents extends Components {
         () => import("../../components/column-components/column-json")
       ),
     });
+
+    this.registerComponent({
+      name: "MKColumnDate",
+      title: "日期时间",
+      component: defineAsyncComponent(
+        () => import("../../components/column-components/column-date")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKColumnSwitch",
+      title: "开关",
+      component: defineAsyncComponent(
+        () => import("../../components/column-components/column-switch")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKColumnTag",
+      title: "标签",
+      component: defineAsyncComponent(
+        () => import("../../components/column-components/column-tag")
+      ),
+    });
   }
 }

package/src/dataview/ip-white-list/IPWhitelistForm.ts

@@ -23,6 +23,14 @@ export class IPWhitelistForm<T = IPWhitelist, F = T> extends DataForm<T, F> {
         required: true,
         rules: [{ message: "请输入正确的IP", pattern: IP_PATTERN }],
       }),
+      new FormColumn({
+        name: "createdAt",
+        label: "创建时间",
+        componentInfo: "MKFormDatePicker",
+        componentProps: {
+          type: "datetime",
+        },
+      }),
     ]);
   }
 }

package/src/dataview/role/RoleTable.ts

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

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

@@ -91,7 +91,9 @@ watch(
         isShowDialog.value = true;
 
         try {
-          const response = await _dataForm.editRecord(item);
+          const response = await _dataForm.editRecord(
+            item[dataTable.primaryKey]
+          );
 
           if (response.data.code !== 200) {
             ElMessage.error(response.data.msg);

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

@@ -78,7 +78,9 @@ watch(
         isShowDataForm.value = true;
 
         try {
-          const response = await _dataForm.editRecord(item);
+          const response = await _dataForm.editRecord(
+            item[dataTable.primaryKey]
+          );
 
           if (response.data.code !== 200) {
             ElMessage.error(response.data.msg);

package/src/page/index/dv/local-log/index.vue

@@ -86,13 +86,13 @@ const handleViewLogClick = async (node: any) => {
 
 onMounted(() => {
   localLogTree.initdEvent.once(async () => {
-    await nextTick();
+    setTimeout(() => {
+      const node = unref(treeRef)?.treeRef?.getNode(localLogTree.rootNode!.id);
 
-    const node = unref(treeRef)?.treeRef?.getNode(localLogTree.rootNode!.id);
-
-    if (node) {
-      node.expand();
-    }
+      if (node) {
+        node.expand();
+      }
+    });
   });
 });
 </script>