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

src/api/system/tools/gen/index.ts

@@ -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
     })
 }
 

src/views/system/tools/gen/component/model.ts

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

src/views/system/tools/gen/component/relationTable.vue

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

src/views/system/tools/gen/component/tableColumns.vue

@@ -1,4 +1,5 @@
 <template>
+  <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%">
@@ -177,83 +178,86 @@
         </el-table-column>
         <el-table-column label="关联表" width="160">
           <template #default="scope">
-					<el-select
+            <el-tag v-if="scope.row.linkTableName" type="success" @click="handleChangeConfig(scope.row)" closable @close="handleRemoveRelation(scope.row)">{{scope.row.linkTableName}}</el-tag>
-						v-model="scope.row.linkTableName"
+            <el-tag v-else @click="handleChangeConfig(scope.row)">点击选择</el-tag>
-						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-tag v-if="scope.row.linkLabelId" type="success" @click="handleChangeConfig(scope.row)" closable @close="handleRemoveRelation(scope.row)">{{scope.row.linkLabelId}}</el-tag>
-						<el-option v-for="column in scope.row.columns" :key="column.columnName" :label="column.columnName" :value="column.columnName">
+            <el-tag v-else @click="handleChangeConfig(scope.row)">点击选择</el-tag>
-							<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-tag v-if="scope.row.linkLabelName" type="success" @click="handleChangeConfig(scope.row)" closable @close="handleRemoveRelation(scope.row)">{{scope.row.linkLabelName}}</el-tag>
-						<el-option v-for="column in scope.row.columns" :key="column.columnName" :label="column.columnName" :value="column.columnName">
+            <el-tag v-else @click="handleChangeConfig(scope.row)">点击选择</el-tag>
-							<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>
+    <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 {DictOpt, TableColumns, TableDataInfo} from '/@/views/system/tools/gen/component/model';
-import {getRelationTable} from "/@/api/system/tools/gen";
 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: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 handleChangeConfig = (row:TableDataInfo)=>{
+    }
-      relationTable.value.filter(function(item) {
+    const handleRemoveRelation = (row:TableColumns)=>{
-        if (item.tableName === row.linkTableName) {
+      info.value.columns.map((item:TableColumns,index :number)=>{
-          row.columns = item.columns
+        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
 		};
 	},
 });