z-crud-table 0.0.1 → 0.0.2

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

@@ -1,2 +1,286 @@
-declare const _default: any;
+import { PropType } from 'vue';
+
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    apiUrlQuery: {
+        type: StringConstructor;
+        required: true;
+    };
+    apiUrlDetail: {
+        type: StringConstructor;
+        required: true;
+    };
+    apiUrlCreate: {
+        type: StringConstructor;
+        required: true;
+    };
+    apiUrlUpdate: {
+        type: StringConstructor;
+        required: true;
+    };
+    apiUrlDelete: {
+        type: StringConstructor;
+        required: true;
+    };
+    onBeforeQuery: {
+        type: PropType<(params: any) => any>;
+    };
+    onAfterQuery: {
+        type: PropType<(data: any[]) => any[] | Promise<any[]>>;
+    };
+    onBeforeOpenDialog: {
+        type: PropType<(mode: string, data?: any) => any>;
+    };
+    onAfterOpenDialog: {
+        type: PropType<(mode: string, data: any) => void>;
+    };
+    onBeforeSubmit: {
+        type: PropType<(data: any) => any>;
+    };
+    onAfterSubmit: {
+        type: PropType<(mode: string, data: any) => void>;
+    };
+    onBeforeDelete: {
+        type: PropType<(ids: number[]) => boolean | Promise<boolean>>;
+    };
+    onAfterDelete: {
+        type: PropType<(ids: number[]) => void>;
+    };
+    showSelectionColumn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showIndexColumn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showActionsColumn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showEditButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showDeleteButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    actionsColumnWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    dialogWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    initialSearchForm: {
+        type: ObjectConstructor;
+        default: () => {
+            pageNum: number;
+            pageSize: number;
+        };
+    };
+    showPagination: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pageSizes: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
+    paginationLayout: {
+        type: StringConstructor;
+        default: string;
+    };
+    paginationBackground: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    paginationSmall: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    paginationHideOnSinglePage: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dialogFormConfig: {
+        type: () => any[];
+        default: () => never[];
+    };
+    dialogFormRules: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>, {
+    refresh: () => Promise<void>;
+    search: () => void;
+    handleDelete: (ids: number[]) => Promise<void>;
+    openDialog: (mode: "add" | "edit", rowData?: any) => Promise<void>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    submit: (...args: any[]) => void;
+    delete: (...args: any[]) => void;
+    "open-dialog": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    apiUrlQuery: {
+        type: StringConstructor;
+        required: true;
+    };
+    apiUrlDetail: {
+        type: StringConstructor;
+        required: true;
+    };
+    apiUrlCreate: {
+        type: StringConstructor;
+        required: true;
+    };
+    apiUrlUpdate: {
+        type: StringConstructor;
+        required: true;
+    };
+    apiUrlDelete: {
+        type: StringConstructor;
+        required: true;
+    };
+    onBeforeQuery: {
+        type: PropType<(params: any) => any>;
+    };
+    onAfterQuery: {
+        type: PropType<(data: any[]) => any[] | Promise<any[]>>;
+    };
+    onBeforeOpenDialog: {
+        type: PropType<(mode: string, data?: any) => any>;
+    };
+    onAfterOpenDialog: {
+        type: PropType<(mode: string, data: any) => void>;
+    };
+    onBeforeSubmit: {
+        type: PropType<(data: any) => any>;
+    };
+    onAfterSubmit: {
+        type: PropType<(mode: string, data: any) => void>;
+    };
+    onBeforeDelete: {
+        type: PropType<(ids: number[]) => boolean | Promise<boolean>>;
+    };
+    onAfterDelete: {
+        type: PropType<(ids: number[]) => void>;
+    };
+    showSelectionColumn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showIndexColumn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showActionsColumn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showEditButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showDeleteButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    actionsColumnWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    dialogWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    initialSearchForm: {
+        type: ObjectConstructor;
+        default: () => {
+            pageNum: number;
+            pageSize: number;
+        };
+    };
+    showPagination: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pageSizes: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
+    paginationLayout: {
+        type: StringConstructor;
+        default: string;
+    };
+    paginationBackground: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    paginationSmall: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    paginationHideOnSinglePage: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dialogFormConfig: {
+        type: () => any[];
+        default: () => never[];
+    };
+    dialogFormRules: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>> & Readonly<{
+    onSubmit?: ((...args: any[]) => any) | undefined;
+    onDelete?: ((...args: any[]) => any) | undefined;
+    "onOpen-dialog"?: ((...args: any[]) => any) | undefined;
+}>, {
+    showSelectionColumn: boolean;
+    showIndexColumn: boolean;
+    showActionsColumn: boolean;
+    showEditButton: boolean;
+    showDeleteButton: boolean;
+    actionsColumnWidth: number;
+    dialogWidth: string;
+    initialSearchForm: Record<string, any>;
+    showPagination: boolean;
+    pageSizes: unknown[];
+    paginationLayout: string;
+    paginationBackground: boolean;
+    paginationSmall: boolean;
+    paginationHideOnSinglePage: boolean;
+    dialogFormConfig: any[];
+    dialogFormRules: Record<string, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
+    header?(_: {}): any;
+    "query-conditions"?(_: {
+        searchForm: {
+            pageNum: number;
+            pageSize: number;
+        };
+    }): any;
+    "query-left"?(_: {}): any;
+    "query-right"?(_: {}): any;
+    "action-left"?(_: {
+        selections: any[];
+    }): any;
+    "add-button-content"?(_: {}): any;
+    "action-right"?(_: {}): any;
+    default?(_: {}): any;
+    actions?(_: {
+        row: any;
+    }): any;
+    "dialog-form-content"?(_: {
+        formData: Record<string, any>;
+        mode: "add" | "edit";
+    }): any;
+}>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,2 +1,21 @@
-declare const _default: any;
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    modelValue: Record<string, any>;
+    formConfig: any[];
+    rules?: Record<string, any> | undefined;
+}>>, {
+    validate: () => any;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    modelValue: Record<string, any>;
+    formConfig: any[];
+    rules?: Record<string, any> | undefined;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { App } from 'vue';
 import { default as CrudTable } from './components/CrudTable.vue';
 import { default as DynamicForm } from './components/DynamicForm.vue';
 import { default as request } from './utils/request';

package/dist/utils/request.d.ts

@@ -1,2 +1,2 @@
-declare const service: any;
+declare const service: import('axios').AxiosInstance;
 export default service;

package/dist/vue3-crud-table.js

@@ -1,83 +1,83 @@
-import { defineComponent as L, ref as z, resolveComponent as g, createBlock as m, openBlock as r, mergeProps as C, withCtx as d, createElementBlock as F, Fragment as O, renderList as q, createCommentVNode as y, createTextVNode as w, toDisplayString as oe, reactive as R, computed as T, onMounted as ae, resolveDirective as le, renderSlot as _, createElementVNode as A, withDirectives as I, createVNode as v } from "vue";
-import { ElMessage as B, ElMessageBox as ne } from "element-plus";
-import re from "axios";
-const ie = /* @__PURE__ */ L({
+import { defineComponent as L, ref as A, resolveComponent as g, createBlock as f, openBlock as n, mergeProps as C, withCtx as u, createElementBlock as B, Fragment as q, renderList as j, createCommentVNode as c, createTextVNode as v, toDisplayString as oe, reactive as E, computed as T, onMounted as le, resolveDirective as ae, renderSlot as y, createElementVNode as F, withDirectives as I, createVNode as _ } from "vue";
+import { ElMessage as z } from "element-plus";
+import ne from "axios";
+const re = /* @__PURE__ */ L({
   __name: "DynamicForm",
   props: {
     modelValue: {},
     formConfig: {},
     rules: {}
   },
-  setup(s, { expose: n }) {
-    const $ = z(null);
-    return n({
+  setup(p, { expose: S }) {
+    const $ = A(null);
+    return S({
       validate: () => {
-        var i;
-        return (i = $.value) == null ? void 0 : i.validate();
+        var r;
+        return (r = $.value) == null ? void 0 : r.validate();
       }
-    }), (i, t) => {
-      const h = g("el-input"), p = g("el-option"), S = g("el-select"), k = g("el-radio"), U = g("el-radio-group"), x = g("el-form-item"), a = g("el-form");
-      return r(), m(a, C({
-        model: i.modelValue,
-        rules: i.rules,
+    }), (r, o) => {
+      const b = g("el-input"), s = g("el-option"), D = g("el-select"), U = g("el-radio"), V = g("el-radio-group"), N = g("el-form-item"), l = g("el-form");
+      return n(), f(l, C({
+        model: r.modelValue,
+        rules: r.rules,
         ref_key: "formRef",
         ref: $
-      }, i.$attrs), {
-        default: d(() => [
-          (r(!0), F(O, null, q(i.formConfig, (l) => (r(), m(x, {
-            key: l.prop,
-            label: l.label,
-            prop: l.prop
+      }, r.$attrs), {
+        default: u(() => [
+          (n(!0), B(q, null, j(r.formConfig, (a) => (n(), f(N, {
+            key: a.prop,
+            label: a.label,
+            prop: a.prop
           }, {
-            default: d(() => [
-              l.type === "input" ? (r(), m(h, C({
+            default: u(() => [
+              a.type === "input" ? (n(), f(b, C({
                 key: 0,
-                modelValue: i.modelValue[l.prop],
-                "onUpdate:modelValue": (f) => i.modelValue[l.prop] = f
-              }, { ref_for: !0 }, l.componentProps), null, 16, ["modelValue", "onUpdate:modelValue"])) : y("", !0),
-              l.type === "textarea" ? (r(), m(h, C({
+                modelValue: r.modelValue[a.prop],
+                "onUpdate:modelValue": (d) => r.modelValue[a.prop] = d
+              }, { ref_for: !0 }, a.componentProps), null, 16, ["modelValue", "onUpdate:modelValue"])) : c("", !0),
+              a.type === "textarea" ? (n(), f(b, C({
                 key: 1,
                 type: "textarea",
-                modelValue: i.modelValue[l.prop],
-                "onUpdate:modelValue": (f) => i.modelValue[l.prop] = f
-              }, { ref_for: !0 }, l.componentProps), null, 16, ["modelValue", "onUpdate:modelValue"])) : y("", !0),
-              l.type === "select" ? (r(), m(S, C({
+                modelValue: r.modelValue[a.prop],
+                "onUpdate:modelValue": (d) => r.modelValue[a.prop] = d
+              }, { ref_for: !0 }, a.componentProps), null, 16, ["modelValue", "onUpdate:modelValue"])) : c("", !0),
+              a.type === "select" ? (n(), f(D, C({
                 key: 2,
-                modelValue: i.modelValue[l.prop],
-                "onUpdate:modelValue": (f) => i.modelValue[l.prop] = f
-              }, { ref_for: !0 }, l.componentProps), {
-                default: d(() => [
-                  (r(!0), F(O, null, q(l.options, (f) => (r(), m(p, {
-                    key: f.value,
-                    label: f.label,
-                    value: f.value
+                modelValue: r.modelValue[a.prop],
+                "onUpdate:modelValue": (d) => r.modelValue[a.prop] = d
+              }, { ref_for: !0 }, a.componentProps), {
+                default: u(() => [
+                  (n(!0), B(q, null, j(a.options, (d) => (n(), f(s, {
+                    key: d.value,
+                    label: d.label,
+                    value: d.value
                   }, null, 8, ["label", "value"]))), 128))
                 ]),
                 _: 2
-              }, 1040, ["modelValue", "onUpdate:modelValue"])) : y("", !0),
-              l.type === "radio-group" ? (r(), m(U, C({
+              }, 1040, ["modelValue", "onUpdate:modelValue"])) : c("", !0),
+              a.type === "radio-group" ? (n(), f(V, C({
                 key: 3,
-                modelValue: i.modelValue[l.prop],
-                "onUpdate:modelValue": (f) => i.modelValue[l.prop] = f
-              }, { ref_for: !0 }, l.componentProps), {
-                default: d(() => [
-                  (r(!0), F(O, null, q(l.options, (f) => (r(), m(k, {
-                    key: f.value,
-                    label: f.value
+                modelValue: r.modelValue[a.prop],
+                "onUpdate:modelValue": (d) => r.modelValue[a.prop] = d
+              }, { ref_for: !0 }, a.componentProps), {
+                default: u(() => [
+                  (n(!0), B(q, null, j(a.options, (d) => (n(), f(U, {
+                    key: d.value,
+                    label: d.value
                   }, {
-                    default: d(() => [
-                      w(oe(f.label), 1)
+                    default: u(() => [
+                      v(oe(d.label), 1)
                     ]),
                     _: 2
                   }, 1032, ["label"]))), 128))
                 ]),
                 _: 2
-              }, 1040, ["modelValue", "onUpdate:modelValue"])) : y("", !0),
-              l.type === "input-disabled" ? (r(), m(h, C({
+              }, 1040, ["modelValue", "onUpdate:modelValue"])) : c("", !0),
+              a.type === "input-disabled" ? (n(), f(b, C({
                 key: 4,
-                "model-value": i.modelValue[l.prop],
+                "model-value": r.modelValue[a.prop],
                 disabled: ""
-              }, { ref_for: !0 }, l.componentProps), null, 16, ["model-value"])) : y("", !0)
+              }, { ref_for: !0 }, a.componentProps), null, 16, ["model-value"])) : c("", !0)
             ]),
             _: 2
           }, 1032, ["label", "prop"]))), 128))
@@ -86,76 +86,40 @@ const ie = /* @__PURE__ */ L({
       }, 16, ["model", "rules"]);
     };
   }
-}), D = re.create({
+}), w = ne.create({
+  // VITE_APP_BASE_API 是在 .env 文件中定义的基础 URL
+  // 您可以根据您的项目需求进行修改
   baseURL: "",
-  // 基础URL可以为空，让API URL成为完整的地址
   timeout: 1e4
+  // 请求超时时间
 });
-D.interceptors.request.use(
-  (s) => {
-    const n = localStorage.getItem("token");
-    return n && (s.headers.Authorization = "Bearer " + n), s;
+w.interceptors.request.use(
+  (p) => {
+    const S = localStorage.getItem("token");
+    return S && (p.headers.Authorization = "Bearer " + S), p;
   },
-  (s) => (console.log(s), Promise.reject(s))
+  (p) => (console.log(p), Promise.reject(p))
 );
-D.interceptors.response.use(
-  (s) => {
-    const n = s.data;
-    return n.code && n.code !== 200 ? (B({
-      message: n.message || "Error",
-      type: "error",
-      duration: 5 * 1e3
-    }), (n.code === 50008 || n.code === 50012 || n.code === 50014) && ne.confirm("您的登录已过期，可以取消以停留在此页面，或重新登录", "确认登出", {
-      confirmButtonText: "重新登录",
-      cancelButtonText: "取消",
-      type: "warning"
-    }).then(() => {
-      console.log("Redirecting to login page...");
-    }), Promise.reject(new Error(n.message || "Error"))) : n;
-  },
-  (s) => {
-    console.log("err: " + s);
-    let n = "接口错误，请刷新接口";
-    if (s.response)
-      switch (s.response.status) {
-        case 400:
-          n = "请求错误 (400)";
-          break;
-        case 401:
-          n = "未授权，请重新登录 (401)";
-          break;
-        case 403:
-          n = "拒绝访问 (403)";
-          break;
-        case 404:
-          n = "请求资源不存在 (404)";
-          break;
-        case 500:
-          n = "服务器内部错误 (500)";
-          break;
-        default:
-          n = `连接错误 (${s.response.status})!`;
-      }
-    return B({
-      message: n,
-      type: "error",
-      duration: 5 * 1e3
-    }), Promise.reject(s);
-  }
+w.interceptors.response.use(
+  (p) => p.data,
+  (p) => (console.log("err" + p), z({
+    message: "接口错误，请刷新接口",
+    // 这里是您要求的统一错误提示
+    type: "error",
+    duration: 5 * 1e3
+  }), Promise.reject(p))
 );
-const se = { class: "crud-table-wrapper" }, ue = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" }, de = { class: "flex items-center gap-x-2" }, pe = { class: "flex items-center gap-x-3 action-buttons flex-shrink-0" }, fe = { class: "flex items-center gap-x-2" }, me = {
+const ie = { class: "crud-table-wrapper" }, ue = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" }, se = { class: "flex items-center gap-x-2" }, de = { class: "flex items-center gap-x-3 action-buttons flex-shrink-0" }, pe = { class: "flex items-center gap-x-2" }, fe = {
   key: 0,
   class: "flex justify-end mt-[10px]"
-}, ce = { class: "dialog-footer" }, ge = /* @__PURE__ */ L({
+}, me = { class: "dialog-footer" }, ge = /* @__PURE__ */ L({
   __name: "CrudTable",
   props: {
-    // API URLs
     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 },
-    // Lifecycle Hooks
     onBeforeQuery: { type: Function },
     onAfterQuery: { type: Function },
     onBeforeOpenDialog: { type: Function },
@@ -164,14 +128,12 @@ const se = { class: "crud-table-wrapper" }, ue = { class: "flex flex-wrap items-
     onAfterSubmit: { type: Function },
     onBeforeDelete: { type: Function },
     onAfterDelete: { type: Function },
-    // Column Visibility
     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: Number, default: 120 },
-    // Other Props
     dialogWidth: { type: String, default: "50%" },
     initialSearchForm: { type: Object, default: () => ({ pageNum: 1, pageSize: 10 }) },
     showPagination: { type: Boolean, default: !0 },
@@ -184,126 +146,122 @@ const se = { class: "crud-table-wrapper" }, ue = { class: "flex flex-wrap items-
     dialogFormRules: { type: Object, default: () => ({}) }
   },
   emits: ["open-dialog", "submit", "delete"],
-  setup(s, { expose: n, emit: $ }) {
-    const i = $, t = s, h = (e, o) => e ? !0 : (B.error(`${o} prop is required.`), !1), p = R({ pageNum: 1, pageSize: 10, ...t.initialSearchForm }), S = z([]), k = z(0), U = z(!1), x = z([]), a = R({ visible: !1, loading: !1, submitting: !1, mode: "add", data: {}, formRef: null }), l = T(() => a.mode === "add" ? "新增" : "编辑"), f = T(() => {
-      if (a.mode === "add") return t.dialogFormConfig.filter((o) => o.prop !== "id");
-      const e = [...t.dialogFormConfig.filter((o) => o.prop !== "id")];
-      return e.some((o) => o.prop === "id") || e.push({ type: "input-disabled", prop: "id", label: "用户ID" }), e;
-    }), V = async () => {
-      if (h(t.apiUrlQuery, "apiUrlQuery")) {
-        U.value = !0;
+  setup(p, { expose: S, emit: $ }) {
+    const r = $, o = p, b = (e, t) => e ? !0 : (z.error(`${t} prop is required.`), !1), s = E({ pageNum: 1, pageSize: 10, ...o.initialSearchForm }), D = A([]), U = A(0), V = A(!1), N = A([]), l = E({ visible: !1, loading: !1, submitting: !1, mode: "add", data: {}, formRef: null }), a = T(() => l.mode === "add" ? "新增" : "编辑"), d = T(() => {
+      if (l.mode === "add") return o.dialogFormConfig.filter((t) => t.prop !== "id");
+      const e = [...o.dialogFormConfig.filter((t) => t.prop !== "id")];
+      return e.some((t) => t.prop === "id") || e.push({ type: "input-disabled", prop: "id", label: "用户ID" }), e;
+    }), k = async () => {
+      if (b(o.apiUrlQuery, "apiUrlQuery")) {
+        V.value = !0;
         try {
-          let e = { ...p };
-          t.onBeforeQuery && (e = await t.onBeforeQuery(e));
-          const o = await D.get(t.apiUrlQuery, { params: e });
-          if (o && Array.isArray(o.data) && typeof o.total == "number") {
-            let u = o.data;
-            t.onAfterQuery && (u = await t.onAfterQuery(u)), S.value = u, k.value = o.total;
+          let e = { ...s };
+          o.onBeforeQuery && (e = await o.onBeforeQuery(e));
+          const t = await w.get(o.apiUrlQuery, { params: e });
+          if (t && Array.isArray(t.data) && typeof t.total == "number") {
+            let i = t.data;
+            o.onAfterQuery && (i = await o.onAfterQuery(i)), D.value = i, U.value = t.total;
           } else
-            console.warn("API response is not in the expected { data: [], total: 0 } format."), S.value = [], k.value = 0;
-        } catch (e) {
-          console.error("Fetch data failed:", e);
+            D.value = [], U.value = 0;
         } finally {
-          U.value = !1;
+          V.value = !1;
         }
       }
-    }, P = () => {
-      p.pageNum = 1, V();
+    }, x = () => {
+      s.pageNum = 1, k();
     }, W = () => {
-      const { pageNum: e, pageSize: o, ...u } = t.initialSearchForm;
-      Object.keys(p).forEach((b) => {
-        b !== "pageNum" && b !== "pageSize" && delete p[b];
-      }), Object.assign(p, u), P();
-    }, M = (e) => {
-      x.value = e;
-    }, j = async (e, o) => {
-      let u = e === "add" ? { role: "user" } : { ...o };
-      if (t.onBeforeOpenDialog) {
-        const b = await t.onBeforeOpenDialog(e, u);
-        b && (u = b);
-      }
-      if (a.mode = e, a.visible = !0, e === "edit") {
-        if (!h(t.apiUrlDetail, "apiUrlDetail")) return;
-        a.loading = !0;
+      const { pageNum: e, pageSize: t, ...i } = o.initialSearchForm;
+      Object.keys(s).forEach((h) => {
+        h !== "pageNum" && h !== "pageSize" && delete s[h];
+      }), Object.assign(s, i), x();
+    }, H = (e) => {
+      N.value = e;
+    }, O = async (e, t) => {
+      let i = e === "add" ? { role: "user" } : { ...t };
+      if (o.onBeforeOpenDialog && (i = await o.onBeforeOpenDialog(e, i) || i), l.mode = e, l.visible = !0, e === "edit") {
+        if (!b(o.apiUrlDetail, "apiUrlDetail")) return;
+        l.loading = !0;
         try {
-          const b = await D.get(t.apiUrlDetail + "/" + u.id);
-          a.data = b.data;
+          const h = await w.get(o.apiUrlDetail, { params: { id: i.id } });
+          l.data = h.data;
         } finally {
-          a.loading = !1, t.onAfterOpenDialog && t.onAfterOpenDialog(e, a.data), i("open-dialog", { mode: e, data: a.data });
+          l.loading = !1, o.onAfterOpenDialog && o.onAfterOpenDialog(e, l.data), r("open-dialog", { mode: e, data: l.data });
         }
       } else
-        a.data = u, t.onAfterOpenDialog && t.onAfterOpenDialog(e, a.data), i("open-dialog", { mode: e, data: a.data });
-    }, H = async () => {
+        l.data = i, o.onAfterOpenDialog && o.onAfterOpenDialog(e, l.data), r("open-dialog", { mode: e, data: l.data });
+    }, M = async () => {
       try {
-        a.formRef && await a.formRef.validate();
-        let e = { ...a.data };
-        if (t.onBeforeSubmit && (e = await t.onBeforeSubmit(e)), a.submitting = !0, a.mode === "add") {
-          if (!h(t.apiUrlCreate, "apiUrlCreate")) return;
-          await D.post(t.apiUrlCreate, e), B.success("新增成功");
+        l.formRef && await l.formRef.validate();
+        let e = { ...l.data };
+        o.onBeforeSubmit && (e = await o.onBeforeSubmit(e)), l.submitting = !0;
+        let t;
+        if (l.mode === "add") {
+          if (!b(o.apiUrlCreate, "apiUrlCreate")) return;
+          t = await w.post(o.apiUrlCreate, e), z.success("新增成功");
         } else {
-          if (!h(t.apiUrlUpdate, "apiUrlUpdate")) return;
-          await D.put(t.apiUrlUpdate, e), B.success("更新成功");
+          if (!b(o.apiUrlUpdate, "apiUrlUpdate")) return;
+          t = await w.put(o.apiUrlUpdate, e), z.success("更新成功");
         }
-        t.onAfterSubmit && t.onAfterSubmit(a.mode, e), i("submit", { mode: a.mode, data: e }), a.visible = !1, V();
-      } catch (e) {
-        console.log("Submit error or validation failed:", e);
+        o.onAfterSubmit && o.onAfterSubmit(l.mode, e), r("submit", { mode: l.mode, data: e, response: t }), l.visible = !1, k();
+      } catch {
       } finally {
-        a.submitting = !1;
+        l.submitting = !1;
       }
-    }, E = async (e) => {
-      if (h(t.apiUrlDelete, "apiUrlDelete"))
+    }, Q = async (e) => {
+      if (b(o.apiUrlDelete, "apiUrlDelete"))
         try {
-          if (t.onBeforeDelete && await t.onBeforeDelete(e) === !1)
+          if (o.onBeforeDelete && await o.onBeforeDelete(e) === !1)
             return;
-          const o = e.join(",");
-          await D.delete(t.apiUrlDelete + "/" + o), B.success("删除成功"), t.onAfterDelete && t.onAfterDelete(e), i("delete", e), S.value.length === e.length && p.pageNum > 1 && p.pageNum--, V();
-        } catch (o) {
-          console.error("Delete failed", o);
+          const t = e.join(","), i = await w.delete(o.apiUrlDelete, { params: { ids: t } });
+          z.success("删除成功"), o.onAfterDelete && o.onAfterDelete(e), r("delete", { ids: e, response: i }), D.value.length === e.length && s.pageNum > 1 && s.pageNum--, k();
+        } catch (t) {
+          console.error("Delete failed", t);
         }
     }, G = (e) => {
-      p.pageSize = e, P();
+      s.pageSize = e, x();
     }, J = (e) => {
-      p.pageNum = e, V();
+      s.pageNum = e, k();
     };
-    return ae(V), n({
-      refresh: V,
-      search: P,
-      handleDelete: E
-    }), (e, o) => {
-      const u = g("el-button"), b = g("el-form-item"), K = g("el-form"), N = g("el-table-column"), X = g("el-popconfirm"), Y = g("el-table"), Z = g("el-pagination"), ee = g("el-dialog"), Q = le("loading");
-      return r(), F("div", se, [
-        _(e.$slots, "header"),
-        A("div", ue, [
-          v(K, {
-            model: p,
+    return le(k), S({
+      refresh: k,
+      search: x,
+      handleDelete: Q,
+      openDialog: O
+    }), (e, t) => {
+      const i = g("el-button"), h = g("el-form-item"), K = g("el-form"), P = g("el-table-column"), X = g("el-popconfirm"), Y = g("el-table"), Z = g("el-pagination"), ee = g("el-dialog"), R = ae("loading");
+      return n(), B("div", ie, [
+        y(e.$slots, "header"),
+        F("div", ue, [
+          _(K, {
+            model: s,
             class: "query-form flex flex-nowrap items-center gap-x-4",
             style: { "overflow-x": "auto", "padding-bottom": "8px" }
           }, {
-            default: d(() => [
-              _(e.$slots, "query-conditions", { searchForm: p }),
-              v(b, { class: "!mr-0 flex-shrink-0" }, {
-                default: d(() => [
-                  A("div", de, [
-                    _(e.$slots, "query-left"),
-                    v(u, {
+            default: u(() => [
+              y(e.$slots, "query-conditions", { searchForm: s }),
+              _(h, { class: "!mr-0 flex-shrink-0" }, {
+                default: u(() => [
+                  F("div", se, [
+                    y(e.$slots, "query-left"),
+                    _(i, {
                       type: "primary",
-                      onClick: P,
-                      loading: U.value
+                      onClick: x,
+                      loading: V.value
                     }, {
-                      default: d(() => o[6] || (o[6] = [
-                        w("搜索")
+                      default: u(() => t[6] || (t[6] = [
+                        v("搜索")
                       ])),
                       _: 1,
                       __: [6]
                     }, 8, ["loading"]),
-                    v(u, { onClick: W }, {
-                      default: d(() => o[7] || (o[7] = [
-                        w("清空")
+                    _(i, { onClick: W }, {
+                      default: u(() => t[7] || (t[7] = [
+                        v("清空")
                       ])),
                       _: 1,
                       __: [7]
                     }),
-                    _(e.$slots, "query-right")
+                    y(e.$slots, "query-right")
                   ])
                 ]),
                 _: 3
@@ -311,164 +269,164 @@ const se = { class: "crud-table-wrapper" }, ue = { class: "flex flex-wrap items-
             ]),
             _: 3
           }, 8, ["model"]),
-          A("div", pe, [
-            _(e.$slots, "action-left", { selections: x.value }),
-            _(e.$slots, "add-button-content", {}, () => [
-              v(u, {
+          F("div", de, [
+            y(e.$slots, "action-left", { selections: N.value }),
+            y(e.$slots, "add-button-content", {}, () => [
+              _(i, {
                 type: "success",
-                onClick: o[0] || (o[0] = (c) => j("add"))
+                onClick: t[0] || (t[0] = (m) => O("add"))
               }, {
-                default: d(() => o[8] || (o[8] = [
-                  w("新增")
+                default: u(() => t[8] || (t[8] = [
+                  v("新增")
                 ])),
                 _: 1,
                 __: [8]
               })
             ]),
-            _(e.$slots, "action-right")
+            y(e.$slots, "action-right")
           ])
         ]),
-        I((r(), m(Y, C({
-          data: S.value,
-          onSelectionChange: M
+        I((n(), f(Y, C({
+          data: D.value,
+          onSelectionChange: H
         }, e.$attrs, { style: { width: "100%" } }), {
-          default: d(() => [
-            t.showSelectionColumn ? (r(), m(N, {
+          default: u(() => [
+            o.showSelectionColumn ? (n(), f(P, {
               key: 0,
               type: "selection",
               width: "55",
               fixed: ""
-            })) : y("", !0),
-            t.showIndexColumn ? (r(), m(N, {
+            })) : c("", !0),
+            o.showIndexColumn ? (n(), f(P, {
               key: 1,
               type: "index",
               label: "序号",
               width: "70",
               fixed: ""
-            })) : y("", !0),
-            _(e.$slots, "default"),
-            t.showActionsColumn ? (r(), m(N, {
+            })) : c("", !0),
+            y(e.$slots, "default"),
+            o.showActionsColumn ? (n(), f(P, {
               key: 2,
               label: "操作",
-              width: s.actionsColumnWidth,
+              width: p.actionsColumnWidth,
               fixed: "right"
             }, {
-              default: d((c) => [
-                A("div", fe, [
-                  _(e.$slots, "actions", {
-                    row: c.row
+              default: u((m) => [
+                F("div", pe, [
+                  y(e.$slots, "actions", {
+                    row: m.row
                   }, () => [
-                    t.showEditButton ? (r(), m(u, {
+                    o.showEditButton ? (n(), f(i, {
                       key: 0,
                       size: "small",
                       type: "primary",
                       link: "",
-                      onClick: (te) => j("edit", c.row)
+                      onClick: (te) => O("edit", m.row)
                     }, {
-                      default: d(() => o[9] || (o[9] = [
-                        w("编辑")
+                      default: u(() => t[9] || (t[9] = [
+                        v("编辑")
                       ])),
                       _: 2,
                       __: [9]
-                    }, 1032, ["onClick"])) : y("", !0),
-                    t.showDeleteButton ? (r(), m(X, {
+                    }, 1032, ["onClick"])) : c("", !0),
+                    o.showDeleteButton ? (n(), f(X, {
                       key: 1,
                       title: "确定要删除这条数据吗?",
-                      onConfirm: (te) => E([c.row.id]),
+                      onConfirm: (te) => Q([m.row.id]),
                       "confirm-button-text": "确定",
                       "cancel-button-text": "取消",
                       width: "200"
                     }, {
-                      reference: d(() => [
-                        v(u, {
+                      reference: u(() => [
+                        _(i, {
                           size: "small",
                           type: "danger",
                           link: ""
                         }, {
-                          default: d(() => o[10] || (o[10] = [
-                            w("删除")
+                          default: u(() => t[10] || (t[10] = [
+                            v("删除")
                           ])),
                           _: 1,
                           __: [10]
                         })
                       ]),
                       _: 2
-                    }, 1032, ["onConfirm"])) : y("", !0)
+                    }, 1032, ["onConfirm"])) : c("", !0)
                   ])
                 ])
               ]),
               _: 3
-            }, 8, ["width"])) : y("", !0)
+            }, 8, ["width"])) : c("", !0)
           ]),
           _: 3
         }, 16, ["data"])), [
-          [Q, U.value]
+          [R, V.value]
         ]),
-        t.showPagination && k.value > 0 ? (r(), F("div", me, [
-          v(Z, {
-            "current-page": p.pageNum,
-            "onUpdate:currentPage": o[1] || (o[1] = (c) => p.pageNum = c),
-            "page-size": p.pageSize,
-            "onUpdate:pageSize": o[2] || (o[2] = (c) => p.pageSize = c),
-            "page-sizes": t.pageSizes,
-            layout: t.paginationLayout,
-            total: k.value,
-            background: t.paginationBackground,
-            small: t.paginationSmall,
-            "hide-on-single-page": t.paginationHideOnSinglePage,
+        o.showPagination && U.value > 0 ? (n(), B("div", fe, [
+          _(Z, {
+            "current-page": s.pageNum,
+            "onUpdate:currentPage": t[1] || (t[1] = (m) => s.pageNum = m),
+            "page-size": s.pageSize,
+            "onUpdate:pageSize": t[2] || (t[2] = (m) => s.pageSize = m),
+            "page-sizes": o.pageSizes,
+            layout: o.paginationLayout,
+            total: U.value,
+            background: o.paginationBackground,
+            small: o.paginationSmall,
+            "hide-on-single-page": o.paginationHideOnSinglePage,
             onSizeChange: G,
             onCurrentChange: J
           }, null, 8, ["current-page", "page-size", "page-sizes", "layout", "total", "background", "small", "hide-on-single-page"])
-        ])) : y("", !0),
-        v(ee, {
-          modelValue: a.visible,
-          "onUpdate:modelValue": o[5] || (o[5] = (c) => a.visible = c),
-          title: l.value,
-          width: t.dialogWidth,
+        ])) : c("", !0),
+        _(ee, {
+          modelValue: l.visible,
+          "onUpdate:modelValue": t[5] || (t[5] = (m) => l.visible = m),
+          title: a.value,
+          width: o.dialogWidth,
           "destroy-on-close": !0
         }, {
-          footer: d(() => [
-            A("div", ce, [
-              v(u, {
-                onClick: o[4] || (o[4] = (c) => a.visible = !1)
+          footer: u(() => [
+            F("div", me, [
+              _(i, {
+                onClick: t[4] || (t[4] = (m) => l.visible = !1)
               }, {
-                default: d(() => o[11] || (o[11] = [
-                  w("取消")
+                default: u(() => t[11] || (t[11] = [
+                  v("取消")
                 ])),
                 _: 1,
                 __: [11]
               }),
-              v(u, {
+              _(i, {
                 type: "primary",
-                onClick: H,
-                loading: a.submitting
+                onClick: M,
+                loading: l.submitting
               }, {
-                default: d(() => o[12] || (o[12] = [
-                  w("确定")
+                default: u(() => t[12] || (t[12] = [
+                  v("确定")
                 ])),
                 _: 1,
                 __: [12]
               }, 8, ["loading"])
             ])
           ]),
-          default: d(() => [
-            I((r(), F("div", null, [
-              _(e.$slots, "dialog-form-content", {
-                formData: a.data,
-                mode: a.mode
+          default: u(() => [
+            I((n(), B("div", null, [
+              y(e.$slots, "dialog-form-content", {
+                formData: l.data,
+                mode: l.mode
               }, () => [
-                t.dialogFormConfig.length > 0 ? (r(), m(ie, {
+                o.dialogFormConfig.length > 0 ? (n(), f(re, {
                   key: 0,
-                  "form-config": f.value,
-                  modelValue: a.data,
-                  "onUpdate:modelValue": o[3] || (o[3] = (c) => a.data = c),
-                  ref: (c) => a.formRef = c,
-                  rules: t.dialogFormRules,
+                  "form-config": d.value,
+                  modelValue: l.data,
+                  "onUpdate:modelValue": t[3] || (t[3] = (m) => l.data = m),
+                  ref: (m) => l.formRef = m,
+                  rules: o.dialogFormRules,
                   "label-width": "80px"
-                }, null, 8, ["form-config", "modelValue", "rules"])) : y("", !0)
+                }, null, 8, ["form-config", "modelValue", "rules"])) : c("", !0)
               ])
             ])), [
-              [Q, a.loading]
+              [R, l.loading]
             ])
           ]),
           _: 3
@@ -476,14 +434,14 @@ const se = { class: "crud-table-wrapper" }, ue = { class: "flex flex-wrap items-
       ]);
     };
   }
-}), ve = {
-  install: (s) => {
-    s.component("CrudTable", ge);
+}), be = {
+  install: (p) => {
+    p.component("CrudTable", ge);
   }
 };
 export {
   ge as CrudTable,
-  ie as DynamicForm,
-  ve as default,
-  D as request
+  re as DynamicForm,
+  be as default,
+  w as request
 };

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

@@ -1 +1 @@
-(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.Vue3CrudTable={},f.Vue,f.ElementPlus,f.axios))})(this,function(f,e,C,E){"use strict";const N=e.defineComponent({__name:"DynamicForm",props:{modelValue:{},formConfig:{},rules:{}},setup(s,{expose:r}){const b=e.ref(null);return r({validate:()=>{var i;return(i=b.value)==null?void 0:i.validate()}}),(i,o)=>{const u=e.resolveComponent("el-input"),p=e.resolveComponent("el-option"),k=e.resolveComponent("el-select"),h=e.resolveComponent("el-radio"),B=e.resolveComponent("el-radio-group"),_=e.resolveComponent("el-form-item"),a=e.resolveComponent("el-form");return e.openBlock(),e.createBlock(a,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,n=>(e.openBlock(),e.createBlock(_,{key:n.prop,label:n.label,prop:n.prop},{default:e.withCtx(()=>[n.type==="input"?(e.openBlock(),e.createBlock(u,e.mergeProps({key:0,modelValue:i.modelValue[n.prop],"onUpdate:modelValue":c=>i.modelValue[n.prop]=c},{ref_for:!0},n.componentProps),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),n.type==="textarea"?(e.openBlock(),e.createBlock(u,e.mergeProps({key:1,type:"textarea",modelValue:i.modelValue[n.prop],"onUpdate:modelValue":c=>i.modelValue[n.prop]=c},{ref_for:!0},n.componentProps),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),n.type==="select"?(e.openBlock(),e.createBlock(k,e.mergeProps({key:2,modelValue:i.modelValue[n.prop],"onUpdate:modelValue":c=>i.modelValue[n.prop]=c},{ref_for:!0},n.componentProps),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,c=>(e.openBlock(),e.createBlock(p,{key:c.value,label:c.label,value:c.value},null,8,["label","value"]))),128))]),_:2},1040,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),n.type==="radio-group"?(e.openBlock(),e.createBlock(B,e.mergeProps({key:3,modelValue:i.modelValue[n.prop],"onUpdate:modelValue":c=>i.modelValue[n.prop]=c},{ref_for:!0},n.componentProps),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,c=>(e.openBlock(),e.createBlock(h,{key:c.value,label:c.value},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(c.label),1)]),_:2},1032,["label"]))),128))]),_:2},1040,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),n.type==="input-disabled"?(e.openBlock(),e.createBlock(u,e.mergeProps({key:4,"model-value":i.modelValue[n.prop],disabled:""},{ref_for:!0},n.componentProps),null,16,["model-value"])):e.createCommentVNode("",!0)]),_:2},1032,["label","prop"]))),128))]),_:1},16,["model","rules"])}}}),y=E.create({baseURL:"",timeout:1e4});y.interceptors.request.use(s=>{const r=localStorage.getItem("token");return r&&(s.headers.Authorization="Bearer "+r),s},s=>(console.log(s),Promise.reject(s))),y.interceptors.response.use(s=>{const r=s.data;return r.code&&r.code!==200?(C.ElMessage({message:r.message||"Error",type:"error",duration:5*1e3}),(r.code===50008||r.code===50012||r.code===50014)&&C.ElMessageBox.confirm("您的登录已过期，可以取消以停留在此页面，或重新登录","确认登出",{confirmButtonText:"重新登录",cancelButtonText:"取消",type:"warning"}).then(()=>{console.log("Redirecting to login page...")}),Promise.reject(new Error(r.message||"Error"))):r},s=>{console.log("err: "+s);let r="接口错误，请刷新接口";if(s.response)switch(s.response.status){case 400:r="请求错误 (400)";break;case 401:r="未授权，请重新登录 (401)";break;case 403:r="拒绝访问 (403)";break;case 404:r="请求资源不存在 (404)";break;case 500:r="服务器内部错误 (500)";break;default:r=`连接错误 (${s.response.status})!`}return C.ElMessage({message:r,type:"error",duration:5*1e3}),Promise.reject(s)});const A={class:"crud-table-wrapper"},z={class:"flex flex-wrap items-center justify-between gap-4 mb-6"},$={class:"flex items-center gap-x-2"},P={class:"flex items-center gap-x-3 action-buttons flex-shrink-0"},T={class:"flex items-center gap-x-2"},q={key:0,class:"flex justify-end mt-[10px]"},O={class:"dialog-footer"},D=e.defineComponent({__name:"CrudTable",props:{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},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: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(s,{expose:r,emit:b}){const i=b,o=s,u=(t,l)=>t?!0:(C.ElMessage.error(`${l} prop is required.`),!1),p=e.reactive({pageNum:1,pageSize:10,...o.initialSearchForm}),k=e.ref([]),h=e.ref(0),B=e.ref(!1),_=e.ref([]),a=e.reactive({visible:!1,loading:!1,submitting:!1,mode:"add",data:{},formRef:null}),n=e.computed(()=>a.mode==="add"?"新增":"编辑"),c=e.computed(()=>{if(a.mode==="add")return o.dialogFormConfig.filter(l=>l.prop!=="id");const t=[...o.dialogFormConfig.filter(l=>l.prop!=="id")];return t.some(l=>l.prop==="id")||t.push({type:"input-disabled",prop:"id",label:"用户ID"}),t}),V=async()=>{if(u(o.apiUrlQuery,"apiUrlQuery")){B.value=!0;try{let t={...p};o.onBeforeQuery&&(t=await o.onBeforeQuery(t));const l=await y.get(o.apiUrlQuery,{params:t});if(l&&Array.isArray(l.data)&&typeof l.total=="number"){let d=l.data;o.onAfterQuery&&(d=await o.onAfterQuery(d)),k.value=d,h.value=l.total}else console.warn("API response is not in the expected { data: [], total: 0 } format."),k.value=[],h.value=0}catch(t){console.error("Fetch data failed:",t)}finally{B.value=!1}}},w=()=>{p.pageNum=1,V()},M=()=>{const{pageNum:t,pageSize:l,...d}=o.initialSearchForm;Object.keys(p).forEach(g=>{g!=="pageNum"&&g!=="pageSize"&&delete p[g]}),Object.assign(p,d),w()},Q=t=>{_.value=t},x=async(t,l)=>{let d=t==="add"?{role:"user"}:{...l};if(o.onBeforeOpenDialog){const g=await o.onBeforeOpenDialog(t,d);g&&(d=g)}if(a.mode=t,a.visible=!0,t==="edit"){if(!u(o.apiUrlDetail,"apiUrlDetail"))return;a.loading=!0;try{const g=await y.get(o.apiUrlDetail+"/"+d.id);a.data=g.data}finally{a.loading=!1,o.onAfterOpenDialog&&o.onAfterOpenDialog(t,a.data),i("open-dialog",{mode:t,data:a.data})}}else a.data=d,o.onAfterOpenDialog&&o.onAfterOpenDialog(t,a.data),i("open-dialog",{mode:t,data:a.data})},R=async()=>{try{a.formRef&&await a.formRef.validate();let t={...a.data};if(o.onBeforeSubmit&&(t=await o.onBeforeSubmit(t)),a.submitting=!0,a.mode==="add"){if(!u(o.apiUrlCreate,"apiUrlCreate"))return;await y.post(o.apiUrlCreate,t),C.ElMessage.success("新增成功")}else{if(!u(o.apiUrlUpdate,"apiUrlUpdate"))return;await y.put(o.apiUrlUpdate,t),C.ElMessage.success("更新成功")}o.onAfterSubmit&&o.onAfterSubmit(a.mode,t),i("submit",{mode:a.mode,data:t}),a.visible=!1,V()}catch(t){console.log("Submit error or validation failed:",t)}finally{a.submitting=!1}},U=async t=>{if(u(o.apiUrlDelete,"apiUrlDelete"))try{if(o.onBeforeDelete&&await o.onBeforeDelete(t)===!1)return;const l=t.join(",");await y.delete(o.apiUrlDelete+"/"+l),C.ElMessage.success("删除成功"),o.onAfterDelete&&o.onAfterDelete(t),i("delete",t),k.value.length===t.length&&p.pageNum>1&&p.pageNum--,V()}catch(l){console.error("Delete failed",l)}},L=t=>{p.pageSize=t,w()},I=t=>{p.pageNum=t,V()};return e.onMounted(V),r({refresh:V,search:w,handleDelete:U}),(t,l)=>{const d=e.resolveComponent("el-button"),g=e.resolveComponent("el-form-item"),W=e.resolveComponent("el-form"),S=e.resolveComponent("el-table-column"),H=e.resolveComponent("el-popconfirm"),G=e.resolveComponent("el-table"),J=e.resolveComponent("el-pagination"),K=e.resolveComponent("el-dialog"),F=e.resolveDirective("loading");return e.openBlock(),e.createElementBlock("div",A,[e.renderSlot(t.$slots,"header"),e.createElementVNode("div",z,[e.createVNode(W,{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(t.$slots,"query-conditions",{searchForm:p}),e.createVNode(g,{class:"!mr-0 flex-shrink-0"},{default:e.withCtx(()=>[e.createElementVNode("div",$,[e.renderSlot(t.$slots,"query-left"),e.createVNode(d,{type:"primary",onClick:w,loading:B.value},{default:e.withCtx(()=>l[6]||(l[6]=[e.createTextVNode("搜索")])),_:1,__:[6]},8,["loading"]),e.createVNode(d,{onClick:M},{default:e.withCtx(()=>l[7]||(l[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:_.value}),e.renderSlot(t.$slots,"add-button-content",{},()=>[e.createVNode(d,{type:"success",onClick:l[0]||(l[0]=m=>x("add"))},{default:e.withCtx(()=>l[8]||(l[8]=[e.createTextVNode("新增")])),_:1,__:[8]})]),e.renderSlot(t.$slots,"action-right")])]),e.withDirectives((e.openBlock(),e.createBlock(G,e.mergeProps({data:k.value,onSelectionChange:Q},t.$attrs,{style:{width:"100%"}}),{default:e.withCtx(()=>[o.showSelectionColumn?(e.openBlock(),e.createBlock(S,{key:0,type:"selection",width:"55",fixed:""})):e.createCommentVNode("",!0),o.showIndexColumn?(e.openBlock(),e.createBlock(S,{key:1,type:"index",label:"序号",width:"70",fixed:""})):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default"),o.showActionsColumn?(e.openBlock(),e.createBlock(S,{key:2,label:"操作",width:s.actionsColumnWidth,fixed:"right"},{default:e.withCtx(m=>[e.createElementVNode("div",T,[e.renderSlot(t.$slots,"actions",{row:m.row},()=>[o.showEditButton?(e.openBlock(),e.createBlock(d,{key:0,size:"small",type:"primary",link:"",onClick:X=>x("edit",m.row)},{default:e.withCtx(()=>l[9]||(l[9]=[e.createTextVNode("编辑")])),_:2,__:[9]},1032,["onClick"])):e.createCommentVNode("",!0),o.showDeleteButton?(e.openBlock(),e.createBlock(H,{key:1,title:"确定要删除这条数据吗?",onConfirm:X=>U([m.row.id]),"confirm-button-text":"确定","cancel-button-text":"取消",width:"200"},{reference:e.withCtx(()=>[e.createVNode(d,{size:"small",type:"danger",link:""},{default:e.withCtx(()=>l[10]||(l[10]=[e.createTextVNode("删除")])),_:1,__:[10]})]),_:2},1032,["onConfirm"])):e.createCommentVNode("",!0)])])]),_:3},8,["width"])):e.createCommentVNode("",!0)]),_:3},16,["data"])),[[F,B.value]]),o.showPagination&&h.value>0?(e.openBlock(),e.createElementBlock("div",q,[e.createVNode(J,{"current-page":p.pageNum,"onUpdate:currentPage":l[1]||(l[1]=m=>p.pageNum=m),"page-size":p.pageSize,"onUpdate:pageSize":l[2]||(l[2]=m=>p.pageSize=m),"page-sizes":o.pageSizes,layout:o.paginationLayout,total:h.value,background:o.paginationBackground,small:o.paginationSmall,"hide-on-single-page":o.paginationHideOnSinglePage,onSizeChange:L,onCurrentChange:I},null,8,["current-page","page-size","page-sizes","layout","total","background","small","hide-on-single-page"])])):e.createCommentVNode("",!0),e.createVNode(K,{modelValue:a.visible,"onUpdate:modelValue":l[5]||(l[5]=m=>a.visible=m),title:n.value,width:o.dialogWidth,"destroy-on-close":!0},{footer:e.withCtx(()=>[e.createElementVNode("div",O,[e.createVNode(d,{onClick:l[4]||(l[4]=m=>a.visible=!1)},{default:e.withCtx(()=>l[11]||(l[11]=[e.createTextVNode("取消")])),_:1,__:[11]}),e.createVNode(d,{type:"primary",onClick:R,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(t.$slots,"dialog-form-content",{formData:a.data,mode:a.mode},()=>[o.dialogFormConfig.length>0?(e.openBlock(),e.createBlock(N,{key:0,"form-config":c.value,modelValue:a.data,"onUpdate:modelValue":l[3]||(l[3]=m=>a.data=m),ref:m=>a.formRef=m,rules:o.dialogFormRules,"label-width":"80px"},null,8,["form-config","modelValue","rules"])):e.createCommentVNode("",!0)])])),[[F,a.loading]])]),_:3},8,["modelValue","title","width"])])}}}),j={install:s=>{s.component("CrudTable",D)}};f.CrudTable=D,f.DynamicForm=N,f.default=j,f.request=y,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(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.Vue3CrudTable={},m.Vue,m.ElementPlus,m.axios))})(this,function(m,e,V,A){"use strict";const D=e.defineComponent({__name:"DynamicForm",props:{modelValue:{},formConfig:{},rules:{}},setup(p,{expose:y}){const _=e.ref(null);return y({validate:()=>{var r;return(r=_.value)==null?void 0:r.validate()}}),(r,l)=>{const f=e.resolveComponent("el-input"),d=e.resolveComponent("el-option"),C=e.resolveComponent("el-select"),k=e.resolveComponent("el-radio"),B=e.resolveComponent("el-radio-group"),b=e.resolveComponent("el-form-item"),a=e.resolveComponent("el-form");return e.openBlock(),e.createBlock(a,e.mergeProps({model:r.modelValue,rules:r.rules,ref_key:"formRef",ref:_},r.$attrs),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.formConfig,n=>(e.openBlock(),e.createBlock(b,{key:n.prop,label:n.label,prop:n.prop},{default:e.withCtx(()=>[n.type==="input"?(e.openBlock(),e.createBlock(f,e.mergeProps({key:0,modelValue:r.modelValue[n.prop],"onUpdate:modelValue":s=>r.modelValue[n.prop]=s},{ref_for:!0},n.componentProps),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),n.type==="textarea"?(e.openBlock(),e.createBlock(f,e.mergeProps({key:1,type:"textarea",modelValue:r.modelValue[n.prop],"onUpdate:modelValue":s=>r.modelValue[n.prop]=s},{ref_for:!0},n.componentProps),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),n.type==="select"?(e.openBlock(),e.createBlock(C,e.mergeProps({key:2,modelValue:r.modelValue[n.prop],"onUpdate:modelValue":s=>r.modelValue[n.prop]=s},{ref_for:!0},n.componentProps),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,s=>(e.openBlock(),e.createBlock(d,{key:s.value,label:s.label,value:s.value},null,8,["label","value"]))),128))]),_:2},1040,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),n.type==="radio-group"?(e.openBlock(),e.createBlock(B,e.mergeProps({key:3,modelValue:r.modelValue[n.prop],"onUpdate:modelValue":s=>r.modelValue[n.prop]=s},{ref_for:!0},n.componentProps),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,s=>(e.openBlock(),e.createBlock(k,{key:s.value,label:s.value},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(s.label),1)]),_:2},1032,["label"]))),128))]),_:2},1040,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),n.type==="input-disabled"?(e.openBlock(),e.createBlock(f,e.mergeProps({key:4,"model-value":r.modelValue[n.prop],disabled:""},{ref_for:!0},n.componentProps),null,16,["model-value"])):e.createCommentVNode("",!0)]),_:2},1032,["label","prop"]))),128))]),_:1},16,["model","rules"])}}}),u=A.create({baseURL:"",timeout:1e4});u.interceptors.request.use(p=>{const y=localStorage.getItem("token");return y&&(p.headers.Authorization="Bearer "+y),p},p=>(console.log(p),Promise.reject(p))),u.interceptors.response.use(p=>p.data,p=>(console.log("err"+p),V.ElMessage({message:"接口错误，请刷新接口",type:"error",duration:5*1e3}),Promise.reject(p)));const z={class:"crud-table-wrapper"},E={class:"flex flex-wrap items-center justify-between gap-4 mb-6"},P={class:"flex items-center gap-x-2"},$={class:"flex items-center gap-x-3 action-buttons flex-shrink-0"},T={class:"flex items-center gap-x-2"},q={key:0,class:"flex justify-end mt-[10px]"},O={class:"dialog-footer"},x=e.defineComponent({__name:"CrudTable",props:{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},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: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:y,emit:_}){const r=_,l=p,f=(t,o)=>t?!0:(V.ElMessage.error(`${o} prop is required.`),!1),d=e.reactive({pageNum:1,pageSize:10,...l.initialSearchForm}),C=e.ref([]),k=e.ref(0),B=e.ref(!1),b=e.ref([]),a=e.reactive({visible:!1,loading:!1,submitting:!1,mode:"add",data:{},formRef:null}),n=e.computed(()=>a.mode==="add"?"新增":"编辑"),s=e.computed(()=>{if(a.mode==="add")return l.dialogFormConfig.filter(o=>o.prop!=="id");const t=[...l.dialogFormConfig.filter(o=>o.prop!=="id")];return t.some(o=>o.prop==="id")||t.push({type:"input-disabled",prop:"id",label:"用户ID"}),t}),h=async()=>{if(f(l.apiUrlQuery,"apiUrlQuery")){B.value=!0;try{let t={...d};l.onBeforeQuery&&(t=await l.onBeforeQuery(t));const o=await u.get(l.apiUrlQuery,{params:t});if(o&&Array.isArray(o.data)&&typeof o.total=="number"){let i=o.data;l.onAfterQuery&&(i=await l.onAfterQuery(i)),C.value=i,k.value=o.total}else C.value=[],k.value=0}finally{B.value=!1}}},w=()=>{d.pageNum=1,h()},Q=()=>{const{pageNum:t,pageSize:o,...i}=l.initialSearchForm;Object.keys(d).forEach(g=>{g!=="pageNum"&&g!=="pageSize"&&delete d[g]}),Object.assign(d,i),w()},R=t=>{b.value=t},S=async(t,o)=>{let i=t==="add"?{role:"user"}:{...o};if(l.onBeforeOpenDialog&&(i=await l.onBeforeOpenDialog(t,i)||i),a.mode=t,a.visible=!0,t==="edit"){if(!f(l.apiUrlDetail,"apiUrlDetail"))return;a.loading=!0;try{const g=await u.get(l.apiUrlDetail,{params:{id:i.id}});a.data=g.data}finally{a.loading=!1,l.onAfterOpenDialog&&l.onAfterOpenDialog(t,a.data),r("open-dialog",{mode:t,data:a.data})}}else a.data=i,l.onAfterOpenDialog&&l.onAfterOpenDialog(t,a.data),r("open-dialog",{mode:t,data:a.data})},M=async()=>{try{a.formRef&&await a.formRef.validate();let t={...a.data};l.onBeforeSubmit&&(t=await l.onBeforeSubmit(t)),a.submitting=!0;let o;if(a.mode==="add"){if(!f(l.apiUrlCreate,"apiUrlCreate"))return;o=await u.post(l.apiUrlCreate,t),V.ElMessage.success("新增成功")}else{if(!f(l.apiUrlUpdate,"apiUrlUpdate"))return;o=await u.put(l.apiUrlUpdate,t),V.ElMessage.success("更新成功")}l.onAfterSubmit&&l.onAfterSubmit(a.mode,t),r("submit",{mode:a.mode,data:t,response:o}),a.visible=!1,h()}catch{}finally{a.submitting=!1}},U=async t=>{if(f(l.apiUrlDelete,"apiUrlDelete"))try{if(l.onBeforeDelete&&await l.onBeforeDelete(t)===!1)return;const o=t.join(","),i=await u.delete(l.apiUrlDelete,{params:{ids:o}});V.ElMessage.success("删除成功"),l.onAfterDelete&&l.onAfterDelete(t),r("delete",{ids:t,response:i}),C.value.length===t.length&&d.pageNum>1&&d.pageNum--,h()}catch(o){console.error("Delete failed",o)}},L=t=>{d.pageSize=t,w()},I=t=>{d.pageNum=t,h()};return e.onMounted(h),y({refresh:h,search:w,handleDelete:U,openDialog:S}),(t,o)=>{const i=e.resolveComponent("el-button"),g=e.resolveComponent("el-form-item"),W=e.resolveComponent("el-form"),N=e.resolveComponent("el-table-column"),H=e.resolveComponent("el-popconfirm"),G=e.resolveComponent("el-table"),J=e.resolveComponent("el-pagination"),K=e.resolveComponent("el-dialog"),F=e.resolveDirective("loading");return e.openBlock(),e.createElementBlock("div",z,[e.renderSlot(t.$slots,"header"),e.createElementVNode("div",E,[e.createVNode(W,{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(g,{class:"!mr-0 flex-shrink-0"},{default:e.withCtx(()=>[e.createElementVNode("div",P,[e.renderSlot(t.$slots,"query-left"),e.createVNode(i,{type:"primary",onClick:w,loading:B.value},{default:e.withCtx(()=>o[6]||(o[6]=[e.createTextVNode("搜索")])),_:1,__:[6]},8,["loading"]),e.createVNode(i,{onClick:Q},{default:e.withCtx(()=>o[7]||(o[7]=[e.createTextVNode("清空")])),_:1,__:[7]}),e.renderSlot(t.$slots,"query-right")])]),_:3})]),_:3},8,["model"]),e.createElementVNode("div",$,[e.renderSlot(t.$slots,"action-left",{selections:b.value}),e.renderSlot(t.$slots,"add-button-content",{},()=>[e.createVNode(i,{type:"success",onClick:o[0]||(o[0]=c=>S("add"))},{default:e.withCtx(()=>o[8]||(o[8]=[e.createTextVNode("新增")])),_:1,__:[8]})]),e.renderSlot(t.$slots,"action-right")])]),e.withDirectives((e.openBlock(),e.createBlock(G,e.mergeProps({data:C.value,onSelectionChange:R},t.$attrs,{style:{width:"100%"}}),{default:e.withCtx(()=>[l.showSelectionColumn?(e.openBlock(),e.createBlock(N,{key:0,type:"selection",width:"55",fixed:""})):e.createCommentVNode("",!0),l.showIndexColumn?(e.openBlock(),e.createBlock(N,{key:1,type:"index",label:"序号",width:"70",fixed:""})):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default"),l.showActionsColumn?(e.openBlock(),e.createBlock(N,{key:2,label:"操作",width:p.actionsColumnWidth,fixed:"right"},{default:e.withCtx(c=>[e.createElementVNode("div",T,[e.renderSlot(t.$slots,"actions",{row:c.row},()=>[l.showEditButton?(e.openBlock(),e.createBlock(i,{key:0,size:"small",type:"primary",link:"",onClick:X=>S("edit",c.row)},{default:e.withCtx(()=>o[9]||(o[9]=[e.createTextVNode("编辑")])),_:2,__:[9]},1032,["onClick"])):e.createCommentVNode("",!0),l.showDeleteButton?(e.openBlock(),e.createBlock(H,{key:1,title:"确定要删除这条数据吗?",onConfirm:X=>U([c.row.id]),"confirm-button-text":"确定","cancel-button-text":"取消",width:"200"},{reference:e.withCtx(()=>[e.createVNode(i,{size:"small",type:"danger",link:""},{default:e.withCtx(()=>o[10]||(o[10]=[e.createTextVNode("删除")])),_:1,__:[10]})]),_:2},1032,["onConfirm"])):e.createCommentVNode("",!0)])])]),_:3},8,["width"])):e.createCommentVNode("",!0)]),_:3},16,["data"])),[[F,B.value]]),l.showPagination&&k.value>0?(e.openBlock(),e.createElementBlock("div",q,[e.createVNode(J,{"current-page":d.pageNum,"onUpdate:currentPage":o[1]||(o[1]=c=>d.pageNum=c),"page-size":d.pageSize,"onUpdate:pageSize":o[2]||(o[2]=c=>d.pageSize=c),"page-sizes":l.pageSizes,layout:l.paginationLayout,total:k.value,background:l.paginationBackground,small:l.paginationSmall,"hide-on-single-page":l.paginationHideOnSinglePage,onSizeChange:L,onCurrentChange:I},null,8,["current-page","page-size","page-sizes","layout","total","background","small","hide-on-single-page"])])):e.createCommentVNode("",!0),e.createVNode(K,{modelValue:a.visible,"onUpdate:modelValue":o[5]||(o[5]=c=>a.visible=c),title:n.value,width:l.dialogWidth,"destroy-on-close":!0},{footer:e.withCtx(()=>[e.createElementVNode("div",O,[e.createVNode(i,{onClick:o[4]||(o[4]=c=>a.visible=!1)},{default:e.withCtx(()=>o[11]||(o[11]=[e.createTextVNode("取消")])),_:1,__:[11]}),e.createVNode(i,{type:"primary",onClick:M,loading:a.submitting},{default:e.withCtx(()=>o[12]||(o[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:a.data,mode:a.mode},()=>[l.dialogFormConfig.length>0?(e.openBlock(),e.createBlock(D,{key:0,"form-config":s.value,modelValue:a.data,"onUpdate:modelValue":o[3]||(o[3]=c=>a.data=c),ref:c=>a.formRef=c,rules:l.dialogFormRules,"label-width":"80px"},null,8,["form-config","modelValue","rules"])):e.createCommentVNode("",!0)])])),[[F,a.loading]])]),_:3},8,["modelValue","title","width"])])}}}),j={install:p=>{p.component("CrudTable",x)}};m.CrudTable=x,m.DynamicForm=D,m.default=j,m.request=u,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "z-crud-table",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "type": "module",
   "main": "./dist/vue3-crud-table.umd.cjs",