代码生成添加

package.json

@@ -9,13 +9,20 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
+    "@codemirror/lang-html": "^6.1.3",
+    "@codemirror/lang-javascript": "^6.1.1",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/theme-one-dark": "^6.1.0",
     "axios": "^1.1.3",
+    "i": "^0.3.7",
+    "npm": "^8.19.2",
     "pinia": "^2.0.23",
     "vue": "^3.2.41",
+    "vue-codemirror": "^6.1.1",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@arco-design/web-vue": "^2.37.4",
+    "@arco-design/web-vue": "^2.38.0",
     "@vitejs/plugin-vue": "^3.0.1",
     "eslint": "^8.26.0",
     "eslint-plugin-vue": "^9.6.0",

src/api/admin/sys-dict.js

@@ -32,4 +32,12 @@ export function updateDictType(data, id) {
     method: 'put',
     data,
   })
-}
+}
+
+// 获取字典选择框列表
+export function optionselect() {
+  return request({
+    url: '/api/v1/dict/type-option-select',
+    method: 'get'
+  })
+}

src/api/tools/gen.js

@@ -0,0 +1,103 @@
+import request from '@/utils/request'
+
+// 查询生成表数据
+export function listTable(query) {
+  return request({
+    url: '/api/v1/sys/tables/page',
+    method: 'get',
+    params: query
+  })
+}
+// 查询db数据库列表
+export function listDbTable(query) {
+  return request({
+    url: '/api/v1/db/tables/page',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询表详细信息
+export function getGenTable(tableId) {
+  return request({
+    url: '/api/v1/sys/tables/info/' + tableId,
+    method: 'get'
+  })
+}
+
+export function getGenTableInfo(tablename) {
+  return request({
+    url: '/api/v1/sys/tables?tableName=' + tablename,
+    method: 'get'
+  })
+}
+
+// 修改代码生成信息
+export function updateGenTable(data) {
+  return request({
+    url: '/api/v1/sys/tables/info',
+    method: 'put',
+    data: data
+  })
+}
+
+// 导入表
+export function importTable(data) {
+  return request({
+    url: '/api/v1/sys/tables/info',
+    method: 'post',
+    params: data
+  })
+}
+// 预览生成代码
+export function previewTable(tableId) {
+  return request({
+    url: '/api/v1/gen/preview/' + tableId,
+    method: 'get'
+  })
+}
+// 删除表数据
+export function delTable(tableId) {
+  return request({
+    url: '/api/v1/sys/tables/info/' + tableId,
+    method: 'delete'
+  })
+}
+
+// 生成代码到项目
+export function toProjectTable(tableId) {
+  return request({
+    url: '/api/v1/gen/toproject/' + tableId,
+    method: 'get'
+  })
+}
+
+// 生成接口数据到迁移脚本
+export function apiToFile(tableId) {
+  return request({
+    url: '/api/v1/gen/apitofile/' + tableId,
+    method: 'get'
+  })
+}
+
+export function toProjectTableCheckRole(tableId, ischeckrole) {
+  return request({
+    url: '/api/v1/gen/toproject/' + tableId + '?ischeckrole=' + ischeckrole,
+    method: 'get'
+  })
+}
+
+// 生成菜单到数据库
+export function toDBTable(tableId) {
+  return request({
+    url: '/api/v1/gen/todb/' + tableId,
+    method: 'get'
+  })
+}
+
+export function getTableTree() {
+  return request({
+    url: '/api/v1/gen/tabletree',
+    method: 'get'
+  })
+}

src/router/index.js

@@ -1,4 +1,4 @@
-import { createWebHashHistory, createRouter } from 'vue-router';
+import { createWebHashHistory, createRouter, createWebHistory } from 'vue-router';
 import Layout from '../layout/index.vue';
 import { useUserStore } from '../store/userInfo';
 import { usePermissionStore } from '../store/permission';
@@ -52,8 +52,10 @@ const routes = [
 ];
 
 const router = createRouter({
-  history: createWebHashHistory(),
-  routes,
+  // createWebHashHistory URL 带井号
+  // createWebHistory URL 去井号
+  history: createWebHistory(),
+  routes: routes,
 });
 
 // beforeEach router

src/views/dev-tools/gen/editTable.vue

@@ -0,0 +1,370 @@
+<template>
+  <div class="app-container">
+    <a-form :model="dataInfo" ref="modalFormRef" auto-label-width size="mini">
+      <a-card bordered>
+        <!-- 卡片插槽 开始 -->
+        <template #actions>
+          <a-button type="primary" @click="handleSubmit" long>提交</a-button>
+          <a-button type="primary" @click="close" long>返回</a-button>
+        </template>
+        <!-- 卡片插槽 结束 -->
+        <a-tabs default-active-key="2">
+          <a-tab-pane key="1" title="基本信息">
+            <a-row :gutter="24">
+              <a-col :span="12">
+                <a-form-item field="tableName">
+                  <template #label>
+                    数据表名称
+                    <a-tooltip content="数据库表名称，针对gorm对应的table()使用，⚠️这里必须是蛇形结构">
+                      <icon-question-circle-fill />
+                    </a-tooltip>
+                  </template>
+                  <a-input v-model="dataInfo.tableName" placeholder="请输入表名称" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item field="tableComment">
+                  <template #label>
+                    菜单名称
+                    <a-tooltip content="同步的数据库表名称，生成配置数据时，用作菜单名称">
+                      <icon-question-circle-fill />
+                    </a-tooltip>
+                  </template>
+                  <a-input v-model="dataInfo.tableComment" placeholder="请输入菜单名称" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item field="className">
+                  <template #label>
+                    结构体模型名称
+                    <a-tooltip content="结构体模型名称，代码中的struct名称定义使用">
+                      <icon-question-circle-fill />
+                    </a-tooltip>
+                  </template>
+                  <a-input v-model="dataInfo.className" placeholder="请输入" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item field="functionAuthor" label="作者名称">
+                  <a-input v-model="dataInfo.functionAuthor" placeholder="请输入作者名称" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="24">
+                <a-form-item field="remark" label="备注">
+                  <a-textarea v-model="dataInfo.remark" placeholder="请输入备注" />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+
+          <a-tab-pane key="2" title="字段信息">
+            <a-alert type="warning" style="margin-bottom: 16px;">表字段中的id、create_by、update_by、created_at、updated_at、deleted_at的字段在此列表中已经隐藏.</a-alert>
+            <a-table  :data="tableData" :virtual-list-props="{height:600}" :pagination="false" :scroll="{x: '100%'}">
+              <template #columns>
+                <!-- <a-table-column title="序号" data-index="tableId" :width="180" ellipsis tooltip/> -->
+                <a-table-column title="字段列名" data-index="columnName"/>
+                <a-table-column title="字段描述" :width="120">
+                  <template #cell="{ record }">
+                    <a-input v-model="record.columnComment" />
+                  </template>
+                </a-table-column>
+                <a-table-column title="物理类型" data-index="columnType"  align="center"  :width="120" />
+                <a-table-column title="go类型"  align="center"  :width="140">
+                  <template #cell="{ record }">
+                    <a-select v-model="record.goType" placeholder="请选择 ...">
+                      <a-option value="int64">int64</a-option>
+                      <a-option value="string">string</a-option>
+                    </a-select>
+                  </template>
+                </a-table-column>
+                <a-table-column title="go属性"  align="center" >
+                  <template #cell="{ record }">
+                    <a-input v-model="record.goField"/>
+                  </template>
+                </a-table-column>
+                <a-table-column title="json属性"  align="center"  >
+                  <template #cell="{ record }">
+                    <a-input v-model="record.jsonField"/>
+                  </template>
+                </a-table-column>
+                <a-table-column title="编辑" align="center" :width="60">
+                  <template #cell="{ record }">
+                    <a-switch v-model="record.isInsert" type="large" checked-value="1" unchecked-value="0">
+                      <template #checked-icon>
+                        <icon-check/>
+                      </template>
+                      <template #unchecked-icon>
+                        <icon-close/>
+                      </template>
+                    </a-switch>
+                  </template>
+                </a-table-column>
+                <a-table-column title="列表" align="center" :width="60">
+                  <template #cell="{ record }">
+                    <a-switch v-model="record.isList" type="large" checked-value="1" unchecked-value="0">
+                      <template #checked-icon>
+                        <icon-check/>
+                      </template>
+                      <template #unchecked-icon>
+                        <icon-close/>
+                      </template>
+                    </a-switch>
+                  </template>
+                </a-table-column>
+                <a-table-column title="查询" align="center" :width="60">
+                  <template #cell="{ record }">
+                    <a-switch v-model="record.isQuery" type="large" checked-value="1" unchecked-value="0">
+                      <template #checked-icon>
+                        <icon-check/>
+                      </template>
+                      <template #unchecked-icon>
+                        <icon-close/>
+                      </template>
+                    </a-switch>
+                  </template>
+                </a-table-column>
+                <a-table-column title="查询方式" :width="90">
+                  <template #cell="{ record }">
+                    <a-select v-model="record.queryType" placeholder="请选择 ...">
+                      <a-option label="=" value="EQ" />
+                      <a-option label="!=" value="NE" />
+                      <a-option label=">" value="GT" />
+                      <a-option label=">=" value="GTE" />
+                      <a-option label="<" value="LT" />
+                      <a-option label="<=" value="LTE" />
+                      <a-option label="LIKE" value="LIKE" />
+                    </a-select>
+                  </template>
+                </a-table-column>
+                <a-table-column title="必填" :width="70">
+                  <template #cell="{ record }">
+                    <!-- <a-checkbox v-model="record.isRequired"/> -->
+                    <a-switch v-model="record.isRequired" type="large" checked-value="1" unchecked-value="0">
+                      <template #checked-icon>
+                        <icon-check/>
+                      </template>
+                      <template #unchecked-icon>
+                        <icon-close/>
+                      </template>
+                    </a-switch>
+                  </template>
+                </a-table-column>
+                <a-table-column title="显示类型" :width="140">
+                  <template #cell="{ record }">
+                    <a-select v-model="record.htmlType" placeholder="请选择 ...">
+                      <a-option value="input">文本框</a-option>
+                      <a-option value="select">下拉框</a-option>
+                      <a-option value="radio">单选框</a-option>
+                      <a-option value="textarea">文本域</a-option>
+                    </a-select>
+                  </template>
+                </a-table-column>
+                <a-table-column title="字典类型">
+                  <template #cell="{ record }">
+                    <a-select v-model="record.dictType" allow-clear allow-search placeholder="请选择">
+                      <a-option v-for="dict in dictOptions" :key="dict.dictType" :label="dict.dictName" :value="dict.dictType" >
+                        <a-descriptions :column="1" size="mini">
+                          <a-descriptions-item :label="dict.dictName">
+                          {{ dict.dictType }}
+                          </a-descriptions-item>
+                        </a-descriptions>
+                      </a-option>
+                    </a-select>
+                  </template>
+                </a-table-column>
+                <a-table-column title="关系表">
+                  <template #cell="{ record }">
+                    <a-select v-model="record.fkTableName" allow-clear allow-search placeholder="请选择" @change="handleChangeConfig(record)">
+                      <a-option v-for="table in tableTree" :key="table.tableName" :label="table.tableName" :value="table.tableName">
+                        <span style="float: left; margin-right: 5px; font-size: 12px;">{{ table.tableName }}</span>
+                        <span style="float: right; color: #8492a6; font-size: 13px">{{ table.tableComment }}</span>
+                      </a-option>
+                    </a-select>
+                  </template>
+                </a-table-column>
+                <a-table-column title="关系表key">
+                  <template #cell="{ record }">
+                    <a-select v-model="record.fkLabelId" allow-clear allow-search placeholder="请选择">
+                      <a-option v-for="column in record.fkCol" :key="column.columnName" :label="column.columnName" :value="column.jsonField">
+                        <span style="float: left; margin-right: 5px; font-size: 12px;">{{ column.jsonField }}</span>
+                        <span style="float: right; color: #8492a6; font-size: 12px;">{{ column.columnComment }}</span>
+                      </a-option>
+                    </a-select>
+                  </template>
+                </a-table-column>
+                <a-table-column title="关系表value">
+                  <template #cell="{ record }">
+                    <a-select v-model="record.fkLabelName" allow-clear allow-search placeholder="请选择">
+                      <a-option v-for="column in record.fkCol" :key="column.columnName" :label="column.columnName" :value="column.jsonField">
+                        <span style="float: left; margin-right: 5px; font-size: 12px;">{{ column.jsonField }}</span>
+                        <span style="float: right; color: #8492a6; font-size: 13px">{{ column.columnComment }}</span>
+                      </a-option>
+                    </a-select>
+                  </template>
+                </a-table-column>
+              </template>
+            </a-table>
+          </a-tab-pane>
+
+          <a-tab-pane key="3" title="生成信息">
+            <a-row :gutter="24">
+              <a-col :span="12">
+                <a-form-item field="tplCategory" label="生成模板">
+                  <a-select v-model="dataInfo.tplCategory">
+                    <a-option label="关系表（增删改查）" value="crud" />
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item field="packageName">
+                  <template #label>
+                    应用名
+                    <a-tooltip content="应用名，例如：在app文件夹下将该功能发到那个应用中，默认：admin">
+                      <icon-question-circle-fill />
+                    </a-tooltip>
+                  </template>
+                  <a-input v-model="dataInfo.packageName" placeholder="请输入应用名" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item field="businessName">
+                  <template #label>
+                    业务名
+                    <a-tooltip content="可理解为功能英文名，例如 user">
+                      <icon-question-circle-fill />
+                    </a-tooltip>
+                  </template>
+                  <a-input v-model="dataInfo.businessName" placeholder="请输入业务名" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item field="functionName" label="功能描述">
+                  <template #label>
+                    功能描述
+                    <a-tooltip content="同步的数据库表备注，用作类描述，例如：用户">
+                      <icon-question-circle-fill />
+                    </a-tooltip>
+                  </template>
+                  <a-input v-model="dataInfo.functionName" placeholder="请输入功能描述" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item field="moduleName">
+                  <template #label>
+                    接口路径
+                    <a-tooltip content="接口路径，例如：api/v1/{sys-user}">
+                      <icon-question-circle-fill />
+                    </a-tooltip>
+                  </template>
+                  <a-input v-model="dataInfo.moduleName" placeholder="请输入接口路径" >
+                    <template #prepend>api/{version}/</template>
+                  </a-input>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+        </a-tabs>
+      </a-card>
+    </a-form>
+  </div>
+</template>
+  
+<script setup>
+import { reactive, ref, getCurrentInstance, onMounted, unref } from 'vue';
+import { optionselect as getDictOptionselect } from '@/api/admin/sys-dict'
+import { getGenTable, updateGenTable, getTableTree } from '@/api/tools/gen';
+
+const { proxy } = getCurrentInstance();
+
+// 字符串转布尔类型
+const stringToBool = (value) => {
+  if (value == "1") {
+    return true
+  } else {
+    return false
+  }
+}
+
+// 表详细信息
+const dataInfo = ref({})
+// 默认表格内容
+const tableData = ref([]);
+// 获取 服务数据
+const getGenTableQuery = async (params = {}) => {
+  const res = await getGenTable(params);
+  tableData.value = res.data.list;
+  // 编辑 isInsert
+  // 列表 isList
+  // 查询 isQuery
+  // 必填 isRequired
+  dataInfo.value = res.data.info;
+};
+
+
+// 接收数据库表树
+const tableTree = ref([]);
+// 获取数据库表树
+const getTableTreeQuery = async (params = {}) => {
+  getTableTree().then(response => {
+    tableTree.value = response.data
+    tableTree.value.unshift({ tableId: 0, className: '请选择' })
+  })
+};
+// 关系表
+const handleChangeConfig = (row) => {
+  tableTree.value.filter(function(item) {
+    if (item.tableName === row.fkTableName) {
+      row.fkCol = item.columns
+    }
+  })
+}
+
+
+// 字典类型列表
+const dictOptions = ref([]);
+// 查询字典下拉列表
+const getDictOption = async () => {
+  const res =await getDictOptionselect();
+  dictOptions.value = res.data
+};
+
+
+const modalFormRef = ref(null);
+// handleSubmit 修改按钮方法 20221101
+const handleSubmit = () => {
+  const genTable = Object.assign({}, dataInfo.value)
+  genTable.columns = tableData.value
+  genTable.params = {
+    treeCode: genTable.treeCode,
+    treeName: genTable.treeName,
+    treeParentCode: genTable.treeParentCode
+  }
+
+  proxy.$refs.modalFormRef.validate(async (valid) => {
+    if (!valid) {
+      const { success } = await updateGenTable(genTable);
+      if (success) proxy.$message.success('信息修改成功');
+      // 成功调用关闭方法
+      close()
+    } else {
+      proxy.$message.error('表单校验失败');
+    }
+  });
+};
+
+/** 关闭按钮 */
+const close = () => {
+  proxy.$router.push({ path: '/dev-tools/gen', query: { t: Date.now() }})
+}
+
+onMounted(() => {
+  const { tableId } = proxy.$route.query
+  getGenTableQuery(tableId);
+  getTableTreeQuery()
+  getDictOption()
+});
+
+</script>
+
+<style lang="scss">
+</style>

src/views/dev-tools/gen/importTable.vue

@@ -0,0 +1,142 @@
+<template>
+  <a-modal v-model:visible="visible" title="导入表" @ok="handleImportTable" :ok-loading="loading" @cancel="visible = false" width="50%">
+    <a-form :model="queryForm" ref="queryFormRef" layout="inline">
+      <a-form-item field="tableName" label="表名称">
+        <a-input v-model="queryForm.tableName" placeholder="请输入表名称" />
+      </a-form-item>
+      <a-form-item field="tableComment" label="表描述">
+        <a-input v-model="queryForm.tableComment" placeholder="请输入表描述" />
+      </a-form-item>
+      <a-form-item>
+        <a-space>
+          <a-button type="primary" @click="handleQuery"><icon-search /> 搜索</a-button>
+          <a-button @click="handleResetQuery"><icon-loop /> 重置</a-button>
+        </a-space>
+      </a-form-item>
+    </a-form>
+    <a-divider />
+
+    <a-table
+      :data="tableData"
+      :pagination="{
+        'show-total': true,
+        'show-jumper': true,
+        'show-page-size': true,
+        total: pager.count,
+        current: currentPage,
+      }"
+      :row-selection="{ type: 'checkbox', showCheckedAll: true }"
+      row-key="tableName"
+      @selection-change="selectionChange"
+      @page-change="handlePageChange"
+      @page-size-change="handlePageSizeChange"
+    >
+      <template #columns>
+        <a-table-column title="表名称" data-index="tableName" :width="180" ellipsis tooltip/>
+        <a-table-column title="表描述" data-index="tableComment" :width="180" ellipsis tooltip/>
+        <a-table-column title="创建时间" :width="180" ellipsis>
+          <template #cell="{ record }">
+            {{ parseTime(record.createTime) }}
+          </template>
+        </a-table-column>
+        <a-table-column title="更新时间" :width="180" ellipsis>
+          <template #cell="{ record }">
+            {{ parseTime(record.updateTime) }}
+          </template>
+        </a-table-column>
+      </template>
+    </a-table>
+  </a-modal>
+</template>
+  
+<script setup>
+import { reactive, ref, onMounted, getCurrentInstance } from 'vue';
+import { listDbTable,importTable,listTable} from '@/api/tools/gen';
+const { proxy } = getCurrentInstance();
+
+// 对话框默认值
+const visible = ref(false);
+
+// 按钮加载中状态
+const loading = ref(false)
+
+// 对话框确认
+const handleImportTable = () => {
+  loading.value = true
+  importTable({ tables: batchList.join(',') }).then(res => {
+    if (res.code === 200) {
+      proxy.$message.info(res.msg);
+      // 关闭对话框
+      visible.value = false;
+      // 完成刷新下页面
+      location.reload();
+    } else {
+      proxy.$message.info(res.msg);
+    }
+    loading.value = false
+  })
+};
+
+const queryForm = reactive({});
+// 查询列表信息
+const handleQuery = async () => {
+  const params = {
+    pageIndex: pager.pageIndex,
+    pageSize: pager.pageSize,
+    ...queryForm,
+  };
+
+  getDbTables(params);
+};
+// 重置搜索
+const handleResetQuery = () => {
+  proxy.$refs.queryFormRef.resetFields();
+  getDbTables(queryForm);
+}
+
+
+const tableData = ref([]);
+// Batch Del List
+let batchList = [];
+// Table 勾选数据
+const selectionChange = (rowKeys) => {
+  batchList = rowKeys;
+};
+/**
+ * 分页改变
+ * @param {Number} [page]
+ */
+ const handlePageChange = (page) => {
+  pager.pageIndex = page;
+  // 修改当前页码
+  currentPage.value = page;
+  getDbTables({ ...pager, ...queryForm });
+};
+
+// 每页数据量
+const handlePageSizeChange = (pageSize) => {
+  pager.pageSize = pageSize;
+  getDbTables({ ...pager, ...queryForm });
+};
+
+// 初始页数
+const currentPage = ref(1);
+// Pager
+const pager = {
+  count: 0,
+  pageIndex: 1,
+  pageSize: 10,
+};
+
+// 获取列表数据
+const getDbTables = async (params = {}) => {
+  const res = await listDbTable(params);
+  tableData.value = res.data.list;
+  const { count, pageIndex, pageSize } = res.data;
+  Object.assign(pager, { count, pageIndex, pageSize });
+};
+
+onMounted(() => {
+  getDbTables(pager);
+});
+</script>

src/views/dev-tools/gen/index.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="app-container">
+    <a-form :model="queryForm" ref="queryFormRef" layout="inline">
+      <a-form-item field="tableName" label="表名称">
+        <a-input v-model="queryForm.tableName" placeholder="请输入表名称" />
+      </a-form-item>
+      <a-form-item field="tableComment" label="表描述">
+        <a-input v-model="queryForm.tableComment" placeholder="请输入描述" />
+      </a-form-item>
+      <a-form-item>
+        <a-space>
+          <a-button type="primary" @click="handleQuery"><icon-search /> 搜索</a-button>
+          <a-button @click="handleResetQuery"><icon-loop /> 重置</a-button>
+          
+        </a-space>
+      </a-form-item>
+    </a-form>
+
+    <a-divider />
+
+    <!-- action -->
+    <div class="action">
+      <a-space>
+        <a-button type="primary" @click="openImportTable"><icon-plus /> 导入 </a-button>
+        <a-button type="primary" status="danger" @click="handleDelete"><icon-delete /> 批量删除</a-button>
+      </a-space>
+    </div>
+
+    <!-- table -->
+    <a-table
+      :data="tableData"
+      :pagination="{
+        'show-total': true,
+        'show-jumper': true,
+        'show-page-size': true,
+        total: pager.count,
+        current: currentPage,
+      }"
+      :row-selection="{ type: 'checkbox', showCheckedAll: true }"
+      row-key="tableId"
+      @selection-change="(selection) => {ids = selection;}" 
+      @page-change="handlePageChange"
+      @page-size-change="handlePageSizeChange"
+    >
+      <template #columns>
+        <a-table-column title="序号" data-index="tableId" :width="180" ellipsis tooltip/>
+        <a-table-column title="表名称" data-index="tableName" :width="180" ellipsis tooltip/>
+        <a-table-column title="表描述" data-index="tableComment" :width="180" ellipsis tooltip/>
+        <a-table-column title="模型名称" data-index="className" :width="180" ellipsis tooltip/>
+        <a-table-column title="动作" :width="370" align="center" >
+          <template #cell="{ record }">
+            <a-button-group>
+              <a-button size="small" @click="handleEditTable(record)">编辑</a-button>
+              <a-button size="small" @click="handlePreview(record)">预览</a-button>
+              <a-popconfirm content="正在使用代码生成请确认?" okText="生成" type="warning" @ok="handleToProject(record)">
+                <a-button size="small">代码生成 </a-button>
+              </a-popconfirm>
+              <a-popconfirm content="正在使用【菜单以及API生成到数据库】请确认?" okText="写入DB" type="warning" @ok="handleToDB(record)">
+                <a-button size="small">生成配置 </a-button>
+              </a-popconfirm>
+              <a-popconfirm content="正在使用代码生成配置迁移脚本请确认?" okText="迁移" type="warning" @ok="handleToApiFile(record)">
+                <a-button size="small">生成迁移脚本 </a-button>
+              </a-popconfirm>
+              <a-button size="small" @click="handleDelete(record)">删除</a-button>
+            </a-button-group>
+          </template>
+        </a-table-column>
+      </template>
+    </a-table>
+
+    <!-- 导入对话框 -->
+    <import-table v-model:visible="modalVisible" />
+
+    <!-- 预览代码对话框 -->
+    <a-modal v-model:visible="codeVisible" title="预览代码" width="80%">
+      <a-space style="margin-bottom: 16px;">
+        <a-tag v-for="(value, key) of preview.data" :key="key" bordered color="#165dff" @click="codeChange(key)">{{ key.substring(key.lastIndexOf('/')+1,key.indexOf('.go.template')) }}</a-tag>
+      </a-space>
+      <!-- 代码编辑器 -->
+      <codemirror v-model="codestr"  :style="{ height: '600px' }" :autofocus="true" :indent-with-tab="true" :tab-size="2" :extensions="extensions" />
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, getCurrentInstance, onMounted, nextTick } from 'vue';
+import importTable from './importTable.vue'
+import { listTable,previewTable,delTable,apiToFile,toProjectTableCheckRole,toDBTable } from '@/api/tools/gen';
+import { parseTime } from '@/utils/parseTime';
+
+import { Codemirror } from 'vue-codemirror'
+import { javascript } from '@codemirror/lang-javascript'
+import { oneDark } from '@codemirror/theme-one-dark'
+
+const { proxy } = getCurrentInstance();
+
+const currentPage = ref(1);
+// Pager
+const pager = {
+  count: 0,
+  pageIndex: 1,
+  pageSize: 10,
+};
+// form
+const queryForm = reactive({});
+const modalForm = reactive({
+  sort: 0,
+  status: 2,
+});
+
+const modalVisible = ref(false);
+const openImportTable = () => {
+  modalVisible.value = true;
+};
+// Batch Del List
+let batchList = [];
+
+// Table Data
+const tableData = ref([]);
+
+// 修改
+const handleUpdate = async (record) => {
+  modalVisible.value = true;
+  modalTitle.value = '修改岗位';
+  await nextTick();
+  Object.assign(modalForm, record);
+};
+
+// Table 勾选数据
+const selectionChange = (rowKeys) => {
+  batchList = rowKeys;
+};
+
+/**
+ * 分页改变
+ * @param {Number} [page]
+ */
+ const handlePageChange = (page) => {
+  pager.pageIndex = page;
+  // 修改当前页码
+  currentPage.value = page;
+  getListTable({ ...pager, ...queryForm });
+};
+
+// 每页数据量
+const handlePageSizeChange = (pageSize) => {
+  pager.pageSize = pageSize;
+  getListTable({ ...pager, ...queryForm });
+};
+
+// 获取列表数据
+const getListTable = async (params = {}) => {
+  const res = await listTable(params);
+  tableData.value = res.data.list;
+  // Pager
+  const { count, pageIndex, pageSize } = res.data;
+  Object.assign(pager, { count, pageIndex, pageSize });
+};
+
+// 查询列表信息
+const handleQuery = async () => {
+  const params = {
+    pageIndex: pager.pageIndex,
+    pageSize: pager.pageSize,
+    ...queryForm,
+  };
+
+  getListTable(params);
+};
+
+// 重置搜索
+const handleResetQuery = () => {
+  proxy.$refs.queryFormRef.resetFields();
+  getListTable(queryForm);
+}
+
+// 选中数组
+const ids = ref([]);
+// 删除与批量删除
+const handleDelete = (row) => {
+  let Ids = (row.tableId && [row.tableId]) || ids.value
+  if (Ids.length !== 0) {
+    proxy.$modal.warning({
+      title: '提示',
+      content: '是否确认删除编号为 ' + Ids + ' 的数据项?',
+      hideCancel: false,
+      onOk: async () => {
+        await delTable(Ids);
+        proxy.$message.success("选择数据删除成功");
+        getListTable(pager);
+      },
+      onCancel: () => {
+        proxy.$message.info('删除操作已取消');
+      },
+    });
+  } else {
+    proxy.$message.error('请勾选需要删除的数据！');
+  }
+};
+// 按钮块
+// 编辑
+const handleEditTable = (row) => {
+  const tableId = row.tableId || this.ids[0]
+  proxy.$router.push({ path: '/dev-tools/editTable', query: { tableId: tableId }})
+}
+// 预览代码参数
+// 预览代码对话框
+const codeVisible = ref(false);
+// 预览参数
+const preview = ref({
+  open: false,
+  title: '代码预览',
+  data: {},
+  activeName: 'api.go'
+})
+/** 预览按钮 */
+const handlePreview = (row) => {
+  codeVisible.value = true;
+  previewTable(row.tableId).then(response => {
+    console.log("sadasdasdasd",response)
+    preview.value.data = response.data
+    preview.value.open = true
+    codeChange('template/api.go.template')
+  })
+}
+// 代码编辑器参数
+const cmOptions = ref({
+  tabSize: 4,
+  theme: 'material-palenight',
+  mode: 'text/javascript',
+  lineNumbers: true,
+  line: true
+})
+const extensions = [javascript(), oneDark];
+const codestr = ref('')
+// 预览代码 代码更改
+const codeChange = (e) => {
+  if (e.indexOf('js') > -1) {
+    
+    cmOptions.value.mode = 'text/javascript'
+  }
+  if (e.indexOf('model') > -1 || e.indexOf('router') > -1 || e.indexOf('api') > -1 || e.indexOf('service') > -1 || e.indexOf('dto') > -1) {
+    cmOptions.value.mode = 'text/x-go'
+  }
+  if (e.indexOf('vue') > -1) {
+    cmOptions.value.mode = 'text/x-vue'
+  }
+  codestr.value = preview.value.data[e]
+}
+// 代码生成
+const handleToProject = (row) => {
+  console.log("dasdasd",row)
+  toProjectTableCheckRole(row.tableId, false).then((response) => {
+    proxy.$message.success(response.msg);
+  }).catch(function() {})
+}
+// 生成配置
+const handleToDB = (row) => {
+  toDBTable(row.tableId).then((response) => {
+    proxy.$message.success(response.msg);
+  }).catch(function() {})
+}
+// 生成迁移脚本
+const handleToApiFile = (row) => {
+  apiToFile(row.tableId, true).then((response) => {
+    proxy.$message.success(response.msg);
+  }).catch(function() {})
+}
+
+onMounted(() => {
+  getListTable(pager);
+});
+</script>
+
+<style lang="scss">
+.action {
+  margin-bottom: 12px;
+}
+</style>