From 9013fff804208177508b0a0151a5479f97e964fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=AE=97=E6=B4=8B?= <liuzongyang@cqliving.com>
Date: Tue, 18 Oct 2022 17:21:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20DBMS=20=E6=95=B0=E6=8D=AE=E5=BA=93?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E3=80=81redis=E7=AE=A1=E7=90=86=E3=80=81mong?=
 =?UTF-8?q?o=E7=AE=A1=E7=90=86=EF=BC=8C=E6=96=B0=E5=A2=9E=E3=80=90?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=93=8D=E4=BD=9C=E3=80=91=E5=BF=AB=E6=8D=B7?=
 =?UTF-8?q?=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mayfly_go_web/src/store/index.ts              |  6 ++
 mayfly_go_web/src/store/interface/index.ts    | 13 ++++
 .../src/store/modules/mongoDbOptInfo.ts       | 31 ++++++++
 .../src/store/modules/mysqlDbOptInfo.ts       | 31 ++++++++
 .../src/store/modules/redisDbOptInfo.ts       | 31 ++++++++
 .../views/ops/component/ProjectEnvSelect.vue  | 22 +++++-
 mayfly_go_web/src/views/ops/db/DbList.vue     | 70 ++++++++++++++++---
 mayfly_go_web/src/views/ops/db/SqlExec.vue    | 39 ++++++++++-
 .../src/views/ops/mongo/MongoDataOp.vue       | 35 +++++++++-
 .../src/views/ops/mongo/MongoList.vue         | 40 ++++++++++-
 .../src/views/ops/redis/DataOperation.vue     | 48 +++++++++++--
 .../src/views/ops/redis/HashValue.vue         |  8 +--
 .../src/views/ops/redis/ListValue.vue         |  6 +-
 .../src/views/ops/redis/RedisList.vue         | 30 ++++++--
 .../src/views/ops/redis/SetValue.vue          |  6 +-
 .../src/views/ops/redis/StringValue.vue       |  6 +-
 16 files changed, 377 insertions(+), 45 deletions(-)
 create mode 100644 mayfly_go_web/src/store/modules/mongoDbOptInfo.ts
 create mode 100644 mayfly_go_web/src/store/modules/mysqlDbOptInfo.ts
 create mode 100644 mayfly_go_web/src/store/modules/redisDbOptInfo.ts

diff --git a/mayfly_go_web/src/store/index.ts b/mayfly_go_web/src/store/index.ts
index 50e8e872..20b421d4 100644
--- a/mayfly_go_web/src/store/index.ts
+++ b/mayfly_go_web/src/store/index.ts
@@ -5,6 +5,9 @@ import themeConfig from '@/store/modules/themeConfig.ts';
 import routesList from '@/store/modules/routesList.ts';
 import keepAliveNames from '@/store/modules/keepAliveNames.ts';
 import userInfos from '@/store/modules/userInfos.ts';
+import sqlExecInfo from '@/store/modules/mysqlDbOptInfo.ts';
+import redisDbOptInfo  from '@/store/modules/redisDbOptInfo.ts';
+import mongoDbOptInfo from '@/store/modules/mongoDbOptInfo.ts';
 
 export const key: InjectionKey<Store<RootStateTypes>> = Symbol();
 
@@ -14,6 +17,9 @@ export const store = createStore<RootStateTypes>({
         routesList,
         keepAliveNames,
         userInfos,
+        sqlExecInfo,
+        redisDbOptInfo,
+        mongoDbOptInfo,
     },
 });
 
diff --git a/mayfly_go_web/src/store/interface/index.ts b/mayfly_go_web/src/store/interface/index.ts
index adb25ec4..40a83c16 100644
--- a/mayfly_go_web/src/store/interface/index.ts
+++ b/mayfly_go_web/src/store/interface/index.ts
@@ -71,6 +71,16 @@ export interface UserInfosState {
     userInfos: object;
 }
 
+// 数据操作信息
+export interface DbOptInfoState {
+    dbOptInfo: {
+        projectId?: number,
+        envId?: number,
+        dbId?: number,
+        db?: string,
+    }
+}
+
 // 后端返回原始路由(未处理时)
 // export interface RequestOldRoutesState {
 //     requestOldRoutes: Array<object>;
@@ -82,5 +92,8 @@ export interface RootStateTypes {
     routesList: RoutesListState;
     keepAliveNames: KeepAliveNamesState;
     userInfos: UserInfosState;
+    sqlExecInfo: DbOptInfoState;
+    redisDbOptInfo: DbOptInfoState;
+    mongoDbOptInfo: DbOptInfoState;
     // requestOldRoutes: RequestOldRoutesState;
 }
diff --git a/mayfly_go_web/src/store/modules/mongoDbOptInfo.ts b/mayfly_go_web/src/store/modules/mongoDbOptInfo.ts
new file mode 100644
index 00000000..1245e7d2
--- /dev/null
+++ b/mayfly_go_web/src/store/modules/mongoDbOptInfo.ts
@@ -0,0 +1,31 @@
+import { Module } from 'vuex';
+// 此处加上 `.ts` 后缀报错，具体原因不详
+import {DbOptInfoState, RootStateTypes} from '@/store/interface';
+
+const mongoDbOptInfoModule: Module<DbOptInfoState, RootStateTypes> = {
+    namespaced: true,
+    state: {
+        dbOptInfo: {
+            projectId: 0,
+            envId: 0,
+            dbId: 0,
+            db: '0',
+        },
+    },
+    mutations: {
+        // 设置用户信息
+        getMongoDbOptInfo(state: any, data: object) {
+            state.dbOptInfo = data;
+        },
+    },
+    actions: {
+        // 设置用户信息
+        async setMongoDbOptInfo({ commit }, data: object) {
+            if (data) {
+                commit('getMongoDbOptInfo', data);
+            }
+        },
+    },
+};
+
+export default mongoDbOptInfoModule;
diff --git a/mayfly_go_web/src/store/modules/mysqlDbOptInfo.ts b/mayfly_go_web/src/store/modules/mysqlDbOptInfo.ts
new file mode 100644
index 00000000..7f5590fc
--- /dev/null
+++ b/mayfly_go_web/src/store/modules/mysqlDbOptInfo.ts
@@ -0,0 +1,31 @@
+import { Module } from 'vuex';
+// 此处加上 `.ts` 后缀报错，具体原因不详
+import { DbOptInfoState, RootStateTypes } from '@/store/interface';
+
+const sqlExecInfoModule: Module<DbOptInfoState, RootStateTypes> = {
+    namespaced: true,
+    state: {
+        dbOptInfo: {
+            projectId: 0,
+            envId: 0,
+            dbId: 0,
+            db: '0',
+        }
+    },
+    mutations: {
+        // 设置用户信息
+        getSqlExecInfo(state: any, data: object) {
+            state.dbOptInfo = data;
+        },
+    },
+    actions: {
+        // 设置用户信息
+        async setSqlExecInfo({ commit }, data: object) {
+            if (data) {
+                commit('getSqlExecInfo', data);
+            }
+        },
+    },
+};
+
+export default sqlExecInfoModule;
diff --git a/mayfly_go_web/src/store/modules/redisDbOptInfo.ts b/mayfly_go_web/src/store/modules/redisDbOptInfo.ts
new file mode 100644
index 00000000..045a2d07
--- /dev/null
+++ b/mayfly_go_web/src/store/modules/redisDbOptInfo.ts
@@ -0,0 +1,31 @@
+import { Module } from 'vuex';
+// 此处加上 `.ts` 后缀报错，具体原因不详
+import {DbOptInfoState, RootStateTypes} from '@/store/interface';
+
+const redisDbOptInfoModule: Module<DbOptInfoState, RootStateTypes> = {
+    namespaced: true,
+    state: {
+        dbOptInfo: {
+            projectId: 0,
+            envId: 0,
+            dbId: 0,
+            db: '0',
+        },
+    },
+    mutations: {
+        // 设置用户信息
+        getRedisDbOptInfo(state: any, data: object) {
+            state.dbOptInfo = data;
+        },
+    },
+    actions: {
+        // 设置用户信息
+        async setRedisDbOptInfo({ commit }, data: object) {
+            if (data) {
+                commit('getRedisDbOptInfo', data);
+            }
+        },
+    },
+};
+
+export default redisDbOptInfoModule;
diff --git a/mayfly_go_web/src/views/ops/component/ProjectEnvSelect.vue b/mayfly_go_web/src/views/ops/component/ProjectEnvSelect.vue
index f747b719..bced6624 100644
--- a/mayfly_go_web/src/views/ops/component/ProjectEnvSelect.vue
+++ b/mayfly_go_web/src/views/ops/component/ProjectEnvSelect.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, defineComponent, onMounted } from 'vue';
+import {toRefs, reactive, defineComponent, onMounted, watch} from 'vue';
 import { projectApi } from '../project/api';
 
 export default defineComponent({
@@ -52,8 +52,27 @@ export default defineComponent({
             envId: null,
         });
 
+        // 动态选中项目和环境
+        const setData = async (projectId: null, envId: null) => {
+          if (projectId) {
+            state.projectId = projectId;
+            if (envId) {
+              state.envs = await projectApi.projectEnvs.request({projectId});
+              state.envId = envId;
+            }
+          }
+        }
+        
+        watch(() => props.data, (newValue)=>{
+          setData(newValue.projectId, newValue.envId)
+        })
+
         onMounted(async () => {
             state.projects = await projectApi.accountProjects.request(null);
+            // 初始化容器时可能会选中项目和环境
+            if(props.data?.projectId && props.data?.envId){
+              await setData(props.data.projectId, props.data.envId)
+            }
         });
 
         const changeProject = async (projectId: any) => {
@@ -72,6 +91,7 @@ export default defineComponent({
             ...toRefs(state),
             changeProject,
             changeEnv,
+            setData,
         };
     },
 });
diff --git a/mayfly_go_web/src/views/ops/db/DbList.vue b/mayfly_go_web/src/views/ops/db/DbList.vue
index 92a882a3..cb68aaca 100644
--- a/mayfly_go_web/src/views/ops/db/DbList.vue
+++ b/mayfly_go_web/src/views/ops/db/DbList.vue
@@ -31,20 +31,22 @@
                 <el-table-column prop="type" label="类型" min-width="90"></el-table-column>
                 <el-table-column prop="database" label="数据库" min-width="80">
                     <template #default="scope">
-                        <el-popover :width="250" placement="right" trigger="click">
+                        <el-popover placement="right" trigger="click" :width="300">
                             <template #reference>
-                                <el-link type="primary" :underline="false" plain>查看</el-link>
+                                <el-link type="primary" :underline="false" plain @click="selectDb(scope.row.dbs)">查看</el-link>
                             </template>
-                            <el-tag
-                                @click="showTableInfo(scope.row, db)"
-                                effect="plain"
-                                type="success"
-                                size="small"
-                                v-for="db in scope.row.dbs"
-                                :key="db"
-                                style="cursor: pointer; margin-left: 3px; margin-bottom: 3px;"
-                                >{{ db }}</el-tag
+                            <el-input v-model="filterDb.param" @keyup="filterSchema" class="w-50 m-2" placeholder="搜索" size="small" >
+                              <template #prefix>
+                                <el-icon class="el-input__icon"><search-icon /></el-icon>
+                              </template>
+                            </el-input>
+                            <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>
@@ -271,15 +273,20 @@ import SqlExecBox from './component/SqlExecBox.ts';
 import config from '@/common/config';
 import { getSession } from '@/common/utils/storage';
 import { isTrue } from '@/common/assert';
+import { Search as SearchIcon } from '@element-plus/icons-vue'
+import router from '@/router';
+import {store} from '@/store';
 
 export default defineComponent({
     name: 'DbList',
     components: {
         DbEdit,
         CreateTable,
+        SearchIcon,
     },
     setup() {
         const state = reactive({
+            row: {},
             dbId: 0,
             db: '',
             permissions: {
@@ -296,6 +303,7 @@ export default defineComponent({
              * 查询条件
              */
             query: {
+                projectId:null,
                 pageNum: 1,
                 pageSize: 10,
             },
@@ -356,6 +364,11 @@ export default defineComponent({
             tableCreateDialog: {
                 visible: false,
             },
+            filterDb:{
+              param:'',
+              cache:[],
+              list:[],
+            }
         });
 
         onMounted(async () => {
@@ -545,6 +558,7 @@ export default defineComponent({
             try {
                 state.tableInfoDialog.infos = await dbApi.tableInfos.request({ id: row.id, db });
                 state.dbId = row.id;
+                state.row = row;
                 state.db = db;
             } catch (e) {
                 state.tableInfoDialog.visible = false;
@@ -613,6 +627,37 @@ export default defineComponent({
                 });
             } catch (err) {}
         };
+        const openSqlExec = (row: any, db: any) => {
+          // 判断db是否发生改变
+          let oldDb = store.state.sqlExecInfo.dbOptInfo.db;
+          if(db && oldDb !== db){
+            const {projectId, envId, id} = row;
+            let params = {
+              projectId,
+              envId,
+              dbId: id,
+              db
+            }
+            store.dispatch('sqlExecInfo/setSqlExecInfo', params);
+          }
+          router.push({name: 'SqlExec'});
+        }
+
+        // 点击查看时初始化数据
+        const selectDb = (row: any) => {
+          state.filterDb.param = ''
+          state.filterDb.cache = row;
+          state.filterDb.list = row;
+        }
+
+        // 输入字符过滤schema
+        const filterSchema = () => {
+          if(state.filterDb.param){
+            state.filterDb.list = state.filterDb.cache.filter((a)=>{return String(a).toLowerCase().indexOf(state.filterDb.param) > -1 })
+          }else{
+            state.filterDb.list = state.filterDb.cache;
+          }
+        }
 
         return {
             ...toRefs(state),
@@ -639,6 +684,9 @@ export default defineComponent({
             showCreateDdl,
             dropTable,
             formatByteSize,
+            openSqlExec,
+            selectDb,
+            filterSchema,
         };
     },
 });
diff --git a/mayfly_go_web/src/views/ops/db/SqlExec.vue b/mayfly_go_web/src/views/ops/db/SqlExec.vue
index 7dcf076b..19af05d9 100644
--- a/mayfly_go_web/src/views/ops/db/SqlExec.vue
+++ b/mayfly_go_web/src/views/ops/db/SqlExec.vue
@@ -3,7 +3,7 @@
         <div class="toolbar">
             <el-row type="flex" justify="space-between">
                 <el-col :span="24">
-                    <project-env-select @changeProjectEnv="changeProjectEnv">
+                    <project-env-select @changeProjectEnv="changeProjectEnv" :data="{ projectId, envId:params.envId }">
                         <template #default>
                             <el-form-item label="资源">
                                 <el-select v-model="dbId" placeholder="请选择资源实例" @change="changeDbInstance" filterable style="width: 150px">
@@ -299,7 +299,7 @@
 </template>
 
 <script lang="ts">
-import { onMounted, toRefs, reactive, defineComponent, ref } from 'vue';
+import { onMounted, toRefs, reactive, defineComponent, ref, watch } from 'vue';
 import { dbApi } from './api';
 
 import 'codemirror/addon/hint/show-hint.css';
@@ -321,6 +321,7 @@ import config from '@/common/config';
 import { getSession } from '@/common/utils/storage';
 import SqlExecBox from './component/SqlExecBox';
 import { dateStrFormat } from '@/common/utils/date.ts';
+import { useStore } from '@/store/index.ts';
 
 export default defineComponent({
     name: 'SqlExec',
@@ -328,12 +329,14 @@ export default defineComponent({
         ProjectEnvSelect,
     },
     setup() {
+        const store = useStore();
         const codeTextarea: any = ref(null);
         const token = getSession('token');
         let codemirror = null as any;
         const tableMap = new Map();
 
         const state = reactive({
+            projectId: null,
             token: token,
             defalutLimit: 20, // 默认查询数量
             dbs: [], // 数据库实例列表
@@ -1218,7 +1221,39 @@ export default defineComponent({
             const res = await dbApi.dbs.request(state.params);
             state.dbs = res.list;
         };
+        
+        // 加载选中的db
+        const setSelects = async (sqlExecInfo: any) =>{
+          // 保存sql
+          let sql = codemirror?.getValue()
+          if( sql && sql.length > 0 && state.dbId){
+            await saveSql();
+          }
+          // 设置项目id和环境id
+          const { projectId, envId, dbId, db} = sqlExecInfo.dbOptInfo;
+          state.projectId = projectId;
+          state.params.envId = envId
+          // 查询有哪些数据库实例
+          await search()
+          // 加载数据库所有schema
+          changeDbInstance(dbId);
+          state.dbId = dbId
+          state.db = db
+          // 加载schema下所有表
+          changeDb(db)
+        }
 
+        // 判断如果有数据则加载下拉选项
+        let sqlExecInfo = store.state.sqlExecInfo
+        if(sqlExecInfo.dbOptInfo.envId){
+          setSelects(sqlExecInfo)
+        }
+      
+        // 监听选中操作的db变化，并加载下拉选项
+        watch(store.state.sqlExecInfo,async (newValue) => {
+          await setSelects(newValue)
+        })
+      
         return {
             ...toRefs(state),
             codeTextarea,
diff --git a/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue b/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
index 3c031a07..e4fcb443 100644
--- a/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
+++ b/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
@@ -3,7 +3,7 @@
         <div class="toolbar">
             <el-row type="flex" justify="space-between">
                 <el-col :span="24">
-                    <project-env-select @changeProjectEnv="changeProjectEnv">
+                    <project-env-select @changeProjectEnv="changeProjectEnv" :data="{ projectId, envId:query.envId }">
                         <template #default>
                             <el-form-item label="实例" label-width="40px">
                                 <el-select v-model="mongoId" placeholder="请选择mongo" @change="changeMongo">
@@ -130,13 +130,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 ProjectEnvSelect from '../component/ProjectEnvSelect.vue';
 
 import { isTrue, notBlank, notNull } from '@/common/assert';
 import { formatByteSize } from '@/common/utils/format';
 import JsonEdit from '@/components/jsonedit/index.vue';
+import { useStore } from '@/store/index.ts';
 
 export default defineComponent({
     name: 'MongoDataOp',
@@ -145,8 +146,10 @@ export default defineComponent({
         JsonEdit,
     },
     setup() {
+        const store = useStore();
         const findParamInputRef: any = ref(null);
         const state = reactive({
+            projectId: null,
             loading: false,
             mongoList: [],
             query: {
@@ -416,6 +419,34 @@ export default defineComponent({
             delete state.dataTabs[targetName];
         };
 
+      // 加载选中的db
+      const setSelects = async (mongoDbOptInfo: any) =>{
+        // 设置项目id和环境id
+        const { projectId, envId, dbId, db} = mongoDbOptInfo.dbOptInfo;
+        state.projectId = projectId;
+        state.query.envId = envId
+        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.envId){
+        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 9bc22e08..85e1c745 100644
--- a/mayfly_go_web/src/views/ops/mongo/MongoList.vue
+++ b/mayfly_go_web/src/views/ops/mongo/MongoList.vue
@@ -35,7 +35,7 @@
 
                 <el-table-column label="操作" width>
                     <template #default="scope">
-                        <el-link type="primary" @click="showDatabases(scope.row.id)" plain size="small" :underline="false">数据库</el-link>
+                        <el-link type="primary" @click="showDatabases(scope.row.id, scope.row)" plain size="small" :underline="false">数据库</el-link>
                     </template>
                 </el-table-column>
             </el-table>
@@ -61,11 +61,13 @@
                 </el-table-column>
                 <el-table-column min-width="80" property="Empty" label="是否为空" />
 
-                <el-table-column min-width="80" label="操作">
+                <el-table-column min-width="150" label="操作">
                     <template #default="scope">
                         <el-link type="success" @click="showDatabaseStats(scope.row.Name)" plain size="small" :underline="false">stats</el-link>
                         <el-divider direction="vertical" border-style="dashed" />
                         <el-link type="primary" @click="showCollections(scope.row.Name)" plain size="small" :underline="false">集合</el-link>
+                        <el-divider direction="vertical" border-style="dashed" />
+                        <el-link type="primary" @click="openDataOps(scope.row)" plain size="small" :underline="false">数据操作</el-link>
                     </template>
                 </el-table-column>
             </el-table>
@@ -195,6 +197,8 @@ import { ElMessage, ElMessageBox } from 'element-plus';
 import { projectApi } from '../project/api.ts';
 import MongoEdit from './MongoEdit.vue';
 import { formatByteSize } from '@/common/utils/format';
+import {store} from '@/store';
+import router from '@/router';
 
 export default defineComponent({
     name: 'MongoList',
@@ -203,6 +207,12 @@ export default defineComponent({
     },
     setup() {
         const state = reactive({
+            dbOps: { 
+              projectId: null,
+              envId: null,
+              dbId: 0,
+              db: '',
+            },
             projects: [],
             list: [],
             total: 0,
@@ -265,7 +275,12 @@ export default defineComponent({
             state.currentData = item;
         };
 
-        const showDatabases = async (id: number) => {
+        const showDatabases = async (id: number, row: any) => {
+            const {projectId, envId} = row;
+            state.dbOps.projectId = projectId
+            state.dbOps.envId = envId
+            state.dbOps.dbId = id
+          
             state.databaseDialog.data = (await mongoApi.databases.request({ id })).Databases;
             state.databaseDialog.title = `数据库列表`;
             state.databaseDialog.visible = true;
@@ -391,6 +406,24 @@ export default defineComponent({
             state.currentData = null;
             search();
         };
+        
+        const openDataOps = ( row: any) => {
+          state.dbOps.db = row.Name
+          
+          let data = {
+            projectId: state.dbOps.projectId,
+            envId: state.dbOps.envId,
+            dbId: state.dbOps.dbId,
+            db: state.dbOps.db,
+          }
+          console.log(data)
+          // 判断db是否发生改变
+          let oldDb = store.state.mongoDbOptInfo.dbOptInfo.db;
+          if(oldDb !== row.Name){
+            store.dispatch('mongoDbOptInfo/setMongoDbOptInfo', data);
+          }
+          router.push({name: 'MongoDataOp'});
+        }
 
         return {
             ...toRefs(state),
@@ -409,6 +442,7 @@ export default defineComponent({
             deleteMongo,
             editMongo,
             valChange,
+            openDataOps,
         };
     },
 });
diff --git a/mayfly_go_web/src/views/ops/redis/DataOperation.vue b/mayfly_go_web/src/views/ops/redis/DataOperation.vue
index 92afb1e9..0728cbc7 100644
--- a/mayfly_go_web/src/views/ops/redis/DataOperation.vue
+++ b/mayfly_go_web/src/views/ops/redis/DataOperation.vue
@@ -4,11 +4,16 @@
             <div style="float: left">
                 <el-row type="flex" justify="space-between">
                     <el-col :span="24">
-                        <project-env-select @changeProjectEnv="changeProjectEnv" @clear="clearRedis">
+                        <project-env-select @changeProjectEnv="changeProjectEnv" @clear="clearRedis" :data="{ projectId, envId:query.envId }" >
                             <template #default>
                                 <el-form-item label="redis" label-width="40px">
                                     <el-select v-model="scanParam.id" placeholder="请选择redis" @change="changeRedis" @clear="clearRedis" clearable>
-                                        <el-option v-for="item in redisList" :key="item.id" :label="item.host" :value="item.id"> </el-option>
+                                        <el-option v-for="item in redisList" :key="item.id"  :value="item.id" :label=" item.remark ">
+                                          <span style="float: left">{{ item.remark }}</span>
+                                          <span style="float: right; color: #8492a6; margin-left: 6px; font-size: 13px">{{
+                                              `${item.host}`
+                                            }}</span>
+                                        </el-option>
                                     </el-select>
                                 </el-form-item>
                                 <el-form-item label="库" label-width="20px">
@@ -125,7 +130,7 @@
 
 <script lang="ts">
 import { redisApi } from './api';
-import { toRefs, reactive, defineComponent } from 'vue';
+import {toRefs, reactive, defineComponent, watch} from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import ProjectEnvSelect from '../component/ProjectEnvSelect.vue';
 import HashValue from './HashValue.vue';
@@ -133,6 +138,7 @@ import StringValue from './StringValue.vue';
 import SetValue from './SetValue.vue';
 import ListValue from './ListValue.vue';
 import { isTrue, notBlank, notNull } from '@/common/assert';
+import { useStore } from '@/store/index.ts';
 
 export default defineComponent({
     name: 'DataOperation',
@@ -144,7 +150,9 @@ export default defineComponent({
         ProjectEnvSelect,
     },
     setup() {
+        let store = useStore();
         const state = reactive({
+            projectId: null,
             loading: false,
             redisList: [],
             dbList: [],
@@ -153,7 +161,7 @@ export default defineComponent({
             },
             scanParam: {
                 id: null,
-                db: null,
+                db: '',
                 match: null,
                 count: 10,
                 cursor: {},
@@ -200,7 +208,7 @@ export default defineComponent({
 
         const changeRedis = (id: number) => {
             resetScanParam(id);
-            state.scanParam.db = null;
+            state.scanParam.db = '';
             state.dbList = (state.redisList.find((x: any) => x.id == id) as any).db.split(',');
             state.keys = [];
             state.dbsize = 0;
@@ -244,7 +252,7 @@ export default defineComponent({
             state.redisList = [];
             state.scanParam.id = null;
             resetScanParam();
-            state.scanParam.db = null;
+            state.scanParam.db = '';
             state.keys = [];
             state.dbsize = 0;
         };
@@ -383,7 +391,33 @@ export default defineComponent({
             }
         };
 
-        return {
+      // 加载选中的db
+      const setSelects = async (redisDbOptInfo: any) =>{
+        // 设置项目id和环境id
+        const { projectId, envId, dbId} = redisDbOptInfo.dbOptInfo;
+        state.projectId = projectId;
+        state.query.envId = envId
+        await searchRedis()
+        state.scanParam.id = dbId
+        changeRedis(dbId)
+        if(!state.scanParam.db){
+          state.scanParam.db = '0'
+        }
+        changeDb()
+      }
+
+      // 判断如果有数据则加载下拉选项
+      let redisDbOptInfo = store.state.redisDbOptInfo
+      if(redisDbOptInfo.dbOptInfo.envId){
+        setSelects(redisDbOptInfo)
+      }
+
+      // 监听选中操作的db变化，并加载下拉选项
+      watch(store.state.redisDbOptInfo,async (newValue) => {
+        await setSelects(newValue)
+      })
+
+      return {
             ...toRefs(state),
             changeProjectEnv,
             changeRedis,
diff --git a/mayfly_go_web/src/views/ops/redis/HashValue.vue b/mayfly_go_web/src/views/ops/redis/HashValue.vue
index 14e95e9d..92c7a447 100644
--- a/mayfly_go_web/src/views/ops/redis/HashValue.vue
+++ b/mayfly_go_web/src/views/ops/redis/HashValue.vue
@@ -82,7 +82,7 @@ export default defineComponent({
             require: true,
         },
         db: {
-            type: [Number],
+            type: [String],
             require: true,
         },
         keyInfo: {
@@ -98,7 +98,7 @@ export default defineComponent({
             dialogVisible: false,
             operationType: 1,
             redisId: 0,
-            db: 0,
+            db: '0',
             key: {
                 key: '',
                 type: 'hash',
@@ -107,7 +107,7 @@ export default defineComponent({
             scanParam: {
                 key: '',
                 id: 0,
-                db: 0,
+                db: '0',
                 cursor: 0,
                 match: '',
                 count: 10,
@@ -261,4 +261,4 @@ export default defineComponent({
         max-width: 70px;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/mayfly_go_web/src/views/ops/redis/ListValue.vue b/mayfly_go_web/src/views/ops/redis/ListValue.vue
index 384f4349..5e758508 100644
--- a/mayfly_go_web/src/views/ops/redis/ListValue.vue
+++ b/mayfly_go_web/src/views/ops/redis/ListValue.vue
@@ -75,7 +75,7 @@ export default defineComponent({
             require: true,
         },
         db: {
-            type: [Number],
+            type: [String],
             require: true,
         },
         keyInfo: {
@@ -95,7 +95,7 @@ export default defineComponent({
             dialogVisible: false,
             operationType: 1,
             redisId: '',
-            db: 0,
+            db: '0',
             key: {
                 key: '',
                 type: 'string',
@@ -210,4 +210,4 @@ export default defineComponent({
         max-width: 70px;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/mayfly_go_web/src/views/ops/redis/RedisList.vue b/mayfly_go_web/src/views/ops/redis/RedisList.vue
index 6f1f1d89..5a124452 100644
--- a/mayfly_go_web/src/views/ops/redis/RedisList.vue
+++ b/mayfly_go_web/src/views/ops/redis/RedisList.vue
@@ -29,18 +29,17 @@
                     </template>
                 </el-table-column>
                 <el-table-column prop="creator" label="创建人" min-width="100"></el-table-column>
-                <el-table-column label="更多" min-width="130" fixed="right">
+                <el-table-column label="更多" min-width="155" fixed="right">
                     <template #default="scope">
                         <el-link
                             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>
+                        <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>
                 </el-table-column>
             </el-table>
@@ -153,6 +152,8 @@ import { toRefs, reactive, defineComponent, onMounted } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { projectApi } from '../project/api.ts';
 import RedisEdit from './RedisEdit.vue';
+import {store} from '@/store';
+import router from '@/router';
 
 export default defineComponent({
     name: 'RedisList',
@@ -284,6 +285,22 @@ export default defineComponent({
             state.currentData = null;
             search();
         };
+        // 打开redis数据操作页
+        const openDataOpt = (row : any) => {
+          const {projectId, envId, id, db} = row;
+          // 判断db是否发生改变
+          let oldDbId = store.state.redisDbOptInfo.dbOptInfo.dbId;
+          if(oldDbId !== id){
+            let params = {
+              projectId,
+              envId,
+              dbId: id,
+              db
+            }
+            store.dispatch('redisDbOptInfo/setRedisDbOptInfo', params);
+          }
+          router.push({name: 'DataOperation'});
+        }
 
         return {
             ...toRefs(state),
@@ -296,6 +313,7 @@ export default defineComponent({
             deleteRedis,
             editRedis,
             valChange,
+          openDataOpt,
         };
     },
 });
diff --git a/mayfly_go_web/src/views/ops/redis/SetValue.vue b/mayfly_go_web/src/views/ops/redis/SetValue.vue
index 3213b948..104a0e11 100644
--- a/mayfly_go_web/src/views/ops/redis/SetValue.vue
+++ b/mayfly_go_web/src/views/ops/redis/SetValue.vue
@@ -54,7 +54,7 @@ export default defineComponent({
             require: true,
         },
         db: {
-            type: [Number],
+            type: [String],
             require: true,
         },
         keyInfo: {
@@ -74,7 +74,7 @@ export default defineComponent({
             dialogVisible: false,
             operationType: 1,
             redisId: '',
-            db: 0,
+            db: '0',
             key: {
                 key: '',
                 type: 'string',
@@ -161,4 +161,4 @@ export default defineComponent({
         max-width: 70px;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/mayfly_go_web/src/views/ops/redis/StringValue.vue b/mayfly_go_web/src/views/ops/redis/StringValue.vue
index 50d2be5c..c5d5f707 100644
--- a/mayfly_go_web/src/views/ops/redis/StringValue.vue
+++ b/mayfly_go_web/src/views/ops/redis/StringValue.vue
@@ -49,7 +49,7 @@ export default defineComponent({
             require: true,
         },
         db: {
-            type: [Number],
+            type: [String],
             require: true,
         },
         keyInfo: {
@@ -66,7 +66,7 @@ export default defineComponent({
             dialogVisible: false,
             operationType: 1,
             redisId: '',
-            db: 0,
+            db: '0',
             key: {
                 key: '',
                 type: 'string',
@@ -180,4 +180,4 @@ export default defineComponent({
         max-width: 70px;
     }
 }
-</style>
\ No newline at end of file
+</style>