@cntransun/gbos

G-BOS shared Vue components
3,950
Install
npm install @cntransun/gbos
Latest Version:0.1.42
Vue:3
License:MIT
Last Updated:Oct 21, 2026
Links: npm
Maintainer: zhdesh

@cntransun/gbos

G-BOS 前端公共组件库。

安装

npm install @cntransun/gbos element-plus @element-plus/icons-vue

使用地图相关组件时，还需安装：

npm install maptalks maptalks.markercluster @maptalks/gl @maptalks/vt

Peer 依赖：vue ^3.5、element-plus ^2.14、@element-plus/icons-vue ^2.3；地图相关为 maptalks、maptalks.markercluster、@maptalks/gl、@maptalks/vt。

接入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { install } from '@cntransun/gbos'
import '@cntransun/gbos/style.css'
import request from '@/utils/request'
import modal from '@/utils/modal'

const app = createApp(App)

app.use(ElementPlus)
app.use({ install }, {
  request, // 必填，与宿主 HTTP 封装一致
  modal, // 可选
  locale: getLocale, // 可选：'zh_CN' | 'en_US'，或返回上述值的函数
})
install 参数 说明
request 必填，请求方法
modal 可选，不传则使用包内默认
locale 可选，zh_CN / en_US 或 () => locale；未传则读 localStorage['app-locale']

安装后全局注册：VehicleTreePanel、VehicleTreeSelect、VirtualTreeSelect、CompanyTreePanel、CompanyTreeSelect、CustomMap、ResizablePanel、CustomDatePicker。

也可按需具名导入：

import {
  VehicleTreePanel,
  VehicleTreeSelect,
  VirtualTreeSelect,
  CompanyTreePanel,
  CompanyTreeSelect,
  CustomMap,
  ResizablePanel,
  CustomDatePicker,
} from '@cntransun/gbos'

组件

VehicleTreePanel

车辆组织树面板（全部 / 收藏 / 分组）。

标签： <vehicle-tree-panel>

Prop 类型 默认值 说明
multiple Boolean true 是否多选；false 时不显示复选框，点击车辆即选中
border Boolean true 是否显示 tabs 外边框
onlyAll Boolean false 仅显示「全部」树，不展示收藏/分组 Tab
showCheckLinkSwitch Boolean false 「全部」树是否显示父子联动开关
showSummary Boolean true 「全部」树是否显示车辆汇总（顶栏快捷筛选 + 筛选面板内汇总）
showChannel Boolean true 是否显示视频通道
事件 说明
check { vehicles, channels, raw, tab }
nodeClick { vehicles, channels, tab }
nodeDblClick { vehicles, channels, tab }
方法（ref） 说明
setCheckVehicles(vehicleIds) 在「全部」Tab 追加勾选车辆
clearCheckVehicles() 清除「全部」Tab 勾选
setCurrentHighlightVehicle(vehicleId) 单选高亮车辆（「全部」Tab）
setTabActive(tab) 设置 Tab：all / favorite / group 
<vehicle-tree-panel
  :show-check-link-switch="true"
  :show-summary="true"
  @check="onCheck"
/>

VehicleTreeSelect

车辆树下拉选择（Popover + 树）。

标签： <vehicle-tree-select>

Prop 类型 默认值 说明
modelValue / v-model String | Array '' 单选：vehicleId；多选：vehicleId[]
placeholder String '' 空则使用包内「请选择车辆」文案
clearable Boolean true 是否可清空
disabled Boolean false 是否禁用
multiple Boolean true 是否多选
showCheckLinkSwitch Boolean false 「全部」树是否显示父子联动开关
width String | Number 200 输入框宽度
popoverWidth Number 320 下拉面板宽度（px）
popoverHeight Number 420 下拉面板高度（px）
appendTo String | Object undefined 下拉挂载节点
事件 说明
update:modelValue 选中值变化
change { value, vehicles, tab? } 
<vehicle-tree-select v-model="vehicleIds" multiple />

VirtualTreeSelect

通用虚拟化树形下拉（单选 / 多选）。

标签： <virtual-tree-select>

Prop 类型 默认值 说明
modelValue / v-model String | Number | Array undefined 选中值；多选为数组
data Array [] 树数据
props Object {} 字段映射：{ value, label, children, disabled }
placeholder String '请选择' 占位文案
clearable Boolean true 是否可清空
filterable Boolean true 是否可搜索
disabled Boolean false 是否禁用
multiple Boolean false 是否多选
showCheckLinkSwitch Boolean true 多选时是否显示底部「父子联动」开关
checkStrictly Boolean false 父子是否不关联（true 各自独立）
collapseTags Boolean false 多选是否折叠 tag
collapseTagsTooltip Boolean false 折叠 tag 是否显示 tooltip
height Number undefined 固定高度；传入后不自适应
maxHeight Number 260 自适应时最大高度
itemSize Number 26 节点行高
onlyLeaf Boolean false 是否只能选叶子
defaultExpandedKeys Array undefined 默认展开 key；不传则展开第一项
popperClass String 'virtual-tree-select-popper' 下拉 popper class
teleported Boolean true 是否 teleport 到 appendTo
appendTo String | Object undefined 下拉挂载节点
fallbackLabel String '' 单选时 id 不在树中的回显文案
nodeIcon String undefined 节点图标 name；未传不显示
事件 说明
update:modelValue 选中值变化
change 单选：(value, node)；多选：(keys, nodes)
clear 清空
visible-change 下拉显隐
remove-tag 多选移除 tag
插槽 说明
default { node, data } 自定义树节点
fallback-option id 不在树中时的隐藏 option，用于回显 
<virtual-tree-select
  v-model="deptIds"
  multiple
  :data="treeData"
  :props="{ value: 'id', label: 'label', children: 'children' }"
/>

CompanyTreePanel

组织树侧栏面板。

标签： <company-tree-panel>

Prop 类型 默认值 说明
multiple Boolean false 是否多选（勾选框）
checkStrictly Boolean false 多选时父子是否不联动（未展示底部开关时生效）
showCheckLinkSwitch Boolean true 多选时是否显示底部「父子联动」开关
showFleet Boolean true 是否显示车队；true 调 getOrgTree，false 调 getOperableOrgTree
visible / v-model:visible Boolean true 面板显隐
事件 说明
node-click 单选节点数据；再次点击当前节点为 null
check (nodeData, info)
check-change (checkedNodes, checkedKeys, info) 
<company-tree-panel v-model:visible="show" @node-click="onNode" />

CompanyTreeSelect

公司树下拉（内部请求公司列表并封装 VirtualTreeSelect）。

标签： <company-tree-select>

Prop 类型 默认值 说明
modelValue / v-model String | Number | Array undefined 单选：公司 id；多选：id 数组
queryType Number 1 接口 queryType
queryParams Object {} 额外查询参数
placeholder String '' 空则使用「请选择公司」
clearable Boolean true 是否可清空
filterable Boolean true 是否可搜索
disabled Boolean false 是否禁用
multiple Boolean false 是否多选
showCheckLinkSwitch Boolean true 多选是否显示父子联动开关
checkStrictly Boolean false 父子是否不关联
collapseTags Boolean false 多选折叠 tag
collapseTagsTooltip Boolean false 折叠 tag tooltip
onlyLeaf Boolean false 是否只能选叶子
width String | Number 220 宽度
appendTo String | Object undefined 下拉挂载节点
teleported Boolean true 是否 teleport
fallbackLabel String '' id 不在树中的回显文案
事件 说明
update:modelValue 选中值变化
change (value, nodeOrNodes)
clear 清空
visible-change 下拉显隐
remove-tag 多选移除 tag
loaded (treeData) 树加载完成
方法（ref） 说明
reload() 重新请求公司树 
<company-tree-select v-model="deptId" @change="onCompanyChange" />

CustomMap

地图组件（maptalks）。

标签： <custom-map>

Prop 类型 默认值 说明
supportedMapTypes Array undefined 可选底图：baidu / gaode / google；有非空数组则用 prop，否则读用户习惯
事件 说明
ready (map, maptalks, mapType, ClusterLayer)
mapTypeChange 当前底图类型
插槽 说明
默认 { map } 自定义浮层 
<custom-map @ready="onMapReady" />

ResizablePanel

可拖拽调宽面板。

标签： <resizable-panel>

Prop 类型 默认值 说明
width / v-model:width Number 280 面板宽度（px）
min Number 200 最小宽度
max Number 600 最大宽度
edge String 'right' 拖拽边：left / right
事件 说明
update:width 拖拽后的新宽度 
<resizable-panel v-model:width="panelWidth" :min="280" :max="480">
  <!-- 内容 -->
</resizable-panel>

CustomDatePicker

基于 el-date-picker 的日期选择器；除自身 props 外透传 Element Plus DatePicker 属性。

标签： <custom-date-picker>

Prop 类型 默认值 说明
modelValue / v-model String | Number | Date | Array — 选中值
allowToday Boolean false 是否允许选当天；false 时最大可选到昨天
appendTo String | Object undefined 弹层挂载节点；默认无界下挂主应用 body

type="daterange" 且未传 shortcuts 时提供默认快捷项：本周、本月、近一周、近一个月、近一年；范围跨度最大 365 天。

<custom-date-picker
  v-model="dateRange"
  type="daterange"
  value-format="YYYY-MM-DD"
  :allow-today="false"
/>

Version History

Version Released License
0.1.42 MIT
0.1.41 MIT
0.1.40 MIT
0.1.39 MIT
0.1.38 MIT
Pre-releases (1)
Version Released License
0.0.0-stage