@maketribe/ms-app 3.0.29 → 3.0.31

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

@@ -0,0 +1,140 @@
+import { ElFormItem } from "element-plus";
+import {
+  Ref,
+  computed,
+  defineComponent,
+  inject,
+  provide,
+  reactive,
+  ref,
+  toRaw,
+  unref,
+  useSlots,
+  watch,
+} from "vue";
+import { FormColumn } from "@maketribe/dm";
+
+import { useFormColumnComponent } from "../../../../composables";
+import {
+  DATAFORM_CONTEXT_KEY,
+  DATAFORM_ITEM_CONTEXT_KEY,
+  DataFormItemContext,
+} from "../token";
+import { dataFormItemProps } from "./data-form-item-options";
+
+export default defineComponent({
+  name: "MKDataFormItem",
+  props: dataFormItemProps,
+  setup(props) {
+    const slots = useSlots();
+
+    const dataFormContext = inject(DATAFORM_CONTEXT_KEY);
+
+    const dataForm = computed(() => dataFormContext?.dataForm ?? null);
+
+    let _formColumn: FormColumn | null = null;
+
+    const existFormColumn = ref(
+      unref(dataForm)!.getColumn(props.name!)
+    ) as Ref<FormColumn | null>;
+
+    const formColumn = computed(() => {
+      const existingColumn = unref(existFormColumn);
+
+      if (existingColumn) {
+        return existingColumn;
+      }
+
+      if (!_formColumn) {
+        _formColumn = reactive(
+          new FormColumn({
+            required: props.required,
+            name: props.name!,
+            label: props.label!,
+          })
+        ) as FormColumn;
+      }
+
+      return _formColumn!;
+    });
+
+    watch(
+      formColumn,
+      (formColumn, _, onCleanup) => {
+        const existFormColumn = unref(dataForm)!.getColumn(formColumn.name);
+
+        if (!existFormColumn && _formColumn) {
+          unref(dataForm)!.addColumn(_formColumn);
+        }
+
+        onCleanup(() => {
+          if (_formColumn) {
+            unref(dataForm)!.removeColumn(_formColumn);
+          }
+        });
+      },
+      { immediate: true }
+    );
+
+    const { component, componentProps } = useFormColumnComponent(
+      formColumn,
+      dataForm
+    );
+
+    const disabled = computed(() => unref(formColumn).disabled);
+
+    const value = computed({
+      get: () => unref(formColumn)?.getValue(),
+      set: (v) => {
+        unref(formColumn).setValue(v);
+      },
+    });
+
+    const label = computed(() =>
+      typeof props.label !== "string" ? unref(formColumn).label : props.label
+    );
+
+    provide(
+      DATAFORM_ITEM_CONTEXT_KEY,
+      reactive({ column: formColumn }) as DataFormItemContext
+    );
+
+    return () => {
+      let _formColumn = unref(formColumn);
+
+      let _component = unref(component);
+
+      let children: any =
+        slots.default?.({
+          data: unref(dataForm)!.data,
+          column: _formColumn,
+          dataForm: unref(dataForm),
+        }) || null;
+
+      if (!children && _component) {
+        const FormColumnComponent = toRaw(_component);
+
+        children = (
+          <FormColumnComponent
+            {...unref(componentProps)}
+            column={_formColumn}
+            modelValue={value.value}
+            disabled={unref(disabled)}
+            onUpdate:modelValue={(v: any) => (value.value = v)}
+          />
+        );
+      }
+
+      return (
+        <ElFormItem
+          prop={_formColumn.name}
+          label={unref(label)}
+          required={_formColumn.required}
+          labelWidth={props.labelWidth}
+        >
+          {children}
+        </ElFormItem>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,6 @@
+import DataFormItem from "./data-form-item";
+
+export const MKDataFormItem = DataFormItem;
+export default MKDataFormItem;
+
+export * from "./data-form-item-options";

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

@@ -0,0 +1,43 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { ColumnOptions, DataForm } from "@maketribe/dm";
+
+export const dataFormProps = buildProps({
+  dataForm: {
+    type: DataForm<any>,
+  },
+  name: {
+    type: String,
+  },
+  primaryKey: {
+    type: String,
+  },
+  autoLoad: {
+    type: Boolean,
+    default: true,
+  },
+  loadInterfaceURL: {
+    type: String,
+  },
+  addInterfaceURL: {
+    type: String,
+  },
+  updateInterfaceURL: {
+    type: String,
+  },
+  columns: {
+    type: Array<ColumnOptions>,
+    default: () => [],
+  },
+} as const);
+
+export type DataFormProps = ExtractPropTypes<typeof dataFormProps>;
+
+export const dataFormEmits = {
+  changeDataForm: (dataForm: any) => dataForm instanceof DataForm,
+  cancel: () => true,
+  error: (e: any) => e instanceof Error,
+  submitted: (response: any) => !!response,
+};
+
+export type DataFormEmits = typeof dataFormEmits;

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

@@ -0,0 +1,113 @@
+import {
+  computed,
+  defineComponent,
+  provide,
+  reactive,
+  unref,
+  useSlots,
+  watch,
+} from "vue";
+import { FormColumn, DataForm } from "@maketribe/dm";
+
+import { dataFormEmits, dataFormProps } from "./data-form-options";
+import { DATAFORM_CONTEXT_KEY } from "./token";
+import { Disposable, Event } from "@maketribe/utils";
+import { MKFormView } from "./views";
+
+export default defineComponent({
+  name: "MKDataForm",
+  inheritAttrs: false,
+  props: dataFormProps,
+  emits: dataFormEmits,
+  setup(props, { emit, slots }) {
+    let _dataForm: DataForm | null = null;
+
+    const createDataForm = () => {
+      const dataForm = new DataForm({
+        name: props.name!,
+        primaryKey: props.primaryKey,
+        interfaceURL: {
+          load: props.loadInterfaceURL || "",
+          add: props.addInterfaceURL || "",
+          update: props.updateInterfaceURL || props.addInterfaceURL || "",
+        },
+      });
+
+      const columns = props.columns.map((column) => new FormColumn(column));
+
+      dataForm.setColumns(columns);
+
+      return dataForm;
+    };
+
+    const dataForm = computed(() => {
+      if (props.dataForm instanceof DataForm) {
+        return props.dataForm;
+      }
+
+      if (!_dataForm) {
+        _dataForm = reactive(createDataForm()) as DataForm;
+      }
+
+      return _dataForm;
+    });
+
+    watch(
+      dataForm,
+      async (dataForm, _, onCleanup) => {
+        await dataForm.init();
+
+        if (unref(dataForm).autoReset) {
+          unref(dataForm).reset();
+        }
+
+        const disposable = new Disposable();
+
+        const events = Object.keys(dataForm)
+          .filter((key) => dataForm[key as keyof DataForm] instanceof Event)
+          .map((key) => ({
+            eventName: key
+              .replace(/Event$/, "")
+              .replace(/[A-Z]/g, (match) => `-${match.toLocaleLowerCase()}`),
+            event: dataForm[key as keyof DataForm]! as Event,
+          }));
+
+        for (const item of events.filter(
+          (event) => event.eventName in dataFormEmits
+        )) {
+          disposable.register(
+            // @ts-ignore
+            item.event.on((event: any) => {
+              // @ts-ignore
+              emit(item.eventName, event);
+            })
+          );
+        }
+
+        onCleanup(() => {
+          disposable.dispose();
+        });
+
+        emit("changeDataForm", dataForm);
+      },
+      { immediate: true }
+    );
+
+    provide(
+      DATAFORM_CONTEXT_KEY,
+      reactive({
+        dataForm,
+      })
+    );
+
+    return () => {
+      return (
+        <div class="mk-data-form">
+          {slots.default?.({ ...props, dataForm: unref(dataForm) }) || (
+            <MKFormView {...props} dataForm={unref(dataForm)} v-slots={slots} />
+          )}
+        </div>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,13 @@
+import { withInstall } from "@maketribe/utils";
+import DataForm from "./data-form";
+import MKDataFormItem from "./data-form-item";
+
+export const MKDataForm = withInstall(DataForm, {
+  MKDataFormItem,
+});
+export default MKDataForm;
+
+export * from "./data-form-options";
+export * from "./data-form-item";
+
+export * from "./views";

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

@@ -0,0 +1,16 @@
+import { InjectionKey } from "vue";
+import { DataForm, FormColumn } from "@maketribe/dm";
+
+export interface DataFormContext {
+  dataForm: DataForm;
+}
+
+export const DATAFORM_CONTEXT_KEY: InjectionKey<DataFormContext> =
+  Symbol("dataFormContextKey");
+
+export interface DataFormItemContext {
+  column: FormColumn;
+}
+
+export const DATAFORM_ITEM_CONTEXT_KEY: InjectionKey<DataFormItemContext> =
+  Symbol("dataFormItemContextKey");

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

@@ -0,0 +1,16 @@
+import { ExtractPropTypes } from "vue";
+
+import { buildProps } from "@maketribe/utils";
+import { DataForm } from "@maketribe/dm";
+
+export const formProps = buildProps({
+  rules: { type: Object },
+  labelWidth: { type: String },
+  dataForm: { type: DataForm<any>, required: true },
+} as const);
+
+export type FormProps = ExtractPropTypes<typeof formProps>;
+
+export const formEmits = {};
+
+export const FormEmits = typeof formEmits;

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;