126 lines
2.9 KiB
Vue
126 lines
2.9 KiB
Vue
<template>
|
|
<div class="columns mx-0">
|
|
<div class="column is-narrow px-0 mx-0">
|
|
<div style="width: 200px">
|
|
<div class="py-1" v-for="v in array">
|
|
<a
|
|
:class="
|
|
(current ? current.code === v.code : false)
|
|
? 'has-text-primary has-text-weight-bold'
|
|
: ''
|
|
"
|
|
@click="changeTab(v)"
|
|
>{{ v.name }}</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="fsb-20 mb-3" v-if="current">{{ current.name }}</div>
|
|
<DataView
|
|
v-bind="current.vbind"
|
|
v-if="current && current.typeView === 'table'"
|
|
></DataView>
|
|
<component
|
|
v-if="current && current.typeView === 'component'"
|
|
:is="current.component"
|
|
v-bind="current.vbind"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
var array = [
|
|
{
|
|
code: 'transactionphase',
|
|
name: 'Giai đoạn giao dịch',
|
|
typeView: 'table',
|
|
vbind: {
|
|
api: 'transactionphase',
|
|
setting: 'transaction-phase',
|
|
pagename: 'pagedata99',
|
|
timeopt: 36000,
|
|
modal: {
|
|
component: 'parameter/TransactionPhase',
|
|
title: 'Transaction phase',
|
|
height: '400px',
|
|
vbind: { api: 'transactionphase' },
|
|
},
|
|
},
|
|
},
|
|
{
|
|
code: 'cart',
|
|
name: 'Danh sách giỏ hàng',
|
|
typeView: 'table',
|
|
vbind: {
|
|
api: 'cart',
|
|
setting: 'parameter-fields-cart',
|
|
pagename: 'parameter-fields-cart',
|
|
timeopt: 36000,
|
|
modal: {
|
|
component: 'parameter/CodeName',
|
|
title: 'Giỏ hàng',
|
|
height: '400px',
|
|
vbind: { api: 'cart' },
|
|
},
|
|
},
|
|
},
|
|
{
|
|
code: 'documenttype',
|
|
name: 'Loại tài liệu',
|
|
typeView: 'table',
|
|
vbind: {
|
|
api: 'documenttype',
|
|
setting: 'parameter-fields',
|
|
pagename: 'pagedata99',
|
|
timeopt: 36000,
|
|
modal: {
|
|
component: 'parameter/CodeName',
|
|
title: 'Document type',
|
|
height: '400px',
|
|
vbind: { api: 'documenttype' },
|
|
},
|
|
},
|
|
},
|
|
{
|
|
code: 'discounttype',
|
|
name: 'Danh sách chiết khấu',
|
|
typeView: 'table',
|
|
vbind: {
|
|
api: 'discounttype',
|
|
setting: 'parameter-discount',
|
|
pagename: 'tableDiscountType',
|
|
timeopt: 36000,
|
|
modal: {
|
|
component: 'parameter/DiscountType',
|
|
title: 'Thông tin chiết khấu',
|
|
height: '400px',
|
|
vbind: { api: 'discounttype' },
|
|
},
|
|
},
|
|
},
|
|
{
|
|
code: 'gifttype',
|
|
name: 'Danh sách quà tặng',
|
|
typeView: 'table',
|
|
vbind: {
|
|
api: 'gift',
|
|
setting: 'parameter-gift',
|
|
pagename: 'tableDiscountType',
|
|
timeopt: 36000,
|
|
modal: {
|
|
component: 'parameter/GiftType',
|
|
title: 'Thông tin quà tặng',
|
|
height: '400px',
|
|
vbind: { api: 'gift' },
|
|
},
|
|
},
|
|
},
|
|
];
|
|
var current = ref(array[0]);
|
|
function changeTab(v) {
|
|
current.value = null;
|
|
setTimeout(() => (current.value = v));
|
|
}
|
|
</script>
|