代码生成表格编辑新增回车跳转到下一行

src/views/tool/gen/basicInfoForm.vue

@@ -30,32 +30,17 @@
     </el-row>
   </el-form>
 </template>
-<script>
+<script setup name="BasicInfoForm">
-export default {
+const props = defineProps({
-  name: "BasicInfoForm",
-  props: {
   info: {
     type: Object,
-      default: null
+    default: null,
-    }
   },
-  data() {
+})
-    return {
+const rules = reactive({
-      rules: {
+  tableName: [{ required: true, message: '请输入表名称', trigger: 'blur' }],
-        tableName: [
+  tableComment: [{ required: true, message: '请输入表描述', trigger: 'blur' }],
-          { required: true, message: "请输入表名称", trigger: "blur" }
+  className: [{ required: true, message: '请输入实体类名称', trigger: 'blur' }],
-        ],
+  functionAuthor: [{ required: true, message: '请输入作者', trigger: 'blur' }],
-        tableComment: [
+})
-          { required: true, message: "请输入表描述", trigger: "blur" }
-        ],
-        className: [
-          { required: true, message: "请输入实体类名称", trigger: "blur" }
-        ],
-        functionAuthor: [
-          { required: true, message: "请输入作者", trigger: "blur" }
-        ]
-      }
-    };
-  }
-};
 </script>

src/views/tool/gen/editTable.vue

@@ -8,13 +8,12 @@
         <gen-info-form ref="genInfo" :info="info" :tables="tables" :columns="columns" />
       </el-tab-pane>
       <el-tab-pane label="字段信息" name="cloum">
-        <el-table ref="dragTable" v-loading="loading" :data="columns" row-key="columnId" :max-height="tableHeight">
+        <el-table ref="dragTableRef" v-loading="loading" :data="columns" row-key="columnId" :max-height="tableHeight">
           <el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag" />
           <el-table-column label="字段列名" prop="columnName" min-width="10%" :show-overflow-tooltip="true" />
-          <el-table-column label="字段描述" prop="columnComment" min-width="10%">
+          <el-table-column label="字段描述" min-width="10%">
             <template #default="scope">
-              <el-input v-model="scope.row.columnComment">
+              <el-input v-model="scope.row.columnComment" :ref="setColumnsRef" @keydown="nextFocus(scope.row, scope.$index, $event)"> </el-input>
-              </el-input>
             </template>
           </el-table-column>
           <el-table-column label="物理类型" prop="columnType" min-width="10%" :show-overflow-tooltip="true" />
@@ -53,8 +52,7 @@
           </el-table-column>
           <el-table-column label="查询" min-width="5%">
             <template #default="scope">
-              <el-checkbox v-model="scope.row.isQuery" :disabled="scope.row.htmlType == 'imageUpload' || scope.row.htmlType == 'fileUpload'">
+              <el-checkbox v-model="scope.row.isQuery" :disabled="scope.row.htmlType == 'imageUpload' || scope.row.htmlType == 'fileUpload'"> </el-checkbox>
-              </el-checkbox>
             </template>
           </el-table-column>
           <el-table-column label="查询方式" min-width="10%">
@@ -95,8 +93,13 @@
           </el-table-column>
           <el-table-column label="字典类型" min-width="12%">
             <template #default="scope">
-              <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择"
+              <el-select
-                v-if="scope.row.htmlType == 'select' || scope.row.htmlType == 'radio' || scope.row.htmlType =='checkbox'">
+                v-model="scope.row.dictType"
+                clearable
+                filterable
+                placeholder="请选择"
+                v-if="scope.row.htmlType == 'select' || scope.row.htmlType == 'radio' || scope.row.htmlType == 'checkbox'"
+              >
                 <el-option v-for="dict in dictOptions" :key="dict.dictType" :label="dict.dictName" :value="dict.dictType">
                   <span style="float: left">{{ dict.dictName }}</span>
                   <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
@@ -108,7 +111,7 @@
       </el-tab-pane>
     </el-tabs>
     <el-form label-width="100px">
-      <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
+      <el-form-item style="text-align: center; margin-left: -100px; margin-top: 10px">
         <el-button type="primary" icon="check" @click="submitForm()">提交</el-button>
         <el-button type="success" icon="refresh" @click="handleQuery()">刷新</el-button>
         <el-button icon="back" @click="close()">返回</el-button>
@@ -137,7 +140,7 @@ const dictOptions = ref([])
 // 表详细信息
 const info = ref({})
 const loading = ref(true)
-
+const dragTableRef = ref()
 const route = useRoute()
 const { proxy } = getCurrentInstance()
 
@@ -211,5 +214,31 @@ function close() {
   }
   proxy.$tab.closeOpenPage(obj)
 }
+
+/*************** table column  回车代码 start*************/
+// 动态ref设置值
+const columnRefs = ref([])
+const setColumnsRef = (el) => {
+  if (el) {
+    columnRefs.value.push(el)
+  }
+}
+
+/**
+ * 回车到下一行
+ */
+function nextFocus(row, index, e) {
+  var length = columnRefs.value.length
+  var keyCode = e.keyCode || e.which || e.charCode
+  if (keyCode === 13) {
+    if (length - 1 == index) {
+      console.log('到最后一个了')
+    } else {
+      columnRefs.value[index + 1].focus()
+    }
+  }
+}
+/*************** table column  回车代码 end *************/
+
 handleQuery()
 </script>

src/views/tool/gen/genInfoForm.vue

@@ -6,8 +6,8 @@
           <template #label>生成模板</template>
           <el-select v-model="info.tplCategory" @change="tplSelectChange">
             <el-option label="单表（增删改查）" value="crud" />
-            <el-option label="单表查询" value="select" />
+            <!-- <el-option label="单表查询" value="select" />
-            <el-option label="树表（增删改查）" value="tree" />
+            <el-option label="树表（增删改查）" value="tree" /> -->
             <!-- <el-option label="导航查询" value="subNav"></el-option> -->
             <!-- <el-option label="主子表（增删改查）" value="sub" /> -->
           </el-select>
@@ -349,7 +349,6 @@ function getMenuTreeselect() {
 }
 function checkedBtnSelect(value) {
   console.log(value)
-  // checkedBtn.value = value
 }
 watch(
   () => props.info.subTableName,
@@ -358,12 +357,5 @@ watch(
   }
 )
 
-// watch(
-//   () => props.info.checkedBtn,
-//   (val) => {
-//     checkedBtn.value = val
-//   }
-// )
-
 getMenuTreeselect()
 </script>

src/views/tool/gen/importTable.vue

@@ -34,7 +34,6 @@
 
 <script setup>
 import { listDbTable, importTable, codeGetDBList } from '@/api/tool/gen'
-import { reactive } from 'vue-demi'
 
 const total = ref(0)
 const visible = ref(false)
@@ -92,20 +91,6 @@ function resetQuery() {
 }
 /** 导入按钮操作 */
 function handleImportTable() {
-  // const tableNames = tables.value.join(',')
-  // if (tableNames == '') {
-  //   proxy.$modal.msgError('请选择要导入的表')
-  //   return
-  // }
-  // importTable({ tables: tableNames }).then((res) => {
-  //   proxy.$modal.msgSuccess(res.msg)
-  //   if (res.code === 200) {
-  //     visible.value = false
-  //     emit('ok')
-  //   }
-  // })
-  console.log(JSON.stringify(tables.value))
-
   importTable({
     tables: tables.value.join(','),
     dbName: queryParams.dbName,

src/views/tool/gen/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="app-container">
-
     <el-form ref="codeform" :inline="true" :model="queryParams">
       <el-form-item label="表名" prop="tableName">
         <el-input v-model="queryParams.tableName" clearable placeholder="输入要查询的表名" />
@@ -16,12 +15,10 @@
         <el-button type="info" plain icon="upload" @click="openImportTable" v-hasPermi="['tool:gen:import']">导入</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="danger" :disabled="multiple" plain icon="delete" @click="handleDelete" v-hasPermi="['tool:gen:remove']">
+        <el-button type="danger" :disabled="multiple" plain icon="delete" @click="handleDelete" v-hasPermi="['tool:gen:remove']"> 删除</el-button>
-          删除</el-button>
       </el-col>
     </el-row>
-    <el-table ref="gridtable" v-loading="tableloading" :data="tableList" border @selection-change="handleSelectionChange" highlight-current-row
+    <el-table ref="gridtable" v-loading="tableloading" :data="tableList" border @selection-change="handleSelectionChange" highlight-current-row height="480px">
-      height="480px">
       <el-table-column type="selection" align="center" width="55"></el-table-column>
       <el-table-column label="序号" type="index" width="50" align="center">
         <template #default="scope">
@@ -41,8 +38,7 @@
           <el-button type="text" icon="edit" @click="handleEditTable(scope.row)" v-hasPermi="['tool:gen:edit']">编辑</el-button>
           <el-button type="text" icon="delete" @click="handleDelete(scope.row)" v-hasPermi="['tool:gen:remove']">删除</el-button>
           <el-button type="text" icon="refresh" @click="handleSynchDb(scope.row)" v-hasPermi="['tool:gen:edit']">同步</el-button>
-          <el-button type="text" icon="download" @click="handleGenTable(scope.row)" v-hasPermi="['tool:gen:code']">生成代码
+          <el-button type="text" icon="download" @click="handleGenTable(scope.row)" v-hasPermi="['tool:gen:code']">生成代码 </el-button>
-          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -52,8 +48,7 @@
     <el-dialog :title="preview.title" v-model="preview.open" width="80%" top="5vh" append-to-body>
       <el-tabs v-model="preview.activeName">
         <el-tab-pane v-for="(item, key) in preview.data" :label="item.title" :name="key.toString()" :key="key">
-          <el-link :underline="false" icon="document-copy" v-clipboard:copy="item.content" v-clipboard:success="clipboardSuccess" style="float:right">
+          <el-link :underline="false" icon="document-copy" v-clipboard:copy="item.content" v-clipboard:success="clipboardSuccess" style="float: right"> 复制</el-link>
-            复制</el-link>
           <pre><code class="hljs" v-html="highlightedCode(item.content, item.title)"></code></pre>
         </el-tab-pane>
       </el-tabs>
@@ -63,13 +58,7 @@
 </template>
 
 <script setup name="gen">
-import {
+import { codeGenerator, listTable, delTable, previewTable, synchDb } from '@/api/tool/gen'
-  codeGenerator,
-  listTable,
-  delTable,
-  previewTable,
-  synchDb,
-} from '@/api/tool/gen'
 import { useRouter } from 'vue-router'
 import importTable from './importTable'
 import hljs from 'highlight.js'
@@ -81,14 +70,11 @@ const { proxy } = getCurrentInstance()
 
 const tableList = ref([])
 const tableloading = ref(true)
-const showSearch = ref(true)
 const tableIds = ref([])
 const single = ref(true)
 const multiple = ref(true)
 const total = ref(0)
-const tableNames = ref([])
 const dateRange = ref([])
-const uniqueId = ref('')
 const showGenerate = ref(false)
 // 选中行的表
 const currentSelected = ref({})
@@ -110,27 +96,14 @@ const data = reactive({
 
 const { queryParams, preview } = toRefs(data)
 
-// onActivated(() => {
-//   const time = route.query.t
-//   if (time != null && time != uniqueId.value) {
-//     uniqueId.value = time
-//     queryParams.value.pageNum = Number(route.query.pageNum)
-//     dateRange.value = []
-//     proxy.resetForm('queryForm')
-//     getList()
-//   }
-// })
-
 /** 查询表集合 */
 function getList() {
   tableloading.value = true
-  listTable(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+  listTable(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
-    (response) => {
     tableList.value = response.data.result
     total.value = response.data.totalNum
     tableloading.value = false
-    }
+  })
-  )
 }
 /** 搜索按钮操作 */
 function handleQuery() {