119 lines
2.5 KiB
Vue
119 lines
2.5 KiB
Vue
<template>
|
|
<div class="table-main">
|
|
<div
|
|
v-for="(row, index) in arrData"
|
|
:key="index"
|
|
class="row-data m-2 d-flex"
|
|
>
|
|
<div class="key p-2 d-inline-block">
|
|
<div class="text-capitalize ">
|
|
{{ printRpoName(row) }}
|
|
</div>
|
|
</div>
|
|
<div v-if="['string', 'number'].includes(checkValueType(data[row]))">
|
|
<div class="value p-2 d-inline-block">{{ data[row] }}</div>
|
|
</div>
|
|
<div v-else-if="checkValueType(data[row]) === 'array'">
|
|
<div v-for="(arrRow, index2) in data[row]" :key="index2" class="d-flex">
|
|
<div v-if="['string', 'number'].includes(checkValueType(arrRow))">
|
|
{{ arrRow }}
|
|
</div>
|
|
<div v-else>
|
|
<RpoRecord :data="arrRow" :rpo="subRpo(arrRow, row,index2)"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<RpoRecord :data="data[row]" :rpo="subRpo(data[row],row,index)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import rpoJsonData from '../Data/RpoTree.json';
|
|
|
|
export default {
|
|
name: "RpoRecord",
|
|
props: {
|
|
data: {
|
|
type: Object
|
|
},
|
|
rpo: {
|
|
type: Object,
|
|
}
|
|
},
|
|
computed: {
|
|
arrData() {
|
|
return Object.keys(this.data);
|
|
}
|
|
},
|
|
methods: {
|
|
keyTitle(key) {
|
|
return key.split("_").join(" ");
|
|
},
|
|
checkValueType(val) {
|
|
if (typeof val !== "object") {
|
|
return typeof val;
|
|
}
|
|
return Array.isArray(val) ? "array" : "object";
|
|
},
|
|
printRpoName(key) {
|
|
|
|
console.log('data',typeof this.rpo[key]);
|
|
if (typeof this.rpo[key] !== 'undefined'){
|
|
console.log(this.rpo[key]);
|
|
return this.rpo[key]["desc"];
|
|
}
|
|
if (typeof this.rpo[key] !== 'undefined' && typeof this.rpo[key]["value"] !== 'undefined') {
|
|
console.log(this.rpo[key]);
|
|
return this.rpo[key].value.desc;
|
|
}
|
|
|
|
return key;
|
|
},
|
|
subRpo(val,kz,i) {
|
|
console.log('val=',val,'k=',kz,'i=',i);
|
|
console.log(this.rpo);
|
|
return this.rpo[kz];
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
console.log('JSON=',this.rpo);
|
|
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.table-main {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
.m-2 {
|
|
margin: .5rem!important;
|
|
}
|
|
.mx-2 {
|
|
margin-right: .5rem!important;
|
|
}
|
|
.p-2 {
|
|
padding: .5rem!important;
|
|
}
|
|
.d-flex {
|
|
display: flex!important;
|
|
}
|
|
.d-inline-block {
|
|
display: inline-block!important;
|
|
}
|
|
.text-capitalize {
|
|
text-transform: capitalize!important;
|
|
}
|
|
.key {
|
|
background: lightgray;
|
|
}
|
|
.table-main .row-data {
|
|
border: 2px solid grey;
|
|
border-radius: 2px;
|
|
}
|
|
</style>
|