|
|
@@ -2,25 +2,26 @@
|
|
|
<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')" />
|
|
|
+ <Title class="ml-4" :title="t('marketingConfig.ipList')" />
|
|
|
<div class="p-4 rounded">
|
|
|
- <el-button type="primary" @click="onAddClick">{{ t('marketingConfig.addIpList') }}</el-button>
|
|
|
+ <el-button type="primary" @click="onClickAdd('ip')">{{ t('marketingConfig.addIpList') }}</el-button>
|
|
|
<JCollapse
|
|
|
- @update="(item) => console.log(item)"
|
|
|
+ @update="(item) => onClickEdit(item, 'ip')"
|
|
|
@delete="(item) => console.log(item)"
|
|
|
:data="data"
|
|
|
+ :activeNames="['1', '2', '3']"
|
|
|
: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')" />
|
|
|
+ <Title class="ml-4" :title="t('marketingConfig.domainList')" />
|
|
|
<div class="p-4 rounded">
|
|
|
- <el-button type="primary" @click="onAddClick">{{ t('marketingConfig.addDomainList') }}</el-button>
|
|
|
+ <el-button type="primary" @click="onClickAdd('domain')">{{ t('marketingConfig.addDomainList') }}</el-button>
|
|
|
<JCollapse
|
|
|
- @update="(item) => console.log(item)"
|
|
|
- :data="data"
|
|
|
+ @update="(item) => onClickEdit(item, 'domain')"
|
|
|
+ :data="domainData"
|
|
|
@delete="(item) => console.log(item)"
|
|
|
:deleteText="t('marketingConfig.deleteListText')"
|
|
|
:updateText="t('marketingConfig.updateText')"
|
|
|
@@ -28,14 +29,15 @@
|
|
|
</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')" />
|
|
|
+ <Title class="ml-4" :title="t('marketingConfig.disposition')" />
|
|
|
<div class="p-4 rounded">
|
|
|
<JCollapse
|
|
|
- :data="[{title: 'IP集合',id: '1',}]"
|
|
|
- @update="(item) => listEditOpen = true"
|
|
|
- @delete="(item) => closeIpTags = !closeIpTags"
|
|
|
- :deleteText="t('marketingConfig.deleteText')"
|
|
|
- :updateText="t('marketingConfig.updateText')"
|
|
|
+ :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">
|
|
|
@@ -72,87 +74,220 @@
|
|
|
</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')"
|
|
|
+ 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="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">
|
|
|
+ <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" />
|
|
|
+ <IpListEdit :type="openType" ref="menuDialogRef" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" name="marketingConfig" setup>
|
|
|
-import { delObj, pageList, update } from '/@/api/marketing/config';
|
|
|
+import { delObj, pageListDomain, update } from '/@/api/marketing/config';
|
|
|
import { BasicTableProps, useTable } from '/@/hooks/table';
|
|
|
import { useI18n } from 'vue-i18n';
|
|
|
+import { useMessage } from '/@/hooks/message';
|
|
|
+import { rule } from '/@/utils/validate';
|
|
|
+import { identity } from '@vueuse/core';
|
|
|
|
|
|
// 引入组件
|
|
|
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('first');
|
|
|
+//关闭或打开tabs的关闭按钮
|
|
|
const closeDomainTags = ref(false);
|
|
|
const closeIpTags = ref(false);
|
|
|
+
|
|
|
+// 弹窗
|
|
|
const domainEditOpen = ref(false);
|
|
|
const listEditOpen = ref(false);
|
|
|
+const groupingEditOpen = ref(false);
|
|
|
+// const ipListEditOpen = ref(false);
|
|
|
+const domainData = ref([]);
|
|
|
+
|
|
|
+const listSelect = ref([
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: '跳转链接',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '2',
|
|
|
+ label: '提示信息',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '3',
|
|
|
+ label: '提示并跳转',
|
|
|
+ },
|
|
|
+]);
|
|
|
+const triggerSelect = ref([
|
|
|
+ {
|
|
|
+ value: 'group1',
|
|
|
+ label: '仅一次跳转',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'group2',
|
|
|
+ label: '多次跳转',
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+const menuDialogFormRef = ref();
|
|
|
+const formData = ref({
|
|
|
+ jumpMode: '1',
|
|
|
+ triggerType: '',
|
|
|
+ jumpLink: '',
|
|
|
+ triggerFrequency: '',
|
|
|
+ prompt: '',
|
|
|
+});
|
|
|
+
|
|
|
+// // 表单校验规则
|
|
|
+const dataRules = reactive({
|
|
|
+ jumpLink: [{ validator: rule.url, trigger: 'blur' }],
|
|
|
+});
|
|
|
+
|
|
|
+const openType = ref('ip'); // 'ip' or 'domain'
|
|
|
const data = ref([
|
|
|
{
|
|
|
title: '分组1',
|
|
|
id: '1',
|
|
|
- ips: ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4'],
|
|
|
+ list: ['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'],
|
|
|
+ list: ['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'],
|
|
|
+ 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 menuDialogRef = ref();
|
|
|
-const state: BasicTableProps = reactive<BasicTableProps>({
|
|
|
- pageList: pageList, // H
|
|
|
- queryForm: {
|
|
|
- domain: '',
|
|
|
- },
|
|
|
+const state = reactive({
|
|
|
+ pageListDomain: pageListDomain(),
|
|
|
});
|
|
|
+state.pageListDomain;
|
|
|
|
|
|
-const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
|
|
|
+const onSubmit = () => {
|
|
|
+ useMessage().success(t(formData.value ? 'common.editSuccessText' : 'common.addSuccessText'));
|
|
|
+};
|
|
|
+
|
|
|
+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 handleDelete = async (ids: string[]) => {};
|
|
|
+onMounted(() => {
|
|
|
+ // 获取域名列表
|
|
|
+ state.pageListDomain.then((val) => {
|
|
|
+ domainData.value = val.data.map((item :any) => {
|
|
|
+ console.log(item);
|
|
|
+ return {
|
|
|
+ title: item.groupName,
|
|
|
+ list: item.domains.map((items :any) => {
|
|
|
+ return{
|
|
|
+ id:items.id,
|
|
|
+ value:items.domain
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ };
|
|
|
+ });
|
|
|
+ console.log(domainData.value);
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ //获取IP列表
|
|
|
+});
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
.is-top {
|
|
|
@@ -161,4 +296,11 @@ const handleDelete = async (ids: string[]) => {};
|
|
|
.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>
|
