Blame view

ant-design-vue-jeecg/src/components/jeecg/README.md 13.5 KB
肖超群 authored
1
# JDate 日期组件 使用文档
肖超群 authored
2
肖超群 authored
3
###### 说明: antd-vue日期组件需要用moment中转一下,用起来不是很方便,特二次封装,使用时只需要传字符串即可
肖超群 authored
4
肖超群 authored
5
## 参数配置
肖超群 authored
6
肖超群 authored
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               |
肖超群 authored
15
肖超群 authored
16
17
18
使用示例
----
1.组件带有v-model的使用方法
肖超群 authored
19
肖超群 authored
20
21
22
23
24
```vue
<j-date v-model="dateStr"></j-date>
```

2.组件带有v-decorator的使用方法  
肖超群 authored
25
26
a).设置trigger-change属性为true
肖超群 authored
27
28
29
  ```vue
    <j-date :trigger-change="true" v-decorator="['dateStr',{}]"></j-date>
  ```
肖超群 authored
30
31
32

b).设置decorator的option.trigger为input
肖超群 authored
33
34
35
36
   ```vue
    <j-date v-decorator="['dateStr',{trigger:'input'}]"></j-date>
   ```
肖超群 authored
37
38
3.其他使用 添加style
肖超群 authored
39
40
41
```vue
<j-date v-model="dateStr" style="width:100%"></j-date>
```
肖超群 authored
42
肖超群 authored
43
添加placeholder
肖超群 authored
44
肖超群 authored
45
46
47
```vue
<j-date v-model="dateStr" placeholder="请输入dateStr"></j-date>
```
肖超群 authored
48
肖超群 authored
49
添加readOnly
肖超群 authored
50
肖超群 authored
51
52
53
54
55
56
```vue
<j-date v-model="dateStr" :read-only="true"></j-date>
```

备注:
script内需引入jdate
肖超群 authored
57
肖超群 authored
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 高级查询 使用文档
肖超群 authored
74
肖超群 authored
75
## 参数配置
肖超群 authored
76
肖超群 authored
77
78
79
80
81
82
| 参数           | 类型      | 必填 | 说明                   |
|--------------|---------|----|----------------------|
| fieldList      | array   |✔| 需要查询的列集合示例如下,type类型有:date/datetime/string/int/number      |
| callback   | array   |  | 回调函数名称(非必须)默认handleSuperQuery                |

fieldList结构示例:
肖超群 authored
83
肖超群 authored
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:"年龄"
  }]
```
肖超群 authored
99
100

页面代码概述:
肖超群 authored
101
102
----
1.import之后再components之内声明
肖超群 authored
103
肖超群 authored
104
105
106
107
108
109
110
111
112
```vue
import JSuperQuery from '@/components/jeecg/JSuperQuery.vue';
  export default {
    name: "JeecgDemoList",
    components: {
      JSuperQuery
    },

```
肖超群 authored
113
肖超群 authored
114
2.页面引用
肖超群 authored
115
肖超群 authored
116
117
118
119
```vue
  <!-- 高级查询区域 -->
  <j-super-query :fieldList="fieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
```
肖超群 authored
120
肖超群 authored
121
3.list页面data中需要定义三个属性:
肖超群 authored
122
肖超群 authored
123
124
125
126
127
```vue
  fieldList:superQueryFieldList,
  superQueryFlag:false,
  superQueryParams:""
```
肖超群 authored
128
肖超群 authored
129
4.list页面声明回调事件handleSuperQuery(与组件的callback对应即可)
肖超群 authored
130
肖超群 authored
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()
},
```
肖超群 authored
144
肖超群 authored
145
5.改造list页面方法
肖超群 authored
146
肖超群 authored
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);
  },
```
肖超群 authored
161
肖超群 authored
162
6.打开弹框调用show方法:
肖超群 authored
163
肖超群 authored
164
165
166
167
168
```vue
this.$refs.superQueryModal.show();
```

# JEllipsis 字符串超长截取省略号显示
肖超群 authored
169
肖超群 authored
170
###### 说明: 遇到超长文本展示,通过此标签可以截取省略号显示,鼠标放置会提示全文本
肖超群 authored
171
肖超群 authored
172
## 参数配置
肖超群 authored
173
肖超群 authored
174
175
176
177
| 参数  | 类型     | 必填 |    说明      |
|--------|---------|----|----------------|
| value  |string   | 必填   |  字符串文本|
| length | number  | 非必填 |  默认25    |
肖超群 authored
178
肖超群 authored
179
180
181
使用示例
----
1.组件带有v-model的使用方法
肖超群 authored
182
肖超群 authored
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"


    />
```
肖超群 authored
197
肖超群 authored
198
2.自定义modal的title,居右显示切换图标
肖超群 authored
199
肖超群 authored
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>
```
肖超群 authored
210
肖超群 authored
211
3.定义toggleScreen事件,用于切换modal宽度
肖超群 authored
212
肖超群 authored
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;
    },
```
肖超群 authored
223
肖超群 authored
224
4.data中声明上述用到的属性
肖超群 authored
225
肖超群 authored
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`组件并打开下拉框时滚动滚动条,就会导致错位的问题产生。

## 解决方法
肖超群 authored
241
242
大多数情况下,在 `a-select` 上添加一个 `getPopupContainer` 属性,值为`node => node.parentNode`即可解决。 但是如果遇到 `a-select`
标签层级过深的情况,可能仍然会显示异常,只需要多加几个`.parentNode` (例:node => node.parentNode.parentNode.parentNode)多尝试几次直到解决问题即可。
肖超群 authored
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 使用文档
肖超群 authored
322
肖超群 authored
323
###### 说明: antd-vue checkbox组件处理的是数组,用起来不是很方便,特二次封装,使用时只需处理字符串即可
肖超群 authored
324
肖超群 authored
325
## 参数配置
肖超群 authored
326
肖超群 authored
327
328
329
330
331
332
| 参数           | 类型   | 必填 |说明|
|--------------|---------|----|---------|
| options      |array   |✔| checkbox需要配置的项,是个数组,数组中每个对象包含两个属性:label(用于显示)和value(用于存储) |

使用示例
----
肖超群 authored
333
肖超群 authored
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 使用文档
肖超群 authored
378
肖超群 authored
379
###### 说明: 一个简易版的代码编辑器,支持语法高亮
肖超群 authored
380
肖超群 authored
381
## 参数配置
肖超群 authored
382
肖超群 authored
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 |

使用示例
----
肖超群 authored
393
肖超群 authored
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 使用文档
肖超群 authored
421
肖超群 authored
422
423
424
425
###### 说明: 暂用于表单禁用

使用示例
----
肖超群 authored
426
肖超群 authored
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 使用文档
肖超群 authored
437
肖超群 authored
438
439
440
441
###### 说明: 用于列表页面导入excel功能

使用示例
----
肖超群 authored
442
肖超群 authored
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 多选下拉组件
肖超群 authored
479
肖超群 authored
480
481
482
483
484
485
online用 实际开发请使用components/dict/JMultiSelectTag

# JSlider 滑块验证码

使用示例
----
肖超群 authored
486
肖超群 authored
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 树形下拉组件
肖超群 authored
514
肖超群 authored
515
516
517
异步加载的树形下拉组件

## 参数配置
肖超群 authored
518
肖超群 authored
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   | |是否支持多选 |

使用示例
----
肖超群 authored
529
肖超群 authored
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>
```