initialized swap table

src/App.vue

@@ -1,16 +1,20 @@
 <template>
   <div id="app">
-   
+    <!--<Tree></Tree> -->
-    <Tree></Tree>
+
+    <SwapTable></SwapTable>
   </div>
 </template>
 
 <script>
-//import Table from "@/components/table.vue"; // @ is an alias to /src
 import Tree from "@/components/tree.vue"; // @ is an alias to /src
+//import SwapTabletest from "@/components/swap_table.vue"; // @ is an alias to /src
+import SwapTable from "@/components/SwapTable2.vue"; // @ is an alias to /src
+//import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
 export default {
   components: {
-    Tree
+    Tree,
+    SwapTable
   },
   name: "app"
 };

src/components/HelloWorld.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest" target="_blank" rel="noopener">unit-jest</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class HelloWorld extends Vue {
-  @Prop() private msg!: string;
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/SwapTable2.vue

@@ -0,0 +1,243 @@
+<template>
+
+    <!--<swaprecursion :data="formateddata"></swaprecursion> -->
+    <table>
+        <tr>
+            <th v-for="(title,index) in formateddata.title">{{title}}</th>
+        </tr>
+        <tbody>
+            <template v-for="area in formateddata.area">
+                <tr>
+                    <td colspan="9">{{area.region}} {{area.city}}</td>
+
+                </tr>
+                <tr v-for="company in area.companies">
+                    <template v-for="info in company.info">
+                        <td>{{info}}</td>
+                    </template>
+                </tr>
+
+            </template>
+        </tbody>
+
+    </table>
+
+</template>
+<script>
+export default {
+  components: {},
+  data: function() {
+    return {
+      formateddata: {},
+      data: {
+        header: [
+          "客户编号",
+          "公司名称",
+          "联系人",
+          "联系人称谓",
+          "地址",
+          "邮编",
+          "国家",
+          "电话",
+          "传真"
+        ],
+        info: [
+          {
+            name: "东北",
+            children: [
+              {
+                name: "大连",
+                children: [
+                  {
+                    name: undefined,
+                    children: undefined,
+                    data: {
+                      客户编号: "HUNGC",
+                      公司名称: "五金机械",
+                      联系人: "苏先生",
+                      称谓: "销售代表",
+                      地址: "德昌路甲",
+                      邮编: "564576",
+                      国家: "中国",
+                      电话: "(053)5556874",
+                      传真: "(053)5552376"
+                    }
+                  },
+                  {
+                    name: undefined,
+                    children: undefined,
+                    data: {
+                      客户编号: "CENTC",
+                      公司名称: "三捷实业",
+                      联系人: "王先生",
+                      称谓: "市场经理",
+                      地址: "英雄山路",
+                      邮编: "130083",
+                      国家: "中国",
+                      电话: "(061)15553392",
+                      传真: "(061)15557293"
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            name: "华北",
+            children: [
+              {
+                name: "北京",
+                children: [
+                  {
+                    name: undefined,
+                    children: undefined,
+                    data: {
+                      客户编号: "HUNGC",
+                      公司名称: "五金机械",
+                      联系人: "苏先生",
+                      称谓: "销售代表",
+                      地址: "德昌路甲",
+                      邮编: "564576",
+                      国家: "中国",
+                      电话: "(053)5556874",
+                      传真: "(053)5552376"
+                    }
+                  },
+                  {
+                    name: undefined,
+                    children: undefined,
+                    data: {
+                      客户编号: "CENTC",
+                      公司名称: "三捷实业",
+                      联系人: "王先生",
+                      称谓: "市场经理",
+                      地址: "英雄山路",
+                      邮编: "130083",
+                      国家: "中国",
+                      电话: "(061)15553392",
+                      传真: "(061)15557293"
+                    }
+                  }
+                ]
+              },
+              {
+                name: "秦皇岛",
+                children: [
+                  {
+                    name: undefined,
+                    children: undefined,
+                    data: {
+                      客户编号: "HUNGC",
+                      公司名称: "五金机械",
+                      联系人: "苏先生",
+                      称谓: "销售代表",
+                      地址: "德昌路甲",
+                      邮编: "564576",
+                      国家: "中国",
+                      电话: "(053)5556874",
+                      传真: "(053)5552376"
+                    }
+                  },
+                  {
+                    name: undefined,
+                    children: undefined,
+                    data: {
+                      客户编号: "CENTC",
+                      公司名称: "三捷实业",
+                      联系人: "王先生",
+                      称谓: "市场经理",
+                      地址: "英雄山路",
+                      邮编: "130083",
+                      国家: "中国",
+                      电话: "(061)15553392",
+                      传真: "(061)15557293"
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    };
+  },
+  created: function() {
+    this.formatdata();
+    console.log(this.formateddata);
+  },
+  methods: {
+    formatdata: function() {
+      var formateddata = {};
+      formateddata.title = this.data.header;
+      formateddata.area = [];
+      for (var items of this.data.info) {
+        for (var item of items.children) {
+          formateddata.area.push({
+            region: items.name,
+            city: item.name,
+            companies: []
+          });
+
+          for (var childObject of item.children) {
+            var childarray = [];
+
+            for (var child in childObject.data) {
+              childarray.push(childObject.data[child]);
+            }
+            formateddata.area[formateddata.area.length - 1].companies.push({
+              info: childarray
+            });
+          }
+        }
+      }
+      this.formateddata = formateddata;
+    }
+  }
+};
+</script>
+<style>
+th,
+tr,
+td {
+  border: black solid 1px;
+}
+
+table {
+  border-collapse: collapse;
+}
+</style>
+
+/*
+ formatdata: function() {
+      var formateddata = {};
+      formateddata.name = this.data.header;
+      formateddata.children = [];
+      for (var items of this.data.info) {
+        for (var item of items.children) {
+          formateddata.children.push({ name: [] });
+          formateddata.children[formateddata.children.length - 1].name.push(
+            items.name,
+            item.name
+          );
+          formateddata.children[formateddata.children.length - 1].children = [];
+
+          //===========================================
+          for (var childObject of item.children) {
+            var childarray = [];
+            for (var child in childObject) {
+              if (child == "data") {
+                for (var each in childObject[child]) {
+                  childarray.push(childObject[child][each]);
+                }
+                //childarray.push(childObject[child]);
+              }
+            }
+            formateddata.children[
+              formateddata.children.length - 1
+            ].children.push({ name: childarray });
+          }
+        }
+      }
+      console.log(formateddata);
+      this.formateddata = formateddata;
+    }*/

src/components/Untitled-1.json

@@ -0,0 +1,46 @@
+[
+    {
+                      客户编号: "HUNGC",
+                      公司名称: "五金机械",
+                      联系人: "苏先生",
+                      称谓: "销售代表",
+                      地址: "德昌路甲",
+                      邮编: "564576",
+                      国家: "中国",
+                      电话: "(053)5556874",
+                      传真: "(053)5552376",
+                      area: "东北",
+    },
+    {
+                      客户编号: "HUNGC",
+                      公司名称: "五金机械",
+                      联系人: "苏先生",
+                      称谓: "销售代表",
+                      地址: "德昌路甲",
+                      邮编: "564576",
+                      国家: "中国",
+                      电话: "(053)5556874",
+                      传真: "(053)5552376",
+                      area: "东北",
+    }
+    ,{
+                      客户编号: "HUNGC",
+                      公司名称: "五金机械",
+                      联系人: "苏先生",
+                      称谓: "销售代表",
+                      地址: "德昌路甲",
+                      邮编: "564576",
+                      国家: "中国",
+                      电话: "(053)5556874",
+                      传真: "(053)5552376",
+                      area: "东北",
+    }
+
+]
+
+["客户编号","公司名称"]
+
+obj["客户编号"]
+
+
+["公司名称","联系人"]

src/components/swap_table.vue

@@ -1,43 +1,28 @@
 <template>
-  <div id="table">
+  <div id="swap_table">
-      <div id='table-wrapper'>
+    <h1>swap table test</h1>
-        <table class='first-col'>
+    <table class="table">
-          <tr v-for='name in company_names'>
+      <tr>
-            <td>{{name}}</td>
+        <th></th>
-            </tr>
+        <th colspan='5' v-for='(category, index) in categories' :key='index' @mousedown='cate_mousedown($event)' @mouseup='cate_mouseup($event)'>{{category}}</th>
-         
-        </table>
-    <table  class="main_body">
-  <tr>
-    
-    <th colspan='5' v-for='(category, index) in categories' :key='index' 
-    @mousedown ='cate_mousedown($event)' @mouseup ='cate_mouseup($event)'>{{category}}</th>
-    
-  </tr>
-  <tr>
-    <td v-for='(ingredient,index) in ingredients' :key="index" 
-     @mousedown ='onmousedown($event)' @mouseup ='onmouseup($event)'>{{ingredient}}</td>
-  </tr>
-  <tr v-for='(company,index) in companys' :key="index">
-    <td v-for='(detail,index) in company' :key='index'>
-      {{detail}}
-    </td>
-  </tr>
-</table>
 
+      </tr>
+      <tr>
+        <td v-for='(ingredient,index) in ingredients' :key="index" @mousedown='onmousedown($event)' @mouseup='onmouseup($event)'>{{ingredient}}</td>
+      </tr>
+      <tr v-for='(company,index) in companys' :key="index">
+        <td v-for='(detail,index) in company' :key='index'>
+          {{detail}}
+        </td>
+      </tr>
+    </table>
 
-
-</div>
-<div class='test'></div>
-<div class='test1'></div>
-<div class='test2'></div>
-    
   </div>
 </template>
 
 <script>
 export default {
-  name: "Table",
+  name: "swap_table",
   data: function() {
     return {
       downvalue: "",
@@ -53,18 +38,9 @@ export default {
       cate_upindex: "",
       cate_buttondownvalue: [],
       cate_buttonupvalue: [],
-      company_names: [
+
-        "empty",
-        "产品",
-        "公司b",
-        "公司c",
-        "公司d",
-        "公司e",
-        "公司f",
-        "公司g",
-        "公司h"
-      ],
       ingredients: [
+        "产品",
         "番茄酱",
         "面粉",
         "小麦",
@@ -77,30 +53,105 @@ export default {
         "韭菜"
       ],
       companys: [
-        [1, 12, 123, 1234, 12345, 123456, 1234567, 12345678, 14, 15],
+        ["公司a", 1, 12, 123, 1234, 12345, 123456, 1234567, 12345678, 14, 15],
-        [10, 120, 1230, 12340, 123450, 1234560, 12345670, 123456780, 140, 150],
+        [
-        [10, 120, 1230, 12340, 123450, 1234560, 12345670, 123456780, 140, 150],
+          "公司a",
-        [10, 120, 1230, 12340, 123450, 1234560, 12345670, 123456780, 140, 150],
+          10,
-        [10, 120, 1230, 12340, 123450, 1234560, 12345670, 123456780, 140, 150],
+          120,
-        [10, 120, 1230, 12340, 123450, 1234560, 12345670, 123456780, 140, 150],
+          1230,
-        [10, 120, 1230, 12340, 123450, 1234560, 12345670, 123456780, 140, 150]
+          12340,
+          123450,
+          1234560,
+          12345670,
+          123456780,
+          140,
+          150
+        ],
+        [
+          "公司a",
+          10,
+          120,
+          1230,
+          12340,
+          123450,
+          1234560,
+          12345670,
+          123456780,
+          140,
+          150
+        ],
+        [
+          "公司c",
+          10,
+          120,
+          1230,
+          12340,
+          123450,
+          1234560,
+          12345670,
+          123456780,
+          140,
+          150
+        ],
+        [
+          "公司e",
+          10,
+          120,
+          1230,
+          12340,
+          123450,
+          1234560,
+          12345670,
+          123456780,
+          140,
+          150
+        ],
+        [
+          "公司f",
+          10,
+          120,
+          1230,
+          12340,
+          123450,
+          1234560,
+          12345670,
+          123456780,
+          140,
+          150
+        ],
+        [
+          "公司d",
+          10,
+          120,
+          1230,
+          12340,
+          123450,
+          1234560,
+          12345670,
+          123456780,
+          140,
+          150
+        ]
       ],
       categories: ["数量", "金额"]
     };
   },
+  created: function() {},
   methods: {
     //get the data from categories
     getcatevalue: function(index) {
       var totalvalue = [];
       if (index === 0) {
-        totalvalue = totalvalue.concat(this.ingredients.slice(0, 5));
+        // totalvalue=totalvalue.concat(this.categories.slice(0,1))
+        totalvalue = totalvalue.concat(this.ingredients.slice(1, 6));
         for (var item in this.companys) {
-          totalvalue = totalvalue.concat(this.companys[item].slice(0, 5));
+          totalvalue = totalvalue.concat(this.companys[item].slice(1, 6));
         }
       } else if (index === 1) {
-        totalvalue = totalvalue.concat(this.ingredients.slice(5, 10));
+        //totalvalue=totalvalue.concat(this.categories.slice(1,2))
+        totalvalue = totalvalue.concat(this.ingredients.slice(6, 11));
         for (var item in this.companys) {
-          totalvalue = totalvalue.concat(this.companys[item].slice(5, 10));
+          totalvalue = totalvalue.concat(this.companys[item].slice(6, 11));
         }
       }
       return totalvalue;
@@ -112,12 +163,12 @@ export default {
 
       for (var x = 0; x < 5; x++) {
         this.ingredients.splice(
-          this.cate_downvalueindex * 5 + x,
+          this.cate_downvalueindex * 5 + x + 1,
           1,
           this.cate_buttonupvalue[x]
         );
         this.ingredients.splice(
-          this.cate_upvalueindex * 5 + x,
+          this.cate_upvalueindex * 5 + x + 1,
           1,
           this.cate_buttondownvalue[x]
         );
@@ -126,12 +177,12 @@ export default {
       for (var item in this.companys) {
         for (var x = 0; x < 5; x++) {
           this.companys[item].splice(
-            this.cate_downvalueindex * 5 + x,
+            this.cate_downvalueindex * 5 + x + 1,
             1,
             this.cate_buttonupvalue[count]
           );
           this.companys[item].splice(
-            this.cate_upvalueindex * 5 + x,
+            this.cate_upvalueindex * 5 + x + 1,
             1,
             this.cate_buttondownvalue[count]
           );
@@ -139,7 +190,6 @@ export default {
         }
       }
     },
-    //get colum data
     getcolvalue: function(index) {
       var colvalue = [];
       for (var item in this.companys) {
@@ -147,7 +197,6 @@ export default {
       }
       return colvalue;
     },
-    //import data into colum
     importcolvalue() {
       this.ingredients.splice(this.upvalueindex, 1, this.downvalue);
       this.ingredients.splice(this.downvalueindex, 1, this.upvalue);
@@ -167,14 +216,12 @@ export default {
 
     onmousedown: function(ev) {
       //get mousedown value and index in the array
-
       this.downvalue = ev.target.innerHTML;
       this.downvalueindex = this.ingredients.indexOf(ev.target.innerHTML);
       this.buttondownvalue = this.getcolvalue(this.downvalueindex);
     },
 
     onmouseup: function(ev) {
-      console.log(ev.target);
       this.upvalue = ev.target.innerHTML;
       this.upvalueindex = this.ingredients.indexOf(ev.target.innerHTML);
       this.buttonupvalue = this.getcolvalue(this.upvalueindex);
@@ -196,39 +243,19 @@ export default {
 </script>
 
 
-<style lang="scss">
+<style scoped>
-table,
+.table,
 th,
 tr,
 td {
   border: black solid 1px;
 }
-table {
+.table {
   border-collapse: collapse;
-  float: left;
-}
-
-.first-col {
-  background-color: blue;
-  width: 50px;
-  position: absolute;
-}
-.main_body {
-  background-color: yellow;
-  width: 640px;
-  margin-left: 50px;
-}
-#table-wrapper {
-  overflow-x: scroll;
-  width: 400px;
-  height: 237px;
-  margin: auto;
 }
 </style>
 /*
 This is main formulate
 this.categories.splice(this.cate_upvalueindex,1,this.cate_downvalue)
 this.categories.splice(this.cate_downvalueindex,1,this.cate_upvalue)
-
+ */
-
- */