@maketribe/ms-app 3.0.30 → 3.0.32

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

@@ -0,0 +1,5 @@
+export * from "./table";
+export * from "./table-tree";
+export * from "./tree";
+export * from "./table-view";
+export * from "./tree-view";

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

@@ -0,0 +1,8 @@
+import { withInstall } from "@maketribe/utils";
+import Table from "./table";
+
+export const MKTable = withInstall(Table);
+
+export default MKTable;
+
+export * from "./table-options";

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

@@ -0,0 +1,12 @@
+import { ExtractPropTypes } from "vue";
+import { DataTable } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+
+export const tableProps = buildProps({
+  dataTable: {
+    type: DataTable<any>,
+    required: true,
+  },
+} as const);
+
+export type TableProps = ExtractPropTypes<typeof tableProps>;

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

@@ -0,0 +1,98 @@
+import { computed, defineComponent, unref } from "vue";
+import { Column, ElEmpty, ElTable, ElTableColumn } from "element-plus";
+import { tableProps } from "./table-options";
+import { MKDataTableColumn } from "../../data-table-column";
+import MKDataTableColumnComponent from "../../data-table-column-component";
+import { OrderType } from "@maketribe/dm";
+
+export default defineComponent({
+  name: "MKTable",
+  props: tableProps,
+  setup(props, { slots }) {
+    const dataTable = computed(() => props.dataTable);
+
+    type SortChangeEvent = { column: Column; prop: string; order: string };
+    const handleSortChange = ({ column, prop, order }: SortChangeEvent) => {
+      let orderType: OrderType | null = null;
+
+      if (order === "descending") {
+        orderType = OrderType.DESC;
+      } else if (order === "ascending") {
+        orderType = OrderType.ASC;
+      }
+
+      unref(dataTable).sorter.setColumnSort(prop, orderType);
+    };
+
+    return () => {
+      const columns = unref(dataTable)
+        .getColumns()
+        .filter((column) => column.visible && column.name)
+        .map((column) => {
+          const columnProps: Record<string, any> = {
+            prop: column.name,
+            label: column.label,
+            width: column.width,
+            minWidth: column.minWidth,
+            fixed: column.fixed,
+            align: column.align || "center",
+            reserveSelection: true,
+            type: column.type === null ? "default" : column.type,
+            sortable: column.sortable,
+          };
+
+          if (!column.visible) {
+            return null;
+          }
+
+          return (
+            slots[`col-${column.name}`]?.() ?? (
+              <ElTableColumn
+                {...columnProps}
+                v-slots={{
+                  default: (scope: {
+                    $index: number;
+                    row: any;
+                    column: any;
+                  }) => {
+                    let children = slots[`col-${column.name}-content`]?.({
+                      $index: scope.$index,
+                      row: scope.row,
+                      column: column,
+                      dataTable: unref(dataTable),
+                    });
+
+                    if (children) {
+                      return children;
+                    }
+
+                    return (
+                      <MKDataTableColumnComponent
+                        column={column}
+                        row={scope.row}
+                        index={scope.$index}
+                      />
+                    );
+                  },
+                }}
+              />
+            )
+          );
+        });
+
+      return (
+        <ElTable
+          data={unref(dataTable).getList()}
+          rowKey={unref(dataTable).primaryKey}
+          onSort-change={handleSortChange}
+          show-overflow-tooltip
+          border
+          stripe
+          v-slots={{ empty: () => slots.empty?.() || <ElEmpty /> }}
+        >
+          {columns}
+        </ElTable>
+      );
+    };
+  },
+});

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

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

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

@@ -0,0 +1,12 @@
+import { ExtractPropTypes } from "vue";
+import { DataTree } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+
+export const tableTreeProps = buildProps({
+  dataTree: {
+    type: DataTree<any>,
+    required: true,
+  },
+} as const);
+
+export type TableTreeProps = ExtractPropTypes<typeof tableTreeProps>;

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

@@ -0,0 +1,104 @@
+import { computed, defineComponent, unref } from "vue";
+import { ElEmpty, ElTable, ElTableColumn, TreeNode } from "element-plus";
+import { tableTreeProps } from "./table-tree-options";
+import { MKDataTableColumn } from "../../data-table-column";
+import MKDataTableColumnComponent from "../../data-table-column-component";
+import { DataTreeNode } from "@maketribe/dm";
+
+export default defineComponent({
+  name: "MKTableTree",
+  props: tableTreeProps,
+  setup(props, { slots }) {
+    const dataTree = computed(() => props.dataTree);
+
+    const treeProps = computed(() => {
+      const _dataTre = unref(dataTree);
+
+      return { children: _dataTre.props.children, hasChildren: "hasChildren" };
+    });
+
+    const handleLoad = async (
+      row: DataTreeNode,
+      node: TreeNode,
+      resolve: Function
+    ) => {
+      await row.load();
+
+      resolve(row.children);
+    };
+
+    return () => {
+      const columns = unref(dataTree)
+        .getColumns()
+        .filter((column) => column.visible && column.name)
+        .map((column) => {
+          const columnProps: Record<string, any> = {
+            prop: column.name,
+            label: column.label,
+            width: column.width,
+            minWidth: column.minWidth,
+            fixed: column.fixed,
+            reserveSelection: true,
+            type: column.type,
+          };
+
+          if (!column.visible) {
+            return null;
+          }
+
+          return (
+            // TODO 这里 不用这个组件的原因，因为ElTableColumn要去获取ElTable，但是他是通过instance.parent获取的，我添加这个组件会导致获取不到，出现一些问题
+            // <MKDataTableColumn column={column}>
+            slots[`col-${column.name}`]?.() ?? (
+              <ElTableColumn
+                {...columnProps}
+                v-slots={{
+                  default: (scope: {
+                    $index: number;
+                    row: any;
+                    column: any;
+                  }) => {
+                    let children = slots[`col-${column.name}-content`]?.({
+                      $index: scope.$index,
+                      row: scope.row,
+                      column: column,
+                      dataTable: unref(dataTree),
+                    });
+
+                    if (children) {
+                      return children;
+                    }
+
+                    return (
+                      <MKDataTableColumnComponent
+                        column={column}
+                        row={scope.row.data}
+                        index={scope.$index}
+                      />
+                    );
+                  },
+                }}
+              />
+            )
+            // </MKDataTableColumn>
+          );
+        });
+
+      return (
+        <ElTable
+          data={unref(dataTree).children}
+          rowKey={unref(dataTree).primaryKey}
+          show-overflow-tooltip
+          border
+          stripe
+          lazy
+          v-slots={{ empty: () => slots.empty?.() || <ElEmpty /> }}
+          tree-props={unref(treeProps)}
+          load={handleLoad}
+        >
+          {columns}
+        </ElTable>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,34 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const classifySearchItemProps = buildProps({
+  modelValue: { type: null },
+  label: { type: String },
+  labelWidth: { type: String },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  options: {
+    type: Array,
+  },
+  formatOptions: {
+    type: Function,
+    default: (item: any) => {
+      const value = item.value ?? item.id ?? item.name;
+      const label = item.label ?? item.desc ?? item.title ?? item.name;
+
+      return { value, label };
+    },
+  },
+});
+
+export type ClassifySearchItemProps = ExtractPropTypes<
+  typeof classifySearchItemProps
+>;
+
+export const classifySearchItemEmits = {
+  "update:model-value": (modelValue: any) => true,
+};
+
+export type ClassifySearchItemEmits = typeof classifySearchItemEmits;

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

@@ -0,0 +1,97 @@
+import { defineComponent, computed, unref, ComputedRef } from "vue";
+import { ElTag } from "element-plus";
+import {
+  classifySearchItemProps,
+  classifySearchItemEmits,
+} from "./classify-search-item-options";
+
+export type DataOptionItem = { value: any; label: string };
+
+export default defineComponent({
+  name: "MKTableClassifySearchItem",
+  props: classifySearchItemProps,
+  emits: classifySearchItemEmits,
+  setup(props, { emit }) {
+    const modelValue = computed({
+      get: () => {
+        if (props.multiple) {
+          return Array.isArray(props.modelValue)
+            ? props.modelValue
+            : props.modelValue
+            ? [props.modelValue]
+            : [];
+        }
+
+        return props.modelValue;
+      },
+      set: (v: any) => emit("update:model-value", v),
+    });
+
+    const handleClick = (item: any) => {
+      let _modelValue = unref(modelValue);
+      if (props.multiple) {
+        const index = _modelValue.findIndex((v: any) => v === item.value);
+
+        if (index > -1) {
+          _modelValue.splice(index, 1);
+        } else {
+          _modelValue.push(item.value);
+        }
+
+        modelValue.value = _modelValue;
+
+        return;
+      }
+
+      modelValue.value = item?.value ?? null;
+    };
+
+    const options: ComputedRef<DataOptionItem[]> = computed(() => {
+      if (Array.isArray(props.options)) {
+        return props.options.map((item) => props.formatOptions(item));
+      }
+
+      return [];
+    });
+
+    const labelStyle: ComputedRef<any> = computed(() => {
+      if (props.labelWidth) {
+        return { width: props.labelWidth };
+      }
+
+      return {};
+    });
+
+    return () => {
+      const title = props.label ? (
+        <div class="mk-classify-search-item-title" style={unref(labelStyle)}>
+          {props.label}
+        </div>
+      ) : null;
+
+      const tags = unref(options).map((item) => {
+        const isSelect = props.multiple
+          ? unref(modelValue).includes(item.value)
+          : item.value === unref(modelValue);
+
+        return (
+          <ElTag
+            key={item.value}
+            effect={isSelect ? "dark" : "light"}
+            onClick={() => handleClick(item)}
+            disable-transitions
+          >
+            {item.label}
+          </ElTag>
+        );
+      });
+
+      return (
+        <div class="mk-classify-search-item">
+          {title}
+          <div class="mk-classify-search-item__conditions">{tags}</div>
+        </div>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,5 @@
+import TableClassifySearchItem from "./classify-search-item";
+
+export const MKTableClassifySearchItem = TableClassifySearchItem;
+
+export default TableClassifySearchItem;

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

@@ -0,0 +1,40 @@
+import { Fragment, computed, defineComponent, inject, unref } from "vue";
+import MKTableClassifySearchItem from "./classify-search-item";
+import { DATATABLE_CONTEXT_KEY } from "../../../token";
+
+export default defineComponent({
+  name: "MKTableClassifySearch",
+  setup(props, { slots }) {
+    const dataTable = inject(DATATABLE_CONTEXT_KEY)?.dataTable;
+
+    const classifySearch = computed(() => dataTable?.classifySearch ?? null);
+
+    return () => {
+      let children: any = slots.default?.();
+
+      const _classifySearch = unref(classifySearch);
+
+      if (!children && _classifySearch) {
+        children = (
+          <Fragment>
+            {_classifySearch.getClassifySearchItems().map((item) => (
+              <MKTableClassifySearchItem
+                label={item.label}
+                labelWidth={_classifySearch.labelWidth}
+                modelValue={_classifySearch.getParam(item.name)}
+                onUpdate:model-value={(v: any) => {
+                  _classifySearch.setParam(item.name, v);
+                }}
+                multiple={item.multiple}
+                options={item.options}
+                formatOptions={item.formatOptions || undefined}
+              />
+            ))}
+          </Fragment>
+        );
+      }
+
+      return <div class="mk-classify-search">{children}</div>;
+    };
+  },
+});

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

@@ -0,0 +1,7 @@
+import TableClassifySearch from "./classify-search";
+
+export const MKTableClassifySearch = TableClassifySearch;
+
+export default TableClassifySearch;
+
+export * from "./classify-search-item";

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

@@ -0,0 +1,8 @@
+import { withInstall } from "@maketribe/utils";
+import TableView from "./table-view";
+
+export const MKTableView = withInstall(TableView);
+
+export default MKTableView;
+
+export * from "./classify-search";

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

@@ -0,0 +1,13 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { DataTable } from "@maketribe/dm";
+
+export const tableViewProps = buildProps({
+  dataTable: { type: DataTable<any>, required: true },
+} as const);
+
+export type TableViewProps = ExtractPropTypes<typeof tableViewProps>;
+
+export const tableViewEmits = {};
+
+export const TableViewEmits = typeof tableViewEmits;

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

@@ -0,0 +1,126 @@
+import { Fragment, VNode, computed, defineComponent, unref, watch } from "vue";
+import { ElButton, ElCard } from "element-plus";
+
+import { MKButton } from "../../../../button";
+import { MKTableClassifySearch } from "./classify-search";
+import { MKDataTablePagination } from "../../../data-table-pagination";
+import { MKDataFilterPopover } from "../../../data-filter-popover";
+import { MKSvgIcon } from "../../../../svg-icon";
+import { MKTable } from "../table";
+import { tableViewProps } from "./table-view-options";
+
+export default defineComponent({
+  name: "MKTableView",
+  props: tableViewProps,
+  setup(props, { slots }) {
+    const dataTable = computed(() => props.dataTable);
+
+    const pageSizes = computed(() => unref(dataTable).pageSizes);
+
+    watch(
+      dataTable,
+      (dataTable) => {
+        const dataFilter = dataTable.dataFilter;
+
+        if (dataFilter.getColumns().length === 0) {
+          dataFilter.setReady();
+        }
+      },
+      { immediate: true }
+    );
+
+    return () => {
+      const pagination =
+        slots.pagination?.({ dataTable: unref(dataTable) }) ||
+        (unref(pageSizes).length ? (
+          <MKDataTablePagination dataTable={unref(dataTable)} />
+        ) : null);
+
+      return (
+        <ElCard
+          class="mk-table-view"
+          v-slots={{
+            header: () => {
+              const _dataTable = unref(dataTable);
+
+              const buttons = _dataTable.buttonTools
+                .filter((button) => button.predicate())
+                .map((button) => (
+                  <MKButton button={button} onClick={() => button.handler()} />
+                ));
+
+              let classifySearch: any = slots["classify-search"]?.() ?? null;
+              if (
+                !classifySearch &&
+                _dataTable.classifySearch.getClassifySearchItems().length
+              ) {
+                classifySearch = <MKTableClassifySearch />;
+              }
+
+              let tools: VNode;
+
+              if (!_dataTable.getSelection().length) {
+                tools = (
+                  <Fragment>
+                    <div class="header-box-main"></div>
+                    <div class="header-box-tools">
+                      {_dataTable.dataFilter.getColumns().length ? (
+                        <MKDataFilterPopover dataTable={_dataTable}>
+                          <ElButton>
+                            <MKSvgIcon iconClass="Filter" />
+                          </ElButton>
+                        </MKDataFilterPopover>
+                      ) : null}
+                      {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>
+                    </div>
+                    <div class="mk-table-view__selection-tip-right">
+                      {_dataTable.batchActionButtonTools.map((button) => (
+                        <MKButton
+                          link
+                          button={button}
+                          onClick={() => button.handler()}
+                        />
+                      ))}
+                      <ElButton
+                        link
+                        onClick={() => _dataTable.clearSelection()}
+                      >
+                        取消选择
+                      </ElButton>
+                    </div>
+                  </div>
+                );
+              }
+
+              return (
+                <Fragment>
+                  {classifySearch}
+                  <div class="mk-table-view__header header-box">{tools}</div>
+                </Fragment>
+              );
+            },
+          }}
+        >
+          {slots.default?.({ dataTable: unref(dataTable) }) || (
+            <MKTable dataTable={unref(dataTable)} />
+          )}
+          {pagination}
+        </ElCard>
+      );
+    };
+  },
+});

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

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

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

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