<template>
|
<app-list-wrapper v-bind="listWrapperProps">
|
<app-layout-row :top="-10" :bottom="110" :height="'100%'">
|
<app-layout-col :span="24">
|
<app-tab-wrapper v-bind="tabWrapperProps">
|
<template #header-button="scope">
|
<el-button
|
icon="Plus"
|
size="small"
|
type="primary"
|
@click="onDialog({parent_id: scope.selected.id})">
|
</el-button>
|
<el-button
|
size="small"
|
type="primary"
|
icon="Edit"
|
:disabled="!scope.selected.id"
|
@click="onDialog(scope.selected)">
|
</el-button>
|
<el-button
|
size="small"
|
type="danger"
|
icon="Delete"
|
:disabled="!scope.selected.id"
|
@click="onDelete(scope.selected)"
|
>
|
</el-button>
|
</template>
|
<template #content="scope">
|
<content-table v-bind="contentTableProps"/>
|
</template>
|
</app-tab-wrapper>
|
</app-layout-col>
|
</app-layout-row>
|
</app-list-wrapper>
|
</template>
|
|
<script setup>
|
|
import {useI18n} from 'vue-i18n';
|
import ContentTable from "./ContentTable";
|
|
const {t} = useI18n();
|
|
const tabWrapperRef = ref();
|
|
const contentTableRef = ref();
|
|
const listWrapperProps = {
|
headerDom: false,
|
title: '列表',
|
complementHeight: 45,
|
};
|
|
const tabWrapperProps = {
|
ref: tabWrapperRef,
|
tabList: [
|
{name: 'content', label: '字典内容'},
|
],
|
subActive() {
|
const selected = tabWrapperRef.value.getSelected();
|
setActive(selected)
|
}
|
};
|
|
const contentTableProps = {
|
ref: contentTableRef,
|
subCurrent(val) {
|
tabWrapperRef.value.setSelected(val);
|
}
|
};
|
|
const onDelete = (row) => {
|
}
|
|
const onDialog = () => {
|
|
}
|
|
|
const setActive = (val) => {
|
if (Object.keys(val).length > 0) {
|
|
contentTableRef.value?.setActive(val);
|
}
|
}
|
|
defineExpose({
|
setActive
|
});
|
|
</script>
|
