m-eleplus-crud 0.0.1

package/es/packages/components/crud/src/crud.mjs

@@ -0,0 +1,606 @@
+import { defineComponent, useSlots, computed, ref, watch, onMounted, resolveComponent, openBlock, createElementBlock, createVNode, unref, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, createCommentVNode, createElementVNode, createBlock, createTextVNode, toDisplayString, mergeProps, nextTick } from 'vue';
+import { cloneDeep, get, set } from 'lodash-unified';
+import { crudProps, crudEmits } from './crud2.mjs';
+import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
+import { ElMessageBox } from '../../../../node_modules/.pnpm/element-plus@2.9.1_vue@3.5.13_typescript@5.5.4_/node_modules/element-plus/es/components/message-box/index.mjs';
+import { useGlobalConfig } from '../../config-provider/src/hooks/use-global-config.mjs';
+import { useLocale } from '../../../hooks/use-locale/index.mjs';
+
+const COMPONENT_NAME = "MCrud";
+const __default__ = defineComponent({
+  name: COMPONENT_NAME
+});
+const _sfc_main = defineComponent({
+  ...__default__,
+  props: crudProps,
+  emits: crudEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const globalConfig = useGlobalConfig();
+    const { t } = useLocale();
+    const searchSlots = computed(() => {
+      const keys = Object.keys(slots);
+      const result = {};
+      for (const key of keys) {
+        if (key.endsWith("Search")) {
+          result[key.replace("Search", "")] = slots[key];
+        }
+      }
+      return result;
+    });
+    const formSlots = computed(() => {
+      const keys = Object.keys(slots);
+      const result = {};
+      for (const key of keys) {
+        if (key.endsWith("Form")) {
+          result[key.replace("Form", "")] = slots[key];
+        }
+      }
+      return result;
+    });
+    const tableSlots = computed(() => {
+      const whites = ["topLeft", "topRight", "addBtn"];
+      const keys = Object.keys(slots);
+      const result = {};
+      for (const key of keys) {
+        if (!whites.includes(key) && !key.endsWith("Search") && !key.endsWith("Form")) {
+          result[key] = slots[key];
+        }
+      }
+      return result;
+    });
+    const crudOption = ref({
+      addBtn: true,
+      editBtn: true,
+      delBtn: true,
+      addBtnText: t("m.crud.addBtnText"),
+      addBtnIcon: "Plus",
+      addDialogTitle: t("m.crud.addDialogTitle"),
+      editDialogTitle: t("m.crud.editDialogTitle"),
+      viewDialogTitle: t("m.crud.viewDialogTitle"),
+      dialogWidth: "800px",
+      column: []
+    });
+    const dialogType = ref("add");
+    const searchRef = ref();
+    const formRef = ref();
+    const tableRef = ref();
+    const dialogVisible = ref(false);
+    const tableHeight = ref(void 0);
+    const _modelForm = ref();
+    const _rowIndex = ref(-1);
+    const dialogTitle = computed(() => {
+      if (dialogType.value === "add") {
+        return crudOption.value.addDialogTitle;
+      }
+      if (dialogType.value === "edit") {
+        return crudOption.value.editDialogTitle;
+      }
+      return crudOption.value.viewDialogTitle;
+    });
+    const modelForm = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(value) {
+        emit("update:modelValue", value);
+      }
+    });
+    const __firstModelForm = ref({});
+    __firstModelForm.value = props.modelValue;
+    const tableOption = ref({
+      menu: true,
+      column: []
+    });
+    const searchOption = ref({
+      column: []
+    });
+    const formOption = computed(() => {
+      let option = {
+        column: []
+      };
+      option = transFormOption(
+        Object.assign({}, option, copyObjectExcept(crudOption.value, ["column"]))
+      );
+      for (let i = 0; i < crudOption.value.column.length; i++) {
+        const item = cloneDeep(crudOption.value.column[i]);
+        const formColumn = transFormColumn(item);
+        if (["index", "single", "selection"].includes(item.type || "")) {
+          continue;
+        }
+        if (dialogType.value === "add") {
+          if (!item.addHide) {
+            option.column.push(formColumn);
+          }
+        } else if (dialogType.value === "edit") {
+          if (!item.editHide) {
+            option.column.push(formColumn);
+          }
+        } else {
+          if (!item.viewHide) {
+            option.column.push(formColumn);
+          }
+        }
+      }
+      return option;
+    });
+    const searchProxys = new Proxy(props.search, {
+      get(target, key) {
+        return get(target, key);
+      },
+      set(target, key, value) {
+        set(target, key, value);
+        return true;
+      }
+    });
+    const selectData = computed({
+      get() {
+        return props.select;
+      },
+      set(value) {
+        emit("update:select", value);
+      }
+    });
+    const transSearchColumn = (column) => {
+      const result = cloneDeep(column);
+      if (column.searchOrder) {
+        result.order = column.searchOrder;
+      } else {
+        delete result.order;
+      }
+      if (column.searchValue) {
+        result.value = column.searchValue;
+      } else {
+        delete result.value;
+      }
+      if (column.searchPlaceholder) {
+        result.placeholder = column.searchPlaceholder;
+      } else {
+        delete result.placeholder;
+      }
+      if (column.searchRules) {
+        result.rules = column.searchRules;
+      } else {
+        delete result.rules;
+      }
+      if (column.searchSpan) {
+        result.span = column.searchSpan;
+      } else {
+        delete result.span;
+      }
+      if (column.searchLabelWidth) {
+        result.labelWidth = column.searchLabelWidth;
+      } else {
+        delete result.labelWidth;
+      }
+      return result;
+    };
+    const transFormColumn = (column) => {
+      const result = cloneDeep(column);
+      if (column.formOrder) {
+        result.order = column.formOrder;
+      } else {
+        delete result.order;
+      }
+      if (column.formValue) {
+        result.value = column.formValue;
+      } else {
+        delete result.value;
+      }
+      if (column.formPlaceholder) {
+        result.placeholder = column.formPlaceholder;
+      } else {
+        delete result.placeholder;
+      }
+      if (column.formRules) {
+        result.rules = column.formRules;
+      } else {
+        delete result.rules;
+      }
+      if (column.formLabelWidth) {
+        result.labelWidth = column.formLabelWidth;
+      } else {
+        delete result.labelWidth;
+      }
+      if (column.formSpan || column.addSpan || column.editSpan || column.viewSpan) {
+        if (column.formSpan) {
+          result.span = column.formSpan;
+        }
+        if (dialogType.value === "add" && column.addSpan) {
+          result.span = column.addSpan;
+        } else if (dialogType.value === "edit" && column.editSpan) {
+          result.span = column.editSpan;
+        } else if (dialogType.value === "view" && column.viewSpan) {
+          result.span = column.viewSpan;
+        }
+      } else {
+        delete result.span;
+      }
+      return result;
+    };
+    const transSearchOption = (option) => {
+      const result = cloneDeep(option);
+      if (option.searchLabelWidth) {
+        result.labelWidth = option.searchLabelWidth;
+      } else {
+        delete result.labelWidth;
+      }
+      return result;
+    };
+    const transFormOption = (option) => {
+      const result = cloneDeep(option);
+      if (option.formLabelWidth) {
+        result.labelWidth = option.formLabelWidth;
+      } else {
+        delete result.labelWidth;
+      }
+      return result;
+    };
+    const currentPageChange = (page) => {
+      var _a;
+      (_a = searchRef.value) == null ? void 0 : _a.search(page);
+    };
+    const pageSizeChange = (pageSize) => {
+      var _a;
+      searchProxys.limit = pageSize;
+      (_a = searchRef.value) == null ? void 0 : _a.search();
+    };
+    const handleSearch = (form) => {
+      var _a;
+      (_a = tableRef.value) == null ? void 0 : _a.clearSelection();
+      emit("search", form);
+    };
+    const handleReset = () => {
+      var _a;
+      (_a = tableRef.value) == null ? void 0 : _a.clearSelection();
+      emit("reset");
+    };
+    const setTableHeight = () => {
+      nextTick(() => {
+        var _a, _b;
+        if (crudOption.value.height === "auto") {
+          const tableStyle = (_a = tableRef.value) == null ? void 0 : _a.$el;
+          const pageStyle = document.querySelector(".m-pagination-box");
+          const calcHeight = crudOption.value.calcHeight || ((_b = globalConfig.value) == null ? void 0 : _b.calcHeight) || 0;
+          tableHeight.value = document.documentElement.clientHeight - ((tableStyle == null ? void 0 : tableStyle.offsetTop) || 0) - ((pageStyle == null ? void 0 : pageStyle.offsetHeight) || 0) - calcHeight;
+        } else {
+          tableHeight.value = crudOption.value.height;
+        }
+      });
+    };
+    const rowAdd = () => {
+      dialogType.value = "add";
+      dialogVisible.value = true;
+    };
+    const rowEdit = (row, index) => {
+      _modelForm.value = cloneDeep(row);
+      _rowIndex.value = index;
+      dialogType.value = "edit";
+      modelForm.value = cloneDeep(row);
+      dialogVisible.value = true;
+    };
+    const rowView = (row, index) => {
+      _modelForm.value = cloneDeep(row);
+      _rowIndex.value = index;
+      dialogType.value = "view";
+      modelForm.value = cloneDeep(row);
+      dialogVisible.value = true;
+    };
+    const rowDel = (row, index) => {
+      ElMessageBox.confirm("\u6B64\u64CD\u4F5C\u5C06\u5220\u9664\u8BE5\u6570\u636E, \u662F\u5426\u7EE7\u7EED?", "\u63D0\u793A", {
+        confirmButtonText: "\u786E\u5B9A",
+        cancelButtonText: "\u53D6\u6D88",
+        type: "warning"
+      }).then(() => {
+        emit("rowDel", row, index);
+      }).catch(() => {
+      });
+    };
+    const dialogEnter = async (done, loading) => {
+      const valid = await formRef.value.validForm();
+      if (!valid) {
+        loading();
+        return;
+      }
+      if (props.beforeEnter && !await props.beforeEnter()) {
+        loading();
+        return;
+      }
+      if (dialogType.value === "add") {
+        emit("rowSave", modelForm.value, done, loading);
+      } else if (dialogType.value === "edit") {
+        emit("rowEdit", modelForm.value, done, loading);
+      }
+    };
+    const dialogCancel = () => {
+      emit("rowCancel", _modelForm.value || {}, _rowIndex.value, dialogType.value);
+    };
+    const dialogClose = () => {
+      _modelForm.value = null;
+      _rowIndex.value = -1;
+      if (formRef.value) {
+        formRef.value.clear();
+        modelForm.value = cloneDeep(__firstModelForm.value);
+      } else {
+        emit("update:modelValue", cloneDeep(__firstModelForm.value));
+      }
+    };
+    const copyObjectExcept = (sourceObj, excludeKeys = []) => {
+      const result = {};
+      Object.keys(sourceObj).forEach((key) => {
+        if (!excludeKeys.includes(key)) {
+          result[key] = sourceObj[key];
+        }
+      });
+      return result;
+    };
+    watch(
+      () => props.option,
+      (newVal) => {
+        if (newVal) {
+          crudOption.value = Object.assign({}, crudOption.value, newVal);
+          tableOption.value = Object.assign(
+            {},
+            tableOption.value,
+            copyObjectExcept(crudOption.value, ["column"])
+          );
+          searchOption.value = transSearchOption(
+            Object.assign(
+              {},
+              searchOption.value,
+              copyObjectExcept(crudOption.value, ["column"])
+            )
+          );
+          const searchColumns = [];
+          const tableColumns = [];
+          if (newVal.column && newVal.column.length) {
+            for (let i = 0; i < newVal.column.length; i++) {
+              const item = newVal.column[i];
+              if (item.search && !["index", "single", "selection"].includes(item.type || "")) {
+                searchColumns.push(transSearchColumn(item));
+              }
+              if (!item.hide) {
+                tableColumns.push(item);
+              }
+            }
+            searchOption.value.column = searchColumns;
+            tableOption.value.column = tableColumns;
+          }
+        }
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    onMounted(() => {
+      if (crudOption.value.height) {
+        setTableHeight();
+      }
+    });
+    __expose({
+      rowAdd,
+      rowEdit,
+      rowView,
+      rowDel
+    });
+    return (_ctx, _cache) => {
+      const _component_MSearch = resolveComponent("MSearch");
+      const _component_el_button = resolveComponent("el-button");
+      const _component_el_link = resolveComponent("el-link");
+      const _component_MTable = resolveComponent("MTable");
+      const _component_m_pagination = resolveComponent("m-pagination");
+      const _component_MForm = resolveComponent("MForm");
+      const _component_MDialog = resolveComponent("MDialog");
+      return openBlock(), createElementBlock("div", { class: "m-crud" }, [
+        createVNode(_component_MSearch, {
+          ref_key: "searchRef",
+          ref: searchRef,
+          model: unref(searchProxys),
+          option: searchOption.value,
+          size: _ctx.size || unref(globalConfig).size,
+          permission: _ctx.permission,
+          onSearch: handleSearch,
+          onReset: handleReset
+        }, createSlots({
+          _: 2
+        }, [
+          renderList(Object.keys(searchSlots.value), (slotKey, index) => {
+            return {
+              name: slotKey,
+              fn: withCtx((scope) => [
+                renderSlot(_ctx.$slots, slotKey + "Search", normalizeProps(guardReactiveProps(scope)))
+              ])
+            };
+          })
+        ]), 1032, ["model", "option", "size", "permission"]),
+        createCommentVNode("\u9876\u90E8\u64CD\u4F5C\u533A\u57DF"),
+        crudOption.value.addBtn || unref(slots).topLeft ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "m-search-top"
+        }, [
+          createElementVNode("div", { class: "m-search-left" }, [
+            crudOption.value.addBtn && !unref(slots).addBtn ? (openBlock(), createBlock(_component_el_button, {
+              key: 0,
+              size: _ctx.size || unref(globalConfig).size,
+              type: "primary",
+              icon: crudOption.value.addBtnIcon,
+              onClick: ($event) => rowAdd()
+            }, {
+              default: withCtx(() => [
+                createTextVNode(
+                  toDisplayString(crudOption.value.addBtnText),
+                  1
+                )
+              ]),
+              _: 1
+            }, 8, ["size", "icon", "onClick"])) : createCommentVNode("v-if", true),
+            renderSlot(_ctx.$slots, "addBtn", normalizeProps(guardReactiveProps({ size: _ctx.size || unref(globalConfig).size }))),
+            renderSlot(_ctx.$slots, "topLeft", normalizeProps(guardReactiveProps({ size: _ctx.size || unref(globalConfig).size })))
+          ]),
+          createElementVNode("div", { class: "m-search-right" }, [
+            renderSlot(_ctx.$slots, "topRight", normalizeProps(guardReactiveProps({ size: _ctx.size || unref(globalConfig).size })))
+          ])
+        ])) : createCommentVNode("v-if", true),
+        createCommentVNode(""),
+        createCommentVNode("\u8868\u683C"),
+        createVNode(_component_MTable, {
+          ref_key: "tableRef",
+          ref: tableRef,
+          select: selectData.value,
+          "onUpdate:select": ($event) => selectData.value = $event,
+          data: _ctx.data,
+          size: _ctx.size || unref(globalConfig).size,
+          loading: _ctx.loading,
+          permission: _ctx.permission,
+          option: tableOption.value,
+          height: tableHeight.value,
+          "max-height": tableHeight.value
+        }, createSlots({
+          menu: withCtx((scope) => [
+            crudOption.value.editBtn && !unref(slots).editBtn ? (openBlock(), createBlock(_component_el_link, {
+              key: 0,
+              class: "m-control-btns",
+              type: "primary",
+              size: _ctx.size || unref(globalConfig).size,
+              underline: false,
+              icon: "Edit",
+              onClick: ($event) => rowEdit(scope.row, scope.$index)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(
+                  toDisplayString(unref(t)("m.crud.editBtnText")),
+                  1
+                )
+              ]),
+              _: 2
+            }, 1032, ["size", "onClick"])) : createCommentVNode("v-if", true),
+            crudOption.value.editBtn && unref(slots).editBtn ? renderSlot(_ctx.$slots, "editBtn", normalizeProps(mergeProps({ key: 1 }, scope))) : createCommentVNode("v-if", true),
+            crudOption.value.delBtn && !unref(slots).delBtn ? (openBlock(), createBlock(_component_el_link, {
+              key: 2,
+              class: "m-control-btns",
+              type: "primary",
+              underline: false,
+              size: _ctx.size || unref(globalConfig).size,
+              icon: "Delete",
+              onClick: ($event) => rowDel(scope.row, scope.$index)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(
+                  toDisplayString(unref(t)("m.crud.delBtnText")),
+                  1
+                )
+              ]),
+              _: 2
+            }, 1032, ["size", "onClick"])) : createCommentVNode("v-if", true),
+            crudOption.value.delBtn && unref(slots).delBtn ? renderSlot(_ctx.$slots, "delBtn", normalizeProps(mergeProps({ key: 3 }, scope))) : createCommentVNode("v-if", true),
+            crudOption.value.menu && unref(slots).menu && !(unref(slots).editBtn || unref(slots).delBtn) ? renderSlot(_ctx.$slots, "menu", normalizeProps(mergeProps({ key: 4 }, scope))) : createCommentVNode("v-if", true)
+          ]),
+          _: 2
+        }, [
+          renderList(Object.keys(tableSlots.value), (slotKey, index) => {
+            return {
+              name: slotKey,
+              fn: withCtx((scope) => [
+                renderSlot(_ctx.$slots, slotKey, normalizeProps(guardReactiveProps(scope)))
+              ])
+            };
+          })
+        ]), 1032, ["select", "onUpdate:select", "data", "size", "loading", "permission", "option", "height", "max-height"]),
+        createCommentVNode(""),
+        createCommentVNode("\u5206\u9875\u533A\u57DF"),
+        unref(searchProxys).page && _ctx.total ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "m-pagination-box"
+        }, [
+          createVNode(_component_m_pagination, {
+            small: (_ctx.size || unref(globalConfig).size) === "small",
+            total: _ctx.total,
+            "current-page": unref(searchProxys).page,
+            "page-size": unref(searchProxys).limit,
+            disabled: _ctx.loading,
+            onCurrentPage: currentPageChange,
+            onPageSize: pageSizeChange
+          }, null, 8, ["small", "total", "current-page", "page-size", "disabled"])
+        ])) : createCommentVNode("v-if", true),
+        createCommentVNode("\u65B0\u589E/\u7F16\u8F91/\u67E5\u770B\u5BF9\u8BDD\u6846"),
+        createVNode(_component_MDialog, {
+          modelValue: dialogVisible.value,
+          "onUpdate:modelValue": ($event) => dialogVisible.value = $event,
+          size: _ctx.size || unref(globalConfig).size,
+          title: dialogTitle.value,
+          width: crudOption.value.dialogWidth,
+          "save-btn": dialogType.value !== "view",
+          "cancel-btn": dialogType.value !== "view",
+          "save-btn-text": unref(t)("m.crud.dialogSaveBtnText"),
+          "cancel-btn-text": unref(t)("m.crud.dialogCancelBtnText"),
+          "save-btn-icon": dialogType.value === "add" ? "CirclePlus" : "CircleCheck",
+          onEnter: dialogEnter,
+          onCancel: dialogCancel,
+          onClose: dialogClose
+        }, {
+          default: withCtx(({ loading }) => [
+            createCommentVNode("\u6240\u6709\u7C7B\u578B\u9876\u90E8"),
+            renderSlot(_ctx.$slots, "allTop", normalizeProps(guardReactiveProps({ size: _ctx.size || unref(globalConfig).size, loading }))),
+            createCommentVNode(""),
+            createCommentVNode("\u65B0\u589E/\u7F16\u8F91\u7C7B\u578B\u9876\u90E8"),
+            dialogType.value !== "view" ? renderSlot(_ctx.$slots, "formTop", normalizeProps(mergeProps({ key: 0 }, { size: _ctx.size || unref(globalConfig).size, loading }))) : createCommentVNode("v-if", true),
+            createCommentVNode(""),
+            createCommentVNode("\u65B0\u589E\u7C7B\u578B\u9876\u90E8"),
+            dialogType.value === "add" ? renderSlot(_ctx.$slots, "addTop", normalizeProps(mergeProps({ key: 1 }, { size: _ctx.size || unref(globalConfig).size, loading }))) : createCommentVNode("v-if", true),
+            createCommentVNode(""),
+            createCommentVNode("\u7F16\u8F91\u7C7B\u578B\u9876\u90E8"),
+            dialogType.value === "edit" ? renderSlot(_ctx.$slots, "editTop", normalizeProps(mergeProps({ key: 2 }, { size: _ctx.size || unref(globalConfig).size, loading }))) : createCommentVNode("v-if", true),
+            createCommentVNode(""),
+            createCommentVNode("\u67E5\u770B\u7C7B\u578B\u9876\u90E8"),
+            dialogType.value === "view" ? renderSlot(_ctx.$slots, "viewTop", normalizeProps(mergeProps({ key: 3 }, { size: _ctx.size || unref(globalConfig).size, loading }))) : createCommentVNode("v-if", true),
+            createCommentVNode(""),
+            createVNode(_component_MForm, {
+              ref_key: "formRef",
+              ref: formRef,
+              loading,
+              size: _ctx.size || unref(globalConfig).size,
+              option: formOption.value,
+              model: modelForm.value,
+              readonly: dialogType.value === "view"
+            }, createSlots({
+              _: 2
+            }, [
+              renderList(Object.keys(formSlots.value), (slotKey, index) => {
+                return {
+                  name: slotKey,
+                  fn: withCtx((scope) => [
+                    renderSlot(_ctx.$slots, slotKey + "Form", normalizeProps(guardReactiveProps(scope)))
+                  ])
+                };
+              })
+            ]), 1032, ["loading", "size", "option", "model", "readonly"]),
+            createCommentVNode("\u6240\u6709\u7C7B\u578B\u5E95\u90E8"),
+            renderSlot(_ctx.$slots, "allBottom", normalizeProps(guardReactiveProps({ size: _ctx.size || unref(globalConfig).size, loading }))),
+            createCommentVNode(""),
+            createCommentVNode("\u65B0\u589E/\u7F16\u8F91\u7C7B\u578B\u5E95\u90E8"),
+            dialogType.value !== "view" ? renderSlot(_ctx.$slots, "formBottom", normalizeProps(mergeProps({ key: 4 }, { size: _ctx.size || unref(globalConfig).size, loading }))) : createCommentVNode("v-if", true),
+            createCommentVNode(""),
+            createCommentVNode("\u65B0\u589E\u7C7B\u578B\u5E95\u90E8"),
+            dialogType.value === "add" ? renderSlot(_ctx.$slots, "addBottom", normalizeProps(mergeProps({ key: 5 }, { size: _ctx.size || unref(globalConfig).size, loading }))) : createCommentVNode("v-if", true),
+            createCommentVNode(""),
+            createCommentVNode("\u7F16\u8F91\u7C7B\u578B\u5E95\u90E8"),
+            dialogType.value === "edit" ? renderSlot(_ctx.$slots, "editBottom", normalizeProps(mergeProps({ key: 6 }, { size: _ctx.size || unref(globalConfig).size, loading }))) : createCommentVNode("v-if", true),
+            createCommentVNode(""),
+            createCommentVNode("\u67E5\u770B\u7C7B\u578B\u5E95\u90E8"),
+            dialogType.value === "view" ? renderSlot(_ctx.$slots, "viewBottom", normalizeProps(mergeProps({ key: 7 }, { size: _ctx.size || unref(globalConfig).size, loading }))) : createCommentVNode("v-if", true),
+            createCommentVNode("")
+          ]),
+          _: 3
+        }, 8, ["modelValue", "onUpdate:modelValue", "size", "title", "width", "save-btn", "cancel-btn", "save-btn-text", "cancel-btn-text", "save-btn-icon"]),
+        createCommentVNode("")
+      ]);
+    };
+  }
+});
+var Crud = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "crud.vue"]]);
+
+export { Crud as default };
+//# sourceMappingURL=crud.mjs.map