n20-common-lib 1.3.36 → 1.3.37

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.
@@ -1,485 +0,0 @@
1
- <!--
2
- 功能: 自定义查询条件
3
- 作者: nstc
4
- 创建时间: 2021-02-05
5
- -->
6
-
7
- <template>
8
- <div class="n20-filter-custom-box">
9
- <el-popover
10
- ref="popover"
11
- v-model="popoverShowFlag"
12
- :placement="placement"
13
- trigger="click"
14
- popper-class="n20-search__popper"
15
- >
16
- <div class="filter-custom-box-main">
17
- <div class="filter-custom-box-main-header">
18
- <div class="filter-text">筛选</div>
19
- <div class="filter-close-img" @click="closePopover">
20
- <i class="el-icon-close"></i>
21
- </div>
22
- </div>
23
- <div v-loading="loadingFlag" class="filter-custom-box-main-condition">
24
- <NstcForm
25
- v-model="formModel"
26
- :form-data="formModel"
27
- :config="formConfig"
28
- :mount-and-query="false"
29
- :reset.sync="reset"
30
- :label-width="labelWidth"
31
- @tree-node-click="clickTreeNode"
32
- />
33
- </div>
34
- <div class="filter-custom-box-main-more">
35
- <span @click="moreCondition">更多条件</span>
36
- </div>
37
- <div class="filter-custom-box-main-footer">
38
- <el-button
39
- type="primary"
40
- class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-b"
41
- @click="confirmAction"
42
- >确定</el-button
43
- >
44
- <el-tooltip
45
- class="item"
46
- effect="dark"
47
- content="重置本次操作"
48
- placement="top-start"
49
- >
50
- <el-button
51
- class="nstc-g6-common-btn-3 nstc-g6-common-btn-size-b"
52
- @click="resetAction"
53
- >清空</el-button
54
- >
55
- </el-tooltip>
56
- </div>
57
- </div>
58
- <div slot="reference" class="filter-opt">
59
- <el-button
60
- icon="n20-icon-iconfontshaixuan"
61
- plain
62
- onlyicon
63
- size="mini"
64
- @click.stop="init"
65
- />
66
- </div>
67
- </el-popover>
68
-
69
- <!-- 查询条件 -->
70
- <NstcTableSet
71
- v-model="conditionSetFlag"
72
- :type="defaultType"
73
- :config="config"
74
- :title="setTitle"
75
- @confirm="handleConfirm"
76
- />
77
- </div>
78
- </template>
79
-
80
- <script>
81
- import NstcTableSet from '../../../nstc-g6/components/NstcTableSet/NstcTableSet'
82
- import NstcForm from '../../../nstc-g6/components/NstcForm/Component'
83
- import axios from '../../utils/axios'
84
-
85
- export default {
86
- name: 'Search',
87
-
88
- components: {
89
- NstcTableSet,
90
- NstcForm
91
- },
92
-
93
- props: {
94
- defaultConfig: {
95
- type: Object,
96
- default: () => {
97
- return {}
98
- }
99
- },
100
- config: {
101
- type: Object,
102
- default: () => {
103
- return {
104
- pageUUID: '',
105
- moduleNo: '',
106
- queryType: ''
107
- }
108
- }
109
- },
110
- defaultValue: {
111
- type: Object,
112
- default: () => {
113
- return {}
114
- }
115
- },
116
- valueConfig: {
117
- type: Object,
118
- default: () => {
119
- return {}
120
- }
121
- }
122
- },
123
-
124
- data() {
125
- return {
126
- placement: 'bottom',
127
- conditionSetFlag: false,
128
- defaultType: 'condition',
129
- formModel: {},
130
- reset: false,
131
- defaultSet: [],
132
- setTitle: '筛选条件',
133
- popoverShowFlag: false,
134
- queryTypeObj: {
135
- all: 1, // 全部
136
- columnSet: 2, // 表格设置
137
- condition: 3 // 条件设置
138
- },
139
- loadingFlag: false,
140
- hasLoad: false,
141
- formConfig: [],
142
- oldFormModel: {}
143
- }
144
- },
145
-
146
- computed: {
147
- labelWidth() {
148
- let l = 0
149
- this.defaultSet.map((i) => {
150
- l = Math.max(i[`name`].length, l)
151
- })
152
- return l === 0 ? '120' : l * 16 + 12
153
- }
154
- },
155
- watch: {
156
- defaultSet: {
157
- handler(value) {
158
- if (value && Array.isArray(value) && value.length) {
159
- const that = this
160
- this.formConfig = that.defaultSet.map((item) => {
161
- let mold = that.typeConversion(item.type)
162
- let options = []
163
- try {
164
- options = JSON.parse(item.options)
165
- } catch (error) {
166
- options = []
167
- }
168
- // item.multiple 添加默认配置
169
- const customConfig = that.defaultConfig[item.id] || {}
170
- let data = [
171
- {
172
- mold: mold.type, // 组件名称
173
- name: item.name, // 表单选项的名称
174
- prop:
175
- item.type == 'select' && item.multiple
176
- ? item.id + 's'
177
- : item.id, // 绑定的key值
178
- options: options, //item.options ? JSON.parse(item.options):[], // 下拉选择框的选项
179
- url: that.removeQuotation(item.url), // 远程查询的url
180
- formConfig: item.formConfig || [], // 弹窗查询的 选择表单
181
- columns: item.columns || [], // 弹框查询: 的表格配置
182
- valueKey: that.removeQuotation(item.valueKey),
183
- labelKey: that.removeQuotation(item.labelKey),
184
- httpMethod: item.httpMethod || 'get', // 请求方式
185
- lazyLoad: item.lazyLoad || false, // 请求方式
186
- placeholder: item.placeholder,
187
- width: item.width || 224,
188
- disabled: item.disabled,
189
- params: item.params,
190
- multiple: item.multiple,
191
- defaultProps: item.defaultProps,
192
- remote: item.remote,
193
- filterable: item.filterable,
194
- query: item.query,
195
- onlyClickLeaf: item.onlyClickLeaf, //item.onlyClickLeaf,
196
- disableUnclickLeaf: item.disableUnclickLeaf, //下拉树是否禁用非子节点,默认false,不禁用
197
- clearable: item.clearable,
198
- checkStrictly: item.checkStrictly,
199
- resProp: item.resProp || null,
200
- isCache: item.isCache,
201
- dateType: item.dateType, // 时间选择框 时间范围限制
202
- class: {
203
- 'filter-condition-input': [
204
- 'input',
205
- 'nstcSelectTree'
206
- ].includes(mold.type), // 用于控制组件长度
207
- [item.className || 'null-custom-class']: true
208
- },
209
- ...customConfig,
210
- isInitRequest: item.name === '融资单位' && item.id // 特殊处理
211
- }
212
- ]
213
-
214
- // 判断是否设置默认值
215
- if (!['', null, undefined].includes(this.defaultValue[item.id])) {
216
- data[0].default = this.defaultValue[item.id]
217
- }
218
-
219
- if (mold.attr) {
220
- data[0].type = mold.attr
221
- }
222
-
223
- if (item.bind && item.bind instanceof Object) {
224
- // 不能改变原来的属性
225
- const bindKey = Object.keys(item.bind)
226
- const dataKey = Object.keys(data[0])
227
- const tempKey = bindKey.filter((k) => !dataKey.includes(k))
228
-
229
- tempKey.map((k) => {
230
- data[0][k] = item.bind[k]
231
- })
232
- }
233
-
234
- /**
235
- * 特殊自定义组件属性处理
236
- */
237
- if (
238
- item.type === 'nstcSelectTree' ||
239
- item.type === 'nstcSelectTreeList'
240
- ) {
241
- data[0].defaultProps = item.defaultProps
242
- data[0].tagProps = item.tagProps
243
- data[0].nodeKey = item.nodeKey
244
- data[0].params = item.params
245
- data[0].queryKey = item.queryKey
246
- data[0].label = item.label
247
- }
248
- if (item.id === 'branchBankNo') {
249
- data[0].defaultProps = item.defaultProps
250
- data[0].nodeKey = item.nodeKey
251
- data[0].params = item.params
252
- data[0].queryKey = item.queryKey
253
- data[0].filterable = item.filterable
254
- data[0].httpMethod = item.httpMethod
255
- data[0].queryKey = item.queryKey
256
- data[0].lazyLoad = item.lazyLoad
257
- data[0].pageMode = item.pageMode
258
- data[0].pageCurrentKey = item.pageCurrentKey
259
- data[0].pageSizeKey = item.pageSizeKey
260
- data[0].remote = item.remote
261
- }
262
- return data
263
- })
264
- setTimeout(() => {
265
- this.setValue()
266
- }, 0)
267
- }
268
- },
269
- immediate: true,
270
- deep: true
271
- },
272
-
273
- /**
274
- * 下拉等组件联动,修改组件配置
275
- * 监听form-change,并使用updateFormConfig更新表单配置
276
- */
277
- formModel: {
278
- deep: true,
279
- handler(data) {
280
- this.$emit('form-change', data, this.formConfig)
281
- }
282
- }
283
- },
284
- mounted() {
285
- console.log(444)
286
- },
287
- methods: {
288
- /**
289
- * 组件联动,避免多次触发nstcform.watch.config
290
- */
291
- updateFormConfig(newConfig) {
292
- this.formConfig = newConfig
293
- },
294
-
295
- clickTreeNode(queryKey, data) {
296
- if (queryKey) {
297
- this.formModel[queryKey] = data[queryKey]
298
- }
299
- },
300
- /**
301
- * 提交保存成功
302
- */
303
- handleConfirm() {
304
- console.log('查询条件设置成功', this.formModel)
305
- // 缓存下之前的数据
306
- const cache = JSON.parse(JSON.stringify(this.formModel))
307
- this.init('update', () => {
308
- this.formModel = cache
309
- })
310
- this.popoverShowFlag = true
311
- },
312
-
313
- async init(flag, cb) {
314
- this.popoverShowFlag = !this.popoverShowFlag
315
- if (this.hasLoad && flag !== 'update') {
316
- this.changeDefaultSet()
317
-
318
- this.$nextTick(() => {
319
- this.$forceUpdate()
320
- })
321
- return
322
- }
323
- this.loadingFlag = true
324
- this.defaultSet = []
325
- const res = await axios.get(`/bems/1.0/dynamicUnit`, {
326
- ...this.config,
327
- queryType: 3
328
- })
329
- this.loadingFlag = false
330
- this.hasLoad = true
331
- this.defaultSet = res.data
332
- this.changeDefaultSet()
333
- this.$nextTick(() => {
334
- this.updatePop()
335
- this.$forceUpdate()
336
- cb && cb()
337
- })
338
- },
339
- changeDefaultSet(type) {
340
- this.defaultSet = this.defaultSet.map((item) => {
341
- let nItem = Object.assign({}, item)
342
- nItem.disabled = this.valueConfig[item.id]
343
- ? this.valueConfig[item.id].disabled || false
344
- : false
345
- this.valueConfig[item.id] &&
346
- (nItem.label = this.valueConfig[item.id].label)
347
- nItem.options = this.valueConfig[item.id]
348
- ? JSON.stringify(this.valueConfig[item.id].options) || []
349
- : item.options
350
- nItem.time = new Date().getTime()
351
- nItem.clearable = this.valueConfig[item.id]
352
- ? this.valueConfig[item.id].clearable
353
- : true
354
- return nItem
355
- })
356
- console.log(this.defaultSet, 123)
357
- },
358
- setValue() {
359
- let newObj = {}
360
- for (let key1 in this.valueConfig) {
361
- let item = this.valueConfig[key1]
362
- let keyObj = this.defaultSet.find(
363
- (item) => item.id === key1 && item.type === 'select' && item.multiple
364
- )
365
- if (item.hasOwnProperty('value')) {
366
- this.$set(
367
- newObj,
368
- keyObj ? key1 + 's' : key1,
369
- this.reset ? '' : item.value
370
- )
371
- }
372
- }
373
- // this.formModel = {...this.formModel,...this.oldFormModel, ...newObj}
374
- if (JSON.stringify(this.oldFormModel) !== '{}') {
375
- // 旧配置中的字段不在新的配置中,则需要移除对应的缓存值
376
- this.defaultSet.forEach(({ id, multiple, type, queryKey }) => {
377
- const isExist =
378
- Reflect.has(this.oldFormModel, id) ||
379
- Reflect.has(this.oldFormModel, id + 's')
380
- // 在缓存中存在,则取缓存的值
381
- if (isExist) {
382
- if (type === 'select' && multiple) {
383
- this.formModel[id + 's'] = this.oldFormModel[id + 's']
384
- } else {
385
- this.formModel[id] = this.oldFormModel[id]
386
- }
387
- } else {
388
- this.formModel[id] = this.defaultSet[id]
389
- }
390
- })
391
- // 新配置中移除了某些字段,需要将缓存中的字段移除
392
- Object.keys(this.oldFormModel).forEach((k) => {
393
- const isExist = this.defaultSet.find((item) => {
394
- return item.id === k || item.id + 's' === k || item.queryKey == k
395
- })
396
- if (!isExist) {
397
- delete this.formModel[k]
398
- }
399
- })
400
- }
401
- this.formModel = { ...this.formModel, ...newObj }
402
- this.reset = false
403
- },
404
- /**
405
- * 类型转化方法
406
- */
407
- typeConversion(type) {
408
- // 属性合集
409
- const mold = [
410
- {
411
- // 时间
412
- type: 'datepicker',
413
- attr: 'daterange'
414
- }
415
- ]
416
- // 筛选对应需要添加属性的数据
417
- // eg:
418
- let isAddAttr = mold.filter((x) => x.attr === type)
419
-
420
- return isAddAttr.length !== 0
421
- ? {
422
- type: isAddAttr[0].type,
423
- attr: isAddAttr[0].attr
424
- }
425
- : {
426
- type: type,
427
- attr: null
428
- }
429
- },
430
-
431
- /**
432
- * 查询更多条件
433
- */
434
- moreCondition() {
435
- this.conditionSetFlag = true
436
- },
437
-
438
- /**
439
- * 确认查询
440
- */
441
- confirmAction() {
442
- this.popoverShowFlag = false
443
- this.oldFormModel = JSON.parse(JSON.stringify(this.formModel))
444
- // 格式化金额
445
- this.$emit('search', this.formModel)
446
- },
447
-
448
- /**
449
- * 去掉后台返回字段的”
450
- */
451
- removeQuotation(str) {
452
- return str ? str.replace(/"/g, '') : ''
453
- },
454
-
455
- /**
456
- * 重置
457
- */
458
- resetAction() {
459
- this.reset = true
460
- this.oldFormModel = {}
461
- this.changeDefaultSet('reset')
462
- this.$emit('reset', this.formModel)
463
- },
464
-
465
- /**
466
- * 关闭
467
- */
468
- closePopover() {
469
- this.reset = true
470
- this.$nextTick(() => {
471
- this.popoverShowFlag = false
472
- })
473
- },
474
-
475
- /**
476
- * 手动打开
477
- */
478
- openPopover() {},
479
-
480
- updatePop() {
481
- this.$refs.popover.updatePopper()
482
- }
483
- }
484
- }
485
- </script>
@@ -1,93 +0,0 @@
1
- .n20-search__popper.el-popper[x-placement^='bottom'] {
2
- padding: 16px;
3
- }
4
-
5
- .n20-filter-custom-box {
6
- display: inline-block;
7
- // .interval-input-custom {
8
- // }
9
- .filter-btn {
10
- height: 34px !important;
11
- width: 90px !important;
12
- }
13
- .filter-opt {
14
- display: inline-block;
15
- cursor: pointer;
16
- &-temp {
17
- border: 1px solid #dddddd;
18
- // width: 26px;
19
- // height: 26px;
20
- padding: 5px;
21
- border-radius: 4px;
22
- display: flex;
23
- align-items: center;
24
- overflow: hidden;
25
- .is-svg-default {
26
- display: block;
27
- }
28
- .is-svg-hover {
29
- display: none;
30
- }
31
- }
32
-
33
- &-temp:hover {
34
- border: 1px solid #007aff;
35
- .is-svg-default {
36
- display: none;
37
- }
38
- .is-svg-hover {
39
- display: block;
40
- }
41
- }
42
- }
43
-
44
- &-main {
45
- display: flex;
46
- flex-direction: column;
47
- min-width: 360px;
48
- &-header {
49
- display: flex;
50
- justify-content: space-between;
51
- align-items: center;
52
- padding-right: 16px;
53
- .filter-text {
54
- color: #262d34;
55
- font-size: 16px;
56
- }
57
- .filter-close-img {
58
- cursor: pointer;
59
- }
60
- img {
61
- width: 16px;
62
- height: 16px;
63
- }
64
- }
65
- &-condition {
66
- flex: 1;
67
- //border: 1px solid #000;
68
- overflow-y: auto;
69
- margin-top: 11px;
70
- max-height: 300px !important;
71
- padding-top: 3px;
72
- // 13 剧中
73
- width: calc(100%);
74
- .el-form-item {
75
- margin-bottom: 16px;
76
- }
77
- }
78
- &-more {
79
- margin: 10px 0 6px 0;
80
- font-size: 14px;
81
- span {
82
- color: #007aff;
83
- cursor: pointer;
84
- }
85
- }
86
- &-footer {
87
- text-align: center;
88
- }
89
- }
90
- .el-input__inner {
91
- width: 224px;
92
- }
93
- }
@@ -1,10 +0,0 @@
1
- const directive = {}
2
- directive.install = (Vue) => {
3
- Vue.directive('rules', {
4
- bind(el, binding, vnode) {},
5
- update(el, binding) {},
6
- unbind(el, binding) {}
7
- })
8
- }
9
-
10
- export default directive