jtxa-ui 1.1.3 → 1.1.5

package/README.md

@@ -12,24 +12,30 @@
 
 ## 目录
 
-- [安装](#安装)
-- [快速上手](#快速上手)
-- [组件总览](#组件总览)
-- [组件详细文档](#组件详细文档)
-  - [Form 动态表单](#1-form-动态表单-jt-form)
-  - [JtUpload 分片上传](#2-jtupload-分片上传-jt-upload)
-  - [Echart 图表](#3-echart-图表-jt-chart)
-  - [SearchType 高级查询](#4-searchtype-高级查询-search-type)
-  - [ManageTreeTable 管理树表](#5-managetreetable-管理树表-manage-tree-table)
-  - [TableBase 基础表格](#6-tablebase-基础表格-table-base)
-  - [TableGroup 分组树表](#7-tablegroup-分组树表-table-group)
-  - [TableBigData 大数据表](#8-tablebigdata-大数据增量表-table-big-data)
-  - [TreeTable 虚拟树表](#9-treetable-虚拟树表-tree-table)
-- [共享表格属性 publicProps](#共享表格属性-publicprops)
-- [工具函数](#工具函数)
-- [已知问题与注意事项](#已知问题与注意事项)
-- [相关文档](#相关文档)
-- [开发](#开发)
+- [jtxa-ui](#jtxa-ui)
+  - [目录](#目录)
+  - [安装](#安装)
+  - [快速上手](#快速上手)
+    - [全局注册（推荐）](#全局注册推荐)
+    - [按需引入](#按需引入)
+  - [组件总览](#组件总览)
+  - [组件详细文档](#组件详细文档)
+    - [1. Form 动态表单（`jt-form`）](#1-form-动态表单jt-form)
+    - [2. JtUpload 分片上传（`jt-upload`）](#2-jtupload-分片上传jt-upload)
+    - [3. Echart 图表（`jt-chart`）](#3-echart-图表jt-chart)
+    - [4. SearchType 高级查询（`search-type`）](#4-searchtype-高级查询search-type)
+    - [5. ManageTreeTable 管理树表（`manage-tree-table`）](#5-managetreetable-管理树表manage-tree-table)
+    - [6. TableBase 基础表格（`table-base`）](#6-tablebase-基础表格table-base)
+    - [7. TableGroup 分组树表（`table-group`）](#7-tablegroup-分组树表table-group)
+    - [8. TableBigData 大数据增量表（`table-big-data`）](#8-tablebigdata-大数据增量表table-big-data)
+    - [9. TreeTable 虚拟树表（`tree-table`）](#9-treetable-虚拟树表tree-table)
+  - [共享表格属性 publicProps](#共享表格属性-publicprops)
+    - [usePublicAPI 暴露方法](#usepublicapi-暴露方法)
+  - [渲染器清单（cellRender / editRender）](#渲染器清单cellrender--editrender)
+  - [工具函数](#工具函数)
+  - [已知问题与注意事项](#已知问题与注意事项)
+  - [相关文档](#相关文档)
+  - [开发](#开发)
 
 ---
 
@@ -152,6 +158,22 @@ app.use(TreeTable)
 
 **Events**：`switchChange` · `focus` · `blur` · `casChange` · `cusBtn`
 
+**`rules` 字符串语法**：`rules` 为对象，`key` 是 `modelKey`，`value` 是规则字符串数组，由内置 `Validate`（`packages/form/validate.js`）转换为 Element Plus 规则：
+
+```js
+const rules = {
+  name:   ['required', 'phone'],    // 必填 + 手机号
+  age:    ['num'],                  // 必须是数字
+  email:  ['email'],                // 邮箱格式
+  code:   ['idCard'],               // 身份证
+  remark: ['range-2-10'],           // 长度 2~10（用 “-” 传参）
+  ename:  ['letters'],              // 仅英文字母
+  tags:   ['requireSelect'],        // 至少选一个（数组）
+}
+```
+
+内置校验类型：`required` · `requiredFocus` · `range-min-max` · `len-n` · `num` · `email` · `idCard` · `phone` · `letters` · `requireAll` · `requireSelect`。
+
 **Slots**：
 
 - `upload`：当字段 `type: 'upload'` 时，使用 `item.slotName`（默认 `upload`）具名插槽渲染上传区；
@@ -349,6 +371,24 @@ const conditions = searchTypeRef.value.getData()
 | `isLastLoad` | Boolean | `true` | 是否末次加载 |
 | `slotConfig` | Array | `[]` | 自定义插槽组件配置（传入业务子组件） |
 
+**`mode` 与面板组件映射**：`mode`（或 `pageMode`）决定渲染哪种版式，内部按值派发到 `mtt-panel-*` 子组件：
+
+| mode | 面板组件 | 版式形态 |
+| --- | --- | --- |
+| `0` | `jt-page-manager-tree-table` | 默认树表 |
+| `1` | `mtt-panel` | 左右看板 |
+| `2` | `mtt-panel-1` | 上下看板 |
+| `3` | `mtt-panel-2` | 展开形式看板 |
+| `5` | `mtt-panel-5` | 左侧 Tab + 右侧 tree-list |
+| `7` | `mtt-panel-7` | 左侧树 + 右侧普通清单 |
+| `8` | `mtt-panel-8` | 左侧 Tab + 右侧分组表格 |
+| `10` | `mtt-panel-10` | 左侧 Tab + 右侧 TreeTable |
+| `11` | `mtt-panel-11` | 左侧 Tab + 右侧 TreeTable（变体） |
+| `12` | `mtt-panel-12` | 左侧 Tab + 右侧 TreeTable（变体） |
+| `13` | `mtt-panel-13` | 左侧 Tab + 右侧 TreeTable（变体） |
+
+> `mode` 还可由 `config.radioData` 中某项 `style` 字段在运行时切换（见 `radioChange`）。
+
 **Events**：`getBaseParams`
 
 **Slots**：透传父级所有插槽；向面板透传 `#cusComp`。
@@ -621,6 +661,35 @@ VxeTable 基础封装：工具栏、表尾统计、虚拟滚动、单选 / 多
 
 ---
 
+## 渲染器清单（cellRender / editRender）
+
+表格列通过 `header[].cellRender` / `header[].editRender` 指定渲染器名称，对应 `packages/tables/hooks/cell-render/cell-render.js` 与 `edit-render/edit-render.js` 中 `VxeUI.renderer.add(...)` 的注册名。
+
+**单元格渲染器（cellRender）**
+
+| 名称 | 说明 |
+| --- | --- |
+| `TabsBtn` | 单元格内按钮组 |
+| `TabsCheckbox` | 单元格内复选框组 |
+| `TabsSwitch` | 单元格内开关 |
+| `Select` | 单元格内下拉（表单型，由 `CellForm` 承载） |
+| `Input` | 单元格内输入框（表单型） |
+| `Number` | 单元格内数字输入（表单型） |
+| `Rate` | 单元格内评分（表单型） |
+
+> `Select` / `Input` / `Number` / `Rate` 共用 `CellForm`，通过列配置 `props`（枚举 `enum`、功能码 `funcode`、占位 `placeholder`、最大值 `max` 等）区分形态。
+
+**编辑渲染器（editRender，双击进入编辑态时生效）**
+
+| 名称 | 说明 |
+| --- | --- |
+| `cascader` | 级联选择器 |
+| `cascader-select` | 级联 + 选择组合 |
+| `cus-select` | 自定义下拉 |
+| `cus-input` | 自定义输入 |
+
+---
+
 ## 工具函数
 
 随默认导出（`import jtui from 'jtxa-ui'`）一并暴露的工具方法：
@@ -647,11 +716,8 @@ VxeTable 基础封装：工具栏、表尾统计、虚拟滚动、单选 / 多
 
 ## 已知问题与注意事项
 
-1. **`package.json` 入口字段**：早期 `main` / `module` 指向不存在的 `jtxa-ui-lib.*`，现已修正为 `dist/jtxa-ui.umd.js` / `dist/jtxa-ui.es.js`，与 `exports` 及实际构建产物一致。
-2. **`echarts` 未在 `peerDependencies` 中**：构建时被 external 化，请确保消费方已安装 `echarts@^6`。
-3. **`manage-tree-table` 需局部引入**：它不参与 `app.use(jtui)` 的全局注册，使用前请按[快速上手](#按需引入)局部 `import`。
-4. **`App.vue` 导航含死项**：`examples/App.vue` 中 `menu` 有一项 `more-charts` 在 `cpms` 中不存在（点击会报错），仅影响演示站，不影响库本身。
-5. **示例文件名歧义**：`examples/pages/tree-table-redio.vue` 文件名像 `tree-table`，实际演示的是 `manage-tree-table`（`mode=1`）；`examples/pages/jt-table-ptbg.vue` 标签仍是 `<table-base>`（非 `jt-table-base`）。
+1. **`echarts` 未在 `peerDependencies` 中**：构建时被 external 化，请确保消费方已安装 `echarts@^6`。
+2. **`manage-tree-table` 需局部引入**：它不参与 `app.use(jtui)` 的全局注册，使用前请按[快速上手](#按需引入)局部 `import`。
 
 ---