bri-components 1.4.18 → 1.4.19

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/controls/base/DshCascader/DshCascader.vue +5 -10
  3. package/src/components/controls/mixins/cascaderMixin.js +5 -7
  4. package/src/components/controls/senior/selectDepartments.vue +168 -112
  5. package/src/styles/components/small/DshModal.less +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bri-components",
3
- "version": "1.4.18",
3
+ "version": "1.4.19",
4
4
  "author": "dengshanghui",
5
5
  "description": "a component lib for vue project",
6
6
  "main": "src/index.js",
package/src/components/controls/base/DshCascader/DshCascader.vue CHANGED
@@ -15,8 +15,8 @@
15
15
  <dsh-control-input
16
16
  :class="commonClass"
17
17
  :value="curValName"
18
- :disabled="inputPropsObj._disabled"
19
- :propsObj="inputPropsObj"
18
+ :disabled="selfPropsObj._disabled"
19
+ :propsObj="selfPropsObj"
20
20
  @clear="clickClear"
21
21
  ></dsh-control-input>
22
22
  </component>
@@ -87,9 +87,9 @@
87
87
  <dsh-control-input
88
88
  :class="commonClass"
89
89
  :value="curValNameList"
90
- :disabled="inputPropsObj._disabled"
90
+ :disabled="selfPropsObj._disabled"
91
91
  :heightAuto="isHeightAuto"
92
- :propsObj="inputPropsObj"
92
+ :propsObj="selfPropsObj"
93
93
  @deleteItem="clickDeleteItem"
94
94
  @clear="clickClear"
95
95
  ></dsh-control-input>
@@ -169,17 +169,12 @@
169
169
  computed: {
170
170
  selfPropsObj () {
171
171
  return {
172
+ _icon: this.showModal ? "ios-arrow-up" : "ios-arrow-down",
172
173
  _transfer: true,
173
174
  _transferClassName: "",
174
175
 
175
176
  ...this.basePropsObj
176
177
  };
177
- },
178
- inputPropsObj () {
179
- return {
180
- _icon: this.showModal ? "ios-arrow-up" : "ios-arrow-down",
181
- ...this.selfPropsObj
182
- };
183
178
  }
184
179
  },
185
180
  created () {},
package/src/components/controls/mixins/cascaderMixin.js CHANGED
@@ -109,13 +109,11 @@ export default {
109
109
  );
110
110
  })
111
111
  : filterVals.length
112
- ? arr.filter(item => {
113
- const itemKey = item[saveKey];
114
-
115
- return reverseFilter
116
- ? !filterVals.includes(itemKey)
117
- : filterVals.includes(itemKey);
118
- })
112
+ ? arr.filter(item =>
113
+ reverseFilter
114
+ ? !filterVals.includes(item[saveKey])
115
+ : filterVals.includes(item[saveKey])
116
+ )
119
117
  : arr;
120
118
 
121
119
  return arr.reduce((newArr, item) => {
package/src/components/controls/senior/selectDepartments.vue CHANGED
@@ -12,8 +12,9 @@
12
12
  <dsh-control-input
13
13
  v-if="canEdit"
14
14
  :class="commonClass"
15
- :value="selfCurValList"
15
+ :value="curShowValList"
16
16
  :disabled="selfPropsObj._disabled"
17
+ :heightAuto="isHeightAuto"
17
18
  :propsObj="selfPropsObj"
18
19
  @deleteItem="clickDeleteItem"
19
20
  @clear="clickClear"
@@ -27,9 +28,9 @@
27
28
  }"
28
29
  >
29
30
  <dsh-tags
30
- v-if="!$isEmptyData(selfCurValList)"
31
+ v-if="!$isEmptyData(curShowValList)"
31
32
  class="text"
32
- :list="selfCurValList"
33
+ :list="curShowValList"
33
34
  ></dsh-tags>
34
35
 
35
36
  <template v-else>
@@ -42,21 +43,25 @@
42
43
 
43
44
  <!-- 搜索选择框 -->
44
45
  <dsh-modal
45
- v-if="finalCanEdit"
46
- v-model="showModal"
46
+ v-if="finalCanEdit && modalInited"
47
+ class="selectDepartments-modal bri-modal-center"
47
48
  mode="custom"
49
+ v-model="showModal"
48
50
  :propsObj="modalPropsObj"
49
51
  @cancel="clickCancel"
50
52
  >
51
- <div class="selectDepartments-list">
53
+ <div
54
+ v-if="showModalContent"
55
+ class="selectDepartments-modal-list"
56
+ >
52
57
  <!-- 上 已选择项 -->
53
- <div class="list-selected">
54
- <span class="list-selected-label">
55
- 已选择{{ multipleMode ? `(${newValList.length}个)` : "" }}：
58
+ <div class="selected">
59
+ <span class="selected-label">
60
+ 已选择{{ multipleMode ? `(${tmpValList.length}个)` : "" }}：
56
61
  </span>
57
62
 
58
63
  <span
59
- v-for="(selectItem, selectIndex) in newValList"
64
+ v-for="(selectItem, selectIndex) in tmpValList"
60
65
  :key="selectIndex"
61
66
  class="item"
62
67
  >
@@ -66,13 +71,13 @@
66
71
  <Icon
67
72
  class="item-delete"
68
73
  type="ios-close-circle"
69
- @click="deleteSelect(selectItem, selectIndex, newValList)"
74
+ @click="clickDeleteTmpItem(selectItem, selectIndex, tmpValList)"
70
75
  />
71
76
  </span>
72
77
  </div>
73
78
 
74
79
  <!-- 上 搜索框 -->
75
- <div class="list-search">
80
+ <div class="search">
76
81
  <Input
77
82
  v-model="searchName"
78
83
  placeholder="搜索部门"
@@ -82,41 +87,39 @@
82
87
  </div>
83
88
 
84
89
  <!-- 中 列表 -->
85
- <div
86
- v-if="showModal"
87
- class="list-center"
88
- >
90
+ <div class="center">
89
91
  <bri-loading v-if="loading" />
90
92
  <template v-else>
91
- <!-- 树形形式 -->
92
- <div class="list-center-tree">
93
- <template v-if="allDepartmentList.length">
94
- <bri-tree-item
95
- v-for="item in allDepartmentList"
96
- :key="item._key"
97
- :value="item"
98
- :changeOnSelect="changeOnSelect"
99
- :multiple="multipleMode"
100
- @on-change="changeSelect"
101
- ></bri-tree-item>
102
- </template>
103
-
104
- <div
105
- v-else
106
- class="tree-nodata"
107
- >
108
- 暂无数据…
109
- </div>
93
+ <div
94
+ v-if="departShowList.length"
95
+ class="center-tree"
96
+ >
97
+ <bri-tree-item
98
+ v-for="item in departShowList"
99
+ :key="item._key"
100
+ :value="item"
101
+ :multiple="multipleMode"
102
+ :changeOnSelect="changeOnSelect"
103
+ @on-change="changeSelect"
104
+ ></bri-tree-item>
105
+ </div>
106
+
107
+ <div
108
+ v-else
109
+ class="list-center-tree-nodata"
110
+ >
111
+ 暂无数据…
110
112
  </div>
111
113
  </template>
112
114
  </div>
113
- </div>
114
115
 
115
- <dsh-buttons
116
- class="bri-modal-footer"
117
- :list="$getOperationList(['canCancel', 'canConfirm'])"
118
- @click="$dispatchEvent($event)"
119
- ></dsh-buttons>
116
+ <!-- 底部 按钮 -->
117
+ <dsh-buttons
118
+ class="footer"
119
+ :list="$getOperationList(['canCancel', 'canConfirm'])"
120
+ @click="$dispatchEvent($event)"
121
+ ></dsh-buttons>
122
+ </div>
120
123
  </dsh-modal>
121
124
  </div>
122
125
  </template>
@@ -139,11 +142,15 @@
139
142
  data () {
140
143
  return {
141
144
  showModal: false,
142
- newValList: [],
145
+ modalInited: false, // 是否是点击过的，第一次点击才开始渲染
146
+ showModalContent: false,
147
+
143
148
  loading: false,
149
+ loadinged: false,
150
+ tmpValList: [],
144
151
  searchName: "", // 搜索名字
145
- departmentList: [],
146
- highDepartmentList: [
152
+ departList: [],
153
+ highDepartList: [
147
154
  {
148
155
  _key: "dyn_department",
149
156
  name: "当前部门"
@@ -174,10 +181,11 @@
174
181
  _changeOnSelect: true,
175
182
  _searchString: "",
176
183
  _useFullName: false, // 使用全名
177
- _expandLevel: 1, // 列表打开，默认展开到第几级
184
+ _expandLevel: 2, // 列表打开，默认展开到第几级
178
185
 
179
- _reverseFilter: false,
180
- _userDepartFilterVals: [],
186
+ _reverseFilter: false, // 反向过滤
187
+ _userDepartFilterVals: [], // 过滤的数据的第一级选项
188
+ _cascaderDepartSelectVals: [], // 过滤的数据的级联选项
181
189
 
182
190
  ...this.propsObj,
183
191
  ...this.commonDealPropsObj
@@ -198,35 +206,74 @@
198
206
  expandLevel () {
199
207
  return this.selfPropsObj._expandLevel;
200
208
  },
201
- // 反向过滤
202
209
  reverseFilter () {
203
210
  return this.selfPropsObj._reverseFilter;
204
211
  },
205
- // 禁止显示的部门以及部门下人员
206
- listFilterVals () {
212
+ filterVals () {
207
213
  return this.selfPropsObj._userDepartFilterVals || [];
208
214
  },
215
+ cascaderVals () {
216
+ return this.selfPropsObj._cascaderDepartSelectVals || [];
217
+ },
209
218
 
210
219
  modalPropsObj () {
211
220
  return {
212
221
  title: "选择部门",
213
- class: "bri-modal-center",
214
222
  width: 600,
215
223
  showSlotClose: false,
216
224
  closable: true
217
225
  };
218
226
  },
219
- selectKeys () {
220
- return this.newValList.map(item => item._key);
227
+ tmpSelectedKeys () {
228
+ return this.tmpValList.map(item => item._key);
221
229
  },
222
- allDepartmentList () {
223
- return this.transformDepartmentList([
224
- ...(this.highSearch ? this.highDepartmentList : []),
225
- ...this.departmentList
226
- ], this.selectKeys);
230
+ departShowList () {
231
+ const loop = (arr = [], filterVals = [], cascaderVals = [], reverseFilter = false) => {
232
+ arr = cascaderVals.length
233
+ ? arr.filter(item => {
234
+ return reverseFilter
235
+ ? !cascaderVals.some(cascaderItem =>
236
+ item.code && cascaderItem.code
237
+ ? item.code.length < cascaderItem.code.length
238
+ ? false
239
+ : item.code.startsWith(cascaderItem.code)
240
+ : false
241
+ )
242
+ : cascaderVals.some(cascaderItem =>
243
+ item.code && cascaderItem.code
244
+ ? item.code.length < cascaderItem.code.length
245
+ ? cascaderItem.code.startsWith(item.code)
246
+ : item.code.startsWith(cascaderItem.code)
247
+ : false
248
+ );
249
+ })
250
+ : filterVals.length
251
+ ? arr.filter(item =>
252
+ reverseFilter
253
+ ? !filterVals.includes(item._key)
254
+ : filterVals.includes(item._key)
255
+ )
256
+ : arr;
257
+
258
+ return arr.reduce((newArr, item) => {
259
+ if (item.children && item.children.length) {
260
+ item.children = loop(item.children, [], cascaderVals, reverseFilter);
261
+ }
262
+
263
+ return [
264
+ ...newArr,
265
+ item
266
+ ];
267
+ }, []);
268
+ };
269
+
270
+ const highDepartList = this.highSearch ? this.highDepartList : [];
271
+ const departList = loop(this.departList, this.filterVals, this.cascaderVals, this.reverseFilter);
272
+
273
+ return this.transformDepartList([...highDepartList, ...departList], this.tmpSelectedKeys);
227
274
  },
228
275
 
229
- selfCurValList () {
276
+ curShowValList () {
230
277
  return this.curValList.map(depart => {
231
278
  return {
232
279
  ...depart,
@@ -235,51 +282,66 @@
235
282
  });
236
283
  },
237
284
  showVal () {
238
- return this.$isEmptyData(this.selfCurValList)
285
+ return this.$isEmptyData(this.curShowValList)
239
286
  ? this.emptyShowVal
240
- : this.selfCurValList
287
+ : this.curShowValList
241
288
  .map(depart => this.getShowName(depart))
242
289
  .join("、");
243
290
  }
244
291
  },
292
+ watch: {
293
+ showModal (newBool) {
294
+ if (newBool) {
295
+ this.modalInited = true;
296
+ this.showModalContent = true;
297
+ this.tmpValList = this.$deepCopy(this.curShowValList);
298
+
299
+ if (this.loadinged !== true) {
300
+ this.searchName = "";
301
+ this.getListData();
302
+ }
303
+ } else {
304
+ // setTimeout(() => {
305
+ // this.showModalContent = false;
306
+ // }, 500);
307
+ }
308
+ }
309
+ },
245
310
  created () {},
246
311
  methods: {
247
- // 搜索
248
- search () {
249
- this.getListData();
250
- },
251
312
  // 点击输入框 打开选择模态框
252
313
  clickInput () {
253
314
  if (this.finalCanEdit) {
254
315
  this.openModal();
255
-
256
- this.newValList = this.$deepCopy(this.selfCurValList);
257
- this.searchName = "";
258
- this.getListData();
259
316
  }
260
317
  },
261
- clickDeleteItem (deleteItem) {
262
- this.selfCurValList = this.selfCurValList.filter(item => item._key != deleteItem._key);
318
+ // 点击删除某项
319
+ clickDeleteItem (selectItem) {
320
+ this.curValList = this.curValList.filter(item => item._key !== selectItem._key);
263
321
  },
264
322
  // 点击清除选择项
265
323
  clickClear () {
266
- this.selfCurValList = [];
324
+ this.curValList = [];
267
325
  },
268
326
 
269
327
  /* ---------- 弹框里 --------- */
328
+ // 搜索
329
+ search () {
330
+ this.getListData();
331
+ },
270
332
  // 弹窗 -选项变化
271
333
  changeSelect (selectItem) {
272
- this.newValList = this.multipleMode
273
- ? this.selectKeys.includes(selectItem._key)
274
- ? this.newValList.filter(item => item._key !== selectItem._key)
275
- : [...this.newValList, selectItem]
334
+ this.tmpValList = this.multipleMode
335
+ ? this.tmpSelectedKeys.includes(selectItem._key)
336
+ ? this.tmpValList.filter(item => item._key !== selectItem._key)
337
+ : [...this.tmpValList, selectItem]
276
338
  : selectItem.checked
277
339
  ? [selectItem]
278
340
  : [];
279
341
  },
280
342
  // 弹窗 -删除选择项
281
- deleteSelect (item, index, list) {
282
- list.splice(index, 1);
343
+ clickDeleteTmpItem (selectItem, selectIndex, list) {
344
+ list.splice(selectIndex, 1);
283
345
  },
284
346
  // 弹框 -点击取消
285
347
  clickCancel () {
@@ -289,7 +351,7 @@
289
351
  clickConfirm () {
290
352
  this.closeModal();
291
353
 
292
- this.selfCurValList = this.newValList;
354
+ this.curValList = this.tmpValList;
293
355
  },
294
356
 
295
357
  /* ----------- 接口方法和加工方法 --------- */
@@ -300,18 +362,19 @@
300
362
  : depart.name;
301
363
  },
302
364
  // 处理数据
303
- transformDepartmentList (data = [], selectKeys = []) {
365
+ transformDepartList (data = [], selectedKeys = []) {
304
366
  return data.map(item => ({
305
367
  ...item,
306
368
  title: item.name,
307
- checked: selectKeys.includes(item._key),
369
+ checked: selectedKeys.includes(item._key),
308
370
  expand: !!(item.children && item.children.length && item.level < this.expandLevel),
309
- children: this.transformDepartmentList(item.children, selectKeys)
371
+ children: this.transformDepartList(item.children, selectedKeys)
310
372
  }));
311
373
  },
312
374
  // 接口 -获取部门列表数据
313
375
  getListData () {
314
376
  this.loading = true;
377
+
315
378
  this.$https({
316
379
  url: {
317
380
  module: "company",
@@ -331,13 +394,9 @@
331
394
  },
332
395
  callback: data => {
333
396
  this.loading = false;
334
- this.departmentList = this.listFilterVals.length
335
- ? data.list.filter(item =>
336
- this.reverseFilter
337
- ? !this.listFilterVals.includes(item._key)
338
- : this.listFilterVals.includes(item._key)
339
- )
340
- : data.list;
397
+ this.loadinged = true;
398
+
399
+ this.departList = data.list;
341
400
  }
342
401
  });
343
402
  }
@@ -349,17 +408,20 @@
349
408
  .selectDepartments {
350
409
  width: 100%;
351
410
 
352
- &-list {
353
- height: 500px;
354
- .dsh-flex-col-start-stretch();
411
+ &-modal {
412
+ .ivu-modal {
413
+ width: 700px!important;
414
+ }
355
415
 
356
- .list {
357
- &-selected {
358
- padding: 0 15px;
359
- line-height: 30px;
416
+ &-list {
417
+ height: 800px;
418
+ .dsh-flex-col-start-stretch();
419
+
420
+ .selected {
360
421
  display: flex;
361
422
  flex-wrap: wrap;
362
423
  align-items: center;
424
+ line-height: 30px;
363
425
 
364
426
  &-label {}
365
427
 
@@ -388,33 +450,27 @@
388
450
  }
389
451
  }
390
452
 
391
- &-search {
392
- padding: 10px 15px;
453
+ .search {
454
+ padding: 8px 0px 10px;
393
455
  }
394
456
 
395
- &-center {
457
+ .center {
396
458
  flex: 1;
397
459
  min-height: 100px;
398
460
  padding: 5px 0 10px;
399
461
  overflow: auto;
400
462
 
401
463
  &-tree {
402
- .tree {
403
- &-nodata {
404
- #dsh-nodata();
405
- }
464
+ &-nodata {
465
+ #dsh-nodata();
406
466
  }
407
467
  }
468
+ }
408
469
 
409
- &-card {
410
- .card {
411
- &-high-title {
412
- padding: 10px 0px;
413
- clear: both;
414
- text-align: left;
415
- }
416
- }
417
- }
470
+ .footer {
471
+ padding-top: 12px;
472
+ border-top: 1px solid @borderColor;
473
+ text-align: right;
418
474
  }
419
475
  }
420
476
  }
package/src/styles/components/small/DshModal.less CHANGED
@@ -200,8 +200,8 @@
200
200
  .ivu-modal-header {
201
201
  width: 100%;
202
202
  height: 44px;
203
- padding: 20px 24px 0px 24px;
204
- border-bottom: none;
203
+ padding: 15px 24px 5px 24px;
204
+ // border-bottom: none;
205
205
 
206
206
  &-inner {
207
207
  color: rgba(0, 0, 0, 0.9);