|
@@ -0,0 +1,457 @@
|
|
|
+<template>
|
|
|
+ <div class="w-full ml-[-8px] mt-5">
|
|
|
+ <div class="px-4 rounded overflow-y-auto w-full" style="max-height: calc(100vh - 350px)">
|
|
|
+ <div class="flex items-start">
|
|
|
+ <label class="w-[65px] leading-8 text-right">IP</label>
|
|
|
+ <div class="flex gap-2 ml-2 flex-wrap w-57vw]">
|
|
|
+ <el-tag v-for="tag in ipData" :key="tag" size="large" closable :disable-transitions="false" @close="handleClose(tag, 'ip')">
|
|
|
+ {{ tag }}
|
|
|
+ </el-tag>
|
|
|
+ <el-input
|
|
|
+ v-if="ipInputVisible"
|
|
|
+ ref="ipInputRef"
|
|
|
+ v-model="ipInputValue"
|
|
|
+ class="!w-32"
|
|
|
+ @keyup.enter="handleInputConfirm('ip')"
|
|
|
+ @blur="handleInputConfirm('ip')"
|
|
|
+ />
|
|
|
+ <el-button v-else class="button-new-tag" @click="showIpInput"> 添加IP</el-button>
|
|
|
+ <!-- 注册隐藏的表单项以启用校验 -->
|
|
|
+ <el-form-item prop="ip" style="display: none"></el-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="px-4 rounded overflow-y-auto mt-4 w-full" style="max-height: calc(100vh - 350px)">
|
|
|
+ <div class="flex items-start">
|
|
|
+ <label class="w-[66px] leading-8 text-right">添加域名</label>
|
|
|
+ <div class="flex gap-2 ml-2 flex-wrap w-57vw]">
|
|
|
+ <el-tag v-for="tag in domainData" :key="tag" size="large" closable :disable-transitions="false" @close="handleClose(tag, 'domain')">
|
|
|
+ {{ tag }}
|
|
|
+ </el-tag>
|
|
|
+ <el-input
|
|
|
+ v-if="domainInputVisible"
|
|
|
+ ref="domainInputRef"
|
|
|
+ v-model="domainInputValue"
|
|
|
+ class="!w-32"
|
|
|
+ @keyup.enter="handleInputConfirm('domain')"
|
|
|
+ @blur="handleInputConfirm('domain')"
|
|
|
+ placeholder="如: example.com"
|
|
|
+ />
|
|
|
+ <el-button v-else class="button-new-tag" @click="showDomainInput"> 添加域名</el-button>
|
|
|
+ <!-- 注册隐藏的表单项以启用校验 -->
|
|
|
+ <el-form-item prop="domain" style="display: none"></el-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-form ref="ruleFormRef" :model="formData" :rules="dataRules" label-width="90px" class="flex flex-wrap mt-4 w-1/2">
|
|
|
+ <el-form-item label="主动推送" prop="autoPush" class="w-full">
|
|
|
+ <el-switch v-model="formData.autoPush" class="mr-2" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="推送方式" prop="action" class="w-1/2">
|
|
|
+ <JDictSelect v-model:value="formData.action" placeholder="请选择推送方式" dictType="pushMode" :styleClass="'w-full'" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="推送频率" prop="pushFrequency" class="w-1/2">
|
|
|
+ <el-input v-model="formData.pushFrequency" type="text" placeholder="请输入推送频率" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="推送延时" prop="delayPush" class="w-1/2">
|
|
|
+ <div class="flex items-start w-full">
|
|
|
+ <el-input v-model="formData.delayPush" type="text" placeholder="请输入推送延时" />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="推送图片" prop="pushContent" class="w-full">
|
|
|
+ <div class="flex items-start">
|
|
|
+ <el-switch v-model="formData.pushType" class="mr-2" @change="(oldUrl = formData.pushContent), (formData.pushContent = '')" />
|
|
|
+ <Image v-if="formData.pushType" @change="success" :imageUrl="formData.pushContent" @update="success" />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item v-if="!formData.pushType" label="推送内容" prop="pushContent" class="w-full">
|
|
|
+ <el-input v-model="formData.pushContent" type="text" placeholder="请输入推送内容" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-button type="primary" class="ml-5 mt-4 w-[80px]" @click="onSubmit" :disabled="loading">{{ t('common.saveBtn') }}</el-button>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="Edit" lang="ts">
|
|
|
+import { saveRule } from '/@/api/marketing/config';
|
|
|
+import { useI18n } from 'vue-i18n';
|
|
|
+import { useMessage } from '/@/hooks/message';
|
|
|
+let baseURL = import.meta.env.VITE_API_URL;
|
|
|
+
|
|
|
+// 定义子组件向父组件传值/事件
|
|
|
+const emit = defineEmits(['update:open', 'onsuccess']);
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ open: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ rowData: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {},
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+const oldUrl = ref('');
|
|
|
+const success = (val: string) => {
|
|
|
+ formData.value.pushContent = val;
|
|
|
+};
|
|
|
+
|
|
|
+// 引入组件
|
|
|
+const JDictSelect = defineAsyncComponent(() => import('/@/components/JDictSelect/index.vue'));
|
|
|
+const Image = defineAsyncComponent(() => import('/@/components/Upload/Image.vue'));
|
|
|
+const { t } = useI18n();
|
|
|
+// 定义变量内容
|
|
|
+
|
|
|
+const loading = ref(false);
|
|
|
+
|
|
|
+const ruleFormRef = ref();
|
|
|
+
|
|
|
+const formData = ref<any>({
|
|
|
+ ruleName: '',
|
|
|
+ keyword: [],
|
|
|
+ ip: [],
|
|
|
+ domain: [],
|
|
|
+ pushContent: '',
|
|
|
+ pushFrequency: '',
|
|
|
+ action: '1',
|
|
|
+ pushType: false,
|
|
|
+ delayPush: '',
|
|
|
+ autoPush: false,
|
|
|
+});
|
|
|
+
|
|
|
+// // 表单校验规则
|
|
|
+const dataRules = reactive({
|
|
|
+ ruleName: [{ required: true, message: '规则名称不能为空', trigger: 'blur' }],
|
|
|
+ delayPush: [{ required: true, message: '推送延时不能为空', trigger: 'blur' }],
|
|
|
+ pushContent: [{ required: true, message: '推送内容不能为空', trigger: 'blur' }],
|
|
|
+ ip: [
|
|
|
+ {
|
|
|
+ validator: (rule: any, value: any, callback: any) => {
|
|
|
+ if (!ipData.value || ipData.value.length === 0) {
|
|
|
+ callback(new Error('IP不能为空'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ domain: [
|
|
|
+ {
|
|
|
+ validator: (rule: any, value: any, callback: any) => {
|
|
|
+ if (!domainData.value || domainData.value.length === 0) {
|
|
|
+ callback(new Error('域名不能为空'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ pushFrequency: [
|
|
|
+ { required: true, message: '推送频率不能为空', trigger: 'blur' },
|
|
|
+ {
|
|
|
+ pattern: /^(10000|[1-9]\d{0,3}|0)$|^(100%|[1-9]?\d%|0%)$/,
|
|
|
+ message: '请输入 0-10000 的正整数或 0%-100% 的百分比',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+});
|
|
|
+
|
|
|
+//tab相关
|
|
|
+
|
|
|
+const ipInputValue = ref('');
|
|
|
+const domainInputValue = ref('');
|
|
|
+
|
|
|
+const ipInputVisible = ref(false);
|
|
|
+const domainInputVisible = ref(false);
|
|
|
+
|
|
|
+const ipInputRef = ref();
|
|
|
+const domainInputRef = ref();
|
|
|
+
|
|
|
+const ipData = ref<string[]>([]);
|
|
|
+const domainData = ref<string[]>([]);
|
|
|
+
|
|
|
+const showIpInput = () => {
|
|
|
+ ipInputVisible.value = true;
|
|
|
+ nextTick(() => {
|
|
|
+ ipInputRef.value!.input!.focus();
|
|
|
+ });
|
|
|
+};
|
|
|
+const showDomainInput = () => {
|
|
|
+ domainInputVisible.value = true;
|
|
|
+ nextTick(() => {
|
|
|
+ domainInputRef.value!.input!.focus();
|
|
|
+ });
|
|
|
+};
|
|
|
+const handleClose = (tag: string, type: string) => {
|
|
|
+ if (type === 'ip') {
|
|
|
+ ipData.value = ipData.value.filter((item: string) => item !== tag);
|
|
|
+ } else if (type === 'domain') {
|
|
|
+ domainData.value = domainData.value.filter((item: string) => item !== tag);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 自定义校验函数
|
|
|
+const validateIP = (ip: string): boolean => {
|
|
|
+ // 支持IP段格式:192.168.3.4/255
|
|
|
+ if (ip.includes('/')) {
|
|
|
+ const [ipPart, rangePart] = ip.split('/');
|
|
|
+ const range = parseInt(rangePart);
|
|
|
+
|
|
|
+ // 验证IP部分
|
|
|
+ const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$/;
|
|
|
+ if (!ipRegex.test(ipPart)) return false;
|
|
|
+
|
|
|
+ // 验证范围部分(1-255)
|
|
|
+ if (isNaN(range) || range < 1 || range > 255) return false;
|
|
|
+
|
|
|
+ // 验证IP部分的每个段
|
|
|
+ const parts = ipPart.split('.');
|
|
|
+ return parts.every((part) => {
|
|
|
+ const num = parseInt(part);
|
|
|
+ return num >= 0 && num <= 255;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 普通IP格式
|
|
|
+ const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$/;
|
|
|
+ if (!ipRegex.test(ip)) return false;
|
|
|
+
|
|
|
+ const parts = ip.split('.');
|
|
|
+ return parts.every((part) => {
|
|
|
+ const num = parseInt(part);
|
|
|
+ return num >= 0 && num <= 255;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 检查IP是否在某个IP段内
|
|
|
+const isIPInRange = (ip: string, ipRange: string): boolean => {
|
|
|
+ if (!ipRange.includes('/')) return false;
|
|
|
+
|
|
|
+ const [rangeIP, rangePart] = ipRange.split('/');
|
|
|
+ const range = parseInt(rangePart);
|
|
|
+
|
|
|
+ // 将IP转换为数字进行比较
|
|
|
+ const ipToNumber = (ipStr: string): number => {
|
|
|
+ const parts = ipStr.split('.').map((part) => parseInt(part));
|
|
|
+ return (parts[0] << 24) + (parts[1] << 16) + (parts[2] << 8) + parts[3];
|
|
|
+ };
|
|
|
+
|
|
|
+ const ipNum = ipToNumber(ip);
|
|
|
+ const rangeIPNum = ipToNumber(rangeIP);
|
|
|
+ const rangeEndNum = rangeIPNum + range - 1;
|
|
|
+
|
|
|
+ return ipNum >= rangeIPNum && ipNum <= rangeEndNum;
|
|
|
+};
|
|
|
+
|
|
|
+// 检查IP是否与现有IP段冲突
|
|
|
+const isIPConflict = (newIP: string): boolean => {
|
|
|
+ // 如果新添加的是IP段,检查是否与现有IP冲突
|
|
|
+ if (newIP.includes('/')) {
|
|
|
+ const [rangeIP, rangePart] = newIP.split('/');
|
|
|
+ const range = parseInt(rangePart);
|
|
|
+ const rangeIPNum = ipToNumber(rangeIP);
|
|
|
+ const rangeEndNum = rangeIPNum + range - 1;
|
|
|
+
|
|
|
+ // 检查现有IP是否在新IP段内
|
|
|
+ for (const existingIP of ipData.value) {
|
|
|
+ if (!existingIP.includes('/')) {
|
|
|
+ const existingIPNum = ipToNumber(existingIP);
|
|
|
+ if (existingIPNum >= rangeIPNum && existingIPNum <= rangeEndNum) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 如果新添加的是单个IP,检查是否在现有IP段内
|
|
|
+ for (const existingIP of ipData.value) {
|
|
|
+ if (existingIP.includes('/') && isIPInRange(newIP, existingIP)) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return false;
|
|
|
+};
|
|
|
+
|
|
|
+// 辅助函数:将IP转换为数字
|
|
|
+const ipToNumber = (ipStr: string): number => {
|
|
|
+ const parts = ipStr.split('.').map((part) => parseInt(part));
|
|
|
+ return (parts[0] << 24) + (parts[1] << 16) + (parts[2] << 8) + parts[3];
|
|
|
+};
|
|
|
+
|
|
|
+const validateDomain = (domain: string): boolean => {
|
|
|
+ // 移除首尾空格
|
|
|
+ const trimmedDomain = domain.trim();
|
|
|
+
|
|
|
+ // 基本长度检查
|
|
|
+ if (trimmedDomain.length === 0 || trimmedDomain.length > 253) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查是否包含至少一个点号(顶级域名)
|
|
|
+ if (!trimmedDomain.includes('.')) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 分割域名部分
|
|
|
+ const parts = trimmedDomain.split('.');
|
|
|
+
|
|
|
+ // 检查域名部分数量(至少2部分:主域名.顶级域名)
|
|
|
+ if (parts.length < 2) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查每个部分
|
|
|
+ for (let i = 0; i < parts.length; i++) {
|
|
|
+ const part = parts[i];
|
|
|
+
|
|
|
+ // 每个部分不能为空
|
|
|
+ if (part.length === 0) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 顶级域名至少2个字符
|
|
|
+ if (i === parts.length - 1 && part.length < 2) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 每个部分不能超过63个字符
|
|
|
+ if (part.length > 63) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查字符格式:只能包含字母、数字、连字符,不能以连字符开头或结尾
|
|
|
+ const partRegex = /^[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?$/;
|
|
|
+ if (!partRegex.test(part)) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 顶级域名只能包含字母
|
|
|
+ if (i === parts.length - 1) {
|
|
|
+ const tldRegex = /^[a-zA-Z]+$/;
|
|
|
+ if (!tldRegex.test(part)) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return true;
|
|
|
+};
|
|
|
+
|
|
|
+const handleInputConfirm = (type: string) => {
|
|
|
+ if (type === 'ip') {
|
|
|
+ if (ipInputValue.value) {
|
|
|
+ // 校验IP格式
|
|
|
+ if (validateIP(ipInputValue.value)) {
|
|
|
+ // 检查IP冲突
|
|
|
+ if (isIPConflict(ipInputValue.value)) {
|
|
|
+ useMessage().error('该IP与现有IP段冲突,无法添加');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ ipData.value.push(ipInputValue.value);
|
|
|
+ } else {
|
|
|
+ useMessage().error('请输入正确的IP地址格式,支持单个IP(192.168.1.1)或IP段(192.168.1.1/255)');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ipInputVisible.value = false;
|
|
|
+ ipInputValue.value = '';
|
|
|
+ } else if (type === 'domain') {
|
|
|
+ if (domainInputValue.value) {
|
|
|
+ // 校验域名格式
|
|
|
+ if (validateDomain(domainInputValue.value)) {
|
|
|
+ domainData.value.push(domainInputValue.value);
|
|
|
+ } else {
|
|
|
+ useMessage().error('请输入正确的域名格式,例如:example.com、sub.example.com');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ domainInputVisible.value = false;
|
|
|
+ domainInputValue.value = '';
|
|
|
+ }
|
|
|
+};
|
|
|
+const getpushContent = () => {
|
|
|
+ if (formData.value.pushContent && formData.value.pushType) {
|
|
|
+ return formData.value.pushContent.includes('http') ? formData.value.pushContent : baseURL + formData.value.pushContent;
|
|
|
+ } else {
|
|
|
+ return formData.value.pushContent;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const onSubmit = async () => {
|
|
|
+ // 触发表单校验(包含隐藏注册的 keyword/ip/domain 规则)
|
|
|
+ try {
|
|
|
+ await ruleFormRef.value.validate();
|
|
|
+ } catch (e) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let pushFrequency = formData.value.pushFrequency;
|
|
|
+ if (typeof pushFrequency === 'string' && pushFrequency.includes('%')) {
|
|
|
+ // 如果包含百分比符号,去除百分比符号并除以100
|
|
|
+ const num = parseFloat(pushFrequency.replace('%', ''));
|
|
|
+ if (!isNaN(num)) {
|
|
|
+ pushFrequency = num / 100;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ formData.value = {
|
|
|
+ ...formData.value,
|
|
|
+ ip: ipData.value,
|
|
|
+ domain: domainData.value,
|
|
|
+ pushContent: getpushContent(),
|
|
|
+ pushType: formData.value.pushType || false,
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ if (!formData.value.pushContent) {
|
|
|
+ return useMessage().error(formData.value.pushType ? '推送图片不能为空' : '推送内容不能为空');
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ loading.value = true;
|
|
|
+
|
|
|
+ await saveRule({
|
|
|
+ ...formData.value,
|
|
|
+ pushFrequency: pushFrequency.toString(),
|
|
|
+ });
|
|
|
+ useMessage().success(t('common.editSuccessText'));
|
|
|
+ emit('onsuccess');
|
|
|
+ } catch (err: any) {
|
|
|
+ useMessage().error(err.msg);
|
|
|
+ } finally {
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+// 格式化数据展示
|
|
|
+const formatNum = (value: string | number = 0) => {
|
|
|
+ let num = Number(value);
|
|
|
+ if (num > 0 && num < 1) {
|
|
|
+ return (num * 100).toFixed(0) + '%';
|
|
|
+ } else if (num >= 1 && num < 10000) {
|
|
|
+ return num;
|
|
|
+ }
|
|
|
+ return '--';
|
|
|
+};
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.rowData,
|
|
|
+ (val) => {
|
|
|
+ if (val) {
|
|
|
+ formData.value = {
|
|
|
+ ...props.rowData,
|
|
|
+ action: props.rowData?.action || '1',
|
|
|
+ pushFrequency: formatNum(props.rowData?.pushFrequency),
|
|
|
+ };
|
|
|
+ ipData.value = props.rowData.ip || [];
|
|
|
+ domainData.value = props.rowData.domain || [];
|
|
|
+ oldUrl.value = props.rowData.pushContent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+);
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+</style>
|