bri-components 1.2.65 → 1.2.66

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,101 +1,137 @@
1
1
  <template>
2
2
  <div class="DshCard">
3
- <!-- 有数据 -->
4
- <template v-if="data.length">
5
- <div
6
- v-for="(dataItem, dataIndex) in data"
7
- :key="dataIndex"
8
- class="DshCard-item"
9
- @click="clickRow(dataItem)"
10
- >
11
- <!-- 下拉操作(定位css) -->
12
- <dsh-dropdown
13
- v-if="operationList.length"
14
- class="DshCard-item-dropdown"
15
- :dropdownObj="dropdownObj"
16
- :list="operationList"
17
- @click="$dshEmit($event, dataItem, dataIndex)"
18
- @click.native.stop="0"
19
- ></dsh-dropdown>
20
-
21
- <!-- 背景图 -->
22
- <div class="DshCard-item-image">
23
- <img
24
- :src="getCardBgImgSrc(dataItem)"
25
- alt=""
26
- >
27
- </div>
28
-
29
- <!-- 内容 -->
30
- <div class="DshCard-item-info">
31
- <!-- 标题 -->
32
- <bri-tooltip
33
- class="title"
34
- :content="dataItem[propsObj.titleField]"
35
- placement="top"
36
- :transfer="true"
37
- >
38
- <div class="title-name">
39
- {{ dataItem[propsObj.titleField] }}
40
- </div>
41
- </bri-tooltip>
42
-
43
- <!-- 显示字段 -->
44
- <div
45
- v-for="colItem in selfColumns"
46
- :key="colItem._key"
47
- class="unit"
48
- >
49
- <!-- 左 label -->
50
- <div class="unit-label">
51
- <bri-tooltip
52
- class="unit-label-tooltip"
53
- :content="colItem._name"
54
- :transfer="true"
3
+ <!-- 加载 -->
4
+ <bri-loading
5
+ v-if="isLoading"
6
+ class="DshPanel-loading"
7
+ >
8
+ {{ loadingText }}
9
+ </bri-loading>
10
+ <template>
11
+ <!-- 有数据 -->
12
+ <template v-if="data.length">
13
+ <CheckboxGroup
14
+ class="DshCard-list"
15
+ v-model="selectIds"
16
+ @on-change="selectRow"
17
+ >
18
+ <Row :gutter="16">
19
+ <i-col
20
+ v-for="(row, dataIndex) in data"
21
+ :key="dataIndex"
22
+ :xs="24"
23
+ :sm="12"
24
+ :md="12"
25
+ :lg="8"
26
+ :xl="6"
27
+ :xxl="4"
28
+ >
29
+ <div
30
+ class="row-item"
31
+ @click="clickRow(row)"
55
32
  >
56
- <span class="unit-label-name">
57
- {{ colItem._name }}
58
- </span>
59
- <span class="unit-label-colon">
60
-
61
- </span>
62
- </bri-tooltip>
63
- </div>
64
-
65
- <!-- 右 val -->
66
- <div class="unit-control">
67
- <dsh-list-render
68
- v-if="colItem.renderBodyCell"
69
- :row="dataItem"
70
- :column="colItem"
71
- :index="0"
72
- :render="colItem.renderBodyCell"
73
- ></dsh-list-render>
33
+ <!-- 复选框 -->
34
+ <Checkbox
35
+ v-if="multiple"
36
+ class="row-item-checkbox"
37
+ :label="row._id"
38
+ @click.native.stop="clickRowCheckbox(row)"
39
+ >
40
+ {{ "" }}
41
+ </Checkbox>
74
42
 
75
- <div
76
- v-else-if="colItem.formatter"
77
- v-html="colItem.formatter(dataItem, 0)"
78
- ></div>
43
+ <!-- 下拉操作(定位css) -->
44
+ <dsh-dropdown
45
+ v-if="operationList.length"
46
+ class="row-item-dropdown"
47
+ :dropdownObj="dropdownObj"
48
+ :list="operationList"
49
+ @click="$dshEmit($event, row, dataIndex)"
50
+ @click.native.stop="0"
51
+ ></dsh-dropdown>
79
52
 
80
- <span
81
- v-else
82
- class="unit-control-text"
83
- >
84
- {{ dataItem[colItem._key] }}
85
- </span>
86
- </div>
87
- </div>
88
- </div>
53
+ <!-- 背景图 -->
54
+ <div class="row-item-image">
55
+ <img
56
+ :src="getCardBgImgSrc(row)"
57
+ alt=""
58
+ >
59
+ </div>
60
+
61
+ <!-- 内容 -->
62
+ <div class="row-item-info">
63
+ <!-- 标题 -->
64
+ <bri-tooltip
65
+ class="title"
66
+ :content="row[propsObj.titleField]"
67
+ placement="top"
68
+ :transfer="true"
69
+ >
70
+ <div class="title-name">
71
+ {{ row[propsObj.titleField] }}
72
+ </div>
73
+ </bri-tooltip>
74
+
75
+ <!-- 显示字段 -->
76
+ <div
77
+ v-for="colItem in selfColumns"
78
+ :key="colItem._key"
79
+ class="unit"
80
+ >
81
+ <!-- 左 label -->
82
+ <bri-tooltip
83
+ class="unit-label-tooltip"
84
+ :content="colItem._name"
85
+ :transfer="true"
86
+ >
87
+ <div class="unit-label">
88
+ <span class="unit-label-name">
89
+ {{ colItem._name }}
90
+ </span>
91
+ <span class="unit-label-colon">
92
+
93
+ </span>
94
+ </div>
95
+ </bri-tooltip>
96
+
97
+ <!-- 右 val -->
98
+ <div class="unit-control">
99
+ <dsh-list-render
100
+ v-if="colItem.renderBodyCell"
101
+ :row="row"
102
+ :column="colItem"
103
+ :index="0"
104
+ :render="colItem.renderBodyCell"
105
+ ></dsh-list-render>
106
+
107
+ <div
108
+ v-else-if="colItem.formatter"
109
+ v-html="colItem.formatter(row, 0)"
110
+ ></div>
111
+
112
+ <span
113
+ v-else
114
+ class="unit-control-text"
115
+ >
116
+ {{ row[colItem._key] }}
117
+ </span>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </i-col>
123
+ </Row>
124
+ </CheckboxGroup>
125
+ </template>
126
+
127
+ <!-- 无数据 -->
128
+ <div
129
+ v-else
130
+ class="DshCard-nodata"
131
+ >
132
+ {{ noDataText }}
89
133
  </div>
90
134
  </template>
91
-
92
- <!-- 无数据 -->
93
- <div
94
- v-else
95
- class="dsh-tip"
96
- >
97
- {{ noDataText }}
98
- </div>
99
135
  </div>
100
136
  </template>
101
137
 
@@ -103,6 +139,10 @@
103
139
  export default {
104
140
  name: "DshCard",
105
141
  props: {
142
+ isLoading: {
143
+ type: Boolean,
144
+ default: false
145
+ },
106
146
  data: {
107
147
  type: Array,
108
148
  default () {
@@ -127,24 +167,22 @@
127
167
  default () {
128
168
  return [];
129
169
  }
130
- },
131
- noDataText: {
132
- type: String,
133
- default: "暂无内容..."
134
170
  }
135
171
  },
136
172
  data () {
137
173
  return {
174
+ selections: [],
175
+ // curRow: null // 可以不声明
176
+
138
177
  // 下拉菜单的配置
139
178
  dropdownObj: {
140
179
  icon: "ios-more",
141
180
  size: 22,
142
- color: "#E9ECF4",
143
181
  showDropdownItemIcon: false
144
182
  },
145
183
 
146
- getCardBgImgSrc (dataItem) {
147
- const fileList = dataItem[this.propsObj.imageField] || [];
184
+ getCardBgImgSrc (row) {
185
+ const fileList = row[this.propsObj.imageField] || [];
148
186
  const imgObj = fileList.find(fileItem => fileItem.mimetype.includes("image")) || {
149
187
  url: this.$imageSrcMap.app.projectCard
150
188
  };
@@ -153,6 +191,31 @@
153
191
  };
154
192
  },
155
193
  computed: {
194
+
195
+ selfPropsObj () {
196
+ return {
197
+ multiple: false,
198
+ imageField: "",
199
+ titleField: "",
200
+ loadingText: "加载中,请稍等……",
201
+ finishedText: "暂无更多数据!",
202
+ noDataText: "暂无数据…",
203
+
204
+ ...this.propsObj
205
+ };
206
+ },
207
+ multiple () {
208
+ return !!this.selfPropsObj.multiple;
209
+ },
210
+ loadingText () {
211
+ return this.selfPropsObj.loadingText;
212
+ },
213
+ finishedText () {
214
+ return this.selfPropsObj.finishedText;
215
+ },
216
+ noDataText () {
217
+ return this.selfPropsObj.noDataText;
218
+ },
156
219
  imageField () {
157
220
  return this.propsObj.imageField;
158
221
  },
@@ -174,6 +237,23 @@
174
237
  columnAlign: "left"
175
238
  }))
176
239
  .slice(0, 2);
240
+ },
241
+
242
+ selectIds: {
243
+ get () {
244
+ return this.selections.map(item => item._id);
245
+ },
246
+ set (val) {
247
+ this.selections = this.data.filter(item => val.includes(item._id));
248
+ }
249
+ },
250
+ isSelectAll: {
251
+ get () {
252
+ return this.data.length > 0 && this.selectIds.length === this.data.length;
253
+ },
254
+ set (bool) {
255
+ this.selections = bool ? this.data : [];
256
+ }
177
257
  }
178
258
  },
179
259
  created () {},
@@ -181,95 +261,154 @@
181
261
  // 点击某行
182
262
  clickRow (row) {
183
263
  this.$emit("clickRow", row);
264
+ },
265
+ // 点击某行的选择框
266
+ clickRowCheckbox (row) {
267
+ this.curRow = row;
268
+ this.curRow.bool = !this.selectIds.includes(row._id);
269
+ },
270
+
271
+ // 切换全选
272
+ selectAll (bool) {
273
+ this.$emit("selectAll", this.selectIds, this.selections, bool);
274
+ this.changeSelect();
275
+ },
276
+ // 切换选择
277
+ selectRow (ids) {
278
+ this.$emit("selectRow", this.selectIds, this.selections, this.curRow.bool, this.curRow);
279
+ this.changeSelect();
280
+ },
281
+ // 改变选择项
282
+ changeSelect () {
283
+ this.$emit("changeSelect", this.selectIds, this.selections);
184
284
  }
185
285
  }
186
286
  };
187
287
  </script>
188
288
 
189
- <style lang="less">
289
+ <style lang="less" scoped>
190
290
  .DshCard {
191
- padding: 0 40px;
291
+ padding: 10px;
192
292
  background-color: #ffffff;
193
- display: flex;
194
- flex-wrap: wrap;
195
-
196
- &-item {
197
- box-sizing: border-box;
198
- width: 250px;
199
- height: 210px;
200
- margin: 10px 16px 30px;
201
- border-radius: 6px;
202
- box-shadow: 0px 4px 8px 0px rgba(222, 222, 222, 0.75);
203
- cursor: pointer;
204
- overflow: hidden;
205
- position: relative;
206
-
207
- display: flex;
208
- flex-direction: column;
209
-
210
- &-dropdown {
211
- position: absolute;
212
- top: 5px;
213
- right: 5px;
214
- }
215
293
 
216
- &-image {
217
- height: 122px;
218
- padding-top: 20px;
294
+ &-list {
295
+ .row-item {
296
+ box-sizing: border-box;
297
+ width: 100%;
298
+ margin-bottom: 20px;
299
+ // border-radius: 4px;
300
+ box-shadow: 0px 4px 8px 0px rgba(222, 222, 222, 0.75);
301
+ background: #FFFFFF;
302
+ cursor: pointer;
303
+ overflow: hidden;
304
+ position: relative;
305
+
306
+ display: flex;
307
+ flex-direction: column;
219
308
 
220
- img {
221
- width: 100%;
309
+ &-checkbox {
310
+ margin-top: 0px;
311
+ padding-right: 4px;
312
+ padding-bottom: 4px;
313
+ position: absolute;
314
+ top: -3px;
315
+ left: 0px;
222
316
  }
223
- }
224
317
 
225
- &-info {
226
- padding: 8px 15px;
227
- background: #F7FBFF;
228
- overflow: hidden;
318
+ &-dropdown {
319
+ position: absolute;
320
+ top: 5px;
321
+ right: 5px;
322
+ }
229
323
 
230
- .title {
231
- height: 24px;
232
- padding-right: 6px;
233
- font-size: 14px;
234
- font-weight: 600;
324
+ &-image {
325
+ height: 122px;
326
+ // padding: 10px;
327
+ // padding-bottom: 0px;
328
+ overflow: hidden;
235
329
 
236
- &-name {
237
- .dsh-ellipsis();
330
+ img {
331
+ width: 100%;
238
332
  }
239
333
  }
240
334
 
241
- .unit {
242
- height: 24px;
243
- display: flex;
244
- flex-direction: row;
335
+ &-info {
336
+ padding: 8px;
337
+ padding-bottom: 10px;
338
+ background: #F7FBFF;
245
339
 
246
- &-label {
247
- font-weight: 400;
248
- color: #515A6E;
340
+ .title {
341
+ height: 24px;
342
+ font-size: 14px;
343
+ font-weight: 600;
249
344
 
250
345
  &-name {
251
- min-width: 70px;
252
- max-width: 70px;
253
346
  .dsh-ellipsis();
254
- display: inline-block;
255
347
  }
348
+ }
349
+
350
+ .unit {
351
+ display: flex;
352
+ flex-direction: row;
353
+ align-items: center;
354
+
355
+ &-label {
356
+ &-tooltip {
357
+ width: auto;
358
+ }
256
359
 
257
- &-colon {
360
+ font-weight: 400;
361
+ color: #515A6E;
362
+ display: flex;
363
+ flex-direction: row;
364
+ align-items: center;
258
365
 
366
+ &-name {
367
+ .dsh-ellipsis();
368
+ display: inline-block;
369
+ min-width: 29px;
370
+ max-width: 71px;
371
+ }
372
+
373
+ &-colon {
374
+
375
+ }
259
376
  }
260
- }
261
377
 
262
- &-control {
263
- flex: 1;
264
- min-width: 0px;
265
- overflow: hidden;
378
+ &-control {
379
+ flex: 1;
380
+ min-width: 0px;
266
381
 
267
- &-text {
382
+ &-text {
268
383
 
384
+ }
269
385
  }
270
386
  }
271
387
  }
272
388
  }
389
+
390
+ }
391
+
392
+ &-nodata {
393
+ #dsh-nodata();
394
+ }
395
+ }
396
+ </style>
397
+ <style lang="less">
398
+ .DshCard {
399
+ &-list {
400
+ .ivu-checkbox-inner {
401
+ border: none;
402
+ // border-radius: 4px;
403
+ box-shadow: 0px 1px 2px 0px rgba(222, 222, 222, 0.75);
404
+ }
405
+
406
+ .ivu-checkbox-checked {
407
+ .ivu-checkbox-inner:after {
408
+ top: 3px;
409
+ left: 6px;
410
+ }
411
+ }
273
412
  }
274
413
  }
275
414
  </style>
@@ -383,7 +383,7 @@
383
383
 
384
384
  noDataText: {
385
385
  type: String,
386
- default: "暂无内容..."
386
+ default: "暂无数据…"
387
387
  },
388
388
  changedFields: {
389
389
  type: Array,
@@ -1,8 +1,5 @@
1
1
  <template>
2
- <div
3
- class="DshList"
4
- v-show="showData"
5
- >
2
+ <div class="DshList">
6
3
  <!-- 表头 -->
7
4
  <div class="list-cols">
8
5
  <!-- 左 -->
@@ -60,9 +57,9 @@
60
57
  <bri-loading
61
58
  v-if="isLoading"
62
59
  class="list-loading"
63
- mode="middle"
64
- center
65
- />
60
+ >
61
+ {{ loadingText }}
62
+ </bri-loading>
66
63
  <template v-else>
67
64
  <!-- 有数据 -->
68
65
  <template v-if="data.length">
@@ -78,7 +75,7 @@
78
75
  v-for="row in data"
79
76
  :key="row._id"
80
77
  :label="row._id"
81
- @click.native="clickRowCheckbox(row)"
78
+ @click.native.stop="clickRowCheckbox(row)"
82
79
  >
83
80
  {{ "" }}
84
81
  </Checkbox>
@@ -151,7 +148,7 @@
151
148
  <!-- 无数据 -->
152
149
  <div
153
150
  v-else
154
- class="list-noData"
151
+ class="DshList-nodata"
155
152
  >
156
153
  {{ noDataText }}
157
154
  </div>
@@ -193,12 +190,11 @@
193
190
  },
194
191
  noDataText: {
195
192
  type: String,
196
- default: "暂无内容..."
193
+ default: "暂无数据…"
197
194
  }
198
195
  },
199
196
  data () {
200
197
  return {
201
- showData: true,
202
198
  selections: []
203
199
  // curRow: null // 可以不声明
204
200
  };
@@ -264,9 +260,6 @@
264
260
  this.$emit("changeSelect", this.selectIds, this.selections);
265
261
  },
266
262
 
267
- change (...params) {
268
- this.$emit("change", ...params);
269
- },
270
263
  getFlexLayout (align) {
271
264
  let map = {
272
265
  left: "flex-start",