完成对LCG逻辑初始化的支持

Author: shangbin

src/components-v2/ToolsBar.vue

@@ -16,7 +16,7 @@
       </el-col>
       <el-col :span="3">
         <div style="display:inline-block;">
-          <el-link type="primary" @click="onEditModeChange">{{editMode ? 'View' : 'Edit'}}
+          <el-link :type="editMode? 'primary': 'danger'" @click="onEditModeChange">{{editMode ? 'View' : 'Edit'}}
             Mode</el-link>
         </div>
       </el-col>

src/components-v2/VCC.vue

@@ -123,7 +123,7 @@ export default {
     },
     initCodeEntity(newVal) {
       if (newVal.JSCode) {
-        this.mainPanelProvider.saveJSCode(this.convertLogicCode(newVal.JSCode));
+        this.mainPanelProvider.saveJSCodeOnly(this.convertLogicCode(newVal.JSCode));
       }
 
       if (newVal.codeStructure) {
@@ -141,6 +141,7 @@ export default {
   mounted() {
     Promise.all([import("../map/load")])
       .then(res => {
+        this.$emit("onLoadFinish");
         this.init();
       });
     splitInit();
@@ -155,7 +156,9 @@ export default {
           const JSCodeInfo = eval(`(function(){return ${JSCode.replace(/\s+/g, "")}})()`);
           // 保留JS代码
           this.JSCode = JSCode;
-          this.$refs.codeEditor.updateLogicCode(JSCode);
+          if (this.$refs.codeEditor) {
+            this.$refs.codeEditor.updateLogicCode(JSCode);
+          }
           return JSCodeInfo;
         } catch (e) { 
           console.warn(`外部逻辑代码解析出错，解析的逻辑代码为: ${JSCode}, Error: ${e}`);

src/components/JSCodeEditorDialog.vue

@@ -16,6 +16,9 @@
 import dedent from 'dedent'
 import CodeEditor from './CodeEditor.vue'
 
+import prettier from "prettier/standalone";
+import babel from "prettier/parser-babel";
+
 export default {
   props: ['codeDialogVisible'],
   components: {
@@ -85,7 +88,10 @@ export default {
   methods: {
     updateLogicCode(newCode) {
       if (newCode) {
-        this.code = newCode;
+        const pre = "const a = ";
+        this.code = prettier.format(pre + newCode, {
+          plugins: [babel],
+        }).replace(pre, "");
       }
     },
     handleClose() {

src/libs/bundle-core-esm.js

@@ -1,7 +1,7 @@
 //该文件会遍历Object，获取关键的class,事件,data, 最终拼装为一个完整的SFC文件
 
 import stringifyObject from 'stringify-object';
-import _ from 'lodash';
+import { merge, cloneDeep } from 'lodash';
 import prettier from 'prettier/standalone.js';
 import parserBabel from 'prettier/parser-babel.js';
 
@@ -424,7 +424,6 @@ const scriptTemplate = `{
     fillter: {},
   };`;
 
-const { merge, cloneDeep } = _;
 
 const rawAdd = Set.prototype.add;
 Set.prototype.add = function (value) {

src/libs/code-generator-factory.js

@@ -34,7 +34,7 @@ export function createNewCodeGenerator() {
                     const kav = methodItem.split(":");
                     const key = kav[0];
                     // 这里获取的是原始data数据
-                    if (window.methodSourceMap[key]) {
+                    if (window.methodSourceMap && window.methodSourceMap[key]) {
                         return `${key}: ${window.methodSourceMap[key]}`;
                     } else {
                         return methodItem;

src/libs/element-ui/fonts/element-icons.ttf

@@ -130,7 +130,7 @@ export class MainPanelProvider {
 
     saveJSCode(code) {
         this.saveJSCodeOnly(code);
-        this.codeGenerator.setExternalJS(code);
+        this.codeGenerator && this.codeGenerator.setExternalJS(code);
         this.reRender();
     }
 
@@ -287,7 +287,12 @@ export class MainPanelProvider {
     enableEditMode() {
         const renderControlPanel = this.getControlPanelRoot();
         // 加一个延迟的作用是：给el-table这种绘制需要时间的组件留出充足的时间，否则会造成el-table渲染不到页面上
-        setTimeout(() => {
+        
+        if (this.enableDelayTask) {
+            clearTimeout(this.enableDelayTask);
+        }
+        
+        this.enableDelayTask = setTimeout(() => {
             // 这种方式可以禁用原节点所有的事件
             const elClone = renderControlPanel.cloneNode(true);
             renderControlPanel.parentNode.replaceChild(elClone, renderControlPanel);

src/libs/element-ui/fonts/element-icons.woff

@@ -1,13 +1,11 @@
 import Vue from "vue";
 import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
-
-import AntdUI from "ant-design-vue";
 import "ant-design-vue/dist/antd.css";
+
 import APP from "./App.vue";
 
 Vue.use(ElementUI);
-Vue.use(AntdUI);
 
 // 内部需要同样配置的全局Vue
 self.Vue = Vue;