split main component,formeditor,exeutor

Author: jxw

src/components/JdIImportor/JdIImportor.vue

@@ -0,0 +1,61 @@
+<template>
+  <a href="#" class="upload-input">
+    <i class="el-icon-upload"></i>
+    <input type="file" @change="importHandle" />
+  </a>
+</template>
+<script>
+import parser from "jhipster-core/lib/dsl/api";
+export default {
+  name: "JdIImportor",
+  data() {
+    return {
+      fileList: []
+    };
+  },
+  methods: {
+    importHandle(event) {
+      let file = event.target.files[0];
+      var reader = new FileReader();
+      reader.readAsText(file, "UTF-8");
+      reader.onload = e => {
+        let data = e.currentTarget.result;
+        this.$store.commit("setFilename", file.name);
+        if (_.endsWith(file.name, ".json")) {
+          console.log(data);
+        }
+        if (_.endsWith(file.name, ".jdl")) {
+          this.$store.commit("setEditorValue", data);
+          //data->jdlobject
+          data = data.replace(/\/\/[^\n\r]*/gm, "");
+          let jdlObject = parser.parse(data);
+          this.$store.commit("setJdlObject", jdlObject);
+        }
+        this.fileList = [];
+      };
+    }
+  }
+};
+</script>
+<style>
+.el-upload-list {
+  display: none;
+}
+.upload-input {
+  position: relative;
+  padding: 2px 2px;
+  overflow: hidden;
+  text-decoration: none;
+  text-indent: 0;
+  line-height: 20px;
+}
+.upload-input input {
+  position: absolute;
+  font-size: 100px;
+  left: 0;
+  top: 0;
+  width: 20px;
+  height: 20px;
+  opacity: 0;
+}
+</style>

src/components/JdlExeutor/JdlExeutor.service.js

@@ -0,0 +1,3 @@
+import Vue from "vue";
+import axios from "axios";
+export default {};

src/components/JdlExeutor/JdlExeutor.vue

@@ -0,0 +1,22 @@
+<template>
+  <a href="javascript:void(0);" @click="executeHandle">
+    <i class="el-icon-caret-right"></i>
+  </a>
+</template>
+<script>
+import { mapGetters } from "vuex";
+export default {
+  computed: {
+    ...mapGetters({
+      editorValue: "editorValue"
+    })
+  },
+  methods: {
+    executeHandle() {
+      console.log(this.editorValue);
+    }
+  }
+};
+</script>
+<style>
+</style>

src/components/JdlFormEditor/JdlFormEditor.vue

@@ -0,0 +1,53 @@
+<template>
+  <a href="javascript:void(0);" @click="addHandle">
+    <i class="el-icon-plus"></i>
+  </a>
+</template>
+<script>
+import Vue from "vue";
+import { mapState, mapGetters } from "vuex";
+import parser from "jhipster-core/lib/dsl/api";
+
+import ElementUI from "element-ui";
+Vue.use(ElementUI);
+
+export default {
+  computed: {
+    ...mapState({
+      jdlObject: state => state.jdl.jdlObject
+    }),
+    ...mapGetters({
+      editorValue: "editorValue"
+    })
+  },
+  mounted() {},
+  methods: {
+    addHandle() {
+      console.log(this.jdlObject, this.editorValue);
+    }
+  }
+};
+</script>
+<style>
+.el-form-item__label {
+  color: #fdf6e3;
+  font-weight: 600;
+}
+.el-form-item a {
+  color: #fdf6e3;
+}
+.el-input--mini .el-input__inner {
+  background: rgb(0, 0, 0, 0);
+  border: 1px solid rgb(40, 44, 52);
+  color: aliceblue;
+}
+.el-dialog__body {
+  padding: 10px 20px;
+}
+.el-dialog__headerbtn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 20px;
+}
+</style>