feat: 公共组件添加插槽

src/components/JCollapse/index.vue

@@ -12,18 +12,18 @@
 				</div>
 			</template>
 			<div v-if="item.ips" class="">
-				<div v-for="ip in item.ips" :key="ip" class="m-2 text-xs float-left" style="color: #646464">{{ ip }}</div>
+				<div v-for="ip in item.ips" :key="ip" class="m-2 text-sm float-left" style="color: #646464">{{ ip }}</div>
 			</div>
             <slot v-else></slot>
 		</el-collapse-item>
 	</el-collapse>
 </template>
 
-<script setup lang="ts" name="jCollapse">
+<script setup name="jCollapse">
 const emit = defineEmits(['update', 'delete']);
 const props = defineProps({
 	data: {
-		type: Array as () => Array<{ id: string | number; title: string; ips: string[] }>,
+		type: Array,
 		default: () => [],
 	},
 	deleteText: {

src/views/marketing/config/index.vue

@@ -1,36 +1,54 @@
 <template>
 	<div class="layout-padding">
-		<div class="layout-padding-auto layout-padding-view !p-6">
-			<Title :title="t('marketingConfig.ipList')" />
-			<div class="p-4 rounded" style="background-color: #f8f8f8">
-				<el-button type="primary" @click="onAddClick">{{ t('marketingConfig.addIpList') }}</el-button>
-				<JCollapse @update="(item) => console.log(item)" 
-					@delete="(item) => console.log(item)" 
-					:data="data"
-					:deleteText="t('marketingConfig.deleteListText')" 
-					:updateText="t('marketingConfig.updateText')" 
+		<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')" />
+				<div class="p-4 rounded" style="background-color: #f8f8f8">
+					<el-button type="primary" @click="onAddClick">{{ t('marketingConfig.addIpList') }}</el-button>
+					<JCollapse
+						@update="(item) => console.log(item)"
+						@delete="(item) => console.log(item)"
+						:data="data"
+						:deleteText="t('marketingConfig.deleteListText')"
+						:updateText="t('marketingConfig.updateText')"
 					/>
-			</div>
-			<Title class="mt-4" :title="t('marketingConfig.domainList')" />
-			<div class="p-4 rounded" style="background-color: #f8f8f8">
-				<el-button type="primary" @click="onAddClick">{{ t('marketingConfig.addDomainList') }}</el-button>
-				<JCollapse @update="(item) => console.log(item)"
-					:data="data"
-					@delete="(item) => console.log(item)" 
-					: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')" />
+				<div class="p-4 rounded" style="background-color: #f8f8f8">
+					<el-button type="primary" @click="onAddClick">{{ t('marketingConfig.addDomainList') }}</el-button>
+					<JCollapse
+						@update="(item) => console.log(item)"
+						:data="data"
+						@delete="(item) => console.log(item)"
+						:deleteText="t('marketingConfig.deleteListText')"
+						:updateText="t('marketingConfig.updateText')"
 					/>
-			</div>
-			<Title class="mt-4" :title="t('marketingConfig.disposition')" />
-			<div class="p-4 rounded" style="background-color: #f8f8f8">
-				<JCollapse @update="(item) => console.log(item)" 
-					@delete="(item) => console.log(item)" 
-					:deleteText="t('marketingConfig.deleteText')" 
-					:updateText="t('marketingConfig.updateText')" 
-					/>
-			</div>
-		</div>
-		<MenuDialog @refresh="getDataList()" ref="menuDialogRef" />
+				</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')" />
+				<div class="p-4 rounded" style="background-color: #f8f8f8">
+					<JCollapse
+						:data="[
+							{
+								title: 'IP集合',
+								id: '1',
+							}
+						]"
+						@update="(item) => console.log(item)"
+						@delete="(item) => console.log(item)"
+						:deleteText="t('marketingConfig.deleteText')"
+						:updateText="t('marketingConfig.updateText')"
+					>
+						<template #default>
+							<div>11111</div>
+						</template>
+					</JCollapse>
+				</div>
+			</el-tab-pane>
+		</el-tabs>
 	</div>
 </template>
 
@@ -44,6 +62,7 @@ const JCollapse = defineAsyncComponent(() => import('/@/components/JCollapse/ind
 const Title = defineAsyncComponent(() => import('/@/components/Title/index.vue'));
 const { t } = useI18n();
 // 定义变量内容
+const activeName = ref('first');
 
 const data = ref([
 	{
@@ -72,7 +91,6 @@ const state: BasicTableProps = reactive<BasicTableProps>({
 
 const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
 
-
 // 打开编辑菜单弹窗
 const onOpenEditMenu = (type: string, row: any) => {
 	menuDialogRef.value.openDialog(type, row);
@@ -82,5 +100,7 @@ const onOpenEditMenu = (type: string, row: any) => {
 const handleDelete = async (ids: string[]) => {};
 </script>
 <style scoped lang="scss">
-
+.el-tabs__header {
+	margin-bottom: 0;
+}
 </style>