npm - z-crud-table - Versions diffs - 0.0.1 - Mend

z-crud-table 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md +200 -0
package/dist/components/CrudTable.vue.d.ts +2 -0
package/dist/components/DynamicForm.vue.d.ts +2 -0
package/dist/favicon.ico +0 -0
package/dist/index.d.ts +9 -0
package/dist/utils/request.d.ts +2 -0
package/dist/vue3-crud-table.js +489 -0
package/dist/vue3-crud-table.umd.cjs +1 -0
package/package.json +49 -0

package/README.md ADDED Viewed

@@ -0,0 +1,200 @@
+# CrudTable - 基于 Vue 3 和 Element Plus 的高级 CRUD 组件
+`CrudTable` 是一个功能全面、高度可定制的 CRUD 表格组件，旨在通过声明式的方式，极大地简化数据驱动的页面开发。它封装了常见的增、删、改、查、分页、批量操作等逻辑，让开发者能更专注于业务本身。
+## ✨ 功能特性
+- **API驱动**: 通过 props 传入 URL 字符串，组件内置 `axios` 请求逻辑。
+- **高度可定制**: 提供丰富的插槽，用于自定义查询条件、表格列、操作按钮等。
+- **配置驱动表单**: 支持通过 JSON 数组配置动态渲染新增/编辑弹窗内的表单。
+- **完整的 `el-table` 功能**: 继承 `el-table` 所有原生属性和事件，无缝衔接现有使用习惯。
+- **强大的生命周期**: 提供完整的 `onBefore` 和 `onAfter` 钩子，方便在操作前后进行数据处理和逻辑注入。
+- **灵活的列控制**: 可通过 props 单独控制多选框、序号列、操作列以及编辑/删除按钮的显示与隐藏。
+- **开箱即用**: 内置了分页、单行删除、批量删除等常用功能。
+## 📦 安装
+```
+npm install your-crud-table-package-name
+```
+## 🚀 快速上手
+在您的 Vue 组件中使用 `CrudTable`。
+```
+<template>
+  <crud-table
+    ref="crudTableRef"
+    :api-url-query="'/api/users'"
+    :api-url-detail="'/api/users/detail'"
+    :api-url-create="'/api/users'"
+    :api-url-update="'/api/users'"
+    :api-url-delete="'/api/users'"
+    :initial-search-form="{ pageNum: 1, pageSize: 5 }"
+    :dialog-form-config="dialogFormConfig"
+  >
+    <el-table-column prop="name" label="姓名" />
+    <el-table-column prop="email" label="邮箱" />
+  </crud-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import CrudTable from 'your-crud-table-package-name';
+const crudTableRef = ref(null);
+const dialogFormConfig = ref([
+  { type: 'input', prop: 'name', label: '姓名' },
+  { type: 'input', prop: 'email', label: '邮箱' },
+]);
+</script>
+```
+## **API 文档**
+### **属性 (Props)**
+| 属性名 | 描述 | 类型 | 是否必需 | 默认值 |
+| --- | --- | --- | --- | --- |
+| **API 配置** |  |  |  |  |
+| `apiUrlQuery` | 获取表格列表数据的接口地址。 | `String` | `true` | - |
+| `apiUrlDetail` | 获取单条数据详情的接口地址（用于编辑时回填表单）。 | `String` | `true` | - |
+| `apiUrlCreate` | 创建新条目的接口地址。 | `String` | `true` | - |
+| `apiUrlUpdate` | 更新条目的接口地址。 | `String` | `true` | - |
+| `apiUrlDelete` | 删除条目的接口地址。 | `String` | `true` | - |
+| **功能控制** |  |  |  |  |
+| `showSelectionColumn` | 是否显示表格的多选框列。 | `Boolean` | `false` | `true` |
+| `showIndexColumn` | 是否显示表格的序号列。 | `Boolean` | `false` | `true` |
+| `showActionsColumn` | 是否显示操作列。 | `Boolean` | `false` | `true` |
+| `showEditButton` | 是否在操作列中显示默认的“编辑”按钮。 | `Boolean` | `false` | `true` |
+| `showDeleteButton` | 是否在操作列中显示默认的“删除”按钮。 | `Boolean` | `false` | `true` |
+| `actionsColumnWidth` | 操作列的宽度。 | `Number` | `false` | `120` |
+| **表单与弹窗** |  |  |  |  |
+| `dialogWidth` | 新增/编辑弹窗的宽度。 | `String` | `false` | `'50%'` |
+| `dialogFormConfig` | **动态表单配置数组**，用于快速生成弹窗内的表单。 | `Array` | `false` | `[]` |
+| `dialogFormRules` | 弹窗表单的 [Element Plus 验证规则](https://element-plus.org/zh-CN/component/form.html#%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C)。 | `Object` | `false` | `{}` |
+| **分页配置** |  |  |  |  |
+| `initialSearchForm` | 查询表单的初始值，**包含初始分页参数 `pageNum` 和 `pageSize`**。 | `Object` | `false` | `{ pageNum: 1, pageSize: 10 }` |
+| `showPagination` | 是否显示分页组件。 | `Boolean` | `false` | `true` |
+| `pageSizes` | 每页显示个数选择器的选项设置。 | `Array` | `false` | `[10, 20, 50, 100]` |
+| `paginationLayout` | 分页组件布局。 | `String` | `false` | `'total, sizes, prev, pager, next, jumper'` |
+| `paginationBackground` | 是否为分页按钮添加背景色。 | `Boolean` | `false` | `true` |
+| `paginationSmall` | 是否使用小型分页样式。 | `Boolean` | `false` | `false` |
+| `paginationHideOnSinglePage` | 只有一页时是否隐藏分页。 | `Boolean` | `false` | `false` |
+| **生命周期钩子** |  |  |  |  |
+| `onBeforeQuery` | 查询请求**前**执行。可用于修改请求参数。**必须返回**处理后的参数对象。 | `Function` | `false` | - |
+| `onAfterQuery` | 查询请求**后**执行。可用于格式化返回的列表数据。**必须返回**处理后的数据数组。 | `Function` | `false` | - |
+| `onBeforeOpenDialog` | 打开弹窗**前**执行。可用于预处理表单数据。 | `Function` | `false` | - |
+| `onAfterOpenDialog` | 打开弹窗**后**执行。可用于在弹窗渲染后执行某些操作。 | `Function` | `false` | - |
+| `onBeforeSubmit` | 表单提交**前**执行。可用于序列化提交的数据。**必须返回**处理后的数据对象。 | `Function` | `false` | - |
+| `onAfterSubmit` | 表单提交**后**执行。可用于执行提交成功后的副作用。 | `Function` | `false` | - |
+| `onBeforeDelete` | 删除操作**前**执行。可用于进行额外的确认。**返回 `false` 可中止删除**。 | `Function` | `false` | - |
+| `onAfterDelete` | 删除操作**后**执行。可用于执行删除成功后的副作用。 | `Function` | `false` | - |
+### **插槽 (Slots)**
+| 插槽名称 | 作用域 (Props) | 描述 |
+| --- | --- | --- |
+| `default` | - | **（核心）** 用于定义表格的列 (`<el-table-column>`)，除了序号列、复选框列和操作列。 |
+| `header` | - | 在整个组件最顶部插入内容，如页面大标题。 |
+| `query-conditions` | `{ searchForm }` | 自定义查询区域的表单项。`searchForm` 是响应式的查询对象。 |
+| `query-left` | - | 在“搜索”按钮左侧添加自定义按钮或内容。 |
+| `query-right` | - | 在“清空”按钮右侧添加自定义按钮或内容。 |
+| `action-left` | `{ selections }` | 在“新增”按钮左侧添加自定义按钮，可通过 `selections` 访问当前勾选的数据。 |
+| `action-right` | - | 在“新增”按钮右侧添加自定义按钮。 |
+| `actions` | `{ row }` | **（重要）** 自定义操作列的内容，可用于添加、修改或完全替换默认的编辑/删除按钮。 |
+| `dialog-form-content` | `{ formData, mode }` | **完全自定义**新增/编辑弹窗的表单内容。如果使用此插槽，`dialogFormConfig` 将被忽略。 |
+### **事件 (Events)**
+| 事件名称 | 载荷 (Payload) | 描述 |
+| --- | --- | --- |
+| `@open-dialog` | `{ mode: string, data: object }` | 在新增或编辑弹窗打开后触发。 |
+| `@submit` | `{ mode: string, data: object }` | 在表单提交（新增或更新）成功**后**触发。 |
+| `@delete` | `number[]` | 在删除操作成功**后**触发，载荷为被删除的 ID 数组。 |
+### **暴露的方法 (Exposed Methods)**
+通过 `ref` 可以获取到组件实例，并调用其暴露的方法。
+| 方法名称 | 参数 | 描述 |
+| --- | --- | --- |
+| `refresh()` | - | 强制刷新表格数据，使用当前的查询条件和分页状态。 |
+| `search()` | - | 重置到第一页并刷新数据，相当于点击“搜索”按钮。 |
+| `handleDelete(ids: number[])` | `ids` (ID 数组) | 触发删除操作，可用于父组件中自定义的批量删除逻辑。 |
+| `openDialog(mode, data)` | `mode`, `data` | 手动打开新增/编辑弹窗。 |
+## **实践案例**
+```
+<template>
+  <crud-table
+    ref="crudTableRef"
+    :api-url-query="'/api/users'"
+    :api-url-detail="'/api/users/detail'"
+    :api-url-create="'/api/users'"
+    :api-url-update="'/api/users'"
+    :api-url-delete="'/api/users'"
+    :show-delete-button="false"
+    actions-column-width="140"
+    :initial-search-form="{ role: null, pageNum: 1, pageSize: 5 }"
+    @submit="onSubmit"
+    :on-after-query="handleAfterQuery"
+  >
+    <template #header>
+      <h2 class="text-2xl font-semibold text-slate-700 mb-6">用户管理</h2>
+    </template>
+    <el-table-column prop="name" label="姓名" sortable />
+    <el-table-column prop="role" label="角色">
+        <template #default="scope">
+            <el-tag :type="scope.row.role === 'admin' ? 'warning' : 'info'">
+                {{ scope.row.role }}
+            </el-tag>
+        </template>
+    </el-table-column>
+    <el-table-column prop="createdAtFormatted" label="创建时间" />
+    <template #query-conditions="{ searchForm }">
+        <el-form-item label="姓名">
+            <el-input v-model="searchForm.name" clearable />
+        </el-form-item>
+    </template>
+    <template #actions="{ row }">
+        <el-button size="small" type="primary" link @click="crudTableRef?.openDialog('edit', row)">编辑</el-button>
+        <el-button size="small" type="success" link @click="handleViewDetails(row)">详情</el-button>
+    </template>
+  </crud-table>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import CrudTable from './components/CrudTable.vue';
+const crudTableRef = ref(null);
+// 使用生命周期钩子格式化数据
+const handleAfterQuery = (data) => {
+    return data.map(item => ({
+        ...item,
+        createdAtFormatted: new Date(item.createdAt).toLocaleString('zh-CN'),
+    }));
+};
+// 监听事件
+const onSubmit = (payload) => {
+    ElMessage.success(`[Event] ${payload.mode} success!`);
+};
+// 自定义方法
+const handleViewDetails = (row) => {
+    ElMessageBox.alert(JSON.stringify(row, null, 2), '详情');
+};
+</script>
+```

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

	@@ -0,0 +1,2 @@
1	+ declare const _default: any;
2	+ export default _default;

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

	@@ -0,0 +1,2 @@
1	+ declare const _default: any;
2	+ export default _default;

package/dist/favicon.ico ADDED Viewed

Binary file

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { default as CrudTable } from './components/CrudTable.vue';
+import { default as DynamicForm } from './components/DynamicForm.vue';
+import { default as request } from './utils/request';
+export { CrudTable, DynamicForm, request };
+declare const _default: {
+    install: (app: App) => void;
+};
+export default _default;

package/dist/utils/request.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const service: any;
2	+ export default service;

package/dist/vue3-crud-table.js ADDED Viewed

@@ -0,0 +1,489 @@
+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({
+  __name: "DynamicForm",
+  props: {
+    modelValue: {},
+    formConfig: {},
+    rules: {}
+  },
+  setup(s, { expose: n }) {
+    const $ = z(null);
+    return n({
+      validate: () => {
+        var i;
+        return (i = $.value) == null ? void 0 : i.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,
+        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
+          }, {
+            default: d(() => [
+              l.type === "input" ? (r(), m(h, 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({
+                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({
+                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
+                  }, null, 8, ["label", "value"]))), 128))
+                ]),
+                _: 2
+              }, 1040, ["modelValue", "onUpdate:modelValue"])) : y("", !0),
+              l.type === "radio-group" ? (r(), m(U, 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
+                  }, {
+                    default: d(() => [
+                      w(oe(f.label), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["label"]))), 128))
+                ]),
+                _: 2
+              }, 1040, ["modelValue", "onUpdate:modelValue"])) : y("", !0),
+              l.type === "input-disabled" ? (r(), m(h, C({
+                key: 4,
+                "model-value": i.modelValue[l.prop],
+                disabled: ""
+              }, { ref_for: !0 }, l.componentProps), null, 16, ["model-value"])) : y("", !0)
+            ]),
+            _: 2
+          }, 1032, ["label", "prop"]))), 128))
+        ]),
+        _: 1
+      }, 16, ["model", "rules"]);
+    };
+  }
+}), D = re.create({
+  baseURL: "",
+  // 基础URL可以为空，让API URL成为完整的地址
+  timeout: 1e4
+});
+D.interceptors.request.use(
+  (s) => {
+    const n = localStorage.getItem("token");
+    return n && (s.headers.Authorization = "Bearer " + n), s;
+  },
+  (s) => (console.log(s), Promise.reject(s))
+);
+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);
+  }
+);
+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 = {
+  key: 0,
+  class: "flex justify-end mt-[10px]"
+}, ce = { 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 },
+    onAfterOpenDialog: { type: Function },
+    onBeforeSubmit: { type: Function },
+    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 },
+    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: 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;
+        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;
+          } 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);
+        } finally {
+          U.value = !1;
+        }
+      }
+    }, P = () => {
+      p.pageNum = 1, V();
+    }, 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;
+        try {
+          const b = await D.get(t.apiUrlDetail + "/" + u.id);
+          a.data = b.data;
+        } finally {
+          a.loading = !1, t.onAfterOpenDialog && t.onAfterOpenDialog(e, a.data), i("open-dialog", { mode: e, data: a.data });
+        }
+      } else
+        a.data = u, t.onAfterOpenDialog && t.onAfterOpenDialog(e, a.data), i("open-dialog", { mode: e, data: a.data });
+    }, H = 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("新增成功");
+        } else {
+          if (!h(t.apiUrlUpdate, "apiUrlUpdate")) return;
+          await D.put(t.apiUrlUpdate, e), B.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);
+      } finally {
+        a.submitting = !1;
+      }
+    }, E = async (e) => {
+      if (h(t.apiUrlDelete, "apiUrlDelete"))
+        try {
+          if (t.onBeforeDelete && await t.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);
+        }
+    }, G = (e) => {
+      p.pageSize = e, P();
+    }, J = (e) => {
+      p.pageNum = e, V();
+    };
+    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,
+            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, {
+                      type: "primary",
+                      onClick: P,
+                      loading: U.value
+                    }, {
+                      default: d(() => o[6] || (o[6] = [
+                        w("搜索")
+                      ])),
+                      _: 1,
+                      __: [6]
+                    }, 8, ["loading"]),
+                    v(u, { onClick: W }, {
+                      default: d(() => o[7] || (o[7] = [
+                        w("清空")
+                      ])),
+                      _: 1,
+                      __: [7]
+                    }),
+                    _(e.$slots, "query-right")
+                  ])
+                ]),
+                _: 3
+              })
+            ]),
+            _: 3
+          }, 8, ["model"]),
+          A("div", pe, [
+            _(e.$slots, "action-left", { selections: x.value }),
+            _(e.$slots, "add-button-content", {}, () => [
+              v(u, {
+                type: "success",
+                onClick: o[0] || (o[0] = (c) => j("add"))
+              }, {
+                default: d(() => o[8] || (o[8] = [
+                  w("新增")
+                ])),
+                _: 1,
+                __: [8]
+              })
+            ]),
+            _(e.$slots, "action-right")
+          ])
+        ]),
+        I((r(), m(Y, C({
+          data: S.value,
+          onSelectionChange: M
+        }, e.$attrs, { style: { width: "100%" } }), {
+          default: d(() => [
+            t.showSelectionColumn ? (r(), m(N, {
+              key: 0,
+              type: "selection",
+              width: "55",
+              fixed: ""
+            })) : y("", !0),
+            t.showIndexColumn ? (r(), m(N, {
+              key: 1,
+              type: "index",
+              label: "序号",
+              width: "70",
+              fixed: ""
+            })) : y("", !0),
+            _(e.$slots, "default"),
+            t.showActionsColumn ? (r(), m(N, {
+              key: 2,
+              label: "操作",
+              width: s.actionsColumnWidth,
+              fixed: "right"
+            }, {
+              default: d((c) => [
+                A("div", fe, [
+                  _(e.$slots, "actions", {
+                    row: c.row
+                  }, () => [
+                    t.showEditButton ? (r(), m(u, {
+                      key: 0,
+                      size: "small",
+                      type: "primary",
+                      link: "",
+                      onClick: (te) => j("edit", c.row)
+                    }, {
+                      default: d(() => o[9] || (o[9] = [
+                        w("编辑")
+                      ])),
+                      _: 2,
+                      __: [9]
+                    }, 1032, ["onClick"])) : y("", !0),
+                    t.showDeleteButton ? (r(), m(X, {
+                      key: 1,
+                      title: "确定要删除这条数据吗?",
+                      onConfirm: (te) => E([c.row.id]),
+                      "confirm-button-text": "确定",
+                      "cancel-button-text": "取消",
+                      width: "200"
+                    }, {
+                      reference: d(() => [
+                        v(u, {
+                          size: "small",
+                          type: "danger",
+                          link: ""
+                        }, {
+                          default: d(() => o[10] || (o[10] = [
+                            w("删除")
+                          ])),
+                          _: 1,
+                          __: [10]
+                        })
+                      ]),
+                      _: 2
+                    }, 1032, ["onConfirm"])) : y("", !0)
+                  ])
+                ])
+              ]),
+              _: 3
+            }, 8, ["width"])) : y("", !0)
+          ]),
+          _: 3
+        }, 16, ["data"])), [
+          [Q, U.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,
+            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,
+          "destroy-on-close": !0
+        }, {
+          footer: d(() => [
+            A("div", ce, [
+              v(u, {
+                onClick: o[4] || (o[4] = (c) => a.visible = !1)
+              }, {
+                default: d(() => o[11] || (o[11] = [
+                  w("取消")
+                ])),
+                _: 1,
+                __: [11]
+              }),
+              v(u, {
+                type: "primary",
+                onClick: H,
+                loading: a.submitting
+              }, {
+                default: d(() => o[12] || (o[12] = [
+                  w("确定")
+                ])),
+                _: 1,
+                __: [12]
+              }, 8, ["loading"])
+            ])
+          ]),
+          default: d(() => [
+            I((r(), F("div", null, [
+              _(e.$slots, "dialog-form-content", {
+                formData: a.data,
+                mode: a.mode
+              }, () => [
+                t.dialogFormConfig.length > 0 ? (r(), m(ie, {
+                  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,
+                  "label-width": "80px"
+                }, null, 8, ["form-config", "modelValue", "rules"])) : y("", !0)
+              ])
+            ])), [
+              [Q, a.loading]
+            ])
+          ]),
+          _: 3
+        }, 8, ["modelValue", "title", "width"])
+      ]);
+    };
+  }
+}), ve = {
+  install: (s) => {
+    s.component("CrudTable", ge);
+  }
+};
+export {
+  ge as CrudTable,
+  ie as DynamicForm,
+  ve as default,
+  D as request
+};

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

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,49 @@
+{
+  "name": "z-crud-table",
+  "version": "0.0.1",
+  "private": false,
+  "type": "module",
+  "main": "./dist/vue3-crud-table.umd.cjs",
+  "module": "./dist/vue3-crud-table.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/vue3-crud-table.js",
+      "require": "./dist/vue3-crud-table.umd.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build"
+  },
+  "dependencies": {
+    "axios": "^1.7.2"
+  },
+  "peerDependencies": {
+    "element-plus": ">=2.0.0",
+    "vue": ">=3.2.0"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.1",
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/tsconfig": "^0.7.0",
+    "autoprefixer": "^10.4.19",
+    "element-plus": "^2.10.2",
+    "npm-run-all2": "^7.0.2",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4",
+    "typescript": "~5.4.5",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-vue-devtools": "^7.7.2",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.0.21"
+  }
+}