@cntransun/gbos

G-BOS 前端公共组件库。

安装

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

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

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

使用图表组件时，还需安装：

npm install echarts

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

接入

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'

const app = createApp(App)

app.use(ElementPlus)
app.use({ install }, {
  request, // 必填，与宿主 HTTP 封装一致
  locale: getLocale, // 可选：'zh_CN' | 'en_US'，或返回上述值的函数
})

安装后全局注册：VehicleTreePanel、VehicleTreeSelect、VirtualTreeSelect、CompanyTreePanel、CompanyTreeSelect、CustomMap、ResizablePanel、CustomDatePicker、CustomDatetimePicker、CustomVirtualTree、CustomEchart、TableColumnSetting、CustomDialog。

同时挂到原型：this.$centerAlert（居中提示）、this.$modal（顶部提示和确认框）。宿主在 install 之前已经设置过 $modal 时，保留宿主的，不覆盖。

this.$modal 方法：msg、msgSuccess、msgError、msgWarning、confirm、alert。消息和弹框会挂到无界主应用的 body。也可 import { modal } from '@cntransun/gbos' 自行挂载。

也可按需具名导入：

import {
  VehicleTreePanel,
  VehicleTreeSelect,
  VirtualTreeSelect,
  CompanyTreePanel,
  CompanyTreeSelect,
  CustomMap,
  ResizablePanel,
  CustomDatePicker,
  CustomDatetimePicker,
  CustomVirtualTree,
  CustomEchart,
  TableColumnSetting,
  CustomDialog,
  centerAlert,
  modal,
  showVehicleExpiredStatus,
  showVehicleScrappedStatus,
  showVersionUpdate,
} from '@cntransun/gbos'

组件

VehicleTreePanel

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

标签： <vehicle-tree-panel>

<vehicle-tree-panel
  :show-check-link-switch="true"
  :show-summary="true"
  @check="onCheck"
/>

VehicleTreeSelect

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

标签： <vehicle-tree-select>

外部修改 v-model 时，只同步当前 Tab（全部 / 收藏 / 分组）的勾选，其它 Tab 保持原样。

<vehicle-tree-select v-model="vehicleIds" multiple />

VirtualTreeSelect

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

标签： <virtual-tree-select>

<virtual-tree-select
  v-model="deptIds"
  multiple
  :data="treeData"
  :props="{ value: 'id', label: 'label', children: 'children' }"
/>

CompanyTreePanel

组织树侧栏面板。

标签： <company-tree-panel>

<company-tree-panel v-model:visible="show" @node-click="onNode" />

CompanyTreeSelect

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

标签： <company-tree-select>

<company-tree-select v-model="deptId" @change="onCompanyChange" />

CustomMap

地图组件（maptalks）。

标签： <custom-map>

<custom-map @ready="onMapReady" />

ResizablePanel

可拖拽调宽面板。

标签： <resizable-panel>

<resizable-panel v-model:width="panelWidth" :min="280" :max="480">
  <!-- 内容 -->
</resizable-panel>

CustomDatePicker

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

标签： <custom-date-picker>

type="daterange" 且未传 shortcuts 时，按上表开关生成默认快捷项；传入 shortcuts 时以外面的为准。范围跨度最大 365 天。

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

CustomDatetimePicker

基于 el-date-picker 的日期时间范围选择器。默认 datetimerange，值格式 YYYY-MM-DD HH:mm:ss。快捷项为「今日」「昨日」，选中后是当天 00:00:00 到 23:59:59。

标签： <custom-datetime-picker>

今天之后的日期不可选。传入 shortcuts 时以外面的为准，其余 Element Plus DatePicker 属性照常透传。

<custom-datetime-picker
  v-model="queryParams.dateRange"
  :allow-today="true"
  :allow-yesterday="true"
  @change="onDateChange"
/>

CustomEchart

基于 ECharts 的图表。修改 options 会整表替换配置。容器尺寸变化时自动 resize。

标签： <custom-echart>

<custom-echart :options="chartOptions" height="360px" />

TableColumnSetting

表格列显隐设置。直接改传入列对象的 visible。persist 为 true 时写入 localStorage，key 为「当前应用 + cacheKey」。无界下应用名取 window.__WUJIE.id（如 base-module），否则取地址第一段。基础应用缓存前缀仍是 base-module-table-cols:。

标签： <table-column-setting>

disabled 为 true 的列不参与全选。重置恢复为页面初次传入的显隐，并清掉这份缓存。

<table-column-setting v-model="columns" persist cache-key="user-list" />

CustomDialog

封装 el-dialog，透传属性和插槽。默认挂到当前窗口的 body，传入 appendTo 可改挂载节点。

标签： <custom-dialog>

其余属性和插槽与 el-dialog 相同。

<custom-dialog v-model="visible" title="标题" width="480px">
  内容
</custom-dialog>

方法

$centerAlert

居中提示，无确认按钮。安装后使用 this.$centerAlert，也可 import { centerAlert } from '@cntransun/gbos'。

短文案时弹窗较窄，文字变长会加宽，超过上限后在框内换行。options 会覆盖 ElMessageBox.alert 的默认配置。

this.$centerAlert.success('操作成功', '数据已保存')

const close = this.$centerAlert.loading('处理中...', '请稍候')
close()

showVersionUpdate()

版本更新提示，使用 ElMessageBox.alert，无确认按钮。图标在左、文案在右。图案暂时写死，倒计时固定 6 秒。倒计时结束执行 window.top.location.reload()。点关闭、遮罩或 Esc 只关掉提示，不刷新。返回关闭函数。

安装后也可使用 this.$showVersionUpdate。

import { showVersionUpdate } from '@cntransun/gbos'

const close = showVersionUpdate()
close()

showVehicleExpiredStatus()

车辆服务已到期提示。无确认按钮，点遮罩、关闭按钮或 Esc 关闭。包内车辆树在选中到期车辆时会自行调用；宿主也可单独引入。

import { showVehicleExpiredStatus } from '@cntransun/gbos'

showVehicleExpiredStatus()

showVehicleScrappedStatus()

车辆已停用/报废提示。交互与到期提示相同。包内组件不会调用，由宿主按需引入。

import { showVehicleScrappedStatus } from '@cntransun/gbos'

showVehicleScrappedStatus()