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 参数： | 参数名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | modelValue | Array | - | 绑定值，地址数组 | | disabled | Boolean | false | 是否禁用 | | valueKey | String | 'id' | 选项值的键名 | | levelNum | Number | 4 | 地址层级数量（1-4） | | postFunc | Function | - | 远程请求方法 | | postData | Object | {} | 请求参数 | | pathUrl | String | '' | 请求地址 | | wrapShow | Boolean | false | 是否整行展示 |

使用示例：

<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 参数： | 参数名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | modelValue | Any | - | 绑定值 | | options | Array | [] | 选项列表 | | placeholder | String | '请选择' | 占位符 | | optionProps | Object | {value:'id', label:'title'} | 选项结构配置 | | multiple | Boolean | false | 是否多选 | | collapseTags | Boolean | true | 多选时是否折叠展示 | | labelInValue | Boolean | true | 是否返回完整对象 | | postFunc | Function | - | 远程请求方法 | | pathUrl | String | '' | 请求地址 | | isPage | Boolean | true | 是否分页 | | checkedAll | Boolean | true | 是否显示全选 |

使用示例：

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

3. BnDrop - 下拉菜单选择器

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

Props 参数： | 参数名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | modelValue | Any | {} | 绑定值 | | options | Array | [] | 选项列表 | | placeholder | String | '请选择' | 占位符 | | multiple | Boolean | false | 是否多选 | | labelInValue | Boolean | true | 是否返回对象 | | canUncheck | Boolean | true | 单选是否可取消 | | width | Number | 200 | 下拉框宽度 | | border | Boolean | false | 是否显示边框 | | clearable | Boolean | false | 是否可清空 |

使用示例：

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

4. BnCondition - 规则条件配置

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

Props 参数： | 参数名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | modelValue | Object | - | 绑定值 | | columnList | Array | [] | 可选字段列表 | | columnData | Object | - | 当前字段完整数据 | | allowSelectColumn | Boolean | false | 是否允许选择字段 | | allowDel | Boolean | true | 是否允许删除 | | allowValueType | Boolean | true | 是否显示值类型选择 | | searchTypes | Object | {} | 自定义计算条件 | | valueTypes | Object | {} | 自定义值类型 | | optionProps | Object | 见代码 | 字段映射配置 | | postFunc | Function | - | 请求方法 |

使用示例：

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

5. BnAdvancedFilter - 高级筛选

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

Props 参数： | 参数名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | modelValue | Object | - | 绑定值 | | columnList | Array | [] | 可选字段列表 | | allowSelectColumn | Boolean | false | 是否允许选择字段 | | allowDel | Boolean | true | 是否允许删除 | | searchTypes | Object | {} | 自定义计算条件 | | optionProps | Object | 见代码 | 字段映射配置 | | postFunc | Function | - | 请求方法 |

6. BnSmartForm - 智能表单

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

Props 参数： | 参数名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | id | String/Number | - | 表单ID（编辑时使用）| | components | Array | - | 组件列表配置 | | editType | String | - | 编辑类型：新建/编辑/复制 | | postFunc | Function | - | 请求方法 | | extendPost | Object | - | 扩展参数 | | extraInfo | Object | - | 扩展信息 | | dataBack | Object | - | 数据回填规则 |

方法： | 方法名 | 说明 | |--------|------| | getFormContent() | 获取表单内容 | | checkFormContent() | 校验表单 | | getHere(item) | 滚动到指定字段 |

使用示例：

<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 参数： | 参数名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | type | String | 'daterange' | 选择器类型 | | modelValue | Any | - | 绑定值 | | startKey | String | 'start' | 开始时间键名 | | endKey | String | 'end' | 结束时间键名 | | dataFormat | String | - | 日期格式 | | disabled | Boolean | false | 是否禁用 | | clearable | Boolean | true | 是否可清空 | | placeholder | String | '选择日期' | 占位符 | | rangeSeparator | String | '-' | 范围分隔符 |

使用示例：

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

8. BnRelation - 级联选择器

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

Props 参数： | 参数名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | modelValue | Array | - | 绑定值 | | options | Array | [] | 选项数据 | | multiple | Boolean | false | 是否多选 | | checkStrictly | Boolean | false | 是否可选择任意层级 | | collapseTags | Boolean | true | 是否折叠展示 | | showAllLevels | Boolean | true | 是否显示完整路径 | | separator | String | '-' | 分隔符 | | placeholder | String | '请选择' | 占位符 |

9. BnCheck - 复选框

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

Props 参数： | 参数名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | modelValue | Any | - | 绑定值 | | trueData | Any | - | 选中时的值 | | falseData | Any | - | 未选中时的值 | | label | String | - | 显示文本 | | disabled | Boolean | false | 是否禁用 | | isChecked | Function | - | 自定义选中判断函数 |

使用示例：

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

10. BnMenus - 菜单导航

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

Props 参数： | 参数名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | title | String | - | Logo区域标题 | | menuList | Array | [] | 菜单列表 | | activeNav | Object | - | 当前选中菜单 | | activeKey | String | 'name' | 菜单标识键名 | | defaultOpens | Array | - | 默认展开的菜单 |

使用示例：

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

11. BnColumnConfig - 字段配置

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

Props 参数： | 参数名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | modelValue | Object | - | 字段配置对象 | | row | Number | 1 | 布局列数 | | hideFiled | Array | [] | 需要隐藏的配置项 | | columnList | Array | [] | 字段列表 | | disabled | Boolean | false | 是否禁用 | | postFunc | Function | - | 请求方法 | | extendPost | Object | - | 扩展参数 |

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

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

Props 参数： | 参数名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | columnList | Array | [] | 字段列表 | | postFunc | Function | - | 请求方法 | | id | String/Number | - | 函数规则ID | | setToColumn | Object | - | 目标字段 |

方法： | 方法名 | 说明 | |--------|------| | saveRule() | 保存规则，返回配置对象 |

13. BnOrderCard - 订单卡片

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

Props 参数： | 参数名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | postFunc | Function | - | 请求方法 | | extendPost | Object | {} | 扩展参数 |

14. BnFileView - 文件预览

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

Props 参数： | 参数名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | fileList | Array | [] | 文件列表 | | isMini | Boolean | false | 是否最小化展示 | | isDel | Boolean | false | 是否允许删除 | | showSize | Boolean | false | 是否显示文件大小 | | width | Number/String | 22 | 图片宽度 | | row | Number | 1 | 展示列数 | | noWarp | Boolean | false | 是否强制不换行 |

使用示例：

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

15. BnImportOrder - 批量导入

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

Props 参数： | 参数名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | postFunc | Function | - | 请求方法 | | postData | Object | {} | 请求参数，需包含 tableCode、appId、tableId；appId/tableId 用于查询导入模板下拉 | | pathUrl | String | '/biztable/io/import' | 导入接口地址 |

方法： | 方法名 | 说明 | |--------|------| | open() | 打开导入弹框，并获取版本限制和导入模板列表 |

16. BnExportOrder - 数据导出

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

Props 参数： | 参数名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | postFunc | Function | - | 请求方法 | | cacheKey | String | - | 缓存键值 | | postData | Object | {} | 请求参数 | | searchCondition | Object | {} | 筛选条件 | | watchComponents | Array | [] | 可导出的字段列表 |

方法： | 方法名 | 说明 | |--------|------| | open(data) | 打开导出弹框 |

17. BnOrderShare - 工单分享

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

Props 参数： | 参数名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | tableId | String/Number | - | 工单表 ID | | appId | String/Number | - | 应用 ID | | tableCode | String | - | 工单表 Code | | companyId | String/Number | - | 公司 ID | | postFunc | Function | - | 通用请求方法，用于获取分享配置及平台链接 |

方法： | 方法名 | 参数 | 说明 | |--------|------|------| | open(taskId?) | taskId：工单ID（可选，传入则为编辑分享模式） | 打开分享弹框 |

使用示例：

<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 参数： | 参数名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | width | Number/String | 220 | 弹窗宽度 |

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 预处理器，需要配置相应的构建工具支持