wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
不做码农 2022-04-25 21:08:35 +08:00
parent 7c31c1c6e6
commit 74d871ee75
5 changed files with 65 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/tool/gen/basicInfoForm.vue
View File

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

49
src/views/tool/gen/editTable.vue
View File

@ -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>
<el-input v-model="scope.row.columnComment" :ref="setColumnsRef" @keydown="nextFocus(scope.row, scope.$index, $event)"> </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>
<el-checkbox v-model="scope.row.isQuery" :disabled="scope.row.htmlType == 'imageUpload' || scope.row.htmlType == 'fileUpload'"> </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="请选择"
v-if="scope.row.htmlType == 'select' || scope.row.htmlType == 'radio' || scope.row.htmlType =='checkbox'">
<el-select
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>

12
src/views/tool/gen/genInfoForm.vue
View File

@ -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="tree" />
<!-- <el-option label="单表查询" value="select" />
<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>

15
src/views/tool/gen/importTable.vue
View File

@ -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,

43
src/views/tool/gen/index.vue
View File

@ -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,16 +15,14 @@
<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>
<el-button type="danger" :disabled="multiple" plain icon="delete" @click="handleDelete" v-hasPermi="['tool:gen:remove']"> 删除</el-button>
</el-col>
</el-row>
<el-table ref="gridtable" v-loading="tableloading" :data="tableList" border @selection-change="handleSelectionChange" highlight-current-row
height="480px">
<el-table ref="gridtable" v-loading="tableloading" :data="tableList" border @selection-change="handleSelectionChange" highlight-current-row 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">
<span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column prop="dbName" label="数据库名" width="90" />
@ -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>
<el-button type="text" icon="download" @click="handleGenTable(scope.row)" v-hasPermi="['tool:gen:code']">生成代码 </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>
<el-link :underline="false" icon="document-copy" v-clipboard:copy="item.content" v-clipboard:success="clipboardSuccess" style="float: right"> 复制</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 {
codeGenerator,
listTable,
delTable,
previewTable,
synchDb,
} from '@/api/tool/gen'
import { 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(
(response) => {
listTable(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
tableList.value = response.data.result
total.value = response.data.totalNum
tableloading.value = false
}
)
})
}
/** 搜索按钮操作 */
function handleQuery() {