From eddcab87b9fefc30a60a211e0db952597dad8b27 Mon Sep 17 00:00:00 2001
From: yxh <yxh1103@qq.com>
Date: Wed, 15 Nov 2023 14:25:54 +0800
Subject: [PATCH] =?UTF-8?q?fix=20=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E5=85=B3=E8=81=94=E8=A1=A8=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/tools/gen/index.ts             |   3 +-
 src/views/system/tools/gen/component/model.ts |   1 +
 .../tools/gen/component/relationTable.vue     | 164 +++++++
 .../tools/gen/component/tableColumns.vue      | 454 +++++++++---------
 4 files changed, 396 insertions(+), 226 deletions(-)
 create mode 100644 src/views/system/tools/gen/component/relationTable.vue

diff --git a/src/api/system/tools/gen/index.ts b/src/api/system/tools/gen/index.ts
index 575731e..1fb091a 100644
--- a/src/api/system/tools/gen/index.ts
+++ b/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
     })
 }
 
diff --git a/src/views/system/tools/gen/component/model.ts b/src/views/system/tools/gen/component/model.ts
index 144f0db..37d0dd0 100644
--- a/src/views/system/tools/gen/component/model.ts
+++ b/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;
diff --git a/src/views/system/tools/gen/component/relationTable.vue b/src/views/system/tools/gen/component/relationTable.vue
new file mode 100644
index 0000000..5d046f8
--- /dev/null
+++ b/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>
diff --git a/src/views/system/tools/gen/component/tableColumns.vue b/src/views/system/tools/gen/component/tableColumns.vue
index 48c7eb4..fbe3226 100644
--- a/src/views/system/tools/gen/component/tableColumns.vue
+++ b/src/views/system/tools/gen/component/tableColumns.vue
@@ -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
 		};
 	},
 });