bri-components 1.2.9 → 1.2.11

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.
Files changed (35) hide show
  1. package/lib/0.bri-components.min.js +1 -1
  2. package/lib/1.bri-components.min.js +1 -1
  3. package/lib/2.bri-components.min.js +1 -1
  4. package/lib/3.bri-components.min.js +1 -1
  5. package/lib/4.bri-components.min.js +1 -1
  6. package/lib/5.bri-components.min.js +1 -1
  7. package/lib/6.bri-components.min.js +1 -1
  8. package/lib/bri-components.min.js +7 -7
  9. package/package.json +1 -1
  10. package/src/components/controls/BriControlInput.vue +68 -4
  11. package/src/components/controls/base/BriUpload/BriUpload.vue +75 -192
  12. package/src/components/controls/base/BriUpload/BriUploadImage.vue +4 -3
  13. package/src/components/controls/base/BriUpload/uploadMixin.js +15 -21
  14. package/src/components/controls/base/DshCascader/DshCascader.vue +55 -97
  15. package/src/components/controls/base/DshCoordinates.vue +38 -57
  16. package/src/components/controls/base/DshInput.vue +1 -0
  17. package/src/components/controls/controlMixin.js +20 -15
  18. package/src/components/controls/senior/BriLabels.vue +9 -40
  19. package/src/components/controls/senior/selectDepartments.vue +11 -41
  20. package/src/components/controls/senior/selectUsers/selectUsers.vue +8 -38
  21. package/src/components/form/DshAdvSearchForm.vue +9 -9
  22. package/src/components/small/BriButton.vue +1 -1
  23. package/src/components/small/BriTooltip.vue +34 -41
  24. package/src/components/unit/DshUnit.vue +2 -1
  25. package/src/index.js +2 -0
  26. package/src/styles/common/control.less +4 -38
  27. package/src/styles/components/controls/BriControlInput.less +28 -1
  28. package/src/styles/components/controls/base/DshCascader/DshCascader.less +2 -3
  29. package/src/styles/components/controls/base/DshCoordinates.less +1 -5
  30. package/src/styles/components/controls/senior/BriLabels.less +1 -1
  31. package/src/styles/components/controls/senior/selectDepartments.less +1 -1
  32. package/src/styles/components/controls/senior/selectUsers/selectUsers.less +1 -1
  33. package/src/styles/components/index.less +2 -0
  34. package/src/styles/components/small/BriTooltip.less +2 -2
  35. package/src/styles/components/small/DshModal.less +1 -1
@@ -19,48 +19,20 @@
19
19
  @on-visible-change="multipleVisibleChange"
20
20
  @on-change="createItem"
21
21
  >
22
- <div
22
+ <bri-control-input
23
23
  :class="{
24
24
  ...commonClass,
25
25
  'DshCascader-edit-multiple-edit': true,
26
- 'DshCascader-row-edit': isMultipleRow,
26
+ 'DshCascader-row-edit': isFullRow && multipleMode
27
27
  }"
28
- @mouseenter="isHover = true"
29
- @mouseleave="isHover = false"
30
- @click="clickInput"
31
- >
32
- <!-- 有值 -->
33
- <template v-if="!$isEmptyData(curValList)">
34
- <dsh-tags
35
- class="overflow"
36
- :list="curValNameList"
37
- :propsObj="{
38
- disabled: !finalCanEdit,
39
- closable: true
40
- }"
41
- @delete="deleteItem"
42
- ></dsh-tags>
43
- </template>
44
- <!-- 无值 -->
45
- <template v-else>
46
- {{ emptyShowVal }}
47
- </template>
48
-
49
- <!-- 图标 -->
50
- <template>
51
- <Icon
52
- v-if="!$isEmptyData(curValList) && selfPropsObj._clearable && isHover"
53
- class="icon-close"
54
- type="ios-close-circle"
55
- @click.stop="clickClear"
56
- />
57
- <Icon
58
- v-else
59
- class="icon-default"
60
- :type="inputIcon"
61
- />
62
- </template>
63
- </div>
28
+ :canEdit="finalCanEdit"
29
+ :value="curValNameList"
30
+ :inputIcon="inputIcon"
31
+ :propsObj="selfPropsObj"
32
+ @deleteItem="clickDeleteItem"
33
+ @clear="clickClear"
34
+ @click.native="clickInput"
35
+ ></bri-control-input>
64
36
  </Cascader>
65
37
  </template>
66
38
 
@@ -68,33 +40,18 @@
68
40
  <template v-else>
69
41
  <!-- 弹框方式 -->
70
42
  <template v-if="showMode === 'custom'">
71
- <div
43
+ <bri-control-input
72
44
  :class="{
73
45
  ...commonClass,
74
46
  'DshCascader-edit-custom': true
75
47
  }"
76
- @mouseenter="isHover = true"
77
- @mouseleave="isHover = false"
78
- @click="openModal"
79
- >
80
- <!-- 内容 -->
81
- <div class="text">
82
- {{ showVal }}
83
- </div>
84
-
85
- <!-- 右侧图标 -->
86
- <Icon
87
- v-if="selfPropsObj._clearable && isHover"
88
- class="icon-close"
89
- type="ios-close-circle"
90
- @click.stop="clickClear"
91
- />
92
- <Icon
93
- v-else
94
- class="icon-default"
95
- type="ios-arrow-down"
96
- />
97
- </div>
48
+ :canEdit="finalCanEdit"
49
+ :value="curValName"
50
+ :inputIcon="inputIcon"
51
+ :propsObj="selfPropsObj"
52
+ @clear="clickClear"
53
+ @click.native="openModal"
54
+ ></bri-control-input>
98
55
 
99
56
  <!-- 内容弹框 -->
100
57
  <info-cascader
@@ -103,8 +60,8 @@
103
60
  v-model="curValList"
104
61
  :data="cascaderData"
105
62
  :propsObj="selfPropsObj"
63
+ @changeShowModal="toggleModal"
106
64
  @change="change"
107
- @changeShowModal="changeShowModal"
108
65
  ></info-cascader>
109
66
  </template>
110
67
 
@@ -126,7 +83,9 @@
126
83
  @on-visible-change="visibleChange"
127
84
  @on-change="changeVal"
128
85
  @click.stop="clickCascader"
129
- ></Cascader>
86
+ >
87
+ <slot></slot>
88
+ </Cascader>
130
89
  </template>
131
90
  </template>
132
91
  </template>
@@ -144,11 +103,11 @@
144
103
  <div :class="{
145
104
  ...commonClass,
146
105
  'DshCascader-show-multiple': true,
147
- 'DshCascader-row-show': isMultipleRow && !isUnitShow,
106
+ 'DshCascader-row-show': !isUnitShow && isFullRow && multipleMode
148
107
  }">
149
108
  <!-- 有值 -->
150
109
  <dsh-tags
151
- v-if="!$isEmptyData(curValList)"
110
+ v-if="!$isEmptyData(curValNameList)"
152
111
  class="text"
153
112
  :list="curValNameList"
154
113
  ></dsh-tags>
@@ -228,9 +187,7 @@
228
187
  multipleSelectVal: [], // 必须要,每次选完之后再选,需清空上次选的
229
188
  selectVal: [],
230
189
 
231
- isHover: false,
232
- showModal: false,
233
- modalVallist: []
190
+ showModal: false
234
191
  };
235
192
  },
236
193
  computed: {
@@ -243,6 +200,18 @@
243
200
  ...this.commonDealPropsObj
244
201
  };
245
202
  },
203
+ // 是否多选类型
204
+ multipleMode () {
205
+ return ["regions", "cascaders"].includes(this.propsObj._type);
206
+ },
207
+ // 只有单选时有效
208
+ showMode () {
209
+ return this.selfPropsObj._showMode;
210
+ },
211
+ inputIcon () {
212
+ return this.isVisible ? "ios-arrow-up" : "ios-arrow-down";
213
+ },
214
+
246
215
  cascaderData: {
247
216
  get () {
248
217
  return loop(
@@ -264,34 +233,20 @@
264
233
  })
265
234
  : this.cascaderData;
266
235
  },
267
-
268
- // 是否多选类型
269
- multipleMode () {
270
- return ["regions", "cascaders"].includes(this.propsObj._type);
271
- },
272
- // 只有多选时有效
273
- isMultipleRow () {
274
- return this.multipleMode && (this.selfPropsObj._span === 24 || !this.selfPropsObj._span);
275
- },
276
- // 只有单选时有效
277
- showMode () {
278
- return this.selfPropsObj._showMode;
236
+ curValName () {
237
+ return this.$getTreeLinealDatas(this.curValList, this.cascaderData, "name").join("/");
279
238
  },
280
- inputIcon () {
281
- return this.isVisible ? "ios-arrow-up" : "ios-arrow-down";
239
+ showVal () {
240
+ return this.$isEmptyData(this.curValList)
241
+ ? this.emptyShowVal
242
+ : this.curValName;
282
243
  },
283
-
284
244
  // 多选用 名字组成的列表
285
245
  curValNameList () {
286
246
  return this.curValList.map(item =>
287
247
  this.$getTreeLinealDatas(item, this.cascaderData, "name").join("/")
288
248
  );
289
249
  },
290
- showVal () {
291
- return this.$isEmptyData(this.curValList)
292
- ? this.emptyShowVal
293
- : this.$getTreeLinealDatas(this.curValList, this.cascaderData, "name").join("/");
294
- },
295
250
  showMultipleVal () {
296
251
  return this.$isEmptyData(this.curValList)
297
252
  ? this.emptyShowVal
@@ -307,8 +262,12 @@
307
262
 
308
263
  cb();
309
264
  },
265
+ // 点击清除
266
+ clickClear () {
267
+ this.curValList = [];
268
+ },
310
269
 
311
- /* --------- 多选使用 -------- */
270
+ /* --------- 多选模式 -------- */
312
271
  clickInput (e) {
313
272
  if (!this.finalCanEdit) {
314
273
  e.stopPropagation();
@@ -341,28 +300,24 @@
341
300
  }
342
301
  },
343
302
  // 删除
344
- deleteItem (item, index) {
303
+ clickDeleteItem (item, index) {
345
304
  this.curValList.splice(index, 1);
346
305
  this.curValList = [...this.curValList];
347
306
  },
348
307
 
349
- /* -------- 单选使用 ------- */
308
+ /* -------- 单选模式 -弹窗方式 ------- */
350
309
  // 弹窗方式的 -打开模态框
351
310
  openModal () {
352
311
  if (this.finalCanEdit) {
353
- this.modalVallist = this.curValList;
354
312
  this.showModal = true;
355
313
  }
356
314
  },
357
315
  // 弹窗方式的 -关闭模态框
358
- changeShowModal (bool) {
316
+ toggleModal (bool) {
359
317
  this.showModal = bool;
360
318
  },
361
- // 弹窗方式的 -点击清除
362
- clickClear () {
363
- this.curValList = [];
364
- },
365
319
 
320
+ /* -------- 单选模式 -输入框方式 ------- */
366
321
  // 默认方式的
367
322
  clickCascader () {
368
323
  if (this.finalCanEdit) {
@@ -394,6 +349,9 @@
394
349
  if (this.isVisible || !val.length) {
395
350
  this.curValList = val;
396
351
  }
352
+
353
+ // 注:...params 参数不可去单独使用地区组件时调用
354
+ this.$emit("change", this.value[this.controlKey], ...params);
397
355
  }
398
356
  },
399
357
  watch: {
@@ -7,47 +7,30 @@
7
7
  :transfer="true"
8
8
  >
9
9
  <!-- 编辑 -->
10
- <template v-if="canEdit">
11
- <div
12
- :class="{
13
- ...commonClass,
14
- 'DshCoordinates-edit': canEdit,
15
- }"
16
- @mouseenter="isHover = true"
17
- @mouseleave="isHover = false"
18
- @click.stop="clickInput"
19
- >
20
- <div class="text">
21
- {{ showVal }}
22
- </div>
23
-
24
- <!-- 图标 -->
25
- <template>
26
- <Icon
27
- v-if="!$isEmptyData(curVal) && selfPropsObj._clearable && isHover"
28
- class="icon-close"
29
- type="ios-close-circle"
30
- @click.stop="clickClear"
31
- />
32
- <Icon
33
- v-else
34
- class="icon-default"
35
- :type="inputIcon"
36
- />
37
- </template>
38
- </div>
39
- </template>
10
+ <bri-control-input
11
+ v-if="canEdit"
12
+ :class="{
13
+ ...commonClass,
14
+ 'DshCoordinates-edit': true
15
+ }"
16
+ :canEdit="finalCanEdit"
17
+ :value="curVal.name"
18
+ :inputIcon="inputIcon"
19
+ :propsObj="selfPropsObj"
20
+ @clear="clickClear"
21
+ @click.native="clickInput"
22
+ ></bri-control-input>
40
23
 
41
24
  <!-- 查看 -->
42
- <template v-else>
43
- <div :class="{
25
+ <div
26
+ v-else
27
+ :class="{
44
28
  ...commonClass,
45
- 'DshCoordinates-show': !isUnitShow,
46
- 'DshCoordinates-unit': isUnitShow
47
- }">
48
- {{ showVal }}
49
- </div>
50
- </template>
29
+ 'DshCoordinates-show': true
30
+ }"
31
+ >
32
+ {{ showVal }}
33
+ </div>
51
34
  </bri-tooltip>
52
35
 
53
36
  <!-- 模态框 -->
@@ -102,7 +85,7 @@
102
85
  <Row class="header-edit-row">
103
86
  <i-col span="16">
104
87
  <Input
105
- :value="cloneVal.name"
88
+ :value="newVal.name"
106
89
  :readonly="true"
107
90
  :clearable="true"
108
91
  @on-clear="clickModalClear"
@@ -134,7 +117,7 @@
134
117
 
135
118
  <i-col span="12">
136
119
  <Input
137
- :value="cloneVal.name"
120
+ :value="newVal.name"
138
121
  :readonly="true"
139
122
  @click.native="clickMapFitView"
140
123
  />
@@ -186,10 +169,8 @@
186
169
  ],
187
170
  data () {
188
171
  return {
189
- isHover: false,
190
-
191
172
  showModal: false,
192
- cloneVal: {
173
+ newVal: {
193
174
  name: "",
194
175
  lnglat: []
195
176
  },
@@ -219,7 +200,7 @@
219
200
  ...this.commonDealPropsObj
220
201
  };
221
202
  },
222
- kind () {
203
+ showType () {
223
204
  return this.selfPropsObj._showType;
224
205
  },
225
206
  inputIcon () {
@@ -258,14 +239,14 @@
258
239
  clickInput () {
259
240
  if (this.canEdit) {
260
241
  this.showModal = true;
261
- this.cloneVal = this.$deepCopy(this.curVal);
242
+ this.newVal = this.$deepCopy(this.curVal);
262
243
  this.getMap();
263
244
  }
264
245
  },
265
246
  // 点击确认
266
247
  clickConfirm () {
267
248
  this.showModal = false;
268
- this.curVal = this.cloneVal;
249
+ this.curVal = this.newVal;
269
250
  },
270
251
  // 点击删除
271
252
  clickClear () {
@@ -276,7 +257,7 @@
276
257
  },
277
258
  // 清除已选内容
278
259
  clickModalClear () {
279
- this.cloneVal = {
260
+ this.newVal = {
280
261
  name: "",
281
262
  lnglat: []
282
263
  }; // 清除当前标记
@@ -353,10 +334,10 @@
353
334
  this.mouseTool = new AMap.MouseTool(this.map);
354
335
  this.mouseTool.on("draw", this.handleMouseToolCallback);
355
336
  // 设置默认坐标
356
- if (!this.$isEmptyData(this.cloneVal)) {
337
+ if (!this.$isEmptyData(this.newVal)) {
357
338
  this.handleAddMarker(this.curLnglat, true);
358
339
 
359
- if (this.kind === "multipleMarker") { // 多选打开绘图功能
340
+ if (this.showType === "multipleMarker") { // 多选打开绘图功能
360
341
  this.finalCanEdit && this.handleOpenDraw();
361
342
  }
362
343
  } else {
@@ -365,10 +346,10 @@
365
346
  },
366
347
  handleMouseToolCallback (e) {
367
348
  if (e.obj.CLASS_NAME === "AMap.Marker") {
368
- if (this.kind === "marker") {
349
+ if (this.showType === "marker") {
369
350
  this.plot = e.obj;
370
351
  this.handleCloseDraw();
371
- } else if (this.kind === "multipleMarker") {
352
+ } else if (this.showType === "multipleMarker") {
372
353
  if (this.plot) {
373
354
  this.plot.push(e.obj);
374
355
  } else {
@@ -402,7 +383,7 @@
402
383
  }
403
384
  },
404
385
  // 打开绘图
405
- handleOpenDraw (type = this.kind) {
386
+ handleOpenDraw (type = this.showType) {
406
387
  switch (type) {
407
388
  case "marker": {
408
389
  this.mouseTool.marker(markerOpt);
@@ -435,7 +416,7 @@
435
416
  this.mouseTool.close();
436
417
  },
437
418
  // 添加图形
438
- handleAddMarker (location, centerView = true, type = this.kind) {
419
+ handleAddMarker (location, centerView = true, type = this.showType) {
439
420
  location = JSON.parse(JSON.stringify(location));
440
421
  // 分类型添加
441
422
  if (["polygon", "rectangle", "circle"].includes(type)) {
@@ -450,12 +431,12 @@
450
431
  !this.marker && (this.marker = new AMap.Marker());
451
432
  this.marker.setPosition(location);
452
433
  this.marker.setMap(this.map);
453
- if (this.kind === "marker") {
434
+ if (this.showType === "marker") {
454
435
  this.handleRmoveMarker();
455
436
  this.handleCloseDraw();
456
437
  this.curLnglat = [location];
457
438
  this.getRegeoCode();
458
- } else if (this.kind === "multipleMarker") {
439
+ } else if (this.showType === "multipleMarker") {
459
440
  this.curLnglat.push(location);
460
441
  this.getRegeoCode();
461
442
  }
@@ -478,7 +459,7 @@
478
459
  }
479
460
  },
480
461
  // 移除图形
481
- handleRmoveMarker (type = this.kind) {
462
+ handleRmoveMarker (type = this.showType) {
482
463
  if (["default"].includes(type)) {
483
464
  this.marker && this.map.remove(this.marker);
484
465
  this.plot && this.map.remove(this.plot);
@@ -507,7 +488,7 @@
507
488
  .then(response => {
508
489
  if (response.status === "1" && response.regeocode) {
509
490
  let address = response.regeocode.formatted_address;
510
- this.cloneVal.name = address;
491
+ this.newVal.name = address;
511
492
  }
512
493
  });
513
494
  }
@@ -49,6 +49,7 @@
49
49
  <template v-else>
50
50
  <bri-tooltip
51
51
  :content="showVal"
52
+ :defaultDisabled="false"
52
53
  maxWidth="200"
53
54
  :transfer="true"
54
55
  >
@@ -26,6 +26,7 @@ export default {
26
26
  }
27
27
  },
28
28
  /* 列表形式下用到的 */
29
+ rowIndex: Number,
29
30
  parentData: {
30
31
  type: Array,
31
32
  default () {
@@ -82,9 +83,6 @@ export default {
82
83
  finalCanEdit () {
83
84
  return this.canEdit && (this.propsObj.canEdit == undefined ? true : this.propsObj.canEdit);
84
85
  },
85
- isUnitShow () {
86
- return !this.canEdit && this.inTable;
87
- },
88
86
  multipleMode () {
89
87
  return !!this.propsObj._multiple;
90
88
  },
@@ -109,26 +107,33 @@ export default {
109
107
  "bri-control-nodata": this.$isEmptyData(this.curVal)
110
108
  };
111
109
  },
112
- showAlign () {
113
- return !this.isUnitShow
114
- ? "flex-start"
115
- : this.propsObj._align === "right"
116
- ? "flex-end"
117
- : this.propsObj._align === "center"
118
- ? "center"
119
- : "flex-start";
120
- },
110
+ isFullRow () {
111
+ return this.propsObj._span === 24 || !this.propsObj._span;
112
+ },
113
+ // showAlign () {
114
+ // return !this.isUnitShow
115
+ // ? "flex-start"
116
+ // : this.propsObj._align === "right"
117
+ // ? "flex-end"
118
+ // : this.propsObj._align === "center"
119
+ // ? "center"
120
+ // : "flex-start";
121
+ // },
121
122
 
122
- // 部分控件或部分条件下 才使用的属性
123
+ /* 部分条件下 才使用的属性 */
123
124
  isCore () {
124
125
  return !!this.propsObj.isCore;
125
126
  },
126
- inTable () {
127
- return !!this.propsObj.inTable;
127
+ isInTable () {
128
+ return !!this.propsObj.isInTable;
129
+ },
130
+ isUnitShow () {
131
+ return !this.canEdit && this.isInTable;
128
132
  },
129
133
  isShare () {
130
134
  return !!this.propsObj.isShare;
131
135
  },
136
+ /* 部分控件下 才使用的属性 */
132
137
  compKey () {
133
138
  return this.propsObj.compKey;
134
139
  },
@@ -12,48 +12,19 @@
12
12
  @on-clickoutside="clickInput"
13
13
  >
14
14
  <!-- 可编辑 -->
15
- <div
15
+ <bri-control-input
16
16
  :class="{
17
17
  ...commonClass,
18
18
  'BriLabels-edit': true
19
19
  }"
20
- @mouseenter="isHover = true"
21
- @mouseleave="isHover = false"
22
- @click="clickInput"
23
- >
24
- <!-- 有值 -->
25
- <template v-if="!$isEmptyData(curValList)">
26
- <dsh-tags
27
- class="overflow"
28
- :list="curValList"
29
- :propsObj="{
30
- disabled: !finalCanEdit,
31
- closable: true
32
- }"
33
- :autoEllipsis="true"
34
- @delete="clickDeleteItem"
35
- ></dsh-tags>
36
- </template>
37
- <!-- 无值 -->
38
- <template v-else>
39
- {{ emptyShowVal }}
40
- </template>
41
-
42
- <!-- 图标 -->
43
- <template>
44
- <Icon
45
- v-if="!$isEmptyData(curValList) && selfPropsObj._clearable && isHover"
46
- class="icon-close"
47
- type="ios-close-circle"
48
- @click.stop="clickClear"
49
- />
50
- <Icon
51
- v-else
52
- class="icon-default"
53
- :type="inputIcon"
54
- />
55
- </template>
56
- </div>
20
+ :canEdit="finalCanEdit"
21
+ :value="curValList"
22
+ :inputIcon="inputIcon"
23
+ :propsObj="selfPropsObj"
24
+ @deleteItem="clickDeleteItem"
25
+ @clear="clickClear"
26
+ @click.native="clickInput"
27
+ ></bri-control-input>
57
28
 
58
29
  <template #list>
59
30
  <DropdownMenu class="BriLabels-dropdown-menu">
@@ -160,8 +131,6 @@
160
131
  ],
161
132
  data () {
162
133
  return {
163
- isHover: false,
164
-
165
134
  listData: [],
166
135
  isVisible: false,
167
136
  renderList: false