Prerobena verzia, s zobrazovanim a logom
This commit is contained in:
@@ -49,47 +49,104 @@ function printRpoName(rpoKey) {
|
||||
return rpoKey;
|
||||
}
|
||||
|
||||
function createRPOflatList(resultTree, flatList, RpoTree, lastKey = undefined, level = 0, fullPathRpo = []) {
|
||||
console.log('RESTREE=',resultTree);
|
||||
let fullPath = [ ...fullPathRpo ] ;
|
||||
if (lastKey != undefined) fullPath.push(lastKey);
|
||||
|
||||
if (level == 0 || checkValueType(resultTree) == "object") {
|
||||
let i=0;
|
||||
Object.keys(resultTree).forEach(k => {
|
||||
if (typeof resultTree[k] != 'string') {
|
||||
if (RpoTree[k] !== undefined) {
|
||||
flatList.push({"level": level, "key": k, "val": undefined, "translated": RpoTree[k].desc ,"full": fullPath.join(' => '), "index": i++ });
|
||||
createRPOflatList(resultTree[k],flatList, RpoTree[k], k, level + 1, fullPath );
|
||||
}
|
||||
} else {
|
||||
console.log('RT=',RpoTree);
|
||||
console.log('K=', k);
|
||||
if (RpoTree[k] !== undefined)
|
||||
flatList.push({"level": level, "key": k, "val": resultTree[k], "translated": RpoTree[k].desc ,"full": fullPath.join(' => '), "index": i++ });
|
||||
}
|
||||
});
|
||||
} else if (checkValueType(resultTree) == "array") {
|
||||
let i=0;
|
||||
for (const e of resultTree) {
|
||||
console.log('e=',e);
|
||||
if (checkValueType(e) == "object" || checkValueType(e) == "array") {
|
||||
createRPOflatList(e, flatList, RpoTree, lastKey, level + 1, fullPath );
|
||||
} else {
|
||||
console.log('RT=',RpoTree);
|
||||
flatList.push({"level": level, "key": lastKey, "val": e, "translated": RpoTree.desc !== undefined ? RpoTree.desc : '' ,"full": fullPath.join(' => '), "index": i++ });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function subRpo(val,kz,i) {
|
||||
console.log('val=',val,'k=',kz,'i=',i);
|
||||
console.log(props.rpo);
|
||||
return props.rpo[kz];
|
||||
}
|
||||
|
||||
var flatListRpo = [];
|
||||
createRPOflatList(props.data, flatListRpo, props.rpo);
|
||||
console.log('FLAT=',flatListRpo);
|
||||
</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 class="flex flex-col">
|
||||
<div class="overflow-x-auto">
|
||||
|
||||
<div class="p-1.5 w-full inline-block align-middle">
|
||||
<div class="overflow-hidden border rounded-lg">
|
||||
<table class="min-w-full divide-y divide-gray-200 border-4 border-black border-solid">
|
||||
<thead class="bg-red-300">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="min-w-min px-2 py-2 text-xs font-bold text-left border-4 border-black border-solid uppercase"
|
||||
>
|
||||
Nazov
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-2 py-2 text-xs font-bold text-left border-4 border-black border-solid uppercase"
|
||||
>
|
||||
Hodnota
|
||||
</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
<tr v-for="(row,index) in flatListRpo" :key="index"
|
||||
:class="index % 2 === 0 ? 'bg-zinc-100' : 'bg-zinc-200'">
|
||||
<td
|
||||
class="py-2 text-sm text-gray-800 font-bold whitespace-nowrap border-r-4 border-black border-solid border-b"
|
||||
:style="`padding-left: ${10+row.level*15}px`"
|
||||
>
|
||||
{{ row.translated }}
|
||||
</td>
|
||||
<td
|
||||
class="px-2 py-2 text-sm text-gray-800 whitespace-nowrap border-black border-solid border-b"
|
||||
>
|
||||
{{ row.val }}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.level-1 {
|
||||
width: 200px;
|
||||
}
|
||||
.table-main {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user