sksmas-plugin-el-vue3

sksmas-plugin-el-vue3

用于 Maximo（玄冥资产管理系统）数据接口的 element-plus 扩展组件库（Vue3 版），由 sks-plugin-el-erp-vue3 派生并全量改名为 SksMas*。

• 版本：3.0.0
• 定位：Maximo 数据接口（REST / JSON）前端 UI 组件库
• 宿主框架：Vue 3 + Element Plus（若依 RuoYi-Vue3 适配版 sks-eam-vue3-typescript）
• 相对 sks-plugin-el-erp-vue3 的差异：
  1. 全部组件、工具函数、文件名由 Sks/sks 改名为 SksMas/sksMas/sksmas
  2. 新增 Maximo 日期时间支持：lib/sksmas-date.js + SksMasDate / SksMasTime / SksMasDateTime，timeZone 默认 GMT+8

依赖说明

peerDependencies（由宿主项目提供）：

dependencies：

接入方式（源码级 alias 引入）

本库不发布 npm 包，以独立仓库形式被宿主项目通过 vite alias 源码级编译（当前宿主：e:/gitwork/sks-maximo-solon/sks-eam-vue3-typescript）。

vite.config.ts 配置

import path from 'path'

export default {
  resolve: {
    alias: [
      // 插件库源码位于宿主项目外，裸导入无法向上解析到宿主 node_modules，
      // 需显式指向宿主依赖
      { find: 'mathjs', replacement: path.resolve(__dirname, './node_modules/mathjs') },
      { find: 'clipboard', replacement: path.resolve(__dirname, './node_modules/clipboard') },
      { find: 'sortablejs', replacement: path.resolve(__dirname, './node_modules/sortablejs') },
      // 子模块源码引入（正则需排在主入口之前）
      { find: /^sksmas-plugin-el-vue3\/lib\/(.*)/, replacement: 'E:/gitwork/sksmas-plugin-el-vue3/lib/$1' },
      // 主入口
      { find: 'sksmas-plugin-el-vue3', replacement: 'E:/gitwork/sksmas-plugin-el-vue3/index.js' }
    ]
  },
  server: {
    fs: {
      // 允许访问项目外的插件库源码
      allow: [path.resolve(__dirname, './'), 'E:/gitwork/sksmas-plugin-el-vue3']
    }
  }
}

注册插件

// main.ts（在 ElementPlus 之后、mount 之前）
import request, { download } from '@/utils/request'
import SksMasPluginElVue3 from 'sksmas-plugin-el-vue3'

app.use(SksMasPluginElVue3, { request })

install(app, opts) 会：

1. 全局注册全部组件（app.component(component.name, component)）
2. 挂载全局属性到 app.config.globalProperties：
   • sksMasUtils — 常用工具函数集合
   • sksMasDateUtils — Maximo 日期时间工具集合（lib/sksmas-date.js）
   • sksMasConfig — 配置与默认 request
   • resetForm / clearFormValidate — 表单重置
   • $SKSMAS_PLUGIN_EL_ERP — { request }（宿主传入的 axios 实例）

页面命名导入

import { newSksMasTable, newSksMasDialogInfo, newTableColumn, newTableColumnList } from 'sksmas-plugin-el-vue3'
import { initListVueVirtualUUID, mergeFromObject } from 'sksmas-plugin-el-vue3/lib/core'

主入口同时提供 default 导出（含 install 与全部组件）与命名导出（工具函数 + 组件）。

组件列表

Maximo 日期时间（核心新增能力）

Maximo 三种日期类型与 JSON 值格式

组件用法

<!-- 用法一：v-model -->
<SksMasDate v-model="form.planDate" />
<SksMasTime v-model="form.startTime" />
<SksMasDateTime v-model="form.createdDate" />

<!-- 用法二：formData + propName（值直接写入表单对象，并支持 clearValidate 联动） -->
<el-form ref="form" :model="form" :rules="rules">
  <el-form-item prop="planDate" label="计划日期">
    <SksMasDate :formData="form" propName="planDate" @clearValidate="clearFormValidate" />
  </el-form-item>
  <el-form-item prop="createdDate" label="创建时间">
    <SksMasDateTime :formData="form" propName="createdDate"
                    timeZone="GMT+8" millis
                    @clearValidate="clearFormValidate" />
  </el-form-item>
</el-form>

<!-- 日期范围：输出到两个字段；maxType="DATETIME" 时起点 00:00:00、终点 23:59:59 -->
<SksMasDateYmdRange :formData="form"
                    startTimePropName="startDate"
                    endTimePropName="endDate"
                    maxType="DATETIME" />

组件 props：

lib/sksmas-date.js 工具方法

import { toMaxDateTime, parseTimeZoneOffset, MAX_TYPE } from 'sksmas-plugin-el-vue3/lib/sksmas-date'
// 或使用全局属性
this.sksMasDateUtils.toMaxDateTime(Date.now(), { timeZone: 'GMT+8' })
// => '2026-05-16T05:48:25+08:00'

所有换算均通过 UTC 计算，结果与浏览器本地时区无关。

lib 工具模块

Vue2 → Vue3 移植要点

移植时统一执行的语法转换（新增/修改组件时请保持一致）：

SksMasTable 扩展能力（本次移植新增）

• 表头 QBE 过滤行：headerFilterEnable: true 时每列表头下方显示过滤输入框，回车/清除触发 qbeFilter 事件（值存于 mainTable.qbe[prop]）
• 列排序：@sort-change → sortChange 事件 {column, prop, order}
• 显示属性名：showTablePropName 开关在表头以 tag 展示属性名（prop）
• 事件：refresh、sortChange、qbeFilter

目录结构

sksmas-plugin-el-vue3/
├── index.js               # 主入口：install + default 导出 + 命名导出
├── lib/
│   ├── core.js            # 核心工具
│   ├── sksmas-date.js     # Maximo 日期时间工具（DATE/TIME/DATETIME）
│   ├── sksmas-model-utils.js # 模型工厂
│   ├── ui/                # 组件（每组件一个目录 + index.js 子入口）
│   │   ├── sksmas-table/src/SksMasTable.vue
│   │   ├── sksmas-date/src/main.vue            # SksMasDate
│   │   ├── sksmas-date/src/sksmas-date-core.js # 三个日期组件共享逻辑
│   │   ├── sksmas-time/src/main.vue            # SksMasTime
│   │   ├── sksmas-date-time/src/main.vue       # SksMasDateTime
│   │   ├── sksmas-date-ymd-range/index.vue     # SksMasDateYmdRange
│   │   └── ...
│   └── style/sksmas-main.css
├── tools/                 # 自检脚本（不参与打包）
├── rollup.test.config.mjs # 编译验证配置
├── docs/                  # vuepress 文档
└── package.json           # name=sksmas-plugin-el-vue3 version=3.0.0

自检（npm test）

npm install          # 首次需要安装依赖
npm test             # 一键自检:7 项全部通过

npm test 依次执行（可用 npm run test:date / npm run test:build 单独跑）：

编译验证使用 rollup 而非 vite：vite 依赖 esbuild，而 esbuild 需要 spawn 子进程，在受限环境中会被拒绝。

注意事项

1. 插件库源码在宿主项目之外，vite 必须配置 server.fs.allow，否则开发服务器拒绝加载
2. 插件库内部的裸导入（mathjs/clipboard/sortablejs）需在宿主 alias 中显式指向宿主 node_modules
3. 子入口 lib/ui/*/index.js 中导入 .vue 文件必须带 .vue 扩展名（Vite 不做无扩展名解析）
4. 组件 name 必须保留（全局注册与 keep-alive 依赖），如 SksMasTable、SksMasRightToolbar

附：原 Vue2 版发布流程（存档）

以下内容适用于原 Vue2 版 sks-plugin-el-erp 的 npm 发布，Vue3 版当前采用源码级 alias 引入，无需发布。

# 发布前配置
npm login --registry=https://registry.npmjs.org

# 发布正式版
npm publish

# 发布测试版（package.json version 如 1.0.4-beta.2）
npm publish --tag beta1 --registry=https://registry.npmjs.org

# 安装测试版
npm install sks-plugin-el-erp@beta1

撤销发布包千万不要使用：即使撤销了发布的包，发包时也不能再和被撤销的包名称与版本重复。

scss 编译成 css

将 package-sass221102.json 中的依赖复制到 package.json 安装后执行：

npm run css:build