|
1
|
# JDate 日期组件 使用文档
|
|
2
|
|
|
3
|
###### 说明: antd-vue日期组件需要用moment中转一下,用起来不是很方便,特二次封装,使用时只需要传字符串即可
|
|
4
|
|
|
5
|
## 参数配置
|
|
6
|
|
|
7
8
9
10
11
12
13
14
|
| 参数 | 类型 | 必填 |说明|
|--------------|---------|----|---------|
| placeholder |string | | placeholder |
| readOnly | boolean | | true/false 默认false |
| value | string | | 绑定v-model或是v-decorator后不需要设置 |
| showTime | boolean | | 是否展示时间true/false 默认false |
| dateFormat | string | |日期格式 默认'YYYY-MM-DD' 若showTime设置为true则需要将其设置成对应的时间格式(如:YYYY-MM-DD HH:mm:ss) |
| triggerChange | string | |触发组件值改变的事件是否是change,当使用v-decorator时且没有设置decorator的option.trigger为input需要设置该值为true |
|
|
15
|
|
|
16
17
18
|
使用示例
----
1.组件带有v-model的使用方法
|
|
19
|
|
|
20
21
22
23
24
|
```vue
<j-date v-model="dateStr"></j-date>
```
2.组件带有v-decorator的使用方法
|
|
25
26
|
a).设置trigger-change属性为true
|
|
27
28
29
|
```vue
<j-date :trigger-change="true" v-decorator="['dateStr',{}]"></j-date>
```
|
|
30
31
32
|
b).设置decorator的option.trigger为input
|
|
33
34
35
36
|
```vue
<j-date v-decorator="['dateStr',{trigger:'input'}]"></j-date>
```
|
|
37
38
|
3.其他使用 添加style
|
|
39
40
41
|
```vue
<j-date v-model="dateStr" style="width:100%"></j-date>
```
|
|
42
|
|
|
43
|
添加placeholder
|
|
44
|
|
|
45
46
47
|
```vue
<j-date v-model="dateStr" placeholder="请输入dateStr"></j-date>
```
|
|
48
|
|
|
49
|
添加readOnly
|
|
50
|
|
|
51
52
53
54
55
56
|
```vue
<j-date v-model="dateStr" :read-only="true"></j-date>
```
备注:
script内需引入jdate
|
|
57
|
|
|
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
```vue
<script>
import JDate from '@/components/jeecg/JDate'
export default {
name: "demo",
components: {
JDate
}
//...
}
</script>
```
---
# JSuperQuery 高级查询 使用文档
|
|
74
|
|
|
75
|
## 参数配置
|
|
76
|
|
|
77
78
79
80
81
82
|
| 参数 | 类型 | 必填 | 说明 |
|--------------|---------|----|----------------------|
| fieldList | array |✔| 需要查询的列集合示例如下,type类型有:date/datetime/string/int/number |
| callback | array | | 回调函数名称(非必须)默认handleSuperQuery |
fieldList结构示例:
|
|
83
|
|
|
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
```vue
const superQueryFieldList=[{
type:"date",
value:"birthday",
text:"生日"
},{
type:"string",
value:"name",
text:"用户名"
},{
type:"int",
value:"age",
text:"年龄"
}]
```
|
|
99
100
|
页面代码概述:
|
|
101
102
|
----
1.import之后再components之内声明
|
|
103
|
|
|
104
105
106
107
108
109
110
111
112
|
```vue
import JSuperQuery from '@/components/jeecg/JSuperQuery.vue';
export default {
name: "JeecgDemoList",
components: {
JSuperQuery
},
```
|
|
113
|
|
|
114
|
2.页面引用
|
|
115
|
|
|
116
117
118
119
|
```vue
<!-- 高级查询区域 -->
<j-super-query :fieldList="fieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
```
|
|
120
|
|
|
121
|
3.list页面data中需要定义三个属性:
|
|
122
|
|
|
123
124
125
126
127
|
```vue
fieldList:superQueryFieldList,
superQueryFlag:false,
superQueryParams:""
```
|
|
128
|
|
|
129
|
4.list页面声明回调事件handleSuperQuery(与组件的callback对应即可)
|
|
130
|
|
|
131
132
133
134
135
136
137
138
139
140
141
142
143
|
```vue
//高级查询方法
handleSuperQuery(arg) {
if(!arg){
this.superQueryParams=''
this.superQueryFlag = false
}else{
this.superQueryFlag = true
this.superQueryParams=JSON.stringify(arg)
}
this.loadData()
},
```
|
|
144
|
|
|
145
|
5.改造list页面方法
|
|
146
|
|
|
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
```vue
// 获取查询条件
getQueryParams() {
let sqp = {}
if(this.superQueryParams){
sqp['superQueryParams']=encodeURI(this.superQueryParams)
}
var param = Object.assign(sqp, this.queryParam, this.isorter);
param.field = this.getQueryField();
param.pageNo = this.ipagination.current;
param.pageSize = this.ipagination.pageSize;
return filterObj(param);
},
```
|
|
161
|
|
|
162
|
6.打开弹框调用show方法:
|
|
163
|
|
|
164
165
166
167
168
|
```vue
this.$refs.superQueryModal.show();
```
# JEllipsis 字符串超长截取省略号显示
|
|
169
|
|
|
170
|
###### 说明: 遇到超长文本展示,通过此标签可以截取省略号显示,鼠标放置会提示全文本
|
|
171
|
|
|
172
|
## 参数配置
|
|
173
|
|
|
174
175
176
177
|
| 参数 | 类型 | 必填 | 说明 |
|--------|---------|----|----------------|
| value |string | 必填 | 字符串文本|
| length | number | 非必填 | 默认25 |
|
|
178
|
|
|
179
180
181
|
使用示例
----
1.组件带有v-model的使用方法
|
|
182
|
|
|
183
184
185
186
187
188
189
190
191
192
193
194
195
196
|
```vue
<j-ellipsis :value="text"/>
# Modal弹框实现最大化功能
1.定义modal的宽度:
```vue
<a-modal
:width="modalWidth"
/>
```
|
|
197
|
|
|
198
|
2.自定义modal的title,居右显示切换图标
|
|
199
|
|
|
200
201
202
203
204
205
206
207
208
209
|
```vue
<template slot="title">
<div style="width: 100%;">
<span>{{ title }}</span>
<span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
<a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
</span>
</div>
</template>
```
|
|
210
|
|
|
211
|
3.定义toggleScreen事件,用于切换modal宽度
|
|
212
|
|
|
213
214
215
216
217
218
219
220
221
222
|
```vue
toggleScreen(){
if(this.modaltoggleFlag){
this.modalWidth = window.innerWidth;
}else{
this.modalWidth = 800;
}
this.modaltoggleFlag = !this.modaltoggleFlag;
},
```
|
|
223
|
|
|
224
|
4.data中声明上述用到的属性
|
|
225
|
|
|
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
|
```vue
data () {
return {
modalWidth:800,
modaltoggleFlag:true,
```
# <a-select/> 下拉选项滚动错位的解决方法
## 问题描述
当使用了 `a-modal` 或其他带有滚动条的组件时,使用`a-select`组件并打开下拉框时滚动滚动条,就会导致错位的问题产生。
## 解决方法
|
|
241
242
|
大多数情况下,在 `a-select` 上添加一个 `getPopupContainer` 属性,值为`node => node.parentNode`即可解决。 但是如果遇到 `a-select`
标签层级过深的情况,可能仍然会显示异常,只需要多加几个`.parentNode` (例:node => node.parentNode.parentNode.parentNode)多尝试几次直到解决问题即可。
|
|
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
|
### 代码示例
```html
<a-select
placeholder="请选择展示模板"
:options="dicts.displayTemplate"
:getPopupContainer="node => node.parentNode"
/>
```
# JAsyncTreeList 异步数列表组件使用说明
## 引入组件
```js
import JTreeTable from '@/components/jeecg/JTreeTable'
export default {
components: { JTreeTable }
}
```
## 所需参数
| 参数 | 类型 | 必填 | 说明 |
|-------------|--------|--------|--------------------------------------------------------------|
| rowKey | String | 非必填 | 表格行 key 的取值,默认为"id" |
| columns | Array | 必填 | 表格列的配置描述,具体见Antd官方文档 |
| url | String | 必填 | 数据查询url |
| childrenUrl | String | 非必填 | 查询子级时的url,若不填则使用url参数查询子级 |
| queryKey | String | 非必填 | 根据某个字段查询,如果传递 id 就根据 id 查询,默认为parentId |
| queryParams | Object | 非必填 | 查询参数,当查询参数改变的时候会自动重新查询,默认为{} |
| topValue | String | 非必填 | 查询顶级时的值,如果顶级为0,则传0,默认为null |
| tableProps | Object | 非必填 | 自定义给内部table绑定的props |
## 代码示例
```html
<template>
<a-card :bordered="false">
<j-tree-table :url="url" :columns="columns" :tableProps="tableProps"/>
</a-card>
</template>
<script>
import JTreeTable from '@/components/jeecg/JTreeTable'
export default {
name: 'AsyncTreeTable',
components: { JTreeTable },
data() {
return {
url: '/mock/api/asynTreeList',
columns: [
{ title: '菜单名称', dataIndex: 'name' },
{ title: '组件', dataIndex: 'component' },
{ title: '排序', dataIndex: 'orderNum' }
],
selectedRowKeys: []
}
},
computed: {
tableProps() {
let _this = this
return {
// 列表项是否可选择
// 配置项见:https://vue.ant.design/components/table-cn/#rowSelection
rowSelection: {
selectedRowKeys: _this.selectedRowKeys,
onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
}
}
}
}
}
</script>
```
# JCheckbox 使用文档
|
|
322
|
|
|
323
|
###### 说明: antd-vue checkbox组件处理的是数组,用起来不是很方便,特二次封装,使用时只需处理字符串即可
|
|
324
|
|
|
325
|
## 参数配置
|
|
326
|
|
|
327
328
329
330
331
332
|
| 参数 | 类型 | 必填 |说明|
|--------------|---------|----|---------|
| options |array |✔| checkbox需要配置的项,是个数组,数组中每个对象包含两个属性:label(用于显示)和value(用于存储) |
使用示例
----
|
|
333
|
|
|
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
|
```vue
<template>
<a-form :form="form">
<a-form-item label="v-model式用法">
<j-checkbox v-model="sport" :options="sportOptions"></j-checkbox><span>{{ sport }}</span>
</a-form-item>
<a-form-item label="v-decorator式用法">
<j-checkbox v-decorator="['sport']" :options="sportOptions"></j-checkbox><span>{{ getFormFieldValue('sport') }}</span>
</a-form-item>
</a-form>
</template>
<script>
import JCheckbox from '@/components/jeecg/JCheckbox'
export default {
components: {JCheckbox},
data() {
return {
form: this.$form.createForm(this),
sport:'',
sportOptions:[
{
label:"足球",
value:"1"
},{
label:"篮球",
value:"2"
},{
label:"乒乓球",
value:"3"
}]
}
},
methods: {
getFormFieldValue(field){
return this.form.getFieldValue(field)
}
}
}
</script>
```
# JCodeEditor 使用文档
|
|
378
|
|
|
379
|
###### 说明: 一个简易版的代码编辑器,支持语法高亮
|
|
380
|
|
|
381
|
## 参数配置
|
|
382
|
|
|
383
384
385
386
387
388
389
390
391
392
|
| 参数 | 类型 | 必填 |说明|
|--------------|---------|----|---------|
| language |string | | 表示当前编写代码的类型 javascript/html/css/sql |
| placeholder |string | | placeholder |
| lineNumbers |Boolean | | 是否显示行号 |
| fullScreen |Boolean | | 是否显示全屏按钮 |
| zIndex |string | | 全屏以后的z-index |
使用示例
----
|
|
393
|
|
|
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
|
```vue
<template>
<div>
<j-code-editor
language="javascript"
v-model="editorValue"
:fullScreen="true"
style="min-height: 100px"/>
{{ editorValue }}
</div>
</template>
<script>
import JCodeEditor from '@/components/jeecg/JCodeEditor'
export default {
components: {JCodeEditor},
data() {
return {
form: this.$form.createForm(this),
editorValue:'',
}
}
}
</script>
```
# JFormContainer 使用文档
|
|
421
|
|
|
422
423
424
425
|
###### 说明: 暂用于表单禁用
使用示例
----
|
|
426
|
|
|
427
428
429
430
431
432
433
434
435
436
|
```vue
<!-- 在form下直接写这个组件,设置disabled为true就能将此form中的控件禁用 -->
<a-form layout="inline" :form="form" >
<j-form-container disabled>
<!-- 表单内容省略..... -->
</j-form-container>
</a-form>
```
# JImportModal 使用文档
|
|
437
|
|
|
438
439
440
441
|
###### 说明: 用于列表页面导入excel功能
使用示例
----
|
|
442
|
|
|
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
|
```vue
<template>
<!-- 此处省略部分代码...... -->
<a-button @click="handleImportXls" type="primary" icon="upload">导入</a-button>
<!-- 此处省略部分代码...... -->
<j-import-modal ref="importModal" :url="getImportUrl()" @ok="importOk"></j-import-modal>
<!-- 此处省略部分代码...... -->
</template>
<script>
import JCodeEditor from '@/components/jeecg/JCodeEditor'
export default {
components: {JCodeEditor},
data() {
return {
//省略代码......
}
},
methods:{
//省略部分代码......
handleImportXls(){
this.$refs.importModal.show()
},
getImportUrl(){
return '你自己处理上传业务的后台地址'
},
importOk(){
this.loadData(1)
}
}
}
</script>
```
# JSelectMultiple 多选下拉组件
|
|
479
|
|
|
480
481
482
483
484
485
|
online用 实际开发请使用components/dict/JMultiSelectTag
# JSlider 滑块验证码
使用示例
----
|
|
486
|
|
|
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
|
```vue
<template>
<div style="width: 300px">
<j-slider @onSuccess="sliderSuccess"></j-slider>
</div>
</template>
<script>
import JSlider from '@/components/jeecg/JSlider'
export default {
components: {JSlider},
data() {
return {
form: this.$form.createForm(this),
editorValue:'',
}
},
methods:{
sliderSuccess(){
console.log("验证完成")
}
}
}
</script>
```
# JTreeSelect 树形下拉组件
|
|
514
|
|
|
515
516
517
|
异步加载的树形下拉组件
## 参数配置
|
|
518
|
|
|
519
520
521
522
523
524
525
526
527
528
|
| 参数 | 类型 | 必填 |说明|
|--------------|---------|----|---------|
| placeholder |string | | placeholder |
| dict |string | ✔| 表名,显示字段名,存储字段名拼接的字符串 |
| pidField |string | ✔| 父ID的字段名 |
| pidValue |string | | 根节点父ID的值 默认'0' 不可以设置为空,如果想使用此组件,而数据库根节点父ID为空,请修改之 |
| multiple |boolean | |是否支持多选 |
使用示例
----
|
|
529
|
|
|
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
|
```vue
<template>
<a-form>
<a-form-item label="树形下拉测试" style="width: 300px">
<j-tree-select
v-model="departId"
placeholder="请选择部门"
dict="sys_depart,depart_name,id"
pidField="parent_id">
</j-tree-select>
{{ departId }}
</a-form-item>
</a-form >
</template>
<script>
import JTreeSelect from '@/components/jeecg/JTreeSelect'
export default {
components: {JTreeSelect},
data() {
return {
departId:""
}
}
}
</script>
```
|