@cimom-ui/standard-ui

@cimom-ui/standard-ui

标准组件库：基于 Vue 2.6 + Element UI 2.x + vxe-table 3.24.x 的通用业务组件封装，供其它项目复用。

共 14 个顶层组件。

组件总览

StandardAdvancedQuery 为 StandardFilterbar 内部依赖，随包发布但不单独暴露。

命名约定：属性表列出的属性名为模板传参写法（kebab-case），与代码 prop（camelCase）一一对应 （如 number-only ↔ numberOnly、default-expanded-keys ↔ defaultExpandedKeys）；事件名统一 kebab-case。

安装

npm i @cimom-ui/standard-ui

前置依赖（peerDependencies）

使用方项目必须已安装并全局注册以下库：

// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

Vue.use(ElementUI)
Vue.use(VXETable)

注册方式

全局注册（推荐）

在入口统一注册一次，页面模板直接使用标签，业务页面内无需 import：

// src/main.js
import StandardComponents from '@cimom-ui/standard-ui';
Vue.use(StandardComponents);

局部注册（按需）

// 业务页面
import { StandardTable, StandardButton } from '@/components';

// npm 包（lib 构建产物仅保留默认导出，组件挂载为默认导出对象的属性）
import StandardComponents from '@cimom-ui/standard-ui';

export default {
  components: {
    'standard-table': StandardComponents.StandardTable,
    'standard-button': StandardComponents.StandardButton
  }
}

// 子组件挂载于主组件静态属性
// 'standard-column': StandardTable.Column,
// 'standard-toolbar-left': StandardTable.ToolbarLeft

组件 API

标准按钮 StandardButton

支持单标签（label prop）与双标签（默认插槽文案，优先于 label）；内部固定 size="mini"，其余属性/事件透传 el-button。

<standard-button label="查询" type="primary" icon="el-icon-search"
                 :loading="loading" @click="onSearch" />
<standard-button label="导出" icon="el-icon-upload2" @click="onExport" />
<standard-button type="danger" @click="onDelete">删除</standard-button>

标准输入框 StandardInput

支持单标签与双标签（默认插槽内容显示为输入框右侧附加内容，常用于单位）；内部固定 size="mini"、可清空、自动 trim。

事件：@enter（回车）；其余（focus/blur/clear 等）透传。 插槽：默认插槽 → append（右侧附加）；具名 prepend / prefix / suffix。

<standard-input v-model="keyword" placeholder="请输入关键字" @enter="onSearch" />
<standard-input v-model="form.qty" number-only>个</standard-input>

标准下拉 StandardSelect

单选绑定任意值；multiple 多选时绑定值必须为数组。内部固定 size="mini"、可清空、可筛选；远程模式自动开启 filterable / reserve-keyword。

事件：@change / @visible-change，其余透传 el-select。 远程约定：remote 方法返回 Promise；返回值支持数组或接口响应结构（自动提取 Datas）；组件自动防抖 300ms、管理 loading、首次挂载与下拉展开（无数据）时自动拉取。

<standard-select v-model="form.type" :options="typeOptions" />
<standard-select v-model="form.types" multiple :options="typeOptions" />
<standard-select v-model="form.cmoLot" remote="remoteWorkCmo"
                 :option-props="{ label: 'CMO_LOT', value: 'CMO_LOT' }"
                 placeholder="请选择工单编号" />

标准时间选择 StandardTimePick

type="date"（默认，年月日）/ type="datetime"（年月日时分秒）；内部固定 size="mini"、可清空、弹出面板右对齐。

<standard-time-pick v-model="form.checkDate" />
<standard-time-pick v-model="form.checkTime" type="datetime" />
<standard-time-pick v-model="form.date" :picker-options="pickerOptions" />

标准弹窗 StandardDialog

双标签，默认插槽放弹窗内容。

事件：@confirm（不自动关闭，父组件处理业务后自行关闭）、@cancel（自动关闭）、@close。

<standard-dialog v-model="dialogVisible" title="新增节点"
                 :confirm-loading="saving" @confirm="handleConfirm">
  <standard-form ref="editForm" :model="form" :rules="formRules">
    <!-- 表单内容 -->
  </standard-form>
</standard-dialog>

标准布局容器 StandardContainer

双标签；无装饰样式（无边框/背景/内边距），仅管理排列方向与尺寸。

<standard-container direction="column" height="420px">
  <standard-container :size="60">上</standard-container>
  <standard-container :size="40" direction="row">
    <standard-container :size="30">左</standard-container>
    <standard-container :size="70">右</standard-container>
  </standard-container>
</standard-container>

标准筛选栏 StandardFilterbar

单标签。v-model 绑定 searchBar：{ searchCondition, searchVariable, mainConditionCount }。

事件（必接）：@search；可选 @export / @reset / @render-error。

条件类型 type：

条件配置字段：label（标题）、value（键，必须存在于 searchVariable）、type、isMain: 'Y'（主区）、placeholder、clearable、width（数字 px 或 CSS 字符串）、selectSource、remote（函数或父组件方法名字符串）、optionProps: { label, value }。

<standard-filterbar v-model="searchBar" show-export reset-trigger-search
                    :loading="loading" @search="onSearch" @export="onExport" />

searchBar: {
  searchCondition: [
    { label: '开始时间', value: 'startTime', type: 'datetime', isMain: 'Y', clearable: false },
    { label: '工单编号', value: 'cmoLot', type: 'select', isMain: 'Y',
      remote: 'remoteWorkCmo', optionProps: { label: 'CMO_LOT', value: 'CMO_LOT' } },
    { label: '检验结果', value: 'cresult', type: 'select',
      selectSource: [{ label: '全部', value: '-1' }, { label: '合格', value: '1' }] },
  ],
  searchVariable: { startTime: '', cmoLot: '', cresult: '-1' }, // key 与 value 一一对应，初始值即重置目标
}

标准表单 StandardForm / StandardFormItem

双标签，默认插槽放 <standard-form-item>。

对外方法（ref）：validate / resetFields / clearValidate。

<standard-form ref="editForm" :model="form" :rules="rules" width="600px">
  <standard-form-item label="节点名称" prop="CNAME" :span="12">
    <standard-input v-model="form.CNAME" placeholder="请输入节点名称" />
  </standard-form-item>
  <standard-form-item label="排序号" :span="12">
    <el-input-number v-model="form.CSEQ" :min="1" :max="999" controls-position="right" />
  </standard-form-item>
  <standard-form-item label="备注">
    <el-input v-model.trim="form.CREMARK" type="textarea" :rows="3" />
  </standard-form-item>
</standard-form>

标准半区 StandardHalfArea

双标签，默认插槽放半区内容。

<section class="page-body">
  <standard-half-area transparent :style="leftPanelStyle"><!-- 左 --></standard-half-area>
  <standard-splitter v-model="leftPercent" unit="percent" @drag-end="recalculateAll" />
  <standard-half-area right transparent><!-- 右 --></standard-half-area>
</section>

标准页面骨架 StandardPage

双标签，默认插槽放整页内容（筛选区/内容区/弹窗）。根节点自带 16px 内边距 + 视口高度 + 白底 + 隐藏溢出 + 纵向 flex。

<standard-page :client="isCilent">
  <standard-filterbar v-model="searchBar" @search="onSearch" />
  <standard-table ...><!-- 表格区 --></standard-table>
</standard-page>

标准分割条 StandardSplitter

单标签。拖拽改变左右框体宽度。

事件：@input（拖拽中实时）、@change（拖拽结束）、@drag-start / @drag-end（拖拽结束重算表格）。

标准表格 StandardTable（含 7 个子组件）

双标签。数据接口：table-data 表格数据、table-operation 操作列按钮；区域内容全部通过插槽内子组件声明。

主组件属性：

事件：@current-change（行选中）、@toggle-tree-expand（树形展开变化）、@selection-change（多选变化）、@menu-click（右键菜单点击）、@op-click（操作列按钮点击）。 对外方法（ref）：recalculate()、setAllTreeExpand(expanded)、clearSelection()、getSelection()、setCurrentRow(row)、exportData(options)。

子组件：

列宽/对齐约定（速查）：

用法示例：

<standard-table ref="mainTable" :table-data="tableData" :table-operation="tableOperation"
                :loading="loading" :show-update-time="false" :footer-method="summaryMethod">
  <standard-toolbar-left>
    <standard-button type="primary" icon="el-icon-plus" label="新增" @click="onAdd" />
  </standard-toolbar-left>
  <standard-toolbar-right show-adjustment>
    <standard-input v-model="keyword" placeholder="请输入关键字" @enter="onSearch" />
  </standard-toolbar-right>
  <standard-footer-left :text="footerText" />
  <standard-footer-right
    :current-page="pageParams.currentPage" :page-size="pageParams.pageSize"
    :page-sizes="[10, 20, 50, 100]" :total="pageParams.totalResult"
    @page-change="onPageChange"
  />
  <standard-column type="seq" title="序号" :width="60" :min-width="60" fixed="left" />
  <standard-column field="CITEM_NO" title="产品型号" :min-width="120" sortable />
  <standard-column field="CRESULT" title="检验结果" :width="100" :min-width="100" align="center">
    <template #default="{ row }">
      <el-tag v-if="row.CRESULT == 1" size="mini" type="success">合格</el-tag>
      <el-tag v-else size="mini" type="danger">不合格</el-tag>
    </template>
  </standard-column>
</standard-table>

树形模式（需 tree-config + row-config，节点列加 tree-node）：

treeConfig: { transform: true, rowField: 'id', parentField: 'parentId', trigger: 'row', indent: 20 },
rowConfig: { keyField: 'id' },   // 与 rowField 保持一致

标准页签 StandardTabs / StandardTabPane

双标签，卡片样式内聚（tabs 头部与内容区联通为同一张卡片）。

<standard-tabs v-model="rightActiveTab" lazy @tab-click="onRightTabClick">
  <standard-tab-pane label="检验项目明细" name="item">
    <standard-table ...><!-- 内容 --></standard-table>
  </standard-tab-pane>
  <standard-tab-pane label="检验记录" name="record"><!-- ... --></standard-tab-pane>
</standard-tabs>

标准树 StandardTree

单标签。顶部搜索栏 + 树主体 + 底部"全部展开/收起"按钮，卡片外观内置。

事件：@node-click / @node-expand / @node-collapse。 对外方法（ref）：setCurrentKey(key)（设置/取消选中）、filter(keyword)（过滤树）。

<standard-tree ref="configTree" v-model="treeData" node-key="id" :default-expanded-keys="[1]"
               transparent @node-click="handleNodeClick" />

数据格式（节点显示文本取 tree-props 的 label 字段，子节点放 tree-props 的 children 字段）：

treeData: [
  { id: 1, label: '首件检验', children: [
    { id: 11, label: '电压测试' },
    { id: 12, label: '外观检验' },
  ] },
  { id: 2, label: '巡检检验' },   // 叶子节点可不写 children
]

组件必接事件速查

必接事件清单：standard-filterbar 的 @search；standard-footer-right 的 @page-change；standard-dialog 的 @confirm；standard-splitter 的 @drag-end（联动页）；standard-tree 的 @node-click。

开发与构建

# 安装依赖
npm install

# 构建组件库（产物输出到 dist/）
npm run build

构建说明：

• 使用 @vue/cli-service 的 lib 模式打包，输出 dist/standard-ui.common.js（CommonJS）与 dist/standard-ui.umd.min.js（UMD，供 CDN）。
• 样式（scss）已内联进 JS 产物，使用方无需单独引入 css。
• vue 由构建工具自动 external；element-ui 除 StandardTabs 的 TabPane 子组件（import { TabPane } from 'element-ui'）外均通过全局注册的组件标签使用。src/index.js 会 import vxe-table（仅用于 install 时执行 VXETable.setup({ zIndex: 5000 })）。因此 element-ui、vxe-table 及其运行时依赖 @vxe-ui/core 的部分代码会打包进 dist 产物。

vxe-table 3.24 升级说明（使用方须知）

本包 peerDependencies 已由 ^3.8.0 提升为 ^3.24.0，请将使用方项目的 vxe-table 同步升级：

npm i vxe-table@^3.24.0

• 使用方式没有区别：import VXETable from 'vxe-table' + import 'vxe-table/lib/style.css' + Vue.use(VXETable) 的注册写法在 3.24 与 3.8 完全一致，无需改动；本包所有组件的 API（属性/事件/插槽）均无变化。
• StandardTable 用到的 vxe-table 能力全部兼容：z-index 属性、menu-config、tree-config、row-config、多选框、sortable、固定列、树形展开、右键菜单等在 3.24 均可用，包内代码已完成适配。
• ⚠️ vxe-table 3.24 的上游坑（必须知道）：vxe-table 3.24 的代码运行时依赖新拆分的 @vxe-ui/core 包，但其 package.json 未声明该依赖，直接安装 vxe-table@3.24.x 的项目在运行时/打包时会报 Cannot find module '@vxe-ui/core'。本包已在 dependencies 中声明 @vxe-ui/core ^3.4.24，随本包安装自动带上；若使用方项目还直接使用 vxe-table（且不依赖本包），需自行 npm i @vxe-ui/core@^3.4.24。
• 从 3.6/3.8 直接升级到 3.24 时，使用方直接使用 vxe-table 的地方需注意（不涉及本包组件）：
  • 纵向/横向虚拟滚动默认关闭（v3.7 起 scroll-y.enabled / scroll-x.enabled 默认 false），大列表渲染行数变多；如依赖虚拟滚动请自行 VXETable.setup({ scrollY: { enabled: true }, scrollX: { enabled: true } }) 开启。
  • tree-config 旧参数 line / hasChild / children 已更名为 showLine / hasChildField / childrenField（旧参数保留兼容，新代码建议直接使用新参数）。
  • vxe 内置图标 fixed / fixed-fill 更名为 fixed-left / fixed-left-fill（此项不向下兼容，仅在使用方直接用到 vxe 图标时受影响）。
  • 渲染器 menus / commands / formats 的注册由传函数改为传对象（旧方式保留兼容）。
  • 列宽拖拽手柄 DOM 类名 .vxe-resizable 更名为 .vxe-table--resizable-col-bar；右键菜单分组容器类名 .vxe-context-menu--option-wrapper 更名为 .vxe-table--context-menu-group-wrapper（v3.24 起）。仅影响直接对这些 DOM 类名写 CSS/选择器的使用方，本包内部样式与逻辑已同时兼容新旧类名。
• z-index 说明：本包 install 时执行 VXETable.setup({ zIndex: 5000 })，但由于 vxe-table 被打包进 dist 产物（未 external），该设置只作用于产物内的副本；使用方项目自身的 vxe-table 全局配置不受影响。若需要提升 vxe-table 弹层（右键菜单/tooltip）层级，请在使用方 main.js 中自行 VXETable.setup({ zIndex: 5000 })，或直接给 <standard-table> 传 z-index 属性（原样透传给 vxe-table）。vxe-table 3.24 全局默认 z-index 仍为 999，与 3.8 一致。
• 样式仍需自行引入：vxe-table/lib/style.css 照常由使用方引入，本包不内置 vxe-table 样式。
• Vue 2.6 兼容：vxe-table 3.24 未引入 @vue/composition-api，Vue 2.6 环境可直接使用（3.24 为 vxe-table 的 Vue 2 线最终版本，4.x 仅支持 Vue 3）。

发布到 npm

# 1. 确认版本号并构建
npm run build

# 2. 登录 npm（首次发布需要；无账号先到 https://www.npmjs.com 注册）
npm login

# 3. 发布（publishConfig.access 已设为 public）
npm publish

注意事项：

• 发布内容由 package.json 的 files: ["dist"] 控制，仅发布构建产物与 README，源码不入包。
• 包名已采用小写形式，符合 npm 公共源命名规范，可直接 npm publish 发布。
• 版本更新遵循 semver：npm version patch|minor|major 后再次 npm publish。