feat: Support right-click to copy SQL

backend/framework/src/main/java/org/jumpserver/chen/framework/console/DataViewConsole.java

@@ -104,7 +104,8 @@ public void onConnect(Connect connect) {
     public void createDataView(String schemaName, String tableName) {
 
         var viewTitle = this.getTitle() + "child";
-        this.getPacketIO().sendPacket("new_data_view", Map.of("title", viewTitle));
+        var data = Map.of("title", viewTitle, "schema", this.schema, "table", this.table);
+        this.getPacketIO().sendPacket("new_data_view", data);
         var dataView = new DataView(viewTitle, this.getPacketIO(), this.getConsoleLogger());
 
         var session = SessionManager.getCurrentSession();

frontend/src/components/Main/Explore/DataView/DataView.vue

@@ -1,30 +1,35 @@
 <template>
-  <div v-loading="state.loading" class="data-view" id="doc">
-    <ExportDataDialog :visible.sync="exportDataDialogVisible" @submit="onExportSubmit"/>
-    <Toolbar :items="iToolBarItems"/>
+  <div id="doc" v-loading="state.loading" class="data-view" @contextmenu.prevent="preventDefaultContextMenu">
+    <RightMenu ref="rightMenu" :menus="menus" />
+    <ExportDataDialog :visible.sync="exportDataDialogVisible" @submit="onExportSubmit" />
+    <Toolbar :items="iToolBarItems" />
     <AgGridVue
       :rowData="rowData"
       :columnDefs="colDefs"
       class="ag-theme-balham-dark"
       style="height: 100%"
       :defaultColDef="defaultColDef"
       :gridOptions="gridOptions"
+      @cell-context-menu="showContextMenu"
     />
   </div>
 </template>
 
 <script>
+import store from '@/store'
 import Toolbar from '@/framework/components/Toolbar/index.vue'
 import { Subject } from 'rxjs'
 import ExportDataDialog from '@/components/Main/Explore/DataView/ExportDataDialog.vue'
 import { AgGridVue } from 'ag-grid-vue'
+import RightMenu from '@/components/Main/Explore/DataView/RightMenu.vue'
+import { SpecialCharacters, GeneralInsertSQL, GeneralUpdateSQL } from './const'
 
 import 'ag-grid-community/styles/ag-grid.css'
 import 'ag-grid-community/styles/ag-theme-balham.css'
 
 export default {
   name: 'DataView',
-  components: { ExportDataDialog, Toolbar, AgGridVue },
+  components: { ExportDataDialog, Toolbar, AgGridVue, RightMenu },
   props: {
     meta: {
       type: Object,
@@ -164,7 +169,30 @@ export default {
         suppressMovableColumnsHints: true,
         suppressSortingHints: true
       },
-      init: false
+      init: false,
+      currentRow: null,
+      menus: [
+        {
+          name: 'copy',
+          title: this.$t('Copy'),
+          icon: 'el-icon-document-copy',
+          hidden: () => { return !store.getters.profile.canCopy },
+          children: [
+            {
+              name: 'copy-insert',
+              title: this.$t('InsertStatement'),
+              icon: 'el-icon-document-copy',
+              callback: () => this.handleCopy('insert')
+            },
+            {
+              name: 'copy-update',
+              title: this.$t('UpdateStatement'),
+              icon: 'el-icon-document-copy',
+              callback: () => this.handleCopy('update')
+            }
+          ]
+        }
+      ]
     }
   },
   computed: {
@@ -231,9 +259,68 @@ export default {
     onExportSubmit(scope) {
       this.exportDataDialogVisible = false
       this.$emit('action', { action: 'export', data: scope })
+    },
+    showContextMenu(params) {
+      this.currentRow = params.data
+      this.$refs.rightMenu.show(params.event)
+    },
+    preventDefaultContextMenu(event) {
+      event.preventDefault()
+    },
+    wrap(str, specChar) {
+      const result = str ? str.trim() : ''
+      return `${specChar}${result}${specChar}`
+    },
+    handleCopy(action) {
+      let sql = ''
+      let fields = ''
+      let values = ''
+      let updated_attrs = ''
+      let conditional_attrs = ''
+      let hasPrimary = false
+      const dbType = store.getters.profile.dbType
+      const { schema, table } = this.meta
+      const char = SpecialCharacters[dbType]
+      const tableName = `${this.wrap(schema, char)}.${this.wrap(table, char)}`
+      const primaryKeys = ['id']
+      for (let i = 0; i < this.colDefs.length; i++) {
+        const fieldName = this.colDefs[i].field
+        const fieldValue = `'${(this.currentRow[fieldName] || '')}'`
+        if (action === 'insert') {
+          fields += (i > 0 ? ', ' : '') + this.wrap(fieldName, char)
+          values += (i > 0 ? ', ' : '') + `${fieldValue}`
+          sql = GeneralInsertSQL
+            .replace('{table_name}', tableName)
+            .replace('{fields}', fields)
+            .replace('{values}', values)
+        } else {
+          if (primaryKeys.includes(fieldName)) {
+            hasPrimary = true
+          } else {
+            updated_attrs += (i > 0 ? ', ' : '') + `${this.wrap(fieldName, char)} = ${fieldValue}`
+          }
+          if (hasPrimary) {
+            conditional_attrs = `${this.wrap('id', char)} = '${this.currentRow['id']}'`
+          } else {
+            conditional_attrs = `${updated_attrs} LIMIT 1`
+          }
+          sql = GeneralUpdateSQL
+            .replace('{table_name}', tableName)
+            .replace('{updated_attrs}', updated_attrs)
+            .replace('{conditional_attrs}', conditional_attrs)
+        }
+      }
+      if (!navigator.clipboard) {
+        this.$message.error(`${this.$t('NoPermissionError')}: clipboard`)
+        return
+      }
+      navigator.clipboard.writeText(sql).then(() => {
+        this.$message.success(this.$t('CopySucceeded'))
+      }).catch((error) => {
+        this.$message.error(`${this.$t('CopyFailed')}: ${error}`)
+      })
     }
   }
-
 }
 </script>
 

frontend/src/components/Main/Explore/DataView/RightMenu.vue

@@ -0,0 +1,130 @@
+<template>
+  <ul
+    v-show="menuVisible"
+    class="menus"
+    :style="{ top: menuTop, left: menuLeft }"
+  >
+    <li
+      v-for="menu in iMenus"
+      :key="menu.name"
+      :class="['menu', menu.children? '' : 'menu-hover']"
+      @click.stop="clickMenu(menu)"
+    >
+      <div @mouseenter="showSubMenu(menu)">
+        <i :class="menu.icon" style="margin-right: 5px;" />
+        <span>{{ menu.title }}</span>
+        <i v-if="menu.children" class="el-icon-arrow-right" style="margin-left: 5px;" />
+      </div>
+      <ul v-show="subMenuVisible" class="submenu">
+        <li
+          v-for="subMenu in menu.children"
+          :key="subMenu.name"
+          class="submenu-item menu-hover"
+          @click.stop="clickMenu(subMenu)"
+        >
+          <div>
+            <i :class="subMenu.icon" style="margin-right: 5px;" />
+            <span>{{ subMenu.title }}</span>
+          </div>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: 'RightMenu',
+  props: {
+    menus: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      menuTop: '0px',
+      menuLeft: '0px',
+      menuVisible: false,
+      subMenuVisible: false
+    }
+  },
+  computed: {
+    iMenus() {
+      return this.menus.filter((m) => {
+        if (typeof m.hidden === 'function') {
+          return !m.hidden()
+        }
+        return !m.hidden
+      })
+    }
+  },
+  methods: {
+    clickMenu(menu) {
+      if (typeof menu.callback === 'function') {
+        menu.callback()
+      }
+    },
+    show(event) {
+      if (this.iMenus.length === 0) {
+        return
+      }
+      this.menuVisible = true
+      const { clientX: x, clientY: y } = event
+      const { innerWidth: innerWidth, innerHeight: innerHeight } = window
+      const menuWidth = 180
+      const menuHeight = this.iMenus.length * 30
+      this.menuTop = (y + menuHeight > innerHeight ? innerHeight - menuHeight : y) + 'px'
+      this.menuLeft = (x + menuWidth > innerWidth ? innerWidth - menuWidth : x) + 'px'
+      document.addEventListener('mouseup', this.hide, false)
+    },
+    hide(e) {
+      if (e.button === 0) {
+        this.menuVisible = false
+        this.subMenuVisible = false
+        document.removeEventListener('mouseup', this.hide)
+      }
+    },
+    showSubMenu(menu) {
+      this.subMenuVisible = !!menu.children
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.menu-hover:hover {
+  color: #2f65ca;
+}
+
+.menus {
+  background: #fff;
+  border-radius: 4px;
+  list-style-type: none;
+  padding: 3px;
+  position: fixed;
+  z-index: 9999;
+  display: block;
+
+  .menu {
+    padding: 6px 12px;
+    cursor: pointer;
+
+    .submenu {
+      background: #fff;
+      list-style-type: none;
+      padding: 3px;
+      position: absolute;
+      top: 0;
+      left: 100%;
+    }
+
+    .submenu-item {
+      display: block;
+      white-space: nowrap;
+      padding: 6px 12px;
+      cursor: pointer;
+    }
+  }
+}
+</style>

frontend/src/components/Main/Explore/DataView/const.js

@@ -0,0 +1,12 @@
+export const GeneralUpdateSQL = 'UPDATE {table_name} SET {updated_attrs} WHERE {conditional_attrs};'
+export const GeneralInsertSQL = 'INSERT INTO {table_name} ({fields}) VALUES ({values});'
+
+export const SpecialCharacters = {
+  mysql: '`',
+  mariadb: '`',
+  postgresql: '"',
+  sqlserver: '',
+  oracle: '"',
+  dameng: '"',
+  db2: ''
+}