bri-components 1.2.52 → 1.2.54

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.
@@ -0,0 +1,530 @@
1
+ <template>
2
+ <div class="cascaderPicker">
3
+ <Dropdown
4
+ style="width: 100%;"
5
+ trigger="custom"
6
+ :visible="showModal"
7
+ :placement="placement"
8
+ :transfer="true"
9
+ transfer-class-name="cascaderPicker-down"
10
+ :stop-propagation="true"
11
+ :events-enabled="true"
12
+ >
13
+ <div @click.stop="clickInput">
14
+ <slot>
15
+ <Input
16
+ :value="activeStr"
17
+ :placeholder="selfPropsObj._placeholder"
18
+ :disabled="selfPropsObj._disabled"
19
+ :readonly="true"
20
+ :clearable="selfPropsObj._clearable"
21
+ :size="selfPropsObj._size"
22
+ ></Input>
23
+ </slot>
24
+ </div>
25
+
26
+ <!-- 下拉面板 -->
27
+ <div
28
+ slot="list"
29
+ class="wrap"
30
+ >
31
+ <!-- 按钮 -->
32
+ <div class="wrap-header">
33
+ <!-- 搜索 -->
34
+ <div class="wrap-header-left">
35
+ <Input
36
+ v-if="filterable"
37
+ class="search"
38
+ v-model="searchName"
39
+ placeholder="请输入关键字或标识"
40
+ search
41
+ @on-enter="search"
42
+ @on-search="search"
43
+ @on-change="search"
44
+ />
45
+
46
+ <template>
47
+ <div
48
+ v-if="useMode"
49
+ class="mode"
50
+ @click="showMode = showMode === 'default' ? 'flat' : 'default'"
51
+ >
52
+ <dsh-icons :list="[{ icon: 'md-swap' }]" />
53
+ <span class="mode-name">
54
+ {{ showMode === "default" ? "按层级" : "按平级" }}
55
+ </span>
56
+ </div>
57
+
58
+ <Tooltip
59
+ v-else
60
+ style="margin-left: 5px; cursor: pointer;"
61
+ content="在搜索时,会出现层级和平级切换开关,但搜索出的结果超100个时,将不支持使用模式切换,因为此时平级方式不方便,不适用"
62
+ max-width="250"
63
+ transfer
64
+ >
65
+ <Icon
66
+ class="item-header-help"
67
+ type="md-help-circle"
68
+ size="16"
69
+ ></Icon>
70
+ </Tooltip>
71
+ </template>
72
+ </div>
73
+
74
+ <!-- 按钮 -->
75
+ <dsh-buttons
76
+ class="wrap-header-right"
77
+ :list="$getOperationList()"
78
+ @click="$dispatchEvent($event)"
79
+ ></dsh-buttons>
80
+ </div>
81
+
82
+ <!-- 内容 -->
83
+ <div class="wrap-content">
84
+ <!-- 选中项tabs -->
85
+ <div class="wrap-content-tabs">
86
+ <span
87
+ v-for="(tabItem, tabIndex) in curSelectLinealDatas"
88
+ :key="tabIndex"
89
+ class="item"
90
+ @click="curTabIndex = tabIndex"
91
+ >
92
+ <span :class="{
93
+ 'item-text': true,
94
+ 'item-text-empty': tabItem[nameKey] === undefined,
95
+ 'item-text-active': tabIndex === curTabIndex,
96
+ }">
97
+ {{ tabItem[nameKey] === undefined ? "请选择" : tabItem[nameKey] }}
98
+ </span>
99
+ </span>
100
+ </div>
101
+
102
+ <!-- 列表 -->
103
+ <div class="wrap-content-list">
104
+ <!-- 有数据 -->
105
+ <DropdownMenu
106
+ v-if="showTreeData.length"
107
+ class="wrap-content-list-menu"
108
+ >
109
+ <!-- 拍平方式 -->
110
+ <template v-if="useFlatMode">
111
+ <DropdownItem
112
+ v-for="dataItem in showFlatData"
113
+ :key="dataItem[valueKey]"
114
+ :class="{
115
+ 'item': true,
116
+ 'item-active': curSelectObj && dataItem[valueKey] === curSelectObj[valueKey],
117
+ 'item-disabled': dataItem.disabled
118
+ }"
119
+ :name="dataItem[valueKey]"
120
+ :disabled="dataItem.disabled"
121
+ @click.native.stop="clickItem(dataItem)"
122
+ >
123
+ <span class="item-name">
124
+ {{ dataItem[nameKey] }}
125
+ </span>
126
+
127
+ <span class="item-icon">
128
+ <dsh-icons :list="[{
129
+ icon: curSelectObj && dataItem[valueKey] === curSelectObj[valueKey]
130
+ ? 'md-checkmark'
131
+ : ''
132
+ }]" />
133
+ </span>
134
+ </DropdownItem>
135
+ </template>
136
+
137
+ <!-- 层级方式 -->
138
+ <template v-else>
139
+ <DropdownItem
140
+ v-for="dataItem in curSelectLinealData.data"
141
+ :key="dataItem[valueKey]"
142
+ :class="{
143
+ 'item': true,
144
+ 'item-active': dataItem[valueKey] === curSelectLinealData[valueKey],
145
+ 'item-disabled': dataItem.disabled
146
+ }"
147
+ :name="dataItem[valueKey]"
148
+ :disabled="dataItem.disabled"
149
+ @click.native.stop="clickItem(dataItem)"
150
+ >
151
+ <span class="item-name">
152
+ {{ dataItem[nameKey] }}
153
+ </span>
154
+
155
+ <span class="item-icon">
156
+ <dsh-icons :list="[{
157
+ icon: dataItem[valueKey] === curSelectLinealData[valueKey]
158
+ ? 'md-checkmark'
159
+ : dataItem.children.length
160
+ ? 'ios-arrow-forward'
161
+ : ''
162
+ }]" />
163
+ </span>
164
+ </DropdownItem>
165
+ </template>
166
+ </DropdownMenu>
167
+
168
+ <!-- 无数据 -->
169
+ <div
170
+ v-else
171
+ class="wrap-content-list-nodata"
172
+ >
173
+ 暂无可用的数据……
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </Dropdown>
179
+ </div>
180
+ </template>
181
+
182
+ <script>
183
+ export default {
184
+ name: "cascaderPicker",
185
+ mixins: [],
186
+ components: {},
187
+ props: {
188
+ value: {
189
+ type: Boolean,
190
+ default: false
191
+ },
192
+
193
+ activeValue: {
194
+ type: Array,
195
+ default () {
196
+ return [];
197
+ }
198
+ },
199
+ activeStr: {
200
+ type: String,
201
+ default: ""
202
+ },
203
+ data: {
204
+ type: Array,
205
+ drfault () {
206
+ return [];
207
+ }
208
+ },
209
+ propsObj: {
210
+ type: Object,
211
+ default () {
212
+ return {};
213
+ }
214
+ },
215
+
216
+ placement: {
217
+ type: String,
218
+ default: "bottom-start"
219
+ }
220
+ },
221
+ data () {
222
+ return {
223
+ searchName: "",
224
+ showMode: "default", // "flat", "default"
225
+
226
+ curTabIndex: 0,
227
+ curSelectObj: undefined,
228
+ curSelectVal: [],
229
+
230
+ operationMap: {
231
+ canCancel: {
232
+ name: "取消",
233
+ type: "canCancel",
234
+ btnType: "cancel",
235
+ size: "small",
236
+ event: "clickCancel"
237
+ },
238
+ canConfirm: {
239
+ name: "确认",
240
+ type: "canConfirm",
241
+ btnType: "primary",
242
+ size: "small",
243
+ event: "clickConfirm"
244
+ }
245
+ }
246
+ };
247
+ },
248
+ computed: {
249
+ showModal: {
250
+ get () {
251
+ return this.value;
252
+ },
253
+ set (bool) {
254
+ this.$emit("input", bool);
255
+ }
256
+ },
257
+
258
+ selfPropsObj () {
259
+ return {
260
+ ...this.propsObj
261
+ };
262
+ },
263
+ filterable () {
264
+ return this.selfPropsObj._filterable;
265
+ },
266
+ changeOnSelect () {
267
+ return this.selfPropsObj._changeOnSelect;
268
+ },
269
+ saveKey () {
270
+ return this.selfPropsObj._saveKey;
271
+ },
272
+ valueKey () {
273
+ return this.selfPropsObj._valueKey;
274
+ },
275
+ nameKey () {
276
+ return this.selfPropsObj._nameKey;
277
+ },
278
+ renderFormat () {
279
+ return this.selfPropsObj._renderFormat;
280
+ },
281
+
282
+ useMode () {
283
+ return this.filterable &&
284
+ this.searchName.trim() &&
285
+ this.showFlatData.length < 200;
286
+ },
287
+ useFlatMode () {
288
+ return this.useMode &&
289
+ this.showMode === "flat";
290
+ },
291
+ showTreeData () {
292
+ return this.$getTreeDataByMatchFunc(node => {
293
+ return (
294
+ this.changeOnSelect
295
+ ? true
296
+ : node.isLeaf
297
+ ) && (
298
+ this.searchName.trim()
299
+ ? node[this.nameKey].includes(this.searchName.trim()) || node[this.valueKey].includes(this.searchName.trim())
300
+ : true
301
+ );
302
+ }, this.data);
303
+ },
304
+ showFlatData () {
305
+ return this.$getTreeLinealDatasArr(this.showTreeData).map(arrItem => {
306
+ return {
307
+ ...arrItem.slice(-1)[0],
308
+ [this.nameKey]: this.renderFormat(arrItem.map(item => item[this.nameKey]))
309
+ };
310
+ });
311
+ },
312
+ curSelectedOptions () {
313
+ return this.$getTreeLinealDatas(this.curSelectVal, this.showTreeData, undefined, this.saveKey);
314
+ },
315
+ curSelectLinealData () {
316
+ return this.curSelectLinealDatas[this.curTabIndex];
317
+ },
318
+ curSelectLinealDatas () {
319
+ const arr = this.curSelectedOptions.map((item, index, list) => {
320
+ return {
321
+ ...item,
322
+ data: index === 0 ? this.showTreeData : list[index - 1].children
323
+ };
324
+ });
325
+
326
+ return [
327
+ ...arr,
328
+
329
+ ...(
330
+ this.curSelectedOptions.length === 0
331
+ ? [
332
+ {
333
+ data: this.showTreeData
334
+ }
335
+ ]
336
+ : this.curTabIndex + 1 > this.curSelectedOptions.length && this.curSelectedOptions.slice(-1)[0].children.length
337
+ ? [
338
+ {
339
+ data: this.curSelectedOptions.slice(-1)[0].children
340
+ }
341
+ ]
342
+ : []
343
+ )
344
+ ];
345
+ }
346
+ },
347
+ created () {
348
+ this.init();
349
+ },
350
+ methods: {
351
+ init () {
352
+ this.curSelectVal = this.activeValue;
353
+ this.curTabIndex = this.curSelectVal.length === 0 ? 0 : this.curSelectVal.length - 1;
354
+ },
355
+
356
+ search () {
357
+ this.curSelectVal = [];
358
+ this.curTabIndex = 0;
359
+ },
360
+ clickInput () {
361
+ if (!this.selfPropsObj._disabled) {
362
+ this.showModal = true;
363
+ }
364
+ },
365
+ clickItem (dataItem) {
366
+ this.curSelectObj = dataItem;
367
+ this.curOldSelectVal = this.curSelectVal;
368
+ this.curSelectVal = dataItem.keys;
369
+ // 过滤重复点击
370
+ if (JSON.stringify(this.curSelectVal) !== JSON.stringify(this.curOldSelectVal)) {
371
+ const obj = {
372
+ value: this.curSelectVal,
373
+ selectedOptions: this.curSelectedOptions,
374
+ tabIndex: this.curTabIndex
375
+ };
376
+ this.$emit("change", obj);
377
+ !dataItem.children.length && this.$emit("finish", obj);
378
+ }
379
+
380
+ // 区分展示方式
381
+ if (this.showMode === "default" && dataItem.children.length) {
382
+ this.curTabIndex = this.curTabIndex + 1;
383
+ }
384
+ },
385
+ clickCancel () {
386
+ this.showModal = false;
387
+ },
388
+ clickConfirm () {
389
+ this.$emit("confirm", this.curSelectVal, this.curSelectedOptions);
390
+ }
391
+ }
392
+ };
393
+ </script>
394
+
395
+ <style lang="less">
396
+ .cascaderPicker {
397
+ &-down {
398
+ min-width: 400px;
399
+ max-width: 400px;
400
+ max-height: 600px; // 必须有
401
+ border: 0.5px solid #e5e5e5;
402
+ box-shadow: 0 3px 14px 2px rgba(0,0,0,0.05), 0 8px 10px 1px rgba(0,0,0,0.06), 0 5px 5px -3px rgba(0,0,0,0.1);
403
+
404
+ .wrap {
405
+ &-header {
406
+ width: 100%;
407
+ height: 40px;
408
+ padding: 0px 8px 3px;
409
+ border-bottom: 1px solid @borderColor;
410
+ display: flex;
411
+ justify-content: space-between;
412
+ align-items: center;
413
+
414
+ &-left {
415
+ width: 270px;
416
+ display: flex;
417
+ align-items: center;
418
+
419
+ .search {
420
+ width: 180px;
421
+ }
422
+
423
+ .mode {
424
+ width: 90px;
425
+ padding-top: 14px;
426
+ padding-left: 5px;
427
+ display: flex;
428
+ align-items: center;
429
+ cursor: pointer;
430
+
431
+ &-name {
432
+ font-size: 12px;
433
+ }
434
+ }
435
+ }
436
+
437
+ &-right {
438
+ padding-left: 10px;
439
+ display: flex;
440
+ justify-content: flex-end;
441
+ }
442
+ }
443
+
444
+ &-content {
445
+ &-tabs {
446
+ width: 100%;
447
+ height: 40px;
448
+ padding: 0px 5px;
449
+ white-space: nowrap;
450
+ overflow: auto;
451
+
452
+ .item {
453
+ display: inline-block;
454
+ padding: 0px 10px;
455
+ cursor: pointer;
456
+
457
+ &-text {
458
+ display: inline-block;
459
+ padding-top: 3px; // 为了文字靠下点
460
+ line-height: 34px;
461
+ font-weight: 500;
462
+
463
+ &-empty {
464
+ color: @placeholderColor;
465
+ }
466
+
467
+ &-active {
468
+ border-bottom: 3px solid @themeColor;
469
+ // transition-duration: 0.3s;
470
+ }
471
+ }
472
+ }
473
+ }
474
+
475
+ &-list {
476
+ width: 100%;
477
+ min-height: 360px;
478
+ max-height: 360px;
479
+ padding: 5px 10px 10px;
480
+ overflow: auto;
481
+
482
+ &-menu {
483
+ .item {
484
+ padding: 8px 10px;
485
+ border-radius: @borderRadius;
486
+ line-height: 16px;
487
+ display: flex;
488
+ flex-direction: row;
489
+ justify-content: space-between;
490
+ align-items: center;
491
+
492
+ &-name {
493
+ flex: 1;
494
+ min-width: 0px;
495
+ white-space: normal;
496
+ }
497
+
498
+ &-icon {
499
+ width: 40px;
500
+ padding-left: 10px;
501
+ text-align: right;
502
+ }
503
+
504
+ &:hover,
505
+ &-active {
506
+ background-color: @theme-focus;
507
+ color: @themeColor;
508
+ }
509
+
510
+ &-disabled {
511
+ background-color: @inputBg-disabled;
512
+ color: @textColor-disabled;
513
+
514
+ &:hover {
515
+ background-color: @inputBg-disabled;
516
+ color: @textColor-disabled;
517
+ }
518
+ }
519
+ }
520
+ }
521
+
522
+ &-nodata {
523
+ #dsh-nodata();
524
+ }
525
+ }
526
+ }
527
+ }
528
+ }
529
+ }
530
+ </style>
@@ -45,7 +45,7 @@
45
45
  'DshEditor-unit': !$isEmptyData(curVal)
46
46
  }"
47
47
  >
48
- {{ $isEmptyData(curVal) ? emptyShowVal : "富文本达成纳斯达克了城市的女你说的 v 是对女生看到 v 你说的 v 说" }}
48
+ {{ $isEmptyData(curVal) ? emptyShowVal : "富文本" }}
49
49
  </div>
50
50
 
51
51
  <!-- 查看页里 的查看 -->
@@ -90,7 +90,9 @@ export default {
90
90
  },
91
91
  // 是否为多选模式
92
92
  multipleMode () {
93
- return ["texts", "numberange", "daterange", "checkbox", "regions", "cascaders"].includes(this.controlType) || !!this.propsObj._multiple;
93
+ return this.isOnDftSearch || this.isOnSearch
94
+ ? true
95
+ : ["texts", "numberange", "daterange", "checkbox", "regions", "cascaders"].includes(this.controlType) || !!this.propsObj._multiple;
94
96
  },
95
97
  commonDealPropsObj () {
96
98
  const selectControlTypes = ["date", "switch", "select", "checkbox", "file", "region", "regions", "cascader", "cascaders", "coordinates", "users", "departments"];
@@ -160,11 +162,19 @@ export default {
160
162
  modKey () {
161
163
  return this.propsObj.modKey;
162
164
  },
163
- // 移动端在用 --只做校验的field框所用的propsObj
165
+
166
+ /* 移动端在用 */
167
+ // 只做校验而隐藏的的field框,所用的propsObj
164
168
  ruleFieldPropsObj () {
165
169
  return {
166
170
  _rules: this.propsObj._rules
167
171
  };
172
+ },
173
+ // 只做校验而隐藏的的field框,所用的value
174
+ ruleFieldStr () {
175
+ return this.$isEmptyData(this.curVal) && this.$isEmptyData(this.curValList)
176
+ ? ""
177
+ : "有值";
168
178
  }
169
179
  },
170
180
  methods: {
@@ -180,11 +190,11 @@ export default {
180
190
  toggleModal (bool) {
181
191
  this.showModal = bool;
182
192
  },
183
- // 打开弹框
193
+ // 打开弹框 ---!!!!pc端的selectUsers、selectDepartments控件,外部调用组件时也在使用,不能轻易删除
184
194
  openModal () {
185
195
  this.showModal = true;
186
196
  },
187
- // 关闭弹框
197
+ // 关闭弹框 ---!!!!pc端的selectUsers、selectDepartments控件,外部调用组件时也在使用,不能轻易删除
188
198
  closeModal () {
189
199
  this.showModal = false;
190
200
  }
@@ -220,14 +220,6 @@
220
220
  },
221
221
  created () {},
222
222
  methods: {
223
- // 外部也在使用
224
- openModal () {
225
- this.showModal = true;
226
- },
227
- closeModal () {
228
- this.showModal = false;
229
- },
230
-
231
223
  // 搜索
232
224
  search () {
233
225
  this.getListData();