Skip to content
This repository was archived by the owner on Nov 13, 2024. It is now read-only.

Commit 6659cc6

Browse files
yumao233yumao233
authored
Refactor: button group for phone
1 parent a2d9e21 commit 6659cc6

File tree

8 files changed

+340
-252
lines changed

8 files changed

+340
-252
lines changed

‎src/app/views/FileManager/index.vue‎

Lines changed: 84 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -11,66 +11,89 @@
1111
</span>
1212
</template>
1313
<template #default>
14-
<el-row :gutter="20">
15-
<el-col :xs="24" :md="6" :offset="0">
16-
<ItemGroup>
17-
<el-button size="small" @click="back">
18-
<i class="el-icon-pie-chart"></i> {{ $t("schedule.backToConsole") }}
19-
</el-button>
20-
<el-button size="small" @click="refresh">
21-
<i class="el-icon-refresh"></i> {{ $t("general.refresh") }}
22-
</el-button>
23-
</ItemGroup>
24-
</el-col>
25-
<el-col :xs="24" :md="18" :offset="0" class="text-align-right">
26-
<ItemGroup>
27-
<el-button size="small" @click="toUpDir">
28-
<i class="el-icon-pie-chart"></i> {{ $t("fileManager.upperDir") }}
29-
</el-button>
30-
<el-button size="small" @click="mkdir">
31-
<i class="el-icon-folder-add"></i> {{ $t("fileManager.mkdir") }}
32-
</el-button>
33-
<el-button size="small" @click="compress(1)">
34-
<i class="el-icon-box"></i> {{ $t("fileManager.zip") }}
35-
</el-button>
36-
<el-button size="small" @click="compress(2)">
37-
<i class="el-icon-files"></i> {{ $t("fileManager.unzip") }}
38-
</el-button>
39-
<el-button size="small" @click="rename">
40-
<i class="el-icon-document"></i> {{ $t("fileManager.rename") }}
41-
</el-button>
42-
<el-button size="small" @click="move">
43-
<i class="el-icon-scissors"></i> {{ $t("fileManager.cut") }}
44-
</el-button>
45-
<el-button size="small" @click="copy">
46-
<i class="el-icon-document-copy"></i> {{ $t("fileManager.copy") }}
47-
</el-button>
48-
<el-button size="small" @click="paste">
49-
<i class="el-icon-tickets"></i> {{ $t("fileManager.paste") }}
50-
</el-button>
51-
<!-- <el-button size="small" type="success" @click="upload">
52-
<i class="el-icon-plus"></i> {{ $t("fileManager.uploadFile") }}
53-
</el-button> -->
54-
<el-upload
55-
action=""
56-
ref="upload"
57-
:before-upload="handleUploadBefore"
58-
:auto-upload="true"
59-
:show-file-list="false"
60-
:limit="1"
61-
style="display: inline-block"
62-
>
63-
<el-button size="small" type="success" @click="upload">
64-
<i class="el-icon-plus"></i> {{ $t("fileManager.uploadFile") }}
65-
</el-button>
66-
</el-upload>
67-
68-
<el-button size="small" type="danger" @click="deleteFiles">
69-
<i class="el-icon-document-delete"></i> {{ $t("general.delete") }}
70-
</el-button>
71-
</ItemGroup>
72-
</el-col>
73-
</el-row>
14+
<div>
15+
<el-row :gutter="20">
16+
<el-col :span="24" :offset="0">
17+
<FunctionGroup :container="true">
18+
<FunctionComponent>
19+
<el-button size="small" @click="back">
20+
<i class="el-icon-pie-chart"></i> {{ $t("schedule.backToConsole") }}
21+
</el-button>
22+
</FunctionComponent>
23+
24+
<FunctionComponent>
25+
<el-button size="small" @click="refresh">
26+
<i class="el-icon-refresh"></i> {{ $t("general.refresh") }}
27+
</el-button>
28+
</FunctionComponent>
29+
30+
<FunctionGroup align="right">
31+
<FunctionComponent>
32+
<el-button size="small" @click="toUpDir">
33+
<i class="el-icon-pie-chart"></i> {{ $t("fileManager.upperDir") }}
34+
</el-button>
35+
</FunctionComponent>
36+
<FunctionComponent>
37+
<el-button size="small" @click="mkdir">
38+
<i class="el-icon-folder-add"></i> {{ $t("fileManager.mkdir") }}
39+
</el-button>
40+
</FunctionComponent>
41+
<FunctionComponent>
42+
<el-button size="small" @click="compress(1)">
43+
<i class="el-icon-box"></i> {{ $t("fileManager.zip") }}
44+
</el-button>
45+
</FunctionComponent>
46+
<FunctionComponent>
47+
<el-button size="small" @click="compress(2)">
48+
<i class="el-icon-files"></i> {{ $t("fileManager.unzip") }}
49+
</el-button>
50+
</FunctionComponent>
51+
<FunctionComponent>
52+
<el-button size="small" @click="rename">
53+
<i class="el-icon-document"></i> {{ $t("fileManager.rename") }}
54+
</el-button>
55+
</FunctionComponent>
56+
<FunctionComponent>
57+
<el-button size="small" @click="move">
58+
<i class="el-icon-scissors"></i> {{ $t("fileManager.cut") }}
59+
</el-button>
60+
</FunctionComponent>
61+
<FunctionComponent>
62+
<el-button size="small" @click="copy">
63+
<i class="el-icon-document-copy"></i> {{ $t("fileManager.copy") }}
64+
</el-button>
65+
</FunctionComponent>
66+
<FunctionComponent>
67+
<el-button size="small" @click="paste">
68+
<i class="el-icon-tickets"></i> {{ $t("fileManager.paste") }}
69+
</el-button>
70+
</FunctionComponent>
71+
<FunctionComponent>
72+
<el-button size="small" type="danger" @click="deleteFiles">
73+
<i class="el-icon-document-delete"></i> {{ $t("general.delete") }}
74+
</el-button>
75+
</FunctionComponent>
76+
</FunctionGroup>
77+
78+
<FunctionComponent>
79+
<el-upload
80+
action=""
81+
ref="fileForm"
82+
:before-upload="handleUploadBefore"
83+
:auto-upload="true"
84+
:show-file-list="false"
85+
:limit="1"
86+
style="display: inline-block"
87+
>
88+
<el-button size="small" type="success" @click="upload">
89+
<i class="el-icon-plus"></i> {{ $t("fileManager.uploadFile") }}
90+
</el-button>
91+
</el-upload>
92+
</FunctionComponent>
93+
</FunctionGroup></el-col
94+
>
95+
</el-row>
96+
</div>
7497

7598
<div class="row-mt page-pagination">
7699
<div>
@@ -646,7 +669,7 @@ export default {
646669
});
647670
this.$message({ message: this.$t("fileManager.uploadOk"), type: "success" });
648671
await this.refresh();
649-
this.$refs.fileForm.reset();
672+
// this.$refs.fileForm.reset();
650673
this.percentComplete = -1;
651674
} catch (error) {
652675
this.$message({ message: `Error: ${error}`, type: "error" });

‎src/app/views/Instances.vue‎

Lines changed: 106 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -7,87 +7,116 @@
77
<template #title>{{ $t("instances.instancesList") }}</template>
88
<template #default>
99
<el-row :gutter="20" justify="space-between" class="row-mb">
10-
<el-col :md="12" :offset="0">
11-
<ItemGroup>
12-
<el-select
13-
style="width: 320px"
14-
v-model="currentRemoteUuid"
15-
filterable
16-
:placeholder="$t('instances.selectDaemon')"
17-
size="small"
18-
@change="remoteSelectHandle"
19-
>
20-
<el-option
21-
v-for="item in remoteList"
22-
:key="item.value"
23-
:label="item.label"
24-
:value="item.value"
10+
<el-col :md="24" :offset="0">
11+
<FunctionGroup :container="true">
12+
<FunctionComponent>
13+
<el-select
14+
style="width: 320px"
15+
v-model="currentRemoteUuid"
16+
filterable
17+
:placeholder="$t('instances.selectDaemon')"
18+
size="small"
19+
@change="remoteSelectHandle"
2520
>
26-
</el-option>
27-
</el-select>
28-
<el-input
29-
v-model="query.instanceName"
30-
:placeholder="$t('instances.selectDaemon')"
31-
size="small"
32-
style="width: 160px"
33-
></el-input>
34-
<el-button size="small" @click="refresh" type="primary">
35-
<i class="el-icon-refresh"></i> {{ $t("general.search") }}
36-
</el-button>
37-
</ItemGroup>
38-
</el-col>
39-
<el-col :md="12" :offset="0">
40-
<FunctionGroup :items="functionGroups">
41-
<FunctionComponent
42-
component="button"
43-
type="success"
44-
size="small"
45-
:plain="true"
46-
@click="toNewInstance"
47-
>
48-
New My Instance
21+
<el-option
22+
v-for="item in remoteList"
23+
:key="item.value"
24+
:label="item.label"
25+
:value="item.value"
26+
>
27+
</el-option>
28+
</el-select>
4929
</FunctionComponent>
50-
<FunctionComponent component="button" size="small" :plain="true" @click="toNewInstance">
51-
Delete My Instance
30+
<FunctionComponent>
31+
<el-input
32+
v-model="query.instanceName"
33+
:placeholder="$t('instances.selectDaemon')"
34+
size="small"
35+
style="width: 160px"
36+
></el-input>
5237
</FunctionComponent>
38+
<FunctionComponent>
39+
<el-button size="small" @click="refresh" type="primary">
40+
<i class="el-icon-refresh"></i> {{ $t("general.search") }}
41+
</el-button>
42+
</FunctionComponent>
43+
<FunctionGroup align="right">
44+
<FunctionComponent
45+
component="button"
46+
type="success"
47+
size="small"
48+
:plain="true"
49+
v-if="showTableList"
50+
@click="changeView(1)"
51+
>
52+
{{ $t("instances.showCardList") }}
53+
</FunctionComponent>
54+
55+
<FunctionComponent
56+
component="button"
57+
size="small"
58+
type="primary"
59+
:plain="true"
60+
v-if="!showTableList"
61+
@click="changeView(2)"
62+
>
63+
{{ $t("instances.showTableList") }}
64+
</FunctionComponent>
65+
66+
<FunctionComponent
67+
component="button"
68+
size="small"
69+
type="success"
70+
@click="toNewInstance"
71+
>
72+
<i class="el-icon-plus"></i> {{ $t("instances.newInstance") }}
73+
</FunctionComponent>
74+
75+
<FunctionComponent
76+
component="button"
77+
size="small"
78+
v-if="showTableList"
79+
@click="batOpen"
80+
>
81+
<i class="el-icon-video-play"></i> {{ $t("instances.start") }}
82+
</FunctionComponent>
83+
<FunctionComponent
84+
component="button"
85+
size="small"
86+
v-if="showTableList"
87+
@click="batStop"
88+
>
89+
<i class="el-icon-video-pause"></i> {{ $t("instances.stop") }}
90+
</FunctionComponent>
91+
<FunctionComponent
92+
component="button"
93+
size="small"
94+
v-if="showTableList"
95+
@click="batKill"
96+
>
97+
<i class="el-icon-video-pause"></i> {{ $t("instances.kill") }}
98+
</FunctionComponent>
99+
<FunctionComponent
100+
component="button"
101+
size="small"
102+
type="danger"
103+
:plain="true"
104+
v-if="showTableList"
105+
@click="batDelete(1)"
106+
>
107+
<i class="el-icon-delete"></i> {{ $t("instances.remove") }}
108+
</FunctionComponent>
109+
<FunctionComponent
110+
component="button"
111+
size="small"
112+
:plain="true"
113+
v-if="showTableList"
114+
@click="batDelete(2)"
115+
>
116+
<i class="el-icon-delete"></i> {{ $t("instances.delete") }}
117+
</FunctionComponent>
118+
</FunctionGroup>
53119
</FunctionGroup>
54-
<!-- <ItemGroup style="text-align: right">
55-
<el-button
56-
type="primary"
57-
size="small"
58-
plain
59-
@click="changeView(1)"
60-
v-show="showTableList"
61-
>{{ $t("instances.showCardList") }}</el-button
62-
>
63-
<el-button
64-
type="primary"
65-
size="small"
66-
plain
67-
@click="changeView(2)"
68-
v-show="!showTableList"
69-
>{{ $t("instances.showTableList") }}</el-button
70-
>
71-
72-
<el-button size="small" type="success" @click="toNewInstance">
73-
<i class="el-icon-plus"></i> {{ $t("instances.newInstance") }}
74-
</el-button>
75-
<el-button size="small" @click="batOpen" v-if="showTableList">
76-
<i class="el-icon-video-play"></i> {{ $t("instances.start") }}
77-
</el-button>
78-
<el-button size="small" @click="batStop" v-if="showTableList">
79-
<i class="el-icon-video-pause"></i> {{ $t("instances.stop") }}
80-
</el-button>
81-
<el-button size="small" @click="batKill" v-if="showTableList">
82-
<i class="el-icon-video-pause"></i> {{ $t("instances.kill") }}
83-
</el-button>
84-
<el-button size="small" type="danger" plain @click="batDelete(1)" v-if="showTableList">
85-
<i class="el-icon-delete"></i> {{ $t("instances.remove") }}
86-
</el-button>
87-
<el-button size="small" type="danger" @click="batDelete(2)" v-if="showTableList">
88-
<i class="el-icon-delete"></i> {{ $t("instances.delete") }}
89-
</el-button>
90-
</ItemGroup> -->
91120
</el-col>
92121
</el-row>
93122

@@ -405,18 +434,6 @@ export default {
405434
components: { Panel, CircleCheckFilled, CircleCloseFilled },
406435
data() {
407436
return {
408-
functionGroups: [
409-
{
410-
type: "button",
411-
binds: {
412-
type: "success"
413-
},
414-
events: {
415-
click: this.toNewInstance
416-
},
417-
label: "New Instance"
418-
}
419-
],
420437
remoteList: [],
421438
currentRemoteUuid: null,
422439
instances: [],

0 commit comments

Comments
 (0)