优化代码过渡生成

src/components-v2/VCC.vue

@@ -43,7 +43,7 @@
       <code-structure @save="onSaveAttr" @remove="onRemove" ref="codeStructure" :visible.sync="structureVisible"
         @codeRefresh="generateVueCode" @onLevelChange="onLevelChange">
       </code-structure>
-      <CodeEditor :codeDialogVisible.sync="jsDialogVisible"></CodeEditor>
+      <CodeEditor :codeDialogVisible.sync="jsDialogVisible" @saveJSCode="saveJSCode"></CodeEditor>
     </div>
 
     <!-- 辅助定位线 -->
@@ -224,6 +224,10 @@ export default {
     undo() {
       this.mainPanelProvider.undo();
     },
+
+    saveJSCode(code){
+      this.mainPanelProvider.saveJSCode(code);
+    }
   },
   fillter: {},
 };

src/components/JSCodeEditorDialog.vue

@@ -42,9 +42,7 @@ export default {
     },
     onSave() {
       const code = this.$refs.codeEditor.getEditorCode();
-      const temp = code.replace(/.+\*\/\s*/gs, "");
+      this.$emit("saveJSCode", code);
-      const JSCodeInfo = eval(`(function(){return ${temp}})()`);
-      console.info(JSCodeInfo.methods.request.toString());
     }
   },
   watch: {

src/libs/bundle-core-esm.js

@@ -422,7 +422,7 @@ const scriptTemplate = `{
     fillter: {},
   };`;
 
-const { merge } = _;
+const { merge, cloneDeep } = _;
 
 const rawAdd = Set.prototype.add;
 Set.prototype.add = function (value) {
@@ -511,6 +511,8 @@ class CodeGenerator {
     this.methodSet = new Set();
     // 数据引用放入其中
     this.dataSet = new Set();
+
+    this.externalJS = {};
   }
 
   clearDataSet() {
@@ -519,6 +521,15 @@ class CodeGenerator {
     this.dataSet.clear();
   }
 
+
+  /**
+   * 设置外部编辑代码
+   * @param {*} code 
+   */
+  setExternalJS(JSCodeInfo) {
+    this.externalJS = cloneDeep(JSCodeInfo);
+  }
+
   /**
     * 直接输入Json文本
     * @param {*} json
@@ -566,10 +577,10 @@ class CodeGenerator {
     // 合并外部脚本对象
     let externalData = {};
 
-    if (this.options.getExternalJS) {
+    if (this.externalJS && typeof this.externalJS.data === 'function') {
-      externalData = this.options.getExternalJS.data();
+      externalData = this.externalJS.data();
       // 防止在后面的生成污染新的对象
-      delete this.options.getExternalJS.data;
+      delete this.externalJS.data;
     }
 
     // 生成新的data返回值
@@ -577,14 +588,12 @@ class CodeGenerator {
 
     const dataFunction = new Function(`return ${stringifyObject(newData)}`);
 
-    console.info(dataFunction.toString());
-
     JSCodeInfo.data = dataFunction;
 
     let externalJSLogic = {};
 
-    if (this.options.getExternalJS) {
+    if (this.externalJS) {
-      externalJSLogic = this.options.getExternalJS;
+      externalJSLogic = this.externalJS;
     }
 
     const mergedJSObject = merge(JSCodeInfo, externalJSLogic);
@@ -593,7 +602,7 @@ class CodeGenerator {
     const finalJSCode = stringifyObject(mergedJSObject, {
       transform: (object, property, originalResult) => {
         if (!originalResult.match(/^\([^\(]+/g) && !originalResult.match(/^\{/g)) { // 不对以(/{ 开头的情况做处理，只对包含有方法名的情况做处理
-          const after = originalResult.replace(/[^\(]+?\(([\w,\s]*)\)/g, '\($1\)=>');
+          const after = originalResult.replace(/[^\(]+?\(([\w,\s]*)\)/, '\($1\)=>');
           return after;
         }
 

src/libs/main-panel.js

@@ -27,6 +27,8 @@ export class MainPanelProvider {
         // 存储所有的渲染记录, 保存副本
         this.renderStack = [];
         this.redoStack = [];
+
+        this.externalJS = {};
     }
 
     /**
@@ -41,18 +43,17 @@ export class MainPanelProvider {
 
         this.initCodeGenerator();
 
-        // 生成展示代码
-        const copyForShow = cloneDeep(rawDataStructure);
-        removeAllID(copyForShow);
-
         console.groupCollapsed('---> for code generator warn <---');
-        const codeForShow = this.codeGenerator.outputVueCodeWithJsonObj(copyForShow);
-        this.eventEmitter.emit("codeCreated", codeForShow);
 
         const readyForMoutedElement = this.createMountedElement();
 
         // 生成原始代码
         const code = this.codeGenerator.outputVueCodeWithJsonObj(rawDataStructure);
+
+        // 生成展示代码
+        const codeForShow = code.replace(/\s{1}lc_id=".+"/g, '');
+        this.eventEmitter.emit("codeCreated", codeForShow);
+
         console.groupEnd();
 
         const { template, script, styles, customBlocks } = parseComponent(code);
@@ -101,12 +102,21 @@ export class MainPanelProvider {
      */
     initCodeGenerator() {
         this.codeGenerator = createNewCodeGenerator();
+        this.codeGenerator.setExternalJS(this.externalJS);
     }
 
     getControlPanelRoot() {
         return document.getElementById('render-control-panel');
     }
 
+    saveJSCode(code) {
+        const temp = code.replace(/.+\*\/\s*/gs, "");
+        const JSCodeInfo = eval(`(function(){return ${temp}})()`);
+        this.externalJS = JSCodeInfo;
+        this.codeGenerator.setExternalJS(JSCodeInfo);
+        this.reRender();
+    }
+
     /**
      * 生成一个新的待挂载容器
      */

src/main.js

@@ -11,6 +11,10 @@ import "./assets/nestable.css"
 Vue.use(ElementUI);
 Vue.use(AntdUI);
 
+Vue.config.errorHandler = function (err, vm, info) {
+  console.error(err);
+}
+
 new Vue({
   el: "#app",
   render: (h) => h(APP),