@maketribe/ms-app 3.0.4 → 3.0.5

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

@@ -0,0 +1,176 @@
+import {
+  Fragment,
+  computed,
+  defineComponent,
+  onBeforeUnmount,
+  ref,
+  toRefs,
+  unref,
+  useAttrs,
+  useSlots,
+  watch
+} from "vue";
+import { ElButton, ElMessageBox, ElTree } from "element-plus";
+import { DataTable } from "@maketribe/dm";
+import { Disposable, Event } from "@maketribe/utils";
+
+import { useI18n } from "../../../composables";
+import { dataTreeProps } from "./data-tree-options";
+
+export default defineComponent({
+  name: "MKDataTree",
+  inheritAttrs: false,
+  props: dataTreeProps,
+  setup(props, { emit, expose }) {
+    const slots = useSlots();
+    const attrs = useAttrs();
+
+    const { dataTable } = toRefs(props);
+
+    unref(dataTable).dataFilter.setReady();
+
+    if (props.autoLoad) {
+      unref(dataTable).load();
+    }
+
+    const i18n = useI18n()!;
+
+    const data = computed(() => unref(dataTable).getList());
+
+    const primaryKey = computed(() => unref(dataTable).primaryKey);
+
+    const handleEdit = (data: any) => {
+      unref(dataTable).editRecord(data);
+    };
+
+    const handleDelete = async (data: any) => {
+      const confirm = await ElMessageBox.confirm(
+        i18n.translate("mk.dataTablePage.deleteMessage"),
+        i18n.translate("mk.dataTablePage.deleteTitle"),
+        { type: "warning" }
+      ).then(
+        () => true,
+        () => false
+      );
+
+      if (confirm) {
+        unref(dataTable).deleteRecordAfterRefresh(
+          data[unref(dataTable).primaryKey]
+        );
+      }
+    };
+
+    let disposable: Disposable | null = null;
+
+    watch(
+      dataTable,
+      async (dataTable) => {
+        disposable?.dispose();
+
+        disposable = new Disposable();
+
+        const events = Object.keys(dataTable)
+          .filter((key) => dataTable[key as keyof DataTable] instanceof Event)
+          .map((key) => ({
+            eventName: key
+              .replace(/Event$/, "")
+              .replace(/[A-Z]/g, (match) => `-${match.toLocaleLowerCase()}`),
+            event: dataTable[key as keyof DataTable]! as Event,
+          }));
+
+        for (const item of events) {
+          disposable.register(
+            // @ts-ignore
+            item.event.on((event: any) => {
+              // @ts-ignore
+              emit(item.eventName, event);
+            })
+          );
+        }
+
+        await dataTable.init();
+      },
+      { immediate: true }
+    );
+
+    onBeforeUnmount(() => {
+      disposable?.dispose();
+    });
+
+    const handleToolsClick = (e: MouseEvent) => {
+      e.stopPropagation();
+    };
+
+    const treeRef = ref<InstanceType<typeof ElTree>>()
+
+    //筛选方法
+    const filter = (value: string)=>{
+      treeRef.value!.filter(value)
+    }
+
+    expose({ filter })
+
+    return () => {
+      return (
+        <ElTree
+          {...attrs}
+          props={props.props}
+          defaultExpandAll={props.defaultExpandAll}
+          ref = {treeRef}
+          class="mk-data-tree"
+          data={unref(data)}
+          filter-node-method={props.filterNodeMethod}
+          nodeKey={unref(primaryKey)}
+          v-slots={{
+            default: (scope: any) => {
+              let children = slots.default?.(scope);
+
+              if (children) {
+                return children;
+              }
+
+              const { data } = scope;
+
+              const label = data[props.props.label];
+
+              const main = slots["node-main"]?.(scope) || label;
+
+              const tools = slots["node-tools"]?.(scope) || (
+                <Fragment>
+                  {slots["node-tools-prefix"]?.(scope)}
+                  <ElButton
+                    type="primary"
+                    link
+                    onClick={() => handleEdit(data)}
+                  >
+                    编辑
+                  </ElButton>
+                  <ElButton
+                    type="danger"
+                    link
+                    onClick={() => handleDelete(data)}
+                  >
+                    删除
+                  </ElButton>
+                </Fragment>
+              );
+
+              return (
+                <div class="mk-data-tree-node">
+                  <div class="mk-data-tree-node_main">{main}</div>
+
+                  <div
+                    class="mk-data-tree-node__tools"
+                    onClick={handleToolsClick}
+                  >
+                    {tools}
+                  </div>
+                </div>
+              );
+            },
+          }}
+        />
+      );
+    };
+  },
+});

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

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

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

@@ -0,0 +1,20 @@
+import { ExtractPropTypes } from "vue";
+import { DataForm, DataTable } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+
+import { dataTreeProps } from "../data-tree";
+
+export const dataTreePageProps = buildProps({
+  ...dataTreeProps,
+  dataTable: {
+    type: DataTable<any>,
+    required: true,
+  },
+  dataForm: {
+    type: DataForm<any>,
+    required: true,
+  },
+  defaultExpandAll: { type: Boolean, default: true },
+} as const);
+
+export type DataTreePageProps = ExtractPropTypes<typeof dataTreePageProps>;

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

@@ -0,0 +1,200 @@
+import {
+  Fragment,
+  computed,
+  watch,
+  defineComponent,
+  nextTick,
+  ref,
+  unref,
+  useAttrs,
+  useSlots,
+} from "vue";
+import { ElButton, ElDialog, ElMessage, ElCard } from "element-plus";
+import { Search } from "@element-plus/icons-vue";
+import { useI18n } from "../../../composables";
+import MKDataTree from "../data-tree/data-tree";
+import MKDataForm from "../data-form/data-form";
+import { dataTreePageProps } from "./data-tree-page-options";
+
+export default defineComponent({
+  name: "MKDataTreePage",
+  inheritAttrs: false,
+  props: dataTreePageProps,
+  setup(props) {
+    const attrs = useAttrs();
+    const slots = useSlots();
+
+    const { dataTable, dataForm } = unref(props);
+
+    const i18n = useI18n()!;
+
+    const isShowForm = ref(false);
+
+    const tableLoading = computed(() => unref(dataTable)?.loading);
+    const formLoading = computed(() => unref(dataForm)?.loading);
+    const allowFormSubmit = computed(() => {
+      const _dataForm = unref(dataForm);
+      if (_dataForm) {
+        return _dataForm.allowSubmit;
+      }
+      return false;
+    });
+
+    const handleEdit = async (item: any) => {
+      isShowForm.value = true;
+
+      // 等待form组件渲染完成
+      await nextTick();
+
+      unref(dataForm).editRecord(item.item);
+    };
+
+    const handleAdd = async () => {
+      isShowForm.value = true;
+
+      // 等待form组件渲染完成
+      await nextTick();
+
+      unref(dataForm).addRecord();
+    };
+
+    const handleSubmit = async () => {
+      try {
+        const response = await unref(dataForm).submit();
+
+        if (response.data.code !== 200) {
+          ElMessage.error({ message: response.data.msg });
+          return;
+        }
+
+        unref(dataTable).load();
+        ElMessage.success({
+          message: i18n.translate("mk.message.saveSuccess"),
+        });
+
+        isShowForm.value = false;
+      } catch (e) {
+        ElMessage.error({
+          message: i18n.translate("mk.message.saveError"),
+        });
+      }
+    };
+
+    const handleCancel = () => {
+      isShowForm.value = false;
+    };
+
+    const dataTreeSlots = computed(() => {
+      let keys = Object.keys(slots);
+
+      keys = keys.filter((key) => key.startsWith("tree-"));
+
+      const dataTreeSlots: Record<string, any> = {
+        default: slots["tree-node"],
+      };
+
+      for (const key of keys) {
+        dataTreeSlots[key.replace(/^tree-/, "")] = slots[key];
+      }
+
+      return dataTreeSlots;
+    });
+
+    const dataFormSlots = computed(() => {
+      let keys = Object.keys(slots);
+
+      keys = keys.filter((key) => key.startsWith("form-"));
+
+      const dataFormSlots: Record<string, any> = {
+        default: slots.form,
+      };
+
+      for (const key of keys) {
+        dataFormSlots[key.replace(/^form-/, "")] = slots[key];
+      }
+
+      return dataFormSlots;
+    });
+
+    const dataTreeRef = ref<any>();
+
+    // 节点搜索
+    const searchInputValue = ref("");
+    watch(searchInputValue, (value) => {
+      dataTreeRef.value!.filter(value);
+    });
+    const filterNodeMethodFn = (value: string, data: any) => {
+      if (!searchInputValue.value) return true;
+      return data[props.props.label].includes(searchInputValue.value);
+    };
+
+    return () => {
+      return (
+        <ElCard
+          class="mk-data-tree-page"
+          v-slots={{
+            header: () => {
+              return (
+                <div class="header-box">
+                  <div class="header-box-main">
+                    <el-input
+                      modelValue={unref(searchInputValue)}
+                      clearable={true}
+                      onUpdate:modelValue={(v: string) =>
+                        (searchInputValue.value = v)
+                      }
+                      prefix-icon={Search}
+                    />
+                  </div>
+                  <div class="header-box-tools">
+                    <ElButton onClick={handleAdd} type="primary">
+                      {i18n.translate("mk.dataTreePage.addButton")}
+                    </ElButton>
+                  </div>
+                </div>
+              );
+            },
+          }}
+        >
+          <MKDataTree
+            ref={dataTreeRef}
+            {...unref(attrs)}
+            {...props}
+            v-loading={unref(tableLoading)}
+            filterNodeMethod={filterNodeMethodFn}
+            dataTable={unref(dataTable)}
+            onEdit-record={handleEdit}
+            v-slots={unref(dataTreeSlots)}
+          />
+          <ElDialog
+            appendToBody
+            modelValue={unref(isShowForm)}
+            onUpdate:modelValue={(v: boolean) => (isShowForm.value = v)}
+            v-slots={{
+              footer: () => (
+                <Fragment>
+                  <ElButton
+                    type="primary"
+                    loading={unref(formLoading) || unref(allowFormSubmit)}
+                    onClick={handleSubmit}
+                  >
+                    {i18n.translate("mk.dataForm.saveButton")}
+                  </ElButton>
+                  <ElButton onClick={handleCancel}>
+                    {i18n.translate("mk.dataForm.cancelButton")}
+                  </ElButton>
+                </Fragment>
+              ),
+            }}
+          >
+            <MKDataForm
+              {...unref(attrs)}
+              dataForm={unref(dataForm)}
+              v-slots={unref(dataFormSlots)}
+            />
+          </ElDialog>
+        </ElCard>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,5 @@
+import { withInstall } from "@maketribe/utils";
+import DataTreePage from "./data-tree-page";
+
+export const MKDataTreePage = withInstall(DataTreePage);
+export default MKDataTreePage;

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

@@ -0,0 +1 @@
+export * from "./use-condition";

package/src/components/data-model/filter-panel/composables/use-condition.ts

@@ -0,0 +1,66 @@
+import { Operator } from "@maketribe/dm";
+import { computed, inject, unref, watch } from "vue";
+
+import { BETWEEN_OPTION, OperatorOption } from "../operator-options";
+import { FILTER_PANEL_ITEM_CONTEXT, FilterPanelItem } from "../token";
+import { buildProps } from "@maketribe/utils";
+
+export const conditionProps = buildProps({
+  defaultValue: {
+    default: null,
+  },
+} as const);
+
+export type ConditionOptions = {
+  operator: Operator;
+  operatorOptions: OperatorOption[];
+  defaultValue: any;
+};
+
+export function useCondition(options: ConditionOptions) {
+  const filterPanelItemContext = inject(FILTER_PANEL_ITEM_CONTEXT) as any;
+  const filterPanelItem =
+    filterPanelItemContext.filterPanelItem as FilterPanelItem;
+
+  filterPanelItem.setOperatorOptions(options.operatorOptions);
+
+  filterPanelItem.setOperator(options.operator);
+  if (options.defaultValue !== void 0) {
+    filterPanelItem.column.defaultValue = options.defaultValue;
+  }
+
+  const value = computed({
+    get: () => filterPanelItem.getValue(),
+    set: (v: any) => filterPanelItem.setValue(v === "" ? null : v),
+  });
+
+  const isBetween = computed(
+    () => unref(currentOperator.value) === BETWEEN_OPTION.value
+  );
+
+  const currentOperator = computed(() => filterPanelItem.currentOperator);
+
+  watch(
+    currentOperator,
+    () => {
+      const defalutValue = options.defaultValue;
+
+      if (unref(isBetween)) {
+        filterPanelItem.column.defaultValue = [defalutValue, defalutValue];
+        value.value = [defalutValue, defalutValue];
+        return;
+      }
+
+      filterPanelItem.column.defaultValue = defalutValue;
+      value.value = defalutValue;
+    },
+    { immediate: true }
+  );
+
+  return {
+    isBetween,
+    filterPanelItem,
+    currentOperator,
+    value,
+  };
+}

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

@@ -0,0 +1,11 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const filterPanelItemOptions = buildProps({
+  name: { type: String, required: true },
+  label: { type: String },
+} as const);
+
+export type FilterPanelItemOptions = ExtractPropTypes<
+  typeof filterPanelItemOptions
+>;

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

@@ -0,0 +1,187 @@
+import {
+  computed,
+  defineComponent,
+  inject,
+  onBeforeUnmount,
+  provide,
+  reactive,
+  toRaw,
+  unref,
+  useSlots,
+} from "vue";
+import { ElOption, ElSelect, ElTooltip } from "element-plus";
+import { FilterColumn, isWhereFilter, DataFilter } from "@maketribe/dm";
+
+import {
+  FILTER_PANEL_CONTEXT,
+  FILTER_PANEL_ITEM_CONTEXT,
+  FilterPanelItem,
+} from "../token";
+
+import { useI18n, useFilterColumnComponent } from "../../../../composables";
+import { OperatorOption } from "../operator-options";
+import { filterPanelItemOptions } from "./filter-panel-item-options";
+
+export default defineComponent({
+  name: "MKFilterPanelItem",
+  props: filterPanelItemOptions,
+  setup(props) {
+    const slots = useSlots();
+
+    const i18n = useI18n()!;
+
+    const filterPanelContext: any = inject(FILTER_PANEL_CONTEXT);
+
+    const dataFilter = computed(
+      () => filterPanelContext.dataFilter as DataFilter
+    );
+
+    let _filterColumn: FilterColumn | null = null;
+
+    const createFilterColumn = () => {
+      _filterColumn = reactive(
+        new FilterColumn({
+          name: props.name!,
+          label: props.label!,
+        })
+      );
+
+      unref(dataFilter).addColumn(_filterColumn);
+
+      return _filterColumn;
+    };
+
+    const filterColumn = computed(() => {
+      const existingColumn = unref(dataFilter).getColumn(props.name) ?? null;
+
+      if (existingColumn) {
+        return existingColumn;
+      }
+
+      if (!_filterColumn) {
+        _filterColumn = createFilterColumn();
+      }
+
+      return _filterColumn;
+    });
+
+    const { component, componentProps } = useFilterColumnComponent(
+      filterColumn,
+      dataFilter
+    );
+
+    const createFilterPanelItem = (
+      dataFilter: DataFilter,
+      column: FilterColumn
+    ) => {
+      function setOperator(
+        this: FilterPanelItem,
+        operator: OperatorOption["value"]
+      ) {
+        const _dataFilter = unref(dataFilter);
+        if (isWhereFilter(_dataFilter)) {
+          this.currentOperator = operator;
+          _dataFilter.setParamOperator(unref(column).name, operator);
+        }
+      }
+
+      function setOperatorOptions(
+        this: FilterPanelItem,
+        options: OperatorOption[]
+      ) {
+        if (isWhereFilter(unref(dataFilter))) {
+          this.operatorOptions = options;
+        }
+      }
+
+      function setValue(this: FilterPanelItem, value: any) {
+        this.dataFilter.setParam(this.column.name, value);
+      }
+
+      function getValue(this: FilterPanelItem): any {
+        return this.dataFilter.getParam(this.column.name);
+      }
+
+      const filterPanelItem: FilterPanelItem = {
+        dataFilter,
+        column,
+        currentOperator: null,
+        operatorOptions: [],
+        setOperator,
+        setOperatorOptions,
+        setValue,
+        getValue,
+      };
+
+      return filterPanelItem;
+    };
+
+    const filterPanelItem = reactive(
+      createFilterPanelItem(unref(dataFilter), unref(filterColumn))
+    );
+
+    provide(
+      FILTER_PANEL_ITEM_CONTEXT,
+      reactive({
+        dataFilter,
+        filterPanelItem,
+      })
+    );
+
+    onBeforeUnmount(() => {
+      const _filterPanel = unref(dataFilter);
+
+      if (isWhereFilter(_filterPanel)) {
+        _filterPanel.deleteParamOperator(unref(filterColumn).name);
+      }
+
+      _filterPanel.deleteParam(unref(filterColumn).name);
+    });
+
+    return () => {
+      const _filterPanel = unref(dataFilter);
+
+      const _filterColumn = unref(filterColumn);
+
+      if (!_filterColumn) {
+        return null;
+      }
+
+      let children: any = slots.default?.();
+
+      if (!children && unref(component)) {
+        const FilterColumnComponent = toRaw(unref(component));
+
+        children = <FilterColumnComponent {...unref(componentProps)} />;
+      }
+
+      const options = filterPanelItem.operatorOptions.map((option) => (
+        <ElOption
+          key={option.value}
+          value={option.value}
+          label={i18n.translate(option.label)}
+        />
+      ));
+
+      const operatorSelect = isWhereFilter(_filterPanel) ? (
+        <ElSelect
+          modelValue={filterPanelItem.currentOperator as any}
+          onUpdate:modelValue={(v) => filterPanelItem.setOperator(v)}
+          class="mk-filter-panel-item__operator"
+        >
+          {options}
+        </ElSelect>
+      ) : null;
+
+      return (
+        <div class="mk-filter-panel-item">
+          <ElTooltip content={_filterColumn.label} placement="top">
+            <div class="mk-filter-panel-item__label">{_filterColumn.label}</div>
+          </ElTooltip>
+          {operatorSelect}
+          <div class="mk-filter-panel-item__content">{children}</div>
+        </div>
+      );
+    };
+  },
+});

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

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

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

@@ -0,0 +1,15 @@
+import { ExtractPropTypes } from "vue";
+import { DataFilter } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+
+export const filterPanelProps = buildProps({
+  dataFilter: { type: DataFilter, required: true },
+} as const);
+
+export type FilterPanelProps = ExtractPropTypes<typeof filterPanelProps>;
+
+export const filterPanelEmits = {
+  search: () => true,
+};
+
+export type FilterPanelEmits = typeof filterPanelEmits;