flowable-engine-web/package.json

@@ -10,7 +10,6 @@
   "dependencies": {
     "axios": "^0.20.0",
     "clipboard": "^2.0.6",
-    "codemirror": "^6.0.0",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.8",
     "less": "^3.12.2",
@@ -21,6 +20,7 @@
     "signature_pad": "^3.0.0-beta.4",
     "trim-canvas": "^0.1.2",
     "vue": "^2.6.11",
+    "vue-codemirror": "^4.0.6",
     "vue-esign": "^1.1.4",
     "vue-router": "^3.4.3",
     "vuedraggable": "^2.24.1",
@@ -36,7 +36,6 @@
     "babel-preset-env": "^1.7.0",
     "style-resources-loader": "^1.3.2",
     "vue-cli-plugin-style-resources-loader": "^0.1.4",
-    "vue-codemirror": "^6.0.0",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

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

@@ -0,0 +1,94 @@
+<template>
+  <div>
+12222313
+    <codemirror v-model="item" :options="cmOptions" class="code" @ready="onCmReady3" @focus="onCmFocus"
+                    @input="onCmCodeChange" ref="myCmGenerate"></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/theme/idea.css'
+// 引入语言模式 可以从 codemirror/mode/ 下引入多个
+import "vue-codemirror/node_modules/codemirror/mode/javascript/javascript"; // 代码高亮必须引入
+
+export default {
+  components:{codemirror},
+  data() {
+    return {
+      item: '\n' +
+          '    onCmFocus(instance, event) {\n' +
+          '      console.log(instance)\n' +
+          '      console.log(event)\n' +
+          '    },',
+      cmOptions:{
+        tabSize: 4, // tab
+        indentUnit: 4,
+        attach:{},
+        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: false
+        },
+        // 快捷键 可提供三种模式 sublime、emacs、vim
+        keyMap: 'sublime',
+        matchBrackets: true,
+        showCursorWhenSelecting: false,
+        // scrollbarStyle:null,
+        // readOnly:true,  //是否只读
+        theme: 'material', // 主题 material
+        extraKeys: { 'Ctrl': 'autocomplete' }, // 可以用于为编辑器指定额外的键绑定，以及keyMap定义的键绑定
+        lastLineBefore:0
+      }
+    }
+  },
+  created() {
+    console.log("rererer")
+  },
+  methods: {
+    onCmReady3() {
+      // this.$refs.myCmGenerate.codemirror.setSize('400px', '400px')
+    },
+    onCmFocus(instance, event) {
+      console.log(instance)
+      console.log(event)
+    },
+    onCmCodeChange(instance, obj) {
+      console.log(instance)
+      console.log(obj)
+    }
+  }
+}
+
+export class Code {
+}
+</script>
+<style>
+.CodeMirror-scroll {
+  overflow: scroll !important;
+  margin-bottom: 0;
+  margin-right: 0;
+  padding-bottom: 0;
+  height: 100%;
+  outline: none;
+  position: relative;
+  border: 1px solid #dddddd;
+}
+</style>
+<style lang="less" scoped>
+.code-mirror {
+  font-size: 13px;
+  line-height: 150%;
+  text-align: left;
+}
+</style>

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

@@ -34,24 +34,74 @@
         </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 Test from "@/components/common/Test";
 import axios from "axios";
 
+import Code from "./Code"
+
+
+
 export default {
   name: "Index",
-  components: {Test},
+  components: {Code},
   data() {
     return {
+      cmCode:"",
+      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: false
+        },
+        // 快捷键 可提供三种模式 sublime、emacs、vim
+        keyMap: 'sublime',
+        matchBrackets: true,
+        showCursorWhenSelecting: false,
+        // scrollbarStyle:null,
+        // readOnly:true,  //是否只读
+        theme: 'material', // 主题 material
+        extraKeys: { 'Ctrl': 'autocomplete' }, // 可以用于为编辑器指定额外的键绑定，以及keyMap定义的键绑定
+        lastLineBefore:0
+      },
+      cmOptionss:{
+        value:'',//编辑器的起始值。可以是字符串，也可以是文档对象。
+        mode:"text/x-hive",//第一个将模式名称映射到它们的构造函数，第二个将MIME类型映射到模式规范。
+        theme: "liquibyte",//编辑器样式的主题
+        indentWithTabs: true,//在缩进时，是否tabSize 应该用N个制表符替换前N *个空格。默认值为false。
+        smartIndent: true,//是否使用模式提供的上下文相关缩进（或者只是缩进与之前的行相同）。默认为true。
+        lineNumbers: true,//是否在编辑器左侧显示行号。
+        matchBrackets : true,//括号匹配
+        autofocus: true,//可用于使CodeMirror将焦点集中在初始化上
+        extraKeys: {"Ctrl-Space": "autocomplete"},//按键配置
+        hintOptions: {tables: {
+            users: ["name", "score", "birthDate"],
+            countries: ["name", "population", "size"]
+          }}
+      },
       token: localStorage.getItem("token"),
       username: null,
       select: [],
@@ -77,7 +127,6 @@ export default {
     }
   },
   mounted() {
-    console.log(this.select)
     let user = sessionStorage.getItem("user")
     if (user !== null && user !== '') {
       this.loginUser = JSON.parse(user)
@@ -85,13 +134,7 @@ export default {
     }
   },
   methods: {
-
-
     getToken() {
-      // let item = localStorage.getItem("token");
-      // if (item != null) {
-      //     return
-      // }
       axios.post(
           // "http://security-react.mytwins.top/auth/login",
           // getBaseUrl()+"/auth/login",

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

@@ -81,7 +81,7 @@
           <div v-if="config.http.handlerByScript">
             <div>
               <span>请求成功😀：</span>
-              <el-input type="textarea" v-model="config.http.success" :rows="3"></el-input>
+              <vue-codemirror :options="cmOptions"  v-model="config.http.success"/>
             </div>
             <div>
               <span>请求失败😥：</span>
@@ -108,15 +108,26 @@
 </template>
 
 <script>
-//import { codemirror } from 'vue-codemirror'
+import { VueCodemirror } from 'vue-codemirror'
 // 引入主题 可以从 codemirror/theme/ 下引入多个
-//import 'codemirror/theme/idea.css'
+import "vue-codemirror/node_modules/codemirror/lib/codemirror.css";
+import 'vue-codemirror/node_modules/codemirror/theme/idea.css'
 // 引入语言模式 可以从 codemirror/mode/ 下引入多个
-//import "codemirror/mode/javascript/javascript.js"
+import "vue-codemirror/node_modules/codemirror/mode/javascript/javascript"; // 代码高亮必须引入
+
+
+// import { VueCodemirror } from 'vue-codemirror';
+// import 'vue-codemirror/node_modules/codemirror/theme/liquibyte.css';//导入选中的theme主题,与初始化theme配置一致
+// import 'vue-codemirror/node_modules/codemirror/addon/hint/show-hint.css';//导入自动提示核心样式
+//
+// import 'vue-codemirror/node_modules/codemirror/mode/sql/sql.js';//导入使用的语言语法定义文件，初始化mode配置一致
+// import 'vue-codemirror/node_modules/codemirror/addon/edit/matchbrackets.js';
+// import 'vue-codemirror/node_modules/codemirror/addon/hint/show-hint.js';//导入自动提示核心文件
+// import 'vue-codemirror/node_modules/codemirror/addon/hint/sql-hint.js';//导入指定语言的提示文件
 
 export default {
   name: "TriggerNodeConfig",
-  components: {/*codemirror*/},
+  components: {VueCodemirror},
   props:{
     config:{
       type: Object,