@corgicoding/el-libs

业务封装组件集合

基于 element-plus 二次封装的开发效率组件，包括

1. 模态框
   • CustomDialog
2. 数据表单组件
   • DataFormGrid
3. 数据分页组件
   • DataPagination
4. 数据表格组件
   • DataTable
5. 分页数据表格组件
   • DataTableGrid
6. 搜索数据表格组件
   • PageSearchTable
7. 字典组件集合
   • DictSelect
   • DictRadio
   • DictCheckbox
8. 弹窗表单组件
   • DialogFormGrid
9. 远程下拉组件
   • 远程下拉
     • RemoteSelect
   • 远程树形下拉
     • RemoteTreeSelect
10. 上传组件
    • 图片上传
      • UploadImage
    • 文件上传
      • UploadFiles

使用

可以分为全局使用和按需加载，推荐使用按需加载。

按需加载

将 global 设为 false，即可实现按需加载，组件库将启动配置注册功能，不进行组件安装至全局

import { createPinia } from 'pinia';
import router from './router';
import WELLComponent from '@corgicoding/el-libs';
import httpInstance from '@/services/http/index';
import '@corgicoding/el-libs/lib/style.css';
// 权限指令
import authDirectives from './plugins/directives/auth';

app
  .use(createPinia())
  .use(ElementPlus)
  .use(router)
  .use(authDirectives)
  .use(i18n)
  .use(WELLComponent, {
    global: false,
    axios: httpInstance,
    prefixCode: import.meta.env.VITE_PLATFORM_CODE || '',
    auth: validateActionPermission
  })
  .mount('#app');

在页面中使用

<script setup lang="ts">
import { CustomDialog } from '@corgicoding/el-libs';

const showDialog = ref(false);
const dialogRef = ref<instanceType<typeof CustomDialog>>();
</script>

<template>
  <CustomDialog v-model="showDialog" destroy-on-close title="测试弹窗">
    <div class="pr-5">
      <span>这是测试数据显示</span>
    </div>
  </CustomDialog>
</template>

全局使用

将 global 设为 true，后续在页面中使用不需要再引入对应组件

import { createPinia } from 'pinia';
import router from './router';
import WELLComponent from '@corgicoding/el-libs';
import httpInstance from '@/services/http/index';
import '@corgicoding/el-libs/lib/style.css';
// 权限指令
import authDirectives from './plugins/directives/auth';

app
  .use(createPinia())
  .use(ElementPlus)
  .use(router)
  .use(authDirectives)
  .use(i18n)
  .use(WELLComponent, {
    global: true,
    axios: httpInstance,
    prefixCode: import.meta.env.VITE_PLATFORM_CODE || '',
    auth: validateActionPermission
  })
  .mount('#app');

在页面中使用，缺点无法提示相关的组件信息

<script setup lang="ts">
const showDialog = ref(false);
</script>

<template>
  <CustomDialog v-model="showDialog" destroy-on-close title="测试弹窗">
    <div class="pr-5">
      <span>这是测试数据显示</span>
    </div>
  </CustomDialog>
</template>

组件库

模态框

名称：CustomDialog

封装系统基本的弹窗设计，自定义样式符合设计稿，提供全局系统的穿透支持。

具体文档：链接

数据表单组件

名称： DataFormGrid

封装表单常见的类型, 通过配置快速生成表单内容, 支持详情文本并且以栅格形式支持响应式布局.

具体文档：链接

数据分页组件

名称： DataPagination

封装 el-pagination， 为 DataTableGrid 服务

具体文档：链接

数据表格组件

名称： DataTable

封装 el-table， 以 数据 + 配置项 形式生成表单数据.

具体文档：链接

分页数据表格组件

名称： DataTableGrid

基于 DataTable 编写， 支持快速生成， 对接列表接口实现分页和配置操作功能.

具体文档：链接

搜索数据表格组件

名称： PageSearchTable

基于 DataTableGrid 和 DataFormGrid 编写， 支持快速生成， 对接列表接口实现分页和配置操作功能， 并且自动根据页面高度铺满， 支持搜索表单和列表的快速互动.

具体文档：链接

字典组件集合

封装字典常见的三种组成形式， 为 DataFormGrid 服务， 自带缓存

具体文档：链接

字典下拉

名称： DictSelect

字典单选框

名称： DictRadio

字典多选

名称： DictCheckbox

弹窗表单组件

名称： DialogFormGrid

基于 CustomDialog 和 DataFormGrid 设计的弹窗表单， 快速生成 新增、编辑 和 删除 业务表单功能。

具体文档：链接

远程下拉组件

快速配置 字符串 形式或 数组 形式的 下拉 或 树形 接口，为 DataFormGrid 服务。

具体文档：链接

远程下拉

名称： RemoteSelect

远程树形下拉

名称： RemoteTreeSelect

上传组件

快速配置上传图片或文件接口，为 DataFormGrid 服务。

具体文档：链接

图片上传

名称： UploadImage

文件上传

名称： UploadFiles