bri-components 1.4.79 → 1.4.81
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 +1 -1
- package/src/components/list/BriTable.vue +20 -13
- package/src/components/list/DshCascaderTable.vue +20 -66
- package/src/components/list/DshFlatTable.vue +2 -0
- package/src/components/list/mixins/DshCascaderTableMixin.js +130 -324
- package/src/components/list/mixins/DshFlatTableMixin.js +10 -4
- package/src/components/list/mixins/DshTreeTableMixin.js +0 -1
- package/src/components/list/mixins/tableBaseMixin.js +19 -26
package/package.json
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
:cellStyleOption="cellStyleOption"
|
|
22
22
|
:rowStyleOption="rowStyleOption"
|
|
23
23
|
:expandOption="selfPropsObj.expandOption"
|
|
24
|
-
:checkbox-option="
|
|
24
|
+
:checkbox-option="selfCheckboxOption"
|
|
25
25
|
:radioOption="selfPropsObj.radioOption"
|
|
26
26
|
:sortOption="sortOption"
|
|
27
27
|
:cellSelectionOption="selfPropsObj.cellSelectionOption"
|
|
@@ -50,25 +50,31 @@
|
|
|
50
50
|
export default {
|
|
51
51
|
name: "BriTable",
|
|
52
52
|
props: {
|
|
53
|
+
isLoading: Boolean,
|
|
54
|
+
data: Array,
|
|
55
|
+
footerData: Array,
|
|
56
|
+
columns: Array,
|
|
57
|
+
|
|
58
|
+
noDataText: {
|
|
59
|
+
type: String,
|
|
60
|
+
default: "暂无数据…"
|
|
61
|
+
},
|
|
53
62
|
propsObj: {
|
|
54
63
|
type: Object,
|
|
55
64
|
default () {
|
|
56
65
|
return {};
|
|
57
66
|
}
|
|
58
67
|
},
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
data: Array,
|
|
66
|
-
footerData: Array
|
|
68
|
+
checkboxOption: {
|
|
69
|
+
type: Object,
|
|
70
|
+
default () {
|
|
71
|
+
return {};
|
|
72
|
+
}
|
|
73
|
+
}
|
|
67
74
|
},
|
|
68
75
|
data () {
|
|
69
76
|
// 中文文档https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/api
|
|
70
|
-
return {
|
|
71
|
-
};
|
|
77
|
+
return { };
|
|
72
78
|
},
|
|
73
79
|
computed: {
|
|
74
80
|
selfPropsObj () {
|
|
@@ -138,7 +144,7 @@
|
|
|
138
144
|
};
|
|
139
145
|
},
|
|
140
146
|
// 全选配置项
|
|
141
|
-
|
|
147
|
+
selfCheckboxOption () {
|
|
142
148
|
return {
|
|
143
149
|
// 行选择改变事件
|
|
144
150
|
selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
|
|
@@ -156,7 +162,8 @@
|
|
|
156
162
|
{ isSelected, selectedRowKeys }
|
|
157
163
|
);
|
|
158
164
|
},
|
|
159
|
-
...(this.propsObj.checkboxOption || {})
|
|
165
|
+
...(this.propsObj.checkboxOption || {}),
|
|
166
|
+
...this.checkboxOption
|
|
160
167
|
};
|
|
161
168
|
},
|
|
162
169
|
// 列宽改变设置项
|
|
@@ -13,21 +13,15 @@
|
|
|
13
13
|
></dsh-render>
|
|
14
14
|
|
|
15
15
|
<!-- 表格 -->
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<dsh-render :render="tableHeadRender"></dsh-render>
|
|
26
|
-
|
|
27
|
-
<!-- 数据行 -->
|
|
28
|
-
<dsh-render :render="tableBodyRender"></dsh-render>
|
|
29
|
-
</div>
|
|
30
|
-
</div>
|
|
16
|
+
<bri-table
|
|
17
|
+
class="DshCasTable-main"
|
|
18
|
+
:isLoading="isLoading"
|
|
19
|
+
:columns="showColumns"
|
|
20
|
+
:data="isLoading ? [] : showListData"
|
|
21
|
+
:propsObj="tablePropsObj"
|
|
22
|
+
@changeSelect="changeSelect"
|
|
23
|
+
@selectAll="changeSelect"
|
|
24
|
+
></bri-table>
|
|
31
25
|
|
|
32
26
|
<!-- 添加行 -->
|
|
33
27
|
<dsh-render :render="createBtnRender"></dsh-render>
|
|
@@ -53,15 +47,16 @@
|
|
|
53
47
|
<!-- 搜索条件 -->
|
|
54
48
|
<dsh-render :render="topSearchRender"></dsh-render>
|
|
55
49
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
50
|
+
<!-- 表格 -->
|
|
51
|
+
<bri-table
|
|
52
|
+
class="DshCasTable-fullscreen-inner-main"
|
|
53
|
+
:isLoading="isLoading"
|
|
54
|
+
:columns="showColumns"
|
|
55
|
+
:data="isLoading ? [] : showListData"
|
|
56
|
+
:propsObj="tablePropsObj"
|
|
57
|
+
@changeSelect="changeSelect"
|
|
58
|
+
@selectAll="changeSelect"
|
|
59
|
+
></bri-table>
|
|
65
60
|
|
|
66
61
|
<!-- 添加行 -->
|
|
67
62
|
<dsh-render :render="createBtnRender"></dsh-render>
|
|
@@ -99,48 +94,7 @@
|
|
|
99
94
|
|
|
100
95
|
&-main {
|
|
101
96
|
width: 100%;
|
|
102
|
-
|
|
103
|
-
&-center {
|
|
104
|
-
width: 100%;
|
|
105
|
-
height: 100%;
|
|
106
|
-
margin-left: 0px;
|
|
107
|
-
margin-right: 0px;
|
|
108
|
-
display: flex;
|
|
109
|
-
flex-direction: column;
|
|
110
|
-
|
|
111
|
-
.table {
|
|
112
|
-
border-spacing: 0;
|
|
113
|
-
border-collapse: collapse;
|
|
114
|
-
border-color: #E5E5E5;
|
|
115
|
-
line-height: 18px;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
// 头部
|
|
119
|
-
&-top {
|
|
120
|
-
width: 100%;
|
|
121
|
-
z-index: 99;
|
|
122
|
-
overflow: hidden;
|
|
123
|
-
|
|
124
|
-
&-inner {
|
|
125
|
-
display: block;
|
|
126
|
-
float: left;
|
|
127
|
-
width: 10000px;
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
// 主体
|
|
132
|
-
&-list {
|
|
133
|
-
width: 100%;
|
|
134
|
-
flex: 1;
|
|
135
|
-
min-height: 0px;
|
|
136
|
-
margin-top: -1px;
|
|
137
|
-
overflow: auto;
|
|
138
|
-
|
|
139
|
-
&-inner {
|
|
140
|
-
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
}
|
|
97
|
+
height: auto;
|
|
144
98
|
}
|
|
145
99
|
|
|
146
100
|
&-fullscreen {
|
|
@@ -58,6 +58,7 @@
|
|
|
58
58
|
:data="isLoading ? [] : selfShowListData"
|
|
59
59
|
:footer-data="footerData"
|
|
60
60
|
:propsObj="tablePropsObj"
|
|
61
|
+
:checkboxOption="checkboxOption"
|
|
61
62
|
@changeSelect="changeSelect"
|
|
62
63
|
@selectAll="changeSelect"
|
|
63
64
|
></bri-table>
|
|
@@ -167,6 +168,7 @@
|
|
|
167
168
|
:data="isLoading ? [] : selfShowListData"
|
|
168
169
|
:footer-data="footerData"
|
|
169
170
|
:propsObj="tableInModalPropsObj"
|
|
171
|
+
:checkboxOption="checkboxOption"
|
|
170
172
|
@changeSelect="changeSelect"
|
|
171
173
|
@selectAll="changeSelect"
|
|
172
174
|
></bri-table>
|
|
@@ -10,9 +10,7 @@ export default {
|
|
|
10
10
|
}
|
|
11
11
|
},
|
|
12
12
|
data () {
|
|
13
|
-
return {
|
|
14
|
-
boxWidth: 0
|
|
15
|
-
};
|
|
13
|
+
return {};
|
|
16
14
|
},
|
|
17
15
|
computed: {
|
|
18
16
|
selfBasePropsObj () {
|
|
@@ -28,14 +26,20 @@ export default {
|
|
|
28
26
|
oldReadonlyTreeColKeys () {
|
|
29
27
|
return this.isDftSet ? [] : this.selfPropsObj._oldReadonlyTreeColKeys || []; // 配置端有问题,高级依赖时值成undefined了
|
|
30
28
|
},
|
|
29
|
+
|
|
31
30
|
// 替换tableBaseMixin里的
|
|
31
|
+
noborderColKeys () {
|
|
32
|
+
return [
|
|
33
|
+
...this.treeColumns.map(colItem => colItem._key),
|
|
34
|
+
...this.selfPropsObj._noborderColKeys
|
|
35
|
+
];
|
|
36
|
+
},
|
|
32
37
|
showCreateBtnColKeys () {
|
|
33
38
|
return [
|
|
34
39
|
...this.treeFormKeys,
|
|
35
40
|
...(this.selfPropsObj._showCreateBtnColKeys || [])
|
|
36
41
|
];
|
|
37
42
|
},
|
|
38
|
-
// 顶替tableBaseMixin里的
|
|
39
43
|
searchTitle () {
|
|
40
44
|
return `${this.isSearching ? "筛选" : "全部"}数据,共 ${this.selfTotal} 条;`;
|
|
41
45
|
},
|
|
@@ -52,23 +56,12 @@ export default {
|
|
|
52
56
|
|
|
53
57
|
showColumns () {
|
|
54
58
|
return this.mergeColumns(this.treeColumns);
|
|
55
|
-
},
|
|
56
|
-
// 供表格渲染行使用的columns的数组集合, 每一行columns不一样,组成二重数组
|
|
57
|
-
rowColumnsArr () {
|
|
58
|
-
return this.transformRowColumnsArr(this.allTreeData, this.treeColumns);
|
|
59
59
|
}
|
|
60
60
|
},
|
|
61
61
|
created () {
|
|
62
62
|
this.init();
|
|
63
63
|
},
|
|
64
|
-
mounted () {
|
|
65
|
-
setTimeout(() => {
|
|
66
|
-
this.$el.querySelector(".DshCasTable-main-center-list").addEventListener("scroll", (e) => {
|
|
67
|
-
this.$el.querySelector(".DshCasTable-main-center-top").scrollLeft = e.srcElement.scrollLeft;
|
|
68
|
-
}, false);
|
|
69
|
-
this.boxWidth = this.$refs.DshCascaderTable.clientWidth;
|
|
70
|
-
}, 0);
|
|
71
|
-
},
|
|
64
|
+
mounted () { },
|
|
72
65
|
methods: {
|
|
73
66
|
// 初始化
|
|
74
67
|
init () {
|
|
@@ -77,292 +70,7 @@ export default {
|
|
|
77
70
|
// this.$set(treeFormItem, "canDelete", true);
|
|
78
71
|
});
|
|
79
72
|
},
|
|
80
|
-
// 点开模态框后处理 -表头跟着内容行滚动
|
|
81
|
-
dealingOpenModal () {
|
|
82
|
-
if (this.isEnlargeFlag) {
|
|
83
|
-
setTimeout(() => {
|
|
84
|
-
document.querySelector(".DshCasTable-fullscreen-inner-main .DshCasTable-main-center-list").addEventListener("scroll", (e) => {
|
|
85
|
-
document.querySelector(".DshCasTable-fullscreen-inner-main .DshCasTable-main-center-top").scrollLeft = e.srcElement.scrollLeft;
|
|
86
|
-
}, false);
|
|
87
|
-
}, 0);
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
|
-
|
|
91
|
-
/* ----------- 渲染函数(声明:为了代码更加规范清晰,return的是h相关的函数,则函数名get开头;return的是h的直接调用,函数名不要get开头)---------- */
|
|
92
|
-
// 表格表头渲染函数
|
|
93
|
-
tableHeadRender (h) {
|
|
94
|
-
return h("div", {
|
|
95
|
-
class: "DshCasTable-main-center-top"
|
|
96
|
-
}, [
|
|
97
|
-
h("div", {
|
|
98
|
-
class: "DshCasTable-main-center-top-inner"
|
|
99
|
-
}, [
|
|
100
|
-
h("table", {
|
|
101
|
-
class: "table",
|
|
102
|
-
attrs: {
|
|
103
|
-
border: "1",
|
|
104
|
-
cellspacin: "0",
|
|
105
|
-
bordercolor: "#E7EDF8"
|
|
106
|
-
}
|
|
107
|
-
}, [
|
|
108
|
-
h("tbody", {
|
|
109
|
-
class: ""
|
|
110
|
-
}, [
|
|
111
|
-
h(
|
|
112
|
-
"tr",
|
|
113
|
-
{},
|
|
114
|
-
this.showColumns.map((column, colIndex) => {
|
|
115
|
-
return this.thRender(h, { column, colIndex });
|
|
116
|
-
// return h("dsh-render", {
|
|
117
|
-
// props: {
|
|
118
|
-
// render: this.thRender(h, { column, colIndex })
|
|
119
|
-
// }
|
|
120
|
-
// })
|
|
121
|
-
})
|
|
122
|
-
)
|
|
123
|
-
])
|
|
124
|
-
])
|
|
125
|
-
])
|
|
126
|
-
]);
|
|
127
|
-
},
|
|
128
|
-
// 表格内容渲染函数
|
|
129
|
-
tableBodyRender (h) {
|
|
130
|
-
return h("div", {
|
|
131
|
-
class: "DshCasTable-main-center-list"
|
|
132
|
-
}, [
|
|
133
|
-
this.isLoading
|
|
134
|
-
? h("bri-loading")
|
|
135
|
-
: h("div", {
|
|
136
|
-
class: "DshCasTable-main-center-list-inner"
|
|
137
|
-
}, [
|
|
138
|
-
h("table", {
|
|
139
|
-
class: "table",
|
|
140
|
-
attrs: {
|
|
141
|
-
border: "1",
|
|
142
|
-
cellspacin: "0",
|
|
143
|
-
bordercolor: "#E7EDF8"
|
|
144
|
-
}
|
|
145
|
-
}, [
|
|
146
|
-
h("tbody", {
|
|
147
|
-
class: ""
|
|
148
|
-
}, [
|
|
149
|
-
this.showListData.length
|
|
150
|
-
? this.showListData.map((mixedRow, rowIndex) => {
|
|
151
|
-
return h(
|
|
152
|
-
"tr",
|
|
153
|
-
{
|
|
154
|
-
key: mixedRow._id,
|
|
155
|
-
class: ""
|
|
156
|
-
},
|
|
157
|
-
this.rowColumnsArr[rowIndex].map(column => {
|
|
158
|
-
return this.tdRender(h, { row: mixedRow[column.nodeKey || column._key], rowIndex, column });
|
|
159
|
-
})
|
|
160
|
-
);
|
|
161
|
-
})
|
|
162
|
-
// 无数据
|
|
163
|
-
: h(
|
|
164
|
-
"tr",
|
|
165
|
-
{
|
|
166
|
-
class: "bri-table-nodata"
|
|
167
|
-
},
|
|
168
|
-
[
|
|
169
|
-
this.emptyTdRender(h, {})
|
|
170
|
-
]
|
|
171
|
-
)
|
|
172
|
-
])
|
|
173
|
-
])
|
|
174
|
-
])
|
|
175
|
-
]);
|
|
176
|
-
},
|
|
177
|
-
// 表头单元格渲染函数 (无法共用contentColumns的renderHeaderCell,因为级联老版表头的无renderHeaderCell)
|
|
178
|
-
thRender (h, { column, colIndex }) {
|
|
179
|
-
return h(
|
|
180
|
-
"th",
|
|
181
|
-
{
|
|
182
|
-
key: column._id,
|
|
183
|
-
class: "bri-table-th",
|
|
184
|
-
style: this.getThStyle({ column, colIndex })
|
|
185
|
-
},
|
|
186
|
-
[
|
|
187
|
-
this.contentThCellRender(h, { column, colIndex })
|
|
188
|
-
]);
|
|
189
|
-
},
|
|
190
|
-
emptyTdRender (h, { row, rowIndex, column }) {
|
|
191
|
-
return h("td", {
|
|
192
|
-
style: {
|
|
193
|
-
width: `${this.boxWidth}px`,
|
|
194
|
-
minWidth: `${this.boxWidth}px`,
|
|
195
|
-
maxWidth: `${this.boxWidth}px`
|
|
196
|
-
},
|
|
197
|
-
attrs: {
|
|
198
|
-
rowspan: 1,
|
|
199
|
-
colspan: this.showColumns.length
|
|
200
|
-
}
|
|
201
|
-
}, "暂无数据…");
|
|
202
|
-
},
|
|
203
|
-
// 内容单元格渲染函数
|
|
204
|
-
tdRender (h, { row, rowIndex, column }) {
|
|
205
|
-
return h(
|
|
206
|
-
"td",
|
|
207
|
-
{
|
|
208
|
-
class: this.bodyCellClass({ row, rowIndex, column }),
|
|
209
|
-
style: this.getTdStyle({ row, rowIndex, column }),
|
|
210
|
-
attrs: {
|
|
211
|
-
rowspan: this.getTdRowSpan({ row, rowIndex, column }),
|
|
212
|
-
colspan: this.getTdColSpan({ row, rowIndex, column })
|
|
213
|
-
},
|
|
214
|
-
on: {
|
|
215
|
-
mouseenter: (event) => {
|
|
216
|
-
this.$set(this.hoverRecordMap, `${row._id}`, true);
|
|
217
|
-
},
|
|
218
|
-
mouseleave: (event) => {
|
|
219
|
-
this.$set(this.hoverRecordMap, `${row._id}`, false);
|
|
220
|
-
}
|
|
221
|
-
}
|
|
222
|
-
},
|
|
223
|
-
column.colType === "summary"
|
|
224
|
-
? this.getSummaryTdVal({ row, rowIndex, column })
|
|
225
|
-
: column.colType === "operation"
|
|
226
|
-
? this.operationTdCellRender(h, { row, rowIndex, column })
|
|
227
|
-
: this.contentTdCellRender(h, { row, rowIndex, column })
|
|
228
|
-
);
|
|
229
|
-
},
|
|
230
|
-
|
|
231
|
-
/* ----------- 方法 ---------- */
|
|
232
|
-
selfBodyCellClass ({ row, rowIndex, column }) {
|
|
233
|
-
return `${["tree"].includes(column.colType)
|
|
234
|
-
? " bri-table-td-noborder"
|
|
235
|
-
: ""
|
|
236
|
-
}`;
|
|
237
|
-
},
|
|
238
|
-
// 表头 -获取样式
|
|
239
|
-
getThStyle ({ column, colIndex }) {
|
|
240
|
-
const typeData = this.$modFieldMap[column._type] || {};
|
|
241
|
-
const boxColWidth = this.boxWidth / this.showColumns.length;
|
|
242
|
-
const calcWidth = (column._name ? column._name.length * 12 : 48) + (column._type === "reference" ? 200 : 32);
|
|
243
|
-
const dftWidth = Math.max(boxColWidth, this.widthMap[column._type], calcWidth);
|
|
244
|
-
const width = column._width || dftWidth;
|
|
245
|
-
|
|
246
|
-
return {
|
|
247
|
-
width: `${width}px`,
|
|
248
|
-
minWidth: `${width}px`,
|
|
249
|
-
maxWidth: `${width}px`,
|
|
250
|
-
paddingTop: !this.headHeightAuto ? "10px" : undefined,
|
|
251
|
-
paddingBottom: !this.headHeightAuto ? "10px" : undefined,
|
|
252
|
-
textAlign: column._align || typeData.align,
|
|
253
|
-
"word-break": "break-all",
|
|
254
|
-
cursor: "pointer"
|
|
255
|
-
};
|
|
256
|
-
},
|
|
257
|
-
|
|
258
|
-
// 单元格 -获取样式
|
|
259
|
-
getTdStyle ({ row, rowIndex, column }) {
|
|
260
|
-
return {
|
|
261
|
-
...this.getThStyle({ column }),
|
|
262
|
-
paddingTop: undefined,
|
|
263
|
-
paddingBottom: undefined
|
|
264
|
-
};
|
|
265
|
-
},
|
|
266
|
-
// 单元格 -获取行合并数
|
|
267
|
-
getTdRowSpan ({ row, rowIndex, column }) {
|
|
268
|
-
return row.total || 1;
|
|
269
|
-
},
|
|
270
|
-
// 单元格 -获取列合并数
|
|
271
|
-
getTdColSpan ({ row, rowIndex, column }) {
|
|
272
|
-
return 1;
|
|
273
|
-
},
|
|
274
|
-
// 单元格 -汇总节点单元格-获取值
|
|
275
|
-
getSummaryTdVal ({ row, rowIndex, column }) {
|
|
276
|
-
if (column._calField && column._operator) {
|
|
277
|
-
const calFieldFormItem = this.selfColumns.find(item => item._key === column._calField);
|
|
278
|
-
|
|
279
|
-
if (calFieldFormItem) {
|
|
280
|
-
let loop = (nodes, arr) => {
|
|
281
|
-
return nodes.reduce((arr, node) => {
|
|
282
|
-
if (node.children.length) {
|
|
283
|
-
return loop(node.children, arr);
|
|
284
|
-
} else {
|
|
285
|
-
arr.push(node[column._calField] || 0);
|
|
286
|
-
return arr;
|
|
287
|
-
}
|
|
288
|
-
}, arr);
|
|
289
|
-
};
|
|
290
|
-
let list = loop(row.children, []);
|
|
291
|
-
|
|
292
|
-
return this.$calNumList(list, column._operator, calFieldFormItem);
|
|
293
|
-
} else {
|
|
294
|
-
return `来源列${column._calField}被删除`;
|
|
295
|
-
}
|
|
296
|
-
} else {
|
|
297
|
-
return !column._calField && !column._operator
|
|
298
|
-
? "未选择来源列和算法"
|
|
299
|
-
: !column._calField
|
|
300
|
-
? "未选择来源列"
|
|
301
|
-
: "未选择算法";
|
|
302
|
-
}
|
|
303
|
-
},
|
|
304
|
-
// 加工单元格对应的配置
|
|
305
|
-
getSelfResetCol ({ row, rowIndex, column }) {
|
|
306
|
-
return column.colType === "tree"
|
|
307
|
-
? {
|
|
308
|
-
_heightAuto: true,
|
|
309
|
-
_placeholder: " "
|
|
310
|
-
}
|
|
311
|
-
: {};
|
|
312
|
-
},
|
|
313
|
-
// 单元格本身是否可编辑性 -针对表头列
|
|
314
|
-
getSelfColCanEdit ({ row, rowIndex, column }) {
|
|
315
|
-
return (this.getIsDftRow(row) ? !this.dftReadonlyTreeColKeys.includes(column._key) : true) && // 默认行的某列是否可编辑
|
|
316
|
-
(row.__old__ === true ? !this.oldReadonlyTreeColKeys.includes(column._key) : true); // 老数据行里某些列不可编辑
|
|
317
|
-
},
|
|
318
|
-
// getNewRowData时,额外补充的行相关的数据(针对层级属性的列)
|
|
319
|
-
getSelfNewRowData (level, list = []) {
|
|
320
|
-
const column = this.treeForm[level - 1];
|
|
321
|
-
const dftVal = column._default;
|
|
322
|
-
const initDftVal = this.initDftValMap[column._type];
|
|
323
73
|
|
|
324
|
-
return {
|
|
325
|
-
name: this.$isEmptyData(dftVal)
|
|
326
|
-
? initDftVal
|
|
327
|
-
: dftVal
|
|
328
|
-
};
|
|
329
|
-
},
|
|
330
|
-
|
|
331
|
-
/* ----------- 工具方法 ---------- */
|
|
332
|
-
// 合并表头
|
|
333
|
-
mergeColumns (treeForm = [], subForm = this.showContentColumns) {
|
|
334
|
-
return [
|
|
335
|
-
...treeForm.reduce((arr, treeFormItem) => {
|
|
336
|
-
return arr.concat(
|
|
337
|
-
{
|
|
338
|
-
...treeFormItem,
|
|
339
|
-
colType: "tree"
|
|
340
|
-
},
|
|
341
|
-
treeFormItem._treeSubForm.map(treeSubFormItem => (
|
|
342
|
-
{
|
|
343
|
-
...treeSubFormItem,
|
|
344
|
-
nodeKey: treeFormItem._key,
|
|
345
|
-
colType: "summary"
|
|
346
|
-
}
|
|
347
|
-
))
|
|
348
|
-
);
|
|
349
|
-
}, []),
|
|
350
|
-
...subForm.map(subFormItem => ({
|
|
351
|
-
...subFormItem,
|
|
352
|
-
nodeKey: treeForm[treeForm.length - 1]._key,
|
|
353
|
-
colType: "data"
|
|
354
|
-
})),
|
|
355
|
-
...(
|
|
356
|
-
!this.isSearching && this.rowOperationList.length
|
|
357
|
-
? [{
|
|
358
|
-
...this.operationColumn,
|
|
359
|
-
nodeKey: treeForm[treeForm.length - 1]._key,
|
|
360
|
-
colType: "operation"
|
|
361
|
-
}]
|
|
362
|
-
: []
|
|
363
|
-
)
|
|
364
|
-
];
|
|
365
|
-
},
|
|
366
74
|
// 转化树数据
|
|
367
75
|
getCalcuedTree (nodes = [], treeForm = [], subForm = []) {
|
|
368
76
|
treeForm.forEach((treeFormItem, treeFormIndex) => {
|
|
@@ -425,28 +133,6 @@ export default {
|
|
|
425
133
|
this.initFlag = false;
|
|
426
134
|
return nodes;
|
|
427
135
|
},
|
|
428
|
-
// 转化渲染使用的columns数组
|
|
429
|
-
transformRowColumnsArr (nodes = [], treeForm = []) {
|
|
430
|
-
const loop = (nodes = [], rowColumnsArr = []) => {
|
|
431
|
-
nodes = this.getFilteredNodes(nodes);
|
|
432
|
-
|
|
433
|
-
return nodes.reduce((rowColumnsArr, node, nodeIndex) => {
|
|
434
|
-
if (nodeIndex !== 0 || rowColumnsArr.length === 0) {
|
|
435
|
-
rowColumnsArr.push(
|
|
436
|
-
this.mergeColumns(treeForm.slice(node.level - 1))
|
|
437
|
-
);
|
|
438
|
-
}
|
|
439
|
-
|
|
440
|
-
if (node.children && node.children.length) {
|
|
441
|
-
return loop(node.children, rowColumnsArr);
|
|
442
|
-
} else {
|
|
443
|
-
return rowColumnsArr;
|
|
444
|
-
}
|
|
445
|
-
}, rowColumnsArr);
|
|
446
|
-
};
|
|
447
|
-
|
|
448
|
-
return loop(nodes);
|
|
449
|
-
},
|
|
450
136
|
// 转化表格数据
|
|
451
137
|
transformRows (nodes = [], treeForm = []) {
|
|
452
138
|
const loop = (nodes = [], rows = []) => {
|
|
@@ -455,7 +141,14 @@ export default {
|
|
|
455
141
|
return nodes.reduce((rows, node, nodeIndex) => {
|
|
456
142
|
// 创建行,并把节点数据(对象类型)注入到行对象内
|
|
457
143
|
if (nodeIndex !== 0 || rows.length === 0) {
|
|
458
|
-
rows.push({
|
|
144
|
+
rows.push({
|
|
145
|
+
_id: this.$ObjectID().str,
|
|
146
|
+
__isRendered__: true,
|
|
147
|
+
__isShow__: true,
|
|
148
|
+
__isTmpShow__: true
|
|
149
|
+
// __isSearchShow__: false,
|
|
150
|
+
// __isExpand__: false,
|
|
151
|
+
});
|
|
459
152
|
}
|
|
460
153
|
const curCol = treeForm[node.level - 1];
|
|
461
154
|
const curRow = rows[rows.length - 1];
|
|
@@ -474,6 +167,53 @@ export default {
|
|
|
474
167
|
};
|
|
475
168
|
return loop(nodes);
|
|
476
169
|
},
|
|
170
|
+
// 合并表头
|
|
171
|
+
mergeColumns (treeForm = [], subForm = this.showContentColumns) {
|
|
172
|
+
return this.$transformToColumns(
|
|
173
|
+
[
|
|
174
|
+
...treeForm.reduce((arr, treeFormItem) => ([
|
|
175
|
+
...arr,
|
|
176
|
+
{
|
|
177
|
+
...treeFormItem,
|
|
178
|
+
colType: "tree"
|
|
179
|
+
},
|
|
180
|
+
...treeFormItem._treeSubForm.map(treeSubFormItem => ({
|
|
181
|
+
...treeSubFormItem,
|
|
182
|
+
nodeKey: treeFormItem._key,
|
|
183
|
+
colType: "summary"
|
|
184
|
+
}))
|
|
185
|
+
]), []),
|
|
186
|
+
...subForm.map(subFormItem => ({
|
|
187
|
+
...subFormItem,
|
|
188
|
+
nodeKey: treeForm[treeForm.length - 1]._key,
|
|
189
|
+
colType: "data"
|
|
190
|
+
})),
|
|
191
|
+
...(
|
|
192
|
+
!this.isSearching && this.rowOperationList.length
|
|
193
|
+
? [{
|
|
194
|
+
...this.operationColumn,
|
|
195
|
+
nodeKey: treeForm[treeForm.length - 1]._key,
|
|
196
|
+
colType: "operation"
|
|
197
|
+
}]
|
|
198
|
+
: []
|
|
199
|
+
)
|
|
200
|
+
].map(colItem => ({
|
|
201
|
+
...colItem,
|
|
202
|
+
renderHeaderCell: ({ column }, h) => {
|
|
203
|
+
return this.contentThCellRender(h, { column });
|
|
204
|
+
},
|
|
205
|
+
renderBodyCell: ({ row, rowIndex, column }, h) => {
|
|
206
|
+
row = row[column.nodeKey || column._key];
|
|
207
|
+
|
|
208
|
+
return column.colType === "summary"
|
|
209
|
+
? this.getSummaryTdVal({ row, rowIndex, column })
|
|
210
|
+
: column.colType === "operation"
|
|
211
|
+
? this.operationTdCellRender(h, { row, rowIndex, column })
|
|
212
|
+
: this.contentTdCellRender(h, { row, rowIndex, column });
|
|
213
|
+
}
|
|
214
|
+
}))
|
|
215
|
+
);
|
|
216
|
+
},
|
|
477
217
|
getFilteredNodes (nodes = []) {
|
|
478
218
|
const loop = (nodes = []) => {
|
|
479
219
|
return nodes.filter(rowItem => {
|
|
@@ -491,6 +231,72 @@ export default {
|
|
|
491
231
|
};
|
|
492
232
|
|
|
493
233
|
return loop(nodes);
|
|
234
|
+
},
|
|
235
|
+
|
|
236
|
+
bodyCellSpan ({ row, rowIndex, column }) {
|
|
237
|
+
row = row[column.nodeKey || column._key];
|
|
238
|
+
return {
|
|
239
|
+
rowspan: row
|
|
240
|
+
? row.total || 1
|
|
241
|
+
: 0,
|
|
242
|
+
colspan: 1
|
|
243
|
+
};
|
|
244
|
+
},
|
|
245
|
+
// 单元格 -汇总节点单元格-获取值
|
|
246
|
+
getSummaryTdVal ({ row, rowIndex, column }) {
|
|
247
|
+
if (column._calField && column._operator) {
|
|
248
|
+
const calFieldFormItem = this.selfColumns.find(item => item._key === column._calField);
|
|
249
|
+
|
|
250
|
+
if (calFieldFormItem) {
|
|
251
|
+
let loop = (nodes, arr) => {
|
|
252
|
+
return nodes.reduce((arr, node) => {
|
|
253
|
+
if (node.children.length) {
|
|
254
|
+
return loop(node.children, arr);
|
|
255
|
+
} else {
|
|
256
|
+
arr.push(node[column._calField] || 0);
|
|
257
|
+
return arr;
|
|
258
|
+
}
|
|
259
|
+
}, arr);
|
|
260
|
+
};
|
|
261
|
+
let list = loop(row.children, []);
|
|
262
|
+
|
|
263
|
+
return this.$calNumList(list, column._operator, calFieldFormItem);
|
|
264
|
+
} else {
|
|
265
|
+
return `来源列${column._calField}被删除`;
|
|
266
|
+
}
|
|
267
|
+
} else {
|
|
268
|
+
return !column._calField && !column._operator
|
|
269
|
+
? "未选择来源列和算法"
|
|
270
|
+
: !column._calField
|
|
271
|
+
? "未选择来源列"
|
|
272
|
+
: "未选择算法";
|
|
273
|
+
}
|
|
274
|
+
},
|
|
275
|
+
// 加工单元格对应的配置
|
|
276
|
+
getSelfResetCol ({ row, rowIndex, column }) {
|
|
277
|
+
return column.colType === "tree"
|
|
278
|
+
? {
|
|
279
|
+
_heightAuto: true,
|
|
280
|
+
_placeholder: " "
|
|
281
|
+
}
|
|
282
|
+
: {};
|
|
283
|
+
},
|
|
284
|
+
// 单元格本身是否可编辑性 -针对表头列
|
|
285
|
+
getSelfColCanEdit ({ row, rowIndex, column }) {
|
|
286
|
+
return (this.getIsDftRow(row) ? !this.dftReadonlyTreeColKeys.includes(column._key) : true) && // 默认行的某列是否可编辑
|
|
287
|
+
(row.__old__ === true ? !this.oldReadonlyTreeColKeys.includes(column._key) : true); // 老数据行里某些列不可编辑
|
|
288
|
+
},
|
|
289
|
+
// getNewRowData时,额外补充的行相关的数据(针对层级属性的列)
|
|
290
|
+
getSelfNewRowData (level, list = []) {
|
|
291
|
+
const column = this.treeForm[level - 1];
|
|
292
|
+
const dftVal = column._default;
|
|
293
|
+
const initDftVal = this.initDftValMap[column._type];
|
|
294
|
+
|
|
295
|
+
return {
|
|
296
|
+
name: this.$isEmptyData(dftVal)
|
|
297
|
+
? initDftVal
|
|
298
|
+
: dftVal
|
|
299
|
+
};
|
|
494
300
|
}
|
|
495
301
|
}
|
|
496
302
|
};
|
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
mixins: [],
|
|
3
3
|
components: {},
|
|
4
|
-
props: {
|
|
4
|
+
props: {
|
|
5
|
+
// 使用多选列
|
|
6
|
+
useSelection: {
|
|
7
|
+
type: Boolean,
|
|
8
|
+
default: false
|
|
9
|
+
}
|
|
10
|
+
},
|
|
5
11
|
data () {
|
|
6
12
|
return {
|
|
7
13
|
isUseDescSort: false,
|
|
@@ -46,7 +52,7 @@ export default {
|
|
|
46
52
|
...this.selfColumns
|
|
47
53
|
.filter((colItem, colIndex) => colIndex > firstNormalIndex && this.mergeRowColKeys.includes(colItem._key))
|
|
48
54
|
.map(colItem => colItem._key)
|
|
49
|
-
|
|
55
|
+
];
|
|
50
56
|
} else {
|
|
51
57
|
return [];
|
|
52
58
|
}
|
|
@@ -283,6 +289,7 @@ export default {
|
|
|
283
289
|
}
|
|
284
290
|
}
|
|
285
291
|
|
|
292
|
+
this.changeSelect();
|
|
286
293
|
this.change("createRow", newRow, newRowIndex, null);
|
|
287
294
|
},
|
|
288
295
|
// 点击 -删除行
|
|
@@ -443,9 +450,8 @@ export default {
|
|
|
443
450
|
const indexInAll = list.findIndex(dataItem => dataItem._id === row._id);
|
|
444
451
|
list.slice(indexInAll + 1, indexInAll + this.rowspanMap[this.getMixKey(row, column)])
|
|
445
452
|
.forEach(rowItem => {
|
|
446
|
-
console.log(rowItem[column._key]);
|
|
447
453
|
rowItem[column._key] = this.$deepCopy(row[column._key]);
|
|
448
|
-
|
|
454
|
+
});
|
|
449
455
|
}
|
|
450
456
|
}
|
|
451
457
|
}
|
|
@@ -77,7 +77,7 @@ export default {
|
|
|
77
77
|
showRuleMessage: false, // 进行全体校验
|
|
78
78
|
|
|
79
79
|
idRecordMap: {}, // 默认id转换映射
|
|
80
|
-
hoverRecordMap: {},
|
|
80
|
+
// hoverRecordMap: {},
|
|
81
81
|
ruleRecordMap: {}, // 单元格是否发生校验的记录映射
|
|
82
82
|
|
|
83
83
|
showTopSearch: true,
|
|
@@ -97,6 +97,7 @@ export default {
|
|
|
97
97
|
},
|
|
98
98
|
|
|
99
99
|
isLoading: false,
|
|
100
|
+
selectIds: [],
|
|
100
101
|
|
|
101
102
|
dshRenderName: undefined,
|
|
102
103
|
hideStatus: true,
|
|
@@ -244,7 +245,6 @@ export default {
|
|
|
244
245
|
_contentHeight: 500, // 表格最大高度
|
|
245
246
|
_headHeightAuto: false, // 表头高度自适应
|
|
246
247
|
_heightAuto: false, // 单元格高度自适应
|
|
247
|
-
_useSelection: false, // 使用选择列 -配置端暂时用不到
|
|
248
248
|
_useIndex: true, // 使用序号列
|
|
249
249
|
_useSummary: false, // 使用汇总行
|
|
250
250
|
_noborderColKeys: [], // 无边线的列
|
|
@@ -330,9 +330,6 @@ export default {
|
|
|
330
330
|
heightAuto () {
|
|
331
331
|
return this.selfPropsObj._heightAuto;
|
|
332
332
|
},
|
|
333
|
-
useSelection () {
|
|
334
|
-
return this.selfPropsObj._useSelection;
|
|
335
|
-
},
|
|
336
333
|
useIndex () {
|
|
337
334
|
return this.selfPropsObj._useIndex;
|
|
338
335
|
},
|
|
@@ -543,7 +540,6 @@ export default {
|
|
|
543
540
|
: true
|
|
544
541
|
);
|
|
545
542
|
},
|
|
546
|
-
|
|
547
543
|
selectionColumn () {
|
|
548
544
|
return {
|
|
549
545
|
_key: "__selection__",
|
|
@@ -573,6 +569,11 @@ export default {
|
|
|
573
569
|
};
|
|
574
570
|
},
|
|
575
571
|
|
|
572
|
+
checkboxOption () {
|
|
573
|
+
return {
|
|
574
|
+
selectedRowKeys: this.selectIds
|
|
575
|
+
};
|
|
576
|
+
},
|
|
576
577
|
tablePropsObj () {
|
|
577
578
|
return {
|
|
578
579
|
// isLoading: false,
|
|
@@ -581,13 +582,6 @@ export default {
|
|
|
581
582
|
// clickHighlight: true,
|
|
582
583
|
// stripe: true // 斑马纹
|
|
583
584
|
// },
|
|
584
|
-
...(
|
|
585
|
-
this.selfPropsObj.checkboxOption
|
|
586
|
-
? {
|
|
587
|
-
checkboxOption: this.selfPropsObj.checkboxOption
|
|
588
|
-
}
|
|
589
|
-
: {}
|
|
590
|
-
),
|
|
591
585
|
maxHeight: this.contentHeight,
|
|
592
586
|
// 通过实例方法 hideColumnsByKeys(keys)将列隐藏,通过实例方法 showColumnsByKeys(keys)将隐藏的列显示
|
|
593
587
|
columnHiddenOption: {
|
|
@@ -786,7 +780,7 @@ export default {
|
|
|
786
780
|
isEnlarge (bool) {
|
|
787
781
|
setTimeout(() => {
|
|
788
782
|
this.isEnlargeFlag = bool;
|
|
789
|
-
this.dealingOpenModal && this.dealingOpenModal();
|
|
783
|
+
// this.dealingOpenModal && this.dealingOpenModal();
|
|
790
784
|
}, 0);
|
|
791
785
|
}
|
|
792
786
|
},
|
|
@@ -818,7 +812,7 @@ export default {
|
|
|
818
812
|
this.showRuleMessage = false;
|
|
819
813
|
|
|
820
814
|
this.idRecordMap = {};
|
|
821
|
-
this.hoverRecordMap = {};
|
|
815
|
+
// this.hoverRecordMap = {};
|
|
822
816
|
this.ruleRecordMap = {};
|
|
823
817
|
|
|
824
818
|
this.dftAdvSearch = {
|
|
@@ -826,14 +820,15 @@ export default {
|
|
|
826
820
|
conditions: []
|
|
827
821
|
};
|
|
828
822
|
this.hideStatus = true;
|
|
829
|
-
this.changePage(1);
|
|
830
823
|
|
|
824
|
+
this.changePage && this.changePage(1);
|
|
831
825
|
this.selfReset && this.selfReset();
|
|
832
826
|
},
|
|
833
827
|
loadingFunc () {
|
|
834
828
|
this.isLoading = true;
|
|
829
|
+
this.changeSelect();
|
|
830
|
+
|
|
835
831
|
setTimeout(() => {
|
|
836
|
-
this.changeSelect();
|
|
837
832
|
this.isLoading = false;
|
|
838
833
|
});
|
|
839
834
|
},
|
|
@@ -843,12 +838,14 @@ export default {
|
|
|
843
838
|
if (this.parentObj.__isCreate__ !== true) {
|
|
844
839
|
this.isExpandAction = false;
|
|
845
840
|
this.dftAdvSearch.conditions = conditions;
|
|
846
|
-
|
|
841
|
+
|
|
842
|
+
this.changePage && this.changePage(1);
|
|
847
843
|
}
|
|
848
844
|
},
|
|
849
|
-
// 列表选择项改变
|
|
845
|
+
// 列表选择项改变 (!!!外部在使用)
|
|
850
846
|
changeSelect (selections = [], ...params) {
|
|
851
|
-
this
|
|
847
|
+
this.selectIds = selections.map(item => item._id);
|
|
848
|
+
this.$emit("changeSelect", this.selectIds, selections, ...params);
|
|
852
849
|
},
|
|
853
850
|
|
|
854
851
|
// 输入框失去焦点
|
|
@@ -1423,10 +1420,6 @@ export default {
|
|
|
1423
1420
|
`${this.bgColKeys.includes(column._key)
|
|
1424
1421
|
? " bri-table-td-bg"
|
|
1425
1422
|
: ""
|
|
1426
|
-
}` +
|
|
1427
|
-
`${this.selfBodyCellClass
|
|
1428
|
-
? this.selfBodyCellClass({ row, rowIndex, column })
|
|
1429
|
-
: ""
|
|
1430
1423
|
}`;
|
|
1431
1424
|
},
|
|
1432
1425
|
eventCustomOption ({ row, rowIndex, column }) {
|
|
@@ -1441,10 +1434,10 @@ export default {
|
|
|
1441
1434
|
// console.log("contextmenu::", row, rowIndex, column, event);
|
|
1442
1435
|
},
|
|
1443
1436
|
mouseenter: (event) => {
|
|
1444
|
-
this.$set(this.hoverRecordMap, `${row._id}`, true);
|
|
1437
|
+
// this.$set(this.hoverRecordMap, `${row._id}`, true);
|
|
1445
1438
|
},
|
|
1446
1439
|
mouseleave: (event) => {
|
|
1447
|
-
this.$set(this.hoverRecordMap, `${row._id}`, false);
|
|
1440
|
+
// this.$set(this.hoverRecordMap, `${row._id}`, false);
|
|
1448
1441
|
}
|
|
1449
1442
|
};
|
|
1450
1443
|
},
|