@cimom-ui/standard-ui 1.1.13 → 1.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,32 +1,10 @@
1
1
  # @cimom-ui/standard-ui
2
2
 
3
- 标准组件库:基于 **Vue 2.6 + Element UI 2.x + vxe-table 3.24.x** 的通用业务组件封装,供其它项目复用。
3
+ 标准组件库:基于 **Vue 2.6 + Element UI 2.x + vxe-table 3.24.x** 的通用业务组件,供其它项目复用。
4
4
 
5
- > 共 **14 个顶层组件**。
5
+ 共 **14 个顶层组件**。`StandardForm`、`StandardFilterbar`、`StandardTable`、`StandardTabs` 会连带注册子组件。`StandardAdvancedQuery` 只给筛选栏的「高级查询」使用,不单独暴露。
6
6
 
7
- ## 组件总览
8
-
9
- | 组件 | 标签 | 形态 | 说明 |
10
- | --- | --- | --- | --- |
11
- | StandardButton | `<standard-button>` | 单/双标签 | 标准按钮(固定 mini,透传 el-button) |
12
- | StandardInput | `<standard-input>` | 单/双标签 | 标准输入框(自动 trim、可仅数字) |
13
- | StandardSelect | `<standard-select>` | 单标签 | 标准下拉(单选/多选、远程搜索) |
14
- | StandardTimePick | `<standard-time-pick>` | 单标签 | 标准时间选择(年月日 / 年月日时分秒) |
15
- | StandardDialog | `<standard-dialog>` | 双标签 | 标准弹窗(confirm 不自动关闭) |
16
- | StandardContainer | `<standard-container>` | 双标签 | 标准布局容器(方向/百分比占位) |
17
- | StandardFilterbar | `<standard-filterbar>` | 单标签 | 标准筛选栏(主/次条件、导出、高级查询) |
18
- | StandardForm + Item | `<standard-form>` + `<standard-form-item>` | 双标签 | 标准表单(label 宽度自动计算、span 栅格) |
19
- | StandardHalfArea | `<standard-half-area>` | 双标签 | 半区容器(left/right、transparent 模式) |
20
- | StandardPage | `<standard-page>` | 双标签 | 页面骨架(client 模式高度) |
21
- | StandardSplitter | `<standard-splitter>` | 单标签 | 左右分割条(px / percent) |
22
- | StandardTable + 子组件 | `<standard-table>` 及 8 个子组件 | 双标签 | 标准表格(基于 vxe-table) |
23
- | StandardTabs + TabPane | `<standard-tabs>` + `<standard-tab-pane>` | 双标签 | 标准页签(卡片样式内聚) |
24
- | StandardTree | `<standard-tree>` | 单标签 | 标准树(搜索 + 节点 + 底部按钮) |
25
-
26
- > `StandardAdvancedQuery` 为 `StandardFilterbar` 内部依赖,随包发布但不单独暴露。
27
- >
28
- > 命名约定:属性表列出的属性名为**模板传参写法(kebab-case)**,与代码 prop(camelCase)一一对应
29
- > (如 `number-only` ↔ `numberOnly`、`default-expanded-keys` ↔ `defaultExpandedKeys`);事件名统一 kebab-case。
7
+ 属性表里的名字是模板写法(kebab-case),与代码里的 camelCase 一一对应,例如 `number-only` 对应 `numberOnly`。事件名也是 kebab-case。
30
8
 
31
9
  ## 安装
32
10
 
@@ -34,12 +12,16 @@
34
12
  npm i @cimom-ui/standard-ui
35
13
  ```
36
14
 
37
- ### 前置依赖(peerDependencies)
15
+ 使用方必须先安装并注册这些依赖:
38
16
 
39
- 使用方项目必须已安装并全局注册以下库:
17
+ | 包 | 版本要求 | 说明 |
18
+ | --- | --- | --- |
19
+ | vue | ^2.6.0 | |
20
+ | element-ui | ^2.15.0 | 全部组件依赖,并引入 `element-ui/lib/theme-chalk/index.css` |
21
+ | vxe-table | ^3.24.0 | 仅 `StandardTable` 依赖,并引入 `vxe-table/lib/style.css` |
22
+ | @vxe-ui/core | ^3.4.24 | vxe-table 3.24 的运行时依赖。本包 `dependencies` 已声明,随本包安装 |
40
23
 
41
24
  ```js
42
- // main.js
43
25
  import Vue from 'vue'
44
26
  import ElementUI from 'element-ui'
45
27
  import 'element-ui/lib/theme-chalk/index.css'
@@ -50,524 +32,948 @@ Vue.use(ElementUI)
50
32
  Vue.use(VXETable)
51
33
  ```
52
34
 
53
- | 包 | 版本要求 | 备注 |
54
- | --- | --- | --- |
55
- | vue | ^2.6.0 | |
56
- | element-ui | ^2.15.0 | 全部组件依赖 |
57
- | vxe-table | ^3.24.0 | 仅 StandardTable 依赖 |
58
- | @vxe-ui/core | ^3.4.24 | vxe-table 3.24 运行时依赖(本包 dependencies 已声明,随包自动安装,无需手动安装) |
35
+ 组件自身的样式已经打进 JS 产物,使用方不用再引一份组件 css。vxe-table 的样式仍由使用方引入。
59
36
 
60
- ## 注册方式
37
+ ## 注册方法
61
38
 
62
39
  ### 全局注册(推荐)
63
40
 
64
- 在入口统一注册一次,页面模板直接使用标签,**业务页面内无需 import**:
41
+ 入口注册一次后,页面直接写标签,不用再 import。
65
42
 
66
43
  ```js
67
44
  // src/main.js
68
- import StandardComponents from '@cimom-ui/standard-ui';
69
- Vue.use(StandardComponents);
45
+ import StandardComponents from '@cimom-ui/standard-ui'
46
+ import axios from '@/util/api.request'
47
+
48
+ Vue.use(StandardComponents, {
49
+ // 模块编码,和页面编码、表格编码一起定位表头配置
50
+ moduleCode: process.env.VUE_APP_MODULE_CODE,
51
+ // 业务项目自己的请求方法。接口路径固定,IP 和端口来自该方法的 baseURL
52
+ request: (config) => axios.request(config)
53
+ })
70
54
  ```
71
55
 
72
- ### 局部注册(按需)
56
+ `Vue.use` 会注册全部顶层组件,并连带注册这些子组件:
73
57
 
74
- ```js
75
- // 业务页面
76
- import { StandardTable, StandardButton } from '@/components';
58
+ | 父组件 | 一并注册的标签 |
59
+ | --- | --- |
60
+ | StandardFilterbar | `<standard-filterbar-item>` |
61
+ | StandardForm | `<standard-form-item>` |
62
+ | StandardTable | `<standard-column>`、`<standard-toolbar-left>`、`<standard-toolbar-right>`、`<standard-toolbar-query>`、`<standard-toolbar-empty>`、`<standard-footer-left>`、`<standard-footer-right>`、`<standard-footer-empty>` |
63
+ | StandardTabs | `<standard-tab-pane>` |
64
+
65
+ ### 局部注册
77
66
 
78
- // npm 包(lib 构建产物仅保留默认导出,组件挂载为默认导出对象的属性)
79
- import StandardComponents from '@cimom-ui/standard-ui';
67
+ lib 构建产物只保留默认导出,组件挂在默认导出对象上。子组件挂在父组件的静态属性上。
68
+
69
+ ```js
70
+ import StandardComponents from '@cimom-ui/standard-ui'
80
71
 
81
72
  export default {
82
73
  components: {
83
74
  'standard-table': StandardComponents.StandardTable,
84
- 'standard-button': StandardComponents.StandardButton
75
+ 'standard-column': StandardComponents.StandardTable.Column,
76
+ 'standard-toolbar-left': StandardComponents.StandardTable.ToolbarLeft,
77
+ 'standard-toolbar-right': StandardComponents.StandardTable.ToolbarRight,
78
+ 'standard-toolbar-query': StandardComponents.StandardTable.ToolbarQuery,
79
+ 'standard-footer-right': StandardComponents.StandardTable.FooterRight,
80
+ 'standard-filterbar': StandardComponents.StandardFilterbar,
81
+ 'standard-filterbar-item': StandardComponents.StandardFilterbar.Item,
82
+ 'standard-form': StandardComponents.StandardForm,
83
+ 'standard-form-item': StandardComponents.StandardForm.Item,
84
+ 'standard-tabs': StandardComponents.StandardTabs,
85
+ 'standard-tab-pane': StandardComponents.StandardTabs.TabPane
85
86
  }
86
87
  }
87
-
88
- // 子组件挂载于主组件静态属性
89
- // 'standard-column': StandardTable.Column,
90
- // 'standard-toolbar-left': StandardTable.ToolbarLeft,
91
- // 'standard-toolbar-query': StandardTable.ToolbarQuery
92
88
  ```
93
89
 
94
- ## 组件 API
90
+ 局部注册不会走库的 `install`,表头配置的 `moduleCode` 和 `request` 不会自动注入。需要「调整」列配置持久化时,使用全局注册。
95
91
 
96
- ### 标准按钮 StandardButton
92
+ ## 注意事项
97
93
 
98
- 支持**单标签**(`label` prop)与**双标签**(默认插槽文案,优先于 `label`);内部固定 `size="mini"`,其余属性/事件透传 `el-button`。
94
+ - 先 `Vue.use(ElementUI)`、`Vue.use(VXETable)`,再注册本库。按钮、输入框、下拉、时间选择内部固定 `size="mini"`,页面传 `size` 不会改掉。
95
+ - 全局注册请带上 `moduleCode` 和 `request`。表格「调整」会按「登录用户 + 模块 + 页面 + 表格」读写表头配置,接口路径固定为 `/api/Migration/UserTableColumn/GetConfig`、`SaveConfig`、`ResetConfig`。没传 `request` 时不访问服务端。同一页面里每个表格的 `table-code` 必须唯一;不传时用组件 `ref`,`ref` 也没有则不读写配置。`page-code` 不传时用当前路由 `name`,没有 `name` 时用去掉查询参数的 `path`。
96
+ - `<standard-filterbar>` 必须接 `@search`,否则校验失败、整块不渲染,并在控制台输出 `[StandardFilterbar]` 错误。筛选值写在传入对象的属性上,运行中不要整体替换 `searchBar` 或 `searchVariable`。
97
+ - 筛选栏默认插槽里只认 `<standard-filterbar-item>`。插槽项排在 `searchCondition` 前面,一个插槽项算一条条件。首行放不下的进「更多」或「高级查询」。`isMain` 可以写在配置里,不再决定谁在首行。
98
+ - `<standard-dialog>` 的 `@confirm` 不关闭弹窗,业务成功后再改 `v-model`。点击遮罩默认不关闭。标题栏默认可拖拽,再次打开回到居中。
99
+ - `<standard-toolbar-query>` 只能放在 `<standard-toolbar-right>` 里面。放错位置不渲染,并 `console.warn`。右上角「调整」由 `<standard-table show-adjustment>` 控制,默认显示;写在 `standard-toolbar-right` 上不生效。
100
+ - `<standard-form-item>` 必须放在 `<standard-form>` 里,`:span` 用数字绑定(`:span="12"`)。字符串 `span="12"` 不会按栅格计算。
101
+ - 树形表格同时传 `tree-config` 和 `row-config`。节点列加 `tree-node`。`row-config.keyField` 与 `tree-config.rowField` 用同一个字段。
102
+ - 页面根节点用 `<standard-page>`。左右分栏加 `vertical`。拖完分割条后对两侧表格调用 `recalculate()`。
103
+ - 弹窗里的表格要给明确高度(例如 `style="height: 420px"`)。表格位于 `el-dialog` 内、右键菜单被挡住时,给表格传 `z-index`(大于弹窗层级,如 `3000`),或在使用方执行 `VXETable.setup({ zIndex: 5000 })`。本库 `install` 里的 `zIndex: 5000` 只作用于打进产物的那份 vxe-table。
104
+
105
+ ## 组件总览
106
+
107
+ | 组件 | 标签 | 形态 | 说明 |
108
+ | --- | --- | --- | --- |
109
+ | StandardButton | `<standard-button>` | 单/双标签 | 标准按钮,固定 mini,其余透传 el-button |
110
+ | StandardInput | `<standard-input>` | 单/双标签 | 标准输入框,自动 trim,可仅数字 |
111
+ | StandardSelect | `<standard-select>` | 单标签 | 标准下拉,单选/多选、远程搜索 |
112
+ | StandardTimePick | `<standard-time-pick>` | 单标签 | 标准时间选择,年月日或年月日时分秒 |
113
+ | StandardDialog | `<standard-dialog>` | 双标签 | 标准弹窗,确定不自动关闭,可拖拽 |
114
+ | StandardContainer | `<standard-container>` | 双标签 | 布局容器,只排方向和尺寸 |
115
+ | StandardFilterbar | `<standard-filterbar>` | 单/双标签 | 筛选栏。子组件 `<standard-filterbar-item>` |
116
+ | StandardForm | `<standard-form>` | 双标签 | 标准表单。子组件 `<standard-form-item>` |
117
+ | StandardHalfArea | `<standard-half-area>` | 双标签 | 半区,left / right,可透明 |
118
+ | StandardPage | `<standard-page>` | 双标签 | 页面骨架 |
119
+ | StandardSplitter | `<standard-splitter>` | 单标签 | 左右分割条,px 或 percent |
120
+ | StandardTable | `<standard-table>` | 双标签 | 标准表格。8 个子组件,见下文 |
121
+ | StandardTabs | `<standard-tabs>` | 双标签 | 标准页签。子组件 `<standard-tab-pane>` |
122
+ | StandardTree | `<standard-tree>` | 单标签 | 标准树,搜索、节点、底部展开收起 |
123
+
124
+ ## 组件说明
125
+
126
+ ### StandardButton 标准按钮
127
+
128
+ 单标签用 `label`,双标签用默认插槽。插槽有内容时优先于 `label`。内部固定 `size="mini"`。`loading`、`disabled`、`@click` 等透传 `el-button`。
99
129
 
100
130
  | 属性 | 类型 | 默认值 | 说明 |
101
131
  | --- | --- | --- | --- |
102
132
  | label | String | `''` | 按钮文案 |
103
- | icon | String | `''` | 图标类名(如 `el-icon-upload2`) |
104
- | type | String | `''` | `primary / success / warning / danger / info / text` |
133
+ | icon | String | `''` | 图标类名,如 `el-icon-search` |
134
+ | type | String | `''` | `primary` / `success` / `warning` / `danger` / `info` / `text` |
135
+
136
+ **插槽**:默认插槽,按钮文案。
105
137
 
106
138
  ```html
107
- <standard-button label="查询" type="primary" icon="el-icon-search"
108
- :loading="loading" @click="onSearch" />
109
- <standard-button label="导出" icon="el-icon-upload2" @click="onExport" />
139
+ <standard-button label="查询" type="primary" icon="el-icon-search" :loading="loading" @click="onSearch" />
110
140
  <standard-button type="danger" @click="onDelete">删除</standard-button>
111
141
  ```
112
142
 
113
- ### 标准输入框 StandardInput
143
+ ### StandardInput 标准输入框
114
144
 
115
- 支持**单标签**与**双标签**(默认插槽内容显示为输入框右侧附加内容,常用于单位);内部固定 `size="mini"`、可清空、自动 trim。
145
+ `v-model` 绑值,输入时自动 trim。内部固定 `size="mini"`、可清空,宽度 175px。`class`、`disabled`、`@focus`、`@blur`、`@clear` 等透传。
116
146
 
117
147
  | 属性 | 类型 | 默认值 | 说明 |
118
148
  | --- | --- | --- | --- |
119
- | value | String/Number | `''` | v-model 绑定值 |
149
+ | value | String / Number | `''` | `v-model` |
120
150
  | placeholder | String | `'请输入'` | 占位文案 |
121
- | number-only | Boolean | `false` | 仅允许输入数字(0-9,非数字自动过滤) |
151
+ | number-only | Boolean | `false` | 只保留 0-9 |
152
+
153
+ **事件**:`@input`(v-model)、`@enter`(回车)。其余透传。
122
154
 
123
- **事件**:`@enter`(回车);其余(focus/blur/clear 等)透传。
124
- **插槽**:默认插槽 → append(右侧附加);具名 `prepend` / `prefix` / `suffix`。
155
+ **插槽**:
156
+
157
+ | 插槽 | 说明 |
158
+ | --- | --- |
159
+ | 默认插槽 | 输入框右侧附加内容(el-input 的 append),常用于单位 |
160
+ | prepend | 左侧附加 |
161
+ | prefix | 前缀图标位 |
162
+ | suffix | 后缀图标位 |
125
163
 
126
164
  ```html
127
165
  <standard-input v-model="keyword" placeholder="请输入关键字" @enter="onSearch" />
128
166
  <standard-input v-model="form.qty" number-only>个</standard-input>
129
167
  ```
130
168
 
131
- ### 标准下拉 StandardSelect
169
+ ### StandardSelect 标准下拉
132
170
 
133
- 单选绑定任意值;`multiple` 多选时绑定值必须为数组。内部固定 `size="mini"`、可清空、可筛选;远程模式自动开启 `filterable` / `reserve-keyword`。
171
+ 单选绑定任意值。`multiple` 时绑定值必须是数组,组件会兜底成 `[]`。内部固定 `size="mini"`、可清空,宽度 175px。远程模式强制 `filterable` 和 `reserve-keyword`。
134
172
 
135
173
  | 属性 | 类型 | 默认值 | 说明 |
136
174
  | --- | --- | --- | --- |
137
- | value | String/Number/Array | `''` | v-model 绑定值 |
138
- | options | Array | `[]` | 静态选项(`[{label,value}]` 或原始对象数组) |
139
- | option-props | Object | `{label:'label',value:'value'}` | 选项字段映射 |
140
- | remote | String/Function | `''` | 远程搜索方法(函数或父组件方法名) |
141
- | multiple | Boolean | `false` | 多选模式 |
142
- | filterable | Boolean | `true` | 可筛选(远程模式强制开启) |
175
+ | value | String / Number / Array | `''` | `v-model` |
176
+ | options | Array | `[]` | 静态选项。`[{ label, value }]`,或配 `option-props` 的对象数组,也接受 `['A','B']` |
177
+ | option-props | Object | `{ label: 'label', value: 'value' }` | 选项字段映射 |
178
+ | remote | String / Function | `''` | 远程方法。函数直接调用;字符串沿父组件链找同名方法。入参为关键字 |
179
+ | multiple | Boolean | `false` | 多选 |
180
+ | filterable | Boolean | `true` | 可筛选。远程模式强制开启 |
143
181
  | clearable | Boolean | `true` | 可清空 |
144
182
  | disabled | Boolean | `false` | 禁用 |
145
183
  | placeholder | String | `'请选择'` | 占位文案 |
146
184
 
147
- **事件**:`@change` / `@visible-change`,其余透传 `el-select`。
148
- **远程约定**:remote 方法返回 Promise;返回值支持数组或接口响应结构(自动提取 `Datas`);组件自动防抖 300ms、管理 loading、首次挂载与下拉展开(无数据)时自动拉取。
185
+ **事件**:`@input`、`@change`、`@visible-change`。其余透传 `el-select`。
186
+
187
+ **插槽**:默认插槽,写在自动生成的 `el-option` 之后,可追加选项。
188
+
189
+ 远程方法返回 Promise。返回值可以是数组,或带 `Datas` / `data` / `data.Datas` / `list` 的响应。组件防抖 300ms,自己管 loading,首次挂载以及下拉展开且没有数据时会拉取。
149
190
 
150
191
  ```html
151
192
  <standard-select v-model="form.type" :options="typeOptions" />
152
193
  <standard-select v-model="form.types" multiple :options="typeOptions" />
153
- <standard-select v-model="form.cmoLot" remote="remoteWorkCmo"
154
- :option-props="{ label: 'CMO_LOT', value: 'CMO_LOT' }"
155
- placeholder="请选择工单编号" />
194
+ <standard-select
195
+ v-model="form.deptId"
196
+ remote="remoteDeptList"
197
+ :option-props="{ label: 'DEPT_NAME', value: 'DEPT_ID' }"
198
+ placeholder="请选择部门"
199
+ />
156
200
  ```
157
201
 
158
- ### 标准时间选择 StandardTimePick
202
+ ### StandardTimePick 标准时间选择
159
203
 
160
- `type="date"`(默认,年月日)/ `type="datetime"`(年月日时分秒);内部固定 `size="mini"`、可清空、弹出面板右对齐。
204
+ `type` 只认 `date`(默认,年月日)和 `datetime`(年月日时分秒)。内部固定 `size="mini"`、可清空、弹出面板右对齐,宽度 175px。
161
205
 
162
206
  | 属性 | 类型 | 默认值 | 说明 |
163
207
  | --- | --- | --- | --- |
164
- | value | String/Date/Array | `''` | v-model 绑定值 |
208
+ | value | String / Date / Array | `''` | `v-model` |
165
209
  | type | String | `'date'` | `date` / `datetime` |
166
- | value-format | String | `''` | 未传按 type 匹配 `yyyy-MM-dd` / `yyyy-MM-dd HH:mm:ss` |
167
- | placeholder | String | `''` | 未传按 type 匹配"请选择日期 / 请选择时间" |
210
+ | value-format | String | `''` | 不传时按类型用 `yyyy-MM-dd` 或 `yyyy-MM-dd HH:mm:ss` |
211
+ | placeholder | String | `''` | 不传时为「请选择日期」或「请选择时间」 |
168
212
  | clearable | Boolean | `true` | 可清空 |
169
213
  | disabled | Boolean | `false` | 禁用 |
170
- | picker-options | Object | `null` | 日期面板配置(disabledDate 等) |
214
+ | picker-options | Object | `null` | 同 el-date-picker 的 `picker-options` |
215
+
216
+ **事件**:`@input`。其余透传。无插槽。
171
217
 
172
218
  ```html
173
219
  <standard-time-pick v-model="form.checkDate" />
174
220
  <standard-time-pick v-model="form.checkTime" type="datetime" />
175
- <standard-time-pick v-model="form.date" :picker-options="pickerOptions" />
176
221
  ```
177
222
 
178
- ### 标准弹窗 StandardDialog
223
+ ### StandardDialog 标准弹窗
179
224
 
180
- 双标签,默认插槽放弹窗内容。
225
+ 双标签。`v-model` 控制显隐。宽度随内容撑开,最小 300px,最宽 80vw;最高 80vh,超出后内容区内部滚动。底部按钮固定为「取消」「确定」,都是 mini。
181
226
 
182
227
  | 属性 | 类型 | 默认值 | 说明 |
183
228
  | --- | --- | --- | --- |
184
- | visible | Boolean | `false` | v-model 控制显隐 |
185
- | title | String | `''` | 弹窗标题 |
186
- | show-cancel | Boolean | `true` | 显示"取消"按钮 |
187
- | show-confirm | Boolean | `true` | 显示"确定"按钮 |
229
+ | visible | Boolean | `false` | `v-model` |
230
+ | title | String | `''` | 标题 |
231
+ | show-cancel | Boolean | `true` | 显示取消 |
232
+ | show-confirm | Boolean | `true` | 显示确定 |
188
233
  | confirm-loading | Boolean | `false` | 确定按钮加载态 |
234
+ | close-on-click-modal | Boolean | `false` | 点击遮罩是否关闭。默认关闭,需要时传 `true` |
235
+ | draggable | Boolean | `true` | 按住标题栏拖动。全屏时不拖。传 `false` 关闭 |
236
+ | show-fullscreen | Boolean | `false` | 关闭按钮左侧显示全屏切换 |
237
+ | default-fullscreen | Boolean | `false` | 打开即全屏,并固定显示全屏按钮。关闭再打开恢复全屏 |
238
+ | fullscreen | Boolean | `false` | 打开时的初始全屏。不强制显示切换按钮 |
239
+
240
+ `width`、`append-to-body`、`show-close`、`custom-class` 等经 `$attrs` 传给 `el-dialog`。
189
241
 
190
- **事件**:`@confirm`(**不自动关闭**,父组件处理业务后自行关闭)、`@cancel`(自动关闭)、`@close`。
242
+ **事件**:
243
+
244
+ | 事件 | 说明 |
245
+ | --- | --- |
246
+ | `@confirm` | 点击确定。不关闭弹窗 |
247
+ | `@cancel` | 点击取消,并关闭 |
248
+ | `@close` | 右上角关闭,透传 el-dialog |
249
+ | `@update:visible` | v-model |
250
+ | `@update:fullscreen` | 全屏状态变化 |
251
+
252
+ **插槽**:默认插槽,弹窗内容。标题和底部按钮不开放插槽。
191
253
 
192
254
  ```html
193
- <standard-dialog v-model="dialogVisible" title="新增节点"
194
- :confirm-loading="saving" @confirm="handleConfirm">
195
- <standard-form ref="editForm" :model="form" :rules="formRules">
196
- <!-- 表单内容 -->
197
- </standard-form>
255
+ <standard-dialog v-model="visible" title="新增" :confirm-loading="saving" @confirm="submit" @close="close">
256
+ <standard-form ref="editForm" :model="form" :rules="rules"><!-- 表单项 --></standard-form>
198
257
  </standard-dialog>
199
258
  ```
200
259
 
201
- ### 标准布局容器 StandardContainer
260
+ ### StandardContainer 标准布局容器
202
261
 
203
- 双标签;无装饰样式(无边框/背景/内边距),仅管理排列方向与尺寸。
262
+ 双标签。没有边框、背景和内边距,只负责方向和尺寸。子项不放大、不压缩,交叉轴拉伸填满。
204
263
 
205
264
  | 属性 | 类型 | 默认值 | 说明 |
206
265
  | --- | --- | --- | --- |
207
266
  | direction | String | `'column'` | `column` 纵向 / `row` 横向 |
208
- | size | Number | `100` | 占父容器主轴百分比(0-100) |
209
- | height / width | Number | `null` | 显式高宽(px),优先级高于 size |
267
+ | size | Number | `100` | 占父容器主轴的百分比,0–100。父级是纵向容器时作用于高度,横向时作用于宽度。顶层容器按纵向处理 |
268
+ | height | Number / String | `null` | 显式高度。数字按 px。优先级高于 `size` |
269
+ | width | Number / String | `null` | 显式宽度。数字按 px。优先级高于 `size` |
270
+
271
+ **插槽**:默认插槽。
272
+
273
+ 放进弹窗时,百分比要生效,顶层容器需要显式高度或宽度。
210
274
 
211
275
  ```html
212
- <standard-container direction="column" height="420px">
213
- <standard-container :size="60">上</standard-container>
214
- <standard-container :size="40" direction="row">
215
- <standard-container :size="30">左</standard-container>
216
- <standard-container :size="70">右</standard-container>
217
- </standard-container>
276
+ <standard-container direction="row" width="400px">
277
+ <standard-container><!-- 左 --></standard-container>
278
+ <standard-container><!-- 右 --></standard-container>
218
279
  </standard-container>
219
280
  ```
220
281
 
221
- ### 标准筛选栏 StandardFilterbar
282
+ ### StandardFilterbar 标准筛选栏
283
+
284
+ 单标签靠 `v-model` 配条件;双标签时,默认插槽里的 `<standard-filterbar-item>` 排在配置条件之前。首行按容器宽度排布,单项宽在 175–300px。放不下的进「更多」。`show-advanced-query` 时改为「高级查询」弹层,不再展开次行。
285
+
286
+ `v-model` 绑定:
222
287
 
223
- 单标签。`v-model` 绑定 `searchBar`:`{ searchCondition, searchVariable, mainConditionCount }`。
288
+ ```js
289
+ searchBar: {
290
+ searchCondition: [], // 条件配置,可省略
291
+ searchVariable: {}, // 键必须覆盖每条条件的 value,初始值就是重置目标
292
+ mainConditionCount // 可选。首行条数上限。不传则只受宽度限制
293
+ }
294
+ ```
224
295
 
225
296
  | 属性 | 类型 | 默认值 | 说明 |
226
297
  | --- | --- | --- | --- |
227
- | search-bar | Object | 必填 | v-model 绑定配置对象 |
228
- | show-export | Boolean | `false` | 显示"导出"按钮 |
229
- | show-expand | Boolean | `true` | 显示"更多"(关闭后次区常显) |
230
- | show-advanced-query | Boolean | `false` | 以"高级查询"弹窗替代"更多" |
298
+ | search-bar | Object | 必填 | `v-model` |
299
+ | show-export | Boolean | `false` | 显示「导出」 |
300
+ | show-expand | Boolean | `true` | 显示「更多」。`false` 时未进首行的条件换行常显 |
301
+ | show-advanced-query | Boolean | `false` | 用「高级查询」代替「更多」 |
302
+ | expand-upwards | Boolean | `true` | 「更多」向上展开。高级查询模式下无效 |
231
303
  | loading | Boolean | `false` | 查询按钮加载态 |
232
- | reset-trigger-search | Boolean | `false` | 重置后自动触发查询 |
304
+ | reset-trigger-search | Boolean | `false` | 重置后自动再派发 `@search` |
233
305
 
234
- **事件(必接)**:`@search`;可选 `@export` / `@reset` / `@render-error`。
306
+ **事件**:
235
307
 
236
- **条件类型 `type`**:
308
+ | 事件 | 说明 |
309
+ | --- | --- |
310
+ | `@search` | 必接。查询按钮、文本回车、高级查询确定都会派发 |
311
+ | `@export` | 点击导出。需 `show-export` |
312
+ | `@reset` | 已恢复为创建时的初始值 |
313
+ | `@render-error` | 校验失败,参数为错误信息数组 |
314
+
315
+ **插槽**:默认插槽。只收集 `<standard-filterbar-item>`,其它节点忽略。
316
+
317
+ 条件 `type`:
237
318
 
238
319
  | type | 控件 | 说明 |
239
320
  | --- | --- | --- |
240
- | `text` | el-input | 输入框,回车即查询 |
241
- | `date` | el-date-picker | 年月日,`yyyy-MM-dd` |
242
- | `datetime` | el-date-picker | 年月日时分秒,`yyyy-MM-dd HH:mm:ss` |
243
- | `select` | el-select 单选 | 配 `selectSource` 静态选项或 `remote` 远程方法 |
244
- | `select-multi` | el-select 多选 | 绑定值必须为数组 |
321
+ | `text` | el-input | 回车即查询,值会 trim |
322
+ | `date` | el-date-picker | `yyyy-MM-dd` |
323
+ | `datetime` | el-date-picker | `yyyy-MM-dd HH:mm:ss` |
324
+ | `select` | el-select | `selectSource` 或 `remote` |
325
+ | `select-multi` | el-select 多选 | 绑定值必须是数组 |
245
326
 
246
- **条件配置字段**:`label`(标题)、`value`(键,必须存在于 searchVariable)、`type`、`isMain: 'Y'`(主区)、`placeholder`、`clearable`、`width`(数字 px 或 CSS 字符串)、`selectSource`、`remote`(函数或父组件方法名字符串)、`optionProps: { label, value }`。
327
+ 条件字段:`label`、`value`(必填,且必须已存在于 `searchVariable`)、`type`(必填)。可选 `placeholder`、`clearable`(默认 true)、`width`(数字 px 或 CSS 宽度)、`selectSource`、`remote`(函数或父组件方法名)、`optionProps: { label, value }`。远程返回值约定与 `standard-select` 相同,防抖 300ms。
247
328
 
248
329
  ```html
249
- <standard-filterbar v-model="searchBar" show-export reset-trigger-search
250
- :loading="loading" @search="onSearch" @export="onExport" />
330
+ <standard-filterbar
331
+ v-model="searchBar"
332
+ show-export
333
+ reset-trigger-search
334
+ :loading="loading"
335
+ @search="onSearch"
336
+ @export="onExport"
337
+ >
338
+ <standard-filterbar-item label="车间">
339
+ <el-select v-model="extra.workshop" size="mini" clearable placeholder="请选择车间" />
340
+ </standard-filterbar-item>
341
+ </standard-filterbar>
251
342
  ```
252
343
 
253
344
  ```js
254
345
  searchBar: {
255
346
  searchCondition: [
256
- { label: '开始时间', value: 'startTime', type: 'datetime', isMain: 'Y', clearable: false },
257
- { label: '工单编号', value: 'cmoLot', type: 'select', isMain: 'Y',
258
- remote: 'remoteWorkCmo', optionProps: { label: 'CMO_LOT', value: 'CMO_LOT' } },
259
- { label: '检验结果', value: 'cresult', type: 'select',
260
- selectSource: [{ label: '全部', value: '-1' }, { label: '合格', value: '1' }] },
347
+ { label: '开始时间', value: 'startTime', type: 'datetime', clearable: false },
348
+ { label: '关键字', value: 'keyword', type: 'text', placeholder: '请输入关键字' },
349
+ { label: '部门', value: 'deptId', type: 'select', remote: 'remoteDeptList',
350
+ optionProps: { label: 'DEPT_NAME', value: 'DEPT_ID' } },
351
+ { label: '状态', value: 'status', type: 'select',
352
+ selectSource: [{ label: '全部', value: '-1' }, { label: '启用', value: '1' }] }
261
353
  ],
262
- searchVariable: { startTime: '', cmoLot: '', cresult: '-1' }, // key 与 value 一一对应,初始值即重置目标
354
+ searchVariable: { startTime: '', keyword: '', deptId: '', status: '-1' }
263
355
  }
264
356
  ```
265
357
 
266
- ### 标准表单 StandardForm / StandardFormItem
358
+ 插槽里的控件不进 `searchVariable`,重置按钮不会清它们。需要联动清空时听 `@reset`。
359
+
360
+ #### 子组件 StandardFilterbarItem
361
+
362
+ 放在 `<standard-filterbar>` 默认插槽里。标题在上、控件在下。一个组件算一条条件。
363
+
364
+ | 属性 | 类型 | 默认值 | 说明 |
365
+ | --- | --- | --- | --- |
366
+ | label | String | `''` | 标题 |
367
+ | width | Number / String | `null` | 自定义宽度。不传则跟随首行统一宽度 |
368
+ | layout-width | Number | `0` | 筛选栏测量后写入,页面不要传 |
369
+
370
+ **插槽**:默认插槽,放具体控件(`el-select`、`el-input`、`standard-input` 等)。
267
371
 
268
- 双标签,默认插槽放 `<standard-form-item>`。
372
+ ### StandardForm / StandardFormItem 标准表单
269
373
 
270
- | 属性(Form) | 类型 | 默认值 | 说明 |
374
+ 双标签。label 宽度按全部表单项里最长的 label 计算:中文 15px/字 + 英文 10px/字 + 40px。控件尺寸默认 mini。表单项内控件样式为宽度 100%。
375
+
376
+ **StandardForm**
377
+
378
+ | 属性 | 类型 | 默认值 | 说明 |
271
379
  | --- | --- | --- | --- |
272
- | model | Object | `{}` | v-model 表单数据 |
273
- | rules | Object | `null` | 校验规则(同 el-form) |
380
+ | model | Object | `{}` | 表单数据。可用 `:model`,也支持 `v-model`(`update:model`) |
381
+ | rules | Object | `null` | 同 el-form |
274
382
  | size | String | `'mini'` | 控件尺寸 |
275
- | label-position | String | `'right'` | label 位置 |
276
- | width | Number/String | `null` | 表单宽度(数字=px,如 `'600px'`) |
383
+ | label-position | String | `'right'` | `left` / `right` / `top` |
384
+ | width | Number / String | `null` | 表单宽度。数字按 px。不传则撑满父级 |
385
+
386
+ `label-width` 由组件计算,不要再传。其余属性、事件透传 `el-form`。
387
+
388
+ **对外方法(ref)**:`validate`、`resetFields`、`clearValidate`。
277
389
 
278
- | 属性(FormItem) | 类型 | 默认值 | 说明 |
390
+ **插槽**:默认插槽,放 `<standard-form-item>`。
391
+
392
+ **StandardFormItem**
393
+
394
+ | 属性 | 类型 | 默认值 | 说明 |
279
395
  | --- | --- | --- | --- |
280
- | label | String | `''` | 标签文案(参与 label 宽度自动计算) |
281
- | prop | String | `''` | 校验字段名 |
282
- | span | Number | `24` | 栅格 1-24(**必须数字绑定 `:span="12"`**) |
396
+ | label | String | `''` | 标签,参与 label 宽度计算 |
397
+ | prop | String | `''` | 校验字段,对应 `rules` 的 key |
398
+ | span | Number | `24` | 栅格 1–24。半行并排写 `:span="12"` |
283
399
 
284
- **对外方法(ref)**:`validate` / `resetFields` / `clearValidate`。
400
+ `required` 等其余属性透传 `el-form-item`。
401
+
402
+ **插槽**:默认插槽,放输入控件。
285
403
 
286
404
  ```html
287
405
  <standard-form ref="editForm" :model="form" :rules="rules" width="600px">
288
- <standard-form-item label="节点名称" prop="CNAME" :span="12">
289
- <standard-input v-model="form.CNAME" placeholder="请输入节点名称" />
290
- </standard-form-item>
291
- <standard-form-item label="排序号" :span="12">
292
- <el-input-number v-model="form.CSEQ" :min="1" :max="999" controls-position="right" />
406
+ <standard-form-item label="名称" prop="NAME" :span="12">
407
+ <standard-input v-model="form.NAME" placeholder="请输入名称" />
293
408
  </standard-form-item>
294
409
  <standard-form-item label="备注">
295
- <el-input v-model.trim="form.CREMARK" type="textarea" :rows="3" />
410
+ <el-input v-model.trim="form.REMARK" type="textarea" :rows="3" />
296
411
  </standard-form-item>
297
412
  </standard-form>
298
413
  ```
299
414
 
300
- ### 标准半区 StandardHalfArea
415
+ ### StandardHalfArea 标准半区
301
416
 
302
- 双标签,默认插槽放半区内容。
417
+ 双标签。默认是白底圆角卡片。左右分栏时和 `<standard-splitter>` 一起放在 `<standard-page vertical>` 里。
303
418
 
304
419
  | 属性 | 类型 | 默认值 | 说明 |
305
420
  | --- | --- | --- | --- |
306
- | left | Boolean | `false` | 左半区:宽度由页面显式指定(`flex: 0 0 auto`) |
307
- | right | Boolean | `false` | 右半区:`flex: 1 1 0%` 占满剩余宽度 |
308
- | transparent | Boolean | `false` | 透明模式:不绘制卡片外观,仅保留布局 |
421
+ | left | Boolean | `false` | 左半区,`flex: 0 0 auto`,宽度由页面用 style 指定 |
422
+ | right | Boolean | `false` | 右半区,`flex: 1 1 0%` 占满剩余宽度 |
423
+ | transparent | Boolean | `false` | 去掉卡片外观,只留布局。内部筛选栏、表格、树自己带卡片时使用 |
424
+
425
+ **插槽**:默认插槽。
309
426
 
310
427
  ```html
311
- <section class="page-body">
312
- <standard-half-area transparent :style="leftPanelStyle"><!-- 左 --></standard-half-area>
313
- <standard-splitter v-model="leftPercent" unit="percent" @drag-end="recalculateAll" />
314
- <standard-half-area right transparent><!-- 右 --></standard-half-area>
315
- </section>
428
+ <standard-half-area left :style="{ width: leftWidth + 'px' }"><!-- 左 --></standard-half-area>
429
+ <standard-splitter v-model="leftWidth" />
430
+ <standard-half-area right><!-- 右 --></standard-half-area>
316
431
  ```
317
432
 
318
- ### 标准页面骨架 StandardPage
433
+ ### StandardPage 标准页面骨架
319
434
 
320
- 双标签,默认插槽放整页内容(筛选区/内容区/弹窗)。根节点自带 16px 内边距 + 视口高度 + 白底 + 隐藏溢出 + 纵向 flex。
435
+ 双标签。自带 16px 内边距(宽度 ≤768px 时 12px)、白底、`overflow: hidden`、纵向 flex。页面本身不出现滚动条,滚动发生在表格等内容区。
321
436
 
322
437
  | 属性 | 类型 | 默认值 | 说明 |
323
438
  | --- | --- | --- | --- |
324
- | client | Boolean | `false` | 客户端模式高度 `calc(100vh - 29px)`;否则 `calc(100vh - 135px)` |
325
- | vertical | Boolean | `false` | 纵向分栏模式:插槽内容置于横向 flex 内容主体层(左树/左面板 + 右内容) |
439
+ | client | Boolean | `false` | `true` 时高度 `calc(100vh - 29px)`,否则 `calc(100vh - 135px)` |
440
+ | vertical | Boolean | `false` | 内容放进横向 flex 层,用于左树/左表 + 右内容 |
441
+
442
+ **插槽**:默认插槽,放筛选区、半区、表格、弹窗。
326
443
 
327
444
  ```html
328
- <standard-page :client="isCilent">
445
+ <standard-page :client="isClient">
329
446
  <standard-filterbar v-model="searchBar" @search="onSearch" />
330
- <standard-table ...><!-- 表格区 --></standard-table>
447
+ <standard-table :table-data="tableData" />
331
448
  </standard-page>
332
449
  ```
333
450
 
334
- ### 标准分割条 StandardSplitter
451
+ ### StandardSplitter 标准分割条
335
452
 
336
- 单标签。拖拽改变左右框体宽度。
453
+ 单标签。拖拽改变左侧宽度。拖拽中禁止选中文字。
337
454
 
338
455
  | 属性 | 类型 | 默认值 | 说明 |
339
456
  | --- | --- | --- | --- |
340
- | value | Number | `260` | v-model 绑定左侧宽度 |
457
+ | value | Number | `260` | `v-model`,左侧宽度 |
341
458
  | unit | String | `'px'` | `px` / `percent` |
342
459
  | min-width | Number | `200` | px 模式最小宽度 |
343
- | max-ratio | Number | `0.6` | px 模式最大占容器比例 |
460
+ | max-ratio | Number | `0.6` | px 模式最大占父容器比例 |
344
461
  | min-pixel | Number | `320` | percent 模式两侧最小像素 |
345
462
  | max-half-percent | Number | `45` | percent 模式单侧百分比上限 |
346
463
 
347
- **事件**:`@input`(拖拽中实时)、`@change`(拖拽结束)、`@drag-start` / `@drag-end`(拖拽结束重算表格)。
464
+ **事件**:`@input`(拖拽中)、`@drag-start`、`@drag-end`、`@change`(后两个在松手时派发,参数为最终宽度)。无插槽。
348
465
 
349
- ### 标准表格 StandardTable(含 8 个子组件)
466
+ 联动页在 `@drag-end` 里对两侧表格调用 `recalculate()`。
350
467
 
351
- 双标签。数据接口:`table-data` 表格数据、`table-operation` 操作列按钮;区域内容全部通过插槽内子组件声明。
468
+ ### StandardTable 标准表格
352
469
 
353
- **主组件属性**:
470
+ 双标签,基于 vxe-table。数据用 `table-data`,操作列用 `table-operation`。工具栏、分页、列都在默认插槽里声明,由表格拿到对应区域渲染。列组件本身不占布局。
354
471
 
355
472
  | 属性 | 类型 | 默认值 | 说明 |
356
473
  | --- | --- | --- | --- |
357
- | table-data | Array | `[]` | 表格数据(必填) |
358
- | table-operation | Array | `[]` | 操作列按钮 `[{ active, text, method, width, color }]`;`active` 支持布尔或函数 `(row, btn)` |
474
+ | table-data | Array | `[]` | 表格数据 |
475
+ | table-operation | Array | `[]` | 操作列。见下方按钮项 |
359
476
  | loading | Boolean | `false` | 加载态 |
360
- | height | String | `'100%'` | 表格高度 |
361
- | show-footer | Boolean | `false` | 显示底部栏(含 footer 子组件时自动显示) |
362
- | show-update-time | Boolean | `true` | 底部栏左侧"数据更新时间" |
363
- | show-checkbox | Boolean | `false` | 首列多选框 |
364
- | show-adjustment | Boolean | `false` | "调整"列设置按钮 |
365
- | footer-method | Function | `null` | 表尾合计方法 |
366
- | tree-config / row-config / menu-config | Object | `null` | 树形模式 / 行主键 / 右键菜单(vxe-table 原样透传) |
477
+ | height | String / Number | `'100%'` | 表格高度 |
478
+ | show-footer | Boolean | `false` | 底部栏。出现 `standard-footer-left` 或 `standard-footer-right` 时自动显示 |
479
+ | show-update-time | Boolean | `true` | 底部左侧「数据更新时间」。只在 `show-footer` 为 true、且没有 footer-left 子组件和 `footer-left` 插槽时显示 |
480
+ | show-checkbox | Boolean | `false` | 首列多选 |
481
+ | show-adjustment | Boolean | `true` | 右上角「调整」列设置。传 `false` 隐藏 |
482
+ | show-context-menu | Boolean | `false` | 单元格右键菜单。默认不拦截,走浏览器菜单。表头右键(排序、固定列)不受此开关影响 |
483
+ | footer-method | Function | `null` | 表尾合计,原样交给 vxe-table |
484
+ | menu-config | Object | `null` | 自定义右键菜单,原样交给 vxe-table。传入后不再使用内置菜单 |
485
+ | tree-config | Object | `null` | 树形配置,原样透传 |
486
+ | row-config | Object | `null` | 行主键。树表写 `{ keyField: 'id' }` |
487
+ | edit-config | Object / Boolean | `null` | 不传时,只要有列开了编辑,就按点击单元格编辑。`false` 关闭。对象原样交给 vxe-table |
488
+ | z-index | Number | `null` | 右键菜单、tooltip 的层级 |
489
+ | table-code | String | `''` | 表头配置里的表格编码。不传用 `ref` |
490
+ | page-code | String | `''` | 表头配置里的页面编码。不传用路由 |
491
+
492
+ 操作列每一项:
493
+
494
+ | 字段 | 说明 |
495
+ | --- | --- |
496
+ | text | 按钮文字 |
497
+ | method | 函数,或父组件方法名。入参 `(row, btn)` |
498
+ | active | `true` / `false`,或函数 `(row, btn)`。`false` 时按钮禁用,不隐藏 |
499
+ | width | 参与操作列宽度合计,未写按 60px 估算 |
500
+ | color | 文字颜色。删除常用 `#f56c6c` |
501
+
502
+ 按钮不超过 3 个时全部显示。超过 3 个时前 3 个直出,其余进「更多」。
503
+
504
+ **事件**:
367
505
 
368
- **事件**:`@current-change`(行选中)、`@toggle-tree-expand`(树形展开变化)、`@selection-change`(多选变化)、`@menu-click`(右键菜单点击)、`@op-click`(操作列按钮点击)。
369
- **对外方法(ref)**:`recalculate()`、`setAllTreeExpand(expanded)`、`clearSelection()`、`getSelection()`、`setCurrentRow(row)`、`exportData(options)`。
506
+ | 事件 | 说明 |
507
+ | --- | --- |
508
+ | `@current-change` | 当前行变化,参数为 vxe-table 的参数 |
509
+ | `@selection-change` | 多选变化,参数为已选行数组 |
510
+ | `@toggle-tree-expand` | 树节点展开/收起 |
511
+ | `@op-click` | 操作列点击,参数 `(row, btn)` |
512
+ | `@menu-click` | 右键菜单点击,参数为 vxe-table 的参数 |
513
+ | `@edit-activated` / `@edit-closed` | 单元格编辑开始 / 结束 |
514
+
515
+ 未传 `menu-config` 且 `show-context-menu` 为 true 时,单元格菜单为「复制」加上操作列按钮。
516
+
517
+ **对外方法(ref)**:
518
+
519
+ | 方法 | 说明 |
520
+ | --- | --- |
521
+ | `recalculate()` | 容器尺寸变化后重算布局 |
522
+ | `setAllTreeExpand(expanded)` | 树表全部展开或收起 |
523
+ | `getSelection()` | 已勾选行 |
524
+ | `clearSelection()` | 清空勾选 |
525
+ | `setCurrentRow(row)` | 勾选某一行(多选) |
526
+ | `setCurrentRecord(row)` | 设为当前高亮行,不触发 `current-change` |
527
+ | `exportData(options)` | 转调 vxe-table 的 `exportData` |
370
528
 
371
- **子组件**:
529
+ **插槽**:
372
530
 
373
- | 子组件 | 说明 |
531
+ | 插槽 | 说明 |
374
532
  | --- | --- |
375
- | `<standard-toolbar-left :buttons>` | 工具栏左区;`buttons: [{ type, icon, text, title, method, show }]`,method 支持函数或方法名字符串;也支持默认插槽 |
376
- | `<standard-toolbar-right show-adjustment>` | 工具栏右区(插槽内容自动靠右);其内可放 `<standard-toolbar-query>` |
377
- | `<standard-toolbar-query>` | 右侧查询区,只能放在 `standard-toolbar-right` 内:输入框、查询,`show-export` 时再加导出 |
378
- | `<standard-toolbar-empty>` | 工具栏空占位(主组件内置,可省略) |
379
- | `<standard-column type/field/title/width/min-width/fixed/align/sortable/show-overflow/resizable/tree-node/formatter>` | 声明列;支持作用域插槽 `#default="{ row }"` |
380
- | `<standard-footer-left :text>` | 底部栏左侧文本 |
381
- | `<standard-footer-right :current-page :page-size :page-sizes :total :layout @page-change>` | 分页;`page-change` 参数 `{ currentPage, pageSize, type }` |
382
- | `<standard-footer-empty>` | 底部空占位(主组件内置,可省略) |
533
+ | 默认插槽 | 放下面的子组件。工具栏、分页、列会被抽到对应区域 |
534
+ | footer-left | 底部栏左侧自定义内容。仅当 `show-footer` 为 true,且没有 `<standard-footer-left>` 时显示 |
535
+
536
+ #### 子组件 StandardToolbarLeft
537
+
538
+ 放在 `<standard-table>` 默认插槽内,渲染到操作区左侧。
539
+
540
+ | 属性 | 类型 | 默认值 | 说明 |
541
+ | --- | --- | --- | --- |
542
+ | buttons | Array | `[]` | `{ type, icon, text, title, method, show }`。`method` 为函数或父组件方法名,入参为按钮对象。`show: false` 不渲染 |
543
+
544
+ **事件**:`@toolbar-click`,参数为按钮对象。
545
+
546
+ **插槽**:默认插槽,和 `buttons` 一起显示。插槽里的按钮自己绑事件。
547
+
548
+ #### 子组件 StandardToolbarRight
549
+
550
+ 放在 `<standard-table>` 默认插槽内,渲染到操作区右侧、「调整」按钮之前。
383
551
 
384
- **standard-toolbar-query**(单标签):只能作为 `<standard-toolbar-right>` 的子组件。放在其它位置时不渲染,并输出 `[StandardToolbarQuery]` 警告。内部从左到右为输入框、查询按钮,`show-export` 为 true 时再显示导出按钮,间距与工具栏其它按钮同为 6px。输入框回车与点击查询等效。
552
+ 无需要页面传入的属性。**插槽**:默认插槽,放按钮或 `<standard-toolbar-query>`。
553
+
554
+ #### 子组件 StandardToolbarQuery
555
+
556
+ 只能作为 `<standard-toolbar-right>` 的子组件。从左到右是输入框、查询;`show-export` 时再加导出。间距 6px。回车与点击查询相同。
385
557
 
386
558
  | 属性 | 类型 | 默认值 | 说明 |
387
559
  | --- | --- | --- | --- |
388
- | value | String/Number | `''` | v-model 绑定的查询关键字 |
389
- | placeholder | String | `'请输入关键字'` | 输入框占位文案 |
390
- | query-method | Function/String | `''` | 查询方法。函数直接调用;字符串沿父组件链查找同名方法。入参为当前关键字 |
391
- | export-method | Function/String | `''` | 导出方法,约定同 `query-method`。需同时开启 `show-export` |
392
- | show-export | Boolean | `false` | 是否显示导出按钮 |
560
+ | value | String / Number | `''` | `v-model`,查询关键字 |
561
+ | placeholder | String | `'请输入关键字'` | 占位 |
562
+ | query-method | Function / String | `''` | 查询方法,入参为当前关键字 |
563
+ | export-method | Function / String | `''` | 导出方法,约定同上。需 `show-export` |
564
+ | show-export | Boolean | `false` | 显示导出 |
393
565
  | loading | Boolean | `false` | 查询按钮加载态 |
394
566
 
395
- **事件**:`@input`(v-model)、`@query`、`@export`,后两个参数均为当前关键字。传入 `query-method` / `export-method` 时仍会派发对应事件。
567
+ **事件**:`@input`、`@query`、`@export`。后两个参数都是当前关键字。传了 method 仍会派发事件。无插槽。
396
568
 
397
- ```html
398
- <standard-toolbar-right>
399
- <standard-toolbar-query
400
- v-model="keyword"
401
- placeholder="请输入编码/名称"
402
- query-method="onQuery"
403
- show-export
404
- export-method="onExport"
405
- :loading="loading"
406
- />
407
- </standard-toolbar-right>
408
- ```
569
+ #### 子组件 StandardToolbarEmpty
409
570
 
410
- ```js
411
- // onQuery(keyword)、onExport(keyword) 由组件传入当前关键字
412
- onQuery(keyword) { /* 按关键字筛选,结束后 this.$refs.mainTable.recalculate() */ },
413
- onExport(keyword) { /* 导出当前筛选结果 */ }
414
- ```
571
+ 操作区没有任何左右工具栏时,表格会自己留出一块 10px 间距。页面一般不用写。写了 `<standard-toolbar-empty />` 也是同一块占位。左右工具栏有其一则不占位。无属性、无插槽。
415
572
 
416
- **列宽/对齐约定(速查)**:
573
+ #### 子组件 StandardColumn
417
574
 
418
- | 列类型 | 建议列宽 | align |
419
- | --- | --- | --- |
420
- | 序号(type="seq") | 60 | —(fixed="left") |
421
- | 状态/单位/层级 | 80 | center |
422
- | 排序号 | 70 | center |
423
- | 操作人/检验人/修改人 | 90~100 | 左 |
424
- | 编码/类型/工序 | 110~130 | 编码 center,其余左 |
425
- | 时间类 | 150~170 | 左 |
426
- | 备注 | min-width 150~160 | 左 |
427
- | 树节点名称列 | min-width 220 | 左(tree-node + fixed="left") |
575
+ 声明列,必须放在 `<standard-table>` 内(可以隔着 tabs 等中间层)。自身不显示。
576
+
577
+ | 属性 | 类型 | 默认值 | 说明 |
578
+ | --- | --- | --- | --- |
579
+ | field | String | `''` | 字段名。与 `type` 至少给一个 |
580
+ | column-key | String | `''` | 表头配置主键。不传按 `field` 或 `type` 生成。同一字段出现两列,或字段以后会改名时必须指定,指定后不要再改 |
581
+ | type | String | `''` | vxe 内置列,如 `seq` |
582
+ | title | String | `''` | 列标题 |
583
+ | width | String / Number | `null` | 列宽 |
584
+ | min-width | String / Number | `null` | 最小列宽。不传时:有 `width` 用 `width`,否则按标题估算(中文 15px、英文 10px,再加 40px) |
585
+ | fixed | String | `''` | `''` / `left` / `right` |
586
+ | align | String | `'left'` | `left` / `center` / `right` |
587
+ | sortable | Boolean | `false` | 可排序 |
588
+ | show-overflow | Boolean | `true` | 超出省略 |
589
+ | resizable | Boolean | `true` | 可拖列宽 |
590
+ | tree-node | Boolean | `false` | 树节点列,显示展开图标 |
591
+ | formatter | Function | `null` | `({ row, column, $index }) => 显示值`。优先级低于插槽 |
592
+ | editable | Boolean | `false` | 点击单元格文本编辑 |
593
+ | edit-render | Object | `null` | vxe 编辑器,如 `{ name: 'input' }`。优先于 `editable` |
594
+
595
+ **插槽**:
596
+
597
+ | 插槽 | 说明 |
598
+ | --- | --- |
599
+ | 默认插槽 | 单元格。需要行数据时用作用域插槽,参数来自 vxe-table,常用 `row`、`seq`、`column` |
600
+ | edit | 编辑态内容,作用域同上。有此插槽时该列可编辑 |
601
+
602
+ #### 子组件 StandardFooterLeft
603
+
604
+ 底部栏左侧文本。出现后底部栏自动显示,并占用「数据更新时间」的位置。
605
+
606
+ | 属性 | 类型 | 默认值 | 说明 |
607
+ | --- | --- | --- | --- |
608
+ | text | String | `''` | 左侧文字 |
609
+
610
+ 无插槽。自定义结构用表格的 `footer-left` 插槽,并打开 `show-footer`。
428
611
 
429
- **用法示例**:
612
+ #### 子组件 StandardFooterRight
613
+
614
+ 底部栏右侧分页。出现后底部栏自动显示。
615
+
616
+ | 属性 | 类型 | 默认值 | 说明 |
617
+ | --- | --- | --- | --- |
618
+ | current-page | Number | `1` | 当前页,由页面维护 |
619
+ | page-size | Number | `20` | 每页条数,由页面维护 |
620
+ | page-sizes | Array | `[10, 20, 50, 100, 200, 500]` | 每页条数选项 |
621
+ | total | Number | `0` | 总条数 |
622
+ | layout | String | `'sizes, prev, pager, next, total'` | 同 el-pagination |
623
+
624
+ **事件**:`@page-change`,参数 `{ currentPage, pageSize, type }`。`type` 为 `page`(翻页)或 `size`(改每页条数,此时 `currentPage` 为 1)。无插槽。
625
+
626
+ #### 子组件 StandardFooterEmpty
627
+
628
+ 没有左右底部内容时,用来留出与底部栏相同的 10px 上间距。左右底部子组件有其一则不占位。无属性、无插槽。
430
629
 
431
630
  ```html
432
- <standard-table ref="mainTable" :table-data="tableData" :table-operation="tableOperation"
433
- :loading="loading" :show-update-time="false" :footer-method="summaryMethod">
631
+ <standard-table
632
+ ref="mainTable"
633
+ table-code="main"
634
+ :table-data="tableData"
635
+ :table-operation="tableOperation"
636
+ :loading="loading"
637
+ :show-update-time="false"
638
+ >
434
639
  <standard-toolbar-left>
435
640
  <standard-button type="primary" icon="el-icon-plus" label="新增" @click="onAdd" />
436
641
  </standard-toolbar-left>
437
- <standard-toolbar-right show-adjustment>
438
- <standard-input v-model="keyword" placeholder="请输入关键字" @enter="onSearch" />
642
+ <standard-toolbar-right>
643
+ <standard-toolbar-query v-model="keyword" query-method="onQuery" :loading="loading" />
439
644
  </standard-toolbar-right>
440
645
  <standard-footer-left :text="footerText" />
441
646
  <standard-footer-right
442
- :current-page="pageParams.currentPage" :page-size="pageParams.pageSize"
443
- :page-sizes="[10, 20, 50, 100]" :total="pageParams.totalResult"
647
+ :current-page="pageParams.currentPage"
648
+ :page-size="pageParams.pageSize"
649
+ :page-sizes="[10, 20, 50, 100]"
650
+ :total="pageParams.totalResult"
444
651
  @page-change="onPageChange"
445
652
  />
446
653
  <standard-column type="seq" title="序号" :width="60" :min-width="60" fixed="left" />
447
- <standard-column field="CITEM_NO" title="产品型号" :min-width="120" sortable />
448
- <standard-column field="CRESULT" title="检验结果" :width="100" :min-width="100" align="center">
449
- <template #default="{ row }">
450
- <el-tag v-if="row.CRESULT == 1" size="mini" type="success">合格</el-tag>
451
- <el-tag v-else size="mini" type="danger">不合格</el-tag>
452
- </template>
654
+ <standard-column field="CODE" title="编码" :min-width="120" sortable />
655
+ <standard-column field="STATUS" title="状态" :width="100" :min-width="100" align="center">
656
+ <template #default="{ row }"><!-- 状态标签 --></template>
453
657
  </standard-column>
454
658
  </standard-table>
455
659
  ```
456
660
 
457
- **树形模式**(需 `tree-config` + `row-config`,节点列加 `tree-node`):
661
+ 树形模式:
662
+
663
+ ```html
664
+ <standard-table
665
+ :table-data="tableData"
666
+ :tree-config="treeConfig"
667
+ :row-config="rowConfig"
668
+ @toggle-tree-expand="onToggleTreeExpand"
669
+ >
670
+ <standard-column tree-node field="NAME" title="名称" :min-width="220" fixed="left" />
671
+ </standard-table>
672
+ ```
458
673
 
459
674
  ```js
460
- treeConfig: { transform: true, rowField: 'id', parentField: 'parentId', trigger: 'row', indent: 20 },
461
- rowConfig: { keyField: 'id' }, // 与 rowField 保持一致
675
+ treeConfig: { transform: true, rowField: 'id', parentField: 'parentId', trigger: 'row', showIcon: true, indent: 20 }
676
+ rowConfig: { keyField: 'id' }
462
677
  ```
463
678
 
464
- ### 标准页签 StandardTabs / StandardTabPane
679
+ ### StandardTabs / StandardTabPane 标准页签
680
+
681
+ 双标签。头部和内容区是同一张卡片。`type`、`tab-position`、`stretch` 以及 `@tab-click`、`@edit` 等透传 `el-tabs`。
465
682
 
466
- 双标签,卡片样式内聚(tabs 头部与内容区联通为同一张卡片)。
683
+ **StandardTabs**
467
684
 
468
- | 属性(Tabs) | 类型 | 默认值 | 说明 |
685
+ | 属性 | 类型 | 默认值 | 说明 |
469
686
  | --- | --- | --- | --- |
470
- | value | String | `''` | v-model 当前激活 pane 的 name |
471
- | lazy | Boolean | `false` | 懒加载(首次切换到该 pane 才渲染内容) |
687
+ | value | String / Number | `''` | `v-model`,当前 pane 的 `name` |
688
+ | lazy | Boolean | `false` | 懒加载,作用于全部 pane。某个 pane 自己的 `lazy` 也会生效 |
689
+
690
+ **插槽**:默认插槽,放 `<standard-tab-pane>`。
691
+
692
+ **StandardTabPane**
693
+
694
+ 继承 Element UI 的 TabPane。常用属性:`label`、`name`、`closable`、`disabled`、`lazy`。**插槽**:默认插槽,pane 内容。
695
+
696
+ 全局注册名是 `StandardTabPane`,不会覆盖页面里的 `<el-tab-pane>`。
472
697
 
473
698
  ```html
474
- <standard-tabs v-model="rightActiveTab" lazy @tab-click="onRightTabClick">
475
- <standard-tab-pane label="检验项目明细" name="item">
476
- <standard-table ...><!-- 内容 --></standard-table>
699
+ <standard-tabs v-model="activeTab" lazy @tab-click="onTabClick">
700
+ <standard-tab-pane label="明细" name="detail">
701
+ <standard-table :table-data="detailData" />
477
702
  </standard-tab-pane>
478
- <standard-tab-pane label="检验记录" name="record"><!-- ... --></standard-tab-pane>
703
+ <standard-tab-pane label="记录" name="record" />
479
704
  </standard-tabs>
480
705
  ```
481
706
 
482
- ### 标准树 StandardTree
707
+ ### StandardTree 标准树
483
708
 
484
- 单标签。顶部搜索栏 + 树主体 + 底部"全部展开/收起"按钮,卡片外观内置。
709
+ 单标签。上为搜索,中为树,下为「全部展开 / 全部收起」。默认手风琴、高亮当前节点、点击节点展开。自带卡片外观。
485
710
 
486
711
  | 属性 | 类型 | 默认值 | 说明 |
487
712
  | --- | --- | --- | --- |
488
- | tree-data | Array | `[]` | v-model 树数据(嵌套结构) |
489
- | tree-props | Object | `{label:'label',children:'children'}` | 字段映射 |
490
- | node-key | String | `'id'` | 节点唯一键字段 |
491
- | default-expanded-keys | Array | `[]` | 默认展开节点 |
713
+ | tree-data | Array | `[]` | `v-model`,嵌套数据 |
714
+ | tree-props | Object | `{ label: 'label', children: 'children' }` | 字段映射 |
715
+ | node-key | String | `'id'` | 节点唯一键 |
716
+ | default-expanded-keys | Array | `[]` | 默认展开的 key |
492
717
  | search-placeholder | String | `'请输入节点名称搜索'` | 搜索框占位 |
493
- | transparent | Boolean | `false` | 透明模式:嵌入 `standard-half-area` 时去除自身卡片外观并占满父容器 |
718
+ | transparent | Boolean | `false` | 去掉自身卡片并占满父级。放进半区时使用 |
719
+
720
+ **事件**:`@node-click`、`@node-expand`、`@node-collapse`。参数与 el-tree 相同:`(data, node, tree)`。
721
+
722
+ **对外方法(ref)**:`setCurrentKey(key)` 设置或取消选中;`filter(keyword)` 按名称过滤。
494
723
 
495
- **事件**:`@node-click` / `@node-expand` / `@node-collapse`。
496
- **对外方法(ref)**:`setCurrentKey(key)`(设置/取消选中)、`filter(keyword)`(过滤树)。
724
+ 无插槽。节点图标和文字由组件内部渲染。
497
725
 
498
726
  ```html
499
- <standard-tree ref="configTree" v-model="treeData" node-key="id" :default-expanded-keys="[1]"
500
- transparent @node-click="handleNodeClick" />
727
+ <standard-tree
728
+ ref="tree"
729
+ v-model="treeData"
730
+ node-key="id"
731
+ :default-expanded-keys="[1]"
732
+ transparent
733
+ @node-click="onNodeClick"
734
+ />
501
735
  ```
502
736
 
503
- 数据格式(节点显示文本取 `tree-props` 的 label 字段,子节点放 `tree-props` 的 children 字段):
504
-
505
737
  ```js
506
738
  treeData: [
507
- { id: 1, label: '首件检验', children: [
508
- { id: 11, label: '电压测试' },
509
- { id: 12, label: '外观检验' },
510
- ] },
511
- { id: 2, label: '巡检检验' }, // 叶子节点可不写 children
739
+ { id: 1, label: '总部', children: [
740
+ { id: 11, label: '技术部' },
741
+ { id: 12, label: '财务部' }
742
+ ]},
743
+ { id: 2, label: '分公司' }
512
744
  ]
513
745
  ```
514
746
 
515
- ## 组件必接事件速查
747
+ ## 页面骨架
516
748
 
517
- **必接事件清单**:`standard-filterbar` 的 `@search`;`standard-footer-right` 的 `@page-change`;`standard-dialog` 的 `@confirm`;`standard-splitter` 的 `@drag-end`(联动页);`standard-tree` 的 `@node-click`。
749
+ 下面五种对应 Web 前端样板里的页面,只保留组件嵌套。样板目录:`listPage`、`multiListPage`、`linkPage`、`treeLinkPage`、`toolbarQueryPage`。
518
750
 
519
- ## 开发与构建
751
+ ### 标准列表页(listPage)
520
752
 
521
- ```bash
522
- # 安装依赖
523
- npm install
753
+ 筛选栏 + 表格(工具栏、底栏、列)+ 详情弹窗里的表格。
524
754
 
525
- # 构建组件库(产物输出到 dist/)
526
- npm run build
755
+ ```html
756
+ <standard-page :client="isClient">
757
+ <standard-filterbar v-model="searchBar" show-export reset-trigger-search :loading="loading"
758
+ @search="onSearch" @export="onExport" />
759
+ <standard-table ref="mainTable" :table-data="tableData" :table-operation="tableOperation"
760
+ :loading="loading" :show-update-time="false">
761
+ <standard-toolbar-left>
762
+ <standard-button type="primary" icon="el-icon-plus" label="新增" @click="onAdd" />
763
+ </standard-toolbar-left>
764
+ <standard-toolbar-right />
765
+ <standard-footer-left :text="footerText" />
766
+ <standard-footer-right :current-page="pageParams.currentPage" :page-size="pageParams.pageSize"
767
+ :page-sizes="[10, 20, 50, 100]" :total="pageParams.totalResult"
768
+ @page-change="onPageChange" />
769
+ <standard-column type="seq" title="序号" fixed="left" />
770
+ <standard-column field="CODE" title="编码" :min-width="120" sortable />
771
+ </standard-table>
772
+
773
+ <el-dialog :visible.sync="showDetail" :title="detailTitle" width="900px">
774
+ <standard-table :table-data="detailData" :loading="detailLoading" :show-update-time="false"
775
+ style="height: 420px">
776
+ <standard-toolbar-right>
777
+ <standard-button type="primary" label="导出" @click="onDetailExport" />
778
+ </standard-toolbar-right>
779
+ <standard-column field="NAME" title="项目名称" :min-width="150" />
780
+ </standard-table>
781
+ </el-dialog>
782
+ </standard-page>
783
+ ```
784
+
785
+ ### 多层级树表格页(multiListPage)
786
+
787
+ 筛选栏(可含插槽条件)+ 树表 + 弹窗。弹窗里用容器并排表单和表格。
788
+
789
+ ```html
790
+ <standard-page :client="isClient">
791
+ <standard-filterbar v-model="searchBar" reset-trigger-search :loading="loading"
792
+ @search="onSearch" @reset="onResetExtra">
793
+ <standard-filterbar-item label="车间">
794
+ <el-select v-model="extra.workshop" size="mini" clearable />
795
+ </standard-filterbar-item>
796
+ </standard-filterbar>
797
+
798
+ <standard-table ref="xTable" :table-data="tableData" :table-operation="tableOperation"
799
+ :loading="loading" :show-update-time="false"
800
+ :tree-config="treeConfig" :row-config="rowConfig"
801
+ @toggle-tree-expand="onToggleTreeExpand">
802
+ <standard-toolbar-left>
803
+ <standard-button type="primary" icon="el-icon-plus" label="新增" @click="onAdd" />
804
+ </standard-toolbar-left>
805
+ <standard-toolbar-right>
806
+ <standard-button :label="expanded ? '收起' : '展开'" @click="toggleExpandAll" />
807
+ </standard-toolbar-right>
808
+ <standard-footer-empty />
809
+ <standard-column tree-node field="NAME" title="名称" :min-width="220" fixed="left" />
810
+ <standard-column field="CODE" title="编码" :width="110" :min-width="110" align="center" />
811
+ </standard-table>
812
+
813
+ <standard-dialog v-model="showEdit" :title="dialogTitle" :confirm-loading="saving"
814
+ @confirm="submit" @close="close">
815
+ <standard-container direction="row" width="400px">
816
+ <standard-container>
817
+ <standard-form ref="editForm" :model="form" :rules="formRules">
818
+ <standard-form-item label="名称" prop="NAME" :span="12">
819
+ <standard-input v-model="form.NAME" />
820
+ </standard-form-item>
821
+ </standard-form>
822
+ </standard-container>
823
+ <standard-container>
824
+ <standard-table :table-data="dialogTableData">
825
+ <standard-toolbar-left>
826
+ <standard-button type="primary" icon="el-icon-plus" label="新增" @click="onAddLine" />
827
+ </standard-toolbar-left>
828
+ <standard-footer-empty />
829
+ <standard-column field="CODE" title="编码" />
830
+ </standard-table>
831
+ </standard-container>
832
+ </standard-container>
833
+ </standard-dialog>
834
+ </standard-page>
527
835
  ```
528
836
 
529
- 构建说明:
837
+ ### 左右联动页(linkPage)
530
838
 
531
- - 使用 `@vue/cli-service` 的 lib 模式打包,输出 `dist/standard-ui.common.js`(CommonJS)与 `dist/standard-ui.umd.min.js`(UMD,供 CDN)。
532
- - 样式(scss)已内联进 JS 产物,使用方无需单独引入 css。
533
- - `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 产物。
839
+ 左右半区透明,中间百分比分割条。左侧筛选 + 表格;右侧筛选 + 页签,每个页签一张表。
840
+
841
+ ```html
842
+ <standard-page :client="isClient" vertical>
843
+ <standard-half-area v-show="leftVisible" transparent :style="leftPanelStyle">
844
+ <standard-filterbar v-model="leftSearchBar" show-advanced-query reset-trigger-search
845
+ :loading="leftLoading" @search="onLeftSearch" />
846
+ <standard-table ref="leftTable" :table-data="leftTableData" :loading="leftLoading"
847
+ :show-update-time="false" @current-change="onLeftCurrentChange">
848
+ <standard-toolbar-left :buttons="leftToolbarButtons" />
849
+ <standard-footer-right :current-page="leftPage.currentPage" :page-size="leftPage.pageSize"
850
+ :page-sizes="[10, 20, 50, 100]" :total="leftPage.totalResult"
851
+ @page-change="onLeftPageChange" />
852
+ <standard-column type="seq" title="序号" :width="60" :min-width="60" fixed="left" />
853
+ <standard-column field="NAME" title="名称" :min-width="180" sortable />
854
+ </standard-table>
855
+ </standard-half-area>
856
+
857
+ <standard-splitter v-show="leftVisible && rightVisible" v-model="leftPercent" unit="percent"
858
+ @drag-end="recalculateAll" />
859
+
860
+ <standard-half-area v-show="rightVisible" right transparent>
861
+ <standard-filterbar :key="activeTab" v-model="rightSearchBar" show-advanced-query
862
+ reset-trigger-search :loading="rightLoading" @search="onRightSearch" />
863
+ <standard-tabs v-model="activeTab" lazy @tab-click="onTabClick">
864
+ <standard-tab-pane label="明细" name="detail">
865
+ <standard-table ref="detailTable" :table-data="detailData" :loading="rightLoading"
866
+ :show-update-time="false">
867
+ <standard-toolbar-left :buttons="detailToolbarButtons" />
868
+ <standard-footer-right :current-page="rightPage.currentPage" :page-size="rightPage.pageSize"
869
+ :page-sizes="[10, 20, 50, 100]" :total="rightPage.totalResult"
870
+ @page-change="onRightPageChange" />
871
+ <standard-column type="seq" title="序号" :width="60" :min-width="60" fixed="left" />
872
+ </standard-table>
873
+ </standard-tab-pane>
874
+ <standard-tab-pane label="记录" name="record" />
875
+ <standard-tab-pane label="日志" name="log" />
876
+ </standard-tabs>
877
+ </standard-half-area>
878
+ </standard-page>
879
+ ```
534
880
 
535
- ## vxe-table 3.24 升级说明(使用方须知)
881
+ ### 树 + 列表联动页(treeLinkPage)
536
882
 
537
- 本包 peerDependencies 已由 `^3.8.0` 提升为 `^3.24.0`,请将使用方项目的 vxe-table 同步升级:
883
+ 左半区放树,分割条用像素宽度,右半区是带关键字查询的表格,弹窗里放表单。
538
884
 
539
- ```bash
540
- npm i vxe-table@^3.24.0
885
+ ```html
886
+ <standard-page :client="isClient" vertical>
887
+ <standard-half-area v-show="leftVisible" left :style="{ width: leftWidth + 'px' }">
888
+ <standard-tree ref="tree" v-model="treeData" node-key="id" :default-expanded-keys="[1]"
889
+ transparent @node-click="onNodeClick" />
890
+ </standard-half-area>
891
+
892
+ <standard-splitter v-show="leftVisible" v-model="leftWidth" :min-width="200" :max-ratio="0.6" />
893
+
894
+ <standard-half-area right>
895
+ <standard-table ref="xTable" :table-data="tableData" :table-operation="tableOperation"
896
+ :loading="loading" show-footer :show-update-time="false">
897
+ <standard-toolbar-left>
898
+ <standard-button :label="leftVisible ? '收起' : '展开'" @click="toggleLeft" />
899
+ <standard-button type="primary" icon="el-icon-plus" label="新增" @click="onAdd" />
900
+ <standard-button icon="el-icon-upload" label="导出" @click="onExport" />
901
+ </standard-toolbar-left>
902
+ <standard-toolbar-right>
903
+ <standard-input v-model="keyword" placeholder="请输入关键字" @enter="onSearch" />
904
+ <standard-button type="primary" icon="el-icon-search" label="查询" :loading="loading" @click="onSearch" />
905
+ </standard-toolbar-right>
906
+ <template #footer-left><!-- 当前节点 --></template>
907
+ <standard-footer-right :current-page="pageParams.currentPage" :page-size="pageParams.pageSize"
908
+ :page-sizes="[10, 20, 50, 100]" :total="pageParams.totalResult"
909
+ @page-change="onPageChange" />
910
+ <standard-column type="seq" title="序号" :width="60" :min-width="60" fixed="left" />
911
+ <standard-column field="CODE" title="编码" :min-width="140" sortable />
912
+ </standard-table>
913
+ </standard-half-area>
914
+
915
+ <standard-dialog v-model="showEdit" :title="dialogTitle" :confirm-loading="saving"
916
+ @confirm="submit" @close="close">
917
+ <standard-form ref="editForm" :model="form" :rules="formRules" width="400px">
918
+ <standard-form-item label="编码" prop="CODE" :span="12">
919
+ <standard-input v-model="form.CODE" />
920
+ </standard-form-item>
921
+ </standard-form>
922
+ </standard-dialog>
923
+ </standard-page>
541
924
  ```
542
925
 
543
- - **使用方式没有区别**:`import VXETable from 'vxe-table'` + `import 'vxe-table/lib/style.css'` + `Vue.use(VXETable)` 的注册写法在 3.24 与 3.8 完全一致,无需改动;本包所有组件的 API(属性/事件/插槽)均无变化。
544
- - **StandardTable 用到的 vxe-table 能力全部兼容**:`z-index` 属性、`menu-config`、`tree-config`、`row-config`、多选框、`sortable`、固定列、树形展开、右键菜单等在 3.24 均可用,包内代码已完成适配。
545
- - **⚠️ 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`**。
546
- - **从 3.6/3.8 直接升级到 3.24 时,使用方直接使用 vxe-table 的地方需注意**(不涉及本包组件):
547
- - 纵向/横向虚拟滚动默认关闭(v3.7 起 `scroll-y.enabled` / `scroll-x.enabled` 默认 `false`),大列表渲染行数变多;如依赖虚拟滚动请自行 `VXETable.setup({ scrollY: { enabled: true }, scrollX: { enabled: true } })` 开启。
548
- - `tree-config` 旧参数 `line` / `hasChild` / `children` 已更名为 `showLine` / `hasChildField` / `childrenField`(旧参数保留兼容,新代码建议直接使用新参数)。
549
- - vxe 内置图标 `fixed` / `fixed-fill` 更名为 `fixed-left` / `fixed-left-fill`(此项不向下兼容,仅在使用方直接用到 vxe 图标时受影响)。
550
- - 渲染器 `menus` / `commands` / `formats` 的注册由传函数改为传对象(旧方式保留兼容)。
551
- - 列宽拖拽手柄 DOM 类名 `.vxe-resizable` 更名为 `.vxe-table--resizable-col-bar`;右键菜单分组容器类名 `.vxe-context-menu--option-wrapper` 更名为 `.vxe-table--context-menu-group-wrapper`(v3.24 起)。**仅影响直接对这些 DOM 类名写 CSS/选择器的使用方**,本包内部样式与逻辑已同时兼容新旧类名。
552
- - **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 一致。
553
- - **样式仍需自行引入**:`vxe-table/lib/style.css` 照常由使用方引入,本包不内置 vxe-table 样式。
554
- - **Vue 2.6 兼容**:vxe-table 3.24 未引入 `@vue/composition-api`,Vue 2.6 环境可直接使用(3.24 为 vxe-table 的 Vue 2 线最终版本,4.x 仅支持 Vue 3)。
555
-
556
- ## 发布到 npm
926
+ 树表联动页若要显示 `#footer-left`,表格需要 `show-footer`。只放 `<standard-footer-right>` 时底部栏也会出现,此时左侧自定义内容仍要 `show-footer`。
927
+
928
+ ### 工具栏查询列表页(toolbarQueryPage)
929
+
930
+ 没有独立筛选栏。关键字查询放在表格右侧工具栏。
931
+
932
+ ```html
933
+ <standard-page :client="isClient">
934
+ <standard-table ref="mainTable" :table-data="tableData" :loading="loading" :show-update-time="false">
935
+ <standard-toolbar-left>
936
+ <standard-button type="primary" icon="el-icon-plus" label="新增" @click="onAdd" />
937
+ <standard-button icon="el-icon-refresh" label="刷新" @click="onRefresh" />
938
+ </standard-toolbar-left>
939
+ <standard-toolbar-right>
940
+ <standard-toolbar-query v-model="keyword" placeholder="请输入编码/名称" query-method="onQuery"
941
+ show-export export-method="onExport" :loading="loading" />
942
+ </standard-toolbar-right>
943
+ <standard-footer-right :current-page="pageParams.currentPage" :page-size="pageParams.pageSize"
944
+ :page-sizes="[10, 20, 50, 100]" :total="pageParams.totalResult"
945
+ @page-change="onPageChange" />
946
+ <standard-column type="seq" title="序号" :width="60" :min-width="60" fixed="left" />
947
+ <standard-column field="CODE" title="编码" :min-width="140" sortable />
948
+ <standard-column field="NAME" title="名称" :min-width="180" sortable />
949
+ </standard-table>
950
+ </standard-page>
951
+ ```
952
+
953
+ ## 开发与构建
557
954
 
558
955
  ```bash
559
- # 1. 确认版本号并构建
956
+ npm install
560
957
  npm run build
958
+ ```
561
959
 
562
- # 2. 登录 npm(首次发布需要;无账号先到 https://www.npmjs.com 注册)
563
- npm login
960
+ 使用 `@vue/cli-service` 的 lib 模式,产物在 `dist/`:`standard-ui.common.js`(CommonJS)和 `standard-ui.umd.min.js`(UMD)。样式打进 JS。`vue` 由构建工具 external。`src/index.js` 会 import vxe-table,因此 element-ui、vxe-table 及其运行时依赖 `@vxe-ui/core` 的部分代码会打进 dist。
961
+
962
+ ## vxe-table 3.24 说明
963
+
964
+ 本包 peerDependencies 为 `vxe-table ^3.24.0`。使用方注册方式不变:`import VXETable from 'vxe-table'`、引入 `vxe-table/lib/style.css`、`Vue.use(VXETable)`。
965
+
966
+ - vxe-table 3.24 运行时依赖 `@vxe-ui/core`,但其 package.json 未声明该依赖。本包已在 dependencies 中声明 `@vxe-ui/core ^3.4.24`。使用方若单独使用 vxe-table、不依赖本包,需要自己安装 `@vxe-ui/core@^3.4.24`。
967
+ - 从 3.6 / 3.8 升到 3.24 时,使用方自己写的 vxe-table 需要注意:纵向/横向虚拟滚动默认关闭;`tree-config` 的 `line` / `hasChild` / `children` 更名为 `showLine` / `hasChildField` / `childrenField`(旧名仍兼容);图标 `fixed` / `fixed-fill` 更名为 `fixed-left` / `fixed-left-fill`。
968
+ - 本库 `install` 时执行的 `VXETable.setup({ zIndex: 5000 })` 只作用于产物内的副本。使用方自己的 vxe-table 要在 `main.js` 里另行 setup,或给 `<standard-table>` 传 `z-index`。
969
+ - vxe-table 3.24 是 Vue 2 线的最后版本,Vue 2.6 可直接使用。
970
+
971
+ ## 发布
564
972
 
565
- # 3. 发布(publishConfig.access 已设为 public)
973
+ ```bash
974
+ npm run build
975
+ npm login
566
976
  npm publish
567
977
  ```
568
978
 
569
- 注意事项:
570
-
571
- - 发布内容由 `package.json` 的 `files: ["dist"]` 控制,仅发布构建产物与 README,源码不入包。
572
- - 包名已采用小写形式,符合 npm 公共源命名规范,可直接 `npm publish` 发布。
573
- - 版本更新遵循 semver:`npm version patch|minor|major` 后再次 `npm publish`。
979
+ `files` 只有 `dist`,发布内容是构建产物和 README。版本更新用 `npm version patch|minor|major` 后再 `npm publish`。