From cbded8ce20fa480ab38cd236715a36c2e89bb9b1 Mon Sep 17 00:00:00 2001
From: dqjdda <201507802@qq.com>
Date: Tue, 26 Nov 2019 16:03:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BB=A3=E7=A0=81=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E5=99=A8=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                      |  2 +-
 src/components/JavaEdit/index.vue | 78 +++++++++++++++++++++++++++++++
 src/components/YamlEdit/index.vue |  2 +-
 src/main.js                       | 14 ++++--
 src/views/generator/index.vue     |  6 ++-
 src/views/generator/preview.vue   | 38 +++++++++++++++
 6 files changed, 134 insertions(+), 6 deletions(-)
 create mode 100644 src/components/JavaEdit/index.vue
 create mode 100644 src/views/generator/preview.vue

diff --git a/package.json b/package.json
index 49eb142..6ebca5b 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/JavaEdit/index.vue b/src/components/JavaEdit/index.vue
new file mode 100644
index 0000000..c703829
--- /dev/null
+++ b/src/components/JavaEdit/index.vue
@@ -0,0 +1,78 @@
+<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>
diff --git a/src/components/YamlEdit/index.vue b/src/components/YamlEdit/index.vue
index 8ad48fa..83778f4 100644
--- a/src/components/YamlEdit/index.vue
+++ b/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: {
diff --git a/src/main.js b/src/main.js
index 989a3d8..a0bd192 100644
--- a/src/main.js
+++ b/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 dict from './components/Dict'
-import permission from './components/Permission'
 import 'mavon-editor/dist/css/index.css'
+
+// 数据字典
+import dict from './components/Dict'
+
+// 权限指令
+import permission from './components/Permission'
 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'
 
diff --git a/src/views/generator/index.vue b/src/views/generator/index.vue
index 25b4008..0dbca20 100644
--- a/src/views/generator/index.vue
+++ b/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">
               编辑
diff --git a/src/views/generator/preview.vue b/src/views/generator/preview.vue
new file mode 100644
index 0000000..8ee6cac
--- /dev/null
+++ b/src/views/generator/preview.vue
@@ -0,0 +1,38 @@
+<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>