|
|
|
@ -2,9 +2,7 @@
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<h1 style="font-size: 3rem; margin: 1rem;">Текущий формат</h1>
|
|
|
|
<h1 style="font-size: 3rem; margin: 1rem;">Текущий формат</h1>
|
|
|
|
<h2 style="margin-left: 1rem;">(скоординированный)</h2>
|
|
|
|
<h2 style="margin-left: 1rem;">(скоординированный)</h2>
|
|
|
|
<va-radio class="radio-switcher" v-for="(option, index) in viewOptions" :key="index" v-model="selectedOption"
|
|
|
|
<div class="va-table-responsive" style="margin: 1rem;">
|
|
|
|
:option="option" :label="viewLabels[index]"></va-radio>
|
|
|
|
|
|
|
|
<div class="va-table-responsive" v-if="selectedOption === 'table-view'">
|
|
|
|
|
|
|
|
<table class="va-table va-table--striped detail-table">
|
|
|
|
<table class="va-table va-table--striped detail-table">
|
|
|
|
<thead>
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<tr>
|
|
|
|
@ -20,24 +18,6 @@
|
|
|
|
</tbody>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<va-list v-else-if="selectedOption === 'list-view'">
|
|
|
|
|
|
|
|
<va-list-item v-for="(_, header, index) in items[0]" :key="index" class="header-list">
|
|
|
|
|
|
|
|
<va-list-item-section icon>
|
|
|
|
|
|
|
|
<va-icon name="circle" color="gray" size="small"></va-icon>
|
|
|
|
|
|
|
|
</va-list-item-section>
|
|
|
|
|
|
|
|
<va-list-item-section>
|
|
|
|
|
|
|
|
<va-list-item-label class="header-item" :lines="2">{{ header }}</va-list-item-label>
|
|
|
|
|
|
|
|
</va-list-item-section>
|
|
|
|
|
|
|
|
</va-list-item>
|
|
|
|
|
|
|
|
</va-list>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div v-else class="card-row">
|
|
|
|
|
|
|
|
<div class="card-item flex lg4" v-for="(_, header, index) in items[0]" :key="index">
|
|
|
|
|
|
|
|
<va-card :bordered="false">
|
|
|
|
|
|
|
|
<va-card-content>{{ header }}</va-card-content>
|
|
|
|
|
|
|
|
</va-card>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
@ -48,18 +28,7 @@ export default defineComponent({
|
|
|
|
name: "active-schema-screen",
|
|
|
|
name: "active-schema-screen",
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
columns: [],
|
|
|
|
columns: []
|
|
|
|
viewOptions: [
|
|
|
|
|
|
|
|
"table-view",
|
|
|
|
|
|
|
|
"list-view",
|
|
|
|
|
|
|
|
"mosaic-view",
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
viewLabels: [
|
|
|
|
|
|
|
|
"Табличный вид",
|
|
|
|
|
|
|
|
"Списочный вид",
|
|
|
|
|
|
|
|
"Мозаичный вид",
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
selectedOption: "table-view"
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
@ -89,20 +58,9 @@ export default defineComponent({
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="css" scoped>
|
|
|
|
<style lang="css" scoped>
|
|
|
|
.radio-switcher {
|
|
|
|
|
|
|
|
margin: 1rem;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.header-item {
|
|
|
|
.header-item {
|
|
|
|
padding: 0.5rem;
|
|
|
|
padding: 0.5rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.card-row {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.card-item {
|
|
|
|
|
|
|
|
margin: 1rem;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
</style>
|