bri-components 1.4.17 → 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 +197 -115
  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.17",
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="curValList"
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(curValList)"
31
+ v-if="!$isEmptyData(curShowValList)"
31
32
  class="text"
32
- :list="curValList"
33
+ :list="curShowValList"
33
34
  ></dsh-tags>
34
35
 
35
36
  <template v-else>
@@ -42,37 +43,41 @@
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
  >
63
68
  <span class="item-name">
64
- {{ selectItem.full_name || selectItem.name }}
69
+ {{ getShowName(selectItem) }}
65
70
  </span>
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,40 +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
-
91
92
  <template v-else>
92
- <!-- 树形形式 -->
93
- <div class="list-center-tree">
94
- <template v-if="allDepartmentList.length">
95
- <bri-tree-item
96
- v-for="item in allDepartmentList"
97
- :key="item._key"
98
- :value="item"
99
- :changeOnSelect="changeOnSelect"
100
- :multiple="multipleMode"
101
- @on-change="changeSelect"
102
- ></bri-tree-item>
103
- </template>
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>
115
+
116
+ <!-- 底部 按钮 -->
117
+ <dsh-buttons
118
+ class="footer"
119
+ :list="$getOperationList(['canCancel', 'canConfirm'])"
120
+ @click="$dispatchEvent($event)"
121
+ ></dsh-buttons>
113
122
  </div>
114
- <dsh-buttons
115
- class="bri-modal-footer"
116
- :list="$getOperationList(['canCancel', 'canConfirm'])"
117
- @click="$dispatchEvent($event)"
118
- ></dsh-buttons>
119
123
  </dsh-modal>
120
124
  </div>
121
125
  </template>
@@ -138,11 +142,15 @@
138
142
  data () {
139
143
  return {
140
144
  showModal: false,
141
- newValList: [],
145
+ modalInited: false, // 是否是点击过的，第一次点击才开始渲染
146
+ showModalContent: false,
147
+
142
148
  loading: false,
149
+ loadinged: false,
150
+ tmpValList: [],
143
151
  searchName: "", // 搜索名字
144
- departmentList: [],
145
- highDepartmentList: [
152
+ departList: [],
153
+ highDepartList: [
146
154
  {
147
155
  _key: "dyn_department",
148
156
  name: "当前部门"
@@ -172,21 +180,17 @@
172
180
  _highSearch: false,
173
181
  _changeOnSelect: true,
174
182
  _searchString: "",
175
- _reverseFilter: false,
176
- _userDepartFilterVals: [],
183
+ _useFullName: false, // 使用全名
184
+ _expandLevel: 2, // 列表打开，默认展开到第几级
185
+
186
+ _reverseFilter: false, // 反向过滤
187
+ _userDepartFilterVals: [], // 过滤的数据的第一级选项
188
+ _cascaderDepartSelectVals: [], // 过滤的数据的级联选项
177
189
 
178
190
  ...this.propsObj,
179
191
  ...this.commonDealPropsObj
180
192
  };
181
193
  },
182
- // 反向过滤
183
- reverseFilter () {
184
- return this.selfPropsObj._reverseFilter;
185
- },
186
- // 禁止显示的部门以及部门下人员
187
- listFilterVals () {
188
- return this.selfPropsObj._userDepartFilterVals || [];
189
- },
190
194
  highSearch () {
191
195
  return this.isOnSearch ? true : this.selfPropsObj._highSearch;
192
196
  },
@@ -196,50 +200,124 @@
196
200
  searchString () {
197
201
  return this.selfPropsObj._searchString;
198
202
  },
203
+ useFullName () {
204
+ return this.selfPropsObj._useFullName;
205
+ },
206
+ expandLevel () {
207
+ return this.selfPropsObj._expandLevel;
208
+ },
209
+ reverseFilter () {
210
+ return this.selfPropsObj._reverseFilter;
211
+ },
212
+ filterVals () {
213
+ return this.selfPropsObj._userDepartFilterVals || [];
214
+ },
215
+ cascaderVals () {
216
+ return this.selfPropsObj._cascaderDepartSelectVals || [];
217
+ },
199
218
 
200
219
  modalPropsObj () {
201
220
  return {
202
221
  title: "选择部门",
203
- class: "bri-modal-center",
204
222
  width: 600,
205
223
  showSlotClose: false,
206
224
  closable: true
207
225
  };
208
226
  },
209
- selectKeys () {
210
- return this.newValList.map(item => item._key);
227
+ tmpSelectedKeys () {
228
+ return this.tmpValList.map(item => item._key);
211
229
  },
212
- allDepartmentList () {
213
- return this.transformDepartmentList([
214
- ...(this.highSearch ? this.highDepartmentList : []),
215
- ...this.departmentList
216
- ], 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);
217
274
  },
218
275
 
276
+ curShowValList () {
277
+ return this.curValList.map(depart => {
278
+ return {
279
+ ...depart,
280
+ full_name: this.useFullName ? depart.full_name : undefined
281
+ };
282
+ });
283
+ },
219
284
  showVal () {
220
- return this.$isEmptyData(this.curValList)
285
+ return this.$isEmptyData(this.curShowValList)
221
286
  ? this.emptyShowVal
222
- : this.curValList.map(depart => depart.full_name || depart.name).join("、");
287
+ : this.curShowValList
288
+ .map(depart => this.getShowName(depart))
289
+ .join("、");
290
+ }
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
+ }
223
308
  }
224
309
  },
225
310
  created () {},
226
311
  methods: {
227
- // 搜索
228
- search () {
229
- this.getListData();
230
- },
231
312
  // 点击输入框 打开选择模态框
232
313
  clickInput () {
233
314
  if (this.finalCanEdit) {
234
315
  this.openModal();
235
-
236
- this.newValList = this.$deepCopy(this.curValList);
237
- this.searchName = "";
238
- this.getListData();
239
316
  }
240
317
  },
241
- clickDeleteItem (deleteItem) {
242
- this.curValList = this.curValList.filter(item => item._key != deleteItem._key);
318
+ // 点击删除某项
319
+ clickDeleteItem (selectItem) {
320
+ this.curValList = this.curValList.filter(item => item._key !== selectItem._key);
243
321
  },
244
322
  // 点击清除选择项
245
323
  clickClear () {
@@ -247,19 +325,23 @@
247
325
  },
248
326
 
249
327
  /* ---------- 弹框里 --------- */
328
+ // 搜索
329
+ search () {
330
+ this.getListData();
331
+ },
250
332
  // 弹窗 -选项变化
251
333
  changeSelect (selectItem) {
252
- this.newValList = this.multipleMode
253
- ? this.selectKeys.includes(selectItem._key)
254
- ? this.newValList.filter(item => item._key !== selectItem._key)
255
- : [...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]
256
338
  : selectItem.checked
257
339
  ? [selectItem]
258
340
  : [];
259
341
  },
260
342
  // 弹窗 -删除选择项
261
- deleteSelect (item, index, list) {
262
- list.splice(index, 1);
343
+ clickDeleteTmpItem (selectItem, selectIndex, list) {
344
+ list.splice(selectIndex, 1);
263
345
  },
264
346
  // 弹框 -点击取消
265
347
  clickCancel () {
@@ -269,23 +351,30 @@
269
351
  clickConfirm () {
270
352
  this.closeModal();
271
353
 
272
- this.curValList = this.newValList;
354
+ this.curValList = this.tmpValList;
273
355
  },
274
356
 
275
357
  /* ----------- 接口方法和加工方法 --------- */
358
+ // 获取显示名
359
+ getShowName (depart) {
360
+ return this.useFullName
361
+ ? depart.full_name || depart.name
362
+ : depart.name;
363
+ },
276
364
  // 处理数据
277
- transformDepartmentList (data = [], selectKeys = []) {
365
+ transformDepartList (data = [], selectedKeys = []) {
278
366
  return data.map(item => ({
279
367
  ...item,
280
368
  title: item.name,
281
- checked: selectKeys.includes(item._key),
282
- expand: !!(item.children && item.children.length && item.level < 2),
283
- children: this.transformDepartmentList(item.children, selectKeys)
369
+ checked: selectedKeys.includes(item._key),
370
+ expand: !!(item.children && item.children.length && item.level < this.expandLevel),
371
+ children: this.transformDepartList(item.children, selectedKeys)
284
372
  }));
285
373
  },
286
374
  // 接口 -获取部门列表数据
287
375
  getListData () {
288
376
  this.loading = true;
377
+
289
378
  this.$https({
290
379
  url: {
291
380
  module: "company",
@@ -305,13 +394,9 @@
305
394
  },
306
395
  callback: data => {
307
396
  this.loading = false;
308
- this.departmentList = this.listFilterVals.length
309
- ? data.list.filter(item =>
310
- this.reverseFilter
311
- ? !this.listFilterVals.includes(item._key)
312
- : this.listFilterVals.includes(item._key)
313
- )
314
- : data.list;
397
+ this.loadinged = true;
398
+
399
+ this.departList = data.list;
315
400
  }
316
401
  });
317
402
  }
@@ -323,17 +408,20 @@
323
408
  .selectDepartments {
324
409
  width: 100%;
325
410
 
326
- &-list {
327
- height: 500px;
328
- .dsh-flex-col-start-stretch();
411
+ &-modal {
412
+ .ivu-modal {
413
+ width: 700px!important;
414
+ }
329
415
 
330
- .list {
331
- &-selected {
332
- padding: 0 15px;
333
- line-height: 30px;
416
+ &-list {
417
+ height: 800px;
418
+ .dsh-flex-col-start-stretch();
419
+
420
+ .selected {
334
421
  display: flex;
335
422
  flex-wrap: wrap;
336
423
  align-items: center;
424
+ line-height: 30px;
337
425
 
338
426
  &-label {}
339
427
 
@@ -362,33 +450,27 @@
362
450
  }
363
451
  }
364
452
 
365
- &-search {
366
- padding: 10px 15px;
453
+ .search {
454
+ padding: 8px 0px 10px;
367
455
  }
368
456
 
369
- &-center {
457
+ .center {
370
458
  flex: 1;
371
459
  min-height: 100px;
372
460
  padding: 5px 0 10px;
373
461
  overflow: auto;
374
462
 
375
463
  &-tree {
376
- .tree {
377
- &-nodata {
378
- #dsh-nodata();
379
- }
464
+ &-nodata {
465
+ #dsh-nodata();
380
466
  }
381
467
  }
468
+ }
382
469
 
383
- &-card {
384
- .card {
385
- &-high-title {
386
- padding: 10px 0px;
387
- clear: both;
388
- text-align: left;
389
- }
390
- }
391
- }
470
+ .footer {
471
+ padding-top: 12px;
472
+ border-top: 1px solid @borderColor;
473
+ text-align: right;
392
474
  }
393
475
  }
394
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);