vue2-client 1.5.23 → 1.5.25

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/CHANGELOG.md CHANGED
@@ -1,6 +1,12 @@
1
1
  # Change Log
2
2
  > 所有关于本项目的变化都在该文档里。
3
3
 
4
+ **1.5.25 -2022-12-26 @江超**
5
+ - 解决下拉框表单项刷新时不重新获取数据的问题
6
+
7
+ **1.5.24 -2022-12-21 @苗艳强**
8
+ - 新增修改时传入固定表单参数
9
+
4
10
  **1.5.22 - 1.5.23 -2022-12-15 @江超**
5
11
  - 新增个人设置页面
6
12
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue2-client",
3
- "version": "1.5.23",
3
+ "version": "1.5.25",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
@@ -1,512 +1,521 @@
1
- <template>
2
- <!-- 输入框 -->
3
- <x-form-col
4
- v-if="attr.type === 'input'"
5
- :xl="xl"
6
- :xxl="xxl">
7
- <a-form-model-item
8
- :ref="attr.model"
9
- :label="attr.name"
10
- :prop="attr.model">
11
- <a-input v-model="form[attr.model]" :disabled="disabled" :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"/>
12
- </a-form-model-item>
13
- </x-form-col>
14
- <!-- 下拉框 -->
15
- <x-form-col
16
- v-else-if="attr.type === 'select'"
17
- :xl="xl"
18
- :xxl="xxl">
19
- <a-form-model-item
20
- :ref="attr.model"
21
- :label="attr.name"
22
- :prop="attr.model">
23
- <a-select
24
- v-if="!attr.lazyLoad || attr.lazyLoad === 'false'"
25
- v-model="form[attr.model]"
26
- :disabled="disabled"
27
- :filter-option="filterOption"
28
- :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
29
- :placeholder="attr.placeholder ? attr.placeholder : '请选择'"
30
- show-search
31
- >
32
- <a-select-option
33
- v-if="mode === '查询'"
34
- key="999999"
35
- value="全部">全部
36
- </a-select-option>
37
- <template v-if="attr.keys">
38
- <a-select-option
39
- v-for="(item,index) in attr.keys"
40
- :key="index"
41
- :value="item.value">
42
- {{ item.label }}
43
- </a-select-option>
44
- </template>
45
- <template v-else>
46
- <template v-if="attr.keyName.indexOf('logic@') !== -1">
47
- <a-select-option
48
- v-for="(item,index) in option"
49
- :key="index"
50
- :value="item.value">{{ item.label }}
51
- </a-select-option>
52
- </template>
53
- <template v-else>
54
- <a-select-option
55
- v-for="item in $appdata.getDictionaryList(attr.keyName)"
56
- :key="item.value"
57
- :value="item.value">
58
- <!-- 徽标(badge) -->
59
- <x-badge :badge-key="attr.keyName" :replaceText="item.text" :value="item.value"/>
60
- </a-select-option>
61
- </template>
62
- </template>
63
- </a-select>
64
- <a-select
65
- v-else
66
- v-model="form[attr.model]"
67
- :disabled="disabled"
68
- :filter-option="filterOption"
69
- :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
70
- :placeholder="attr.placeholder ? attr.placeholder : '搜索' + attr.name"
71
- show-search
72
- @search="fetchFunction"
73
- >
74
- <a-spin v-if="searching" slot="notFoundContent" size="small" />
75
- <a-select-option
76
- v-if="mode === '查询'"
77
- key="999999"
78
- value="全部">全部
79
- </a-select-option>
80
- <a-select-option
81
- v-for="(item,index) in option"
82
- :key="index"
83
- :value="item.value">{{ item.label }}
84
- </a-select-option>
85
- </a-select>
86
- </a-form-model-item>
87
- </x-form-col>
88
- <!-- 多选框 -->
89
- <x-form-col
90
- v-else-if="attr.type === 'checkbox'"
91
- :xl="xl"
92
- :xxl="xxl">
93
- <a-form-model-item
94
- :ref="attr.model"
95
- :label="attr.name"
96
- :prop="attr.model">
97
- <a-select
98
- v-if="!attr.lazyLoad || attr.lazyLoad === 'false'"
99
- v-model="form[attr.model]"
100
- :disabled="disabled"
101
- :filter-option="filterOption"
102
- :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
103
- :placeholder="attr.placeholder ? attr.placeholder : '请选择'"
104
- mode="multiple"
105
- show-search
106
- allowClear
107
- >
108
- <template v-if="attr.keys">
109
- <a-select-option
110
- v-for="(item,index) in attr.keys"
111
- :key="index"
112
- :value="item.value">
113
- {{ item.label }}
114
- </a-select-option>
115
- </template>
116
- <template v-else>
117
- <template v-if="attr.keyName.indexOf('logic@') !== -1">
118
- <a-select-option
119
- v-for="(item,index) in option"
120
- :key="index"
121
- :value="item.value">{{ item.label }}
122
- </a-select-option>
123
- </template>
124
- <template v-else>
125
- <a-select-option
126
- v-for="item in $appdata.getDictionaryList(attr.keyName)"
127
- :key="item.value"
128
- :value="item.value">{{ item.text }}
129
- </a-select-option>
130
- </template>
131
- </template>
132
- </a-select>
133
- <a-select
134
- v-else
135
- v-model="form[attr.model]"
136
- :disabled="disabled"
137
- :filter-option="filterOption"
138
- :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
139
- :placeholder="attr.placeholder ? attr.placeholder : '搜索' + attr.name"
140
- mode="multiple"
141
- show-search
142
- allowClear
143
- @search="fetchFunction"
144
- >
145
- <a-spin v-if="searching" slot="notFoundContent" size="small" />
146
- <a-select-option
147
- v-for="(item,index) in option"
148
- :key="index"
149
- :value="item.value">{{ item.label }}
150
- </a-select-option>
151
- </a-select>
152
- </a-form-model-item>
153
- </x-form-col>
154
- <!-- TODO 单选框 -->
155
- <!-- 日期范围选择器 -->
156
- <x-form-col
157
- v-else-if="attr.type === 'rangePicker'"
158
- :xl="xl"
159
- :xxl="xxl">
160
- <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
161
- <a-range-picker v-model="form[attr.model]" :disabled="disabled" :show-time="true" valueFormat="YYYY-MM-DD HH:mm:ss"/>
162
- </a-form-model-item>
163
- </x-form-col>
164
- <!-- 月份选择器 -->
165
- <x-form-col
166
- v-else-if="attr.type === 'monthPicker'"
167
- :xl="xl"
168
- :xxl="xxl">
169
- <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
170
- <a-month-picker v-model="form[attr.model]" :disabled="disabled" :show-time="true" valueFormat="YYYY-MM"/>
171
- </a-form-model-item>
172
- </x-form-col>
173
- <!-- 年份选择器 -->
174
- <x-form-col
175
- v-else-if="attr.type === 'yearPicker'"
176
- :xl="xl"
177
- :xxl="xxl">
178
- <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
179
- <a-date-picker
180
- v-model="form[attr.model]"
181
- :disabled="disabled"
182
- format="YYYY"
183
- mode="year"
184
- v-decorator="['year']"
185
- placeholder="请输入年份"
186
- :open="yearShowOne"
187
- @openChange="openChangeOne"
188
- @panelChange="panelChangeOne"/>
189
- </a-form-model-item>
190
- </x-form-col>
191
- <!-- 日期选择器 -->
192
- <x-form-col
193
- v-else-if="attr.type === 'datePicker'"
194
- :xl="xl"
195
- :xxl="xxl">
196
- <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
197
- <a-range-picker
198
- v-if="mode === '查询'"
199
- v-model="form[attr.model]"
200
- :disabled="disabled"
201
- :show-time="{ defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }"
202
- format="YYYY-MM-DD"
203
- valueFormat="YYYY-MM-DD HH:mm:ss" />
204
- <a-date-picker v-else v-model="form[attr.model]" :disabled="disabled" :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }" valueFormat="YYYY-MM-DD HH:mm:ss"/>
205
- </a-form-model-item>
206
- </x-form-col>
207
- <!-- 文本域 -->
208
- <x-form-col
209
- v-else-if="attr.type === 'textarea'"
210
- :lg="24"
211
- :md="24"
212
- :sm="24"
213
- :xl="24"
214
- :xs="24"
215
- :xxl="24">
216
- <a-form-model-item
217
- :ref="attr.model"
218
- :label="attr.name"
219
- :prop="attr.model">
220
- <a-textarea v-model="form[attr.model]" :disabled="disabled" :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')" :rows="4"/>
221
- </a-form-model-item>
222
- </x-form-col>
223
- <!-- 文件上传 -->
224
- <x-form-col
225
- v-else-if="attr.type === 'file' || attr.type === 'image'"
226
- :lg="24"
227
- :md="24"
228
- :sm="24"
229
- :xl="24"
230
- :xs="24"
231
- :xxl="24">
232
- <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
233
- <upload :files="files" :images="images" :model="attr" :service-name="serviceName" @setFiles="setFiles"></upload>
234
- </a-form-model-item>
235
- </x-form-col>
236
- <!-- 省市区选择框 -->
237
- <x-form-col
238
- v-else-if="attr.type === 'citySelect'"
239
- :xl="xl"
240
- :xxl="xxl">
241
- <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
242
- <citySelect v-model="form[attr.model]" ></citySelect>
243
- </a-form-model-item>
244
- </x-form-col>
245
- <!-- 地点搜索框 -->
246
- <x-form-col
247
- v-else-if="attr.type === 'addressSearch'"
248
- :xl="xl"
249
- :xxl="xxl">
250
- <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
251
- <address-search-combobox
252
- v-model="searchResult"
253
- :resultKeys="{ address: attr.model, coords: `${attr.model}_lng_lat` }"
254
- searchResultType="Object"
255
- @onSelect="form=Object.assign(form,JSON.parse(searchResult))"
256
- ></address-search-combobox>
257
- </a-form-model-item>
258
- </x-form-col>
259
- <!-- 人员选择框 -->
260
- <x-form-col
261
- v-else-if="attr.type === 'personSetting'"
262
- :xl="xl"
263
- :xxl="xxl">
264
- <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
265
- <PersonSetting v-model="form[attr.model]" ></PersonSetting>
266
- </a-form-model-item>
267
- </x-form-col>
268
- <!-- 树形选择框 -->
269
- <x-form-col
270
- v-else-if="attr.type === 'treeSelect'"
271
- :xl="xl"
272
- :xxl="xxl">
273
- <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
274
- <a-tree-select
275
- v-model="treeSelectValue"
276
- :disabled="disabled"
277
- :tree-data="getTreeData()"
278
- :tree-checkable="mode === '查询' && attr.queryType !== 'RIGHT_LIKE'"
279
- :placeholder="'请选择' + attr.name"
280
- :dropdown-style="{ maxHeight: '400px' }"
281
- tree-node-filter-prop="label"
282
- :show-checked-strategy="attr.queryType === 'RIGHT_LIKE' ? 'SHOW_ALL' : undefined"
283
- allow-clear
284
- class="tree-select"
285
- @change="onTreeSelectChange">
286
- </a-tree-select>
287
- </a-form-model-item>
288
- </x-form-col>
289
- </template>
290
- <script>
291
-
292
- import { post } from '@vue2-client/services/api'
293
- import { debounce } from 'ant-design-vue/lib/vc-table/src/utils'
294
- import XFormCol from '@vue2-client/base-client/components/common/XFormCol'
295
- import XBadge from '@vue2-client/base-client/components/common/XBadge'
296
- import CitySelect from '@vue2-client/base-client/components/common/CitySelect'
297
- import PersonSetting from '@vue2-client/base-client/components/common/PersonSetting'
298
- import AddressSearchCombobox from '@vue2-client/base-client/components/common/AddressSearchCombobox'
299
- import Upload from '@vue2-client/base-client/components/common/Upload'
300
- import moment from 'moment'
301
-
302
- export default {
303
- name: 'XFormItem',
304
- components: {
305
- XFormCol,
306
- XBadge,
307
- CitySelect,
308
- PersonSetting,
309
- AddressSearchCombobox,
310
- Upload
311
- },
312
- data () {
313
- // 检索去抖
314
- this.fetchFunction = debounce(this.fetchFunction, 800)
315
- return {
316
- option: [],
317
- // 最后检索版本
318
- lastFetchId: 0,
319
- // 检索中
320
- searching: false,
321
- searchResult: '',
322
- yearShowOne: false,
323
- // moment
324
- moment,
325
- // 树形选择框选中值
326
- treeSelectValue: undefined
327
- }
328
- },
329
- props: {
330
- attr: {
331
- type: Object,
332
- default: () => {
333
- return {}
334
- }
335
- },
336
- form: {
337
- type: Object,
338
- required: true
339
- },
340
- disabled: {
341
- type: Boolean,
342
- default: () => {
343
- return false
344
- }
345
- },
346
- mode: {
347
- type: String,
348
- default: () => {
349
- return '查询'
350
- }
351
- },
352
- xl: {
353
- type: Number,
354
- default: undefined
355
- },
356
- xxl: {
357
- type: Number,
358
- default: undefined
359
- },
360
- files: {
361
- type: Array,
362
- default: () => {
363
- return []
364
- }
365
- },
366
- images: {
367
- type: Array,
368
- default: () => {
369
- return []
370
- }
371
- },
372
- serviceName: {
373
- type: String,
374
- default: 'af-system'
375
- },
376
- // 调用logic获取数据源的追加参数
377
- getDataParams: {
378
- type: Object,
379
- default: undefined
380
- }
381
- },
382
- created () {
383
- if (this.attr.keyName && this.attr.keyName.indexOf('logic@') !== -1) {
384
- this.getData({}, res => {
385
- this.option = res
386
- })
387
- }
388
- // 修改时恢复树形选择框选中状态
389
- if (this.attr.type === 'treeSelect' && this.attr.queryType !== 'RIGHT_LIKE') {
390
- this.treeSelectValue = this.form[this.attr.model]
391
- }
392
- },
393
- watch: {
394
- form: {
395
- handler (newVal) {
396
- const value = newVal[this.attr.model]
397
- const isEmpty = !value || !value.toString()
398
- // 查询表单点击重置按钮时清空树形选择框选中状态
399
- if (this.attr.type === 'treeSelect' && isEmpty) {
400
- this.treeSelectValue = undefined
401
- }
402
- },
403
- deep: true
404
- }
405
- },
406
- methods: {
407
- openChangeOne (status) {
408
- if (status) {
409
- this.yearShowOne = true
410
- }
411
- },
412
- // 得到年份选择器的值
413
- panelChangeOne (value) {
414
- this.yearShowOne = false
415
- this.form[this.attr.model] = value.format('YYYY')
416
- },
417
- // 文件框时设置上传组件的值
418
- setFiles (fileIds) {
419
- if (!this.form[this.attr.model]) {
420
- this.form[this.attr.model] = []
421
- }
422
- this.form[this.attr.model] = [...fileIds]
423
- },
424
- // 懒加载检索方法
425
- fetchFunction (value) {
426
- this.lastFetchId += 1
427
- const fetchId = this.lastFetchId
428
- this.option = []
429
- this.searching = true
430
- this.getData({
431
- word: value
432
- }, res => {
433
- if (fetchId !== this.lastFetchId) {
434
- return
435
- }
436
- this.option = res
437
- this.searching = false
438
- })
439
- },
440
- // 获取数据
441
- getData (value, callback) {
442
- if (value !== '') {
443
- const logicName = this.attr.keyName
444
- const logic = logicName.substring(6)
445
- const field = this.attr.model.replace('_', '.')
446
- // 调用logic前设置参数
447
- if (this.getDataParams && this.getDataParams[field]) {
448
- Object.assign(value, this.getDataParams[field])
449
- }
450
- post('/api/' + this.serviceName + '/logic/' + logic, value).then(res => {
451
- callback(res)
452
- })
453
- }
454
- },
455
- filterOption (input, option) {
456
- if (option.componentOptions.children[0].text) {
457
- return (
458
- option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
459
- )
460
- } else {
461
- return (
462
- option.componentOptions.children[0].child.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
463
- )
464
- }
465
- },
466
- // 获取树形选择框数据
467
- getTreeData () {
468
- let treeData = this.attr.keys
469
- if (!treeData) {
470
- treeData = this.option
471
- }
472
- if (this.mode === '新增/修改') {
473
- this.setParentSelectable(treeData)
474
- }
475
- return treeData
476
- },
477
- // 设置树形选择框不能选择父节点
478
- setParentSelectable (treeData) {
479
- treeData.forEach(item => {
480
- if (item.children && item.children.length) {
481
- item.selectable = false
482
- this.setParentSelectable(item.children)
483
- }
484
- })
485
- },
486
- // 选中树节点
487
- onTreeSelectChange (value, label, extra) {
488
- if (this.attr.queryType === 'RIGHT_LIKE') {
489
- // 获取可用于模糊查询的组织机构字符串
490
- let node = extra.triggerNode.$parent
491
- label = label[0]
492
- while (node && node.label) {
493
- label = node.label + '.' + label
494
- node = node.$parent
495
- }
496
- this.form[this.attr.model] = label
497
- } else {
498
- this.form[this.attr.model] = value
499
- }
500
- }
501
- }
502
- }
503
- </script>
504
-
505
- <style lang="less" scoped>
506
- .tree-select {
507
- /deep/ .ant-select-selection.ant-select-selection--multiple {
508
- max-height: 48px;
509
- overflow-y: auto;
510
- }
511
- }
512
- </style>
1
+ <template>
2
+ <!-- 输入框 -->
3
+ <x-form-col
4
+ v-if="attr.type === 'input'"
5
+ :xl="xl"
6
+ :xxl="xxl">
7
+ <a-form-model-item
8
+ :ref="attr.model"
9
+ :label="attr.name"
10
+ :prop="attr.model">
11
+ <a-input v-model="form[attr.model]" :disabled="disabled" :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"/>
12
+ </a-form-model-item>
13
+ </x-form-col>
14
+ <!-- 下拉框 -->
15
+ <x-form-col
16
+ v-else-if="attr.type === 'select'"
17
+ :xl="xl"
18
+ :xxl="xxl">
19
+ <a-form-model-item
20
+ :ref="attr.model"
21
+ :label="attr.name"
22
+ :prop="attr.model">
23
+ <a-select
24
+ v-if="!attr.lazyLoad || attr.lazyLoad === 'false'"
25
+ v-model="form[attr.model]"
26
+ :disabled="disabled"
27
+ :filter-option="filterOption"
28
+ :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
29
+ :placeholder="attr.placeholder ? attr.placeholder : '请选择'"
30
+ show-search
31
+ >
32
+ <a-select-option
33
+ v-if="mode === '查询'"
34
+ key="999999"
35
+ value="全部">全部
36
+ </a-select-option>
37
+ <template v-if="attr.keys">
38
+ <a-select-option
39
+ v-for="(item,index) in attr.keys"
40
+ :key="index"
41
+ :value="item.value">
42
+ {{ item.label }}
43
+ </a-select-option>
44
+ </template>
45
+ <template v-else>
46
+ <template v-if="attr.keyName.indexOf('logic@') !== -1">
47
+ <a-select-option
48
+ v-for="(item,index) in option"
49
+ :key="index"
50
+ :value="item.value">{{ item.label }}
51
+ </a-select-option>
52
+ </template>
53
+ <template v-else>
54
+ <a-select-option
55
+ v-for="item in $appdata.getDictionaryList(attr.keyName)"
56
+ :key="item.value"
57
+ :value="item.value">
58
+ <!-- 徽标(badge) -->
59
+ <x-badge :badge-key="attr.keyName" :replaceText="item.text" :value="item.value"/>
60
+ </a-select-option>
61
+ </template>
62
+ </template>
63
+ </a-select>
64
+ <a-select
65
+ v-else
66
+ v-model="form[attr.model]"
67
+ :disabled="disabled"
68
+ :filter-option="filterOption"
69
+ :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
70
+ :placeholder="attr.placeholder ? attr.placeholder : '搜索' + attr.name"
71
+ show-search
72
+ @search="fetchFunction"
73
+ >
74
+ <a-spin v-if="searching" slot="notFoundContent" size="small" />
75
+ <a-select-option
76
+ v-if="mode === '查询'"
77
+ key="999999"
78
+ value="全部">全部
79
+ </a-select-option>
80
+ <a-select-option
81
+ v-for="(item,index) in option"
82
+ :key="index"
83
+ :value="item.value">{{ item.label }}
84
+ </a-select-option>
85
+ </a-select>
86
+ </a-form-model-item>
87
+ </x-form-col>
88
+ <!-- 多选框 -->
89
+ <x-form-col
90
+ v-else-if="attr.type === 'checkbox'"
91
+ :xl="xl"
92
+ :xxl="xxl">
93
+ <a-form-model-item
94
+ :ref="attr.model"
95
+ :label="attr.name"
96
+ :prop="attr.model">
97
+ <a-select
98
+ v-if="!attr.lazyLoad || attr.lazyLoad === 'false'"
99
+ v-model="form[attr.model]"
100
+ :disabled="disabled"
101
+ :filter-option="filterOption"
102
+ :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
103
+ :placeholder="attr.placeholder ? attr.placeholder : '请选择'"
104
+ mode="multiple"
105
+ show-search
106
+ allowClear
107
+ >
108
+ <template v-if="attr.keys">
109
+ <a-select-option
110
+ v-for="(item,index) in attr.keys"
111
+ :key="index"
112
+ :value="item.value">
113
+ {{ item.label }}
114
+ </a-select-option>
115
+ </template>
116
+ <template v-else>
117
+ <template v-if="attr.keyName.indexOf('logic@') !== -1">
118
+ <a-select-option
119
+ v-for="(item,index) in option"
120
+ :key="index"
121
+ :value="item.value">{{ item.label }}
122
+ </a-select-option>
123
+ </template>
124
+ <template v-else>
125
+ <a-select-option
126
+ v-for="item in $appdata.getDictionaryList(attr.keyName)"
127
+ :key="item.value"
128
+ :value="item.value">{{ item.text }}
129
+ </a-select-option>
130
+ </template>
131
+ </template>
132
+ </a-select>
133
+ <a-select
134
+ v-else
135
+ v-model="form[attr.model]"
136
+ :disabled="disabled"
137
+ :filter-option="filterOption"
138
+ :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
139
+ :placeholder="attr.placeholder ? attr.placeholder : '搜索' + attr.name"
140
+ mode="multiple"
141
+ show-search
142
+ allowClear
143
+ @search="fetchFunction"
144
+ >
145
+ <a-spin v-if="searching" slot="notFoundContent" size="small" />
146
+ <a-select-option
147
+ v-for="(item,index) in option"
148
+ :key="index"
149
+ :value="item.value">{{ item.label }}
150
+ </a-select-option>
151
+ </a-select>
152
+ </a-form-model-item>
153
+ </x-form-col>
154
+ <!-- TODO 单选框 -->
155
+ <!-- 日期范围选择器 -->
156
+ <x-form-col
157
+ v-else-if="attr.type === 'rangePicker'"
158
+ :xl="xl"
159
+ :xxl="xxl">
160
+ <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
161
+ <a-range-picker v-model="form[attr.model]" :disabled="disabled" :show-time="true" valueFormat="YYYY-MM-DD HH:mm:ss"/>
162
+ </a-form-model-item>
163
+ </x-form-col>
164
+ <!-- 月份选择器 -->
165
+ <x-form-col
166
+ v-else-if="attr.type === 'monthPicker'"
167
+ :xl="xl"
168
+ :xxl="xxl">
169
+ <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
170
+ <a-month-picker v-model="form[attr.model]" :disabled="disabled" :show-time="true" valueFormat="YYYY-MM"/>
171
+ </a-form-model-item>
172
+ </x-form-col>
173
+ <!-- 年份选择器 -->
174
+ <x-form-col
175
+ v-else-if="attr.type === 'yearPicker'"
176
+ :xl="xl"
177
+ :xxl="xxl">
178
+ <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
179
+ <a-date-picker
180
+ v-model="form[attr.model]"
181
+ :disabled="disabled"
182
+ format="YYYY"
183
+ mode="year"
184
+ v-decorator="['year']"
185
+ placeholder="请输入年份"
186
+ :open="yearShowOne"
187
+ @openChange="openChangeOne"
188
+ @panelChange="panelChangeOne"/>
189
+ </a-form-model-item>
190
+ </x-form-col>
191
+ <!-- 日期选择器 -->
192
+ <x-form-col
193
+ v-else-if="attr.type === 'datePicker'"
194
+ :xl="xl"
195
+ :xxl="xxl">
196
+ <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
197
+ <a-range-picker
198
+ v-if="mode === '查询'"
199
+ v-model="form[attr.model]"
200
+ :disabled="disabled"
201
+ :show-time="{ defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }"
202
+ format="YYYY-MM-DD"
203
+ valueFormat="YYYY-MM-DD HH:mm:ss" />
204
+ <a-date-picker v-else v-model="form[attr.model]" :disabled="disabled" :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }" valueFormat="YYYY-MM-DD HH:mm:ss"/>
205
+ </a-form-model-item>
206
+ </x-form-col>
207
+ <!-- 文本域 -->
208
+ <x-form-col
209
+ v-else-if="attr.type === 'textarea'"
210
+ :lg="24"
211
+ :md="24"
212
+ :sm="24"
213
+ :xl="24"
214
+ :xs="24"
215
+ :xxl="24">
216
+ <a-form-model-item
217
+ :ref="attr.model"
218
+ :label="attr.name"
219
+ :prop="attr.model">
220
+ <a-textarea v-model="form[attr.model]" :disabled="disabled" :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')" :rows="4"/>
221
+ </a-form-model-item>
222
+ </x-form-col>
223
+ <!-- 文件上传 -->
224
+ <x-form-col
225
+ v-else-if="attr.type === 'file' || attr.type === 'image'"
226
+ :lg="24"
227
+ :md="24"
228
+ :sm="24"
229
+ :xl="24"
230
+ :xs="24"
231
+ :xxl="24">
232
+ <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
233
+ <upload :files="files" :images="images" :model="attr" :service-name="serviceName" @setFiles="setFiles"></upload>
234
+ </a-form-model-item>
235
+ </x-form-col>
236
+ <!-- 省市区选择框 -->
237
+ <x-form-col
238
+ v-else-if="attr.type === 'citySelect'"
239
+ :xl="xl"
240
+ :xxl="xxl">
241
+ <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
242
+ <citySelect v-model="form[attr.model]" ></citySelect>
243
+ </a-form-model-item>
244
+ </x-form-col>
245
+ <!-- 地点搜索框 -->
246
+ <x-form-col
247
+ v-else-if="attr.type === 'addressSearch'"
248
+ :xl="xl"
249
+ :xxl="xxl">
250
+ <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
251
+ <address-search-combobox
252
+ v-model="searchResult"
253
+ :resultKeys="{ address: attr.model, coords: `${attr.model}_lng_lat` }"
254
+ searchResultType="Object"
255
+ @onSelect="form=Object.assign(form,JSON.parse(searchResult))"
256
+ ></address-search-combobox>
257
+ </a-form-model-item>
258
+ </x-form-col>
259
+ <!-- 人员选择框 -->
260
+ <x-form-col
261
+ v-else-if="attr.type === 'personSetting'"
262
+ :xl="xl"
263
+ :xxl="xxl">
264
+ <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
265
+ <PersonSetting v-model="form[attr.model]" ></PersonSetting>
266
+ </a-form-model-item>
267
+ </x-form-col>
268
+ <!-- 树形选择框 -->
269
+ <x-form-col
270
+ v-else-if="attr.type === 'treeSelect'"
271
+ :xl="xl"
272
+ :xxl="xxl">
273
+ <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
274
+ <a-tree-select
275
+ v-model="treeSelectValue"
276
+ :disabled="disabled"
277
+ :tree-data="getTreeData()"
278
+ :tree-checkable="mode === '查询' && attr.queryType !== 'RIGHT_LIKE'"
279
+ :placeholder="'请选择' + attr.name"
280
+ :dropdown-style="{ maxHeight: '400px' }"
281
+ tree-node-filter-prop="label"
282
+ :show-checked-strategy="attr.queryType === 'RIGHT_LIKE' ? 'SHOW_ALL' : undefined"
283
+ allow-clear
284
+ class="tree-select"
285
+ @change="onTreeSelectChange">
286
+ </a-tree-select>
287
+ </a-form-model-item>
288
+ </x-form-col>
289
+ </template>
290
+ <script>
291
+
292
+ import { post } from '@vue2-client/services/api'
293
+ import { debounce } from 'ant-design-vue/lib/vc-table/src/utils'
294
+ import XFormCol from '@vue2-client/base-client/components/common/XFormCol'
295
+ import XBadge from '@vue2-client/base-client/components/common/XBadge'
296
+ import CitySelect from '@vue2-client/base-client/components/common/CitySelect'
297
+ import PersonSetting from '@vue2-client/base-client/components/common/PersonSetting'
298
+ import AddressSearchCombobox from '@vue2-client/base-client/components/common/AddressSearchCombobox'
299
+ import Upload from '@vue2-client/base-client/components/common/Upload'
300
+ import moment from 'moment'
301
+
302
+ export default {
303
+ name: 'XFormItem',
304
+ components: {
305
+ XFormCol,
306
+ XBadge,
307
+ CitySelect,
308
+ PersonSetting,
309
+ AddressSearchCombobox,
310
+ Upload
311
+ },
312
+ data () {
313
+ // 检索去抖
314
+ this.fetchFunction = debounce(this.fetchFunction, 800)
315
+ return {
316
+ option: [],
317
+ // 最后检索版本
318
+ lastFetchId: 0,
319
+ // 检索中
320
+ searching: false,
321
+ searchResult: '',
322
+ yearShowOne: false,
323
+ // moment
324
+ moment,
325
+ // 树形选择框选中值
326
+ treeSelectValue: undefined
327
+ }
328
+ },
329
+ props: {
330
+ attr: {
331
+ type: Object,
332
+ default: () => {
333
+ return {}
334
+ }
335
+ },
336
+ form: {
337
+ type: Object,
338
+ required: true
339
+ },
340
+ disabled: {
341
+ type: Boolean,
342
+ default: () => {
343
+ return false
344
+ }
345
+ },
346
+ mode: {
347
+ type: String,
348
+ default: () => {
349
+ return '查询'
350
+ }
351
+ },
352
+ xl: {
353
+ type: Number,
354
+ default: undefined
355
+ },
356
+ xxl: {
357
+ type: Number,
358
+ default: undefined
359
+ },
360
+ files: {
361
+ type: Array,
362
+ default: () => {
363
+ return []
364
+ }
365
+ },
366
+ images: {
367
+ type: Array,
368
+ default: () => {
369
+ return []
370
+ }
371
+ },
372
+ serviceName: {
373
+ type: String,
374
+ default: 'af-system'
375
+ },
376
+ // 调用logic获取数据源的追加参数
377
+ getDataParams: {
378
+ type: Object,
379
+ default: undefined
380
+ }
381
+ },
382
+ created () {
383
+ this.init()
384
+ },
385
+ watch: {
386
+ attr: {
387
+ handler (newVal) {
388
+ this.init()
389
+ },
390
+ deep: true
391
+ },
392
+ form: {
393
+ handler (newVal) {
394
+ const value = newVal[this.attr.model]
395
+ const isEmpty = !value || !value.toString()
396
+ // 查询表单点击重置按钮时清空树形选择框选中状态
397
+ if (this.attr.type === 'treeSelect' && isEmpty) {
398
+ this.treeSelectValue = undefined
399
+ }
400
+ },
401
+ deep: true
402
+ }
403
+ },
404
+ methods: {
405
+ init () {
406
+ if (this.attr.keyName && this.attr.keyName.indexOf('logic@') !== -1) {
407
+ this.getData({}, res => {
408
+ this.option = res
409
+ })
410
+ }
411
+ // 修改时恢复树形选择框选中状态
412
+ if (this.attr.type === 'treeSelect' && this.attr.queryType !== 'RIGHT_LIKE') {
413
+ this.treeSelectValue = this.form[this.attr.model]
414
+ }
415
+ },
416
+ openChangeOne (status) {
417
+ if (status) {
418
+ this.yearShowOne = true
419
+ }
420
+ },
421
+ // 得到年份选择器的值
422
+ panelChangeOne (value) {
423
+ this.yearShowOne = false
424
+ this.form[this.attr.model] = value.format('YYYY')
425
+ },
426
+ // 文件框时设置上传组件的值
427
+ setFiles (fileIds) {
428
+ if (!this.form[this.attr.model]) {
429
+ this.form[this.attr.model] = []
430
+ }
431
+ this.form[this.attr.model] = [...fileIds]
432
+ },
433
+ // 懒加载检索方法
434
+ fetchFunction (value) {
435
+ this.lastFetchId += 1
436
+ const fetchId = this.lastFetchId
437
+ this.option = []
438
+ this.searching = true
439
+ this.getData({
440
+ word: value
441
+ }, res => {
442
+ if (fetchId !== this.lastFetchId) {
443
+ return
444
+ }
445
+ this.option = res
446
+ this.searching = false
447
+ })
448
+ },
449
+ // 获取数据
450
+ getData (value, callback) {
451
+ if (value !== '') {
452
+ const logicName = this.attr.keyName
453
+ const logic = logicName.substring(6)
454
+ const field = this.attr.model.replace('_', '.')
455
+ // 调用logic前设置参数
456
+ if (this.getDataParams && this.getDataParams[field]) {
457
+ Object.assign(value, this.getDataParams[field])
458
+ }
459
+ post('/api/' + this.serviceName + '/logic/' + logic, value).then(res => {
460
+ callback(res)
461
+ })
462
+ }
463
+ },
464
+ filterOption (input, option) {
465
+ if (option.componentOptions.children[0].text) {
466
+ return (
467
+ option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
468
+ )
469
+ } else {
470
+ return (
471
+ option.componentOptions.children[0].child.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
472
+ )
473
+ }
474
+ },
475
+ // 获取树形选择框数据
476
+ getTreeData () {
477
+ let treeData = this.attr.keys
478
+ if (!treeData) {
479
+ treeData = this.option
480
+ }
481
+ if (this.mode === '新增/修改') {
482
+ this.setParentSelectable(treeData)
483
+ }
484
+ return treeData
485
+ },
486
+ // 设置树形选择框不能选择父节点
487
+ setParentSelectable (treeData) {
488
+ treeData.forEach(item => {
489
+ if (item.children && item.children.length) {
490
+ item.selectable = false
491
+ this.setParentSelectable(item.children)
492
+ }
493
+ })
494
+ },
495
+ // 选中树节点
496
+ onTreeSelectChange (value, label, extra) {
497
+ if (this.attr.queryType === 'RIGHT_LIKE') {
498
+ // 获取可用于模糊查询的组织机构字符串
499
+ let node = extra.triggerNode.$parent
500
+ label = label[0]
501
+ while (node && node.label) {
502
+ label = node.label + '.' + label
503
+ node = node.$parent
504
+ }
505
+ this.form[this.attr.model] = label
506
+ } else {
507
+ this.form[this.attr.model] = value
508
+ }
509
+ }
510
+ }
511
+ }
512
+ </script>
513
+
514
+ <style lang="less" scoped>
515
+ .tree-select {
516
+ /deep/ .ant-select-selection.ant-select-selection--multiple {
517
+ max-height: 48px;
518
+ overflow-y: auto;
519
+ }
520
+ }
521
+ </style>
@@ -286,7 +286,8 @@ export default {
286
286
  this.$refs.xAddForm.open({
287
287
  businessType: '修改',
288
288
  modifyModelData: res,
289
- title: this.title
289
+ title: this.title,
290
+ fixedAddForm: this.fixedAddForm
290
291
  })
291
292
  },
292
293
  /**