BnBusUi - 班牛业务组件库

项目简介

BnBusUi 是班牛（ByteNew）业务组件库，为工单智能管理平台提供统一的 Vue 3 组件封装。本组件库基于 Element Plus 和 Vue 3 开发，提供了一套完整的业务组件解决方案。

技术栈

核心框架

• Vue 3 (^3.0.0) - 渐进式 JavaScript 框架
• Element Plus (^2.11.9) - 基于 Vue 3 的组件库

构建工具

• Vite (^6.0.1) - 下一代前端构建工具
• @vitejs/plugin-vue (^5.2.1) - Vite Vue 插件

主要依赖

• axios (^1.7.9) - HTTP 客户端
• lodash (^4.17.21) - JavaScript 实用工具库
• sass (^1.83.0) - CSS 预处理器
• vuedraggable (^4.1.0) - 拖拽组件
• vxe-table (^4.17.38) - 高性能表格组件
• @logicflow/core & @logicflow/extension (^1.1.20) - 流程图引擎
• codemirror (^5.65.20) & codemirror-editor-vue3 (^2.8.0) - 代码编辑器

编译工具

• @babel/core & @babel/preset-env - JavaScript 编译器
• babel-plugin-component - 组件按需加载插件
• core-js - JavaScript polyfill 库

安装与使用

安装

npm install @bytenew/bn-bus-ui

全局引入

import { createApp } from 'vue'
import App from './App.vue'
import BnBusUi from '@bytenew/bn-bus-ui'
import '@bytenew/bn-bus-ui/common.scss'

const app = createApp(App)
app.use(BnBusUi)
app.mount('#app')

按需引入

import { BnSelect, BnCondition, BnSmartForm } from '@bytenew/bn-bus-ui'

export default {
  components: {
    BnSelect,
    BnCondition,
    BnSmartForm
  }
}

全局配置

import { setGlobalConfig } from '@bytenew/bn-bus-ui'

// 设置 API 基础 URL
setGlobalConfig({
  apiBaseUrl: 'https://your-api-domain.com'
})

组件列表

1. BnAddress - 地址选择器

功能描述：省市区街道级联选择组件，支持异步加载地址数据。

Props 参数：

使用示例：

<template>
  <BnAddress 
    v-model="addressValue"
    :postFunc="httpRequest"
    pathUrl="/address/getAreaDataList"
    :levelNum="3"
  />
</template>

<script setup>
import { ref } from 'vue'
const addressValue = ref([])
</script>

2. BnSelect - 高级选择器

功能描述：增强版下拉选择组件，支持远程搜索、分页加载、多选全选等功能。

Props 参数：

使用示例：

<template>
  <BnSelect 
    v-model="selectedValue"
    :options="optionList"
    :postFunc="httpRequest"
    pathUrl="/api/select/options"
    multiple
    checkedAll
  />
</template>

3. BnDrop - 下拉菜单选择器

功能描述：自定义下拉选择组件，支持单选/多选、远程搜索、分页加载。

Props 参数：

使用示例：

<template>
  <BnDrop 
    v-model="dropValue"
    :options="menuOptions"
    placeholder="请选择菜单"
    @change="handleChange"
  />
</template>

4. BnCondition - 规则条件配置

功能描述：规则引擎条件配置组件，支持选择字段、设置计算条件、配置值类型。

Props 参数：

使用示例：

<template>
  <BnCondition 
    v-model="ruleValue"
    :columnList="columns"
    allowSelectColumn
    allowDel
    @change="handleChange"
    @del="handleDelete"
  />
</template>

5. BnAdvancedFilter - 高级筛选

功能描述：高级筛选条件配置组件，是 BnCondition 的简化版，用于列表筛选场景。

Props 参数：

6. BnSmartForm - 智能表单

功能描述：动态表单渲染组件，根据字段配置自动渲染各类表单组件，支持联动、校验、数据回填等高级功能。

Props 参数：

方法：

使用示例：

<template>
  <BnSmartForm 
    ref="smartForm"
    :id="formId"
    :components="componentList"
    :postFunc="httpRequest"
    :extendPost="{appId: 'xxx', tableCode: 'xxx'}"
    @change="handleChange"
  />
  <el-button @click="saveForm">保存</el-button>
</template>

<script setup>
import { ref } from 'vue'
const smartForm = ref(null)
const formId = ref('')
const componentList = ref([])

const saveForm = () => {
  const check = smartForm.value.checkFormContent()
  if (check.checked) {
    const content = smartForm.value.getFormContent()
    // 提交表单数据
  }
}
</script>

7. BnDatePicker - 日期选择器

功能描述：增强版日期选择组件，支持日期范围、日期时间、自定义格式。

Props 参数：

使用示例：

<template>
  <BnDatePicker 
    v-model="dateRange"
    type="daterange"
    dataFormat="YYYY-MM-DD"
  />
</template>

8. BnRelation - 级联选择器

功能描述：基于 Element Plus Cascader 封装的级联选择组件。

Props 参数：

9. BnCheck - 复选框

功能描述：自定义复选框组件，支持单选/多选模式、自定义选中值。

Props 参数：

使用示例：

<template>
  <BnCheck 
    v-model="checkValue"
    :trueData="'1'"
    :falseData="'0'"
    label="启用"
  />
</template>

10. BnMenus - 菜单导航

功能描述：侧边栏菜单组件，支持多级菜单。

Props 参数：

使用示例：

<template>
  <BnMenus 
    title="工单系统"
    :menuList="menus"
    v-model:activeNav="currentMenu"
  />
</template>

11. BnColumnConfig - 字段配置

功能描述：表单字段配置组件，用于配置字段的基本信息、默认值、权限等。

Props 参数：

12. BnFunExpr - 函数表达式编辑器

功能描述：函数表达式编辑组件，支持选择函数、字段，编写计算公式。

Props 参数：

方法：

13. BnOrderCard - 订单卡片

功能描述：工单详情页订单信息展示组件，展示订单基本信息、商品列表、备注等。

Props 参数：

14. BnFileView - 文件预览

功能描述：附件预览组件，支持图片、视频、Office文档等多种文件类型的预览。

Props 参数：

使用示例：

<template>
  <BnFileView 
    :fileList="attachments"
    :isDel="true"
    :width="60"
    @delFile="handleDelete"
  />
</template>

15. BnImportOrder - 批量导入

功能描述：工单批量导入组件，支持 Excel 文件上传导入。

Props 参数：

方法：

16. BnExportOrder - 数据导出

功能描述：工单数据导出组件，支持选择导出字段、验证码校验。

Props 参数：

方法：

17. BnOrderShare - 工单分享

功能描述：工单分享链接生成组件，支持生成网页端/移动端分享链接，以及手淘、抖音、京东等平台的长/短链接。

Props 参数：

方法：

使用示例：

<template>
  <BnOrderShare
    ref="orderShare"
    :table-id="tableInfo.tableId"
    :app-id="tableInfo.appId"
    :table-code="tableInfo.tableCode"
    :post-func="post"
  />
  <el-button @click="openShare">分享</el-button>
</template>

<script setup>
import { ref } from 'vue'
const orderShare = ref(null)
const openShare = () => {
  orderShare.value.open()         // 创建分享
  // orderShare.value.open(taskId) // 编辑分享
}
</script>

18. BnVirtPopover - 虚拟滚动 Popover

功能描述：基于虚拟滚动的大数据量 Popover 组件。

Props 参数：

19. BnInpNum - 数字输入框

功能描述：数字输入组件。

20. BnRadio - 单选框

功能描述：单选框组件。

21. BnWebLog - 接口日志

功能描述：接口请求日志记录与展示组件。

工具函数

组件库提供了以下工具函数：

import { 
  idsToTexts,           // ID数组转文本
  insertText,           // 向输入框插入文本
  tidyRuleComponents,   // 整理规则组件列表
  searchValueToJson,    // 筛选值转JSON
  getSearchComponents,  // 获取筛选组件列表
  getWatchComponents,   // 获取查看组件列表
  tidyComponents,       // 整理组件列表
  tidyShowSubDataFile,  // 整理子表单附件数据
  tidyJumpSearchData,   // 整理跳转筛选数据
  recordApiLog          // 记录API日志
} from '@bytenew/bn-bus-ui'

开发说明

本地开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建
npm run build

# 预览构建结果
npm run serve

项目结构

BnBusUi/
├── packages/           # 组件源码
│   ├── BnAddress/     # 地址选择器
│   ├── BnSelect/      # 高级选择器
│   ├── BnCondition/   # 规则条件
│   ├── BnSmartForm/   # 智能表单
│   └── ...
├── examples/          # 示例代码
├── install.js         # 组件库入口
├── vite.config.js     # Vite 配置
└── package.json       # 包配置

浏览器兼容性

• Chrome >= 80
• Firefox >= 75
• Safari >= 13
• Edge >= 80

版本信息

• 当前版本：1.1.331
• 作者：辛巴
• 许可证：ISC

注意事项

1. 本组件库基于 Vue 3 开发，不兼容 Vue 2
2. 使用组件前请确保已引入 Element Plus
3. 部分组件需要传入 postFunc 方法用于数据请求
4. 组件库使用 Sass 预处理器，需要配置相应的构建工具支持