118 lines
3.2 KiB
Vue
118 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<ul>
|
|
<TableTree :data="formateddata"></TableTree>
|
|
</ul>
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
import TableTree from "@/components/TableTree.vue"; // @ is an alias to /src
|
|
|
|
export default {
|
|
components: { TableTree },
|
|
props: {
|
|
usersdata: Object
|
|
},
|
|
data: function() {
|
|
return {
|
|
selectedvaluedown: [],
|
|
selectedindexdown: 0,
|
|
formateddata: {}
|
|
};
|
|
},
|
|
created: function() {
|
|
this.formatusersdata();
|
|
},
|
|
methods: {
|
|
//fromate the data from single array structure to tree structure
|
|
formatusersdata: function() {
|
|
var formateddata = {};
|
|
var areas = [];
|
|
var cities = [];
|
|
var companies = [];
|
|
formateddata.name = this.usersdata.header;
|
|
formateddata.children = [];
|
|
for (var item of this.usersdata.info) {
|
|
if (areas.indexOf(item.state) === -1) {
|
|
areas.push(item.state);
|
|
}
|
|
}
|
|
for (var area of areas) {
|
|
formateddata.children.push({ name: [area], children: [] });
|
|
}
|
|
for (var citychild of formateddata.children) {
|
|
for (var item of this.usersdata.info) {
|
|
if (item.state === citychild.name[0]) {
|
|
var found = citychild.children.some(function(each) {
|
|
return each.name[0] === item.city;
|
|
});
|
|
if (!found) {
|
|
citychild.children.push({ name: [item.city], children: [] });
|
|
}
|
|
}
|
|
}
|
|
for (var company of citychild.children) {
|
|
var arr = [];
|
|
for (var item of this.usersdata.info) {
|
|
if (
|
|
item.city === company.name[0] &&
|
|
item.state === citychild.name[0]
|
|
) {
|
|
for (var x in item) {
|
|
if (x != "state" && x != "city") arr.push(item[x]);
|
|
}
|
|
company.children.push({ name: arr });
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.formateddata = formateddata;
|
|
},
|
|
//// function below is for swap table header uses.
|
|
getindexvalue: function(index) {
|
|
var array = [this.formateddata.title[index]];
|
|
for (var area of this.formateddata.area) {
|
|
for (var item of area.companies) {
|
|
array.push(item.info[index]);
|
|
}
|
|
}
|
|
return array;
|
|
},
|
|
addindexvalue: function(index, selectedvalue) {
|
|
var counter = 0;
|
|
this.formateddata.title.splice(index, 1, selectedvalue[0]);
|
|
for (var area of this.formateddata.area) {
|
|
for (var item in area.companies) {
|
|
counter += 1;
|
|
area.companies[item].info.splice(index, 1, selectedvalue[counter]);
|
|
}
|
|
}
|
|
},
|
|
onmousedown: function(e) {
|
|
var index = this.usersdata.header.indexOf(e.target.innerHTML);
|
|
this.selectedvaluedown = this.getindexvalue(index);
|
|
this.selectedindexdown = index;
|
|
},
|
|
onmouseup: function(e) {
|
|
var index = this.usersdata.header.indexOf(e.target.innerHTML);
|
|
var selectedvalueup = this.getindexvalue(index);
|
|
this.addindexvalue(index, this.selectedvaluedown);
|
|
this.addindexvalue(this.selectedindexdown, selectedvalueup);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
th,
|
|
tr,
|
|
td {
|
|
border: black solid 1px;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
</style>
|
|
|