feat: 表格形式展示查询结果

src/element-plus.ts

@@ -11,6 +11,7 @@ import {
   ElDialog,
   ElDivider,
   ElDrawer,
+  ElEmpty,
   ElForm,
   ElFormItem,
   ElHeader,
@@ -60,6 +61,7 @@ export const Components = [
   ElDialog,
   ElDivider,
   ElDrawer,
+  ElEmpty,
   ElForm,
   ElFormItem,
   ElHeader,

src/views/Project/Database.vue

@@ -22,13 +22,13 @@
     </ElFormItem>
   </ElForm>
   <ElDivider content-position="left">当前执行记录</ElDivider>
-  <ElRow type="flex" justify="space-between">
+  <ElRow type="flex" justify="space-between" v-if="execHistory.size > 0">
     <ElCol :span="4" height="600px">
       <div
         :class="['list-item', active === key?'active':'']"
         v-for="key in [...execHistory.keys()].reverse()"
         :key="key"
-        @click="()=>{active = key}"
+        @click="switchRecord(key)"
       >{{key}}</div>
     </ElCol>
     <ElDivider direction="vertical"></ElDivider>
@@ -36,9 +36,20 @@
       <ElDivider content-position="left">SQL</ElDivider>
       <pre>{{activeRecord.sql}}</pre>
       <ElDivider content-position="left">结果</ElDivider>
-      <pre>{{activeRecord.result}}</pre>
+      <template v-if="showTable">
+        <pre>{{b}}</pre>
+        <table>
+          <tr v-for="(row, i) in content" :key="i">
+            <td v-for="(cell,j) in row" :key="j">{{cell}}</td>
+          </tr>
+        </table>
+      </template>
+      <template v-else>
+        <pre>{{activeRecord.result}}</pre>
+      </template>
     </ElCol>
   </ElRow>
+  <ElEmpty v-else description="暂无记录"></ElEmpty>
 </template>
 
 <script>
@@ -51,6 +62,7 @@ export default {
       dbs: [],
       execHistory: new Map(),
       active: -1,
+      showTable: true,
       form: {
         db: '',
         deploymentId: null,
@@ -58,6 +70,8 @@ export default {
         sql: '',
         username: 'root',
       },
+      b: '',
+      content: '',
     };
   },
   async mounted() {
@@ -76,7 +90,37 @@ export default {
         sql: this.form.sql,
         result,
       });
-      this.active = this.execHistory.size;
+      this.switchRecord(this.execHistory.size);
+    },
+    switchRecord(key) {
+      this.active = key;
+      const { b, content } = this.process(this.activeRecord.result);
+      if (typeof content === 'string') {
+        this.showTable = false;
+      } else {
+        this.showTable = true;
+      }
+      this.b = b;
+      this.content = content;
+    },
+    process(result) {
+      const i = result.indexOf('\n');
+      const b = result.substr(0, i);
+      let content = result.substr(i + 1);
+      if (content.startsWith('Affected')) {
+        return {
+          b,
+          content,
+        };
+      }
+      content = content.substring(1, content.length - 1);
+      const recordList = content.match(/\[.*?\]/g);
+      content = [];
+      recordList.forEach((_record) => content.push(_record.substring(1, _record.length - 1).split(',').map((val) => val.trim())));
+      return {
+        b,
+        content,
+      };
     },
   },
 };
@@ -112,4 +156,21 @@ pre {
   word-break: break-word;
   white-space: pre-wrap;
 }
+
+table {
+  margin-top: 24px;
+  color: #333333;
+  border-width: 1px;
+  border-color: #666666;
+  border-collapse: collapse;
+  td {
+    border-width: 1px;
+    padding: 8px 12px;
+    border-style: solid;
+    border-color: #666666;
+    background-color: #ffffff;
+    white-space: nowrap;
+  }
+}
+
 </style>