@maketribe/ms-app 3.0.3 → 3.0.5

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

@@ -0,0 +1,154 @@
+import {
+  defineComponent,
+  Fragment,
+  computed,
+  unref,
+  watch,
+  Ref,
+  ref,
+} from "vue";
+import { ElButton, ElDialog } from "element-plus";
+import { MKDataTable } from "../data-model";
+
+import {
+  dataTableSelectDialogEmits,
+  dataTableSelectDialogProps,
+} from "./data-table-select-dialog-options";
+import { DataTable, TableSelectCacheColumn } from "@maketribe/dm";
+
+export default defineComponent({
+  name: "MKDataTableSelectDialog",
+  props: dataTableSelectDialogProps,
+  emits: dataTableSelectDialogEmits,
+  setup(props, { emit }) {
+    const dataTable: Ref<DataTable | null> = ref(null);
+
+    const loading = computed(() => unref(dataTable)!.loading);
+
+    const isShowDialog = computed({
+      get: () => props.modelValue,
+      set: (v) => emit("update:model-value", v),
+    });
+
+    const handleConfirm = () => {
+      if (props.multiple) {
+        emit("update:selection", unref(dataTable)!.getSelection());
+      } else {
+        emit("update:selection", unref(dataTable)!.getSelection()[0] || "");
+      }
+
+      isShowDialog.value = false;
+
+      emit("confirm");
+    };
+
+    const handleCancel = () => {
+      isShowDialog.value = false;
+    };
+
+    watch(
+      computed(() => props.dataTable),
+      (table) => {
+        dataTable.value = table;
+        dataTable.value.setSelectionColumn(
+          new TableSelectCacheColumn({ multiple: props.multiple })
+        );
+      },
+      { immediate: true }
+    );
+
+    watch(
+      computed(() => props.multiple),
+      (multiple) => {
+        if (dataTable.value) {
+          dataTable.value.selectionColumn.multiple = multiple;
+        }
+      }
+    );
+
+    watch(
+      isShowDialog,
+      (isShowDialog, _, onCleanup) => {
+        const _dataTable = unref(dataTable)!;
+
+        if (!isShowDialog) {
+          _dataTable.clearSelection();
+          return;
+        }
+
+        const handleColumnState = () => {
+          const selection = props.selection;
+          _dataTable.setSelection(
+            Array.isArray(selection) ? selection : selection ? [selection] : []
+          );
+
+          const actionColumn = _dataTable.getColumn("$action");
+
+          if (actionColumn) {
+            actionColumn.visible = false;
+          }
+        };
+
+        if (_dataTable.initd) {
+          handleColumnState();
+          return;
+        }
+
+        const disposable = _dataTable.initdEvent.once(handleColumnState);
+
+        onCleanup(() => {
+          disposable.dispose();
+        });
+      },
+      { immediate: true }
+    );
+
+    watch(
+      computed(() => props.selection),
+      (selection) => {
+        if (props.multiple) {
+          unref(dataTable)?.setSelection(
+            Array.isArray(selection) ? selection : []
+          );
+        } else {
+          unref(dataTable)?.setSelection(selection ? [selection] : []);
+        }
+      }
+    );
+
+    return () => {
+      return (
+        <ElDialog
+          class="mk-data-table-select-dialog"
+          width="80%"
+          appendToBody
+          modelValue={unref(isShowDialog)}
+          onUpdate:modelValue={(v) => {
+            isShowDialog.value = v;
+          }}
+          v-slots={{
+            default: () =>
+              // TODO 后面需要做成不是否重新渲染DOM,现在主要是选中有问题。在multiple切换的时候
+              unref(isShowDialog) ? (
+                <div class="mk-data-table-select-dialog__main">
+                  <MKDataTable
+                    v-loading={unref(loading)}
+                    dataTable={unref(dataTable)!}
+                    selection
+                  />
+                </div>
+              ) : null,
+            footer: () => (
+              <Fragment>
+                <ElButton type="primary" onClick={handleConfirm}>
+                  确定
+                </ElButton>
+                <ElButton onClick={handleCancel}>取消</ElButton>
+              </Fragment>
+            ),
+          }}
+        />
+      );
+    };
+  },
+});

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

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

package/src/components/file-view/file-view-options.ts

@@ -0,0 +1,8 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const fileViewProps = buildProps({
+  src: { type: String, required: true },
+} as const);
+
+export type FileViewProps = ExtractPropTypes<typeof fileViewProps>;

package/src/components/file-view/file-view.tsx

@@ -0,0 +1,40 @@
+import { defineComponent } from "vue";
+import { ElButton, ElIcon } from "element-plus";
+import { Document, Download } from "@element-plus/icons-vue";
+import { fileViewProps } from "./file-view-options";
+
+export default defineComponent({
+  name: "MKFileView",
+  props: fileViewProps,
+  setup(props) {
+    const handleDownloadClick = () => {
+      const a = document.createElement("a");
+      a.setAttribute("download", new Date().getTime().toString());
+      a.target = "_blank";
+      a.href = props.src;
+      Object.assign(a.style, { width: "1px", height: "1px" });
+
+      document.body.append(a);
+      a.click();
+
+      setTimeout(() => {
+        document.body.removeChild(a);
+      });
+    };
+
+    return () => (
+      <div class="mk-file-view">
+        <ElIcon size="20">
+          <Document />
+        </ElIcon>
+        <div class="mk-file-view__tools">
+          <ElButton
+            type="primary"
+            icon={Download}
+            onClick={handleDownloadClick}
+          />
+        </div>
+      </div>
+    );
+  },
+});

package/src/components/file-view/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import FileView from "./file-view";
+
+export const MKFileView = withInstall(FileView);
+export default MKFileView;
+
+export * from "./file-view-options";

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

@@ -0,0 +1,23 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { DataTable } from "@maketribe/dm";
+import { columnProps } from "../../data-model/data-form/composables";
+
+export const formDataSelectProps = buildProps({
+  ...columnProps,
+  source: {
+    type: Object,
+  },
+  options: {
+    type: Array,
+  },
+  dataTable: {
+    type: DataTable<any>,
+  },
+  formatOptions: {
+    type: Function,
+    default: (value: any) => value as any,
+  },
+} as const);
+
+export type FormDataSelectProps = ExtractPropTypes<typeof formDataSelectProps>;

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

@@ -0,0 +1,28 @@
+import { computed, defineComponent, unref } from "vue";
+
+import { useFormItem } from "../../data-model/data-form/composables";
+import { formDataSelectProps } from "./form-data-select-options";
+import { MKDataSelect } from "../../data-select";
+
+export type DataOptionItem = { value: any; label: string };
+
+export default defineComponent({
+  name: "MKFormDataSelect",
+  props: formDataSelectProps,
+  setup(props) {
+    const { value, column, disabled } = useFormItem();
+
+    return () => {
+      return (
+        <MKDataSelect
+          disabled={unref(disabled)}
+          modelValue={unref(value)}
+          dataTable={props.dataTable}
+          options={props.options}
+          source={props.source}
+          onUpdate:model-value={(v: any) => (value.value = v)}
+        />
+      );
+    };
+  },
+});

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

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

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

@@ -0,0 +1,19 @@
+import { DataTable } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+import { columnProps } from "../../data-model/data-form/composables";
+
+export const formDataTableSelectProps = buildProps({
+  ...columnProps,
+  labelFieldName: {
+    type: String,
+    required: true,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  dataTable: {
+    type: DataTable<any>,
+    required: true,
+  },
+} as const);

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

@@ -0,0 +1,32 @@
+import { computed, defineComponent, unref } from "vue";
+import { MKDataTableSelect } from "../../data-table-select";
+import { formDataTableSelectProps } from "./form-data-table-select-options";
+import { useFormItem } from "../../data-model/data-form/composables";
+
+export default defineComponent({
+  name: "MKFormDataTableSelelct",
+  props: formDataTableSelectProps,
+  setup(props) {
+    const { column, value, disabled } = useFormItem();
+
+    const handleRecordsChange = (records: any[]) => {
+      const _column = unref(column);
+
+      if (_column) {
+        _column.additionalEventData = { records };
+      }
+    };
+
+    return () => {
+      return (
+        <MKDataTableSelect
+          modelValue={unref(value)}
+          disabled={unref(disabled)}
+          onUpdate:model-value={(v) => (value.value = v)}
+          onRecordsChange={handleRecordsChange}
+          {...props}
+        />
+      );
+    };
+  },
+});

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

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

package/src/components/form-components/form-date-picker/form-date-picker-options.ts

@@ -0,0 +1,18 @@
+import { buildProps } from "@maketribe/utils";
+import { columnProps } from "../../data-model/data-form/composables";
+import { ExtractPropTypes } from "@vue/runtime-core";
+
+export const datePickerTypes = ["date", "year", "month", "datetime"] as const;
+
+export const formDatePickerProps = buildProps({
+  ...columnProps,
+  type: {
+    default: "date",
+    values: datePickerTypes,
+  },
+  valueFormat: {
+    type: String,
+  },
+});
+
+export type FormDatePickerProps = ExtractPropTypes<typeof formDatePickerProps>;

package/src/components/form-components/form-date-picker/form-date-picker.tsx

@@ -0,0 +1,46 @@
+import { computed, defineComponent, unref } from "vue";
+import { ElDatePicker } from "element-plus";
+import {
+  datePickerTypes,
+  formDatePickerProps,
+} from "./form-date-picker-options";
+import { useFormItem } from "../../data-model/data-form/composables";
+
+export default defineComponent({
+  name: "MKFormDatePicker",
+  props: formDatePickerProps,
+  setup(props) {
+    const { value, disabled } = useFormItem();
+
+    const type = computed(() =>
+      datePickerTypes.includes(props.type) ? props.type : "date"
+    );
+
+    const valueFormat = computed(() => {
+      switch (unref(type)) {
+        case "date":
+          return "YYYY-MM-DD";
+        case "datetime":
+          return "YYYY-MM-DD HH:mm:ss";
+        case "month":
+          return "YYYY-MM";
+        case "year":
+          return "YYYY";
+        default:
+          return props.valueFormat;
+      }
+    });
+
+    return () => {
+      return (
+        <ElDatePicker
+          type={unref(type)}
+          valueFormat={unref(valueFormat)}
+          disabled={unref(disabled)}
+          modelValue={unref(value)}
+          onUpdate:modelValue={(v: any) => (value.value = v)}
+        />
+      );
+    };
+  },
+});

package/src/components/form-components/form-date-picker/index.ts

@@ -0,0 +1,8 @@
+import { withInstall } from "@maketribe/utils";
+import FormDatePicker from "./form-date-picker";
+
+export const MKFormDatePicker = withInstall(FormDatePicker);
+
+export default MKFormDatePicker;
+
+export * from "./form-date-picker-options";

package/src/components/form-components/form-detail/form-detail-options.ts

@@ -0,0 +1,15 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { FormDetailColumn } from "@maketribe/dm";
+import { columnProps } from "../../data-model/data-form/composables";
+
+export const formDetailProps = buildProps({
+  ...columnProps,
+  column: { type: FormDetailColumn, required: true },
+  formWidth: {
+    type: String,
+    default: "400px",
+  },
+} as const);
+
+export type FormDetailProps = ExtractPropTypes<typeof formDetailProps>;

package/src/components/form-components/form-detail/form-detail.tsx

@@ -0,0 +1,110 @@
+import { computed, defineComponent, ref, unref, watch } from "vue";
+import { MKDataFormPage, MKDataTable } from "../../data-model";
+import { formDetailProps } from "./form-detail-options";
+import { useFormItem } from "../../data-model/data-form/composables";
+import { ElDrawer, ElEmpty } from "element-plus";
+
+export default defineComponent({
+  name: "MKFormDetail",
+  props: formDetailProps,
+  setup(props) {
+    const detailTable = computed(() => props.column.detailTable);
+    const detailForm = computed(() => props.column.detailForm!);
+
+    const { value } = useFormItem();
+
+    const isShowDrawer = ref(false);
+
+    watch(
+      computed(() => unref(value)),
+      (value) => {
+        const _detailTable = unref(detailTable);
+
+        value = Array.isArray(value) ? value : [];
+
+        _detailTable.setList(
+          value.map((item: any) => _detailTable.formatItem(item))
+        );
+      }
+    );
+
+    watch(
+      detailTable,
+      (detailTable, _, onCleanUp) => {
+        detailTable.dataFilter.setReady();
+
+        const editRecordEventDisposable = detailTable.editRecordEvent.on(
+          ({ item }) => {
+            unref(detailForm).editRecord(item);
+
+            isShowDrawer.value = true;
+          }
+        );
+
+        const addRecordEventDisposable = detailTable.addRecordEvent.on(
+          async () => {
+            isShowDrawer.value = true;
+
+            await unref(detailForm).addRecord();
+          }
+        );
+
+        onCleanUp(() => {
+          editRecordEventDisposable.dispose();
+          addRecordEventDisposable.dispose();
+        });
+      },
+      { immediate: true }
+    );
+
+    watch(
+      detailForm,
+      (detailForm, _, onCleanup) => {
+        const submittedEventDisposable = detailForm.submittedEvent.on(() => {
+          isShowDrawer.value = false;
+
+          unref(detailTable).load();
+        });
+
+        onCleanup(() => {
+          submittedEventDisposable.dispose();
+        });
+      },
+      { immediate: true }
+    );
+
+    const handleDrawerCancel = () => {
+      isShowDrawer.value = false;
+    };
+
+    return () => {
+      const dataForm = unref(isShowDrawer) ? (
+        <MKDataFormPage
+          dataForm={unref(detailForm)}
+          autoLoad={false}
+          onCancel={handleDrawerCancel}
+        />
+      ) : null;
+
+      return (
+        <div class="mk-form-detail">
+          <MKDataTable
+            dataTable={unref(detailTable)}
+            autoLoad={false}
+            v-slots={{ empty: () => <ElEmpty image-size={100} /> }}
+          />
+          <ElDrawer
+            class="mk-form-detail__drawer"
+            modelValue={unref(isShowDrawer)}
+            onUpdate:modelValue={(v) => (isShowDrawer.value = v)}
+            appendToBody
+            withHeader={false}
+            width="50%"
+          >
+            {dataForm}
+          </ElDrawer>
+        </div>
+      );
+    };
+  },
+});

package/src/components/form-components/form-detail/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import FormDetail from "./form-detail";
+
+export const MKFormDetail = withInstall(FormDetail);
+export default MKFormDetail;
+
+export * from "./form-detail-options";

package/src/components/form-components/form-detail-select/form-detail-select-options.ts

@@ -0,0 +1,39 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { DataTable, FormDetailColumn } from "@maketribe/dm";
+import { columnProps } from "../../data-model/data-form/composables";
+
+export const formDetailSelectProps = buildProps({
+  ...columnProps,
+  modelValue: {
+    type: null,
+  },
+  labelFieldName: {
+    type: String,
+    required: true,
+  },
+  saveFieldName: {
+    type: String,
+    required: true,
+  },
+  primaryFieldName: {
+    type: String,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  dataTable: {
+    type: DataTable<any>,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  column: { type: FormDetailColumn, required: true },
+} as const);
+
+export type FormDetailSelectProps = ExtractPropTypes<
+  typeof formDetailSelectProps
+>;

package/src/components/form-components/form-detail-select/form-detail-select.tsx

@@ -0,0 +1,68 @@
+import { computed, defineComponent, unref, watch } from "vue";
+import MKDataTableSelect from "../../data-table-select";
+import { formDetailSelectProps } from "./form-detail-select-options";
+import { useFormItem } from "../../data-model/data-form/composables";
+import { isEqual } from "lodash-es";
+
+export default defineComponent({
+  name: "MKFormDetailSelect",
+  inheritAttrs: false,
+  props: formDetailSelectProps,
+  setup(props) {
+    const { value } = useFormItem();
+
+    const detailTable = computed(() => props.column.detailTable);
+
+    const selected = computed({
+      get: () => {
+        const list = unref(detailTable).getList();
+
+        if (!list) {
+          return null;
+        }
+
+        return props.multiple
+          ? [...list].map((item) => item[props.saveFieldName])
+          : list[0][props.saveFieldName] ?? null;
+      },
+      set: (v) => {
+        if (props.multiple) {
+          value.value = v.map((item: any) => ({ [props.saveFieldName]: item }));
+        } else {
+          value.value = v ? { [props.saveFieldName]: v } : null;
+        }
+      },
+    });
+
+    watch(
+      value,
+      (value) => {
+        const _value = unref(detailTable)
+          .getList()
+          .map((item) => item[props.saveFieldName]);
+
+        if (isEqual(value, _value)) {
+          return;
+        }
+
+        unref(detailTable).dataFilter.setReady();
+        unref(detailTable).load();
+      },
+      { immediate: true }
+    );
+
+    return () => {
+      return (
+        <MKDataTableSelect
+          modelValue={unref(selected)}
+          onUpdate:model-value={(v: any) => (selected.value = v)}
+          labelFieldName={props.labelFieldName}
+          primaryFieldName={props.primaryFieldName}
+          multiple={props.multiple}
+          disabled={props.disabled}
+          dataTable={props.dataTable}
+        />
+      );
+    };
+  },
+});

package/src/components/form-components/form-detail-select/index.ts

@@ -0,0 +1,5 @@
+import FormDetailSelect from "./form-detail-select";
+
+export const MKFormDetailSelect = FormDetailSelect;
+
+export default MKFormDetailSelect;

package/src/components/form-components/form-icon-select/form-icon-select-options.ts

@@ -0,0 +1,9 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { columnProps } from "../../data-model/data-form/composables";
+
+export const formIconSelectProps = buildProps({
+  ...columnProps,
+});
+
+export type FormIconSelectProps = ExtractPropTypes<typeof formIconSelectProps>;