bri-components 1.3.91 → 1.3.93

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 (9) hide show
  1. package/package.json +2 -2
  2. package/src/components/list/DshCascaderTable.vue +0 -50
  3. package/src/components/list/DshFlatTable.vue +5 -5
  4. package/src/components/list/DshTreeTable.vue +2 -2
  5. package/src/components/list/mixins/DshCascaderTableMixin.js +377 -402
  6. package/src/components/list/mixins/DshFlatTableMixin.js +13 -53
  7. package/src/components/list/mixins/DshTreeTableMixin.js +40 -193
  8. package/src/components/list/mixins/tableBaseMixin.js +326 -137
  9. package/src/styles/components/list/BriTable.less +44 -0
package/src/components/list/mixins/DshFlatTableMixin.js CHANGED
@@ -7,18 +7,8 @@ export default {
7
7
  },
8
8
  computed: {
9
9
  allListData () {
10
- // console.log("allListData");
11
- this.data.forEach(item => {
12
- !item._id && this.$set(item, "_id", this.$ObjectID().str);
13
-
14
- if (this.initFlag) {
15
- item.__old__ = true; // 标记老数据（initFlag不用在data中声明）
16
- item.__isDefault__ = item.__isDefault__ === undefined ? this.controlKey === "_default" : item.__isDefault__; // 配置端-默认数据打上标记
17
- }
18
- item.__isRendered__ = true;
19
- item.__isShow__ = true;
20
- item.__isTmpShow__ = true;
21
- item.__isSearchShow__ = false;
10
+ this.data.forEach(rowItem => {
11
+ this.fixRowItem(rowItem);
22
12
  });
23
13
 
24
14
  this.initFlag = false;
@@ -34,7 +24,7 @@ export default {
34
24
  ...obj,
35
25
  [column._key]: column._type === "number" && column._summaryType
36
26
  ? this.$calNumList(
37
- this.allListData.map(item => item[column._key]),
27
+ this.allListData.map(rowItem => rowItem[column._key]),
38
28
  column._summaryType,
39
29
  { ...column, _defaultDigit: 2 }
40
30
  )
@@ -76,43 +66,8 @@ export default {
76
66
  return [
77
67
  h("div", rowIndex + 1),
78
68
 
79
- // 插入一行添加符
80
- (this.operationMap.canCreate && this.operationMap.canCreate.disabled !== true) &&
81
- !this.isSearching &&
82
- !this.showCreateBtnColKeys.length
83
- ? h("div", {
84
- style: {
85
- position: "absolute",
86
- bottom: "0px",
87
- right: "0px",
88
- display: "inline-block",
89
- width: "16px",
90
- height: " 16px",
91
- border: "1px solid #3DB8C5",
92
- backgroundColor: "#ffffff",
93
- lineHeight: "12px",
94
- cursor: "pointer",
95
- verticalAlign: "middle",
96
- transition: "color .2s ease-in-out,border-color .2s ease-in-out"
97
- }
98
- }, [
99
- h("Icon", {
100
- style: {
101
- fontWeight: "500",
102
- color: "#3DB8C5"
103
- },
104
- props: {
105
- type: "md-add-circle", // "ios-add"
106
- size: "14"
107
- },
108
- on: {
109
- click: () => {
110
- this.$dispatchEvent(this.operationMap.canCreate, row, rowIndex, column);
111
- }
112
- }
113
- })
114
- ])
115
- : h("span", "")
69
+ // 添加符
70
+ ...this.createIconRender(h, { row, rowIndex, column })
116
71
  ];
117
72
  }
118
73
  };
@@ -129,9 +84,9 @@ export default {
129
84
  const newIndex = newList.findIndex(rowItem => row[col._key] !== rowItem[col._key]);
130
85
  row = newList[newIndex - 1];
131
86
 
87
+ // 当前列是合并列，则该列之前的合并列，要复制这一行对应列的值；当前列是普通列，则所有的合并列不用处理
132
88
  const curIndex = this.mergeRowColumns.findIndex(column => col._key === column._key);
133
89
  mergeRowData = this.mergeRowColumns.reduce((obj, column, colIndex) => {
134
- // 该列之前的合并列，要复制这一行对应列的值
135
90
  return colIndex < curIndex
136
91
  ? Object.assign(obj, { [column._key]: row[column._key] })
137
92
  : obj;
@@ -142,11 +97,12 @@ export default {
142
97
  ...this.$deepCopy(this.selfRowDefault),
143
98
  ...this.$deepCopy(mergeRowData),
144
99
  _id: this.$ObjectID().str,
100
+ // __old__: false,
101
+ __isDefault__: this.controlKey === "_default",
145
102
  __isRendered__: true,
146
103
  __isShow__: true,
147
104
  __isTmpShow__: true,
148
- __isSearchShow__: false,
149
- __isDefault__: this.controlKey === "_default"
105
+ __isSearchShow__: false
150
106
  };
151
107
  const list = this.data;
152
108
  const newRowIndex = row
@@ -167,6 +123,10 @@ export default {
167
123
  this.change("deleteRow", null, row, rowIndex);
168
124
  }
169
125
  });
126
+ },
127
+
128
+ change (eventType, col, row, rowIndex, ...params) {
129
+ this.$emit("change", { list: this.allListData, rowDefault: this.rowDefault }, eventType, col, row, rowIndex, ...params);
170
130
  }
171
131
  }
172
132
  };
package/src/components/list/mixins/DshTreeTableMixin.js CHANGED
@@ -6,9 +6,6 @@ export default {
6
6
  props: {},
7
7
  data () {
8
8
  return {
9
- deleteProperties: ["__treeIndex__", "__old__", "__isExpand__", "__isRendered__", "__isShow__", "__isTmpShow__", "__isSearchShow__"], // 除了__readonly__和__isQuote__不处理
10
- isExpandAction: false,
11
-
12
9
  searchMode: "flat" // "flat", "tree"
13
10
  };
14
11
  },
@@ -41,15 +38,12 @@ export default {
41
38
  },
42
39
 
43
40
  allTreeData () {
44
- // console.log("allTreeData");
45
41
  return this.getCalcuedTree(this.data, this.selfColumns);
46
42
  },
47
43
  allListData () {
48
- // console.log("allListData");
49
44
  return this.$getTreeFlatArr(this.allTreeData);
50
45
  },
51
46
  footerData () {
52
- // console.log("footerData");
53
47
  return this.isSearching
54
48
  ? []
55
49
  : this.useSummary && this.allListData.length
@@ -60,8 +54,8 @@ export default {
60
54
  [column._key]: column._type === "number" && column._summaryType
61
55
  ? this.$calNumList(
62
56
  this.allListData
63
- .filter(item => item.level === 1)
64
- .map(item => item[column._key]),
57
+ .filter(rowItem => rowItem.level === 1)
58
+ .map(rowItem => rowItem[column._key]),
65
59
  column._summaryType,
66
60
  { ...column, _defaultDigit: 2 }
67
61
  )
@@ -77,40 +71,6 @@ export default {
77
71
  : [];
78
72
  },
79
73
 
80
- tablePropsObj () {
81
- return {
82
- maxHeight: this.contentHeight,
83
- // 通过实例方法 hideColumnsByKeys(keys)将列隐藏，通过实例方法 showColumnsByKeys(keys)将隐藏的列显示
84
- columnHiddenOption: {
85
- defaultHiddenColumnKeys: [...this.hideColKeys] // 必须这么写，不解构，切换一次隐藏／显示后，hideColKeys会变成空数组
86
- },
87
- cellStyleOption: {
88
- bodyCellClass: ({ row, rowIndex, column }) => {
89
- return "bri-table-td" +
90
- `${this.getRowCanEdit(row)
91
- ? " bri-table-td-edit"
92
- : ""
93
- }` +
94
- `${this.isSearching
95
- ? row.__isSearchShow__ === false
96
- ? " bri-table-td-hide"
97
- : ""
98
- : row.__isShow__ === true
99
- ? this.isExpandAction
100
- ? " bri-table-td-visible"
101
- : ""
102
- : " bri-table-td-hide"
103
- }` +
104
- `${["__isExpand__"].includes(column._key)
105
- ? " bri-table-td-expand"
106
- : ["__index__"].includes(column._key)
107
- ? " bri-table-td-index"
108
- : ""
109
- }`;
110
- }
111
- }
112
- };
113
- },
114
74
  showColumns () {
115
75
  return [
116
76
  ...(this.useSelection === true ? [this.selectionColumn] : []),
@@ -179,81 +139,8 @@ export default {
179
139
  }
180
140
  }, row.__treeIndex__),
181
141
 
182
- // 插入一行添加符
183
- (this.operationMap.canCreate && this.operationMap.canCreate.disabled !== true) &&
184
- !this.isSearching &&
185
- !this.showCreateBtnColKeys.length
186
- ? h("div", {
187
- style: {
188
- position: "absolute",
189
- bottom: "0px",
190
- right: row.level < this.maxLevel ? "17px" : "0px",
191
- display: "inline-block",
192
- width: "16px",
193
- height: " 16px",
194
- border: "1px solid #3DB8C5",
195
- backgroundColor: "#ffffff",
196
- lineHeight: "12px",
197
- cursor: "pointer",
198
- verticalAlign: "middle",
199
- transition: "color .2s ease-in-out,border-color .2s ease-in-out"
200
- }
201
- }, [
202
- h("Icon", {
203
- style: {
204
- fontWeight: "500",
205
- color: "#3DB8C5"
206
- },
207
- props: {
208
- type: "md-add-circle",
209
- size: "14"
210
- },
211
- on: {
212
- click: () => {
213
- this.$dispatchEvent(this.operationMap.canCreate, row, rowIndex, column);
214
- }
215
- }
216
- })
217
- ])
218
- : h("span", ""),
219
-
220
- // 插入一行下级添加符
221
- (this.operationMap.canCreateChild && this.operationMap.canCreateChild.disabled !== true) &&
222
- !this.isSearching &&
223
- row.level < this.maxLevel
224
- ? h("div", {
225
- style: {
226
- position: "absolute",
227
- bottom: "0px",
228
- right: "0px",
229
- display: "inline-block",
230
- width: "16px",
231
- height: " 16px",
232
- border: "1px solid #3DB8C5",
233
- backgroundColor: "#ffffff",
234
- lineHeight: "12px",
235
- cursor: "pointer",
236
- verticalAlign: "middle",
237
- transition: "color .2s ease-in-out,border-color .2s ease-in-out"
238
- }
239
- }, [
240
- h("Icon", {
241
- style: {
242
- fontWeight: "600",
243
- color: "#3DB8C5"
244
- },
245
- props: {
246
- type: "ios-add",
247
- size: "14"
248
- },
249
- on: {
250
- click: () => {
251
- this.$dispatchEvent(this.operationMap.canCreateChild, row, rowIndex);
252
- }
253
- }
254
- })
255
- ])
256
- : h("span", "")
142
+ // 添加符
143
+ ...this.createIconRender(h, { row, rowIndex, column })
257
144
  ];
258
145
  }
259
146
  };
@@ -263,7 +150,6 @@ export default {
263
150
  methods: {
264
151
  // 本身的初始化
265
152
  selfReset () {
266
- this.isExpandAction = false;
267
153
  this.searchMode = "flat";
268
154
  this.dftAdvSearch = {
269
155
  logic: "and",
@@ -271,16 +157,8 @@ export default {
271
157
  };
272
158
  },
273
159
 
274
- // 展开／隐藏节点
275
- toggleExpand (row, bool = true) {
276
- this.isExpandAction = true;
277
- this.$set(row, "__isExpand__", bool);
278
-
279
- this.toggleDescendantsShow(row, bool);
280
- },
281
-
282
160
  // 点击 -添加一行
283
- clickCreate (operationItem, row, rowIndex) {
161
+ clickCreate (operationItem, row, rowIndex, col) {
284
162
  const newRow = {
285
163
  ...this.$deepCopy(this.selfRowDefault),
286
164
  _id: this.$ObjectID().str,
@@ -288,14 +166,15 @@ export default {
288
166
  isLeaf: true,
289
167
  children: [],
290
168
  // __old__: false,
291
- __isExpand__: false,
169
+ __isDefault__: this.controlKey === "_default",
292
170
  __isRendered__: true,
293
171
  __isShow__: true,
294
- __isTmpShow__: false,
295
- __isSearchShow__: false
172
+ __isTmpShow__: true,
173
+ __isSearchShow__: false,
174
+ __isExpand__: false
296
175
  };
297
176
  const list = row
298
- ? this.getParentNode(row, this.data).children
177
+ ? this.getParentRow(row, this.data).children
299
178
  : this.data;
300
179
  const newRowIndex = row
301
180
  ? list.findIndex(rowItem => rowItem._id === row._id) + 1
@@ -305,7 +184,7 @@ export default {
305
184
  this.change("createRow", null, newRow, newRowIndex);
306
185
  },
307
186
  // 点击 -添加子行
308
- clickCreateChild (operationItem, row, rowIndex) {
187
+ clickCreateChild (operationItem, row, rowIndex, col) {
309
188
  const newRow = {
310
189
  ...this.$deepCopy(this.selfRowDefault),
311
190
  _id: this.$ObjectID().str,
@@ -313,16 +192,20 @@ export default {
313
192
  isLeaf: true,
314
193
  children: [],
315
194
  // __old__: false,
316
- __isExpand__: false,
195
+ __isDefault__: this.controlKey === "_default",
317
196
  __isRendered__: true,
318
197
  __isShow__: true,
319
- __isTmpShow__: false,
320
- __isSearchShow__: false
198
+ __isTmpShow__: true,
199
+ __isSearchShow__: false,
200
+ __isExpand__: false
321
201
  };
322
- row.children.push(newRow);
202
+ const list = row.children;
203
+ const newRowIndex = list.length;
204
+ list.splice(newRowIndex, 0, newRow);
205
+ // 展开子级
323
206
  this.toggleExpand(row, true);
324
207
 
325
- this.change("createRow", null, newRow, row.children.length);
208
+ this.change("createChildRow", null, newRow, newRowIndex);
326
209
  },
327
210
  // 点击 -删除行
328
211
  clickDelete (operationItem, row, rowIndex) {
@@ -330,20 +213,23 @@ export default {
330
213
  title: "警告",
331
214
  content: "确定删除吗？",
332
215
  onOk: () => {
333
- const parentNode = this.getParentNode(row, this.data);
334
- const index = parentNode.children.findIndex(childNode => childNode._id === row._id);
335
- parentNode.children.splice(index, 1);
216
+ const parentRow = this.getParentRow(row, this.data);
217
+ const index = parentRow.children.findIndex(childRowItem => childRowItem._id === row._id);
218
+ parentRow.children.splice(index, 1);
336
219
 
337
220
  this.change("deleteRow", null, row, rowIndex);
338
221
  }
339
222
  });
340
223
  },
224
+ change (eventType, col, row, rowIndex, ...params) {
225
+ this.$emit("change", { tree: this.data, rowDefault: this.rowDefault }, eventType, col, row, rowIndex, ...params);
226
+ },
341
227
 
342
228
  /* ------ 工具方法 ------- */
343
229
  // 加工树形数据
344
230
  getCalcuedTree (treeData = [], cols = []) {
345
231
  const loop = (list = [], parentRow, levelNum = 1) =>
346
- list.forEach((row) => {
232
+ list.forEach(rowItem => {
347
233
  // 递归到叶子节点前 从上往下执行 要处理的
348
234
  cols.reduce((newRow, column) => {
349
235
  if (["number", "date"].includes(column._type)) {
@@ -361,11 +247,11 @@ export default {
361
247
  }
362
248
 
363
249
  return newRow;
364
- }, row);
250
+ }, rowItem);
365
251
 
366
- if (row.children && row.children.length) {
367
- row.isLeaf = false;
368
- loop(row.children, row, levelNum + 1);
252
+ if (rowItem.children && rowItem.children.length) {
253
+ rowItem.isLeaf = false;
254
+ loop(rowItem.children, rowItem, levelNum + 1);
369
255
 
370
256
  // 递归到叶子节点后到 从下往上执行 要处理的（非叶子节点）
371
257
  cols.reduce((newRow, column) => {
@@ -397,9 +283,9 @@ export default {
397
283
  }
398
284
 
399
285
  return newRow;
400
- }, row);
286
+ }, rowItem);
401
287
  } else {
402
- row.isLeaf = true;
288
+ rowItem.isLeaf = true;
403
289
 
404
290
  // 递归到叶子节点后到 从下往上执行 要处理的（叶子节点）
405
291
  cols.reduce((newRow, column) => {
@@ -413,61 +299,22 @@ export default {
413
299
  }
414
300
 
415
301
  return newRow;
416
- }, row);
302
+ }, rowItem);
417
303
  }
418
304
 
419
- if (this.initFlag) {
420
- // TODO：修正数据level属性，后期可以删除
421
- row.level = row.level || levelNum;
422
-
423
- // 初次进来把前端存的状态值全部清除（除了__readonly__和__isQuote__不处理）
424
- this.deleteProperties.forEach(property => {
425
- delete row[property];
426
- });
427
- row.__old__ = true; // 老的数据都打上标记 尽管不一定会用
428
- // row.__isExpand__ = false;
429
- // row.__isSearchShow__ = false;
430
- // 第一级的需要显示出来
431
- if (row.level == 1) {
432
- row.__isRendered__ = true;
433
- row.__isShow__ = true;
434
- row.__isTmpShow__ = true;
435
- } else {
436
- // row.__isRendered__ = false;
437
- // row.__isShow__ = false;
438
- // row.__isTmpShow__ = false;
439
- }
440
- }
305
+ this.fixRowItem(rowItem);
441
306
  });
442
307
  loop(treeData);
443
308
 
444
309
  this.initFlag = false;
445
310
  return treeData;
446
311
  },
447
- // 获取父节点
448
- getParentNode (curRow, tree = []) {
449
- if (curRow.level === 1) {
450
- return {
451
- children: tree
452
- };
453
- } else {
454
- let parentNode;
455
-
456
- const loop = (list = []) => {
457
- return list.some(row => {
458
- if (row.level === curRow.level - 1) {
459
- const isExist = row.children.some(childNode => childNode._id === curRow._id);
460
- parentNode = row;
461
- return isExist;
462
- } else {
463
- return loop(row.children);
464
- }
465
- });
466
- };
467
- loop(tree);
312
+ // 展开／隐藏节点
313
+ toggleExpand (row, bool = true) {
314
+ this.isExpandAction = true;
315
+ this.$set(row, "__isExpand__", bool);
468
316
 
469
- return parentNode;
470
- }
317
+ this.toggleDescendantsShow(row, bool);
471
318
  },
472
319
  // 切换子孙后代的显示／隐藏
473
320
  toggleDescendantsShow (row, bool) {