ylwl-cpscoms 1.2.0 → 1.4.0
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 +1067 -15
- package/es/SlDialog/dialogPlus.js +1 -1
- package/es/SlForm/index.vue.js +1 -1
- package/es/SlForm/index.vue2.js +1 -1
- package/es/SlForm/index.vue3.js +1 -1
- package/es/SlPage/index.vue.js +2 -1
- package/es/SlPage/index.vue2.js +4 -0
- package/es/SlPage/index.vue3.js +1 -1
- package/es/SlTable/components/colSetting.vue.js +4 -1
- package/es/SlTable/components/colSetting.vue3.js +1 -1
- package/package.json +6 -2
package/README.md
CHANGED
|
@@ -1,15 +1,1067 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
# 🧩 ylwl-cpsComs
|
|
2
|
+
|
|
3
|
+
<div align="center">
|
|
4
|
+
|
|
5
|
+
**CPSB 业务组件库 · Vue 2 + Element UI 通用业务组件**
|
|
6
|
+
|
|
7
|
+
[](package.json)
|
|
8
|
+
[](package.json)
|
|
9
|
+
[](package.json)
|
|
10
|
+
[](LICENSE)
|
|
11
|
+
[](package.json)
|
|
12
|
+
|
|
13
|
+
一套基于 **Vue 2** 和 **Element UI** 封装的通用业务组件库，涵盖表单、表格、对话框、抽屉、引导等常见后台管理场景。
|
|
14
|
+
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## 📦 安装
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
# npm
|
|
23
|
+
npm install ylwl-cpscoms
|
|
24
|
+
|
|
25
|
+
# yarn
|
|
26
|
+
yarn add ylwl-cpscoms
|
|
27
|
+
|
|
28
|
+
# pnpm
|
|
29
|
+
pnpm add ylwl-cpscoms
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### 前置依赖
|
|
33
|
+
|
|
34
|
+
本组件库依赖以下 peer 包，请确保项目中已安装：
|
|
35
|
+
|
|
36
|
+
| 依赖 | 版本要求 |
|
|
37
|
+
|------|----------|
|
|
38
|
+
| `vue` | `2.5.17` |
|
|
39
|
+
| `element-ui` | `^2.15.13` |
|
|
40
|
+
|
|
41
|
+
### 可选依赖
|
|
42
|
+
|
|
43
|
+
| 依赖 | 用途 |
|
|
44
|
+
|------|------|
|
|
45
|
+
| `shepherd.js` | 用于 `<SlGuide>` 引导组件（需单独安装） |
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## 🚀 快速开始
|
|
50
|
+
|
|
51
|
+
### 全局注册（推荐）
|
|
52
|
+
|
|
53
|
+
```js
|
|
54
|
+
// main.js
|
|
55
|
+
import Vue from 'vue'
|
|
56
|
+
import ElementUI from 'element-ui'
|
|
57
|
+
import 'element-ui/lib/theme-chalk/index.css'
|
|
58
|
+
import CpsbComponents from 'ylwl-cpsComs'
|
|
59
|
+
|
|
60
|
+
Vue.use(ElementUI)
|
|
61
|
+
Vue.use(CpsbComponents)
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
注册后，所有页面可直接使用以下组件：
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<SlPage> <!-- 通用CRUD页面 -->
|
|
68
|
+
<SlTable> <!-- 业务表格 -->
|
|
69
|
+
<SlForm> <!-- 动态表单 -->
|
|
70
|
+
<SlDialog> <!-- 函数式对话框 -->
|
|
71
|
+
<SlTitle> <!-- 章节标题 -->
|
|
72
|
+
<SlAlert> <!-- 温馨提示 -->
|
|
73
|
+
<SlDescriptions> <!-- 描述列表 -->
|
|
74
|
+
<SlGuide> <!-- 引导漫游 -->
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### 按需引入
|
|
78
|
+
|
|
79
|
+
```js
|
|
80
|
+
// 按需引入业务组件
|
|
81
|
+
import { SlPage, SlTable, SlForm } from 'ylwl-cpsComs'
|
|
82
|
+
|
|
83
|
+
// 按需引入函数式组件
|
|
84
|
+
import { createCommandDialog, showConfirmMessageBox } from 'ylwl-cpsComs'
|
|
85
|
+
|
|
86
|
+
// 按需引入工具函数
|
|
87
|
+
import { typeOf, generateUniqueId, isMobileDevice } from 'ylwl-cpsComs'
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
## 📚 组件文档
|
|
93
|
+
|
|
94
|
+
### 📋 SlPage —— 通用CRUD页面
|
|
95
|
+
|
|
96
|
+
面向标准列表页的一体化解决方案，集成了**搜索表单** + **数据表格** + **分页** + **列设置**。
|
|
97
|
+
|
|
98
|
+
```
|
|
99
|
+
┌──────────────────────────────────────────────────┐
|
|
100
|
+
│ SlPage │
|
|
101
|
+
│ ┌────────────────────────────────────────────┐ │
|
|
102
|
+
│ │ SlAlert (温馨提示) │ │
|
|
103
|
+
│ ├────────────────────────────────────────────┤ │
|
|
104
|
+
│ │ SlForm (搜索筛选区) │ │
|
|
105
|
+
│ │ [下拉框] [输入框] [日期选择] [查询][重置] │ │
|
|
106
|
+
│ ├────────────────────────────────────────────┤ │
|
|
107
|
+
│ │ SlTitle (表头标题区) │ │
|
|
108
|
+
│ │ Title [操作按钮...] [列设置] │ │
|
|
109
|
+
│ ├────────────────────────────────────────────┤ │
|
|
110
|
+
│ │ SlTable (数据表格) │ │
|
|
111
|
+
│ │ ┌────┬──────┬──────┬──────┬──────┐ │ │
|
|
112
|
+
│ │ │ ☐ │ 列1 │ 列2 │ 列3 │ 操作 │ │ │
|
|
113
|
+
│ │ ├────┼──────┼──────┼──────┼──────┤ │ │
|
|
114
|
+
│ │ │ │ │ │ │ │ │ │
|
|
115
|
+
│ │ └────┴──────┴──────┴──────┴──────┘ │ │
|
|
116
|
+
│ ├────────────────────────────────────────────┤ │
|
|
117
|
+
│ │ Pagination (分页) │ │
|
|
118
|
+
│ └────────────────────────────────────────────┘ │
|
|
119
|
+
└──────────────────────────────────────────────────┘
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
#### Props
|
|
123
|
+
|
|
124
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
125
|
+
|------|------|--------|------|
|
|
126
|
+
| `tableApi` | `Function` | `() => ({})` | **必填**. 表格数据请求 API，接收 `(params)` 返回 Promise |
|
|
127
|
+
| `tableColumns` | `Array` | `[]` | **必填**. 表格列配置，详见 [SlTable 列配置](#-sltable-%E5%88%97%E9%85%8D%E7%BD%AE) |
|
|
128
|
+
| `filterForm` | `Array` | `[]` | 搜索表单配置，详见 [SlForm 配置项](#-slform-%E9%85%8D%E7%BD%AE%E9%A1%B9) |
|
|
129
|
+
| `autoRequest` | `Boolean` | `false` | 是否在组件挂载时自动请求数据 |
|
|
130
|
+
| `showFormItem` | `Number` | `3` | 搜索区域默认显示的表单项数量（超出折叠） |
|
|
131
|
+
| `projectFrom` | `String` | `'oldCpsb'` | 请求参数格式化策略：`'ares'` 或其他 |
|
|
132
|
+
| `initSeachParams` | `Object` | `{}` | 初始化搜索参数（写入表单） |
|
|
133
|
+
| `defaultSeachParams` | `Object` | `{}` | 默认搜索参数（每次请求都携带，不在表单中显示） |
|
|
134
|
+
| `isShowColSetting` | `Boolean` | `true` | 是否显示"列设置"按钮 |
|
|
135
|
+
| `notShowPadding` | `Boolean` | `false` | 是否移除外层 20px 内边距 |
|
|
136
|
+
| `otherConfig` | `Object` | 见下方 | 传递给 SlTable 的额外配置 |
|
|
137
|
+
|
|
138
|
+
**`otherConfig` 默认值：**
|
|
139
|
+
|
|
140
|
+
```js
|
|
141
|
+
{
|
|
142
|
+
rowKey: 'id',
|
|
143
|
+
responderCof: {
|
|
144
|
+
statusCode: 'code', // 响应中状态码的字段路径
|
|
145
|
+
list: ['data', 'list'], // 响应中数据列表的字段路径
|
|
146
|
+
total: ['data', 'total'] // 响应中总条数的字段路径
|
|
147
|
+
},
|
|
148
|
+
requestBodyCof: {
|
|
149
|
+
currentPage: 'currentPage', // 请求中当前页码的字段名
|
|
150
|
+
pageSize: 'pageSize' // 请求中每页条数的字段名
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
#### Slots
|
|
156
|
+
|
|
157
|
+
| 插槽名 | 作用域 | 说明 |
|
|
158
|
+
|--------|--------|------|
|
|
159
|
+
| `tableLeftButtons` | `{ tablefilterFormData }` | 表格工具栏左侧按钮区域 |
|
|
160
|
+
| `tableRightButtons` | `{ tablefilterFormData }` | 表格工具栏右侧按钮区域 |
|
|
161
|
+
| 动态列插槽 | `{ row }` | 对应 `tableColumns` 中 `template` 字段定义的具名插槽 |
|
|
162
|
+
|
|
163
|
+
#### Ref 方法
|
|
164
|
+
|
|
165
|
+
| 方法名 | 说明 |
|
|
166
|
+
|--------|------|
|
|
167
|
+
| `searchTableData()` | 校验表单并搜索（回到第1页） |
|
|
168
|
+
| `resetTableData()` | 重置表单并重新搜索 |
|
|
169
|
+
| `getTableData()` | 校验表单并刷新当前页数据 |
|
|
170
|
+
| `editCol()` | 打开列设置抽屉 |
|
|
171
|
+
|
|
172
|
+
#### Ref 属性
|
|
173
|
+
|
|
174
|
+
| 属性 | 类型 | 说明 |
|
|
175
|
+
|------|------|------|
|
|
176
|
+
| `form` | `Object` | 当前搜索表单数据 |
|
|
177
|
+
| `selectedList` | `Array` | 当前选中行数据 |
|
|
178
|
+
| `selectedListIds` | `Array` | 当前选中行的 ID 列表 |
|
|
179
|
+
|
|
180
|
+
#### 使用示例
|
|
181
|
+
|
|
182
|
+
```vue
|
|
183
|
+
<template>
|
|
184
|
+
<sl-page
|
|
185
|
+
ref="page"
|
|
186
|
+
:table-api="getTableList"
|
|
187
|
+
:table-columns="columns"
|
|
188
|
+
:filter-form="filterForm"
|
|
189
|
+
:show-form-item="4"
|
|
190
|
+
:auto-request="true"
|
|
191
|
+
>
|
|
192
|
+
<!-- 表格左侧按钮 -->
|
|
193
|
+
<template #tableLeftButtons="{ tablefilterFormData }">
|
|
194
|
+
<el-button type="primary" @click="handleAdd">新增</el-button>
|
|
195
|
+
<el-button @click="handleExport(tablefilterFormData)">导出</el-button>
|
|
196
|
+
</template>
|
|
197
|
+
|
|
198
|
+
<!-- 自定义列渲染 -->
|
|
199
|
+
<template #status="{ row }">
|
|
200
|
+
<el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
|
|
201
|
+
{{ row.status === 1 ? '启用' : '禁用' }}
|
|
202
|
+
</el-tag>
|
|
203
|
+
</template>
|
|
204
|
+
</sl-page>
|
|
205
|
+
</template>
|
|
206
|
+
|
|
207
|
+
<script>
|
|
208
|
+
export default {
|
|
209
|
+
data() {
|
|
210
|
+
return {
|
|
211
|
+
columns: [
|
|
212
|
+
{ type: 'selection' },
|
|
213
|
+
{ prop: 'name', label: '名称', minWidth: '120px' },
|
|
214
|
+
{ prop: 'status', label: '状态', template: 'status', width: '100px' },
|
|
215
|
+
{
|
|
216
|
+
prop: 'operate',
|
|
217
|
+
label: '操作',
|
|
218
|
+
width: '180px',
|
|
219
|
+
list: [
|
|
220
|
+
{ label: '编辑', type: 'text', click: (row) => this.handleEdit(row) },
|
|
221
|
+
{ label: '删除', type: 'text', click: (row) => this.handleDelete(row) }
|
|
222
|
+
]
|
|
223
|
+
}
|
|
224
|
+
],
|
|
225
|
+
filterForm: [
|
|
226
|
+
{ model: 'name', label: '名称', type: 'input', value: '' },
|
|
227
|
+
{ model: 'status', label: '状态', type: 'select', value: '', options: [
|
|
228
|
+
{ label: '全部', value: '' },
|
|
229
|
+
{ label: '启用', value: '1' },
|
|
230
|
+
{ label: '禁用', value: '0' }
|
|
231
|
+
]}
|
|
232
|
+
]
|
|
233
|
+
}
|
|
234
|
+
},
|
|
235
|
+
methods: {
|
|
236
|
+
getTableList(params) {
|
|
237
|
+
return axios.get('/api/list', { params })
|
|
238
|
+
},
|
|
239
|
+
handleAdd() { /* ... */ },
|
|
240
|
+
handleEdit(row) { /* ... */ },
|
|
241
|
+
handleDelete(row) { /* ... */ }
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
</script>
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
---
|
|
248
|
+
|
|
249
|
+
### 📊 SlTable —— 业务表格
|
|
250
|
+
|
|
251
|
+
功能完备的业务表格组件，在 `el-table` 基础上扩展了远程分页、多选、排序、自定义列渲染、操作列、列拖拽排序等功能。
|
|
252
|
+
|
|
253
|
+
#### Props
|
|
254
|
+
|
|
255
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
256
|
+
|------|------|--------|------|
|
|
257
|
+
| `tableApi` | `Function` | `() => ({})` | **必填**. 数据请求 API |
|
|
258
|
+
| `columns` | `Array` | `[]` | **必填**. 列配置 |
|
|
259
|
+
| `params` | `Object` | `{}` | 搜索/筛选参数 |
|
|
260
|
+
| `filterForm` | `Array` | `[]` | 筛选表单配置（用于参数处理） |
|
|
261
|
+
| `otherConfig` | `Object` | `{}` | 额外配置（rowKey、responderCof、requestBodyCof） |
|
|
262
|
+
| `projectFrom` | `String` | `''` | 参数格式化策略 |
|
|
263
|
+
| `autoRequest` | `Boolean` | `false` | 是否自动请求数据 |
|
|
264
|
+
| `defaultSeachParams` | `Object` | `{}` | 默认请求参数 |
|
|
265
|
+
| `showPagination` | `Boolean` | `true` | 是否显示分页 |
|
|
266
|
+
|
|
267
|
+
#### 列配置
|
|
268
|
+
|
|
269
|
+
| 字段 | 类型 | 说明 |
|
|
270
|
+
|------|------|------|
|
|
271
|
+
| `prop` | `String` | 数据字段名，设为 `'operate'` 时渲染为操作列 |
|
|
272
|
+
| `label` | `String` | 列标题 |
|
|
273
|
+
| `type` | `String` | `'selection'` 多选列, `'index'` 序号列 |
|
|
274
|
+
| `width` | `String` | 列宽 |
|
|
275
|
+
| `minWidth` | `String` | 最小列宽 |
|
|
276
|
+
| `fixed` | `String/Boolean` | `'left'` 或 `'right'` 固定列 |
|
|
277
|
+
| `sortable` | `Boolean/String` | 是否可排序 |
|
|
278
|
+
| `isShow` | `Boolean` | 列是否可见 |
|
|
279
|
+
| `isAlwaysShow` | `Boolean/Function` | 列设置中是否禁止隐藏此列 |
|
|
280
|
+
| `template` | `String` | 自定义单元格渲染的具名插槽 |
|
|
281
|
+
| `headerTemplate` | `String` | 自定义表头的具名插槽 |
|
|
282
|
+
| `render` | `Function({row})` | 返回 HTML 字符串，通过 `v-html` 渲染 |
|
|
283
|
+
| `tip` | `Object` | 行数据悬浮提示：`{ key, isShow(row) }` |
|
|
284
|
+
| `headerTip` | `Object` | 表头悬浮提示：`{ content, isShow(row) }` |
|
|
285
|
+
| `list` | `Array/Function` | 操作列按钮配置 |
|
|
286
|
+
| `isSwitchNumber` | `Boolean` | 是否将字段值转为 Number 类型 |
|
|
287
|
+
| `overflowTooltip` | `Boolean` | 强制开启溢出省略提示 |
|
|
288
|
+
|
|
289
|
+
#### 操作列按钮配置 (`list` 项)
|
|
290
|
+
|
|
291
|
+
| 字段 | 类型 | 说明 |
|
|
292
|
+
|------|------|------|
|
|
293
|
+
| `label` | `String` | 按钮文字 |
|
|
294
|
+
| `type` | `String` | 按钮类型（同 `el-button`） |
|
|
295
|
+
| `size` | `String` | 按钮尺寸 |
|
|
296
|
+
| `isShow` | `Function(row, column, $index)` | 条件显示 |
|
|
297
|
+
| `click` | `Function(row, column, $index, $event)` | 点击回调 |
|
|
298
|
+
| `props` | `Object` | 其他按钮属性 |
|
|
299
|
+
|
|
300
|
+
#### Events
|
|
301
|
+
|
|
302
|
+
| 事件名 | 载荷 | 说明 |
|
|
303
|
+
|--------|------|------|
|
|
304
|
+
| `callback` | `{ apiInfo, allRequestParams }` | 数据请求成功后触发 |
|
|
305
|
+
| `sortChangeByApi` | `{ column, prop, order }` | 排序变化时触发 |
|
|
306
|
+
| `setStorageCustomCol` | `columns` | 列重排序后触发（用于持久化） |
|
|
307
|
+
|
|
308
|
+
#### Ref 方法
|
|
309
|
+
|
|
310
|
+
| 方法名 | 参数 | 说明 |
|
|
311
|
+
|--------|------|------|
|
|
312
|
+
| `getTableData()` | - | 获取表格数据 |
|
|
313
|
+
| `handleCurrentChange(page)` | 页码 | 跳转到指定页 |
|
|
314
|
+
| `handleSizeChange(size)` | 每页条数 | 修改每页条数 |
|
|
315
|
+
| `resetColumns(columns)` | 新的列配置 | 替换当前显示的列 |
|
|
316
|
+
|
|
317
|
+
---
|
|
318
|
+
|
|
319
|
+
### 📝 SlForm —— 动态表单
|
|
320
|
+
|
|
321
|
+
纯配置驱动的动态表单组件，支持 10+ 种表单控件类型，内置校验、字段联动、异步选项加载等能力。
|
|
322
|
+
|
|
323
|
+
```
|
|
324
|
+
┌─────────────────────────────────────────┐
|
|
325
|
+
│ [标签1] [____输入框____] │
|
|
326
|
+
│ [标签2] [▼ 下拉选择__] │
|
|
327
|
+
│ [标签3] [📅 2024-01-01] │
|
|
328
|
+
│ [标签4] ○ 选项A ○ 选项B │
|
|
329
|
+
│ [标签5] [====●======] 滑动条 │
|
|
330
|
+
│ [查询] [重置] │
|
|
331
|
+
└─────────────────────────────────────────┘
|
|
332
|
+
```
|
|
333
|
+
|
|
334
|
+
#### Props
|
|
335
|
+
|
|
336
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
337
|
+
|------|------|--------|------|
|
|
338
|
+
| `value` (v-model) | `Object` | `{}` | 表单数据对象 |
|
|
339
|
+
| `data` | `Array` | `[]` | **必填**. 表单项配置数组 |
|
|
340
|
+
| `itemWidth` | `String` | `''` | 表单项默认宽度 |
|
|
341
|
+
| `showlabel` | `Boolean` | `true` | 是否显示标签 |
|
|
342
|
+
| `drawer` | `Boolean` | `false` | 是否启用抽屉折叠模式 |
|
|
343
|
+
| `formProps` | `Object` | `{ inline: true }` | 传递给 `el-form` 的属性 |
|
|
344
|
+
| `formItemProps` | `Object` | `{}` | 传递给 `el-form-item` 的属性 |
|
|
345
|
+
| `freeData` | `Object` | `{}` | 额外合并到表单的数据 |
|
|
346
|
+
| `initItem` | `Function` | `() => {}` | 表单项初始化钩子 |
|
|
347
|
+
|
|
348
|
+
#### 表单项配置
|
|
349
|
+
|
|
350
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
351
|
+
|------|------|------|------|
|
|
352
|
+
| `type` | `String` | ✅ | 控件类型（见下表） |
|
|
353
|
+
| `model` | `String` | ✅ | 表单数据中的键名 |
|
|
354
|
+
| `label` | `String` | ✅ | 标签文本 |
|
|
355
|
+
| `value` | `Any` | - | 默认值 |
|
|
356
|
+
| `rules` | `Array` | - | Element UI 校验规则 |
|
|
357
|
+
| `options` | `Array` | - | 静态选项 `[{ label, value }]` |
|
|
358
|
+
| `props` | `Object` | - | 传递给底层控件的 props |
|
|
359
|
+
| `privateProps` | `Object` | - | 额外 props（如 datePicker 的 `type: 'daterange'`） |
|
|
360
|
+
| `privateAttrs` | `Object` | - | 额外属性（如 input 的 `type: 'textarea'`） |
|
|
361
|
+
| `labelKey`/`valueKey` | `String` | - | 自定义选项键名（默认 `label`/`value`） |
|
|
362
|
+
| `callback` | `Function(value)` | - | **散列函数**：将值拆分到多个字段 |
|
|
363
|
+
| `linkSet` | `Function(value)` | - | **联动函数**：值变化时联动其他字段 |
|
|
364
|
+
| `show` | `Boolean/Function` | - | 条件显示 |
|
|
365
|
+
| `asycnOptions` | `Function` | - | 异步加载选项（返回 Promise） |
|
|
366
|
+
| `slotName` | `String` | - | `type: 'slot'` 时的具名插槽 |
|
|
367
|
+
| `labelTips` | `String` | - | 标签旁的提示文字 |
|
|
368
|
+
| `remark` | `String` | - | 控件下方红色备注文字 |
|
|
369
|
+
| `width` | `String` | - | 当前项宽度覆盖 |
|
|
370
|
+
| `style` | `String` | - | 内联样式 |
|
|
371
|
+
| `className` | `String` | - | CSS 类名 |
|
|
372
|
+
| `slots` | `Object` | - | select 控件的自定义 scoped slots |
|
|
373
|
+
|
|
374
|
+
#### 支持的控件类型
|
|
375
|
+
|
|
376
|
+
| `type` 值 | 对应 Element UI 组件 | 说明 |
|
|
377
|
+
|-----------|---------------------|------|
|
|
378
|
+
| `input` | `el-input` | 文本输入框 |
|
|
379
|
+
| `select` | `el-select` | 下拉选择器 |
|
|
380
|
+
| `datePicker` | `el-date-picker` | 日期选择器 |
|
|
381
|
+
| `radio` | `el-radio-group` | 单选框组 |
|
|
382
|
+
| `switch` | `el-switch` | 开关 |
|
|
383
|
+
| `checkbox` | `el-checkbox-group` | 多选框组 |
|
|
384
|
+
| `rangeInput` | `el-input` ×2 | 范围输入（起始~结束） |
|
|
385
|
+
| `slider` | `el-slider` | 滑块 |
|
|
386
|
+
| `inputNumber` | `el-input-number` | 数字输入框 |
|
|
387
|
+
| `title` | `<h3>` | 分组标题 |
|
|
388
|
+
| `slot` | 自定义插槽 | 完全自定义内容 |
|
|
389
|
+
|
|
390
|
+
#### Slots
|
|
391
|
+
|
|
392
|
+
| 插槽名 | 说明 |
|
|
393
|
+
|--------|------|
|
|
394
|
+
| `default` | 抽屉模式下的额外内容（如操作按钮） |
|
|
395
|
+
| 动态具名插槽 | 对应 `slotName` 配置的自定义内容 |
|
|
396
|
+
|
|
397
|
+
#### Ref 方法
|
|
398
|
+
|
|
399
|
+
| 方法 | 说明 |
|
|
400
|
+
|------|------|
|
|
401
|
+
| `reset()` | 重置表单为初始值 |
|
|
402
|
+
| `validate()` | 执行表单校验 |
|
|
403
|
+
| `submit()` | 校验通过后 resolve 表单数据，失败 reject |
|
|
404
|
+
| `setItemValue(item)` | 设置单个表单项的值 |
|
|
405
|
+
|
|
406
|
+
#### Events
|
|
407
|
+
|
|
408
|
+
| 事件名 | 载荷 | 说明 |
|
|
409
|
+
|--------|------|------|
|
|
410
|
+
| `input` | 表单数据对象 | v-model 双向绑定 |
|
|
411
|
+
|
|
412
|
+
#### 使用示例
|
|
413
|
+
|
|
414
|
+
```vue
|
|
415
|
+
<template>
|
|
416
|
+
<sl-form ref="form" v-model="formData" :data="formItems" />
|
|
417
|
+
</template>
|
|
418
|
+
|
|
419
|
+
<script>
|
|
420
|
+
export default {
|
|
421
|
+
data() {
|
|
422
|
+
return {
|
|
423
|
+
formData: {},
|
|
424
|
+
formItems: [
|
|
425
|
+
{
|
|
426
|
+
type: 'input',
|
|
427
|
+
model: 'name',
|
|
428
|
+
label: '名称',
|
|
429
|
+
value: '',
|
|
430
|
+
rules: [{ required: true, message: '请输入名称', trigger: 'blur' }]
|
|
431
|
+
},
|
|
432
|
+
{
|
|
433
|
+
type: 'select',
|
|
434
|
+
model: 'type',
|
|
435
|
+
label: '类型',
|
|
436
|
+
value: '',
|
|
437
|
+
options: [
|
|
438
|
+
{ label: '类型A', value: 'A' },
|
|
439
|
+
{ label: '类型B', value: 'B' }
|
|
440
|
+
]
|
|
441
|
+
},
|
|
442
|
+
{
|
|
443
|
+
type: 'datePicker',
|
|
444
|
+
model: 'dateRange',
|
|
445
|
+
label: '日期范围',
|
|
446
|
+
value: [],
|
|
447
|
+
privateProps: { type: 'daterange' },
|
|
448
|
+
// 散列函数：将日期范围拆分为 beginDate 和 endDate
|
|
449
|
+
callback: (val) => {
|
|
450
|
+
return val ? { beginDate: val[0], endDate: val[1] } : {}
|
|
451
|
+
}
|
|
452
|
+
},
|
|
453
|
+
{
|
|
454
|
+
type: 'title',
|
|
455
|
+
model: 'divider',
|
|
456
|
+
label: '更多信息'
|
|
457
|
+
}
|
|
458
|
+
]
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
}
|
|
462
|
+
</script>
|
|
463
|
+
```
|
|
464
|
+
|
|
465
|
+
---
|
|
466
|
+
|
|
467
|
+
### 💬 SlDialog —— 函数式对话框
|
|
468
|
+
|
|
469
|
+
通过 JavaScript 函数调用打开对话框，无需在模板中声明。支持两种模式：
|
|
470
|
+
|
|
471
|
+
```
|
|
472
|
+
调用 createCommandDialog(options)
|
|
473
|
+
│
|
|
474
|
+
▼
|
|
475
|
+
┌──────────────────────────────┐
|
|
476
|
+
│ 对话框标题 [✕] │
|
|
477
|
+
├──────────────────────────────┤
|
|
478
|
+
│ │
|
|
479
|
+
│ <自定义内容组件> │
|
|
480
|
+
│ │
|
|
481
|
+
├──────────────────────────────┤
|
|
482
|
+
│ [取消] [确定] │
|
|
483
|
+
└──────────────────────────────┘
|
|
484
|
+
```
|
|
485
|
+
|
|
486
|
+
#### createCommandDialog
|
|
487
|
+
|
|
488
|
+
```js
|
|
489
|
+
import { createCommandDialog } from 'ylwl-cpsComs'
|
|
490
|
+
|
|
491
|
+
const dialog = createCommandDialog(options)
|
|
492
|
+
```
|
|
493
|
+
|
|
494
|
+
**Options：**
|
|
495
|
+
|
|
496
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
497
|
+
|------|------|--------|------|
|
|
498
|
+
| `title` | `String` | `'提示'` | 对话框标题 |
|
|
499
|
+
| `width` | `String` | `'50%'` | 宽度（移动端自动 90%） |
|
|
500
|
+
| `specialWidth` | `String` | `''` | 特殊宽度（优先级高于 width） |
|
|
501
|
+
| `closeOnClickModal` | `Boolean` | `false` | 点击遮罩关闭 |
|
|
502
|
+
| `contentComponent` | `VueComponent` | - | **必填**. 内容组件 |
|
|
503
|
+
| `contentProps` | `Object` | `{}` | 传递给内容组件的 props |
|
|
504
|
+
| `footerBtns` | `Array` | `[]` | 自定义底部按钮 |
|
|
505
|
+
| `cancelButtonText` | `String` | `'取消'` | 取消按钮文字 |
|
|
506
|
+
| `confirmButtonText` | `String` | `'确定'` | 确定按钮文字 |
|
|
507
|
+
| `isShowBtn` | `Boolean` | `true` | 是否显示底部按钮区 |
|
|
508
|
+
| `showClose` | `Boolean` | `true` | 是否显示关闭图标 |
|
|
509
|
+
| `closeOnPressEscape` | `Boolean` | `false` | 按 ESC 关闭 |
|
|
510
|
+
| `customClass` | `String` | `''` | 自定义 CSS 类名 |
|
|
511
|
+
| `onConfirm` | `Function` | - | 确认回调 |
|
|
512
|
+
| `onCancel` | `Function` | - | 取消回调 |
|
|
513
|
+
| `onClose` | `Function` | - | 关闭回调 |
|
|
514
|
+
|
|
515
|
+
**内容组件约定：**
|
|
516
|
+
- 可定义 `confirm()` 方法，返回 `false` 阻止关闭
|
|
517
|
+
- 可 emit `onConfirm` / `onClose` 事件
|
|
518
|
+
|
|
519
|
+
**使用示例：**
|
|
520
|
+
|
|
521
|
+
```js
|
|
522
|
+
// 内容组件 MyForm.vue
|
|
523
|
+
export default {
|
|
524
|
+
props: ['rowData'],
|
|
525
|
+
methods: {
|
|
526
|
+
confirm() {
|
|
527
|
+
// 返回 false 阻止对话框关闭
|
|
528
|
+
if (!this.formValid) {
|
|
529
|
+
this.$message.warning('请完善表单')
|
|
530
|
+
return false
|
|
531
|
+
}
|
|
532
|
+
}
|
|
533
|
+
}
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
// 调用对话框
|
|
537
|
+
import MyForm from './MyForm.vue'
|
|
538
|
+
createCommandDialog({
|
|
539
|
+
title: '编辑信息',
|
|
540
|
+
width: '600px',
|
|
541
|
+
contentComponent: MyForm,
|
|
542
|
+
contentProps: { rowData: { name: '张三' } },
|
|
543
|
+
onConfirm: () => { this.$message.success('保存成功') }
|
|
544
|
+
})
|
|
545
|
+
```
|
|
546
|
+
|
|
547
|
+
#### createCommandDialogPlus
|
|
548
|
+
|
|
549
|
+
增强版对话框，内容组件完全控制底部按钮：
|
|
550
|
+
|
|
551
|
+
```js
|
|
552
|
+
import { createCommandDialogPlus } from 'ylwl-cpsComs'
|
|
553
|
+
|
|
554
|
+
createCommandDialogPlus({
|
|
555
|
+
title: '编辑信息',
|
|
556
|
+
width: '600px',
|
|
557
|
+
contentComponent: MyForm,
|
|
558
|
+
contentProps: { rowData: {} }
|
|
559
|
+
})
|
|
560
|
+
```
|
|
561
|
+
|
|
562
|
+
内容组件内部使用 `<dialog-footer>` 包裹按钮，按钮会自动渲染到对话框底部插槽：
|
|
563
|
+
|
|
564
|
+
```vue
|
|
565
|
+
<!-- MyForm.vue -->
|
|
566
|
+
<template>
|
|
567
|
+
<div>
|
|
568
|
+
<el-form :model="form">...</el-form>
|
|
569
|
+
|
|
570
|
+
<dialog-footer>
|
|
571
|
+
<el-button @click="$emit('close')">取消</el-button>
|
|
572
|
+
<el-button type="primary" @click="handleSubmit">保存</el-button>
|
|
573
|
+
</dialog-footer>
|
|
574
|
+
</div>
|
|
575
|
+
</template>
|
|
576
|
+
```
|
|
577
|
+
|
|
578
|
+
---
|
|
579
|
+
|
|
580
|
+
### 🗂 SlDrawer —— 函数式抽屉
|
|
581
|
+
|
|
582
|
+
```js
|
|
583
|
+
import { createCommandDrawer } from 'ylwl-cpsComs'
|
|
584
|
+
|
|
585
|
+
createCommandDrawer({
|
|
586
|
+
title: '详情',
|
|
587
|
+
size: '40%',
|
|
588
|
+
direction: 'rtl', // 'rtl' 右侧滑出 | 'ltr' 左侧滑出
|
|
589
|
+
contentComponent: DetailPanel,
|
|
590
|
+
contentProps: { id: 123 },
|
|
591
|
+
contentListeners: {
|
|
592
|
+
saved: () => { /* ... */ }
|
|
593
|
+
},
|
|
594
|
+
closeDrawer: () => { /* ... */ }
|
|
595
|
+
})
|
|
596
|
+
```
|
|
597
|
+
|
|
598
|
+
| 参数 | 类型 | 说明 |
|
|
599
|
+
|------|------|------|
|
|
600
|
+
| `title` | `String` | 抽屉标题 |
|
|
601
|
+
| `size` | `String` | 宽度，如 `'30%'`、`'50%'` |
|
|
602
|
+
| `direction` | `String` | `'rtl'`（右→左）或 `'ltr'`（左→右） |
|
|
603
|
+
| `contentComponent` | `VueComponent` | 内容组件 |
|
|
604
|
+
| `contentProps` | `Object` | 内容组件 props |
|
|
605
|
+
| `contentListeners` | `Object` | 内容组件事件监听 |
|
|
606
|
+
| `closeDrawer` | `Function` | 关闭回调 |
|
|
607
|
+
|
|
608
|
+
---
|
|
609
|
+
|
|
610
|
+
### 📝 SlDescriptions —— 描述列表
|
|
611
|
+
|
|
612
|
+
数据驱动的描述列表组件，基于 `el-descriptions` 封装。
|
|
613
|
+
|
|
614
|
+
```vue
|
|
615
|
+
<sl-descriptions
|
|
616
|
+
:render-data="renderData"
|
|
617
|
+
:el-table-props="{ column: 3, size: 'small', border: true }"
|
|
618
|
+
/>
|
|
619
|
+
```
|
|
620
|
+
|
|
621
|
+
#### Props
|
|
622
|
+
|
|
623
|
+
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
|
624
|
+
|------|------|------|--------|------|
|
|
625
|
+
| `renderData` | `Object` | ✅ | - | `{ data: {...}, model: [...] }` |
|
|
626
|
+
| `elTableProps` | `Object` | - | `{ size: 'small', column: 2 }` | el-descriptions 属性 |
|
|
627
|
+
|
|
628
|
+
#### renderData.model 项配置
|
|
629
|
+
|
|
630
|
+
| 字段 | 类型 | 说明 |
|
|
631
|
+
|------|------|------|
|
|
632
|
+
| `prop` | `String` | 数据字段名 |
|
|
633
|
+
| `label` | `String` | 显示标签 |
|
|
634
|
+
| `format` | `Function(h, data)` | 自定义格式化函数 |
|
|
635
|
+
| `template` | `String` | 具名插槽名称 |
|
|
636
|
+
| `isShow` | `Boolean/Function(data)` | 条件显示 |
|
|
637
|
+
|
|
638
|
+
#### 使用示例
|
|
639
|
+
|
|
640
|
+
```js
|
|
641
|
+
// 模板
|
|
642
|
+
<sl-descriptions :render-data="renderData">
|
|
643
|
+
<template #statusTag="{ data }">
|
|
644
|
+
<el-tag :type="data.status === 1 ? 'success' : 'danger'">
|
|
645
|
+
{{ data.status === 1 ? '正常' : '异常' }}
|
|
646
|
+
</el-tag>
|
|
647
|
+
</template>
|
|
648
|
+
</sl-descriptions>
|
|
649
|
+
|
|
650
|
+
// 数据
|
|
651
|
+
renderData: {
|
|
652
|
+
data: { name: '张三', age: 28, status: 1, remark: '备注信息' },
|
|
653
|
+
model: [
|
|
654
|
+
{ prop: 'name', label: '姓名' },
|
|
655
|
+
{ prop: 'age', label: '年龄' },
|
|
656
|
+
{ prop: 'status', label: '状态', template: 'statusTag' },
|
|
657
|
+
{
|
|
658
|
+
prop: 'remark',
|
|
659
|
+
label: '备注',
|
|
660
|
+
format: (h, data) => data.remark ? h('span', data.remark) : h('span', { style: { color: '#999' } }, '无')
|
|
661
|
+
}
|
|
662
|
+
]
|
|
663
|
+
}
|
|
664
|
+
```
|
|
665
|
+
|
|
666
|
+
---
|
|
667
|
+
|
|
668
|
+
### 🏷 SlTitle —— 章节标题
|
|
669
|
+
|
|
670
|
+
简洁的页面区块标题组件，左侧蓝色竖条装饰，右侧动作插槽。
|
|
671
|
+
|
|
672
|
+
```
|
|
673
|
+
┃ 用户列表 [新增] [导出]
|
|
674
|
+
```
|
|
675
|
+
|
|
676
|
+
```vue
|
|
677
|
+
<sl-title title="用户列表">
|
|
678
|
+
<el-button type="primary" size="small">新增</el-button>
|
|
679
|
+
<el-button size="small">导出</el-button>
|
|
680
|
+
</sl-title>
|
|
681
|
+
```
|
|
682
|
+
|
|
683
|
+
| Props | 类型 | 默认值 | 说明 |
|
|
684
|
+
|-------|------|--------|------|
|
|
685
|
+
| `title` | `String` | `''` | 标题文字 |
|
|
686
|
+
|
|
687
|
+
| Slot | 说明 |
|
|
688
|
+
|------|------|
|
|
689
|
+
| `default` | 右侧内容区域（通常放操作按钮） |
|
|
690
|
+
|
|
691
|
+
---
|
|
692
|
+
|
|
693
|
+
### ⚠️ SlAlert —— 温馨提示
|
|
694
|
+
|
|
695
|
+
折叠/展开的提示信息条，桌面端默认展开，移动端默认折叠。
|
|
696
|
+
|
|
697
|
+
```
|
|
698
|
+
┌──────────────────────────────────────────────┐
|
|
699
|
+
│ ⚠ 温馨提示 [展开▲] │
|
|
700
|
+
├──────────────────────────────────────────────┤
|
|
701
|
+
│ 1. 请确认信息填写无误 │
|
|
702
|
+
│ 2. 提交后将无法修改 │
|
|
703
|
+
└──────────────────────────────────────────────┘
|
|
704
|
+
```
|
|
705
|
+
|
|
706
|
+
```vue
|
|
707
|
+
<sl-alert>
|
|
708
|
+
<template #message>
|
|
709
|
+
<p>1. 请确认信息填写无误</p>
|
|
710
|
+
<p>2. 提交后将无法修改</p>
|
|
711
|
+
</template>
|
|
712
|
+
<template #operate>
|
|
713
|
+
<el-button type="text" size="mini">查看帮助</el-button>
|
|
714
|
+
</template>
|
|
715
|
+
</sl-alert>
|
|
716
|
+
```
|
|
717
|
+
|
|
718
|
+
| Slot | 说明 |
|
|
719
|
+
|------|------|
|
|
720
|
+
| `message` | 提示信息内容 |
|
|
721
|
+
| `operate` | 标题栏右侧操作区 |
|
|
722
|
+
|
|
723
|
+
---
|
|
724
|
+
|
|
725
|
+
### 🗺 SlGuide —— 引导漫游
|
|
726
|
+
|
|
727
|
+
基于 [Shepherd.js](https://shepherdjs.dev/) 的用户引导组件。**需单独安装 `shepherd.js`**。
|
|
728
|
+
|
|
729
|
+
```bash
|
|
730
|
+
npm install shepherd.js
|
|
731
|
+
```
|
|
732
|
+
|
|
733
|
+
```vue
|
|
734
|
+
<sl-guide :steps="guideSteps" :options="guideOptions" />
|
|
735
|
+
```
|
|
736
|
+
|
|
737
|
+
#### Props
|
|
738
|
+
|
|
739
|
+
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
|
740
|
+
|------|------|------|--------|------|
|
|
741
|
+
| `steps` | `Array` | ✅ | - | 引导步骤配置 |
|
|
742
|
+
| `options` | `Object` | - | `{}` | Shepherd.Tour 配置 |
|
|
743
|
+
| `onNext` | `Function` | - | `() => {}` | 下一步回调 |
|
|
744
|
+
|
|
745
|
+
#### 步骤配置
|
|
746
|
+
|
|
747
|
+
```js
|
|
748
|
+
[
|
|
749
|
+
{
|
|
750
|
+
id: 'step-1',
|
|
751
|
+
title: '欢迎使用',
|
|
752
|
+
text: '这是一个引导示例',
|
|
753
|
+
attachTo: { element: '.target-element', on: 'bottom' },
|
|
754
|
+
buttons: [
|
|
755
|
+
{ text: '跳过', actionType: 'cancel', classes: 'shepherd-button-secondary' },
|
|
756
|
+
{ text: '下一步', actionType: 'next' }
|
|
757
|
+
]
|
|
758
|
+
},
|
|
759
|
+
{
|
|
760
|
+
id: 'step-2',
|
|
761
|
+
title: '操作区',
|
|
762
|
+
text: '点击这里进行常用操作',
|
|
763
|
+
attachTo: { element: '.action-bar', on: 'top' },
|
|
764
|
+
buttons: [
|
|
765
|
+
{ text: '上一步', actionType: 'back' },
|
|
766
|
+
{ text: '完成', actionType: 'complete' }
|
|
767
|
+
]
|
|
768
|
+
}
|
|
769
|
+
]
|
|
770
|
+
```
|
|
771
|
+
|
|
772
|
+
---
|
|
773
|
+
|
|
774
|
+
### 💬 SlMessageBox —— 确认消息框
|
|
775
|
+
|
|
776
|
+
Element UI `MessageBox.confirm` 的增强封装，支持异步 API 调用。
|
|
777
|
+
|
|
778
|
+
```js
|
|
779
|
+
import { showConfirmMessageBox } from 'ylwl-cpsComs'
|
|
780
|
+
|
|
781
|
+
showConfirmMessageBox({
|
|
782
|
+
title: '删除确认',
|
|
783
|
+
message: '确定要删除该数据吗？删除后不可恢复。',
|
|
784
|
+
confirmButtonText: '确认删除',
|
|
785
|
+
type: 'warning',
|
|
786
|
+
api: deleteApi, // 确认后调用的 API
|
|
787
|
+
params: { id: 123 }, // API 参数
|
|
788
|
+
successMessage: '删除成功',
|
|
789
|
+
onConfirm: () => { this.refresh() },
|
|
790
|
+
onCancel: () => { console.log('取消删除') }
|
|
791
|
+
})
|
|
792
|
+
```
|
|
793
|
+
|
|
794
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
795
|
+
|------|------|--------|------|
|
|
796
|
+
| `title` | `String` | `'提示'` | 标题 |
|
|
797
|
+
| `message` | `String` | - | 提示内容 |
|
|
798
|
+
| `confirmButtonText` | `String` | `'确定'` | 确认按钮文字 |
|
|
799
|
+
| `cancelButtonText` | `String` | `'取消'` | 取消按钮文字 |
|
|
800
|
+
| `type` | `String` | `'warning'` | 消息类型 |
|
|
801
|
+
| `successMessage` | `String` | `'操作成功'` | 成功提示 |
|
|
802
|
+
| `api` | `Function` | - | 异步 API 函数 |
|
|
803
|
+
| `params` | `Any` | - | API 参数 |
|
|
804
|
+
| `onConfirm` | `Function` | - | 确认回调 |
|
|
805
|
+
| `onCancel` | `Function` | - | 取消回调 |
|
|
806
|
+
|
|
807
|
+
**执行流程：**
|
|
808
|
+
|
|
809
|
+
```
|
|
810
|
+
弹出确认框 → 用户点击确认 → 执行 api(params) → onConfirm() → 弹出成功提示
|
|
811
|
+
↘ 用户点击取消 → onCancel()
|
|
812
|
+
```
|
|
813
|
+
|
|
814
|
+
---
|
|
815
|
+
|
|
816
|
+
### ✏️ DtTable —— 可编辑表格
|
|
817
|
+
|
|
818
|
+
支持行内编辑的数据表格，内置 10 种编辑器类型、校验、联动、异步选项等。
|
|
819
|
+
|
|
820
|
+
```
|
|
821
|
+
┌────┬──────────┬──────────┬─────────┬──────┐
|
|
822
|
+
│ ☐ │ [输入框] │ [下拉框] │ [开关] │ 操作 │
|
|
823
|
+
├────┼──────────┼──────────┼─────────┼──────┤
|
|
824
|
+
│ ☑ │ 值1 │ 类型A │ ● 开 │ 🗑 │
|
|
825
|
+
│ ☐ │ 值2 │ [▼选择] │ ○ 关 │ 🗑 │
|
|
826
|
+
└────┴──────────┴──────────┴─────────┴──────┘
|
|
827
|
+
```
|
|
828
|
+
|
|
829
|
+
#### Props
|
|
830
|
+
|
|
831
|
+
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
|
832
|
+
|------|------|------|--------|------|
|
|
833
|
+
| `gridOptions` | `Object` | ✅ | - | 表格配置（data、columns、actions） |
|
|
834
|
+
| `isDisabled` | `Boolean` | - | `false` | 全局禁用编辑 |
|
|
835
|
+
| `pagination` | `Object` | - | 见下方 | 分页配置 |
|
|
836
|
+
| `apiFunction` | `Function` | - | - | 远程数据 API（设置后启用远程分页） |
|
|
837
|
+
| `apiParams` | `Object` | - | - | API 额外参数 |
|
|
838
|
+
| `immediate` | `Boolean` | - | `false` | 挂载时自动加载数据 |
|
|
839
|
+
|
|
840
|
+
#### gridOptions 结构
|
|
841
|
+
|
|
842
|
+
| 字段 | 类型 | 说明 |
|
|
843
|
+
|------|------|------|
|
|
844
|
+
| `data` | `Array` | 表格数据（响应式） |
|
|
845
|
+
| `columns` | `Array` | 列定义 |
|
|
846
|
+
| `actions` | `Array` | 操作列按钮配置 |
|
|
847
|
+
| `scroll` | `Object` | `{ x: '1200px', y: 400 }` |
|
|
848
|
+
| `actionWidth` | `String` | 操作列宽 |
|
|
849
|
+
|
|
850
|
+
#### 列定义
|
|
851
|
+
|
|
852
|
+
| 字段 | 类型 | 说明 |
|
|
853
|
+
|------|------|------|
|
|
854
|
+
| `field` | `String` | 数据字段（`'selection'` 为多选列） |
|
|
855
|
+
| `title` | `String` | 列标题 |
|
|
856
|
+
| `hidden` | `Boolean` | 隐藏列 |
|
|
857
|
+
| `attrs` | `Object` | el-table-column 属性（width, fixed 等） |
|
|
858
|
+
| `editor` | `String` | 编辑器类型（见下表） |
|
|
859
|
+
| `placeholder` | `String` | 占位文字 |
|
|
860
|
+
| `options` | `Array` | 静态选项 |
|
|
861
|
+
| `rules` | `Array` | 校验规则 |
|
|
862
|
+
| `disabled` | `Boolean/Function(row, index)` | 条件禁用 |
|
|
863
|
+
| `events` | `Object` | 事件回调 `{ change, focus, blur, clear }` |
|
|
864
|
+
| `render` | `Function({row, h})` | 自定义渲染（`editor: 'custom'`） |
|
|
865
|
+
| `asyncOptions` | `Object` | 异步选项 `{ immediate, loadData(row) }` |
|
|
866
|
+
| `linkage` | `Object` | 联动配置 `{ targetField, method(value, row, type) }` |
|
|
867
|
+
|
|
868
|
+
#### 编辑器类型
|
|
869
|
+
|
|
870
|
+
| `editor` 值 | 说明 |
|
|
871
|
+
|------------|------|
|
|
872
|
+
| `input` | 文本输入 |
|
|
873
|
+
| `select` | 下拉选择 |
|
|
874
|
+
| `input-number` | 数字输入 |
|
|
875
|
+
| `switch` | 开关 |
|
|
876
|
+
| `time` | 时间选择 |
|
|
877
|
+
| `date` | 日期选择 |
|
|
878
|
+
| `datetime` | 日期时间选择 |
|
|
879
|
+
| `daterange` | 日期范围 |
|
|
880
|
+
| `custom` | 自定义渲染函数 |
|
|
881
|
+
| (不设置) | 纯文本显示 |
|
|
882
|
+
|
|
883
|
+
#### Ref 方法
|
|
884
|
+
|
|
885
|
+
| 方法 | 说明 |
|
|
886
|
+
|------|------|
|
|
887
|
+
| `validate()` | 校验所有行，通过 resolve，失败 reject |
|
|
888
|
+
| `resetFields()` | 重置所有字段 |
|
|
889
|
+
| `clearValidate()` | 清除校验状态 |
|
|
890
|
+
| `getSelection()` | 获取选中行 |
|
|
891
|
+
| `clearSelection()` / `toggleRowSelection(row, selected)` | 选择控制 |
|
|
892
|
+
| `scrollToBottom()` | 滚动到底部 |
|
|
893
|
+
| `refresh(params)` | 刷新数据 |
|
|
894
|
+
|
|
895
|
+
#### Events
|
|
896
|
+
|
|
897
|
+
| 事件 | 载荷 | 说明 |
|
|
898
|
+
|------|------|------|
|
|
899
|
+
| `page-change` | `page` | 页码变化 |
|
|
900
|
+
| `size-change` | `size` | 每页条数变化 |
|
|
901
|
+
| `update:pagination` | `pagination` | 分页更新（支持 .sync） |
|
|
902
|
+
| `action-click` | `button, row, index` | 操作按钮点击 |
|
|
903
|
+
| `validate-error` | `error` | 校验失败 |
|
|
904
|
+
| `selection-change` | `selection` | 选中行变化 |
|
|
905
|
+
| `linkage-change` | `{ sourceField, targetField, ... }` | 联动数据加载完成 |
|
|
906
|
+
|
|
907
|
+
---
|
|
908
|
+
|
|
909
|
+
## 🛠 工具函数
|
|
910
|
+
|
|
911
|
+
```js
|
|
912
|
+
import {
|
|
913
|
+
typeOf,
|
|
914
|
+
hasKey,
|
|
915
|
+
filterKey,
|
|
916
|
+
transformName,
|
|
917
|
+
generateUniqueId,
|
|
918
|
+
getValueByPath,
|
|
919
|
+
isMobileDevice
|
|
920
|
+
} from 'ylwl-cpsComs'
|
|
921
|
+
```
|
|
922
|
+
|
|
923
|
+
| 函数 | 签名 | 说明 |
|
|
924
|
+
|------|------|------|
|
|
925
|
+
| `typeOf` | `(fn, type) => boolean` | 判断 `typeof fn === type` |
|
|
926
|
+
| `hasKey` | `(obj, keys) => boolean` | 判断对象是否包含指定属性（支持单个或数组） |
|
|
927
|
+
| `filterKey` | `(obj, filterKeys) => object` | 从对象中排除指定 key 后返回新对象 |
|
|
928
|
+
| `transformName` | `(str) => string` | kebab-case → PascalCase（`'range-input'` → `'RangeInput'`） |
|
|
929
|
+
| `generateUniqueId` | `(input) => string` | 生成 SHA-256 + Base64 的唯一ID |
|
|
930
|
+
| `getValueByPath` | `(obj, path) => any` | 按路径获取嵌套值（支持逗号分隔字符串或数组） |
|
|
931
|
+
| `isMobileDevice` | `() => boolean` | 判断当前是否为移动设备 |
|
|
932
|
+
|
|
933
|
+
---
|
|
934
|
+
|
|
935
|
+
## 🔧 开发
|
|
936
|
+
|
|
937
|
+
### 环境要求
|
|
938
|
+
|
|
939
|
+
- **Node.js** ≥ 18.0.0
|
|
940
|
+
- **npm** / **yarn** / **pnpm**
|
|
941
|
+
|
|
942
|
+
### 脚本命令
|
|
943
|
+
|
|
944
|
+
| 命令 | 说明 |
|
|
945
|
+
|------|------|
|
|
946
|
+
| `npm run dev` | 启动 Vite 开发服务器 |
|
|
947
|
+
| `npm run build` | 清理 + 构建 ESM 产物 |
|
|
948
|
+
| `npm run build:fast` | 快速构建 ESM（跳过清理） |
|
|
949
|
+
| `npm run build:esm` | 构建 ESM 格式 → `es/` |
|
|
950
|
+
| `npm run build:cjs` | 构建 CJS 格式 → `lib/` |
|
|
951
|
+
| `npm run build:umd` | 构建 UMD 格式 → `dist/` |
|
|
952
|
+
| `npm run lint` | ESLint 检查 |
|
|
953
|
+
| `npm run lint:fix` | ESLint 检查 + 自动修复 |
|
|
954
|
+
| `npm run format` | Prettier 格式化 |
|
|
955
|
+
| `npm run format:check` | Prettier 格式检查 |
|
|
956
|
+
| `npm run test` | 运行单元测试 |
|
|
957
|
+
| `npm run test:watch` | 监听模式运行测试 |
|
|
958
|
+
| `npm run storybook` | 启动 Storybook（端口 6006） |
|
|
959
|
+
| `npm run build-storybook` | 构建 Storybook 静态站点 |
|
|
960
|
+
|
|
961
|
+
### 构建产物
|
|
962
|
+
|
|
963
|
+
```
|
|
964
|
+
ylwl-cpscoms/
|
|
965
|
+
├── es/ # ESM 格式（tree-shaking 友好）
|
|
966
|
+
│ ├── index.js
|
|
967
|
+
│ ├── SlPage/
|
|
968
|
+
│ ├── SlTable/
|
|
969
|
+
│ └── ...
|
|
970
|
+
├── lib/ # CommonJS 格式
|
|
971
|
+
│ ├── index.js
|
|
972
|
+
│ └── ...
|
|
973
|
+
└── dist/ # UMD 格式（CDN 使用）
|
|
974
|
+
└── cpsb-components.umd.min.js
|
|
975
|
+
```
|
|
976
|
+
|
|
977
|
+
### CDN 使用
|
|
978
|
+
|
|
979
|
+
```html
|
|
980
|
+
<!-- 依赖 -->
|
|
981
|
+
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
|
|
982
|
+
<script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>
|
|
983
|
+
|
|
984
|
+
<!-- 本组件库 -->
|
|
985
|
+
<script src="https://unpkg.com/ylwl-cpscoms/dist/cpsb-components.umd.min.js"></script>
|
|
986
|
+
```
|
|
987
|
+
|
|
988
|
+
---
|
|
989
|
+
|
|
990
|
+
## 📁 项目结构
|
|
991
|
+
|
|
992
|
+
```
|
|
993
|
+
src/
|
|
994
|
+
├── index.js # 入口文件（install + 导出）
|
|
995
|
+
├── global.css # 全局样式
|
|
996
|
+
│
|
|
997
|
+
├── SlAlert/ # 温馨提示组件
|
|
998
|
+
│ ├── index.vue
|
|
999
|
+
│ └── *.stories.js
|
|
1000
|
+
├── SlDescriptions/ # 描述列表组件
|
|
1001
|
+
│ ├── index.vue
|
|
1002
|
+
│ ├── renderOptions.vue
|
|
1003
|
+
│ └── *.stories.js
|
|
1004
|
+
├── SlDialog/ # 函数式对话框
|
|
1005
|
+
│ ├── index.js # createCommandDialog
|
|
1006
|
+
│ ├── dialogPlus.js # createCommandDialogPlus
|
|
1007
|
+
│ └── *.stories.js
|
|
1008
|
+
├── SlDrawer/ # 函数式抽屉
|
|
1009
|
+
│ ├── index.js
|
|
1010
|
+
│ └── *.stories.js
|
|
1011
|
+
├── SlForm/ # 动态表单
|
|
1012
|
+
│ ├── index.vue
|
|
1013
|
+
│ ├── otherItem/
|
|
1014
|
+
│ │ └── titleItem.vue
|
|
1015
|
+
│ └── *.stories.js
|
|
1016
|
+
├── SlGuide/ # 引导漫游
|
|
1017
|
+
│ ├── index.vue
|
|
1018
|
+
│ └── *.stories.js
|
|
1019
|
+
├── SlMessageBox/ # 确认消息框
|
|
1020
|
+
│ ├── index.js
|
|
1021
|
+
│ └── *.stories.js
|
|
1022
|
+
├── SlPage/ # 通用CRUD页面
|
|
1023
|
+
│ ├── index.vue
|
|
1024
|
+
│ └── *.stories.js
|
|
1025
|
+
├── SlTable/ # 业务表格
|
|
1026
|
+
│ ├── index.vue
|
|
1027
|
+
│ ├── components/
|
|
1028
|
+
│ │ └── colSetting.vue
|
|
1029
|
+
│ └── *.stories.js
|
|
1030
|
+
├── SlTitle/ # 章节标题
|
|
1031
|
+
│ ├── index.vue
|
|
1032
|
+
│ └── *.stories.js
|
|
1033
|
+
├── DtTable/ # 可编辑表格
|
|
1034
|
+
│ ├── index.vue
|
|
1035
|
+
│ └── *.stories.js
|
|
1036
|
+
│
|
|
1037
|
+
├── utils/ # 工具函数
|
|
1038
|
+
│ ├── index.js
|
|
1039
|
+
│ └── tableConfig.js # 表格列配置 localStorage 持久化
|
|
1040
|
+
│
|
|
1041
|
+
└── store/ # 简易 store
|
|
1042
|
+
└── index.js
|
|
1043
|
+
```
|
|
1044
|
+
|
|
1045
|
+
---
|
|
1046
|
+
|
|
1047
|
+
## 🎯 组件选用指南
|
|
1048
|
+
|
|
1049
|
+
| 场景 | 推荐组件 | 说明 |
|
|
1050
|
+
|------|----------|------|
|
|
1051
|
+
| 标准列表页（搜索+表格+分页） | `SlPage` | 开箱即用的一体化方案 |
|
|
1052
|
+
| 仅需带分页的表格 | `SlTable` | 独立表格，自行管理搜索 |
|
|
1053
|
+
| 表单弹窗（新增/编辑） | `createCommandDialog` / `createCommandDialogPlus` | 函数式调用，不污染模板 |
|
|
1054
|
+
| 详情侧边栏 | `createCommandDrawer` | 从右侧滑出的详情面板 |
|
|
1055
|
+
| 详情页信息展示 | `SlDescriptions` | 数据驱动，支持自定义格式 |
|
|
1056
|
+
| 动态表单 | `SlForm` | 配置驱动，支持联动和异步 |
|
|
1057
|
+
| 批量编辑表格 | `DtTable` | 行内编辑，支持多种控件 |
|
|
1058
|
+
| 用户引导/新手指引 | `SlGuide` | Shepherd.js 封装 |
|
|
1059
|
+
| 删除/操作确认 | `showConfirmMessageBox` | 增强版 MessageBox |
|
|
1060
|
+
| 页面区块标题 | `SlTitle` | 带蓝色装饰条的标题 |
|
|
1061
|
+
| 页面级提示语 | `SlAlert` | 折叠提示，移动端友好 |
|
|
1062
|
+
|
|
1063
|
+
---
|
|
1064
|
+
|
|
1065
|
+
## 📄 License
|
|
1066
|
+
|
|
1067
|
+
MIT © CPSB
|
|
@@ -2,7 +2,7 @@ import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelH
|
|
|
2
2
|
import Vue from 'vue';
|
|
3
3
|
import { isMobileDevice } from '../utils/index.js';
|
|
4
4
|
|
|
5
|
-
//
|
|
5
|
+
// 注册一个全局的辅助组件，充当“传送门”（Portal）
|
|
6
6
|
if (!Vue.component('dialog-footer')) {
|
|
7
7
|
Vue.component('dialog-footer', {
|
|
8
8
|
inject: {
|
package/es/SlForm/index.vue.js
CHANGED
|
@@ -9,7 +9,7 @@ var __vue_script__ = script;
|
|
|
9
9
|
/* style */
|
|
10
10
|
var __vue_inject_styles__ = undefined;
|
|
11
11
|
/* scoped */
|
|
12
|
-
var __vue_scope_id__ = "data-v-
|
|
12
|
+
var __vue_scope_id__ = "data-v-2a58c090";
|
|
13
13
|
/* module identifier */
|
|
14
14
|
var __vue_module_identifier__ = undefined;
|
|
15
15
|
/* functional template */
|
package/es/SlForm/index.vue2.js
CHANGED
|
@@ -330,7 +330,7 @@ var script = {
|
|
|
330
330
|
drawer = _this$$props3.drawer;
|
|
331
331
|
// console.log('render', this.initData)
|
|
332
332
|
var updateInitData = this.initData.filter(function (item) {
|
|
333
|
-
if (item.show === undefined || item.show === null || typeOf(item.show, 'function') && item.show() || typeOf(item.show, 'boolean') && item.show) {
|
|
333
|
+
if (item.show === undefined || item.show === null || typeOf(item.show, 'function') && item.show(_this7.form) || typeOf(item.show, 'boolean') && item.show) {
|
|
334
334
|
return true;
|
|
335
335
|
}
|
|
336
336
|
return false;
|
package/es/SlForm/index.vue3.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".yl-form-item[data-v-
|
|
3
|
+
var css_248z = ".yl-form-item[data-v-2a58c090]{align-items:center;display:flex}[data-v-2a58c090] .el-form-item__content{display:flex;flex:1;margin:0!important}.yl-form-fullitem[data-v-2a58c090] .el-form-item__content{flex:1}.yl-form-item[data-v-2a58c090]{display:inline-flex!important}.yl-form-item .yl-form-item-grid[data-v-2a58c090] .el-form-item__content{font-size:0}.item-label[data-v-2a58c090]{display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;width:auto}.yl-form-box-shrink[data-v-2a58c090]{background-color:#f1f1f1;overflow:hidden;padding:10px}.yl-form-drawericon[data-v-2a58c090]{display:inline-block;vertical-align:top}.yl-form-drawericon-float[data-v-2a58c090]{background-image:linear-gradient(270deg,#ffa140,hsla(0,0%,100%,0));opacity:.9;padding:10px 10px 10px 80px;position:absolute;right:0;top:0;z-index:10}.yl-i-lebel[data-v-2a58c090]{background-color:#979797;border-radius:4px 4px 0 0;border-radius:0 4px 0 10px;color:#fff;font-size:12px;line-height:12px;padding:2px 8px 4px 10px;position:absolute;right:0;top:0;transform:scale(.8);transform-origin:100% 0;width:auto;z-index:5}.yl-r-icon[data-v-2a58c090]{color:red;left:0;line-height:35px;padding:5px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}.yl-form-slider[data-v-2a58c090]{border:1px solid #dcdfe6;border-radius:4px;display:flex;line-height:35px;padding:0 20px 0 10px}.yl-form-slider-span[data-v-2a58c090]{color:#c0c4cc;padding-right:15px}.yl-form-box[data-v-2a58c090]{border-radius:4px;position:relative;transition:all .2s ease-out;white-space:normal}.yl-form-item[data-v-2a58c090]{position:relative;white-space:nowrap}.yl-form-range-input[data-v-2a58c090]{border:1px solid #dcdfe6;border-radius:4px;padding:0 10px}.yl-form-range-input input[data-v-2a58c090]{border:none;border-radius:4px;height:100%;outline:none;padding:7px;text-align:center;width:70px}.yl-form-range-input input[data-v-2a58c090]::placeholder{color:#c0c4cc}.el-radio[data-v-2a58c090]{margin-bottom:0!important}";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
package/es/SlPage/index.vue.js
CHANGED
|
@@ -100,6 +100,7 @@ var __vue_render__ = function __vue_render__() {
|
|
|
100
100
|
attrs: {
|
|
101
101
|
"table-api": _vm.tableApi,
|
|
102
102
|
columns: _vm.tableColumns,
|
|
103
|
+
"is-show-pagination": _vm.isShowPagination,
|
|
103
104
|
"project-from": _vm.projectFrom,
|
|
104
105
|
params: _vm.form,
|
|
105
106
|
"filter-form": _vm.filterForm,
|
|
@@ -127,7 +128,7 @@ __vue_render__._withStripped = true;
|
|
|
127
128
|
/* style */
|
|
128
129
|
var __vue_inject_styles__ = undefined;
|
|
129
130
|
/* scoped */
|
|
130
|
-
var __vue_scope_id__ = "data-v-
|
|
131
|
+
var __vue_scope_id__ = "data-v-2b22724a";
|
|
131
132
|
/* module identifier */
|
|
132
133
|
var __vue_module_identifier__ = undefined;
|
|
133
134
|
/* functional template */
|
package/es/SlPage/index.vue2.js
CHANGED
package/es/SlPage/index.vue3.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".main-box[data-v-
|
|
3
|
+
var css_248z = ".main-box[data-v-2b22724a]{display:flex;flex-direction:column;height:100%;width:100%}.sl-form[data-v-2b22724a]{flex:1 0 1;transition:all .3s ease-in-out}.yl-form-box[data-v-2b22724a]{display:inline}.search-btn[data-v-2b22724a]{float:right;margin-left:20px}.fade-enter-active[data-v-2b22724a],.fade-leave-active[data-v-2b22724a]{transition:opacity .3s}.fade-enter[data-v-2b22724a],.fade-leave-to[data-v-2b22724a]{opacity:0}.sl-table-header[data-v-2b22724a]{display:flex;justify-content:space-between;margin:10px 0}";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -51,6 +51,9 @@ var __vue_render__ = function __vue_render__() {
|
|
|
51
51
|
key: "default",
|
|
52
52
|
fn: function fn(scope) {
|
|
53
53
|
return [_c("el-switch", {
|
|
54
|
+
attrs: {
|
|
55
|
+
disabled: scope.row.notAllowedToHide || false
|
|
56
|
+
},
|
|
54
57
|
on: {
|
|
55
58
|
change: _vm.changeTableColumn
|
|
56
59
|
},
|
|
@@ -74,7 +77,7 @@ __vue_render__._withStripped = true;
|
|
|
74
77
|
/* style */
|
|
75
78
|
var __vue_inject_styles__ = undefined;
|
|
76
79
|
/* scoped */
|
|
77
|
-
var __vue_scope_id__ = "data-v-
|
|
80
|
+
var __vue_scope_id__ = "data-v-3060c7a1";
|
|
78
81
|
/* module identifier */
|
|
79
82
|
var __vue_module_identifier__ = undefined;
|
|
80
83
|
/* functional template */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".sortable-ghost[data-v-
|
|
3
|
+
var css_248z = ".sortable-ghost[data-v-3060c7a1]{background:#f0f9eb;opacity:.8}";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ylwl-cpscoms",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "CPSB业务组件库 - Vue2 + Element UI通用业务组件",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -13,7 +13,11 @@
|
|
|
13
13
|
],
|
|
14
14
|
"sideEffects": [
|
|
15
15
|
"**/*.css",
|
|
16
|
-
"**/*.scss"
|
|
16
|
+
"**/*.scss",
|
|
17
|
+
"**/*.vue3.js",
|
|
18
|
+
"**/*.vue4.js",
|
|
19
|
+
"**/*.vue5.js",
|
|
20
|
+
"**/*.css.js"
|
|
17
21
|
],
|
|
18
22
|
"scripts": {
|
|
19
23
|
"dev": "vite",
|