|
@@ -2,11 +2,11 @@
|
|
<div class="layout-padding">
|
|
<div class="layout-padding">
|
|
<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
|
|
<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">
|
|
<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">
|
|
<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
|
|
<JCollapse
|
|
- @update="(item) => console.log(item)"
|
|
|
|
|
|
+ @update="(item) => onClickEdit(item,'ip')"
|
|
@delete="(item) => console.log(item)"
|
|
@delete="(item) => console.log(item)"
|
|
:data="data"
|
|
:data="data"
|
|
:deleteText="t('marketingConfig.deleteListText')"
|
|
:deleteText="t('marketingConfig.deleteListText')"
|
|
@@ -15,11 +15,11 @@
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
<el-tab-pane :label="t('marketingConfig.domainList')" name="second" class="layout-padding-auto layout-padding-view">
|
|
<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">
|
|
<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
|
|
<JCollapse
|
|
- @update="(item) => console.log(item)"
|
|
|
|
|
|
+ @update="(item) => onClickEdit(item,'domain')"
|
|
:data="data"
|
|
:data="data"
|
|
@delete="(item) => console.log(item)"
|
|
@delete="(item) => console.log(item)"
|
|
:deleteText="t('marketingConfig.deleteListText')"
|
|
:deleteText="t('marketingConfig.deleteListText')"
|
|
@@ -28,12 +28,12 @@
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
<el-tab-pane :label="t('marketingConfig.disposition')" name="third" class="layout-padding-auto layout-padding-view">
|
|
<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">
|
|
<div class="p-4 rounded">
|
|
<JCollapse
|
|
<JCollapse
|
|
- :data="[{title: 'IP集合',id: '1',}]"
|
|
|
|
- @update="(item) => listEditOpen = true"
|
|
|
|
- @delete="(item) => closeIpTags = !closeIpTags"
|
|
|
|
|
|
+ :data="[{ title: 'IP集合', id: '1' }]"
|
|
|
|
+ @update="(item) => (listEditOpen = true)"
|
|
|
|
+ @delete="(item) => (closeIpTags = !closeIpTags)"
|
|
:deleteText="t('marketingConfig.deleteText')"
|
|
:deleteText="t('marketingConfig.deleteText')"
|
|
:updateText="t('marketingConfig.updateText')"
|
|
:updateText="t('marketingConfig.updateText')"
|
|
>
|
|
>
|
|
@@ -72,31 +72,64 @@
|
|
</JCollapse>
|
|
</JCollapse>
|
|
|
|
|
|
<JCollapse
|
|
<JCollapse
|
|
- class="mt-4"
|
|
|
|
|
|
+ class="mt-4"
|
|
:data="[
|
|
:data="[
|
|
{
|
|
{
|
|
title: '域名集合',
|
|
title: '域名集合',
|
|
id: '1',
|
|
id: '1',
|
|
},
|
|
},
|
|
]"
|
|
]"
|
|
- @update="(item) => domainEditOpen = true"
|
|
|
|
- @delete="(item) => closeDomainTags = !closeDomainTags"
|
|
|
|
|
|
+ @update="(item) => (domainEditOpen = true)"
|
|
|
|
+ @delete="(item) => (closeDomainTags = !closeDomainTags)"
|
|
:deleteText="closeTags ? t('marketingConfig.cancel') : t('marketingConfig.deleteDomain')"
|
|
:deleteText="closeTags ? t('marketingConfig.cancel') : t('marketingConfig.deleteDomain')"
|
|
:updateText="t('marketingConfig.addDomain')"
|
|
:updateText="t('marketingConfig.addDomain')"
|
|
>
|
|
>
|
|
<template #default>
|
|
<template #default>
|
|
<div class="border-b p-2 items-center flex flex-wrap">
|
|
<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">
|
|
|
|
|
|
+ <el-tag
|
|
|
|
+ v-for="item in whiteList"
|
|
|
|
+ :key="item"
|
|
|
|
+ effect="light"
|
|
|
|
+ :closable="closeDomainTags"
|
|
|
|
+ color="#f4f4f4"
|
|
|
|
+ round
|
|
|
|
+ class="ml-1 cursor-pointer"
|
|
|
|
+ >
|
|
{{ item.label }}
|
|
{{ item.label }}
|
|
</el-tag>
|
|
</el-tag>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</JCollapse>
|
|
</JCollapse>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="w-[66%] ml-4">
|
|
|
|
+ <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 v-model="formData.triggerFrequency" type="text" :placeholder="t('marketingConfig.triggerFrequencyTip')"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item :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 class="w-full">
|
|
|
|
+ <el-button type="primary" @click="onSubmit" class="w-[80px]">{{ t('common.saveBtn') }}</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </el-form>
|
|
|
|
+ </div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-tabs>
|
|
<DomainEdit v-model:open="domainEditOpen" />
|
|
<DomainEdit v-model:open="domainEditOpen" />
|
|
<ListEdit v-model:open="listEditOpen" />
|
|
<ListEdit v-model:open="listEditOpen" />
|
|
|
|
+ <GroupingEdit v-model:open="groupingEditOpen" :type="openType" />
|
|
|
|
+ <IpListEdit :type="openType" ref="menuDialogRef"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -104,19 +137,69 @@
|
|
import { delObj, pageList, update } from '/@/api/marketing/config';
|
|
import { delObj, pageList, update } from '/@/api/marketing/config';
|
|
import { BasicTableProps, useTable } from '/@/hooks/table';
|
|
import { BasicTableProps, useTable } from '/@/hooks/table';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
+import { useMessage } from '/@/hooks/message';
|
|
|
|
+import {rule} from '/@/utils/validate';
|
|
|
|
+
|
|
|
|
|
|
// 引入组件
|
|
// 引入组件
|
|
const JCollapse = defineAsyncComponent(() => import('/@/components/JCollapse/index.vue'));
|
|
const JCollapse = defineAsyncComponent(() => import('/@/components/JCollapse/index.vue'));
|
|
const Title = defineAsyncComponent(() => import('/@/components/Title/index.vue'));
|
|
const Title = defineAsyncComponent(() => import('/@/components/Title/index.vue'));
|
|
const DomainEdit = defineAsyncComponent(() => import('./components/domainEdit.vue'));
|
|
const DomainEdit = defineAsyncComponent(() => import('./components/domainEdit.vue'));
|
|
const ListEdit = defineAsyncComponent(() => import('./components/listEdit.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 { t } = useI18n();
|
|
// 定义变量内容
|
|
// 定义变量内容
|
|
const activeName = ref('first');
|
|
const activeName = ref('first');
|
|
|
|
+//关闭或打开tabs的关闭按钮
|
|
const closeDomainTags = ref(false);
|
|
const closeDomainTags = ref(false);
|
|
const closeIpTags = ref(false);
|
|
const closeIpTags = ref(false);
|
|
|
|
+
|
|
|
|
+// 弹窗
|
|
const domainEditOpen = ref(false);
|
|
const domainEditOpen = ref(false);
|
|
const listEditOpen = ref(false);
|
|
const listEditOpen = ref(false);
|
|
|
|
+const groupingEditOpen = ref(false);
|
|
|
|
+const ipListEditOpen = ref(false);
|
|
|
|
+
|
|
|
|
+const listSelect = ref([
|
|
|
|
+ {
|
|
|
|
+ value: 'group1',
|
|
|
|
+ label: '跳转链接',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value: 'group2',
|
|
|
|
+ label: '提示信息',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value: 'group3',
|
|
|
|
+ label: '提示并跳转',
|
|
|
|
+ },
|
|
|
|
+]);
|
|
|
|
+const triggerSelect = ref([
|
|
|
|
+ {
|
|
|
|
+ value: 'group1',
|
|
|
|
+ label: '仅一次跳转',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value: 'group2',
|
|
|
|
+ label: '多次跳转',
|
|
|
|
+ },
|
|
|
|
+]);
|
|
|
|
+
|
|
|
|
+const menuDialogFormRef = ref();
|
|
|
|
+const formData = ref({
|
|
|
|
+ jumpMode: '',
|
|
|
|
+ triggerType: '',
|
|
|
|
+ jumpLink: '',
|
|
|
|
+ triggerFrequency:''
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+// // 表单校验规则
|
|
|
|
+const dataRules = reactive({
|
|
|
|
+ jumpLink: [{ validator: rule.url, trigger: 'blur' }],
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+const openType = ref('ip'); // 'ip' or 'domain'
|
|
const data = ref([
|
|
const data = ref([
|
|
{
|
|
{
|
|
title: '分组1',
|
|
title: '分组1',
|
|
@@ -138,11 +221,24 @@ const whiteList = ref([{ label: '站大' }, { label: '站而' }, { label: '站
|
|
|
|
|
|
const menuDialogRef = ref();
|
|
const menuDialogRef = ref();
|
|
const state: BasicTableProps = reactive<BasicTableProps>({
|
|
const state: BasicTableProps = reactive<BasicTableProps>({
|
|
- pageList: pageList, // H
|
|
|
|
|
|
+ // pageList: pageList, // H
|
|
queryForm: {
|
|
queryForm: {
|
|
domain: '',
|
|
domain: '',
|
|
},
|
|
},
|
|
});
|
|
});
|
|
|
|
+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 { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
|
|
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
|
|
|
|
|