@maketribe/ms-app 3.0.7 → 3.0.9

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

@@ -1,130 +0,0 @@
-import { ElButton, ElDrawer } from "element-plus";
-import {
-  Fragment,
-  Ref,
-  computed,
-  defineComponent,
-  ref,
-  unref,
-  watch,
-} from "vue";
-import { searchDrawerEmits, searchDrawerProps } from "./search-drawer-options";
-import MKTableSearchItem from "../search-item";
-import { FilterColumn, Operator, isWhereFilter } from "@maketribe/dm";
-import { cloneDeep } from "lodash-es";
-
-export default defineComponent({
-  name: "MKTableSearchDrawer",
-  props: searchDrawerProps,
-  emits: searchDrawerEmits,
-  setup(props, { emit }) {
-    const visible = computed({
-      get: () => props.visible,
-      set: (v: boolean) => emit("update:visible", v),
-    });
-
-    const columns = computed(() => props.dataFilter.getColumns());
-
-    const params: Ref<Record<string, any>> = ref({});
-    const operators: Ref<Record<string, Operator>> = ref({});
-
-    const handleConfirm = () => {
-      const _params = unref(params);
-
-      const _operators = unref(operators);
-
-      const result: Record<string, { operator?: Operator; value: any }> = {};
-
-      for (const key of Object.keys(_params)) {
-        let value = _params[key];
-        const operator = _operators[key];
-
-        if (value == null) {
-          continue;
-        }
-
-        if (isWhereFilter(props.dataFilter)) {
-          if ([Operator.IN, Operator.NOT_IN].includes(operator)) {
-            value = Array.isArray(value) ? value : [value];
-
-            if (value.length === 0) {
-              continue;
-            }
-          }
-
-          if (operator === Operator.BETWEEN) {
-            if (value[0] == null || value[1] == null) {
-              continue;
-            }
-          }
-        }
-
-        result[key] = { operator, value };
-      }
-
-      visible.value = false;
-
-      emit("confirm", result);
-    };
-
-    const handleCancel = () => {
-      visible.value = false;
-    };
-
-    const handleOperatorChange = (column: FilterColumn, operator: Operator) => {
-      unref(operators)[column.name] = operator;
-    };
-
-    watch(
-      visible,
-      (visible) => {
-        if (!visible) {
-          return;
-        }
-
-        const dataFilter = props.dataFilter;
-
-        params.value = cloneDeep(dataFilter.getParams());
-
-        if (isWhereFilter(dataFilter)) {
-          operators.value = cloneDeep(dataFilter.getParamOperators());
-        }
-      },
-      { immediate: true }
-    );
-
-    return () => {
-      const searchItems = unref(columns).map((column) => (
-        <MKTableSearchItem
-          name={column.name}
-          modelValue={unref(params)[column.name]}
-          onOperatorChange={(operator: Operator) =>
-            handleOperatorChange(column, operator)
-          }
-          onUpdate:modelValue={(v: any) => (unref(params)[column.name] = v)}
-        />
-      ));
-
-      return (
-        <ElDrawer
-          title="多条件筛选"
-          appendToBody
-          modelValue={unref(visible)}
-          onUpdate:modelValue={(v) => (visible.value = v)}
-          v-slots={{
-            footer: () => (
-              <Fragment>
-                <ElButton type="primary" onClick={handleConfirm}>
-                  确定
-                </ElButton>
-                <ElButton onClick={handleCancel}>取消</ElButton>
-              </Fragment>
-            ),
-          }}
-        >
-          <div class="mk-data-table-search__drawer">{searchItems}</div>
-        </ElDrawer>
-      );
-    };
-  },
-});

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

@@ -1,5 +0,0 @@
-import TableSearchItem from "./search-item";
-
-export const MKTableSearchItem = TableSearchItem;
-
-export default MKTableSearchItem;

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

@@ -1,16 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-
-export const searchItemProps = buildProps({
-  name: { type: String, required: true },
-  modelValue: { type: null },
-} as const);
-
-export type SearchItemProps = ExtractPropTypes<typeof searchItemProps>;
-
-export const searchItemEmits = {
-  operatorChange: (operator: any) => true,
-  "update:modelValue": (modelValue: any) => true,
-};
-
-export type SearchItemEmits = typeof searchItemEmits;

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

@@ -1,160 +0,0 @@
-import {
-  Ref,
-  computed,
-  defineComponent,
-  inject,
-  provide,
-  reactive,
-  ref,
-  toRaw,
-  unref,
-  watch,
-} from "vue";
-import { isWhereFilter } from "@maketribe/dm";
-import { useFilterColumnComponent } from "../../../../../../../composables";
-import {
-  TABLE_SEARCH_CONTEXT_KEY,
-  TABLE_SEARCH_ITEM_CONTEXT_KEY,
-  TableSearchItem,
-  TableSearchItemContext,
-} from "../token";
-import { searchItemEmits, searchItemProps } from "./search-item-options";
-import { OperatorOption } from "../operator-options";
-import { ElOption, ElSelect } from "element-plus";
-import { I18n } from "@maketribe/locale";
-
-export type SearchItemComponent = {
-  isEmpty: () => boolean;
-  reset: () => void;
-};
-
-export default defineComponent({
-  name: "MKTableSearchItem",
-  props: searchItemProps,
-  emits: searchItemEmits,
-  setup(props, { slots, emit, expose }) {
-    const tableSearchContext = inject(TABLE_SEARCH_CONTEXT_KEY)!;
-
-    const dataFilter = tableSearchContext.dataFilter;
-
-    const searchItemComponent: Ref<SearchItemComponent | null> = ref(null);
-
-    const column = computed(() => dataFilter.getColumn(props.name));
-
-    const { component, componentProps } = useFilterColumnComponent(
-      column,
-      dataFilter
-    );
-
-    const createSearchItem = () => {
-      function setOperator(
-        this: TableSearchItem,
-        operator: OperatorOption["value"]
-      ) {
-        const _dataFilter = unref(dataFilter);
-        if (isWhereFilter(_dataFilter)) {
-          this.currentOperator = operator;
-
-          emit("operatorChange", operator);
-        }
-      }
-
-      function setOperatorOptions(
-        this: TableSearchItem,
-        options: OperatorOption[]
-      ) {
-        if (isWhereFilter(unref(dataFilter))) {
-          this.operatorOptions = options;
-        }
-      }
-
-      function setValue(this: TableSearchItem, value: any) {
-        emit("update:modelValue", value);
-      }
-
-      function getValue(this: TableSearchItem): any {
-        return props.modelValue;
-      }
-
-      const tableSearchItem: TableSearchItem = reactive({
-        column,
-        currentOperator: null,
-        operatorOptions: [],
-        setOperator,
-        setOperatorOptions,
-        setValue,
-        getValue,
-      }) as TableSearchItem;
-
-      return tableSearchItem;
-    };
-
-    const tableSearchItem = createSearchItem();
-
-    watch(
-      computed(() => props.modelValue),
-      (modelValue, oldValue) => {
-        if (modelValue !== oldValue) {
-          tableSearchItem.setValue(modelValue);
-        }
-      },
-      { immediate: true }
-    );
-
-    provide(
-      TABLE_SEARCH_ITEM_CONTEXT_KEY,
-      reactive({ dataFilter, tableSearchItem }) as TableSearchItemContext
-    );
-
-    expose({
-      reset: () => {
-        unref(searchItemComponent)?.reset();
-      },
-      isEmpty: () => {
-        return unref(searchItemComponent)?.isEmpty() ?? true;
-      },
-    });
-
-    return () => {
-      const FilterColumnComponent = toRaw(unref(component));
-
-      const children = (
-        <FilterColumnComponent
-          ref={(ref) => {
-            searchItemComponent.value = ref as unknown as SearchItemComponent;
-          }}
-          key={props.name}
-          {...unref(componentProps)}
-        />
-      );
-
-      const options = tableSearchItem.operatorOptions.map((option) => (
-        <ElOption
-          key={option.value}
-          value={option.value}
-          label={I18n.instance.translate(option.label)}
-        />
-      ));
-
-      const operatorSelect = isWhereFilter(dataFilter) ? (
-        <ElSelect
-          modelValue={tableSearchItem.currentOperator as any}
-          onUpdate:modelValue={(v) => tableSearchItem.setOperator(v)}
-          class="mk-data-table-search-item__operator"
-        >
-          {options}
-        </ElSelect>
-      ) : null;
-
-      return (
-        <div class="mk-data-table-search-item">
-          <span class="mk-data-table-search-item__label">
-            {slots.label?.() ?? unref(column)!.label}
-          </span>
-          {operatorSelect}
-          <div class="mk-data-table-search-item__input">{children}</div>
-        </div>
-      );
-    };
-  },
-});

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

@@ -1,18 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-import { DataFilter } from "@maketribe/dm";
-
-export const searchProps = buildProps({
-  dataFilter: {
-    type: DataFilter,
-    required: true,
-  },
-} as const);
-
-export type SearchProps = ExtractPropTypes<typeof searchProps>;
-
-export const searchEmits = {
-  search: () => true,
-};
-
-export type SearchEmits = typeof searchEmits;

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

@@ -1,338 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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");