mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-01-19 08:19:15 +08:00
style: 快照状态界面样式调整 (#3748)
This commit is contained in:
ssongliu
GitHub
parent
8b0d73b5d5
commit
3846dcef86
@ -108,6 +108,7 @@ export namespace Setting {
|
||||
id: number;
|
||||
name: string;
|
||||
from: string;
|
||||
defaultDownload: string;
|
||||
description: string;
|
||||
status: string;
|
||||
message: string;
|
||||
|
||||
@ -117,6 +117,9 @@ const rules = reactive({
|
||||
driveCode: [{ validator: checkDriveCode, required: true, trigger: 'blur' }],
|
||||
});
|
||||
function checkDriveCode(rule: any, value: any, callback: any) {
|
||||
if (!value) {
|
||||
return callback(new Error(i18n.global.t('setting.codeWarning')));
|
||||
}
|
||||
const reg = /^[A-Za-z0-9_.-]+$/;
|
||||
if (!reg.test(value)) {
|
||||
return callback(new Error(i18n.global.t('setting.codeWarning')));
|
||||
|
||||
@ -19,7 +19,13 @@
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('commons.table.name')" prop="names">
|
||||
<el-select style="width: 100%" v-model="form.names" multiple clearable>
|
||||
<el-option v-for="item in fileNames" :key="item" :value="item" :label="item" />
|
||||
<el-option
|
||||
:disabled="checkDisable(item)"
|
||||
v-for="item in fileNames"
|
||||
:key="item"
|
||||
:value="item"
|
||||
:label="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('commons.table.description')" prop="description">
|
||||
@ -58,6 +64,7 @@ const loading = ref();
|
||||
const formRef = ref();
|
||||
const backupOptions = ref();
|
||||
const fileNames = ref();
|
||||
const existNames = ref();
|
||||
|
||||
const form = reactive({
|
||||
from: '',
|
||||
@ -70,8 +77,13 @@ const rules = reactive({
|
||||
name: [Rules.requiredSelect],
|
||||
});
|
||||
|
||||
const acceptParams = (): void => {
|
||||
interface DialogProps {
|
||||
names: Array<string>;
|
||||
}
|
||||
|
||||
const acceptParams = (params: DialogProps): void => {
|
||||
form.from = '';
|
||||
existNames.value = params.names;
|
||||
form.names = [] as Array<string>;
|
||||
loadBackups();
|
||||
drawerVisible.value = true;
|
||||
@ -82,6 +94,15 @@ const handleClose = () => {
|
||||
drawerVisible.value = false;
|
||||
};
|
||||
|
||||
const checkDisable = (val: string) => {
|
||||
for (const item of existNames.value) {
|
||||
if (val === item + '.tar.gz') {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const submitImport = async (formEl: FormInstance | undefined) => {
|
||||
loading.value = true;
|
||||
if (!formEl) return;
|
||||
@ -107,7 +128,7 @@ const loadBackups = async () => {
|
||||
loading.value = false;
|
||||
backupOptions.value = [];
|
||||
for (const item of res.data) {
|
||||
if (item.type !== 'LOCAL' && item.id !== 0) {
|
||||
if (item.id !== 0) {
|
||||
backupOptions.value.push({ label: i18n.global.t('setting.' + item.type), value: item.type });
|
||||
}
|
||||
}
|
||||
|
||||
@ -51,15 +51,18 @@
|
||||
<template #default="{ row }">
|
||||
<div v-for="(item, index) of row.from.split(',')" :key="index" class="mt-1">
|
||||
<div v-if="row.expand || (!row.expand && index < 3)">
|
||||
<el-tag v-if="row.from" type="info">
|
||||
<span v-if="item === row.defaultDownload">
|
||||
<el-icon><Star /></el-icon>
|
||||
<span v-if="row.from" type="info">
|
||||
<span>
|
||||
{{ $t('setting.' + item) }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('setting.' + item) }}
|
||||
<el-icon
|
||||
v-if="item === row.defaultDownload"
|
||||
size="12"
|
||||
class="relative top-px left-1"
|
||||
>
|
||||
<Star />
|
||||
</el-icon>
|
||||
</span>
|
||||
</el-tag>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -236,7 +239,11 @@ const onCreate = async () => {
|
||||
};
|
||||
|
||||
const onImport = () => {
|
||||
importRef.value.acceptParams();
|
||||
let names = [];
|
||||
for (const item of data.value) {
|
||||
names.push(item.name);
|
||||
}
|
||||
importRef.value.acceptParams({ names: names });
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
@ -268,7 +275,12 @@ const submitAddSnapshot = (formEl: FormInstance | undefined) => {
|
||||
};
|
||||
|
||||
const onLoadStatus = (row: Setting.SnapshotInfo) => {
|
||||
snapStatusRef.value.acceptParams({ id: row.id, from: row.from, description: row.description });
|
||||
snapStatusRef.value.acceptParams({
|
||||
id: row.id,
|
||||
from: row.from,
|
||||
defaultDownload: row.defaultDownload,
|
||||
description: row.description,
|
||||
});
|
||||
};
|
||||
|
||||
const loadBackups = async () => {
|
||||
|
||||
@ -117,6 +117,7 @@ const dialogVisible = ref(false);
|
||||
const loading = ref();
|
||||
const snapID = ref();
|
||||
const snapFrom = ref();
|
||||
const snapDefaultDownload = ref();
|
||||
const snapDescription = ref();
|
||||
|
||||
let timer: NodeJS.Timer | null = null;
|
||||
@ -124,6 +125,7 @@ let timer: NodeJS.Timer | null = null;
|
||||
interface DialogProps {
|
||||
id: number;
|
||||
from: string;
|
||||
defaultDownload: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
@ -131,6 +133,7 @@ const acceptParams = (props: DialogProps): void => {
|
||||
dialogVisible.value = true;
|
||||
snapID.value = props.id;
|
||||
snapFrom.value = props.from;
|
||||
snapDefaultDownload.value = props.defaultDownload;
|
||||
snapDescription.value = props.description;
|
||||
onWatch();
|
||||
nextTick(() => {
|
||||
@ -167,7 +170,13 @@ const onClose = async () => {
|
||||
|
||||
const onRetry = async () => {
|
||||
loading.value = true;
|
||||
await snapshotCreate({ id: snapID.value, from: snapFrom.value, description: snapDescription.value })
|
||||
await snapshotCreate({
|
||||
id: snapID.value,
|
||||
fromAccounts: [],
|
||||
from: snapFrom.value,
|
||||
defaultDownload: snapDefaultDownload.value,
|
||||
description: snapDescription.value,
|
||||
})
|
||||
.then(() => {
|
||||
loading.value = false;
|
||||
loadCurrentStatus();
|
||||
|
||||
@ -4,20 +4,31 @@
|
||||
<template #header>
|
||||
<DrawerHeader :header="$t('setting.recoverDetail')" :back="handleClose" />
|
||||
</template>
|
||||
<el-form label-width="120px">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ $t('setting.recover') }}</span>
|
||||
|
||||
<el-form label-position="top">
|
||||
<el-row type="flex" justify="center">
|
||||
<el-col :span="22">
|
||||
<span class="card-title">{{ $t('setting.recover') }}</span>
|
||||
<el-divider class="divider" />
|
||||
<div v-if="!snapInfo.recoverStatus && !snapInfo.lastRecoveredAt">
|
||||
<el-alert center class="alert" style="height: 257px" :closable="false">
|
||||
<el-button size="large" round plain type="primary" @click="recoverSnapshot(true)">
|
||||
{{ $t('setting.recover') }}
|
||||
</el-button>
|
||||
</el-alert>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="!snapInfo.recoverStatus">
|
||||
<el-card class="mini-border-card">
|
||||
<div v-if="!snapInfo.recoverStatus" class="mini-border-card">
|
||||
<div v-if="snapInfo.lastRecoveredAt">
|
||||
<el-form-item :label="$t('commons.table.status')">
|
||||
<el-tag type="success">
|
||||
{{ $t('commons.table.statusSuccess') }}
|
||||
</el-tag>
|
||||
<el-button @click="recoverSnapshot(true)" style="margin-left: 10px" type="primary">
|
||||
<el-button
|
||||
@click="recoverSnapshot(true)"
|
||||
style="margin-left: 10px"
|
||||
type="primary"
|
||||
>
|
||||
{{ $t('setting.recover') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
@ -25,18 +36,6 @@
|
||||
{{ snapInfo.lastRecoveredAt }}
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-form-item>
|
||||
<el-tag type="info">
|
||||
{{ $t('setting.noRecoverRecord') }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="recoverSnapshot(true)" type="primary">
|
||||
{{ $t('setting.recover') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-form-item :label="$t('commons.table.status')">
|
||||
@ -49,15 +48,18 @@
|
||||
<el-tag type="info" v-if="snapInfo.recoverStatus === 'Waiting'">
|
||||
{{ $t('commons.table.statusWaiting') }}
|
||||
</el-tag>
|
||||
<el-button
|
||||
<!-- <el-button
|
||||
style="margin-left: 15px"
|
||||
@click="recoverSnapshot(true)"
|
||||
:disabled="snapInfo.recoverStatus !== 'Success'"
|
||||
>
|
||||
{{ $t('setting.recover') }}
|
||||
</el-button>
|
||||
</el-button> -->
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('setting.lastRecoverAt')" v-if="snapInfo.recoverStatus !== 'Waiting'">
|
||||
<el-form-item
|
||||
:label="$t('setting.lastRecoverAt')"
|
||||
v-if="snapInfo.recoverStatus !== 'Waiting'"
|
||||
>
|
||||
{{ snapInfo.lastRecoveredAt }}
|
||||
</el-form-item>
|
||||
<div v-if="snapInfo.recoverStatus === 'Failed'">
|
||||
@ -75,12 +77,15 @@
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card style="margin-top: 20px" v-if="snapInfo.recoverStatus === 'Failed'">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ $t('setting.rollback') }}</span>
|
||||
<span class="card-title">{{ $t('setting.rollback') }}</span>
|
||||
<el-divider class="divider" />
|
||||
<div v-if="!snapInfo.rollbackStatus && !snapInfo.lastRollbackedAt">
|
||||
<el-alert center class="alert" style="height: 257px" :closable="false">
|
||||
<el-button size="large" round plain type="primary" @click="rollbackSnapshot()">
|
||||
{{ $t('setting.rollback') }}
|
||||
</el-button>
|
||||
</el-alert>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="!snapInfo.rollbackStatus">
|
||||
<div v-if="snapInfo.lastRollbackedAt">
|
||||
<el-form-item :label="$t('commons.table.status')">
|
||||
@ -88,25 +93,13 @@
|
||||
{{ $t('commons.table.statusSuccess') }}
|
||||
</el-tag>
|
||||
<el-button @click="rollbackSnapshot" style="margin-left: 10px" type="primary">
|
||||
{{ $t('setting.recover') }}
|
||||
{{ $t('setting.rollback') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('setting.lastRollbackAt')">
|
||||
{{ snapInfo.lastRollbackedAt }}
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-form-item>
|
||||
<el-tag type="info">
|
||||
{{ $t('setting.noRollbackRecord') }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="rollbackSnapshot" type="primary">
|
||||
{{ $t('setting.rollback') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-form-item :label="$t('commons.table.status')">
|
||||
@ -146,7 +139,8 @@
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-drawer>
|
||||
<el-dialog v-model="dialogVisible" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
|
||||
@ -255,3 +249,25 @@ defineExpose({
|
||||
acceptParams,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.divider {
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
margin: 12px 0;
|
||||
border-top: 1px var(--el-border-color) var(--el-border-style);
|
||||
}
|
||||
.alert {
|
||||
background-color: rgba(0, 94, 235, 0.03);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 25px;
|
||||
}
|
||||
.card-logo {
|
||||
font-size: 7px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user