@maketribe/ms-app 3.0.3 → 3.0.5

package/src/components/data-model/filter-panel/filter-panel.tsx

@@ -0,0 +1,102 @@
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  provide,
+  reactive,
+  unref,
+  useSlots,
+} from "vue";
+import { useRouter } from "vue-router";
+
+import FilterPanelItem from "./filter-panel-item/filter-panel-item";
+import { FILTER_PANEL_CONTEXT } from "./token";
+import { filterPanelEmits, filterPanelProps } from "./filter-panel-options";
+import { ElButton } from "element-plus";
+
+export default defineComponent({
+  name: "MKFilterPanel",
+  props: filterPanelProps,
+  emits: filterPanelEmits,
+  setup(props, { emit }) {
+    const slots = useSlots();
+    const router = useRouter();
+
+    const dataFilter = computed(() => props.dataFilter);
+
+    const columns = computed(() =>
+      unref(dataFilter)
+        .getColumns()
+        .filter((column) => column.visible)
+    );
+
+    provide(FILTER_PANEL_CONTEXT, reactive({ dataFilter }));
+
+    const handleSearch = () => {
+      emit("search");
+    };
+
+    const handleReset = () => {
+      unref(dataFilter)?.reset();
+
+      emit("search");
+    };
+
+    onMounted(() => {
+      const currentRoute = unref(router.currentRoute);
+
+      const queryFilterParams = currentRoute.query.filterParams;
+      if (typeof queryFilterParams === "string") {
+        try {
+          const filterParams = JSON.parse(
+            decodeURIComponent(queryFilterParams)
+          );
+          unref(dataFilter).setParams(filterParams);
+        } catch (e) {
+          unref(dataFilter).reset();
+        }
+      } else {
+        unref(dataFilter).reset();
+      }
+
+      unref(dataFilter).setReady();
+    });
+
+    return () => {
+      let children: any = slots.default?.();
+
+      if (!children) {
+        children = unref(columns).map((column) => {
+          if (!column.name) {
+            return null;
+          }
+
+          return (
+            slots[`col-${column.name}`]?.() || (
+              <FilterPanelItem
+                name={column.name}
+                v-slots={{ default: slots[`col-${column.name}-content`] }}
+              />
+            )
+          );
+        });
+      }
+
+      if (!children) {
+        return null;
+      }
+
+      return (
+        <div class="mk-filter-panel">
+          {children}
+          <div class="mk-filter-panel__tools">
+            <ElButton type="primary" onClick={handleSearch}>
+              查询
+            </ElButton>
+            <ElButton onClick={handleReset}>重置</ElButton>
+          </div>
+        </div>
+      );
+    };
+  },
+});

package/src/components/data-model/filter-panel/index.ts

@@ -0,0 +1,11 @@
+import { withInstall } from "@maketribe/utils";
+import FitlerPanel from "./filter-panel";
+import MKFilterPanelItem from "./filter-panel-item";
+
+export const MKFilterPanel = withInstall(FitlerPanel, {
+  MKFilterPanelItem,
+});
+export default MKFilterPanel;
+
+export * from "./filter-panel-options";
+export * from "./filter-panel-item";

package/src/components/data-model/filter-panel/operator-options.ts

@@ -0,0 +1,48 @@
+import { Operator } from "@maketribe/dm";
+
+export type OperatorOption = { value: Operator; label: string };
+
+export const EQUAL_OPTION: OperatorOption = {
+  value: Operator.EQUAL,
+  label: "mk.operator.equal",
+};
+
+export const CONTAIN_OPTION: OperatorOption = {
+  value: Operator.CONTAIN,
+  label: "mk.operator.contain",
+};
+
+export const IN_OPTION: OperatorOption = {
+  value: Operator.IN,
+  label: "mk.operator.in",
+};
+
+export const NOT_IN_OPTION: OperatorOption = {
+  value: Operator.NOT_IN,
+  label: "mk.operator.notIn",
+};
+
+export const LESS_THAN_OPTION: OperatorOption = {
+  value: Operator.LESS_THAN,
+  label: "mk.operator.lessThan",
+};
+
+export const LESS_THAN_EQUAL_OPTION: OperatorOption = {
+  value: Operator.LESS_THAN_EQUAL,
+  label: "mk.operator.lessThanEqual",
+};
+
+export const GREATER_THAN_OPTION: OperatorOption = {
+  value: Operator.GREATER_THAN,
+  label: "mk.operator.greaterThan",
+};
+
+export const GREATER_THAN_EQUAL_OPTION: OperatorOption = {
+  value: Operator.GREATER_THAN_EQUAL,
+  label: "mk.operator.greaterThanEqual",
+};
+
+export const BETWEEN_OPTION: OperatorOption = {
+  value: Operator.BETWEEN,
+  label: "mk.operator.between",
+};

package/src/components/data-model/filter-panel/token.ts

@@ -0,0 +1,17 @@
+import { Operator, FilterColumn, DataFilter } from "@maketribe/dm";
+
+import { OperatorOption } from "./operator-options";
+
+export interface FilterPanelItem {
+  dataFilter: DataFilter;
+  column: FilterColumn;
+  currentOperator: Operator | null;
+  operatorOptions: OperatorOption[];
+  setOperator(operator: Operator): void;
+  setOperatorOptions(options: OperatorOption[]): void;
+  setValue(value: any): void;
+  getValue(): any;
+}
+
+export const FILTER_PANEL_CONTEXT = Symbol("FILTER_PANEL_CONTEXT");
+export const FILTER_PANEL_ITEM_CONTEXT = Symbol("FILTER_PANEL_ITEM_CONTEXT");

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

@@ -0,0 +1,7 @@
+export * from "./data-form";
+export * from "./data-form-page";
+export * from "./data-table";
+export * from "./data-table-page";
+export * from "./data-tree";
+export * from "./data-tree-page";
+export * from "./data-table-pagination";

package/src/components/data-select/data-select-options.ts

@@ -0,0 +1,43 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { DataTable } from "@maketribe/dm";
+
+export const dataSelectProps = buildProps({
+  source: {
+    type: Object,
+  },
+  options: {
+    type: Array,
+  },
+  dataTable: {
+    type: DataTable<any>,
+  },
+  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 };
+    },
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  modelValue: {
+    type: null,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+} as const);
+
+export type DataSelectProps = ExtractPropTypes<typeof dataSelectProps>;
+
+export const dataSelectEmit = {
+  "update:model-value": (modelValue: any) => true,
+};
+
+export type DataSelectEmit = typeof dataSelectEmit;

package/src/components/data-select/data-select.tsx

@@ -0,0 +1,87 @@
+import { ComputedRef, computed, defineComponent, unref, watch } from "vue";
+import { ElSelect, ElOption } from "element-plus";
+import { DataSource, isDataTable } from "@maketribe/dm";
+
+import { dataSelectProps, dataSelectEmit } from "./data-select-options";
+
+export type DataOptionItem = { value: any; label: string };
+
+export default defineComponent({
+  name: "MKDataSelect",
+  props: dataSelectProps,
+  emits: dataSelectEmit,
+  setup(props, { emit }) {
+    const value = computed({
+      get: () => unref(props.modelValue),
+      set: (v) => {
+        emit("update:model-value", v);
+      },
+    });
+
+    const options: ComputedRef<DataOptionItem[]> = computed(() => {
+      if (props.dataTable) {
+        return props.dataTable
+          .getList()
+          .map((item) => props.formatOptions(item));
+      }
+
+      if (Array.isArray(props.options)) {
+        return props.options.map((item) => props.formatOptions(item));
+      }
+
+      if (props.source) {
+        const source = props.source;
+
+        switch (source.type) {
+          case DataSource.DATA:
+            return Array.isArray(source.value)
+              ? source.value.map((item) => props.formatOptions(item))
+              : [];
+
+          case DataSource.DATATABLE:
+            const dataTable = source.value;
+
+            if (isDataTable(dataTable)) {
+              return dataTable
+                .getList()
+                .map((item) => props.formatOptions(item));
+            }
+
+            return [];
+
+          default:
+            return [];
+        }
+      }
+
+      return [];
+    });
+
+    watch(
+      computed(() => props.dataTable),
+      (dataTable) => {
+        dataTable?.dataFilter.setReady();
+        dataTable?.load();
+      },
+      { immediate: true }
+    );
+
+    return () => {
+      const children = unref(options).map((item) => (
+        <ElOption key={item.value} value={item.value} label={item.label} />
+      ));
+
+      return (
+        <ElSelect
+          disabled={props.disabled}
+          class="data-select"
+          modelValue={unref(value)}
+          multiple={props.multiple}
+          onUpdate:modelValue={(v: any) => (value.value = v)}
+        >
+          {children}
+        </ElSelect>
+      );
+    };
+  },
+});

package/src/components/data-select/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import DataSelect from "./data-select";
+
+export const MKDataSelect = withInstall(DataSelect);
+export default MKDataSelect;
+
+export * from "./data-select-options";

package/src/components/data-table-select/data-table-select-options.ts

@@ -0,0 +1,43 @@
+import { ExtractPropTypes } from "vue";
+import { DataTable } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+
+export const dataTableSelectProps = buildProps({
+  modelValue: {
+    type: null,
+  },
+  labelFieldName: {
+    type: String,
+    required: true,
+  },
+  primaryFieldName: {
+    type: String,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  objectValue: {
+    type: Boolean,
+    default: false,
+  },
+  dataTable: {
+    type: DataTable<any>,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+} as const);
+
+export type DataTableSelectProps = ExtractPropTypes<
+  typeof dataTableSelectProps
+>;
+
+export const dataTableSelectEmits = {
+  "update:model-value": (modelValue: any) => true,
+  recordsChange: (records: any[]) => Array.isArray(records),
+};
+
+export type DataTableSelectEmits = typeof dataTableSelectEmits;

package/src/components/data-table-select/data-table-select.tsx

@@ -0,0 +1,190 @@
+import {
+  Fragment,
+  computed,
+  ref,
+  unref,
+  watch,
+  defineComponent,
+  Ref,
+} from "vue";
+import { ElSelect } from "element-plus";
+import { Grid } from "@element-plus/icons-vue";
+import { isEqual } from "lodash-es";
+import { Where } from "@maketribe/request";
+import MKDataTableSelectDialog from "../data-table-select-dialog";
+import {
+  dataTableSelectEmits,
+  dataTableSelectProps,
+} from "./data-table-select-options";
+
+export default defineComponent({
+  name: "MKDataTableSelect",
+  inheritAttrs: false,
+  props: dataTableSelectProps,
+  emits: dataTableSelectEmits,
+  setup(props, { emit }) {
+    const dataTable = computed(() => props.dataTable);
+
+    const dataViewRequest = computed(() => unref(dataTable).dataViewRequest);
+
+    const loadingRecords = ref(false);
+
+    const isShowDialog = ref(false);
+
+    const modelValue = computed({
+      get: () => props.modelValue,
+      set: (v) => emit("update:model-value", v),
+    });
+
+    const values = ref(unref(modelValue));
+
+    const primaryFieldName = computed(
+      () => props.primaryFieldName ?? unref(dataTable).primaryKey
+    );
+
+    const loadRecords = async () => {
+      try {
+        loadingRecords.value = true;
+
+        const _dataTable = unref(dataTable);
+
+        const selection = unref(values);
+
+        const recordIds = Array.isArray(selection)
+          ? selection
+          : selection
+          ? [selection]
+          : [];
+
+        let existingRecords = _dataTable!
+          .getList()
+          .filter((item) => recordIds.includes(item[unref(primaryFieldName)]));
+
+        if (existingRecords.length !== recordIds.length) {
+          const notExistingRecords = recordIds.filter(
+            (id) =>
+              !existingRecords.find(
+                (item) => item[unref(primaryFieldName)] === id
+              )
+          );
+
+          const where = new Where();
+          where.addCondition(
+            unref(primaryFieldName),
+            "in",
+            `(${notExistingRecords.map((id) => JSON.stringify(id)).join(",")})`
+          );
+
+          const response = await unref(dataViewRequest).allList({
+            data: { condition: where },
+          });
+
+          if (response.data.code !== 200) {
+            return existingRecords;
+          }
+
+          existingRecords = [...existingRecords, ...response.data.data];
+        }
+
+        return recordIds.map((id) =>
+          existingRecords.find((item) => item[unref(primaryFieldName)] === id)
+        );
+      } finally {
+        loadingRecords.value = false;
+      }
+    };
+
+    const currentRecords: Ref<any[]> = ref([]);
+
+    watch(
+      computed(() => props.multiple),
+      (multiple) => {
+        values.value = multiple ? [] : null;
+      }
+    );
+
+    watch(
+      modelValue,
+      async (modelValue) => {
+        let _values: any;
+        if (props.objectValue) {
+          _values = props.multiple
+            ? modelValue?.map(
+                (item: any) => item[unref(dataTable).primaryKey]
+              ) ?? []
+            : modelValue?.[unref(dataTable).primaryKey] ?? null;
+        } else {
+          _values = modelValue;
+        }
+
+        if (!isEqual(_values, unref(values))) {
+          values.value = _values;
+        }
+      },
+      { immediate: true }
+    );
+
+    watch(
+      values,
+      async (values) => {
+        currentRecords.value = await loadRecords();
+
+        emit("recordsChange", currentRecords.value);
+
+        if (modelValue.value !== values) {
+          if (props.objectValue) {
+            modelValue.value = props.multiple
+              ? [...currentRecords.value]
+              : currentRecords.value[0] ?? null;
+          } else {
+            modelValue.value = values;
+          }
+        }
+      },
+      { immediate: true }
+    );
+
+    const options = computed(() =>
+      unref(currentRecords).map((record) => ({
+        value: record[unref(dataTable)!.primaryKey],
+        label: record[props.labelFieldName],
+        isDisabled: true,
+      }))
+    );
+
+    return () => {
+      const _options = unref(options);
+
+      return (
+        <Fragment>
+          <span
+            class="mk-data-table-select"
+            onMousedown={(e: MouseEvent) => {
+              if (!props.disabled) {
+                isShowDialog.value = true;
+              }
+            }}
+          >
+            <ElSelect
+              disabled={props.disabled}
+              multiple={props.multiple}
+              loading={unref(loadingRecords)}
+              suffixIcon={Grid}
+              popperClass="mk-data-table-select__popper"
+              clearable
+              modelValue={props.multiple ? _options : _options[0] ?? null}
+            />
+          </span>
+          <MKDataTableSelectDialog
+            dataTable={unref(props.dataTable)}
+            multiple={props.multiple}
+            modelValue={unref(isShowDialog)}
+            onUpdate:model-value={(v: boolean) => (isShowDialog.value = v)}
+            selection={unref(modelValue)}
+            onUpdate:selection={(v: any) => (values.value = v)}
+          />
+        </Fragment>
+      );
+    };
+  },
+});

package/src/components/data-table-select/index.ts

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

package/src/components/data-table-select-dialog/data-table-select-dialog-options.ts

@@ -0,0 +1,33 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { DataTable } from "@maketribe/dm";
+
+export const dataTableSelectDialogProps = buildProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  selection: {
+    type: null,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  dataTable: {
+    type: DataTable<any>,
+    required: true,
+  },
+} as const);
+
+export type DataTableSelectDialogProps = ExtractPropTypes<
+  typeof dataTableSelectDialogProps
+>;
+
+export const dataTableSelectDialogEmits = {
+  "update:model-value": (modelValue: any) => typeof modelValue === "boolean",
+  "update:selection": (modelValue: any) => true,
+  confirm: () => true,
+};
+
+export const DataTableSelectDialogEmits = typeof dataTableSelectDialogEmits;