|
|
1
2
3
4
|
<template>
<a-card :bordered="false" style="height:100%">
<div class="table-page-search-wrapper">
|
|
|
5
|
<a-form layout="inline" :form="form">
|
|
|
6
7
8
|
<!-- 字典下拉 -->
|
|
|
9
10
|
<a-row :gutter="24">
<a-col :span="12">
|
|
|
11
12
13
|
<a-form-item label="性别">
<j-dict-select-tag v-model="formData.sex" title="性别" dictCode="sex"/>
<!-- <j-dict-select-tag title="性别" dictCode="sex" disabled/>-->
|
|
|
14
15
|
</a-form-item>
</a-col>
|
|
|
16
|
<a-col :span="12">选中值：{{ formData.sex}}</a-col>
|
|
|
17
18
|
</a-row>
|
|
|
19
|
<!-- 字典表下拉 -->
|
|
|
20
21
|
<a-row :gutter="24">
<a-col :span="12">
|
|
|
22
23
|
<a-form-item label="字典表下拉">
<j-dict-select-tag v-model="formData.user" placeholder="请选择用户" dictCode="sys_user,realname,id"/>
|
|
|
24
25
|
</a-form-item>
</a-col>
|
|
|
26
|
<a-col :span="12">选中值：{{ formData.user}}</a-col>
|
|
|
27
28
|
</a-row>
|
|
|
29
|
<!-- 带条件字典表下拉 -->
|
|
|
30
31
|
<a-row :gutter="24">
<a-col :span="12">
|
|
|
32
33
|
<a-form-item label="字典表下拉(带条件)">
<j-dict-select-tag v-model="formData.user2" placeholder="请选择用户" dictCode="sys_user,realname,id,username!='admin' order by create_time"/>
|
|
|
34
35
|
</a-form-item>
</a-col>
|
|
|
36
|
<a-col :span="12">选中值：{{ formData.user2}}</a-col>
|
|
|
37
38
39
40
41
|
</a-row>
<!-- 部门选择控件 -->
<a-row :gutter="24">
<a-col :span="12">
|
|
|
42
43
|
<a-form-item label="选择部门 自定义返回值">
<j-select-depart v-decorator="['departId']" :trigger-change="true" customReturnField="departName"></j-select-depart>
|
|
|
44
45
46
47
48
49
50
51
|
</a-form-item>
</a-col>
<a-col :span="12">选中的部门ID(v-decorator):{{ getDepartIdValue() }}</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="选择部门">
|
|
|
52
|
<j-select-depart v-model="departId" :multi="true"></j-select-depart>
|
|
|
53
54
55
56
57
|
</a-form-item>
</a-col>
<a-col :span="12">选中的部门ID(v-model):{{ departId }}</a-col>
</a-row>
|
|
|
58
|
<!-- 通过部门选择用户控件 -->
|
|
|
59
60
61
|
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="选择用户">
|
|
|
62
|
<j-select-user-by-dep v-model="userIds" :multi="true"></j-select-user-by-dep>
|
|
|
63
64
|
</a-form-item>
</a-col>
|
|
|
65
|
<a-col :span="12">选中的用户(v-model):{{ userIds }}</a-col>
|
|
|
66
67
68
69
70
71
|
</a-row>
<!-- 用户选择控件 -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="选择用户">
|
|
|
72
|
<j-select-multi-user v-model="multiUser" ></j-select-multi-user>
|
|
|
73
74
75
76
77
|
</a-form-item>
</a-col>
<a-col :span="12">选中的用户(v-model):{{ multiUser }}</a-col>
</a-row>
|
|
|
78
79
80
81
82
83
84
85
86
87
|
<!-- 角色选择 -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="选择角色">
<j-select-role v-model="formData.selectRole"/>
</a-form-item>
</a-col>
<a-col :span="12">选中值：{{ formData.selectRole}}</a-col>
</a-row>
|
|
|
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
|
<!-- JCheckbox -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="多选组合">
<j-checkbox
v-model="jcheckbox.values"
:options="jcheckbox.options"
/>
</a-form-item>
</a-col>
<a-col :span="12">多选组合(v-model)：{{ jcheckbox.values }}</a-col>
</a-row>
<!-- JCodeEditor -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="代码输入框" style="min-height: 120px">
<j-code-editor
language="javascript"
v-model="jcodedditor.value"
:fullScreen="true"
style="min-height: 100px"/>
</a-form-item>
</a-col>
<a-col :span="12">代码输入框(v-model)：{{ jcodedditor.value }}</a-col>
</a-row>
<!-- JDate -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="日期选择框">
<j-date v-model="jdate.value" :showTime="true" dateFormat="YYYY-MM-DD HH:mm:ss"/>
</a-form-item>
</a-col>
<a-col :span="12">日期选择框(v-model)：{{ jdate.value }}</a-col>
</a-row>
<!-- JEditor -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="富文本编辑器" style="min-height: 300px">
<j-editor v-model="jeditor.value"/>
</a-form-item>
</a-col>
<a-col :span="12">富文本编辑器(v-model)：{{ jeditor.value }}</a-col>
</a-row>
<!-- JEllipsis -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="过长剪切">
<j-ellipsis :value="jellipsis.value" :length="30"/>
</a-form-item>
</a-col>
<a-col :span="12">过长剪切：{{ jellipsis.value }}</a-col>
</a-row>
<!-- JGraphicCode -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="验证码">
<j-graphic-code @success="generateCode"/>
</a-form-item>
</a-col>
<a-col :span="12">验证码：{{ jgraphicCode.value }}</a-col>
</a-row>
<!-- JSlider -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="滑块验证码">
<j-slider @onSuccess="handleJSliderSuccess"/>
</a-form-item>
</a-col>
<a-col :span="12">滑块验证码验证通过：{{ jslider.value }}</a-col>
</a-row>
<!-- JSelectMultiple -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="多选下拉框">
<j-select-multiple v-model="jselectMultiple.value" :options="jselectMultiple.options"/>
</a-form-item>
</a-col>
<a-col :span="12">多选下拉框(v-model)：{{ jselectMultiple.value }}</a-col>
</a-row>
<!-- JSelectMultiple -->
<a-row :gutter="24">
<a-col>
<a-form-item label="最大化弹窗">
<a-button @click="()=>modal.visible=true">最大化弹窗</a-button>
</a-form-item>
<a-modal
:visible="modal.visible"
:width="modal.width"
:style="modal.style"
@ok="()=>modal.visible=false"
@cancel="()=>modal.visible=false">
<template slot="title">
<div style="width: 100%;height:20px;padding-right:32px;">
<div style="float: left;">{{ modal.title }}</div>
<div style="float: right;">
<a-button
icon="fullscreen"
style="width:56px;height:100%;border:0"
@click="handleClickToggleFullScreen"/>
</div>
</div>
</template>
<template v-for="(i,k) of 30">
<p :key="k">这是主体内容，高度是自适应的</p>
</template>
</a-modal>
</a-col>
</a-row>
|
|
|
211
212
213
214
215
216
217
218
219
|
<!-- JSuperQuery 高级查询 -->
<!-- JTreeSelect 树组件 -->
<!-- JTreeTable 树列表 -->
<!-- JUpload.上传组件 -->
<!-- JImportModal 导入组件 -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="树字典">
|
|
|
220
|
<j-tree-dict parentCode="B01" />
|
|
|
221
222
223
224
225
|
</a-form-item>
</a-col>
<a-col :span="12"></a-col>
</a-row>
|
|
|
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
|
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="下拉树选择">
<j-tree-select
v-model="formData.treeSelect"
placeholder="请选择菜单"
dict="sys_permission,name,id"
pidField="parent_id"
pidValue=""
/>
</a-form-item>
</a-col>
<a-col :spapn="12">选中的值(v-model)：{{ formData.treeSelect }}</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="下拉树多选">
<j-tree-select
v-model="formData.treeSelectMultiple"
placeholder="请选择菜单"
dict="sys_permission,name,id"
pidField="parent_id"
pidValue=""
multiple
/>
</a-form-item>
</a-col>
<a-col :spapn="12">选中的值(v-model)：{{ formData.treeSelectMultiple }}</a-col>
</a-row>
|
|
|
257
258
259
260
|
<!-- VueCron -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="cron表达式">
|
|
|
261
|
<j-cron ref="innerVueCron" v-decorator="['cronExpression', { initialValue: '* * * * * ? *' }]" @change="setCorn"></j-cron>
|
|
|
262
263
264
|
</a-form-item>
</a-col>
</a-row>
|
|
|
265
266
267
268
269
270
271
|
</a-form>
</div>
</a-card>
</template>
<script>
|
|
|
272
|
|
|
|
273
274
275
276
|
import JDictSelectTag from '../../components/dict/JDictSelectTag.vue'
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
|
|
|
277
|
import JSelectRole from '@/components/jeecgbiz/JSelectRole'
|
|
|
278
279
280
281
282
283
284
285
|
import JCheckbox from '@/components/jeecg/JCheckbox'
import JCodeEditor from '@/components/jeecg/JCodeEditor'
import JDate from '@/components/jeecg/JDate'
import JEditor from '@/components/jeecg/JEditor'
import JEllipsis from '@/components/jeecg/JEllipsis'
import JGraphicCode from '@/components/jeecg/JGraphicCode'
import JSlider from '@/components/jeecg/JSlider'
import JSelectMultiple from '@/components/jeecg/JSelectMultiple'
|
|
|
286
|
import JTreeDict from "../../components/jeecg/JTreeDict.vue";
|
|
|
287
|
import JCron from "@/components/jeecg/JCron.vue";
|
|
|
288
289
|
import JTreeSelect from '@/components/jeecg/JTreeSelect'
|
|
|
290
|
export default {
|
|
|
291
|
name: 'SelectDemo',
|
|
|
292
|
components: {
|
|
|
293
|
JTreeDict,
|
|
|
294
295
296
297
|
JDictSelectTag,
JSelectDepart,
JSelectUserByDep,
JSelectMultiUser,
|
|
|
298
|
JSelectRole,
|
|
|
299
300
|
JCheckbox,
JCodeEditor,
|
|
|
301
|
JDate, JEditor, JEllipsis, JGraphicCode, JSlider, JSelectMultiple,
|
|
|
302
|
JCron, JTreeSelect
|
|
|
303
304
305
306
|
},
data() {
return {
selectList: [],
|
|
|
307
|
selectedDepUsers: '',
|
|
|
308
|
formData: {},
|
|
|
309
310
|
form: this.$form.createForm(this),
departId: '4f1765520d6346f9bd9c79e2479e5b12,57197590443c44f083d42ae24ef26a2c',
|
|
|
311
312
|
userIds: 'admin',
multiUser: 'admin,jeecg',
|
|
|
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
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
|
jcheckbox: {
values: 'spring,jeecgboot',
options: [
{ label: 'Jeecg', value: 'jeecg' },
{ label: 'Jeecg-Boot', value: 'jeecgboot' },
{ label: 'Spring', value: 'spring', disabled: true },
{ label: 'MyBaits', value: 'mybatis' }
]
},
jcodedditor: {
value: `function sayHi(word) {
alert(word)
}
sayHi('hello, world!')`
},
jdate: {
value: '2019-5-10 15:33:06'
},
jeditor: {
value: '<h2 style="text-align: center;">富文本编辑器</h2> <p>这里是富文本编辑器。</p>'
},
jellipsis: {
value: '这是一串很长很长的文字段落。这是一串很长很长的文字段落。这是一串很长很长的文字段落。这是一串很长很长的文字段落。'
},
jgraphicCode: {
value: ''
},
jslider: {
value: false
},
jselectMultiple: {
options: [
{ text: '字符串', value: 'String' },
{ text: '整数型', value: 'Integer' },
{ text: '浮点型', value: 'Double' },
{ text: '布尔型', value: 'Boolean' }
],
value: 'Integer,Boolean'
},
modal: {
title: '这里是标题',
visible: false,
width: '100%',
style: { top: '20px' },
fullScreen: true
|
|
|
358
|
},
|
|
|
359
|
cron: '',
|
|
|
360
361
362
|
}
},
computed: {
|
|
|
363
364
365
|
nameList: function() {
var names = []
|
|
|
366
|
for (var a = 0; a < this.selectList.length; a++) {
|
|
|
367
|
names.push(this.selectList[a].name)
|
|
|
368
|
}
|
|
|
369
|
return names
|
|
|
370
371
372
373
374
|
}
},
methods: {
handleChange() {
},
|
|
|
375
376
|
getDepartIdValue() {
return this.form.getFieldValue('departId')
|
|
|
377
|
},
|
|
|
378
379
380
381
382
|
selectOK: function(data) {
this.selectList = data
},
handleSelect: function() {
this.$refs.selectDemoModal.add()
|
|
|
383
384
|
},
selectReset() {
|
|
|
385
|
this.selectList = []
|
|
|
386
387
388
|
},
//通过组织机构筛选选择用户
onSearchDepUser() {
|
|
|
389
|
this.$refs.JSearchUserByDep.showModal()
|
|
|
390
|
this.selectedDepUsers = ''
|
|
|
391
|
this.$refs.JSearchUserByDep.title = '根据部门查询用户'
|
|
|
392
393
394
|
},
onSearchDepUserCallBack(selectedDepUsers) {
this.selectedDepUsers = selectedDepUsers
|
|
|
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
|
},
generateCode(value) {
this.jgraphicCode.value = value.toLowerCase()
},
handleJSliderSuccess(value) {
this.jslider.value = value
},
/** 切换全屏显示 */
handleClickToggleFullScreen() {
let mode = !this.modal.fullScreen
if (mode) {
this.modal.width = '100%'
this.modal.style.top = '20px'
} else {
this.modal.width = '1200px'
this.modal.style.top = '50px'
}
this.modal.fullScreen = mode
|
|
|
413
|
},
|
|
|
414
415
416
417
418
|
setCorn(data){
this.$nextTick(() => {
this.form.cronExpression = data;
})
}
|
|
|
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
|
}
}
</script>
<style lang="less" scoped>
.ant-card-body .table-operator {
margin-bottom: 18px;
}
.ant-table-tbody .ant-table-row td {
padding-top: 15px;
padding-bottom: 15px;
}
.anty-row-operator button {
margin: 0 5px
}
.ant-btn-danger {
background-color: #ffffff
}
.ant-modal-cust-warp {
height: 100%
}
.ant-modal-cust-warp .ant-modal-body {
height: calc(100% - 110px) !important;
overflow-y: auto
}
.ant-modal-cust-warp .ant-modal-content {
height: 90% !important;
overflow-y: hidden
}
</style>
|
