<div class="p-4 rounded"> <el-button style="margin-bottom: 10px;" type="primary" @click="onClickAdd('ip')">{{ t('marketingConfig.addIpList') }}</el-button><br> 筛选分组：<el-input placeholder="请输入分组名称" clearable style="display: inline-block; width: 200px; margin-left: 5px;" v-model="queryIPName" /> <div v-if="ipData.length > 0" class="overflow-y-auto mt-2" style="height: calc(100vh - 300px)"> <JCollapse @update="(item) => onClickEdit(item, 'ip')" @delete="(item) => onOpenDelete(item, 'ip')" :data="showIPData" :activeNames="ipActiveId" :deleteText="t('marketingConfig.deleteListText')" :updateText="t('marketingConfig.updateText')" /> </div> </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 style="margin-bottom: 10px;" type="primary" @click="onClickAdd('domain')">{{ t('marketingConfig.addDomainList') }}</el-button><br> 筛选分组：<el-input placeholder="请输入分组名称" clearable style="display: inline-block; width: 200px; margin-left: 5px;" v-model="queryDomainName" /> <div v-if="domainData.length > 0" class="overflow-y-auto mt-2" style="height: calc(100vh - 300px)"> <JCollapse @update="(item) => onClickEdit(item, 'domain')" :data="showDomainData" @delete="(item) => onOpenDelete(item, 'domain')" :activeNames="domainActiveId" :deleteText="t('marketingConfig.deleteListText')" :updateText="t('marketingConfig.updateText')" /> </div> <div v-else class="ml-2">暂无数据</div> </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 overflow-y-auto" style="max-height: calc(100vh - 350px)"> <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> <span v-for="item in ipWhiteList" :key="item.id"> <el-popover v-if="item?.sourceType === 1" width="280" @show="onLoadDetail(item)" trigger="hover" placement="top"> <div v-if="item.list.length > 0" class="flex flex-wrap"> <span v-for="ip in item.list" :key="ip" class="ml-2"> {{ ip }} </span> </div> <div v-else>暂无数据</div> <template #reference> <el-tag effect="light" color="#f4f4f4" :closable="closeIpTags" @close="handleDelete(item, 'ip')" round class="ml-1 cursor-pointer" > {{ item.groupName }} </el-tag> </template> </el-popover> <el-tag v-else effect="light" color="#f4f4f4" :closable="closeIpTags" @close="handleDelete(item, 'ip')" round class="ml-1 cursor-pointer" > {{ ipSplicing(item.startIp, item.endIp) }} </el-tag> </span> </div> <div class="p-2 items-center flex flex-wrap"> <span class="mr-2">黑名单</span> <span v-for="item in ipBlackList" :key="item.id"> <el-popover v-if="item?.sourceType === 1" width="280" @show="onLoadDetail(item, ipList)" trigger="hover" placement="top"> <div v-if="item.list.length > 0" class="flex flex-wrap"> <span v-for="ip in item.list" :key="ip" class="ml-2"> {{ ip }} </span> </div> <div v-else>暂无数据</div> <template #reference> <el-tag effect="light" color="#f4f4f4" :closable="closeIpTags" @close="handleDelete(item, 'ip')" round class="ml-1 cursor-pointer" > {{ item.groupName }} </el-tag> </template> </el-popover> <el-tag v-else effect="light" color="#f4f4f4" :closable="closeIpTags" @close="handleDelete(item, 'ip')" round class="ml-1 cursor-pointer" > {{ ipSplicing(item.startIp, item.endIp) }} </el-tag> </span> </div> </template> </JCollapse> <JCollapse class="mt-4" :data="[{ title: '域名集合', id: '1' }]" :activeNames="['1']" @update="() => (domainEditOpen = true)" @delete="() => (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"> <span v-if="domainList.length > 0"> <span v-for="item in domainList" :key="item.id"> <el-popover v-if="item?.sourceType === 1" width="280" @show="onLoadDetail(item)" trigger="hover" placement="top"> <div v-if="item.list.length > 0" class="flex flex-wrap"> <span v-for="domain in item.list" :key="domain.id" class="ml-2"> {{ domain.domain }} </span> </div> <div v-else>暂无数据</div> <template #reference> <el-tag effect="light" color="#f4f4f4" :closable="closeDomainTags" @close="handleDelete(item, 'domain')" round class="ml-1 cursor-pointer" > {{ item.groupName }} </el-tag> </template> </el-popover> <el-tag v-else effect="light" color="#f4f4f4" :closable="closeDomainTags" @close="handleDelete(item, 'domain')" round class="ml-1 cursor-pointer" > {{ item.domain }} </el-tag> </span> </span> <div class="text-gray-400 ml-2" v-else>--</div> </div> </template> </JCollapse> </div> <div class="w-[66%] ml-[-8px] mt-5"> <el-form ref="ruleFormRef" :model="formData" :rules="dataRules" label-width="90px" class="flex flex-wrap"> <el-form-item :label="t('marketingConfig.jumpMode')" prop="triggerMode" class="w-1/3"> <JDictSelect v-model:value="formData.triggerMode" :placeholder="t('marketingConfig.jumpModeTip')" :dictType="'triggerMode'" :selectFirst="true" :styleClass="'w-full'" /> </el-form-item> <el-form-item :label="t('marketingConfig.triggerType')" prop="triggerRule" class="w-1/3"> <JDictSelect v-model:value="formData.triggerRule" :placeholder="t('marketingConfig.triggerTypeTip')" :dictType="'triggerRule'" :selectFirst="true" :styleClass="'w-full'" /> </el-form-item> <el-form-item :label="t('marketingConfig.triggerFrequency')" prop="triggerNum" class="w-1/3"> <el-input v-model="formData.triggerNum" type="text" :placeholder="t('marketingConfig.triggerFrequencyTip')" /> </el-form-item> <div class="w-full mb-[18px]"> <el-form-item v-if="formData.triggerMode == '2' || formData.triggerMode == '3'" :label="t('marketingConfig.prompt')" prop="promptMsg" class="w-1/3" > <el-input v-model="formData.promptMsg" type="text" :placeholder="t('marketingConfig.promptTip')"></el-input> </el-form-item> <el-form-item v-if="formData.triggerMode == '1' || formData.triggerMode == '3'" :label="t('marketingConfig.jumpLink')" prop="url" class="w-1/3" > <el-input v-model="formData.url" type="text" :placeholder="t('marketingConfig.jumpLinkTip')"></el-input> </el-form-item> </div> <div class="w-full"> <el-button type="primary" @click="onSubmit(ruleFormRef)" class="w-[80px] ml-5">{{ t('common.saveBtn') }}</el-button> </div> </el-form> </div> </el-tab-pane> </el-tabs> <DomainEdit :select-data="domainData" v-model:open="domainEditOpen" @onsuccess="getConfig" /> <ListEdit :select-data="ipData" v-model:open="listEditOpen" @onsuccess="getConfig" /> <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, getConfigDomainList, delIpList, delDomainList, getGroupDetail, getConfigDetail, saveConfigDetail, } 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 JDictSelect = defineAsyncComponent(() => import('/@/components/JDictSelect/index.vue')); const { t } = useI18n(); // 定义变量内容 const activeName = ref('IP分组'); const queryIPName = ref(''); const queryDomainName = ref(''); const showIPData = computed(() => { return ipData.value.filter((item) => item.groupName.includes(queryIPName.value)); }); const showDomainData = computed(() => { return domainData.value.filter((item) => item.groupName.includes(queryDomainName.value)); }); //关闭或打开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 ipWhiteList = ref([]); // ip白名单 const ipBlackList = ref([]); // ip黑名单 const domainList = ref([]); const ruleFormRef = ref(); const formData = ref({ promptMsg: '', triggerMode: '', triggerRule: '', url: '', triggerNum: '', }); 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 onLoadDetail = async (item: any) => { if (item.list.length !== 0) return; await getGroupDetail({ id: item.groupId }).then((val) => { item.list = val.data.ips.map((item) => { return ipSplicing(item.startIp, item.endIp); }); }); }; // // 表单校验规则 const dataRules = reactive({ url: [ { required: true, message: '跳转连接不能为空', trigger: 'blur' }, { validator: rule.domain, trigger: 'blur' }, ], promptMsg: [ { required: true, message: '提示信息不能为空', trigger: 'blur' }, ], triggerNum: [ { required: true, message: '触发频率不能为空', trigger: 'blur' }, { pattern: /^(10000|[1-9]\d{0,3}|0)$|^(100%|[1-9]?\d%|0%)$/, message: '请输入 0-10000 的正整数或 0%-100% 的百分比', trigger: 'blur', }, ], }); const onSubmit = async () => { try { await ruleFormRef.value.validateField('triggerNum'); } catch (error) { // 验证失败，阻止后续逻辑执行 return; } if (formData.value.triggerMode === '1' || formData.value.triggerMode === '3') { try { await ruleFormRef.value.validateField('url'); } catch (error) { // 验证失败，阻止后续逻辑执行 return; } } try { loading.value = true; // 处理 triggerNum 参数 let triggerNum = formData.value.triggerNum; if (typeof triggerNum === 'string' && triggerNum.includes('%')) { // 如果包含百分比符号，去除百分比符号并除以100 const num = parseFloat(triggerNum.replace('%', '')); if (!isNaN(num)) { triggerNum = num / 100; } } await saveConfigDetail({ ...formData.value, triggerNum: triggerNum.toString(), }); useMessage().success(t('common.editSuccessText')); } catch (err) { useMessage().error(err.msg); } finally { loading.value = false; getConfig(); } }; const handleClick = (data: any) => { if (data.props.label === 'IP分组') { getIpData(); } else if (data.props.label === '域名分组') { getDomainData(); } else { getConfig(); } }; const handleDelete = async (item: any, type: string) => { console.log(item, type); delObj.value = { ...item, delListType: type }; delOpen.value = true; }; const onDel = async (data: any) => { if (data?.delListType) { try { if (data?.delListType === 'ip') { await delIpList(data.id); useMessage().success(t('common.delSuccessText')); } else if (data?.delListType === 'domain') { await delDomainList(data.id); useMessage().success(t('common.delSuccessText')); } } catch (err: any) { useMessage().error(err.msg); } finally { loading.value = false; delOpen.value = false; getConfig(); } return; } try { loading.value = true; await delGroup({ groupType: data.type === 'ip' ? 1 : 2, ids: [data.id], }); 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(); configDomain(); }; const configDomain = async () => { await getConfigDomainList().then((val) => { domainList.value = val.data.map((item) => { return { ...item, list: [], }; }); }); }; const configIp = async () => { await getConfigIpList().then((val) => { ipWhiteList.value = val.data .filter((item) => item.ipType === 1) .map((item) => { return { ...item, list: [] }; }); ipBlackList.value = val.data .filter((item) => item.ipType === 2) .map((item) => { return { ...item, list: [] }; }); }); }; 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), }; }), }; }); }); await getConfigDetail().then((val) => { formData.value = { promptMsg: '', triggerMode: '', triggerRule: '', url: '', triggerNum: '', }; formData.value = { ...val.data, triggerMode: val.data?.triggerMode.toString(), triggerRule: val.data?.triggerRule.toString(), triggerNum: parseFloat(val.data?.triggerNum) < 1 ? parseFloat(val.data?.triggerNum) * 100 + '%' : val.data?.triggerNum, }; }); }; onMounted(() => { //获取IP列表 getIpData(); getConfig(); }); </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>