bri-components 1.3.60 → 1.3.62

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bri-components",
3
- "version": "1.3.60",
3
+ "version": "1.3.62",
4
4
  "author": "dengshanghui",
5
5
  "description": "a component lib for vue project",
6
6
  "main": "src/index.js",
@@ -15,7 +15,7 @@
15
15
 
16
16
  <template v-else>
17
17
  <!-- 配置端 设置默认值用-->
18
- <dsh-btn-modal v-if="selfPropsObj._key === '_default'">
18
+ <dsh-btn-modal v-if="controlKey === '_default'">
19
19
  <template>
20
20
  <dsh-tree-table
21
21
  v-if="showMode === 'treeTable'"
@@ -105,6 +105,11 @@
105
105
  _showMode: "default", // "default", "treeTable"
106
106
  _subForm: [],
107
107
  _treeForm: [],
108
+ _searchList: [], // 作为搜索的字段
109
+ _tableAdvSearch: {
110
+ logic: "and",
111
+ conditions: []
112
+ },
108
113
  ...this.propsObj
109
114
  };
110
115
  },
@@ -169,14 +174,24 @@
169
174
  ]
170
175
  };
171
176
  },
177
+ isSearching () {
178
+ return this.$isAdvSearching(this.finalTableAdvSearch);
179
+ },
180
+
172
181
  showVal () {
173
182
  return `${
174
183
  this.curVal
175
- ? this.$getTreeFlatArr(this.curVal.tree, (row) => {
176
- return (this.showMode === "treeTable" ? true : row.isLeaf === true) &&
177
- this.$isAdvRelyAccord(this.finalTableAdvSearch, row);
178
- }).length
179
- // ? this.$getTreeLeafTotal(this.curVal.tree, this.showMode === "treeTable")
184
+ ? this.$getTreeFlatArr(this.curVal.tree, (row) =>
185
+ (
186
+ this.showMode === "treeTable"
187
+ ? true
188
+ : row.isLeaf === true
189
+ ) && (
190
+ this.isSearching
191
+ ? this.$isAdvRelyAccord(this.finalTableAdvSearch, row)
192
+ : true
193
+ )
194
+ ).length
180
195
  : 0
181
196
  } 行`;
182
197
  }
@@ -9,20 +9,20 @@
9
9
  customIcon: 'bico-internaltable'
10
10
  }]"></dsh-icons>
11
11
  <span class="flatTable-unit-text">
12
- {{ curVal.list.length }}
12
+ {{ showVal }}
13
13
  </span>
14
14
  </span>
15
15
 
16
16
  <!-- 编辑、查看(查看页内) -->
17
17
  <template v-else>
18
18
  <!-- 配置端 设置默认值用-->
19
- <dsh-btn-modal v-if="propsObj._key === '_default'">
19
+ <dsh-btn-modal v-if="controlKey === '_default'">
20
20
  <dsh-flat-table
21
21
  :canEdit="finalCanEdit"
22
22
  :data="curVal.list"
23
23
  :rowDefault="curVal.rowDefault"
24
24
  :columns="subForm"
25
- :propsObj="propsObj"
25
+ :propsObj="defaultPropsObj"
26
26
  :allFormList="allFormList"
27
27
  :parentObj="value"
28
28
  @change="change"
@@ -69,20 +69,80 @@
69
69
  selfPropsObj () {
70
70
  return {
71
71
  _subForm: [],
72
+ _searchList: [], // 作为搜索的字段
73
+ _tableAdvSearch: {
74
+ logic: "and",
75
+ conditions: []
76
+ },
72
77
  ...this.propsObj
73
78
  };
74
79
  },
80
+ defaultPropsObj () {
81
+ return {
82
+ ...this.selfPropsObj,
83
+ _tableAdvSearch: {
84
+ logic: "and",
85
+ conditions: []
86
+ }
87
+ };
88
+ },
75
89
  subForm () {
76
90
  return this.selfPropsObj._subForm;
77
91
  },
78
92
 
79
- curVal () {
80
- // TODO: 待定处理
81
- return this.value[this.controlKey] || {
82
- list: [],
83
- oldList: [],
84
- rowDefault: {}
93
+ searchList () {
94
+ return this.selfPropsObj._searchList || []; // 级联表切层级表时 值会undefined覆盖selfPropsObj默认的[]
95
+ },
96
+ searchListMap () {
97
+ return this.$arrToMap(this.searchList, "_key");
98
+ },
99
+ searchListFields () {
100
+ return this.searchList.map(searchItem => searchItem._key);
101
+ },
102
+ tableAdvSearch () {
103
+ return this.$transformAdvSearch(this.selfPropsObj._tableAdvSearch, this.allFormList, this.value);
104
+ },
105
+ dftAdvSearch () {
106
+ return {
107
+ logic: ["and", "or"].includes(this.tableAdvSearch.logic) ? this.tableAdvSearch.logic : "and",
108
+ conditions: this.tableAdvSearch.conditions.filter(conditionItem =>
109
+ this.searchListFields.includes(conditionItem.fieldKey)
110
+ )
85
111
  };
112
+ },
113
+ // 配置的默认筛选值里 隐藏的看不到的筛选条件
114
+ hideAdvSearch () {
115
+ return {
116
+ logic: ["and", "or"].includes(this.tableAdvSearch.logic) ? this.tableAdvSearch.logic : "and",
117
+ conditions: this.tableAdvSearch.conditions.filter(conditionItem =>
118
+ !this.searchListFields.includes(conditionItem.fieldKey)
119
+ )
120
+ };
121
+ },
122
+ // 过滤行数据的 最终的筛选条件
123
+ finalTableAdvSearch () {
124
+ return {
125
+ logic: "and",
126
+ conditions: [
127
+ this.hideAdvSearch,
128
+ this.dftAdvSearch
129
+ ]
130
+ };
131
+ },
132
+ isSearching () {
133
+ return this.$isAdvSearching(this.finalTableAdvSearch);
134
+ },
135
+
136
+ showVal () {
137
+ return `${
138
+ this.curVal
139
+ ? this.curVal.list.filter((row) =>
140
+ this.isSearching
141
+ ? this.$isAdvRelyAccord(this.finalTableAdvSearch, row)
142
+ : true
143
+ ).length
144
+ : 0
145
+ } 行`;
86
146
  }
87
147
  },
88
148
  created () {},
@@ -362,7 +362,7 @@ export default {
362
362
  ? loop(item[key])
363
363
  : item[key]
364
364
  : item[key]
365
- })), {});
365
+ })), {});
366
366
  };
367
367
 
368
368
  return loop(list);
@@ -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>
@@ -493,7 +503,7 @@
493
503
  allListData () {
494
504
  return this.$getTreeFlatArr(this.data.tree, node => !(node.children && node.children.length));
495
505
  },
496
- rows () {
506
+ showListData () {
497
507
  return this.transformRows();
498
508
  },
499
509
 
@@ -510,8 +520,8 @@
510
520
  },
511
521
  mounted () {
512
522
  setTimeout(() => {
513
- this.$el.querySelector(".DshCasTable-wrap-center-list").addEventListener("scroll", (e) => {
514
- 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;
515
525
  }, false);
516
526
  this.boxWidth = this.$refs.DshCascaderTable.clientWidth;
517
527
  }, 0);
@@ -846,7 +856,7 @@
846
856
  };
847
857
  } else {
848
858
  let parentCol = treeForm[col.level - 2];
849
- 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);
850
860
  return loop(row, rowIndex);
851
861
  }
852
862
  },
@@ -984,17 +994,7 @@
984
994
  .DshCasTable {
985
995
  width: 100%;
986
996
 
987
- &-btns {
988
- margin-bottom: 3px;
989
- text-align: right;
990
- color: @textColor;
991
-
992
- &-item {
993
-
994
- }
995
- }
996
-
997
- &-wrap {
997
+ &-main {
998
998
  width: 100%;
999
999
 
1000
1000
  &-center {
@@ -1089,5 +1089,11 @@
1089
1089
  }
1090
1090
  }
1091
1091
  }
1092
+
1093
+ &-fullscreen {
1094
+ &-inner {
1095
+ padding: 10px 20px;
1096
+ }
1097
+ }
1092
1098
  }
1093
1099
  </style>