data-marketing-platform/src/views/marketing/config/index.vue

<template>
	<div class="layout-padding">
		<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane :label="t('marketingConfig.ipList')" name="first" class="layout-padding-auto layout-padding-view">
				<Title :title="t('marketingConfig.ipList')" />
				<div class="p-4 rounded">
					<el-button type="primary" @click="onAddClick">{{ t('marketingConfig.addIpList') }}</el-button>
					<JCollapse
						@update="(item) => console.log(item)"
						@delete="(item) => console.log(item)"
						:data="data"
						:deleteText="t('marketingConfig.deleteListText')"
						:updateText="t('marketingConfig.updateText')"
					/>
				</div>
			</el-tab-pane>
			<el-tab-pane :label="t('marketingConfig.domainList')" name="second" class="layout-padding-auto layout-padding-view">
				<Title class="" :title="t('marketingConfig.domainList')" />
				<div class="p-4 rounded">
					<el-button type="primary" @click="onAddClick">{{ t('marketingConfig.addDomainList') }}</el-button>
					<JCollapse
						@update="(item) => console.log(item)"
						:data="data"
						@delete="(item) => console.log(item)"
						:deleteText="t('marketingConfig.deleteListText')"
						:updateText="t('marketingConfig.updateText')"
					/>
				</div>
			</el-tab-pane>
			<el-tab-pane :label="t('marketingConfig.disposition')" name="third" class="layout-padding-auto layout-padding-view">
				<Title class="" :title="t('marketingConfig.disposition')" />
				<div class="p-4 rounded">
					<JCollapse
						:data="[{title: 'IP集合',id: '1',}]"
						@update="(item) => console.log(item)"
						@delete="(item) => closeIpTags = !closeIpTags"
						:deleteText="t('marketingConfig.deleteText')"
						:updateText="t('marketingConfig.updateText')"
					>
						<template #default>
							<div class="border-b p-2 items-center flex flex-wrap">
								<span class="mr-2">白名单</span>
								<el-popover v-for="item in data" :key="item.id" width="200" trigger="hover" placement="top">
									<div class="flex flex-wrap">
										<span v-for="ip in item.ips" :key="ip" class="ml-2">
											{{ ip }}
										</span>
									</div>
									<template #reference>
										<el-tag effect="light" color="#f4f4f4" :closable="closeIpTags" round class="ml-1 cursor-pointer">
											{{ item.title }}
										</el-tag>
									</template>
								</el-popover>
							</div>
							<div class="p-2 items-center flex flex-wrap">
								<span class="mr-2">黑名单</span>
								<el-popover v-for="item in data" :key="item.id" width="200" trigger="hover" placement="top">
									<div class="flex flex-wrap">
										<span v-for="ip in item.ips" :key="ip" class="ml-2">
											{{ ip }}
										</span>
									</div>
									<template #reference>
										<el-tag effect="light" color="#f4f4f4" :closable="closeIpTags" round class="ml-1 cursor-pointer">
											{{ item.title }}
										</el-tag>
									</template>
								</el-popover>
							</div>
						</template>
					</JCollapse>

					<JCollapse
					    class="mt-4"
						:data="[
							{
								title: '域名集合',
								id: '1',
							},
						]"
						@update="(item) => domainEditOpen = true"
						@delete="(item) => closeDomainTags = !closeDomainTags"
						:deleteText="closeTags ? t('marketingConfig.cancel') : t('marketingConfig.deleteDomain')"
						:updateText="t('marketingConfig.addDomain')"
					>
						<template #default>
							<div class="border-b p-2 items-center flex flex-wrap">
								<el-tag v-for="item in whiteList" :key="item" effect="light" :closable="closeDomainTags" color="#f4f4f4" round class="ml-1 cursor-pointer">
									{{ item.label }}
								</el-tag>
							</div>
						</template>
					</JCollapse>
				</div>
			</el-tab-pane>
		</el-tabs>
		<DomainEdit v-model:open="domainEditOpen" />
	</div>
</template>

<script lang="ts" name="marketingConfig" setup>
import { delObj, pageList, update } from '/@/api/marketing/config';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useI18n } from 'vue-i18n';

// 引入组件
const JCollapse = defineAsyncComponent(() => import('/@/components/JCollapse/index.vue'));
const Title = defineAsyncComponent(() => import('/@/components/Title/index.vue'));
const DomainEdit = defineAsyncComponent(() => import('./components/domainEdit.vue'));
const { t } = useI18n();
// 定义变量内容
const activeName = ref('first');
const closeDomainTags = ref(false);
const closeIpTags = ref(false);
const domainEditOpen = ref(false);
const data = ref([
	{
		title: '分组1',
		id: '1',
		ips: ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4'],
	},
	{
		title: '分组2',
		id: '2',
		ips: ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4'],
	},
	{
		title: '分组3',
		id: '3',
		ips: ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4'],
	},
]);
const whiteList = ref([{ label: '站大' }, { label: '站而' }, { label: '站撒' }, { label: '站爱' }]);

const menuDialogRef = ref();
const state: BasicTableProps = reactive<BasicTableProps>({
	pageList: pageList, // H
	queryForm: {
		domain: '',
	},
});

const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);

// 打开编辑菜单弹窗
const onOpenEditMenu = (type: string, row: any) => {
	menuDialogRef.value.openDialog(type, row);
};

// 删除操作
const handleDelete = async (ids: string[]) => {};
</script>
<style  lang="scss">
.is-top {
	margin-bottom: 0 !important;
}
.el-collapse-item__content {
	padding-bottom: 0 !important;
}
</style>