hxd/zky_mandate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix 优化代码生成关联表选择

Browse Source
This commit is contained in:
yxh 2023-11-15 14:25:54 +08:00
parent c8ac62b7d1
commit eddcab87b9
4 changed files with 396 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/api/system/tools/gen/index.ts
View File

@ -41,10 +41,11 @@ export function getGenTable(tableId:any){
})
}
export function getRelationTable(){
export function getRelationTable(query:Object){
return request({
url: '/api/v1/system/tools/gen/relationTable',
method: 'get',
params:query
})
}

1
src/views/system/tools/gen/component/model.ts
View File

@ -17,6 +17,7 @@ export interface DictOpt{
export interface TableColumns {
columnId: number;
tableId: number;
tableName:string;
columnName: string;
columnComment: string;
columnType: string;

164
src/views/system/tools/gen/component/relationTable.vue Normal file
View File

@ -0,0 +1,164 @@
<template>
<!-- 选择关联表 -->
<el-dialog title="请选择关联表" v-model="visible" width="900px" top="5vh" append-to-body :close-on-click-modal="false">
<el-form :model="tableData.param" ref="queryFormRef" :inline="true">
<el-form-item label="表名称" prop="tableName">
<el-input
v-model="tableData.param.tableName"
placeholder="请输入表名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="表描述" prop="tableComment">
<el-input
v-model="tableData.param.tableComment"
placeholder="请输入表描述"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleQuery"><el-icon><ele-Search /></el-icon>搜索</el-button>
<el-button size="small" @click="resetQuery"><SvgIcon name="ele-Refresh" />重置</el-button>
</el-form-item>
</el-form>
<el-row>
<el-table @row-click="clickRow" ref="tableRef" :data="tableData.data" height="260px">
<el-table-column prop="tableName" label="表名称"></el-table-column>
<el-table-column prop="tableComment" label="表描述"></el-table-column>
<el-table-column prop="packageName" label="关联表key">
<template #default="scope">
<el-select clearable filterable placeholder="请选择关联表key" v-model="scope.row.linkLabelId">
<el-option v-for="column in scope.row.columns" :key="column.columnName" :label="column.columnName" :value="column.columnName">
<span style="float: left">{{ column.htmlField }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ column.columnComment }}</span>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="updateTime" label="关联表value">
<template #default="scope">
<el-select clearable filterable placeholder="请选择关联表value" v-model="scope.row.linkLabelName">
<el-option v-for="column in scope.row.columns" :key="column.columnName" :label="column.columnName" :value="column.columnName">
<span style="float: left">{{ column.htmlField }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ column.columnComment }}</span>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button size="small" type="primary" @click="handleImportTable(scope.row)"><el-icon><ele-Check /></el-icon>关联此表</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="tableData.total>0"
:total="tableData.total"
v-model:page="tableData.param.pageNum"
v-model:limit="tableData.param.pageSize"
@pagination="getList"
/>
</el-row>
</el-dialog>
</template>
<script lang="ts">
import {defineComponent, reactive, ref, toRefs} from "vue";
import {ImportTableDataState, TableColumns, TableData} from "/@/views/system/tools/gen/component/model"
import {getRelationTable, importTable} from "/@/api/system/tools/gen";
import {ElMessage} from "element-plus/es";
export default defineComponent({
name: "relationTable",
emits:['ok'],
setup(prop,{emit}) {
const queryFormRef = ref()
const tableRef = ref()
const visible = ref(false)
const columnId = ref<number>()
const state = reactive<ImportTableDataState>({
tableData:{
data:[],
total:0,
loading:true,
param:{
pageNum: 1,
pageSize: 10,
tableName: '',
tableComment: ''
},
}
})
const getList = ()=>{
getRelationTable(state.tableData.param).then((res:any)=>{
state.tableData.data = res.data.data??[]
state.tableData.total = res.data.total
})
}
const handleQuery = ()=>{
state.tableData.param.pageNum = 1
getList()
}
const resetQuery=()=>{
queryFormRef.value.resetFields()
getList()
}
const clickRow=(row:TableColumns)=>{
tableRef.value.toggleRowSelection(row);
}
const handleImportTable=(row:TableColumns)=>{
if(!row.linkLabelId){
ElMessage.error("请选择关联表key")
return
}
if(!row.linkLabelName){
ElMessage.error("请选择关联表value")
return
}
emit("ok",columnId.value,{
linkTableName:row.tableName,
linkLabelId:row.linkLabelId,
linkLabelName:row.linkLabelName
});
visible.value = false;
}
const openDialog = (cid:number)=>{
columnId.value = cid
getList()
visible.value = true
}
return {
queryFormRef,
tableRef,
visible,
getList,
handleQuery,
resetQuery,
clickRow,
handleImportTable,
openDialog,
...toRefs(state),
};
}
})
</script>
<style scoped lang="scss">
.check-key-label{
width: 600px;
display: flex;
flex-direction: row;
justify-content: center;
align-items:center;
margin: 15px auto;
.check-label{
margin-top: 5px;
text-align: right;
}
}
</style>

454
src/views/system/tools/gen/component/tableColumns.vue
View File

@ -1,259 +1,263 @@
<template>
<el-card shadow="never" header="字段信息配置">
<el-alert title="⚠️表字段中的updated_at、deleted_at的字段在此列表中已经隐藏" type="warning" show-icon />
<el-table ref="tableColumnsRef" :data="info.columns" row-key="columnId" :max-height="tableHeight" width="100%">
<el-table-column label="序号" type="index" width="50" fixed />
<el-table-column label="字段列名" prop="columnName" width="150" fixed :show-overflow-tooltip="true" />
<el-table-column label="字段描述" width="150" fixed>
<template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.columnComment"></textarea>
</template>
</el-table-column>
<el-table-column class-name="allowDrag" label="物理类型" prop="columnType" width="120" :show-overflow-tooltip="true" />
<el-table-column label="go类型" width="120">
<template #default="scope">
<el-select v-model="scope.row.goType">
<el-option label="int" value="int" />
<el-option label="uint" value="uint" />
<el-option label="int64" value="int64" />
<el-option label="uint64" value="uint64" />
<el-option label="float64" value="float64" />
<el-option label="string" value="string" />
<el-option label="Time" value="Time" />
<el-option label="byte" value="byte" />
<el-option label="bool" value="bool" />
</el-select>
</template>
</el-table-column>
<el-table-column label="TS类型" width="120">
<template #default="scope">
<el-select v-model="scope.row.tsType">
<el-option label="string" value="string" />
<el-option label="number" value="number" />
<el-option label="boolean" value="boolean" />
<el-option label="string[]" value="string[]" />
<el-option label="number[]" value="number[]" />
<el-option label="any" value="any" />
<el-option label="tuple" value="tuple" />
<el-option label="enum" value="enum" />
</el-select>
</template>
</el-table-column>
<el-table-column label="go属性" width="150">
<template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.goField"></textarea>
</template>
</el-table-column>
<div class="app-container">
<el-card shadow="never" header="字段信息配置">
<el-alert title="⚠️表字段中的updated_at、deleted_at的字段在此列表中已经隐藏" type="warning" show-icon />
<el-table ref="tableColumnsRef" :data="info.columns" row-key="columnId" :max-height="tableHeight" width="100%">
<el-table-column label="序号" type="index" width="50" fixed />
<el-table-column label="字段列名" prop="columnName" width="150" fixed :show-overflow-tooltip="true" />
<el-table-column label="字段描述" width="150" fixed>
<template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.columnComment"></textarea>
</template>
</el-table-column>
<el-table-column class-name="allowDrag" label="物理类型" prop="columnType" width="120" :show-overflow-tooltip="true" />
<el-table-column label="go类型" width="120">
<template #default="scope">
<el-select v-model="scope.row.goType">
<el-option label="int" value="int" />
<el-option label="uint" value="uint" />
<el-option label="int64" value="int64" />
<el-option label="uint64" value="uint64" />
<el-option label="float64" value="float64" />
<el-option label="string" value="string" />
<el-option label="Time" value="Time" />
<el-option label="byte" value="byte" />
<el-option label="bool" value="bool" />
</el-select>
</template>
</el-table-column>
<el-table-column label="TS类型" width="120">
<template #default="scope">
<el-select v-model="scope.row.tsType">
<el-option label="string" value="string" />
<el-option label="number" value="number" />
<el-option label="boolean" value="boolean" />
<el-option label="string[]" value="string[]" />
<el-option label="number[]" value="number[]" />
<el-option label="any" value="any" />
<el-option label="tuple" value="tuple" />
<el-option label="enum" value="enum" />
</el-select>
</template>
</el-table-column>
<el-table-column label="go属性" width="150">
<template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.goField"></textarea>
</template>
</el-table-column>
<el-table-column label="json属性" width="150">
<template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.htmlField" ></textarea>
</template>
</el-table-column>
<el-table-column label="json属性" width="150">
<template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.htmlField" ></textarea>
</template>
</el-table-column>
<el-table-column label="编辑" width="50">
<template #default="scope">
<el-checkbox
v-model="scope.row.isEdit"
:disabled="
scope.row.isPk == '1' ||
scope.row.columnName == 'created_at' ||
scope.row.columnName == 'created_by' ||
scope.row.columnName == 'updated_by'
"
></el-checkbox>
</template>
</el-table-column>
<el-table-column label="列表" width="50">
<template #default="scope">
<el-checkbox v-model="scope.row.isList"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="列表固定" width="50">
<template #default="scope">
<el-checkbox v-model="scope.row.isFixed"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="过长隐藏" width="50">
<template #default="scope">
<el-checkbox v-model="scope.row.isOverflowTooltip" />
</template>
</el-table-column>
<el-table-column label="详情" width="50">
<template #default="scope">
<el-checkbox v-model="scope.row.isDetail"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="查询" width="50">
<template #default="scope">
<el-checkbox v-model="scope.row.isQuery" :disabled="scope.row.htmlField == info.treeParentCode"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="查询方式" width="120">
<template #default="scope">
<el-select v-model="scope.row.queryType">
<el-option label="=" value="EQ" />
<el-option label="!=" value="NE" />
<el-option label=">" value="GT" />
<el-option label=">=" value="GTE" />
<el-option label="<" value="LT" />
<el-option label="<=" value="LTE" />
<el-option label="LIKE" value="LIKE" />
<el-option label="BETWEEN" value="BETWEEN" />
</el-select>
</template>
</el-table-column>
<el-table-column label="必填" width="50">
<template #default="scope">
<el-checkbox v-model="scope.row.isRequired"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="显示类型" width="140">
<template #default="scope">
<el-select v-model="scope.row.htmlType" :disabled="scope.row.htmlField == info.treeParentCode">
<el-option label="文本框" value="input" />
<el-option label="文本域" value="textarea" />
<el-option label="下拉单选框" value="select" />
<el-option label="下拉多选框" value="selects" />
<el-option label="树形单选框" value="treeSelect" />
<el-option label="树形多选框" value="treeSelects" />
<el-option label="单选框" value="radio" />
<el-option label="复选框" value="checkbox" />
<el-option label="日期控件" value="date" />
<el-option label="日期时间控件" value="datetime" />
<el-option label="富文本" value="richtext" />
<el-option label="单图上传" value="imagefile" />
<el-option label="多图上传" value="images" />
<el-option label="单文件上传" value="file" />
<el-option label="多文件上传" value="files" />
<el-option label="键值对" value="keyValue" />
</el-select>
</template>
</el-table-column>
<el-table-column label="列表排序" width="100">
<template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.sortOrderList" ></textarea>
</template>
</el-table-column>
<el-table-column label="详情排序" width="100">
<template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.sortOrderDetail" ></textarea>
</template>
</el-table-column>
<el-table-column label="编辑排序" width="100">
<template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.sortOrderEdit" ></textarea>
</template>
</el-table-column>
<el-table-column label="查询排序" width="100">
<template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.sortOrderQuery" ></textarea>
</template>
</el-table-column>
<el-table-column label="列表宽度" width="100">
<template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.minWidth" ></textarea>
</template>
</el-table-column>
<el-table-column label="详情占列" width="70">
<template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.colSpan" ></textarea>
</template>
</el-table-column>
<el-table-column label="详情起新行" width="50">
<template #default="scope">
<el-checkbox true-label="1" v-model="scope.row.isRowStart"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="字典类型" width="160">
<template #default="scope">
<el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
<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>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="关联表" width="160">
<template #default="scope">
<el-select
v-model="scope.row.linkTableName"
clearable
filterable
placeholder="请选择"
@change="handleChangeConfig(scope.row)"
>
<el-option v-for="table in relationTable" :key="table.tableName" :label="table.tableName" :value="table.tableName">
<span style="float: left">{{ table.tableName }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ table.tableComment }}</span>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="关联表key" width="150">
<template #default="scope">
<el-select v-model="scope.row.linkLabelId" clearable filterable placeholder="请选择">
<el-option v-for="column in scope.row.columns" :key="column.columnName" :label="column.columnName" :value="column.columnName">
<span style="float: left">{{ column.htmlField }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ column.columnComment }}</span>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="关联表value" width="150">
<template #default="scope">
<el-select v-model="scope.row.linkLabelName" clearable filterable placeholder="请选择">
<el-option v-for="column in scope.row.columns" :key="column.columnName" :label="column.columnName" :value="column.columnName">
<span style="float: left">{{ column.htmlField }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ column.columnComment }}</span>
</el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</el-card>
<el-table-column label="编辑" width="50">
<template #default="scope">
<el-checkbox
v-model="scope.row.isEdit"
:disabled="
scope.row.isPk == '1' ||
scope.row.columnName == 'created_at' ||
scope.row.columnName == 'created_by' ||
scope.row.columnName == 'updated_by'
"
></el-checkbox>
</template>
</el-table-column>
<el-table-column label="列表" width="50">
<template #default="scope">
<el-checkbox v-model="scope.row.isList"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="列表固定" width="50">
<template #default="scope">
<el-checkbox v-model="scope.row.isFixed"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="过长隐藏" width="50">
<template #default="scope">
<el-checkbox v-model="scope.row.isOverflowTooltip" />
</template>
</el-table-column>
<el-table-column label="详情" width="50">
<template #default="scope">
<el-checkbox v-model="scope.row.isDetail"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="查询" width="50">
<template #default="scope">
<el-checkbox v-model="scope.row.isQuery" :disabled="scope.row.htmlField == info.treeParentCode"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="查询方式" width="120">
<template #default="scope">
<el-select v-model="scope.row.queryType">
<el-option label="=" value="EQ" />
<el-option label="!=" value="NE" />
<el-option label=">" value="GT" />
<el-option label=">=" value="GTE" />
<el-option label="<" value="LT" />
<el-option label="<=" value="LTE" />
<el-option label="LIKE" value="LIKE" />
<el-option label="BETWEEN" value="BETWEEN" />
</el-select>
</template>
</el-table-column>
<el-table-column label="必填" width="50">
<template #default="scope">
<el-checkbox v-model="scope.row.isRequired"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="显示类型" width="140">
<template #default="scope">
<el-select v-model="scope.row.htmlType" :disabled="scope.row.htmlField == info.treeParentCode">
<el-option label="文本框" value="input" />
<el-option label="文本域" value="textarea" />
<el-option label="下拉单选框" value="select" />
<el-option label="下拉多选框" value="selects" />
<el-option label="树形单选框" value="treeSelect" />
<el-option label="树形多选框" value="treeSelects" />
<el-option label="单选框" value="radio" />
<el-option label="复选框" value="checkbox" />
<el-option label="日期控件" value="date" />
<el-option label="日期时间控件" value="datetime" />
<el-option label="富文本" value="richtext" />
<el-option label="单图上传" value="imagefile" />
<el-option label="多图上传" value="images" />
<el-option label="单文件上传" value="file" />
<el-option label="多文件上传" value="files" />
<el-option label="键值对" value="keyValue" />
</el-select>
</template>
</el-table-column>
<el-table-column label="列表排序" width="100">
<template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.sortOrderList" ></textarea>
</template>
</el-table-column>
<el-table-column label="详情排序" width="100">
<template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.sortOrderDetail" ></textarea>
</template>
</el-table-column>
<el-table-column label="编辑排序" width="100">
<template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.sortOrderEdit" ></textarea>
</template>
</el-table-column>
<el-table-column label="查询排序" width="100">
<template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.sortOrderQuery" ></textarea>
</template>
</el-table-column>
<el-table-column label="列表宽度" width="100">
<template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.minWidth" ></textarea>
</template>
</el-table-column>
<el-table-column label="详情占列" width="70">
<template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.colSpan" ></textarea>
</template>
</el-table-column>
<el-table-column label="详情起新行" width="50">
<template #default="scope">
<el-checkbox true-label="1" v-model="scope.row.isRowStart"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="字典类型" width="160">
<template #default="scope">
<el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
<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>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="关联表" width="160">
<template #default="scope">
<el-tag v-if="scope.row.linkTableName" type="success" @click="handleChangeConfig(scope.row)" closable @close="handleRemoveRelation(scope.row)">{{scope.row.linkTableName}}</el-tag>
<el-tag v-else @click="handleChangeConfig(scope.row)">点击选择</el-tag>
</template>
</el-table-column>
<el-table-column label="关联表key" width="150">
<template #default="scope">
<el-tag v-if="scope.row.linkLabelId" type="success" @click="handleChangeConfig(scope.row)" closable @close="handleRemoveRelation(scope.row)">{{scope.row.linkLabelId}}</el-tag>
<el-tag v-else @click="handleChangeConfig(scope.row)">点击选择</el-tag>
</template>
</el-table-column>
<el-table-column label="关联表value" width="150">
<template #default="scope">
<el-tag v-if="scope.row.linkLabelName" type="success" @click="handleChangeConfig(scope.row)" closable @close="handleRemoveRelation(scope.row)">{{scope.row.linkLabelName}}</el-tag>
<el-tag v-else @click="handleChangeConfig(scope.row)">点击选择</el-tag>
</template>
</el-table-column>
</el-table>
</el-card>
<relation-table ref="relationTableRef" @ok="setRelationTable"></relation-table>
</div>
</template>
<script lang="ts">
import {defineComponent, inject, onBeforeMount, ref} from 'vue';
import {defineComponent, inject, nextTick, onBeforeMount, ref} from 'vue';
import type { FormInstance } from 'element-plus';
import {DictOpt, TableDataInfo} from '/@/views/system/tools/gen/component/model';
import {getRelationTable} from "/@/api/system/tools/gen";
import {DictOpt, TableColumns, TableDataInfo} from '/@/views/system/tools/gen/component/model';
import {optionselect} from "/@/api/system/dict/type";
import RelationTable from "/@/views/system/tools/gen/component/relationTable.vue";
import importTable from "/@/views/system/tools/gen/component/importTable.vue";
import _ from "lodash";
export default defineComponent({
name: 'genTableColumns',
components: {importTable, RelationTable},
setup() {
const relationTableRef = ref();
const tableColumnsRef = ref<FormInstance>();
const info = inject<TableDataInfo>('tableData') as TableDataInfo;
// 表格的高度
const tableHeight = ref(document.documentElement.scrollHeight - 300 + 'px');
const dictOptions = ref(<DictOpt[]>[])
const relationTable = ref<TableDataInfo[]>([])
onBeforeMount(()=>{
//获取字典选项
optionselect().then((res:any)=>{
dictOptions.value = res.data.dictType??[]
})
//获取关联表数据
getRelationTable().then((res:any)=>{
relationTable.value = <TableDataInfo[]>(res.data?.data)??[]
})
})
const handleChangeConfig = (row:TableDataInfo)=>{
relationTable.value.filter(function(item) {
if (item.tableName === row.linkTableName) {
row.columns = item.columns
const handleChangeConfig = (row:TableColumns)=>{
relationTableRef.value.openDialog(row.columnId)
}
const setRelationTable = (cid:number,data:any)=>{
info.value.columns.map((item:TableColumns,index :number)=>{
if(item.columnId===cid){
let d = _.cloneDeep(item)
d.linkTableName = data.linkTableName
d.linkLabelId = data.linkLabelId
d.linkLabelName = data.linkLabelName
info.value.columns[index] = d
}
})
}
const handleRemoveRelation = (row:TableColumns)=>{
info.value.columns.map((item:TableColumns,index :number)=>{
if(item.columnId===row.columnId){
let d = _.cloneDeep(item)
d.linkTableName = ""
d.linkLabelId = ""
d.linkLabelName = ""
info.value.columns[index] = d
}
})
}
return {
relationTableRef,
tableColumnsRef,
info,
tableHeight,
dictOptions,
relationTable,
handleChangeConfig,
setRelationTable,
handleRemoveRelation
};
},
});