@maketribe/ms-app 4.0.0-alpha.4 → 4.0.0-alpha.5

package/dist/cjs/index-B-Aeexgc.cjs

@@ -0,0 +1,200 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils = require("@maketribe/utils");
+const vue = require("vue");
+const index = require("./index-B1VQXzw4.cjs");
+const dm = require("@maketribe/dm");
+const elementPlus = require("element-plus");
+const formDetailProps = utils.buildProps({
+  modelValue: {
+    type: null
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  column: { type: dm.FormDetailColumn, required: true },
+  formWidth: {
+    type: String,
+    default: "400px"
+  }
+});
+const formDetailEmits = {
+  "update:model-value": (v) => true
+};
+utils.buildProps({
+  column: { type: dm.FormColumn, required: true }
+});
+function useFormItem() {
+  const dataFormItemContext = vue.inject(index.DATA_FORM_ITEM_CONTEXT_KEY);
+  const column = vue.computed(() => {
+    var _a;
+    return ((_a = vue.unref(dataFormItemContext)) == null ? void 0 : _a.column) ?? null;
+  });
+  const value = vue.computed({
+    get: () => {
+      const _column = vue.unref(column);
+      if (!_column) {
+        return;
+      }
+      return _column.getValue();
+    },
+    set: (v) => {
+      const _column = vue.unref(column);
+      if (!_column) {
+        return;
+      }
+      _column.setValue(v);
+    }
+  });
+  const disabled = vue.computed(() => {
+    var _a;
+    return ((_a = vue.unref(column)) == null ? void 0 : _a.disabled) ?? false;
+  });
+  return { column, value, disabled };
+}
+const _hoisted_1 = { class: "mk-form-detail" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "form-detail",
+  props: formDetailProps,
+  emits: formDetailEmits,
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const detailTable = vue.computed(() => props.column.detailTable);
+    const detailForm = vue.computed(() => props.column.detailForm);
+    const { value } = useFormItem();
+    vue.watch(
+      vue.computed(() => vue.unref(value)),
+      (value2) => {
+        const _detailTable = vue.unref(detailTable);
+        value2 = Array.isArray(value2) ? value2 : [];
+        _detailTable.setList(
+          value2.map((item) => _detailTable.formatItem(item))
+        );
+      }
+    );
+    const isShowDataForm = vue.ref(false);
+    vue.watch(
+      detailTable,
+      (dataTable, _, onCleanup) => {
+        const addRecordDisposable = dataTable.addRecordEvent.on(async ({ item }) => {
+          const _dataForm = vue.unref(detailForm);
+          if (!_dataForm) {
+            console.warn(`没有对应的 (${dataTable.name}) DataForm 实现`);
+            return;
+          }
+          isShowDataForm.value = true;
+          _dataForm.addRecord(item);
+        });
+        const editRecordDisposable = dataTable.editRecordEvent.on(
+          async ({ item }) => {
+            const _dataForm = vue.unref(detailForm);
+            if (!_dataForm) {
+              console.warn(`没有对应的 (${dataTable.name}) DataForm 实现`);
+              return;
+            }
+            isShowDataForm.value = true;
+            try {
+              const response = await _dataForm.editRecord(item);
+              if (response.data.code !== 200) {
+                dm.Messager.error({ message: response.data.msg });
+                isShowDataForm.value = false;
+                return;
+              }
+            } catch (e) {
+              console.error(e);
+              isShowDataForm.value = false;
+            }
+          }
+        );
+        onCleanup(() => {
+          addRecordDisposable.dispose();
+          editRecordDisposable.dispose();
+        });
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      detailForm,
+      (dataForm, _, onCleanup) => {
+        const submittedDisposable = dataForm.submittedEvent.on(() => {
+          var _a;
+          isShowDataForm.value = false;
+          (_a = vue.unref(detailTable)) == null ? void 0 : _a.load();
+        });
+        const cancelDisposable = dataForm.cancelEvent.on(() => {
+          isShowDataForm.value = false;
+        });
+        onCleanup(() => {
+          submittedDisposable.dispose();
+          cancelDisposable.dispose();
+        });
+      },
+      { immediate: true }
+    );
+    const handleFormSave = async () => {
+      var _a;
+      await ((_a = vue.unref(detailForm)) == null ? void 0 : _a.simpleSubmit());
+    };
+    const handleFormCancel = () => {
+      vue.unref(detailForm).cancel();
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(vue.unref(index.MKDataTable), {
+          dataTable: detailTable.value,
+          autoLoad: false
+        }, null, 8, ["dataTable"]),
+        vue.createVNode(index._sfc_main, {
+          modelValue: isShowDataForm.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isShowDataForm.value = $event),
+          title: "fdasfsaf"
+        }, {
+          footer: vue.withCtx(() => [
+            vue.createVNode(vue.unref(elementPlus.ElButton), { onClick: handleFormCancel }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode("取消")
+              ]),
+              _: 1
+            }),
+            vue.createVNode(vue.unref(elementPlus.ElButton), {
+              type: "primary",
+              onClick: handleFormSave
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode("保存")
+              ]),
+              _: 1
+            })
+          ]),
+          empty: vue.withCtx(() => [
+            vue.createVNode(vue.unref(elementPlus.ElEmpty), { "image-size": 100 })
+          ]),
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(index.MKPageContainer), null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(index.DataForm, {
+                  dataForm: detailForm.value,
+                  autoLoad: false
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(index.MKForm))
+                  ]),
+                  _: 1
+                }, 8, ["dataForm"])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ]);
+    };
+  }
+});
+const MKFormDetail = utils.withInstall(_sfc_main);
+exports.MKFormDetail = MKFormDetail;
+exports.default = MKFormDetail;
+exports.formDetailEmits = formDetailEmits;
+exports.formDetailProps = formDetailProps;
+//# sourceMappingURL=index-B-Aeexgc.cjs.map

package/dist/cjs/index-B-Aeexgc.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-B-Aeexgc.cjs","sources":["../../src/components/data-model/data-form/components/form-detail/form-detail-options.ts","../../src/components/data-model/data-form/composables/use-form-item.ts","../../src/components/data-model/data-form/components/form-detail/form-detail.vue","../../src/components/data-model/data-form/components/form-detail/index.ts"],"sourcesContent":["import { ExtractPropTypes } from \"vue\";\nimport { buildProps } from \"@maketribe/utils\";\nimport { FormDetailColumn } from \"@maketribe/dm\";\n\nexport const formDetailProps = buildProps({\n  modelValue: {\n    type: null,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  column: { type: FormDetailColumn, required: true },\n  formWidth: {\n    type: String,\n    default: \"400px\",\n  },\n} as const);\n\nexport type FormDetailProps = ExtractPropTypes<typeof formDetailProps>;\n\nexport const formDetailEmits = {\n  \"update:model-value\": (v: any) => true,\n};\n\nexport type FormDetailEmits = ExtractPropTypes<typeof formDetailEmits>;\n","import { ExtractPropTypes, computed, inject, unref } from \"vue\";\nimport { DATA_FORM_ITEM_CONTEXT_KEY } from \"../token\";\nimport { FormColumn } from \"@maketribe/dm\";\nimport { buildProps } from \"@maketribe/utils\";\n\nexport const columnProps = buildProps({\n  column: { type: FormColumn, required: true },\n} as const);\n\nexport type ColumnProps = ExtractPropTypes<typeof columnProps>;\n\nexport function useFormItem() {\n  const dataFormItemContext = inject(DATA_FORM_ITEM_CONTEXT_KEY);\n  const column = computed(() => unref(dataFormItemContext)?.column ?? null);\n\n  const value = computed({\n    get: () => {\n      const _column = unref(column);\n\n      if (!_column) {\n        return;\n      }\n\n      return _column.getValue();\n    },\n    set: (v: any) => {\n      const _column = unref(column);\n\n      if (!_column) {\n        return;\n      }\n\n      _column.setValue(v);\n    },\n  });\n\n  const disabled = computed(() => unref(column)?.disabled ?? false);\n\n  return { column, value, disabled };\n}\n","<script setup lang=\"ts\">\r\nimport {computed, defineComponent, ref, unref, watch} from \"vue\";\r\nimport {MKPageContainer} from \"../../../../basic/page-container\";\r\nimport {MKDataTable} from \"../../../data-table\";\r\nimport DataForm from \"../../data-form.vue\";\r\nimport {formDetailEmits, formDetailProps} from \"./form-detail-options\";\r\nimport {useFormItem} from \"../../composables\";\r\nimport {MKForm} from '../../views'\r\nimport {ElButton, ElEmpty} from \"element-plus\";\r\nimport {Messager} from \"@maketribe/dm\";\r\nimport HSlideover from '../../../../../layouts/new/ui-kit/HSlideover.vue'\r\n\r\nconst props = defineProps(formDetailProps);\r\n\r\nconst emit = defineEmits(formDetailEmits)\r\n\r\nconst detailTable = computed(() => props.column.detailTable);\r\nconst detailForm = computed(() => props.column.detailForm!);\r\n\r\nconst {value} = useFormItem();\r\n\r\nwatch(\r\n  computed(() => unref(value)),\r\n  (value) => {\r\n    const _detailTable = unref(detailTable);\r\n\r\n    value = Array.isArray(value) ? value : [];\r\n\r\n    _detailTable.setList(\r\n      value.map((item: any) => _detailTable.formatItem(item))\r\n    );\r\n  }\r\n);\r\n\r\nconst isShowDataForm = ref(false);\r\n\r\nwatch(\r\n  detailTable,\r\n  (dataTable, _, onCleanup) => {\r\n    const addRecordDisposable = dataTable.addRecordEvent.on(async ({item}) => {\r\n      const _dataForm = unref(detailForm);\r\n\r\n      if (!_dataForm) {\r\n        console.warn(`没有对应的 (${dataTable.name}) DataForm 实现`);\r\n        return;\r\n      }\r\n\r\n      isShowDataForm.value = true;\r\n\r\n      _dataForm.addRecord(item);\r\n    });\r\n\r\n    const editRecordDisposable = dataTable.editRecordEvent.on(\r\n      async ({item}) => {\r\n        const _dataForm = unref(detailForm);\r\n\r\n        if (!_dataForm) {\r\n          console.warn(`没有对应的 (${dataTable.name}) DataForm 实现`);\r\n          return;\r\n        }\r\n\r\n        isShowDataForm.value = true;\r\n\r\n        try {\r\n          const response = await _dataForm.editRecord(item);\r\n\r\n          if (response.data.code !== 200) {\r\n            Messager.error({message: response.data.msg});\r\n            isShowDataForm.value = false;\r\n            return;\r\n          }\r\n        } catch (e) {\r\n          console.error(e);\r\n          isShowDataForm.value = false;\r\n        }\r\n      }\r\n    );\r\n\r\n    onCleanup(() => {\r\n      addRecordDisposable.dispose();\r\n      editRecordDisposable.dispose();\r\n    });\r\n  },\r\n  {immediate: true}\r\n);\r\n\r\nwatch(\r\n  detailForm,\r\n  (dataForm, _, onCleanup) => {\r\n    const submittedDisposable = dataForm.submittedEvent.on(() => {\r\n      isShowDataForm.value = false;\r\n\r\n      unref(detailTable)?.load();\r\n    });\r\n\r\n    const cancelDisposable = dataForm.cancelEvent.on(() => {\r\n      isShowDataForm.value = false;\r\n    });\r\n\r\n    onCleanup(() => {\r\n      submittedDisposable.dispose();\r\n      cancelDisposable.dispose();\r\n    });\r\n  },\r\n  {immediate: true}\r\n);\r\n\r\nconst handleFormSave = async () => {\r\n  await unref(detailForm)?.simpleSubmit();\r\n};\r\n\r\nconst handleFormCancel = () => {\r\n  unref(detailForm).cancel();\r\n};\r\n\r\n\r\n</script>\r\n\r\n<template>\r\n  <div class=\"mk-form-detail\">\r\n    <MKDataTable\r\n      :dataTable=\"detailTable\"\r\n      :autoLoad=\"false\"\r\n    />\r\n    <HSlideover v-model=\"isShowDataForm\" title=\"fdasfsaf\">\r\n      <MKPageContainer>\r\n        <DataForm :dataForm=\"detailForm\" :autoLoad=\"false\">\r\n          <MKForm/>\r\n        </DataForm>\r\n      </MKPageContainer>\r\n\r\n      <template #footer>\r\n\r\n        <ElButton @click=\"handleFormCancel\">取消</ElButton>\r\n        <ElButton type=\"primary\" @click=\"handleFormSave\">保存</ElButton>\r\n      </template>\r\n\r\n      <template #empty>\r\n        <ElEmpty :image-size=\"100\"/>\r\n      </template>\r\n    </HSlideover>\r\n  </div>\r\n</template>\r\n","import { withInstall } from \"@maketribe/utils\";\r\nimport FormDetail from \"./form-detail.vue\";\r\n\r\nexport const MKFormDetail = withInstall(FormDetail);\r\nexport default MKFormDetail;\r\n\r\nexport * from \"./form-detail-options\";\r\n"],"names":["buildProps","FormDetailColumn","FormColumn","inject","DATA_FORM_ITEM_CONTEXT_KEY","computed","unref","watch","value","ref","Messager","withInstall","FormDetail"],"mappings":"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"}