1
0
mirror of https://github.com/sahadev/vue-component-creater-ui.git synced 2025-06-07 13:44:06 +08:00

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

This commit is contained in:
shangbin 2022-01-17 17:35:30 +08:00
parent 722a375108
commit 0f97f9c76f
11 changed files with 23 additions and 14 deletions

View File

@ -16,7 +16,7 @@
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<div style="display:inline-block;"> <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> Mode</el-link>
</div> </div>
</el-col> </el-col>

View File

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

View File

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

View File

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

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

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