sql 执行工具

src/views/home/navMenu.vue

@@ -98,29 +98,81 @@
     </el-dialog>
     <el-dialog
       title="sql执行工具"
+      fullscreen
+      custom-class="sql-dialog"
       :visible.sync="omVisible"
       :close-on-click-modal="false"
       width="800px">
+      <div class="execute-sql">
+        <div class="sql-left">
           <el-form :model="editForm">
-        <el-form-item>
+            <el-form-item required label="数据源">
+              <el-select @change="selectChange" style="width: 92%;" v-model="editForm.database" multiple clearable filterable>
+                <el-option label="all" value="all"></el-option>
+                <el-option :disabled="editForm.database.includes('all')" v-for="it in dataBase" :key="it" :label="`${it.databaseName}(${it.dataHost})`"
+                           :value="it.id"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item required>
               <el-input
                 type="textarea"
-            :rows="10"
-            placeholder="请输入内容"
+                :rows="34"
+                placeholder="请输入sql"
                 v-model="editForm.content"></el-input>
             </el-form-item>
-        <el-form-item label="密码">
+            <el-form-item required label="密码">
+              <div style="display: flex">
                 <el-input
                   show-password
                   type="password"
-            placeholder="请输入密码"
+                  placeholder="请输入管理密码"
                   v-model="editForm.password"></el-input>
+                <el-button :loading="loading" style="margin-left: 20px" type="primary" @click="submitOm">执行
+                </el-button>
+              </div>
+
             </el-form-item>
+
           </el-form>
-      <span slot="footer">
-        <el-button @click="omVisible = false">取消</el-button>
-        <el-button @click="submitOm" type="primary">确认</el-button>
-      </span>
+        </div>
+        <div class="sql-right">
+          <ul v-if="msg_list.length>0">
+            <li v-for="(item,i) in msg_list" :key="i">
+              <div class="flex">
+                <span>执行结果：</span>
+                <el-tag size="mini" v-if="item.status==='SUCCESS'" type="success">执行成功</el-tag>
+                <el-tag size="mini" v-else type="danger">执行失败</el-tag>
+              </div>
+              <div class="flex">
+                <span>数据库：</span>
+                <div class="sql">
+                  {{ item.databaseName }}
+                </div>
+              </div>
+              <div class="flex">
+                <span>sql：</span>
+                <div class="sql">
+                  {{ item.sql }}
+                </div>
+              </div>
+              <div class="flex" v-if="item.msg">
+                <span>错误信息：</span>
+                <div class="sql">
+                  {{ item.msg }}
+                </div>
+              </div>
+            </li>
+          </ul>
+          <p class="msg-content" v-else>
+            {{ msg_content }}
+          </p>
+        </div>
+      </div>
+
+      <!--      <span slot="footer">-->
+      <!--        <el-button @click="omVisible = false">取消</el-button>-->
+      <!--        <el-button @click="submitOm" type="primary">确认</el-button>-->
+      <!--      </span>-->
     </el-dialog>
   </div>
 </template>
@@ -128,7 +180,7 @@
 import { mapGetters, mapState } from 'vuex'
 import { logout, resetPassword } from '@/common/api/login'
 import { setToken, setUser } from '@/utils/auth'
-import { post } from '@/common/api/axios'
+import { post, get } from '@/common/api/axios'
 
 export default {
   name: 'navMenu',
@@ -331,13 +383,18 @@ export default {
           children: []
         }
       ],
+      msg_list: [],
+      dataBase: [],
       dialogVisible: false,
       oldPwd: '',
+      msg_content: ' ',
       newPwd: '',
       confimPwd: '',
       omVisible: false,
+      loading: false,
       editForm: {
         content: '',
+        database: ['all'],
         password: ''
       }
     }
@@ -347,6 +404,7 @@ export default {
     ...mapState(['userInfo'])
   },
   watch: {
+
     currentTag(v) {
       if (!v) return
       const parent = this.menuList.find((e) => {
@@ -362,6 +420,14 @@ export default {
     }
   },
   methods: {
+    selectChange(v) {
+      if (v.includes('all')) {
+        this.editForm.database = ['all']
+      } else if (this.dataBase.length > 0 && this.dataBase.length === v.length) {
+        this.editForm.database = ['all']
+      }
+      console.log(v)
+    },
     updatePassword() {
       this.dialogVisible = true
     },
@@ -415,6 +481,12 @@ export default {
         this.omVisible = true
         this.editForm.content = ''
         this.editForm.password = ''
+        this.editForm.database = ['all']
+        get('platform/tools/datasource-list').then(res => {
+          if (res.code === 200) {
+            this.dataBase = res.data
+          }
+        })
       }
     },
     async submitOm() {
@@ -424,14 +496,27 @@ export default {
       if (!this.editForm.password) {
         return this.$message.warning('请输入密码')
       }
+      if (!this.editForm.database || this.editForm.database.length === 0) {
+        return this.$message.warning('请选择数据源')
+      }
+      this.loading = true
       try {
         const res = await post('platform/tools/sql', {
-          ...this.editForm
+          ...this.editForm,
+          ...{
+            database: this.editForm.database.join(',')
+          }
         })
-        if (res.code !== 200) return
+        if (res.code === 200) {
+          this.msg_list = res.data
           this.$message.success(res.message)
+        } else {
+          this.msg_content = res.msg
+        }
+        this.loading = false
       } catch (e) {
         console.error(e)
+        this.loading = false
       }
     }
   }
@@ -495,4 +580,70 @@ export default {
   margin-right: 10px;
   font-size: 18px;
 }
+
+</style>
+<style lang="scss">
+.sql-dialog {
+  display: flex;
+  flex-direction: column;
+
+  .el-dialog__body {
+    flex: 1;
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+
+  .execute-sql {
+    width: 100%;
+    height: 100%;
+    display: flex;
+
+    .sql-right {
+      flex: 1;
+      flex-shrink: 0;
+      border: 1px solid #ececec;
+      overflow: hidden;
+
+      .msg-content {
+        height: 100%;
+        padding: 20px;
+        box-sizing: border-box;
+        overflow: auto;
+      }
+
+      ul {
+        display: flex;
+        height: 100%;
+        overflow: auto;
+        box-sizing: border-box;
+        width: 100%;
+        padding: 20px;
+        flex-direction: column;
+
+        li {
+          width: 100%;
+          margin-bottom: 15px;
+
+          .flex {
+            display: flex;
+            align-items: flex-start;
+
+            margin-bottom: 5px;
+
+            span {
+              white-space: nowrap;
+            }
+          }
+        }
+      }
+    }
+
+    .sql-left {
+      width: 49%;
+      padding-right: 10px;
+      height: 100%;
+    }
+  }
+}
+
 </style>