<template>
|
<app-page-tab v-bind="tabPageProps">
|
<template #header-button="scope" v-if="view === 'index'">
|
<el-button
|
size="small"
|
icon="View"
|
type="primary"
|
:disabled="!scope.selected?.edit?.id"
|
@click="onOpenDetail({...scope.selected.edit})"
|
>
|
{{
|
$t('common.button.text.view')
|
}}
|
</el-button>
|
<el-button
|
size="small"
|
icon="Plus"
|
type="primary"
|
@click="onOpenTab({})">
|
{{
|
$t('common.button.text.add')
|
}}
|
</el-button>
|
<el-button
|
size="small"
|
type="primary"
|
icon="Edit"
|
:disabled="!scope.selected?.edit?.id"
|
@click="onOpenTab({...scope.selected.edit})"
|
>
|
{{ $t('common.button.text.edit') }}
|
</el-button>
|
<el-button
|
:disabled="!scope.selected?.edit?.id"
|
size="small"
|
type="danger"
|
icon="Delete"
|
@click="onDelete(scope.selected?.edit)"
|
>
|
</el-button>
|
</template>
|
<template #index="scope">
|
<index-page v-bind="indexPageProps"/>
|
</template>
|
<template #form="scope">
|
<form-page/>
|
</template>
|
<template #detail="scope">
|
<detail-page/>
|
</template>
|
</app-page-tab>
|
</template>
|
|
<script setup name="feeModelBand">
|
|
import IndexPage from './IndexPage';
|
import FormPage from './FormPage';
|
import DetailPage from './DetailPage';
|
|
import {useI18n} from 'vue-i18n';
|
|
const {t} = useI18n();
|
|
const router = useRouter();
|
|
const params = router.currentRoute.value.query;
|
|
const tabPageRef = ref();
|
const indexPageRef = ref();
|
|
/**
|
* index form chart
|
*/
|
const view = params.view || 'index';
|
|
const tabPageProps = {
|
ref: tabPageRef,
|
tabList: [{name: view, title: t('views.fee.feeModelBand.title')}],
|
};
|
|
|
const indexPageProps = {
|
ref: indexPageRef,
|
subCurrent(row) {
|
tabPageRef.value.setSelected(row);
|
}
|
};
|
|
const onOpenTab = (row) => {
|
indexPageRef.value.onOpenTab(row);
|
}
|
|
const onDelete = (row) => {
|
indexPageRef.value.onDelete(row);
|
}
|
|
const onOpenDetail = (row) => {
|
indexPageRef.value.onOpenDetail(row);
|
}
|
|
|
</script>
|
