bsp-vue3-components

基于 Vue 3 的业务组件库，当前内置：

• sd-data-grid：数据表格组件（原 vue3-produce-base 项目中的 data-grid），支持配置化查询、分页、导出、打印、字段显示设置、字典渲染、行操作等能力。
• s-dic-grid / s-dicgrid：字典栅格组件（原 dic-grid），用于字典项的选择/多选/搜索。

组件库与业务解耦：不再直接依赖业务 Pinia store 与全局配置，通过依赖注入方式接入使用方业务环境。

目录结构

public-components/
├── index.js                 # 组件库入口（install + 导出）
├── vite.config.js           # Vite 库模式构建配置
├── package.json
├── src/
│   ├── components/
│   │   ├── data-grid/       # 数据表格组件（含查询/导出/打印等子组件）
│   │   └── dic-grid/        # 字典栅格组件
│   ├── utils/
│   │   ├── store-provider.js # 业务 store 注入器（getCommonStore / setCommonStoreFactory）
│   │   └── config.js         # 全局配置注入器（getServerConfig / getPath / setServerConfig / setPath）
│   └── assets/
└── dist/                    # 构建产物（npm 发布内容）

安装

npm install bsp-vue3-components

运行时依赖（peerDependencies，需使用方自行安装）

| 依赖 | 版本 | 说明 | | --- | --- | --- | | vue | ^3.3.0 | 框架 | | element-plus | ^2.4.0 | 表格内部 UI（el-* 组件） | | view-ui-plus | ^1.2.0 | 提供 Table/Page/Select/Icon 及 $Modal/$Message 等 | | pinia | ^2.0.0 | 业务 store | | vue-router | ^4.0.0 | 组件内部使用 $route | | dayjs | ^1.11.0 | 日期处理 | | qs | ^6.11.0 | 请求参数序列化 | | template_js | ^2.4.0 | 业务模板引擎 | | sd-table-grid | ^1.0.0 | 导出表格组件 | | sd-dic-manage | ^1.0.0 | 字典管理弹窗 |

快速开始

全量引入

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import BspVue3Components from 'bsp-vue3-components'
import 'bsp-vue3-components/style.css'

// 1. 注入业务 store（必须，组件内部通过 getCommonStore() 获取）
import { setCommonStoreFactory } from 'bsp-vue3-components'
import { useCommonStore } from '@/stores/modules/common'
setCommonStoreFactory(() => useCommonStore())

// 2. 可选：显式注入 serverConfig / path（默认读取 window.serverConfig / window.path）
// import { setServerConfig, setPath } from 'bsp-vue3-components'
// setServerConfig(window.serverConfig)
// setPath(window.path)

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

注意：setCommonStoreFactory 必须在组件使用前调用。注入的 store 需提供 postRequest / getRequest / authPostRequest / authGetRequest / downloadPostRequest 等方法及 getToken getter（与业务项目 useCommonStore 保持一致）。

按需引入

import { SdDataGridVue3 } from 'bsp-vue3-components'
import 'bsp-vue3-components/style.css'

app.component('sd-data-grid', SdDataGridVue3)

也可通过子路径按需引入：

import { SdDataGridVue3 } from 'bsp-vue3-components/data-grid'

兼容旧导出名 sDataGrid / sDicGrid，二者与新名指向同一组件。

sd-data-grid 组件

基本用法

<template>
  <sd-data-grid
    grid-mark="demo_grid"
    :params="{ keyword: keyword }"
    :browse="false"
    :is-full="true"
    @ready="onGridReady"
  />
</template>

<script setup>
import { ref } from 'vue'

const keyword = ref('')
const gridRef = ref(null)

const onGridReady = (grid) => {
  gridRef.value = grid
  // grid.query_grid_data() 等方法可直接调用
}
</script>

Props

| 名称 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | gridMark | String | '' | 表格配置标识（必填，后端下发表格模型） | | funcMark | String | '' | 功能标识 | | params | Object | {} | 表格查询条件参数 | | extendParams | Object | {} | 扩展查询参数 | | browse | Boolean | true | 只读模式（不显示操作列） | | displayQuery | Boolean | true | 是否显示查询区 | | rightShowTabs | Boolean | true | 是否显示右侧 Tab 操作区 | | rowOperFilter | Function | () => true | 行操作按钮过滤 | | showFieldsParams | Object | {} | 字段显示设置附加参数 | | externalHeight | String/Number | null | 外部指定表格高度 | | isFull | Boolean | false | 表格是否填满剩余空间 | | beforeRender | Function | null | 渲染前回调 | | chineseSort | Object | {} | 中文排序配置 | | customFunc | Any | false | 自定义功能开关 |

主要事件

| 事件 | 说明 | | --- | --- | | ready | 组件初始化完成 | | 行操作 | 行操作按钮点击事件（见业务项目行操作配置） |

构建与发布

# 安装依赖
npm install

# 构建产物到 dist/
npm run build

产物说明：

dist/
├── bsp-vue3-components.mjs   # ESM 全量
├── bsp-vue3-components.umd.js# UMD 全量
├── data-grid.mjs / data-grid.umd.js   # data-grid 子入口
├── dic-grid.mjs / dic-grid.umd.js     # dic-grid 子入口
└── style.css                   # 全部样式

发布到 npm

npm login
npm publish

发布前建议：

1. 修改 package.json 中的 name（发布到公网需保证唯一，如 @your-scope/bsp-vue3-components）与 version。
2. 确认 files 只包含 dist。
3. 通过 npm pack --dry-run 预览发布内容。

常见问题

组件未注入 store 报错

[bsp-vue3-components] 尚未注入业务 store...

在应用入口调用 setCommonStoreFactory(() => useCommonStore())。

关于 sd-table-grid / sd-dic-manage 的兼容性

这两个包为 Vue2 时代的存量包，组件内部仅使用其导出对象，在 Vue3 项目中作为 external 依赖由使用方提供。若使用方项目未安装，请先安装：

npm install sd-table-grid sd-dic-manage

样式未生效

请确认引入了样式文件：

import 'bsp-vue3-components/style.css'