From c8f0b0a83f06f38d5d4629320bdb2fce8facfddb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=AE=97=E6=B4=8B?= <liuzongyang@cqliving.com>
Date: Thu, 27 Oct 2022 10:30:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=B9=B6=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mayfly_go_web/src/store/interface/index.ts    |  3 +-
 .../src/store/modules/mongoDbOptInfo.ts       |  3 +-
 .../src/store/modules/mysqlDbOptInfo.ts       |  3 +-
 .../src/store/modules/redisDbOptInfo.ts       |  3 +-
 mayfly_go_web/src/views/ops/db/DbList.vue     | 24 ++++++---------
 mayfly_go_web/src/views/ops/db/SqlExec.vue    |  8 ++---
 .../src/views/ops/mongo/MongoDataOp.vue       | 30 ++++++++++++++++++-
 .../src/views/ops/mongo/MongoList.vue         | 12 +++-----
 .../src/views/ops/redis/DataOperation.vue     | 10 ++++---
 .../src/views/ops/redis/RedisList.vue         |  9 +++---
 10 files changed, 59 insertions(+), 46 deletions(-)

diff --git a/mayfly_go_web/src/store/interface/index.ts b/mayfly_go_web/src/store/interface/index.ts
index 40a83c16..3ae8a915 100644
--- a/mayfly_go_web/src/store/interface/index.ts
+++ b/mayfly_go_web/src/store/interface/index.ts
@@ -74,8 +74,7 @@ export interface UserInfosState {
 // 数据操作信息
 export interface DbOptInfoState {
     dbOptInfo: {
-        projectId?: number,
-        envId?: number,
+        tagPath?: string,
         dbId?: number,
         db?: string,
     }
diff --git a/mayfly_go_web/src/store/modules/mongoDbOptInfo.ts b/mayfly_go_web/src/store/modules/mongoDbOptInfo.ts
index 1245e7d2..b184284c 100644
--- a/mayfly_go_web/src/store/modules/mongoDbOptInfo.ts
+++ b/mayfly_go_web/src/store/modules/mongoDbOptInfo.ts
@@ -6,8 +6,7 @@ const mongoDbOptInfoModule: Module<DbOptInfoState, RootStateTypes> = {
     namespaced: true,
     state: {
         dbOptInfo: {
-            projectId: 0,
-            envId: 0,
+            tagPath: '',
             dbId: 0,
             db: '0',
         },
diff --git a/mayfly_go_web/src/store/modules/mysqlDbOptInfo.ts b/mayfly_go_web/src/store/modules/mysqlDbOptInfo.ts
index 7f5590fc..b92c03fd 100644
--- a/mayfly_go_web/src/store/modules/mysqlDbOptInfo.ts
+++ b/mayfly_go_web/src/store/modules/mysqlDbOptInfo.ts
@@ -6,8 +6,7 @@ const sqlExecInfoModule: Module<DbOptInfoState, RootStateTypes> = {
     namespaced: true,
     state: {
         dbOptInfo: {
-            projectId: 0,
-            envId: 0,
+            tagPath: '',
             dbId: 0,
             db: '0',
         }
diff --git a/mayfly_go_web/src/store/modules/redisDbOptInfo.ts b/mayfly_go_web/src/store/modules/redisDbOptInfo.ts
index 045a2d07..4e897947 100644
--- a/mayfly_go_web/src/store/modules/redisDbOptInfo.ts
+++ b/mayfly_go_web/src/store/modules/redisDbOptInfo.ts
@@ -6,8 +6,7 @@ const redisDbOptInfoModule: Module<DbOptInfoState, RootStateTypes> = {
     namespaced: true,
     state: {
         dbOptInfo: {
-            projectId: 0,
-            envId: 0,
+            tagPath: '',
             dbId: 0,
             db: '0',
         },
diff --git a/mayfly_go_web/src/views/ops/db/DbList.vue b/mayfly_go_web/src/views/ops/db/DbList.vue
index 0ec5394a..bf7b880a 100644
--- a/mayfly_go_web/src/views/ops/db/DbList.vue
+++ b/mayfly_go_web/src/views/ops/db/DbList.vue
@@ -39,18 +39,13 @@
                                 <el-icon class="el-input__icon"><search-icon /></el-icon>
                               </template>
                             </el-input>
-                            <el-tag
-                                @click="showTableInfo(scope.row, db)"
-                                effect="plain"
-                                type="success"
-                                size="small"
-                                v-for="db in filterDb.list"
-                                :key="db"
-                                style="cursor: pointer; margin-left: 3px; margin-bottom: 3px;"
-                                >{{ db }}</el-tag
-                            >
-                              <el-link type="primary" plain size="small" :underline="false" @click="openSqlExec(scope.row, db)" style="position: absolute; right: 4px">数据操作</el-link>
-                            </div>
+                          <div class="el-tag--plain el-tag--success"
+                               v-for="db in filterDb.list" :key="db"
+                               style="border:1px var(--color-success-light-3) solid; margin-top: 3px;border-radius: 5px; padding: 2px;position: relative"
+                          >
+                            <el-link type="success" plain size="small" :underline="false" @click="showTableInfo(scope.row, db)">{{ db }}</el-link>
+                            <el-link type="primary" plain size="small" :underline="false" @click="openSqlExec(scope.row, db)" style="position: absolute; right: 4px">数据操作</el-link>
+                          </div>
                         </el-popover>
                     </template>
                 </el-table-column>
@@ -636,10 +631,9 @@ export default defineComponent({
           // 判断db是否发生改变
           let oldDb = store.state.sqlExecInfo.dbOptInfo.db;
           if(db && oldDb !== db){
-            const {projectId, envId, id} = row;
+            const {tagPath, id} = row;
             let params = {
-              projectId,
-              envId,
+              tagPath,
               dbId: id,
               db
             }
diff --git a/mayfly_go_web/src/views/ops/db/SqlExec.vue b/mayfly_go_web/src/views/ops/db/SqlExec.vue
index 8fc78e47..8c7dffb4 100644
--- a/mayfly_go_web/src/views/ops/db/SqlExec.vue
+++ b/mayfly_go_web/src/views/ops/db/SqlExec.vue
@@ -344,7 +344,6 @@ export default defineComponent({
         const tableMap = new Map();
 
         const state = reactive({
-            projectId: null,
             token: token,
             defalutLimit: 20, // 默认查询数量
             tags: [],
@@ -1240,9 +1239,8 @@ export default defineComponent({
             await saveSql();
           }
           // 设置项目id和环境id
-          const { projectId, envId, dbId, db} = sqlExecInfo.dbOptInfo;
-          state.projectId = projectId;
-          state.params.envId = envId
+          const { tagPath, dbId, db} = sqlExecInfo.dbOptInfo;
+          state.params.tagPath = tagPath
           // 查询有哪些数据库实例
           await search()
           // 加载数据库所有schema
@@ -1255,7 +1253,7 @@ export default defineComponent({
 
         // 判断如果有数据则加载下拉选项
         let sqlExecInfo = store.state.sqlExecInfo
-        if(sqlExecInfo.dbOptInfo.envId){
+        if(sqlExecInfo.dbOptInfo.tagPath){
           setSelects(sqlExecInfo)
         }
 
diff --git a/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue b/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
index 21313a9e..50491a78 100644
--- a/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
+++ b/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
@@ -134,13 +134,14 @@
 
 <script lang="ts">
 import { mongoApi } from './api';
-import { toRefs, ref, reactive, defineComponent } from 'vue';
+import {toRefs, ref, reactive, defineComponent, watch} from 'vue';
 import { ElMessage } from 'element-plus';
 
 import { isTrue, notBlank, notNull } from '@/common/assert';
 import { formatByteSize } from '@/common/utils/format';
 import JsonEdit from '@/components/jsonedit/index.vue';
 import { tagApi } from '../tag/api.ts';
+import { useStore } from '@/store/index.ts';
 
 export default defineComponent({
     name: 'MongoDataOp',
@@ -148,6 +149,7 @@ export default defineComponent({
         JsonEdit,
     },
     setup() {
+        const store = useStore();
         const findParamInputRef: any = ref(null);
         const state = reactive({
             loading: false,
@@ -425,6 +427,32 @@ export default defineComponent({
             delete state.dataTabs[targetName];
         };
 
+        // 加载选中的tagPath
+        const setSelects = async (mongoDbOptInfo: any) =>{
+          const { tagPath, dbId, db} = mongoDbOptInfo.dbOptInfo;
+          state.query.tagPath = tagPath
+          await searchMongo();
+          state.mongoId = dbId
+          await getDatabases();
+          state.database = db
+          await getCollections();
+          if(state.collection){
+            state.collection = ''
+            state.dataTabs = {}
+          }
+        }
+  
+        // 判断如果有数据则加载下拉选项
+        let mongoDbOptInfo = store.state.mongoDbOptInfo
+        if(mongoDbOptInfo.dbOptInfo.tagPath){
+          setSelects(mongoDbOptInfo)
+        }
+  
+        // 监听选中操作的db变化，并加载下拉选项
+        watch(store.state.mongoDbOptInfo,async (newValue) => {
+          await setSelects(newValue)
+        })
+
         return {
             ...toRefs(state),
             findParamInputRef,
diff --git a/mayfly_go_web/src/views/ops/mongo/MongoList.vue b/mayfly_go_web/src/views/ops/mongo/MongoList.vue
index 51452d35..c8f4df31 100644
--- a/mayfly_go_web/src/views/ops/mongo/MongoList.vue
+++ b/mayfly_go_web/src/views/ops/mongo/MongoList.vue
@@ -208,8 +208,6 @@ export default defineComponent({
         const state = reactive({
             tags: [],
             dbOps: {
-              projectId: null,
-              envId: null,
               dbId: 0,
               db: '',
             },
@@ -275,9 +273,8 @@ export default defineComponent({
         };
 
         const showDatabases = async (id: number, row: any) => {
-            const {projectId, envId} = row;
-            state.dbOps.projectId = projectId
-            state.dbOps.envId = envId
+          console.log(row)
+            state.query.tagPath = row.tagPath
             state.dbOps.dbId = id
 
             state.databaseDialog.data = (await mongoApi.databases.request({ id })).Databases;
@@ -408,13 +405,12 @@ export default defineComponent({
         const openDataOps = ( row: any) => {
           state.dbOps.db = row.Name
 
+          debugger
           let data = {
-            projectId: state.dbOps.projectId,
-            envId: state.dbOps.envId,
+            tagPath: state.query.tagPath,
             dbId: state.dbOps.dbId,
             db: state.dbOps.db,
           }
-          console.log(data)
           // 判断db是否发生改变
           let oldDb = store.state.mongoDbOptInfo.dbOptInfo.db;
           if(oldDb !== row.Name){
diff --git a/mayfly_go_web/src/views/ops/redis/DataOperation.vue b/mayfly_go_web/src/views/ops/redis/DataOperation.vue
index 775b81f5..46a1013c 100644
--- a/mayfly_go_web/src/views/ops/redis/DataOperation.vue
+++ b/mayfly_go_web/src/views/ops/redis/DataOperation.vue
@@ -156,6 +156,9 @@ import SetValue from './SetValue.vue';
 import ListValue from './ListValue.vue';
 import { isTrue, notBlank, notNull } from '@/common/assert';
 
+import { useStore } from '@/store/index.ts';
+import { tagApi } from '../tag/api.ts';
+
 export default defineComponent({
     name: 'DataOperation',
     components: {
@@ -413,9 +416,8 @@ export default defineComponent({
       // 加载选中的db
       const setSelects = async (redisDbOptInfo: any) =>{
         // 设置项目id和环境id
-        const { projectId, envId, dbId} = redisDbOptInfo.dbOptInfo;
-        state.projectId = projectId;
-        state.query.envId = envId
+        const { tagPath, dbId} = redisDbOptInfo.dbOptInfo;
+        state.query.tagPath = tagPath;
         await searchRedis()
         state.scanParam.id = dbId
         changeRedis(dbId)
@@ -427,7 +429,7 @@ export default defineComponent({
 
       // 判断如果有数据则加载下拉选项
       let redisDbOptInfo = store.state.redisDbOptInfo
-      if(redisDbOptInfo.dbOptInfo.envId){
+      if(redisDbOptInfo.dbOptInfo.tagPath){
         setSelects(redisDbOptInfo)
       }
 
diff --git a/mayfly_go_web/src/views/ops/redis/RedisList.vue b/mayfly_go_web/src/views/ops/redis/RedisList.vue
index 9b9e04b3..7ac6a83f 100644
--- a/mayfly_go_web/src/views/ops/redis/RedisList.vue
+++ b/mayfly_go_web/src/views/ops/redis/RedisList.vue
@@ -32,12 +32,12 @@
                 <el-table-column label="更多" min-width="155" fixed="right">
                     <template #default="scope">
                         <el-link
-                            v-if="scope.row.mode == 'standalone' || scope.row.mode == 'sentinel'"
+                            v-if="scope.row.mode === 'standalone' || scope.row.mode === 'sentinel'"
                             type="primary"
                             @click="info(scope.row)"
                             :underline="false"
                             >单机信息</el-link>
-                        <el-link @click="onShowClusterInfo(scope.row)" v-if="scope.row.mode == 'cluster'" type="success" :underline="false">集群信息</el-link>
+                        <el-link @click="onShowClusterInfo(scope.row)" v-if="scope.row.mode === 'cluster'" type="success" :underline="false">集群信息</el-link>
                         <el-divider direction="vertical" border-style="dashed" />
                         <el-link @click="openDataOpt(scope.row)" type="success" :underline="false">数据操作</el-link>
                     </template>
@@ -287,13 +287,12 @@ export default defineComponent({
         };
         // 打开redis数据操作页
         const openDataOpt = (row : any) => {
-          const {projectId, envId, id, db} = row;
+          const {tagPath, id, db} = row;
           // 判断db是否发生改变
           let oldDbId = store.state.redisDbOptInfo.dbOptInfo.dbId;
           if(oldDbId !== id){
             let params = {
-              projectId,
-              envId,
+              tagPath,
               dbId: id,
               db
             }