bri-components 1.3.57 → 1.3.61

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 (10) hide show
  1. package/package.json +1 -1
  2. package/src/components/controls/senior/cascaderTable.vue +49 -1
  3. package/src/components/form/searchMixin.js +14 -10
  4. package/src/components/list/BriTable.vue +1 -1
  5. package/src/components/list/DshCascaderTable.vue +202 -193
  6. package/src/components/list/DshFlatTable.vue +30 -43
  7. package/src/components/list/DshTreeTable.vue +12 -144
  8. package/src/components/list/common/{flatTableImportModal.vue → importModal.vue} +6 -6
  9. package/src/components/list/mixins/flatTableMixin.js +2 -5
  10. package/src/components/list/mixins/tableBaseMixin.js +194 -17
package/src/components/list/DshCascaderTable.vue CHANGED
@@ -3,26 +3,27 @@
3
3
  class="DshCasTable"
4
4
  ref="DshCascaderTable"
5
5
  >
6
- <!-- 操作按钮 -->
7
- <dsh-buttons
8
- class="DshCasTable-btns"
9
- itemClass="DshCasTable-btns-item"
10
- :list="$getOperationList(topOperationBtns)"
11
- @click="$dispatchEvent($event)"
12
- ></dsh-buttons>
6
+ <!-- 顶部 -->
7
+ <dsh-render :render="getTableTopRender()"></dsh-render>
8
+
9
+ <!-- 搜索条件 -->
10
+ <dsh-render
11
+ v-if="!this.isEnlarge"
12
+ :render="topSearchRender"
13
+ ></dsh-render>
13
14
 
14
15
  <!-- 表格 -->
15
- <div class="DshCasTable-wrap">
16
+ <div class="DshCasTable-main">
16
17
  <div
17
- class="DshCasTable-wrap-center"
18
+ class="DshCasTable-main-center"
18
19
  :style="{
19
20
  maxHeight: `${contentHeight}px`,
20
21
  height: `${contentHeight}px`
21
22
  }"
22
23
  >
23
24
  <!-- 表头 -->
24
- <div class="DshCasTable-wrap-center-top">
25
- <div class="DshCasTable-wrap-center-top-inner">
25
+ <div class="DshCasTable-main-center-top">
26
+ <div class="DshCasTable-main-center-top-inner">
26
27
  <table
27
28
  class="table"
28
29
  border="1"
@@ -70,8 +71,8 @@
70
71
  </div>
71
72
 
72
73
  <!-- 数据行 -->
73
- <div class="DshCasTable-wrap-center-list">
74
- <div class="DshCasTable-wrap-center-list-inner">
74
+ <div class="DshCasTable-main-center-list">
75
+ <div class="DshCasTable-main-center-list-inner">
75
76
  <table
76
77
  class="table"
77
78
  border="1"
@@ -79,9 +80,9 @@
79
80
  bordercolor="#E7EDF8"
80
81
  >
81
82
  <tbody>
82
- <template v-if="rows.length">
83
+ <template v-if="showListData.length">
83
84
  <tr
84
- v-for="(row, rowIndex) in rows"
85
+ v-for="(row, rowIndex) in showListData"
85
86
  :key="row._id"
86
87
  class="table-row"
87
88
  >
@@ -186,180 +187,189 @@
186
187
 
187
188
  <!-- 全屏查看 -->
188
189
  <dsh-modal
190
+ class="DshCasTable-fullscreen"
189
191
  v-model="isEnlarge"
190
192
  :mode="modalPropsObj.mode"
191
193
  :propsObj="modalPropsObj"
192
194
  >
193
195
  <div
194
196
  v-if="isEnlargeFlag"
195
- class="DshCasTable-wrap"
197
+ class="DshCasTable-fullscreen-inner"
196
198
  >
197
- <div
198
- class="DshCasTable-wrap-center"
199
- :style="{
200
- maxHeight: `${contentHeight}px`,
201
- height: `${contentHeight}px`
202
- }"
203
- >
204
- <!-- 表头 -->
205
- <div class="DshCasTable-wrap-center-top">
206
- <div class="DshCasTable-wrap-center-top-inner">
207
- <table
208
- class="table"
209
- border="1"
210
- cellspacing="0"
211
- bordercolor="#E7EDF8"
212
- >
213
- <tbody>
214
- <tr>
215
- <th
216
- v-for="(column, colIndex) in showColumns"
217
- :key="column._id"
218
- class="table-th bri-table-th"
219
- :style="getThStyle(column, 'th')"
220
- @click="$dispatchEvent(operationMap.clickTh, column)"
221
- >
222
- <dsh-render :render="getThRender(column)"></dsh-render>
199
+ <!-- 顶部 -->
200
+ <dsh-render :render="getTableTopRender(true)"></dsh-render>
201
+
202
+ <!-- 搜索条件 -->
203
+ <dsh-render :render="topSearchRender"></dsh-render>
204
+
205
+ <div class="DshCasTable-main">
206
+ <div
207
+ class="DshCasTable-main-center"
208
+ :style="{
209
+ maxHeight: `${contentHeight}px`,
210
+ height: `${contentHeight}px`
211
+ }"
212
+ >
213
+ <!-- 表头 -->
214
+ <div class="DshCasTable-main-center-top">
215
+ <div class="DshCasTable-main-center-top-inner">
216
+ <table
217
+ class="table"
218
+ border="1"
219
+ cellspacing="0"
220
+ bordercolor="#E7EDF8"
221
+ >
222
+ <tbody>
223
+ <tr>
224
+ <th
225
+ v-for="(column, colIndex) in showColumns"
226
+ :key="column._id"
227
+ class="table-th bri-table-th"
228
+ :style="getThStyle(column, 'th')"
229
+ @click="$dispatchEvent(operationMap.clickTh, column)"
230
+ >
231
+ <dsh-render :render="getThRender(column)"></dsh-render>
223
232
 
224
- <!-- 级联表头 的下拉 -->
225
- <dsh-dropdown
226
- v-if="
233
+ <!-- 级联表头 的下拉 -->
234
+ <dsh-dropdown
235
+ v-if="
227
236
  !isSearching &&
228
237
  column.colType === 'tree' &&
229
238
  column.level === treeColumns.length &&
230
239
  $getOperationList(getTreeThBtns(column)).length
231
240
  "
232
- class="table-th-dropdown"
233
- menuClass="table-th-dropdown-list"
234
- trigger="hover"
235
- :list="$getOperationList(getTreeThBtns(column))"
236
- @click="$dispatchEvent($event, column, colIndex, showColumns)"
237
- @click.native.stop="0"
238
- >
239
- <a href="javascript:void(0)">
240
- <Icon
241
- type="md-add-circle"
242
- size="20"
243
- />
244
- </a>
245
- </dsh-dropdown>
246
- </th>
247
- </tr>
248
- </tbody>
249
- </table>
241
+ class="table-th-dropdown"
242
+ menuClass="table-th-dropdown-list"
243
+ trigger="hover"
244
+ :list="$getOperationList(getTreeThBtns(column))"
245
+ @click="$dispatchEvent($event, column, colIndex, showColumns)"
246
+ @click.native.stop="0"
247
+ >
248
+ <a href="javascript:void(0)">
249
+ <Icon
250
+ type="md-add-circle"
251
+ size="20"
252
+ />
253
+ </a>
254
+ </dsh-dropdown>
255
+ </th>
256
+ </tr>
257
+ </tbody>
258
+ </table>
259
+ </div>
250
260
  </div>
251
- </div>
252
261
 
253
- <!-- 数据行 -->
254
- <div class="DshCasTable-wrap-center-list">
255
- <div class="DshCasTable-wrap-center-list-inner">
256
- <table
257
- class="table"
258
- border="1"
259
- cellspacing="0"
260
- bordercolor="#E7EDF8"
261
- >
262
- <tbody>
263
- <template v-if="rows.length">
264
- <tr
265
- v-for="(row, rowIndex) in rows"
266
- :key="row._id"
267
- class="table-row"
268
- >
269
- <template v-for="column in rowColumnsArr[rowIndex]">
270
- <!-- 树节点单元格、汇总单元格 -->
271
- <td
272
- v-if="['tree', 'summary'].includes(column.colType)"
273
- :key="column._key"
274
- :class="{
262
+ <!-- 数据行 -->
263
+ <div class="DshCasTable-main-center-list">
264
+ <div class="DshCasTable-main-center-list-inner">
265
+ <table
266
+ class="table"
267
+ border="1"
268
+ cellspacing="0"
269
+ bordercolor="#E7EDF8"
270
+ >
271
+ <tbody>
272
+ <template v-if="showListData.length">
273
+ <tr
274
+ v-for="(row, rowIndex) in showListData"
275
+ :key="row._id"
276
+ class="table-row"
277
+ >
278
+ <template v-for="column in rowColumnsArr[rowIndex]">
279
+ <!-- 树节点单元格、汇总单元格 -->
280
+ <td
281
+ v-if="['tree', 'summary'].includes(column.colType)"
282
+ :key="column._key"
283
+ :class="{
275
284
  [`table-td-${column.colType}`]: true,
276
285
  'bri-table-td': true , // 可以不要，为了position: relative，上面有
277
286
  'bri-table-td-edit': canEdit
278
287
  }"
279
- :style="getTdStyle(column, row[column.nodeKey])"
280
- :rowspan="getTdRowSpan(column, row[column.nodeKey || column._key])"
281
- :colspan="getTdColSpan(column, row[column.nodeKey])"
282
- @click="$dispatchEvent(operationMap.clickNode, column, row, row[column._key])"
283
- >
284
- <!-- 树节点单元格 -->
285
- <template v-if="column.colType === 'tree'">
286
- <!-- 编辑状态 -->
287
- <Input
288
- v-if="row[column._key].isEdit"
289
- :ref="`${column._id}${row._id}`"
290
- v-model="row[column._key].name"
291
- class="textarea"
292
- type="textarea"
293
- :autosize="{
288
+ :style="getTdStyle(column, row[column.nodeKey])"
289
+ :rowspan="getTdRowSpan(column, row[column.nodeKey || column._key])"
290
+ :colspan="getTdColSpan(column, row[column.nodeKey])"
291
+ @click="$dispatchEvent(operationMap.clickNode, column, row, row[column._key])"
292
+ >
293
+ <!-- 树节点单元格 -->
294
+ <template v-if="column.colType === 'tree'">
295
+ <!-- 编辑状态 -->
296
+ <Input
297
+ v-if="row[column._key].isEdit"
298
+ :ref="`${column._id}${row._id}`"
299
+ v-model="row[column._key].name"
300
+ class="textarea"
301
+ type="textarea"
302
+ :autosize="{
294
303
  minRows: getTdRowSpan(column, row[column.nodeKey || column._key]) * 3 - 1,
295
304
  maxRows: 100
296
305
  }"
297
- @on-blur="$dispatchEvent(operationMap.blurNode, column, row, row[column._key])"
298
- @on-change="$dispatchEvent(operationMap.changeNode, column, row, row[column._key])"
299
- />
300
-
301
- <!-- 查看状态 -->
302
- <template v-else>
303
- <bri-tooltip
304
- :content="enterText(row[column._key].name)"
305
- :transfer="true"
306
- >
307
- <span v-html="enterText(row[column._key].name)"></span>
308
- </bri-tooltip>
309
-
310
- <!-- 操作下拉 -->
311
- <dsh-dropdown
312
- v-if="!isSearching && $getOperationList(getTreeTdBtns(column, row, row[column._key])).length"
313
- class="table-td-tree-dropdown"
314
- menuClass="table-td-tree-dropdown-list"
315
- trigger="hover"
316
- :list="$getOperationList(getTreeTdBtns(column, row, row[column._key]))"
317
- @click="$dispatchEvent($event, row, rowIndex, column)"
318
- @click.native.stop="0"
319
- >
320
- <a href="javascript:void(0)">
321
- <Icon
322
- type="md-add-circle"
323
- size="20"
324
- />
325
- </a>
326
- </dsh-dropdown>
306
+ @on-blur="$dispatchEvent(operationMap.blurNode, column, row, row[column._key])"
307
+ @on-change="$dispatchEvent(operationMap.changeNode, column, row, row[column._key])"
308
+ />
309
+
310
+ <!-- 查看状态 -->
311
+ <template v-else>
312
+ <bri-tooltip
313
+ :content="enterText(row[column._key].name)"
314
+ :transfer="true"
315
+ >
316
+ <span v-html="enterText(row[column._key].name)"></span>
317
+ </bri-tooltip>
318
+
319
+ <!-- 操作下拉 -->
320
+ <dsh-dropdown
321
+ v-if="!isSearching && $getOperationList(getTreeTdBtns(column, row, row[column._key])).length"
322
+ class="table-td-tree-dropdown"
323
+ menuClass="table-td-tree-dropdown-list"
324
+ trigger="hover"
325
+ :list="$getOperationList(getTreeTdBtns(column, row, row[column._key]))"
326
+ @click="$dispatchEvent($event, row, rowIndex, column)"
327
+ @click.native.stop="0"
328
+ >
329
+ <a href="javascript:void(0)">
330
+ <Icon
331
+ type="md-add-circle"
332
+ size="20"
333
+ />
334
+ </a>
335
+ </dsh-dropdown>
336
+ </template>
327
337
  </template>
328
- </template>
329
338
 
330
- <!-- 汇总单元格 -->
331
- <template v-else-if="column.colType === 'summary'">
332
- <span>{{ getSummaryVal(column, row[column.nodeKey]) }}</span>
333
- </template>
334
- </td>
335
-
336
- <!-- 普通单元格 -->
337
- <dsh-render
338
- v-else
339
- :key="column._key + 'data'"
340
- :render="getTdRender(column, row, rowIndex)"
341
- ></dsh-render>
342
- </template>
343
- </tr>
344
- </template>
339
+ <!-- 汇总单元格 -->
340
+ <template v-else-if="column.colType === 'summary'">
341
+ <span>{{ getSummaryVal(column, row[column.nodeKey]) }}</span>
342
+ </template>
343
+ </td>
344
+
345
+ <!-- 普通单元格 -->
346
+ <dsh-render
347
+ v-else
348
+ :key="column._key + 'data'"
349
+ :render="getTdRender(column, row, rowIndex)"
350
+ ></dsh-render>
351
+ </template>
352
+ </tr>
353
+ </template>
345
354
 
346
- <!-- 无数据 -->
347
- <tr
348
- v-else
349
- class="table-nodata"
350
- >
351
- <td
352
- :style="{
355
+ <!-- 无数据 -->
356
+ <tr
357
+ v-else
358
+ class="table-nodata"
359
+ >
360
+ <td
361
+ :style="{
353
362
  width: `${boxWidth}px`,
354
363
  minWidth: `${boxWidth}px`,
355
364
  maxWidth: `${boxWidth}px`,
356
365
  }"
357
- :rowspan="1"
358
- :colspan="showColumns.length"
359
- >暂无数据…</td>
360
- </tr>
361
- </tbody>
362
- </table>
366
+ :rowspan="1"
367
+ :colspan="showColumns.length"
368
+ >暂无数据…</td>
369
+ </tr>
370
+ </tbody>
371
+ </table>
372
+ </div>
363
373
  </div>
364
374
  </div>
365
375
  </div>
@@ -490,26 +500,10 @@
490
500
  allTreeData () {
491
501
  return this.getCalcuedTree();
492
502
  },
493
- showAllTreeData () {
494
- const loop = (list = []) => {
495
- return list.filter(row => {
496
- if (row.children && row.children.length) {
497
- row.children = loop(row.children);
498
- return !!row.children.length;
499
- } else {
500
- return this.$isAdvRelyAccord(this.finalTableAdvSearch, row);
501
- }
502
- });
503
- };
504
-
505
- return this.isSearching
506
- ? loop(this.allTreeData)
507
- : this.allTreeData;
508
- },
509
503
  allListData () {
510
504
  return this.$getTreeFlatArr(this.data.tree, node => !(node.children && node.children.length));
511
505
  },
512
- rows () {
506
+ showListData () {
513
507
  return this.transformRows();
514
508
  },
515
509
 
@@ -526,8 +520,8 @@
526
520
  },
527
521
  mounted () {
528
522
  setTimeout(() => {
529
- this.$el.querySelector(".DshCasTable-wrap-center-list").addEventListener("scroll", (e) => {
530
- this.$el.querySelector(".DshCasTable-wrap-center-top").scrollLeft = e.srcElement.scrollLeft;
523
+ this.$el.querySelector(".DshCasTable-main-center-list").addEventListener("scroll", (e) => {
524
+ this.$el.querySelector(".DshCasTable-main-center-top").scrollLeft = e.srcElement.scrollLeft;
531
525
  }, false);
532
526
  this.boxWidth = this.$refs.DshCascaderTable.clientWidth;
533
527
  }, 0);
@@ -770,8 +764,10 @@
770
764
  return this.data.tree;
771
765
  },
772
766
  // 转化渲染使用的columns数组
773
- transformRowColumnsArr (nodes = this.showAllTreeData, treeForm = this.treeColumns) {
767
+ transformRowColumnsArr (nodes = this.allTreeData, treeForm = this.treeColumns) {
774
768
  let loop = (nodes, rowColumnsArr) => {
769
+ nodes = this.getFilteredNodes(nodes);
770
+
775
771
  return nodes.reduce((rowColumnsArr, node, nodeIndex) => {
776
772
  if (nodeIndex !== 0 || rowColumnsArr.length === 0) {
777
773
  rowColumnsArr.push(this.transformColumns(treeForm.slice(node.level - 1)));
@@ -784,11 +780,14 @@
784
780
  }
785
781
  }, rowColumnsArr);
786
782
  };
783
+
787
784
  return loop(nodes, []);
788
785
  },
789
786
  // 转化表格数据
790
- transformRows (nodes = this.showAllTreeData, treeForm = this.treeColumns) {
787
+ transformRows (nodes = this.allTreeData, treeForm = this.treeColumns) {
791
788
  const loop = (nodes, rows) => {
789
+ nodes = this.getFilteredNodes(nodes);
790
+
792
791
  return nodes.reduce((rows, node, nodeIndex) => {
793
792
  // 创建行，并把节点数据（对象类型）注入到行对象内
794
793
  if (nodeIndex !== 0 || rows.length === 0) {
@@ -811,6 +810,20 @@
811
810
  };
812
811
  return loop(nodes, []);
813
812
  },
813
+ getFilteredNodes (nodes) {
814
+ const loop = (nodes = []) => {
815
+ return nodes.filter(node => {
816
+ if (node.children && node.children.length) {
817
+ const children = loop(node.children);
818
+ return !!children.length;
819
+ } else {
820
+ return this.$isAdvRelyAccord(this.finalTableAdvSearch, node);
821
+ }
822
+ });
823
+ };
824
+
825
+ return loop(nodes);
826
+ },
814
827
 
815
828
  // 清除节点到叶子节点
816
829
  clearNodeToLeaf (list) {
@@ -843,7 +856,7 @@
843
856
  };
844
857
  } else {
845
858
  let parentCol = treeForm[col.level - 2];
846
- let loop = (row, rowIndex) => row[parentCol._key] || loop(this.rows[rowIndex - 1], rowIndex - 1);
859
+ let loop = (row, rowIndex) => row[parentCol._key] || loop(this.showListData[rowIndex - 1], rowIndex - 1);
847
860
  return loop(row, rowIndex);
848
861
  }
849
862
  },
@@ -981,17 +994,7 @@
981
994
  .DshCasTable {
982
995
  width: 100%;
983
996
 
984
- &-btns {
985
- margin-bottom: 3px;
986
- text-align: right;
987
- color: @textColor;
988
-
989
- &-item {
990
-
991
- }
992
- }
993
-
994
- &-wrap {
997
+ &-main {
995
998
  width: 100%;
996
999
 
997
1000
  &-center {
@@ -1086,5 +1089,11 @@
1086
1089
  }
1087
1090
  }
1088
1091
  }
1092
+
1093
+ &-fullscreen {
1094
+ &-inner {
1095
+ padding: 10px 20px;
1096
+ }
1097
+ }
1089
1098
  }
1090
1099
  </style>