bri-components 1.3.96 → 1.3.98

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 (16) hide show
  1. package/package.json +1 -1
  2. package/src/components/controls/base/BriUpload/uploadList.vue +77 -27
  3. package/src/components/controls/mixins/controlMixin.js +36 -1
  4. package/src/components/controls/mixins/selectMixin.js +16 -8
  5. package/src/components/controls/senior/BriLabels.vue +1 -1
  6. package/src/components/controls/senior/selectDepartments.vue +4 -5
  7. package/src/components/form/DshForm.vue +6 -2
  8. package/src/components/list/DshCascaderTable.vue +4 -4
  9. package/src/components/list/mixins/DshCascaderTableMixin.js +228 -261
  10. package/src/components/list/mixins/DshFlatTableMixin.js +12 -8
  11. package/src/components/list/mixins/DshTreeTableMixin.js +2 -2
  12. package/src/components/list/mixins/tableBaseMixin.js +350 -279
  13. package/src/components/list/mixins/treeTableBaseMixin.js +6 -5
  14. package/src/components/unit/DshListUnit.vue +5 -5
  15. package/src/components/unit/unitMixin.js +4 -0
  16. package/src/utils/table.js +1 -1
package/src/components/list/mixins/DshCascaderTableMixin.js CHANGED
@@ -36,41 +36,41 @@ export default {
36
36
  icon: "md-trash",
37
37
  color: "red",
38
38
  event: "clickDeleteCol"
39
+ }
40
+ },
41
+ otherOperationMap: {
42
+ canChangeNode: {
43
+ name: "改变节点值",
44
+ type: "canChangeNode",
45
+ event: "changeNode"
39
46
  },
40
-
41
- clickNode: {
47
+ canClickNode: {
42
48
  name: "点击节点",
43
- type: "clickNode",
49
+ type: "canClickNode",
44
50
  event: "clickNode"
45
51
  },
46
- blurNode: {
52
+ canBlurNode: {
47
53
  name: "节点失去焦点",
48
- type: "blurNode",
54
+ type: "canBlurNode",
49
55
  event: "blurNode"
50
- },
51
- changeNode: {
52
- name: "改变节点值",
53
- type: "changeNode",
54
- event: "changeNode"
55
56
  }
56
-
57
- // canClearNode: {
58
- // name: "清除内容",
59
- // type: "canClearNode",
60
- // icon: "md-trash",
61
- // divided: true,
62
- // event: "clickClearNode"
63
- // },
64
- // canClearChildNodes: {
65
- // name: "清除所有下级内容",
66
- // type: "canClearChildNodes",
67
- // icon: "md-trash",
68
- // event: "clickClearChildNodes"
69
- // }
70
57
  }
71
58
  };
72
59
  },
73
60
  computed: {
61
+ typePropsObj () {
62
+ return {
63
+ _dftReadonlyTreeColKeys: [], // 默认的数据只读的表头列
64
+ _oldReadonlyTreeColKeys: [] // 保存的数据只读的表头列
65
+ };
66
+ },
67
+ dftReadonlyTreeColKeys () {
68
+ return this.isDftSet ? [] : this.selfPropsObj._dftReadonlyTreeColKeys || []; // 配置端有问题，高级以依赖时候值成undefined了
69
+ },
70
+ oldReadonlyTreeColKeys () {
71
+ return this.isDftSet ? [] : this.selfPropsObj._oldReadonlyTreeColKeys || []; // 配置端有问题，高级以依赖时候值成undefined了
72
+ },
73
+
74
74
  allTreeData () {
75
75
  return this.getCalcuedTree(this.data, this.treeColumns, this.selfColumns);
76
76
  },
@@ -82,11 +82,11 @@ export default {
82
82
  },
83
83
 
84
84
  showColumns () {
85
- return this.mergeColumns(this.treeColumns, this.contentColumns);
85
+ return this.mergeColumns(this.treeColumns);
86
86
  },
87
87
  // 供表格渲染行使用的columns的数组集合, 每一行columns不一样，组成二重数组
88
88
  rowColumnsArr () {
89
- return this.transformRowColumnsArr(this.allTreeData, this.treeColumns, this.contentColumns);
89
+ return this.transformRowColumnsArr(this.allTreeData, this.treeColumns);
90
90
  }
91
91
  },
92
92
  created () {
@@ -139,15 +139,19 @@ export default {
139
139
  },
140
140
 
141
141
  // 树形、汇总节点操作 -点击
142
- clickNode (operationItem, col, row, rowIndex) {
142
+ clickNode (operationItem, row, rowIndex, col) {
143
143
  if (col.colType === "tree") {
144
- if (!this.getRowIsDftDisabled(row) || col._readonlyOnDftRow !== true) {
144
+ if (
145
+ (this.getIsDftRow(row) ? !this.dftReadonlyTreeColKeys.includes(col._key) : true) && // 默认行的某列是否可编辑
146
+ (row.__old__ === true ? !this.oldReadonlyTreeColKeys.includes(col._key) : true) // 老数据行里某些列不可编辑
147
+ ) {
145
148
  row.isEdit = true;
146
149
  this.$nextTick(() => {
147
- this.$refs[`${col._id}${row._id}`][0] && this.$refs[`${col._id}${row._id}`][0].focus();
150
+ this.$refs[`${col._id}${row._id}`] && this.$refs[`${col._id}${row._id}`].focus();
148
151
  });
149
152
  }
150
- } else if (col.colType === "summary") {
153
+ }
154
+ else if (col.colType === "summary") {
151
155
  this.$Modal.warning({
152
156
  title: "该汇总单元格自动计算，不准手动输入！",
153
157
  closable: true,
@@ -157,256 +161,231 @@ export default {
157
161
  }
158
162
  },
159
163
  // 树形节点操作 -失去焦点
160
- blurNode (operationItem, col, row, rowIndex) {
164
+ blurNode (operationItem, row, rowIndex, col) {
161
165
  row.isEdit = false;
162
166
  },
163
167
  // 树形节点操作 -值改变
164
- changeNode (operationItem, col, row, rowIndex) {
165
- this.change("changeNode", col, row, rowIndex);
168
+ changeNode (operationItem, row, rowIndex, col) {
169
+ this.change("changeNode", row, rowIndex, col);
166
170
  },
167
- // // 节点操作 -清除该节点内容
168
- // clickClearNode (operationItem, row, rowIndex, col) {
169
- // row.name = "";
170
-
171
- // this.change("clearNode", null, row, rowIndex);
172
- // },
173
- // // 节点操作 -清除所有子节点内容
174
- // clickClearChildNodes (operationItem, row, rowIndex, col) {
175
- // this.$clearPropertyValToLeaf(row.children);
176
-
177
- // this.change("clearChildNodes", null, row, rowIndex);
178
- // },
179
- change (eventType, col, row, rowIndex, ...params) {
171
+ change (eventType, row, rowIndex, col, ...params) {
180
172
  this.$emit("change", this.tableDataObj, eventType, col, row, rowIndex, ...params);
181
173
  },
182
174
 
183
- /* ----------- 渲染函数 ---------- */
175
+ /* ----------- 渲染函数（声明：为了代码更加规范清晰，return的是h相关的函数，则函数名get开头；return的是h的直接调用，函数名不要get开头）---------- */
184
176
  // 表格表头渲染函数
185
- getTableHeadRender () {
186
- return (h) => {
187
- return h("div", {
188
- class: "DshCasTable-main-center-top"
177
+ tableHeadRender (h) {
178
+ return h("div", {
179
+ class: "DshCasTable-main-center-top"
180
+ }, [
181
+ h("div", {
182
+ class: "DshCasTable-main-center-top-inner"
189
183
  }, [
190
- h("div", {
191
- class: "DshCasTable-main-center-top-inner"
184
+ h("table", {
185
+ class: "table",
186
+ attrs: {
187
+ border: "1",
188
+ cellspacin: "0",
189
+ bordercolor: "#E7EDF8"
190
+ }
192
191
  }, [
193
- h("table", {
194
- class: "table",
195
- attrs: {
196
- border: "1",
197
- cellspacin: "0",
198
- bordercolor: "#E7EDF8"
199
- }
192
+ h("tbody", {
193
+ class: ""
200
194
  }, [
201
- h("tbody", {
202
- class: ""
203
- }, [
204
- h(
205
- "tr",
206
- {},
207
- this.showColumns.map((column, colIndex) => {
208
- return h("th", {
209
- key: column._id,
210
- class: "bri-table-th",
211
- style: this.getThStyle(column, "th")
212
- }, [
213
- // 表头单元格
214
- this.getThRender(column, colIndex)(h)
215
- // h("dsh-render", {
216
- // props: {
217
- // render: this.getThRender(column, colIndex)
218
- // }
219
- // })
220
- ]);
221
- })
222
- )
223
- ])
195
+ h(
196
+ "tr",
197
+ {},
198
+ this.showColumns.map((column, colIndex) => {
199
+ return h("th", {
200
+ key: column._id,
201
+ class: "bri-table-th",
202
+ style: this.getThStyle(column)
203
+ }, [
204
+ // 表头单元格
205
+ this.thRender(h, { column, colIndex })
206
+ // h("dsh-render", {
207
+ // props: {
208
+ // render: this.thRender(h, { column, colIndex })
209
+ // }
210
+ // })
211
+ ]);
212
+ })
213
+ )
224
214
  ])
225
215
  ])
226
- ]);
227
- };
216
+ ])
217
+ ]);
228
218
  },
229
219
  // 表格内容渲染函数
230
- getTableBodyRender () {
231
- return (h) => {
232
- return h("div", {
233
- class: "DshCasTable-main-center-list"
220
+ tableBodyRender (h) {
221
+ return h("div", {
222
+ class: "DshCasTable-main-center-list"
223
+ }, [
224
+ h("div", {
225
+ class: "DshCasTable-main-center-list-inner"
234
226
  }, [
235
- h("div", {
236
- class: "DshCasTable-main-center-list-inner"
227
+ h("table", {
228
+ class: "table",
229
+ attrs: {
230
+ border: "1",
231
+ cellspacin: "0",
232
+ bordercolor: "#E7EDF8"
233
+ }
237
234
  }, [
238
- h("table", {
239
- class: "table",
240
- attrs: {
241
- border: "1",
242
- cellspacin: "0",
243
- bordercolor: "#E7EDF8"
244
- }
235
+ h("tbody", {
236
+ class: ""
245
237
  }, [
246
- h("tbody", {
247
- class: ""
248
- }, [
249
- this.showListData.length
250
- ? this.showListData.map((mixedRow, rowIndex) => {
251
- return h(
252
- "tr",
253
- {
254
- key: mixedRow._id,
255
- class: ""
256
- },
257
- this.rowColumnsArr[rowIndex].map(column => {
258
- return ["tree", "summary"].includes(column.colType)
259
- // 树节点单元格、汇总单元格
260
- ? this.getTreeTdRender(column, mixedRow[column.nodeKey || column._key], rowIndex)(h)
261
- // 普通单元格
262
- : this.getTdRender(column, mixedRow[column.nodeKey], rowIndex)(h);
263
- })
264
- );
265
- })
266
- // 无数据
267
- : h("tr", {
268
- class: "bri-table-nodata"
269
- }, [
270
- h("td", {
271
- style: {
272
- width: `${this.boxWidth}px`,
273
- minWidth: `${this.boxWidth}px`,
274
- maxWidth: `${this.boxWidth}px`
275
- },
276
- attrs: {
277
- rowspan: 1,
278
- colspan: this.showColumns.length
279
- }
280
- }, "暂无数据…")
281
- ])
282
- ])
238
+ this.showListData.length
239
+ ? this.showListData.map((mixedRow, rowIndex) => {
240
+ return h(
241
+ "tr",
242
+ {
243
+ key: mixedRow._id,
244
+ class: ""
245
+ },
246
+ this.rowColumnsArr[rowIndex].map(column => {
247
+ return ["tree", "summary"].includes(column.colType)
248
+ // 树节点单元格、汇总单元格
249
+ ? this.treeTdRender(h, { row: mixedRow[column.nodeKey || column._key], rowIndex, column })
250
+ // 普通单元格
251
+ : this.contentTdRender(h, { row: mixedRow[column.nodeKey || column._key], rowIndex, column });
252
+ })
253
+ );
254
+ })
255
+ // 无数据
256
+ : h("tr", {
257
+ class: "bri-table-nodata"
258
+ }, [
259
+ h("td", {
260
+ style: {
261
+ width: `${this.boxWidth}px`,
262
+ minWidth: `${this.boxWidth}px`,
263
+ maxWidth: `${this.boxWidth}px`
264
+ },
265
+ attrs: {
266
+ rowspan: 1,
267
+ colspan: this.showColumns.length
268
+ }
269
+ }, "暂无数据…")
270
+ ])
283
271
  ])
284
272
  ])
285
- ]);
286
- };
273
+ ])
274
+ ]);
287
275
  },
288
276
  // 表头单元格渲染函数 （无法共用contentColumns的renderHeaderCell，因为级联老版表头的无renderHeaderCell）
289
- getThRender (column, colIndex) {
290
- column = this.$transformDynamicProperty(column, undefined, this.parentObj);
277
+ thRender (h, { column, colIndex }) {
278
+ return h("div", [
279
+ this.contentThCellRender(h, { column, colIndex }),
291
280
 
292
- return (h) => {
293
- return h("div", [
294
- this.$getHeadRender(h, column, {
295
- showRequired: this.showRequired,
296
- showDescription: this.showDescription,
297
- headHeightAuto: this.headHeightAuto
298
- }),
299
-
300
- // 级联最末级表头的下拉
301
- this.getDropdownRender(h, "th", column, colIndex)
302
- ]);
303
- };
281
+ // 级联最末级表头的下拉
282
+ this.treeDropOperationRender(h, { column, colIndex }, "th")
283
+ ]);
304
284
  },
305
285
  // 树节点单元格、汇总单元格渲染函数
306
- getTreeTdRender (column, row, rowIndex) {
307
- return (h) => {
308
- return h("td", {
309
- class: {
310
- "bri-table-td": true, // 可以不要，为了position: relative，下面有
311
- [`bri-table-td-${column.colType}`]: true,
312
- "bri-table-td-edit": this.canEdit
313
- },
314
- style: this.getTdStyle(column, row, rowIndex),
315
- attrs: {
316
- rowspan: this.getTdRowSpan(column, row, rowIndex),
317
- colspan: this.getTdColSpan(column, row, rowIndex)
318
- },
319
- on: {
320
- click: () => {
321
- this.$dispatchEvent(this.operationMap.clickNode, column, row, rowIndex);
322
- }
286
+ treeTdRender (h, { row, rowIndex, column }) {
287
+ return h("td", {
288
+ class: {
289
+ "bri-table-td": true, // 可以不要，为了position: relative，下面有
290
+ [`bri-table-td-${column.colType}`]: true,
291
+ "bri-table-td-edit": this.canEdit
292
+ },
293
+ style: this.getTdStyle(row, rowIndex, column),
294
+ attrs: {
295
+ rowspan: this.getTdRowSpan(row, rowIndex, column),
296
+ colspan: this.getTdColSpan(row, rowIndex, column)
297
+ },
298
+ on: {
299
+ click: () => {
300
+ this.$dispatchEvent(this.operationMap.canClickNode, row, rowIndex, column);
323
301
  }
324
- }, [
325
- column.colType === "tree"
326
- // 树节点单元格
327
- ? row.isEdit
328
- // 编辑状态
329
- ? h("Input", {
330
- ref: `${column._id}${row._id}`,
331
- props: {
332
- value: row.name,
333
- type: "textarea",
334
- autosize: {
335
- minRows: this.getTdRowSpan(column, row, rowIndex) * 3 - 1,
336
- maxRows: 100
337
- }
302
+ }
303
+ }, [
304
+ column.colType === "tree"
305
+ // 树节点单元格
306
+ ? row.isEdit
307
+ // 编辑状态
308
+ ? h("Input", {
309
+ ref: `${column._id}${row._id}`,
310
+ props: {
311
+ value: row.name,
312
+ type: "textarea",
313
+ autosize: {
314
+ minRows: this.getTdRowSpan(row, rowIndex, column) * 3 - 1,
315
+ maxRows: 100
316
+ }
317
+ },
318
+ on: {
319
+ input: val => {
320
+ row.name = val;
338
321
  },
339
- on: {
340
- input: val => {
341
- row.name = val;
342
- },
343
- "on-blur": () => {
344
- this.$dispatchEvent(this.operationMap.blurNode, column, row, rowIndex);
345
- },
346
- "on-change": () => {
347
- this.$dispatchEvent(this.operationMap.changeNode, column, row, rowIndex);
348
- }
322
+ "on-blur": () => {
323
+ this.$dispatchEvent(this.operationMap.canBlurNode, row, rowIndex, column);
324
+ },
325
+ "on-change": () => {
326
+ this.$dispatchEvent(this.operationMap.canChangeNode, row, rowIndex, column);
349
327
  }
350
- })
351
- // 查看状态
352
- : [
353
- h("bri-tooltip", {
354
- props: {
355
- content: this.$transformEnterToBr(row.name),
356
- transfer: true
328
+ }
329
+ })
330
+ // 查看状态
331
+ : [
332
+ h("bri-tooltip", {
333
+ props: {
334
+ content: this.$transformEnterToBr(row.name),
335
+ transfer: true
336
+ }
337
+ }, [
338
+ h("span", {
339
+ domProps: {
340
+ innerHTML: this.$transformEnterToBr(row.name)
357
341
  }
358
- }, [
359
- h("span", {
360
- domProps: {
361
- innerHTML: this.$transformEnterToBr(row.name)
362
- }
363
- })
364
- ]),
365
-
366
- // 操作下拉
367
- this.getDropdownRender(h, "td", column, undefined, row, rowIndex)
368
- ]
369
- // 汇总单元格
370
- : h("span", this.getSummaryTdVal(column, row, rowIndex))
371
- ]);
372
- };
342
+ })
343
+ ]),
344
+
345
+ // 操作下拉
346
+ this.treeDropOperationRender(h, { row, rowIndex, column }, "td")
347
+ ]
348
+ // 汇总单元格
349
+ : h("span", this.getSummaryTdVal(row, rowIndex, column))
350
+ ]);
373
351
  },
374
352
  // 普通单元格渲染函数
375
- getTdRender (column, row, rowIndex) {
376
- return (h) => {
377
- return h(
378
- "td",
379
- {
380
- class: this.tablePropsObj.cellStyleOption.bodyCellClass({ row, rowIndex, column }),
381
- style: this.getTdStyle(column, row, rowIndex),
382
- on: {
383
- mouseenter: (event) => {
384
- this.$set(this.hoverRecordMap, `${row._id}dsh${column._key}`, true);
385
- },
386
- mouseleave: (event) => {
387
- this.$set(this.hoverRecordMap, `${row._id}dsh${column._key}`, false);
388
- }
353
+ contentTdRender (h, { row, rowIndex, column }) {
354
+ return h(
355
+ "td",
356
+ {
357
+ class: this.tablePropsObj.cellStyleOption.bodyCellClass({ row, rowIndex, column }),
358
+ style: this.getTdStyle(row, rowIndex, column),
359
+ on: {
360
+ mouseenter: (event) => {
361
+ this.$set(this.hoverRecordMap, `${row._id}dsh${column._key}`, true);
362
+ },
363
+ mouseleave: (event) => {
364
+ this.$set(this.hoverRecordMap, `${row._id}dsh${column._key}`, false);
389
365
  }
390
- },
391
- column
392
- ? column.renderBodyCell({ row, rowIndex, column }, h)
393
- : undefined
394
- );
395
- };
366
+ }
367
+ },
368
+ this.contentTdCellRender(h, { row, rowIndex, column })
369
+ );
396
370
  },
397
371
  // 下拉渲染函数
398
- getDropdownRender (h, position = "th", column, colIndex, row, rowIndex) {
372
+ treeDropOperationRender (h, { row, rowIndex, column, colIndex }, position = "th") {
399
373
  const list = this.$getOperationList(
400
374
  position === "th"
401
375
  ? [
402
376
  ...(column.level < this.maxLevel ? ["canCreateCol"] : []), // 限制最大添加到几级
403
377
  ...(column.level > 1 && column.canDelete === true ? ["canDeleteCol"] : []) // 只有一级和最后两级节点数不一致时，不能删
404
378
  ]
405
- : this.getRowIsDftDisabled(row)
406
- ? []
407
- : row.isLeaf === true
408
- ? ["canCreate", "canDelete"]
409
- : ["canCreate", "canCreateChild", "canDelete", "canDeleteChilds"]
379
+ : row.isLeaf === true
380
+ ? [
381
+ "canCreate",
382
+ ...(this.getRowBtnCanEdit(row, rowIndex) ? ["canDelete"] : [])
383
+ ]
384
+ : [
385
+ "canCreate",
386
+ "canCreateChild",
387
+ ...(this.getRowBtnCanEdit(row, rowIndex) ? ["canDelete", "canDeleteChilds"] : [])
388
+ ]
410
389
  );
411
390
 
412
391
  return !this.isSearching &&
@@ -490,22 +469,22 @@ export default {
490
469
  },
491
470
 
492
471
  // 单元格 -获取样式
493
- getTdStyle (col, row, rowIndex) {
472
+ getTdStyle (row, rowIndex, col) {
494
473
  return {
495
474
  ...this.getThStyle(col, "td"),
496
475
  backgroundColor: ["tree"].includes(col.colType) ? "#fbfbfb" : "#ffffff"
497
476
  };
498
477
  },
499
478
  // 单元格 -获取行合并数
500
- getTdRowSpan (col, row, rowIndex) {
479
+ getTdRowSpan (row, rowIndex, col) {
501
480
  return row.total || 1;
502
481
  },
503
482
  // 单元格 -获取列合并数
504
- getTdColSpan (col, row, rowIndex) {
483
+ getTdColSpan (row, rowIndex, col) {
505
484
  return 1;
506
485
  },
507
486
  // 单元格 -汇总节点单元格-获取值
508
- getSummaryTdVal (col, row, rowIndex) {
487
+ getSummaryTdVal (row, rowIndex, col) {
509
488
  if (col._calField && col._operator) {
510
489
  const calFieldFormItem = this.selfColumns.find(item => item._key === col._calField);
511
490
 
@@ -537,7 +516,7 @@ export default {
537
516
 
538
517
  /* ----------- 工具方法 ---------- */
539
518
  // 合并表头
540
- mergeColumns (treeForm = [], subForm = []) {
519
+ mergeColumns (treeForm = [], subForm = this.showContentColumns) {
541
520
  return treeForm
542
521
  .reduce((arr, treeFormItem, treeFormIndex) => {
543
522
  return arr.concat(
@@ -555,11 +534,7 @@ export default {
555
534
  );
556
535
  }, [])
557
536
  .concat(
558
- subForm.filter(subFormItem =>
559
- this.hideStatus === true
560
- ? !this.hideColKeys.includes(subFormItem._key)
561
- : true
562
- ).map(subFormItem => (
537
+ subForm.map(subFormItem => (
563
538
  {
564
539
  ...subFormItem,
565
540
  nodeKey: treeForm[treeForm.length - 1]._key,
@@ -640,14 +615,14 @@ export default {
640
615
  return nodes;
641
616
  },
642
617
  // 转化渲染使用的columns数组
643
- transformRowColumnsArr (nodes = [], treeForm = [], subForm = []) {
618
+ transformRowColumnsArr (nodes = [], treeForm = []) {
644
619
  let loop = (nodes, rowColumnsArr) => {
645
620
  nodes = this.getFilteredNodes(nodes);
646
621
 
647
622
  return nodes.reduce((rowColumnsArr, node, nodeIndex) => {
648
623
  if (nodeIndex !== 0 || rowColumnsArr.length === 0) {
649
624
  rowColumnsArr.push(
650
- this.mergeColumns(treeForm.slice(node.level - 1), subForm)
625
+ this.mergeColumns(treeForm.slice(node.level - 1))
651
626
  );
652
627
  }
653
628
 
@@ -695,15 +670,7 @@ export default {
695
670
  const children = loop(rowItem.children);
696
671
  return !!children.length;
697
672
  } else {
698
- const bool = this.$isAdvRelyAccord(this.finalTableAdvSearch, rowItem);
699
- // 重置
700
- rowItem.__isSearchShow__ = false;
701
- if (bool) {
702
- rowItem.__isRendered__ = true;
703
- rowItem.__isSearchShow__ = true;
704
- }
705
-
706
- return bool;
673
+ return this.dealSearchShow(rowItem);
707
674
  }
708
675
  });
709
676
  };