@maketribe/ms-app 3.0.4 → 3.0.5

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

@@ -0,0 +1,338 @@
+import {
+  Ref,
+  computed,
+  defineComponent,
+  provide,
+  reactive,
+  ref,
+  unref,
+  watch,
+} from "vue";
+import { searchEmits, searchProps } from "./search-options";
+import { FilterColumn, Operator, isWhereFilter } from "@maketribe/dm";
+import { TABLE_SEARCH_CONTEXT_KEY } from "./token";
+import MKTableSearchItem from "./search-item";
+import {
+  ElButton,
+  ElOption,
+  ElSelect,
+  ElTabPane,
+  ElTabs,
+  TabPaneName,
+  ElTooltip,
+} from "element-plus";
+import MKSvgIcon from "../../../../../svg-icon";
+import MKTableSearchDrawer from "./search-drawer";
+import { OPERATOR_OPTIONS } from "./operator-options";
+import { I18n } from "@maketribe/locale";
+import { SearchItemComponent } from "./search-item/search-item";
+
+type ConditionTag = {
+  name: string;
+  title: string;
+  value: any;
+  operator?: Operator;
+};
+
+export default defineComponent({
+  name: "MKTableSearch",
+  props: searchProps,
+  emits: searchEmits,
+  setup(props, { emit }) {
+    const dataFilter = computed(() => props.dataFilter);
+    const columns = computed(() => unref(dataFilter).getColumns());
+
+    const currentColumn: Ref<FilterColumn | null> = ref(null);
+
+    const searchItemComponent: Ref<SearchItemComponent | null> = ref(null);
+
+    const currentColumnValue = computed({
+      get: () => {
+        const _currentColumn = unref(currentColumn);
+
+        if (!_currentColumn) {
+          return;
+        }
+        return unref(dataFilter).getParam(_currentColumn.name);
+      },
+      set: (v) => {
+        const _currentColumn = unref(currentColumn);
+
+        if (!_currentColumn) {
+          return;
+        }
+
+        unref(dataFilter).setParam(_currentColumn.name, v);
+      },
+    });
+
+    const isShowDrawer = ref(false);
+
+    // 是否显示过基础查询的按钮
+    const isViewBaseSearchBtn = ref(true);
+
+    const conditionTags: Ref<ConditionTag[]> = ref([]);
+
+    const handleColumnChange = (value: string) => {
+      unref(dataFilter).clearParams();
+
+      const column = unref(dataFilter).getColumn(value);
+
+      if (column) {
+        currentColumn.value = column;
+      }
+
+      if (!unref(isViewBaseSearchBtn)) {
+        handleSearch();
+        isViewBaseSearchBtn.value = true;
+      }
+    };
+
+    const showDrawer = () => {
+      isShowDrawer.value = true;
+    };
+
+    const handleSearch = () => {
+      emit("search");
+      isViewBaseSearchBtn.value = false;
+      isShowDrawer.value = false;
+    };
+
+    const handleBaseSearch = () => {
+      if (unref(searchItemComponent)?.isEmpty()) {
+        return;
+      }
+
+      handleSearch();
+    };
+
+    // 基础重置按钮
+    const handleBaseResetSearch = () => {
+      unref(searchItemComponent)?.reset();
+
+      handleSearch();
+
+      isViewBaseSearchBtn.value = true;
+    };
+
+    const searchHandle = (
+      result: Record<string, { operator?: Operator; value: any }>
+    ) => {
+      const _dataFilter = unref(dataFilter);
+
+      const _conditionTags: ConditionTag[] = [];
+
+      _dataFilter.clearParams();
+
+      for (const key of Object.keys(result)) {
+        const itemInfo = result[key];
+        _dataFilter.setParam(key, itemInfo.value);
+
+        if (isWhereFilter(_dataFilter)) {
+          _dataFilter.setParamOperator(key, itemInfo.operator!);
+
+          const option = OPERATOR_OPTIONS.find(
+            (option) => option.value === itemInfo.operator!
+          );
+
+          if (option) {
+            let title = "";
+
+            switch (option.value) {
+              case Operator.IN:
+              case Operator.NOT_IN:
+                break;
+              case Operator.BETWEEN:
+                break;
+              default:
+                title = I18n.instance.translate(option.tag, {
+                  fieldName: _dataFilter.getColumn(key)?.label ?? key,
+                  value: itemInfo.value,
+                });
+            }
+
+            _conditionTags.push({
+              name: key,
+              title,
+              operator: itemInfo.operator,
+              value: itemInfo.value,
+            });
+          }
+        } else {
+          _conditionTags.push({
+            name: key,
+            title: `${_dataFilter.getColumn(key)?.label ?? key} ${
+              itemInfo.value
+            }`,
+            value: itemInfo.value,
+          });
+        }
+      }
+
+      conditionTags.value = _conditionTags;
+
+      emit("search");
+    };
+
+    const handleDrawerConfirm = (
+      result: Record<string, { operator?: Operator; value: any }>
+    ) => {
+      if (Object.keys(result).length === 0) {
+        return;
+      }
+
+      searchHandle(result);
+    };
+
+    const handleConditionTagClose = (name: TabPaneName) => {
+      const tag = unref(conditionTags).find((tag) => tag.name === name);
+
+      if (!tag) {
+        return;
+      }
+
+      const _conditionTags = unref(conditionTags).filter(
+        (item) => item.name !== tag.name
+      );
+
+      searchHandle(
+        _conditionTags.reduce((result, tag) => {
+          result[tag.name] = { ...tag };
+          return result;
+        }, {} as Record<string, { operator?: Operator; value: any }>)
+      );
+    };
+
+    const handleReset = () => {
+      searchHandle({});
+    };
+
+    watch(
+      columns,
+      (columns) => {
+        const _currentColumn = unref(currentColumn);
+
+        if (_currentColumn && props.dataFilter.getColumn(_currentColumn.name)) {
+          return;
+        }
+
+        currentColumn.value = columns[0] ?? null;
+      },
+      { immediate: true }
+    );
+
+    watch(
+      dataFilter,
+      (dataFilter) => {
+        dataFilter.setReady();
+      },
+      { immediate: true }
+    );
+
+    provide(TABLE_SEARCH_CONTEXT_KEY, reactive({ dataFilter }));
+
+    return () => {
+      if (!unref(currentColumn)) {
+        return null;
+      }
+
+      const baseSearchTools = unref(isViewBaseSearchBtn) ? (
+        <ElButton
+          class="mk-data-table-search__search"
+          onClick={handleBaseSearch}
+        >
+          {I18n.instance.translate("mk.filterPanel.searchButton")}
+        </ElButton>
+      ) : (
+        <ElButton
+          class="mk-data-table-search__search"
+          onClick={handleBaseResetSearch}
+        >
+          {I18n.instance.translate("mk.filterPanel.resetButton")}
+        </ElButton>
+      );
+
+      const content =
+        unref(conditionTags).length !== 0 ? (
+          // 条件tag
+          <div class="mk-data-table-search__conditions">
+            <ElTabs onTabRemove={handleConditionTagClose}>
+              {unref(conditionTags).map((tag) => (
+                <ElTabPane name={tag.name} closable label={tag.title} />
+              ))}
+            </ElTabs>
+            <ElButton
+              class="mk-data-table-search__reset"
+              type="danger"
+              onClick={handleReset}
+            >
+              重置
+            </ElButton>
+          </div>
+        ) : (
+          // 输入框
+          <div class="mk-data-table-search__input">
+            <MKTableSearchItem
+              class="mk-data-table-search__current"
+              ref={(ref) => {
+                searchItemComponent.value =
+                  ref as unknown as SearchItemComponent;
+              }}
+              modelValue={unref(currentColumnValue)}
+              onUpdate:modelValue={(v: any) => {
+                currentColumnValue.value = v;
+              }}
+              onOperatorChange={(v: Operator) => {
+                const _dataFilter = unref(dataFilter);
+                const _currentColumn = unref(currentColumn);
+
+                if (isWhereFilter(_dataFilter) && _currentColumn) {
+                  _dataFilter.setParamOperator(_currentColumn.name, v);
+                }
+              }}
+              name={unref(currentColumn)!.name}
+              v-slots={{
+                label: () => {
+                  const options = unref(columns).map((item) => (
+                    <ElOption
+                      label={item.label}
+                      value={item.name}
+                      key={item.name}
+                    />
+                  ));
+                  return (
+                    <ElSelect
+                      modelValue={unref(currentColumn)!.name}
+                      onChange={handleColumnChange}
+                    >
+                      {options}
+                    </ElSelect>
+                  );
+                },
+              }}
+            />
+            {baseSearchTools}
+            <ElTooltip
+              content={I18n.instance.translate(
+                "mk.filterPanel.moreFilterButton"
+              )}
+              placement="top"
+            >
+              <ElButton class="mk-data-table-search__more" onClick={showDrawer}>
+                <MKSvgIcon iconClass="Filter" />
+              </ElButton>
+            </ElTooltip>
+
+            <MKTableSearchDrawer
+              onConfirm={handleDrawerConfirm}
+              dataFilter={unref(dataFilter)}
+              visible={unref(isShowDrawer)}
+              onUpdate:visible={(v: boolean) => (isShowDrawer.value = v)}
+            />
+          </div>
+        );
+
+      return <div class="mk-data-table-search">{content}</div>;
+    };
+  },
+});

package/src/components/data-model/data-table/views/table/search/token.ts

@@ -0,0 +1,28 @@
+import { InjectionKey } from "vue";
+import { DataFilter, FilterColumn, Operator } from "@maketribe/dm";
+import { OperatorOption } from "./operator-options";
+
+export interface TableSearchItem {
+  column: FilterColumn;
+  currentOperator: Operator | null;
+  operatorOptions: OperatorOption[];
+  setOperator(operator: Operator): void;
+  setOperatorOptions(options: OperatorOption[]): void;
+  setValue(value: any): void;
+  getValue(): any;
+}
+
+export interface TableSearchItemContext {
+  dataFilter: DataFilter;
+  tableSearchItem: TableSearchItem;
+}
+
+export interface TableSearchContext {
+  dataFilter: DataFilter;
+}
+
+export const TABLE_SEARCH_CONTEXT_KEY: InjectionKey<TableSearchContext> =
+  Symbol("TABLE_SEARCH_CONTEXT_KEY");
+
+export const TABLE_SEARCH_ITEM_CONTEXT_KEY: InjectionKey<TableSearchItemContext> =
+  Symbol("TABLE_SEARCH_ITEM_CONTEXT_KEY");

package/src/components/data-model/data-table/views/table/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/table-view.tsx

@@ -0,0 +1,166 @@
+import { Fragment, computed, defineComponent, unref } from "vue";
+import {
+  ElButton,
+  ElCard,
+  ElEmpty,
+  ElTable,
+  ElTableColumn,
+} from "element-plus";
+
+import { MKDataTableColumnComponent } from "../../data-table-column-component";
+import { MKButton } from "../../../../button";
+import { MKTableClassifySearch } from "./classify-search";
+import { MKDataTableColumn } from "../../data-table-column";
+import { MKDataTablePagination } from "../../../data-table-pagination";
+import { MKDataFilterPopover } from "../../../data-filter-popover";
+import { MKSvgIcon } from "../../../../svg-icon";
+import { tableViewProps } from "./table-view-options";
+
+export default defineComponent({
+  name: "MKTableView",
+  props: tableViewProps,
+  setup(props, { slots }) {
+    const pageSizes = computed(() => props.dataTable.pageSizes);
+
+    return () => {
+      const table = slots.table?.({ dataTable: props.dataTable }) || (
+        <ElTable
+          data={props.dataTable.getList()}
+          rowKey={props.dataTable.primaryKey}
+          border
+          stripe
+          v-slots={{ empty: () => slots.empty?.() || <ElEmpty /> }}
+        >
+          {props.dataTable
+            .getColumns()
+            .filter((column) => column.visible && column.name)
+            .map((column) => (
+              <MKDataTableColumn column={column}>
+                {slots[`col-${column.name}`]?.() ?? (
+                  <ElTableColumn
+                    prop={column.name}
+                    label={column.label}
+                    width={column.width}
+                    minWidth={column.minWidth}
+                    fixed={column.fixed}
+                    reserveSelection={true}
+                    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: props.dataTable,
+                        });
+
+                        if (children) {
+                          return children;
+                        }
+
+                        return (
+                          <MKDataTableColumnComponent
+                            column={column}
+                            row={scope.row}
+                            index={scope.$index}
+                          />
+                        );
+                      },
+                    }}
+                  />
+                )}
+              </MKDataTableColumn>
+            ))}
+        </ElTable>
+      );
+
+      const pagination =
+        slots.pagination?.({ dataTable: props.dataTable }) ||
+        (unref(pageSizes).length ? (
+          <MKDataTablePagination dataTable={props.dataTable} />
+        ) : null);
+
+      return (
+        <ElCard
+          class="mk-table-view"
+          v-slots={{
+            header: () => {
+              const _dataTable = props.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 />;
+              }
+
+              const tools = !_dataTable.getSelection().length ? (
+                <Fragment>
+                  <div class="header-box-main">
+                    {/* <MKTableSearch
+                      dataFilter={_dataTable.dataFilter}
+                      onSearch={handleSearch}
+                    /> */}
+                  </div>
+                  <div class="header-box-tools">
+                    <MKDataFilterPopover dataTable={_dataTable}>
+                      <ElButton>
+                        <MKSvgIcon iconClass="Filter" />
+                      </ElButton>
+                    </MKDataFilterPopover>
+
+                    {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}
+                      </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>
+              );
+            },
+          }}
+        >
+          {table}
+          {pagination}
+        </ElCard>
+      );
+    };
+  },
+});

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

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

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

@@ -0,0 +1,25 @@
+import { Ref, computed, defineComponent, ref, unref, watch } from "vue";
+import { DataTable } from "@maketribe/dm";
+import { dataTablePageProps } from "./data-table-page-options";
+import MKDataTable from "../data-table";
+
+export default defineComponent({
+  name: "MKDataTablePage",
+  props: dataTablePageProps,
+  setup(props, { slots }) {
+    const dataTable = computed(() => props.dataTable ?? null);
+
+    const loading = computed(() => unref(dataTable)?.loading ?? true);
+
+    return () => {
+      return (
+        <div class="mk-data-table-page" v-loading={unref(loading)}>
+          <MKDataTable
+            dataTable={unref(dataTable) as DataTable}
+            v-slots={{ ...slots }}
+          />
+        </div>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,6 @@
+import { withInstall } from "@maketribe/utils";
+import DataTablePage from "./data-table-page";
+
+export const MKDataTablePage = withInstall(DataTablePage);
+
+export default DataTablePage;

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

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

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

@@ -0,0 +1,22 @@
+import { defineComponent } from "vue";
+import { dataTablePaginationProps } from "./data-table-pagination-options";
+import MKPagination from "../../pagination";
+
+export default defineComponent({
+  name: "MKDataTablePagination",
+  props: dataTablePaginationProps,
+  setup(props) {
+    return () => {
+      return (
+        <MKPagination
+          currentPage={props.dataTable.currentPage}
+          pageSize={props.dataTable.pageSize}
+          pageSizes={props.dataTable.pageSizes}
+          total={props.dataTable.totalRecCount}
+          onUpdate:currentPage={(v) => props.dataTable.pageTo(v)}
+          onUpdate:pageSize={(v) => props.dataTable.setPageSize(v)}
+        />
+      );
+    };
+  },
+});

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

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import DataTablePagination from "./data-table-pagination";
+
+export const MKDataTablePagination = withInstall(DataTablePagination);
+export default DataTablePagination;
+
+export * from "./data-table-pagination-options";

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

@@ -0,0 +1,19 @@
+import { ExtractPropTypes } from "vue";
+import { DataTable } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+
+export const dataTreeProps = buildProps({
+  autoLoad: { type: true, default: true },
+  dataTable: {
+    type: DataTable<any>,
+    required: true,
+  },
+  props: {
+    type: Object,
+    default: () => ({ label: "title", children: "children" }),
+  },
+  filterNodeMethod: { type: Function },
+  defaultExpandAll: { type: Boolean, default: true },
+} as const);
+
+export type DataTreeProps = ExtractPropTypes<typeof dataTreeProps>;