2.0.0项目初始化

datax-ui/src/components/SqlEditor/index.vue

@@ -10,19 +10,19 @@
 </template>
 
 <script>
-import "codemirror/lib/codemirror.css"
-import "codemirror/theme/ambiance.css"
-import "codemirror/addon/hint/show-hint.css"
-let CodeMirror = require("codemirror/lib/codemirror")
-require("codemirror/addon/edit/matchbrackets")
-require("codemirror/addon/selection/active-line")
-require("codemirror/mode/sql/sql")
-require("codemirror/addon/hint/show-hint")
-require("codemirror/addon/hint/sql-hint")
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/blackboard.css'
+import 'codemirror/addon/hint/show-hint.css'
+let CodeMirror = require('codemirror/lib/codemirror')
+require('codemirror/addon/edit/matchbrackets')
+require('codemirror/addon/selection/active-line')
+require('codemirror/mode/sql/sql')
+require('codemirror/addon/hint/show-hint')
+require('codemirror/addon/hint/sql-hint')
 
 export default {
   name: 'SqlEditor',
-  data() {
+  data () {
     return {
       editor: null
     }
@@ -55,12 +55,12 @@ export default {
     }
   },
 
-  mounted(){
+  mounted () {
     let mime = 'text/x-mariadb'
-    //let theme = 'ambiance'//设置主题，不设置的会使用默认主题
+    let theme = 'blackboard'// 设置主题，不设置的会使用默认主题
     this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
       value: this.value,
-      mode: mime,//选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
+      mode: mime, // 选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
       indentWithTabs: true,
       smartIndent: true,
       lineNumbers: true,
@@ -68,19 +68,19 @@ export default {
       cursorHeight: 1,
       lineWrapping: true,
       readOnly: this.readOnly,
-      //theme: theme,
-      // autofocus: true,
-      extraKeys: {'Ctrl': 'autocomplete'},//自定义快捷键
-      hintOptions: {//自定义提示选项
+      theme: theme,
+      autofocus: true,
+      extraKeys: { 'Ctrl': 'autocomplete' }, // 自定义快捷键
+      hintOptions: {// 自定义提示选项
         // 当匹配只有一项的时候是否自动补全
-        completeSingle: false,
+        completeSingle: false
         // tables: {
         //     users: ['name', 'score', 'birthDate'],
         //     countries: ['name', 'population', 'size']
         // }
       }
     })
-    //代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死
+    // 代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死
     this.editor.on('inputRead', () => {
       this.editor.showHint()
     })
@@ -93,7 +93,6 @@ export default {
         } else {
           this.editor.setValue(this.value)
         }
-
       }
     }
   }
@@ -102,10 +101,10 @@ export default {
 
 <style lang="scss" scoped>
 .CodeMirror {
-  color: black;
-  direction: ltr;
-  line-height: 22px;
+  border: 1px solid black;
+  font-size: 13px;
 }
+
 // 这句为了解决匹配框显示有问题而加
 .CodeMirror-hints{
   z-index: 9999 !important;

datax-ui/src/views/factory/dataset/DataSetAdd.vue

@@ -24,12 +24,15 @@
           <el-input v-model="form.setName" placeholder="请输入数据集名称" />
         </el-form-item>
         <el-form-item label="数据集sql" prop="setSql">
-          <sql-editor
-            ref="sqleditor"
-            :value="form.setSql"
-            @changeTextarea="changeTextarea($event)"
-            style="height: 300px;"
-          ></sql-editor>
+            <sql-editor
+              ref="sqleditor"
+              :value="form.setSql"
+              @changeTextarea="changeTextarea($event)"
+              style="height: 300px;"
+            ></sql-editor>
+        </el-form-item>
+        <el-form-item>
+          <el-button size="mini" type="primary" @click="formaterSql">Sql格式化</el-button>
         </el-form-item>
         <el-form-item label="状态" prop="status">
           <el-radio-group v-model="form.status">
@@ -120,10 +123,10 @@ export default {
       })
     },
     // 绑定编辑器value值的变化
-    changeModalTextarea  (val) {
+    changeTextarea (val) {
       this.$set(this.form, 'setSql', val)
     },
-    formaterSql (val) {
+    formaterSql () {
       let sqleditor = this.$refs.sqleditor
       sqleditor.editor.setValue(sqlFormatter.format(sqleditor.editor.getValue()))
     },

datax-ui/src/views/factory/dataset/DataSetDetail.vue

@@ -26,7 +26,7 @@
           <sql-editor
             ref="sqleditor"
             :value="form.setSql"
-            :readOnly="nocursor"
+            :readOnly="true"
             style="height: 300px;"
           ></sql-editor>
         </el-form-item>
@@ -110,6 +110,7 @@ export default {
       getDataSet(id).then(response => {
         if (response.success) {
           this.form = response.data
+          this.$refs.sqleditor.editor.setValue(this.form.setSql)
         }
       })
     }

datax-ui/src/views/factory/dataset/DataSetEdit.vue

@@ -31,6 +31,9 @@
             style="height: 300px;"
           ></sql-editor>
         </el-form-item>
+        <el-form-item>
+          <el-button size="mini" type="primary" @click="formaterSql">Sql格式化</el-button>
+        </el-form-item>
         <el-form-item label="状态" prop="status">
           <el-radio-group v-model="form.status">
             <el-radio
@@ -124,11 +127,12 @@ export default {
       getDataSet(id).then(response => {
         if (response.success) {
           this.form = response.data
+          this.$refs.sqleditor.editor.setValue(this.form.setSql)
         }
       })
     },
     // 绑定编辑器value值的变化
-    changeModalTextarea  (val) {
+    changeTextarea (val) {
       this.$set(this.form, 'setSql', val)
     },
     formaterSql (val) {