data-marketing-platform/src/views/marketing/apps/components/ipEdit.vue

<template>
	<el-dialog :title="type === 'Edit' ? '修改IP' : '添加IP'" width="600" v-model="props.open" :close-on-click-modal="false"
		:destroy-on-close="true" @close="onCancel" draggable>
		<el-form style="height: 128px;" ref="menuDialogFormRef" :rules="dataRules" :model="state.ruleForm" v-loading="loading">
			<el-form-item label="" prop="ipType">
				<el-radio-group v-model="state.ruleForm.ipType">
					<el-radio :value="1">白名单</el-radio>
					<el-radio :value="2">黑名单</el-radio>
				</el-radio-group>
			</el-form-item>
			<div class="custom-style">
				<el-segmented v-model="state.ruleForm.sourceTypeText" :options="[t('marketingConfig.grouping'), t('marketingConfig.ipSegment')]"
					size="default">
					<template #default="scope">
						<div style="min-width: 50px; line-height: 32px;">
							{{ scope.item }}
							<el-icon v-if="scope.item === t('marketingConfig.ipSegment')" size="12" style="vertical-align: middle;">
								<el-tooltip effect="light" content="输入127.0.0.1/24格式代表网段" placement="top">
									<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
										<path d="M7 14C8.93298 14 10.683 13.2165 11.9497 11.9497C13.2165 10.683 14 8.93298 14 7C14 5.06702 13.2165 3.31702 11.9497 2.05025C10.683 0.783503 8.93298 0 7 0C5.06702 0 3.31702 0.783503 2.05025 2.05025C0.783503 3.31702 0 5.06702 0 7C0 8.93298 0.783503 10.683 2.05025 11.9497C3.31702 13.2165 5.06702 14 7 14Z" fill="#1B4D88" fill-opacity="0.4"/>
										<path fill-rule="evenodd" clip-rule="evenodd" d="M6.99957 1.94434C7.5365 1.94434 7.97179 2.37962 7.97179 2.91656C7.97179 3.4535 7.5365 3.88878 6.99957 3.88878C6.46263 3.88878 6.02734 3.4535 6.02734 2.91656C6.02734 2.37962 6.46263 1.94434 6.99957 1.94434Z" fill="white"/>
										<path d="M6.99957 1.94434C7.5365 1.94434 7.97179 2.37962 7.97179 2.91656C7.97179 3.4535 7.5365 3.88878 6.99957 3.88878C6.46263 3.88878 6.02734 3.4535 6.02734 2.91656C6.02734 2.37962 6.46263 1.94434 6.99957 1.94434ZM6.99957 2.33322C6.6774 2.33322 6.41623 2.5944 6.41623 2.91656C6.41623 3.23872 6.6774 3.49989 6.99957 3.49989C7.32173 3.49989 7.5829 3.23872 7.5829 2.91656C7.5829 2.5944 7.32173 2.33322 6.99957 2.33322Z" fill="white"/>
										<path d="M7.19477 10.8888V5.44434H6.80588H6.41699" fill="white"/>
										<path d="M6.41645 10.8887V6.22206C5.98689 6.22206 5.63867 5.87384 5.63867 5.44428C5.63867 5.01473 5.98689 4.6665 6.41645 4.6665H7.19423L7.27398 4.6703C7.66608 4.71023 7.97201 5.04164 7.97201 5.44428V10.8887C7.97201 11.3183 7.70354 11.3447 7.27398 11.3447C6.84443 11.3447 6.41645 11.3183 6.41645 10.8887Z" fill="white"/>
										<path d="M8.55566 10C8.98522 10 9.33344 10.3482 9.33344 10.7778C9.33344 11.2073 8.98522 11.5556 8.55566 11.5556H5.83344C5.40389 11.5556 5.05566 11.2073 5.05566 10.7778C5.05566 10.3482 5.40389 10 5.83344 10H8.55566Z" fill="white"/>
									</svg>
								</el-tooltip>
							</el-icon>
						</div>
					</template>
				</el-segmented>
			</div>
			<el-form-item label="" prop="groupId" v-if="state.ruleForm.sourceTypeText === t('marketingConfig.grouping')">
				<el-select v-model="state.ruleForm.groupId" :placeholder="t('marketingConfig.groupingTip')"
					multiple clearable collapse-tags collapse-tags-tooltip :max-collapse-tags="5">
					<el-option v-for="item in selectData" :key="item.id" :label="item.groupName" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="" prop="ip" v-else>
				<el-input v-model="state.ruleForm.ip" type="text" :placeholder="t('marketingConfig.ipTip')"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel">{{ t('common.cancelButtonText') }}</el-button>
				<el-button type="primary" @click="onSubmit" :disabled="loading">{{ t('common.confirmButtonText')
					}}</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup name="systemMenuDialog" lang="ts">
import { useI18n } from 'vue-i18n';
import { useMessage } from '/@/hooks/message';
import {
	pageListIp,
} from '/@/api/marketing/config';
import { ipSplicing } from '/@/utils/ipUpdate';
import { rule } from '/@/utils/validate';
import { parseIpRange } from '/@/utils/ipUpdate';

interface IpItem {
	id: Number;
	groupId: Number;
	groupName: String;
	ipMode: Number;
	ip: String;
	startIp: String;
	endIp: String;
	sourceType: Number;
	list: {
		id: Number;
		value: String;
	}[];
}

// 定义子组件向父组件传值/事件
const emit = defineEmits(['update:open', 'onsuccess']);
const { t } = useI18n();

// 定义变量内容
const loading = ref(false);
const type = ref('add'); // 'add' or 'edit'
const menuDialogFormRef = ref();
const selectData = ref<IpItem[]>([]);
const selectedObjects = ref<IpItem[]>([]);

// 定义需要的数据
const state = reactive({
	ruleForm: {
		ipType: 1, // 1: 白名单, 2: 黑名单
		sourceType: 1,
		sourceTypeText: t('marketingConfig.grouping'),
		groupId: [] as IpItem[],
		ipMode: 1,
		groupName:'',
		startIp: '',
		endIp: '',
		ip: '',
	},
});

const props = defineProps({
	open: {
		type: Boolean,
		default: false,
	},
});

// 表单校验规则
const dataRules = reactive({
	groupId: [{ required: true, message: '分组不能为空', trigger: 'blur' }],
	ip: [
		{ required: rule.ip, message: 'IP不能为空', trigger: 'blur' },
		{ validator: rule.ip, trigger: 'blur' },
	],
});

// 获取ip列表
const getIpData = async () => {
	await pageListIp().then((val) => {
		selectData.value = val.data.map((item) => {
			return {
				...item,
				title: item.groupName,
				id: item.id,
				list: item.ips.map((items) => {
					return {
						...items,
						id: items.id,
						value: ipSplicing(items.startIp, items.endIp),
					};
				}),
			};
		});
	});
};

watchEffect(() => {
  if (props.open) {
	state.ruleForm.groupId = [];
	state.ruleForm.ip = '';
	state.ruleForm.ipType = 1;
	getIpData();
  }
})

const onCancel = () => {
	emit('update:open', false);
};

// 保存数据
const onSubmit = async () => {
	const lis = parseIpRange(state.ruleForm.ip);
	state.ruleForm.startIp = lis.start;
	state.ruleForm.endIp = lis.end;
	if (lis.end !== '') {
		state.ruleForm.ipMode = 2;
	}
	
	state.ruleForm.sourceType = state.ruleForm.sourceTypeText === t('marketingConfig.grouping') ? 1 : 2;
	if (state.ruleForm.sourceType == 1 && state.ruleForm.groupId.length == 0) {
		return useMessage().error('请选择分组');
	} else if (state.ruleForm.sourceType == 2 && state.ruleForm.ip == '') {
		return useMessage().error('ip不能为空');
	}
	
	try {
		loading.value = true;
		if (state.ruleForm.sourceTypeText == t('marketingConfig.grouping')) {
			selectedObjects.value = [];
			selectedObjects.value = selectData.value.filter(item => state.ruleForm.groupId.includes(item.id));
			emit('onsuccess', selectedObjects.value, state.ruleForm.sourceType, state.ruleForm.ipType + '');
		}else if(state.ruleForm.startIp.length > 0) {
			emit('onsuccess', [state.ruleForm], state.ruleForm.sourceType, state.ruleForm.ipType + '');
		}
		onCancel();
	} catch (err) {
		console.log(err);
		useMessage().error(err.msg);
	} finally {
		loading.value = false;
	}
};

</script>
<style>
.apps-loadmore.el-select-dropdown .el-scrollbar__wrap {
	height: 330px !important;
}

.custom-style {
	margin-top: 14px;

	.el-segmented__item {
		border-right: 1px solid rgba(230, 230, 230, 1);
		min-width: 72px;
		flex: unset;
	}

	.el-segmented {
		border: 1px solid rgba(230, 230, 230, 1);
		border-bottom: unset;
		--el-segmented-bg-color: #ffffff;
		--el-segmented-item-hover-bg-color: rgba(22, 122, 240, 0.1);
		--el-segmented-item-selected-color: rgba(22, 122, 240, 1);
		--el-segmented-item-hover-color: rgba(22, 122, 240, 1);
		--el-segmented-item-selected-bg-color: rgba(22, 122, 240, 0.1);
		--el-border-radius-base: 4px 4px 0 0;
		--el-segmented-padding: 0;
	}
}
</style>