<template>
|
<PageWrapper title="客户设置" :class="`${prefixCls}`" dense contentFullHeight fixedHeight>
|
<div class="px-20px">
|
<a-tabs v-model:activeKey="activeKey">
|
<template v-for="item in tabList" :key="item.key">
|
<a-tab-pane :tab="item.name">
|
<ScrollContainer class="scroll-wrap">
|
<component :is="tabs[item.component]" />
|
</ScrollContainer>
|
</a-tab-pane>
|
</template>
|
</a-tabs>
|
<!-- <a-tabs v-model:activeKey="activeKey">-->
|
<!-- <a-tab-pane key="1" tab="移入公海规则">-->
|
<!-- <PublicPoolRule v-if="activeKey === '1'"></PublicPoolRule>-->
|
<!-- </a-tab-pane>-->
|
<!-- <a-tab-pane key="2" tab="分组设置" force-render>-->
|
<!-- <MailboxManagement v-if="activeKey === '2'"></MailboxManagement>-->
|
<!-- </a-tab-pane>-->
|
<!-- <a-tab-pane key="3" tab="标签管理"-->
|
<!-- ><QuickText v-if="activeKey === '3'"></QuickText-->
|
<!-- ></a-tab-pane>-->
|
<!-- <a-tab-pane key="4" tab="客户来源"><Folder v-if="activeKey === '4'" /></a-tab-pane>-->
|
<!-- </a-tabs>-->
|
</div>
|
</PageWrapper>
|
</template>
|
|
<script lang="ts" setup>
|
import { PageWrapper } from '@/components/Page';
|
import PublicPoolRule from "./settings/PublicPoolRule.vue";
|
import Group from "./settings/Group.vue";
|
import Tags from "./settings/Tags.vue";
|
import From from "./settings/From.vue";
|
import QuickText from "@/views/email/Utils/quickText.vue";
|
import MailboxManagement from "@/views/email/Utils/mailboxManagement.vue";
|
import Convention from "@/views/email/Utils/convention.vue";
|
import Label from "@/views/email/Utils/label.vue";
|
import Blacklist from "@/views/email/Utils/blacklist.vue";
|
import Folder from "@/views/email/Utils/folder.vue";
|
import {useDesign} from "@/hooks/web/useDesign";
|
import {ref,onMounted} from "vue";
|
import { useRoute } from 'vue-router';
|
import ScrollContainer from "@/components/Container/src/ScrollContainer.vue";
|
|
const {prefixCls} = useDesign('customer-settings');
|
const activeKey = ref('1');
|
|
const tabs = {
|
PublicPoolRule,
|
Group,
|
Tags,
|
From,
|
MailboxManagement,
|
QuickText,
|
Label,
|
Convention,
|
Folder,
|
Blacklist,
|
}
|
|
const tabList = [
|
{
|
key: '1',
|
name: '移入公海规则',
|
component: 'PublicPoolRule',
|
},
|
{
|
key: '2',
|
name: '分组设置',
|
component: 'Group',
|
},
|
{
|
key: '3',
|
name: '标签管理',
|
component: 'Tags',
|
},
|
{
|
key: '4',
|
name: '客户来源',
|
component: 'From',
|
},
|
// {
|
// key: '4',
|
// name: '文件夹',
|
// component: 'Folder',
|
// },
|
// {
|
// key: '6',
|
// name: '黑名单',
|
// component: 'Blacklist',
|
// },
|
];
|
|
const route = useRoute();
|
const urlParams = {};
|
|
onMounted(() => {
|
// 将路由的查询参数复制到响应式对象
|
for (const [key, value] of Object.entries(route.query)) {
|
urlParams[key] = value;
|
}
|
Logger.info('urlParams', urlParams);
|
activeKey.value = urlParams['tab'] || '1';
|
Logger.info('activeKey', activeKey);
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
@prefix-cls: ~'@{namespace}-customer-settings';
|
.@{prefix-cls} {
|
background-color: var(--component-background-color);
|
:deep(.ant-page-header) {
|
padding: 15px 24px;
|
}
|
.scroll-wrap{
|
height: calc(100vh - 220px);
|
}
|
}
|
</style>
|
