83 lines
2.2 KiB
Vue
83 lines
2.2 KiB
Vue
<template>
|
|
<el-card>
|
|
<div>
|
|
<el-header>
|
|
<div class="yxt-flex-between">
|
|
<div>
|
|
<el-tag>系统配置:您可以对您的网站进行自定义配置</el-tag>
|
|
</div>
|
|
<div>
|
|
<el-button-group>
|
|
<el-button type="primary" size="small" :icon="FolderAdd" @click="tabsDrawer = true"> 添加分组 </el-button>
|
|
<el-button size="small" type="warning" :icon="Edit" @click="contentDrawer = true"> 添加内容 </el-button>
|
|
</el-button-group>
|
|
</div>
|
|
</div>
|
|
</el-header>
|
|
</div>
|
|
<div>
|
|
<el-drawer v-if="tabsDrawer" title="添加分组" v-model="tabsDrawer" direction="rtl" size="30%">
|
|
<addTabs></addTabs>
|
|
</el-drawer>
|
|
</div>
|
|
<div>
|
|
<el-drawer v-if="contentDrawer" title="添加内容" v-model="contentDrawer" direction="rtl" size="30%">
|
|
<addContent></addContent>
|
|
</el-drawer>
|
|
</div>
|
|
<el-tabs type="border-card" v-model="editableTabsValue">
|
|
<el-tab-pane :key="index" v-for="(item, index) in editableTabs" :label="item.title" :name="item.key">
|
|
<span slot="label" v-if="item.icon"><i :class="item.icon" style="font-weight: 1000; font-size: 16px"></i></span>
|
|
<el-row v-if="item.icon">
|
|
<el-col :offset="4" :span="8">
|
|
<addContent></addContent>
|
|
</el-col>
|
|
</el-row>
|
|
<formContent v-else :options="item" :editableTabsItem="item"></formContent>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { Edit, FolderAdd } from '@element-plus/icons-vue';
|
|
import * as api from './api';
|
|
import addTabs from './components/addTabs.vue';
|
|
import addContent from './components/addContent.vue';
|
|
import formContent from './components/formContent.vue';
|
|
import { ref, onMounted } from 'vue';
|
|
let tabsDrawer = ref(false);
|
|
let contentDrawer = ref(false);
|
|
let editableTabsValue = ref('base');
|
|
let editableTabs: any = ref([]);
|
|
|
|
const getTabs = () => {
|
|
api
|
|
.GetList({
|
|
limit: 999,
|
|
parent__isnull: true,
|
|
})
|
|
.then((res: any) => {
|
|
let data = res.data;
|
|
data.push({
|
|
title: '无',
|
|
icon: 'el-icon-plus',
|
|
key: 'null',
|
|
});
|
|
editableTabs.value = data;
|
|
});
|
|
};
|
|
|
|
onMounted(() => {
|
|
getTabs();
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
/*用 flex 两边对齐*/
|
|
.yxt-flex-between {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
</style>
|