z-crud-table 0.0.14 → 0.0.15

package/dist/components/CrudTable.vue.d.ts

@@ -9,6 +9,10 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
         type: PropType<"default" | "large-screen">;
         default: string;
     };
+    customClass: {
+        type: StringConstructor;
+        default: string;
+    };
     apiUrlQuery: {
         type: StringConstructor;
         required: true;
@@ -129,6 +133,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
     search: () => void;
     handleDelete: (ids: number[]) => Promise<void>;
     openDialog: (mode: "add" | "edit", rowData?: any) => Promise<void>;
+    submit: (mode: "add" | "edit", data: Record<string, any>) => Promise<void>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     submit: (...args: any[]) => void;
     delete: (...args: any[]) => void;
@@ -142,6 +147,10 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
         type: PropType<"default" | "large-screen">;
         default: string;
     };
+    customClass: {
+        type: StringConstructor;
+        default: string;
+    };
     apiUrlQuery: {
         type: StringConstructor;
         required: true;
@@ -262,6 +271,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
     onDelete?: ((...args: any[]) => any) | undefined;
     "onOpen-dialog"?: ((...args: any[]) => any) | undefined;
 }>, {
+    customClass: string;
     theme: "default" | "large-screen";
     columns: any[];
     showSelectionColumn: boolean;

package/dist/z-crud-table.js

@@ -1,83 +1,83 @@
-import { defineComponent as W, ref as A, resolveComponent as f, createBlock as p, openBlock as n, mergeProps as v, withCtx as s, createElementBlock as h, Fragment as x, renderList as q, createCommentVNode as g, createTextVNode as _, toDisplayString as ae, computed as P, reactive as L, onMounted as re, resolveDirective as ne, normalizeClass as ie, renderSlot as y, createElementVNode as O, withDirectives as T, createVNode as b, createSlots as se } from "vue";
+import { defineComponent as H, ref as A, resolveComponent as m, createBlock as f, openBlock as i, mergeProps as h, withCtx as u, createElementBlock as w, Fragment as j, renderList as q, createCommentVNode as c, createTextVNode as v, toDisplayString as re, computed as O, reactive as T, onMounted as ne, resolveDirective as ie, normalizeClass as se, renderSlot as b, createElementVNode as x, withDirectives as W, createVNode as _, createSlots as ue } from "vue";
 import { ElMessage as F } from "element-plus";
-import ue from "axios";
-const de = /* @__PURE__ */ W({
+import de from "axios";
+const pe = /* @__PURE__ */ H({
   __name: "DynamicForm",
   props: {
     modelValue: {},
     formConfig: {},
     rules: {}
   },
-  setup(m, { expose: C }) {
+  setup(g, { expose: D }) {
     const z = A(null);
-    return C({
+    return D({
       validate: () => {
-        var i;
-        return (i = z.value) == null ? void 0 : i.validate();
+        var s;
+        return (s = z.value) == null ? void 0 : s.validate();
       }
-    }), (i, t) => {
-      const B = f("el-input"), j = f("el-option"), w = f("el-select"), d = f("el-radio"), D = f("el-radio-group"), k = f("el-form-item"), U = f("el-form");
-      return n(), p(U, v({
-        model: i.modelValue,
-        rules: i.rules,
+    }), (s, e) => {
+      const B = m("el-input"), Q = m("el-option"), C = m("el-select"), $ = m("el-radio"), p = m("el-radio-group"), k = m("el-form-item"), U = m("el-form");
+      return i(), f(U, h({
+        model: s.modelValue,
+        rules: s.rules,
         ref_key: "formRef",
         ref: z
-      }, i.$attrs), {
-        default: s(() => [
-          (n(!0), h(x, null, q(i.formConfig, (a) => (n(), p(k, {
+      }, s.$attrs), {
+        default: u(() => [
+          (i(!0), w(j, null, q(s.formConfig, (a) => (i(), f(k, {
             key: a.prop,
             label: a.label,
             prop: a.prop
           }, {
-            default: s(() => [
-              a.type === "input" ? (n(), p(B, v({
+            default: u(() => [
+              a.type === "input" ? (i(), f(B, h({
                 key: 0,
-                modelValue: i.modelValue[a.prop],
-                "onUpdate:modelValue": (o) => i.modelValue[a.prop] = o
-              }, { ref_for: !0 }, a.componentProps), null, 16, ["modelValue", "onUpdate:modelValue"])) : g("", !0),
-              a.type === "textarea" ? (n(), p(B, v({
+                modelValue: s.modelValue[a.prop],
+                "onUpdate:modelValue": (d) => s.modelValue[a.prop] = d
+              }, { ref_for: !0 }, a.componentProps), null, 16, ["modelValue", "onUpdate:modelValue"])) : c("", !0),
+              a.type === "textarea" ? (i(), f(B, h({
                 key: 1,
                 type: "textarea",
-                modelValue: i.modelValue[a.prop],
-                "onUpdate:modelValue": (o) => i.modelValue[a.prop] = o
-              }, { ref_for: !0 }, a.componentProps), null, 16, ["modelValue", "onUpdate:modelValue"])) : g("", !0),
-              a.type === "select" ? (n(), p(w, v({
+                modelValue: s.modelValue[a.prop],
+                "onUpdate:modelValue": (d) => s.modelValue[a.prop] = d
+              }, { ref_for: !0 }, a.componentProps), null, 16, ["modelValue", "onUpdate:modelValue"])) : c("", !0),
+              a.type === "select" ? (i(), f(C, h({
                 key: 2,
-                modelValue: i.modelValue[a.prop],
-                "onUpdate:modelValue": (o) => i.modelValue[a.prop] = o
+                modelValue: s.modelValue[a.prop],
+                "onUpdate:modelValue": (d) => s.modelValue[a.prop] = d
               }, { ref_for: !0 }, a.componentProps), {
-                default: s(() => [
-                  (n(!0), h(x, null, q(a.options, (o) => (n(), p(j, {
-                    key: o.value,
-                    label: o.label,
-                    value: o.value
+                default: u(() => [
+                  (i(!0), w(j, null, q(a.options, (d) => (i(), f(Q, {
+                    key: d.value,
+                    label: d.label,
+                    value: d.value
                   }, null, 8, ["label", "value"]))), 128))
                 ]),
                 _: 2
-              }, 1040, ["modelValue", "onUpdate:modelValue"])) : g("", !0),
-              a.type === "radio-group" ? (n(), p(D, v({
+              }, 1040, ["modelValue", "onUpdate:modelValue"])) : c("", !0),
+              a.type === "radio-group" ? (i(), f(p, h({
                 key: 3,
-                modelValue: i.modelValue[a.prop],
-                "onUpdate:modelValue": (o) => i.modelValue[a.prop] = o
+                modelValue: s.modelValue[a.prop],
+                "onUpdate:modelValue": (d) => s.modelValue[a.prop] = d
               }, { ref_for: !0 }, a.componentProps), {
-                default: s(() => [
-                  (n(!0), h(x, null, q(a.options, (o) => (n(), p(d, {
-                    key: o.value,
-                    label: o.value
+                default: u(() => [
+                  (i(!0), w(j, null, q(a.options, (d) => (i(), f($, {
+                    key: d.value,
+                    label: d.value
                   }, {
-                    default: s(() => [
-                      _(ae(o.label), 1)
+                    default: u(() => [
+                      v(re(d.label), 1)
                     ]),
                     _: 2
                   }, 1032, ["label"]))), 128))
                 ]),
                 _: 2
-              }, 1040, ["modelValue", "onUpdate:modelValue"])) : g("", !0),
-              a.type === "input-disabled" ? (n(), p(B, v({
+              }, 1040, ["modelValue", "onUpdate:modelValue"])) : c("", !0),
+              a.type === "input-disabled" ? (i(), f(B, h({
                 key: 4,
-                "model-value": i.modelValue[a.prop],
+                "model-value": s.modelValue[a.prop],
                 disabled: ""
-              }, { ref_for: !0 }, a.componentProps), null, 16, ["model-value"])) : g("", !0)
+              }, { ref_for: !0 }, a.componentProps), null, 16, ["model-value"])) : c("", !0)
             ]),
             _: 2
           }, 1032, ["label", "prop"]))), 128))
@@ -86,7 +86,7 @@ const de = /* @__PURE__ */ W({
       }, 16, ["model", "rules"]);
     };
   }
-}), S = ue.create({
+}), S = de.create({
   // VITE_APP_BASE_API 是在 .env 文件中定义的基础 URL
   // 您可以根据您的项目需求进行修改
   baseURL: "",
@@ -94,28 +94,28 @@ const de = /* @__PURE__ */ W({
   // 请求超时时间
 });
 S.interceptors.request.use(
-  (m) => {
-    const C = localStorage.getItem("token");
-    return C && (m.headers.Authorization = "Bearer " + C), m;
+  (g) => {
+    const D = localStorage.getItem("token");
+    return D && (g.headers.Authorization = "Bearer " + D), g;
   },
-  (m) => (console.log(m), Promise.reject(m))
+  (g) => (console.log(g), Promise.reject(g))
 );
 S.interceptors.response.use(
-  (m) => m.data,
-  (m) => (console.log("err" + m), F({
+  (g) => g.data,
+  (g) => (console.log("err" + g), F({
     message: "接口错误，请刷新接口",
     // 这里是您要求的统一错误提示
     type: "error",
     duration: 5 * 1e3
-  }), Promise.reject(m))
+  }), Promise.reject(g))
 );
-const pe = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" }, fe = { class: "flex items-center gap-x-2" }, me = { class: "flex items-center gap-x-3 action-buttons flex-shrink-0" }, ge = {
+const fe = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" }, me = { class: "flex items-center gap-x-2" }, ge = { class: "flex items-center gap-x-3 action-buttons flex-shrink-0" }, ce = {
   key: 0,
   class: "flex items-center gap-x-2"
-}, ce = {
+}, ye = {
   key: 0,
   class: "flex justify-end"
-}, ye = { class: "dialog-footer" }, he = /* @__PURE__ */ W({
+}, be = { class: "dialog-footer" }, we = /* @__PURE__ */ H({
   __name: "CrudTable",
   props: {
     /**
@@ -123,6 +123,8 @@ const pe = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" },
      * @type {'default' | 'large-screen'}
      */
     theme: { type: String, default: "default" },
+    customClass: { type: String, default: "" },
+    // ✨ 新增 customClass prop
     // API 相关配置
     apiUrlQuery: { type: String, required: !0 },
     apiUrlDetail: { type: String, required: !0 },
@@ -165,134 +167,141 @@ const pe = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" },
     dialogFormRules: { type: Object, default: () => ({}) }
   },
   emits: ["open-dialog", "submit", "delete"],
-  setup(m, { expose: C, emit: z }) {
-    const i = z, t = m, B = P(() => ["crud-table-wrapper", `theme-${t.theme}`]), j = P(() => t.theme === "large-screen" ? "large-screen-dialog" : ""), w = (e, l) => e ? !0 : (F.error(`${l} prop is required.`), !1), d = L({ pageNum: 1, pageSize: 10, ...t.initialSearchForm }), D = A([]), k = A(0), U = A(!1), a = A([]), o = L({ visible: !1, loading: !1, submitting: !1, mode: "add", data: {}, formRef: null }), H = P(() => o.mode === "add" ? "新增" : "编辑"), M = P(() => {
-      if (o.mode === "add") return t.dialogFormConfig.filter((l) => l.prop !== "id");
-      const e = [...t.dialogFormConfig.filter((l) => l.prop !== "id")];
-      return e.some((l) => l.prop === "id") || e.unshift({ type: "input-disabled", prop: "id", label: "用户ID" }), e;
+  setup(g, { expose: D, emit: z }) {
+    const s = z, e = g, B = O(() => ["crud-table-wrapper", `theme-${e.theme}`, e.customClass]), Q = O(() => e.theme === "large-screen" ? "large-screen-dialog" : ""), C = (t, o) => t ? !0 : (F.error(`${o} prop is required.`), !1), $ = async (t, o) => {
+      try {
+        let r = { ...o };
+        if (e.onBeforeSubmit && (r = await e.onBeforeSubmit(r)), l.submitting = !0, t === "add") {
+          if (!C(e.apiUrlCreate, "apiUrlCreate")) return;
+          await S.post(e.apiUrlCreate, r), F.success("新增成功");
+        } else {
+          if (!C(e.apiUrlUpdate, "apiUrlUpdate")) return;
+          await S.put(e.apiUrlUpdate, r), F.success("更新成功");
+        }
+        return e.onAfterSubmit && e.onAfterSubmit(t, r), s("submit", { mode: t, data: r }), l.visible && (l.visible = !1), V(), Promise.resolve();
+      } catch (r) {
+        return console.log("Submit error:", r), Promise.reject(r);
+      } finally {
+        l.submitting = !1;
+      }
+    }, p = T({ pageNum: 1, pageSize: 10, ...e.initialSearchForm }), k = A([]), U = A(0), a = A(!1), d = A([]), l = T({ visible: !1, loading: !1, submitting: !1, mode: "add", data: {}, formRef: null }), M = O(() => l.mode === "add" ? "新增" : "编辑"), G = O(() => {
+      if (l.mode === "add") return e.dialogFormConfig.filter((o) => o.prop !== "id");
+      const t = [...e.dialogFormConfig.filter((o) => o.prop !== "id")];
+      return t.some((o) => o.prop === "id") || t.unshift({ type: "input-disabled", prop: "id", label: "用户ID" }), t;
     }), V = async () => {
-      if (w(t.apiUrlQuery, "apiUrlQuery")) {
-        U.value = !0;
+      if (C(e.apiUrlQuery, "apiUrlQuery")) {
+        a.value = !0;
         try {
-          let e = { ...d };
-          t.onBeforeQuery && (e = await t.onBeforeQuery(e));
-          const l = await S.get(t.apiUrlQuery, { params: e });
-          if (l && Array.isArray(l.data) && typeof l.total == "number") {
-            let u = l.data;
-            t.onAfterQuery && (u = await t.onAfterQuery(u)), D.value = u, k.value = l.total;
+          let t = { ...p };
+          e.onBeforeQuery && (t = await e.onBeforeQuery(t));
+          const o = await S.get(e.apiUrlQuery, { params: t });
+          if (o && Array.isArray(o.data) && typeof o.total == "number") {
+            let r = o.data;
+            e.onAfterQuery && (r = await e.onAfterQuery(r)), k.value = r, U.value = o.total;
           } else
-            console.warn("API response is not in the expected { data: [], total: 0 } format."), D.value = [], k.value = 0;
-        } catch (e) {
-          console.error("Fetch data failed:", e);
+            console.warn("API response is not in the expected { data: [], total: 0 } format."), k.value = [], U.value = 0;
+        } catch (t) {
+          console.error("Fetch data failed:", t);
         } finally {
-          U.value = !1;
+          a.value = !1;
         }
       }
-    }, $ = () => {
-      d.pageNum = 1, V();
-    }, G = () => {
-      const { pageNum: e, pageSize: l, ...u } = t.initialSearchForm;
-      Object.keys(d).forEach((c) => {
-        c !== "pageNum" && c !== "pageSize" && delete d[c];
-      }), Object.assign(d, u), $();
-    }, J = (e) => {
-      a.value = e;
-    }, Q = async (e, l) => {
-      let u = e === "add" ? { role: "user" } : { ...l };
-      if (t.onBeforeOpenDialog) {
-        const c = await t.onBeforeOpenDialog(e, u);
-        c && (u = c);
+    }, P = () => {
+      p.pageNum = 1, V();
+    }, J = () => {
+      const { pageNum: t, pageSize: o, ...r } = e.initialSearchForm;
+      Object.keys(p).forEach((y) => {
+        y !== "pageNum" && y !== "pageSize" && delete p[y];
+      }), Object.assign(p, r), P();
+    }, K = (t) => {
+      d.value = t;
+    }, R = async (t, o) => {
+      let r = t === "add" ? { role: "user" } : { ...o };
+      if (e.onBeforeOpenDialog) {
+        const y = await e.onBeforeOpenDialog(t, r);
+        y && (r = y);
       }
-      if (o.mode = e, o.visible = !0, e === "edit") {
-        if (!w(t.apiUrlDetail, "apiUrlDetail")) return;
-        o.loading = !0;
+      if (l.mode = t, l.visible = !0, t === "edit") {
+        if (!C(e.apiUrlDetail, "apiUrlDetail")) return;
+        l.loading = !0;
         try {
-          const c = await S.get(t.apiUrlDetail + "/" + u.id);
-          o.data = c.data;
+          const y = await S.get(e.apiUrlDetail + "/" + r.id);
+          l.data = y.data;
         } finally {
-          o.loading = !1, t.onAfterOpenDialog && t.onAfterOpenDialog(e, o.data), i("open-dialog", { mode: e, data: o.data });
+          l.loading = !1, e.onAfterOpenDialog && e.onAfterOpenDialog(t, l.data), s("open-dialog", { mode: t, data: l.data });
         }
       } else
-        o.data = u, t.onAfterOpenDialog && t.onAfterOpenDialog(e, o.data), i("open-dialog", { mode: e, data: o.data });
-    }, K = async () => {
+        l.data = r, e.onAfterOpenDialog && e.onAfterOpenDialog(t, l.data), s("open-dialog", { mode: t, data: l.data });
+    }, X = async () => {
       try {
-        o.formRef && await o.formRef.validate();
-        let e = { ...o.data };
-        if (t.onBeforeSubmit && (e = await t.onBeforeSubmit(e)), o.submitting = !0, o.mode === "add") {
-          if (!w(t.apiUrlCreate, "apiUrlCreate")) return;
-          await S.post(t.apiUrlCreate, e), F.success("新增成功");
-        } else {
-          if (!w(t.apiUrlUpdate, "apiUrlUpdate")) return;
-          await S.put(t.apiUrlUpdate, e), F.success("更新成功");
-        }
-        t.onAfterSubmit && t.onAfterSubmit(o.mode, e), i("submit", { mode: o.mode, data: e }), o.visible = !1, V();
-      } catch (e) {
-        console.log("Submit error or validation failed:", e);
-      } finally {
-        o.submitting = !1;
+        l.formRef && await l.formRef.validate(), await $(l.mode, l.data);
+      } catch (t) {
+        console.log("Validation failed:", t);
       }
-    }, E = async (e) => {
-      if (w(t.apiUrlDelete, "apiUrlDelete"))
+    }, I = async (t) => {
+      if (C(e.apiUrlDelete, "apiUrlDelete"))
         try {
-          if (t.onBeforeDelete && await t.onBeforeDelete(e) === !1)
+          if (e.onBeforeDelete && await e.onBeforeDelete(t) === !1)
             return;
-          const l = e.join(",");
-          await S.delete(t.apiUrlDelete + "/" + l.toString()), F.success("删除成功"), t.onAfterDelete && t.onAfterDelete(e), i("delete", e), D.value.length === e.length && d.pageNum > 1 && d.pageNum--, V();
-        } catch (l) {
-          console.error("Delete failed", l);
+          const o = t.join(",");
+          await S.delete(e.apiUrlDelete + "/" + o.toString()), F.success("删除成功"), e.onAfterDelete && e.onAfterDelete(t), s("delete", t), k.value.length === t.length && p.pageNum > 1 && p.pageNum--, V();
+        } catch (o) {
+          console.error("Delete failed", o);
         }
-    }, X = (e) => {
-      d.pageSize = e, $();
-    }, Y = (e) => {
-      d.pageNum = e, V();
+    }, Y = (t) => {
+      p.pageSize = t, P();
+    }, Z = (t) => {
+      p.pageNum = t, V();
     };
-    return re(V), C({
+    return ne(V), D({
       refresh: V,
       // 刷新表格
-      search: $,
+      search: P,
       // 按当前条件搜索
-      handleDelete: E,
+      handleDelete: I,
       // 手动触发删除
-      openDialog: Q
+      openDialog: R,
       // 手动打开弹窗
-    }), (e, l) => {
-      const u = f("el-button"), c = f("el-form-item"), Z = f("el-form"), N = f("el-table-column"), ee = f("el-popconfirm"), te = f("el-table"), oe = f("el-pagination"), le = f("el-dialog"), I = ne("loading");
-      return n(), h("div", {
-        class: ie(B.value)
+      submit: $
+      // 手动提交
+    }), (t, o) => {
+      const r = m("el-button"), y = m("el-form-item"), ee = m("el-form"), N = m("el-table-column"), te = m("el-popconfirm"), oe = m("el-table"), le = m("el-pagination"), ae = m("el-dialog"), L = ie("loading");
+      return i(), w("div", {
+        class: se(B.value)
       }, [
-        y(e.$slots, "header"),
-        O("div", pe, [
-          b(Z, {
-            model: d,
+        b(t.$slots, "header"),
+        x("div", fe, [
+          _(ee, {
+            model: p,
             class: "query-form flex flex-nowrap items-center gap-x-4",
             style: { "overflow-x": "auto", "padding-bottom": "8px" }
           }, {
-            default: s(() => [
-              y(e.$slots, "query-conditions", { searchForm: d }),
-              b(c, { class: "!mr-0 flex-shrink-0" }, {
-                default: s(() => [
-                  O("div", fe, [
-                    y(e.$slots, "query-left"),
-                    b(u, {
+            default: u(() => [
+              b(t.$slots, "query-conditions", { searchForm: p }),
+              _(y, { class: "!mr-0 flex-shrink-0" }, {
+                default: u(() => [
+                  x("div", me, [
+                    b(t.$slots, "query-left"),
+                    _(r, {
                       style: { "margin-left": "16px" },
                       type: "primary",
-                      onClick: $,
-                      loading: U.value
+                      onClick: P,
+                      loading: a.value
                     }, {
-                      default: s(() => l[6] || (l[6] = [
-                        _("搜索 ")
+                      default: u(() => o[6] || (o[6] = [
+                        v("搜索 ")
                       ])),
                       _: 1,
                       __: [6]
                     }, 8, ["loading"]),
-                    b(u, { onClick: G }, {
-                      default: s(() => l[7] || (l[7] = [
-                        _("清空")
+                    _(r, { onClick: J }, {
+                      default: u(() => o[7] || (o[7] = [
+                        v("清空")
                       ])),
                       _: 1,
                       __: [7]
                     }),
-                    y(e.$slots, "query-right")
+                    b(t.$slots, "query-right")
                   ])
                 ]),
                 _: 3
@@ -300,180 +309,180 @@ const pe = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" },
             ]),
             _: 3
           }, 8, ["model"]),
-          O("div", me, [
-            y(e.$slots, "action-left", { selections: a.value }),
-            y(e.$slots, "add-button-content", {}, () => [
-              b(u, {
+          x("div", ge, [
+            b(t.$slots, "action-left", { selections: d.value }),
+            b(t.$slots, "add-button-content", {}, () => [
+              _(r, {
                 type: "success",
-                onClick: l[0] || (l[0] = (r) => Q("add"))
+                onClick: o[0] || (o[0] = (n) => R("add"))
               }, {
-                default: s(() => l[8] || (l[8] = [
-                  _("新增")
+                default: u(() => o[8] || (o[8] = [
+                  v("新增")
                 ])),
                 _: 1,
                 __: [8]
               })
             ]),
-            y(e.$slots, "action-right")
+            b(t.$slots, "action-right")
           ])
         ]),
-        T((n(), p(te, v({
-          data: D.value,
-          onSelectionChange: J
-        }, e.$attrs, { style: { width: "100%", "margin-bottom": "1.5rem" } }), {
-          default: s(() => [
-            t.showSelectionColumn ? (n(), p(N, {
+        W((i(), f(oe, h({
+          data: k.value,
+          onSelectionChange: K
+        }, t.$attrs, { style: { width: "100%", "margin-bottom": "1.5rem" } }), {
+          default: u(() => [
+            e.showSelectionColumn ? (i(), f(N, {
               key: 0,
               type: "selection",
               width: "55",
               fixed: ""
-            })) : g("", !0),
-            t.showIndexColumn ? (n(), p(N, {
+            })) : c("", !0),
+            e.showIndexColumn ? (i(), f(N, {
               key: 1,
               type: "index",
               label: "序号",
               width: "70",
               fixed: ""
-            })) : g("", !0),
-            (n(!0), h(x, null, q(t.columns, (r) => (n(), p(N, v({
-              key: r.prop,
-              prop: r.prop,
-              label: r.label,
-              width: r.width,
-              sortable: r.sortable || !1
-            }, { ref_for: !0 }, r.attrs), se({ _: 2 }, [
-              r.slot ? {
+            })) : c("", !0),
+            (i(!0), w(j, null, q(e.columns, (n) => (i(), f(N, h({
+              key: n.prop,
+              prop: n.prop,
+              label: n.label,
+              width: n.width,
+              sortable: n.sortable || !1
+            }, { ref_for: !0 }, n.attrs), ue({ _: 2 }, [
+              n.slot ? {
                 name: "default",
-                fn: s((R) => [
-                  y(e.$slots, r.slot, {
-                    row: R.row
+                fn: u((E) => [
+                  b(t.$slots, n.slot, {
+                    row: E.row
                   })
                 ]),
                 key: "0"
               } : void 0
             ]), 1040, ["prop", "label", "width", "sortable"]))), 128)),
-            t.showActionsColumn ? (n(), p(N, {
+            e.showActionsColumn ? (i(), f(N, {
               key: 2,
               label: "操作",
-              width: m.actionsColumnWidth
+              width: g.actionsColumnWidth
             }, {
-              default: s((r) => [
-                r.row ? (n(), h("div", ge, [
-                  y(e.$slots, "actions", {
-                    row: r.row
+              default: u((n) => [
+                n.row ? (i(), w("div", ce, [
+                  b(t.$slots, "actions", {
+                    row: n.row
                   }, () => [
-                    t.showEditButton ? (n(), p(u, {
+                    e.showEditButton ? (i(), f(r, {
                       key: 0,
                       size: "small",
                       type: "primary",
                       link: "",
-                      onClick: (R) => Q("edit", r.row)
+                      onClick: (E) => R("edit", n.row)
                     }, {
-                      default: s(() => l[9] || (l[9] = [
-                        _("编辑 ")
+                      default: u(() => o[9] || (o[9] = [
+                        v("编辑 ")
                       ])),
                       _: 2,
                       __: [9]
-                    }, 1032, ["onClick"])) : g("", !0),
-                    t.showDeleteButton ? (n(), p(ee, {
+                    }, 1032, ["onClick"])) : c("", !0),
+                    e.showDeleteButton ? (i(), f(te, {
                       key: 1,
                       title: "确定要删除这条数据吗?",
-                      onConfirm: (R) => E([r.row.id]),
+                      onConfirm: (E) => I([n.row.id]),
                       "confirm-button-text": "确定",
                       "cancel-button-text": "取消",
                       width: "200"
                     }, {
-                      reference: s(() => [
-                        b(u, {
+                      reference: u(() => [
+                        _(r, {
                           size: "small",
                           type: "danger",
                           link: ""
                         }, {
-                          default: s(() => l[10] || (l[10] = [
-                            _("删除")
+                          default: u(() => o[10] || (o[10] = [
+                            v("删除")
                           ])),
                           _: 1,
                           __: [10]
                         })
                       ]),
                       _: 2
-                    }, 1032, ["onConfirm"])) : g("", !0)
+                    }, 1032, ["onConfirm"])) : c("", !0)
                   ])
-                ])) : g("", !0)
+                ])) : c("", !0)
               ]),
               _: 3
-            }, 8, ["width"])) : g("", !0)
+            }, 8, ["width"])) : c("", !0)
           ]),
           _: 3
         }, 16, ["data"])), [
-          [I, U.value]
+          [L, a.value]
         ]),
-        t.showPagination && k.value > 0 ? (n(), h("div", ce, [
-          b(oe, {
-            "current-page": d.pageNum,
-            "onUpdate:currentPage": l[1] || (l[1] = (r) => d.pageNum = r),
-            "page-size": d.pageSize,
-            "onUpdate:pageSize": l[2] || (l[2] = (r) => d.pageSize = r),
-            "page-sizes": t.pageSizes,
-            layout: t.paginationLayout,
-            total: k.value,
-            background: t.paginationBackground,
-            small: t.paginationSmall,
-            "hide-on-single-page": t.paginationHideOnSinglePage,
-            onSizeChange: X,
-            onCurrentChange: Y
+        e.showPagination && U.value > 0 ? (i(), w("div", ye, [
+          _(le, {
+            "current-page": p.pageNum,
+            "onUpdate:currentPage": o[1] || (o[1] = (n) => p.pageNum = n),
+            "page-size": p.pageSize,
+            "onUpdate:pageSize": o[2] || (o[2] = (n) => p.pageSize = n),
+            "page-sizes": e.pageSizes,
+            layout: e.paginationLayout,
+            total: U.value,
+            background: e.paginationBackground,
+            small: e.paginationSmall,
+            "hide-on-single-page": e.paginationHideOnSinglePage,
+            onSizeChange: Y,
+            onCurrentChange: Z
           }, null, 8, ["current-page", "page-size", "page-sizes", "layout", "total", "background", "small", "hide-on-single-page"])
-        ])) : g("", !0),
-        b(le, {
-          modelValue: o.visible,
-          "onUpdate:modelValue": l[5] || (l[5] = (r) => o.visible = r),
-          title: H.value,
-          width: t.dialogWidth,
+        ])) : c("", !0),
+        _(ae, {
+          modelValue: l.visible,
+          "onUpdate:modelValue": o[5] || (o[5] = (n) => l.visible = n),
+          title: M.value,
+          width: e.dialogWidth,
           "destroy-on-close": !0,
-          "custom-class": j.value
+          "custom-class": Q.value
         }, {
-          footer: s(() => [
-            O("div", ye, [
-              b(u, {
-                onClick: l[4] || (l[4] = (r) => o.visible = !1)
+          footer: u(() => [
+            x("div", be, [
+              _(r, {
+                onClick: o[4] || (o[4] = (n) => l.visible = !1)
               }, {
-                default: s(() => l[11] || (l[11] = [
-                  _("取消")
+                default: u(() => o[11] || (o[11] = [
+                  v("取消")
                 ])),
                 _: 1,
                 __: [11]
               }),
-              b(u, {
+              _(r, {
                 type: "primary",
-                onClick: K,
-                loading: o.submitting
+                onClick: X,
+                loading: l.submitting
               }, {
-                default: s(() => l[12] || (l[12] = [
-                  _("确定")
+                default: u(() => o[12] || (o[12] = [
+                  v("确定")
                 ])),
                 _: 1,
                 __: [12]
               }, 8, ["loading"])
             ])
           ]),
-          default: s(() => [
-            T((n(), h("div", null, [
-              y(e.$slots, "dialog-form-content", {
-                formData: o.data,
-                mode: o.mode
+          default: u(() => [
+            W((i(), w("div", null, [
+              b(t.$slots, "dialog-form-content", {
+                formData: l.data,
+                mode: l.mode
               }, () => [
-                t.dialogFormConfig.length > 0 ? (n(), p(de, {
+                e.dialogFormConfig.length > 0 ? (i(), f(pe, {
                   key: 0,
-                  "form-config": M.value,
-                  modelValue: o.data,
-                  "onUpdate:modelValue": l[3] || (l[3] = (r) => o.data = r),
-                  ref: (r) => o.formRef = r,
-                  rules: t.dialogFormRules,
+                  "form-config": G.value,
+                  modelValue: l.data,
+                  "onUpdate:modelValue": o[3] || (o[3] = (n) => l.data = n),
+                  ref: (n) => l.formRef = n,
+                  rules: e.dialogFormRules,
                   "label-width": "80px"
-                }, null, 8, ["form-config", "modelValue", "rules"])) : g("", !0)
+                }, null, 8, ["form-config", "modelValue", "rules"])) : c("", !0)
               ])
             ])), [
-              [I, o.loading]
+              [L, l.loading]
             ])
           ]),
           _: 3
@@ -483,5 +492,5 @@ const pe = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" },
   }
 });
 export {
-  he as CrudTable
+  we as CrudTable
 };

package/dist/z-crud-table.umd.cjs

@@ -1 +1 @@
-(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("element-plus"),require("axios")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus","axios"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.ZCrudTable={},m.Vue,m.ElementPlus,m.axios))})(this,function(m,e,B,F){"use strict";const A=e.defineComponent({__name:"DynamicForm",props:{modelValue:{},formConfig:{},rules:{}},setup(p,{expose:u}){const b=e.ref(null);return u({validate:()=>{var i;return(i=b.value)==null?void 0:i.validate()}}),(i,o)=>{const w=e.resolveComponent("el-input"),S=e.resolveComponent("el-option"),g=e.resolveComponent("el-select"),d=e.resolveComponent("el-radio"),y=e.resolveComponent("el-radio-group"),C=e.resolveComponent("el-form-item"),k=e.resolveComponent("el-form");return e.openBlock(),e.createBlock(k,e.mergeProps({model:i.modelValue,rules:i.rules,ref_key:"formRef",ref:b},i.$attrs),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.formConfig,r=>(e.openBlock(),e.createBlock(C,{key:r.prop,label:r.label,prop:r.prop},{default:e.withCtx(()=>[r.type==="input"?(e.openBlock(),e.createBlock(w,e.mergeProps({key:0,modelValue:i.modelValue[r.prop],"onUpdate:modelValue":l=>i.modelValue[r.prop]=l},{ref_for:!0},r.componentProps),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),r.type==="textarea"?(e.openBlock(),e.createBlock(w,e.mergeProps({key:1,type:"textarea",modelValue:i.modelValue[r.prop],"onUpdate:modelValue":l=>i.modelValue[r.prop]=l},{ref_for:!0},r.componentProps),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),r.type==="select"?(e.openBlock(),e.createBlock(g,e.mergeProps({key:2,modelValue:i.modelValue[r.prop],"onUpdate:modelValue":l=>i.modelValue[r.prop]=l},{ref_for:!0},r.componentProps),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,l=>(e.openBlock(),e.createBlock(S,{key:l.value,label:l.label,value:l.value},null,8,["label","value"]))),128))]),_:2},1040,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),r.type==="radio-group"?(e.openBlock(),e.createBlock(y,e.mergeProps({key:3,modelValue:i.modelValue[r.prop],"onUpdate:modelValue":l=>i.modelValue[r.prop]=l},{ref_for:!0},r.componentProps),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,l=>(e.openBlock(),e.createBlock(d,{key:l.value,label:l.value},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.label),1)]),_:2},1032,["label"]))),128))]),_:2},1040,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),r.type==="input-disabled"?(e.openBlock(),e.createBlock(w,e.mergeProps({key:4,"model-value":i.modelValue[r.prop],disabled:""},{ref_for:!0},r.componentProps),null,16,["model-value"])):e.createCommentVNode("",!0)]),_:2},1032,["label","prop"]))),128))]),_:1},16,["model","rules"])}}}),f=F.create({baseURL:"",timeout:1e4});f.interceptors.request.use(p=>{const u=localStorage.getItem("token");return u&&(p.headers.Authorization="Bearer "+u),p},p=>(console.log(p),Promise.reject(p))),f.interceptors.response.use(p=>p.data,p=>(console.log("err"+p),B.ElMessage({message:"接口错误，请刷新接口",type:"error",duration:5*1e3}),Promise.reject(p)));const z={class:"flex flex-wrap items-center justify-between gap-4 mb-6"},E={class:"flex items-center gap-x-2"},P={class:"flex items-center gap-x-3 action-buttons flex-shrink-0"},$={key:0,class:"flex items-center gap-x-2"},O={key:0,class:"flex justify-end"},T={class:"dialog-footer"},q=e.defineComponent({__name:"CrudTable",props:{theme:{type:String,default:"default"},apiUrlQuery:{type:String,required:!0},apiUrlDetail:{type:String,required:!0},apiUrlCreate:{type:String,required:!0},apiUrlUpdate:{type:String,required:!0},apiUrlDelete:{type:String,required:!0},columns:{type:Array,default:()=>[]},onBeforeQuery:{type:Function},onAfterQuery:{type:Function},onBeforeOpenDialog:{type:Function},onAfterOpenDialog:{type:Function},onBeforeSubmit:{type:Function},onAfterSubmit:{type:Function},onBeforeDelete:{type:Function},onAfterDelete:{type:Function},showSelectionColumn:{type:Boolean,default:!0},showIndexColumn:{type:Boolean,default:!0},showActionsColumn:{type:Boolean,default:!0},showEditButton:{type:Boolean,default:!0},showDeleteButton:{type:Boolean,default:!0},actionsColumnWidth:{type:[String,Number],default:120},dialogWidth:{type:String,default:"50%"},initialSearchForm:{type:Object,default:()=>({pageNum:1,pageSize:10})},showPagination:{type:Boolean,default:!0},pageSizes:{type:Array,default:()=>[10,20,50,100]},paginationLayout:{type:String,default:"total, sizes, prev, pager, next, jumper"},paginationBackground:{type:Boolean,default:!0},paginationSmall:{type:Boolean,default:!1},paginationHideOnSinglePage:{type:Boolean,default:!1},dialogFormConfig:{type:Array,default:()=>[]},dialogFormRules:{type:Object,default:()=>({})}},emits:["open-dialog","submit","delete"],setup(p,{expose:u,emit:b}){const i=b,o=p,w=e.computed(()=>["crud-table-wrapper",`theme-${o.theme}`]),S=e.computed(()=>o.theme==="large-screen"?"large-screen-dialog":""),g=(t,a)=>t?!0:(B.ElMessage.error(`${a} prop is required.`),!1),d=e.reactive({pageNum:1,pageSize:10,...o.initialSearchForm}),y=e.ref([]),C=e.ref(0),k=e.ref(!1),r=e.ref([]),l=e.reactive({visible:!1,loading:!1,submitting:!1,mode:"add",data:{},formRef:null}),j=e.computed(()=>l.mode==="add"?"新增":"编辑"),Q=e.computed(()=>{if(l.mode==="add")return o.dialogFormConfig.filter(a=>a.prop!=="id");const t=[...o.dialogFormConfig.filter(a=>a.prop!=="id")];return t.some(a=>a.prop==="id")||t.unshift({type:"input-disabled",prop:"id",label:"用户ID"}),t}),h=async()=>{if(g(o.apiUrlQuery,"apiUrlQuery")){k.value=!0;try{let t={...d};o.onBeforeQuery&&(t=await o.onBeforeQuery(t));const a=await f.get(o.apiUrlQuery,{params:t});if(a&&Array.isArray(a.data)&&typeof a.total=="number"){let s=a.data;o.onAfterQuery&&(s=await o.onAfterQuery(s)),y.value=s,C.value=a.total}else console.warn("API response is not in the expected { data: [], total: 0 } format."),y.value=[],C.value=0}catch(t){console.error("Fetch data failed:",t)}finally{k.value=!1}}},V=()=>{d.pageNum=1,h()},R=()=>{const{pageNum:t,pageSize:a,...s}=o.initialSearchForm;Object.keys(d).forEach(c=>{c!=="pageNum"&&c!=="pageSize"&&delete d[c]}),Object.assign(d,s),V()},L=t=>{r.value=t},N=async(t,a)=>{let s=t==="add"?{role:"user"}:{...a};if(o.onBeforeOpenDialog){const c=await o.onBeforeOpenDialog(t,s);c&&(s=c)}if(l.mode=t,l.visible=!0,t==="edit"){if(!g(o.apiUrlDetail,"apiUrlDetail"))return;l.loading=!0;try{const c=await f.get(o.apiUrlDetail+"/"+s.id);l.data=c.data}finally{l.loading=!1,o.onAfterOpenDialog&&o.onAfterOpenDialog(t,l.data),i("open-dialog",{mode:t,data:l.data})}}else l.data=s,o.onAfterOpenDialog&&o.onAfterOpenDialog(t,l.data),i("open-dialog",{mode:t,data:l.data})},M=async()=>{try{l.formRef&&await l.formRef.validate();let t={...l.data};if(o.onBeforeSubmit&&(t=await o.onBeforeSubmit(t)),l.submitting=!0,l.mode==="add"){if(!g(o.apiUrlCreate,"apiUrlCreate"))return;await f.post(o.apiUrlCreate,t),B.ElMessage.success("新增成功")}else{if(!g(o.apiUrlUpdate,"apiUrlUpdate"))return;await f.put(o.apiUrlUpdate,t),B.ElMessage.success("更新成功")}o.onAfterSubmit&&o.onAfterSubmit(l.mode,t),i("submit",{mode:l.mode,data:t}),l.visible=!1,h()}catch(t){console.log("Submit error or validation failed:",t)}finally{l.submitting=!1}},x=async t=>{if(g(o.apiUrlDelete,"apiUrlDelete"))try{if(o.onBeforeDelete&&await o.onBeforeDelete(t)===!1)return;const a=t.join(",");await f.delete(o.apiUrlDelete+"/"+a.toString()),B.ElMessage.success("删除成功"),o.onAfterDelete&&o.onAfterDelete(t),i("delete",t),y.value.length===t.length&&d.pageNum>1&&d.pageNum--,h()}catch(a){console.error("Delete failed",a)}},I=t=>{d.pageSize=t,V()},W=t=>{d.pageNum=t,h()};return e.onMounted(h),u({refresh:h,search:V,handleDelete:x,openDialog:N}),(t,a)=>{const s=e.resolveComponent("el-button"),c=e.resolveComponent("el-form-item"),H=e.resolveComponent("el-form"),_=e.resolveComponent("el-table-column"),Z=e.resolveComponent("el-popconfirm"),G=e.resolveComponent("el-table"),J=e.resolveComponent("el-pagination"),K=e.resolveComponent("el-dialog"),U=e.resolveDirective("loading");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(w.value)},[e.renderSlot(t.$slots,"header"),e.createElementVNode("div",z,[e.createVNode(H,{model:d,class:"query-form flex flex-nowrap items-center gap-x-4",style:{"overflow-x":"auto","padding-bottom":"8px"}},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"query-conditions",{searchForm:d}),e.createVNode(c,{class:"!mr-0 flex-shrink-0"},{default:e.withCtx(()=>[e.createElementVNode("div",E,[e.renderSlot(t.$slots,"query-left"),e.createVNode(s,{style:{"margin-left":"16px"},type:"primary",onClick:V,loading:k.value},{default:e.withCtx(()=>a[6]||(a[6]=[e.createTextVNode("搜索 ")])),_:1,__:[6]},8,["loading"]),e.createVNode(s,{onClick:R},{default:e.withCtx(()=>a[7]||(a[7]=[e.createTextVNode("清空")])),_:1,__:[7]}),e.renderSlot(t.$slots,"query-right")])]),_:3})]),_:3},8,["model"]),e.createElementVNode("div",P,[e.renderSlot(t.$slots,"action-left",{selections:r.value}),e.renderSlot(t.$slots,"add-button-content",{},()=>[e.createVNode(s,{type:"success",onClick:a[0]||(a[0]=n=>N("add"))},{default:e.withCtx(()=>a[8]||(a[8]=[e.createTextVNode("新增")])),_:1,__:[8]})]),e.renderSlot(t.$slots,"action-right")])]),e.withDirectives((e.openBlock(),e.createBlock(G,e.mergeProps({data:y.value,onSelectionChange:L},t.$attrs,{style:{width:"100%","margin-bottom":"1.5rem"}}),{default:e.withCtx(()=>[o.showSelectionColumn?(e.openBlock(),e.createBlock(_,{key:0,type:"selection",width:"55",fixed:""})):e.createCommentVNode("",!0),o.showIndexColumn?(e.openBlock(),e.createBlock(_,{key:1,type:"index",label:"序号",width:"70",fixed:""})):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.columns,n=>(e.openBlock(),e.createBlock(_,e.mergeProps({key:n.prop,prop:n.prop,label:n.label,width:n.width,sortable:n.sortable||!1},{ref_for:!0},n.attrs),e.createSlots({_:2},[n.slot?{name:"default",fn:e.withCtx(D=>[e.renderSlot(t.$slots,n.slot,{row:D.row})]),key:"0"}:void 0]),1040,["prop","label","width","sortable"]))),128)),o.showActionsColumn?(e.openBlock(),e.createBlock(_,{key:2,label:"操作",width:p.actionsColumnWidth},{default:e.withCtx(n=>[n.row?(e.openBlock(),e.createElementBlock("div",$,[e.renderSlot(t.$slots,"actions",{row:n.row},()=>[o.showEditButton?(e.openBlock(),e.createBlock(s,{key:0,size:"small",type:"primary",link:"",onClick:D=>N("edit",n.row)},{default:e.withCtx(()=>a[9]||(a[9]=[e.createTextVNode("编辑 ")])),_:2,__:[9]},1032,["onClick"])):e.createCommentVNode("",!0),o.showDeleteButton?(e.openBlock(),e.createBlock(Z,{key:1,title:"确定要删除这条数据吗?",onConfirm:D=>x([n.row.id]),"confirm-button-text":"确定","cancel-button-text":"取消",width:"200"},{reference:e.withCtx(()=>[e.createVNode(s,{size:"small",type:"danger",link:""},{default:e.withCtx(()=>a[10]||(a[10]=[e.createTextVNode("删除")])),_:1,__:[10]})]),_:2},1032,["onConfirm"])):e.createCommentVNode("",!0)])])):e.createCommentVNode("",!0)]),_:3},8,["width"])):e.createCommentVNode("",!0)]),_:3},16,["data"])),[[U,k.value]]),o.showPagination&&C.value>0?(e.openBlock(),e.createElementBlock("div",O,[e.createVNode(J,{"current-page":d.pageNum,"onUpdate:currentPage":a[1]||(a[1]=n=>d.pageNum=n),"page-size":d.pageSize,"onUpdate:pageSize":a[2]||(a[2]=n=>d.pageSize=n),"page-sizes":o.pageSizes,layout:o.paginationLayout,total:C.value,background:o.paginationBackground,small:o.paginationSmall,"hide-on-single-page":o.paginationHideOnSinglePage,onSizeChange:I,onCurrentChange:W},null,8,["current-page","page-size","page-sizes","layout","total","background","small","hide-on-single-page"])])):e.createCommentVNode("",!0),e.createVNode(K,{modelValue:l.visible,"onUpdate:modelValue":a[5]||(a[5]=n=>l.visible=n),title:j.value,width:o.dialogWidth,"destroy-on-close":!0,"custom-class":S.value},{footer:e.withCtx(()=>[e.createElementVNode("div",T,[e.createVNode(s,{onClick:a[4]||(a[4]=n=>l.visible=!1)},{default:e.withCtx(()=>a[11]||(a[11]=[e.createTextVNode("取消")])),_:1,__:[11]}),e.createVNode(s,{type:"primary",onClick:M,loading:l.submitting},{default:e.withCtx(()=>a[12]||(a[12]=[e.createTextVNode("确定")])),_:1,__:[12]},8,["loading"])])]),default:e.withCtx(()=>[e.withDirectives((e.openBlock(),e.createElementBlock("div",null,[e.renderSlot(t.$slots,"dialog-form-content",{formData:l.data,mode:l.mode},()=>[o.dialogFormConfig.length>0?(e.openBlock(),e.createBlock(A,{key:0,"form-config":Q.value,modelValue:l.data,"onUpdate:modelValue":a[3]||(a[3]=n=>l.data=n),ref:n=>l.formRef=n,rules:o.dialogFormRules,"label-width":"80px"},null,8,["form-config","modelValue","rules"])):e.createCommentVNode("",!0)])])),[[U,l.loading]])]),_:3},8,["modelValue","title","width","custom-class"])],2)}}});m.CrudTable=q,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
+(function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("element-plus"),require("axios")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus","axios"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f.ZCrudTable={},f.Vue,f.ElementPlus,f.axios))})(this,function(f,e,B,A){"use strict";const E=e.defineComponent({__name:"DynamicForm",props:{modelValue:{},formConfig:{},rules:{}},setup(c,{expose:y}){const w=e.ref(null);return y({validate:()=>{var s;return(s=w.value)==null?void 0:s.validate()}}),(s,t)=>{const b=e.resolveComponent("el-input"),N=e.resolveComponent("el-option"),u=e.resolveComponent("el-select"),V=e.resolveComponent("el-radio"),p=e.resolveComponent("el-radio-group"),C=e.resolveComponent("el-form-item"),k=e.resolveComponent("el-form");return e.openBlock(),e.createBlock(k,e.mergeProps({model:s.modelValue,rules:s.rules,ref_key:"formRef",ref:w},s.$attrs),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.formConfig,r=>(e.openBlock(),e.createBlock(C,{key:r.prop,label:r.label,prop:r.prop},{default:e.withCtx(()=>[r.type==="input"?(e.openBlock(),e.createBlock(b,e.mergeProps({key:0,modelValue:s.modelValue[r.prop],"onUpdate:modelValue":d=>s.modelValue[r.prop]=d},{ref_for:!0},r.componentProps),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),r.type==="textarea"?(e.openBlock(),e.createBlock(b,e.mergeProps({key:1,type:"textarea",modelValue:s.modelValue[r.prop],"onUpdate:modelValue":d=>s.modelValue[r.prop]=d},{ref_for:!0},r.componentProps),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),r.type==="select"?(e.openBlock(),e.createBlock(u,e.mergeProps({key:2,modelValue:s.modelValue[r.prop],"onUpdate:modelValue":d=>s.modelValue[r.prop]=d},{ref_for:!0},r.componentProps),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,d=>(e.openBlock(),e.createBlock(N,{key:d.value,label:d.label,value:d.value},null,8,["label","value"]))),128))]),_:2},1040,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),r.type==="radio-group"?(e.openBlock(),e.createBlock(p,e.mergeProps({key:3,modelValue:s.modelValue[r.prop],"onUpdate:modelValue":d=>s.modelValue[r.prop]=d},{ref_for:!0},r.componentProps),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,d=>(e.openBlock(),e.createBlock(V,{key:d.value,label:d.value},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(d.label),1)]),_:2},1032,["label"]))),128))]),_:2},1040,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),r.type==="input-disabled"?(e.openBlock(),e.createBlock(b,e.mergeProps({key:4,"model-value":s.modelValue[r.prop],disabled:""},{ref_for:!0},r.componentProps),null,16,["model-value"])):e.createCommentVNode("",!0)]),_:2},1032,["label","prop"]))),128))]),_:1},16,["model","rules"])}}}),g=A.create({baseURL:"",timeout:1e4});g.interceptors.request.use(c=>{const y=localStorage.getItem("token");return y&&(c.headers.Authorization="Bearer "+y),c},c=>(console.log(c),Promise.reject(c))),g.interceptors.response.use(c=>c.data,c=>(console.log("err"+c),B.ElMessage({message:"接口错误，请刷新接口",type:"error",duration:5*1e3}),Promise.reject(c)));const P={class:"flex flex-wrap items-center justify-between gap-4 mb-6"},z={class:"flex items-center gap-x-2"},$={class:"flex items-center gap-x-3 action-buttons flex-shrink-0"},O={key:0,class:"flex items-center gap-x-2"},T={key:0,class:"flex justify-end"},q={class:"dialog-footer"},j=e.defineComponent({__name:"CrudTable",props:{theme:{type:String,default:"default"},customClass:{type:String,default:""},apiUrlQuery:{type:String,required:!0},apiUrlDetail:{type:String,required:!0},apiUrlCreate:{type:String,required:!0},apiUrlUpdate:{type:String,required:!0},apiUrlDelete:{type:String,required:!0},columns:{type:Array,default:()=>[]},onBeforeQuery:{type:Function},onAfterQuery:{type:Function},onBeforeOpenDialog:{type:Function},onAfterOpenDialog:{type:Function},onBeforeSubmit:{type:Function},onAfterSubmit:{type:Function},onBeforeDelete:{type:Function},onAfterDelete:{type:Function},showSelectionColumn:{type:Boolean,default:!0},showIndexColumn:{type:Boolean,default:!0},showActionsColumn:{type:Boolean,default:!0},showEditButton:{type:Boolean,default:!0},showDeleteButton:{type:Boolean,default:!0},actionsColumnWidth:{type:[String,Number],default:120},dialogWidth:{type:String,default:"50%"},initialSearchForm:{type:Object,default:()=>({pageNum:1,pageSize:10})},showPagination:{type:Boolean,default:!0},pageSizes:{type:Array,default:()=>[10,20,50,100]},paginationLayout:{type:String,default:"total, sizes, prev, pager, next, jumper"},paginationBackground:{type:Boolean,default:!0},paginationSmall:{type:Boolean,default:!1},paginationHideOnSinglePage:{type:Boolean,default:!1},dialogFormConfig:{type:Array,default:()=>[]},dialogFormRules:{type:Object,default:()=>({})}},emits:["open-dialog","submit","delete"],setup(c,{expose:y,emit:w}){const s=w,t=c,b=e.computed(()=>["crud-table-wrapper",`theme-${t.theme}`,t.customClass]),N=e.computed(()=>t.theme==="large-screen"?"large-screen-dialog":""),u=(o,l)=>o?!0:(B.ElMessage.error(`${l} prop is required.`),!1),V=async(o,l)=>{try{let n={...l};if(t.onBeforeSubmit&&(n=await t.onBeforeSubmit(n)),a.submitting=!0,o==="add"){if(!u(t.apiUrlCreate,"apiUrlCreate"))return;await g.post(t.apiUrlCreate,n),B.ElMessage.success("新增成功")}else{if(!u(t.apiUrlUpdate,"apiUrlUpdate"))return;await g.put(t.apiUrlUpdate,n),B.ElMessage.success("更新成功")}return t.onAfterSubmit&&t.onAfterSubmit(o,n),s("submit",{mode:o,data:n}),a.visible&&(a.visible=!1),h(),Promise.resolve()}catch(n){return console.log("Submit error:",n),Promise.reject(n)}finally{a.submitting=!1}},p=e.reactive({pageNum:1,pageSize:10,...t.initialSearchForm}),C=e.ref([]),k=e.ref(0),r=e.ref(!1),d=e.ref([]),a=e.reactive({visible:!1,loading:!1,submitting:!1,mode:"add",data:{},formRef:null}),Q=e.computed(()=>a.mode==="add"?"新增":"编辑"),R=e.computed(()=>{if(a.mode==="add")return t.dialogFormConfig.filter(l=>l.prop!=="id");const o=[...t.dialogFormConfig.filter(l=>l.prop!=="id")];return o.some(l=>l.prop==="id")||o.unshift({type:"input-disabled",prop:"id",label:"用户ID"}),o}),h=async()=>{if(u(t.apiUrlQuery,"apiUrlQuery")){r.value=!0;try{let o={...p};t.onBeforeQuery&&(o=await t.onBeforeQuery(o));const l=await g.get(t.apiUrlQuery,{params:o});if(l&&Array.isArray(l.data)&&typeof l.total=="number"){let n=l.data;t.onAfterQuery&&(n=await t.onAfterQuery(n)),C.value=n,k.value=l.total}else console.warn("API response is not in the expected { data: [], total: 0 } format."),C.value=[],k.value=0}catch(o){console.error("Fetch data failed:",o)}finally{r.value=!1}}},_=()=>{p.pageNum=1,h()},L=()=>{const{pageNum:o,pageSize:l,...n}=t.initialSearchForm;Object.keys(p).forEach(m=>{m!=="pageNum"&&m!=="pageSize"&&delete p[m]}),Object.assign(p,n),_()},M=o=>{d.value=o},D=async(o,l)=>{let n=o==="add"?{role:"user"}:{...l};if(t.onBeforeOpenDialog){const m=await t.onBeforeOpenDialog(o,n);m&&(n=m)}if(a.mode=o,a.visible=!0,o==="edit"){if(!u(t.apiUrlDetail,"apiUrlDetail"))return;a.loading=!0;try{const m=await g.get(t.apiUrlDetail+"/"+n.id);a.data=m.data}finally{a.loading=!1,t.onAfterOpenDialog&&t.onAfterOpenDialog(o,a.data),s("open-dialog",{mode:o,data:a.data})}}else a.data=n,t.onAfterOpenDialog&&t.onAfterOpenDialog(o,a.data),s("open-dialog",{mode:o,data:a.data})},I=async()=>{try{a.formRef&&await a.formRef.validate(),await V(a.mode,a.data)}catch(o){console.log("Validation failed:",o)}},U=async o=>{if(u(t.apiUrlDelete,"apiUrlDelete"))try{if(t.onBeforeDelete&&await t.onBeforeDelete(o)===!1)return;const l=o.join(",");await g.delete(t.apiUrlDelete+"/"+l.toString()),B.ElMessage.success("删除成功"),t.onAfterDelete&&t.onAfterDelete(o),s("delete",o),C.value.length===o.length&&p.pageNum>1&&p.pageNum--,h()}catch(l){console.error("Delete failed",l)}},W=o=>{p.pageSize=o,_()},H=o=>{p.pageNum=o,h()};return e.onMounted(h),y({refresh:h,search:_,handleDelete:U,openDialog:D,submit:V}),(o,l)=>{const n=e.resolveComponent("el-button"),m=e.resolveComponent("el-form-item"),Z=e.resolveComponent("el-form"),S=e.resolveComponent("el-table-column"),G=e.resolveComponent("el-popconfirm"),J=e.resolveComponent("el-table"),K=e.resolveComponent("el-pagination"),X=e.resolveComponent("el-dialog"),F=e.resolveDirective("loading");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(b.value)},[e.renderSlot(o.$slots,"header"),e.createElementVNode("div",P,[e.createVNode(Z,{model:p,class:"query-form flex flex-nowrap items-center gap-x-4",style:{"overflow-x":"auto","padding-bottom":"8px"}},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"query-conditions",{searchForm:p}),e.createVNode(m,{class:"!mr-0 flex-shrink-0"},{default:e.withCtx(()=>[e.createElementVNode("div",z,[e.renderSlot(o.$slots,"query-left"),e.createVNode(n,{style:{"margin-left":"16px"},type:"primary",onClick:_,loading:r.value},{default:e.withCtx(()=>l[6]||(l[6]=[e.createTextVNode("搜索 ")])),_:1,__:[6]},8,["loading"]),e.createVNode(n,{onClick:L},{default:e.withCtx(()=>l[7]||(l[7]=[e.createTextVNode("清空")])),_:1,__:[7]}),e.renderSlot(o.$slots,"query-right")])]),_:3})]),_:3},8,["model"]),e.createElementVNode("div",$,[e.renderSlot(o.$slots,"action-left",{selections:d.value}),e.renderSlot(o.$slots,"add-button-content",{},()=>[e.createVNode(n,{type:"success",onClick:l[0]||(l[0]=i=>D("add"))},{default:e.withCtx(()=>l[8]||(l[8]=[e.createTextVNode("新增")])),_:1,__:[8]})]),e.renderSlot(o.$slots,"action-right")])]),e.withDirectives((e.openBlock(),e.createBlock(J,e.mergeProps({data:C.value,onSelectionChange:M},o.$attrs,{style:{width:"100%","margin-bottom":"1.5rem"}}),{default:e.withCtx(()=>[t.showSelectionColumn?(e.openBlock(),e.createBlock(S,{key:0,type:"selection",width:"55",fixed:""})):e.createCommentVNode("",!0),t.showIndexColumn?(e.openBlock(),e.createBlock(S,{key:1,type:"index",label:"序号",width:"70",fixed:""})):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,i=>(e.openBlock(),e.createBlock(S,e.mergeProps({key:i.prop,prop:i.prop,label:i.label,width:i.width,sortable:i.sortable||!1},{ref_for:!0},i.attrs),e.createSlots({_:2},[i.slot?{name:"default",fn:e.withCtx(x=>[e.renderSlot(o.$slots,i.slot,{row:x.row})]),key:"0"}:void 0]),1040,["prop","label","width","sortable"]))),128)),t.showActionsColumn?(e.openBlock(),e.createBlock(S,{key:2,label:"操作",width:c.actionsColumnWidth},{default:e.withCtx(i=>[i.row?(e.openBlock(),e.createElementBlock("div",O,[e.renderSlot(o.$slots,"actions",{row:i.row},()=>[t.showEditButton?(e.openBlock(),e.createBlock(n,{key:0,size:"small",type:"primary",link:"",onClick:x=>D("edit",i.row)},{default:e.withCtx(()=>l[9]||(l[9]=[e.createTextVNode("编辑 ")])),_:2,__:[9]},1032,["onClick"])):e.createCommentVNode("",!0),t.showDeleteButton?(e.openBlock(),e.createBlock(G,{key:1,title:"确定要删除这条数据吗?",onConfirm:x=>U([i.row.id]),"confirm-button-text":"确定","cancel-button-text":"取消",width:"200"},{reference:e.withCtx(()=>[e.createVNode(n,{size:"small",type:"danger",link:""},{default:e.withCtx(()=>l[10]||(l[10]=[e.createTextVNode("删除")])),_:1,__:[10]})]),_:2},1032,["onConfirm"])):e.createCommentVNode("",!0)])])):e.createCommentVNode("",!0)]),_:3},8,["width"])):e.createCommentVNode("",!0)]),_:3},16,["data"])),[[F,r.value]]),t.showPagination&&k.value>0?(e.openBlock(),e.createElementBlock("div",T,[e.createVNode(K,{"current-page":p.pageNum,"onUpdate:currentPage":l[1]||(l[1]=i=>p.pageNum=i),"page-size":p.pageSize,"onUpdate:pageSize":l[2]||(l[2]=i=>p.pageSize=i),"page-sizes":t.pageSizes,layout:t.paginationLayout,total:k.value,background:t.paginationBackground,small:t.paginationSmall,"hide-on-single-page":t.paginationHideOnSinglePage,onSizeChange:W,onCurrentChange:H},null,8,["current-page","page-size","page-sizes","layout","total","background","small","hide-on-single-page"])])):e.createCommentVNode("",!0),e.createVNode(X,{modelValue:a.visible,"onUpdate:modelValue":l[5]||(l[5]=i=>a.visible=i),title:Q.value,width:t.dialogWidth,"destroy-on-close":!0,"custom-class":N.value},{footer:e.withCtx(()=>[e.createElementVNode("div",q,[e.createVNode(n,{onClick:l[4]||(l[4]=i=>a.visible=!1)},{default:e.withCtx(()=>l[11]||(l[11]=[e.createTextVNode("取消")])),_:1,__:[11]}),e.createVNode(n,{type:"primary",onClick:I,loading:a.submitting},{default:e.withCtx(()=>l[12]||(l[12]=[e.createTextVNode("确定")])),_:1,__:[12]},8,["loading"])])]),default:e.withCtx(()=>[e.withDirectives((e.openBlock(),e.createElementBlock("div",null,[e.renderSlot(o.$slots,"dialog-form-content",{formData:a.data,mode:a.mode},()=>[t.dialogFormConfig.length>0?(e.openBlock(),e.createBlock(E,{key:0,"form-config":R.value,modelValue:a.data,"onUpdate:modelValue":l[3]||(l[3]=i=>a.data=i),ref:i=>a.formRef=i,rules:t.dialogFormRules,"label-width":"80px"},null,8,["form-config","modelValue","rules"])):e.createCommentVNode("",!0)])])),[[F,a.loading]])]),_:3},8,["modelValue","title","width","custom-class"])],2)}}});f.CrudTable=j,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "z-crud-table",
   "private": false,
-  "version": "0.0.14",
+  "version": "0.0.15",
   "type": "module",
   "description": "A powerful and flexible CRUD table component for Vue 3 and Element Plus.",
   "keywords": [