zydx-plus 1.32.270 → 1.32.272
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
|
@@ -2109,19 +2109,19 @@ let buttonNames = {
|
|
|
2109
2109
|
headLevel: {
|
|
2110
2110
|
default: "demand",
|
|
2111
2111
|
demand: '回答要求',
|
|
2112
|
-
resourceIndex: '
|
|
2112
|
+
resourceIndex: '追问主题',
|
|
2113
2113
|
review: '回答点评',
|
|
2114
2114
|
analyse: '回答分析',
|
|
2115
2115
|
countermeasure: '教学对策'
|
|
2116
2116
|
},
|
|
2117
2117
|
otherLevel: {
|
|
2118
2118
|
default: "singletonClass",
|
|
2119
|
-
singletonClass: this.getCurrentPrefix(item) + '
|
|
2120
|
-
allClass: this.getPrefix(item) + '
|
|
2119
|
+
singletonClass: this.getCurrentPrefix(item) + '主题',
|
|
2120
|
+
allClass: this.getPrefix(item) + '主题'
|
|
2121
2121
|
},
|
|
2122
2122
|
lowLevel: {
|
|
2123
2123
|
default: "singletonClass",
|
|
2124
|
-
singletonClass: this.getCurrentPrefix(item) + '
|
|
2124
|
+
singletonClass: this.getCurrentPrefix(item) + '主题'
|
|
2125
2125
|
}
|
|
2126
2126
|
}
|
|
2127
2127
|
}
|
|
@@ -1,134 +1,132 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import { VueDraggableNext } from
|
|
3
|
-
import tableHead from
|
|
4
|
-
import tableRow from
|
|
5
|
-
import { defineComponent } from
|
|
2
|
+
import { VueDraggableNext } from "vue-draggable-next";
|
|
3
|
+
import tableHead from "./table_head.vue";
|
|
4
|
+
import tableRow from "./table_row.vue";
|
|
5
|
+
import { defineComponent } from "vue";
|
|
6
6
|
export function getColKey(col) {
|
|
7
|
-
if (col.type ===
|
|
8
|
-
return col.key
|
|
7
|
+
if (col.type === "checkbox") return "checkbox";
|
|
8
|
+
return col.key;
|
|
9
9
|
}
|
|
10
|
-
function getRowsAndCols(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
let
|
|
18
|
-
let totalRowSpan = 0
|
|
19
|
-
let hasEllipsis = false
|
|
10
|
+
function getRowsAndCols(columns) {
|
|
11
|
+
const rows = [];
|
|
12
|
+
const cols = [];
|
|
13
|
+
const dataRelatedCols = [];
|
|
14
|
+
const rowItemMap = new WeakMap();
|
|
15
|
+
let maxDepth = -1;
|
|
16
|
+
let totalRowSpan = 0;
|
|
17
|
+
let hasEllipsis = false;
|
|
20
18
|
function ensureMaxDepth(columns, currentDepth) {
|
|
21
19
|
if (currentDepth > maxDepth) {
|
|
22
|
-
rows[currentDepth] = []
|
|
23
|
-
maxDepth = currentDepth
|
|
20
|
+
rows[currentDepth] = [];
|
|
21
|
+
maxDepth = currentDepth;
|
|
24
22
|
}
|
|
25
23
|
for (const column of columns) {
|
|
26
|
-
if (
|
|
27
|
-
ensureMaxDepth(column.children, currentDepth + 1)
|
|
24
|
+
if ("children" in column) {
|
|
25
|
+
ensureMaxDepth(column.children, currentDepth + 1);
|
|
28
26
|
} else {
|
|
29
27
|
cols.push({
|
|
30
28
|
key: getColKey(column),
|
|
31
|
-
column
|
|
32
|
-
})
|
|
33
|
-
totalRowSpan += 1
|
|
29
|
+
column,
|
|
30
|
+
});
|
|
31
|
+
totalRowSpan += 1;
|
|
34
32
|
if (!hasEllipsis) {
|
|
35
|
-
hasEllipsis = !!column.ellipsis
|
|
33
|
+
hasEllipsis = !!column.ellipsis;
|
|
36
34
|
}
|
|
37
|
-
dataRelatedCols.push(column)
|
|
35
|
+
dataRelatedCols.push(column);
|
|
38
36
|
}
|
|
39
37
|
}
|
|
40
38
|
}
|
|
41
|
-
ensureMaxDepth(columns, 0)
|
|
42
|
-
let currentLeafIndex = 0
|
|
39
|
+
ensureMaxDepth(columns, 0);
|
|
40
|
+
let currentLeafIndex = 0;
|
|
43
41
|
function ensureColLayout(columns, currentDepth) {
|
|
44
|
-
let hideUntilIndex = 0
|
|
42
|
+
let hideUntilIndex = 0;
|
|
45
43
|
columns.forEach((column) => {
|
|
46
|
-
if (
|
|
44
|
+
if ("children" in column) {
|
|
47
45
|
// do not allow colSpan > 1 for non-leaf th
|
|
48
46
|
// we will execute the calculation logic
|
|
49
|
-
const cachedCurrentLeafIndex = currentLeafIndex
|
|
47
|
+
const cachedCurrentLeafIndex = currentLeafIndex;
|
|
50
48
|
const rowItem = {
|
|
51
49
|
column,
|
|
52
50
|
colSpan: 0,
|
|
53
51
|
rowSpan: 1,
|
|
54
|
-
isLast: false
|
|
55
|
-
}
|
|
56
|
-
ensureColLayout(column.children, currentDepth + 1)
|
|
52
|
+
isLast: false,
|
|
53
|
+
};
|
|
54
|
+
ensureColLayout(column.children, currentDepth + 1);
|
|
57
55
|
column.children.forEach((childColumn) => {
|
|
58
|
-
rowItem.colSpan += rowItemMap.get(childColumn)?.colSpan ?? 0
|
|
59
|
-
})
|
|
56
|
+
rowItem.colSpan += rowItemMap.get(childColumn)?.colSpan ?? 0;
|
|
57
|
+
});
|
|
60
58
|
if (cachedCurrentLeafIndex + rowItem.colSpan === totalRowSpan) {
|
|
61
|
-
rowItem.isLast = true
|
|
59
|
+
rowItem.isLast = true;
|
|
62
60
|
}
|
|
63
|
-
rowItemMap.set(column, rowItem)
|
|
64
|
-
rows[currentDepth].push(rowItem)
|
|
61
|
+
rowItemMap.set(column, rowItem);
|
|
62
|
+
rows[currentDepth].push(rowItem);
|
|
65
63
|
} else {
|
|
66
64
|
if (currentLeafIndex < hideUntilIndex) {
|
|
67
|
-
currentLeafIndex += 1
|
|
68
|
-
return
|
|
65
|
+
currentLeafIndex += 1;
|
|
66
|
+
return;
|
|
69
67
|
}
|
|
70
|
-
let colSpan = 1
|
|
71
|
-
if (
|
|
72
|
-
colSpan = column.titleColSpan ?? 1
|
|
68
|
+
let colSpan = 1;
|
|
69
|
+
if ("titleColSpan" in column) {
|
|
70
|
+
colSpan = column.titleColSpan ?? 1;
|
|
73
71
|
}
|
|
74
72
|
if (colSpan > 1) {
|
|
75
|
-
hideUntilIndex = currentLeafIndex + colSpan
|
|
73
|
+
hideUntilIndex = currentLeafIndex + colSpan;
|
|
76
74
|
}
|
|
77
|
-
const isLast = currentLeafIndex + colSpan === totalRowSpan
|
|
75
|
+
const isLast = currentLeafIndex + colSpan === totalRowSpan;
|
|
78
76
|
const rowItem = {
|
|
79
77
|
column,
|
|
80
78
|
colSpan,
|
|
81
79
|
rowSpan: maxDepth - currentDepth + 1,
|
|
82
|
-
isLast
|
|
83
|
-
}
|
|
84
|
-
rowItemMap.set(column, rowItem)
|
|
85
|
-
rows[currentDepth].push(rowItem)
|
|
86
|
-
currentLeafIndex += 1
|
|
80
|
+
isLast,
|
|
81
|
+
};
|
|
82
|
+
rowItemMap.set(column, rowItem);
|
|
83
|
+
rows[currentDepth].push(rowItem);
|
|
84
|
+
currentLeafIndex += 1;
|
|
87
85
|
}
|
|
88
|
-
})
|
|
86
|
+
});
|
|
89
87
|
}
|
|
90
|
-
ensureColLayout(columns, 0)
|
|
88
|
+
ensureColLayout(columns, 0);
|
|
91
89
|
|
|
92
90
|
return {
|
|
93
91
|
hasEllipsis,
|
|
94
92
|
rows,
|
|
95
93
|
cols,
|
|
96
|
-
dataRelatedCols
|
|
97
|
-
}
|
|
94
|
+
dataRelatedCols,
|
|
95
|
+
};
|
|
98
96
|
}
|
|
99
97
|
|
|
100
98
|
export default defineComponent({
|
|
101
|
-
name:
|
|
99
|
+
name: "zydx-table",
|
|
102
100
|
components: {
|
|
103
101
|
VueDraggableNext,
|
|
104
102
|
tableHead,
|
|
105
|
-
tableRow
|
|
103
|
+
tableRow,
|
|
106
104
|
},
|
|
107
105
|
props: {
|
|
108
106
|
columns: {
|
|
109
107
|
type: Array,
|
|
110
|
-
default: () => []
|
|
108
|
+
default: () => [],
|
|
111
109
|
},
|
|
112
110
|
data: {
|
|
113
111
|
type: Array,
|
|
114
|
-
default: () => []
|
|
112
|
+
default: () => [],
|
|
115
113
|
},
|
|
116
114
|
checkedRowKeys: {
|
|
117
115
|
type: Array,
|
|
118
|
-
default: () => []
|
|
116
|
+
default: () => [],
|
|
119
117
|
},
|
|
120
118
|
maxHeight: {
|
|
121
119
|
type: Number,
|
|
122
|
-
default: 0
|
|
120
|
+
default: 0,
|
|
123
121
|
},
|
|
124
122
|
maxWidth: {
|
|
125
123
|
type: Number,
|
|
126
|
-
default: 0
|
|
124
|
+
default: 0,
|
|
127
125
|
},
|
|
128
126
|
draggable: {
|
|
129
127
|
type: Boolean,
|
|
130
|
-
default: false
|
|
131
|
-
}
|
|
128
|
+
default: false,
|
|
129
|
+
},
|
|
132
130
|
},
|
|
133
131
|
data() {
|
|
134
132
|
return {
|
|
@@ -136,170 +134,209 @@ export default defineComponent({
|
|
|
136
134
|
cols: [],
|
|
137
135
|
checkbox_state: [],
|
|
138
136
|
draggable_state: [],
|
|
139
|
-
matrix: []
|
|
140
|
-
}
|
|
137
|
+
matrix: [],
|
|
138
|
+
};
|
|
141
139
|
},
|
|
142
|
-
emits: [
|
|
140
|
+
emits: ["selected"],
|
|
143
141
|
mounted() {
|
|
144
|
-
this.draggable_state = [...this.data]
|
|
145
|
-
this.checkbox_state = Array.from({ length: this.data.length + 1 }, () => {
|
|
142
|
+
this.draggable_state = [...this.data];
|
|
143
|
+
this.checkbox_state = Array.from({ length: this.data.length + 1 }, () => {
|
|
144
|
+
return false;
|
|
145
|
+
});
|
|
146
146
|
},
|
|
147
147
|
methods: {
|
|
148
148
|
onDragEnd: function (payload) {
|
|
149
|
-
const { oldIndex, newIndex } = payload
|
|
150
|
-
let state = [...this.draggable_state]
|
|
151
|
-
let item = state.splice(oldIndex - 1, 1)[0]
|
|
152
|
-
state.splice(newIndex - 1, 0, item)
|
|
153
|
-
this.draggable_state = state
|
|
149
|
+
const { oldIndex, newIndex } = payload;
|
|
150
|
+
let state = [...this.draggable_state];
|
|
151
|
+
let item = state.splice(oldIndex - 1, 1)[0];
|
|
152
|
+
state.splice(newIndex - 1, 0, item);
|
|
153
|
+
this.draggable_state = state;
|
|
154
154
|
},
|
|
155
155
|
onCheckboxClick: function (idx) {
|
|
156
156
|
if (idx === 0) {
|
|
157
157
|
if (this.checkbox_state[0]) {
|
|
158
158
|
// 取消全选
|
|
159
|
-
this.checkbox_state = Array.from(
|
|
159
|
+
this.checkbox_state = Array.from(
|
|
160
|
+
{ length: this.data.length + 1 },
|
|
161
|
+
() => {
|
|
162
|
+
return false;
|
|
163
|
+
}
|
|
164
|
+
);
|
|
160
165
|
} else {
|
|
161
166
|
// 全选
|
|
162
|
-
this.checkbox_state = Array.from(
|
|
167
|
+
this.checkbox_state = Array.from(
|
|
168
|
+
{ length: this.data.length + 1 },
|
|
169
|
+
() => {
|
|
170
|
+
return true;
|
|
171
|
+
}
|
|
172
|
+
);
|
|
163
173
|
}
|
|
164
174
|
} else {
|
|
165
|
-
this.checkbox_state[idx] = !this.checkbox_state[idx]
|
|
175
|
+
this.checkbox_state[idx] = !this.checkbox_state[idx];
|
|
166
176
|
if (this.checkbox_state.slice(1).some((v) => !v)) {
|
|
167
|
-
this.checkbox_state[0] = false
|
|
177
|
+
this.checkbox_state[0] = false;
|
|
168
178
|
} else {
|
|
169
|
-
this.checkbox_state[0] = true
|
|
179
|
+
this.checkbox_state[0] = true;
|
|
170
180
|
}
|
|
171
181
|
}
|
|
172
|
-
this.$emit(
|
|
182
|
+
this.$emit("selected", this.checked_row);
|
|
173
183
|
},
|
|
174
184
|
draw_matrix: function ({ key, row, colSpan, rowSpan }) {
|
|
175
|
-
let column_index = this.matrix[row].findIndex(col => col.key === key)
|
|
176
|
-
this.matrix[row][column_index].rowSpan = rowSpan
|
|
177
|
-
this.matrix[row][column_index].colSpan = colSpan
|
|
185
|
+
let column_index = this.matrix[row].findIndex((col) => col.key === key);
|
|
186
|
+
this.matrix[row][column_index].rowSpan = rowSpan;
|
|
187
|
+
this.matrix[row][column_index].colSpan = colSpan;
|
|
178
188
|
},
|
|
179
189
|
traverse_matrix: function () {
|
|
180
190
|
// todo:优化traverse matrix 算法, 目前是O(n^3)
|
|
181
191
|
for (let i = 0; i < this.matrix.length; i++) {
|
|
182
192
|
for (let j = 0; j < this.matrix[i].length; j++) {
|
|
183
|
-
const { rowSpan, colSpan } = this.matrix[i][j]
|
|
193
|
+
const { rowSpan, colSpan } = this.matrix[i][j];
|
|
184
194
|
if (rowSpan > 1) {
|
|
185
195
|
for (let r = 1; r < rowSpan; r++) {
|
|
186
|
-
this.matrix[i + r][j].rowSpan = 0
|
|
187
|
-
this.matrix[i + r][j].colSpan = 0
|
|
196
|
+
this.matrix[i + r][j].rowSpan = 0;
|
|
197
|
+
this.matrix[i + r][j].colSpan = 0;
|
|
188
198
|
}
|
|
189
199
|
}
|
|
190
200
|
if (colSpan > 1) {
|
|
191
201
|
for (let r = 0; r < rowSpan; r++) {
|
|
192
202
|
for (let k = 1; k < colSpan; k++) {
|
|
193
|
-
this.matrix[i + r][j + k].colSpan = 0
|
|
194
|
-
this.matrix[i + r][j + k].rowSpan = 0
|
|
203
|
+
this.matrix[i + r][j + k].colSpan = 0;
|
|
204
|
+
this.matrix[i + r][j + k].rowSpan = 0;
|
|
195
205
|
}
|
|
196
206
|
}
|
|
197
207
|
}
|
|
198
208
|
}
|
|
199
209
|
}
|
|
200
|
-
}
|
|
210
|
+
},
|
|
201
211
|
},
|
|
202
212
|
provide() {
|
|
203
213
|
return {
|
|
204
214
|
onCheckboxClick: this.onCheckboxClick,
|
|
205
|
-
}
|
|
215
|
+
};
|
|
206
216
|
},
|
|
207
217
|
watch: {
|
|
208
218
|
data: {
|
|
209
219
|
handler: function (v) {
|
|
210
|
-
if (!v) return
|
|
211
|
-
const { rows, cols } = getRowsAndCols(this.columns)
|
|
212
|
-
this.rows = rows
|
|
213
|
-
this.cols = cols
|
|
220
|
+
if (!v) return;
|
|
221
|
+
const { rows, cols } = getRowsAndCols(this.columns);
|
|
222
|
+
this.rows = rows;
|
|
223
|
+
this.cols = cols;
|
|
214
224
|
this.matrix = Array.from({ length: v.length }, () => {
|
|
215
|
-
return Array.from({ length: this.cols.length },
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
})
|
|
225
|
+
return Array.from({ length: this.cols.length }, (_, idx) => {
|
|
226
|
+
return { key: this.cols[idx].key, row: 1, colSpan: 1, rowSpan: 1 };
|
|
227
|
+
});
|
|
228
|
+
});
|
|
220
229
|
v.forEach((row, row_idx) => {
|
|
221
230
|
this.cols.forEach((col) => {
|
|
222
|
-
const { column } = col
|
|
223
|
-
const { key, colSpan = () => 1, rowSpan = () => 1 } = column
|
|
231
|
+
const { column } = col;
|
|
232
|
+
const { key, colSpan = () => 1, rowSpan = () => 1 } = column;
|
|
224
233
|
this.draw_matrix({
|
|
225
234
|
key: key,
|
|
226
235
|
row: row_idx,
|
|
227
236
|
rowSpan: rowSpan(row, row_idx + 1),
|
|
228
|
-
colSpan: colSpan(row, row_idx + 1)
|
|
229
|
-
})
|
|
230
|
-
})
|
|
231
|
-
})
|
|
232
|
-
this.traverse_matrix()
|
|
237
|
+
colSpan: colSpan(row, row_idx + 1),
|
|
238
|
+
});
|
|
239
|
+
});
|
|
240
|
+
});
|
|
241
|
+
this.traverse_matrix();
|
|
233
242
|
},
|
|
234
243
|
immediate: true,
|
|
235
|
-
deep: true
|
|
236
|
-
}
|
|
244
|
+
deep: true,
|
|
245
|
+
},
|
|
246
|
+
checkedRowKeys: {
|
|
247
|
+
handler: async function (v) {
|
|
248
|
+
await this.$nextTick();
|
|
249
|
+
if (Array.isArray(v)) {
|
|
250
|
+
for (const idx of v) {
|
|
251
|
+
this.checkbox_state[idx] = true;
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
},
|
|
255
|
+
immediate: true,
|
|
256
|
+
deep: true,
|
|
257
|
+
},
|
|
237
258
|
},
|
|
238
259
|
computed: {
|
|
239
260
|
getHeight() {
|
|
240
261
|
if (this.maxHeight) {
|
|
241
262
|
return {
|
|
242
|
-
maxHeight: this.maxHeight +
|
|
243
|
-
}
|
|
263
|
+
maxHeight: this.maxHeight + "px",
|
|
264
|
+
};
|
|
244
265
|
} else {
|
|
245
|
-
return
|
|
266
|
+
return "";
|
|
246
267
|
}
|
|
247
268
|
},
|
|
248
269
|
getWidth() {
|
|
249
270
|
if (this.maxWidth) {
|
|
250
271
|
return {
|
|
251
|
-
maxWidth: this.maxWidth +
|
|
252
|
-
}
|
|
272
|
+
maxWidth: this.maxWidth + "px",
|
|
273
|
+
};
|
|
253
274
|
} else {
|
|
254
|
-
return
|
|
275
|
+
return "";
|
|
255
276
|
}
|
|
256
277
|
},
|
|
257
278
|
checked_row() {
|
|
258
279
|
return this.checkbox_state.reduce((acc, cur, idx) => {
|
|
259
280
|
if (cur && idx !== 0) {
|
|
260
|
-
acc.push(this.data[idx - 1])
|
|
281
|
+
acc.push(this.data[idx - 1]);
|
|
261
282
|
}
|
|
262
|
-
return acc
|
|
263
|
-
}, [])
|
|
264
|
-
}
|
|
283
|
+
return acc;
|
|
284
|
+
}, []);
|
|
285
|
+
},
|
|
265
286
|
},
|
|
266
287
|
render() {
|
|
267
|
-
const {
|
|
288
|
+
const {
|
|
289
|
+
draggable,
|
|
290
|
+
rows,
|
|
291
|
+
cols,
|
|
292
|
+
data,
|
|
293
|
+
getHeight,
|
|
294
|
+
getWidth,
|
|
295
|
+
onDragEnd,
|
|
296
|
+
checkbox_state,
|
|
297
|
+
matrix,
|
|
298
|
+
} = this;
|
|
268
299
|
return (
|
|
269
300
|
<div class="table_wrapper" style={[getHeight, getWidth]}>
|
|
270
|
-
{
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
<
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
{
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
+
{draggable ? (
|
|
302
|
+
<div class="table_root" aria-label="draggbale-table">
|
|
303
|
+
<VueDraggableNext tag={"table"} animation={"200"} onEnd={onDragEnd}>
|
|
304
|
+
<table-head rows={rows} checked={checkbox_state[0]}></table-head>
|
|
305
|
+
{data.map((row, idx) => (
|
|
306
|
+
<table-row
|
|
307
|
+
rowInfo={matrix[idx]}
|
|
308
|
+
checked={checkbox_state[idx + 1]}
|
|
309
|
+
cols={cols}
|
|
310
|
+
row={row}
|
|
311
|
+
draggable={draggable}
|
|
312
|
+
data_row={idx + 1}
|
|
313
|
+
/>
|
|
314
|
+
))}
|
|
315
|
+
</VueDraggableNext>
|
|
316
|
+
</div>
|
|
317
|
+
) : (
|
|
318
|
+
<table class="table_root" aria-label="simple-table">
|
|
319
|
+
<table-head rows={rows} checked={checkbox_state[0]}></table-head>
|
|
320
|
+
<tbody class="table_body">
|
|
321
|
+
{data.map((row, idx) => (
|
|
322
|
+
<table-row
|
|
323
|
+
rowInfo={matrix[idx]}
|
|
324
|
+
checked={checkbox_state[idx + 1]}
|
|
325
|
+
cols={cols}
|
|
326
|
+
row={row}
|
|
327
|
+
draggable={draggable}
|
|
328
|
+
data_row={idx + 1}
|
|
329
|
+
/>
|
|
330
|
+
))}
|
|
331
|
+
</tbody>
|
|
332
|
+
</table>
|
|
333
|
+
)}
|
|
334
|
+
</div>
|
|
335
|
+
);
|
|
336
|
+
},
|
|
337
|
+
});
|
|
301
338
|
</script>
|
|
302
|
-
<style
|
|
339
|
+
<style scoped>
|
|
303
340
|
.table_wrapper {
|
|
304
341
|
width: auto;
|
|
305
342
|
position: relative;
|
|
@@ -312,7 +349,6 @@ export default defineComponent({
|
|
|
312
349
|
/* or add it to the track */
|
|
313
350
|
}
|
|
314
351
|
|
|
315
|
-
|
|
316
352
|
.table_root {
|
|
317
353
|
table-layout: fixed;
|
|
318
354
|
display: table;
|
|
@@ -323,7 +359,6 @@ export default defineComponent({
|
|
|
323
359
|
border-spacing: 0;
|
|
324
360
|
}
|
|
325
361
|
|
|
326
|
-
|
|
327
362
|
.table_body {
|
|
328
363
|
position: relative;
|
|
329
364
|
width: 100%;
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
@mouseup.stop="mouseup"
|
|
7
7
|
@mouseleave.stop="mousemove" :style="{'text-align': title === ''? 'center':'left'}">{{ title }}</span>
|
|
8
8
|
<div class="drag-i">
|
|
9
|
+
<i class="minimize" v-if="minimize" @click.stop="minimizeTap"></i>
|
|
9
10
|
<i class="disconnect" v-if="disconnectShow" @click.stop="disconnect"></i>
|
|
10
11
|
<i class="enlarge" v-if="enlargeShow" @click.stop="enlarge"></i>
|
|
11
12
|
<i @click.stop="close"></i>
|
|
@@ -83,6 +84,10 @@ export default {
|
|
|
83
84
|
type: Boolean,
|
|
84
85
|
default: false
|
|
85
86
|
},
|
|
87
|
+
minimize: {
|
|
88
|
+
type: Boolean,
|
|
89
|
+
default: false
|
|
90
|
+
},
|
|
86
91
|
},
|
|
87
92
|
watch: {
|
|
88
93
|
width: {
|
|
@@ -116,7 +121,7 @@ export default {
|
|
|
116
121
|
return `top:${this.y}px;left:${this.x}px;width:${this.footRightOffset}px;height:${this.footDownOffset}px;`;
|
|
117
122
|
},
|
|
118
123
|
},
|
|
119
|
-
emits: ['dragStatus', 'close', 'enlarge','updateDrag'],
|
|
124
|
+
emits: ['dragStatus', 'close', 'enlarge','updateDrag','minimize'],
|
|
120
125
|
methods: {
|
|
121
126
|
disconnect() {
|
|
122
127
|
this.$emit('dragStatus')
|
|
@@ -205,6 +210,11 @@ export default {
|
|
|
205
210
|
})
|
|
206
211
|
this.$emit('enlarge', this.state)
|
|
207
212
|
},
|
|
213
|
+
minimizeTap() {
|
|
214
|
+
this.isMove = false
|
|
215
|
+
this.footIsMove = false
|
|
216
|
+
this.$emit('minimize');
|
|
217
|
+
},
|
|
208
218
|
close() {
|
|
209
219
|
this.isMove = false
|
|
210
220
|
this.footIsMove = false
|
|
@@ -305,6 +315,10 @@ export default {
|
|
|
305
315
|
background-size: 15px 15px !important;
|
|
306
316
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAADwNJREFUeF7tnWvIZWUdxdf6JIrY9MEMs1DILAXHUcEcjRTUPqQiCuGlwiFTRymcoUC7oNJFoVApvGY4VF4IHMWxD6ngRF4yvIyGU2bg0EUyPziKKH76xzPuM7zjvLfzrH323v9z1oYDI571/P/Pen7rfd+99zn7ISqPiDgAwOcBHA3gwDmvFZVDWmYH2nBgO4Btc15PA/gDyX/XDM5xRBFxKIALAKwGcMw4Wr/XDvTswFMAngBwO8mty+1lWQGJiH0ArAewDkD5tw87kNWBtwBcD+A6kuXfix5LBiQizgfwLQCHLTWY/78dSOTAiwB+SnLDYj0vGpCIuANACYgPOzCtDmwguWahyS0YkIh4pTnxnlZjPC87MHJgG8mD5rNj3oBERDnzP8r+2YEZcuAZkuWK7C7HbgGJiMsBXDNDxniqdmDkwBUkr51rxy4BiYhzAdxpv+zADDtwHsm7RvPfGZDmUm65TuyrVTNMh6eOcnVr9egS8NyAXAXgShtkB+wAriZZ8oAdAWnukD/pm4BGww7scKDcQDy23HEfBaTcWbzM5tgBO7DTgRtIrhsF5DkAR9gcO2AHdjqwheQqRkT5JG65KejDDtiBXR04qASkfJSkfKREOa4A8DsA/yT5pjKQtXZAcSAiPgTgEwC+2ML9vDUlINL5B8klP/CoTNhaO6A4EBEh6G8oAbkPwBmVg1xE8rZKrWV2YOIORMSFAG6tLHR/CYhygr6K5JbK4pbZgYk7EBHl4lNhvObYUgLyBoDar8l+mGT5iqMPOzBIByKisF0Yrzm2l4BU/43m848az63p2gGJcUnsE/Su19r1KhyQGJfEDkjFclnStQMS45LYAel6rV2vwgGJcUnsgFQslyVdOyAxLokdkK7X2vUqHJAYl8QOSMVyWdK1AxLjktgB6XqtXa/CAYlxSeyAVCyXJV07IDEuiR2Qrtfa9SockBiXxC0HJCL2BnA6gM8AWNk8m2v/Ck/GlbwG4HkALwHYSHLzuANMw/sj4gQAZwI4pPF/vw7m9SqAZxr//wrgAZJvt1lXYlwStxiQiChPjL9xIN9svITkzW0u0tDHioi1AG4aQJ/lw6+XkixP2GnlkBiXxC0FJCIuBjA0IGfmo/ziR8JbgXieQdaSvKWNwSXGJXELAYmIUwFsasOICYxxPMnHJzDuYIaMiOMAPDaYhnZt5DSSD6q9SYxLYjEgEXEwgL+rBkxQX85JjiT5zgRr9DZ0ROwF4NnmnKO3PpYo/CmSLyvNSYxLYiEgEbEHgPLT4SRl8h1oS0Bqv3DTQXv1JSJiVROQ+kEmr3wEwKkk36stJTEuibWAfAXAr2on3aHuHJL3dFivs1IRcTaAuzsrWF/oqyR/XSuXGJfEWkB+0uxcVTvvrnQ7H0PZVcGu6kRElsfNlp2gvl3ri8S4JNYC8nsAp9ROukPdWSQ3dlivs1IRUe553NtZwfpCD5H8Qq1cYlwSawH5L4AubkTV+jrSrST5gjrIEPURcXhzg26I7c3t6TWSH61tUmJcEmsBqf4ufK1RFbqy3/ahJN+t0A5eEhF7AihbIpenaw76UJ5/IDEuiac/ILtspjJogiqby7JpkgNSucATlO22HdcEa/U6dIZt9xyQXhHZrfgpJB8eVkuT7SYiTgbw0GSr1I/ugNR714bydWDH1lvl7/Hbp/XG4FJGNTcOLyjnXc1WfPsupenq/zsgYzitmDVGGb+1ZQcynu/29mTFvsxqec093BgO9LXmUl1J3NNVLP8GGYPKAb01JWspmxaCOSBeZq6VlKylbNoBSRmulKylbNoBcUDGcEBiXBILoPZVdwxf/daWHehrzaW6ktgBaRmh6R4uJWspmxaCOd0IDnt2KVlL2bQDMuwkLNBdStZSNu2AOCBjOCAxLokFUPuqO4avfmvLDvS15lJdSeyAtIzQdA+XkrWUTQvBnG4Ehz27lKylbNoBGXYSfJL+vgPKhwb7CmZKsqak6b7WXKoriYWf5H3VnRLWUk6jrzWX6kpiByQlqH01nZK1lE0LwewLDtcFUrKWsmkHJGXeUrLWY9O1T1aUnrKXkqwpaToiellziXFJLPwkj4jaZ/NKz2mdEtZSTqOvNZcYl8RaQH4G4BsVK/1zkt+s0FnSswMR0cuaS4xLYi0gZUfVRyvW7MRZ3YW2wqtBSZpddDtfc4lxSSwEpKxcxc6qM7f77KAIb6GZPtZcYlwSiwFpQnIhgFuX4f3M7Dq7DC9Sv2WMXXVbWXOJcUncQkCakJSdVn+5wGaSZSPNr037brOpia9ovtldt5M1lxiXxC0FpAlJ2XH1kOb1aQB/A1DC8dK07jJbwdVUSZpddie+5hLjkrjFgEzVynsyg3JAYlwSOyCDAsHNzO+AxLgkdkDMZAIHJMYlsQOSAA+3KDEuiR0Q05fAAYlxSeyAJMDDLUqMS2IHxPQlcEBiXBI7IAnwcIsS45LYATF9CRyQGJfEDkgCPNyixLgkdkBMXwIHJMYlsQOSAA+3KDEuiR0Q05fAAYlxSeyAJMDDLUqMS2IHxPQlcEBiXBI7IAnwcIsS45LYATF9CRyQGJfEDkgCPNyixLgkdkBMXwIHJMYlsQOSAA+3KDEuiR0Q05fAAYlxSeyAJMDDLUqMS2IHxPQlcEBiXBI7IAnwcIsS45LYATF9CRyQGJfEDkgCPNyixLgkdkBMXwIHJMYlsQOSAA+3KDEuiR0Q05fAAYlxSeyAJMDDLUqMS2IHxPQlcEBiXBI7IAnwcIsS45LYATF9CRyQGJfEDkgCPNyixLgkdkBMXwIHJMYlsQOSAA+3KDEuiR0Q05fAAYlxSeyAJMDDLUqMS2IHxPQlcEBiXBI7IAnwcIsS45LYATF9CRyQGJfEDkgCPNyixLgkdkBMXwIHJMYlsQOSAA+3KDEuiR0Q05fAAYlxSeyAJMDDLUqMS2IHxPQlcEBiXBI7IAnwcIsS45LYATF9CRyQGJfEDkgCPNyixLgkdkBMXwIHJMYlsQOSAA+3KDEuiR0Q05fAAYlxSeyAJMDDLUqMS+IWAxIRewI4GMAnARwO4AUA/wDwMsl3vczT50BXay4xLolbCkhEnAvgRwAOnAeDbQC+S/Ku6UNkdmfU5ZpLjEviFgISEZcDuGYZqFxB8tplvM9vGbgDXa+5xLgkFgMSEScDeGiM9TyF5MNjvN9vHZgDfay5xLgkFgISEasAPFuxfkeSfK5CZ0nPDvS15hLjklgLyI0ALqlYs5tIXlqhs6RnByKilzWXGJfEWkAeBXBCxZptJnlihc6Snh2IiF7WXGJcEmsB+R+AfSvW7HWSH6nQWdKzAxHRy5pLjEtiLSBRu14U6tbWtE53ICVrKZt2QHRaexghJWspm3ZAesBbL5mStZRNOyA6rT2MkJK1lE07ID3grZdMyVrKph0QndYeRkjJWsqmHZAe8NZLpmQtZdMOiE5rDyOkZC1l0w5ID3jrJVOylrJpB0SntYcRUrKWsmkHpAe89ZIpWUvZtAOi09rDCClZS9m0A9ID3nrJlKylbNoB0WntYYSUrKVs2gHpAW+9ZErWUjbtgOi09jBCStZSNu2A9IC3XjIlaymbdkB0WnsYISVrKZt2QHrAWy+ZkrWUTTsgOq09jJCStYxNT2BtXwPwPICXAGwkuXkCNQY/ZESUp8ycCeAQACsB7DeUppXnEEiMS2LhJ7lSt4NFu4TkzR3UGUyJiFgL4KbBNPSBRhyQ4a3MRSRvG15b7XcUERcCuLX9kdsb0QFpz8s2Rzqe5ONtDji0sSLiOACPDa2vD/bjgAxzhco5SXkW8DvDbE/rKiL2ap6PXM45Bn3MYkD+A2D/Qa/K+81N7cOyhYdJd71sr5L8WG1R5XyXklg7SX8AwGm1k+5Qdw7Jezqs11mpiDgbwN2dFawvtInk6bVyiXFJrAXkBwC+VzvpDnVXk7yqw3qdlYqIMq8rOytYX+iHJL9fK5cYl8RaQMq2a3fWTrpD3VkkN3ZYr7NSEVHuedzbWcH6QucpW/BJjEtiLSB7A/gjgCPqfetEuZJk2VB06o6IKJullhukQz62APgcybdrm5QYl8RCQMpkI2I1gCFfRi0biB46rbvsNrvMbl1g89RaHtvWHUfyCWVQiXFJLAakCcnFAIZ611r61a4salfaZrfZof6pu5bkLaoXEuOSuIWANCE5FcAm1YiW9TOzq+4Yu862bPGiw51G8sE2CkqMS+KWAtKE5ODms0AntWGKOMbM7aZbsfusaPGC8kfK3pUkX26rgMS4JG4xIE1I9gDwJQDl5LG8uvpE6esAXgRQ/h6/fVZ30W1uHF5QzrsAHFa5Rd64XI8+SV0uhJTXb0m+N+4gi71fYlwStxyQNk3xWHZg5IDEuCR2QExhAgckxiWxA5IAD7coMS6JHRDTl8ABiXFJ7IAkwMMtSoxLYgfE9CVwQGJcEjsgCfBwixLjktgBMX0JHJAYl8QOSAI83KLEuCR2QExfAgckxiPiDQArKue5guSblVrL7EAnDggB2V6+k/6c8KWlw0n+pZNZuogdqHRACMiWEpD7AJxRWXtmPhJe6Y9lA3BACMj9JSDXA7isdh7K84pqa1pnB8ZxQAjIDSUg5wH4zTgF53nvRQD+DGAbye3iWJbbgVYdEALy5RKQAwD8q9WOPJgdmA4HPs4yj4j4E4BjpmNOnoUdaMWBp0h+dhSQ6wCsa2VYD2IHpsOB60muHwWkfMXySQD7TMfcPAs7IDnwFoBjSW7dEZDmz6wsj6GUZm6xHViGAzsfNzs3IOW3R3lAV/myvg87MKsOlId3rCZZfotgZ0Ca3yLnA7hjVp3xvO0AgDUkN4yc2CUgTUhKQEpQfNiBWXNgA8k1cye9W0CakLwy8Oe1ztrCeb6Td6Dc5D7og2XmDUgTkqcBHDX5vlzBDvTuwDMkj56viwUD0oTkcgDX9N6+G7ADk3Ng0Q/cLhqQJiRlo5vv+OrW5FbII/fiQLla9eOlNuZZMiBNSMol4PXN3XbfTOxlPV20JQfK5dvyCfbrRpdyFxt3WQEZDRAR5Y771wGcIHzJqqV5ehg7MJYDZaeqzQB+Ue6QL1c5VkDmDhoRBzZBKU9gL/8evWq/vrvcnv0+O7CYA+XrFmVnsNGrbDG3mWT577GP/wMKJDebc+E6HgAAAABJRU5ErkJggg==") !important;
|
|
307
317
|
}
|
|
318
|
+
.minimize{
|
|
319
|
+
background-size: 15px 15px !important;
|
|
320
|
+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAABYpJREFUeF7t3EGKJFcQBFHVyYVOXkIHaIEH5EC2Pa095qebl6Fdf/7yHwII/Ejggw0CCPxMgCB+HQj8DwGC+HkgQBC/AQRuBPwf5MbNVYQAQSJDq3kjQJAbN1cRAgSJDK3mjQBBbtxcRQgQJDK0mjcCBLlxcxUhQJDI0GreCBDkxs1VhABBIkOreSNAkBs3VxECBIkMreaNAEFu3FxFCBAkMrSaNwIEuXFzFSFAkMjQat4IEOTGzVWEAEEiQ6t5I0CQGzdXEQIEiQyt5o0AQW7cXEUIECQytJo3AgS5cXMVIUCQyNBq3ggQ5MbNVYQAQSJDq3kjQJAbN1cRAgSJDK3mjQBBbtxcRQgQJDK0mjcCBLlxcxUhQJDI0GreCBDkxs1VhABBIkOreSNAkBs3VxECBIkMreaNAEFu3FxFCBAkMrSaNwIEuXFzFSFAkMjQat4IEOTGzVWEAEEiQ6t5I0CQGzdXEQIEiQyt5o0AQW7cXEUIECQytJo3AgS5cXMVIUCQyNBq3ggQ5MbNVYQAQSJDq3kjQJAbN1cRAgSJDK3mjQBBbtxcRQgQJDK0mjcCBLlxcxUhQJDI0GreCBDkxs1VhABBIkOreSNAkBs3VxECBIkMreaNAEFu3FxFCBAkMrSaNwIEuXFzFSFAkMjQat4IEOTGzVWEAEEiQ6t5I0CQGzdXEQIEiQyt5o0AQW7cXEUIECQytJo3AgS5cXMVIUCQyNBq3ggQ5MbNVYQAQSJDq3kjQJAbN1cRAgSJDK3mjQBBbtxcRQgQJDK0mjcCBLlxcxUhQJDI0GreCBDkxs1VhABBIkOreSPwRwT5fr9/3z7PFQI/E/h8Pv88zedPCfJ9uoh/v0fg8/k8/vt9/IH/Zvt+vwTp/X4fb0yQxxF74M0ECPLm9Xz74wQI8jhiD7yZAEHevJ5vf5wAQR5H7IE3EyDIm9fz7Y8TIMjjiD3wZgIEefN6vv1xAgR5HLEH3kyAIG9ez7c/ToAgjyP2wJsJEOTN6/n2xwkQ5HHEHngzAYK8eT3f/jgBgjyO2ANvJkCQN6/n2x8nQJDHEXvgzQQI8ub1fPvjBAjyOGIPvJkAQd68nm9/nABBHkfsgTcTIMib1/PtjxP4TYL4w3GP/1x6D/yaPxzXm07j30Lgj/zhuN8CS48eAYL0Ntd4IECQAZZojwBBeptrPBAgyABLtEeAIL3NNR4IEGSAJdojQJDe5hoPBAgywBLtESBIb3ONBwIEGWCJ9ggQpLe5xgMBggywRHsECNLbXOOBAEEGWKI9AgTpba7xQIAgAyzRHgGC9DbXeCBAkAGWaI8AQXqbazwQIMgAS7RHgCC9zTUeCBBkgCXaI0CQ3uYaDwQIMsAS7REgSG9zjQcCBBlgifYIEKS3ucYDAYIMsER7BAjS21zjgQBBBliiPQIE6W2u8UCAIAMs0R4BgvQ213ggQJABlmiPAEF6m2s8ECDIAEu0R4Agvc01HggQZIAl2iNAkN7mGg8ECDLAEu0RIEhvc40HAgQZYIn2CBCkt7nGAwGCDLBEewQI0ttc44EAQQZYoj0CBOltrvFAgCADLNEeAYL0Ntd4IECQAZZojwBBeptrPBAgyABLtEeAIL3NNR4IEGSAJdojQJDe5hoPBAgywBLtESBIb3ONBwIEGWCJ9ggQpLe5xgMBggywRHsECNLbXOOBAEEGWKI9AgTpba7xQIAgAyzRHgGC9DbXeCBAkAGWaI8AQXqbazwQIMgAS7RHgCC9zTUeCBBkgCXaI0CQ3uYaDwQIMsAS7REgSG9zjQcCBBlgifYIEKS3ucYDAYIMsER7BAjS21zjgQBBBliiPQIE6W2u8UCAIAMs0R4BgvQ213ggQJABlmiPAEF6m2s8ECDIAEu0R4Agvc01Hgj8CwmaaMkz/sxmAAAAAElFTkSuQmCC") !important;
|
|
321
|
+
}
|
|
308
322
|
|
|
309
323
|
.drag-head span {
|
|
310
324
|
text-align: center;
|