From 8220a442914da768e3d4da5683550555284906d9 Mon Sep 17 00:00:00 2001 From: shangbin Date: Tue, 14 Sep 2021 19:01:50 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=E8=BF=87?= =?UTF-8?q?=E6=B8=A1=E7=94=9F=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components-v2/VCC.vue | 6 +++++- src/components/JSCodeEditorDialog.vue | 4 +--- src/libs/bundle-core-esm.js | 27 ++++++++++++++++++--------- src/libs/main-panel.js | 22 ++++++++++++++++------ src/main.js | 4 ++++ 5 files changed, 44 insertions(+), 19 deletions(-) diff --git a/src/components-v2/VCC.vue b/src/components-v2/VCC.vue index 38bde22..9084a6a 100644 --- a/src/components-v2/VCC.vue +++ b/src/components-v2/VCC.vue @@ -43,7 +43,7 @@ - + @@ -224,6 +224,10 @@ export default { undo() { this.mainPanelProvider.undo(); }, + + saveJSCode(code){ + this.mainPanelProvider.saveJSCode(code); + } }, fillter: {}, }; diff --git a/src/components/JSCodeEditorDialog.vue b/src/components/JSCodeEditorDialog.vue index 3f72e02..d62bc25 100644 --- a/src/components/JSCodeEditorDialog.vue +++ b/src/components/JSCodeEditorDialog.vue @@ -42,9 +42,7 @@ export default { }, onSave() { const code = this.$refs.codeEditor.getEditorCode(); - const temp = code.replace(/.+\*\/\s*/gs, ""); - const JSCodeInfo = eval(`(function(){return ${temp}})()`); - console.info(JSCodeInfo.methods.request.toString()); + this.$emit("saveJSCode", code); } }, watch: { diff --git a/src/libs/bundle-core-esm.js b/src/libs/bundle-core-esm.js index fb3e82c..4b8c70a 100644 --- a/src/libs/bundle-core-esm.js +++ b/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) { - externalData = this.options.getExternalJS.data(); + if (this.externalJS && typeof this.externalJS.data === 'function') { + 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) { - externalJSLogic = this.options.getExternalJS; + if (this.externalJS) { + 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; } diff --git a/src/libs/main-panel.js b/src/libs/main-panel.js index 079e1c3..54d24d0 100644 --- a/src/libs/main-panel.js +++ b/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(); + } + /** * 生成一个新的待挂载容器 */ diff --git a/src/main.js b/src/main.js index d096f8f..31a3fe5 100644 --- a/src/main.js +++ b/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),