组件优势
- 零代码负担：所有常见页面布局已封装为标签组件，通过属性配置即可快速完成页面搭建，无需编写复杂逻辑
- API 自动化：内置智能数据请求引擎，只需配置 API 地址，组件自动处理数据加载、分页逻辑与状态管理
- 全场景适配：通过丰富的标签属性组合，覆盖几乎所有业务场景需求，实现零代码定制化开发
带分页的table展示页
示例代码：
<template>
<div class="main">
<KPTableQuery :event-bus="eventBus" :query-params="queryParams">
<KPInputText v-model="queryParams.postName" label="岗位名称" :span="5"/>
<KPInputText v-model="queryParams.postCode" label="岗位编码" :span="5"/>
<KPSelect v-model="queryParams.status" label="状态" :span="5" :options="StartAndStopEnum" @change="handleQuery"/>
</KPTableQuery>
<KPTable :event-bus="eventBus" :table-key="basic.tableKey" :list-api="basic.listApi" :table-column="tableColumn" :add-button="basic.addButtonAuth" :update-button="basic.updateButtonAuth" :del-api="basic.delApi" :del-button="basic.delButtonAuth" :details-button-row="basic.detailsButtonAuth" update-button-row del-button-row checkbox action-width="190px">
<template #status="{ row }">
<el-switch v-model="row.status" inline-prompt :active-value="1" active-text="正常" :inactive-value="0" inactive-text="停用" @click="handleSwitchStatus(row)"/>
</template>
</KPTable>
<KPDialogFormEdit v-model="dialogVisible" :event-bus="eventBus" :table-key="basic.tableKey" :rules="rules" :title="basic.title" :edit-params="editForm" :date-structure="EditData" :save-api="basic.saveApi" :update-api="basic.updateApi" :details-api="basic.detailsApi" label-width="100px">
<KPInputText v-model="editForm.postName" label="岗位名称" prop="postName"/>
<KPInputText v-model="editForm.postCode" label="岗位编码" prop="postCode"/>
<KPRadio v-model="editForm.status" label="岗位状态" prop="status" :options="StartAndStopEnum"/>
<KPInputText v-model="editForm.remark" label="备注" type="textarea"/>
</KPDialogFormEdit>
<KPDialogDetails v-model="detailsDialogVisible" :event-bus="eventBus" :table-key="basic.tableKey" :title="basic.title + '详情'" :details-api="basic.detailsApi" :details-column="detailsColumn" label-width="120px"/>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import mitt from "mitt";
import { removeEmptyAndNull } from "@/utils/json";
import { DetailsColumn, TableColumn, TableDialogColumn } from "@/utils/data/systemData";
import { StartAndStopEnum } from "@/utils/data/serviceData";
import { postJson } from "@/api/common";
let basic: TableDialogColumn = {
title: "岗位",
tableKey: "postId",
listApi: "/auth/post/page/list",
saveApi: "/auth/post/save",
addButtonAuth: "auth:post:save",
updateApi: "/auth/post/update",
updateButtonAuth: "auth:post:update",
delApi: "/auth/post/batch/remove",
delButtonAuth: "auth:post:batch:remove",
detailsApi: "/auth/post/details",
detailsButtonAuth: "auth:post:details"
}
/**
* 搜索内容
*/
const queryParams = reactive({
postCode: null as string | null,
postName: null as string | null,
status: null as number | null,
pageNum: 1,
pageSize: 10,
orderBy: null as string | null
});
/**
* table 列表 定义显示列
*/
let tableColumn: TableColumn[] = [
{ prop: 'postName', label: '岗位名称', sort: true },
{ prop: 'postCode', label: '岗位编码', sort: true },
{ prop: 'status', label: '岗位状态', sort: true },
{ prop: 'remark', label: '备注' },
{ prop: 'createDate', label: '创建时间', sort: true },
{ prop: 'createUserName', label: '创建用户', sort: true },
{ prop: 'updateDate', label: '修改时间', sort: true },
];
/**
* 详情显示列
*/
let detailsColumn: DetailsColumn[] = [
{ prop: 'postId', label: '岗位Id' },
{ prop: 'postName', label: '岗位名称' },
{ prop: 'postCode', label: '岗位编码' },
{ prop: 'status', label: '项目状态', render: { 0: "停用", 1: "正常" } },
{ prop: 'createDate', label: '创建时间' },
{ prop: 'updateDate', label: '修改时间' },
{ prop: 'createUserId', label: '创建用户编号' },
{ prop: 'updateUserId', label: '修改用户编号' },
{ prop: 'createUserName', label: '创建用户名称' },
{ prop: 'updateUserName', label: '修改用户名称' },
{ prop: 'remark', label: '备注', span: 2 }
];
/**
* 新增 修改的表单校验对象
*/
const rules = reactive({
postName: [{ required: true, message: "请输入岗位名称", trigger: "blur" }],
postCode: [{ required: true, message: "请输入岗位编号", trigger: "blur" }],
status: [{ required: true, message: "请选择岗位状态", trigger: "blur" }]
});
/**
* 需要编辑的对象内容定义
*/
class EditData {
postId: string = null;
postName: string = null;
postCode: string = null;
remark: string = null;
status: number = 1;
};
//编辑表单数据
const editForm = reactive<EditData>(new EditData());
// 创建事件总线实例
const eventBus = mitt();
//是否显示模态框
const dialogVisible = ref<boolean>(false)
//详情模态框
const detailsDialogVisible = ref<boolean>(false)
/**
* 下拉框修改
*/
const handleQuery = async () => {
eventBus.emit('queryList', removeEmptyAndNull(queryParams));
};
/**
* 设置项目状态
* @param val
*/
const handleSwitchStatus = async (val) => {
await postJson("/auth/post/do/status", { postId: val.postId });
eventBus.emit('queryList', removeEmptyAndNull(queryParams));
};
</script>
<style lang="scss" scoped></style>
最终效果：
不带分页的table展示页
示例代码：
<template>
<div class="main">
<KPTableQuery :event-bus="eventBus" :query-params="queryParams" :date-structure="QueryData" exclude="orderBy,isTree">
<KPInputText v-model="queryParams.deptName" label="部门名称" :span="5"/>
<KPInputText v-model="queryParams.source" label="数据来源" :span="5"/>
<KPSelect v-model="queryParams.status" label="状态" :span="5" :options="StartAndStopEnum" @change="handleQuery"/>
</KPTableQuery>
<KPTableTree :event-bus="eventBus" :table-key="basic.tableKey" :list-api="basic.listApi" :table-column="tableColumn" :query-params="queryParams" :add-button="basic.addButtonAuth" :update-button="basic.updateButtonAuth" :del-api="basic.delApi" :del-button="basic.delButtonAuth" :details-button-row="basic.detailsButtonAuth" :sort-api="basic.sortApi" update-button-row del-button-row checkbox @open-edit-dialog="openEditDialog" action-width="190px">
<template #status="{ row }">
<el-switch v-model="row.status" inline-prompt :active-value="1" active-text="正常" :inactive-value="0" inactive-text="停用" @click="handleSwitchStatus(row)"/>
</template>
</KPTableTree>
<KPDialogFormEdit v-model="dialogVisible" :event-bus="eventBus" :table-key="basic.tableKey" :rules="rules" :title="basic.title" :query-params="queryParams" :edit-params="editForm" :date-structure="EditData" :save-api="basic.saveApi" :update-api="basic.updateApi" :details-api="basic.detailsApi" label-width="100px">
<KPTreeSelect v-model="editForm.parentId" :options="deptSelectValue" label="上级部门" prop="parentId"/>
<KPInputText v-model="editForm.deptName" label="部门名称" prop="deptName"/>
<KPRadio v-model="editForm.status" label="部门状态" prop="status" :options="StartAndStopEnum"/>
<KPInputText v-model="editForm.remark" label="备注" type="textarea" rows="4"/>
</KPDialogFormEdit>
<KPDialogDetails v-model="detailsDialogVisible" :event-bus="eventBus" :table-key="basic.tableKey" :title="basic.title + '详情'" :details-api="basic.detailsApi" :details-column="detailsColumn" label-width="120px"/>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import mitt from "mitt";
import { removeEmptyAndNull } from "@/utils/json";
import { DetailsColumn, SelectColumn, TableColumn, TableDialogColumn } from "@/utils/data/systemData";
import { StartAndStopEnum } from "@/utils/data/serviceData";
import { getDeptSelect } from "@/api/system";
import { postJson } from "@/api/common";
let basic: TableDialogColumn = {
title: "部门",
tableKey: "deptId",
listApi: "/auth/dept/list",
saveApi: "/auth/dept/save",
addButtonAuth: "auth:dept:save",
updateApi: "/auth/dept/update",
updateButtonAuth: "auth:dept:update",
delApi: "/auth/dept/batch/remove",
delButtonAuth: "auth:dept:batch:remove",
detailsApi: "/auth/dept/details",
detailsButtonAuth: "auth:dept:details",
sortApi: "/auth/dept/do/set/sort"
}
/**
* 搜索内容对象内容定义
*/
class QueryData {
deptName: string = null;
source: string = null;
status: string = null;
orderBy: string = "sort asc";
isTree: number = 1
};
/**
* 搜索内容
*/
const queryParams = reactive<QueryData>(new QueryData());
/**
* table 列表 定义显示列
*/
let tableColumn: TableColumn[] = [
{ prop: 'deptName', label: '部门名称', sort: true },
{ prop: 'hierarchy', label: '层级', sort: true },
{ prop: 'source', label: '数据来源', sort: true },
{ prop: 'status', label: '部门状态', sort: true },
{ prop: 'remark', label: '备注' },
{ prop: 'createDate', label: '创建时间', sort: true },
{ prop: 'createUserName', label: '创建用户', sort: true },
{ prop: 'updateDate', label: '修改时间', sort: true },
];
/**
* 详情显示列
*/
let detailsColumn: DetailsColumn[] = [
{ prop: 'deptId', label: '部门Id' },
{ prop: 'deptName', label: '部门名称' },
{ prop: 'status', label: '项目状态', render: { 0: "停用", 1: "正常" } },
{ prop: 'hierarchy', label: '部门层级', suffix: "级" },
{ prop: 'parentId', label: '父部门id' },
{ prop: 'topDeptId', label: '根部门id' },
{ prop: 'trilateralId', label: '三方系统主键' },
{ prop: 'source', label: '数据来源' },
{ prop: 'ancestors', label: '祖级列表', span: 2 },
{ prop: 'createDate', label: '创建时间' },
{ prop: 'updateDate', label: '修改时间' },
{ prop: 'createUserId', label: '创建用户编号' },
{ prop: 'updateUserId', label: '修改用户编号' },
{ prop: 'createUserName', label: '创建用户名称' },
{ prop: 'updateUserName', label: '修改用户名称' },
{ prop: 'remark', label: '备注', span: 2 }
];
/**
* 新增 修改的表单校验对象
*/
const rules = reactive({
deptName: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
status: [{ required: true, message: "请选择部门状态", trigger: "blur" }]
});
/**
* 需要编辑的对象内容定义
*/
class EditData {
deptId: string = null;
deptName: string = null;
parentId: string = null;
remark: string = null;
status: number = 1;
source: string = "鉴权系统";
};
//编辑表单数据
const editForm = reactive<EditData>(new EditData());
// 创建事件总线实例
const eventBus = mitt();
//是否显示模态框
const dialogVisible = ref<boolean>(false)
//详情模态框
const detailsDialogVisible = ref<boolean>(false)
//部门下拉框
const deptSelectValue = ref<Array<SelectColumn>>();
/**
* 下拉框修改
*/
const handleQuery = async () => {
eventBus.emit('queryList', removeEmptyAndNull(queryParams));
};
/**
* 设置项目状态
* @param val
*/
const handleSwitchStatus = async (val) => {
await postJson("/auth/dept/do/status", { deptId: val.deptId });
eventBus.emit('queryList', removeEmptyAndNull(queryParams));
};
const openEditDialog = async (edit: string, row: any) => {
const body = await getDeptSelect({ isTree: 1 });
if (!body.success) return;
deptSelectValue.value = body.data;
};
</script>
<style lang="scss" scoped></style>
最终效果：
其他组件
昆鹏框架提供了丰富的UI组件库，完整组件列表请参考组件展示。
本代码模板仅展示了基础表格页面的使用方式，更多组件及高级用法请开发者自行探索。框架处于快速迭代中，后续会持续新增更多实用组件。
关于组件文档说明：
- 所有组件源码均包含详尽注释
- 标签属性及功能说明均已在代码中详细标注
- 开发者可直接查阅框架源码获取完整信息
我们非常重视文档建设，如果您需要更完善的组件文档，请反馈给我们。当反馈达到一定数量后，我们会优先安排文档编写工作。