bri-components 1.3.60 → 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 (7) hide show
  1. package/package.json +1 -1
  2. package/src/components/list/DshCascaderTable.vue +181 -175
  3. package/src/components/list/DshFlatTable.vue +30 -43
  4. package/src/components/list/DshTreeTable.vue +12 -144
  5. package/src/components/list/common/{flatTableImportModal.vue → importModal.vue} +6 -6
  6. package/src/components/list/mixins/flatTableMixin.js +2 -5
  7. package/src/components/list/mixins/tableBaseMixin.js +193 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bri-components",
3
- "version": "1.3.60",
3
+ "version": "1.3.61",
4
4
  "author": "dengshanghui",
5
5
  "description": "a component lib for vue project",
6
6
  "main": "src/index.js",
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>
@@ -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>
package/src/components/list/DshFlatTable.vue CHANGED
@@ -1,12 +1,13 @@
1
1
  <template>
2
2
  <div class="DshFlatTable">
3
- <!-- 操作按钮 -->
4
- <dsh-buttons
5
- class="DshFlatTable-btns"
6
- itemClass="DshFlatTable-btns-item"
7
- :list="$getOperationList(topOperationBtns)"
8
- @click="$dispatchEvent($event)"
9
- ></dsh-buttons>
3
+ <!-- 顶部 -->
4
+ <dsh-render :render="getTableTopRender()"></dsh-render>
5
+
6
+ <!-- 搜索条件 -->
7
+ <dsh-render
8
+ v-if="!this.isEnlarge"
9
+ :render="topSearchRender"
10
+ ></dsh-render>
10
11
 
11
12
  <!-- 表格 -->
12
13
  <bri-table
@@ -20,19 +21,25 @@
20
21
  ></bri-table>
21
22
 
22
23
  <!-- 添加行 -->
23
- <dsh-buttons
24
- class="DshFlatTable-create"
25
- :list="$getOperationList(['canCreate'])"
26
- @click="$dispatchEvent($event, null, null, allListData)"
27
- ></dsh-buttons>
24
+ <dsh-render :render="createOperationRender"></dsh-render>
28
25
 
29
- <!-- 全屏查看 -->
26
+ <!-- 全屏模式 -->
30
27
  <dsh-modal
28
+ class="DshFlatTable-fullscreen"
31
29
  v-model="isEnlarge"
32
30
  :mode="modalPropsObj.mode"
33
31
  :propsObj="modalPropsObj"
34
32
  >
35
- <template v-if="isEnlargeFlag">
33
+ <div
34
+ v-if="isEnlargeFlag"
35
+ class="DshFlatTable-fullscreen-inner"
36
+ >
37
+ <!-- 顶部 -->
38
+ <dsh-render :render="getTableTopRender(true)"></dsh-render>
39
+
40
+ <!-- 搜索条件 -->
41
+ <dsh-render :render="topSearchRender"></dsh-render>
42
+
36
43
  <!-- 表格 -->
37
44
  <bri-table
38
45
  class="DshFlatTable-main"
@@ -45,29 +52,18 @@
45
52
  ></bri-table>
46
53
 
47
54
  <!-- 添加行 -->
48
- <dsh-buttons
49
- class="DshFlatTable-create"
50
- :list="$getOperationList(['canCreate'])"
51
- @click="$dispatchEvent($event, null, null, allListData)"
52
- ></dsh-buttons>
53
- </template>
55
+ <dsh-render :render="createOperationRender"></dsh-render>
56
+ </div>
54
57
  </dsh-modal>
55
58
 
56
- <!-- 导入模态框 -->
57
- <flat-table-import-modal
58
- v-if="showImportModal"
59
- v-model="showImportModal"
60
- :propsObj="propsObj"
61
- :importParams="importParams"
62
- @importCb="importCb"
63
- ></flat-table-import-modal>
59
+ <!-- 各种模态框共用 -->
60
+ <dsh-render :render="dshRender"></dsh-render>
64
61
  </div>
65
62
  </template>
66
63
 
67
64
  <script>
68
65
  import tableBaseMixin from "./mixins/tableBaseMixin.js";
69
66
  import flatTableMixin from "./mixins/flatTableMixin.js";
70
- import flatTableImportModal from "./common/flatTableImportModal.vue";
71
67
 
72
68
  export default {
73
69
  name: "DshFlatTable",
@@ -75,9 +71,7 @@
75
71
  tableBaseMixin,
76
72
  flatTableMixin
77
73
  ],
78
- components: {
79
- flatTableImportModal
80
- },
74
+ components: {},
81
75
  props: {},
82
76
  data () {
83
77
  return {};
@@ -90,23 +84,16 @@
90
84
 
91
85
  <style lang="less" scoped>
92
86
  .DshFlatTable {
93
- &-btns {
94
- margin-bottom: 3px;
95
- text-align: right;
96
- color: @textColor;
97
-
98
- &-item {
99
-
100
- }
101
- }
102
87
 
103
88
  &-main {
104
89
  width: 100%;
105
90
  height: auto;
106
91
  }
107
92
 
108
- &-create {
109
- margin-top: 3px;
93
+ &-fullscreen {
94
+ &-inner {
95
+ padding: 10px 20px;
96
+ }
110
97
  }
111
98
  }
112
99
  </style>
package/src/components/list/DshTreeTable.vue CHANGED
@@ -1,38 +1,13 @@
1
1
  <template>
2
2
  <div class="DshTreeTable">
3
- <div class="DshTreeTable-top">
4
- <div class="DshTreeTable-top-status">
5
- <span class="summary">{{ rowsNumStr }};</span>
6
-
7
- <div
8
- v-if="searchFormList.length"
9
- class="logic"
10
- >
11
- <div class="logic-title">{{ selfLogicPropsObj._name }}:</div>
12
- <dsh-select
13
- class="logic-option"
14
- :value="dftAdvSearch"
15
- :propsObj="selfLogicPropsObj"
16
- ></dsh-select>
17
- </div>
18
- </div>
19
-
20
- <dsh-buttons
21
- class="DshTreeTable-top-btns"
22
- itemClass="DshTreeTable-top-btns-item"
23
- :list="$getOperationList(topOperationBtns)"
24
- @click="$dispatchEvent($event)"
25
- ></dsh-buttons>
26
- </div>
3
+ <!-- 顶部 -->
4
+ <dsh-render :render="getTableTopRender()"></dsh-render>
27
5
 
28
6
  <!-- 搜索条件 -->
29
- <dsh-default-search
30
- v-if="searchFormList.length && !isEnlarge"
31
- :formList="searchFormList"
32
- :initValue="dftAdvSearch.conditions"
33
- :labelWidth="searchLabelWidth"
34
- @change="searchCb"
35
- ></dsh-default-search>
7
+ <dsh-render
8
+ v-if="!this.isEnlarge"
9
+ :render="topSearchRender"
10
+ ></dsh-render>
36
11
 
37
12
  <!-- 表格 -->
38
13
  <bri-table
@@ -46,12 +21,7 @@
46
21
  ></bri-table>
47
22
 
48
23
  <!-- 添加行 -->
49
- <dsh-buttons
50
- v-if="!isSearching"
51
- class="DshTreeTable-create"
52
- :list="$getOperationList(['canCreate'])"
53
- @click="$dispatchEvent($event)"
54
- ></dsh-buttons>
24
+ <dsh-render :render="createOperationRender"></dsh-render>
55
25
 
56
26
  <!-- 全屏模式 -->
57
27
  <dsh-modal
@@ -64,33 +34,11 @@
64
34
  v-if="isEnlargeFlag"
65
35
  class="DshTreeTable-fullscreen-inner"
66
36
  >
67
- <div class="DshTreeTable-top">
68
- <div class="DshTreeTable-top-status">
69
- <span class="summary">{{ rowsNumStr }};</span>
70
-
71
- <div
72
- v-if="searchFormList.length"
73
- class="logic"
74
- >
75
- <div class="logic-title">{{ selfLogicPropsObj._name }}:</div>
76
- <dsh-select
77
- class="logic-option"
78
- :value="dftAdvSearch"
79
- :propsObj="selfLogicPropsObj"
80
- ></dsh-select>
81
- </div>
82
- </div>
83
- </div>
37
+ <!-- 顶部 -->
38
+ <dsh-render :render="getTableTopRender(true)"></dsh-render>
84
39
 
85
40
  <!-- 搜索条件 -->
86
- <template v-if="searchFormList.length">
87
- <dsh-default-search
88
- :formList="searchFormList"
89
- :initValue="dftAdvSearch.conditions"
90
- :labelWidth="searchLabelWidth"
91
- @change="searchCb"
92
- ></dsh-default-search>
93
- </template>
41
+ <dsh-render :render="topSearchRender"></dsh-render>
94
42
 
95
43
  <!-- 表格 -->
96
44
  <bri-table
@@ -104,11 +52,7 @@
104
52
  ></bri-table>
105
53
 
106
54
  <!-- 添加行 -->
107
- <dsh-buttons
108
- class="DshTreeTable-create"
109
- :list="$getOperationList(['canCreate'])"
110
- @click="$dispatchEvent($event)"
111
- ></dsh-buttons>
55
+ <dsh-render :render="createOperationRender"></dsh-render>
112
56
  </div>
113
57
  </dsh-modal>
114
58
 
@@ -153,39 +97,9 @@
153
97
  return this.getCalcuedTree(this.data, this.columns);
154
98
  },
155
99
  allListData () {
100
+ console.log("allListData");
156
101
  return this.$getTreeFlatArr(this.allTreeData);
157
102
  },
158
- renderedListData () {
159
- return this.allListData.filter(row => {
160
- if (this.isSearching) {
161
- const bool = this.$isAdvRelyAccord(this.finalTableAdvSearch, row);
162
-
163
- // 重置
164
- row.__isSearchShow__ = false;
165
- if (bool) {
166
- row.__isRendered__ = true;
167
- row.__isSearchShow__ = true;
168
- }
169
-
170
- return bool || row.__isRendered__;
171
- } else {
172
- return row.__isRendered__;
173
- }
174
- });
175
- },
176
- showListData () {
177
- return this.renderedListData.filter(row =>
178
- this.isSearching ? !!row.__isSearchShow__ : !!row.__isShow__
179
- );
180
- },
181
- rowsNum () {
182
- return this.isSearching
183
- ? this.showListData.length
184
- : this.allListData.length;
185
- },
186
- rowsNumStr () {
187
- return `当前范围“${this.isSearching ? "筛选" : "全部"}”, 共 ${this.rowsNum} 行`;
188
- },
189
103
  footerData () {
190
104
  console.log("footerData");
191
105
  return this.isSearching
@@ -576,58 +490,12 @@
576
490
 
577
491
  <style lang="less" scoped>
578
492
  .DshTreeTable {
579
- &-top {
580
- margin-bottom: 3px;
581
- display: flex;
582
- flex-direction: row;
583
- justify-content: space-between;
584
- align-items: center;
585
-
586
- &-status {
587
- display: flex;
588
- flex-direction: row;
589
- align-items: center;
590
-
591
- .summary {
592
- font-weight: 500;
593
- }
594
-
595
- .logic {
596
- display: flex;
597
- flex-direction: row;
598
- align-items: center;
599
- margin-left: 16px;
600
-
601
- &-title {
602
-
603
- }
604
-
605
- &-option {
606
- margin-left: 8px;
607
- margin-top: -4px;
608
- }
609
- }
610
- }
611
-
612
- &-btns {
613
- text-align: right;
614
- color: @textColor;
615
-
616
- &-item {
617
-
618
- }
619
- }
620
- }
621
493
 
622
494
  &-main {
623
495
  width: 100%;
624
496
  height: auto;
625
497
  }
626
498
 
627
- &-create {
628
- margin-top: 3px;
629
- }
630
-
631
499
  &-fullscreen {
632
500
  &-inner {
633
501
  padding: 10px 20px;
package/src/components/list/common/{flatTableImportModal.vue → importModal.vue} RENAMED
@@ -1,7 +1,7 @@
1
1
  <template>
2
- <div class="flatTableImportModal">
2
+ <div class="importModal">
3
3
  <dsh-modal
4
- class="flatTableImportModal-modal"
4
+ class="importModal-modal"
5
5
  v-model="showModal"
6
6
  :mode="modalPropsObj.mode"
7
7
  :propsObj="modalPropsObj"
@@ -34,10 +34,10 @@
34
34
  </Upload>
35
35
 
36
36
  <div v-if="file !== null">
37
- <div class="flatTableImportModal-file">
37
+ <div class="importModal-file">
38
38
  <span>文件名称: {{ file.name }}</span>
39
39
  <Icon
40
- class="flatTableImportModal-file-cancel"
40
+ class="importModal-file-cancel"
41
41
  type="ios-close"
42
42
  @click="cacelUpload"
43
43
  />
@@ -75,7 +75,7 @@
75
75
 
76
76
  <script>
77
77
  export default {
78
- name: "flatTableImportModal",
78
+ name: "importModal",
79
79
  props: {
80
80
  value: {
81
81
  type: Boolean,
@@ -237,7 +237,7 @@
237
237
  </script>
238
238
 
239
239
  <style lang="less">
240
- .flatTableImportModal {
240
+ .importModal {
241
241
 
242
242
  }
243
243
  </style>
package/src/components/list/mixins/flatTableMixin.js CHANGED
@@ -9,10 +9,6 @@ export default {
9
9
  }
10
10
  }
11
11
  },
12
- model: {
13
- prop: "data",
14
- event: "change"
15
- },
16
12
  data () {
17
13
  return {};
18
14
  },
@@ -121,7 +117,8 @@ export default {
121
117
  created () { },
122
118
  methods: {
123
119
  // 点击 -添加行
124
- clickCreate (operationItem, row, rowIndex, list) {
120
+ clickCreate (operationItem, row, rowIndex) {
121
+ const list = this.allListData;
125
122
  const newRow = {
126
123
  ...this.$deepCopy(this.selfRowDefault),
127
124
  _id: this.$ObjectID().str
package/src/components/list/mixins/tableBaseMixin.js CHANGED
@@ -1,10 +1,12 @@
1
1
  import DshListUnit from "../../unit/DshListUnit.vue";
2
+ import importModal from "../common/importModal.vue";
2
3
  import quoteListModal from "../common/quoteListModal.vue";
3
4
 
4
5
  export default {
5
6
  mixins: [],
6
7
  components: {
7
8
  DshListUnit,
9
+ importModal,
8
10
  quoteListModal
9
11
  },
10
12
  props: {
@@ -298,7 +300,42 @@ export default {
298
300
  isSearching () {
299
301
  return this.$isAdvSearching(this.finalTableAdvSearch);
300
302
  },
303
+ rowsNum () {
304
+ return this.showListData.length;
305
+ },
306
+ rowsNumStr () {
307
+ return `当前“${this.isSearching ? "筛选" : "全部"}”范围, 共 ${this.rowsNum} 行`;
308
+ },
309
+
310
+ showListData () {
311
+ console.log("showListData");
312
+ return this.allListData.filter(row => {
313
+ if (this.isSearching) {
314
+ const bool = this.$isAdvRelyAccord(this.finalTableAdvSearch, row);
315
+
316
+ // 重置
317
+ row.__isSearchShow__ = false;
318
+ if (bool) {
319
+ row.__isRendered__ = true;
320
+ row.__isSearchShow__ = true;
321
+ }
301
322
 
323
+ return bool;
324
+ } else {
325
+ return true;
326
+ }
327
+ });
328
+ },
329
+ renderedListData () {
330
+ console.log("renderedListData");
331
+ return this.allListData.filter(row =>
332
+ row.__isRendered__ || (
333
+ this.isSearching
334
+ ? this.$isAdvRelyAccord(this.finalTableAdvSearch, row)
335
+ : false
336
+ )
337
+ );
338
+ },
302
339
  parentDataId () {
303
340
  return this.parentObj._id;
304
341
  },
@@ -347,7 +384,11 @@ export default {
347
384
  quoteParams () {
348
385
  return {
349
386
  screenKey: this.allScreenKey,
350
- fields: [...this.quoteListFields, this.controlKey, "createdAt"],
387
+ fields: [
388
+ ...this.quoteListFields,
389
+ this.controlKey,
390
+ "createdAt"
391
+ ],
351
392
  advSearch: {
352
393
  logic: "and",
353
394
  conditions: [
@@ -369,6 +410,7 @@ export default {
369
410
  },
370
411
 
371
412
  filterColumns () {
413
+ console.log("filterColumns");
372
414
  return this.columns.filter(col => this.$isAdvRelyShow(col, this.allListData, this.parentObj, true));
373
415
  },
374
416
  contentColumns () {
@@ -534,24 +576,17 @@ export default {
534
576
  this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
535
577
  this.change("changeVal", col, row, rowIndex, ...params);
536
578
  },
537
- // 点击引用
538
- clickQuote () {
539
- this.dshRenderName = "quoteModalRender";
540
- this.showQuoteModal = true;
541
- },
542
- // 点击导入
543
- clickImport () {
544
- this.showImportModal = true;
545
- },
546
- // 点击导出
547
- clickExport (operationItem) {
548
- this.handleExport(operationItem);
549
- },
550
579
  // 打开全屏模态框
551
580
  clickEnlarge (operationItem) {
552
581
  this.isEnlarge = true;
553
582
  },
554
583
 
584
+ /* ----------- 引用 ---------- */
585
+ // 点击引用
586
+ clickQuote () {
587
+ this.dshRenderName = "quoteModalRender";
588
+ this.showQuoteModal = true;
589
+ },
555
590
  // 引用模态框渲染函数
556
591
  quoteModalRender (h, params) {
557
592
  return this.showQuoteModal
@@ -591,7 +626,7 @@ export default {
591
626
  const loop = (list = []) =>
592
627
  list.map(item => ({
593
628
  ...item,
594
- children: item.children && item.children.length ? loop(item.children) : item.children,
629
+ children: item.children ? loop(item.children) : item.children,
595
630
  __isQuote__: true
596
631
  }));
597
632
 
@@ -626,11 +661,42 @@ export default {
626
661
  this.$Message.error("未选择引用数据！");
627
662
  }
628
663
  },
664
+
665
+ /* ----------- 导入 ---------- */
666
+ // 点击导入
667
+ clickImport () {
668
+ this.dshRenderName = "importModalRender";
669
+ this.showImportModal = true;
670
+ },
671
+ // 导入模态框渲染函数
672
+ importModalRender (h, params) {
673
+ return this.showImportModal
674
+ ? h("import-modal", {
675
+ props: {
676
+ value: this.showImportModal,
677
+ propsObj: this.propsObj,
678
+ listParams: this.importParams
679
+ },
680
+ on: {
681
+ input: bool => {
682
+ this.showImportModal = bool;
683
+ },
684
+ importCb: this.importCb
685
+ }
686
+ })
687
+ : undefined;
688
+ },
629
689
  // 导入回调
630
690
  importCb (dataObj) {
631
691
  this.parentObj[this.controlKey] = dataObj;
632
692
  this.change("import");
633
693
  },
694
+
695
+ /* ----------- 导出 ---------- */
696
+ // 点击导出
697
+ clickExport (operationItem) {
698
+ this.handleExport(operationItem);
699
+ },
634
700
  // 接口 -导出
635
701
  handleExport (operationItem) {
636
702
  operationItem.disabled = true;
@@ -682,7 +748,118 @@ export default {
682
748
  });
683
749
  },
684
750
 
685
- /* --------------- 工具方法 ------------- */
751
+ /* ----------- 渲染函数 ---------- */
752
+ getTableTopRender (isEnlarge = false) {
753
+ return (h, params) => {
754
+ return h("div", {
755
+ style: {
756
+ "margin-bottom": "3px",
757
+ "display": "flex",
758
+ "flex-direction": "row",
759
+ "justify-content": "space-between",
760
+ "align-items": "center"
761
+ }
762
+ }, [
763
+ // 左 -统计，逻辑
764
+ this.topSummaryRender(h, params),
765
+
766
+ // 右 -功能按钮
767
+ isEnlarge ? undefined : this.topOperationRender(h, params)
768
+ ]);
769
+ };
770
+ },
771
+ topSearchRender (h, params) {
772
+ return this.searchFormList.length
773
+ ? h("dsh-default-search", {
774
+ props: {
775
+ formList: this.searchFormList,
776
+ initValue: this.dftAdvSearch.conditions,
777
+ labelWidth: this.searchLabelWidth
778
+ },
779
+ on: {
780
+ change: this.searchCb
781
+ }
782
+ })
783
+ : undefined;
784
+ },
785
+ topSummaryRender (h, params) {
786
+ return h("div", {
787
+ style: {
788
+ "display": "flex",
789
+ "flex-direction": "row",
790
+ "align-items": "center"
791
+ }
792
+ }, [
793
+ h("span", {
794
+ style: {
795
+ "font-weight": "500"
796
+ }
797
+ }, this.rowsNumStr + ";"),
798
+
799
+ this.searchFormList.length
800
+ ? h("div", {
801
+ style: {
802
+ "display": "flex",
803
+ "flex-direction": "row",
804
+ "align-items": "center",
805
+ "margin-left": "16px"
806
+ }
807
+ }, [
808
+ h("div", {
809
+ style: {
810
+ "font-weight": "500"
811
+ }
812
+ }, this.selfLogicPropsObj._name + "："),
813
+ h("dsh-select", {
814
+ style: {
815
+ "margin-left": "8px",
816
+ "margin-top": "-4px"
817
+ },
818
+ props: {
819
+ value: this.dftAdvSearch,
820
+ propsObj: this.selfLogicPropsObj
821
+ }
822
+ })
823
+ ])
824
+ : undefined
825
+ ]);
826
+ },
827
+ topOperationRender (h, params) {
828
+ return h("dsh-buttons", {
829
+ style: {
830
+ "text-align": "right"
831
+ },
832
+ props: {
833
+ itemClass: undefined,
834
+ list: this.$getOperationList(this.topOperationBtns)
835
+ },
836
+ on: {
837
+ click: (event) => {
838
+ this.$dispatchEvent(event);
839
+ }
840
+ }
841
+ });
842
+ },
843
+ createOperationRender (h, params) {
844
+ return !this.isSearching
845
+ ? h("dsh-buttons", {
846
+ style: {
847
+ "margin-top": "3px"
848
+ },
849
+ props: {
850
+ itemClass: undefined,
851
+ list: this.$getOperationList(["canCreate"])
852
+ },
853
+ on: {
854
+ click: (event) => {
855
+ this.$dispatchEvent(event);
856
+ }
857
+ }
858
+ })
859
+ : undefined;
860
+ },
861
+
862
+ /* ----------- 工具方法 ---------- */
686
863
  resetCol (col, row) {
687
864
  let resetMap = {
688
865
  select: {