1
0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-19 08:19:15 +08:00

fix: 数据库选择项样式优化 (#2235)

This commit is contained in:
ssongliu 2023-09-10 17:20:13 +08:00 committed by GitHub
parent 9d11e56074
commit eff3e8fcc5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 17 deletions

View File

@ -125,7 +125,12 @@
<el-select class="selectClass" clearable v-model="dialogData.rowData!.appID"> <el-select class="selectClass" clearable v-model="dialogData.rowData!.appID">
<el-option :label="$t('commons.table.all')" value="all" /> <el-option :label="$t('commons.table.all')" value="all" />
<div v-for="item in appOptions" :key="item.id"> <div v-for="item in appOptions" :key="item.id">
<el-option :label="item.key + ' [' + item.name + ']'" :value="item.id + ''" /> <el-option :value="item.id + ''">
<span>{{ item.name }}</span>
<el-tag class="tagClass">
{{ item.key }}
</el-tag>
</el-option>
</div> </div>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -135,12 +140,15 @@
<el-form-item :label="$t('cronjob.database')" prop="dbName"> <el-form-item :label="$t('cronjob.database')" prop="dbName">
<el-select class="selectClass" clearable v-model="dialogData.rowData!.dbName"> <el-select class="selectClass" clearable v-model="dialogData.rowData!.dbName">
<el-option :label="$t('commons.table.all')" value="all" /> <el-option :label="$t('commons.table.all')" value="all" />
<el-option <el-option v-for="item in mysqlInfo.dbs" :key="item.id" :value="item.id + ''">
v-for="item in mysqlInfo.dbs" <span>{{ item.name }}</span>
:key="item.id" <el-tag class="tagClass">
:label="item.database + ' [' + item.name + ']'" {{ item.from === 'local' ? $t('database.local') : $t('database.remote') }}
:value="item.id + ''" </el-tag>
/> <el-tag class="tagClass">
{{ item.database }}
</el-tag>
</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</div> </div>
@ -609,4 +617,10 @@ defineExpose({
.selectClass { .selectClass {
width: 100%; width: 100%;
} }
.tagClass {
float: right;
margin-right: 10px;
font-size: 12px;
margin-top: 5px;
}
</style> </style>

View File

@ -27,11 +27,12 @@
<template #prefix>{{ $t('commons.table.type') }}</template> <template #prefix>{{ $t('commons.table.type') }}</template>
<el-option-group :label="$t('database.local')"> <el-option-group :label="$t('database.local')">
<div v-for="(item, index) in dbOptionsLocal" :key="index"> <div v-for="(item, index) in dbOptionsLocal" :key="index">
<el-option <el-option v-if="item.from === 'local'" :value="item.database">
v-if="item.from === 'local'" <span>{{ item.database }}</span>
:value="item.database" <el-tag class="tagClass">
:label="item.database + ' [' + (item.type === 'mysql' ? 'MySQL' : 'MariaDB') + ']'" {{ item.type === 'mysql' ? 'MySQL' : 'MariaDB' }}
></el-option> </el-tag>
</el-option>
</div> </div>
<el-button link type="primary" class="jumpAdd" @click="goRouter('app')" icon="Position"> <el-button link type="primary" class="jumpAdd" @click="goRouter('app')" icon="Position">
{{ $t('database.goInstall') }} {{ $t('database.goInstall') }}
@ -39,11 +40,12 @@
</el-option-group> </el-option-group>
<el-option-group :label="$t('database.remote')"> <el-option-group :label="$t('database.remote')">
<div v-for="(item, index) in dbOptionsRemote" :key="index"> <div v-for="(item, index) in dbOptionsRemote" :key="index">
<el-option <el-option v-if="item.from === 'remote'" :value="item.database">
v-if="item.from === 'remote'" <span>{{ item.database }}</span>
:value="item.database" <el-tag class="tagClass">
:label="item.database + ' [' + (item.type === 'mysql' ? 'MySQL' : 'MariaDB') + ']'" {{ item.type === 'mysql' ? 'MySQL' : 'MariaDB' }}
></el-option> </el-tag>
</el-option>
</div> </div>
<el-button link type="primary" class="jumpAdd" @click="goRouter('remote')" icon="Position"> <el-button link type="primary" class="jumpAdd" @click="goRouter('remote')" icon="Position">
{{ $t('database.createRemoteDB') }} {{ $t('database.createRemoteDB') }}
@ -563,6 +565,12 @@ onMounted(() => {
.jumpAdd { .jumpAdd {
margin-top: 10px; margin-top: 10px;
margin-left: 15px; margin-left: 15px;
margin-bottom: 5px;
font-size: 12px; font-size: 12px;
} }
.tagClass {
float: right;
font-size: 12px;
margin-top: 5px;
}
</style> </style>