新增代码生成器预览功能

package.json

@@ -36,7 +36,7 @@
     "@riophae/vue-treeselect": "0.1.0",
     "axios": "0.18.1",
     "clipboard": "2.0.4",
-    "codemirror": "^5.38.0",
+    "codemirror": "^5.49.2",
     "connect": "3.6.6",
     "echarts": "4.2.1",
     "echarts-gl": "^1.1.1",

src/components/JavaEdit/index.vue

+<template>
+  <div class="json-editor">
+    <textarea ref="textarea" />
+  </div>
+</template>
+
+<script>
+import CodeMirror from 'codemirror'
+import 'codemirror/lib/codemirror.css'
+// 替换主题这里需修改名称
+import 'codemirror/theme/idea.css'
+import 'codemirror/mode/clike/clike'
+export default {
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+    height: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      editor: false
+    }
+  },
+  watch: {
+    value(value) {
+      const editorValue = this.editor.getValue()
+      if (value !== editorValue) {
+        this.editor.setValue(this.value)
+      }
+    },
+    height(value) {
+      this.editor.setSize('auto', this.height)
+    }
+  },
+  mounted() {
+    this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
+      mode: 'text/x-java',
+      lineNumbers: true,
+      lint: true,
+      lineWrapping: true,
+      tabSize: 2,
+      cursorHeight: 0.9,
+      // 替换主题这里需修改名称
+      theme: 'idea',
+      readOnly: true
+    })
+    this.editor.setSize('auto', this.height)
+    this.editor.setValue(this.value)
+  },
+  methods: {
+    getValue() {
+      return this.editor.getValue()
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .json-editor{
+    height: 100%;
+    margin-bottom: 10px;
+  }
+  .json-editor >>> .CodeMirror {
+    font-size: 14px;
+    overflow-y:auto;
+    font-weight:normal
+  }
+  .json-editor >>> .CodeMirror-scroll{
+  }
+  .json-editor >>> .cm-s-rubyblue span.cm-string {
+    color: #F08047;
+  }
+</style>

src/components/YamlEdit/index.vue

@@ -9,7 +9,7 @@ import CodeMirror from 'codemirror'
 import 'codemirror/lib/codemirror.css'
 // 替换主题这里需修改名称
 import 'codemirror/theme/idea.css'
-require('codemirror/mode/yaml/yaml.js')
+import 'codemirror/mode/yaml/yaml'
 export default {
   props: {
     value: {

src/main.js

@@ -5,12 +5,20 @@ import Cookies from 'js-cookie'
 import 'normalize.css/normalize.css'
 
 import Element from 'element-ui'
+//
 import mavonEditor from 'mavon-editor'
+import 'mavon-editor/dist/css/index.css'
+
+// 数据字典
 import dict from './components/Dict'
+
+// 权限指令
 import permission from './components/Permission'
-import 'mavon-editor/dist/css/index.css'
 import './assets/styles/element-variables.scss'
-import './assets/styles/index.scss' // global css
+// global css
+import './assets/styles/index.scss'
+
+// 代码高亮
 import VueHighlightJS from 'vue-highlightjs'
 import 'highlight.js/styles/atom-one-dark.css'
 

src/views/generator/index.vue

@@ -23,7 +23,11 @@
       </el-table-column>
       <el-table-column label="操作" width="140px" align="center" fixed="right">
         <template slot-scope="scope">
-          <el-button size="mini" style="margin-right: 2px" type="text">预览</el-button>
+          <el-button size="mini" style="margin-right: 2px" type="text">
+            <router-link :to="'/sys-tools/generator/preview/' + scope.row.tableName">
+              预览
+            </router-link>
+          </el-button>
           <el-button size="mini" style="margin-left: -1px;margin-right: 2px" type="text">
             <router-link :to="'/sys-tools/generator/config/' + scope.row.tableName">
               编辑

src/views/generator/preview.vue

+<template>
+  <el-tabs v-if="!error" v-model="activeName" type="card">
+    <el-tab-pane v-for="item in data" :key="item.name" :lazy="true" :label="item.name" :name="item.name">
+      <Java :value="item.content" :height="height" />
+    </el-tab-pane>
+  </el-tabs>
+  <div v-else class="app-container">
+    <el-alert
+      :title="error"
+      type="error"
+    />
+  </div>
+</template>
+
+<script>
+import Java from '@/components/JavaEdit/index'
+import { generator } from '@/api/generator/generator'
+export default {
+  name: 'Preview',
+  components: { Java },
+  data() {
+    return {
+      data: null, error: null, height: '', activeName: 'Entity'
+    }
+  },
+  created() {
+    this.height = document.documentElement.clientHeight - 180 + 'px'
+    const tableName = this.$route.params.tableName
+    this.$nextTick(() => {
+      generator(tableName, 1).then(data => {
+        this.data = data
+      }).catch(err => {
+        this.error = err.response.data.message
+      })
+    })
+  }
+}
+</script>