fix: 合并前

src/api/marketing/config.ts

@@ -1,9 +1,16 @@
 import request from '/@/utils/request';
 
-export const pageList = (params?: Object) => {
+export const pageListDomain = () => {
 	return request({
-		// url: '/admin/marketing/config/page',
-		url: 'https://m1.apifoxmock.com/m1/6687089-6396408-default/marketing/config/page',
+		url: '/marketing/config/getDomainGroup',
+		// url: 'https://m1.apifoxmock.com/m1/6687089-6396408-default/marketing/config/page',
+		method: 'get',
+	});
+};
+export const pageListIp = (params?: Object) => {
+	return request({
+		url: '/admin/marketing/config/getDomainGroup',
+		// url: 'https://m1.apifoxmock.com/m1/6687089-6396408-default/marketing/config/page',
 		method: 'get',
 		params,
 	});

src/components/JCollapse/index.vue

@@ -1,26 +1,30 @@
 
 <template>
-	<el-collapse v-model="innerActiveNames" class="coll-left mt-2">
+	<el-collapse v-model="innerActiveNames" class="coll-left mt-2 border">
 		<el-collapse-item v-for="item in props.data" :key="item.id" :name="item.id">
 			<template #title>
 				<div class="collapse-title flex items-center justify-between coll-left-title">
-					<div>{{ item.title }}</div>
+					<div style="font-size: 14px">{{ item.title }}</div>
 					<div class="action-buttons">
-						<el-button size="text" type="primary" @click.stop="handleEdit(item)" class="edit-btn">{{props.updateText}}</el-button>
-						<el-button size="text" type="danger" @click.stop="handleDelete(item)" class="delete-btn">{{props.deleteText}}</el-button>
+						<el-button size="text" type="primary" @click.stop="handleEdit(item)" class="edit-btn">{{ props.updateText }}</el-button>
+						<el-button size="text" type="danger" @click.stop="handleDelete(item)" class="delete-btn">{{ props.deleteText }}</el-button>
 					</div>
 				</div>
 			</template>
 			<div v-if="item.ips" class="">
-				<div v-for="ip in item.ips" :key="ip" class="m-2 text-sm float-left" style="color: #646464">{{ ip }}</div>
+				<div v-if="item.ips.length && typeof item.ips[0] === 'object'">
+					<div v-for="ip in item.ips" :key="ip.id" class="m-2 float-left" style="color: #646464; font-size: 14px">{{ ip.value }}</div>
+				</div>
+				<div v-else>
+					<div v-for="ip in item.ips" :key="ip" class="m-2 float-left" style="color: #646464; font-size: 14px">{{ ip }}</div>
+				</div>
 			</div>
-            <slot v-else></slot>
+			<slot v-else></slot>
 		</el-collapse-item>
 	</el-collapse>
 </template>
 
 <script setup name="jCollapse">
-const activeNames = ref(['1'])
 const emit = defineEmits(['update', 'delete']);
 const props = defineProps({
 	data: {
@@ -34,11 +38,11 @@ const props = defineProps({
 	updateText: {
 		type: String,
 		default: '修改',
-	},  
+	},
 	activeNames: {
 		type: Array,
 		default: () => [],
-	}
+	},
 });
 
 const handleDelete = (item) => {
@@ -48,9 +52,9 @@ const handleEdit = (item) => {
 	emit('update', item);
 };
 const innerActiveNames = computed({
-  get: () => props.activeNames,
-  set: (val) => emit('update:activeNames', val)
-})
+	get: () => props.activeNames,
+	set: (val) => emit('update:activeNames', val),
+});
 </script>
 <style lang="scss">
 .collapse-title {
@@ -65,7 +69,8 @@ const innerActiveNames = computed({
 	button {
 		background-color: #f4f5fa !important;
 	}
-	.coll-left-title,span.el-collapse-item__title {
+	.coll-left-title,
+	span.el-collapse-item__title {
 		order: 1;
 		margin-left: 5px;
 	}

src/components/Title/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="text-lg font-medium ">
+	<div class=" font-medium " style="font-size: 16px;">
 		{{ props.title }}
 		<slot></slot>
 	</div>

src/views/marketing/config/components/ipListEdit.vue

@@ -8,6 +8,9 @@
 		draggable
 	>
 		<el-form ref="menuDialogFormRef" :model="state.ruleForm" label-width="90px" v-loading="loading">
+            <el-form-item label="名称" prop="name">
+				<el-input class="!w-[300px]" v-model="state.ruleForm.name" placeholder="请输入名称"></el-input>
+			</el-form-item>
 			<el-form-item  prop="configs">
 				<template #label>
 					<div class="flex items-center">
@@ -18,7 +21,7 @@
                     </div>
 				</template>
 				<div v-for="(item, index) in state.ruleForm.list" :key="item.index" class="flex items-center mb-2 text-sm font-normal justify-start w-full">
-					<el-input style="width: 300px; margin-right: 20px" v-model="item.val" clearable :placeholder="t('marketingConfig.inputIPTip')"></el-input>
+					<el-input class="!w-[300px] mr-10" v-model="item.val" clearable :placeholder="t('marketingConfig.inputIPTip')"></el-input>
 					<div class="config-actions w-[50px] flex items-center justify-between">
 						<svg
 							v-if="index === state.ruleForm.list.length - 1"

src/views/marketing/config/i18n/zh-cn.ts

@@ -4,7 +4,7 @@ export default {
 		name: '应用名称',
 		config: '配置方案',
 		inputNameTip: '请输入应用名称名称',
-		inputIPTip: '请输入IP名称',
+		inputIPTip: '请输入IP地址',
 		app: '应用',
 		inputAppSel: '请选择应用',
 		ipList:'IP分组',
@@ -36,6 +36,7 @@ export default {
 		jumpLinkTip: '请输入跳转链接',
 		triggerFrequency: '触发频率',
 		triggerFrequencyTip: '请输入触发频率',
-
+		prompt: '提示信息',
+		promptTip: '请输入提示信息',
 	},
 };

src/views/marketing/config/index.vue

@@ -20,9 +20,8 @@
 				<div class="p-4 rounded">
 					<el-button type="primary" @click="onClickAdd('domain')">{{ t('marketingConfig.addDomainList') }}</el-button>
 					<JCollapse
-						:activeNames="['1', '2', '3']"
 						@update="(item) => onClickEdit(item, 'domain')"
-						:data="data"
+						:data="domainData"
 						@delete="(item) => console.log(item)"
 						:deleteText="t('marketingConfig.deleteListText')"
 						:updateText="t('marketingConfig.updateText')"
@@ -84,7 +83,7 @@
 						:updateText="t('marketingConfig.addDomain')"
 					>
 						<template #default>
-							<div class="border-b p-2 items-center flex flex-wrap">
+							<div class="p-2 items-center flex flex-wrap">
 								<el-tag
 									v-for="item in whiteList"
 									:key="item"
@@ -100,7 +99,7 @@
 						</template>
 					</JCollapse>
 				</div>
-				<div class="w-[66%] ml-4">
+				<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>
@@ -112,12 +111,35 @@
 								<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 justify-start flex">
-							<el-input-number v-model="formData.triggerFrequency" class="!w-40" :min="1" :max="20" controls-position="right" :placeholder="t('marketingConfig.triggerFrequencyTip')"/>
-						</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 :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>
@@ -133,11 +155,12 @@
 </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'));
@@ -157,19 +180,20 @@ const closeIpTags = ref(false);
 const domainEditOpen = ref(false);
 const listEditOpen = ref(false);
 const groupingEditOpen = ref(false);
-const ipListEditOpen = ref(false);
+// const ipListEditOpen = ref(false);
+const domainData = ref([]);
 
 const listSelect = ref([
 	{
-		value: 'group1',
+		value: '1',
 		label: '跳转链接',
 	},
 	{
-		value: 'group2',
+		value: '2',
 		label: '提示信息',
 	},
 	{
-		value: 'group3',
+		value: '3',
 		label: '提示并跳转',
 	},
 ]);
@@ -186,10 +210,11 @@ const triggerSelect = ref([
 
 const menuDialogFormRef = ref();
 const formData = ref({
-	jumpMode: '',
+	jumpMode: '1',
 	triggerType: '',
 	jumpLink: '',
 	triggerFrequency: '',
+	prompt: '',
 });
 
 // // 表单校验规则
@@ -218,12 +243,11 @@ const data = ref([
 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 onSubmit = () => {
 	useMessage().success(t(formData.value ? 'common.editSuccessText' : 'common.addSuccessText'));
 };
@@ -238,15 +262,32 @@ const onClickEdit = (item: any, type: string) => {
 	onOpenEditMenu(type, item);
 };
 
-const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
-
 // 打开编辑菜单弹窗
 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,
+				ips: item.domains.map((items :any) => {
+					return{
+						id:items.id,
+						value:items.domain
+					}
+				}),
+			};
+		});
+	console.log(domainData.value);
+
+	});
+	
+	//获取IP列表
+});
 </script>
 <style  lang="scss">
 .is-top {
@@ -255,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>