<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>