拓扑图组件，table增加表头显示，修改code传参，upload取消needCropper参数

9b7c2ed3 · 刘殿昕 · c73eb23d · 9b7c2ed3 · 9b7c2ed3 · 9b7c2ed3
Commit 9b7c2ed3 authored Apr 30, 2020 by 刘殿昕
16 changed files
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
    "build": "node build/build.js"
  },
  "dependencies": {
+    "@antv/g6": "^3.4.8",
    "@fortawesome/fontawesome-free": "^5.8.0",
    "ace-builds": "^1.4.11",
    "babel-polyfill": "^6.26.0",

--- a/src/components/codes.vue
+++ b/src/components/codes.vue
@@ -9,12 +9,9 @@
 <script>
 import ace from "ace-builds";
 import "ace-builds/webpack-resolver"; // 在 webpack 环境中使用必须要导入
-import "ace-builds/src-noconflict/mode-yaml"; // 默认设置的语言模式
 import "ace-builds/src-noconflict/mode-json"; // 默认设置的语言模式
-import yaml from "json2yaml"; //json转yaml
-import json from "js-yaml"; //yaml转json
 export default {
-  props: ["items", "acemodePath"],
+  props: ["url"],
  data() {
    return {
      aceEditor: null,
@@ -33,27 +30,22 @@ export default {
      tabSize: 4,
      highlightActiveLine: false
    });
-
-    if (this.acemodePath == "ace/mode/yaml") {
-      var obj = yaml.stringify(this.items);
-      this.aceEditor.getSession().setValue(obj);
-    } else if (this.acemodePath == "ace/mode/json") {
-      this.aceEditor
-        .getSession()
-        .setValue(JSON.stringify(this.items, null, "\t"));
-    }
+    this.getValue();
  },
  watch: {},
  methods: {
-    // updatechild: function() {
-    //   json.load(this.aceEditor.getSession().getValue());
-    //   console.log(json.load(this.aceEditor.getSession().getValue()));
-    // },
-    parentHandleclick: function() {
-      this.$emit(
-        "jsonyamlvalue",
-        json.load(this.aceEditor.getSession().getValue())
-      );
+    getValue() {
+      this.$http
+        .get(this.url)
+        .then(response => {
+          this.aceEditor.setValue(JSON.stringify(response.data, null, "\t"));
+        })
+        .catch(function(response) {
+          console.log(response);
+        });
+    },
+    parentHandleclick() {
+      this.$emit("getEditValue", this.aceEditor.getValue());
    }
  }
 };

--- a/src/components/table-um.vue
+++ b/src/components/table-um.vue
@@ -33,6 +33,7 @@
        :empty-text="emptyText"
        :stripe="stripe"
        row-key="id"
+        :show-header="showHeader"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        ref="cesTable"
@@ -270,6 +271,10 @@ export default {
    headerCellClassName: {
      type: String,
      default: ""
+    },
+    showHeader: {
+      type: Boolean,
+      default: true
    }
  },
  data() {

--- a/src/components/topology.vue
+++ b/src/components/topology.vue
--- a/src/components/upload_file.vue
+++ b/src/components/upload_file.vue
 <template>
  <div>
-    <div v-if="!needCropper">
+    <div v-if="type != 'copper'">
      <el-upload
        action="ssurl"
        :file-list="fileArray"
@@ -53,10 +53,6 @@ export default {
      type: Number,
      default: 1
    },
-    needCropper: {
-      type: Boolean,
-      default: false
-    },
    list: {
      type: Array,
      default: []

--- a/src/pages/example_code.vue
+++ b/src/pages/example_code.vue
 <template>
  <div class="code-main">
-    <v-apaas-code></v-apaas-code>
+    <v-apaas-code url="/static/data.json"></v-apaas-code>
  </div>
 </template>

@@ -36,4 +36,7 @@ export default {
 </script>

 <style scoped>
+.code-main {
+  margin-top: 100px;
+}
 </style>
\ No newline at end of file
--- a/src/pages/example_topology.vue
+++ b/src/pages/example_topology.vue
+<template>
+  <div class="topo_ex">
+    <Topology :datas="datas" />
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import Topology from "@/components/topology.vue";
+
+export default {
+  components: {
+    Topology
+  },
+  data: () => ({
+    datas: {}
+  }),
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      let url = "./static/antv.json";
+      this.$http
+        .get(url)
+        .then(response => {
+          this.datas = response.data.elements;
+        })
+        .catch(function(response) {
+          this.error = true;
+        });
+    },
+  }
+};
+</script>
+<style scoped>
+.topo_ex {
+    margin-top: 100px;
+}
+</style>
\ No newline at end of file
--- a/src/pages/example_upload.vue
+++ b/src/pages/example_upload.vue
@@ -4,7 +4,6 @@
    <upload-file
      :multiple="false"
      :max="4"
-      :needCropper="true"
      type="cropper"
      :readOnly="false"
      :list="imgList"
@@ -14,7 +13,6 @@
    <upload-file
      :multiple="false"
      :max="4"
-      :needCropper="false"
      type="picture"
      :readOnly="false"
      fit="fill"
@@ -25,7 +23,6 @@
    <upload-file
      :multiple="false"
      :max="4"
-      :needCropper="false"
      type="mp3"
      :readOnly="false"
      fit="fill"

--- a/src/router/index.js
+++ b/src/router/index.js
@@ -55,6 +55,11 @@ export default new Router({
      path: "/example_icon", // svg 实例
      name: "example_icon",
      component: () => import("@/pages/example_icon")
+    },
+    {
+      path: "/example_topology", // 拓扑图实例
+      name: "example_topology",
+      component: () => import("@/pages/example_topology")
    }
  ]
 });
--- a/static/antv.json
+++ b/static/antv.json
--- a/static/topology_ic_ganzhifw.svg
+++ b/static/topology_ic_ganzhifw.svg
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 17</title><rect class="cls-1" x="4.22" y="4.22" width="13.56" height="13.56" transform="translate(-4.56 11) rotate(-45)"/><path class="cls-2" d="M11,2.83,19.17,11,11,19.17,2.83,11,11,2.83M11,0,0,11,11,22,22,11,11,0Z"/></svg>
\ No newline at end of file
--- a/static/topology_ic_shikongfw.svg
+++ b/static/topology_ic_shikongfw.svg
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 15</title><path class="cls-1" d="M10,19a9,9,0,1,1,9-9A9,9,0,0,1,10,19Z"/><path class="cls-2" d="M10,2a8,8,0,1,1-8,8,8,8,0,0,1,8-8m0-2A10,10,0,1,0,20,10,10,10,0,0,0,10,0Z"/></svg>
\ No newline at end of file
--- a/static/topology_ic_shipinfw.svg
+++ b/static/topology_ic_shipinfw.svg
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 19.05"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 16</title><polygon class="cls-1" points="1.73 18.05 11 2 20.27 18.05 1.73 18.05"/><path class="cls-2" d="M11,4l7.54,13.05H3.46L11,4m0-4L0,19.05H22L11,0Z"/></svg>
\ No newline at end of file
--- a/static/topology_ic_shujufw.svg
+++ b/static/topology_ic_shujufw.svg
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 14</title><rect class="cls-1" x="1" y="1" width="16" height="16"/><path class="cls-2" d="M16,2V16H2V2H16m2-2H0V18H18V0Z"/></svg>
\ No newline at end of file
--- a/static/topology_ic_zonghefw.svg
+++ b/static/topology_ic_zonghefw.svg
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20.92"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 18</title><polygon class="cls-1" points="4.93 19.92 1.18 8.37 11 1.24 20.82 8.37 17.07 19.92 4.93 19.92"/><path class="cls-2" d="M11,2.47l8.65,6.28-3.3,10.17H5.65L2.35,8.76,11,2.47M11,0,0,8,4.2,20.92H17.8L22,8,11,0Z"/></svg>
\ No newline at end of file
--- a/yarn.lock
+++ b/yarn.lock