mirror of https://github.com/1Panel-dev/1Panel
fix: 数据库增加 loading
ssongliu
ssongliu
parent
6456dcd858
commit
e36060d3ea
|
|
@ -1,55 +1,57 @@
|
|||
<template>
|
||||
<el-drawer v-model="createVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
|
||||
<template #header>
|
||||
<DrawerHeader :header="$t('database.create')" :back="handleClose" />
|
||||
</template>
|
||||
<el-form ref="formRef" label-position="top" :model="form" :rules="rules">
|
||||
<el-row type="flex" justify="center">
|
||||
<el-col :span="22">
|
||||
<el-form-item :label="$t('commons.table.name')" prop="name">
|
||||
<el-input clearable v-model.trim="form.name">
|
||||
<template #append>
|
||||
<el-select v-model="form.format" style="width: 120px">
|
||||
<el-option label="utf8mb4" value="utf8mb4" />
|
||||
<el-option label="utf-8" value="utf8" />
|
||||
<el-option label="gbk" value="gbk" />
|
||||
<el-option label="big5" value="big5" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('commons.login.username')" prop="username">
|
||||
<el-input clearable v-model.trim="form.username" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('commons.login.password')" prop="password">
|
||||
<el-input type="password" clearable show-password v-model.trim="form.password" />
|
||||
</el-form-item>
|
||||
<div v-loading="loading">
|
||||
<el-drawer v-model="createVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
|
||||
<template #header>
|
||||
<DrawerHeader :header="$t('database.create')" :back="handleClose" />
|
||||
</template>
|
||||
<el-form ref="formRef" label-position="top" :model="form" :rules="rules">
|
||||
<el-row type="flex" justify="center">
|
||||
<el-col :span="22">
|
||||
<el-form-item :label="$t('commons.table.name')" prop="name">
|
||||
<el-input clearable v-model.trim="form.name">
|
||||
<template #append>
|
||||
<el-select v-model="form.format" style="width: 120px">
|
||||
<el-option label="utf8mb4" value="utf8mb4" />
|
||||
<el-option label="utf-8" value="utf8" />
|
||||
<el-option label="gbk" value="gbk" />
|
||||
<el-option label="big5" value="big5" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('commons.login.username')" prop="username">
|
||||
<el-input clearable v-model.trim="form.username" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('commons.login.password')" prop="password">
|
||||
<el-input type="password" clearable show-password v-model.trim="form.password" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('database.permission')" prop="permission">
|
||||
<el-select v-model="form.permission">
|
||||
<el-option value="localhost" :label="$t('database.permissionLocal')" />
|
||||
<el-option value="%" :label="$t('database.permissionAll')" />
|
||||
<el-option value="ip" :label="$t('database.permissionForIP')" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.permission === 'ip'" prop="permissionIPs">
|
||||
<el-input clearable v-model="form.permissionIPs" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('commons.table.description')" prop="description">
|
||||
<el-input type="textarea" clearable v-model="form.description" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="createVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="onSubmit(formRef)">
|
||||
{{ $t('commons.button.confirm') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-drawer>
|
||||
<el-form-item :label="$t('database.permission')" prop="permission">
|
||||
<el-select v-model="form.permission">
|
||||
<el-option value="localhost" :label="$t('database.permissionLocal')" />
|
||||
<el-option value="%" :label="$t('database.permissionAll')" />
|
||||
<el-option value="ip" :label="$t('database.permissionForIP')" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.permission === 'ip'" prop="permissionIPs">
|
||||
<el-input clearable v-model="form.permissionIPs" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('commons.table.description')" prop="description">
|
||||
<el-input type="textarea" clearable v-model="form.description" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="createVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="onSubmit(formRef)">
|
||||
{{ $t('commons.button.confirm') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -61,6 +63,7 @@ import { addMysqlDB } from '@/api/modules/database';
|
|||
import DrawerHeader from '@/components/drawer-header/index.vue';
|
||||
import { MsgSuccess } from '@/utils/message';
|
||||
|
||||
const loading = ref();
|
||||
const createVisiable = ref(false);
|
||||
const form = reactive({
|
||||
name: '',
|
||||
|
|
@ -108,10 +111,17 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
|
|||
if (form.permission === 'ip') {
|
||||
form.permission = form.permissionIPs;
|
||||
}
|
||||
await addMysqlDB(form);
|
||||
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
|
||||
emit('search');
|
||||
createVisiable.value = false;
|
||||
loading.value = true;
|
||||
await addMysqlDB(form)
|
||||
.then(() => {
|
||||
loading.value = false;
|
||||
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
|
||||
emit('search');
|
||||
createVisiable.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@
|
|||
</el-row>
|
||||
</div>
|
||||
<Status v-show="activeName === 'status'" ref="statusRef" />
|
||||
<Variables v-show="activeName === 'tuning'" ref="variablesRef" />
|
||||
<Variables @loading="changeLoading" v-show="activeName === 'tuning'" ref="variablesRef" />
|
||||
<div v-show="activeName === 'port'">
|
||||
<el-form :model="baseInfo" ref="panelFormRef" label-position="top">
|
||||
<el-row>
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
</el-form>
|
||||
</div>
|
||||
<ContainerLog v-show="activeName === 'log'" ref="dialogContainerLogRef" />
|
||||
<SlowLog v-show="activeName === 'slowLog'" ref="slowLogRef" />
|
||||
<SlowLog @loading="changeLoading" v-show="activeName === 'slowLog'" ref="slowLogRef" />
|
||||
</template>
|
||||
</LayoutContent>
|
||||
|
||||
|
|
@ -259,6 +259,10 @@ const loadBaseInfo = async () => {
|
|||
loadContainerLog(baseInfo.containerID);
|
||||
};
|
||||
|
||||
const changeLoading = (status: boolean) => {
|
||||
loading.value = status;
|
||||
};
|
||||
|
||||
const loadVariables = async () => {
|
||||
const res = await loadMysqlVariables();
|
||||
variables.value = res.data;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div v-loading="loading">
|
||||
<div>
|
||||
<span style="float: left; line-height: 30px">{{ $t('database.longQueryTime') }}</span>
|
||||
<div style="margin-left: 5px; float: left">
|
||||
<el-input type="number" v-model.number="variables.long_query_time">
|
||||
|
|
@ -54,7 +54,6 @@ import i18n from '@/lang';
|
|||
import { loadBaseDir } from '@/api/modules/setting';
|
||||
import { MsgSuccess } from '@/utils/message';
|
||||
|
||||
const loading = ref();
|
||||
const extensions = [javascript(), oneDark];
|
||||
const slowLogs = ref();
|
||||
const view = shallowRef();
|
||||
|
|
@ -95,6 +94,7 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
|
|||
}, 1000 * 5);
|
||||
oldVariables.value = { ...variables };
|
||||
};
|
||||
const emit = defineEmits(['loading']);
|
||||
|
||||
const handleSlowLogs = async () => {
|
||||
let params = {
|
||||
|
|
@ -118,14 +118,14 @@ const onSave = async () => {
|
|||
param.push({ param: 'long_query_time', value: variables.long_query_time + '' });
|
||||
param.push({ param: 'slow_query_log_file', value: '/var/lib/mysql/1Panel-slow.log' });
|
||||
}
|
||||
loading.value = true;
|
||||
emit('loading', true);
|
||||
await updateMysqlVariables(param)
|
||||
.then(() => {
|
||||
loading.value = false;
|
||||
emit('loading', false);
|
||||
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
emit('loading', false);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div v-loading="loading">
|
||||
<div>
|
||||
<el-form :model="mysqlVariables" :rules="variablesRules" ref="variableFormRef" label-position="top">
|
||||
<el-row>
|
||||
<el-col :span="1"><br /></el-col>
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button :disabled="loading" @click="onSaveStart(variableFormRef)" type="primary">
|
||||
<el-button @click="onSaveStart(variableFormRef)" type="primary">
|
||||
{{ $t('commons.button.save') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
|
@ -124,8 +124,6 @@ import i18n from '@/lang';
|
|||
import { planOptions } from './../helper';
|
||||
import { MsgSuccess } from '@/utils/message';
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
const plan = ref();
|
||||
const confirmDialogRef = ref();
|
||||
const mysqlVersion = ref();
|
||||
|
|
@ -198,6 +196,7 @@ const acceptParams = (params: DialogProps): void => {
|
|||
mysqlVariables.max_connections = Number(params.variables.max_connections);
|
||||
oldVariables.value = { ...mysqlVariables };
|
||||
};
|
||||
const emit = defineEmits(['loading']);
|
||||
|
||||
const changePlan = async () => {
|
||||
for (const item of planOptions) {
|
||||
|
|
@ -282,14 +281,14 @@ const onSaveVariables = async () => {
|
|||
if (oldVariables.value?.max_connections !== mysqlVariables.max_connections) {
|
||||
param.push({ param: 'max_connections', value: mysqlVariables.max_connections });
|
||||
}
|
||||
loading.value = true;
|
||||
emit('loading', true);
|
||||
await updateMysqlVariables(param)
|
||||
.then(() => {
|
||||
loading.value = false;
|
||||
emit('loading', false);
|
||||
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
emit('loading', false);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div v-show="settingShow">
|
||||
<LayoutContent :title="'Redis ' + $t('database.setting')" :reload="true" v-loading="loading">
|
||||
<div v-show="settingShow" v-loading="loading">
|
||||
<LayoutContent :title="'Redis ' + $t('database.setting')" :reload="true">
|
||||
<template #buttons>
|
||||
<el-button type="primary" :plain="activeName !== 'conf'" @click="changeTab('conf')">
|
||||
{{ $t('database.confChange') }}
|
||||
|
|
@ -109,14 +109,14 @@
|
|||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<Persistence v-show="activeName === 'persistence'" ref="persistenceRef" />
|
||||
<Persistence @loading="changeLoading" v-show="activeName === 'persistence'" ref="persistenceRef" />
|
||||
</template>
|
||||
</LayoutContent>
|
||||
|
||||
<ConfirmDialog ref="confirmDialogRef" @confirm="submtiFile"></ConfirmDialog>
|
||||
<ConfirmDialog ref="confirmFileRef" @confirm="submtiFile"></ConfirmDialog>
|
||||
<ConfirmDialog ref="confirmFormRef" @confirm="submtiForm"></ConfirmDialog>
|
||||
<ConfirmDialog ref="confirmPortRef" @confirm="onChangePort(formRef)"></ConfirmDialog>
|
||||
<ConfirmDialog ref="confirmPortRef" @confirm="onChangePort(portRef)"></ConfirmDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -180,6 +180,10 @@ const changeTab = (val: string) => {
|
|||
activeName.value = val;
|
||||
};
|
||||
|
||||
const changeLoading = (status: boolean) => {
|
||||
loading.value = status;
|
||||
};
|
||||
|
||||
const acceptParams = (prop: DialogProps): void => {
|
||||
redisStatus.value = prop.status;
|
||||
redisName.value = prop.redisName;
|
||||
|
|
@ -216,9 +220,11 @@ function callback(error: any) {
|
|||
}
|
||||
}
|
||||
const onChangePort = async (formEl: FormInstance | undefined) => {
|
||||
console.log('asdqwdwqd');
|
||||
if (!formEl) return;
|
||||
const result = await formEl.validateField('port', callback);
|
||||
if (!result) {
|
||||
console.log('daqdwq');
|
||||
return;
|
||||
}
|
||||
let params = {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div v-if="persistenceShow" v-loading="loading">
|
||||
<div v-if="persistenceShow">
|
||||
<el-row :gutter="20" style="margin-top: 5px" class="row-box">
|
||||
<el-col :span="12">
|
||||
<el-card class="el-card">
|
||||
|
|
@ -88,7 +88,9 @@
|
|||
</template>
|
||||
<el-table-column type="selection" fix />
|
||||
<el-table-column :label="$t('commons.table.name')" show-overflow-tooltip prop="fileName" />
|
||||
<el-table-column :label="$t('database.source')" prop="backupType" />
|
||||
<el-table-column :label="$t('database.source')" prop="backupType">
|
||||
<template #default="{ row }">{{ $t('setting.' + row.source) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('file.dir')" show-overflow-tooltip prop="fileDir" />
|
||||
<el-table-column :label="$t('commons.table.createdAt')" :formatter="dateFormat" prop="createdAt" />
|
||||
<fu-table-operations
|
||||
|
|
@ -120,8 +122,6 @@ import { useDeleteData } from '@/hooks/use-delete-data';
|
|||
import { MsgInfo, MsgSuccess } from '@/utils/message';
|
||||
import { Backup } from '@/api/interface/backup';
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
interface saveStruct {
|
||||
second: number;
|
||||
count: number;
|
||||
|
|
@ -148,6 +148,7 @@ const acceptParams = (prop: DialogProps): void => {
|
|||
search();
|
||||
}
|
||||
};
|
||||
const emit = defineEmits(['loading']);
|
||||
|
||||
const data = ref();
|
||||
const selects = ref<any>([]);
|
||||
|
|
@ -183,15 +184,15 @@ const search = async () => {
|
|||
paginationConfig.total = res.data.total;
|
||||
};
|
||||
const onBackup = async () => {
|
||||
loading.value = true;
|
||||
emit('loading', true);
|
||||
await handleBackup({ name: '', detailName: '', type: 'redis' })
|
||||
.then(() => {
|
||||
loading.value = false;
|
||||
emit('loading', false);
|
||||
search();
|
||||
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
emit('loading', false);
|
||||
});
|
||||
};
|
||||
const onRecover = async () => {
|
||||
|
|
@ -201,14 +202,14 @@ const onRecover = async () => {
|
|||
detailName: '',
|
||||
file: currentRow.value.fileDir + '/' + currentRow.value.fileName,
|
||||
};
|
||||
loading.value = true;
|
||||
emit('loading', true);
|
||||
await handleRecover(param)
|
||||
.then(() => {
|
||||
loading.value = false;
|
||||
emit('loading', false);
|
||||
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
emit('loading', false);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -255,14 +256,14 @@ const onSave = async (formEl: FormInstance | undefined, type: string) => {
|
|||
param.type = type;
|
||||
param.appendfsync = form.appendfsync;
|
||||
param.appendonly = form.appendonly;
|
||||
loading.value = true;
|
||||
emit('loading', true);
|
||||
await updateRedisPersistenceConf(param)
|
||||
.then(() => {
|
||||
loading.value = false;
|
||||
emit('loading', false);
|
||||
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
emit('loading', false);
|
||||
});
|
||||
});
|
||||
return;
|
||||
|
|
@ -277,14 +278,14 @@ const onSave = async (formEl: FormInstance | undefined, type: string) => {
|
|||
}
|
||||
param.type = type;
|
||||
param.save = itemSaves.join(' ');
|
||||
loading.value = true;
|
||||
emit('loading', true);
|
||||
await updateRedisPersistenceConf(param)
|
||||
.then(() => {
|
||||
loading.value = false;
|
||||
emit('loading', false);
|
||||
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
emit('loading', false);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue