代码生成

src/api/table.js

@@ -0,0 +1,20 @@
+// 查询列表
+export function getItems(f, query) {
+  query = query || { pageSize: 10000 }
+  return f(query)
+}
+
+export function setItems(response, k, v) {
+  const data = []
+  k = k || 'id'
+  v = v || 'name'
+  if (response.data && response.data.list && response.data.list.length > 0) {
+    response.data.list.forEach(e => {
+      data.push({
+        key: e[k].toString(),
+        value: e[v].toString()
+      })
+    })
+    return data
+  }
+}

src/api/tools/gen.js

@@ -79,3 +79,10 @@ export function toDBTable(tableId) {
     method: 'get'
   })
 }
+
+export function getTableTree() {
+  return request({
+    url: '/api/v1/gen/tabletree',
+    method: 'get'
+  })
+}

src/main.js

@@ -16,6 +16,7 @@ import router from './router'
 import permission from './directive/permission'
 
 import { getDicts } from '@/api/system/dict/data'
+import { getItems, setItems } from '@/api/table'
 import { getConfigKey } from '@/api/system/config'
 import { parseTime, resetForm, addDateRange, selectDictLabel, download } from '@/utils/costum'
 
@@ -38,6 +39,8 @@ import '@/utils/dialog'
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
+Vue.prototype.getItems = getItems
+Vue.prototype.setItems = setItems
 Vue.prototype.getConfigKey = getConfigKey
 Vue.prototype.parseTime = parseTime
 Vue.prototype.resetForm = resetForm

src/views/tools/gen/editTable.vue

@@ -112,6 +112,41 @@
               </el-select>
             </template>
           </el-table-column>
+          <el-table-column label="关系表" width="160">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.fkTableName" clearable filterable placeholder="请选择" @change="handleChangeConfig(scope.row,scope.$index)">
+                <el-option
+                  v-for="table in tableTree"
+                  :key="table.tableId"
+                  :label="table.tableName"
+                  :value="table.tableId"
+                >
+                  <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 slot-scope="scope">
+              <el-select v-model="scope.row.fkLableId" clearable filterable placeholder="请选择">
+                <el-option
+                  v-for="column in scope.row.fkCol"
+                  :key="column.columnId"
+                  :label="column.columnName"
+                  :value="column.columnId"
+                >
+                  <span style="float: left">{{ column.columnName }}</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 slot-scope="scope">
+              <el-input v-model="scope.row.fkLableName" />
+            </template>
+          </el-table-column>
         </el-table>
       </el-tab-pane>
       <el-tab-pane label="生成信息" name="genInfo">
@@ -127,7 +162,8 @@
   </el-card>
 </template>
 <script>
-import { getGenTable, updateGenTable } from '@/api/tools/gen'
+import { getGenTable, updateGenTable, getTableTree } from '@/api/tools/gen'
+// import { listTable } from '@/api/tools/gen'
 import { optionselect as getDictOptionselect } from '@/api/system/dict/type'
 import basicInfoForm from './basicInfoForm'
 import genInfoForm from './genInfoForm'
@@ -145,19 +181,34 @@ export default {
       tableHeight: document.documentElement.scrollHeight - 245 + 'px',
       // 表列信息
       columns: [],
+      tableTree: [],
       // 字典信息
       dictOptions: [],
       // 表详细信息
       info: {}
     }
   },
+
   beforeCreate() {
+    getTableTree().then(response => {
+      this.tableTree = response.data
+      this.tableTree.unshift({ tableId: 0, tableName: '请选择' })
+    })
     const { tableId } = this.$route.query
     if (tableId) {
       // 获取表详细信息
       getGenTable(tableId).then(res => {
-        this.columns = res.data.rows
+        this.columns = res.data.list
         this.info = res.data.info
+
+        this.columns.forEach(item => {
+          this.tableTree.filter(function(e) {
+            if (e.tableId === item.fkTableName) {
+              item.fkCol = e.columns || [{ columnId: 0, columnName: '请选择' }]
+              // item.fkCol.unshift({ columnId: 0, columnName: '请选择' })
+            }
+          })
+        })
       })
       /** 查询字典下拉列表 */
       getDictOptionselect().then(response => {
@@ -166,6 +217,16 @@ export default {
     }
   },
   methods: {
+    handleChangeConfig(row, index) {
+      console.log(row)
+      console.log(index)
+      this.tableTree.filter(function(item) {
+        if (item.tableId === row.fkTableName) {
+          row.fkCol = item.columns
+          // row.fkCol.unshift({ columnId: 0, columnName: '请选择' })
+        }
+      })
+    },
     /** 提交按钮 */
     submitForm() {
       const basicForm = this.$refs.basicInfo.$refs.basicInfoForm
@@ -192,6 +253,28 @@ export default {
         }
       })
     },
+    getTables() {
+      getTableTree().then(response => {
+        this.tableTree = response.data
+        this.tableTree.unshift({ tableId: 0, tableName: '请选择' })
+      })
+
+      console.log(this.tableList)
+    },
+    getTablesCol(tableName) {
+      return this.tableTree.filter(function(item) {
+        if (item.tableName === tableName) {
+          return item.columns
+        }
+      })
+    },
+    // getTableColList(tableId) {
+    //   this.getItems(getGenTable, { tableId: tableId }).then(res => {
+    //     this.dictOptions = this.setItems(res, 'columnName', 'columnComment')
+    //   })
+
+    //   console.log(this.tableList)
+    // },
     getFormPromise(form) {
       return new Promise(resolve => {
         form.validate(res => {

src/views/tools/gen/genInfoForm.vue

@@ -6,6 +6,7 @@
           <span slot="label">生成模板</span>
           <el-select v-model="info.tplCategory">
             <el-option label="单表（增删改查）" value="crud" />
+            <el-option label="关系表（增删改查）" value="mcrud" />
             <!-- <el-option label="树表（增删改查）" value="tree" /> -->
           </el-select>
         </el-form-item>