ap-dev 1.0.30 → 1.0.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -68,7 +68,7 @@ import devComponents from './../dev/devConfig'
|
|
|
68
68
|
import VueRender from './../base/VueRender'
|
|
69
69
|
import DynamicItem from "./DynamicItem";
|
|
70
70
|
// import DynamicItem from './../generator/DynamicItem'
|
|
71
|
-
import {getLocalData
|
|
71
|
+
import {getLocalData} from './../dev/DevUtil'
|
|
72
72
|
import clipboard from 'ap-util/util/ClipboardUtil'
|
|
73
73
|
|
|
74
74
|
// 批量导入组件
|
|
@@ -1,16 +1,136 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<ap-container>
|
|
3
|
-
<ap-aside margin="1111" width="45%"
|
|
4
|
-
|
|
3
|
+
<ap-aside margin="1111" width="45%" style="padding: 0px;">
|
|
4
|
+
<div style="width: 100%;height: 100%;">
|
|
5
|
+
<div style="position: absolute;z-index: 99;right: 55%;">
|
|
6
|
+
<el-button-group>
|
|
7
|
+
<el-button icon="el-icon-video-play" type="primary" @click="runCode()">运行</el-button>
|
|
8
|
+
<el-button icon="el-icon-copy" type="primary" @click="copyCode($event)">复制</el-button>
|
|
9
|
+
<el-button icon="el-icon-trash-o" type="primary" @click="clearCode()">清空</el-button>
|
|
10
|
+
<el-button icon="el-icon-refresh-right" type="primary" @click="resetCode()">重置</el-button>
|
|
11
|
+
<el-button icon="el-icon-s-promotion" type="primary" @click="previewCode()">预览</el-button>
|
|
12
|
+
</el-button-group>
|
|
13
|
+
</div>
|
|
14
|
+
<codemirror class="code-ctn" v-model="codes" :options="cmOptions"></codemirror>
|
|
15
|
+
</div>
|
|
16
|
+
</ap-aside>
|
|
17
|
+
<ap-main margin="1110">
|
|
18
|
+
<vue-render :options.sync="renderCode"></vue-render>
|
|
19
|
+
</ap-main>
|
|
5
20
|
</ap-container>
|
|
6
21
|
</template>
|
|
7
22
|
|
|
8
23
|
<script>
|
|
24
|
+
import {codemirror} from 'vue-codemirror'
|
|
25
|
+
import 'codemirror/lib/codemirror.css'
|
|
26
|
+
// import 'codemirror/keymap/sublime' //sublime编辑器效果
|
|
27
|
+
// import "codemirror/theme/dracula.css"// 配置里面也需要theme设置为monokai
|
|
28
|
+
import "codemirror/mode/vue/vue.js" // 配置里面也需要mode设置为vue
|
|
29
|
+
import 'codemirror/addon/selection/active-line' //光标行背景高亮，配置里面也需要styleActiveLine设置为true
|
|
30
|
+
import VueRender from './../base/VueRender'
|
|
31
|
+
import clipboard from "ap-util/util/ClipboardUtil";
|
|
32
|
+
import {getUserConfig} from "ap-dev/dev/dev/DevUtil";
|
|
33
|
+
|
|
9
34
|
export default {
|
|
10
|
-
name: "OnlineCodePanel"
|
|
35
|
+
name: "OnlineCodePanel",
|
|
36
|
+
components: {
|
|
37
|
+
codemirror, VueRender
|
|
38
|
+
},
|
|
39
|
+
data() {
|
|
40
|
+
let defaultCode = "<template>\n" +
|
|
41
|
+
" <div>\n" +
|
|
42
|
+
" AP\n" +
|
|
43
|
+
" </div>\n" +
|
|
44
|
+
"</template>\n" +
|
|
45
|
+
"<script>\n" +
|
|
46
|
+
"export default {\n" +
|
|
47
|
+
" data () {\n" +
|
|
48
|
+
" return {\n" +
|
|
49
|
+
" }\n" +
|
|
50
|
+
" },\n" +
|
|
51
|
+
" methods: {\n" +
|
|
52
|
+
" \n" +
|
|
53
|
+
" }\n" +
|
|
54
|
+
"}\n" +
|
|
55
|
+
"<" + "/script>\n" +
|
|
56
|
+
"<style scoped>\n" +
|
|
57
|
+
"</style>";
|
|
58
|
+
return {
|
|
59
|
+
userConfig: getUserConfig(),
|
|
60
|
+
// 代码
|
|
61
|
+
defaultCode: defaultCode,
|
|
62
|
+
codes: defaultCode,
|
|
63
|
+
renderCode: "",
|
|
64
|
+
cmOptions: {
|
|
65
|
+
tabSize: 4,// tab的空格个数
|
|
66
|
+
// theme: 'dracula',//主题样式
|
|
67
|
+
lineNumbers: true,//是否显示行数
|
|
68
|
+
lineWrapping: true, //是否自动换行
|
|
69
|
+
styleActiveLine: true,//line选择是是否加亮
|
|
70
|
+
matchBrackets: true,//括号匹配
|
|
71
|
+
mode: "vue", //实现javascript代码高亮
|
|
72
|
+
readOnly: false//只读
|
|
73
|
+
},
|
|
74
|
+
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
methods: {
|
|
78
|
+
copyCode(event) {
|
|
79
|
+
clipboard(this.codes, event)
|
|
80
|
+
},
|
|
81
|
+
runCode() {
|
|
82
|
+
if (this.codes.indexOf("import ") > -1) {
|
|
83
|
+
this.$message.error("编译错误，在线测试无法执行'import'命令！建议使用预览查看！");
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
this.renderCode = this.codes;
|
|
88
|
+
},
|
|
89
|
+
clearCode() {
|
|
90
|
+
this.codes = "";
|
|
91
|
+
this.renderCode = "";
|
|
92
|
+
},
|
|
93
|
+
resetCode() {
|
|
94
|
+
this.codes = this.defaultCode;
|
|
95
|
+
this.renderCode = this.defaultCode;
|
|
96
|
+
},
|
|
97
|
+
previewCode() {
|
|
98
|
+
let list = [
|
|
99
|
+
{
|
|
100
|
+
fileName: "Temp.vue",
|
|
101
|
+
url: this.userConfig.fdVuePath + "\\src\\views\\generator",
|
|
102
|
+
content: this.codes
|
|
103
|
+
}
|
|
104
|
+
]
|
|
105
|
+
this.$request({
|
|
106
|
+
url: '/apd/dev/DevGenerateCode/createFile',
|
|
107
|
+
method: 'post',
|
|
108
|
+
data: {
|
|
109
|
+
list: JSON.stringify(list),
|
|
110
|
+
projectName: this.userConfig.fdJavaHref
|
|
111
|
+
}
|
|
112
|
+
}).then(response => {
|
|
113
|
+
window.open(this.userConfig.fdVueHref + 'GeneratorPage?comp=Temp');
|
|
114
|
+
})
|
|
115
|
+
},
|
|
116
|
+
}
|
|
11
117
|
}
|
|
12
118
|
</script>
|
|
13
119
|
|
|
14
120
|
<style scoped>
|
|
121
|
+
.code-ctn {
|
|
122
|
+
height: 100%;
|
|
123
|
+
width: 100%;
|
|
124
|
+
}
|
|
125
|
+
</style>
|
|
126
|
+
|
|
127
|
+
<style>
|
|
128
|
+
.code-ctn .CodeMirror {
|
|
129
|
+
height: 100% !important;
|
|
130
|
+
font-size: 14px !important;
|
|
131
|
+
}
|
|
15
132
|
|
|
133
|
+
.code-ctn .CodeMirror-line {
|
|
134
|
+
line-height: 20px !important;
|
|
135
|
+
}
|
|
16
136
|
</style>
|
|
@@ -378,7 +378,7 @@
|
|
|
378
378
|
|
|
379
379
|
</ap-aside>
|
|
380
380
|
<ap-main margin="1110" class="template-content" v-loading="iframeLoading">
|
|
381
|
-
<iframe v-if="showIframe" id="iframeId" :src="'
|
|
381
|
+
<iframe v-if="showIframe" id="iframeId" :src="userConfig.fdVueHref + 'GeneratorPage?comp=' + currentVueComp"
|
|
382
382
|
style="width: 100%;height: 100%;border: 0px;vertical-align: top;">
|
|
383
383
|
</iframe>
|
|
384
384
|
</ap-main>
|