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="IP分组" class="layout-padding-auto layout-padding-view">
				<Title class="ml-4" :title="t('marketingConfig.ipList')" />
				<div class="p-4 rounded">
					<el-button type="primary" @click="onClickAdd('ip')">{{ t('marketingConfig.addIpList') }}</el-button>
					<JCollapse
						@update="(item) => onClickEdit(item, 'ip')"
						@delete="(item) => onOpenDelete(item, 'ip')"
						:data="ipData"
						:activeNames="ipActiveId"
						:deleteText="t('marketingConfig.deleteListText')"
						:updateText="t('marketingConfig.updateText')"
					/>
				</div>
			</el-tab-pane>
			<el-tab-pane :label="t('marketingConfig.domainList')" name="域名分组" class="layout-padding-auto layout-padding-view">
				<Title class="ml-4" :title="t('marketingConfig.domainList')" />
				<div class="p-4 rounded">
					<el-button type="primary" @click="onClickAdd('domain')">{{ t('marketingConfig.addDomainList') }}</el-button>
					<JCollapse
						@update="(item) => onClickEdit(item, 'domain')"
						:data="domainData"
						@delete="(item) => onOpenDelete(item, 'domain')"
						:activeNames="domainActiveId"
						:deleteText="t('marketingConfig.deleteListText')"
						:updateText="t('marketingConfig.updateText')"
					/>
				</div>
			</el-tab-pane>
			<el-tab-pane :label="t('marketingConfig.disposition')" name="全局配置" class="layout-padding-auto layout-padding-view">
				<Title class="ml-4" :title="t('marketingConfig.disposition')" />
				<div class="p-4 rounded">
					<JCollapse
						:data="[{ title: 'IP集合', id: '1' }]"
						:activeNames="['1']"
						@update="(item) => (listEditOpen = true)"
						@delete="(item) => (closeIpTags = !closeIpTags)"
						:deleteText="closeIpTags ? t('marketingConfig.cancel') : t('marketingConfig.deleteIp')"
						:updateText="t('marketingConfig.addIp')"
					>
						<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.list" :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.list" :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' }]"
						:activeNames="['1']"
						@update="(item) => (domainEditOpen = true)"
						@delete="(item) => (closeDomainTags = !closeDomainTags)"
						:deleteText="closeDomainTags ? t('marketingConfig.cancel') : t('marketingConfig.deleteDomain')"
						:updateText="t('marketingConfig.addDomain')"
					>
						<template #default>
							<div class="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>
				<div class="w-[66%] ml-[-8px] mt-5">
					<el-form ref="menuDialogFormRef" :model="formData" :rule="dataRules" label-width="90px" class="flex flex-wrap">
						<el-form-item :label="t('marketingConfig.jumpMode')" prop="jumpMode" class="w-1/3">
							<el-select v-model="formData.jumpMode" :placeholder="t('marketingConfig.jumpModeTip')" clearable>
								<el-option v-for="item in listSelect" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
						<el-form-item :label="t('marketingConfig.triggerType')" prop="triggerType" class="w-1/3">
							<el-select v-model="formData.triggerType" :placeholder="t('marketingConfig.triggerTypeTip')" clearable>
								<el-option v-for="item in triggerSelect" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
						<el-form-item :label="t('marketingConfig.triggerFrequency')" prop="triggerFrequency" class="w-1/3">
							<el-input-number
								v-model="formData.triggerFrequency"
								class="!w-40"
								:min="1"
								:max="20"
								controls-position="right"
								:placeholder="t('marketingConfig.triggerFrequencyTip')"
							/>
						</el-form-item>

						<div class="w-full mb-[18px]">
							<el-form-item
								v-if="formData.jumpMode == '2' || formData.jumpMode == '3'"
								:label="t('marketingConfig.prompt')"
								prop="prompt"
								class="w-1/3"
							>
								<el-input v-model="formData.prompt" type="text" :placeholder="t('marketingConfig.promptTip')"></el-input>
							</el-form-item>
							<el-form-item
								v-if="formData.jumpMode == '1' || formData.jumpMode == '3'"
								:label="t('marketingConfig.jumpLink')"
								prop="jumpLink"
								class="w-1/3"
							>
								<el-input v-model="formData.jumpLink" type="text" :placeholder="t('marketingConfig.jumpLinkTip')"></el-input>
							</el-form-item>
						</div>
						<div class="w-full">
							<el-button type="primary" @click="onSubmit" class="w-[80px] ml-5">{{ t('common.saveBtn') }}</el-button>
						</div>
					</el-form>
				</div>
			</el-tab-pane>
		</el-tabs>
		<DomainEdit v-model:open="domainEditOpen" />
		<ListEdit v-model:open="listEditOpen" />
		<GroupingEdit v-model:open="groupingEditOpen" :type="openType" @onsuccess="getData" />
		<IpListEdit :type="openType" ref="menuDialogRef" @onsuccess="getData" />
		<el-dialog v-model="delOpen" title="提示" width="500" @close="delOpen = false">
			<span>确认删除{{ delObj?.title }}分组吗?</span>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="delOpen = false">取消</el-button>
					<el-button type="primary" :disabled="loading" @click="onDel(delObj)"> 确定 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" name="marketingConfig" setup>
import { delGroup, pageListDomain, pageListIp ,getConfigIpList } from '/@/api/marketing/config';
import { useI18n } from 'vue-i18n';
import { useMessage } from '/@/hooks/message';
import { rule } from '/@/utils/validate';
import { ipSplicing } from '/@/utils/ipUpdate';

// 引入组件
const JCollapse = defineAsyncComponent(() => import('/@/components/JCollapse/index.vue'));
const Title = defineAsyncComponent(() => import('/@/components/Title/index.vue'));
const DomainEdit = defineAsyncComponent(() => import('./components/domainEdit.vue'));
const ListEdit = defineAsyncComponent(() => import('./components/listEdit.vue'));
const GroupingEdit = defineAsyncComponent(() => import('./components/ipGroupingEdit.vue'));
const IpListEdit = defineAsyncComponent(() => import('./components/ipListEdit.vue'));
const { t } = useI18n();
// 定义变量内容
const activeName = ref('IP分组');
//关闭或打开tabs的关闭按钮
const closeDomainTags = ref(false);
const closeIpTags = ref(false);

// 弹窗
const domainEditOpen = ref(false);
const listEditOpen = ref(false);
const groupingEditOpen = ref(false);
const delOpen = ref(false);
const loading = ref(false);
const menuDialogRef = ref();

const domainActiveId = ref([]);
const ipActiveId = ref([]);

// const ipListEditOpen = ref(false);
const domainData = ref([]);
const ipData = ref([]);
const delObj = ref({});
const openType = ref('ip'); // 'ip' or 'domain'

const listSelect = ref([
	{
		value: '1',
		label: '跳转链接',
	},
	{
		value: '2',
		label: '提示信息',
	},
	{
		value: '3',
		label: '提示并跳转',
	},
]);
const triggerSelect = ref([
	{
		value: '1',
		label: '仅一次跳转',
	},
	{
		value: '2',
		label: '多次跳转',
	},
]);

const menuDialogFormRef = ref();
const formData = ref({
	jumpMode: '1',
	triggerType: '',
	jumpLink: '',
	triggerFrequency: '',
	prompt: '',
});
const onOpenDelete = (item: any, type: any) => {
	console.log(item);

	delObj.value = { ...item, type };
	console.log(delObj.value);

	delOpen.value = true;
};
const getData = () => {
	openType.value === 'ip' ? getIpData() : getDomainData();
	
};

// // 表单校验规则
const dataRules = reactive({
	jumpLink: [{ validator: rule.url, trigger: 'blur' }],
});

const data = ref([
	{
		title: '分组1',
		id: '1',
		list: ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4'],
	},
	{
		title: '分组2',
		id: '2',
		list: ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4'],
	},
	{
		title: '分组3',
		id: '3',
		list: ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4'],
	},
]);
const whiteList = ref([{ label: '站大' }, { label: '站而' }, { label: '站撒' }, { label: '站爱' }]);

const onSubmit = () => {
	useMessage().success(t(formData.value ? 'common.editSuccessText' : 'common.addSuccessText'));
};
const handleClick = (data: any) => {
	if (data.props.label === 'IP分组') {
		getIpData();
	} else if (data.props.label === '域名分组') {
		getDomainData();
	} else {
		getConfig()
	}
};
const onDel = async (data: any) => {
	try {
		loading.value = true;
		await delGroup({
			ids: [data.id],
			groupType: data.type === 'ip' ? 1 : 2,
		});
		useMessage().success(t('common.delSuccessText'));
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
		loading.value = false;
		delOpen.value = false;
		data.type === 'ip' ? getIpData() : getDomainData();
	}
};

const onClickAdd = (type: string) => {
	openType.value = type;
	groupingEditOpen.value = true;
};
const onClickEdit = (item: any, type: string) => {
	openType.value = type;
	// ipListEditOpen.value = true;
	onOpenEditMenu(type, item);
};

// 打开编辑菜单弹窗
const onOpenEditMenu = (type: string, row: any) => {
	menuDialogRef.value.openDialog(type, row);
};
const getConfig = () => { 
      configIp()
};
const configIp = async()=>{
	await getConfigIpList().then((val) => { 
		console.log(val.data);
		
	});
}
const getDomainData = async () => {
	await pageListDomain().then((val) => {
		domainActiveId.value = [];
		domainData.value = val.data.map((item: any) => {
			domainActiveId.value.push(item.id);
			return {
				...item,
				title: item.groupName,
				id: item.id,
				list: item.domains.map((items: any) => {
					return {
						...items,
						id: items.id,
						value: items.domain,
					};
				}),
			};
		});
	});
};
const getIpData = async () => {
	await pageListIp().then((val) => {
		ipActiveId.value = [];
		ipData.value = val.data.map((item: any) => {
			ipActiveId.value.push(item.id);
			return {
				...item,
				title: item.groupName,
				id: item.id,
				list: item.ips.map((items: any) => {
					return {
						...items,
						id: items.id,
						value: ipSplicing(items.startIp, items.endIp),
					};
				}),
			};
		});
	});
};

onMounted(() => {
	//获取IP列表
	getIpData();
});
</script>
<style  lang="scss">
.is-top {
	margin-bottom: 0 !important;
}
.el-collapse-item__content {
	padding-bottom: 0 !important;
}
.el-tabs--card > .el-tabs__header .el-tabs__item {
	background-color: #fff;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
	background-color: #e8f2fe;
	border-bottom-color: #e8f2fe;
}
</style>