feat: ip 公共组件

src/components/JCollapse/index.vue

@@ -0,0 +1,64 @@
+
+<template>
+	<el-collapse class="coll-left mt-2">
+		<el-collapse-item v-for="item in data" :key="item.id" :name="item.id">
+			<template #title>
+				<div class="flex items-center justify-between">
+					<span>{{ item.title }}</span>
+					<div class="action-buttons">
+						<el-button size="text" type="primary" @click.stop="handleEdit(item)" class="edit-btn">修改</el-button>
+						<el-button size="text" type="danger" @click.stop="handleDelete(item)" class="delete-btn">删除分组</el-button>
+					</div>
+				</div>
+			</template>
+			<div class="">
+				<div v-for="ip in item.ips" :key="ip" class="m-2 text-xs float-left" style="color: #646464">{{ ip }}</div>
+			</div>
+		</el-collapse-item>
+	</el-collapse>
+</template>
+
+<script setup lang="ts" name="jCollapse">
+const emit = defineEmits(['update', 'delete']);
+const props = defineProps({
+	data: {
+		type: Array<string>,
+		default: () => [],
+	},
+});
+const data = ref([
+	{
+		title: '分组1',
+		id: '1',
+		ips: ['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'],
+	},
+	{
+		title: '分组3',
+		id: '3',
+		ips: ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4'],
+	},
+]);
+const handleDelete = (item) => {
+	emit('delete',  item );
+};
+const handleEdit = (item) => {
+	emit('update',  item );
+};
+</script>
+<style scoped lang="scss">
+:deep(.coll-left button) {
+	background-color: #f4f5fa !important;
+}
+:deep(.coll-left .el-collapse-item__title) {
+	order: 1;
+	margin-left: 5px;
+}
+:deep(.coll-left .el-icon) {
+	margin-left: 10px;
+}
+</style>

src/components/Title/index.vue

@@ -0,0 +1,15 @@
+<template>
+	<div class="text-lg font-medium mb-4">
+		{{ props.title }}
+		<slot></slot>
+	</div>
+</template>
+
+<script setup lang="ts" name="title">
+const props = defineProps({
+	title: {
+		type: String,
+        default: '标题',
+	},
+});
+</script>

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

@@ -7,5 +7,6 @@ export default {
 		inputIPTip: '请输入IP名称',
 		app: '应用',
 		inputAppSel: '请选择应用',
+		ipList:'IP分组',
 	},
 };

src/views/marketing/config/index.vue

@@ -1,84 +1,11 @@
 <template>
 	<div class="layout-padding">
-		<div class="layout-padding-auto layout-padding-view">
-			<el-row shadow="hover" v-show="showSearch" class="ml10">
-				<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
-					<el-form-item :label="$t('marketingConfig.name')" prop="domain">
-						<el-input :placeholder="$t('marketingConfig.inputNameTip')" clearable style="max-width: 180px" v-model="state.queryForm.domain" />
-					</el-form-item>
-          <el-form-item>
-            <el-button @click="query" class="ml10" icon="search" type="primary">
-              {{ $t('common.queryBtn') }}
-            </el-button>
-            <el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
-          </el-form-item>
-				</el-form>
-			</el-row>
-			<el-row>
-				<div class="mb8" style="width: 100%">
-					<right-toolbar
-						v-model:showSearch="showSearch"
-						class="ml10"
-						style="float: right; margin-right: 20px"
-						@queryTable="getDataList"
-					></right-toolbar>
-				</div>
-			</el-row>
-			<el-table
-				ref="tableRef"
-				:data="state.dataList"
-				row-key="path"
-				style="width: 100%"
-				v-loading="state.loading"
-				border
-				:cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle?.headerCellStyle"
-			>
-				<el-table-column :label="$t('marketingConfig.name')" fixed prop="appName" width="280" show-overflow-tooltip>
-					<template #default="{ row }">
-						<el-link :href="row.url">{{ row.appName }}</el-link>
-					</template>
-				</el-table-column>
-				<el-table-column label="营销投放" fixed prop="isMarketing" width="120">
-					<template #default="{ row }">
-						<el-switch v-model="row.isMarketing" inline-prompt active-text="开启" inactive-text="关闭" :active-value="1" :inactive-value="0" @change="handleChange(row)" />
-					</template>
-				</el-table-column>
-				<el-table-column label="域名限制" fixed prop="isHttp" width="120">
-					<template #default="{ row }">
-						<el-switch v-model="row.isHttp" inline-prompt active-text="开启" inactive-text="关闭" :active-value="1" :inactive-value="0" @change="handleChange(row)" />
-					</template>
-				</el-table-column>
-				<el-table-column label="域名集合" fixed prop="https" show-overflow-tooltip>
-					<template #default="{ row }">
-						<div style="display: flex;flex-wrap: wrap;margin-left: 10%;">
-							<template v-for="(item, index) in row.https" :key="index">
-								<div style="margin-right: 20px;">{{ item }};</div>
-							</template>
-						</div>
-					</template>
-				</el-table-column>
-				<el-table-column label="ip集合" fixed prop="ips" show-overflow-tooltip>
-					<template #default="{ row }">
-						<div style="display: flex;flex-wrap: wrap; margin-left: 10%;">
-							<template v-for="(item, index) in row.ips" :key="index">
-								<div style="margin-right: 20px;">{{ item }};</div>
-							</template>
-						</div>
-					</template>
-				</el-table-column>
-				<el-table-column :label="$t('common.action')" width="250">
-					<template #default="scope">
-						<el-button icon="edit-pen" @click="onOpenEditMenu('edit', scope.row, 'domain')" text type="primary" v-auth="'sys_menu_edit'"
-							>域名
-						</el-button>
-						<el-button icon="edit-pen" @click="onOpenEditMenu('edit', scope.row, 'ip')" text type="primary" v-auth="'sys_menu_edit'"
-							>IP
-						</el-button>
-					</template>
-				</el-table-column>
-			</el-table>
-			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+		<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('common.add') }}</el-button>
+				<JCollapse  @update="(item) => console.log(item)" @delete="(item) => console.log(item)" />
+			</div>
 		</div>
 		<MenuDialog @refresh="getDataList()" ref="menuDialogRef" />
 	</div>
@@ -87,8 +14,10 @@
 <script lang="ts" name="marketingConfig" setup>
 import { delObj, pageList, update } from '/@/api/marketing/config';
 import { BasicTableProps, useTable } from '/@/hooks/table';
-import { useMessage, useMessageBox } from '/@/hooks/message';
 import { useI18n } from 'vue-i18n';
+import Title from '/@/components/Title/index.vue';
+import JCollapse from '/@/components/JCollapse/index.vue';
+
 // 引入组件
 const MenuDialog = defineAsyncComponent(() => import('./form.vue'));
 const { t } = useI18n();
@@ -105,15 +34,15 @@ const state: BasicTableProps = reactive<BasicTableProps>({
 	pageList: pageList, // H
 	queryForm: {
 		domain: '',
-	}
+	},
 });
 
 const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
 
 // 搜索事件
 const query = () => {
-  state.dataList = [];
-  getDataList();
+	state.dataList = [];
+	getDataList();
 };
 
 // 修改单条配置信息
@@ -126,41 +55,20 @@ const handleChange = (row: any) => {
 	// });
 };
 
-// 清空搜索条件
-const resetQuery = () => {
-  queryRef.value.resetFields();
-  state.dataList = [];
-  getDataList();
-};
 // 打开编辑菜单弹窗
 const onOpenEditMenu = (type: string, row: any) => {
 	menuDialogRef.value.openDialog(type, row);
 };
 
 // 删除操作
-const handleDelete = async (ids: string[]) => {
-	try {
-		await useMessageBox().confirm(t('common.delConfirmText'));
-	} catch {
-		return;
-	}
-
-	try {
-		await delObj(ids);
-		getDataList();
-		useMessage().success(t('common.delSuccessText'));
-	} catch (err: any) {
-		useMessage().error(err.msg);
-	}
-};
+const handleDelete = async (ids: string[]) => {};
 </script>
-<style scoped>
-:deep(.el-link__inner) {
-	display: inline-block;
-	width: 100%;
-	justify-content: start;
+<style scoped lang="scss">
+:deep(.coll-left .el-collapse-item__title) {
+	order: 1;
+	margin-left: 5px;
 }
-:deep(.el-link.is-underline:hover:after) {
-	display: none;
+:deep(.coll-left .el-icon) {
+	margin-left: 10px;
 }
 </style>