Skip to content

Commit 7aa28af

Browse files
soxuerensoxueren
authored
Merge pull request #6 from soxueren/feature-adminform
Feature adminform
2 parents b5dd26d + 453f37a commit 7aa28af

File tree

7 files changed

+170
-81
lines changed

7 files changed

+170
-81
lines changed

‎src/components/JdIImportor/JdIImportor.vue‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<a href="#" class="upload-input">
3+
<i class="el-icon-upload"></i>
4+
<input type="file" @change="importHandle" />
5+
</a>
6+
</template>
7+
<script>
8+
import parser from "jhipster-core/lib/dsl/api";
9+
export default {
10+
name: "JdIImportor",
11+
data() {
12+
return {
13+
fileList: []
14+
};
15+
},
16+
methods: {
17+
importHandle(event) {
18+
let file = event.target.files[0];
19+
var reader = new FileReader();
20+
reader.readAsText(file, "UTF-8");
21+
reader.onload = e => {
22+
let data = e.currentTarget.result;
23+
this.$store.commit("setFilename", file.name);
24+
if (_.endsWith(file.name, ".json")) {
25+
console.log(data);
26+
}
27+
if (_.endsWith(file.name, ".jdl")) {
28+
this.$store.commit("setEditorValue", data);
29+
//data->jdlobject
30+
data = data.replace(/\/\/[^\n\r]*/gm, "");
31+
let jdlObject = parser.parse(data);
32+
this.$store.commit("setJdlObject", jdlObject);
33+
}
34+
this.fileList = [];
35+
};
36+
}
37+
}
38+
};
39+
</script>
40+
<style>
41+
.el-upload-list {
42+
display: none;
43+
}
44+
.upload-input {
45+
position: relative;
46+
padding: 2px 2px;
47+
overflow: hidden;
48+
text-decoration: none;
49+
text-indent: 0;
50+
line-height: 20px;
51+
}
52+
.upload-input input {
53+
position: absolute;
54+
font-size: 100px;
55+
left: 0;
56+
top: 0;
57+
width: 20px;
58+
height: 20px;
59+
opacity: 0;
60+
}
61+
</style>

‎src/components/JdlExeutor/JdlExeutor.service.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Vue from "vue";
2+
import axios from "axios";
3+
export default {};

‎src/components/JdlExeutor/JdlExeutor.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<a href="javascript:void(0);" @click="executeHandle">
3+
<i class="el-icon-caret-right"></i>
4+
</a>
5+
</template>
6+
<script>
7+
import { mapGetters } from "vuex";
8+
export default {
9+
computed: {
10+
...mapGetters({
11+
editorValue: "editorValue"
12+
})
13+
},
14+
methods: {
15+
executeHandle() {
16+
console.log(this.editorValue);
17+
}
18+
}
19+
};
20+
</script>
21+
<style>
22+
</style>

‎src/components/JdlFormEditor/JdlFormEditor.vue‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<a href="javascript:void(0);" @click="addHandle">
3+
<i class="el-icon-plus"></i>
4+
</a>
5+
</template>
6+
<script>
7+
import Vue from "vue";
8+
import { mapState, mapGetters } from "vuex";
9+
import parser from "jhipster-core/lib/dsl/api";
10+
11+
import ElementUI from "element-ui";
12+
Vue.use(ElementUI);
13+
14+
export default {
15+
computed: {
16+
...mapState({
17+
jdlObject: state => state.jdl.jdlObject
18+
}),
19+
...mapGetters({
20+
editorValue: "editorValue"
21+
})
22+
},
23+
mounted() {},
24+
methods: {
25+
addHandle() {
26+
console.log(this.jdlObject, this.editorValue);
27+
}
28+
}
29+
};
30+
</script>
31+
<style>
32+
.el-form-item__label {
33+
color: #fdf6e3;
34+
font-weight: 600;
35+
}
36+
.el-form-item a {
37+
color: #fdf6e3;
38+
}
39+
.el-input--mini .el-input__inner {
40+
background: rgb(0, 0, 0, 0);
41+
border: 1px solid rgb(40, 44, 52);
42+
color: aliceblue;
43+
}
44+
.el-dialog__body {
45+
padding: 10px 20px;
46+
}
47+
.el-dialog__headerbtn {
48+
position: absolute;
49+
top: 10px;
50+
right: 10px;
51+
font-size: 20px;
52+
}
53+
</style>

‎src/components/JdlStudio.vue‎

Lines changed: 24 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -14,39 +14,24 @@
1414
v-bind:style="{width:pannerStyle.w}"
1515
></div>
1616
<div class="tools">
17-
<el-col :span="6">
18-
<el-upload
19-
ref="upload"
20-
action="#"
21-
:file-list="fileList"
22-
:on-change="importHandle"
23-
:auto-upload="false"
24-
>
25-
<a href="#">
26-
<i class="el-icon-upload"></i>
27-
</a>
28-
</el-upload>
29-
</el-col>
30-
<el-col :span="18">
31-
<a href="javascript:void(0);" @click="addHandle">
32-
<i class="el-icon-plus"></i>
33-
</a>
34-
<a href="javascript:void(0);" @click="downHandle">
35-
<i class="el-icon-download"></i>
36-
</a>
37-
<a href="javascript:void(0);" @click="delHandle">
38-
<i class="el-icon-delete"></i>
39-
</a>
40-
</el-col>
17+
<JdIImportor />
18+
<JdlFormEditor />
19+
<JdlExeutor />
20+
<a href="javascript:void(0);" @click="downHandle">
21+
<i class="el-icon-download"></i>
22+
</a>
23+
<a href="javascript:void(0);" @click="delHandle">
24+
<i class="el-icon-delete"></i>
25+
</a>
4126
</div>
4227
</div>
4328
</template>
4429
<script>
45-
import Vue from "vue";
4630
import { mapState, mapGetters } from "vuex";
4731
import CodeMirror from "./lib/codemirror/codemirror.custom";
4832
import nomnoml from "./lib/nomnoml/nomnoml.custom";
4933
import skanaar from "./lib/nomnoml/shannar.custom";
34+
import parser from "jhipster-core/lib/dsl/api";
5035
5136
import "codemirror/theme/base16-dark.css";
5237
import "codemirror/lib/codemirror.css";
@@ -58,15 +43,22 @@ import "./css/solarized.jdl.css";
5843
5944
import _ from "lodash";
6045
import saveAs from "file-saver";
61-
import parser from "jhipster-core/lib/dsl/api";
6246
6347
import "codemirror/addon/selection/active-line";
6448
import "codemirror/addon/edit/matchbrackets";
6549
import "codemirror/addon/hint/show-hint";
6650
import "codemirror/addon/scroll/simplescrollbars";
6751
52+
import JdIImportor from "./JdIImportor/JdIImportor.vue";
53+
import JdlFormEditor from "./JdlFormEditor/JdlFormEditor.vue";
54+
import JdlExeutor from "./JdlExeutor/JdlExeutor.vue";
6855
export default {
6956
name: "jdlstudio",
57+
components: {
58+
JdIImportor,
59+
JdlFormEditor,
60+
JdlExeutor
61+
},
7062
data() {
7163
return {
7264
cmOptions: {
@@ -84,7 +76,6 @@ export default {
8476
},
8577
scrollbarStyle: "simple"
8678
},
87-
8879
canvasElement: {},
8980
canvasStyle: {
9081
t: 0,
@@ -104,13 +95,13 @@ export default {
10495
x: 0,
10596
y: 0
10697
},
107-
mouseDownPoint: false,
108-
fileList: []
98+
mouseDownPoint: false
10999
};
110100
},
111101
computed: {
112102
...mapState({
113103
code: state => state.jdl.code,
104+
filename: state => state.jdl.filename,
114105
editor: state => state.jdl.editor
115106
}),
116107
...mapGetters({
@@ -129,6 +120,9 @@ export default {
129120
);
130121
//更新editor
131122
this.$store.commit("setEditor", editor);
123+
//更新jdlObject
124+
let jdlObject = parser.parse(this.editorValue);
125+
this.$store.commit("setJdlObject", jdlObject);
132126
133127
this.vm = skanaar.vector;
134128
window.addEventListener(
@@ -176,9 +170,6 @@ export default {
176170
let scale = superSampling * Math.exp(this.zoomLevel / 10);
177171
let model = nomnoml.draw(this.canvasElement, this.editorValue, scale);
178172
this.positionCanvas(this.canvasElement, superSampling, this.offset);
179-
//save context
180-
181-
//save file
182173
} catch (e) {
183174
console.error(e);
184175
}
@@ -210,30 +201,11 @@ export default {
210201
this.mouseDownPoint = false;
211202
this.pannerStyle.w = "45%";
212203
},
213-
importHandle(file, fileList) {
214-
var reader = new FileReader();
215-
reader.readAsText(file.raw, "UTF-8");
216-
reader.onload = e => {
217-
let data = e.currentTarget.result;
218-
if (_.endsWith(file.name, ".json")) {
219-
console.log(data);
220-
}
221-
if (_.endsWith(file.name, ".jdl")) {
222-
this.$store.commit("setEditorValue", data);
223-
//data->jdlobject
224-
data = data.replace(/\/\/[^\n\r]*/gm, "");
225-
let jdlObject = parser.parse(data);
226-
this.$store.commit("setJdlObject", jdlObject);
227-
}
228-
this.fileList = [];
229-
};
230-
},
231-
addHandle() {},
232204
downHandle() {
233205
let blob = new Blob([this.editorValue], {
234206
type: "text/plain;charset=utf-8"
235207
});
236-
saveAs(blob, this.settings.baseName + ".jdl");
208+
saveAs(blob, this.filename);
237209
},
238210
delHandle() {
239211
this.$store.commit("setEditorValue", "");
@@ -405,28 +377,4 @@ export default {
405377
font-size: 25px;
406378
margin: 0 10px;
407379
}
408-
.el-upload-list {
409-
display: none;
410-
}
411-
.el-form-item__label {
412-
color: #fdf6e3;
413-
font-weight: 600;
414-
}
415-
.el-form-item a {
416-
color: #fdf6e3;
417-
}
418-
.el-input--mini .el-input__inner {
419-
background: rgb(0, 0, 0, 0);
420-
border: 1px solid rgb(40, 44, 52);
421-
color: aliceblue;
422-
}
423-
.el-dialog__body {
424-
padding: 10px 20px;
425-
}
426-
.el-dialog__headerbtn {
427-
position: absolute;
428-
top: 10px;
429-
right: 10px;
430-
font-size: 20px;
431-
}
432380
</style>

‎src/components/jdlstore.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export default {
22
state: {
3+
filename: "test.jdl",
34
code: `
45
entity Region {
56
regionName String
@@ -21,13 +22,17 @@ relationship OneToOne {
2122
},
2223
actions: {},
2324
mutations: {
24-
setEditor(state, editor) {
25-
state.editor = editor;
25+
setEditor(state, value) {
26+
state.editor = value;
27+
},
28+
setFilename(state, value) {
29+
state.filename = value;
2630
},
2731
setEditorValue(state, value) {
2832
state.editor.setValue(value);
2933
},
3034
setJdlObject(state, value) {
35+
console.log(value);
3136
state.jdlObject = value;
3237
}
3338
}

‎src/main.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Vue from "vue";
2-
import ElementUI from "element-ui";
32

43
import "element-ui/lib/theme-chalk/index.css";
54
import App from "./App.vue";
@@ -18,8 +17,6 @@ Vue.config.productionTip = false;
1817

1918
Vue.use(VueBus);
2019

21-
Vue.use(ElementUI);
22-
2320
new Vue({
2421
store,
2522
render: h => h(App)

0 commit comments

Comments
 (0)