starred/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2026-09-22 00:00:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: move container batch operations to table footer (#13348)

Browse Source
This commit is contained in:
ssongliu
2026-07-23 15:45:53 +08:00
committed by GitHub
parent 7f450544e1
commit 6b1480c5fa
3 changed files with 98 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/table/complex/ComplexTable.vue
+28 -8
View File
@@ -122,10 +122,7 @@
</div>
<div class="table-footer-container">
<div class="footer-left" v-if="slots.footerLeft">
<el-checkbox v-model="leftSelect" @change="toggleSelection"></el-checkbox>
<div class="ml-4">
<slot name="footerLeft"></slot>
</div>
<slot name="footerLeft" :selected="leftSelect" :toggle-selection="toggleSelection"></slot>
</div>
<div
@@ -680,13 +677,36 @@ onBeforeUnmount(() => {
.footer-left {
flex-shrink: 0;
margin-right: 16px;
margin-left: 12px;
display: flex;
align-items: center;
.footer-left-button {
margin-left: 17px;
:deep(.footer-left-button) {
display: flex;
align-items: stretch;
height: 32px;
}
:deep(.footer-left-button .el-select) {
height: 32px;
}
:deep(.footer-left-button .el-select__wrapper) {
height: 32px;
min-height: 32px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
:deep(.footer-left-button .el-checkbox) {
--el-checkbox-height: 24px;
margin-right: 0;
}
:deep(.footer-left-button > .el-button) {
height: 32px;
margin-left: -1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}
frontend/src/views/container/container/index.vue
+60 -37
View File
@@ -31,37 +31,6 @@
<el-button v-permission type="primary" plain @click="onClean()">
{{ $t('container.containerPrune') }}
</el-button>
<el-button-group class="button-group">
<el-button v-permission :disabled="checkStatus('start', null)" @click="onOperate('start', null)">
{{ $t('commons.operate.start') }}
</el-button>
<el-button v-permission :disabled="checkStatus('stop', null)" @click="onOperate('stop', null)">
{{ $t('commons.operate.stop') }}
</el-button>
<el-button
v-permission
:disabled="checkStatus('restart', null)"
@click="onOperate('restart', null)"
>
{{ $t('commons.button.restart') }}
</el-button>
<el-button v-permission :disabled="checkStatus('kill', null)" @click="onOperate('kill', null)">
{{ $t('container.kill') }}
</el-button>
<el-button v-permission :disabled="checkStatus('pause', null)" @click="onOperate('pause', null)">
{{ $t('container.pause') }}
</el-button>
<el-button
v-permission
:disabled="checkStatus('unpause', null)"
@click="onOperate('unpause', null)"
>
{{ $t('container.unpause') }}
</el-button>
<el-button v-permission :disabled="checkStatus('remove', null)" @click="onOperate('remove', null)">
{{ $t('commons.button.delete') }}
</el-button>
</el-button-group>
</template>
<template #rightToolBar>
<TableViewSwitch v-model="viewMode" storage-key="container" />
@@ -102,7 +71,7 @@
localKey="containerColumn"
:heightDiff="300"
>
<el-table-column type="selection" />
<el-table-column type="selection" width="32" />
<el-table-column
:label="$t('commons.table.name')"
min-width="250"
@@ -395,6 +364,64 @@
:fixed="isMobile ? false : 'right'"
prop="operate"
/>
<template #footerLeft="{ selected, toggleSelection }">
<div class="footer-left-button" v-permission>
<el-select class="p-w-200" v-model="batchOperation">
<template #prefix>
<el-checkbox
:model-value="selected"
@click.stop
@change="toggleSelection"
></el-checkbox>
</template>
<el-option
:label="$t('container.start')"
value="start"
:disabled="checkStatus('start', null)"
/>
<el-option
:label="$t('container.stop')"
value="stop"
:disabled="checkStatus('stop', null)"
/>
<el-option
:label="$t('container.restart')"
value="restart"
:disabled="checkStatus('restart', null)"
/>
<el-option
:label="$t('container.kill')"
value="kill"
:disabled="checkStatus('kill', null)"
/>
<el-option
:label="$t('container.pause')"
value="pause"
:disabled="checkStatus('pause', null)"
/>
<el-option
:label="$t('container.unpause')"
value="unpause"
:disabled="checkStatus('unpause', null)"
/>
<el-option
:label="$t('container.remove')"
value="remove"
:disabled="checkStatus('remove', null)"
/>
</el-select>
<el-button
type="primary"
:disabled="
selects.length === 0 || batchOperation === '' || checkStatus(batchOperation, null)
"
@click="onOperate(batchOperation, null)"
>
{{ $t('website.batchOperate') }}
<span class="ml-1" v-if="selects.length > 0">({{ selects.length }})</span>
</el-button>
</div>
</template>
</ComplexTable>
</template>
@@ -517,6 +544,7 @@ const columns = ref([]);
const batchNames = ref();
const batchOp = ref();
const batchOperation = ref('');
const taskLogRef = ref();
const tags = ref([]);
@@ -1079,11 +1107,6 @@ onMounted(() => {
font-size: 6px;
cursor: pointer;
}
.button-group .el-button {
margin-left: -1px !important;
position: relative !important;
z-index: 1 !important;
}
.tag-button {
margin-top: -5px;
margin-right: 10px;
frontend/src/views/website/website/index.vue
+10 -5
View File
@@ -83,7 +83,7 @@
placement: 'bottom-start',
}"
>
<el-table-column type="selection" width="30" />
<el-table-column type="selection" width="32" />
<el-table-column
:label="$t('commons.table.name')"
fix
@@ -275,9 +275,16 @@
fix
card-type="button"
/>
<template #footerLeft>
<div class="footer-left-button">
<template #footerLeft="{ selected, toggleSelection }">
<div class="footer-left-button" v-permission>
<el-select class="p-w-200" v-model="batchReq.operate">
<template #prefix>
<el-checkbox
:model-value="selected"
@click.stop
@change="toggleSelection"
></el-checkbox>
</template>
<el-option
:label="$t('commons.button.start') + $t('menu.website')"
value="start"
@@ -300,9 +307,7 @@
></el-option>
</el-select>
<el-button
class="ml-2"
type="primary"
v-permission
:disabled="selects.length == 0 || batchReq.operate == ''"
@click="batchOp"
>