flowable-engine-web/src/components/common/CodeEdit.vue

@@ -0,0 +1,96 @@
+<template>
+  <codemirror ref="codeEdit"
+              :options="cmOptions"
+              v-model="_value"
+              @input="inputChange"
+              class="code"/>
+</template>
+
+<script>
+import { codemirror } from 'vue-codemirror'
+// 引入主题 可以从 codemirror/theme/ 下引入多个
+import "vue-codemirror/node_modules/codemirror/lib/codemirror.css";
+import 'vue-codemirror/node_modules/codemirror/theme/idea.css'
+import 'vue-codemirror/node_modules/codemirror/theme/duotone-dark.css'
+// 引入语言模式 可以从 codemirror/mode/ 下引入多个
+import "vue-codemirror/node_modules/codemirror/mode/javascript/javascript"; // 代码高亮必须引入
+import "vue-codemirror/node_modules/codemirror/mode/sql/sql"; // 代码高亮必须引入
+//代码补全
+import 'vue-codemirror/node_modules/codemirror/addon/hint/javascript-hint.js';
+// import 'vue-codemirror/node_modules/codemirror/addon/hint/show-hint.css';
+import 'vue-codemirror/node_modules/codemirror/addon/hint/show-hint.js';
+
+// 代码段折叠功能
+import 'vue-codemirror/node_modules/codemirror/addon/fold/foldcode'
+import 'vue-codemirror/node_modules/codemirror/addon/fold/foldgutter'
+import 'vue-codemirror/node_modules/codemirror/addon/fold/foldgutter.css'
+
+import 'vue-codemirror/node_modules/codemirror/addon/fold/brace-fold'
+import 'vue-codemirror/node_modules/codemirror/addon/fold/comment-fold'
+import 'vue-codemirror/node_modules/codemirror/addon/fold/xml-fold.js';
+import 'vue-codemirror/node_modules/codemirror/addon/fold/indent-fold.js';
+import 'vue-codemirror/node_modules/codemirror/addon/fold/markdown-fold.js';
+import 'vue-codemirror/node_modules/codemirror/addon/fold/comment-fold.js';
+
+export default {
+  name: "CodeEdit",
+  components:{codemirror},
+  props:{
+    value:{
+      type:String,
+      default:"",
+    }
+  },
+  data(){
+    return {
+      code:"",
+      cmOptions:{
+        tabSize: 4, // tab
+        indentUnit: 2,
+        mode: 'javascript', // 模式
+        theme: 'idea', // 主题
+        lineNumbers: true, // 是否显示行号
+        lineWrapping: true,//是否自动换行
+        styleActiveLine: true, // 高亮选中行
+        highlightSelectionMatches: { showToken: /w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
+        line: true,
+        matchBrackets: true,
+        // 自动括号匹配功能
+        showCursorWhenSelecting: false,
+        hintOptions: {
+          // 当匹配只有一项的时候是否自动补全
+          completeSingle: false
+        },
+        foldGutter: true, // 支持折叠
+        extraKeys: { 'Ctrl': 'autocomplete' }, // 可以用于为编辑器指定额外的键绑定，以及keyMap定义的键绑定
+        gutters: ['CodeMirror-linenumbers', "lock", "warn"],
+      },
+    }
+  },
+  computed:{
+    _value :{
+      get(){
+        return this.value;
+      },
+      set(val){
+        this.value = val;
+      }
+    }
+  },
+  mounted() {
+    this.$refs.codeEdit.codemirror.on("inputRead",(cm)=>{
+      cm.showHint();
+    })
+    this.$refs.codeEdit.codemirror.on("change", (cm) => {
+      this._value = cm.getValue()
+      this.$emit("input",this._value)
+    })
+  },
+  methods:{
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

flowable-engine-web/src/views/Code.vue

@@ -1,77 +0,0 @@
-<template>
-  <div>
-12222313
-    <codemirror :value="item" :options="cmOptions" class="code" ref="myCmGenerate"
-                @input="changes"></codemirror>
-  </div>
-</template>
-
-<script>
-import {codemirror} from 'vue-codemirror'
-// 引入主题 可以从 codemirror/theme/ 下引入多个
-import "vue-codemirror/node_modules/codemirror/lib/codemirror.css";
-import "vue-codemirror/node_modules/codemirror/lib/codemirror.js";
-import 'vue-codemirror/node_modules/codemirror/theme/idea.css'
-import 'vue-codemirror/node_modules/codemirror/theme/oceanic-next.css'
-// 引入语言模式 可以从 codemirror/mode/ 下引入多个
-import "vue-codemirror/node_modules/codemirror/mode/javascript/javascript"; // 代码高亮必须引入
-//代码补全
-import 'vue-codemirror/node_modules/codemirror/addon/hint/javascript-hint.js';
-export default {
-  components:{codemirror},
-  data() {
-    return {
-      item: '\n' +
-          '    onCmFocus(instance, event) {\n' +
-          '      console.log(instance)\n' +
-          '      console.log(event)\n' +
-          '    },',
-      foldContent : "46546555656545",
-      cmOptions:{
-        mode: 'text/html', // 模式
-        theme: 'idea', // 主题
-        lineNumbers: true, // 是否显示行号
-        // lineWrapping: true,
-        // styleActiveLine: true, // 高亮选中行
-        // highlightSelectionMatches: { showToken: /w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
-        // line: true,
-        // mode: 'text/x-java',
-        // gutters: ['CodeMirror-lint-markers'],
-        // theme: 'codemirror',
-        // keyMap: 'sublime',
-        // matchBrackets: true,
-        // showCursorWhenSelecting: false,
-        // hintOptions: {
-        //   // 当匹配只有一项的时候是否自动补全
-        //   completeSingle: true
-        // },
-        // foldGutter: true, // 支持折叠
-        extraKeys: { 'Ctrl': 'autocomplete' }, // 可以用于为编辑器指定额外的键绑定，以及keyMap定义的键绑定
-        gutters: ['CodeMirror-lint-javascript', 'CodeMirror-foldgutter']
-      }
-    }
-  },
-  created() {
-    console.log("rererer")
-  },
-  methods: {
-    onCmFocus(instance, event) {
-      console.log(instance)
-      console.log(event)
-    },
-    onCmCodeChange(instance, obj) {
-      console.log(instance)
-      console.log(obj)
-    },
-    changes(){
-
-    }
-  }
-}
-
-</script>
-<style lang="less" scoped>
-.code {
-  text-align: left;
-}
-</style>

flowable-engine-web/src/views/Index.vue

@@ -34,30 +34,14 @@
         </div>
       </div>
     </div>
-    <div>测试
-<!--      <vue-codemirror ref="myCmGenerate" class="code" :value="cmCode" :options="cmOptions" @ready="onCmReady3"/>-->
-     <Code/>
-    </div>
-
-
-    <!--    <test type="user" ref="orgPicker" :v-model="select" :value="select" @dengjie="dengjie"-->
-    <!--                @ok="selected"></test>-->
-
-
-
   </div>
 </template>
 
 <script>
 import axios from "axios";
 
-import Code from "./Code"
-
-
-
 export default {
   name: "Index",
-  components: {Code},
   data() {
     return {
       cmCode:"",

flowable-engine-web/src/views/common/process/config/TriggerNodeConfig.vue

@@ -62,7 +62,7 @@
 
           </div>
         </el-form-item>
-        <el-form-item label="请求结果处理" prop="text">
+<!--        <el-form-item label="请求结果处理" prop="text">-->
           <div slot="label">
             <span>请求结果处理</span>
             <span style="margin-left: 20px">自定义脚本: </span>
@@ -81,14 +81,14 @@
           <div v-if="config.http.handlerByScript">
             <div>
               <span>请求成功😀：</span>
-              <codemirror :options="cmOptions"  v-model="config.http.success"/>
+              <code-edit v-model="config.http.success"/>
             </div>
             <div>
               <span>请求失败😥：</span>
-              <el-input type="textarea" v-model="config.http.fail" :rows="3"></el-input>
+              <code-edit v-model="config.http.fail"/>
             </div>
           </div>
-        </el-form-item>
+<!--        </el-form-item>-->
       </div>
       <div v-else-if="config.type === 'EMAIL'">
         <el-form-item label="邮件主题" prop="text">
@@ -108,18 +108,10 @@
 </template>
 
 <script>
-import { codemirror } from 'vue-codemirror'
+import CodeEdit from "@/components/common/CodeEdit";
-// 引入主题 可以从 codemirror/theme/ 下引入多个
-import "vue-codemirror/node_modules/codemirror/lib/codemirror.css";
-import 'vue-codemirror/node_modules/codemirror/theme/idea.css'
-// 引入语言模式 可以从 codemirror/mode/ 下引入多个
-import "vue-codemirror/node_modules/codemirror/mode/javascript/javascript"; // 代码高亮必须引入
-
-
-
 export default {
   name: "TriggerNodeConfig",
-  components: {VueCodemirror},
+  components: {CodeEdit},
   props:{
     config:{
       type: Object,
@@ -135,32 +127,6 @@ export default {
   },
   data() {
     return {
-      cmOptions:{
-        tabSize: 4, // tab
-        indentUnit: 4,
-        styleActiveLine: true, // 高亮选中行
-        lineNumbers: true, // 显示行号
-        styleSelectedText: true,
-        line: true,
-        foldGutter: true, // 块槽
-        gutters: ['CodeMirror-linenumbers', "lock", "warn"],
-        highlightSelectionMatches: { showToken: /w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
-        mode:'javascript',
-        // hint.js options
-        hintOptions: {
-          // 当匹配只有一项的时候是否自动补全
-          completeSingle: true
-        },
-        // 快捷键 可提供三种模式 sublime、emacs、vim
-        keyMap: 'sublime',
-        matchBrackets: true,
-        showCursorWhenSelecting: false,
-        // scrollbarStyle:null,
-        // readOnly:true,  //是否只读
-        theme: 'material', // 主题 material
-        extraKeys: { 'Ctrl': 'autocomplete' }, // 可以用于为编辑器指定额外的键绑定，以及keyMap定义的键绑定
-        lastLineBefore:0
-      }
     }
   },
   methods: {
@@ -175,12 +141,6 @@ export default {
     delItem(items, index){
       items.splice(index, 1)
     },
-    onCmCodeChange(){
-
-    },
-    onCmReady(){
-
-    }
   }
 }
 </script>