mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-09-12 01:24:38 +08:00
fix: 数据库样式调整
This commit is contained in:
ssongliu
ssongliu
parent
a2fb8353de
commit
e748f493da
7 changed files with 245 additions and 318 deletions
|
|
@ -87,7 +87,7 @@ var AddTableSetting = &gormigrate.Migration{
|
||||||
if err := tx.Create(&model.Setting{Key: "ExpirationTime", Value: time.Now().AddDate(0, 0, 10).Format("2006.01.02 15:04:05")}).Error; err != nil {
|
if err := tx.Create(&model.Setting{Key: "ExpirationTime", Value: time.Now().AddDate(0, 0, 10).Format("2006.01.02 15:04:05")}).Error; err != nil {
|
||||||
return err
|
return err
|
||||||
}
|
}
|
||||||
if err := tx.Create(&model.Setting{Key: "ExpirationDays", Value: "10"}).Error; err != nil {
|
if err := tx.Create(&model.Setting{Key: "ExpirationDays", Value: "0"}).Error; err != nil {
|
||||||
return err
|
return err
|
||||||
}
|
}
|
||||||
if err := tx.Create(&model.Setting{Key: "ComplexityVerification", Value: "enable"}).Error; err != nil {
|
if err := tx.Create(&model.Setting{Key: "ComplexityVerification", Value: "enable"}).Error; err != nil {
|
||||||
|
|
|
||||||
|
|
@ -1,77 +1,57 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Submenu activeName="mysql" />
|
<Submenu activeName="mysql" />
|
||||||
<div v-if="!mysqlInfo.isExist" style="margin-top: 20px">
|
<AppStatus :app-key="'mysql'" style="margin-top: 20px" @setting="onSetting"></AppStatus>
|
||||||
<el-alert :closable="false" :title="$t('database.noMysql', ['Mysql'])" type="info">
|
<Setting ref="settingRef"></Setting>
|
||||||
<el-link icon="Position" @click="goRouter('/apps')" type="primary">
|
|
||||||
{{ $t('database.goInstall') }}
|
|
||||||
</el-link>
|
|
||||||
</el-alert>
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<el-button v-if="!isOnSetting" style="margin-top: 20px" size="default" icon="Setting" @click="onSetting">
|
|
||||||
{{ $t('database.setting') }}
|
|
||||||
</el-button>
|
|
||||||
<el-button v-if="isOnSetting" style="margin-top: 20px" size="default" icon="Back" @click="onBacklist">
|
|
||||||
{{ $t('database.backList') }}
|
|
||||||
</el-button>
|
|
||||||
|
|
||||||
<Setting ref="settingRef"></Setting>
|
<el-card v-if="!isOnSetting" style="margin-top: 5px">
|
||||||
|
<ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" @search="search" :data="data">
|
||||||
<el-card v-if="!isOnSetting" style="margin-top: 5px">
|
<template #toolbar>
|
||||||
<ComplexTable
|
<el-button type="primary" @click="onOpenDialog()">{{ $t('commons.button.create') }}</el-button>
|
||||||
:pagination-config="paginationConfig"
|
<el-button>phpMyAdmin</el-button>
|
||||||
v-model:selects="selects"
|
<el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
|
||||||
@search="search"
|
{{ $t('commons.button.delete') }}
|
||||||
:data="data"
|
</el-button>
|
||||||
>
|
</template>
|
||||||
<template #toolbar>
|
<el-table-column type="selection" fix />
|
||||||
<el-button type="primary" @click="onOpenDialog()">{{ $t('commons.button.create') }}</el-button>
|
<el-table-column :label="$t('commons.table.name')" prop="name" />
|
||||||
<el-button>phpMyAdmin</el-button>
|
<el-table-column :label="$t('commons.login.username')" prop="username" />
|
||||||
<el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
|
<el-table-column :label="$t('commons.login.password')" prop="password">
|
||||||
{{ $t('commons.button.delete') }}
|
<template #default="{ row }">
|
||||||
</el-button>
|
<div v-if="!row.showPassword">
|
||||||
|
<span style="float: left">***********</span>
|
||||||
|
<div style="margin-top: 2px; cursor: pointer">
|
||||||
|
<el-icon style="margin-left: 5px" @click="row.showPassword = true" :size="16">
|
||||||
|
<View />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<span style="float: left">{{ row.password }}</span>
|
||||||
|
<div style="margin-top: 4px; cursor: pointer">
|
||||||
|
<el-icon style="margin-left: 5px" @click="row.showPassword = false" :size="16">
|
||||||
|
<Hide />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<el-table-column type="selection" fix />
|
</el-table-column>
|
||||||
<el-table-column :label="$t('commons.table.name')" prop="name" />
|
<el-table-column :label="$t('commons.table.description')" prop="description" />
|
||||||
<el-table-column :label="$t('commons.login.username')" prop="username" />
|
<el-table-column
|
||||||
<el-table-column :label="$t('commons.login.password')" prop="password">
|
prop="createdAt"
|
||||||
<template #default="{ row }">
|
:label="$t('commons.table.date')"
|
||||||
<div v-if="!row.showPassword">
|
:formatter="dateFromat"
|
||||||
<span style="float: left">***********</span>
|
show-overflow-tooltip
|
||||||
<div style="margin-top: 2px; cursor: pointer">
|
/>
|
||||||
<el-icon style="margin-left: 5px" @click="row.showPassword = true" :size="16">
|
<fu-table-operations
|
||||||
<View />
|
width="300px"
|
||||||
</el-icon>
|
:buttons="buttons"
|
||||||
</div>
|
:ellipsis="10"
|
||||||
</div>
|
:label="$t('commons.table.operate')"
|
||||||
<div v-else>
|
fix
|
||||||
<span style="float: left">{{ row.password }}</span>
|
/>
|
||||||
<div style="margin-top: 4px; cursor: pointer">
|
</ComplexTable>
|
||||||
<el-icon style="margin-left: 5px" @click="row.showPassword = false" :size="16">
|
</el-card>
|
||||||
<Hide />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column :label="$t('commons.table.description')" prop="description" />
|
|
||||||
<el-table-column
|
|
||||||
prop="createdAt"
|
|
||||||
:label="$t('commons.table.date')"
|
|
||||||
:formatter="dateFromat"
|
|
||||||
show-overflow-tooltip
|
|
||||||
/>
|
|
||||||
<fu-table-operations
|
|
||||||
width="300px"
|
|
||||||
:buttons="buttons"
|
|
||||||
:ellipsis="10"
|
|
||||||
:label="$t('commons.table.operate')"
|
|
||||||
fix
|
|
||||||
/>
|
|
||||||
</ComplexTable>
|
|
||||||
</el-card>
|
|
||||||
</div>
|
|
||||||
<el-dialog v-model="changeVisiable" :destroy-on-close="true" width="30%">
|
<el-dialog v-model="changeVisiable" :destroy-on-close="true" width="30%">
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
|
|
@ -132,18 +112,16 @@ import OperatrDialog from '@/views/database/mysql/create/index.vue';
|
||||||
import BackupRecords from '@/views/database/mysql/backup/index.vue';
|
import BackupRecords from '@/views/database/mysql/backup/index.vue';
|
||||||
import UploadDialog from '@/views/database/mysql/upload/index.vue';
|
import UploadDialog from '@/views/database/mysql/upload/index.vue';
|
||||||
import Setting from '@/views/database/mysql/setting/index.vue';
|
import Setting from '@/views/database/mysql/setting/index.vue';
|
||||||
|
import AppStatus from '@/components/app-status/index.vue';
|
||||||
import Submenu from '@/views/database/index.vue';
|
import Submenu from '@/views/database/index.vue';
|
||||||
import { dateFromat } from '@/utils/util';
|
import { dateFromat } from '@/utils/util';
|
||||||
import { onMounted, reactive, ref } from 'vue';
|
import { reactive, ref } from 'vue';
|
||||||
import { deleteMysqlDB, searchMysqlDBs, updateMysqlDBInfo } from '@/api/modules/database';
|
import { deleteMysqlDB, searchMysqlDBs, updateMysqlDBInfo } from '@/api/modules/database';
|
||||||
import i18n from '@/lang';
|
import i18n from '@/lang';
|
||||||
import { useDeleteData } from '@/hooks/use-delete-data';
|
import { useDeleteData } from '@/hooks/use-delete-data';
|
||||||
import { ElForm, ElMessage } from 'element-plus';
|
import { ElForm, ElMessage } from 'element-plus';
|
||||||
import { Database } from '@/api/interface/database';
|
import { Database } from '@/api/interface/database';
|
||||||
import { Rules } from '@/global/form-rules';
|
import { Rules } from '@/global/form-rules';
|
||||||
import { CheckAppInstalled } from '@/api/modules/app';
|
|
||||||
import { useRouter } from 'vue-router';
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const selects = ref<any>([]);
|
const selects = ref<any>([]);
|
||||||
const mysqlInfo = reactive({
|
const mysqlInfo = reactive({
|
||||||
|
|
@ -187,11 +165,6 @@ const onSetting = async () => {
|
||||||
};
|
};
|
||||||
settingRef.value!.acceptParams(params);
|
settingRef.value!.acceptParams(params);
|
||||||
};
|
};
|
||||||
const onBacklist = async () => {
|
|
||||||
isOnSetting.value = false;
|
|
||||||
search();
|
|
||||||
settingRef.value!.onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeVisiable = ref(false);
|
const changeVisiable = ref(false);
|
||||||
type FormInstance = InstanceType<typeof ElForm>;
|
type FormInstance = InstanceType<typeof ElForm>;
|
||||||
|
|
@ -219,20 +192,6 @@ const submitChangeInfo = async (formEl: FormInstance | undefined) => {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const checkMysqlInstalled = async () => {
|
|
||||||
const res = await CheckAppInstalled('mysql');
|
|
||||||
mysqlInfo.isExist = res.data.isExist;
|
|
||||||
mysqlInfo.name = res.data.name;
|
|
||||||
mysqlInfo.version = res.data.version;
|
|
||||||
if (mysqlInfo.isExist) {
|
|
||||||
search();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const goRouter = async (path: string) => {
|
|
||||||
router.push({ path: path });
|
|
||||||
};
|
|
||||||
|
|
||||||
const search = async () => {
|
const search = async () => {
|
||||||
let params = {
|
let params = {
|
||||||
page: paginationConfig.currentPage,
|
page: paginationConfig.currentPage,
|
||||||
|
|
@ -302,8 +261,4 @@ const buttons = [
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
checkMysqlInstalled();
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,94 +1,97 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="demo-collapse" v-show="onSetting">
|
<div class="demo-collapse" v-show="onSetting">
|
||||||
<el-card style="margin-top: 5px">
|
<el-card style="margin-top: 5px">
|
||||||
<el-collapse v-model="activeName" accordion>
|
<LayoutContent :header="$t('database.setting')" :back-name="'Mysql'" :reload="true">
|
||||||
<el-collapse-item :title="$t('database.baseSetting')" name="1">
|
<el-collapse v-model="activeName" accordion>
|
||||||
<el-form :model="baseInfo" ref="panelFormRef" label-width="120px">
|
<el-collapse-item :title="$t('database.baseSetting')" name="1">
|
||||||
<el-row>
|
<el-form :model="baseInfo" ref="panelFormRef" label-width="120px">
|
||||||
<el-col :span="1"><br /></el-col>
|
<el-row>
|
||||||
<el-col :span="10">
|
<el-col :span="1"><br /></el-col>
|
||||||
<el-form-item :label="$t('setting.port')" prop="port" :rules="Rules.port">
|
<el-col :span="10">
|
||||||
<el-input clearable type="number" v-model.number="baseInfo.port">
|
<el-form-item :label="$t('setting.port')" prop="port" :rules="Rules.port">
|
||||||
<template #append>
|
<el-input clearable type="number" v-model.number="baseInfo.port">
|
||||||
<el-button
|
<template #append>
|
||||||
@click="onSave(panelFormRef, 'port', baseInfo.port)"
|
<el-button
|
||||||
icon="Collection"
|
@click="onSave(panelFormRef, 'port', baseInfo.port)"
|
||||||
>
|
icon="Collection"
|
||||||
{{ $t('commons.button.save') }}
|
>
|
||||||
</el-button>
|
{{ $t('commons.button.save') }}
|
||||||
</template>
|
</el-button>
|
||||||
</el-input>
|
</template>
|
||||||
</el-form-item>
|
</el-input>
|
||||||
<el-form-item
|
</el-form-item>
|
||||||
:label="$t('setting.password')"
|
<el-form-item
|
||||||
prop="password"
|
:label="$t('setting.password')"
|
||||||
:rules="Rules.requiredInput"
|
prop="password"
|
||||||
>
|
:rules="Rules.requiredInput"
|
||||||
<el-input type="password" show-password clearable v-model="baseInfo.password">
|
>
|
||||||
<template #append>
|
<el-input type="password" show-password clearable v-model="baseInfo.password">
|
||||||
<el-button
|
<template #append>
|
||||||
@click="onSave(panelFormRef, 'password', baseInfo.password)"
|
<el-button
|
||||||
icon="Collection"
|
@click="onSave(panelFormRef, 'password', baseInfo.password)"
|
||||||
>
|
icon="Collection"
|
||||||
{{ $t('commons.button.save') }}
|
>
|
||||||
</el-button>
|
{{ $t('commons.button.save') }}
|
||||||
</template>
|
</el-button>
|
||||||
</el-input>
|
</template>
|
||||||
</el-form-item>
|
</el-input>
|
||||||
<el-form-item
|
</el-form-item>
|
||||||
:label="$t('database.remoteAccess')"
|
<el-form-item
|
||||||
prop="remoteConn"
|
:label="$t('database.remoteAccess')"
|
||||||
:rules="Rules.requiredSelect"
|
prop="remoteConn"
|
||||||
>
|
:rules="Rules.requiredSelect"
|
||||||
<el-switch
|
>
|
||||||
v-model="baseInfo.remoteConn"
|
<el-switch
|
||||||
@change="onSave(panelFormRef, 'remoteConn', baseInfo.remoteConn)"
|
v-model="baseInfo.remoteConn"
|
||||||
/>
|
@change="onSave(panelFormRef, 'remoteConn', baseInfo.remoteConn)"
|
||||||
<span class="input-help">{{ $t('database.remoteConnHelper') }}</span>
|
/>
|
||||||
</el-form-item>
|
<span class="input-help">{{ $t('database.remoteConnHelper') }}</span>
|
||||||
</el-col>
|
</el-form-item>
|
||||||
</el-row>
|
</el-col>
|
||||||
</el-form>
|
</el-row>
|
||||||
</el-collapse-item>
|
</el-form>
|
||||||
<el-collapse-item :title="$t('database.confChange')" name="2">
|
</el-collapse-item>
|
||||||
<codemirror
|
<el-collapse-item :title="$t('database.confChange')" name="2">
|
||||||
:autofocus="true"
|
<codemirror
|
||||||
placeholder="None data"
|
:autofocus="true"
|
||||||
:indent-with-tab="true"
|
placeholder="None data"
|
||||||
:tabSize="4"
|
:indent-with-tab="true"
|
||||||
style="margin-top: 10px; max-height: 500px"
|
:tabSize="4"
|
||||||
:lineWrapping="true"
|
style="margin-top: 10px; max-height: 500px"
|
||||||
:matchBrackets="true"
|
:lineWrapping="true"
|
||||||
theme="cobalt"
|
:matchBrackets="true"
|
||||||
:styleActiveLine="true"
|
theme="cobalt"
|
||||||
:extensions="extensions"
|
:styleActiveLine="true"
|
||||||
v-model="mysqlConf"
|
:extensions="extensions"
|
||||||
:readOnly="true"
|
v-model="mysqlConf"
|
||||||
/>
|
:readOnly="true"
|
||||||
<el-button type="primary" style="width: 120px; margin-top: 10px" @click="onSaveFile()">
|
/>
|
||||||
{{ $t('commons.button.save') }}
|
<el-button type="primary" style="width: 120px; margin-top: 10px" @click="onSaveFile()">
|
||||||
</el-button>
|
{{ $t('commons.button.save') }}
|
||||||
</el-collapse-item>
|
</el-button>
|
||||||
<el-collapse-item :title="$t('database.currentStatus')" name="3">
|
</el-collapse-item>
|
||||||
<Status ref="statusRef" />
|
<el-collapse-item :title="$t('database.currentStatus')" name="3">
|
||||||
</el-collapse-item>
|
<Status ref="statusRef" />
|
||||||
<el-collapse-item :title="$t('database.performanceTuning')" name="4">
|
</el-collapse-item>
|
||||||
<Variables ref="variablesRef" />
|
<el-collapse-item :title="$t('database.performanceTuning')" name="4">
|
||||||
</el-collapse-item>
|
<Variables ref="variablesRef" />
|
||||||
<el-collapse-item title="日志" name="5">
|
</el-collapse-item>
|
||||||
<ContainerLog ref="dialogContainerLogRef" />
|
<el-collapse-item title="日志" name="5">
|
||||||
</el-collapse-item>
|
<ContainerLog ref="dialogContainerLogRef" />
|
||||||
|
</el-collapse-item>
|
||||||
|
|
||||||
<el-collapse-item title="慢日志" name="6">
|
<el-collapse-item title="慢日志" name="6">
|
||||||
<SlowLog ref="slowLogRef" />
|
<SlowLog ref="slowLogRef" />
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
</el-collapse>
|
</el-collapse>
|
||||||
|
</LayoutContent>
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ElMessage, FormInstance } from 'element-plus';
|
import { ElMessage, FormInstance } from 'element-plus';
|
||||||
|
import LayoutContent from '@/layout/layout-content.vue';
|
||||||
import ContainerLog from '@/components/container-log/index.vue';
|
import ContainerLog from '@/components/container-log/index.vue';
|
||||||
import Status from '@/views/database/mysql/setting/status/index.vue';
|
import Status from '@/views/database/mysql/setting/status/index.vue';
|
||||||
import Variables from '@/views/database/mysql/setting/variables/index.vue';
|
import Variables from '@/views/database/mysql/setting/variables/index.vue';
|
||||||
|
|
|
||||||
|
|
@ -1,100 +1,32 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Submenu activeName="redis" />
|
<Submenu activeName="redis" />
|
||||||
<div v-show="!redisInfo.isExist" style="margin-top: 20px">
|
|
||||||
<el-alert :closable="false" :title="$t('database.noMysql', ['Redis'])" type="info">
|
|
||||||
<el-link icon="Position" @click="goRouter('/apps')" type="primary">
|
|
||||||
{{ $t('database.goInstall') }}
|
|
||||||
</el-link>
|
|
||||||
</el-alert>
|
|
||||||
</div>
|
|
||||||
<div v-show="redisInfo.isExist">
|
|
||||||
<el-button style="margin-top: 20px" size="default" icon="Tickets" @click="changeView('status')">
|
|
||||||
{{ $t('database.status') }}
|
|
||||||
</el-button>
|
|
||||||
<el-button style="margin-top: 20px" size="default" icon="Setting" @click="changeView('setting')">
|
|
||||||
{{ $t('database.setting') }}
|
|
||||||
</el-button>
|
|
||||||
<el-button style="margin-top: 20px" size="default" icon="Files" @click="changeView('persistence')">
|
|
||||||
{{ $t('database.persistence') }}
|
|
||||||
</el-button>
|
|
||||||
<el-button style="margin-top: 20px" size="default" icon="Setting" @click="changeView('terminal')">
|
|
||||||
{{ $t('database.terminal') }}
|
|
||||||
</el-button>
|
|
||||||
|
|
||||||
<Status ref="statusRef"></Status>
|
<AppStatus :app-key="'redis'" style="margin-top: 20px" @setting="onSetting"></AppStatus>
|
||||||
<Setting ref="settingRef"></Setting>
|
<Setting ref="settingRef"></Setting>
|
||||||
<Persistence ref="persistenceRef"></Persistence>
|
|
||||||
<Terminal ref="terminalRef"></Terminal>
|
<Terminal v-if="!isOnSetting" style="margin-top: 5px" ref="terminalRef"></Terminal>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import Submenu from '@/views/database/index.vue';
|
import Submenu from '@/views/database/index.vue';
|
||||||
import Status from '@/views/database/redis/status/index.vue';
|
|
||||||
import Setting from '@/views/database/redis/setting/index.vue';
|
import Setting from '@/views/database/redis/setting/index.vue';
|
||||||
import Persistence from '@/views/database/redis/persistence/index.vue';
|
|
||||||
import Terminal from '@/views/database/redis/terminal/index.vue';
|
import Terminal from '@/views/database/redis/terminal/index.vue';
|
||||||
import { onMounted, reactive, ref } from 'vue';
|
import AppStatus from '@/components/app-status/index.vue';
|
||||||
import { CheckAppInstalled } from '@/api/modules/app';
|
import { onMounted, ref } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const statusRef = ref();
|
|
||||||
const settingRef = ref();
|
|
||||||
const persistenceRef = ref();
|
|
||||||
const terminalRef = ref();
|
const terminalRef = ref();
|
||||||
|
const settingRef = ref();
|
||||||
|
const isOnSetting = ref(false);
|
||||||
|
|
||||||
const redisInfo = reactive({
|
const onSetting = async () => {
|
||||||
name: '',
|
isOnSetting.value = true;
|
||||||
version: '',
|
terminalRef.value.onClose();
|
||||||
isExist: false,
|
settingRef.value!.acceptParams();
|
||||||
});
|
|
||||||
|
|
||||||
const changeView = async (params: string) => {
|
|
||||||
switch (params) {
|
|
||||||
case 'status':
|
|
||||||
settingRef.value!.onClose();
|
|
||||||
terminalRef.value!.onClose();
|
|
||||||
persistenceRef.value!.onClose();
|
|
||||||
statusRef.value!.acceptParams(params);
|
|
||||||
break;
|
|
||||||
case 'setting':
|
|
||||||
statusRef.value!.onClose();
|
|
||||||
terminalRef.value!.onClose();
|
|
||||||
persistenceRef.value!.onClose();
|
|
||||||
settingRef.value!.acceptParams(params);
|
|
||||||
break;
|
|
||||||
case 'persistence':
|
|
||||||
statusRef.value!.onClose();
|
|
||||||
settingRef.value!.onClose();
|
|
||||||
terminalRef.value!.onClose();
|
|
||||||
persistenceRef.value!.acceptParams(params);
|
|
||||||
break;
|
|
||||||
case 'terminal':
|
|
||||||
statusRef.value!.onClose();
|
|
||||||
settingRef.value!.onClose();
|
|
||||||
persistenceRef.value!.onClose();
|
|
||||||
terminalRef.value!.acceptParams(params);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const checkRedisInstalled = async () => {
|
|
||||||
const res = await CheckAppInstalled('redis');
|
|
||||||
redisInfo.isExist = res.data.isExist;
|
|
||||||
redisInfo.name = res.data.name;
|
|
||||||
redisInfo.version = res.data.version;
|
|
||||||
if (redisInfo.isExist) {
|
|
||||||
changeView('status');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const goRouter = async (path: string) => {
|
|
||||||
router.push({ path: path });
|
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
checkRedisInstalled();
|
terminalRef.value.acceptParams();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,66 +1,94 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="settingShow">
|
<div class="demo-collapse" v-show="settingShow">
|
||||||
<el-card style="margin-top: 5px">
|
<el-card style="margin-top: 5px">
|
||||||
<el-radio-group v-model="confShowType" @change="onChangeMode">
|
<LayoutContent :header="$t('database.setting')" back-name="Redis" :reload="true">
|
||||||
<el-radio-button label="base">{{ $t('database.baseConf') }}</el-radio-button>
|
<el-collapse v-model="activeName" accordion>
|
||||||
<el-radio-button label="all">{{ $t('database.allConf') }}</el-radio-button>
|
<el-collapse-item :title="$t('database.baseSetting')" name="1">
|
||||||
</el-radio-group>
|
<el-radio-group v-model="confShowType" @change="onChangeMode">
|
||||||
<el-form v-if="confShowType === 'base'" :model="form" ref="formRef" :rules="rules" label-width="120px">
|
<el-radio-button label="base">{{ $t('database.baseConf') }}</el-radio-button>
|
||||||
<el-row style="margin-top: 20px">
|
<el-radio-button label="all">{{ $t('database.allConf') }}</el-radio-button>
|
||||||
<el-col :span="1"><br /></el-col>
|
</el-radio-group>
|
||||||
<el-col :span="10">
|
<el-form
|
||||||
<el-form-item :label="$t('setting.port')" prop="port" :rules="Rules.port">
|
v-if="confShowType === 'base'"
|
||||||
<el-input clearable type="number" v-model.number="form.port">
|
:model="form"
|
||||||
<template #append>
|
ref="formRef"
|
||||||
<el-button @click="onChangePort(formRef)" icon="Collection">
|
:rules="rules"
|
||||||
{{ $t('commons.button.save') }}
|
label-width="120px"
|
||||||
</el-button>
|
>
|
||||||
</template>
|
<el-row style="margin-top: 20px">
|
||||||
</el-input>
|
<el-col :span="1"><br /></el-col>
|
||||||
<span class="input-help">{{ $t('database.portHelper') }}</span>
|
<el-col :span="10">
|
||||||
</el-form-item>
|
<el-form-item :label="$t('setting.port')" prop="port" :rules="Rules.port">
|
||||||
<el-form-item :label="$t('setting.password')" prop="requirepass">
|
<el-input clearable type="number" v-model.number="form.port">
|
||||||
<el-input type="password" show-password clearable v-model="form.requirepass" />
|
<template #append>
|
||||||
<span class="input-help">{{ $t('database.requirepassHelper') }}</span>
|
<el-button @click="onChangePort(formRef)" icon="Collection">
|
||||||
</el-form-item>
|
{{ $t('commons.button.save') }}
|
||||||
<el-form-item :label="$t('database.timeout')" prop="timeout">
|
</el-button>
|
||||||
<el-input clearable type="number" v-model.number="form.timeout" />
|
</template>
|
||||||
<span class="input-help">{{ $t('database.timeoutHelper') }}</span>
|
</el-input>
|
||||||
</el-form-item>
|
<span class="input-help">{{ $t('database.portHelper') }}</span>
|
||||||
<el-form-item :label="$t('database.maxclients')" prop="maxclients">
|
</el-form-item>
|
||||||
<el-input clearable type="number" v-model.number="form.maxclients" />
|
<el-form-item :label="$t('setting.password')" prop="requirepass">
|
||||||
</el-form-item>
|
<el-input type="password" show-password clearable v-model="form.requirepass" />
|
||||||
<el-form-item :label="$t('database.maxmemory')" prop="maxmemory">
|
<span class="input-help">{{ $t('database.requirepassHelper') }}</span>
|
||||||
<el-input clearable type="number" v-model.number="form.maxmemory" />
|
</el-form-item>
|
||||||
<span class="input-help">{{ $t('database.maxmemoryHelper') }}</span>
|
<el-form-item :label="$t('database.timeout')" prop="timeout">
|
||||||
</el-form-item>
|
<el-input clearable type="number" v-model.number="form.timeout" />
|
||||||
<el-form-item>
|
<span class="input-help">{{ $t('database.timeoutHelper') }}</span>
|
||||||
<el-button type="primary" size="default" @click="onSave(formRef)" style="width: 90px">
|
</el-form-item>
|
||||||
|
<el-form-item :label="$t('database.maxclients')" prop="maxclients">
|
||||||
|
<el-input clearable type="number" v-model.number="form.maxclients" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item :label="$t('database.maxmemory')" prop="maxmemory">
|
||||||
|
<el-input clearable type="number" v-model.number="form.maxmemory" />
|
||||||
|
<span class="input-help">{{ $t('database.maxmemoryHelper') }}</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
size="default"
|
||||||
|
@click="onSave(formRef)"
|
||||||
|
style="width: 90px"
|
||||||
|
>
|
||||||
|
{{ $t('commons.button.save') }}
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<div v-if="confShowType === 'all'">
|
||||||
|
<codemirror
|
||||||
|
:autofocus="true"
|
||||||
|
placeholder="None data"
|
||||||
|
:indent-with-tab="true"
|
||||||
|
:tabSize="4"
|
||||||
|
style="margin-top: 10px; height: calc(100vh - 280px)"
|
||||||
|
:lineWrapping="true"
|
||||||
|
:matchBrackets="true"
|
||||||
|
theme="cobalt"
|
||||||
|
:styleActiveLine="true"
|
||||||
|
:extensions="extensions"
|
||||||
|
v-model="mysqlConf"
|
||||||
|
:readOnly="true"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
size="default"
|
||||||
|
@click="onSaveFile"
|
||||||
|
style="width: 90px; margin-top: 5px"
|
||||||
|
>
|
||||||
{{ $t('commons.button.save') }}
|
{{ $t('commons.button.save') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-form-item>
|
</div>
|
||||||
</el-col>
|
</el-collapse-item>
|
||||||
</el-row>
|
<el-collapse-item :title="$t('database.status')" name="2">
|
||||||
</el-form>
|
<Status ref="statusRef" />
|
||||||
<div v-if="confShowType === 'all'">
|
</el-collapse-item>
|
||||||
<codemirror
|
<el-collapse-item :title="$t('database.persistence')" name="3">
|
||||||
:autofocus="true"
|
<Persistence ref="persistenceRef" />
|
||||||
placeholder="None data"
|
</el-collapse-item>
|
||||||
:indent-with-tab="true"
|
</el-collapse>
|
||||||
:tabSize="4"
|
</LayoutContent>
|
||||||
style="margin-top: 10px; height: calc(100vh - 280px)"
|
|
||||||
:lineWrapping="true"
|
|
||||||
:matchBrackets="true"
|
|
||||||
theme="cobalt"
|
|
||||||
:styleActiveLine="true"
|
|
||||||
:extensions="extensions"
|
|
||||||
v-model="mysqlConf"
|
|
||||||
:readOnly="true"
|
|
||||||
/>
|
|
||||||
<el-button type="primary" size="default" @click="onSaveFile" style="width: 90px; margin-top: 5px">
|
|
||||||
{{ $t('commons.button.save') }}
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
<ConfirmDialog ref="confirmDialogRef" @confirm="onSubmitSave"></ConfirmDialog>
|
<ConfirmDialog ref="confirmDialogRef" @confirm="onSubmitSave"></ConfirmDialog>
|
||||||
|
|
@ -72,9 +100,12 @@ import { ElMessage, FormInstance } from 'element-plus';
|
||||||
import { reactive, ref } from 'vue';
|
import { reactive, ref } from 'vue';
|
||||||
import { Codemirror } from 'vue-codemirror';
|
import { Codemirror } from 'vue-codemirror';
|
||||||
import { javascript } from '@codemirror/lang-javascript';
|
import { javascript } from '@codemirror/lang-javascript';
|
||||||
|
import LayoutContent from '@/layout/layout-content.vue';
|
||||||
import { oneDark } from '@codemirror/theme-one-dark';
|
import { oneDark } from '@codemirror/theme-one-dark';
|
||||||
import { LoadFile } from '@/api/modules/files';
|
import { LoadFile } from '@/api/modules/files';
|
||||||
import ConfirmDialog from '@/components/confirm-dialog/index.vue';
|
import ConfirmDialog from '@/components/confirm-dialog/index.vue';
|
||||||
|
import Status from '@/views/database/redis/setting/status/index.vue';
|
||||||
|
import Persistence from '@/views/database/redis/setting/persistence/index.vue';
|
||||||
import { loadRedisConf, updateRedisConf, updateRedisConfByFile } from '@/api/modules/database';
|
import { loadRedisConf, updateRedisConf, updateRedisConfByFile } from '@/api/modules/database';
|
||||||
import i18n from '@/lang';
|
import i18n from '@/lang';
|
||||||
import { Rules } from '@/global/form-rules';
|
import { Rules } from '@/global/form-rules';
|
||||||
|
|
@ -98,6 +129,10 @@ const rules = reactive({
|
||||||
maxmemory: [Rules.number],
|
maxmemory: [Rules.number],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const activeName = ref('1');
|
||||||
|
const statusRef = ref();
|
||||||
|
const persistenceRef = ref();
|
||||||
|
|
||||||
const formRef = ref<FormInstance>();
|
const formRef = ref<FormInstance>();
|
||||||
const mysqlConf = ref();
|
const mysqlConf = ref();
|
||||||
const confirmDialogRef = ref();
|
const confirmDialogRef = ref();
|
||||||
|
|
@ -107,6 +142,8 @@ const settingShow = ref<boolean>(false);
|
||||||
const acceptParams = (): void => {
|
const acceptParams = (): void => {
|
||||||
settingShow.value = true;
|
settingShow.value = true;
|
||||||
loadform();
|
loadform();
|
||||||
|
statusRef.value!.acceptParams();
|
||||||
|
persistenceRef.value!.acceptParams();
|
||||||
};
|
};
|
||||||
const onClose = (): void => {
|
const onClose = (): void => {
|
||||||
settingShow.value = false;
|
settingShow.value = false;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue