kxkj-common

This template should help get you started developing with Vue 3 in Vite. 是基于vue3项目，对element-plus及vxe-table进行的二次封装.

使用方式

1. 安装kxkj-common：npm install --save kxkj-common@对应版本号-如不带则下载最新版本

npm install --save kxkj-common

2. main.js 引用

import { createApp } from "vue";
import App from "./App.vue";
import kxkjCommon from 'kxkj-common'
import "kxkj-common/dist/style.css"

let app = createApp(App);

app.use(kxkjCommon);
app.mount("#app");

3. 页面中使用kxkjCommon组件：表格 KxVxTable

<template>
	<KxVxTable
		:tableData="tableData"
        :total="total"
        :tableConfig="tableConfig"
        :loading="loading"
        placeholder="员工姓名"
        @search="getPageList"
        @clear="getPageList"
        v-model:pageNum="pageRequest.pageNum"
        v-model:pageSize="pageRequest.pageSize"
        v-model:uname="queryParam.uname"
    >
	</KxVxTable>
</template>

属性

| 名称 | 说明 | 类型 | 默认 | | ---------------- | -------------------------------------- | ------- | ---------- | | tableData | 表格数据 | Array | | | tableConfig | 表格配置项（表头，权限，导入导出配置） | Object | | | loading | 表格加载数据的过渡效果 | Boolean | | | placeholder | 默认搜索框提示内容 | String | 关键字名称 | | v-model:uname | 默认搜索参数 | String | | | total | 数据总数 | Number | | | v-model:pageNum | 当前页数 | Number | 1 | | v-model:pageSize | 每页显示条目个数 | Number | 15 | | showRadio | 是否显示单选框 | Boolean | false | | showSelCheckbox | 是否显示多选框 | Boolean | false | | checkBoxConfig | 单选框配置项 | Object | |

事件

| 名称 | 说明 | | --------------- | ------------------ | | search | 点击搜索按钮时触发 | | clear | 点击重置按钮时触发 | | checkbox-change | 复选框改变时触发 | | select-all | 复选框全选时触发 | | cell-click | 单元格点击时触发 |

插槽

| 插槽名 | 说明 | | -------- | ------------------ | | add | 搜索栏前面按钮区域 | | search | 搜索栏本体 | | toolSlot | 搜索栏尾部按钮区域 | | btn | 表格列操作区域 |

4. 页面中使用kxkjCommon组件：左侧树 KxSelTree

<template>
	<KxSelTree
      :catalogTree="TreeData"
      :defaultCheckedKeys="defaultCheckedKeys"
      :defaultLevel="defaultOpenLevel"
      @transfer="getCurrNodeInfo"
      :defaultProps="defaultProps"
      cardStyle
      cardTitle="标题"
    >
    	<template #viewdata></template>
	</KxSelTree
</template>

属性

| 名称 | 说明 | 类型 | 默认 | | ------------------ | ---------------------------------------------------- | ------- | ---- | | catalogTree | 树显示的数据 | Array | | | defaultCheckedKeys | 默认选中数据 | Array | | | defaultLevel | 默认展开数据 | Array | | | defaultProps | 配置数据 | Object | | | placeholderName | 树搜索关键字 | String | | | nodeKey | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 | String | | | emptyText | 内容为空的时候展示的文本 | String | | | isRightView | 判断是否需要右侧的视图 | Boolean | | | cardStyle | 是否需要卡片样式 | Boolean | | | cardTitle | 卡片样式下树的标题 | String | | | hasOperation | 树书否需要编辑、删除操作 | Boolean | |

事件

| 事件名 | 说明 | 参数 | | -------- | -------------------- | -------------- | | refresh | 刷新树数据 | | | transfer | 节点点击回调 | data：节点数据 | | edit | 节点点击编辑按钮回调 | data：节点数据 | | delete | 节点点击删除按钮回调 | data：节点数据 |

5.页面中使用kxkjCommon组件：表单 KxForm【有副作用待优化】

<template>
	<KxForm tableName="表单名称" :state="表单状态" :sendInfo="sendInfo"  @handleSuccess="handleSuccess">
</template>

属性

| 名称 | 说明 | 类型 | 默认 | | ---------- | ------------------------------ | ------- | ---------------------- | | tableName | 表单名称 | String | | | state | 表单状态 | String | 新增-编辑-预览，默认无 | | sendInfo | 外部传进来需要与表单合并的数据 | Object | | | infoKey | 表单主键名称 | String | uid | | infoId | 表单主键值 | String | | | isFooter | 是否需要操作按钮 | Boolean | false | | divUrl | 请求地址前缀 | String | | | adjustable | 外部提交 | Boolean | false | | isLabel | 表单是否已文本形式显示 | Boolean | false |

事件

| 事件名 | 说明 | 参数 | | -------------- | -------------------------- | ------------------------------------ | | handleSuccess | 外部提交和自动提交成功回调 | res:接口调用结果，info Form:表单数据 | | initSuccess | 调用info接口完成后回调 | data:接口返回的data数据 | | initMustChoice | 必录项初始化完毕 | ruleRequireList：必录项信息点数据 |

6.页面中使用kxkjCommon组件：权限按钮 KxButton【有副作用待优化】

<template>
	<KxButton label="删除" :perms="权限名称" type="primary" @click="点击事件" />
</template>

属性

| 名称 | 说明 | 类型 | 默认 | | ------------------------------ | -------- | ------ | ---- | | label | 按钮文本 | String | | | perms | 权限名称 | String | | | 其他的参考element-plus按钮属性 | | | |

插槽

| 名称 | 说明 | | ----- | ------------ | | label | 按钮文本插槽 |

7.页面中使用kxkjCommon组件：弹窗 KxDialog \ 抽屉 KxDrawer

<template>
    <KxDialog v-model:isShow="showMoreSelect" dialogName="弹窗名字" state="浏览" :isShowState="false" dialogWidth="50%">
      <template #content>
        弹窗内容
      </template>
    </KxDialog>

	<KxDrawer v-model:isShow="showMoreSelect" dialogName="抽屉名字" state="浏览" :isShowState="false" dialogWidth="50%">
      <template #content>
        抽屉内容
      </template>
    </KxDrawer>
</template>

属性

| 名称 | 说明 | 类型 | 默认 | | ----------------- | -------------------------- | ------- | ---------------------- | | v-model:isShow | 显示隐藏 | Boolean | false | | dialogName | 名字 | String | | | appendBody | 自身是否插入至 body 元素上 | Boolean | false | | dialogWidth | 表格宽度 | String | 30% | | state | 弹窗、抽屉状态 | String | 新增-预览-编辑，默认无 | | isShowState | 是否显示状态信息 | Boolean | true | | isFooter | 是否需要按钮 | Boolean | true | | confirmButtonText | 提交按钮名称 | String | 保存 | | customerFooter | 是否自定义按钮 | Boolean | false | | loading | 加载动画 | Boolean | false |

插槽

| 名称 | 说明 | | ------- | -------------- | | content | 弹窗、抽屉内容 | | operate | 自定义按钮区域 |

事件

| 事件名称 | 说明 | | -------- | ------------------ | | onSubmit | 点击保存按钮回调 | | onCancel | 关闭弹窗、抽屉回调 |