@maketribe/ms-app 3.0.30 → 3.0.32

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

@@ -0,0 +1,206 @@
+import {
+  Fragment,
+  computed,
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  unref,
+  watch,
+} from "vue";
+import {
+  ElDivider,
+  ElForm,
+  FormItemRule,
+  FormRules,
+  FormContext,
+} from "element-plus";
+import { formProps } from "./form-options";
+import { DataFormType, FormColumn, FormModel } from "@maketribe/dm";
+import MKDataFormItem from "../../data-form-item";
+import { Disposable } from "@maketribe/utils";
+
+let uid = 0;
+
+export default defineComponent({
+  props: formProps,
+  setup(props, { slots }) {
+    const formUID = uid++;
+
+    const formEl = ref<FormContext | null>(null);
+
+    const dataForm = computed(() => props.dataForm);
+
+    const data = computed(() => unref(dataForm).data as any);
+
+    const columns = computed(() =>
+      unref(dataForm)
+        .getColumns()
+        .filter((column) => column.visible)
+    );
+
+    const rules = computed(() => {
+      const rules: FormRules = {};
+
+      for (const column of unref(columns)) {
+        if (column.required && !column.rules.find((rule) => rule.required)) {
+          rules[column.name] = [
+            {
+              required: column.required,
+              message: `请录入${column.label}.`,
+            },
+          ];
+        }
+        let componentRules: FormItemRule[] = props.rules?.[column.name] || [];
+
+        if (!Array.isArray(componentRules)) {
+          componentRules = [componentRules];
+        }
+
+        if (column.rules.length) {
+          rules[column.name] = [
+            ...((rules[column.name] as FormItemRule[]) || []),
+            ...column.rules,
+            ...componentRules,
+          ];
+        }
+      }
+
+      return rules;
+    });
+
+    const labelWidth = computed(() => {
+      return (
+        props.labelWidth ||
+        Math.max.apply(
+          null,
+          columns.value
+            .filter((column) => column.componentInfo !== "MKFormDetail")
+            .map((item: FormColumn) => {
+              // + 8 像素只是预留 必填 * 号的宽度位置 12 像素是label的padding
+              return item.label.length * 16 + 8 + 12;
+            })
+        )
+      );
+    });
+
+    const disabled = computed(() => unref(dataForm).disabled);
+
+    onMounted(() => {
+      watch(
+        dataForm,
+        (dataForm, _, onCleanup) => {
+          const disposable = new Disposable();
+
+          unref(dataForm).formModels.push({
+            id: formUID,
+            validate: async () => {
+              return unref(formEl)?.validateField() ?? false;
+            },
+            reset: () => {
+              unref(formEl)?.resetFields();
+            },
+            clearValidate: () => {
+              unref(formEl)?.clearValidate();
+            },
+          });
+
+          disposable.register(
+            dataForm.dataFormTypeChangeEvent.on(async ({ dataFormType }) => {
+              if (dataFormType !== DataFormType.NONE) {
+                // 测试下来 需要两次nextTick才能清楚验证
+                await nextTick();
+                await nextTick();
+
+                dataForm.clearValidate();
+              }
+            })
+          );
+
+          onCleanup(() => {
+            const index = dataForm.formModels.findIndex(
+              (formModel) => formModel.id === uid
+            );
+
+            if (index === -1) {
+              return;
+            }
+
+            dataForm.formModels.splice(index, 1);
+
+            disposable.dispose();
+          });
+        },
+        { immediate: true }
+      );
+    });
+
+    return () => {
+      let children: any = slots.default?.();
+
+      const detailColumns = unref(columns).filter(
+        (column) => column.componentInfo === "MKFormDetail"
+      );
+
+      if (!children) {
+        children = unref(columns)
+          .filter(
+            (column) => !detailColumns.find((item) => item.name === column.name)
+          )
+          .map((column) => {
+            if (!column.name) {
+              return null;
+            }
+
+            return (
+              slots[`col-${column.name}`]?.() || (
+                <MKDataFormItem
+                  key={column.name}
+                  name={column.name}
+                  v-slots={{ default: slots[`col-${column.name}-content`] }}
+                />
+              )
+            );
+          });
+
+        children.push(
+          detailColumns.map((column) => {
+            if (!column.name) {
+              return null;
+            }
+
+            return (
+              <Fragment>
+                <ElDivider contentPosition="left">{column.label}</ElDivider>
+                <MKDataFormItem
+                  label=""
+                  labelWidth="0px"
+                  key={column.name}
+                  name={column.name}
+                />
+              </Fragment>
+            );
+          })
+        );
+      }
+
+      if (!unref(data)) {
+        return null;
+      }
+
+      return (
+        <ElForm
+          {...props}
+          ref={formEl}
+          model={unref(data)}
+          rules={unref(rules)}
+          disabled={unref(disabled)}
+          labelWidth={unref(labelWidth)}
+        >
+          {children}
+        </ElForm>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,6 @@
+import { withInstall } from "@maketribe/utils";
+import Form from "./form";
+
+export const MKForm = withInstall(Form);
+
+export default MKForm;

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

@@ -0,0 +1,17 @@
+import { ExtractPropTypes } from "vue";
+import { FormItemRule, formProps } from "element-plus";
+
+import { buildProps } from "@maketribe/utils";
+import { DataForm } from "@maketribe/dm";
+
+export const formViewProps = buildProps({
+  rules: { type: Object },
+  labelWidth: { type: String },
+  dataForm: { type: DataForm<any>, required: true },
+} as const);
+
+export type FormViewProps = ExtractPropTypes<typeof formViewProps>;
+
+export const formViewEmits = {};
+
+export const FormViewEmits = typeof formViewEmits;

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

@@ -0,0 +1,68 @@
+import { computed, defineComponent, unref } from "vue";
+import { ElButton, ElCard, ElScrollbar } from "element-plus";
+import { formViewProps } from "./form-view-options";
+import { MKError, Messager } from "@maketribe/dm";
+import { I18n } from "@maketribe/locale";
+import MKForm from "../form";
+
+export default defineComponent({
+  name: "MKFormView",
+  props: formViewProps,
+  setup(props, { slots }) {
+    const dataForm = computed(() => props.dataForm);
+
+    const handleSave = async () => {
+      try {
+        if (!(await unref(dataForm)?.validate())) {
+          return;
+        }
+
+        const result = await unref(dataForm)!.submit();
+
+        if (result.data.code !== 200) {
+          Messager.instance.error({ message: result.data.msg });
+          return;
+        }
+
+        Messager.instance.success({ message: "保存成功" });
+      } catch (e) {
+        if (e instanceof MKError) {
+          Messager.instance.error({ message: e.message });
+        }
+      }
+    };
+
+    const handleCancel = () => {
+      unref(dataForm).cancel();
+    };
+
+    return () => {
+      return (
+        <ElCard class="mk-form-view" shadow="never">
+          <div class="mk-form-view__main">
+            <ElScrollbar>
+              <MKForm
+                rules={props.rules}
+                labelWidth={props.labelWidth}
+                dataForm={props.dataForm}
+                v-slots={slots}
+              />
+            </ElScrollbar>
+          </div>
+          <div class="mk-form-view__footer">
+            <ElButton
+              type="primary"
+              onClick={handleSave}
+              loading={unref(unref(dataForm).loading)}
+            >
+              {I18n.instance.translate("mk.dataForm.saveButton")}
+            </ElButton>
+            <ElButton onClick={handleCancel}>
+              {I18n.instance.translate("mk.dataForm.cancelButton")}
+            </ElButton>
+          </div>
+        </ElCard>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,6 @@
+import { withInstall } from "@maketribe/utils";
+import FormView from "./form-view";
+
+export const MKFormView = withInstall(FormView);
+
+export default MKFormView;

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

@@ -0,0 +1,2 @@
+export * from "./form";
+export * from "./form-view";

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

@@ -0,0 +1,20 @@
+import { ExtractPropTypes } from "vue";
+import { DataForm } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+
+import { dataFormProps } from "../data-form";
+
+export const dataFormPageProps = buildProps({
+  ...dataFormProps,
+  dataForm: { type: DataForm<any> },
+} as const);
+
+export type DataFormPageProps = ExtractPropTypes<typeof dataFormPageProps>;
+
+export const dataFormPageEmits = {
+  cancel: () => true,
+  error: (e: any) => e instanceof Error,
+  submitted: (response: any) => !!response,
+};
+
+export type DataFormPageEmits = typeof dataFormPageEmits;

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

@@ -0,0 +1,57 @@
+import {
+  ComputedRef,
+  computed,
+  defineComponent,
+  unref,
+  useAttrs,
+  useSlots,
+} from "vue";
+import { DataForm } from "@maketribe/dm";
+
+import MKDataForm from "../data-form/data-form";
+import { dataFormPageEmits, dataFormPageProps } from "./data-form-page-options";
+
+export default defineComponent({
+  name: "MKDataFormPage",
+  props: dataFormPageProps,
+  emits: dataFormPageEmits,
+  setup(props, { emit }) {
+    const dataForm = computed(
+      () => props.dataForm ?? null
+    ) as ComputedRef<DataForm | null>;
+
+    const slots = useSlots();
+    const attrs = useAttrs();
+
+    const loading = computed(() => unref(dataForm)?.loading ?? true);
+
+    const handleCancel = () => {
+      emit("cancel");
+    };
+
+    const handleSubmitted = (result: any) => {
+      emit("submitted", result);
+    };
+
+    const handleError = (error: any) => {
+      emit("error", error);
+    };
+
+    return () => {
+      return (
+        <div class="data-form-page">
+          <MKDataForm
+            v-loading={unref(loading)}
+            {...props}
+            {...attrs}
+            dataForm={unref(dataForm) as DataForm}
+            v-slots={slots}
+            onCancel={handleCancel}
+            onSubmitted={handleSubmitted}
+            onError={handleError}
+          />
+        </div>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import DataFormPage from "./data-form-page";
+
+export const MKDataFormPage = withInstall(DataFormPage);
+export default MKDataFormPage;
+
+export * from "./data-form-page-options";

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

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

package/src/components/data-model/data-table/composables/use-column.ts

@@ -0,0 +1,23 @@
+import { get } from "lodash-es";
+import { ExtractPropTypes, computed } from "vue";
+import { TableColumn } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+
+export type ColumnEventData = { row: any; column: TableColumn; index: number };
+
+export const columnProps = buildProps({
+  row: { type: Object, required: true },
+  column: { type: TableColumn, required: true },
+  index: { type: Number, required: true },
+} as const);
+
+export type ColumnProps = ExtractPropTypes<typeof columnProps>;
+
+export const useColumn = (props: {
+  row: Record<string, any>;
+  column: TableColumn;
+}) => {
+  const value = computed(() => get(props.row, props.column.name));
+
+  return { value };
+};

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

@@ -0,0 +1,11 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { TableColumn } from "@maketribe/dm";
+
+export const dataTableColumnProps = buildProps({
+  column: { type: TableColumn, required: true },
+} as const);
+
+export type DataTableColumnProps = ExtractPropTypes<
+  typeof dataTableColumnProps
+>;

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

@@ -0,0 +1,18 @@
+import { computed, defineComponent, unref } from "vue";
+import { dataTableColumnProps } from "./data-table-column-options";
+
+export default defineComponent({
+  name: "MKDataTableColumn",
+  props: dataTableColumnProps,
+  setup(props, { slots }) {
+    const column = computed(() => props.column);
+
+    return () => {
+      if (!unref(column).visible) {
+        return null;
+      }
+
+      return slots.default?.({ column: unref(column) });
+    };
+  },
+});

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

@@ -0,0 +1,7 @@
+import DataTableColumn from "./data-table-column";
+
+export const MKDataTableColumn = DataTableColumn;
+
+export default DataTableColumn;
+
+export * from "./data-table-column-options";

package/src/components/data-model/data-table/data-table-column-component/data-table-column-component-options.ts

@@ -0,0 +1,13 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { TableColumn } from "@maketribe/dm";
+
+export const dataTableColumnComponentProps = buildProps({
+  column: { type: TableColumn, required: true },
+  row: { type: null },
+  index: { type: Number, required: true },
+} as const);
+
+export type DataTableColumnComponentProps = ExtractPropTypes<
+  typeof dataTableColumnComponentProps
+>;

package/src/components/data-model/data-table/data-table-column-component/data-table-column-component.tsx

@@ -0,0 +1,38 @@
+import { computed, defineComponent, inject, toRaw, unref } from "vue";
+import { useTableColumnComponent } from "../../../../composables";
+import { DATATABLE_CONTEXT_KEY } from "../token";
+import { dataTableColumnComponentProps } from "./data-table-column-component-options";
+
+export default defineComponent({
+  name: "MKDataTableColumnComponent",
+  props: dataTableColumnComponentProps,
+  setup(props) {
+    const dataTableContext = inject(DATATABLE_CONTEXT_KEY);
+
+    const dataTable = computed(() => dataTableContext?.dataTable ?? null);
+
+    const tableColumn = computed(() => props.column);
+
+    const { component, componentProps } = useTableColumnComponent(
+      tableColumn,
+      dataTable
+    );
+
+    return () => {
+      const TableColumnComponent = toRaw(unref(component));
+
+      if (!TableColumnComponent) {
+        return null;
+      }
+
+      return (
+        <TableColumnComponent
+          {...unref(componentProps)}
+          column={unref(tableColumn)}
+          index={props.index}
+          row={props.row}
+        />
+      );
+    };
+  },
+});

package/src/components/data-model/data-table/data-table-column-component/index.ts

@@ -0,0 +1,7 @@
+import DataTableColumnComponent from "./data-table-column-component";
+
+export const MKDataTableColumnComponent = DataTableColumnComponent;
+
+export default MKDataTableColumnComponent;
+
+export * from "./data-table-column-component-options";

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

@@ -0,0 +1,24 @@
+import { ExtractPropTypes } from "vue";
+import { ColumnOptions, DataTable } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+
+export const dataTableProps = buildProps({
+  dataTable: { type: DataTable<any>, required: true },
+  selection: { type: Boolean, default: false },
+  name: { type: String },
+  primaryKey: { type: String },
+  pageSize: { type: Number },
+  interfaceURL: { type: Object },
+  listInterfaceURL: { type: String },
+  deleteInterfaceURL: { type: String },
+  autoLoad: { type: Boolean, default: true },
+  columns: { type: Array<ColumnOptions>, default: () => [] },
+} as const);
+
+export type DataTableProps = ExtractPropTypes<typeof dataTableProps>;
+
+export const dataTableEmits = {
+  changeDataTable: (dataTable: any) => dataTable instanceof DataTable,
+};
+
+export const DataTableEmits = typeof dataTableEmits;

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

@@ -0,0 +1,102 @@
+import { DataTable, TableColumn } from "@maketribe/dm";
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  provide,
+  reactive,
+  unref,
+  watch,
+} from "vue";
+import { dataTableProps } from "./data-table-options";
+import { DATATABLE_CONTEXT_KEY } from "./token";
+import MKTableView from "./views/table-view";
+
+export default defineComponent({
+  name: "MKDataTable",
+  props: dataTableProps,
+  setup(props, { slots }) {
+    let _dataTable: DataTable | null = null;
+
+    const dataTable = computed(() => {
+      if (props.dataTable instanceof DataTable) {
+        return props.dataTable;
+      }
+
+      if (!_dataTable) {
+        _dataTable = reactive(
+          new DataTable({
+            name: props.name!,
+            primaryKey: props.primaryKey,
+            pageSize: props.pageSize ?? 20,
+            interfaceURL: {
+              list: props.listInterfaceURL || "",
+              delete: props.deleteInterfaceURL || "",
+            },
+          })
+        ) as DataTable;
+      }
+
+      return _dataTable;
+    });
+
+    watch(
+      dataTable,
+      async (dataTable) => {
+        // nextTick(() => {
+        //   dataTable.dataFilter.setReady();
+        // });
+
+        if (props.autoLoad) {
+          dataTable.load();
+        }
+
+        let columns = unref(dataTable).getColumns();
+
+        const extractColumnConfig = props.columns.filter(
+          (config) =>
+            columns.findIndex((column) => column.name === config.name) === -1
+        );
+
+        const extractColumn = extractColumnConfig.map(
+          (config) => new TableColumn({ visible: true, ...config })
+        );
+
+        columns = [...extractColumn, ...columns];
+
+        let sortedColumns: TableColumn[] = [];
+        for (const columnConfig of props.columns) {
+          const column = columns.find(
+            (column) => column.name === columnConfig.name
+          )!;
+
+          sortedColumns.push(column);
+        }
+
+        const _columns = columns.filter(
+          (column) =>
+            sortedColumns.findIndex((item) => item.name === column.name) === -1
+        );
+
+        sortedColumns = [...sortedColumns, ..._columns];
+
+        dataTable.setColumns(sortedColumns);
+
+        await dataTable.init();
+      },
+      { immediate: true }
+    );
+
+    provide(DATATABLE_CONTEXT_KEY, reactive({ dataTable }));
+
+    return () => {
+      return (
+        <div class="mk-data-table">
+          {slots.default?.({ dataTable: unref(dataTable) }) || (
+            <MKTableView dataTable={unref(dataTable)} />
+          )}
+        </div>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,17 @@
+import { withInstall } from "@maketribe/utils";
+import DataTable from "./data-table";
+import { MKDataTableColumn } from "./data-table-column";
+import { MKDataTableColumnComponent } from "./data-table-column-component";
+
+export const MKDataTable = withInstall(DataTable, {
+  MKDataTableColumn,
+  MKDataTableColumnComponent,
+});
+
+export default MKDataTable;
+
+export * from "./data-table-column";
+export * from "./data-table-column-component";
+export * from "./data-table-options";
+
+export * from "./views";

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

@@ -0,0 +1,10 @@
+import { InjectionKey } from "vue";
+import { DataTable } from "@maketribe/dm";
+
+export interface DataTableContext {
+  dataTable: DataTable;
+}
+
+export const DATATABLE_CONTEXT_KEY: InjectionKey<DataTableContext> = Symbol(
+  "dataTableContextKey"
+);