From 54e81b2de56985cf20742de342299e7a95c82249 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Wed, 15 May 2024 23:04:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=BA=93=E7=8A=B6=E6=80=81=E5=BC=82=E5=B8=B8=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=20(#5020)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/database/mysql/index.vue      | 15 ++++++++++++++-
 frontend/src/views/database/postgresql/index.vue | 15 ++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index 7fec71bbf..b9c0f65d9 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -112,7 +112,13 @@
                 </el-row>
             </template>
             <template #main v-if="currentDB">
-                <ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data">
+                <ComplexTable
+                    :pagination-config="paginationConfig"
+                    :class="{ mask: maskShow && currentDB.from !== 'local' }"
+                    @sort-change="search"
+                    @search="search"
+                    :data="data"
+                >
                     <el-table-column :label="$t('commons.table.name')" prop="name" sortable min-width="90">
                         <template #default="{ row }">
                             <Tooltip v-if="!row.isDelete" :islink="false" :text="row.name" />
@@ -210,6 +216,13 @@
             </template>
         </LayoutContent>
 
+        <el-card
+            v-if="mysqlStatus != 'Running' && currentDB && !loading && maskShow && currentDB?.from === 'local'"
+            class="mask-prompt"
+        >
+            <span>{{ $t('commons.service.serviceNotStarted', ['MySQL']) }}</span>
+        </el-card>
+
         <div v-if="dbOptionsLocal.length === 0 && dbOptionsRemote.length === 0">
             <LayoutContent :title="'MySQL ' + $t('menu.database')" :divider="true">
                 <template #main>
diff --git a/frontend/src/views/database/postgresql/index.vue b/frontend/src/views/database/postgresql/index.vue
index b7538ad14..700e3f74b 100644
--- a/frontend/src/views/database/postgresql/index.vue
+++ b/frontend/src/views/database/postgresql/index.vue
@@ -89,7 +89,13 @@
                 </el-row>
             </template>
             <template #main v-if="currentDB">
-                <ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data">
+                <ComplexTable
+                    :class="{ mask: maskShow && currentDB.from !== 'local' }"
+                    :pagination-config="paginationConfig"
+                    @sort-change="search"
+                    @search="search"
+                    :data="data"
+                >
                     <el-table-column :label="$t('commons.table.name')" prop="name" sortable>
                         <template #default="{ row }">
                             <Tooltip v-if="!row.isDelete" :islink="false" :text="row.name" />
@@ -176,6 +182,13 @@
             </template>
         </LayoutContent>
 
+        <el-card
+            v-if="postgresqlStatus != 'Running' && currentDB && !loading && maskShow && currentDB?.from === 'local'"
+            class="mask-prompt"
+        >
+            <span>{{ $t('commons.service.serviceNotStarted', ['PostgreSQL']) }}</span>
+        </el-card>
+
         <div v-if="dbOptionsLocal.length === 0 && dbOptionsRemote.length === 0">
             <LayoutContent :title="'PostgreSQL ' + $t('menu.database')" :divider="true">
                 <template #main>