Skip to content

Commit 6b1480c

Browse files
ssongliussongliu
authored
feat: move container batch operations to table footer (#13348)
1 parent 7f45054 commit 6b1480c

3 files changed

Lines changed: 98 additions & 50 deletions

File tree

‎frontend/src/components/table/complex/ComplexTable.vue‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -122,10 +122,7 @@
122122
</div>
123123
<div class="table-footer-container">
124124
<div class="footer-left" v-if="slots.footerLeft">
125-
<el-checkbox v-model="leftSelect" @change="toggleSelection"></el-checkbox>
126-
<div class="ml-4">
127-
<slot name="footerLeft"></slot>
128-
</div>
125+
<slot name="footerLeft" :selected="leftSelect" :toggle-selection="toggleSelection"></slot>
129126
</div>
130127

131128
<div
@@ -680,13 +677,36 @@ onBeforeUnmount(() => {
680677
681678
.footer-left {
682679
flex-shrink: 0;
683-
margin-right: 16px;
684-
margin-left: 12px;
685680
display: flex;
681+
align-items: center;
686682
687-
.footer-left-button {
688-
margin-left: 17px;
683+
:deep(.footer-left-button) {
689684
display: flex;
685+
align-items: stretch;
686+
height: 32px;
687+
}
688+
689+
:deep(.footer-left-button .el-select) {
690+
height: 32px;
691+
}
692+
693+
:deep(.footer-left-button .el-select__wrapper) {
694+
height: 32px;
695+
min-height: 32px;
696+
border-top-right-radius: 0;
697+
border-bottom-right-radius: 0;
698+
}
699+
700+
:deep(.footer-left-button .el-checkbox) {
701+
--el-checkbox-height: 24px;
702+
margin-right: 0;
703+
}
704+
705+
:deep(.footer-left-button > .el-button) {
706+
height: 32px;
707+
margin-left: -1px;
708+
border-top-left-radius: 0;
709+
border-bottom-left-radius: 0;
690710
}
691711
}
692712
}

‎frontend/src/views/container/container/index.vue‎

Lines changed: 60 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -31,37 +31,6 @@
3131
<el-button v-permission type="primary" plain @click="onClean()">
3232
{{ $t('container.containerPrune') }}
3333
</el-button>
34-
<el-button-group class="button-group">
35-
<el-button v-permission :disabled="checkStatus('start', null)" @click="onOperate('start', null)">
36-
{{ $t('commons.operate.start') }}
37-
</el-button>
38-
<el-button v-permission :disabled="checkStatus('stop', null)" @click="onOperate('stop', null)">
39-
{{ $t('commons.operate.stop') }}
40-
</el-button>
41-
<el-button
42-
v-permission
43-
:disabled="checkStatus('restart', null)"
44-
@click="onOperate('restart', null)"
45-
>
46-
{{ $t('commons.button.restart') }}
47-
</el-button>
48-
<el-button v-permission :disabled="checkStatus('kill', null)" @click="onOperate('kill', null)">
49-
{{ $t('container.kill') }}
50-
</el-button>
51-
<el-button v-permission :disabled="checkStatus('pause', null)" @click="onOperate('pause', null)">
52-
{{ $t('container.pause') }}
53-
</el-button>
54-
<el-button
55-
v-permission
56-
:disabled="checkStatus('unpause', null)"
57-
@click="onOperate('unpause', null)"
58-
>
59-
{{ $t('container.unpause') }}
60-
</el-button>
61-
<el-button v-permission :disabled="checkStatus('remove', null)" @click="onOperate('remove', null)">
62-
{{ $t('commons.button.delete') }}
63-
</el-button>
64-
</el-button-group>
6534
</template>
6635
<template #rightToolBar>
6736
<TableViewSwitch v-model="viewMode" storage-key="container" />
@@ -102,7 +71,7 @@
10271
localKey="containerColumn"
10372
:heightDiff="300"
10473
>
105-
<el-table-column type="selection" />
74+
<el-table-column type="selection" width="32" />
10675
<el-table-column
10776
:label="$t('commons.table.name')"
10877
min-width="250"
@@ -395,6 +364,64 @@
395364
:fixed="isMobile ? false : 'right'"
396365
prop="operate"
397366
/>
367+
<template #footerLeft="{ selected, toggleSelection }">
368+
<div class="footer-left-button" v-permission>
369+
<el-select class="p-w-200" v-model="batchOperation">
370+
<template #prefix>
371+
<el-checkbox
372+
:model-value="selected"
373+
@click.stop
374+
@change="toggleSelection"
375+
></el-checkbox>
376+
</template>
377+
<el-option
378+
:label="$t('container.start')"
379+
value="start"
380+
:disabled="checkStatus('start', null)"
381+
/>
382+
<el-option
383+
:label="$t('container.stop')"
384+
value="stop"
385+
:disabled="checkStatus('stop', null)"
386+
/>
387+
<el-option
388+
:label="$t('container.restart')"
389+
value="restart"
390+
:disabled="checkStatus('restart', null)"
391+
/>
392+
<el-option
393+
:label="$t('container.kill')"
394+
value="kill"
395+
:disabled="checkStatus('kill', null)"
396+
/>
397+
<el-option
398+
:label="$t('container.pause')"
399+
value="pause"
400+
:disabled="checkStatus('pause', null)"
401+
/>
402+
<el-option
403+
:label="$t('container.unpause')"
404+
value="unpause"
405+
:disabled="checkStatus('unpause', null)"
406+
/>
407+
<el-option
408+
:label="$t('container.remove')"
409+
value="remove"
410+
:disabled="checkStatus('remove', null)"
411+
/>
412+
</el-select>
413+
<el-button
414+
type="primary"
415+
:disabled="
416+
selects.length === 0 || batchOperation === '' || checkStatus(batchOperation, null)
417+
"
418+
@click="onOperate(batchOperation, null)"
419+
>
420+
{{ $t('website.batchOperate') }}
421+
<span class="ml-1" v-if="selects.length > 0">({{ selects.length }})</span>
422+
</el-button>
423+
</div>
424+
</template>
398425
</ComplexTable>
399426
</template>
400427

@@ -517,6 +544,7 @@ const columns = ref([]);
517544
518545
const batchNames = ref();
519546
const batchOp = ref();
547+
const batchOperation = ref('');
520548
const taskLogRef = ref();
521549
522550
const tags = ref([]);
@@ -1079,11 +1107,6 @@ onMounted(() => {
10791107
font-size: 6px;
10801108
cursor: pointer;
10811109
}
1082-
.button-group .el-button {
1083-
margin-left: -1px !important;
1084-
position: relative !important;
1085-
z-index: 1 !important;
1086-
}
10871110
.tag-button {
10881111
margin-top: -5px;
10891112
margin-right: 10px;

‎frontend/src/views/website/website/index.vue‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
placement: 'bottom-start',
8484
}"
8585
>
86-
<el-table-column type="selection" width="30" />
86+
<el-table-column type="selection" width="32" />
8787
<el-table-column
8888
:label="$t('commons.table.name')"
8989
fix
@@ -275,9 +275,16 @@
275275
fix
276276
card-type="button"
277277
/>
278-
<template #footerLeft>
279-
<div class="footer-left-button">
278+
<template #footerLeft="{ selected, toggleSelection }">
279+
<div class="footer-left-button" v-permission>
280280
<el-select class="p-w-200" v-model="batchReq.operate">
281+
<template #prefix>
282+
<el-checkbox
283+
:model-value="selected"
284+
@click.stop
285+
@change="toggleSelection"
286+
></el-checkbox>
287+
</template>
281288
<el-option
282289
:label="$t('commons.button.start') + $t('menu.website')"
283290
value="start"
@@ -300,9 +307,7 @@
300307
></el-option>
301308
</el-select>
302309
<el-button
303-
class="ml-2"
304310
type="primary"
305-
v-permission
306311
:disabled="selects.length == 0 || batchReq.operate == ''"
307312
@click="batchOp"
308313
>

0 commit comments

Comments
 (0)