Merge pull request #7 from soxueren/feature-adminform

update reademe

Author: soxueren

README.md

@@ -1,4 +1,27 @@
-# vue-jdlstudio
+# vue-jdlstudio - jdlstudio for Vue , JDL Studio is an online JHipster Domain Language visual editor
+
+[JDL-Studio](https://github.com/jhipster/jdl-studio)
+
+Hello, this is JDL-Studio with Vue, an online tool for drawing UML diagrams for JHipster based on the JDL syntax. It tries to keep its syntax visually as close as possible to the generated UML diagram without resorting to ASCII drawings.
+
+- [Vue](https://github.com/vuejs/vue)
+- [ElementUI](https://github.com/ElementUI)
+- [nomnoml](https://github.com/skanaar/nomnoml)
+- [dagre](https://github.com/cpettitt/dagre)
+- [lodash](http://lodash.com)
+- [Jquery](https://jquery.com/)
+- [codemirror](https://codemirror.net/)
+- [solarized](http://ethanschoonover.com/solarized)
+- [Linearicons](https://linearicons.com/free)
+
+# Features
+
+- 官方版基本功能移植到 vue-jdlstudio 组件
+- 增加 JDLObject 表单编辑器组件
+- 移植 jhipster-Online 前端功能到执行器组件
+- 移植 Jhipster-Online 后端服务到 node.js
+
+# Build
 
 ```
 npm run build-bundle

src/components/JdIImportor/JdIImportor.vue

@@ -14,15 +14,18 @@
       v-bind:style="{width:pannerStyle.w}"
     ></div>
     <div class="tools">
-      <JdIImportor />
-      <JdlFormEditor />
-      <JdlExeutor />
+      <a href="#" class="upload-input">
+        <i class="el-icon-upload"></i>
+        <input type="file" @change="importHandle" />
+      </a>
       <a href="javascript:void(0);" @click="downHandle">
         <i class="el-icon-download"></i>
       </a>
       <a href="javascript:void(0);" @click="delHandle">
         <i class="el-icon-delete"></i>
       </a>
+      <JdlFormEditor />
+      <JdlExeutor />
     </div>
   </div>
 </template>
@@ -49,13 +52,11 @@ import "codemirror/addon/edit/matchbrackets";
 import "codemirror/addon/hint/show-hint";
 import "codemirror/addon/scroll/simplescrollbars";
 
-import JdIImportor from "./JdIImportor/JdIImportor.vue";
 import JdlFormEditor from "./JdlFormEditor/JdlFormEditor.vue";
 import JdlExeutor from "./JdlExeutor/JdlExeutor.vue";
 export default {
   name: "jdlstudio",
   components: {
-    JdIImportor,
     JdlFormEditor,
     JdlExeutor
   },
@@ -213,6 +214,25 @@ export default {
     },
     handleClose() {
       this.settingdialogVisiable = false;
+    },
+    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);
+        }
+      };
     }
   }
 };
@@ -377,4 +397,24 @@ export default {
   font-size: 25px;
   margin: 0 10px;
 }
+.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>