122 lines
2.9 KiB
Vue
122 lines
2.9 KiB
Vue
<script setup>
|
|
import rpoJsonData from '../Data/RpoTree.json';
|
|
import { ref, onMounted } from 'vue';
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
rpo: {
|
|
type: Object,
|
|
required: false,
|
|
default: rpoJsonData
|
|
}
|
|
});
|
|
|
|
const arrData = computed(() => Object.keys(props.data));
|
|
|
|
function keyTitle(key) {
|
|
return key.split("_").join(" ");
|
|
}
|
|
|
|
function checkValueType(val) {
|
|
if (typeof val !== "object") {
|
|
return typeof val;
|
|
}
|
|
return Array.isArray(val) ? "array" : "object";
|
|
}
|
|
|
|
function printRpoName(rpoKey) {
|
|
|
|
console.log('data',typeof props.rpo[rpoKey]);
|
|
console.log('rpoKey',rpoKey);
|
|
if (typeof props.rpo[rpoKey] !== 'undefined'){
|
|
if (typeof props.rpo[rpoKey]["desc"] !== 'undefined') {
|
|
console.log(props.rpo[rpoKey]);
|
|
return props.rpo[rpoKey].desc;
|
|
}
|
|
if (typeof props.rpo[rpoKey]["value"] !== 'undefined') {
|
|
console.log(props.rpo[rpoKey]);
|
|
return props.rpo[rpoKey].value.desc;
|
|
}
|
|
|
|
console.log(props.rpo[rpoKey]);
|
|
return props.rpo[rpoKey]["desc"];
|
|
}
|
|
|
|
return rpoKey;
|
|
}
|
|
|
|
function subRpo(val,kz,i) {
|
|
console.log('val=',val,'k=',kz,'i=',i);
|
|
console.log(props.rpo);
|
|
return props.rpo[kz];
|
|
}
|
|
</script>
|
|
|
|
<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>
|
|
<RpoRecord2 :data="arrRow" :rpo="subRpo(arrRow, row,index2)"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<RpoRecord2 :data="data[row]" :rpo="subRpo(data[row],row,index)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<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>
|
|
|