From 10d53105fc9ba195328a1aa2ddb5bc7ed98a2a7b Mon Sep 17 00:00:00 2001
From: shangbin <shangbin1@tal.com>
Date: Thu, 9 Sep 2021 19:07:29 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9B=86=E6=88=90=E9=80=BB=E8=BE=91=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                           |  2 +-
 src/components-v2/VCC.vue             | 32 ++++++++------
 src/components/CodeEditor.vue         |  5 ++-
 src/components/JSCodeEditorDialog.vue | 61 +++++++++++++++++++++++++++
 4 files changed, 85 insertions(+), 15 deletions(-)
 create mode 100644 src/components/JSCodeEditorDialog.vue

diff --git a/src/App.vue b/src/App.vue
index be5a6cd..9aeb031 100644
--- a/src/App.vue
+++ b/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 {
diff --git a/src/components-v2/VCC.vue b/src/components-v2/VCC.vue
index 1c8de98..38bde22 100644
--- a/src/components-v2/VCC.vue
+++ b/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;
diff --git a/src/components/CodeEditor.vue b/src/components/CodeEditor.vue
index 9b9eb08..110bcd9 100644
--- a/src/components/CodeEditor.vue
+++ b/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;
diff --git a/src/components/JSCodeEditorDialog.vue b/src/components/JSCodeEditorDialog.vue
new file mode 100644
index 0000000..1ad322f
--- /dev/null
+++ b/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>
\ No newline at end of file