集成逻辑编辑器

src/App.vue

@@ -8,7 +8,7 @@ const initCodeStr = '{"template":{"lc_id":"root","__children":[{"div":{"class":"
 
 export default {
   components: {
-    vcc: () => import('./components/CodeEditor.vue')
+    vcc: () => import('./components-v2/VCC.vue')
   },
   data() {
     return {

src/components-v2/VCC.vue

@@ -23,6 +23,9 @@
     </div>
 
     <div class="copy">
+      <el-tooltip effect="dark" content="编辑JS逻辑" placement="top-start">
+        <div class="round-icon icon-js" alt="" @click="jsDialogVisible = true">JS</div>
+      </el-tooltip>
       <el-tooltip effect="dark" content="查看实时代码" placement="top-start">
         <img class="round-icon" :src="iconCode" alt="" @click="codeDialogVisible = true">
       </el-tooltip>
@@ -40,6 +43,7 @@
       <code-structure @save="onSaveAttr" @remove="onRemove" ref="codeStructure" :visible.sync="structureVisible"
         @codeRefresh="generateVueCode" @onLevelChange="onLevelChange">
       </code-structure>
+      <CodeEditor :codeDialogVisible.sync="jsDialogVisible"></CodeEditor>
     </div>
 
     <!-- 辅助定位线 -->
@@ -50,18 +54,12 @@
 </template>
 
 <script>
-import RawComponents from "../components/RawComponents";
 import { splitInit } from "../libs/split-init";
 import { MainPanelProvider } from "../libs/main-panel";
-import ToolsBar from "./ToolsBar";
 import { initContainerForLine } from "@/utils/lineHelper";
 
 const keymaster = require('keymaster');
 
-import AttributeInput from "../components/AttributeInput";
-import CodeStructure from "../components/CodeStructure";
-import Code from "../components/Code";
-
 import styleData from "../map/style.index.js";
 import methodData from "../map/method.index.js";
 import dataData from "../map/data.index.js";
@@ -76,11 +74,12 @@ export default {
   name: "vcc",
   props: ['initCodeEntity'],
   components: {
-    RawComponents,
-    ToolsBar,
-    AttributeInput,
-    CodeStructure,
-    "lc-code": Code,
+    RawComponents: () => import("../components/RawComponents"),
+    ToolsBar: () => import("./ToolsBar"),
+    AttributeInput: () => import("../components/AttributeInput"),
+    CodeStructure: () => import("../components/CodeStructure"),
+    "lc-code": () => import("../components/Code"),
+    CodeEditor: () => import('../components/JSCodeEditorDialog.vue')
   },
   data() {
     return {
@@ -88,6 +87,7 @@ export default {
       code: "",
       codeDialogVisible: false,
       structureVisible: false,
+      jsDialogVisible: false,
       iconCode: ("https://static.imonkey.xueersi.com/download/vcc-resource/icon/code-working-outline.svg"),
       iconClear: ("https://static.imonkey.xueersi.com/download/vcc-resource/icon/trash-outline.svg"),
 
@@ -209,7 +209,7 @@ export default {
       this.mainPanelProvider.saveAttribute(resultList, lc_id);
     },
 
-    onLevelChange(removeID, movePath){
+    onLevelChange(removeID, movePath) {
       this.mainPanelProvider.onLevelChange(removeID, movePath);
     },
 
@@ -299,9 +299,16 @@ export default {
   border-radius: 20px;
   padding: 10px;
   margin-left: 10px;
+  border: 0px;
   box-sizing: border-box;
 }
 
+.icon-js {
+  line-height: 20px;
+  color: white;
+  text-align: center;
+}
+
 .cross-flag {
   position: fixed;
   right: 0;
@@ -364,7 +371,6 @@ export default {
 </style>
 
 <style lang="scss">
-
 .icon-s {
   font-size: 14px;
   color: #000;

src/components/CodeEditor.vue

@@ -138,6 +138,10 @@ export default {
     onCmFocus(codemirror) {
     },
     onCmBlur(codemirror) {
+    },
+
+    getEditorCode(){
+      return this.code;
     }
   }
 }
@@ -146,7 +150,6 @@ export default {
 <style lang="scss" scoped>
 .codemirror,
 .pre {
-  width: 50%;
   height: 100%;
   margin: 0;
   overflow: auto;

src/components/JSCodeEditorDialog.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-dialog title="JS逻辑编辑" :visible.sync="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose"
+    :center=true>
+    <CodeEditor ref="codeEditor"></CodeEditor>
+
+    <div style="text-align:center;padding: 10px;">
+      <el-button type="primary" @click="onSave">确认修改</el-button>
+      <div style="color: #f5222d; font-size:12px; margin-top:5px;">Tips: 确认修改之后将会影响最终生成的代码逻辑</div>
+    </div>
+  </el-dialog>
+
+</template>
+
+<script>
+import CodeEditor from './CodeEditor.vue'
+
+export default {
+  props: ['codeDialogVisible'],
+  components: {
+    CodeEditor
+  },
+
+  data() {
+    return {
+    };
+  },
+  beforeCreate() { },
+  created() { },
+  beforeMount() { },
+  mounted() { },
+  beforeUpdate() { },
+  updated() { },
+  destoryed() { },
+  methods: {
+    // 在此自动生成
+    request() {
+      // 网络请求，可选
+    },
+    handleClose() {
+      this.$emit("update:codeDialogVisible", false);
+    },
+    onSave() {
+      const code = this.$refs.codeEditor.getEditorCode();
+      debugger
+    }
+  },
+  watch: {
+  },
+  computed: {
+  },
+  fillter: {},
+};
+</script>
+
+<style scoped>
+/*  在此自动生成 */
+
+::v-deep .el-dialog__body {
+  padding: 0 30px !important;
+}
+</style>