Merge branch 'dev-jcq' into dev-ly

src/components/JCollapse/index.vue

@@ -1,19 +1,20 @@
 
 <template>
 	<el-collapse class="coll-left mt-2">
-		<el-collapse-item v-for="item in data" :key="item.id" :name="item.id">
+		<el-collapse-item v-for="item in props.data" :key="item.id" :name="item.id">
 			<template #title>
-				<div class="flex items-center justify-between">
-					<span>{{ item.title }}</span>
+				<div class="flex items-center justify-between coll-left-title">
+					<div>{{ item.title }}</div>
 					<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>
+						<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 class="">
+			<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>
+            <slot v-else></slot>
 		</el-collapse-item>
 	</el-collapse>
 </template>
@@ -22,43 +23,37 @@
 const emit = defineEmits(['update', 'delete']);
 const props = defineProps({
 	data: {
-		type: Array<string>,
+		type: Array as () => Array<{ id: string | number; title: string; ips: 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'],
+	deleteText: {
+		type: String,
+		default: '删除',
 	},
-	{
-		title: '分组3',
-		id: '3',
-		ips: ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4'],
-	},
-]);
+	updateText: {
+		type: String,
+		default: '修改',
+	},  
+});
+
 const handleDelete = (item) => {
-	emit('delete',  item );
+	emit('delete', item);
 };
 const handleEdit = (item) => {
-	emit('update',  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 lang="scss">
+.coll-left {
+	button {
+		background-color: #f4f5fa !important;
+	}
+	.coll-left-title,span {
+		order: 1;
+		margin-left: 5px;
+	}
+	.el-icon {
+		margin-left: 10px;
+	}
 }
 </style>

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

@@ -8,5 +8,12 @@ export default {
 		app: '应用',
 		inputAppSel: '请选择应用',
 		ipList:'IP分组',
+		addIpList:'添加IP分组',
+		domainList: '域名分组',
+		addDomainList: '添加域名分组',
+		deleteListText: '删除分组',
+		updateText: '修改',
+		disposition:'全局配置',
+		deleteText: '删除'
 	},
 };

src/views/marketing/config/index.vue

@@ -3,8 +3,31 @@
 		<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)" />
+				<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>
+			<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" />
@@ -15,21 +38,31 @@
 import { delObj, pageList, update } from '/@/api/marketing/config';
 import { BasicTableProps, useTable } from '/@/hooks/table';
 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 JCollapse = defineAsyncComponent(() => import('/@/components/JCollapse/index.vue'));
+const Title = defineAsyncComponent(() => import('/@/components/Title/index.vue'));
 const { t } = useI18n();
 // 定义变量内容
-const tableRef = ref();
+
+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 menuDialogRef = ref();
-const queryRef = ref();
-const showSearch = ref(true);
-// 多选rows
-const selectObjs = ref([]) as any;
-// 是否可以多选
-const multiple = ref(true);
 const state: BasicTableProps = reactive<BasicTableProps>({
 	pageList: pageList, // H
 	queryForm: {
@@ -39,21 +72,6 @@ const state: BasicTableProps = reactive<BasicTableProps>({
 
 const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
 
-// 搜索事件
-const query = () => {
-	state.dataList = [];
-	getDataList();
-};
-
-// 修改单条配置信息
-const handleChange = (row: any) => {
-	// update(row).then(() => {
-	// 	useMessage().success(t('common.updateSuccessText'));
-	// 	getDataList();
-	// }).catch((err: any) => {
-	// 	useMessage().error(err.msg);
-	// });
-};
 
 // 打开编辑菜单弹窗
 const onOpenEditMenu = (type: string, row: any) => {
@@ -64,11 +82,5 @@ const onOpenEditMenu = (type: string, row: any) => {
 const handleDelete = async (ids: string[]) => {};
 </script>
 <style scoped lang="scss">
-:deep(.coll-left .el-collapse-item__title) {
-	order: 1;
-	margin-left: 5px;
-}
-:deep(.coll-left .el-icon) {
-	margin-left: 10px;
-}
+
 </style>