From b04db3d6d87b7d01c6dc37c20d02b3b416933b85 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 9 Feb 2021 15:55:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=87=E7=BA=A7=20highlight=20=E6=8F=92?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/package.json                       |  2 +-
 ruoyi-ui/src/api/tool/codegen.js            |  2 +
 ruoyi-ui/src/main.js                        |  6 +-
 ruoyi-ui/src/views/tool/gen/editTable.vue   | 10 ++-
 ruoyi-ui/src/views/tool/gen/genInfoForm.vue | 89 ++++++++++++++++++---
 ruoyi-ui/src/views/tool/gen/index.vue       | 28 ++++++-
 6 files changed, 117 insertions(+), 20 deletions(-)
 create mode 100644 ruoyi-ui/src/api/tool/codegen.js

diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index 6f07a9544..7df639f52 100644
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@@ -44,7 +44,7 @@
     "element-ui": "2.14.1",
     "file-saver": "2.0.4",
     "fuse.js": "6.4.3",
-    "highlight.js": "10.4.1",
+    "highlight.js": "9.18.5",
     "js-beautify": "1.13.0",
     "js-cookie": "2.2.1",
     "jsencrypt": "3.0.0-rc.1",
diff --git a/ruoyi-ui/src/api/tool/codegen.js b/ruoyi-ui/src/api/tool/codegen.js
new file mode 100644
index 000000000..d95ed38d5
--- /dev/null
+++ b/ruoyi-ui/src/api/tool/codegen.js
@@ -0,0 +1,2 @@
+import request from '@/utils/request'
+
diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js
index 969a93e50..3bd0e5b38 100644
--- a/ruoyi-ui/src/main.js
+++ b/ruoyi-ui/src/main.js
@@ -21,8 +21,8 @@ import Pagination from "@/components/Pagination";
 // 自定义表格工具扩展
 import RightToolbar from "@/components/RightToolbar"
 // 代码高亮插件
-import hljs from 'highlight.js'
-import 'highlight.js/styles/github-gist.css'
+// import hljs from 'highlight.js'
+// import 'highlight.js/styles/github-gist.css'
 import {DICT_TYPE, getDictDataLabel, getDictDatas} from "@/utils/dict";
 
 // 全局方法挂载
@@ -57,7 +57,7 @@ Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)
 
 Vue.use(permission)
-Vue.use(hljs.vuePlugin);
+// Vue.use(hljs.vuePlugin);
 
 /**
  * If you don't want to use mock-server
diff --git a/ruoyi-ui/src/views/tool/gen/editTable.vue b/ruoyi-ui/src/views/tool/gen/editTable.vue
index 800368326..39071894e 100644
--- a/ruoyi-ui/src/views/tool/gen/editTable.vue
+++ b/ruoyi-ui/src/views/tool/gen/editTable.vue
@@ -90,7 +90,8 @@
                 <el-option label="单选框" value="radio" />
                 <el-option label="复选框" value="checkbox" />
                 <el-option label="日期控件" value="datetime" />
-                <el-option label="上传控件" value="uploadImage" />
+                <el-option label="图片上传" value="imageUpload" />
+                <el-option label="文件上传" value="fileUpload" />
                 <el-option label="富文本控件" value="editor" />
               </el-select>
             </template>
@@ -112,7 +113,7 @@
         </el-table>
       </el-tab-pane>
       <el-tab-pane label="生成信息" name="genInfo">
-        <gen-info-form ref="genInfo" :info="info" :menus="menus"/>
+        <gen-info-form ref="genInfo" :info="info" :tables="tables" :menus="menus"/>
       </el-tab-pane>
     </el-tabs>
     <el-form label-width="100px">
@@ -143,6 +144,8 @@ export default {
       activeName: "cloum",
       // 表格的高度
       tableHeight: document.documentElement.scrollHeight - 245 + "px",
+      // 表信息
+      tables: [],
       // 表列信息
       cloumns: [],
       // 字典信息
@@ -160,6 +163,7 @@ export default {
       getGenTable(tableId).then(res => {
         this.cloumns = res.data.rows;
         this.info = res.data.info;
+        this.tables = res.data.tables;
       });
       /** 查询字典下拉列表 */
       getDictOptionselect().then(response => {
@@ -167,7 +171,7 @@ export default {
       });
       /** 查询菜单下拉列表 */
       getMenuTreeselect().then(response => {
-        this.menus = this.handleTree(response.data, "id");
+        this.menus = this.handleTree(response.data, "menuId");
       });
     }
   },
diff --git a/ruoyi-ui/src/views/tool/gen/genInfoForm.vue b/ruoyi-ui/src/views/tool/gen/genInfoForm.vue
index a77098c9e..926376c96 100644
--- a/ruoyi-ui/src/views/tool/gen/genInfoForm.vue
+++ b/ruoyi-ui/src/views/tool/gen/genInfoForm.vue
@@ -4,9 +4,10 @@
       <el-col :span="12">
         <el-form-item prop="tplCategory">
           <span slot="label">生成模板</span>
-          <el-select v-model="info.tplCategory">
+          <el-select v-model="info.tplCategory" @change="tplSelectChange">
             <el-option label="单表（增删改查）" value="crud" />
             <el-option label="树表（增删改查）" value="tree" />
+            <el-option label="主子表（增删改查）" value="sub" />
           </el-select>
         </el-form-item>
       </el-col>
@@ -126,8 +127,8 @@
           </span>
           <el-select v-model="info.treeCode" placeholder="请选择">
             <el-option
-              v-for="column in info.columns"
-              :key="column.columnName"
+              v-for="(column, index) in info.columns"
+              :key="index"
               :label="column.columnName + '：' + column.columnComment"
               :value="column.columnName"
             ></el-option>
@@ -144,8 +145,8 @@
           </span>
           <el-select v-model="info.treeParentCode" placeholder="请选择">
             <el-option
-              v-for="column in info.columns"
-              :key="column.columnName"
+              v-for="(column, index) in info.columns"
+              :key="index"
               :label="column.columnName + '：' + column.columnComment"
               :value="column.columnName"
             ></el-option>
@@ -162,8 +163,47 @@
           </span>
           <el-select v-model="info.treeName" placeholder="请选择">
             <el-option
-              v-for="column in info.columns"
-              :key="column.columnName"
+              v-for="(column, index) in info.columns"
+              :key="index"
+              :label="column.columnName + '：' + column.columnComment"
+              :value="column.columnName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row v-show="info.tplCategory == 'sub'">
+      <h4 class="form-header">关联信息</h4>
+      <el-col :span="12">
+        <el-form-item>
+          <span slot="label">
+            关联子表的表名
+            <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
+            <el-option
+              v-for="(table, index) in tables"
+              :key="index"
+              :label="table.tableName + '：' + table.tableComment"
+              :value="table.tableName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item>
+          <span slot="label">
+            子表关联的外键名
+            <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-select v-model="info.subTableFkName" placeholder="请选择">
+            <el-option
+              v-for="(column, index) in subColumns"
+              :key="index"
               :label="column.columnName + '：' + column.columnComment"
               :value="column.columnName"
             ></el-option>
@@ -185,6 +225,10 @@ export default {
       type: Object,
       default: null
     },
+    tables: {
+      type: Array,
+      default: null
+    },
     menus: {
       type: Array,
       default: []
@@ -192,6 +236,7 @@ export default {
   },
   data() {
     return {
+      subColumns: [],
       rules: {
         tplCategory: [
           { required: true, message: "请选择生成模板", trigger: "blur" }
@@ -212,6 +257,11 @@ export default {
     };
   },
   created() {},
+  watch: {
+    'info.subTableName': function(val) {
+      this.setSubTableColumns(val);
+    }
+  },
   methods: {
     /** 转换菜单数据结构 */
     normalizer(node) {
@@ -219,10 +269,31 @@ export default {
         delete node.children;
       }
       return {
-        id: node.id,
-        label: node.name,
+        id: node.menuId,
+        label: node.menuName,
         children: node.children
       };
+    },
+    /** 选择子表名触发 */
+    subSelectChange(value) {
+      this.info.subTableFkName = '';
+    },
+    /** 选择生成模板触发 */
+    tplSelectChange(value) {
+      if(value !== 'sub') {
+        this.info.subTableName = '';
+        this.info.subTableFkName = '';
+      }
+    },
+    /** 设置关联外键 */
+    setSubTableColumns(value) {
+      for (var item in this.tables) {
+        const name = this.tables[item].tableName;
+        if (value === name) {
+          this.subColumns = this.tables[item].columns;
+          break;
+        }
+      }
     }
   }
 };
diff --git a/ruoyi-ui/src/views/tool/gen/index.vue b/ruoyi-ui/src/views/tool/gen/index.vue
index a9145f8f5..2d62d475d 100644
--- a/ruoyi-ui/src/views/tool/gen/index.vue
+++ b/ruoyi-ui/src/views/tool/gen/index.vue
@@ -32,7 +32,7 @@
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
@@ -41,6 +41,7 @@
       <el-col :span="1.5">
         <el-button
           type="primary"
+          plain
           icon="el-icon-download"
           size="mini"
           @click="handleGenTable"
@@ -50,6 +51,7 @@
       <el-col :span="1.5">
         <el-button
           type="info"
+          plain
           icon="el-icon-upload"
           size="mini"
           @click="openImportTable"
@@ -59,6 +61,7 @@
       <el-col :span="1.5">
         <el-button
           type="success"
+          plain
           icon="el-icon-edit"
           size="mini"
           :disabled="single"
@@ -69,6 +72,7 @@
       <el-col :span="1.5">
         <el-button
           type="danger"
+          plain
           icon="el-icon-delete"
           size="mini"
           :disabled="multiple"
@@ -80,7 +84,7 @@
     </el-row>
 
     <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55"></el-table-column>
+      <el-table-column type="selection" align="center" width="55"></el-table-column>
       <el-table-column label="序号" type="index" width="50" align="center">
         <template slot-scope="scope">
           <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
@@ -165,7 +169,7 @@
           :name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
           :key="key"
         >
-        <highlightjs autodetect :code="value" />
+        <pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre>
         </el-tab-pane>
       </el-tabs>
     </el-dialog>
@@ -177,6 +181,15 @@
 import { listTable, previewTable, delTable, genCode, synchDb } from "@/api/tool/gen";
 import importTable from "./importTable";
 import { downLoadZip } from "@/utils/zipdownload";
+// 代码高亮插件
+import hljs from "highlight.js/lib/highlight";
+import "highlight.js/styles/github-gist.css";
+hljs.registerLanguage("java", require("highlight.js/lib/languages/java"));
+hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
+hljs.registerLanguage("html", require("highlight.js/lib/languages/xml"));
+hljs.registerLanguage("vue", require("highlight.js/lib/languages/xml"));
+hljs.registerLanguage("javascript", require("highlight.js/lib/languages/javascript"));
+hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));
 
 export default {
   name: "Gen",
@@ -290,6 +303,13 @@ export default {
         this.preview.open = true;
       });
     },
+    /** 高亮显示 */
+    highlightedCode(code, key) {
+      const vmName = key.substring(key.lastIndexOf("/") + 1, key.indexOf(".vm"));
+      var language = vmName.substring(vmName.indexOf(".") + 1, vmName.length);
+      const result = hljs.highlight(language, code || "", true);
+      return result.value || '&nbsp;';
+    },
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.tableId);
@@ -318,4 +338,4 @@ export default {
     }
   }
 };
-</script>
\ No newline at end of file
+</script>