eoss-ui 0.4.78 → 0.4.79-beta.0
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": "eoss-ui",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.79-beta.0",
|
|
4
4
|
"description": "eoss内部业务组件",
|
|
5
5
|
"main": "lib/eoss-ui.common.js",
|
|
6
6
|
"files": [
|
|
@@ -54,6 +54,7 @@
|
|
|
54
54
|
"style": "lib/theme-chalk/index.css",
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"axios": "^0.27.2",
|
|
57
|
+
"interactjs": "^1.10.26",
|
|
57
58
|
"json-bigint": "^1.0.0",
|
|
58
59
|
"net": "^1.0.2",
|
|
59
60
|
"qrcode": "^1.5.1",
|
|
@@ -26,6 +26,7 @@ export default {
|
|
|
26
26
|
hide: Boolean,
|
|
27
27
|
param: Object,
|
|
28
28
|
type: String,
|
|
29
|
+
mold: String,
|
|
29
30
|
size: String,
|
|
30
31
|
open: Boolean,
|
|
31
32
|
reload: Boolean,
|
|
@@ -43,197 +44,216 @@ export default {
|
|
|
43
44
|
closed: Function,
|
|
44
45
|
stop: Boolean,
|
|
45
46
|
syncKeys: Object,
|
|
46
|
-
text: String
|
|
47
|
+
text: String,
|
|
48
|
+
onClick: Function
|
|
49
|
+
},
|
|
50
|
+
computed: {
|
|
51
|
+
_type() {
|
|
52
|
+
return [
|
|
53
|
+
'default',
|
|
54
|
+
'primary',
|
|
55
|
+
'success',
|
|
56
|
+
'info',
|
|
57
|
+
'warning',
|
|
58
|
+
'danger'
|
|
59
|
+
].includes(this.type)
|
|
60
|
+
? this.type
|
|
61
|
+
: this.mold;
|
|
62
|
+
}
|
|
47
63
|
},
|
|
48
64
|
data() {
|
|
49
65
|
return {};
|
|
50
66
|
},
|
|
51
67
|
methods: {
|
|
52
68
|
handleClick(evt) {
|
|
53
|
-
if (this.
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
let
|
|
64
|
-
let
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
this.required.forEach((item) => {
|
|
78
|
-
param[item] = models[item];
|
|
69
|
+
if (this.onClick) {
|
|
70
|
+
this.onClick(evt);
|
|
71
|
+
} else {
|
|
72
|
+
if (this.open && this.link) {
|
|
73
|
+
let windows;
|
|
74
|
+
let fields = [];
|
|
75
|
+
let param = this.param ? this.param : {};
|
|
76
|
+
evt.stopPropagation();
|
|
77
|
+
evt.preventDefault();
|
|
78
|
+
let width = util.win.top.screen.availWidth - 10;
|
|
79
|
+
let height = util.win.top.screen.availHeight - 60;
|
|
80
|
+
let flag = true;
|
|
81
|
+
if (this.esForm) {
|
|
82
|
+
let params = util.getParams({ url: this.link });
|
|
83
|
+
let modal = this.esForm.models;
|
|
84
|
+
let models = util.extend({}, params || {}, modal);
|
|
85
|
+
if (this.required) {
|
|
86
|
+
if (Array.isArray(this.required)) {
|
|
87
|
+
this.esForm.validateField(this.required, (res) => {
|
|
88
|
+
if (res) {
|
|
89
|
+
flag = false;
|
|
90
|
+
} else {
|
|
91
|
+
flag = true;
|
|
92
|
+
}
|
|
79
93
|
});
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}
|
|
86
|
-
this.esForm.validateField(fields, (res) => {
|
|
87
|
-
if (res) {
|
|
88
|
-
flag = false;
|
|
89
|
-
} else {
|
|
90
|
-
flag = true;
|
|
94
|
+
if (flag) {
|
|
95
|
+
fields = this.required;
|
|
96
|
+
this.required.forEach((item) => {
|
|
97
|
+
param[item] = models[item];
|
|
98
|
+
});
|
|
91
99
|
}
|
|
92
|
-
})
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
flag = false;
|
|
97
|
-
} else {
|
|
98
|
-
flag = true;
|
|
100
|
+
} else if (typeof this.required === 'object') {
|
|
101
|
+
for (let i in this.required) {
|
|
102
|
+
fields.push(this.required[i]);
|
|
103
|
+
param[i] = models[this.required[i]];
|
|
99
104
|
}
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
105
|
+
this.esForm.validateField(fields, (res) => {
|
|
106
|
+
if (res) {
|
|
107
|
+
flag = false;
|
|
108
|
+
} else {
|
|
109
|
+
flag = true;
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
} else {
|
|
113
|
+
this.esForm.validateField(this.required, (res) => {
|
|
114
|
+
if (res) {
|
|
115
|
+
flag = false;
|
|
116
|
+
} else {
|
|
117
|
+
flag = true;
|
|
118
|
+
}
|
|
119
|
+
});
|
|
120
|
+
if (flag) {
|
|
121
|
+
fields = this.required;
|
|
122
|
+
if (
|
|
123
|
+
models[this.required] == null ||
|
|
124
|
+
models[this.required] == undefined ||
|
|
125
|
+
models[this.required] == ''
|
|
126
|
+
) {
|
|
127
|
+
param[this.required] = models[this.required];
|
|
128
|
+
}
|
|
109
129
|
}
|
|
110
130
|
}
|
|
111
131
|
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
132
|
+
if (this.fields) {
|
|
133
|
+
let empty = [];
|
|
134
|
+
if (Array.isArray(this.fields)) {
|
|
135
|
+
this.fields.forEach((item) => {
|
|
136
|
+
if (models[item] == undefined || models[item] == '') {
|
|
137
|
+
empty.push(item);
|
|
138
|
+
}
|
|
139
|
+
param[item] = models[item];
|
|
140
|
+
});
|
|
141
|
+
} else if (typeof this.fields === 'object') {
|
|
142
|
+
for (let i in this.fields) {
|
|
143
|
+
if (
|
|
144
|
+
models[this.fields[i]] == undefined ||
|
|
145
|
+
models[this.fields[i]] == ''
|
|
146
|
+
) {
|
|
147
|
+
empty.push(this.fields[i]);
|
|
148
|
+
}
|
|
149
|
+
param[i] = models[this.fields[i]];
|
|
119
150
|
}
|
|
120
|
-
|
|
121
|
-
});
|
|
122
|
-
} else if (typeof this.fields === 'object') {
|
|
123
|
-
for (let i in this.fields) {
|
|
151
|
+
} else {
|
|
124
152
|
if (
|
|
125
|
-
models[this.fields
|
|
126
|
-
models[this.fields
|
|
153
|
+
models[this.fields] == undefined ||
|
|
154
|
+
models[this.fields] == ''
|
|
127
155
|
) {
|
|
128
|
-
empty.push(this.fields
|
|
156
|
+
empty.push(this.fields);
|
|
129
157
|
}
|
|
130
|
-
param[
|
|
131
|
-
}
|
|
132
|
-
} else {
|
|
133
|
-
if (
|
|
134
|
-
models[this.fields] == undefined ||
|
|
135
|
-
models[this.fields] == ''
|
|
136
|
-
) {
|
|
137
|
-
empty.push(this.fields);
|
|
138
|
-
}
|
|
139
|
-
param[this.fields] = models[this.fields];
|
|
140
|
-
}
|
|
141
|
-
if (empty.length) {
|
|
142
|
-
let msg = [];
|
|
143
|
-
if (this.mapFields) {
|
|
144
|
-
empty.forEach((item) => {
|
|
145
|
-
msg.push(this.mapFields[item]);
|
|
146
|
-
});
|
|
147
|
-
} else {
|
|
148
|
-
msg = empty;
|
|
158
|
+
param[this.fields] = models[this.fields];
|
|
149
159
|
}
|
|
150
|
-
if (
|
|
151
|
-
|
|
152
|
-
if (
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
let message =
|
|
156
|
-
msg.join(',') + (this.message.message || '不能为空！');
|
|
157
|
-
this.$message({
|
|
158
|
-
type: 'error',
|
|
159
|
-
...this.message,
|
|
160
|
-
message: message
|
|
160
|
+
if (empty.length) {
|
|
161
|
+
let msg = [];
|
|
162
|
+
if (this.mapFields) {
|
|
163
|
+
empty.forEach((item) => {
|
|
164
|
+
msg.push(this.mapFields[item]);
|
|
161
165
|
});
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
if (this.alert) {
|
|
165
|
-
flag = false;
|
|
166
|
-
if (typeof this.alert == 'boolean') {
|
|
167
|
-
this.$alert(msg.join(',') + '不能为空！', '提示', {
|
|
168
|
-
type: 'error',
|
|
169
|
-
confirmButtonText: '确定'
|
|
170
|
-
}).catch();
|
|
171
166
|
} else {
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
this.
|
|
167
|
+
msg = empty;
|
|
168
|
+
}
|
|
169
|
+
if (this.message) {
|
|
170
|
+
flag = false;
|
|
171
|
+
if (typeof this.message == 'boolean') {
|
|
172
|
+
this.$message.error(msg.join(',') + '不能为空！');
|
|
173
|
+
} else {
|
|
174
|
+
let message =
|
|
175
|
+
msg.join(',') + (this.message.message || '不能为空！');
|
|
176
|
+
this.$message({
|
|
177
|
+
type: 'error',
|
|
178
|
+
...this.message,
|
|
179
|
+
message: message
|
|
180
|
+
});
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
if (this.alert) {
|
|
184
|
+
flag = false;
|
|
185
|
+
if (typeof this.alert == 'boolean') {
|
|
186
|
+
this.$alert(msg.join(',') + '不能为空！', '提示', {
|
|
178
187
|
type: 'error',
|
|
179
188
|
confirmButtonText: '确定'
|
|
180
|
-
}
|
|
181
|
-
|
|
189
|
+
}).catch();
|
|
190
|
+
} else {
|
|
191
|
+
let message =
|
|
192
|
+
msg.join(',') + (this.alert.message || '不能为空！');
|
|
193
|
+
this.$alert(
|
|
194
|
+
message,
|
|
195
|
+
this.alert.titl || '提示',
|
|
196
|
+
this.alert.config || {
|
|
197
|
+
type: 'error',
|
|
198
|
+
confirmButtonText: '确定'
|
|
199
|
+
}
|
|
200
|
+
).catch();
|
|
201
|
+
}
|
|
182
202
|
}
|
|
183
203
|
}
|
|
184
204
|
}
|
|
185
205
|
}
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
206
|
+
if (this.btnGroup && this.syncKeys) {
|
|
207
|
+
let data = this.btnGroup.data;
|
|
208
|
+
if (
|
|
209
|
+
data &&
|
|
210
|
+
Object.keys(data).length &&
|
|
211
|
+
Object.keys(this.syncKeys).length
|
|
212
|
+
) {
|
|
213
|
+
for (let i in this.syncKeys) {
|
|
214
|
+
param[i] = data[this.syncKeys[i]];
|
|
215
|
+
}
|
|
196
216
|
}
|
|
197
217
|
}
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
218
|
+
if (flag) {
|
|
219
|
+
if (this.specs) {
|
|
220
|
+
if (typeof this.specs === 'boolean') {
|
|
221
|
+
windows = util.win.top.open(
|
|
222
|
+
util.urlJoinParams({ url: this.link, param: param }),
|
|
223
|
+
this.name,
|
|
224
|
+
`width=${width}px,height=${height}px,resizable=yes,status=yes,menubar=no,scrollbars=yes`
|
|
225
|
+
);
|
|
226
|
+
} else {
|
|
227
|
+
windows = util.win.top.open(
|
|
228
|
+
util.urlJoinParams({ url: this.link, param: param }),
|
|
229
|
+
this.name,
|
|
230
|
+
this.specs
|
|
231
|
+
);
|
|
232
|
+
}
|
|
207
233
|
} else {
|
|
208
234
|
windows = util.win.top.open(
|
|
209
|
-
util.urlJoinParams({ url: this.link, param: param })
|
|
210
|
-
this.name,
|
|
211
|
-
this.specs
|
|
235
|
+
util.urlJoinParams({ url: this.link, param: param })
|
|
212
236
|
);
|
|
213
237
|
}
|
|
214
|
-
} else {
|
|
215
|
-
windows = util.win.top.open(
|
|
216
|
-
util.urlJoinParams({ url: this.link, param: param })
|
|
217
|
-
);
|
|
218
238
|
}
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
239
|
+
if (windows) {
|
|
240
|
+
let times = setInterval(() => {
|
|
241
|
+
if (windows.closed) {
|
|
242
|
+
clearInterval(times);
|
|
243
|
+
this.closed && this.closed(param);
|
|
244
|
+
if (this.reload) {
|
|
245
|
+
this.esSelect && this.esSelect.reload(null, param, true);
|
|
246
|
+
this.esTable && this.esTable.reload(param);
|
|
247
|
+
}
|
|
228
248
|
}
|
|
229
|
-
}
|
|
230
|
-
}
|
|
249
|
+
}, 1000);
|
|
250
|
+
}
|
|
251
|
+
} else if (this.stop) {
|
|
252
|
+
evt.stopPropagation();
|
|
253
|
+
evt.preventDefault();
|
|
231
254
|
}
|
|
232
|
-
|
|
233
|
-
evt.stopPropagation();
|
|
234
|
-
evt.preventDefault();
|
|
255
|
+
this.$emit('click', evt);
|
|
235
256
|
}
|
|
236
|
-
this.$emit('click', evt);
|
|
237
257
|
}
|
|
238
258
|
},
|
|
239
259
|
render(h) {
|
|
@@ -245,7 +265,7 @@ export default {
|
|
|
245
265
|
}
|
|
246
266
|
let tag = 'el-button';
|
|
247
267
|
let clas = ['es-button'];
|
|
248
|
-
let props = { type: this.
|
|
268
|
+
let props = { type: this._type, size: this.size };
|
|
249
269
|
let attrs = {};
|
|
250
270
|
if (this.link && !this.open) {
|
|
251
271
|
const link = this.param
|
|
@@ -255,7 +275,7 @@ export default {
|
|
|
255
275
|
tag = 'a';
|
|
256
276
|
clas = clas.concat([
|
|
257
277
|
'el-button',
|
|
258
|
-
this.
|
|
278
|
+
this._type ? `el-button--${this._type}` : 'el-button--default',
|
|
259
279
|
this.size ? `el-button--${this.size}` : ''
|
|
260
280
|
]);
|
|
261
281
|
}
|
|
@@ -609,9 +609,10 @@
|
|
|
609
609
|
v-bind="
|
|
610
610
|
handleExclAttribute({
|
|
611
611
|
data: inline,
|
|
612
|
-
attrs: ['disabled']
|
|
612
|
+
attrs: ['disabled', 'type']
|
|
613
613
|
})
|
|
614
614
|
"
|
|
615
|
+
@click="handleClick(inline)"
|
|
615
616
|
></es-button>
|
|
616
617
|
<div
|
|
617
618
|
class="es-form-inline es-form-item-inline"
|
|
@@ -1520,9 +1521,10 @@
|
|
|
1520
1521
|
v-bind="
|
|
1521
1522
|
handleExclAttribute({
|
|
1522
1523
|
data: inline,
|
|
1523
|
-
attrs: ['disabled']
|
|
1524
|
+
attrs: ['disabled', 'type']
|
|
1524
1525
|
})
|
|
1525
1526
|
"
|
|
1527
|
+
@click="handleClick(inline)"
|
|
1526
1528
|
></es-button>
|
|
1527
1529
|
<div
|
|
1528
1530
|
class="es-form-inline es-form-item-inline"
|
|
@@ -2480,9 +2482,10 @@
|
|
|
2480
2482
|
v-bind="
|
|
2481
2483
|
handleExclAttribute({
|
|
2482
2484
|
data: inline,
|
|
2483
|
-
attrs: ['disabled']
|
|
2485
|
+
attrs: ['disabled', 'type']
|
|
2484
2486
|
})
|
|
2485
2487
|
"
|
|
2488
|
+
@click="handleClick(inline)"
|
|
2486
2489
|
></es-button>
|
|
2487
2490
|
<div
|
|
2488
2491
|
class="es-form-inline es-form-item-inline"
|
|
@@ -3352,9 +3355,10 @@
|
|
|
3352
3355
|
v-bind="
|
|
3353
3356
|
handleExclAttribute({
|
|
3354
3357
|
data: inline,
|
|
3355
|
-
attrs: ['disabled']
|
|
3358
|
+
attrs: ['disabled', 'type']
|
|
3356
3359
|
})
|
|
3357
3360
|
"
|
|
3361
|
+
@click="handleClick(inline)"
|
|
3358
3362
|
></es-button>
|
|
3359
3363
|
<div
|
|
3360
3364
|
class="es-form-inline es-form-item-inline"
|
|
@@ -4530,13 +4534,13 @@ export default {
|
|
|
4530
4534
|
if (res.validate) {
|
|
4531
4535
|
this.$refs.esForm.validate(async (valid, fields, triggers) => {
|
|
4532
4536
|
if (valid) {
|
|
4533
|
-
res.event(res, this.models);
|
|
4537
|
+
res.event(res, this.models, index);
|
|
4534
4538
|
} else {
|
|
4535
4539
|
this.setScroll(valid, triggers, this.$refs.scrollbar);
|
|
4536
4540
|
}
|
|
4537
4541
|
});
|
|
4538
4542
|
} else {
|
|
4539
|
-
res.event(res, this.models);
|
|
4543
|
+
res.event(res, this.models, index);
|
|
4540
4544
|
}
|
|
4541
4545
|
} else if (res.type === 'step') {
|
|
4542
4546
|
if (this.stepActive < index) {
|
|
@@ -495,9 +495,10 @@
|
|
|
495
495
|
v-bind="
|
|
496
496
|
handleExclAttribute({
|
|
497
497
|
data: inline,
|
|
498
|
-
attrs: ['disabled']
|
|
498
|
+
attrs: ['disabled', 'type']
|
|
499
499
|
})
|
|
500
500
|
"
|
|
501
|
+
@click="handleClick(inline)"
|
|
501
502
|
></es-button>
|
|
502
503
|
<div
|
|
503
504
|
v-else-if="!inline.hide"
|
|
@@ -1298,7 +1299,7 @@ export default {
|
|
|
1298
1299
|
this.cols = widths;
|
|
1299
1300
|
},
|
|
1300
1301
|
handleClick(res) {
|
|
1301
|
-
this.$emit('
|
|
1302
|
+
this.$emit('btnClick', res, this.models);
|
|
1302
1303
|
},
|
|
1303
1304
|
handleChange(res, value, data) {
|
|
1304
1305
|
if (res.events && res.events.change) {
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="es-layout-item" ref="move" :style="defaultaStyle">
|
|
3
|
+
<es-card> </es-card>
|
|
4
|
+
<div class="es-layout-resizable-width"></div>
|
|
5
|
+
<div class="es-layout-resizable-height"></div>
|
|
6
|
+
<div class="es-layout-resizable"></div>
|
|
7
|
+
</div>
|
|
8
|
+
</template>
|
|
9
|
+
<script>
|
|
10
|
+
// import '@interactjs/auto-start';
|
|
11
|
+
// import '@interactjs/auto-scroll';
|
|
12
|
+
// import '@interactjs/actions/drag';
|
|
13
|
+
// import '@interactjs/actions/resize';
|
|
14
|
+
// import '@interactjs/modifiers';
|
|
15
|
+
// import '@interactjs/dev-tools';
|
|
16
|
+
import interact from 'interactjs';
|
|
17
|
+
export default {
|
|
18
|
+
name: 'LayoutItem',
|
|
19
|
+
components: {},
|
|
20
|
+
props: {
|
|
21
|
+
redact: {
|
|
22
|
+
type: Boolean,
|
|
23
|
+
default: true
|
|
24
|
+
},
|
|
25
|
+
width: {
|
|
26
|
+
type: String,
|
|
27
|
+
default: '100%'
|
|
28
|
+
},
|
|
29
|
+
height: {
|
|
30
|
+
type: String,
|
|
31
|
+
default: '100px'
|
|
32
|
+
},
|
|
33
|
+
left: String,
|
|
34
|
+
top: String
|
|
35
|
+
},
|
|
36
|
+
computed: {
|
|
37
|
+
defaultaStyle() {
|
|
38
|
+
return {
|
|
39
|
+
width: this.width,
|
|
40
|
+
height: this.height,
|
|
41
|
+
left: this.left,
|
|
42
|
+
top: this.top
|
|
43
|
+
};
|
|
44
|
+
},
|
|
45
|
+
cardStyle() {
|
|
46
|
+
return {
|
|
47
|
+
width: this.width,
|
|
48
|
+
height: this.height
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
watch: {},
|
|
53
|
+
data() {
|
|
54
|
+
return {
|
|
55
|
+
position: { x: 0, y: 0 },
|
|
56
|
+
move: null
|
|
57
|
+
};
|
|
58
|
+
},
|
|
59
|
+
created() {
|
|
60
|
+
this.position = {
|
|
61
|
+
x: parseInt(this.left) || 0,
|
|
62
|
+
y: parseInt(this.top) || 0
|
|
63
|
+
};
|
|
64
|
+
console.log(this.position);
|
|
65
|
+
},
|
|
66
|
+
mounted() {
|
|
67
|
+
console.log(interact, this.$refs.move);
|
|
68
|
+
this.move = interact(this.$refs.move);
|
|
69
|
+
this.move.draggable({
|
|
70
|
+
listeners: {
|
|
71
|
+
start: (event) => {
|
|
72
|
+
console.log(event.type, event.target);
|
|
73
|
+
},
|
|
74
|
+
move: (event) => {
|
|
75
|
+
this.position.x += event.dx;
|
|
76
|
+
this.position.y += event.dy;
|
|
77
|
+
event.target.style.transform = `translate(${this.position.x}px, ${this.position.y}px)`;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
this.move.resizable({
|
|
82
|
+
edges: { top: true, left: true, bottom: true, right: true },
|
|
83
|
+
listeners: {
|
|
84
|
+
move: function (event) {
|
|
85
|
+
let { x, y } = event.target.dataset;
|
|
86
|
+
|
|
87
|
+
x = (parseFloat(x) || 0) + event.deltaRect.left;
|
|
88
|
+
y = (parseFloat(y) || 0) + event.deltaRect.top;
|
|
89
|
+
|
|
90
|
+
Object.assign(event.target.style, {
|
|
91
|
+
width: `${event.rect.width}px`,
|
|
92
|
+
height: `${event.rect.height}px`,
|
|
93
|
+
transform: `translate(${x}px, ${y}px)`
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
Object.assign(event.target.dataset, { x, y });
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
},
|
|
101
|
+
methods: {},
|
|
102
|
+
beforeDestroy() {}
|
|
103
|
+
};
|
|
104
|
+
</script>
|
|
@@ -1,8 +1,13 @@
|
|
|
1
|
-
<template
|
|
1
|
+
<template>
|
|
2
|
+
<div class="es-layout">
|
|
3
|
+
<layout-item></layout-item>
|
|
4
|
+
</div>
|
|
5
|
+
</template>
|
|
2
6
|
<script>
|
|
7
|
+
import layoutItem from './item.vue';
|
|
3
8
|
export default {
|
|
4
9
|
name: 'EsLayout',
|
|
5
|
-
components: {},
|
|
10
|
+
components: { layoutItem },
|
|
6
11
|
props: {},
|
|
7
12
|
computed: {},
|
|
8
13
|
watch: {},
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
@import './common/var.scss';
|
|
2
|
+
.es-layout {
|
|
3
|
+
height: 100%;
|
|
4
|
+
position: relative;
|
|
5
|
+
transition: height 200ms ease;
|
|
6
|
+
padding: 6px;
|
|
7
|
+
.es-layout-item {
|
|
8
|
+
position: absolute;
|
|
9
|
+
padding: 6px;
|
|
10
|
+
touch-action: none;
|
|
11
|
+
user-select: none;
|
|
12
|
+
.es-card {
|
|
13
|
+
width: 100%;
|
|
14
|
+
height: 100%;
|
|
15
|
+
}
|
|
16
|
+
.es-layout-resizable {
|
|
17
|
+
width: 20px;
|
|
18
|
+
height: 20px;
|
|
19
|
+
position: absolute;
|
|
20
|
+
right: 6px;
|
|
21
|
+
bottom: 6px;
|
|
22
|
+
z-index: 9999;
|
|
23
|
+
cursor: se-resize;
|
|
24
|
+
}
|
|
25
|
+
.es-layout-resizable-width {
|
|
26
|
+
width: 10px;
|
|
27
|
+
position: absolute;
|
|
28
|
+
top: 6px;
|
|
29
|
+
right: 6px;
|
|
30
|
+
bottom: 6px;
|
|
31
|
+
z-index: 9998;
|
|
32
|
+
cursor: e-resize;
|
|
33
|
+
}
|
|
34
|
+
.es-layout-resizable-height {
|
|
35
|
+
height: 10px;
|
|
36
|
+
position: absolute;
|
|
37
|
+
left: 6px;
|
|
38
|
+
right: 6px;
|
|
39
|
+
bottom: 6px;
|
|
40
|
+
z-index: 9998;
|
|
41
|
+
cursor: s-resize;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|