@cimom-ui/standard-ui 1.1.9 → 1.1.12

package/README.md

@@ -19,7 +19,7 @@
 | StandardHalfArea | `<standard-half-area>` | 双标签 | 半区容器（left/right、transparent 模式） |
 | StandardPage | `<standard-page>` | 双标签 | 页面骨架（client 模式高度） |
 | StandardSplitter | `<standard-splitter>` | 单标签 | 左右分割条（px / percent） |
-| StandardTable + 子组件 | `<standard-table>` 及 7 个子组件 | 双标签 | 标准表格（基于 vxe-table） |
+| StandardTable + 子组件 | `<standard-table>` 及 8 个子组件 | 双标签 | 标准表格（基于 vxe-table） |
 | StandardTabs + TabPane | `<standard-tabs>` + `<standard-tab-pane>` | 双标签 | 标准页签（卡片样式内聚） |
 | StandardTree | `<standard-tree>` | 单标签 | 标准树（搜索 + 节点 + 底部按钮） |
 
@@ -87,7 +87,8 @@ export default {
 
 // 子组件挂载于主组件静态属性
 // 'standard-column': StandardTable.Column,
-// 'standard-toolbar-left': StandardTable.ToolbarLeft
+// 'standard-toolbar-left': StandardTable.ToolbarLeft,
+// 'standard-toolbar-query': StandardTable.ToolbarQuery
 ```
 
 ## 组件 API
@@ -345,7 +346,7 @@ searchBar: {
 
 **事件**：`@input`（拖拽中实时）、`@change`（拖拽结束）、`@drag-start` / `@drag-end`（拖拽结束重算表格）。
 
-### 标准表格 StandardTable（含 7 个子组件）
+### 标准表格 StandardTable（含 8 个子组件）
 
 双标签。数据接口：`table-data` 表格数据、`table-operation` 操作列按钮；区域内容全部通过插槽内子组件声明。
 
@@ -372,13 +373,44 @@ searchBar: {
 | 子组件 | 说明 |
 | --- | --- |
 | `<standard-toolbar-left :buttons>` | 工具栏左区；`buttons: [{ type, icon, text, title, method, show }]`，method 支持函数或方法名字符串；也支持默认插槽 |
-| `<standard-toolbar-right show-adjustment>` | 工具栏右区（插槽内容自动靠右） |
+| `<standard-toolbar-right show-adjustment>` | 工具栏右区（插槽内容自动靠右）；其内可放 `<standard-toolbar-query>` |
+| `<standard-toolbar-query>` | 右侧查询区，只能放在 `standard-toolbar-right` 内：输入框、查询、导出 |
 | `<standard-toolbar-empty>` | 工具栏空占位（主组件内置，可省略） |
 | `<standard-column type/field/title/width/min-width/fixed/align/sortable/show-overflow/resizable/tree-node/formatter>` | 声明列；支持作用域插槽 `#default="{ row }"` |
 | `<standard-footer-left :text>` | 底部栏左侧文本 |
 | `<standard-footer-right :current-page :page-size :page-sizes :total :layout @page-change>` | 分页；`page-change` 参数 `{ currentPage, pageSize, type }` |
 | `<standard-footer-empty>` | 底部空占位（主组件内置，可省略） |
 
+**standard-toolbar-query**（单标签）：只能作为 `<standard-toolbar-right>` 的子组件。放在其它位置时不渲染，并输出 `[StandardToolbarQuery]` 警告。内部从左到右固定为输入框、查询按钮、导出按钮，间距与工具栏其它按钮同为 6px。输入框回车与点击查询等效。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| value | String/Number | `''` | v-model 绑定的查询关键字 |
+| placeholder | String | `'请输入关键字'` | 输入框占位文案 |
+| query-method | Function/String | `''` | 查询方法。函数直接调用；字符串沿父组件链查找同名方法。入参为当前关键字 |
+| export-method | Function/String | `''` | 导出方法，约定同 `query-method` |
+| loading | Boolean | `false` | 查询按钮加载态 |
+
+**事件**：`@input`（v-model）、`@query`、`@export`，后两个参数均为当前关键字。传入 `query-method` / `export-method` 时仍会派发对应事件。
+
+```html
+<standard-toolbar-right>
+  <standard-toolbar-query
+    v-model="keyword"
+    placeholder="请输入编码/名称"
+    query-method="onQuery"
+    export-method="onExport"
+    :loading="loading"
+  />
+</standard-toolbar-right>
+```
+
+```js
+// onQuery(keyword)、onExport(keyword) 由组件传入当前关键字
+onQuery(keyword) { /* 按关键字筛选，结束后 this.$refs.mainTable.recalculate() */ },
+onExport(keyword) { /* 导出当前筛选结果 */ }
+```
+
 **列宽/对齐约定（速查）**：
 
 | 列类型 | 建议列宽 | align |